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

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

@@ -0,0 +1,145 @@
+"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.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.collaboratorTokenStylePropTypes = void 0;
+require("core-js/modules/es.object.to-string.js");
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+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 _use_base = _interopRequireDefault(require("../../shared/ui/use_base"));
+var _box = _interopRequireDefault(require("./box"));
+var _text = _interopRequireDefault(require("./text"));
+var _baymax_utils = require("./baymax_utils");
+var _use_styled_system = _interopRequireDefault(require("./use_styled_system"));
+var _system = require("./system");
+var _tooltip_anchor_props = require("./types/tooltip_anchor_props");
+var _excluded = ["collaborator", "isActive", "onMouseEnter", "onMouseLeave", "onClick", "hasOnClick", "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: CollaboratorToken */ /** */
+var UNKNOWN_PROFILE_PIC_URL = 'https://static.airtable.com/images/userIcons/user_icon_unknown.png';
+
+/**
+ * Style props for the {@link CollaboratorToken} component. Accepts:
+ * * {@link FlexItemSetProps}
+ * * {@link MarginProps}
+ * * {@link PositionSetProps}
+ *
+ * @noInheritDoc
+ */
+
+var styleParser = (0, _core.compose)(_system.flexItemSet, _system.positionSet, _system.margin);
+var collaboratorTokenStylePropTypes = exports.collaboratorTokenStylePropTypes = _objectSpread(_objectSpread(_objectSpread({}, _system.flexItemSetPropTypes), _system.positionSetPropTypes), _system.marginPropTypes);
+
+/**
+ * Props for the {@link CollaboratorToken} component. Also accepts:
+ * * {@link CollaboratorTokenStyleProps}
+ *
+ * @noInheritDoc
+ * @docsPath UI/components/CollaboratorToken
+ */
+
+/**
+ * A version of `Collaborator` that doesn't connect to base. Not part of the public API.
+ *
+ * @hidden
+ */
+var StaticCollaboratorToken = props => {
+  var collaborator = props.collaborator,
+    _props$isActive = props.isActive,
+    isActive = _props$isActive === void 0 ? true : _props$isActive,
+    onMouseEnter = props.onMouseEnter,
+    onMouseLeave = props.onMouseLeave,
+    onClick = props.onClick,
+    hasOnClick = props.hasOnClick,
+    className = props.className,
+    style = props.style,
+    styleProps = (0, _objectWithoutProperties2.default)(props, _excluded);
+  var classNameForStyledProps = (0, _use_styled_system.default)(styleProps, styleParser);
+  var userName = collaborator.name || collaborator.email || 'Unknown';
+  var profilePicUrl = collaborator.profilePicUrl || UNKNOWN_PROFILE_PIC_URL;
+  return /*#__PURE__*/React.createElement(_box.default
+  // TODO (stephen): remove tooltip anchor props
+  , {
+    onMouseEnter: onMouseEnter,
+    onMouseLeave: onMouseLeave,
+    onClick: onClick,
+    className: (0, _emotion.cx)((0, _baymax_utils.baymax)('truncate print-color-exact'), classNameForStyledProps, className),
+    style: style,
+    alignItems: "center",
+    display: "inline-flex",
+    opacity: isActive ? 1 : 0.5
+  }, profilePicUrl && /*#__PURE__*/React.createElement(_box.default, {
+    className: (0, _baymax_utils.baymax)('background-cover background-center'),
+    style: {
+      backgroundImage: "url(\"".concat(profilePicUrl, "\")")
+    },
+    border: "1px solid #eee",
+    width: "22px",
+    height: "22px",
+    borderRadius: "circle",
+    zIndex: 1,
+    flex: "none",
+    backgroundColor: "grayLight2"
+  }), /*#__PURE__*/React.createElement(_text.default, {
+    className: (0, _baymax_utils.baymax)('truncate'),
+    paddingRight: 2,
+    paddingLeft: 3,
+    textColor: "dark",
+    display: "inline-flex",
+    borderRadius: "circle",
+    alignItems: "center",
+    flex: "none",
+    backgroundColor: "grayLight2",
+    marginLeft: "-12px",
+    lineHeight: 1.4
+  }, userName));
+};
+
+/**
+ * A component that shows a single collaborator in a small token, to be displayed inline or in a list of choices.
+ *
+ * [[ Story id="collaboratortoken--example" title="Collaborator token example" ]]
+ *
+ * @component
+ * @docsPath UI/components/CollaboratorToken
+ */
+var CollaboratorToken = props => {
+  // Re-render when collaborator info updates. This is to ensure isActive is accurate.
+  var base = (0, _use_base.default)();
+  var activeCollaborators = base.activeCollaborators;
+  var isActive = activeCollaborators.some(activeCollaborator => {
+    return activeCollaborator.id === props.collaborator.id;
+  });
+  return /*#__PURE__*/React.createElement(StaticCollaboratorToken, (0, _extends2.default)({}, props, {
+    isActive: isActive
+  }));
+};
+CollaboratorToken.propTypes = _objectSpread(_objectSpread({
+  collaborator: _propTypes.default.shape({
+    id: _propTypes.default.string,
+    email: _propTypes.default.string,
+    name: _propTypes.default.string,
+    profilePicUrl: _propTypes.default.string,
+    status: _propTypes.default.string
+  }).isRequired,
+  className: _propTypes.default.string,
+  style: _propTypes.default.object
+}, _tooltip_anchor_props.tooltipAnchorPropTypes), collaboratorTokenStylePropTypes);
+CollaboratorToken.Static = StaticCollaboratorToken;
+var _default = exports.default = CollaboratorToken;

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

@@ -0,0 +1,239 @@
+"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.sharedColorPalettePropTypes = exports.default = exports.colorPaletteStylePropTypes = exports.ColorPalette = void 0;
+require("core-js/modules/es.array.map.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 _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");
+var _tooltip_anchor_props = require("./types/tooltip_anchor_props");
+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: ColorPalette */ /** */
+var MIN_COLOR_SQUARE_SIZE = 16;
+var DEFAULT_COLOR_SQUARE_SIZE = 24;
+var 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
+ */
+
+var styleParser = (0, _core.compose)(_system.maxWidth, _system.minWidth, _system.width, _system.flexItemSet, _system.positionSet, _system.margin);
+var colorPaletteStylePropTypes = exports.colorPaletteStylePropTypes = _objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread({}, _system.maxWidthPropTypes), _system.minWidthPropTypes), _system.widthPropTypes), _system.flexItemSetPropTypes), _system.positionSetPropTypes), _system.marginPropTypes);
+
+/**
+ * Props shared between the {@link ColorPalette} and {@link ColorPaletteSynced} components.
+ */
+
+var sharedColorPalettePropTypes = exports.sharedColorPalettePropTypes = _objectSpread({
+  allowedColors: _propTypes.default.arrayOf(_propTypes.default.string).isRequired,
+  onChange: _propTypes.default.func,
+  squareMargin: _propTypes.default.number,
+  className: _propTypes.default.string,
+  style: _propTypes.default.object,
+  disabled: _propTypes.default.bool
+}, _tooltip_anchor_props.tooltipAnchorPropTypes);
+
+/**
+ * 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
+ */
+var ColorPalette = exports.ColorPalette = /*#__PURE__*/function (_React$Component) {
+  /** @hidden */
+  function ColorPalette(props) {
+    var _this;
+    (0, _classCallCheck2.default)(this, ColorPalette);
+    _this = _callSuper(this, ColorPalette, [props]);
+    /** @internal */
+    (0, _defineProperty2.default)(_this, "_detectElementResize", void 0);
+    /** @internal */
+    (0, _defineProperty2.default)(_this, "_colorPaletteContainerRef", void 0);
+    _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
+    };
+    return _this;
+  }
+  /** @hidden */
+  (0, _inherits2.default)(ColorPalette, _React$Component);
+  return (0, _createClass2.default)(ColorPalette, [{
+    key: "componentDidMount",
+    value: function componentDidMount() {
+      if (this._colorPaletteContainerRef.current) {
+        this._detectElementResize.addResizeListener(this._colorPaletteContainerRef.current, this._setColorSquareSize);
+      }
+      this._setColorSquareSize();
+    }
+    /** @hidden */
+  }, {
+    key: "componentWillUnmount",
+    value: function componentWillUnmount() {
+      if (this._colorPaletteContainerRef.current) {
+        this._detectElementResize.removeResizeListener(this._colorPaletteContainerRef.current, this._setColorSquareSize);
+      }
+    }
+    /** @hidden */
+  }, {
+    key: "componentDidUpdate",
+    value: function 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 */
+  }, {
+    key: "_setColorSquareSize",
+    value: function _setColorSquareSize() {
+      var squareMargin = this.props.squareMargin;
+      (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.
+      var calculateSquareSize = numSquares => {
+        return (containerWidth - squareMargin * 2 * numSquares) / numSquares;
+      };
+      var containerWidth = this._colorPaletteContainerRef.current.getBoundingClientRect().width;
+      var numColors = this.props.allowedColors.length;
+      var calculatedSquareSize = calculateSquareSize(numColors);
+      var 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) {
+        var 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 */
+  }, {
+    key: "_onChange",
+    value: function _onChange(color) {
+      if (this.props.onChange) {
+        this.props.onChange(color);
+      }
+    }
+    /** @hidden */
+  }, {
+    key: "render",
+    value: function render() {
+      var _this$props = this.props,
+        color = _this$props.color,
+        allowedColors = _this$props.allowedColors,
+        squareMargin = _this$props.squareMargin,
+        onMouseEnter = _this$props.onMouseEnter,
+        onMouseLeave = _this$props.onMouseLeave,
+        onClick = _this$props.onClick,
+        className = _this$props.className,
+        style = _this$props.style,
+        disabled = _this$props.disabled;
+      var squareSize = this.state.squareSize;
+      (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: "".concat(-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')
+      })))));
+    }
+  }]);
+}(React.Component);
+/** @hidden */
+(0, _defineProperty2.default)(ColorPalette, "propTypes", _objectSpread({
+  color: _propTypes.default.string
+}, sharedColorPalettePropTypes));
+/** @hidden */
+(0, _defineProperty2.default)(ColorPalette, "defaultProps", {
+  squareMargin: 4,
+  className: '',
+  style: {}
+});
+var _default = exports.default = (0, _with_styled_system.default)(ColorPalette, styleParser, colorPaletteStylePropTypes);

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

