@airtable/blocks 0.0.0-experimental-3e47d4d04-20250909 → 0.0.0-experimental-446b49015-20251008

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

@@ -1,197 +0,0 @@
-// @ts-nocheck
-
-// Detect Element Resize.
-// https://github.com/sdecima/javascript-detect-element-resize
-// Sebastian Decima
-//
-// Forked from version 0.5.3; includes the following modifications:
-// 1) Guard against unsafe 'window' and 'document' references (to support SSR).
-// 2) Defer initialization code via a top-level function wrapper (to support SSR).
-// 3) Avoid unnecessary reflows by not measuring size for scroll events bubbling from children.
-// 4) Add nonce for style element.
-//
-// NOTE (jb): ported from react-virtualized to conform to our eslint rules.
-// https://github.com/bvaughn/react-virtualized/blob/master/source/vendor/detectElementResize.js
-//
-// TODO: make this file conform to our styleguide.
-/**
- * @internal
- */
-export default function createDetectElementResize(nonce) {
-  // Check `document` and `window` in case of server-side rendering
-  var _window;
-  if (typeof window !== 'undefined') {
-    _window = window;
-  } else if (typeof self !== 'undefined') {
-    _window = self;
-  } else {
-    _window = this; // eslint-disable-line consistent-this
-  }
-  var attachEvent = typeof document !== 'undefined' && document.attachEvent;
-  var animationName;
-  var animationKeyframes;
-  var animationStyle;
-  var resetTriggers;
-  var checkTriggers;
-  var scrollListener;
-  var animation;
-  var keyframeprefix;
-  var animationstartevent;
-  var domPrefixes;
-  var startEvents;
-  var pfx;
-  if (!attachEvent) {
-    var requestFrame = function () {
-      var raf = _window.requestAnimationFrame || _window.mozRequestAnimationFrame || _window.webkitRequestAnimationFrame || function (fn) {
-        return _window.setTimeout(fn, 20);
-      };
-      return function (fn) {
-        return raf(fn);
-      };
-    }();
-    var cancelFrame = function () {
-      var cancel = _window.cancelAnimationFrame || _window.mozCancelAnimationFrame || _window.webkitCancelAnimationFrame || _window.clearTimeout;
-      return function (id) {
-        return cancel(id);
-      };
-    }();
-    resetTriggers = function (element) {
-      var triggers = element.__resizeTriggers__,
-        expand = triggers.firstElementChild,
-        contract = triggers.lastElementChild,
-        expandChild = expand.firstElementChild;
-      contract.scrollLeft = contract.scrollWidth;
-      contract.scrollTop = contract.scrollHeight;
-      expandChild.style.width = expand.offsetWidth + 1 + 'px';
-      expandChild.style.height = expand.offsetHeight + 1 + 'px';
-      expand.scrollLeft = expand.scrollWidth;
-      expand.scrollTop = expand.scrollHeight;
-    };
-    checkTriggers = function (element) {
-      return element.offsetWidth !== element.__resizeLast__.width || element.offsetHeight !== element.__resizeLast__.height;
-    };
-    scrollListener = function (e) {
-      // Don't measure (which forces) reflow for scrolls that happen inside of children!
-      if (e.target.className.indexOf('contract-trigger') < 0 && e.target.className.indexOf('expand-trigger') < 0) {
-        return;
-      }
-      var element = this; // eslint-disable-line consistent-this
-      resetTriggers(this);
-      if (this.__resizeRAF__) {
-        cancelFrame(this.__resizeRAF__);
-      }
-      this.__resizeRAF__ = requestFrame(function () {
-        if (checkTriggers(element)) {
-          element.__resizeLast__.width = element.offsetWidth;
-          element.__resizeLast__.height = element.offsetHeight;
-          element.__resizeListeners__.forEach(function (fn) {
-            fn.call(element, e);
-          });
-        }
-      });
-    };
-
-    /* Detect CSS Animations support to detect element display/re-attach */
-    animation = false;
-    keyframeprefix = '';
-    animationstartevent = 'animationstart';
-    domPrefixes = 'Webkit Moz O ms'.split(' ');
-    startEvents = 'webkitAnimationStart animationstart oAnimationStart MSAnimationStart'.split(' ');
-    pfx = '';
-
-    // eslint-disable-next-line no-lone-blocks
-    {
-      var elm = document.createElement('fakeelement');
-      if (elm.style.animationName !== undefined) {
-        animation = true;
-      }
-      if (animation === false) {
-        for (var i = 0; i < domPrefixes.length; i++) {
-          if (elm.style[domPrefixes[i] + 'AnimationName'] !== undefined) {
-            pfx = domPrefixes[i];
-            keyframeprefix = '-' + pfx.toLowerCase() + '-';
-            animationstartevent = startEvents[i];
-            animation = true;
-            break;
-          }
-        }
-      }
-    }
-    animationName = 'resizeanim';
-    animationKeyframes = '@' + keyframeprefix + 'keyframes ' + animationName + ' { from { opacity: 0; } to { opacity: 0; } } ';
-    animationStyle = keyframeprefix + 'animation: 1ms ' + animationName + '; ';
-  }
-  var createStyles = function () {
-    if (!document.getElementById('detectElementResize')) {
-      // opacity:0 works around a chrome bug https://code.google.com/p/chromium/issues/detail?id=286360
-      var css = (animationKeyframes ? animationKeyframes : '') + '.resize-triggers { ' + (animationStyle ? animationStyle : '') + 'visibility: hidden; opacity: 0; } ' + '.resize-triggers, .resize-triggers > div, .contract-trigger:before { content: " "; display: block; position: absolute; top: 0; left: 0; height: 100%; width: 100%; overflow: hidden; z-index: -1; } .resize-triggers > div { background: #eee; overflow: auto; } .contract-trigger:before { width: 200%; height: 200%; }',
-        head = document.head || document.getElementsByTagName('head')[0],
-        style = document.createElement('style');
-      style.id = 'detectElementResize';
-      style.type = 'text/css';
-      if (nonce !== null) {
-        style.setAttribute('nonce', nonce);
-      }
-      if (style.styleSheet) {
-        style.styleSheet.cssText = css;
-      } else {
-        style.appendChild(document.createTextNode(css));
-      }
-      head.appendChild(style);
-    }
-  };
-  var addResizeListener = function (element, fn) {
-    if (attachEvent) {
-      element.attachEvent('onresize', fn);
-    } else {
-      if (!element.__resizeTriggers__) {
-        var elementStyle = _window.getComputedStyle(element);
-        if (elementStyle && elementStyle.position === 'static') {
-          element.style.position = 'relative';
-        }
-        createStyles();
-        element.__resizeLast__ = {};
-        element.__resizeListeners__ = [];
-        (element.__resizeTriggers__ = document.createElement('div')).className = 'resize-triggers';
-        element.__resizeTriggers__.innerHTML = '<div class="expand-trigger"><div></div></div>' + '<div class="contract-trigger"></div>';
-        element.appendChild(element.__resizeTriggers__);
-        resetTriggers(element);
-        element.addEventListener('scroll', scrollListener, true);
-
-        /* Listen for a css animation to detect element display/re-attach */
-        if (animationstartevent) {
-          element.__resizeTriggers__.__animationListener__ = function animationListener(e) {
-            if (e.animationName === animationName) {
-              resetTriggers(element);
-            }
-          };
-          element.__resizeTriggers__.addEventListener(animationstartevent, element.__resizeTriggers__.__animationListener__);
-        }
-      }
-      element.__resizeListeners__.push(fn);
-    }
-  };
-  var removeResizeListener = function (element, fn) {
-    if (attachEvent) {
-      element.detachEvent('onresize', fn);
-    } else {
-      element.__resizeListeners__.splice(element.__resizeListeners__.indexOf(fn), 1);
-      if (!element.__resizeListeners__.length) {
-        element.removeEventListener('scroll', scrollListener, true);
-        if (element.__resizeTriggers__.__animationListener__) {
-          element.__resizeTriggers__.removeEventListener(animationstartevent, element.__resizeTriggers__.__animationListener__);
-          element.__resizeTriggers__.__animationListener__ = null;
-        }
-        try {
-          element.__resizeTriggers__ = !element.removeChild(element.__resizeTriggers__);
-        } catch (e) {
-          // Preact compat; see developit/preact-compat/issues/228
-        }
-      }
-    }
-  };
-  return {
-    addResizeListener,
-    removeResizeListener
-  };
-}

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

