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

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

@@ -0,0 +1,315 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.PopoverPlacements = exports.FitInWindowModes = void 0;
+var _emotion = require("emotion");
+var _client = require("react-dom/client");
+var React = _interopRequireWildcard(require("react"));
+var _error_utils = require("../../shared/error_utils");
+var _baymax_utils = require("./baymax_utils");
+var _create_detect_element_resize = _interopRequireDefault(require("./create_detect_element_resize"));
+var Geometry = _interopRequireWildcard(require("./geometry/geometry"));
+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: Popover */
+/** */
+// NOTE(evanhahn) I wasn't figure out a better way to document these enums
+// with JSDoc. The @memberof directive doesn't seem to work when the token
+// contains a period (as Popover.placements does).
+/**
+ * Dictates how a {@link Tooltip} component should be positioned relative
+ * to the anchor element. Accessed via `Tooltip.placements`.
+ */
+// TODO (stephen): convert to createEnum
+let PopoverPlacements = exports.PopoverPlacements = /*#__PURE__*/function (PopoverPlacements) {
+  PopoverPlacements["TOP"] = "top";
+  PopoverPlacements["BOTTOM"] = "bottom";
+  PopoverPlacements["CENTER"] = "center";
+  PopoverPlacements["LEFT"] = "left";
+  PopoverPlacements["RIGHT"] = "right";
+  return PopoverPlacements;
+}({});
+/**
+ * Any of the supported {@link PopoverPlacements} for horizontal positioning.
+ */
+/**
+ * Any of the supported {@link PopoverPlacements} for vertical positioning.
+ */
+/**
+ * Dictates how a {@link Popover} or {@link Tooltip} component should be kept within the viewport. Accessed via `Popover.fitInWindowModes` or `Tooltip.fitInWindowModes`.
+ */
+// TODO (stephen): convert to createEnum
+let FitInWindowModes = exports.FitInWindowModes = /*#__PURE__*/function (FitInWindowModes) {
+  FitInWindowModes["NONE"] = "none";
+  FitInWindowModes["FLIP"] = "flip";
+  FitInWindowModes["NUDGE"] = "nudge";
+  return FitInWindowModes;
+}({});
+/**
+ * Any of the supported {@link FitInWindowModes}.
+ */
+/**
+ * Props for the {@link Popover} component.
+ *
+ * @hidden
+ */
+/**
+ * A popover component, which is used to "float" some content above some other content.
+ *
+ * @hidden
+ * @docsPath UI/components/Popover
+ * @component
+ */
+class Popover extends React.Component {
+  /** @hidden */
+  static placements = PopoverPlacements;
+  /** @hidden */
+  static fitInWindowModes = FitInWindowModes;
+
+  /** @hidden */
+  static defaultProps = {
+    placementX: PopoverPlacements.CENTER,
+    placementY: PopoverPlacements.BOTTOM,
+    placementOffsetX: 0,
+    placementOffsetY: 0,
+    fitInWindowMode: FitInWindowModes.FLIP,
+    isOpen: true
+  };
+  /** @internal */
+
+  /** @internal */
+
+  /** @internal */
+
+  /** @internal */
+
+  /** @internal */
+
+  /** @internal */
+
+  /** @internal */
+
+  /** @hidden */
+  constructor(props) {
+    super(props);
+    this._reactRoot = null;
+    this._container = null;
+    this._anchor = null;
+    this._background = null;
+    this._popoverContent = null;
+    this._mouseDownOutsidePopover = false;
+    this._onMouseDown = this._onMouseDown.bind(this);
+    this._onMouseUp = this._onMouseUp.bind(this);
+    this._refreshContainerAsync = this._refreshContainerAsync.bind(this);
+  }
+  /** @hidden */
+  componentDidMount() {
+    if (this.props.isOpen) {
+      this._createContainer();
+    }
+    this._refreshContainerAsync();
+  }
+  /** @hidden */
+  UNSAFE_componentWillReceiveProps(nextProps) {
+    if (nextProps.isOpen) {
+      this._createContainer();
+    } else {
+      this._destroyContainer();
+    }
+  }
+  /** @hidden */
+  componentDidUpdate() {
+    this._refreshContainerAsync();
+  }
+  /** @hidden */
+  componentWillUnmount() {
+    this._destroyContainer();
+  }
+  /** @internal */
+  _createContainer() {
+    if (this._container) {
+      return;
+    }
+    this._container = document.createElement('div');
+    const container = this._container;
+    container.setAttribute('tabIndex', '0');
+    container.style.zIndex = '99999';
+    container.style.position = 'relative';
+    (0, _error_utils.invariant)(document.body, 'no document body');
+    document.body.appendChild(container);
+    this._reactRoot = (0, _client.createRoot)(container);
+    window.addEventListener('scroll', this._refreshContainerAsync);
+    this._detectElementResize = (0, _create_detect_element_resize.default)();
+    this._detectElementResize.addResizeListener(this._anchor, this._refreshContainerAsync);
+  }
+  /** @internal */
+  _destroyContainer() {
+    const container = this._container;
+    if (!container) {
+      return;
+    }
+    window.removeEventListener('scroll', this._refreshContainerAsync);
+    if (this._detectElementResize) {
+      this._detectElementResize.removeResizeListener(this._anchor, this._refreshContainerAsync);
+    }
+    this._reactRoot?.unmount();
+    container.remove();
+    this._container = null;
+  }
+  /** @internal */
+  async _refreshContainerAsync() {
+    if (!this._container) {
+      return;
+    }
+    const anchor = this._anchor;
+    (0, _error_utils.invariant)(anchor instanceof Element, 'No anchor');
+    const anchorBoundingClientRect = anchor.getBoundingClientRect();
+    const anchorRect = new Geometry.Rect(anchorBoundingClientRect.left, anchorBoundingClientRect.top, anchorBoundingClientRect.width, anchorBoundingClientRect.height);
+    const viewportRect = new Geometry.Rect(0, 0, window.innerWidth, window.innerHeight);
+
+    // Render the tooltip to measure its size. Render it to the right of the anchor element
+    // to start. Wait for the async render to complete before measuring. Otherwise, the
+    await this._renderPopoverAtPositionAsync(anchorRect.right(), anchorRect.top());
+    const measurementPopover = this._popoverContent;
+    // HACK(10/17/19): The measurementPopover is sometimes not set, possibly due to some race
+    // condition with the the popover being unmounted but we've been unable to identify the root
+    // cause. Calling this function again on the next frame works as a workaround. We plan to
+    // rebuild popover/tooltip in the new SDK without using ReactDOM.unstable_renderSubtreeIntoContainer,
+    // so this is hopefully just a temporary measure.
+    if (!measurementPopover) {
+      requestAnimationFrame(this._refreshContainerAsync);
+      return;
+    }
+    const measurementPopoverBoundingRect = measurementPopover.getBoundingClientRect();
+    const popoverSize = new Geometry.Size(measurementPopoverBoundingRect.width, measurementPopoverBoundingRect.height);
+    let popoverRect = this._getPlacedPopoverRect(popoverSize, anchorRect, this.props.placementX, this.props.placementY);
+    if (this.props.fitInWindowMode === FitInWindowModes.FLIP && !this._isRectContainedWithinViewportRect(popoverRect, viewportRect)) {
+      // Popover rect is outside the viewport rect, and fitInWindowMode is flip, so
+      // let's try flipping the popover.
+      let placementX = this.props.placementX;
+      let placementY = this.props.placementY;
+      if (popoverRect.left() < viewportRect.left()) {
+        placementX = PopoverPlacements.RIGHT;
+      } else if (popoverRect.right() > viewportRect.right()) {
+        placementX = PopoverPlacements.LEFT;
+      }
+      if (popoverRect.top() < viewportRect.top()) {
+        placementY = PopoverPlacements.BOTTOM;
+      } else if (popoverRect.bottom() > viewportRect.bottom()) {
+        placementY = PopoverPlacements.TOP;
+      }
+      const flippedPopoverRect = this._getPlacedPopoverRect(popoverSize, anchorRect, placementX, placementY);
+
+      // Check if the flipped rect is within the viewport before using it. If the flipped rect
+      // is also outside the viewport, we might as well just use the original one and then nudge it.
+      if (this._isRectContainedWithinViewportRect(flippedPopoverRect, viewportRect)) {
+        popoverRect = flippedPopoverRect;
+      }
+    }
+    if (this.props.fitInWindowMode !== FitInWindowModes.NONE) {
+      // Check again. If flipping didn't bring it inside viewport bounds,
+      // nudge it until it's within the viewport.
+      if (popoverRect.left() < viewportRect.left()) {
+        popoverRect = new Geometry.Rect(viewportRect.left(), popoverRect.y, popoverRect.width, popoverRect.height);
+      } else if (popoverRect.right() > viewportRect.right()) {
+        popoverRect = new Geometry.Rect(viewportRect.right() - popoverRect.width, popoverRect.y, popoverRect.width, popoverRect.height);
+      }
+      if (popoverRect.top() < viewportRect.top()) {
+        popoverRect = new Geometry.Rect(popoverRect.x, viewportRect.top(), popoverRect.width, popoverRect.height);
+      } else if (popoverRect.bottom() > viewportRect.bottom()) {
+        popoverRect = new Geometry.Rect(popoverRect.x, viewportRect.bottom() - popoverRect.height, popoverRect.width, popoverRect.height);
+      }
+    }
+    await this._renderPopoverAtPositionAsync(popoverRect.left(), popoverRect.top());
+  }
+  /** @internal */
+  _isRectContainedWithinViewportRect(rect, viewportRect) {
+    if (rect.left() < viewportRect.left() || rect.right() > viewportRect.right() || rect.top() < viewportRect.top() || rect.bottom() > viewportRect.bottom()) {
+      return false;
+    }
+    return true;
+  }
+  /** @internal */
+  _getPlacedPopoverRect(popoverSize, anchorRect, placementX, placementY) {
+    const anchorCenterPoint = anchorRect.centerPoint();
+    let x;
+    if (placementX === PopoverPlacements.LEFT) {
+      x = anchorRect.left() - popoverSize.width - this.props.placementOffsetX;
+    } else if (placementX === PopoverPlacements.RIGHT) {
+      x = anchorRect.right() + this.props.placementOffsetX;
+    } else {
+      x = anchorCenterPoint.x - popoverSize.width / 2;
+    }
+    let y;
+    if (placementY === PopoverPlacements.TOP) {
+      y = anchorRect.top() - popoverSize.height - this.props.placementOffsetY;
+    } else if (placementY === PopoverPlacements.BOTTOM) {
+      y = anchorRect.bottom() + this.props.placementOffsetY;
+    } else {
+      y = anchorCenterPoint.y - popoverSize.height / 2;
+    }
+    return new Geometry.Rect(x, y, popoverSize.width, popoverSize.height);
+  }
+  /** @internal */
+  async _renderPopoverAtPositionAsync(left, top) {
+    let content = this.props.renderContent();
+    content = /*#__PURE__*/React.cloneElement(content, {
+      ref: el => {
+        this._popoverContent = el;
+      },
+      style: {
+        ...content.props.style,
+        position: 'absolute',
+        top,
+        left
+      }
+    });
+    const backgroundClassName = (0, _emotion.cx)((0, _baymax_utils.baymax)('fixed all-0'), this.props.backgroundClassName);
+    const backgroundStyle = this.props.backgroundStyle;
+    return new Promise(resolve => {
+      const container = this._container;
+      (0, _error_utils.invariant)(container, 'container must exist');
+      const root = this._reactRoot;
+      (0, _error_utils.invariant)(root, 'root must exist');
+      root.render( /*#__PURE__*/React.createElement("div", {
+        ref: el => {
+          this._background = el;
+          resolve();
+        },
+        className: backgroundClassName,
+        style: backgroundStyle,
+        onMouseDown: this._onMouseDown,
+        onMouseUp: this._onMouseUp
+      }, content));
+    });
+  }
+  /** @internal */
+  _onMouseDown(e) {
+    if (this._shouldClickingOnElementClosePopover(e.target)) {
+      this._mouseDownOutsidePopover = true;
+    }
+  }
+  /** @internal */
+  _onMouseUp(e) {
+    if (this._mouseDownOutsidePopover && this.props.onClose && this._shouldClickingOnElementClosePopover(e.target)) {
+      this.props.onClose();
+    }
+    this._mouseDownOutsidePopover = false;
+  }
+  /** @internal */
+  _shouldClickingOnElementClosePopover(element) {
+    return element === this._background;
+  }
+  /** @hidden */
+  render() {
+    return /*#__PURE__*/React.createElement("div", {
+      ref: el => {
+        this._anchor = el;
+      }
+    }, this.props.children);
+  }
+}
+var _default = exports.default = Popover;

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