@@ -0,0 +1,98 @@
+"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 = 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 React = _interopRequireWildcard(require("react"));
+var _error_utils = require("../../shared/error_utils");
+var _global_config_synced_component_helpers = _interopRequireDefault(require("../../shared/ui/global_config_synced_component_helpers"));
+var _synced = _interopRequireDefault(require("./synced"));
+var _color_palette = _interopRequireWildcard(require("./color_palette"));
+var _excluded = ["globalConfigKey", "disabled", "onChange"];
+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; }
+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; })(); } /** @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
+ */
+var ColorPaletteSynced = /*#__PURE__*/function (_React$Component) {
+  function ColorPaletteSynced() {
+    (0, _classCallCheck2.default)(this, ColorPaletteSynced);
+    return _callSuper(this, ColorPaletteSynced, arguments);
+  }
+  (0, _inherits2.default)(ColorPaletteSynced, _React$Component);
+  return (0, _createClass2.default)(ColorPaletteSynced, [{
+    key: "render",
+    value: /** @hidden */
+    function render() {
+      var _this$props = this.props,
+        globalConfigKey = _this$props.globalConfigKey,
+        disabled = _this$props.disabled,
+        _onChange = _this$props.onChange,
+        restOfProps = (0, _objectWithoutProperties2.default)(_this$props, _excluded);
+      return /*#__PURE__*/React.createElement(_synced.default, {
+        globalConfigKey: globalConfigKey,
+        render: _ref => {
+          var value = _ref.value,
+            canSetValue = _ref.canSetValue,
+            setValue = _ref.setValue;
+          var 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, (0, _extends2.default)({}, restOfProps, {
+            color: currentColor,
+            onChange: newValue => {
+              setValue(newValue);
+              if (_onChange) {
+                _onChange(newValue);
+              }
+            },
+            disabled: disabled || !canSetValue
+          }));
+        }
+      });
+    }
+  }]);
+}(React.Component);
+/** @hidden */
+(0, _defineProperty2.default)(ColorPaletteSynced, "propTypes", _objectSpread(_objectSpread({
+  globalConfigKey: _global_config_synced_component_helpers.default.globalConfigKeyPropType
+}, _color_palette.colorPaletteStylePropTypes), _color_palette.sharedColorPalettePropTypes));
+var _default = exports.default = ColorPaletteSynced;

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