@@ -1,17 +0,0 @@
-import { css } from 'emotion';
-const cssHelpers = {
-  TRUNCATE: css({
-    overflow: 'hidden',
-    textOverflow: 'ellipsis',
-    whiteSpace: 'nowrap'
-  }),
-  VISUALLY_HIDDEN: css({
-    position: 'absolute',
-    height: '1px',
-    width: '1px',
-    overflow: 'hidden',
-    clip: ['rect(1px, 1px, 1px, 1px)', 'rect(1px 1px 1px 1px)'] /* fallback for IE6, IE7 */,
-    whiteSpace: 'nowrap' /* added line */
-  })
-};
-export default cssHelpers;

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

@@ -1,93 +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); }
-/** @module @airtable/blocks/ui: Dialog */ /** */
-import { cx } from 'emotion';
-import * as React from 'react';
-import { baymax } from './baymax_utils';
-import Modal from './modal';
-import DialogCloseButton from './dialog_close_button';
-
-/**
- * Style props shared between the {@link Dialog} and {@link ConfirmationDialog} components. Also accepts:
- * * {@link DimensionsSetProps}
- * * {@link FlexContainerSetProps}
- * * {@link SpacingSetProps}
- *
- * @noInheritDoc
- */
-// This is equivalent to ModalStyleProps, but we include it separately since Modal is private.
-
-/** @internal */
-const DialogContext = /*#__PURE__*/React.createContext({
-  onDialogClose: null
-});
-/** @internal */
-export function useDialogContext() {
-  return React.useContext(DialogContext);
-}
-
-/**
- * Props for the {@link Dialog} component. Also accepts:
- * * {@link DialogStyleProps}
- *
- * @noInheritDoc
- * @docsPath UI/components/Dialog
- */
-
-/**
- * A styled modal dialog component.
- *
- * [[ Story id="dialog--example" title="Dialog example" ]]
- *
- * @docsPath UI/components/Dialog
- * @component
- */
-// TODO (stephen): focus trapping
-class Dialog extends React.Component {
-  /** @hidden */
-  static CloseButton = DialogCloseButton;
-
-  /** @hidden */
-  constructor(props) {
-    super(props);
-    this._onKeyDown = this._onKeyDown.bind(this);
-  }
-  /** @hidden */
-  componentDidMount() {
-    window.addEventListener('keydown', this._onKeyDown, false);
-  }
-  /** @hidden */
-  componentWillUnmount() {
-    window.removeEventListener('keydown', this._onKeyDown, false);
-  }
-  /** @internal */
-  _onKeyDown(e) {
-    if (e.key === 'Escape') {
-      this.props.onClose();
-    }
-  }
-  /** @hidden */
-  render() {
-    const {
-      onClose,
-      className,
-      style,
-      backgroundClassName,
-      backgroundStyle,
-      children,
-      ...restOfProps
-    } = this.props;
-    return /*#__PURE__*/React.createElement(Modal, _extends({
-      onClose: onClose,
-      className: cx(baymax('big line-height-4'), className),
-      style: style,
-      backgroundClassName: backgroundClassName,
-      backgroundStyle: backgroundStyle
-    }, restOfProps), /*#__PURE__*/React.createElement(DialogContext.Provider, {
-      value: {
-        // automatically pass onClose to any descendants that are Dialog.CloseButton
-        onDialogClose: onClose
-      }
-    }, children));
-  }
-}
-export default Dialog;

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

