@airtable/blocks 0.0.0-experimental-f52bc4e5e-20250709 → 0.0.0-experimental-3649c7162-20250904

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

@@ -0,0 +1,196 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.ColorPalette = void 0;
+var _emotion = require("emotion");
+var React = _interopRequireWildcard(require("react"));
+var _core = require("@styled-system/core");
+var _error_utils = require("../../shared/error_utils");
+var _color_utils = _interopRequireDefault(require("../../shared/color_utils"));
+var _baymax_utils = require("./baymax_utils");
+var _box = _interopRequireDefault(require("./box"));
+var _icon = _interopRequireDefault(require("./icon"));
+var _create_detect_element_resize = _interopRequireDefault(require("./create_detect_element_resize"));
+var _with_styled_system = _interopRequireDefault(require("./with_styled_system"));
+var _system = require("./system");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+/** @module @airtable/blocks/ui: ColorPalette */ /** */
+
+const MIN_COLOR_SQUARE_SIZE = 16;
+const DEFAULT_COLOR_SQUARE_SIZE = 24;
+const MAX_COLOR_SQUARE_SIZE = 32;
+
+// TODO: it's confusing that this expects color names, but other components
+// expect a CSS color string.
+
+/**
+ * Style props shared between the {@link ColorPalette} and {@link ColorPaletteSynced} components. Accepts:
+ * * {@link FlexItemSetProps}
+ * * {@link MarginProps}
+ * * {@link MaxWidthProps}
+ * * {@link MinWidthProps}
+ * * {@link PositionSetProps}
+ * * {@link WidthProps}
+ *
+ * @noInheritDoc
+ */
+
+const styleParser = (0, _core.compose)(_system.maxWidth, _system.minWidth, _system.width, _system.flexItemSet, _system.positionSet, _system.margin);
+
+/**
+ * Props shared between the {@link ColorPalette} and {@link ColorPaletteSynced} components.
+ */
+
+/**
+ * Props for the {@link ColorPalette} component. Also accepts:
+ * * {@link ColorPaletteStyleProps}
+ *
+ * @docsPath UI/components/ColorPalette
+ */
+
+/** @hidden */
+
+/**
+ * A color selection component. Accepts a list of `allowedColors` to be displayed
+ * as selectable color squares.
+ *
+ * [[ Story id="colorpalette--example" title="Color palette example" ]]
+ *
+ * @component
+ * @docsPath UI/components/ColorPalette
+ */
+class ColorPalette extends React.Component {
+  /** @hidden */
+  static defaultProps = {
+    squareMargin: 4,
+    className: '',
+    style: {}
+  };
+  /** @internal */
+
+  /** @internal */
+
+  /** @hidden */
+  constructor(props) {
+    super(props);
+    this._detectElementResize = (0, _create_detect_element_resize.default)();
+    this._colorPaletteContainerRef = /*#__PURE__*/React.createRef();
+    this._setColorSquareSize = this._setColorSquareSize.bind(this);
+    this.state = {
+      squareSize: DEFAULT_COLOR_SQUARE_SIZE
+    };
+  }
+  /** @hidden */
+  componentDidMount() {
+    if (this._colorPaletteContainerRef.current) {
+      this._detectElementResize.addResizeListener(this._colorPaletteContainerRef.current, this._setColorSquareSize);
+    }
+    this._setColorSquareSize();
+  }
+  /** @hidden */
+  componentWillUnmount() {
+    if (this._colorPaletteContainerRef.current) {
+      this._detectElementResize.removeResizeListener(this._colorPaletteContainerRef.current, this._setColorSquareSize);
+    }
+  }
+  /** @hidden */
+  componentDidUpdate(prevProps) {
+    if (this.props.allowedColors.length !== prevProps.allowedColors.length) {
+      this._setColorSquareSize();
+    }
+  }
+  // Attempts to fit all `allowedColors` onto one line by adjusting color square size.
+  /** @internal */
+  _setColorSquareSize() {
+    const {
+      squareMargin
+    } = this.props;
+    (0, _error_utils.invariant)(squareMargin !== null && squareMargin !== undefined, 'colorPalette.squareMargin must be a number');
+    (0, _error_utils.invariant)(this._colorPaletteContainerRef.current, 'No container to set color square size');
+
+    // Calculates the size of each square required to fit `numSquares` squares on one line.
+    const calculateSquareSize = numSquares => {
+      return (containerWidth - squareMargin * 2 * numSquares) / numSquares;
+    };
+    const containerWidth = this._colorPaletteContainerRef.current.getBoundingClientRect().width;
+    const numColors = this.props.allowedColors.length;
+    const calculatedSquareSize = calculateSquareSize(numColors);
+    let squareSize;
+    // If we can't fit them all in one line, find the closest square size to the default that
+    // fills the row and let flexbox wrap the remainder
+    if (calculatedSquareSize < MIN_COLOR_SQUARE_SIZE) {
+      const numColorsThatWillFitAsDefaultSize = Math.round((containerWidth + 2 * squareMargin) / (DEFAULT_COLOR_SQUARE_SIZE + 2 * squareMargin));
+      squareSize = squareSize = numColorsThatWillFitAsDefaultSize === 0 ? DEFAULT_COLOR_SQUARE_SIZE : calculateSquareSize(numColorsThatWillFitAsDefaultSize);
+    } else {
+      squareSize = Math.min(MAX_COLOR_SQUARE_SIZE, calculatedSquareSize);
+    }
+    this.setState({
+      squareSize
+    });
+  }
+  /** @internal */
+  _onChange(color) {
+    if (this.props.onChange) {
+      this.props.onChange(color);
+    }
+  }
+  /** @hidden */
+  render() {
+    const {
+      color,
+      allowedColors,
+      squareMargin,
+      onMouseEnter,
+      onMouseLeave,
+      onClick,
+      className,
+      style,
+      disabled
+    } = this.props;
+    const {
+      squareSize
+    } = this.state;
+    (0, _error_utils.invariant)(squareMargin !== null && squareMargin !== undefined, 'colorPalette.squareMargin must be a number');
+    return /*#__PURE__*/React.createElement(_box.default
+    // TODO (stephen): remove tooltip anchor props
+    , {
+      onMouseEnter: onMouseEnter,
+      onMouseLeave: onMouseLeave,
+      onClick: onClick,
+      className: className,
+      style: style,
+      overflow: "hidden"
+    }, /*#__PURE__*/React.createElement(_box.default, {
+      ref: this._colorPaletteContainerRef,
+      display: "flex",
+      flexWrap: "wrap"
+      // Add a negative margin to offset the margin of each swatch,
+      // so the color swatches are flush with the outer container.
+      ,
+      margin: `${-squareMargin}px`
+    }, allowedColors.map(allowedColor => /*#__PURE__*/React.createElement("label", {
+      key: allowedColor,
+      onClick: disabled ? undefined : () => this._onChange(allowedColor),
+      style: {
+        backgroundColor: _color_utils.default.getHexForColor(allowedColor) || undefined,
+        height: squareSize,
+        width: squareSize,
+        margin: squareMargin
+      },
+      className: (0, _emotion.cx)((0, _baymax_utils.baymax)('rounded flex items-center justify-center'), {
+        [(0, _baymax_utils.baymax)('pointer link-quiet')]: !disabled,
+        [(0, _baymax_utils.baymax)('quieter')]: !!disabled
+      })
+    }, allowedColor === color && /*#__PURE__*/React.createElement(_icon.default, {
+      name: "check",
+      size: squareSize,
+      className: (0, _baymax_utils.baymax)(_color_utils.default.shouldUseLightTextOnColor(allowedColor) ? 'text-white' : 'text-dark')
+    })))));
+  }
+}
+exports.ColorPalette = ColorPalette;
+var _default = exports.default = (0, _with_styled_system.default)(ColorPalette, styleParser, {});

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

