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

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

@@ -0,0 +1,377 @@
+"use strict";
+
+require("core-js/modules/es.symbol.js");
+require("core-js/modules/es.symbol.description.js");
+require("core-js/modules/es.array.filter.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.object.to-string.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.recordCardListStylePropTypes = exports.default = exports.RecordCardList = void 0;
+require("core-js/modules/es.number.constructor.js");
+var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
+var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
+var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
+var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
+var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+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 _field = _interopRequireDefault(require("../models/field"));
+var _view = _interopRequireDefault(require("../models/view"));
+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 _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 _callSuper(t, o, e) { return o = (0, _getPrototypeOf2.default)(o), (0, _possibleConstructorReturn2.default)(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], (0, _getPrototypeOf2.default)(t).constructor) : o.apply(t, e)); }
+function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
+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; }
+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: RecordCardList */ /** */
+var RECORD_CARD_ROW_HEIGHT = 80;
+var RECORD_CARD_SPACING = 10;
+
+/** @internal */
+
+/** @internal */
+
+/**
+ * Item renderer component for react-window FixedSizeList. Responsible for rendering each
+ * individual record card item, identified by the index prop.
+ *
+ * @param props
+ * @internal
+ */
+function RecordCardItemRenderer(props) {
+  var _props$data = props.data,
+    records = _props$data.records,
+    fields = _props$data.fields,
+    view = _props$data.view,
+    width = _props$data.width,
+    attachmentCoverField = _props$data.attachmentCoverField,
+    onClick = _props$data.onClick,
+    onMouseEnter = _props$data.onMouseEnter,
+    onMouseLeave = _props$data.onMouseLeave;
+  var itemIndex = props.index,
+    style = props.style,
+    className = props.className;
+  var record = records[itemIndex];
+  // Ensure that expandRecordOptions.records only contains Records, not RecordDefs. RecordCardList
+  // can be given either Records or RecordDefs, but the `opts` argument in `expandRecord` only
+  // accepts an array of Records.
+  var filteredRecords = [];
+  var _iterator = _createForOfIteratorHelper(records),
+    _step;
+  try {
+    for (_iterator.s(); !(_step = _iterator.n()).done;) {
+      var currentRecord = _step.value;
+      if (currentRecord instanceof _record.default) {
+        filteredRecords.push(currentRecord);
+      }
+    }
+  } catch (err) {
+    _iterator.e(err);
+  } finally {
+    _iterator.f();
+  }
+  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");
+  }
+
+  // RecordCard handles null and undefined differently for `onClick`. Treat other
+  // falsey values (e.g. "", false) like null.
+  var _onClick;
+  if (onClick) {
+    _onClick = () => onClick(record, itemIndex);
+  } else if (onClick === undefined) {
+    _onClick = undefined;
+  } else {
+    _onClick = null;
+  }
+  return /*#__PURE__*/React.createElement(_record_card.default, {
+    record: record,
+    fields: fields,
+    view: view,
+    attachmentCoverField: attachmentCoverField,
+    onClick: _onClick,
+    expandRecordOptions: filteredRecords.length > 0 ? {
+      records: filteredRecords
+    } : null,
+    onMouseEnter: onMouseEnter ? () => onMouseEnter(record, itemIndex) : undefined,
+    onMouseLeave: onMouseLeave ? () => onMouseLeave(record, itemIndex) : undefined,
+    width: width,
+    height: RECORD_CARD_ROW_HEIGHT,
+    className: className
+    // Adjustments to top and left made to properly position the cards in the list. FixedSizeList doesn't
+    // differentiate between content & gutter for each "item" it renders. See https://github.com/bvaughn/react-window#can-i-add-gutter-or-padding-between-items
+    ,
+    style: _objectSpread(_objectSpread({}, style), {}, {
+      left: Number(style.left) + RECORD_CARD_SPACING,
+      top: Number(style.top) + RECORD_CARD_SPACING
+    })
+  });
+}
+RecordCardItemRenderer.propTypes = {
+  data: _propTypes.default.shape({
+    records: _propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.instanceOf(_record.default), _propTypes.default.object])).isRequired,
+    fields: _propTypes.default.arrayOf(_propTypes.default.instanceOf(_field.default)),
+    view: _propTypes.default.instanceOf(_view.default),
+    attachmentCoverField: _propTypes.default.instanceOf(_field.default),
+    onClick: _propTypes.default.func,
+    onMouseEnter: _propTypes.default.func,
+    onMouseLeave: _propTypes.default.func,
+    width: _propTypes.default.number.isRequired,
+    className: _propTypes.default.string,
+    style: _propTypes.default.object
+  }),
+  index: _propTypes.default.number.isRequired,
+  style: _propTypes.default.object,
+  className: _propTypes.default.string
+};
+
+/**
+ * Utility function to measure scrollbar size.
+ * Used to correctly calculate the width for record cards in the container.
+ *
+ * @internal
+ */
+function getScrollbarWidth() {
+  var scrollDiv = document.createElement('div');
+  scrollDiv.style.position = 'absolute';
+  scrollDiv.style.top = '-9999px';
+  scrollDiv.style.width = '50px';
+  scrollDiv.style.height = '50px';
+  scrollDiv.style.overflow = 'scroll';
+  var body = document.body;
+  (0, _error_utils.invariant)(body, 'no document body to measure scrollbar');
+  body.appendChild(scrollDiv);
+  var scrollbarWidth = scrollDiv.offsetWidth - scrollDiv.clientWidth;
+  body.removeChild(scrollDiv);
+  return scrollbarWidth;
+}
+
+/**
+ * @internal
+ */
+
+/**
+ * Wrapper component for RecordCardList's window (passed to FixedSizeList).
+ *
+ * This is used to force FixedSizeList (`react-window`) to include padding at both top and bottom
+ * of the record card list. The FixedSizeList accounts for card padding on every card (baked into
+ * `itemSize`), but this doesn't account for the 1 extra padding required beneath the last card.
+ * (ie, if we have 10 cards, the height needs to be (10 * card_height) + (11 * card_padding)).
+ *
+ * @internal
+ */
+var innerRecordCardListWindow = /*#__PURE__*/React.forwardRef((props, ref) => {
+  var style = props.style,
+    children = props.children;
+  return /*#__PURE__*/React.createElement("div", {
+    ref: ref
+    // Height adjustment required to account for the spacing between the last item and the bottom of the list container.
+    // See https://github.com/bvaughn/react-window#can-i-add-padding-to-the-top-and-bottom-of-a-list
+    ,
+    style: _objectSpread(_objectSpread({}, style), {}, {
+      height: Number(style.height) + RECORD_CARD_SPACING
+    })
+  }, children);
+});
+
+/**
+ * Scroll event for {@link RecordCardList}.
+ */
+
+/**
+ * Props for the {@link RecordCardList} component. Also accepts:
+ * * {@link RecordCardListStyleProps}
+ *
+ * @docsPath UI/components/RecordCardList
+ */
+// This doesn't actually extend RecordCardListStyleProps since withStyledSystem
+// expects non-style props and style props as separate generic type variables.
+
+/**
+ * Style props for the {@link RecordCardList} component. Accepts:
+ * * {@link DimensionsSetProps}
+ * * {@link FlexItemSetProps}
+ * * {@link MarginProps}
+ * * {@link PositionSetProps}
+ *
+ * @noInheritDoc
+ */
+
+var styleParser = (0, _core.compose)(_system.dimensionsSet, _system.flexItemSet, _system.positionSet, _system.margin);
+var recordCardListStylePropTypes = exports.recordCardListStylePropTypes = _objectSpread(_objectSpread(_objectSpread(_objectSpread({}, _system.dimensionsSetPropTypes), _system.flexItemSetPropTypes), _system.positionSetPropTypes), _system.marginPropTypes);
+
+/** @hidden */
+/**
+ * Scrollable list of record cards.
+ *
+ * [[ Story id="recordcardlist--example" title="RecordCardList example" height="560px" ]]
+ *
+ * @docsPath UI/components/RecordCardList
+ * @component
+ */
+var RecordCardList = exports.RecordCardList = /*#__PURE__*/function (_React$Component) {
+  /** @hidden */
+  function RecordCardList(props) {
+    var _this;
+    (0, _classCallCheck2.default)(this, RecordCardList);
+    _this = _callSuper(this, RecordCardList, [props]);
+    /** @internal */
+    (0, _defineProperty2.default)(_this, "_container", void 0);
+    /** @internal */
+    (0, _defineProperty2.default)(_this, "_cardList", void 0);
+    /** @internal */
+    (0, _defineProperty2.default)(_this, "_cardListInnerWindow", void 0);
+    /** @internal */
+    (0, _defineProperty2.default)(_this, "_detectElementResize", void 0);
+    /** @internal */
+    (0, _defineProperty2.default)(_this, "_scrollbarWidth", void 0);
+    /** @internal */
+    (0, _defineProperty2.default)(_this, "_updateCardListSizeIfNeeded", () => {
+      (0, _error_utils.invariant)(_this._container.current, 'No container to update card list size');
+      var _this$_container$curr = _this._container.current.getBoundingClientRect(),
+        cardListWidth = _this$_container$curr.width,
+        cardListHeight = _this$_container$curr.height;
+      (0, _error_utils.invariant)(_this._cardListInnerWindow.current, 'No card list inner window to measure scroll height');
+      var isScrollbarVisible = _this._cardListInnerWindow.current.scrollHeight > cardListHeight;
+      if (_this.state.cardListWidth !== cardListWidth || _this.state.cardListHeight !== cardListHeight || _this.state.isScrollbarVisible !== isScrollbarVisible) {
+        _this.setState({
+          cardListWidth,
+          cardListHeight,
+          isScrollbarVisible
+        });
+      }
+    });
+    _this._container = /*#__PURE__*/React.createRef();
+    _this._cardList = /*#__PURE__*/React.createRef();
+    _this._cardListInnerWindow = /*#__PURE__*/React.createRef();
+    _this._detectElementResize = (0, _create_detect_element_resize.default)();
+    _this._scrollbarWidth = getScrollbarWidth();
+    _this.state = {
+      cardListWidth: 0,
+      cardListHeight: 0,
+      isScrollbarVisible: false
+    };
+    return _this;
+  }
+  /** @hidden */
+  (0, _inherits2.default)(RecordCardList, _React$Component);
+  return (0, _createClass2.default)(RecordCardList, [{
+    key: "componentDidMount",
+    value: function componentDidMount() {
+      (0, _error_utils.invariant)(this._container.current, 'No container to detect resize on');
+      this._detectElementResize.addResizeListener(this._container.current, this._updateCardListSizeIfNeeded);
+      this._updateCardListSizeIfNeeded();
+    }
+    /** @hidden */
+  }, {
+    key: "componentWillUnmount",
+    value: function componentWillUnmount() {
+      if (this._container.current) {
+        this._detectElementResize.removeResizeListener(this._container.current, this._updateCardListSizeIfNeeded);
+      }
+    }
+    /** @hidden */
+  }, {
+    key: "componentDidUpdate",
+    value: function componentDidUpdate(prevProps) {
+      // If the number of records change, we may need to adjust card widths if a scrollbar
+      // now exists (or no longer exists)
+      if (this.props.records.length !== prevProps.records.length) {
+        this._updateCardListSizeIfNeeded();
+      }
+    }
+    // Functionality for `getScrollTopForRecordAtIndex` and `scrollTop` getter/setter was
+    // removed when migrating from DynamicDraw => react-window, which were not being used
+    // by any consuming component at the time of migration.
+    /** @hidden */
+  }, {
+    key: "scrollToRecordAtIndex",
+    value: function scrollToRecordAtIndex(recordIndex) {
+      (0, _error_utils.invariant)(this._cardList.current, 'No card list to scroll');
+      this._cardList.current.scrollToItem(recordIndex);
+    }
+  }, {
+    key: "render",
+    value: /** @hidden */
+    function render() {
+      var _this$props$onRecordM, _this$props$onRecordM2;
+      var _this$props = this.props,
+        records = _this$props.records,
+        fields = _this$props.fields,
+        view = _this$props.view,
+        attachmentCoverField = _this$props.attachmentCoverField,
+        className = _this$props.className,
+        style = _this$props.style;
+      var itemData = {
+        records,
+        fields,
+        view,
+        width: this.state.cardListWidth - 2 * RECORD_CARD_SPACING - (this.state.isScrollbarVisible ? this._scrollbarWidth : 0),
+        attachmentCoverField,
+        onClick: this.props.onRecordClick,
+        onMouseEnter: (_this$props$onRecordM = this.props.onRecordMouseEnter) !== null && _this$props$onRecordM !== void 0 ? _this$props$onRecordM : null,
+        onMouseLeave: (_this$props$onRecordM2 = this.props.onRecordMouseLeave) !== null && _this$props$onRecordM2 !== void 0 ? _this$props$onRecordM2 : null,
+        style: {},
+        className: ''
+      };
+      return /*#__PURE__*/React.createElement(_box.default, {
+        ref: this._container,
+        className: className,
+        overflow: "hidden",
+        height: "100%",
+        style: style
+      }, /*#__PURE__*/React.createElement(_reactWindow.FixedSizeList, {
+        outerRef: this._cardList,
+        width: this.state.cardListWidth,
+        height: this.state.cardListHeight,
+        innerElementType: innerRecordCardListWindow,
+        innerRef: this._cardListInnerWindow,
+        itemData: itemData,
+        itemCount: this.props.records.length,
+        itemKey: (index, data) => data.records[index].id,
+        itemSize: RECORD_CARD_ROW_HEIGHT + RECORD_CARD_SPACING,
+        onScroll: this.props.onScroll
+      },
+      // TODO(alex): figure out why this needs a cast to any - something to do with prop-types?
+      RecordCardItemRenderer));
+    }
+  }]);
+}(React.Component);
+/** @hidden */
+(0, _defineProperty2.default)(RecordCardList, "propTypes", {
+  records: _propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.instanceOf(_record.default), _propTypes.default.object])).isRequired,
+  onScroll: _propTypes.default.func,
+  onRecordClick: _propTypes.default.func,
+  onRecordMouseEnter: _propTypes.default.func,
+  onRecordMouseLeave: _propTypes.default.func,
+  // Passed through to RecordCard.
+  fields: _propTypes.default.arrayOf(_propTypes.default.instanceOf(_field.default).isRequired),
+  view: _propTypes.default.instanceOf(_view.default),
+  attachmentCoverField: _propTypes.default.instanceOf(_field.default),
+  className: _propTypes.default.string,
+  style: _propTypes.default.object
+});
+var _default = exports.default = (0, _with_styled_system.default)(RecordCardList, styleParser, recordCardListStylePropTypes);

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

