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

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

@@ -0,0 +1,229 @@
+"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.linkStylePropTypes = exports.default = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+require("core-js/modules/es.array.index-of.js");
+require("core-js/modules/es.regexp.exec.js");
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var React = _interopRequireWildcard(require("react"));
+var _emotion = require("emotion");
+var _core = require("@styled-system/core");
+var _private_utils = require("../../shared/private_utils");
+var _use_styled_system = _interopRequireDefault(require("./use_styled_system"));
+var _use_theme = _interopRequireDefault(require("./theme/use_theme"));
+var _aria_props = require("./types/aria_props");
+var _data_attributes_prop = require("./types/data_attributes_prop");
+var _create_responsive_prop_type = _interopRequireDefault(require("./system/utils/create_responsive_prop_type"));
+var _system = require("./system");
+var _tooltip_anchor_props = require("./types/tooltip_anchor_props");
+var _text = require("./text");
+var _icon_config = require("./icon_config");
+var _icon = _interopRequireDefault(require("./icon"));
+var _enum_prop_type_utils = require("./system/utils/enum_prop_type_utils");
+var _excluded = ["size", "variant", "underline", "icon", "href", "id", "target", "onMouseEnter", "onMouseLeave", "onClick", "hasOnClick", "tabIndex", "className", "style", "children", "dataAttributes", "aria-label", "aria-labelledby", "aria-describedby", "aria-controls", "aria-expanded", "aria-haspopup", "aria-hidden", "aria-live"];
+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: Link */ /** */
+/**
+ * Style props for the {@link Link} component. Also accepts:
+ * * {@link FlexItemSetProps}
+ * * {@link FontWeightProps}
+ * * {@link MaxWidthProps}
+ * * {@link MinWidthProps}
+ * * {@link PositionSetProps}
+ * * {@link SpacingSetProps}
+ * * {@link WidthProps}
+ *
+ * @noInheritDoc
+ */
+
+var styleParser = (0, _core.compose)(_system.display, _system.maxWidth, _system.minWidth, _system.width, _system.flexItemSet, _system.positionSet, _system.fontWeight, _system.spacingSet);
+var linkStylePropTypes = exports.linkStylePropTypes = _objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread({
+  display: (0, _create_responsive_prop_type.default)(_propTypes.default.oneOf(['inline-flex', 'flex', 'none']))
+}, _system.maxWidthPropTypes), _system.minWidthPropTypes), _system.widthPropTypes), _system.flexItemSetPropTypes), _system.positionSetPropTypes), _system.fontWeightPropTypes), _system.spacingSetPropTypes);
+
+/**
+ * Variants for the {@link Link} component:
+ *
+ * • **default**
+ *
+ * Blue text.
+ *
+ * • **dark**
+ *
+ * Dark gray text.
+ *
+ * • **light**
+ *
+ * Light gray text.
+ */
+
+var LinkVariant = (0, _private_utils.createEnum)('default', 'dark', 'light');
+var linkVariantPropType = (0, _enum_prop_type_utils.createPropTypeFromEnum)(LinkVariant);
+
+/** @internal */
+function useLinkVariant() {
+  var variant = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : LinkVariant.default;
+  var _useTheme = (0, _use_theme.default)(),
+    linkVariants = _useTheme.linkVariants;
+  return linkVariants[variant];
+}
+
+/**
+ * Props for the {@link Link} component. Also supports:
+ * * {@link AriaProps}
+ * * {@link LinkStyleProps}
+ *
+ * @docsPath UI/components/Link
+ * @noInheritDoc
+ */
+
+// A "reasonable" scheme is one which does not have any escaped characters.
+// This means if it passes this regex, we can confidently check to make sure the
+// scheme is not "javascript://" to avoid XSS. Otherwise, "javascript" may be encoded
+// as "&#106avascript://" or any other permutation of escaped characters.
+// Ref: https://tools.ietf.org/html/rfc3986#section-3.1
+var reasonableUrlSchemeRegex = /^[a-z0-9]+:\/\//i;
+
+/** @internal */
+function _getSanitizedHref(href) {
+  if (!href) {
+    return undefined;
+  }
+  var hasScheme = href.indexOf('://') !== -1;
+  if (!hasScheme) {
+    // If it's a relative URL (like '/foo'), leave it alone.
+    return href;
+  } else if (reasonableUrlSchemeRegex.test(href) && !/^javascript:/i.test(href) && !/^data:/i.test(href)) {
+    // If it has a scheme and we can be 100% sure the scheme is
+    // not javascript or data, then leave it alone.
+    return href;
+  } else {
+    // We can't be confident that the scheme isn't javascript or data,
+    // (possibly with escaped characters), so prepend http:// to avoid
+    // XSS.
+    return 'http://' + href;
+  }
+}
+
+/**
+ * A styled link component with security benefits.
+ *
+ * [[ Story id="link--example" title="Link example" ]]
+ *
+ * ## Security benefits
+ *
+ * This component is a styled wrapper around the `<a>` tag that offers a few security benefits:
+ *
+ * - Limited XSS protection. If the `href` starts with `javascript:` or `data:`, `http://` will be prepended.
+ * - There is [reverse tabnabbing prevention](https://www.owasp.org/index.php/Reverse_Tabnabbing). If `target` is set, the `rel` attribute will be set to `noopener noreferrer`.
+ *
+ * Developers should use `Link` instead of `a` when possible.
+ *
+ * @docsPath UI/components/Link
+ * @component
+ */
+var Link = (props, ref) => {
+  var _props$size = props.size,
+    size = _props$size === void 0 ? _text.TextSize.default : _props$size,
+    _props$variant = props.variant,
+    variant = _props$variant === void 0 ? LinkVariant.default : _props$variant,
+    _props$underline = props.underline,
+    underline = _props$underline === void 0 ? false : _props$underline,
+    icon = props.icon,
+    href = props.href,
+    id = props.id,
+    target = props.target,
+    onMouseEnter = props.onMouseEnter,
+    onMouseLeave = props.onMouseLeave,
+    onClick = props.onClick,
+    hasOnClick = props.hasOnClick,
+    tabIndex = props.tabIndex,
+    className = props.className,
+    style = props.style,
+    children = props.children,
+    dataAttributes = props.dataAttributes,
+    ariaLabel = props['aria-label'],
+    ariaLabelledBy = props['aria-labelledby'],
+    ariaDescribedBy = props['aria-describedby'],
+    ariaControls = props['aria-controls'],
+    ariaExpanded = props['aria-expanded'],
+    ariaHasPopup = props['aria-haspopup'],
+    ariaHidden = props['aria-hidden'],
+    ariaLive = props['aria-live'],
+    styleProps = (0, _objectWithoutProperties2.default)(props, _excluded);
+  var classNameForTextStyle = (0, _text.useTextStyle)(size);
+  var classNameForLinkVariant = useLinkVariant(variant);
+  var classNameForUnderline = (0, _use_styled_system.default)({
+    textDecoration: underline ? 'underline' : 'none'
+  });
+  var classNameForStyleProps = (0, _use_styled_system.default)(_objectSpread({
+    display: 'inline-flex',
+    // Use a negative margin to undo the padding.
+    padding: '0 0.1em',
+    margin: '0 -0.1em',
+    maxWidth: '100%'
+  }, styleProps), styleParser);
+
+  // Set rel="noopener noreferrer" to avoid reverse tabnabbing.
+  // https://www.owasp.org/index.php/Reverse_Tabnabbing
+  var rel = target ? 'noopener noreferrer' : undefined;
+  return /*#__PURE__*/React.createElement("a", (0, _extends2.default)({
+    ref: ref,
+    href: _getSanitizedHref(href),
+    target: target,
+    id: id,
+    rel: rel
+    // TODO (stephen): remove tooltip anchor props
+    ,
+    onMouseEnter: onMouseEnter,
+    onMouseLeave: onMouseLeave,
+    onClick: onClick,
+    tabIndex: tabIndex,
+    className: (0, _emotion.cx)(classNameForTextStyle, classNameForLinkVariant, classNameForUnderline, classNameForStyleProps, className),
+    style: style,
+    "aria-label": ariaLabel,
+    "aria-labelledby": ariaLabelledBy,
+    "aria-describedby": ariaDescribedBy,
+    "aria-controls": ariaControls,
+    "aria-expanded": ariaExpanded,
+    "aria-haspopup": ariaHasPopup,
+    "aria-hidden": ariaHidden,
+    "aria-live": ariaLive
+  }, dataAttributes), typeof icon === 'string' ? /*#__PURE__*/React.createElement(_icon.default, {
+    name: icon,
+    size: "1em",
+    flex: "none",
+    marginRight: "0.5em"
+  }) : icon, children);
+};
+var ForwardedRefLink = /*#__PURE__*/React.forwardRef(Link);
+ForwardedRefLink.propTypes = _objectSpread(_objectSpread(_objectSpread({
+  size: _text.textSizePropType,
+  variant: linkVariantPropType,
+  icon: _propTypes.default.oneOfType([_icon_config.iconNamePropType, _propTypes.default.element]),
+  href: _propTypes.default.string.isRequired,
+  target: _propTypes.default.string,
+  tabIndex: _propTypes.default.number,
+  className: _propTypes.default.string,
+  style: _propTypes.default.object,
+  children: _propTypes.default.node,
+  dataAttributes: _data_attributes_prop.dataAttributesPropType
+}, _tooltip_anchor_props.tooltipAnchorPropTypes), linkStylePropTypes), _aria_props.ariaPropTypes);
+ForwardedRefLink.displayName = 'Link';
+var _default = exports.default = ForwardedRefLink;

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