@@ -1,96 +0,0 @@
-/** @module @airtable/blocks/ui: Dialog */ /** */
-import { cx } from 'emotion';
-import * as React from 'react';
-import { compose } from '@styled-system/core';
-import { baymax } from './baymax_utils';
-import withStyledSystem from './with_styled_system';
-import { borderRadius, dimensionsSet, display, flexContainerSet, flexItemSet, positionSet, spacingSet } from './system';
-import Icon from './icon';
-import { useDialogContext } from './dialog';
-
-/**
- * Props for the {@link DialogCloseButton} component. Also accepts:
- * * {@link DialogCloseButtonStyleProps}
- *
- * @noInheritDoc
- */
-
-/**
- * Style props for the {@link DialogCloseButton} component. Accepts:
- * * {@link BorderRadiusProps}
- * * {@link DimensionsSetProps}
- * * {@link DisplayProps}
- * * {@link FlexContainerSetProps}
- * * {@link FlexItemSetProps}
- * * {@link PositionSetProps}
- * * {@link SpacingSetProps}
- *
- * @noInheritDoc
- */
-
-const styleParser = compose(borderRadius, dimensionsSet, display, flexContainerSet, flexItemSet, positionSet, spacingSet);
-
-/**
- * A button that closes {@link Dialog}. Accessed via `Dialog.CloseButton`.
- */
-// TODO (stephen): can we alias this as Dialog.CloseButton in typedoc?
-// TODO (stephen): convert into a prop in Dialog
-export function DialogCloseButton(props) {
-  const {
-    onDialogClose
-  } = useDialogContext();
-  const {
-    onMouseEnter,
-    onMouseLeave,
-    className,
-    style,
-    tabIndex,
-    onClick,
-    children
-  } = props;
-  const _onClick = e => {
-    // onClick should only be defined in the case of a tooltip.
-    if (onClick) {
-      onClick(e);
-    }
-    onDialogClose?.();
-  };
-  const _onKeyDown = e => {
-    if (e.ctrlKey || e.altKey || e.metaKey) {
-      return;
-    }
-    if (['Enter', ' '].includes(e.key)) {
-      e.preventDefault();
-      onDialogClose?.();
-    }
-  };
-  return /*#__PURE__*/React.createElement("div", {
-    // TODO (stephen): remove tooltip anchor props
-    onMouseEnter: onMouseEnter,
-    onMouseLeave: onMouseLeave,
-    onClick: _onClick,
-    onKeyDown: _onKeyDown,
-    className: cx(baymax('darken1-hover darken1-focus no-outline pointer'), className),
-    style: style,
-    tabIndex: tabIndex || 0,
-    role: "button",
-    "aria-label": "Close dialog"
-  }, children ? children : /*#__PURE__*/React.createElement(Icon, {
-    name: "x",
-    size: 12,
-    className: baymax('quieter')
-  }));
-}
-export default withStyledSystem(DialogCloseButton, styleParser, {
-  position: 'absolute',
-  top: 0,
-  right: 0,
-  marginTop: 2,
-  marginRight: 2,
-  display: 'flex',
-  alignItems: 'center',
-  justifyContent: 'center',
-  width: '24px',
-  height: '24px',
-  borderRadius: 'circle'
-});

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