@@ -0,0 +1,115 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _emotion = require("emotion");
+var React = _interopRequireWildcard(require("react"));
+var _core = require("@styled-system/core");
+var _private_utils = require("../../shared/private_utils");
+var _colors = _interopRequireDefault(require("../../shared/colors"));
+var _baymax_utils = require("./baymax_utils");
+var _use_styled_system = _interopRequireDefault(require("./use_styled_system"));
+var _system = require("./system");
+var _box = _interopRequireDefault(require("./box"));
+var _default_theme = _interopRequireDefault(require("./theme/default_theme"));
+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: ProgressBar */ /** */
+
+/**
+ * Style props for the {@link ProgressBar} component. Also accepts:
+ * * {@link BackgroundColorProps}
+ * * {@link FlexItemSetProps}
+ * * {@link HeightProps}
+ * * {@link MarginProps}
+ * * {@link MaxWidthProps}
+ * * {@link MinWidthProps}
+ * * {@link PositionSetProps}
+ * * {@link WidthProps}
+ *
+ * @noInheritDoc
+ */
+
+const styleParser = (0, _core.compose)(_system.backgroundColor, _system.maxWidth, _system.minWidth, _system.width, _system.height, _system.flexItemSet, _system.positionSet, _system.margin, _system.display);
+
+/**
+ * Props for the {@link ProgressBar} component. Also accepts:
+ * * {@link ProgressBarStyleProps}
+ *
+ * @docsPath UI/components/ProgressBar
+ * @noInheritDoc
+ */
+
+// TODO (jay): We can't use Box yet, because `aria-valuenow` is not yet available on `AriaProps`.
+const progressBarClassName = (0, _emotion.css)({
+  position: 'relative',
+  borderRadius: _default_theme.default.radii.circle,
+  overflow: 'hidden'
+});
+
+/**
+ * A progress bar.
+ *
+ * @example
+ * ```js
+ * import {ProgressBar} from '@airtable/blocks/base/ui';
+ *
+ * function MyComponent() {
+ *     return (
+ *         <ProgressBar
+ *             progress={0.6}
+ *             barColor='#ff9900'
+ *         />
+ *     );
+ * }
+ * ```
+ * @docsPath UI/components/ProgressBar
+ * @component
+ */
+const ProgressBar = _ref => {
+  let {
+    barColor = _colors.default.BLUE_BRIGHT,
+    progress,
+    onMouseEnter,
+    onMouseLeave,
+    onClick,
+    // This hasOnClick prop is set by the Tooltip wrapper. Destructure it here just to get it out of `props`.
+    // See 7a80fefd0a0bc871c31e0c063662c6100b0ca77d
+    // TODO(stephen): clean this up.
+    hasOnClick,
+    className,
+    style,
+    backgroundColor = _colors.default.GRAY_LIGHT_1,
+    width = '100%',
+    height = 4,
+    ...props
+  } = _ref;
+  const styleProps = {
+    backgroundColor,
+    width,
+    height,
+    ...props
+  };
+  const clampedProgressValue = (0, _private_utils.clamp)(progress, 0, 1) * 100;
+  const classNameForStyleProps = (0, _use_styled_system.default)(styleProps, styleParser);
+  return /*#__PURE__*/React.createElement("div", {
+    role: "progressbar",
+    "aria-valuenow": clampedProgressValue
+    // TODO (stephen): remove tooltip anchor props
+    ,
+    onMouseEnter: onMouseEnter,
+    onMouseLeave: onMouseLeave,
+    onClick: onClick,
+    className: (0, _emotion.cx)(progressBarClassName, classNameForStyleProps, className),
+    style: style
+  }, /*#__PURE__*/React.createElement(_box.default, {
+    className: (0, _baymax_utils.baymax)('animate'),
+    width: `${clampedProgressValue}%`,
+    height: "100%",
+    backgroundColor: barColor
+  }));
+};
+var _default = exports.default = ProgressBar;