@airtable/blocks 0.0.0-experimental-e5ab33b68-20250905 → 0.0.0-experimental-e625869e5-20251002

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

@@ -1,315 +0,0 @@
-"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/cjs/base/ui/progress_bar.js

@@ -1,115 +0,0 @@
-"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;