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

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

@@ -0,0 +1,102 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.controlSizePropType = exports.ControlSize = void 0;
+exports.useButtonSize = useButtonSize;
+exports.useInputSize = useInputSize;
+exports.useSelectButtonsSize = useSelectButtonsSize;
+exports.useSelectSize = useSelectSize;
+exports.useSwitchSize = useSwitchSize;
+var _core = require("@styled-system/core");
+var _private_utils = require("../../shared/private_utils");
+var _use_theme = _interopRequireDefault(require("./theme/use_theme"));
+var _get_style_props_for_responsive_prop = _interopRequireDefault(require("./system/utils/get_style_props_for_responsive_prop"));
+var _use_styled_system = _interopRequireDefault(require("./use_styled_system"));
+var _system = require("./system");
+var _enum_prop_type_utils = require("./system/utils/enum_prop_type_utils");
+/** @module @airtable/blocks/ui/system: Control sizes */ /** */
+
+/**
+ * Sizes for the {@link Button}, {@link Input}, {@link Select}, {@link SelectButtons}, and {@link Switch} components.
+ */
+
+var ControlSize = exports.ControlSize = (0, _private_utils.createEnum)('small', 'default', 'large');
+
+/**
+ * Size prop for the {@link Button}, {@link Input}, {@link Select}, {@link SelectButtons}, and {@link Switch} components.
+ */
+
+var controlSizePropType = exports.controlSizePropType = (0, _enum_prop_type_utils.createResponsivePropTypeFromEnum)(ControlSize);
+
+/** @internal */
+function useButtonSize(controlSizeProp) {
+  var _useTheme = (0, _use_theme.default)(),
+    buttonSizes = _useTheme.buttonSizes;
+  var styleProps;
+  if (typeof controlSizeProp === 'string') {
+    styleProps = buttonSizes[controlSizeProp];
+  } else {
+    styleProps = (0, _get_style_props_for_responsive_prop.default)(controlSizeProp, buttonSizes);
+  }
+  return (0, _use_styled_system.default)(styleProps);
+}
+
+// For selects we create a custom style parser that includes `backgroundPosition`.
+var selectSizeStyleParser = (0, _core.compose)(_system.allStylesParser, (0, _core.system)({
+  backgroundPosition: true
+}));
+
+/** @internal */
+function useSelectSize(controlSizeProp) {
+  var _useTheme2 = (0, _use_theme.default)(),
+    selectSizes = _useTheme2.selectSizes;
+  var styleProps;
+  if (typeof controlSizeProp === 'string') {
+    styleProps = selectSizes[controlSizeProp];
+  } else {
+    styleProps = (0, _get_style_props_for_responsive_prop.default)(controlSizeProp, selectSizes);
+  }
+  return (0, _use_styled_system.default)(styleProps, selectSizeStyleParser);
+}
+
+/** @internal */
+function useInputSize(controlSizeProp) {
+  var _useTheme3 = (0, _use_theme.default)(),
+    inputSizes = _useTheme3.inputSizes;
+  var styleProps;
+  if (typeof controlSizeProp === 'string') {
+    styleProps = inputSizes[controlSizeProp];
+  } else {
+    styleProps = (0, _get_style_props_for_responsive_prop.default)(controlSizeProp, inputSizes);
+  }
+  return (0, _use_styled_system.default)(styleProps);
+}
+
+/** @internal */
+function useSelectButtonsSize(controlSizeProp) {
+  var _useTheme4 = (0, _use_theme.default)(),
+    selectButtonsSizes = _useTheme4.selectButtonsSizes;
+  var styleProps;
+  if (typeof controlSizeProp === 'string') {
+    styleProps = selectButtonsSizes[controlSizeProp];
+  } else {
+    styleProps = (0, _get_style_props_for_responsive_prop.default)(controlSizeProp, selectButtonsSizes);
+  }
+  return (0, _use_styled_system.default)(styleProps);
+}
+
+/** @internal */
+function useSwitchSize(controlSizeProp) {
+  var _useTheme5 = (0, _use_theme.default)(),
+    switchSizes = _useTheme5.switchSizes;
+  var styleProps;
+  if (typeof controlSizeProp === 'string') {
+    styleProps = switchSizes[controlSizeProp];
+  } else {
+    styleProps = (0, _get_style_props_for_responsive_prop.default)(controlSizeProp, switchSizes);
+  }
+  return (0, _use_styled_system.default)(styleProps);
+}

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

