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

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

@@ -0,0 +1,47 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+require("core-js/modules/es.array.map.js");
+var _error_utils = require("../../shared/error_utils");
+/** @module @airtable/blocks/ui: expandRecordList */ /** */
+
+/**
+ * Options object for expanding a record list.
+ */
+
+/**
+ * Expands a list of records in the Airtable UI.
+ *
+ * @param records The records to expand. Duplicate records will be removed.
+ * @param opts An optional options object.
+ *
+ * @example
+ * ```js
+ * import {expandRecordList} from '@airtable/blocks/ui';
+ * expandRecordList([record1, record2, record3]);
+ *
+ * expandRecordList([record1, record2], {
+ *     fields: [field1, field2],
+ * });
+ * ```
+ * @docsPath UI/utils/expandRecordList
+ */
+function expandRecordList(records, opts) {
+  if (records.length === 0) {
+    return;
+  }
+  var tableId = records[0].parentTable.id;
+  var recordIds = records.map(record => {
+    (0, _error_utils.invariant)(record.parentTable.id === tableId, 'all records must belong to the same table');
+    return record.id;
+  });
+  var fieldIds = opts && opts.fields ? opts.fields.map(field => {
+    (0, _error_utils.invariant)(field.parentTable.id === tableId, 'all fields must belong to the same table');
+    return field.id;
+  }) : null;
+  records[0].parentTable.parentBase.__sdk.__airtableInterface.expandRecordList(tableId, recordIds, fieldIds);
+}
+var _default = exports.default = expandRecordList;

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

@@ -0,0 +1,100 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
+require("core-js/modules/es.array.map.js");
+var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
+var _error_utils = require("../../shared/error_utils");
+/** @module @airtable/blocks/ui: expandRecordPickerAsync */
+/** */
+/**
+ * Options object for expanding a record picker.
+ */
+/**
+ * Expands a list of records in the Airtable UI, and prompts the user to pick
+ * one. The selected record is returned to the extension, and the modal is
+ * automatically closed.
+ *
+ * If the user dismisses the modal, or another one is opened before this one
+ * has been closed, it will return null.
+ *
+ * Returns a promise that resolves to the record chosen by the user, or null.
+ *
+ * @param records the records the user can pick from. Duplicate records will be removed.
+ * @param opts An optional options object.
+ * @example
+ * ```js
+ * import {expandRecordPickerAsync} from '@airtable/blocks/ui';
+ *
+ * async function pickRecordsAsync() {
+ *     const recordA = await expandRecordPickerAsync([record1, record2, record3]);
+ *     if (recordA !== null) {
+ *         alert(recordA.name);
+ *     } else {
+ *         alert('no record picked');
+ *     }
+ *
+ *     const recordB = await expandRecordPickerAsync([record1, record2], {
+ *         fields: [field1, field2],
+ *     });
+ * }
+ * ```
+ * @docsPath UI/utils/expandRecordPickerAsync
+ */
+function expandRecordPickerAsync(_x, _x2) {
+  return _expandRecordPickerAsync.apply(this, arguments);
+}
+function _expandRecordPickerAsync() {
+  _expandRecordPickerAsync = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee(records, opts) {
+    var tableId, sdk, recordIds, fieldIds, shouldAllowCreatingRecord, chosenRecordId, table;
+    return _regenerator.default.wrap(function _callee$(_context) {
+      while (1) switch (_context.prev = _context.next) {
+        case 0:
+          if (!(records.length === 0)) {
+            _context.next = 2;
+            break;
+          }
+          return _context.abrupt("return", null);
+        case 2:
+          tableId = records[0].parentTable.id;
+          sdk = records[0].parentTable.parentBase.__sdk;
+          recordIds = records.map(record => {
+            (0, _error_utils.invariant)(record.parentTable.id === tableId, 'all records must belong to the same table');
+            return record.id;
+          });
+          fieldIds = opts && opts.fields ? opts.fields.map(field => {
+            (0, _error_utils.invariant)(field.parentTable.id === tableId, 'all fields must belong to the same table');
+            return field.id;
+          }) : null;
+          shouldAllowCreatingRecord = !!opts && !!opts.shouldAllowCreatingRecord;
+          _context.next = 9;
+          return sdk.__airtableInterface.expandRecordPickerAsync(tableId, recordIds, fieldIds, shouldAllowCreatingRecord);
+        case 9:
+          chosenRecordId = _context.sent;
+          if (chosenRecordId) {
+            _context.next = 12;
+            break;
+          }
+          return _context.abrupt("return", null);
+        case 12:
+          table = sdk.base.getTableByIdIfExists(tableId);
+          if (table) {
+            _context.next = 15;
+            break;
+          }
+          return _context.abrupt("return", null);
+        case 15:
+          return _context.abrupt("return", sdk.base.__getRecordStore(table.id).getRecordByIdIfExists(chosenRecordId));
+        case 16:
+        case "end":
+          return _context.stop();
+      }
+    }, _callee);
+  }));
+  return _expandRecordPickerAsync.apply(this, arguments);
+}
+var _default = exports.default = expandRecordPickerAsync;

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