@@ -0,0 +1,153 @@
+"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;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+require("core-js/modules/es.array.iterator.js");
+require("core-js/modules/web.dom-collections.iterator.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 _dialog = _interopRequireWildcard(require("./dialog"));
+var _heading = _interopRequireDefault(require("./heading"));
+var _text = _interopRequireDefault(require("./text"));
+var _button = _interopRequireDefault(require("./button"));
+var _box = _interopRequireDefault(require("./box"));
+var _excluded = ["title", "body", "cancelButtonText", "confirmButtonText", "isConfirmActionDangerous", "className", "style", "backgroundClassName", "backgroundStyle", "onCancel", "onConfirm", "isCancelButtonDisabled", "isConfirmButtonDisabled"];
+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; }
+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; })(); } /** @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
+ */
+var ConfirmationDialog = /*#__PURE__*/function (_React$Component) {
+  function ConfirmationDialog() {
+    var _this;
+    (0, _classCallCheck2.default)(this, ConfirmationDialog);
+    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
+    }
+    _this = _callSuper(this, ConfirmationDialog, [...args]);
+    /** @internal */
+    (0, _defineProperty2.default)(_this, "_confirmButtonRef", /*#__PURE__*/React.createRef());
+    return _this;
+  }
+  (0, _inherits2.default)(ConfirmationDialog, _React$Component);
+  return (0, _createClass2.default)(ConfirmationDialog, [{
+    key: "componentDidMount",
+    value: /** @hidden */
+    function componentDidMount() {
+      if (this._confirmButtonRef.current !== null) {
+        this._confirmButtonRef.current.focus();
+      }
+    }
+    /** @hidden */
+  }, {
+    key: "render",
+    value: function render() {
+      var _this$props = this.props,
+        title = _this$props.title,
+        body = _this$props.body,
+        cancelButtonText = _this$props.cancelButtonText,
+        confirmButtonText = _this$props.confirmButtonText,
+        isConfirmActionDangerous = _this$props.isConfirmActionDangerous,
+        className = _this$props.className,
+        style = _this$props.style,
+        backgroundClassName = _this$props.backgroundClassName,
+        backgroundStyle = _this$props.backgroundStyle,
+        onCancel = _this$props.onCancel,
+        onConfirm = _this$props.onConfirm,
+        isCancelButtonDisabled = _this$props.isCancelButtonDisabled,
+        isConfirmButtonDisabled = _this$props.isConfirmButtonDisabled,
+        restOfProps = (0, _objectWithoutProperties2.default)(_this$props, _excluded);
+      return /*#__PURE__*/React.createElement(_dialog.default, (0, _extends2.default)({
+        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)));
+    }
+  }]);
+}(React.Component);
+/** @hidden */
+(0, _defineProperty2.default)(ConfirmationDialog, "propTypes", _objectSpread({
+  title: _propTypes.default.string.isRequired,
+  body: _propTypes.default.node,
+  cancelButtonText: _propTypes.default.string,
+  confirmButtonText: _propTypes.default.string,
+  isConfirmActionDangerous: _propTypes.default.bool,
+  className: _propTypes.default.string,
+  style: _propTypes.default.object,
+  backgroundClassName: _propTypes.default.string,
+  backgroundStyle: _propTypes.default.object,
+  onCancel: _propTypes.default.func.isRequired,
+  onConfirm: _propTypes.default.func.isRequired,
+  isCancelButtonDisabled: _propTypes.default.bool,
+  isConfirmButtonDisabled: _propTypes.default.bool
+}, _dialog.dialogStylePropTypes));
+/** @hidden */
+(0, _defineProperty2.default)(ConfirmationDialog, "defaultProps", {
+  cancelButtonText: 'Cancel',
+  confirmButtonText: 'Confirm',
+  isConfirmActionDangerous: false,
+  isCancelButtonDisabled: false,
+  isConfirmButtonDisabled: false,
+  width: '400px'
+});
+var _default = exports.default = ConfirmationDialog;