@@ -0,0 +1,207 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = createDetectElementResize;
+require("core-js/modules/es.array.index-of.js");
+require("core-js/modules/es.array.splice.js");
+require("core-js/modules/es.object.to-string.js");
+require("core-js/modules/web.dom-collections.for-each.js");
+// @ts-nocheck
+
+// Detect Element Resize.
+// https://github.com/sdecima/javascript-detect-element-resize
+// Sebastian Decima
+//
+// Forked from version 0.5.3; includes the following modifications:
+// 1) Guard against unsafe 'window' and 'document' references (to support SSR).
+// 2) Defer initialization code via a top-level function wrapper (to support SSR).
+// 3) Avoid unnecessary reflows by not measuring size for scroll events bubbling from children.
+// 4) Add nonce for style element.
+//
+// NOTE (jb): ported from react-virtualized to conform to our eslint rules.
+// https://github.com/bvaughn/react-virtualized/blob/master/source/vendor/detectElementResize.js
+//
+// TODO: make this file conform to our styleguide.
+/**
+ * @internal
+ */
+function createDetectElementResize(nonce) {
+  // Check `document` and `window` in case of server-side rendering
+  var _window;
+  if (typeof window !== 'undefined') {
+    _window = window;
+  } else if (typeof self !== 'undefined') {
+    _window = self;
+  } else {
+    _window = this; // eslint-disable-line consistent-this
+  }
+  var attachEvent = typeof document !== 'undefined' && document.attachEvent;
+  var animationName;
+  var animationKeyframes;
+  var animationStyle;
+  var resetTriggers;
+  var checkTriggers;
+  var scrollListener;
+  var animation;
+  var keyframeprefix;
+  var animationstartevent;
+  var domPrefixes;
+  var startEvents;
+  var pfx;
+  if (!attachEvent) {
+    var requestFrame = function () {
+      var raf = _window.requestAnimationFrame || _window.mozRequestAnimationFrame || _window.webkitRequestAnimationFrame || function (fn) {
+        return _window.setTimeout(fn, 20);
+      };
+      return function (fn) {
+        return raf(fn);
+      };
+    }();
+    var cancelFrame = function () {
+      var cancel = _window.cancelAnimationFrame || _window.mozCancelAnimationFrame || _window.webkitCancelAnimationFrame || _window.clearTimeout;
+      return function (id) {
+        return cancel(id);
+      };
+    }();
+    resetTriggers = function resetTriggers(element) {
+      var triggers = element.__resizeTriggers__,
+        expand = triggers.firstElementChild,
+        contract = triggers.lastElementChild,
+        expandChild = expand.firstElementChild;
+      contract.scrollLeft = contract.scrollWidth;
+      contract.scrollTop = contract.scrollHeight;
+      expandChild.style.width = expand.offsetWidth + 1 + 'px';
+      expandChild.style.height = expand.offsetHeight + 1 + 'px';
+      expand.scrollLeft = expand.scrollWidth;
+      expand.scrollTop = expand.scrollHeight;
+    };
+    checkTriggers = function checkTriggers(element) {
+      return element.offsetWidth !== element.__resizeLast__.width || element.offsetHeight !== element.__resizeLast__.height;
+    };
+    scrollListener = function scrollListener(e) {
+      // Don't measure (which forces) reflow for scrolls that happen inside of children!
+      if (e.target.className.indexOf('contract-trigger') < 0 && e.target.className.indexOf('expand-trigger') < 0) {
+        return;
+      }
+      var element = this; // eslint-disable-line consistent-this
+      resetTriggers(this);
+      if (this.__resizeRAF__) {
+        cancelFrame(this.__resizeRAF__);
+      }
+      this.__resizeRAF__ = requestFrame(function () {
+        if (checkTriggers(element)) {
+          element.__resizeLast__.width = element.offsetWidth;
+          element.__resizeLast__.height = element.offsetHeight;
+          element.__resizeListeners__.forEach(function (fn) {
+            fn.call(element, e);
+          });
+        }
+      });
+    };
+
+    /* Detect CSS Animations support to detect element display/re-attach */
+    animation = false;
+    keyframeprefix = '';
+    animationstartevent = 'animationstart';
+    domPrefixes = 'Webkit Moz O ms'.split(' ');
+    startEvents = 'webkitAnimationStart animationstart oAnimationStart MSAnimationStart'.split(' ');
+    pfx = '';
+
+    // eslint-disable-next-line no-lone-blocks
+    {
+      var elm = document.createElement('fakeelement');
+      if (elm.style.animationName !== undefined) {
+        animation = true;
+      }
+      if (animation === false) {
+        for (var i = 0; i < domPrefixes.length; i++) {
+          if (elm.style[domPrefixes[i] + 'AnimationName'] !== undefined) {
+            pfx = domPrefixes[i];
+            keyframeprefix = '-' + pfx.toLowerCase() + '-';
+            animationstartevent = startEvents[i];
+            animation = true;
+            break;
+          }
+        }
+      }
+    }
+    animationName = 'resizeanim';
+    animationKeyframes = '@' + keyframeprefix + 'keyframes ' + animationName + ' { from { opacity: 0; } to { opacity: 0; } } ';
+    animationStyle = keyframeprefix + 'animation: 1ms ' + animationName + '; ';
+  }
+  var createStyles = function createStyles() {
+    if (!document.getElementById('detectElementResize')) {
+      // opacity:0 works around a chrome bug https://code.google.com/p/chromium/issues/detail?id=286360
+      var css = (animationKeyframes ? animationKeyframes : '') + '.resize-triggers { ' + (animationStyle ? animationStyle : '') + 'visibility: hidden; opacity: 0; } ' + '.resize-triggers, .resize-triggers > div, .contract-trigger:before { content: " "; display: block; position: absolute; top: 0; left: 0; height: 100%; width: 100%; overflow: hidden; z-index: -1; } .resize-triggers > div { background: #eee; overflow: auto; } .contract-trigger:before { width: 200%; height: 200%; }',
+        head = document.head || document.getElementsByTagName('head')[0],
+        style = document.createElement('style');
+      style.id = 'detectElementResize';
+      style.type = 'text/css';
+      if (nonce !== null) {
+        style.setAttribute('nonce', nonce);
+      }
+      if (style.styleSheet) {
+        style.styleSheet.cssText = css;
+      } else {
+        style.appendChild(document.createTextNode(css));
+      }
+      head.appendChild(style);
+    }
+  };
+  var addResizeListener = function addResizeListener(element, fn) {
+    if (attachEvent) {
+      element.attachEvent('onresize', fn);
+    } else {
+      if (!element.__resizeTriggers__) {
+        var elementStyle = _window.getComputedStyle(element);
+        if (elementStyle && elementStyle.position === 'static') {
+          element.style.position = 'relative';
+        }
+        createStyles();
+        element.__resizeLast__ = {};
+        element.__resizeListeners__ = [];
+        (element.__resizeTriggers__ = document.createElement('div')).className = 'resize-triggers';
+        element.__resizeTriggers__.innerHTML = '<div class="expand-trigger"><div></div></div>' + '<div class="contract-trigger"></div>';
+        element.appendChild(element.__resizeTriggers__);
+        resetTriggers(element);
+        element.addEventListener('scroll', scrollListener, true);
+
+        /* Listen for a css animation to detect element display/re-attach */
+        if (animationstartevent) {
+          element.__resizeTriggers__.__animationListener__ = function animationListener(e) {
+            if (e.animationName === animationName) {
+              resetTriggers(element);
+            }
+          };
+          element.__resizeTriggers__.addEventListener(animationstartevent, element.__resizeTriggers__.__animationListener__);
+        }
+      }
+      element.__resizeListeners__.push(fn);
+    }
+  };
+  var removeResizeListener = function removeResizeListener(element, fn) {
+    if (attachEvent) {
+      element.detachEvent('onresize', fn);
+    } else {
+      element.__resizeListeners__.splice(element.__resizeListeners__.indexOf(fn), 1);
+      if (!element.__resizeListeners__.length) {
+        element.removeEventListener('scroll', scrollListener, true);
+        if (element.__resizeTriggers__.__animationListener__) {
+          element.__resizeTriggers__.removeEventListener(animationstartevent, element.__resizeTriggers__.__animationListener__);
+          element.__resizeTriggers__.__animationListener__ = null;
+        }
+        try {
+          element.__resizeTriggers__ = !element.removeChild(element.__resizeTriggers__);
+        } catch (e) {
+          // Preact compat; see developit/preact-compat/issues/228
+        }
+      }
+    }
+  };
+  return {
+    addResizeListener,
+    removeResizeListener
+  };
+}

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

