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

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

@@ -0,0 +1,215 @@
+"use strict";
+
+require("core-js/modules/es.array.iterator.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.iterator.js");
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
+var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
+var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
+var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
+var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _emotion = require("emotion");
+var React = _interopRequireWildcard(require("react"));
+var _private_utils = require("../../shared/private_utils");
+var _baymax_utils = require("./baymax_utils");
+var _popover = _interopRequireDefault(require("./popover"));
+var _text = _interopRequireDefault(require("./text"));
+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; })(); } /** @module @airtable/blocks/ui: Tooltip */ /** */
+var FADE_IN_ANIMATION_DURATION = 150;
+
+/**
+ * Props for the {@link Tooltip} component.
+ *
+ * @docsPath UI/components/Tooltip
+ */
+
+/** @hidden */
+/**
+ * A component that renders a tooltip on hover. Wraps its children.
+ *
+ * [[ Story id="tooltip--example" title="Tooltip example" ]]
+ *
+ * @docsPath UI/components/Tooltip
+ * @component
+ */
+var Tooltip = /*#__PURE__*/function (_React$Component) {
+  /** @hidden */
+  function Tooltip(props) {
+    var _this;
+    (0, _classCallCheck2.default)(this, Tooltip);
+    _this = _callSuper(this, Tooltip, [props]);
+    _this.state = {
+      isShowingTooltip: false
+    };
+    _this._onMouseEnter = _this._onMouseEnter.bind(_this);
+    _this._onMouseLeave = _this._onMouseLeave.bind(_this);
+    _this._onClick = _this._onClick.bind(_this);
+    _this._showTooltip = _this._showTooltip.bind(_this);
+    _this._hideTooltip = _this._hideTooltip.bind(_this);
+    _this._renderTooltipContent = _this._renderTooltipContent.bind(_this);
+    return _this;
+  }
+  /** @internal */
+  (0, _inherits2.default)(Tooltip, _React$Component);
+  return (0, _createClass2.default)(Tooltip, [{
+    key: "_onMouseEnter",
+    value: function _onMouseEnter(e) {
+      this._showTooltip();
+      var originalOnMouseEnter = this.props.children.props.onMouseEnter;
+      if (originalOnMouseEnter) {
+        originalOnMouseEnter(e);
+      }
+    }
+    /** @internal */
+  }, {
+    key: "_onMouseLeave",
+    value: function _onMouseLeave(e) {
+      this._hideTooltip();
+      var originalOnMouseLeave = this.props.children.props.onMouseLeave;
+      if (originalOnMouseLeave) {
+        originalOnMouseLeave(e);
+      }
+    }
+    /** @internal */
+  }, {
+    key: "_onClick",
+    value: function _onClick(e) {
+      var _this$props = this.props,
+        shouldHideTooltipOnClick = _this$props.shouldHideTooltipOnClick,
+        children = _this$props.children;
+      if (shouldHideTooltipOnClick) {
+        this._hideTooltip();
+      }
+      var originalOnClick = children.props.onClick;
+      if (originalOnClick) {
+        originalOnClick(e);
+      }
+    }
+    /** @internal */
+  }, {
+    key: "_showTooltip",
+    value: function _showTooltip() {
+      this.setState({
+        isShowingTooltip: true
+      });
+    }
+    /** @internal */
+  }, {
+    key: "_hideTooltip",
+    value: function _hideTooltip() {
+      this.setState({
+        isShowingTooltip: false
+      });
+    }
+    /** @internal */
+  }, {
+    key: "_renderTooltipContent",
+    value: function _renderTooltipContent() {
+      var _this$props2 = this.props,
+        content = _this$props2.content,
+        className = _this$props2.className,
+        style = _this$props2.style;
+      var renderedContent;
+      var isContentAFunction;
+      if (typeof content === 'function') {
+        renderedContent = content();
+        isContentAFunction = true;
+      } else {
+        renderedContent = content;
+        isContentAFunction = false;
+      }
+      return /*#__PURE__*/React.createElement(_text.default, {
+        className: (0, _emotion.cx)((0, _baymax_utils.baymax)('nowrap'), className),
+        style: style,
+        position: "relative"
+        // Add padding only when using content.
+        ,
+        padding: isContentAFunction ? null : 2,
+        backgroundColor: "dark",
+        textColor: "white",
+        borderRadius: "default",
+        overflow: "hidden"
+      }, renderedContent);
+    }
+    /** @hidden */
+  }, {
+    key: "render",
+    value: function render() {
+      var _this$props3 = this.props,
+        children = _this$props3.children,
+        content = _this$props3.content,
+        disabled = _this$props3.disabled;
+      if (disabled || !content) {
+        // The tooltip will never show, so just return the children.
+        return children;
+      }
+      var popoverAnchor = /*#__PURE__*/React.cloneElement(React.Children.only(children), {
+        onMouseEnter: this._onMouseEnter,
+        onMouseLeave: this._onMouseLeave,
+        onClick: this._onClick,
+        // Specifically for RecordCard, which needs to know if onClick is defined.
+        hasOnClick: children.props.onClick !== undefined
+      });
+      return /*#__PURE__*/React.createElement(_popover.default, {
+        renderContent: this._renderTooltipContent,
+        placementX: this.props.placementX,
+        placementY: this.props.placementY,
+        placementOffsetX: this.props.placementOffsetX,
+        placementOffsetY: this.props.placementOffsetY,
+        fitInWindowMode: this.props.fitInWindowMode,
+        isOpen: this.state.isShowingTooltip,
+        backgroundStyle: {
+          // Override the background style of the popover so that it doesn't
+          // take up any space. If we don't do this, the mouseEnter and mouseLeave
+          // handlers won't work, since showing the Popover would place a div over
+          // the content that we care about.
+          top: 0,
+          left: 0,
+          width: 0,
+          height: 0,
+          animationName: 'opacityFadeIn',
+          animationDuration: "".concat(FADE_IN_ANIMATION_DURATION, "ms"),
+          animationTimingFunction: 'ease-out'
+        }
+      }, popoverAnchor);
+    }
+  }]);
+}(React.Component);
+/** @hidden */
+(0, _defineProperty2.default)(Tooltip, "placements", _popover.default.placements);
+/** @hidden */
+(0, _defineProperty2.default)(Tooltip, "fitInWindowModes", _popover.default.fitInWindowModes);
+/** @hidden */
+(0, _defineProperty2.default)(Tooltip, "propTypes", {
+  children: _propTypes.default.element.isRequired,
+  content: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.func]),
+  placementX: _propTypes.default.oneOf([_popover.default.placements.LEFT, _popover.default.placements.CENTER, _popover.default.placements.RIGHT]),
+  placementY: _propTypes.default.oneOf([_popover.default.placements.TOP, _popover.default.placements.CENTER, _popover.default.placements.BOTTOM]),
+  placementOffsetX: _propTypes.default.number,
+  placementOffsetY: _propTypes.default.number,
+  fitInWindowMode: _propTypes.default.oneOf((0, _private_utils.values)(_popover.default.fitInWindowModes)),
+  shouldHideTooltipOnClick: _propTypes.default.bool,
+  disabled: _propTypes.default.bool,
+  className: _propTypes.default.string,
+  style: _propTypes.default.object
+});
+/** @hidden */
+(0, _defineProperty2.default)(Tooltip, "defaultProps", {
+  placementX: _popover.default.placements.RIGHT,
+  placementY: _popover.default.placements.CENTER,
+  placementOffsetX: 8,
+  placementOffsetY: 8,
+  fitInWindowMode: _popover.default.fitInWindowModes.FLIP
+});
+var _default = exports.default = Tooltip;

