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

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

@@ -1,19 +1,12 @@
-"use strict";
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+/** @module @airtable/blocks/ui: Dialog */ /** */
+import * as React from 'react';
+import Dialog from './dialog';
+import Heading from './heading';
+import Text from './text';
+import Button from './button';
+import Box from './box';
 
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var React = _interopRequireWildcard(require("react"));
-var _dialog = _interopRequireDefault(require("./dialog"));
-var _heading = _interopRequireDefault(require("./heading"));
-var _text = _interopRequireDefault(require("./text"));
-var _button = _interopRequireDefault(require("./button"));
-var _box = _interopRequireDefault(require("./box"));
-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: Dialog */ /** */
 /**
  * Props for the {@link ConfirmationDialog} component. Also accepts:
  * * {@link DialogStyleProps}
@@ -69,29 +62,29 @@ class ConfirmationDialog extends React.Component {
       isConfirmButtonDisabled,
       ...restOfProps
     } = this.props;
-    return /*#__PURE__*/React.createElement(_dialog.default, _extends({
+    return /*#__PURE__*/React.createElement(Dialog, _extends({
       onClose: onCancel,
       className: className,
       style: style,
       backgroundClassName: backgroundClassName,
       backgroundStyle: backgroundStyle
-    }, restOfProps), /*#__PURE__*/React.createElement(_dialog.default.CloseButton, null), /*#__PURE__*/React.createElement(_heading.default, {
+    }, restOfProps), /*#__PURE__*/React.createElement(Dialog.CloseButton, null), /*#__PURE__*/React.createElement(Heading, {
       size: "small"
-    }, title), typeof body === 'string' ? /*#__PURE__*/React.createElement(_text.default, {
+    }, title), typeof body === 'string' ? /*#__PURE__*/React.createElement(Text, {
       variant: "paragraph"
-    }, body) : body, /*#__PURE__*/React.createElement(_box.default, {
+    }, body) : body, /*#__PURE__*/React.createElement(Box, {
       display: "flex",
       flexDirection: "row-reverse",
       alignItems: "center",
       justifyContent: "start",
       width: "100%",
       marginTop: 3
-    }, /*#__PURE__*/React.createElement(_button.default, {
+    }, /*#__PURE__*/React.createElement(Button, {
       ref: this._confirmButtonRef,
       onClick: onConfirm,
       variant: isConfirmActionDangerous ? 'danger' : 'primary',
       disabled: isConfirmButtonDisabled
-    }, confirmButtonText), /*#__PURE__*/React.createElement(_button.default, {
+    }, confirmButtonText), /*#__PURE__*/React.createElement(Button, {
       onClick: onCancel,
       variant: "secondary",
       alignSelf: "end",
@@ -100,4 +93,4 @@ class ConfirmationDialog extends React.Component {
     }, cancelButtonText)));
   }
 }
-var _default = exports.default = ConfirmationDialog;
+export default ConfirmationDialog;

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

@@ -0,0 +1,92 @@
+/** @module @airtable/blocks/ui/system: Control sizes */ /** */
+import { compose, system } from '@styled-system/core';
+import { createEnum } from '../../shared/private_utils';
+import useTheme from './theme/use_theme';
+import getStylePropsForResponsiveProp from './system/utils/get_style_props_for_responsive_prop';
+import useStyledSystem from './use_styled_system';
+import { allStylesParser } from './system';
+
+/**
+ * Sizes for the {@link Button}, {@link Input}, {@link Select}, {@link SelectButtons}, and {@link Switch} components.
+ */
+
+export const ControlSize = createEnum('small', 'default', 'large');
+
+/**
+ * Size prop for the {@link Button}, {@link Input}, {@link Select}, {@link SelectButtons}, and {@link Switch} components.
+ */
+
+/** @internal */
+export function useButtonSize(controlSizeProp) {
+  const {
+    buttonSizes
+  } = useTheme();
+  let styleProps;
+  if (typeof controlSizeProp === 'string') {
+    styleProps = buttonSizes[controlSizeProp];
+  } else {
+    styleProps = getStylePropsForResponsiveProp(controlSizeProp, buttonSizes);
+  }
+  return useStyledSystem(styleProps);
+}
+
+// For selects we create a custom style parser that includes `backgroundPosition`.
+const selectSizeStyleParser = compose(allStylesParser, system({
+  backgroundPosition: true
+}));
+
+/** @internal */
+export function useSelectSize(controlSizeProp) {
+  const {
+    selectSizes
+  } = useTheme();
+  let styleProps;
+  if (typeof controlSizeProp === 'string') {
+    styleProps = selectSizes[controlSizeProp];
+  } else {
+    styleProps = getStylePropsForResponsiveProp(controlSizeProp, selectSizes);
+  }
+  return useStyledSystem(styleProps, selectSizeStyleParser);
+}
+
+/** @internal */
+export function useInputSize(controlSizeProp) {
+  const {
+    inputSizes
+  } = useTheme();
+  let styleProps;
+  if (typeof controlSizeProp === 'string') {
+    styleProps = inputSizes[controlSizeProp];
+  } else {
+    styleProps = getStylePropsForResponsiveProp(controlSizeProp, inputSizes);
+  }
+  return useStyledSystem(styleProps);
+}
+
+/** @internal */
+export function useSelectButtonsSize(controlSizeProp) {
+  const {
+    selectButtonsSizes
+  } = useTheme();
+  let styleProps;
+  if (typeof controlSizeProp === 'string') {
+    styleProps = selectButtonsSizes[controlSizeProp];
+  } else {
+    styleProps = getStylePropsForResponsiveProp(controlSizeProp, selectButtonsSizes);
+  }
+  return useStyledSystem(styleProps);
+}
+
+/** @internal */
+export function useSwitchSize(controlSizeProp) {
+  const {
+    switchSizes
+  } = useTheme();
+  let styleProps;
+  if (typeof controlSizeProp === 'string') {
+    styleProps = switchSizes[controlSizeProp];
+  } else {
+    styleProps = getStylePropsForResponsiveProp(controlSizeProp, switchSizes);
+  }
+  return useStyledSystem(styleProps);
+}

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

@@ -1,9 +1,3 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = createDetectElementResize;
 // @ts-nocheck
 
 // Detect Element Resize.
@@ -23,7 +17,7 @@ exports.default = createDetectElementResize;
 /**
  * @internal
  */
-function createDetectElementResize(nonce) {
+export default function createDetectElementResize(nonce) {
   // Check `document` and `window` in case of server-side rendering
   var _window;
   if (typeof window !== 'undefined') {

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

@@ -1,17 +1,11 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var _emotion = require("emotion");
+import { css } from 'emotion';
 const cssHelpers = {
-  TRUNCATE: (0, _emotion.css)({
+  TRUNCATE: css({
     overflow: 'hidden',
     textOverflow: 'ellipsis',
     whiteSpace: 'nowrap'
   }),
-  VISUALLY_HIDDEN: (0, _emotion.css)({
+  VISUALLY_HIDDEN: css({
     position: 'absolute',
     height: '1px',
     width: '1px',
@@ -20,4 +14,4 @@ const cssHelpers = {
     whiteSpace: 'nowrap' /* added line */
   })
 };
-var _default = exports.default = cssHelpers;
+export default cssHelpers;

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

@@ -1,19 +1,11 @@
-"use strict";
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+/** @module @airtable/blocks/ui: Dialog */ /** */
+import { cx } from 'emotion';
+import * as React from 'react';
+import { baymax } from './baymax_utils';
+import Modal from './modal';
+import DialogCloseButton from './dialog_close_button';
 
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-exports.useDialogContext = useDialogContext;
-var _emotion = require("emotion");
-var React = _interopRequireWildcard(require("react"));
-var _baymax_utils = require("./baymax_utils");
-var _modal = _interopRequireDefault(require("./modal"));
-var _dialog_close_button = _interopRequireDefault(require("./dialog_close_button"));
-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: Dialog */ /** */
 /**
  * Style props shared between the {@link Dialog} and {@link ConfirmationDialog} components. Also accepts:
  * * {@link DimensionsSetProps}
@@ -29,7 +21,7 @@ const DialogContext = /*#__PURE__*/React.createContext({
   onDialogClose: null
 });
 /** @internal */
-function useDialogContext() {
+export function useDialogContext() {
   return React.useContext(DialogContext);
 }
 
@@ -52,7 +44,7 @@ function useDialogContext() {
 // TODO (stephen): focus trapping
 class Dialog extends React.Component {
   /** @hidden */
-  static CloseButton = _dialog_close_button.default;
+  static CloseButton = DialogCloseButton;
 
   /** @hidden */
   constructor(props) {
@@ -84,9 +76,9 @@ class Dialog extends React.Component {
       children,
       ...restOfProps
     } = this.props;
-    return /*#__PURE__*/React.createElement(_modal.default, _extends({
+    return /*#__PURE__*/React.createElement(Modal, _extends({
       onClose: onClose,
-      className: (0, _emotion.cx)((0, _baymax_utils.baymax)('big line-height-4'), className),
+      className: cx(baymax('big line-height-4'), className),
       style: style,
       backgroundClassName: backgroundClassName,
       backgroundStyle: backgroundStyle
@@ -98,4 +90,4 @@ class Dialog extends React.Component {
     }, children));
   }
 }
-var _default = exports.default = Dialog;
+export default Dialog;

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

@@ -0,0 +1,96 @@
+/** @module @airtable/blocks/ui: Dialog */ /** */
+import { cx } from 'emotion';
+import * as React from 'react';
+import { compose } from '@styled-system/core';
+import { baymax } from './baymax_utils';
+import withStyledSystem from './with_styled_system';
+import { borderRadius, dimensionsSet, display, flexContainerSet, flexItemSet, positionSet, spacingSet } from './system';
+import Icon from './icon';
+import { useDialogContext } from './dialog';
+
+/**
+ * Props for the {@link DialogCloseButton} component. Also accepts:
+ * * {@link DialogCloseButtonStyleProps}
+ *
+ * @noInheritDoc
+ */
+
+/**
+ * Style props for the {@link DialogCloseButton} component. Accepts:
+ * * {@link BorderRadiusProps}
+ * * {@link DimensionsSetProps}
+ * * {@link DisplayProps}
+ * * {@link FlexContainerSetProps}
+ * * {@link FlexItemSetProps}
+ * * {@link PositionSetProps}
+ * * {@link SpacingSetProps}
+ *
+ * @noInheritDoc
+ */
+
+const styleParser = compose(borderRadius, dimensionsSet, display, flexContainerSet, flexItemSet, positionSet, spacingSet);
+
+/**
+ * A button that closes {@link Dialog}. Accessed via `Dialog.CloseButton`.
+ */
+// TODO (stephen): can we alias this as Dialog.CloseButton in typedoc?
+// TODO (stephen): convert into a prop in Dialog
+export function DialogCloseButton(props) {
+  const {
+    onDialogClose
+  } = useDialogContext();
+  const {
+    onMouseEnter,
+    onMouseLeave,
+    className,
+    style,
+    tabIndex,
+    onClick,
+    children
+  } = props;
+  const _onClick = e => {
+    // onClick should only be defined in the case of a tooltip.
+    if (onClick) {
+      onClick(e);
+    }
+    onDialogClose?.();
+  };
+  const _onKeyDown = e => {
+    if (e.ctrlKey || e.altKey || e.metaKey) {
+      return;
+    }
+    if (['Enter', ' '].includes(e.key)) {
+      e.preventDefault();
+      onDialogClose?.();
+    }
+  };
+  return /*#__PURE__*/React.createElement("div", {
+    // TODO (stephen): remove tooltip anchor props
+    onMouseEnter: onMouseEnter,
+    onMouseLeave: onMouseLeave,
+    onClick: _onClick,
+    onKeyDown: _onKeyDown,
+    className: cx(baymax('darken1-hover darken1-focus no-outline pointer'), className),
+    style: style,
+    tabIndex: tabIndex || 0,
+    role: "button",
+    "aria-label": "Close dialog"
+  }, children ? children : /*#__PURE__*/React.createElement(Icon, {
+    name: "x",
+    size: 12,
+    className: baymax('quieter')
+  }));
+}
+export default withStyledSystem(DialogCloseButton, styleParser, {
+  position: 'absolute',
+  top: 0,
+  right: 0,
+  marginTop: 2,
+  marginRight: 2,
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'center',
+  width: '24px',
+  height: '24px',
+  borderRadius: 'circle'
+});

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

@@ -1,9 +1,3 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
 /** @module @airtable/blocks/ui: expandRecord */ /** */
 
 /**
@@ -36,4 +30,4 @@ function expandRecord(record, opts) {
   }
   record.parentTable.parentBase.__sdk.__airtableInterface.expandRecord(record.parentTable.id, record.id, recordIds);
 }
-var _default = exports.default = expandRecord;
+export default expandRecord;

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

@@ -1,11 +1,5 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var _error_utils = require("../../shared/error_utils");
 /** @module @airtable/blocks/ui: expandRecordList */ /** */
+import { invariant } from '../../shared/error_utils';
 
 /**
  * Options object for expanding a record list.
@@ -34,13 +28,13 @@ function expandRecordList(records, opts) {
   }
   const tableId = records[0].parentTable.id;
   const recordIds = records.map(record => {
-    (0, _error_utils.invariant)(record.parentTable.id === tableId, 'all records must belong to the same table');
+    invariant(record.parentTable.id === tableId, 'all records must belong to the same table');
     return record.id;
   });
   const fieldIds = opts && opts.fields ? opts.fields.map(field => {
-    (0, _error_utils.invariant)(field.parentTable.id === tableId, 'all fields must belong to the same table');
+    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;
+export default expandRecordList;

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

@@ -1,11 +1,5 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var _error_utils = require("../../shared/error_utils");
 /** @module @airtable/blocks/ui: expandRecordPickerAsync */ /** */
+import { invariant } from '../../shared/error_utils';
 
 /**
  * Options object for expanding a record picker.
@@ -49,11 +43,11 @@ async function expandRecordPickerAsync(records, opts) {
   const tableId = records[0].parentTable.id;
   const sdk = records[0].parentTable.parentBase.__sdk;
   const recordIds = records.map(record => {
-    (0, _error_utils.invariant)(record.parentTable.id === tableId, 'all records must belong to the same table');
+    invariant(record.parentTable.id === tableId, 'all records must belong to the same table');
     return record.id;
   });
   const fieldIds = opts && opts.fields ? opts.fields.map(field => {
-    (0, _error_utils.invariant)(field.parentTable.id === tableId, 'all fields must belong to the same table');
+    invariant(field.parentTable.id === tableId, 'all fields must belong to the same table');
     return field.id;
   }) : null;
   const shouldAllowCreatingRecord = !!opts && !!opts.shouldAllowCreatingRecord;
@@ -68,4 +62,4 @@ async function expandRecordPickerAsync(records, opts) {
   }
   return sdk.base.__getRecordStore(table.id).getRecordByIdIfExists(chosenRecordId);
 }
-var _default = exports.default = expandRecordPickerAsync;
+export default expandRecordPickerAsync;

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

@@ -0,0 +1,37 @@
+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: FieldIcon */ /** */
+import * as React from 'react';
+import { useSdk } from '../../shared/ui/sdk_context';
+import Icon from './icon';
+
+/**
+ * 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
+ */
+const FieldIcon = props => {
+  const {
+    field,
+    ...restOfProps
+  } = props;
+  const sdk = useSdk();
+  const airtableInterface = sdk.__airtableInterface;
+  const appInterface = sdk.__appInterface;
+  const uiConfig = airtableInterface.fieldTypeProvider.getUiConfig(appInterface, field._data);
+  const name = uiConfig.iconName;
+  return /*#__PURE__*/React.createElement(Icon, _extends({
+    name: name
+  }, restOfProps));
+};
+export default FieldIcon;

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

@@ -1,18 +1,11 @@
-"use strict";
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+/** @module @airtable/blocks/ui: FieldPicker */ /** */
+import * as React from 'react';
+import { has } from '../../shared/private_utils';
+import useWatchable from '../../shared/ui/use_watchable';
+import { useSdk } from '../../shared/ui/sdk_context';
+import ModelPickerSelect from './model_picker_select';
 
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var React = _interopRequireWildcard(require("react"));
-var _private_utils = require("../../shared/private_utils");
-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: FieldPicker */ /** */
 /**
  * Props shared between the {@link FieldPicker} and {@link FieldPickerSynced} components.
  */
@@ -43,9 +36,9 @@ const FieldPicker = (props, ref) => {
     onChange,
     ...restOfProps
   } = props;
-  const sdk = (0, _sdk_context.useSdk)();
-  (0, _use_watchable.default)(sdk.base, ['tables']);
-  (0, _use_watchable.default)(table, ['fields']);
+  const sdk = useSdk();
+  useWatchable(sdk.base, ['tables']);
+  useWatchable(table, ['fields']);
   if (!table || table.isDeleted) {
     return null;
   }
@@ -70,7 +63,7 @@ const FieldPicker = (props, ref) => {
     }
   }
   const shouldAllowPickingFieldFn = field => {
-    return !allowedTypes || (0, _private_utils.has)(allowedTypesSet, field.type);
+    return !allowedTypes || has(allowedTypesSet, field.type);
   };
 
   // Fields are only ordered within a view, and views' column orders aren't
@@ -80,7 +73,7 @@ const FieldPicker = (props, ref) => {
     return a.name.toLowerCase() < b.name.toLowerCase() ? -1 : 1;
   });
   models.unshift(table.primaryField);
-  return /*#__PURE__*/React.createElement(_model_picker_select.default, _extends({}, restOfProps, {
+  return /*#__PURE__*/React.createElement(ModelPickerSelect, _extends({}, restOfProps, {
     ref: ref,
     models: models
     // `shouldAllowPickingModelFn` is typed as `AnyModel`. Cast to any since we only expect `Field`.
@@ -95,4 +88,4 @@ const FieldPicker = (props, ref) => {
 };
 const ForwardedRefFieldPicker = /*#__PURE__*/React.forwardRef(FieldPicker);
 ForwardedRefFieldPicker.displayName = 'FieldPicker';
-var _default = exports.default = ForwardedRefFieldPicker;
+export default ForwardedRefFieldPicker;

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

@@ -0,0 +1,59 @@
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+/** @module @airtable/blocks/ui: FieldPicker */ /** */
+import * as React from 'react';
+import useSynced from '../../shared/ui/use_synced';
+import useWatchable from '../../shared/ui/use_watchable';
+import { useSdk } from '../../shared/ui/sdk_context';
+import FieldPicker from './field_picker';
+
+/**
+ * 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
+ */
+const FieldPickerSynced = (props, ref) => {
+  const {
+    globalConfigKey,
+    onChange,
+    disabled,
+    table,
+    ...restOfProps
+  } = props;
+  const [fieldId, setFieldId, canSetFieldId] = useSynced(globalConfigKey);
+  const sdk = useSdk();
+  useWatchable(sdk.base, ['tables']);
+  useWatchable(table, ['fields']);
+  function _getFieldFromGlobalConfigValue() {
+    if (!table || table.isDeleted) {
+      return null;
+    }
+    return typeof fieldId === 'string' && table ? table.getFieldByIdIfExists(fieldId) : null;
+  }
+  return /*#__PURE__*/React.createElement(FieldPicker, _extends({}, restOfProps, {
+    ref: ref,
+    table: table,
+    field: _getFieldFromGlobalConfigValue(),
+    onChange: field => {
+      setFieldId(field ? field.id : null);
+      if (onChange) {
+        onChange(field);
+      }
+    },
+    disabled: disabled || !canSetFieldId
+  }));
+};
+const ForwardedRefFieldPickerSynced = /*#__PURE__*/React.forwardRef(FieldPickerSynced);
+ForwardedRefFieldPickerSynced.displayName = 'FieldPickerSynced';
+export default ForwardedRefFieldPickerSynced;