@airtable/blocks 0.0.0-experimental-e5ab33b68-20250905 → 0.0.0-experimental-3e47d4d04-20250909

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

@@ -0,0 +1,102 @@
+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: FormField */ /** */
+import React, { useState } from 'react';
+import { cx } from 'emotion';
+import { compose } from '@styled-system/core';
+import { getLocallyUniqueId } from '../../shared/private_utils';
+import Box from './box';
+import Text, { TextSize } from './text';
+import Label from './label';
+import { FormFieldContext } from './use_form_field';
+import useStyledSystem from './use_styled_system';
+import { maxWidth, minWidth, width, flexItemSet, positionSet, spacingSet } from './system';
+
+/**
+ * Style props for the {@link FormField} component. Accepts:
+ * * {@link FlexItemSetProps}
+ * * {@link MaxWidthProps}
+ * * {@link MinWidthProps}
+ * * {@link PositionSetProps}
+ * * {@link SpacingSetProps}
+ * * {@link WidthProps}
+ *
+ * @noInheritDoc
+ */
+
+const styleParser = compose(maxWidth, minWidth, width, flexItemSet, positionSet, spacingSet);
+
+/**
+ * Props for the {@link FormField} component. Also accepts:
+ * * {@link FormFieldStyleProps}
+ *
+ * @noInheritDoc
+ * @docsPath UI/components/FormField
+ */
+
+/**
+ * A form field component that wraps any control field, supplying a provided label and optional
+ * description.
+ *
+ * [[ Story id="formfield--example" title="Form field example" ]]
+ *
+ * This component will automatically set up the `for` attribute on the outputted label with the `id` attribute
+ * on the wrapped control field for the following UI components: Label, Select, FieldPicker,
+ * ModelPicker, and ViewPicker. If you'd like to manually override this behavior, you can provide an
+ * `htmlFor` prop to this component and manually set the `id` attribute on your wrapped control to
+ * the same value.
+ *
+ * @docsPath UI/components/FormField
+ * @component
+ */
+const FormField = (props, ref) => {
+  const {
+    id,
+    className,
+    style,
+    label = TextSize.default,
+    htmlFor,
+    description,
+    children,
+    ...styleProps
+  } = props;
+  const classNameForStyleProps = useStyledSystem({
+    width: '100%',
+    ...styleProps
+  }, styleParser);
+  const [generatedId] = useState(getLocallyUniqueId('form-field-'));
+  const controlId = htmlFor || generatedId;
+  const [generatedDescriptionId] = useState(getLocallyUniqueId('input-description-'));
+  const descriptionId = description ? generatedDescriptionId : '';
+  let optionalLabelProps;
+  if (description) {
+    optionalLabelProps = {
+      marginBottom: 1
+    };
+  }
+  return /*#__PURE__*/React.createElement(Box, {
+    ref: ref,
+    id: id,
+    className: cx(classNameForStyleProps, className),
+    style: style,
+    display: "flex",
+    flexDirection: "column",
+    marginBottom: 3
+  }, /*#__PURE__*/React.createElement(Label, _extends({
+    htmlFor: controlId,
+    size: "default"
+  }, optionalLabelProps), label), description && /*#__PURE__*/React.createElement(Text, {
+    variant: "paragraph",
+    id: descriptionId,
+    size: "default",
+    textColor: "light",
+    marginBottom: "6px"
+  }, description), /*#__PURE__*/React.createElement(FormFieldContext.Provider, {
+    value: {
+      controlId,
+      descriptionId
+    }
+  }, children));
+};
+const ForwardedRefFormField = /*#__PURE__*/React.forwardRef(FormField);
+ForwardedRefFormField.displayName = 'FormField';
+export default ForwardedRefFormField;

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

@@ -0,0 +1,9 @@
+/**
+ * Everything in Geometry is lifted from Hyperbase.
+ * Once we refactor/deprecate Popover we can deprecate this as well.
+ *
+ * @internal
+ */ /** */
+export { default as Rect } from './rect';
+export { default as Size } from './size';
+export { default as Point } from './point';

package/dist/esm/base/ui/geometry/point.js

@@ -0,0 +1,12 @@
+/** @internal */
+export default class Point {
+  /** @internal */
+
+  /** @internal */
+
+  /** @internal */
+  constructor(x, y) {
+    this.x = x;
+    this.y = y;
+  }
+}

package/dist/{cjs → esm}/base/ui/geometry/rect.js

@@ -1,13 +1,7 @@
-"use strict";
+import Point from './point';
 
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var _point = _interopRequireDefault(require("./point"));
-function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 /** @internal */
-class Rect {
+export default class Rect {
   /** @internal */
 
   /** @internal */
@@ -45,7 +39,6 @@ class Rect {
   }
   /** @internal */
   centerPoint() {
-    return new _point.default(this.x + this.width / 2, this.y + this.height / 2);
+    return new Point(this.x + this.width / 2, this.y + this.height / 2);
   }
-}
-exports.default = Rect;
+}