@@ -0,0 +1,62 @@
+"use strict";
+
+require("core-js/modules/es.symbol.js");
+require("core-js/modules/es.array.filter.js");
+require("core-js/modules/es.array.iterator.js");
+require("core-js/modules/es.object.get-own-property-descriptors.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.for-each.js");
+require("core-js/modules/web.dom-collections.iterator.js");
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var React = _interopRequireWildcard(require("react"));
+var _field = _interopRequireDefault(require("../models/field"));
+var _sdk_context = require("../../shared/ui/sdk_context");
+var _icon = _interopRequireWildcard(require("./icon"));
+var _excluded = ["field"];
+/** @module @airtable/blocks/ui: FieldIcon */
+/** */
+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; }
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+/**
+ * Props for the {@link FieldIcon} component. Also accepts:
+ * * {@link IconStyleProps}
+ *
+ * @docsPath UI/components/FieldIcon
+ */
+// TODO (stephen): inherit shared props without inheriting style props
+
+/**
+ * A vector icon for a field’s type.
+ *
+ * [[ Story id="fieldicon--example" title="FieldIcon example" ]]
+ *
+ * @docsPath UI/components/FieldIcon
+ * @component
+ */
+var FieldIcon = props => {
+  var field = props.field,
+    restOfProps = (0, _objectWithoutProperties2.default)(props, _excluded);
+  var sdk = (0, _sdk_context.useSdk)();
+  var airtableInterface = sdk.__airtableInterface;
+  var appInterface = sdk.__appInterface;
+  var uiConfig = airtableInterface.fieldTypeProvider.getUiConfig(appInterface, field._data);
+  var name = uiConfig.iconName;
+  return /*#__PURE__*/React.createElement(_icon.default, (0, _extends2.default)({
+    name: name
+  }, restOfProps));
+};
+FieldIcon.propTypes = _objectSpread({
+  field: _propTypes.default.instanceOf(_field.default).isRequired
+}, _icon.sharedIconPropTypes);
+var _default = exports.default = FieldIcon;

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