@@ -1,37 +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); }
-/** @module @airtable/blocks/ui: FieldIcon */ /** */
-import * as React from 'react';
-import { useSdk } from '../../shared/ui/sdk_context';
-import Icon from './icon';
-
-/**
- * Props for the {@link FieldIcon} component. Also accepts:
- * * {@link IconStyleProps}
- *
- * @docsPath UI/components/FieldIcon
- */
-// TODO (stephen): inherit shared props without inheriting style props
-
-/**
- * A vector icon for a field’s type.
- *
- * [[ Story id="fieldicon--example" title="FieldIcon example" ]]
- *
- * @docsPath UI/components/FieldIcon
- * @component
- */
-const FieldIcon = props => {
-  const {
-    field,
-    ...restOfProps
-  } = props;
-  const sdk = useSdk();
-  const airtableInterface = sdk.__airtableInterface;
-  const appInterface = sdk.__appInterface;
-  const uiConfig = airtableInterface.fieldTypeProvider.getUiConfig(appInterface, field._data);
-  const name = uiConfig.iconName;
-  return /*#__PURE__*/React.createElement(Icon, _extends({
-    name: name
-  }, restOfProps));
-};
-export default FieldIcon;

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

@@ -1,91 +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); }
-/** @module @airtable/blocks/ui: FieldPicker */ /** */
-import * as React from 'react';
-import { has } from '../../shared/private_utils';
-import useWatchable from '../../shared/ui/use_watchable';
-import { useSdk } from '../../shared/ui/sdk_context';
-import ModelPickerSelect from './model_picker_select';
-
-/**
- * Props shared between the {@link FieldPicker} and {@link FieldPickerSynced} components.
- */
-
-/**
- * Props for the {@link FieldPicker} component. Also accepts:
- * * {@link SelectStyleProps}
- *
- * @docsPath UI/components/FieldPicker
- */
-
-/**
- * Dropdown menu component for selecting fields.
- *
- * [[ Story id="modelpickers--fieldpicker-example" title="Field picker example" ]]
- *
- * @docsPath UI/components/FieldPicker
- * @component
- */
-const FieldPicker = (props, ref) => {
-  const {
-    table,
-    field: selectedField,
-    shouldAllowPickingNone,
-    allowedTypes,
-    placeholder,
-    // Destructure `onChange` to prevent it from being passed to `ModelPickerSelect`.
-    onChange,
-    ...restOfProps
-  } = props;
-  const sdk = useSdk();
-  useWatchable(sdk.base, ['tables']);
-  useWatchable(table, ['fields']);
-  if (!table || table.isDeleted) {
-    return null;
-  }
-  function _onChange(fieldId) {
-    if (onChange) {
-      const field = table && !table.isDeleted && fieldId ? table.getFieldByIdIfExists(fieldId) : null;
-      onChange(field);
-    }
-  }
-  let placeholderToUse;
-  if (placeholder === undefined) {
-    // Let's set a good default value for the placeholder, depending
-    // on the shouldAllowPickingNone flag.
-    placeholderToUse = shouldAllowPickingNone ? 'None' : 'Pick a field...';
-  } else {
-    placeholderToUse = placeholder;
-  }
-  const allowedTypesSet = {};
-  if (allowedTypes) {
-    for (const allowedType of allowedTypes) {
-      allowedTypesSet[allowedType] = true;
-    }
-  }
-  const shouldAllowPickingFieldFn = field => {
-    return !allowedTypes || has(allowedTypesSet, field.type);
-  };
-
-  // Fields are only ordered within a view, and views' column orders aren't
-  // loaded by default. So we'll always list the primary field first, followed
-  // by the rest of the fields in alphabetical order.
-  const models = table.fields.filter(field => field !== table.primaryField).sort((a, b) => {
-    return a.name.toLowerCase() < b.name.toLowerCase() ? -1 : 1;
-  });
-  models.unshift(table.primaryField);
-  return /*#__PURE__*/React.createElement(ModelPickerSelect, _extends({}, restOfProps, {
-    ref: ref,
-    models: models
-    // `shouldAllowPickingModelFn` is typed as `AnyModel`. Cast to any since we only expect `Field`.
-    ,
-    shouldAllowPickingModelFn: shouldAllowPickingFieldFn,
-    selectedModelId: selectedField && !selectedField.isDeleted ? selectedField.id : null,
-    modelKeysToWatch: ['name', 'type', 'options'],
-    shouldAllowPickingNone: shouldAllowPickingNone,
-    placeholder: placeholderToUse,
-    onChange: _onChange
-  }));
-};
-const ForwardedRefFieldPicker = /*#__PURE__*/React.forwardRef(FieldPicker);
-ForwardedRefFieldPicker.displayName = 'FieldPicker';
-export default ForwardedRefFieldPicker;

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