@@ -0,0 +1,82 @@
+"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.loaderStylePropTypes = exports.default = void 0;
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _emotion = require("emotion");
+var React = _interopRequireWildcard(require("react"));
+var _core = require("@styled-system/core");
+var _loader = _interopRequireDefault(require("../../shared/ui/loader"));
+var _baymax_utils = require("./baymax_utils");
+var _use_styled_system = _interopRequireDefault(require("./use_styled_system"));
+var _system = require("./system");
+var _excluded = ["fillColor", "scale", "className", "style"];
+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: Loader */ /** */
+/**
+ * Style props for the {@link Loader} component. Accepts:
+ * * {@link FlexItemSetProps}
+ * * {@link MarginProps}
+ * * {@link PositionSetProps}
+ */
+
+var styleParser = (0, _core.compose)(_system.flexItemSet, _system.positionSet, _system.margin);
+var loaderStylePropTypes = exports.loaderStylePropTypes = _objectSpread(_objectSpread(_objectSpread({}, _system.flexItemSetPropTypes), _system.positionSetPropTypes), _system.marginPropTypes);
+
+/**
+ * Props for the {@link Loader} component. Also accepts:
+ * * {@link LoaderStyleProps}
+ *
+ * @docsPath UI/components/Loader
+ * @noInheritDoc
+ */
+
+// Override the default props and then just proxy through to our loader.
+/**
+ * A loading spinner component.
+ *
+ * [[ Story id="loader--example" title="Loader example" ]]
+ *
+ * @docsPath UI/components/Loader
+ * @component
+ */
+var Loader = props => {
+  var fillColor = props.fillColor,
+    scale = props.scale,
+    className = props.className,
+    style = props.style,
+    styleProps = (0, _objectWithoutProperties2.default)(props, _excluded);
+  var classNameForStyleProps = (0, _use_styled_system.default)(styleProps, styleParser);
+  return /*#__PURE__*/React.createElement(_loader.default, {
+    fillColor: fillColor,
+    scale: scale,
+    className: (0, _emotion.cx)((0, _baymax_utils.baymax)('animate-spin-scale animate-infinite'), classNameForStyleProps, className),
+    style: style
+  });
+};
+Loader.propTypes = _objectSpread({
+  fillColor: _propTypes.default.string.isRequired,
+  scale: _propTypes.default.number.isRequired,
+  className: _propTypes.default.string,
+  style: _propTypes.default.object
+}, loaderStylePropTypes);
+Loader.defaultProps = {
+  fillColor: '#888',
+  scale: 0.3
+};
+var _default = exports.default = Loader;

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