@@ -0,0 +1,69 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var React = _interopRequireWildcard(require("react"));
+var _error_utils = require("../../shared/error_utils");
+var _synced = _interopRequireDefault(require("./synced"));
+var _color_palette = _interopRequireDefault(require("./color_palette"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); } /** @module @airtable/blocks/ui: ColorPalette */ /** */
+/**
+ * Props for the {@link ColorPaletteSynced} component. Also accepts:
+ * * {@link ColorPaletteStyleProps}
+ *
+ * @docsPath UI/components/ColorPaletteSynced
+ * @groupPath UI/components/ColorPalette
+ */
+
+/**
+ * A wrapper around the {@link ColorPalette} component that syncs with {@link GlobalConfig}.
+ *
+ * [[ Story id="colorpalette--synced-example" title="Synced color palette example" ]]
+ *
+ * @component
+ * @docsPath UI/components/ColorPaletteSynced
+ * @groupPath UI/components/ColorPalette
+ */
+class ColorPaletteSynced extends React.Component {
+  /** @hidden */
+  render() {
+    const {
+      globalConfigKey,
+      disabled,
+      onChange,
+      ...restOfProps
+    } = this.props;
+    return /*#__PURE__*/React.createElement(_synced.default, {
+      globalConfigKey: globalConfigKey,
+      render: _ref => {
+        let {
+          value,
+          canSetValue,
+          setValue
+        } = _ref;
+        let currentColor;
+        if (typeof value === 'string' || value === null || value === undefined) {
+          currentColor = value;
+        } else {
+          (0, _error_utils.spawnError)('ColorPaletteSynced only works with a global config value that is a string, null, or undefined');
+        }
+        return /*#__PURE__*/React.createElement(_color_palette.default, _extends({}, restOfProps, {
+          color: currentColor,
+          onChange: newValue => {
+            setValue(newValue);
+            if (onChange) {
+              onChange(newValue);
+            }
+          },
+          disabled: disabled || !canSetValue
+        }));
+      }
+    });
+  }
+}
+var _default = exports.default = ColorPaletteSynced;

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

