@airtable/blocks 0.0.0-experimental-3e47d4d04-20250909 → 0.0.0-experimental-e625869e5-20251002

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

@@ -1,135 +0,0 @@
-/** @hidden */ /** */
-import { cx } from 'emotion';
-import * as React from 'react';
-import ReactDOM from 'react-dom';
-import { compose } from '@styled-system/core';
-import { invariant } from '../../shared/error_utils';
-import { baymax } from './baymax_utils';
-import withStyledSystem from './with_styled_system';
-import { dimensionsSet, display, flexContainerSet, spacingSet } from './system';
-
-/**
- * Props for the {@link Modal} component. Also accepts:
- * * {@link ModalStyleProps}
- *
- * @hidden
- */
-// This doesn't actually extend ModalStyleProps since withStyledSystem
-// expects non-style props and style props as separate generic type variables.
-
-/**
- * Style props shared between the {@link Modal}, {@link Dialog}, and {@link ConfirmationDialog} components. Also accepts:
- * * {@link DimensionsSetProps}
- * * {@link FlexContainerSetProps}
- * * {@link SpacingSetProps}
- *
- * @hidden
- * @noInheritDoc
- */
-
-const styleParser = compose(dimensionsSet, display, flexContainerSet, spacingSet);
-
-/**
- * Generic modal component with minimal styling.
- *
- * @hidden
- */
-// TODO (stephen): refactor so Modal only includes the background element and renders the dialog via children
-export class Modal extends React.Component {
-  /** @internal */
-
-  /** @internal */
-
-  /** @internal */
-
-  /** @internal */
-
-  /** @hidden */
-  constructor(props) {
-    super(props);
-    this._background = null;
-    this._container = document.createElement('div');
-    this._originalActiveElement = null;
-    this._mouseDownOutsideModal = false;
-    this._onMouseDown = this._onMouseDown.bind(this);
-    this._onMouseUp = this._onMouseUp.bind(this);
-  }
-  /** @hidden */
-  componentDidMount() {
-    const container = this._container;
-    container.setAttribute('tabIndex', '0');
-    container.style.zIndex = '99999';
-    // If we don't set `position: fixed`, the outline and box-shadow
-    // of elements that are in theory underneath this element will cover
-    // up the modal.
-    container.style.position = 'fixed';
-    invariant(document.body, 'no document body');
-    document.body.appendChild(container);
-
-    // If the frame is focused, move focus to the modal's container.
-    // Next time the user presses tab, it will focus the first focusable element in the modal.
-    // We only do this if the document is focused to avoid the frame becoming
-    // programmatically focused if a modal is displayed without user interaction.
-    if (document.hasFocus()) {
-      this._originalActiveElement = document.activeElement;
-      container.focus();
-    }
-  }
-  /** @hidden */
-  componentWillUnmount() {
-    invariant(document.body, 'no document body');
-    document.body.removeChild(this._container);
-    if (this._originalActiveElement !== null) {
-      this._originalActiveElement.focus();
-    }
-  }
-  /** @internal */
-  _onMouseDown(e) {
-    if (this._shouldClickingOnElementCloseModal(e.target)) {
-      this._mouseDownOutsideModal = true;
-    }
-  }
-  /** @internal */
-  _onMouseUp(e) {
-    if (this._mouseDownOutsideModal && this.props.onClose && this._shouldClickingOnElementCloseModal(e.target)) {
-      this.props.onClose();
-    }
-    this._mouseDownOutsideModal = false;
-  }
-  /** @internal */
-  _shouldClickingOnElementCloseModal(el) {
-    return el === this._background;
-  }
-  /** @hidden */
-  render() {
-    const {
-      className,
-      style,
-      backgroundClassName,
-      backgroundStyle,
-      children
-    } = this.props;
-    return /*#__PURE__*/ReactDOM.createPortal( /*#__PURE__*/React.createElement("div", {
-      ref: el => {
-        this._background = el;
-      },
-      className: cx(baymax('fixed all-0 darken3 flex items-center justify-center'), backgroundClassName),
-      style: backgroundStyle,
-      onMouseDown: this._onMouseDown,
-      onMouseUp: this._onMouseUp
-    }, /*#__PURE__*/React.createElement("div", {
-      className: cx(baymax('relative overflow-auto light-scrollbar white stroked1 rounded-big animate-bounce-in'), className),
-      style: style
-    }, children)), this._container);
-  }
-}
-export default withStyledSystem(Modal, styleParser,
-// TODO (stephen): move these to Dialog
-{
-  display: 'block',
-  width: '100%',
-  maxWidth: '100vw',
-  maxHeight: '100vh',
-  margin: 3,
-  padding: 3
-});

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