@@ -1,59 +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); }
-/** @module @airtable/blocks/ui: FieldPicker */ /** */
-import * as React from 'react';
-import useSynced from '../../shared/ui/use_synced';
-import useWatchable from '../../shared/ui/use_watchable';
-import { useSdk } from '../../shared/ui/sdk_context';
-import FieldPicker from './field_picker';
-
-/**
- * Props for the {@link FieldPickerSynced} component. Also accepts:
- * * {@link SelectStyleProps}
- *
- * @docsPath UI/components/FieldPickerSynced
- * @groupPath UI/components/FieldPicker
- */
-
-/**
- * A wrapper around the {@link FieldPicker} component that syncs with {@link GlobalConfig}.
- *
- * [[ Story id="modelpickers--fieldpickersynced-example" title="Synced field picker example" ]]
- *
- * @docsPath UI/components/FieldPickerSynced
- * @groupPath UI/components/FieldPicker
- * @component
- */
-const FieldPickerSynced = (props, ref) => {
-  const {
-    globalConfigKey,
-    onChange,
-    disabled,
-    table,
-    ...restOfProps
-  } = props;
-  const [fieldId, setFieldId, canSetFieldId] = useSynced(globalConfigKey);
-  const sdk = useSdk();
-  useWatchable(sdk.base, ['tables']);
-  useWatchable(table, ['fields']);
-  function _getFieldFromGlobalConfigValue() {
-    if (!table || table.isDeleted) {
-      return null;
-    }
-    return typeof fieldId === 'string' && table ? table.getFieldByIdIfExists(fieldId) : null;
-  }
-  return /*#__PURE__*/React.createElement(FieldPicker, _extends({}, restOfProps, {
-    ref: ref,
-    table: table,
-    field: _getFieldFromGlobalConfigValue(),
-    onChange: field => {
-      setFieldId(field ? field.id : null);
-      if (onChange) {
-        onChange(field);
-      }
-    },
-    disabled: disabled || !canSetFieldId
-  }));
-};
-const ForwardedRefFieldPickerSynced = /*#__PURE__*/React.forwardRef(FieldPickerSynced);
-ForwardedRefFieldPickerSynced.displayName = 'FieldPickerSynced';
-export default ForwardedRefFieldPickerSynced;