@@ -0,0 +1,103 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var React = _interopRequireWildcard(require("react"));
+var _dialog = _interopRequireDefault(require("./dialog"));
+var _heading = _interopRequireDefault(require("./heading"));
+var _text = _interopRequireDefault(require("./text"));
+var _button = _interopRequireDefault(require("./button"));
+var _box = _interopRequireDefault(require("./box"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); } /** @module @airtable/blocks/ui: Dialog */ /** */
+/**
+ * Props for the {@link ConfirmationDialog} component. Also accepts:
+ * * {@link DialogStyleProps}
+ *
+ * @noInheritDoc
+ * @docsPath UI/components/ConfirmationDialog
+ */
+
+/**
+ * A styled modal dialog component that prompts the user to confirm or cancel an action.
+ *
+ * [[ Story id="confirmationdialog--example" title="Confirmation dialog example" ]]
+ *
+ * By default, this component will focus the "Confirm" button on mount, so that pressing
+ * the Enter key will confirm the action.
+ *
+ * @component
+ * @docsPath UI/components/ConfirmationDialog
+ */
+class ConfirmationDialog extends React.Component {
+  /** @hidden */
+  static defaultProps = {
+    cancelButtonText: 'Cancel',
+    confirmButtonText: 'Confirm',
+    isConfirmActionDangerous: false,
+    isCancelButtonDisabled: false,
+    isConfirmButtonDisabled: false,
+    width: '400px'
+  };
+  /** @internal */
+  _confirmButtonRef = /*#__PURE__*/React.createRef();
+  /** @hidden */
+  componentDidMount() {
+    if (this._confirmButtonRef.current !== null) {
+      this._confirmButtonRef.current.focus();
+    }
+  }
+  /** @hidden */
+  render() {
+    const {
+      title,
+      body,
+      cancelButtonText,
+      confirmButtonText,
+      isConfirmActionDangerous,
+      className,
+      style,
+      backgroundClassName,
+      backgroundStyle,
+      onCancel,
+      onConfirm,
+      isCancelButtonDisabled,
+      isConfirmButtonDisabled,
+      ...restOfProps
+    } = this.props;
+    return /*#__PURE__*/React.createElement(_dialog.default, _extends({
+      onClose: onCancel,
+      className: className,
+      style: style,
+      backgroundClassName: backgroundClassName,
+      backgroundStyle: backgroundStyle
+    }, restOfProps), /*#__PURE__*/React.createElement(_dialog.default.CloseButton, null), /*#__PURE__*/React.createElement(_heading.default, {
+      size: "small"
+    }, title), typeof body === 'string' ? /*#__PURE__*/React.createElement(_text.default, {
+      variant: "paragraph"
+    }, body) : body, /*#__PURE__*/React.createElement(_box.default, {
+      display: "flex",
+      flexDirection: "row-reverse",
+      alignItems: "center",
+      justifyContent: "start",
+      width: "100%",
+      marginTop: 3
+    }, /*#__PURE__*/React.createElement(_button.default, {
+      ref: this._confirmButtonRef,
+      onClick: onConfirm,
+      variant: isConfirmActionDangerous ? 'danger' : 'primary',
+      disabled: isConfirmButtonDisabled
+    }, confirmButtonText), /*#__PURE__*/React.createElement(_button.default, {
+      onClick: onCancel,
+      variant: "secondary",
+      alignSelf: "end",
+      marginRight: 2,
+      disabled: isCancelButtonDisabled
+    }, cancelButtonText)));
+  }
+}
+var _default = exports.default = ConfirmationDialog;

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