@@ -0,0 +1,184 @@
+"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.modalStylePropTypes = exports.default = exports.Modal = void 0;
+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 _emotion = require("emotion");
+var React = _interopRequireWildcard(require("react"));
+var _reactDom = _interopRequireDefault(require("react-dom"));
+var _core = require("@styled-system/core");
+var _error_utils = require("../../shared/error_utils");
+var _baymax_utils = require("./baymax_utils");
+var _with_styled_system = _interopRequireDefault(require("./with_styled_system"));
+var _system = require("./system");
+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; } /** @hidden */ /** */
+/**
+ * Props for the {@link Modal} component. Also accepts:
+ * * {@link ModalStyleProps}
+ *
+ * @hidden
+ */
+// This doesn't actually extend ModalStyleProps since withStyledSystem
+// expects non-style props and style props as separate generic type variables.
+
+/**
+ * Style props shared between the {@link Modal}, {@link Dialog}, and {@link ConfirmationDialog} components. Also accepts:
+ * * {@link DimensionsSetProps}
+ * * {@link FlexContainerSetProps}
+ * * {@link SpacingSetProps}
+ *
+ * @hidden
+ * @noInheritDoc
+ */
+
+var styleParser = (0, _core.compose)(_system.dimensionsSet, _system.display, _system.flexContainerSet, _system.spacingSet);
+var modalStylePropTypes = exports.modalStylePropTypes = _objectSpread(_objectSpread(_objectSpread(_objectSpread({}, _system.dimensionsSetPropTypes), _system.displayPropTypes), _system.flexContainerSetPropTypes), _system.spacingSetPropTypes);
+
+/**
+ * Generic modal component with minimal styling.
+ *
+ * @hidden
+ */
+// TODO (stephen): refactor so Modal only includes the background element and renders the dialog via children
+var Modal = exports.Modal = /*#__PURE__*/function (_React$Component) {
+  /** @hidden */
+  function Modal(props) {
+    var _this;
+    (0, _classCallCheck2.default)(this, Modal);
+    _this = _callSuper(this, Modal, [props]);
+    /** @internal */
+    (0, _defineProperty2.default)(_this, "_background", void 0);
+    /** @internal */
+    (0, _defineProperty2.default)(_this, "_container", void 0);
+    /** @internal */
+    (0, _defineProperty2.default)(_this, "_originalActiveElement", void 0);
+    /** @internal */
+    (0, _defineProperty2.default)(_this, "_mouseDownOutsideModal", void 0);
+    _this._background = null;
+    _this._container = document.createElement('div');
+    _this._originalActiveElement = null;
+    _this._mouseDownOutsideModal = false;
+    _this._onMouseDown = _this._onMouseDown.bind(_this);
+    _this._onMouseUp = _this._onMouseUp.bind(_this);
+    return _this;
+  }
+  /** @hidden */
+  (0, _inherits2.default)(Modal, _React$Component);
+  return (0, _createClass2.default)(Modal, [{
+    key: "componentDidMount",
+    value: function componentDidMount() {
+      var container = this._container;
+      container.setAttribute('tabIndex', '0');
+      container.style.zIndex = '99999';
+      // If we don't set `position: fixed`, the outline and box-shadow
+      // of elements that are in theory underneath this element will cover
+      // up the modal.
+      container.style.position = 'fixed';
+      (0, _error_utils.invariant)(document.body, 'no document body');
+      document.body.appendChild(container);
+
+      // If the frame is focused, move focus to the modal's container.
+      // Next time the user presses tab, it will focus the first focusable element in the modal.
+      // We only do this if the document is focused to avoid the frame becoming
+      // programmatically focused if a modal is displayed without user interaction.
+      if (document.hasFocus()) {
+        this._originalActiveElement = document.activeElement;
+        container.focus();
+      }
+    }
+    /** @hidden */
+  }, {
+    key: "componentWillUnmount",
+    value: function componentWillUnmount() {
+      (0, _error_utils.invariant)(document.body, 'no document body');
+      document.body.removeChild(this._container);
+      if (this._originalActiveElement !== null) {
+        this._originalActiveElement.focus();
+      }
+    }
+    /** @internal */
+  }, {
+    key: "_onMouseDown",
+    value: function _onMouseDown(e) {
+      if (this._shouldClickingOnElementCloseModal(e.target)) {
+        this._mouseDownOutsideModal = true;
+      }
+    }
+    /** @internal */
+  }, {
+    key: "_onMouseUp",
+    value: function _onMouseUp(e) {
+      if (this._mouseDownOutsideModal && this.props.onClose && this._shouldClickingOnElementCloseModal(e.target)) {
+        this.props.onClose();
+      }
+      this._mouseDownOutsideModal = false;
+    }
+    /** @internal */
+  }, {
+    key: "_shouldClickingOnElementCloseModal",
+    value: function _shouldClickingOnElementCloseModal(el) {
+      return el === this._background;
+    }
+    /** @hidden */
+  }, {
+    key: "render",
+    value: function render() {
+      var _this$props = this.props,
+        className = _this$props.className,
+        style = _this$props.style,
+        backgroundClassName = _this$props.backgroundClassName,
+        backgroundStyle = _this$props.backgroundStyle,
+        children = _this$props.children;
+      return /*#__PURE__*/_reactDom.default.createPortal( /*#__PURE__*/React.createElement("div", {
+        ref: el => this._background = el,
+        className: (0, _emotion.cx)((0, _baymax_utils.baymax)('fixed all-0 darken3 flex items-center justify-center'), backgroundClassName),
+        style: backgroundStyle,
+        onMouseDown: this._onMouseDown,
+        onMouseUp: this._onMouseUp
+      }, /*#__PURE__*/React.createElement("div", {
+        className: (0, _emotion.cx)((0, _baymax_utils.baymax)('relative overflow-auto light-scrollbar white stroked1 rounded-big animate-bounce-in'), className),
+        style: style
+      }, children)), this._container);
+    }
+  }]);
+}(React.Component);
+/** @hidden */
+(0, _defineProperty2.default)(Modal, "propTypes", {
+  onClose: _propTypes.default.func,
+  className: _propTypes.default.string,
+  style: _propTypes.default.object,
+  backgroundClassName: _propTypes.default.string,
+  backgroundStyle: _propTypes.default.object
+});
+var _default = exports.default = (0, _with_styled_system.default)(Modal, styleParser, modalStylePropTypes,
+// TODO (stephen): move these to Dialog
+{
+  display: 'block',
+  width: '100%',
+  maxWidth: '100vw',
+  maxHeight: '100vh',
+  margin: 3,
+  padding: 3
+});

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