@@ -0,0 +1,23 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _emotion = require("emotion");
+var cssHelpers = {
+  TRUNCATE: (0, _emotion.css)({
+    overflow: 'hidden',
+    textOverflow: 'ellipsis',
+    whiteSpace: 'nowrap'
+  }),
+  VISUALLY_HIDDEN: (0, _emotion.css)({
+    position: 'absolute',
+    height: '1px',
+    width: '1px',
+    overflow: 'hidden',
+    clip: ['rect(1px, 1px, 1px, 1px)', 'rect(1px 1px 1px 1px)'] /* fallback for IE6, IE7 */,
+    whiteSpace: 'nowrap' /* added line */
+  })
+};
+var _default = exports.default = cssHelpers;

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

@@ -0,0 +1,142 @@
+"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.dialogStylePropTypes = exports.default = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+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 _baymax_utils = require("./baymax_utils");
+var _modal = _interopRequireDefault(require("./modal"));
+var _dialog_close_button = _interopRequireDefault(require("./dialog_close_button"));
+var _system = require("./system");
+var _excluded = ["onClose", "className", "style", "backgroundClassName", "backgroundStyle", "children"];
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+function _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; } /** @module @airtable/blocks/ui: Dialog */ /** */
+/**
+ * Style props shared between the {@link Dialog} and {@link ConfirmationDialog} components. Also accepts:
+ * * {@link DimensionsSetProps}
+ * * {@link FlexContainerSetProps}
+ * * {@link SpacingSetProps}
+ *
+ * @noInheritDoc
+ */
+// This is equivalent to ModalStyleProps, but we include it separately since Modal is private.
+
+var dialogStylePropTypes = exports.dialogStylePropTypes = _objectSpread(_objectSpread(_objectSpread(_objectSpread({}, _system.dimensionsSetPropTypes), _system.displayPropTypes), _system.flexContainerSetPropTypes), _system.spacingSetPropTypes);
+
+/**
+ * Props for the {@link Dialog} component. Also accepts:
+ * * {@link DialogStyleProps}
+ *
+ * @noInheritDoc
+ * @docsPath UI/components/Dialog
+ */
+/**
+ * A styled modal dialog component.
+ *
+ * [[ Story id="dialog--example" title="Dialog example" ]]
+ *
+ * @docsPath UI/components/Dialog
+ * @component
+ */
+// TODO (stephen): focus trapping
+var Dialog = /*#__PURE__*/function (_React$Component) {
+  /** @hidden */
+  function Dialog(props) {
+    var _this;
+    (0, _classCallCheck2.default)(this, Dialog);
+    _this = _callSuper(this, Dialog, [props]);
+    _this._onKeyDown = _this._onKeyDown.bind(_this);
+    return _this;
+  }
+  /** @hidden */
+  (0, _inherits2.default)(Dialog, _React$Component);
+  return (0, _createClass2.default)(Dialog, [{
+    key: "getChildContext",
+    value: function getChildContext() {
+      return {
+        onDialogClose: this.props.onClose
+      };
+    }
+    /** @hidden */
+  }, {
+    key: "componentDidMount",
+    value: function componentDidMount() {
+      window.addEventListener('keydown', this._onKeyDown, false);
+    }
+    /** @hidden */
+  }, {
+    key: "componentWillUnmount",
+    value: function componentWillUnmount() {
+      window.removeEventListener('keydown', this._onKeyDown, false);
+    }
+    /** @internal */
+  }, {
+    key: "_onKeyDown",
+    value: function _onKeyDown(e) {
+      if (e.key === 'Escape') {
+        this.props.onClose();
+      }
+    }
+    /** @hidden */
+  }, {
+    key: "render",
+    value: function render() {
+      var _this$props = this.props,
+        onClose = _this$props.onClose,
+        className = _this$props.className,
+        style = _this$props.style,
+        backgroundClassName = _this$props.backgroundClassName,
+        backgroundStyle = _this$props.backgroundStyle,
+        children = _this$props.children,
+        restOfProps = (0, _objectWithoutProperties2.default)(_this$props, _excluded);
+      return /*#__PURE__*/React.createElement(_modal.default, (0, _extends2.default)({
+        onClose: onClose,
+        className: (0, _emotion.cx)((0, _baymax_utils.baymax)('big line-height-4'), className),
+        style: style,
+        backgroundClassName: backgroundClassName,
+        backgroundStyle: backgroundStyle
+      }, restOfProps), children);
+    }
+  }]);
+}(React.Component);
+/** @hidden */
+(0, _defineProperty2.default)(Dialog, "CloseButton", _dialog_close_button.default);
+/** @hidden */
+(0, _defineProperty2.default)(Dialog, "propTypes", _objectSpread({
+  onClose: _propTypes.default.func.isRequired,
+  className: _propTypes.default.string,
+  style: _propTypes.default.object,
+  backgroundClassName: _propTypes.default.string,
+  backgroundStyle: _propTypes.default.object,
+  children: _propTypes.default.node.isRequired
+}, dialogStylePropTypes));
+// automatically pass onClose to any descendants that are Dialog.CloseButton
+/** @hidden */
+(0, _defineProperty2.default)(Dialog, "childContextTypes", {
+  onDialogClose: _propTypes.default.func
+});
+var _default = exports.default = Dialog;

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