@@ -1,10 +1,9 @@
 "use strict";
 
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.controlSizePropType = exports.ControlSize = void 0;
+exports.ControlSize = void 0;
 exports.useButtonSize = useButtonSize;
 exports.useInputSize = useInputSize;
 exports.useSelectButtonsSize = useSelectButtonsSize;
@@ -16,26 +15,25 @@ 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");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 /** @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');
+const 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;
+  const {
+    buttonSizes
+  } = (0, _use_theme.default)();
+  let styleProps;
   if (typeof controlSizeProp === 'string') {
     styleProps = buttonSizes[controlSizeProp];
   } else {
@@ -45,15 +43,16 @@ function useButtonSize(controlSizeProp) {
 }
 
 // For selects we create a custom style parser that includes `backgroundPosition`.
-var selectSizeStyleParser = (0, _core.compose)(_system.allStylesParser, (0, _core.system)({
+const 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;
+  const {
+    selectSizes
+  } = (0, _use_theme.default)();
+  let styleProps;
   if (typeof controlSizeProp === 'string') {
     styleProps = selectSizes[controlSizeProp];
   } else {
@@ -64,9 +63,10 @@ function useSelectSize(controlSizeProp) {
 
 /** @internal */
 function useInputSize(controlSizeProp) {
-  var _useTheme3 = (0, _use_theme.default)(),
-    inputSizes = _useTheme3.inputSizes;
-  var styleProps;
+  const {
+    inputSizes
+  } = (0, _use_theme.default)();
+  let styleProps;
   if (typeof controlSizeProp === 'string') {
     styleProps = inputSizes[controlSizeProp];
   } else {
@@ -77,9 +77,10 @@ function useInputSize(controlSizeProp) {
 
 /** @internal */
 function useSelectButtonsSize(controlSizeProp) {
-  var _useTheme4 = (0, _use_theme.default)(),
-    selectButtonsSizes = _useTheme4.selectButtonsSizes;
-  var styleProps;
+  const {
+    selectButtonsSizes
+  } = (0, _use_theme.default)();
+  let styleProps;
   if (typeof controlSizeProp === 'string') {
     styleProps = selectButtonsSizes[controlSizeProp];
   } else {
@@ -90,9 +91,10 @@ function useSelectButtonsSize(controlSizeProp) {
 
 /** @internal */
 function useSwitchSize(controlSizeProp) {
-  var _useTheme5 = (0, _use_theme.default)(),
-    switchSizes = _useTheme5.switchSizes;
-  var styleProps;
+  const {
+    switchSizes
+  } = (0, _use_theme.default)();
+  let styleProps;
   if (typeof controlSizeProp === 'string') {
     styleProps = switchSizes[controlSizeProp];
   } else {

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

@@ -4,10 +4,6 @@ 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.
@@ -65,7 +61,7 @@ function createDetectElementResize(nonce) {
         return cancel(id);
       };
     }();
-    resetTriggers = function resetTriggers(element) {
+    resetTriggers = function (element) {
       var triggers = element.__resizeTriggers__,
         expand = triggers.firstElementChild,
         contract = triggers.lastElementChild,
@@ -77,10 +73,10 @@ function createDetectElementResize(nonce) {
       expand.scrollLeft = expand.scrollWidth;
       expand.scrollTop = expand.scrollHeight;
     };
-    checkTriggers = function checkTriggers(element) {
+    checkTriggers = function (element) {
       return element.offsetWidth !== element.__resizeLast__.width || element.offsetHeight !== element.__resizeLast__.height;
     };
-    scrollListener = function scrollListener(e) {
+    scrollListener = function (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;
@@ -131,7 +127,7 @@ function createDetectElementResize(nonce) {
     animationKeyframes = '@' + keyframeprefix + 'keyframes ' + animationName + ' { from { opacity: 0; } to { opacity: 0; } } ';
     animationStyle = keyframeprefix + 'animation: 1ms ' + animationName + '; ';
   }
-  var createStyles = function createStyles() {
+  var createStyles = function () {
     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%; }',
@@ -150,7 +146,7 @@ function createDetectElementResize(nonce) {
       head.appendChild(style);
     }
   };
-  var addResizeListener = function addResizeListener(element, fn) {
+  var addResizeListener = function (element, fn) {
     if (attachEvent) {
       element.attachEvent('onresize', fn);
     } else {
@@ -181,7 +177,7 @@ function createDetectElementResize(nonce) {
       element.__resizeListeners__.push(fn);
     }
   };
-  var removeResizeListener = function removeResizeListener(element, fn) {
+  var removeResizeListener = function (element, fn) {
     if (attachEvent) {
       element.detachEvent('onresize', fn);
     } else {

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

@@ -5,7 +5,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 var _emotion = require("emotion");
-var cssHelpers = {
+const cssHelpers = {
   TRUNCATE: (0, _emotion.css)({
     overflow: 'hidden',
     textOverflow: 'ellipsis',

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

@@ -0,0 +1,101 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+exports.useDialogContext = useDialogContext;
+var _emotion = require("emotion");
+var React = _interopRequireWildcard(require("react"));
+var _baymax_utils = require("./baymax_utils");
+var _modal = _interopRequireDefault(require("./modal"));
+var _dialog_close_button = _interopRequireDefault(require("./dialog_close_button"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); } /** @module @airtable/blocks/ui: Dialog */ /** */
+/**
+ * Style props shared between the {@link Dialog} and {@link ConfirmationDialog} components. Also accepts:
+ * * {@link DimensionsSetProps}
+ * * {@link FlexContainerSetProps}
+ * * {@link SpacingSetProps}
+ *
+ * @noInheritDoc
+ */
+// This is equivalent to ModalStyleProps, but we include it separately since Modal is private.
+
+/** @internal */
+const DialogContext = /*#__PURE__*/React.createContext({
+  onDialogClose: null
+});
+/** @internal */
+function useDialogContext() {
+  return React.useContext(DialogContext);
+}
+
+/**
+ * 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
+class Dialog extends React.Component {
+  /** @hidden */
+  static CloseButton = _dialog_close_button.default;
+
+  /** @hidden */
+  constructor(props) {
+    super(props);
+    this._onKeyDown = this._onKeyDown.bind(this);
+  }
+  /** @hidden */
+  componentDidMount() {
+    window.addEventListener('keydown', this._onKeyDown, false);
+  }
+  /** @hidden */
+  componentWillUnmount() {
+    window.removeEventListener('keydown', this._onKeyDown, false);
+  }
+  /** @internal */
+  _onKeyDown(e) {
+    if (e.key === 'Escape') {
+      this.props.onClose();
+    }
+  }
+  /** @hidden */
+  render() {
+    const {
+      onClose,
+      className,
+      style,
+      backgroundClassName,
+      backgroundStyle,
+      children,
+      ...restOfProps
+    } = this.props;
+    return /*#__PURE__*/React.createElement(_modal.default, _extends({
+      onClose: onClose,
+      className: (0, _emotion.cx)((0, _baymax_utils.baymax)('big line-height-4'), className),
+      style: style,
+      backgroundClassName: backgroundClassName,
+      backgroundStyle: backgroundStyle
+    }, restOfProps), /*#__PURE__*/React.createElement(DialogContext.Provider, {
+      value: {
+        // automatically pass onClose to any descendants that are Dialog.CloseButton
+        onDialogClose: onClose
+      }
+    }, children));
+  }
+}
+var _default = exports.default = Dialog;