@@ -1,50 +0,0 @@
-function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
-/** @hidden */ /** */
-import * as React from 'react';
-import { invariant } from '../../shared/error_utils';
-import useWatchable from '../../shared/ui/use_watchable';
-import Select from './select';
-
-// Private component used by TablePicker, ViewPicker, FieldPicker.
-
-function ModelPickerSelect(props, ref) {
-  const {
-    models,
-    modelKeysToWatch,
-    selectedModelId,
-    shouldAllowPickingNone,
-    shouldAllowPickingModelFn,
-    placeholder,
-    // Destructure `onChange` to prevent it from being passed to `Select`.
-    onChange,
-    ...restOfProps
-  } = props;
-
-  // useWatchable has stricter typing than createDataContainer which it replaced, so we can't
-  // know that model and modelKeysToWatch are exactly compatible here:
-  useWatchable(models, modelKeysToWatch);
-  function _onChange(value) {
-    invariant(value === null || typeof value === 'string', 'value must be null or model id');
-    onChange(value);
-  }
-  const options = [{
-    value: null,
-    label: placeholder,
-    disabled: !shouldAllowPickingNone
-  }, ...models.map(model => {
-    return {
-      value: model.id,
-      label: model.name,
-      disabled: shouldAllowPickingModelFn && !shouldAllowPickingModelFn(model)
-    };
-  })];
-  return /*#__PURE__*/React.createElement(Select, _extends({}, restOfProps, {
-    ref: ref,
-    value: selectedModelId,
-    onChange: _onChange,
-    options: options
-  }));
-}
-const ForwardedRefModelPickerSelect = /*#__PURE__*/React.forwardRef(ModelPickerSelect);
-ForwardedRefModelPickerSelect.displayName = 'ModelPickerSelect';
-export default ForwardedRefModelPickerSelect;

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

@@ -1,312 +0,0 @@
-/** @module @airtable/blocks/ui: Popover */ /** */
-import { cx } from 'emotion';
-import { createRoot } from 'react-dom/client';
-import * as React from 'react';
-import { invariant } from '../../shared/error_utils';
-import { baymax } from './baymax_utils';
-import createDetectElementResize from './create_detect_element_resize';
-import * as Geometry from './geometry/geometry';
-
-// 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
-export let 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
-export let 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';
-    invariant(document.body, 'no document body');
-    document.body.appendChild(container);
-    this._reactRoot = createRoot(container);
-    window.addEventListener('scroll', this._refreshContainerAsync);
-    this._detectElementResize = createDetectElementResize();
-    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;
-    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 = cx(baymax('fixed all-0'), this.props.backgroundClassName);
-    const backgroundStyle = this.props.backgroundStyle;
-    return new Promise(resolve => {
-      const container = this._container;
-      invariant(container, 'container must exist');
-      const root = this._reactRoot;
-      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);
-  }
-}
-export default Popover;

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

@@ -1,106 +0,0 @@
-/** @module @airtable/blocks/ui: ProgressBar */ /** */
-import { cx, css } from 'emotion';
-import * as React from 'react';
-import { compose } from '@styled-system/core';
-import { clamp } from '../../shared/private_utils';
-import colors from '../../shared/colors';
-import { baymax } from './baymax_utils';
-import useStyledSystem from './use_styled_system';
-import { backgroundColor, maxWidth, minWidth, width, height, flexItemSet, positionSet, margin, display } from './system';
-import Box from './box';
-import theme from './theme/default_theme';
-
-/**
- * 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 = compose(backgroundColor, maxWidth, minWidth, width, height, flexItemSet, positionSet, margin, 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 = css({
-  position: 'relative',
-  borderRadius: theme.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.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.GRAY_LIGHT_1,
-    width = '100%',
-    height = 4,
-    ...props
-  } = _ref;
-  const styleProps = {
-    backgroundColor,
-    width,
-    height,
-    ...props
-  };
-  const clampedProgressValue = clamp(progress, 0, 1) * 100;
-  const classNameForStyleProps = useStyledSystem(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: cx(progressBarClassName, classNameForStyleProps, className),
-    style: style
-  }, /*#__PURE__*/React.createElement(Box, {
-    className: baymax('animate'),
-    width: `${clampedProgressValue}%`,
-    height: "100%",
-    backgroundColor: barColor
-  }));
-};
-export default ProgressBar;