package/dist/{cjs → esm}/base/ui/geometry/size.js

@@ -1,11 +1,5 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
 /** @internal */
-class Size {
+export default class Size {
   /** @internal */
 
   /** @internal */
@@ -15,5 +9,4 @@ class Size {
     this.width = width;
     this.height = height;
   }
-}
-exports.default = Size;
+}

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

@@ -0,0 +1,61 @@
+/** @hidden */ /** */
+import * as React from 'react';
+import { isEnumValue } from '../../shared/private_utils';
+import Watchable from '../../shared/watchable';
+import { useSdk } from '../../shared/ui/sdk_context';
+import { baymax } from './baymax_utils';
+const WatchableGlobalAlertKeys = Object.freeze({
+  __alertInfo: '__alertInfo'
+});
+/** @hidden */
+
+/** @hidden */
+
+const GlobalAlertInfo = () => {
+  const sdk = useSdk();
+  return /*#__PURE__*/React.createElement("span", {
+    className: baymax('center line-height-4 quiet strong')
+  }, /*#__PURE__*/React.createElement("span", {
+    className: baymax('pointer understroke link-unquiet'),
+    onClick: () => {
+      sdk.reload();
+    }
+  }, "Please reload"));
+};
+
+/**
+ * @hidden
+ * @example
+ * ```js
+ * import {globalAlert} from '@airtable/blocks/base/ui';
+ * globalAlert.showReloadPrompt();
+ * ```
+ */
+class GlobalAlert extends Watchable {
+  /** @internal */
+  static _className = 'GlobalAlert';
+  /** @internal */
+  static _isWatchableKey(key) {
+    return isEnumValue(WatchableGlobalAlertKeys, key);
+  }
+  /** @internal */
+
+  /** @hidden */
+  constructor() {
+    super();
+    this._alertInfo = null;
+    Object.seal(this);
+  }
+  /** @internal */
+  get __alertInfo() {
+    return this._alertInfo;
+  }
+  /** */
+  showReloadPrompt() {
+    this._alertInfo = {
+      content: /*#__PURE__*/React.createElement(GlobalAlertInfo, null)
+    };
+    this._onChange(WatchableGlobalAlertKeys.__alertInfo);
+  }
+}
+export default GlobalAlert;

package/dist/{cjs → esm}/base/ui/heading.js

