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

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

@@ -1,24 +1,14 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = exports.RecordCardList = void 0;
-var React = _interopRequireWildcard(require("react"));
-var _reactWindow = require("react-window");
-var _core = require("@styled-system/core");
-var _error_utils = require("../../shared/error_utils");
-var _record = _interopRequireDefault(require("../models/record"));
-var _box = _interopRequireDefault(require("./box"));
-var _create_detect_element_resize = _interopRequireDefault(require("./create_detect_element_resize"));
-var _with_styled_system = _interopRequireDefault(require("./with_styled_system"));
-var _system = require("./system");
-var _record_card = _interopRequireDefault(require("./record_card"));
-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; }
 /** @module @airtable/blocks/ui: RecordCardList */ /** */
-
+import * as React from 'react';
+import { FixedSizeList } from 'react-window';
+import { compose } from '@styled-system/core';
+import { invariant, spawnError } from '../../shared/error_utils';
+import Record from '../models/record';
+import Box from './box';
+import createDetectElementResize from './create_detect_element_resize';
+import withStyledSystem from './with_styled_system';
+import { dimensionsSet, flexItemSet, positionSet, margin } from './system';
+import RecordCard from './record_card';
 const RECORD_CARD_ROW_HEIGHT = 80;
 const RECORD_CARD_SPACING = 10;
 