@@ -0,0 +1,247 @@
+"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.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");
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.sharedSelectPropTypes = exports.sharedSelectBasePropTypes = exports.selectStylePropTypes = exports.default = void 0;
+require("core-js/modules/es.array.concat.js");
+require("core-js/modules/es.array.filter.js");
+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/web.dom-collections.iterator.js");
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _emotion = require("emotion");
+var React = _interopRequireWildcard(require("react"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+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 _tooltip_anchor_props = require("./types/tooltip_anchor_props");
+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");
+var _excluded = ["size", "value", "options", "autoFocus", "disabled", "id", "name", "tabIndex", "onChange", "onMouseEnter", "onMouseLeave", "onClick", "hasOnClick", "className", "style", "aria-label", "aria-describedby", "aria-labelledby"];
+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: Select */ /** */
+/** @hidden */
+
+var SelectVariant = (0, _private_utils.createEnum)('default');
+
+/** @internal */
+function useSelectVariant() {
+  var variant = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : SelectVariant.default;
+  var _useTheme = (0, _use_theme.default)(),
+    selectVariants = _useTheme.selectVariants;
+  return selectVariants[variant];
+}
+
+// This component isn't great right now. It's just a styled <select> with a really hacky
+// way of getting the chevron arrow to show up. It also behaves weirdly when you give it
+// a margin (I think this is a limitation of <select>). We should probably replace it with
+// something like react-select, which would give us nice features like rendering custom
+// elements for options (e.g. for field type icons) and typeahead search.
+
+/**
+ * Style props shared between the following components.
+ * * {@link Select}, {@link SelectSynced}
+ * * {@link TablePicker}, {@link TablePickerSynced}
+ * * {@link ViewPicker}, {@link ViewPickerSynced}
+ * * {@link FieldPicker}, {@link FieldPickerSynced}
+ *
+ * Also accepts:
+ * * {@link FlexItemSetProps}
+ * * {@link MarginProps}
+ * * {@link MaxWidthProps}
+ * * {@link MinWidthProps}
+ * * {@link PositionSetProps}
+ * * {@link MaxWidthProps}
+ *
+ * @noInheritDoc
+ */
+
+/**
+ * Props shared between the following components:
+ * * {@link Select}, {@link SelectSynced}
+ * * {@link TablePicker}, {@link TablePickerSynced}
+ * * {@link ViewPicker}, {@link ViewPickerSynced}
+ * * {@link FieldPicker}, {@link FieldPickerSynced}
+ *
+ * @noInheritDoc
+ */
+
+var selectStylePropTypes = exports.selectStylePropTypes = _objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread({}, _system.maxWidthPropTypes), _system.minWidthPropTypes), _system.widthPropTypes), _system.flexItemSetPropTypes), _system.positionSetPropTypes), _system.marginPropTypes);
+
+// Shared with `Select`, `SelectSynced`, `ModelPickerSelect` and `(Table/View/Field)Picker(Synced)`
+var sharedSelectBasePropTypes = exports.sharedSelectBasePropTypes = _objectSpread(_objectSpread({
+  size: _control_sizes.controlSizePropType,
+  autoFocus: _propTypes.default.bool,
+  disabled: _propTypes.default.bool,
+  id: _propTypes.default.string,
+  name: _propTypes.default.string,
+  tabIndex: _propTypes.default.number,
+  className: _propTypes.default.string,
+  style: _propTypes.default.object,
+  'aria-label': _propTypes.default.string,
+  'aria-labelledby': _propTypes.default.string,
+  'aria-describedby': _propTypes.default.string
+}, _tooltip_anchor_props.tooltipAnchorPropTypes), selectStylePropTypes);
+
+/**
+ * Props shared between the {@link Select} and {@link SelectSynced} components.
+ */
+
+// Shared with `Select` and `SelectSynced`.
+var sharedSelectPropTypes = exports.sharedSelectPropTypes = _objectSpread({
+  // We do more strict checks in render.
+  options: _propTypes.default.arrayOf(_propTypes.default.shape({
+    value: _select_and_select_buttons_helpers.selectOptionValuePropType,
+    label: _propTypes.default.node.isRequired,
+    disabled: _propTypes.default.bool
+  }).isRequired).isRequired,
+  onChange: _propTypes.default.func
+}, sharedSelectBasePropTypes);
+
+/**
+ * Props for the {@link Select} component. Also accepts:
+ * * {@link SelectStyleProps}
+ *
+ * @docsPath UI/components/Select
+ */
+
+var styleParser = (0, _core.compose)(_system.maxWidth, _system.minWidth, _system.width, _system.flexItemSet, _system.positionSet, _system.margin);
+
+/**
+ * Dropdown menu component. A wrapper around `<select>` that fits in with Airtable's user interface.
+ *
+ * [[ Story id="select--example" title="Select example" ]]
+ *
+ * @component
+ * @docsPath UI/components/Select
+ */
+var Select = (props, ref) => {
+  var _props$size = props.size,
+    size = _props$size === void 0 ? _control_sizes.ControlSize.default : _props$size,
+    value = props.value,
+    _props$options = props.options,
+    originalOptions = _props$options === void 0 ? [] : _props$options,
+    autoFocus = props.autoFocus,
+    disabled = props.disabled,
+    id = props.id,
+    name = props.name,
+    tabIndex = props.tabIndex,
+    onChange = props.onChange,
+    onMouseEnter = props.onMouseEnter,
+    onMouseLeave = props.onMouseLeave,
+    onClick = props.onClick,
+    hasOnClick = props.hasOnClick,
+    className = props.className,
+    style = props.style,
+    ariaLabel = props['aria-label'],
+    ariaDescribedByProp = props['aria-describedby'],
+    ariaLabelledBy = props['aria-labelledby'],
+    styleProps = (0, _objectWithoutProperties2.default)(props, _excluded);
+  var formFieldContextValue = (0, _use_form_field.default)();
+  var controlId = formFieldContextValue ? formFieldContextValue.controlId : undefined;
+  var descriptionId = formFieldContextValue ? formFieldContextValue.descriptionId : undefined;
+  var ariaDescribedBy = [ariaDescribedByProp, descriptionId].filter(Boolean).join(' ') || undefined;
+  // There is only a single default variant.
+  var classNameForSelectVariant = useSelectVariant();
+  var classNameForSelectSize = (0, _control_sizes.useSelectSize)(size);
+  var classNameForStyleProps = (0, _use_styled_system.default)(_objectSpread({
+    width: '100%'
+  }, styleProps), styleParser);
+  function _onChange(e) {
+    if (onChange) {
+      var newValue = (0, _select_and_select_buttons_helpers.stringToOptionValue)(e.currentTarget.value);
+      onChange(newValue);
+    }
+  }
+
+  // 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.
+  var validationResult = (0, _select_and_select_buttons_helpers.validateOptions)(originalOptions);
+  if (!validationResult.isValid) {
+    throw (0, _error_utils.spawnError)('<Select> %s', validationResult.reason);
+  }
+  var didFindOptionMatchingValue = false;
+  var _iterator = _createForOfIteratorHelper(originalOptions),
+    _step;
+  try {
+    for (_iterator.s(); !(_step = _iterator.n()).done;) {
+      var option = _step.value;
+      if (option.value === value) {
+        didFindOptionMatchingValue = true;
+        break;
+      }
+    }
+  } catch (err) {
+    _iterator.e(err);
+  } finally {
+    _iterator.f();
+  }
+  var options = [];
+  if (!didFindOptionMatchingValue) {
+    // Since there's no option that matches the given value, let's add an
+    // empty option at the top and log a warning.
+    options.push({
+      label: '',
+      value,
+      disabled: true
+    });
+    // eslint-disable-next-line no-console
+    console.warn("No option for selected value in <Select>: ".concat(String(value)).substr(0, 100));
+  }
+  options.push(...originalOptions);
+  return /*#__PURE__*/React.createElement("select", {
+    ref: ref,
+    value: (0, _select_and_select_buttons_helpers.optionValueToString)(value),
+    onChange: _onChange,
+    onMouseEnter: onMouseEnter,
+    onMouseLeave: onMouseLeave,
+    onClick: onClick,
+    autoFocus: autoFocus,
+    disabled: disabled,
+    id: id || controlId,
+    name: name,
+    tabIndex: tabIndex,
+    className: (0, _emotion.cx)(classNameForSelectVariant, classNameForSelectSize, classNameForStyleProps, className),
+    style: style,
+    "aria-label": ariaLabel,
+    "aria-labelledby": ariaLabelledBy,
+    "aria-describedby": ariaDescribedBy
+  }, options.map((option, index) => {
+    var valueJson = (0, _select_and_select_buttons_helpers.optionValueToString)(option.value);
+    return /*#__PURE__*/React.createElement("option", {
+      key: "".concat(valueJson, "-").concat(option.label, "-").concat(index),
+      value: valueJson,
+      disabled: option.disabled ? option.disabled : false
+    }, option.label);
+  }));
+};
+var ForwardedRefSelect = /*#__PURE__*/React.forwardRef(Select);
+ForwardedRefSelect.displayName = 'Select';
+ForwardedRefSelect.propTypes = _objectSpread({
+  value: _select_and_select_buttons_helpers.selectOptionValuePropType
+}, sharedSelectPropTypes);
+var _default = exports.default = ForwardedRefSelect;