@@ -0,0 +1,83 @@
+"use strict";
+
+require("core-js/modules/es.symbol.js");
+require("core-js/modules/es.array.filter.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");
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+require("core-js/modules/es.array.iterator.js");
+require("core-js/modules/es.array.map.js");
+require("core-js/modules/web.dom-collections.iterator.js");
+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 React = _interopRequireWildcard(require("react"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _error_utils = require("../../shared/error_utils");
+var _table = _interopRequireDefault(require("../models/table"));
+var _view = _interopRequireDefault(require("../models/view"));
+var _field = _interopRequireDefault(require("../models/field"));
+var _use_watchable = _interopRequireDefault(require("../../shared/ui/use_watchable"));
+var _select = _interopRequireWildcard(require("./select"));
+var _excluded = ["models", "modelKeysToWatch", "selectedModelId", "shouldAllowPickingNone", "shouldAllowPickingModelFn", "placeholder", "onChange"];
+/** @hidden */
+/** */
+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; }
+// Private component used by TablePicker, ViewPicker, FieldPicker.
+
+function ModelPickerSelect(props, ref) {
+  var models = props.models,
+    modelKeysToWatch = props.modelKeysToWatch,
+    selectedModelId = props.selectedModelId,
+    shouldAllowPickingNone = props.shouldAllowPickingNone,
+    shouldAllowPickingModelFn = props.shouldAllowPickingModelFn,
+    placeholder = props.placeholder,
+    onChange = props.onChange,
+    restOfProps = (0, _objectWithoutProperties2.default)(props, _excluded);
+
+  // useWatchable has stricter typing than createDataContainer which it replaced, so we can't
+  // know that model and modelKeysToWatch are exactly compatible here:
+  (0, _use_watchable.default)(models, modelKeysToWatch);
+  function _onChange(value) {
+    (0, _error_utils.invariant)(value === null || typeof value === 'string', 'value must be null or model id');
+    onChange(value);
+  }
+  var options = [{
+    value: null,
+    label: placeholder,
+    disabled: !shouldAllowPickingNone
+  }, ...models.map(model => {
+    return {
+      value: model.id,
+      label: model.name,
+      disabled: shouldAllowPickingModelFn && !shouldAllowPickingModelFn(model)
+    };
+  })];
+  return /*#__PURE__*/React.createElement(_select.default, (0, _extends2.default)({}, restOfProps, {
+    ref: ref,
+    value: selectedModelId,
+    onChange: _onChange,
+    options: options
+  }));
+}
+var ForwardedRefModelPickerSelect = /*#__PURE__*/React.forwardRef(ModelPickerSelect);
+ForwardedRefModelPickerSelect.displayName = 'ModelPickerSelect';
+ForwardedRefModelPickerSelect.propTypes = _objectSpread({
+  models: _propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.instanceOf(_table.default).isRequired, _propTypes.default.instanceOf(_view.default).isRequired, _propTypes.default.instanceOf(_field.default).isRequired]).isRequired).isRequired,
+  selectedModelId: _propTypes.default.string,
+  modelKeysToWatch: _propTypes.default.arrayOf(_propTypes.default.string.isRequired).isRequired,
+  shouldAllowPickingNone: _propTypes.default.bool,
+  shouldAllowPickingModelFn: _propTypes.default.func,
+  onChange: _propTypes.default.func.isRequired,
+  placeholder: _propTypes.default.string.isRequired
+}, _select.sharedSelectBasePropTypes);
+var _default = exports.default = ForwardedRefModelPickerSelect;