@@ -55,12 +45,12 @@ function RecordCardItemRenderer(props) {
   // accepts an array of Records.
   const filteredRecords = [];
   for (const currentRecord of records) {
-    if (currentRecord instanceof _record.default) {
+    if (currentRecord instanceof Record) {
       filteredRecords.push(currentRecord);
     }
   }
   if (filteredRecords.length !== records.length && filteredRecords.length !== 0) {
-    throw (0, _error_utils.spawnError)("RecordCardList's props.records should not contain a mix of Record and RecordDef");
+    throw spawnError("RecordCardList's props.records should not contain a mix of Record and RecordDef");
   }
 
   // RecordCard handles null and undefined differently for `onClick`. Treat other
@@ -73,7 +63,7 @@ function RecordCardItemRenderer(props) {
   } else {
     _onClick = null;
   }
-  return /*#__PURE__*/React.createElement(_record_card.default, {
+  return /*#__PURE__*/React.createElement(RecordCard, {
     record: record,
     fields: fields,
     view: view,
@@ -112,7 +102,7 @@ function getScrollbarWidth() {
   scrollDiv.style.height = '50px';
   scrollDiv.style.overflow = 'scroll';
   const body = document.body;
-  (0, _error_utils.invariant)(body, 'no document body to measure scrollbar');
+  invariant(body, 'no document body to measure scrollbar');
   body.appendChild(scrollDiv);
   const scrollbarWidth = scrollDiv.offsetWidth - scrollDiv.clientWidth;
   body.removeChild(scrollDiv);
@@ -173,7 +163,7 @@ const innerRecordCardListWindow = /*#__PURE__*/React.forwardRef((props, ref) =>
  * @noInheritDoc
  */
 
-const styleParser = (0, _core.compose)(_system.dimensionsSet, _system.flexItemSet, _system.positionSet, _system.margin);
+const styleParser = compose(dimensionsSet, flexItemSet, positionSet, margin);
 
 /** @hidden */
 
@@ -185,7 +175,7 @@ const styleParser = (0, _core.compose)(_system.dimensionsSet, _system.flexItemSe
  * @docsPath UI/components/RecordCardList
  * @component
  */
-class RecordCardList extends React.Component {
+export class RecordCardList extends React.Component {
   /** @internal */
 
   /** @internal */
@@ -202,7 +192,7 @@ class RecordCardList extends React.Component {
     this._container = /*#__PURE__*/React.createRef();
     this._cardList = /*#__PURE__*/React.createRef();
     this._cardListInnerWindow = /*#__PURE__*/React.createRef();
-    this._detectElementResize = (0, _create_detect_element_resize.default)();
+    this._detectElementResize = createDetectElementResize();
     this._scrollbarWidth = getScrollbarWidth();
     this.state = {
       cardListWidth: 0,
@@ -212,7 +202,7 @@ class RecordCardList extends React.Component {
   }
   /** @hidden */
   componentDidMount() {
-    (0, _error_utils.invariant)(this._container.current, 'No container to detect resize on');
+    invariant(this._container.current, 'No container to detect resize on');
     this._detectElementResize.addResizeListener(this._container.current, this._updateCardListSizeIfNeeded);
     this._updateCardListSizeIfNeeded();
   }
@@ -235,17 +225,17 @@ class RecordCardList extends React.Component {
   // by any consuming component at the time of migration.
   /** @hidden */
   scrollToRecordAtIndex(recordIndex) {
-    (0, _error_utils.invariant)(this._cardList.current, 'No card list to scroll');
+    invariant(this._cardList.current, 'No card list to scroll');
     this._cardList.current.scrollToItem(recordIndex);
   }
   /** @internal */
   _updateCardListSizeIfNeeded = () => {
-    (0, _error_utils.invariant)(this._container.current, 'No container to update card list size');
+    invariant(this._container.current, 'No container to update card list size');
     const {
       width: cardListWidth,
       height: cardListHeight
     } = this._container.current.getBoundingClientRect();
-    (0, _error_utils.invariant)(this._cardListInnerWindow.current, 'No card list inner window to measure scroll height');
+    invariant(this._cardListInnerWindow.current, 'No card list inner window to measure scroll height');
     const isScrollbarVisible = this._cardListInnerWindow.current.scrollHeight > cardListHeight;
     if (this.state.cardListWidth !== cardListWidth || this.state.cardListHeight !== cardListHeight || this.state.isScrollbarVisible !== isScrollbarVisible) {
       this.setState({
@@ -277,13 +267,13 @@ class RecordCardList extends React.Component {
       style: {},
       className: ''
     };
-    return /*#__PURE__*/React.createElement(_box.default, {
+    return /*#__PURE__*/React.createElement(Box, {
       ref: this._container,
       className: className,
       overflow: "hidden",
       height: "100%",
       style: style
-    }, /*#__PURE__*/React.createElement(_reactWindow.FixedSizeList, {
+    }, /*#__PURE__*/React.createElement(FixedSizeList, {
       outerRef: this._cardList,
       width: this.state.cardListWidth,
       height: this.state.cardListHeight,
@@ -299,5 +289,4 @@ class RecordCardList extends React.Component {
     RecordCardItemRenderer));
   }
 }
-exports.RecordCardList = RecordCardList;
-var _default = exports.default = (0, _with_styled_system.default)(RecordCardList, styleParser);
+export default withStyledSystem(RecordCardList, styleParser);

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

@@ -1,35 +1,26 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var _emotion = require("emotion");
-var React = _interopRequireWildcard(require("react"));
-var _core = require("@styled-system/core");
-var _private_utils = require("../../shared/private_utils");
-var _error_utils = require("../../shared/error_utils");
-var _use_form_field = _interopRequireDefault(require("./use_form_field"));
-var _system = require("./system");
-var _use_theme = _interopRequireDefault(require("./theme/use_theme"));
-var _select_and_select_buttons_helpers = require("./select_and_select_buttons_helpers");
-var _use_styled_system = _interopRequireDefault(require("./use_styled_system"));
-var _control_sizes = require("./control_sizes");
-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; }
 /** @module @airtable/blocks/ui: Select */ /** */
+import { cx } from 'emotion';
+import * as React from 'react';
+import { compose } from '@styled-system/core';
+import { createEnum } from '../../shared/private_utils';
+import { spawnError } from '../../shared/error_utils';
+import useFormField from './use_form_field';
+import { maxWidth, minWidth, width, flexItemSet, positionSet, margin } from './system';
+import useTheme from './theme/use_theme';
+import { validateOptions, optionValueToString, stringToOptionValue } from './select_and_select_buttons_helpers';
+import useStyledSystem from './use_styled_system';
+import { useSelectSize, ControlSize } from './control_sizes';
 
 /** @hidden */
 
-const SelectVariant = (0, _private_utils.createEnum)('default');
+const SelectVariant = createEnum('default');
 
 /** @internal */
 function useSelectVariant() {
   let variant = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : SelectVariant.default;
   const {
     selectVariants
-  } = (0, _use_theme.default)();
+  } = useTheme();
   return selectVariants[variant];
 }
 
@@ -78,7 +69,7 @@ function useSelectVariant() {
  * @docsPath UI/components/Select
  */
 
-const styleParser = (0, _core.compose)(_system.maxWidth, _system.minWidth, _system.width, _system.flexItemSet, _system.positionSet, _system.margin);
+const styleParser = compose(maxWidth, minWidth, width, flexItemSet, positionSet, margin);
 
 /**
  * Dropdown menu component. A wrapper around `<select>` that fits in with Airtable's user interface.
@@ -90,7 +81,7 @@ const styleParser = (0, _core.compose)(_system.maxWidth, _system.minWidth, _syst
  */
 const Select = (props, ref) => {
   const {
-    size = _control_sizes.ControlSize.default,
+    size = ControlSize.default,
     value,
     options: originalOptions = [],
     autoFocus,
@@ -115,20 +106,20 @@ const Select = (props, ref) => {
     'aria-labelledby': ariaLabelledBy,
     ...styleProps
   } = props;
-  const formFieldContextValue = (0, _use_form_field.default)();
+  const formFieldContextValue = useFormField();
   const controlId = formFieldContextValue ? formFieldContextValue.controlId : undefined;
   const descriptionId = formFieldContextValue ? formFieldContextValue.descriptionId : undefined;
   const ariaDescribedBy = [ariaDescribedByProp, descriptionId].filter(Boolean).join(' ') || undefined;
   // There is only a single default variant.
   const classNameForSelectVariant = useSelectVariant();
-  const classNameForSelectSize = (0, _control_sizes.useSelectSize)(size);
-  const classNameForStyleProps = (0, _use_styled_system.default)({
+  const classNameForSelectSize = useSelectSize(size);
+  const classNameForStyleProps = useStyledSystem({
     width: '100%',
     ...styleProps
   }, styleParser);
   function _onChange(e) {
     if (onChange) {
-      const newValue = (0, _select_and_select_buttons_helpers.stringToOptionValue)(e.currentTarget.value);
+      const newValue = stringToOptionValue(e.currentTarget.value);
       onChange(newValue);
     }
   }
@@ -136,9 +127,9 @@ const Select = (props, ref) => {
   // Check options here for a cleaner stack trace.
   // Also, even though options are required, still check if it's set because
   // the error is really ugly and covers up the prop type check.
-  const validationResult = (0, _select_and_select_buttons_helpers.validateOptions)(originalOptions);
+  const validationResult = validateOptions(originalOptions);
   if (!validationResult.isValid) {
-    throw (0, _error_utils.spawnError)('<Select> %s', validationResult.reason);
+    throw spawnError('<Select> %s', validationResult.reason);
   }
   let didFindOptionMatchingValue = false;
   for (const option of originalOptions) {
@@ -162,7 +153,7 @@ const Select = (props, ref) => {
   options.push(...originalOptions);
   return /*#__PURE__*/React.createElement("select", {
     ref: ref,
-    value: (0, _select_and_select_buttons_helpers.optionValueToString)(value),
+    value: optionValueToString(value),
     onChange: _onChange,
     onMouseEnter: onMouseEnter,
     onMouseLeave: onMouseLeave,
@@ -172,13 +163,13 @@ const Select = (props, ref) => {
     id: id || controlId,
     name: name,
     tabIndex: tabIndex,
-    className: (0, _emotion.cx)(classNameForSelectVariant, classNameForSelectSize, classNameForStyleProps, className),
+    className: cx(classNameForSelectVariant, classNameForSelectSize, classNameForStyleProps, className),
     style: style,
     "aria-label": ariaLabel,
     "aria-labelledby": ariaLabelledBy,
     "aria-describedby": ariaDescribedBy
   }, options.map((option, index) => {
-    const valueJson = (0, _select_and_select_buttons_helpers.optionValueToString)(option.value);
+    const valueJson = optionValueToString(option.value);
     return /*#__PURE__*/React.createElement("option", {
       key: `${valueJson}-${option.label}-${index}`,
       value: valueJson,
@@ -188,4 +179,4 @@ const Select = (props, ref) => {
 };
 const ForwardedRefSelect = /*#__PURE__*/React.forwardRef(Select);
 ForwardedRefSelect.displayName = 'Select';
-var _default = exports.default = ForwardedRefSelect;
+export default ForwardedRefSelect;

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

@@ -1,12 +1,3 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.isSelectOptionValue = isSelectOptionValue;
-exports.optionValueToString = optionValueToString;
-exports.stringToOptionValue = stringToOptionValue;
-exports.validateOptions = void 0;
 /** @module @airtable/blocks/ui: Select */ /** */
 
 // JSON stringify the value so you can use any primitive.
@@ -18,7 +9,7 @@ exports.validateOptions = void 0;
 /** @internal */
 // Old eslint rule doesn't understand type guards
 // eslint-disable-next-line airtable/is-returns-boolean
-function isSelectOptionValue(value) {
+export function isSelectOptionValue(value) {
   return value === null || value === undefined || typeof value === 'string' || typeof value === 'number' || typeof value === 'boolean';
 }
 
@@ -26,7 +17,7 @@ function isSelectOptionValue(value) {
  * A select option for {@link Select}, {@link TablePicker}, {@link ViewPicker}, {@link FieldPicker}, and their `Synced` counterparts.
  */
 
-const validateOptions = options => {
+export const validateOptions = options => {
   if (options) {
     for (const option of options) {
       // These are hard errors because we can't guarantee that other values
@@ -46,8 +37,7 @@ const validateOptions = options => {
 };
 
 /** @internal */
-exports.validateOptions = validateOptions;
-function optionValueToString(value) {
+export function optionValueToString(value) {
   const valueJson = JSON.stringify(value === undefined ? {
     isUndefined: true
   } : {
@@ -56,7 +46,7 @@ function optionValueToString(value) {
   return valueJson;
 }
 /** @internal */
-function stringToOptionValue(valueJson) {
+export function stringToOptionValue(valueJson) {
   const parsed = JSON.parse(valueJson);
   const value = parsed.isUndefined ? null : parsed.notUndefinedValue;
   return value;

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

@@ -1,35 +1,26 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var _emotion = require("emotion");
-var _react = _interopRequireWildcard(require("react"));
-var _core = require("@styled-system/core");
-var _error_utils = require("../../shared/error_utils");
-var _private_utils = require("../../shared/private_utils");
-var _select_and_select_buttons_helpers = require("./select_and_select_buttons_helpers");
-var _use_styled_system = _interopRequireDefault(require("./use_styled_system"));
-var _use_theme = _interopRequireDefault(require("./theme/use_theme"));
-var _css_helpers = _interopRequireDefault(require("./css_helpers"));
-var _system = require("./system");
-var _control_sizes = require("./control_sizes");
-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; }
 /** @module @airtable/blocks/ui: SelectButtons */ /** */
+import { cx } from 'emotion';
+import React, { useEffect, useState } from 'react';
+import { compose } from '@styled-system/core';
+import { spawnError } from '../../shared/error_utils';
+import { createEnum, getLocallyUniqueId } from '../../shared/private_utils';
+import { validateOptions, optionValueToString } from './select_and_select_buttons_helpers';
+import useStyledSystem from './use_styled_system';
+import useTheme from './theme/use_theme';
+import cssHelpers from './css_helpers';
+import { maxWidth, minWidth, width, flexItemSet, positionSet, margin } from './system';
+import { ControlSize, useSelectButtonsSize } from './control_sizes';
 
 /** @internal */
 
-const SelectButtonsVariant = (0, _private_utils.createEnum)('default');
+const SelectButtonsVariant = createEnum('default');
 
 /** @internal */
 function useSelectButtonsVariant() {
   let variant = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : SelectButtonsVariant.default;
   const {
     selectButtonsVariants
-  } = (0, _use_theme.default)();
+  } = useTheme();
   return selectButtonsVariants[variant];
 }
 
@@ -45,7 +36,7 @@ function useSelectButtonsVariant() {
  * @noInheritDoc
  */
 
-const styleParser = (0, _core.compose)(_system.maxWidth, _system.minWidth, _system.width, _system.flexItemSet, _system.positionSet, _system.margin);
+const styleParser = compose(maxWidth, minWidth, width, flexItemSet, positionSet, margin);
 
 /**
  * Props shared between the {@link SelectButtons} and {@link SelectButtonsSynced} components.
@@ -75,7 +66,7 @@ const SelectButtons = (props, ref) => {
     options,
     disabled,
     value,
-    size = _control_sizes.ControlSize.default,
+    size = ControlSize.default,
     onChange,
     onMouseEnter,
     onMouseLeave,
@@ -94,20 +85,20 @@ const SelectButtons = (props, ref) => {
     containerClassNameForVariant,
     optionClassNameForVariant
   } = useSelectButtonsVariant();
-  const containerClassNameForSize = (0, _control_sizes.useSelectButtonsSize)(size);
-  const classNameForStyleProps = (0, _use_styled_system.default)({
+  const containerClassNameForSize = useSelectButtonsSize(size);
+  const classNameForStyleProps = useStyledSystem({
     width: '100%',
     ...styleProps
   }, styleParser);
-  const [generatedId] = (0, _react.useState)((0, _private_utils.getLocallyUniqueId)('sb-'));
-  const [isFocused, setIsFocused] = (0, _react.useState)(false);
-  (0, _react.useEffect)(() => {
+  const [generatedId] = useState(getLocallyUniqueId('sb-'));
+  const [isFocused, setIsFocused] = useState(false);
+  useEffect(() => {
     // Check options here for a cleaner stack trace.
     // Also, even though options are required, still check if it's set because
     // the error is really ugly and covers up the prop type check.
-    const validationResult = (0, _select_and_select_buttons_helpers.validateOptions)(options);
+    const validationResult = validateOptions(options);
     if (!validationResult.isValid) {
-      throw (0, _error_utils.spawnError)('<SelectButtons> %s', validationResult.reason);
+      throw spawnError('<SelectButtons> %s', validationResult.reason);
     }
   }, [options]);
   function _onChange(newValue) {
@@ -117,7 +108,7 @@ const SelectButtons = (props, ref) => {
       }
     }
   }
-  return /*#__PURE__*/_react.default.createElement("div", {
+  return /*#__PURE__*/React.createElement("div", {
     // TODO (stephen): remove tooltip anchor props
     ref: ref,
     onMouseEnter: onMouseEnter,
@@ -125,7 +116,7 @@ const SelectButtons = (props, ref) => {
     onClick: onClick,
     onFocus: () => setIsFocused(true),
     onBlur: () => setIsFocused(false),
-    className: (0, _emotion.cx)(containerClassNameForSize, containerClassNameForVariant, classNameForStyleProps, className),
+    className: cx(containerClassNameForSize, containerClassNameForVariant, classNameForStyleProps, className),
     style: style,
     "data-disabled": disabled,
     "data-focused": isFocused,
@@ -135,25 +126,25 @@ const SelectButtons = (props, ref) => {
     const isSelected = option.value === value;
     const isOptionDisabled = disabled || option.disabled;
     const radioId = `${generatedId}-${index}`;
-    const valueJson = (0, _select_and_select_buttons_helpers.optionValueToString)(option.value);
-    return /*#__PURE__*/_react.default.createElement("div", {
+    const valueJson = optionValueToString(option.value);
+    return /*#__PURE__*/React.createElement("div", {
       key: `${valueJson}-${option.label}-${index}`,
       className: optionClassNameForVariant
-    }, /*#__PURE__*/_react.default.createElement("input", {
+    }, /*#__PURE__*/React.createElement("input", {
       type: "radio",
       onChange: isOptionDisabled ? undefined : () => _onChange(option.value),
       disabled: !!isOptionDisabled,
       checked: isSelected,
-      className: _css_helpers.default.VISUALLY_HIDDEN,
+      className: cssHelpers.VISUALLY_HIDDEN,
       id: radioId,
       name: generatedId
-    }), /*#__PURE__*/_react.default.createElement("label", {
+    }), /*#__PURE__*/React.createElement("label", {
       htmlFor: radioId
-    }, /*#__PURE__*/_react.default.createElement("span", {
-      className: _css_helpers.default.TRUNCATE
+    }, /*#__PURE__*/React.createElement("span", {
+      className: cssHelpers.TRUNCATE
     }, option.label)));
   }));
 };
-const ForwardedRefSelectButtons = /*#__PURE__*/_react.default.forwardRef(SelectButtons);
+const ForwardedRefSelectButtons = /*#__PURE__*/React.forwardRef(SelectButtons);
 ForwardedRefSelectButtons.displayName = 'SelectButtons';
-var _default = exports.default = ForwardedRefSelectButtons;
+export default ForwardedRefSelectButtons;

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

@@ -0,0 +1,55 @@
+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: SelectButtons */ /** */
+import * as React from 'react';
+import { spawnError } from '../../shared/error_utils';
+import useSynced from '../../shared/ui/use_synced';
+import SelectButtons from './select_buttons';
+
+/**
+ * Props for the {@link SelectButtonsSynced} component. Also accepts:
+ * * {@link SelectButtonsStyleProps}
+ *
+ * @docsPath UI/components/SelectButtonsSynced
+ * @groupPath UI/components/SelectButtons
+ */
+
+/**
+ *  A wrapper around the {@link SelectButtons} component that syncs with {@link GlobalConfig}.
+ *
+ * [[ Story id="selectbuttons--synced-example" title="SelectButtonsSynced example" ]]
+ *
+ * @docsPath UI/components/SelectButtonsSynced
+ * @groupPath UI/components/SelectButtons
+ * @component
+ */
+const SelectButtonsSynced = (props, ref) => {
+  const {
+    globalConfigKey,
+    onChange,
+    disabled,
+    ...restOfProps
+  } = props;
+  const [value, setValue, canSetValue] = useSynced(globalConfigKey);
+  let selectValue;
+  if (value === null || value === undefined) {
+    selectValue = null;
+  } else if (typeof value === 'string' || typeof value === 'number' || typeof value === 'boolean') {
+    selectValue = value;
+  } else {
+    throw spawnError('SelectButtonsSynced only works with a global config value that is a string, number, boolean, null or undefined.');
+  }
+  return /*#__PURE__*/React.createElement(SelectButtons, _extends({}, restOfProps, {
+    ref: ref,
+    value: selectValue,
+    onChange: newValue => {
+      setValue(newValue);
+      if (onChange) {
+        onChange(newValue);
+      }
+    },
+    disabled: disabled || !canSetValue
+  }));
+};
+const ForwardedRefSelectButtonsSynced = /*#__PURE__*/React.forwardRef(SelectButtonsSynced);
+ForwardedRefSelectButtonsSynced.displayName = 'SelectButtonsSynced';
+export default ForwardedRefSelectButtonsSynced;

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

@@ -0,0 +1,58 @@
+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: Select */ /** */
+import * as React from 'react';
+import { spawnError } from '../../shared/error_utils';
+import useSynced from '../../shared/ui/use_synced';
+import Select from './select';
+
+/**
+ * Props for the {@link SelectSynced} component. Also accepts:
+ * * {@link SelectStyleProps}
+ *
+ * @docsPath UI/components/SelectSynced
+ * @groupPath UI/components/Select
+ */
+
+/**
+ * A wrapper around the {@link Select} component that syncs with {@link GlobalConfig}.
+ *
+ * [[ Story id="select--synced-example" title="Synced select example" ]]
+ *
+ * @docsPath UI/components/SelectSynced
+ * @groupPath UI/components/Select
+ * @component
+ */
+const SelectSynced = (props, ref) => {
+  const {
+    globalConfigKey,
+    disabled,
+    onChange,
+    ...restOfProps
+  } = props;
+  const [value, setValue, canSetValue] = useSynced(globalConfigKey);
+  let selectValue;
+  if (value === null || value === undefined) {
+    selectValue = null;
+  } else if (typeof value === 'string' || typeof value === 'number' || typeof value === 'boolean') {
+    selectValue = value;
+  } else {
+    throw spawnError('SelectSynced only works with a global config value that is a string, number, boolean, null or undefined.');
+  }
+  return /*#__PURE__*/React.createElement(Select, _extends({}, restOfProps, {
+    ref: ref,
+    value: selectValue,
+    onChange: newValue => {
+      if (newValue === undefined) {
+        newValue = null;
+      }
+      setValue(newValue);
+      if (onChange) {
+        onChange(newValue);
+      }
+    },
+    disabled: disabled || !canSetValue
+  }));
+};
+const ForwardedRefSelectSynced = /*#__PURE__*/React.forwardRef(SelectSynced);
+ForwardedRefSelectSynced.displayName = 'SelectSynced';
+export default ForwardedRefSelectSynced;