package/dist/cjs/base/ui/types/aria_props.js

@@ -0,0 +1,23 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ariaPropTypes = void 0;
+var _propTypes = _interopRequireDefault(require("prop-types"));
+/** @module @airtable/blocks/ui/types: Aria props */ /** */
+
+/** */
+
+/** @internal */
+var ariaPropTypes = exports.ariaPropTypes = {
+  'aria-label': _propTypes.default.string,
+  'aria-labelledby': _propTypes.default.string,
+  'aria-describedby': _propTypes.default.string,
+  'aria-controls': _propTypes.default.string,
+  'aria-expanded': _propTypes.default.bool,
+  'aria-haspopup': _propTypes.default.bool,
+  'aria-hidden': _propTypes.default.bool,
+  'aria-live': _propTypes.default.oneOf(['off', 'assertive', 'polite'])
+};

package/dist/cjs/base/ui/types/data_attributes_prop.js

@@ -0,0 +1,18 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.dataAttributesPropType = void 0;
+var _propTypes = _interopRequireDefault(require("prop-types"));
+/** @hidden */ /** */
+
+/**
+ * Data attributes that are spread onto the element, e.g. `dataAttributes={{'data-*': '...'}}`.
+ *
+ * @hidden
+ */
+// TODO (stephen): switch to extend for inherited documentation
+
+var dataAttributesPropType = exports.dataAttributesPropType = _propTypes.default.object;