@@ -0,0 +1,143 @@
+"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.iterator.js");
+require("core-js/modules/es.array.slice.js");
+require("core-js/modules/es.object.get-own-property-descriptors.js");
+require("core-js/modules/es.regexp.exec.js");
+require("core-js/modules/es.regexp.to-string.js");
+require("core-js/modules/es.weak-map.js");
+require("core-js/modules/web.dom-collections.for-each.js");
+require("core-js/modules/web.dom-collections.iterator.js");
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.sharedFieldPickerPropTypes = exports.default = void 0;
+require("core-js/modules/es.array.filter.js");
+require("core-js/modules/es.array.sort.js");
+require("core-js/modules/es.object.to-string.js");
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var React = _interopRequireWildcard(require("react"));
+var _private_utils = require("../../shared/private_utils");
+var _field = _interopRequireDefault(require("../models/field"));
+var _table = _interopRequireDefault(require("../models/table"));
+var _field2 = require("../../shared/types/field");
+var _use_watchable = _interopRequireDefault(require("../../shared/ui/use_watchable"));
+var _sdk_context = require("../../shared/ui/sdk_context");
+var _select = require("./select");
+var _model_picker_select = _interopRequireDefault(require("./model_picker_select"));
+var _excluded = ["table", "field", "shouldAllowPickingNone", "allowedTypes", "placeholder", "onChange"];
+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; }
+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; }
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; } /** @module @airtable/blocks/ui: FieldPicker */ /** */
+/**
+ * Props shared between the {@link FieldPicker} and {@link FieldPickerSynced} components.
+ */
+
+// Shared with `FieldPicker` and `FieldPickerSynced`.
+var sharedFieldPickerPropTypes = exports.sharedFieldPickerPropTypes = _objectSpread({
+  table: _propTypes.default.instanceOf(_table.default),
+  allowedTypes: _propTypes.default.arrayOf(_propTypes.default.oneOf((0, _private_utils.values)(_field2.FieldType)).isRequired),
+  shouldAllowPickingNone: _propTypes.default.bool,
+  placeholder: _propTypes.default.string,
+  onChange: _propTypes.default.func
+}, _select.sharedSelectBasePropTypes);
+
+/**
+ * Props for the {@link FieldPicker} component. Also accepts:
+ * * {@link SelectStyleProps}
+ *
+ * @docsPath UI/components/FieldPicker
+ */
+
+/**
+ * Dropdown menu component for selecting fields.
+ *
+ * [[ Story id="modelpickers--fieldpicker-example" title="Field picker example" ]]
+ *
+ * @docsPath UI/components/FieldPicker
+ * @component
+ */
+var FieldPicker = (props, ref) => {
+  var table = props.table,
+    selectedField = props.field,
+    shouldAllowPickingNone = props.shouldAllowPickingNone,
+    allowedTypes = props.allowedTypes,
+    placeholder = props.placeholder,
+    onChange = props.onChange,
+    restOfProps = (0, _objectWithoutProperties2.default)(props, _excluded);
+  var sdk = (0, _sdk_context.useSdk)();
+  (0, _use_watchable.default)(sdk.base, ['tables']);
+  (0, _use_watchable.default)(table, ['fields']);
+  if (!table || table.isDeleted) {
+    return null;
+  }
+  function _onChange(fieldId) {
+    if (onChange) {
+      var field = table && !table.isDeleted && fieldId ? table.getFieldByIdIfExists(fieldId) : null;
+      onChange(field);
+    }
+  }
+  var placeholderToUse;
+  if (placeholder === undefined) {
+    // Let's set a good default value for the placeholder, depending
+    // on the shouldAllowPickingNone flag.
+    placeholderToUse = shouldAllowPickingNone ? 'None' : 'Pick a field...';
+  } else {
+    placeholderToUse = placeholder;
+  }
+  var allowedTypesSet = {};
+  if (allowedTypes) {
+    var _iterator = _createForOfIteratorHelper(allowedTypes),
+      _step;
+    try {
+      for (_iterator.s(); !(_step = _iterator.n()).done;) {
+        var allowedType = _step.value;
+        allowedTypesSet[allowedType] = true;
+      }
+    } catch (err) {
+      _iterator.e(err);
+    } finally {
+      _iterator.f();
+    }
+  }
+  var shouldAllowPickingFieldFn = field => {
+    return !allowedTypes || (0, _private_utils.has)(allowedTypesSet, field.type);
+  };
+
+  // Fields are only ordered within a view, and views' column orders aren't
+  // loaded by default. So we'll always list the primary field first, followed
+  // by the rest of the fields in alphabetical order.
+  var models = table.fields.filter(field => field !== table.primaryField).sort((a, b) => {
+    return a.name.toLowerCase() < b.name.toLowerCase() ? -1 : 1;
+  });
+  models.unshift(table.primaryField);
+  return /*#__PURE__*/React.createElement(_model_picker_select.default, (0, _extends2.default)({}, restOfProps, {
+    ref: ref,
+    models: models
+    // `shouldAllowPickingModelFn` is typed as `AnyModel`. Cast to any since we only expect `Field`.
+    ,
+    shouldAllowPickingModelFn: shouldAllowPickingFieldFn,
+    selectedModelId: selectedField && !selectedField.isDeleted ? selectedField.id : null,
+    modelKeysToWatch: ['name', 'type', 'options'],
+    shouldAllowPickingNone: shouldAllowPickingNone,
+    placeholder: placeholderToUse,
+    onChange: _onChange
+  }));
+};
+var ForwardedRefFieldPicker = /*#__PURE__*/React.forwardRef(FieldPicker);
+ForwardedRefFieldPicker.displayName = 'FieldPicker';
+ForwardedRefFieldPicker.propTypes = _objectSpread({
+  field: _propTypes.default.instanceOf(_field.default)
+}, sharedFieldPickerPropTypes);
+var _default = exports.default = ForwardedRefFieldPicker;

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