@@ -1,25 +1,18 @@
-"use strict";
+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: Heading */ /** */
+import * as React from 'react';
+import { cx } from 'emotion';
+import { invariant } from '../../shared/error_utils';
+import { has, createEnum, keys } from '../../shared/private_utils';
+import useStyledSystem from './use_styled_system';
+import getStylePropsForResponsiveProp from './system/utils/get_style_props_for_responsive_prop';
+import useTheme from './theme/use_theme';
 
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var React = _interopRequireWildcard(require("react"));
-var _emotion = require("emotion");
-var _error_utils = require("../../shared/error_utils");
-var _private_utils = require("../../shared/private_utils");
-var _use_styled_system = _interopRequireDefault(require("./use_styled_system"));
-var _get_style_props_for_responsive_prop = _interopRequireDefault(require("./system/utils/get_style_props_for_responsive_prop"));
-var _use_theme = _interopRequireDefault(require("./theme/use_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; }
-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: Heading */ /** */
 /**
  * Sizes for the {@link Heading} component.
  */
 
-const HeadingSize = (0, _private_utils.createEnum)('xsmall', 'small', 'default', 'large', 'xlarge', 'xxlarge');
+const HeadingSize = createEnum('xsmall', 'small', 'default', 'large', 'xlarge', 'xxlarge');
 
 /**
  * Size prop for the {@link Heading} component.
@@ -31,11 +24,11 @@ const HeadingSize = (0, _private_utils.createEnum)('xsmall', 'small', 'default',
  * • **caps** - All-caps headings typically used for field names and smaller section headings.
  */
 
-const HeadingVariant = (0, _private_utils.createEnum)('default', 'caps');
+const HeadingVariant = createEnum('default', 'caps');
 
 /** @internal */
 function warnIfHeadingSizeOutOfRangeForVariant(size, variant, headingSizesForVariant) {
-  if (process.env.NODE_ENV === 'development' && !(0, _private_utils.has)(headingSizesForVariant, size)) {
+  if (process.env.NODE_ENV === 'development' && !has(headingSizesForVariant, size)) {
     // eslint-disable-next-line
     console.warn(`[@airtable/blocks/ui] warning: <Heading variant='${variant}' /> only supports the following values for the size prop: ${Object.keys(headingSizesForVariant).join(', ')}. The component will fall back to the default size.`);
   }
@@ -45,7 +38,7 @@ function warnIfHeadingSizeOutOfRangeForVariant(size, variant, headingSizesForVar
 function useHeadingStyle(headingSizeProp, variant) {
   const {
     headingStyles
-  } = (0, _use_theme.default)();
+  } = useTheme();
   const headingSizesForVariant = headingStyles[variant];
   let styleProps;
   if (typeof headingSizeProp === 'string') {
@@ -53,18 +46,18 @@ function useHeadingStyle(headingSizeProp, variant) {
     styleProps = headingSizesForVariant[headingSizeProp] || headingSizesForVariant[HeadingSize.default];
   } else {
     const responsiveSizePropObject = {};
-    for (const sizeKey of (0, _private_utils.keys)(headingSizeProp)) {
+    for (const sizeKey of keys(headingSizeProp)) {
       const sizeProp = headingSizeProp[sizeKey];
-      (0, _error_utils.invariant)(sizeProp, 'sizeProp');
+      invariant(sizeProp, 'sizeProp');
       warnIfHeadingSizeOutOfRangeForVariant(sizeProp, variant, headingSizesForVariant);
       responsiveSizePropObject[sizeKey] = sizeProp || HeadingSize.default;
     }
-    styleProps = (0, _get_style_props_for_responsive_prop.default)(responsiveSizePropObject,
+    styleProps = getStylePropsForResponsiveProp(responsiveSizePropObject,
     // Cast to any to because `caps` don't all have the same sizes as `default`.
     // This in turn requires each size to be typed as optional.
     headingSizesForVariant);
   }
-  return (0, _use_styled_system.default)(styleProps);
+  return useStyledSystem(styleProps);
 }
 
 /**
@@ -106,7 +99,7 @@ const Heading = (props, ref) => {
     ...styleProps
   } = props;
   const classNameForHeadingSize = useHeadingStyle(size, variant);
-  const classNameForStyleProps = (0, _use_styled_system.default)({
+  const classNameForStyleProps = useStyledSystem({
     fontFamily: 'default',
     textColor: 'default',
     ...styleProps
@@ -114,7 +107,7 @@ const Heading = (props, ref) => {
   return /*#__PURE__*/React.createElement(Component, _extends({
     ref: ref,
     id: id,
-    className: (0, _emotion.cx)(classNameForHeadingSize, classNameForStyleProps, className),
+    className: cx(classNameForHeadingSize, classNameForStyleProps, className),
     style: style,
     role: role,
     "aria-label": ariaLabel,
@@ -129,4 +122,4 @@ const Heading = (props, ref) => {
 };
 const ForwardedRefHeading = /*#__PURE__*/React.forwardRef(Heading);
 ForwardedRefHeading.displayName = 'Heading';
-var _default = exports.default = ForwardedRefHeading;
+export default ForwardedRefHeading;

package/dist/{cjs → esm}/base/ui/icon.js

@@ -1,18 +1,11 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var _react = _interopRequireDefault(require("react"));
-var _core = require("@styled-system/core");
-var _emotion = require("emotion");
-var _warning = _interopRequireDefault(require("../../shared/warning"));
-var _use_styled_system = _interopRequireDefault(require("./use_styled_system"));
-var _system = require("./system");
-var _icon_config = require("./icon_config");
-function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 /** @module @airtable/blocks/ui: Icon */ /** */
+import React from 'react';
+import { compose } from '@styled-system/core';
+import { cx } from 'emotion';
+import warning from '../../shared/warning';
+import useStyledSystem from './use_styled_system';
+import { flexItemSet, positionSet, margin, width, height } from './system';
+import { legacyIconNameToPhosphorIconName, phosphorIconConfig, deprecatedIconNameToReplacementName } from './icon_config';
 
 /**
  * Style props shared between the {@link Icon} and {@link FieldIcon} components. Accepts:
@@ -23,7 +16,7 @@ function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e
  * @noInheritDoc
  */
 
-const styleParser = (0, _core.compose)(_system.flexItemSet, _system.positionSet, _system.margin, _system.width, _system.height);
+const styleParser = compose(flexItemSet, positionSet, margin, width, height);
 
 /**
  * Props shared between the {@link Icon} and {@link FieldIcon} components.
@@ -65,25 +58,25 @@ const Icon = (props, ref) => {
     suppressWarning = false,
     ...styleProps
   } = props;
-  const classNameForStyleProps = (0, _use_styled_system.default)({
+  const classNameForStyleProps = useStyledSystem({
     ...styleProps,
     width: size,
     height: size
   }, styleParser);
-  const phosphorIconName = _icon_config.legacyIconNameToPhosphorIconName[name];
-  const pathData = phosphorIconName ? _icon_config.phosphorIconConfig[phosphorIconName] : null;
+  const phosphorIconName = legacyIconNameToPhosphorIconName[name];
+  const pathData = phosphorIconName ? phosphorIconConfig[phosphorIconName] : null;
   if (!pathData) {
     return null;
   }
-  if (_icon_config.deprecatedIconNameToReplacementName.has(name) && !suppressWarning) {
-    const alternative = _icon_config.deprecatedIconNameToReplacementName.get(name);
+  if (deprecatedIconNameToReplacementName.has(name) && !suppressWarning) {
+    const alternative = deprecatedIconNameToReplacementName.get(name);
     let alternativeText = '';
     if (alternative) {
       alternativeText = `Use <Icon name='${alternative}' .../> instead.`;
     }
-    (0, _warning.default)(`'${name}' as an icon name is deprecated. ${alternativeText}`);
+    warning(`'${name}' as an icon name is deprecated. ${alternativeText}`);
   }
-  return /*#__PURE__*/_react.default.createElement("svg", {
+  return /*#__PURE__*/React.createElement("svg", {
     ref: ref,
     viewBox: "0 0 16 16"
     // TODO (stephen): remove tooltip anchor props
@@ -91,12 +84,12 @@ const Icon = (props, ref) => {
     onMouseEnter: onMouseEnter,
     onMouseLeave: onMouseLeave,
     onClick: onClick,
-    className: (0, _emotion.cx)(classNameForStyleProps, className),
+    className: cx(classNameForStyleProps, className),
     style: {
       shapeRendering: 'geometricPrecision',
       ...style
     }
-  }, /*#__PURE__*/_react.default.createElement("path", {
+  }, /*#__PURE__*/React.createElement("path", {
     fillRule: "evenodd",
     className: pathClassName,
     style: pathStyle,
@@ -104,6 +97,6 @@ const Icon = (props, ref) => {
     d: pathData
   }));
 };
-const ForwardedRefIcon = /*#__PURE__*/_react.default.forwardRef(Icon);
+const ForwardedRefIcon = /*#__PURE__*/React.forwardRef(Icon);
 ForwardedRefIcon.displayName = 'Icon';
-var _default = exports.default = ForwardedRefIcon;
+export default ForwardedRefIcon;

package/dist/{cjs → esm}/base/ui/icon_config.js

@@ -1,24 +1,19 @@
-"use strict";
+import { createEnum } from '../../shared/private_utils';
 
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.phosphorIconConfig = exports.legacyIconNameToPhosphorIconName = exports.iconNamesArray = exports.iconNames = exports.deprecatedIconNameToReplacementName = void 0;
-var _private_utils = require("../../shared/private_utils");
 // New icons should be added to both Hyperbase and this file.
 // In the UI kit we need more specific types to allow proper autocomplete and prop types.
 // To achieve this we run the original `iconConfig` object from Hyperbase through an utility.
 // You can find the utility here: https://codesandbox.io/s/winter-sound-f4p2l?fontsize=14
-const iconNamesArray = exports.iconNamesArray = ['aiAssistant', 'android', 'apple', 'apps', 'applyRowTemplate', 'ascending', 'attachment', 'automations', 'autonumber', 'barcode', 'bell', 'blocks', 'bold', 'bolt', 'boltList', 'book', 'calendar', 'calendarDay', 'caret', 'chart', 'chat', 'check', 'checkbox', 'checkboxChecked', 'checkboxUnchecked', 'checklist', 'chevronDown', 'chevronLeft', 'chevronRight', 'chevronUp', 'clipboard', 'code', 'cog', 'collapse', 'collapseSidebar', 'contacts', 'count', 'count1', 'cube', 'cursor', 'day', 'dayAuto', 'dedent', 'descending', 'dollar', 'down', 'download', 'dragHandle', 'drive', 'duplicate', 'edit', 'envelope', 'envelope1', 'expand', 'expand1', 'expandSidebar', 'feed', 'file', 'filter', 'flag', 'form', 'formula', 'fullscreen', 'gallery', 'gantt', 'gift', 'grid', 'grid1', 'group', 'heart', 'help', 'hide', 'hide1', 'history', 'home', 'hyperlink', 'hyperlinkCancel', 'indent', 'info', 'italic', 'kanban', 'laptop', 'left', 'lightbulb', 'link', 'link1', 'lock', 'logout', 'lookup', 'mapPin', 'markdown', 'megaphone', 'menu', 'minus', 'mobile', 'multicollaborator', 'multiselect', 'number', 'ol', 'overflow', 'overlay', 'paint', 'paragraph', 'paragraph1', 'pause', 'percent', 'personal', 'personalAuto', 'personalCloseup', 'phone', 'pivot', 'play', 'plus', 'plusFilled', 'premium', 'print', 'public', 'publish', 'quote', 'quote1', 'radio', 'radioSelected', 'redo', 'redo1', 'richText', 'right', 'rollup', 'rollup1', 'rowHeightSmall', 'rowHeightMedium', 'rowHeightLarge', 'rowHeightExtraLarge', 'search', 'select', 'selectCaret', 'settings', 'shapes', 'share', 'share1', 'shareWithBolt', 'show', 'show1', 'slack', 'smiley', 'sort', 'stack', 'star', 'strikethrough', 'switcher', 'tabs', 'team', 'teamLocked', 'text', 'thumbsUp', 'time', 'timeline', 'toggle', 'trash', 'twitter', 'ul', 'underline', 'undo', 'up', 'upload', 'video', 'view', 'warning', 'windows', 'x', 'xCheckbox'];
-const iconNames = exports.iconNames = (0, _private_utils.createEnum)(...iconNamesArray);
-const deprecatedIconNameToReplacementName = exports.deprecatedIconNameToReplacementName = new Map([['blocks', 'apps']]);
+export const iconNamesArray = ['aiAssistant', 'android', 'apple', 'apps', 'applyRowTemplate', 'ascending', 'attachment', 'automations', 'autonumber', 'barcode', 'bell', 'blocks', 'bold', 'bolt', 'boltList', 'book', 'calendar', 'calendarDay', 'caret', 'chart', 'chat', 'check', 'checkbox', 'checkboxChecked', 'checkboxUnchecked', 'checklist', 'chevronDown', 'chevronLeft', 'chevronRight', 'chevronUp', 'clipboard', 'code', 'cog', 'collapse', 'collapseSidebar', 'contacts', 'count', 'count1', 'cube', 'cursor', 'day', 'dayAuto', 'dedent', 'descending', 'dollar', 'down', 'download', 'dragHandle', 'drive', 'duplicate', 'edit', 'envelope', 'envelope1', 'expand', 'expand1', 'expandSidebar', 'feed', 'file', 'filter', 'flag', 'form', 'formula', 'fullscreen', 'gallery', 'gantt', 'gift', 'grid', 'grid1', 'group', 'heart', 'help', 'hide', 'hide1', 'history', 'home', 'hyperlink', 'hyperlinkCancel', 'indent', 'info', 'italic', 'kanban', 'laptop', 'left', 'lightbulb', 'link', 'link1', 'lock', 'logout', 'lookup', 'mapPin', 'markdown', 'megaphone', 'menu', 'minus', 'mobile', 'multicollaborator', 'multiselect', 'number', 'ol', 'overflow', 'overlay', 'paint', 'paragraph', 'paragraph1', 'pause', 'percent', 'personal', 'personalAuto', 'personalCloseup', 'phone', 'pivot', 'play', 'plus', 'plusFilled', 'premium', 'print', 'public', 'publish', 'quote', 'quote1', 'radio', 'radioSelected', 'redo', 'redo1', 'richText', 'right', 'rollup', 'rollup1', 'rowHeightSmall', 'rowHeightMedium', 'rowHeightLarge', 'rowHeightExtraLarge', 'search', 'select', 'selectCaret', 'settings', 'shapes', 'share', 'share1', 'shareWithBolt', 'show', 'show1', 'slack', 'smiley', 'sort', 'stack', 'star', 'strikethrough', 'switcher', 'tabs', 'team', 'teamLocked', 'text', 'thumbsUp', 'time', 'timeline', 'toggle', 'trash', 'twitter', 'ul', 'underline', 'undo', 'up', 'upload', 'video', 'view', 'warning', 'windows', 'x', 'xCheckbox'];
+export const iconNames = createEnum(...iconNamesArray);
+export const deprecatedIconNameToReplacementName = new Map([['blocks', 'apps']]);
 /**
  * List of all icon names. If you need to render an icon use the {@link Icon|Icon component}.
  *
  * [[ Story id="icon--example" title="Icon example" height="576px"]]
  */
 
-const phosphorIconConfig = exports.phosphorIconConfig = {
+export const phosphorIconConfig = {
   AddressBook: 'M8.5 4.5C7.12522 4.5 6 5.62522 6 7C6 7.73367 6.32641 8.38947 6.83423 8.8479C6.15661 9.13725 5.55366 9.59508 5.09998 10.2C5.06057 10.2525 5.03189 10.3123 5.01559 10.3759C4.99928 10.4395 4.99567 10.5057 5.00495 10.5707C5.01424 10.6357 5.03624 10.6983 5.06969 10.7548C5.10315 10.8113 5.14741 10.8606 5.19995 10.9C5.25248 10.9394 5.31226 10.9681 5.37587 10.9844C5.43949 11.0007 5.50569 11.0043 5.5707 10.995C5.63571 10.9858 5.69825 10.9638 5.75476 10.9303C5.81126 10.8968 5.86063 10.8526 5.90002 10.8C6.51409 9.98135 7.4766 9.50003 8.5 9.5C9.5234 9.50005 10.4859 9.98136 11.1 10.8C11.1394 10.8526 11.1887 10.8968 11.2452 10.9303C11.3017 10.9638 11.3643 10.9858 11.4293 10.995C11.4943 11.0043 11.5605 11.0007 11.6241 10.9844C11.6877 10.9681 11.7475 10.9394 11.8 10.9C11.8526 10.8606 11.8968 10.8113 11.9303 10.7548C11.9638 10.6983 11.9858 10.6357 11.995 10.5707C12.0043 10.5057 12.0007 10.4395 11.9844 10.3759C11.9681 10.3123 11.9394 10.2525 11.9 10.2C11.4463 9.5951 10.8434 9.13725 10.1658 8.8479C10.6736 8.38947 11 7.73367 11 7C11 5.62522 9.87478 4.5 8.5 4.5ZM8.5 5.5C9.33434 5.5 10 6.16566 10 7C10 7.83434 9.33434 8.5 8.5 8.5C7.66566 8.5 7 7.83434 7 7C7 6.16566 7.66566 5.5 8.5 5.5Z M4 1.5C3.45364 1.5 3 1.95364 3 2.5V13.5C3 14.0464 3.45364 14.5 4 14.5H13C13.5464 14.5 14 14.0464 14 13.5V2.5C14 1.95364 13.5464 1.5 13 1.5H4ZM4 2.5H13V13.5H4V2.5Z M2 3.75C1.86739 3.75 1.74021 3.80268 1.64645 3.89645C1.55268 3.99021 1.5 4.11739 1.5 4.25C1.5 4.38261 1.55268 4.50979 1.64645 4.60355C1.74021 4.69732 1.86739 4.75 2 4.75H3.5C3.63261 4.75 3.75979 4.69732 3.85355 4.60355C3.94732 4.50979 4 4.38261 4 4.25C4 4.11739 3.94732 3.99021 3.85355 3.89645C3.75979 3.80268 3.63261 3.75 3.5 3.75H2Z M2 6.25C1.86739 6.25 1.74021 6.30268 1.64645 6.39645C1.55268 6.49021 1.5 6.61739 1.5 6.75C1.5 6.88261 1.55268 7.00979 1.64645 7.10355C1.74021 7.19732 1.86739 7.25 2 7.25H3.5C3.63261 7.25 3.75979 7.19732 3.85355 7.10355C3.94732 7.00979 4 6.88261 4 6.75C4 6.61739 3.94732 6.49021 3.85355 6.39645C3.75979 6.30268 3.63261 6.25 3.5 6.25H2Z M2 8.75C1.86739 8.75 1.74021 8.80268 1.64645 8.89645C1.55268 8.99021 1.5 9.11739 1.5 9.25C1.5 9.38261 1.55268 9.50979 1.64645 9.60355C1.74021 9.69732 1.86739 9.75 2 9.75H3.5C3.63261 9.75 3.75979 9.69732 3.85355 9.60355C3.94732 9.50979 4 9.38261 4 9.25C4 9.11739 3.94732 8.99021 3.85355 8.89645C3.75979 8.80268 3.63261 8.75 3.5 8.75H2Z M2 11.25C1.86739 11.25 1.74021 11.3027 1.64645 11.3964C1.55268 11.4902 1.5 11.6174 1.5 11.75C1.5 11.8826 1.55268 12.0098 1.64645 12.1036C1.74021 12.1973 1.86739 12.25 2 12.25H3.5C3.63261 12.25 3.75979 12.1973 3.85355 12.1036C3.94732 12.0098 4 11.8826 4 11.75C4 11.6174 3.94732 11.4902 3.85355 11.3964C3.75979 11.3027 3.63261 11.25 3.5 11.25H2Z',
   Apple: 'M13.443 5.10467C13.3786 5.14227 11.8441 5.93585 11.8441 7.69538C11.9164 9.70202 13.7805 10.4057 13.8125 10.4057C13.7805 10.4433 13.5311 11.3644 12.7921 12.3298C12.2057 13.1615 11.5548 14 10.5664 14C9.62623 14 9.28873 13.4457 8.20391 13.4457C7.0389 13.4457 6.70926 14 5.81729 14C4.8289 14 4.12979 13.1166 3.51139 12.2927C2.70799 11.2144 2.02513 9.5223 2.00102 7.89755C1.98477 7.03659 2.16191 6.19028 2.61156 5.47142C3.24621 4.46786 4.37925 3.78661 5.61657 3.76414C6.56462 3.73435 7.40837 4.37068 7.98694 4.37068C8.54141 4.37068 9.57802 3.76414 10.7509 3.76414C11.2571 3.76463 12.6071 3.90674 13.443 5.10467Z M7.90676 3.59224C7.73801 2.806 8.20391 2.01975 8.63784 1.51821C9.1923 0.911681 10.068 0.5 10.8232 0.5C10.8714 1.28625 10.5659 2.05735 10.0198 2.61896C9.5298 3.22549 8.68605 3.6821 7.90676 3.59224Z',
   AiAssistant: 'M6.75004 6.00002C6.75004 5.72388 6.52618 5.50002 6.25004 5.50002C5.97389 5.50002 5.75004 5.72388 5.75004 6.00002V7.00002C5.75004 7.27616 5.97389 7.50002 6.25004 7.50002C6.52618 7.50002 6.75004 7.27616 6.75004 7.00002V6.00002Z M10.25 6.00002C10.25 5.72388 10.0262 5.50002 9.75004 5.50002C9.47389 5.50002 9.25004 5.72388 9.25004 6.00002V7.00002C9.25004 7.27616 9.47389 7.50002 9.75004 7.50002C10.0262 7.50002 10.25 7.27616 10.25 7.00002V6.00002Z M5.25681 9.06325C5.49805 8.92887 5.80255 9.01549 5.93693 9.25673C6.14942 9.63819 6.45288 9.95226 6.81496 10.1695C7.17686 10.3866 7.58548 10.5 8.00013 10.5C8.41477 10.5 8.82339 10.3866 9.18529 10.1695C9.54737 9.95226 9.85083 9.63819 10.0633 9.25673C10.1977 9.01549 10.5022 8.92887 10.7434 9.06325C10.9847 9.19763 11.0713 9.50213 10.9369 9.74337C10.6411 10.2744 10.2152 10.7178 9.69979 11.027C9.18421 11.3363 8.59803 11.5 8.00013 11.5C7.40222 11.5 6.81604 11.3363 6.30047 11.027C5.78506 10.7178 5.35914 10.2744 5.06332 9.74337C4.92894 9.50213 5.01557 9.19763 5.25681 9.06325Z M12.207 3.99986L12.0691 3.86195C11.341 3.13389 10.7675 2.56042 10.2638 2.14972C9.74904 1.73 9.26514 1.44414 8.7058 1.33288C8.25501 1.24321 7.79096 1.24321 7.34017 1.33288C6.78083 1.44414 6.29693 1.73 5.78215 2.14972C5.27843 2.56041 4.70497 3.13389 3.97691 3.86195L3.839 3.99986C3.11094 4.72792 2.53747 5.30138 2.12677 5.8051C1.70705 6.31988 1.42119 6.80378 1.30993 7.36312C1.22026 7.81391 1.22026 8.27795 1.30993 8.72875C1.42119 9.28809 1.70705 9.77198 2.12677 10.2868C2.53746 10.7905 3.11093 11.3639 3.839 12.092L3.97691 12.2299C4.70497 12.958 5.27843 13.5315 5.78215 13.9421C6.29693 14.3619 6.78083 14.6477 7.34017 14.759C7.79096 14.8487 8.25501 14.8487 8.7058 14.759C9.26514 14.6477 9.74904 14.3619 10.2638 13.9421C10.7675 13.5315 11.341 12.958 12.0691 12.2299L12.207 12.092C12.935 11.3639 13.5085 10.7905 13.9192 10.2868C14.3389 9.77199 14.6248 9.28809 14.736 8.72875C14.8257 8.27795 14.8257 7.81391 14.736 7.36312C14.6248 6.80378 14.3389 6.31988 13.9192 5.8051C13.5085 5.30138 12.935 4.72792 12.207 3.99986ZM8.51071 2.31366C8.84393 2.37994 9.17872 2.55526 9.63191 2.92476C10.0916 3.29956 10.6296 3.83666 11.3817 4.58885L11.4801 4.68718C12.2323 5.43936 12.7694 5.97732 13.1442 6.43701C13.5137 6.8902 13.689 7.22499 13.7553 7.55821C13.8193 7.8802 13.8193 8.21166 13.7553 8.53366C13.689 8.86688 13.5137 9.20167 13.1442 9.65485C12.7694 10.1145 12.2323 10.6525 11.4801 11.4047L11.3817 11.503C10.6296 12.2552 10.0916 12.7923 9.6319 13.1671C9.17872 13.5366 8.84393 13.7119 8.51071 13.7782C8.18871 13.8423 7.85725 13.8423 7.53526 13.7782C7.20204 13.7119 6.86725 13.5366 6.41406 13.1671C5.95437 12.7923 5.41641 12.2552 4.66423 11.503L4.5659 11.4047C3.81371 10.6525 3.27661 10.1145 2.90181 9.65485C2.53231 9.20167 2.35699 8.86688 2.29071 8.53366C2.22666 8.21166 2.22666 7.8802 2.29071 7.55821C2.35699 7.22499 2.53231 6.8902 2.90181 6.43701C3.27661 5.97732 3.81371 5.43936 4.5659 4.68718L4.66423 4.58885C5.41642 3.83666 5.95437 3.29956 6.41406 2.92476C6.86725 2.55526 7.20204 2.37994 7.53526 2.31366C7.85725 2.24961 8.18871 2.24961 8.51071 2.31366Z',
@@ -257,7 +252,7 @@ const phosphorIconConfig = exports.phosphorIconConfig = {
 
 /** @hidden */
 
-const legacyIconNameToPhosphorIconName = exports.legacyIconNameToPhosphorIconName = {
+export const legacyIconNameToPhosphorIconName = {
   aiAssistant: 'AiAssistant',
   apple: 'Apple',
   apps: 'ExtensionsFeature',

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

@@ -0,0 +1,110 @@
+/** @module @airtable/blocks/ui: initializeBlock */ /** */
+import * as React from 'react';
+import { createRoot } from 'react-dom/client';
+import { spawnError } from '../../shared/error_utils';
+import getAirtableInterface from '../../injected/airtable_interface';
+import { BlockRunContextType } from '../types/airtable_interface';
+import BlockWrapper from './block_wrapper';
+let hasBeenInitialized = false;
+
+/** */
+
+/** @hidden */
+
+/** @hidden */
+
+/** @hidden */
+
+/**
+ * `initializeBlock` takes the top-level React component in your tree and renders it. It is conceptually similar to `ReactDOM.render`, but takes care of some Extensions-specific things.
+ *
+ * @param getEntryElement A function that returns your React Node.
+ *
+ * @example
+ * ```js
+ * import {initializeBlock} from '@airtable/blocks/base/ui';
+ * import React from 'react';
+ *
+ * function App() {
+ *     return (
+ *         <div>Hello world 🚀</div>
+ *     );
+ * }
+ *
+ * initializeBlock(() => <App />);
+ * ```
+ * @docsPath UI/utils/initializeBlock
+ */
+export function initializeBlock(getEntryElement) {
+  const entryPoints = typeof getEntryElement === 'function' ? {
+    dashboard: getEntryElement
+  } : getEntryElement;
+  const body = typeof document !== 'undefined' ? document.body : null;
+  if (!body) {
+    throw spawnError('initializeBlock should only be called from browser environments');
+  }
+  if (hasBeenInitialized) {
+    throw spawnError('initializeBlock should only be called once');
+  }
+  hasBeenInitialized = true;
+  const airtableInterface = getAirtableInterface();
+  let entryElement;
+  // runContext can be undefined if running from an old version client version (before 01/2021)
+  // TODO (SeanKeenan): Remove nullish coelescing once old clients are no longer a concern
+  const runContext = airtableInterface.sdkInitData.runContext ?? {
+    type: BlockRunContextType.DASHBOARD_APP
+  };
+  switch (runContext.type) {
+    case BlockRunContextType.DASHBOARD_APP:
+      {
+        if (entryPoints.dashboard === undefined) {
+          throw spawnError('If running an extension within the dashboard, it must have a dashboard initialization function');
+        }
+        if (typeof entryPoints.dashboard !== 'function') {
+          throw spawnError('initializeBlock must contain a dashboard function that returns a React element');
+        }
+        entryElement = entryPoints.dashboard();
+        break;
+      }
+    case BlockRunContextType.VIEW:
+      {
+        if (entryPoints.view === undefined) {
+          throw spawnError('If running an extension within a view, it must have a view initialization function');
+        }
+        if (typeof entryPoints.view !== 'function') {
+          throw spawnError('initializeBlock must contain a view function that returns a React element');
+        }
+        const table = sdk.base.getTableById(runContext.tableId);
+        const view = table.getViewById(runContext.viewId);
+        entryElement = entryPoints.view({
+          table,
+          view
+        });
+        break;
+      }
+    default:
+      throw spawnError('Invalid context to run ');
+  }
+  if (! /*#__PURE__*/React.isValidElement(entryElement)) {
+    throw spawnError("The first argument to initializeBlock didn't return a valid React element");
+  }
+  const container = document.createElement('div');
+  container.style.height = '100%';
+  container.style.width = '100%';
+  body.appendChild(container);
+  createRoot(container).render( /*#__PURE__*/React.createElement(BlockWrapper, {
+    sdk: sdk
+  }, entryElement));
+}
+let sdk;
+
+// The application-level Sdk instance must be injected dynamically to avoid
+// circular dependencies at the time of module resolution.
+export function __injectSdkIntoInitializeBlock(_sdk) {
+  sdk = _sdk;
+}
+
+// Exclusively for tests
+export function __resetHasBeenInitialized() {
+  hasBeenInitialized = false;
+}