@@ -0,0 +1,152 @@
+"use strict";
+
+require("core-js/modules/es.symbol.js");
+require("core-js/modules/es.array.filter.js");
+require("core-js/modules/es.array.iterator.js");
+require("core-js/modules/es.object.get-own-property-descriptors.js");
+require("core-js/modules/es.object.to-string.js");
+require("core-js/modules/es.weak-map.js");
+require("core-js/modules/web.dom-collections.for-each.js");
+require("core-js/modules/web.dom-collections.iterator.js");
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.DialogCloseButton = void 0;
+require("core-js/modules/es.array.includes.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 _emotion = require("emotion");
+var React = _interopRequireWildcard(require("react"));
+var _core = require("@styled-system/core");
+var _baymax_utils = require("./baymax_utils");
+var _with_styled_system = _interopRequireDefault(require("./with_styled_system"));
+var _system = require("./system");
+var _tooltip_anchor_props = require("./types/tooltip_anchor_props");
+var _icon = _interopRequireDefault(require("./icon"));
+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; } /** @module @airtable/blocks/ui: Dialog */ /** */
+/**
+ * Props for the {@link DialogCloseButton} component. Also accepts:
+ * * {@link DialogCloseButtonStyleProps}
+ *
+ * @noInheritDoc
+ */
+
+/**
+ * Style props for the {@link DialogCloseButton} component. Accepts:
+ * * {@link BorderRadiusProps}
+ * * {@link DimensionsSetProps}
+ * * {@link DisplayProps}
+ * * {@link FlexContainerSetProps}
+ * * {@link FlexItemSetProps}
+ * * {@link PositionSetProps}
+ * * {@link SpacingSetProps}
+ *
+ * @noInheritDoc
+ */
+
+var styleParser = (0, _core.compose)(_system.borderRadius, _system.dimensionsSet, _system.display, _system.flexContainerSet, _system.flexItemSet, _system.positionSet, _system.spacingSet);
+var dialogCloseButtonStylePropTypes = _objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread({}, _system.borderRadiusPropTypes), _system.dimensionsSetPropTypes), _system.displayPropTypes), _system.flexContainerSetPropTypes), _system.flexItemSetPropTypes), _system.positionSetPropTypes), _system.spacingSetPropTypes);
+
+/**
+ * A button that closes {@link Dialog}. Accessed via `Dialog.CloseButton`.
+ */
+// TODO (stephen): can we alias this as Dialog.CloseButton in typedoc?
+// TODO (stephen): convert into a prop in Dialog
+var DialogCloseButton = exports.DialogCloseButton = /*#__PURE__*/function (_React$Component) {
+  /** @hidden */
+  function DialogCloseButton(props) {
+    var _this;
+    (0, _classCallCheck2.default)(this, DialogCloseButton);
+    _this = _callSuper(this, DialogCloseButton, [props]);
+    _this._onClick = _this._onClick.bind(_this);
+    _this._onKeyDown = _this._onKeyDown.bind(_this);
+    return _this;
+  }
+  /** @internal */
+  (0, _inherits2.default)(DialogCloseButton, _React$Component);
+  return (0, _createClass2.default)(DialogCloseButton, [{
+    key: "_onClick",
+    value: function _onClick(e) {
+      // onClick should only be defined in the case of a tooltip.
+      if (this.props.onClick) {
+        this.props.onClick(e);
+      }
+      this.context.onDialogClose();
+    }
+    /** @internal */
+  }, {
+    key: "_onKeyDown",
+    value: function _onKeyDown(e) {
+      if (e.ctrlKey || e.altKey || e.metaKey) {
+        return;
+      }
+      if (['Enter', ' '].includes(e.key)) {
+        e.preventDefault();
+        this.context.onDialogClose();
+      }
+    }
+    /** @hidden */
+  }, {
+    key: "render",
+    value: function render() {
+      var _this$props = this.props,
+        onMouseEnter = _this$props.onMouseEnter,
+        onMouseLeave = _this$props.onMouseLeave,
+        className = _this$props.className,
+        style = _this$props.style,
+        tabIndex = _this$props.tabIndex,
+        children = _this$props.children;
+      return /*#__PURE__*/React.createElement("div", {
+        // TODO (stephen): remove tooltip anchor props
+        onMouseEnter: onMouseEnter,
+        onMouseLeave: onMouseLeave,
+        onClick: this._onClick,
+        onKeyDown: this._onKeyDown,
+        className: (0, _emotion.cx)((0, _baymax_utils.baymax)('darken1-hover darken1-focus no-outline pointer'), className),
+        style: style,
+        tabIndex: tabIndex || 0,
+        role: "button",
+        "aria-label": "Close dialog"
+      }, children ? children : /*#__PURE__*/React.createElement(_icon.default, {
+        name: "x",
+        size: 12,
+        className: (0, _baymax_utils.baymax)('quieter')
+      }));
+    }
+  }]);
+}(React.Component);
+/** @hidden */
+(0, _defineProperty2.default)(DialogCloseButton, "propTypes", _objectSpread({
+  className: _propTypes.default.string,
+  style: _propTypes.default.object,
+  tabIndex: _propTypes.default.number,
+  children: _propTypes.default.node
+}, _tooltip_anchor_props.tooltipAnchorPropTypes));
+/** @hidden */
+(0, _defineProperty2.default)(DialogCloseButton, "contextTypes", {
+  onDialogClose: _propTypes.default.func
+});
+var _default = exports.default = (0, _with_styled_system.default)(DialogCloseButton, styleParser, dialogCloseButtonStylePropTypes, {
+  position: 'absolute',
+  top: 0,
+  right: 0,
+  marginTop: 2,
+  marginRight: 2,
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'center',
+  width: '24px',
+  height: '24px',
+  borderRadius: 'circle'
+});

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

@@ -0,0 +1,40 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+require("core-js/modules/es.array.map.js");
+/** @module @airtable/blocks/ui: expandRecord */ /** */
+
+/**
+ * Options object for expanding a record.
+ */
+
+/**
+ * Expands the given record in the Airtable UI.
+ *
+ * @param record The record to expand.
+ * @param opts An optional options object.
+ *
+ * @example
+ * ```js
+ * import {expandRecord} from '@airtable/blocks/ui';
+ * expandRecord(record1, {
+ *     records: [record1, record2, record3],
+ * });
+ * ```
+ * @docsPath UI/utils/expandRecord
+ */
+function expandRecord(record, opts) {
+  // TODO(kasra): this will cause the liveapp page to force a refresh if the
+  // tableId and recordId are both valid, but the recordId does not
+  // exist in the table.
+
+  var recordIds = null;
+  if (opts && opts.records) {
+    recordIds = opts.records.map(r => r.id);
+  }
+  record.parentTable.parentBase.__sdk.__airtableInterface.expandRecord(record.parentTable.id, record.id, recordIds);
+}
+var _default = exports.default = expandRecord;