@@ -0,0 +1,88 @@
+"use strict";
+
+require("core-js/modules/es.symbol.js");
+require("core-js/modules/es.array.filter.js");
+require("core-js/modules/es.array.iterator.js");
+require("core-js/modules/es.object.get-own-property-descriptors.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.for-each.js");
+require("core-js/modules/web.dom-collections.iterator.js");
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+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 _global_config_synced_component_helpers = _interopRequireDefault(require("../../shared/ui/global_config_synced_component_helpers"));
+var _field_picker = _interopRequireWildcard(require("./field_picker"));
+var _excluded = ["globalConfigKey", "onChange", "disabled", "table"];
+/** @module @airtable/blocks/ui: FieldPicker */
+/** */
+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; }
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+/**
+ * Props for the {@link FieldPickerSynced} component. Also accepts:
+ * * {@link SelectStyleProps}
+ *
+ * @docsPath UI/components/FieldPickerSynced
+ * @groupPath UI/components/FieldPicker
+ */
+
+/**
+ * A wrapper around the {@link FieldPicker} component that syncs with {@link GlobalConfig}.
+ *
+ * [[ Story id="modelpickers--fieldpickersynced-example" title="Synced field picker example" ]]
+ *
+ * @docsPath UI/components/FieldPickerSynced
+ * @groupPath UI/components/FieldPicker
+ * @component
+ */
+var FieldPickerSynced = (props, ref) => {
+  var globalConfigKey = props.globalConfigKey,
+    _onChange = props.onChange,
+    disabled = props.disabled,
+    table = props.table,
+    restOfProps = (0, _objectWithoutProperties2.default)(props, _excluded);
+  var _useSynced = (0, _use_synced.default)(globalConfigKey),
+    _useSynced2 = (0, _slicedToArray2.default)(_useSynced, 3),
+    fieldId = _useSynced2[0],
+    setFieldId = _useSynced2[1],
+    canSetFieldId = _useSynced2[2];
+  var sdk = (0, _sdk_context.useSdk)();
+  (0, _use_watchable.default)(sdk.base, ['tables']);
+  (0, _use_watchable.default)(table, ['fields']);
+  function _getFieldFromGlobalConfigValue() {
+    if (!table || table.isDeleted) {
+      return null;
+    }
+    return typeof fieldId === 'string' && table ? table.getFieldByIdIfExists(fieldId) : null;
+  }
+  return /*#__PURE__*/React.createElement(_field_picker.default, (0, _extends2.default)({}, restOfProps, {
+    ref: ref,
+    table: table,
+    field: _getFieldFromGlobalConfigValue(),
+    onChange: field => {
+      setFieldId(field ? field.id : null);
+      if (_onChange) {
+        _onChange(field);
+      }
+    },
+    disabled: disabled || !canSetFieldId
+  }));
+};
+var ForwardedRefFieldPickerSynced = /*#__PURE__*/React.forwardRef(FieldPickerSynced);
+ForwardedRefFieldPickerSynced.displayName = 'FieldPickerSynced';
+ForwardedRefFieldPickerSynced.propTypes = _objectSpread({
+  globalConfigKey: _global_config_synced_component_helpers.default.globalConfigKeyPropType
+}, _field_picker.sharedFieldPickerPropTypes);
+var _default = exports.default = ForwardedRefFieldPickerSynced;

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