package/dist/cjs/base/ui/types/tooltip_anchor_props.js

@@ -0,0 +1,17 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.tooltipAnchorPropTypes = void 0;
+var _propTypes = _interopRequireDefault(require("prop-types"));
+// TODO (stephen): decide which components should be valid tooltip anchors
+/** @hidden */
+
+var tooltipAnchorPropTypes = exports.tooltipAnchorPropTypes = {
+  onMouseEnter: _propTypes.default.func,
+  onMouseLeave: _propTypes.default.func,
+  onClick: _propTypes.default.func,
+  hasOnClick: _propTypes.default.bool
+};

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

@@ -0,0 +1,375 @@
+"use strict";
+
+require("core-js/modules/es.object.to-string.js");
+require("core-js/modules/web.dom-collections.for-each.js");
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+var _exportNames = {
+  globalAlert: true,
+  GlobalAlert: true,
+  BaseProvider: true,
+  colors: true,
+  colorUtils: true,
+  Synced: true,
+  TablePicker: true,
+  TablePickerSynced: true,
+  FieldPicker: true,
+  FieldPickerSynced: true,
+  ViewPicker: true,
+  ViewPickerSynced: true,
+  InputSynced: true,
+  CellRenderer: true,
+  expandRecord: true,
+  expandRecordList: true,
+  expandRecordPickerAsync: true,
+  FieldIcon: true,
+  ColorPaletteSynced: true,
+  ProgressBar: true,
+  RecordCard: true,
+  RecordCardList: true,
+  SelectSynced: true,
+  SelectButtonsSynced: true,
+  SwitchSynced: true,
+  ViewportConstraint: true,
+  initializeBlock: true,
+  withHooks: true,
+  useLoadable: true,
+  useRecordIds: true,
+  useRecords: true,
+  useRecordById: true,
+  useRecordQueryResult: true,
+  useBase: true,
+  useCursor: true,
+  useSession: true,
+  useSettingsButton: true,
+  useSynced: true,
+  useWatchable: true,
+  useViewport: true,
+  useGlobalConfig: true,
+  useViewMetadata: true,
+  useRecordActionData: true,
+  registerRecordActionDataCallback: true
+};
+Object.defineProperty(exports, "BaseProvider", {
+  enumerable: true,
+  get: function get() {
+    return _base_provider.default;
+  }
+});
+Object.defineProperty(exports, "CellRenderer", {
+  enumerable: true,
+  get: function get() {
+    return _cell_renderer.default;
+  }
+});
+Object.defineProperty(exports, "ColorPaletteSynced", {
+  enumerable: true,
+  get: function get() {
+    return _color_palette_synced.default;
+  }
+});
+Object.defineProperty(exports, "FieldIcon", {
+  enumerable: true,
+  get: function get() {
+    return _field_icon.default;
+  }
+});
+Object.defineProperty(exports, "FieldPicker", {
+  enumerable: true,
+  get: function get() {
+    return _field_picker.default;
+  }
+});
+Object.defineProperty(exports, "FieldPickerSynced", {
+  enumerable: true,
+  get: function get() {
+    return _field_picker_synced.default;
+  }
+});
+Object.defineProperty(exports, "GlobalAlert", {
+  enumerable: true,
+  get: function get() {
+    return _global_alert.default;
+  }
+});
+Object.defineProperty(exports, "InputSynced", {
+  enumerable: true,
+  get: function get() {
+    return _input_synced.default;
+  }
+});
+Object.defineProperty(exports, "ProgressBar", {
+  enumerable: true,
+  get: function get() {
+    return _progress_bar.default;
+  }
+});
+Object.defineProperty(exports, "RecordCard", {
+  enumerable: true,
+  get: function get() {
+    return _record_card.default;
+  }
+});
+Object.defineProperty(exports, "RecordCardList", {
+  enumerable: true,
+  get: function get() {
+    return _record_card_list.default;
+  }
+});
+Object.defineProperty(exports, "SelectButtonsSynced", {
+  enumerable: true,
+  get: function get() {
+    return _select_buttons_synced.default;
+  }
+});
+Object.defineProperty(exports, "SelectSynced", {
+  enumerable: true,
+  get: function get() {
+    return _select_synced.default;
+  }
+});
+Object.defineProperty(exports, "SwitchSynced", {
+  enumerable: true,
+  get: function get() {
+    return _switch_synced.default;
+  }
+});
+Object.defineProperty(exports, "Synced", {
+  enumerable: true,
+  get: function get() {
+    return _synced.default;
+  }
+});
+Object.defineProperty(exports, "TablePicker", {
+  enumerable: true,
+  get: function get() {
+    return _table_picker.default;
+  }
+});
+Object.defineProperty(exports, "TablePickerSynced", {
+  enumerable: true,
+  get: function get() {
+    return _table_picker_synced.default;
+  }
+});
+Object.defineProperty(exports, "ViewPicker", {
+  enumerable: true,
+  get: function get() {
+    return _view_picker.default;
+  }
+});
+Object.defineProperty(exports, "ViewPickerSynced", {
+  enumerable: true,
+  get: function get() {
+    return _view_picker_synced.default;
+  }
+});
+Object.defineProperty(exports, "ViewportConstraint", {
+  enumerable: true,
+  get: function get() {
+    return _viewport_constraint.default;
+  }
+});
+Object.defineProperty(exports, "colorUtils", {
+  enumerable: true,
+  get: function get() {
+    return _color_utils.default;
+  }
+});
+Object.defineProperty(exports, "colors", {
+  enumerable: true,
+  get: function get() {
+    return _colors.default;
+  }
+});
+Object.defineProperty(exports, "expandRecord", {
+  enumerable: true,
+  get: function get() {
+    return _expand_record.default;
+  }
+});
+Object.defineProperty(exports, "expandRecordList", {
+  enumerable: true,
+  get: function get() {
+    return _expand_record_list.default;
+  }
+});
+Object.defineProperty(exports, "expandRecordPickerAsync", {
+  enumerable: true,
+  get: function get() {
+    return _expand_record_picker_async.default;
+  }
+});
+exports.globalAlert = void 0;
+Object.defineProperty(exports, "initializeBlock", {
+  enumerable: true,
+  get: function get() {
+    return _initialize_block.initializeBlock;
+  }
+});
+Object.defineProperty(exports, "registerRecordActionDataCallback", {
+  enumerable: true,
+  get: function get() {
+    return _perform_record_action.registerRecordActionDataCallback;
+  }
+});
+Object.defineProperty(exports, "useBase", {
+  enumerable: true,
+  get: function get() {
+    return _use_base.default;
+  }
+});
+Object.defineProperty(exports, "useCursor", {
+  enumerable: true,
+  get: function get() {
+    return _use_cursor.default;
+  }
+});
+Object.defineProperty(exports, "useGlobalConfig", {
+  enumerable: true,
+  get: function get() {
+    return _use_global_config.default;
+  }
+});
+Object.defineProperty(exports, "useLoadable", {
+  enumerable: true,
+  get: function get() {
+    return _use_loadable.default;
+  }
+});
+Object.defineProperty(exports, "useRecordActionData", {
+  enumerable: true,
+  get: function get() {
+    return _use_record_action_data.default;
+  }
+});
+Object.defineProperty(exports, "useRecordById", {
+  enumerable: true,
+  get: function get() {
+    return _use_records.useRecordById;
+  }
+});
+Object.defineProperty(exports, "useRecordIds", {
+  enumerable: true,
+  get: function get() {
+    return _use_records.useRecordIds;
+  }
+});
+Object.defineProperty(exports, "useRecordQueryResult", {
+  enumerable: true,
+  get: function get() {
+    return _use_records.useRecordQueryResult;
+  }
+});
+Object.defineProperty(exports, "useRecords", {
+  enumerable: true,
+  get: function get() {
+    return _use_records.useRecords;
+  }
+});
+Object.defineProperty(exports, "useSession", {
+  enumerable: true,
+  get: function get() {
+    return _use_session.default;
+  }
+});
+Object.defineProperty(exports, "useSettingsButton", {
+  enumerable: true,
+  get: function get() {
+    return _use_settings_button.default;
+  }
+});
+Object.defineProperty(exports, "useSynced", {
+  enumerable: true,
+  get: function get() {
+    return _use_synced.default;
+  }
+});
+Object.defineProperty(exports, "useViewMetadata", {
+  enumerable: true,
+  get: function get() {
+    return _use_view_metadata.default;
+  }
+});
+Object.defineProperty(exports, "useViewport", {
+  enumerable: true,
+  get: function get() {
+    return _use_viewport.default;
+  }
+});
+Object.defineProperty(exports, "useWatchable", {
+  enumerable: true,
+  get: function get() {
+    return _use_watchable.default;
+  }
+});
+Object.defineProperty(exports, "withHooks", {
+  enumerable: true,
+  get: function get() {
+    return _with_hooks.default;
+  }
+});
+var _global_alert = _interopRequireDefault(require("./global_alert"));
+require("..");
+var _base_provider = _interopRequireDefault(require("./base_provider"));
+var _colors = _interopRequireDefault(require("../../shared/colors"));
+var _color_utils = _interopRequireDefault(require("../../shared/color_utils"));
+var _synced = _interopRequireDefault(require("./synced"));
+var _table_picker = _interopRequireDefault(require("./table_picker"));
+var _table_picker_synced = _interopRequireDefault(require("./table_picker_synced"));
+var _field_picker = _interopRequireDefault(require("./field_picker"));
+var _field_picker_synced = _interopRequireDefault(require("./field_picker_synced"));
+var _view_picker = _interopRequireDefault(require("./view_picker"));
+var _view_picker_synced = _interopRequireDefault(require("./view_picker_synced"));
+var _input_synced = _interopRequireDefault(require("./input_synced"));
+var _cell_renderer = _interopRequireDefault(require("./cell_renderer"));
+var _expand_record = _interopRequireDefault(require("./expand_record"));
+var _expand_record_list = _interopRequireDefault(require("./expand_record_list"));
+var _expand_record_picker_async = _interopRequireDefault(require("./expand_record_picker_async"));
+var _field_icon = _interopRequireDefault(require("./field_icon"));
+var _color_palette_synced = _interopRequireDefault(require("./color_palette_synced"));
+var _progress_bar = _interopRequireDefault(require("./progress_bar"));
+var _record_card = _interopRequireDefault(require("./record_card"));
+var _record_card_list = _interopRequireDefault(require("./record_card_list"));
+var _select_synced = _interopRequireDefault(require("./select_synced"));
+var _select_buttons_synced = _interopRequireDefault(require("./select_buttons_synced"));
+var _switch_synced = _interopRequireDefault(require("./switch_synced"));
+var _viewport_constraint = _interopRequireDefault(require("./viewport_constraint"));
+var _initialize_block = require("./initialize_block");
+var _with_hooks = _interopRequireDefault(require("../../shared/ui/with_hooks"));
+var _use_loadable = _interopRequireDefault(require("../../shared/ui/use_loadable"));
+var _use_records = require("./use_records");
+var _use_base = _interopRequireDefault(require("./use_base"));
+var _use_cursor = _interopRequireDefault(require("./use_cursor"));
+var _use_session = _interopRequireDefault(require("./use_session"));
+var _use_settings_button = _interopRequireDefault(require("./use_settings_button"));
+var _use_synced = _interopRequireDefault(require("../../shared/ui/use_synced"));
+var _use_watchable = _interopRequireDefault(require("../../shared/ui/use_watchable"));
+var _use_viewport = _interopRequireDefault(require("./use_viewport"));
+var _use_global_config = _interopRequireDefault(require("../../shared/ui/use_global_config"));
+var _use_view_metadata = _interopRequireDefault(require("./use_view_metadata"));
+var _use_record_action_data = _interopRequireDefault(require("./use_record_action_data"));
+var _perform_record_action = require("../perform_record_action");
+var _unstable_standalone_ui = require("./unstable_standalone_ui");
+Object.keys(_unstable_standalone_ui).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _unstable_standalone_ui[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _unstable_standalone_ui[key];
+    }
+  });
+});
+/** @ignore */
+
+// Import the top-level entry point so that an Sdk instance is created from the
+// globally-available AirtableInterface instance. This is a requirement of
+// third-party App code. Consumers who cannot provide an implementation of
+// AirtableInterface may access a subset of the UI Components available here by
+// instead importing `unstable_standalone_ui`.
+
+var globalAlert = exports.globalAlert = new _global_alert.default();