@@ -0,0 +1,137 @@
+"use strict";
+
+require("core-js/modules/es.array.filter.js");
+require("core-js/modules/es.array.iterator.js");
+require("core-js/modules/es.object.get-own-property-descriptors.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.for-each.js");
+require("core-js/modules/web.dom-collections.iterator.js");
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.formFieldStylePropTypes = exports.default = void 0;
+require("core-js/modules/es.symbol.js");
+require("core-js/modules/es.symbol.description.js");
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _react = _interopRequireWildcard(require("react"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _emotion = require("emotion");
+var _core = require("@styled-system/core");
+var _private_utils = require("../../shared/private_utils");
+var _box = _interopRequireDefault(require("./box"));
+var _text = _interopRequireWildcard(require("./text"));
+var _label = _interopRequireDefault(require("./label"));
+var _use_form_field = require("./use_form_field");
+var _use_styled_system = _interopRequireDefault(require("./use_styled_system"));
+var _system = require("./system");
+var _excluded = ["id", "className", "style", "label", "htmlFor", "description", "children"];
+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; }
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; } /** @module @airtable/blocks/ui: FormField */ /** */
+/**
+ * Style props for the {@link FormField} component. Accepts:
+ * * {@link FlexItemSetProps}
+ * * {@link MaxWidthProps}
+ * * {@link MinWidthProps}
+ * * {@link PositionSetProps}
+ * * {@link SpacingSetProps}
+ * * {@link WidthProps}
+ *
+ * @noInheritDoc
+ */
+
+var styleParser = (0, _core.compose)(_system.maxWidth, _system.minWidth, _system.width, _system.flexItemSet, _system.positionSet, _system.spacingSet);
+var formFieldStylePropTypes = exports.formFieldStylePropTypes = _objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread({}, _system.maxWidthPropTypes), _system.minWidthPropTypes), _system.widthPropTypes), _system.flexItemSetPropTypes), _system.positionSetPropTypes), _system.spacingSetPropTypes);
+
+/**
+ * Props for the {@link FormField} component. Also accepts:
+ * * {@link FormFieldStyleProps}
+ *
+ * @noInheritDoc
+ * @docsPath UI/components/FormField
+ */
+
+/**
+ * A form field component that wraps any control field, supplying a provided label and optional
+ * description.
+ *
+ * [[ Story id="formfield--example" title="Form field example" ]]
+ *
+ * This component will automatically set up the `for` attribute on the outputted label with the `id` attribute
+ * on the wrapped control field for the following UI components: Label, Select, FieldPicker,
+ * ModelPicker, and ViewPicker. If you'd like to manually override this behavior, you can provide an
+ * `htmlFor` prop to this component and manually set the `id` attribute on your wrapped control to
+ * the same value.
+ *
+ * @docsPath UI/components/FormField
+ * @component
+ */
+var FormField = (props, ref) => {
+  var id = props.id,
+    className = props.className,
+    style = props.style,
+    _props$label = props.label,
+    label = _props$label === void 0 ? _text.TextSize.default : _props$label,
+    htmlFor = props.htmlFor,
+    description = props.description,
+    children = props.children,
+    styleProps = (0, _objectWithoutProperties2.default)(props, _excluded);
+  var classNameForStyleProps = (0, _use_styled_system.default)(_objectSpread({
+    width: '100%'
+  }, styleProps), styleParser);
+  var _useState = (0, _react.useState)((0, _private_utils.getLocallyUniqueId)('form-field-')),
+    _useState2 = (0, _slicedToArray2.default)(_useState, 1),
+    generatedId = _useState2[0];
+  var controlId = htmlFor || generatedId;
+  var _useState3 = (0, _react.useState)((0, _private_utils.getLocallyUniqueId)('input-description-')),
+    _useState4 = (0, _slicedToArray2.default)(_useState3, 1),
+    generatedDescriptionId = _useState4[0];
+  var descriptionId = description ? generatedDescriptionId : '';
+  var optionalLabelProps;
+  if (description) {
+    optionalLabelProps = {
+      marginBottom: 1
+    };
+  }
+  return /*#__PURE__*/_react.default.createElement(_box.default, {
+    ref: ref,
+    id: id,
+    className: (0, _emotion.cx)(classNameForStyleProps, className),
+    style: style,
+    display: "flex",
+    flexDirection: "column",
+    marginBottom: 3
+  }, /*#__PURE__*/_react.default.createElement(_label.default, (0, _extends2.default)({
+    htmlFor: controlId,
+    size: "default"
+  }, optionalLabelProps), label), description && /*#__PURE__*/_react.default.createElement(_text.default, {
+    variant: "paragraph",
+    id: descriptionId,
+    size: "default",
+    textColor: "light",
+    marginBottom: "6px"
+  }, description), /*#__PURE__*/_react.default.createElement(_use_form_field.FormFieldContext.Provider, {
+    value: {
+      controlId,
+      descriptionId
+    }
+  }, children));
+};
+var ForwardedRefFormField = /*#__PURE__*/_react.default.forwardRef(FormField);
+ForwardedRefFormField.propTypes = _objectSpread({
+  id: _propTypes.default.string,
+  className: _propTypes.default.string,
+  style: _propTypes.default.object,
+  label: _propTypes.default.node,
+  htmlFor: _propTypes.default.string,
+  description: _propTypes.default.node,
+  children: _propTypes.default.node
+}, formFieldStylePropTypes);
+ForwardedRefFormField.displayName = 'FormField';
+var _default = exports.default = ForwardedRefFormField;

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

@@ -0,0 +1,27 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "Point", {
+  enumerable: true,
+  get: function get() {
+    return _point.default;
+  }
+});
+Object.defineProperty(exports, "Rect", {
+  enumerable: true,
+  get: function get() {
+    return _rect.default;
+  }
+});
+Object.defineProperty(exports, "Size", {
+  enumerable: true,
+  get: function get() {
+    return _size.default;
+  }
+});
+var _rect = _interopRequireDefault(require("./rect"));
+var _size = _interopRequireDefault(require("./size"));
+var _point = _interopRequireDefault(require("./point"));

package/dist/cjs/base/ui/geometry/point.js

@@ -0,0 +1,21 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
+var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+/** @internal */
+var Point = exports.default = /*#__PURE__*/(0, _createClass2.default)( /** @internal */
+function Point(x, y) {
+  (0, _classCallCheck2.default)(this, Point);
+  /** @internal */
+  (0, _defineProperty2.default)(this, "x", void 0);
+  /** @internal */
+  (0, _defineProperty2.default)(this, "y", void 0);
+  this.x = x;
+  this.y = y;
+});