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

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

@@ -0,0 +1,71 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var React = _interopRequireWildcard(require("react"));
+var _private_utils = require("../../shared/private_utils");
+var _watchable = _interopRequireDefault(require("../../shared/watchable"));
+var _sdk_context = require("../../shared/ui/sdk_context");
+var _baymax_utils = require("./baymax_utils");
+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; }
+/** @hidden */ /** */
+
+const WatchableGlobalAlertKeys = Object.freeze({
+  __alertInfo: '__alertInfo'
+});
+/** @hidden */
+
+/** @hidden */
+
+const GlobalAlertInfo = () => {
+  const sdk = (0, _sdk_context.useSdk)();
+  return /*#__PURE__*/React.createElement("span", {
+    className: (0, _baymax_utils.baymax)('center line-height-4 quiet strong')
+  }, /*#__PURE__*/React.createElement("span", {
+    className: (0, _baymax_utils.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.default {
+  /** @internal */
+  static _className = 'GlobalAlert';
+  /** @internal */
+  static _isWatchableKey(key) {
+    return (0, _private_utils.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);
+  }
+}
+var _default = exports.default = GlobalAlert;

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

@@ -0,0 +1,132 @@
+"use strict";
+
+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');
+
+/**
+ * Size prop for the {@link Heading} component.
+ */
+
+/**
+ * Variant prop for the {@link Heading} component.
+ * • **default** - Headings typically used for titles.
+ * • **caps** - All-caps headings typically used for field names and smaller section headings.
+ */
+
+const HeadingVariant = (0, _private_utils.createEnum)('default', 'caps');
+
+/** @internal */
+function warnIfHeadingSizeOutOfRangeForVariant(size, variant, headingSizesForVariant) {
+  if (process.env.NODE_ENV === 'development' && !(0, _private_utils.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.`);
+  }
+}
+
+/** @internal */
+function useHeadingStyle(headingSizeProp, variant) {
+  const {
+    headingStyles
+  } = (0, _use_theme.default)();
+  const headingSizesForVariant = headingStyles[variant];
+  let styleProps;
+  if (typeof headingSizeProp === 'string') {
+    warnIfHeadingSizeOutOfRangeForVariant(headingSizeProp, variant, headingSizesForVariant);
+    styleProps = headingSizesForVariant[headingSizeProp] || headingSizesForVariant[HeadingSize.default];
+  } else {
+    const responsiveSizePropObject = {};
+    for (const sizeKey of (0, _private_utils.keys)(headingSizeProp)) {
+      const sizeProp = headingSizeProp[sizeKey];
+      (0, _error_utils.invariant)(sizeProp, 'sizeProp');
+      warnIfHeadingSizeOutOfRangeForVariant(sizeProp, variant, headingSizesForVariant);
+      responsiveSizePropObject[sizeKey] = sizeProp || HeadingSize.default;
+    }
+    styleProps = (0, _get_style_props_for_responsive_prop.default)(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);
+}
+
+/**
+ * Props for the {@link Heading} component. Also supports:
+ * * {@link AllStylesProps}
+ * * {@link AriaProps}
+ *
+ * @docsPath UI/components/Heading
+ * @noInheritDoc
+ */
+
+/**
+ * A heading component with sizes and variants.
+ *
+ * [[ Story id="heading--example" title="Heading example" ]]
+ *
+ * @docsPath UI/components/Heading
+ * @component
+ */
+const Heading = (props, ref) => {
+  const {
+    as: Component = 'h3',
+    size = HeadingSize.default,
+    variant = HeadingVariant.default,
+    children,
+    id,
+    role,
+    dataAttributes,
+    className,
+    style,
+    'aria-label': ariaLabel,
+    'aria-labelledby': ariaLabelledBy,
+    'aria-describedby': ariaDescribedBy,
+    'aria-controls': ariaControls,
+    'aria-expanded': ariaExpanded,
+    'aria-haspopup': ariaHasPopup,
+    'aria-hidden': ariaHidden,
+    'aria-live': ariaLive,
+    ...styleProps
+  } = props;
+  const classNameForHeadingSize = useHeadingStyle(size, variant);
+  const classNameForStyleProps = (0, _use_styled_system.default)({
+    fontFamily: 'default',
+    textColor: 'default',
+    ...styleProps
+  });
+  return /*#__PURE__*/React.createElement(Component, _extends({
+    ref: ref,
+    id: id,
+    className: (0, _emotion.cx)(classNameForHeadingSize, classNameForStyleProps, className),
+    style: style,
+    role: role,
+    "aria-label": ariaLabel,
+    "aria-labelledby": ariaLabelledBy,
+    "aria-describedby": ariaDescribedBy,
+    "aria-controls": ariaControls,
+    "aria-expanded": ariaExpanded,
+    "aria-haspopup": ariaHasPopup,
+    "aria-hidden": ariaHidden,
+    "aria-live": ariaLive
+  }, dataAttributes), children);
+};
+const ForwardedRefHeading = /*#__PURE__*/React.forwardRef(Heading);
+ForwardedRefHeading.displayName = 'Heading';
+var _default = exports.default = ForwardedRefHeading;

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

@@ -0,0 +1,109 @@
+"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 */ /** */
+
+/**
+ * Style props shared between the {@link Icon} and {@link FieldIcon} components. Accepts:
+ * * {@link FlexItemSetProps}
+ * * {@link PositionSetProps}
+ * * {@link MarginProps}
+ *
+ * @noInheritDoc
+ */
+
+const styleParser = (0, _core.compose)(_system.flexItemSet, _system.positionSet, _system.margin, _system.width, _system.height);
+
+/**
+ * Props shared between the {@link Icon} and {@link FieldIcon} components.
+ *
+ * @noInheritDoc
+ */
+// TODO (stephen): inherit shared props without inheriting style props
+
+/**
+ * Props for the {@link Icon} component. Also accepts:
+ * * {@link IconStyleProps}
+ */
+
+/**
+ * A vector icon from the Airtable icon set.
+ *
+ * [[ Story id="icon--example" title="Icon example" height="576px"]]
+ *
+ * @component
+ * @docsPath UI/components/Icon
+ */
+const Icon = (props, ref) => {
+  const {
+    name,
+    size = 16,
+    fillColor = 'currentColor',
+    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.
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    hasOnClick,
+    className,
+    style,
+    pathClassName,
+    pathStyle,
+    suppressWarning = false,
+    ...styleProps
+  } = props;
+  const classNameForStyleProps = (0, _use_styled_system.default)({
+    ...styleProps,
+    width: size,
+    height: size
+  }, styleParser);
+  const phosphorIconName = _icon_config.legacyIconNameToPhosphorIconName[name];
+  const pathData = phosphorIconName ? _icon_config.phosphorIconConfig[phosphorIconName] : null;
+  if (!pathData) {
+    return null;
+  }
+  if (_icon_config.deprecatedIconNameToReplacementName.has(name) && !suppressWarning) {
+    const alternative = _icon_config.deprecatedIconNameToReplacementName.get(name);
+    let alternativeText = '';
+    if (alternative) {
+      alternativeText = `Use <Icon name='${alternative}' .../> instead.`;
+    }
+    (0, _warning.default)(`'${name}' as an icon name is deprecated. ${alternativeText}`);
+  }
+  return /*#__PURE__*/_react.default.createElement("svg", {
+    ref: ref,
+    viewBox: "0 0 16 16"
+    // TODO (stephen): remove tooltip anchor props
+    ,
+    onMouseEnter: onMouseEnter,
+    onMouseLeave: onMouseLeave,
+    onClick: onClick,
+    className: (0, _emotion.cx)(classNameForStyleProps, className),
+    style: {
+      shapeRendering: 'geometricPrecision',
+      ...style
+    }
+  }, /*#__PURE__*/_react.default.createElement("path", {
+    fillRule: "evenodd",
+    className: pathClassName,
+    style: pathStyle,
+    fill: fillColor,
+    d: pathData
+  }));
+};
+const ForwardedRefIcon = /*#__PURE__*/_react.default.forwardRef(Icon);
+ForwardedRefIcon.displayName = 'Icon';
+var _default = exports.default = ForwardedRefIcon;

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

@@ -3,28 +3,22 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.phosphorIconConfig = exports.legacyIconNameToPhosphorIconName = exports.iconNamesArray = exports.iconNames = exports.iconNamePropType = exports.deprecatedIconNameToReplacementName = void 0;
-require("core-js/modules/es.array.iterator.js");
-require("core-js/modules/es.map.js");
-require("core-js/modules/es.object.to-string.js");
-require("core-js/modules/web.dom-collections.iterator.js");
+exports.phosphorIconConfig = exports.legacyIconNameToPhosphorIconName = exports.iconNamesArray = exports.iconNames = exports.deprecatedIconNameToReplacementName = void 0;
 var _private_utils = require("../../shared/private_utils");
-var _enum_prop_type_utils = require("./system/utils/enum_prop_type_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
-var 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'];
-var iconNames = exports.iconNames = (0, _private_utils.createEnum)(...iconNamesArray);
-var deprecatedIconNameToReplacementName = exports.deprecatedIconNameToReplacementName = new Map([['blocks', 'apps']]);
+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']]);
 /**
  * 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"]]
  */
 
-var iconNamePropType = exports.iconNamePropType = (0, _enum_prop_type_utils.createPropTypeFromEnum)(iconNames);
-var phosphorIconConfig = exports.phosphorIconConfig = {
+const phosphorIconConfig = exports.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',
@@ -263,7 +257,7 @@ var phosphorIconConfig = exports.phosphorIconConfig = {
 
 /** @hidden */
 
-var legacyIconNameToPhosphorIconName = exports.legacyIconNameToPhosphorIconName = {
+const legacyIconNameToPhosphorIconName = exports.legacyIconNameToPhosphorIconName = {
   aiAssistant: 'AiAssistant',
   apple: 'Apple',
   apps: 'ExtensionsFeature',

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

@@ -1,10 +1,5 @@
 "use strict";
 
-require("core-js/modules/es.array.iterator.js");
-require("core-js/modules/es.object.to-string.js");
-require("core-js/modules/es.weak-map.js");
-require("core-js/modules/web.dom-collections.iterator.js");
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
@@ -12,16 +7,17 @@ exports.__injectSdkIntoInitializeBlock = __injectSdkIntoInitializeBlock;
 exports.__resetHasBeenInitialized = __resetHasBeenInitialized;
 exports.initializeBlock = initializeBlock;
 var React = _interopRequireWildcard(require("react"));
-var _reactDom = _interopRequireDefault(require("react-dom"));
+var _client = require("react-dom/client");
 var _error_utils = require("../../shared/error_utils");
 var _airtable_interface = _interopRequireDefault(require("../../injected/airtable_interface"));
 var _airtable_interface2 = require("../types/airtable_interface");
 var _block_wrapper = _interopRequireDefault(require("./block_wrapper"));
-function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
+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: initializeBlock */ /** */
 
-var hasBeenInitialized = false;
+let hasBeenInitialized = false;
 
 /** */
 
@@ -52,11 +48,10 @@ var hasBeenInitialized = false;
  * @docsPath UI/utils/initializeBlock
  */
 function initializeBlock(getEntryElement) {
-  var _airtableInterface$sd;
-  var entryPoints = typeof getEntryElement === 'function' ? {
+  const entryPoints = typeof getEntryElement === 'function' ? {
     dashboard: getEntryElement
   } : getEntryElement;
-  var body = typeof document !== 'undefined' ? document.body : null;
+  const body = typeof document !== 'undefined' ? document.body : null;
   if (!body) {
     throw (0, _error_utils.spawnError)('initializeBlock should only be called from browser environments');
   }
@@ -64,11 +59,11 @@ function initializeBlock(getEntryElement) {
     throw (0, _error_utils.spawnError)('initializeBlock should only be called once');
   }
   hasBeenInitialized = true;
-  var airtableInterface = (0, _airtable_interface.default)();
-  var entryElement;
+  const airtableInterface = (0, _airtable_interface.default)();
+  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
-  var runContext = (_airtableInterface$sd = airtableInterface.sdkInitData.runContext) !== null && _airtableInterface$sd !== void 0 ? _airtableInterface$sd : {
+  const runContext = airtableInterface.sdkInitData.runContext ?? {
     type: _airtable_interface2.BlockRunContextType.DASHBOARD_APP
   };
   switch (runContext.type) {
@@ -91,8 +86,8 @@ function initializeBlock(getEntryElement) {
         if (typeof entryPoints.view !== 'function') {
           throw (0, _error_utils.spawnError)('initializeBlock must contain a view function that returns a React element');
         }
-        var table = sdk.base.getTableById(runContext.tableId);
-        var view = table.getViewById(runContext.viewId);
+        const table = sdk.base.getTableById(runContext.tableId);
+        const view = table.getViewById(runContext.viewId);
         entryElement = entryPoints.view({
           table,
           view
@@ -105,29 +100,15 @@ function initializeBlock(getEntryElement) {
   if (! /*#__PURE__*/React.isValidElement(entryElement)) {
     throw (0, _error_utils.spawnError)("The first argument to initializeBlock didn't return a valid React element");
   }
-  if (_reactDom.default.unstable_batchedUpdates) {
-    sdk.__setBatchedUpdatesFn(_reactDom.default.unstable_batchedUpdates);
-  }
-  var container = document.createElement('div');
+  const container = document.createElement('div');
   container.style.height = '100%';
   container.style.width = '100%';
   body.appendChild(container);
-
-  // Try to use createRoot API (React 18+)
-  try {
-    var _require = require('react-dom/client'),
-      createRoot = _require.createRoot;
-    createRoot(container).render( /*#__PURE__*/React.createElement(_block_wrapper.default, {
-      sdk: sdk
-    }, entryElement));
-  } catch (e) {
-    // Fallback to legacy render for React 16/17
-    _reactDom.default.render( /*#__PURE__*/React.createElement(_block_wrapper.default, {
-      sdk: sdk
-    }, entryElement), container);
-  }
+  (0, _client.createRoot)(container).render( /*#__PURE__*/React.createElement(_block_wrapper.default, {
+    sdk: sdk
+  }, entryElement));
 }
-var sdk;
+let sdk;
 
 // The application-level Sdk instance must be injected dynamically to avoid
 // circular dependencies at the time of module resolution.

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

@@ -0,0 +1,161 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.ValidInputType = exports.SupportedInputType = 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 _use_theme = _interopRequireDefault(require("./theme/use_theme"));
+var _use_styled_system = _interopRequireDefault(require("./use_styled_system"));
+var _use_form_field = _interopRequireDefault(require("./use_form_field"));
+var _system = require("./system");
+var _control_sizes = require("./control_sizes");
+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: Input */ /** */
+
+/** @internal */
+
+const InputVariant = (0, _private_utils.createEnum)('default');
+
+/** @internal */
+function useInputVariant() {
+  let variant = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : InputVariant.default;
+  const {
+    inputVariants
+  } = (0, _use_theme.default)();
+  return inputVariants[variant];
+}
+const ValidInputType = exports.ValidInputType = (0, _private_utils.createEnum)('date', 'datetime-local', 'email', 'month', 'number', 'password', 'search', 'tel', 'text', 'time', 'url', 'week');
+/** */
+
+/**
+ * Style props shared between the {@link Input} and {@link InputSynced} components. Accepts:
+ * * {@link FlexItemSetProps}
+ * * {@link MarginProps}
+ * * {@link MaxWidthProps}
+ * * {@link MinWidthProps}
+ * * {@link PositionSetProps}
+ * * {@link WidthProps}
+ *
+ * @noInheritDoc
+ */
+
+const styleParser = (0, _core.compose)(_system.maxWidth, _system.minWidth, _system.width, _system.flexItemSet, _system.positionSet, _system.margin);
+
+/**
+ * Props shared between the {@link Input} and {@link InputSynced} components.
+ *
+ * @noInheritDoc
+ */
+
+const SupportedInputType = exports.SupportedInputType = (0, _private_utils.createEnum)('date', 'datetime-local', 'email', 'month', 'number', 'password', 'search', 'tel', 'text', 'time', 'url', 'week');
+/**
+ * Supported types for the {@link Input} component. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#%3Cinput%3E_types) for more information.
+ */
+
+/**
+ * Props for the {@link Input} component. Also accepts:
+ * * {@link InputStyleProps}
+ *
+ * @docsPath UI/components/Input
+ */
+
+/**
+ * An input component. A wrapper around `<input>` that fits in with Airtable's user interface.
+ *
+ * [[ Story id="input--example" title="Input example" ]]
+ *
+ * @docsPath UI/components/Input
+ * @component
+ */
+const Input = (props, ref) => {
+  const {
+    size = _control_sizes.ControlSize.default,
+    type = SupportedInputType.text,
+    value,
+    placeholder,
+    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.
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    hasOnClick,
+    onChange,
+    onBlur,
+    onFocus,
+    style,
+    className,
+    disabled,
+    required,
+    spellCheck,
+    tabIndex,
+    id,
+    name,
+    autoFocus,
+    max,
+    maxLength,
+    min,
+    minLength,
+    step,
+    pattern,
+    readOnly,
+    autoComplete,
+    'aria-labelledby': ariaLabelledBy,
+    'aria-describedby': ariaDescribedByProp,
+    ...styleProps
+  } = props;
+  const formFieldContextValue = (0, _use_form_field.default)();
+  const controlId = formFieldContextValue ? formFieldContextValue.controlId : undefined;
+  const descriptionId = formFieldContextValue ? formFieldContextValue.descriptionId : undefined;
+  const ariaDescribedBy = [ariaDescribedByProp, descriptionId].filter(Boolean).join(' ') || undefined;
+  // There is only a single default variant.
+  const classNameForInputVariant = useInputVariant();
+  const classNameForInputSize = (0, _control_sizes.useInputSize)(size);
+  const classNameForStyleProps = (0, _use_styled_system.default)({
+    width: '100%',
+    ...styleProps
+  }, styleParser);
+  return /*#__PURE__*/React.createElement("input", {
+    ref: ref,
+    value: value,
+    type: type,
+    placeholder: placeholder,
+    disabled: disabled,
+    required: required,
+    spellCheck: spellCheck,
+    tabIndex: tabIndex,
+    id: id || controlId,
+    name: name,
+    autoFocus: autoFocus,
+    max: max,
+    maxLength: maxLength,
+    min: min,
+    minLength: minLength,
+    step: step,
+    pattern: pattern,
+    readOnly: readOnly,
+    autoComplete: autoComplete,
+    onChange: onChange,
+    onBlur: onBlur,
+    onFocus: onFocus
+    // TODO (stephen): remove tooltip anchor props
+    ,
+    onMouseEnter: onMouseEnter,
+    onMouseLeave: onMouseLeave,
+    onClick: onClick,
+    style: style,
+    className: (0, _emotion.cx)(classNameForInputSize, classNameForInputVariant, classNameForStyleProps, className),
+    "aria-labelledby": ariaLabelledBy,
+    "aria-describedby": ariaDescribedBy
+  });
+};
+const ForwardedRefInput = /*#__PURE__*/React.forwardRef(Input);
+ForwardedRefInput.displayName = 'Input';
+var _default = exports.default = ForwardedRefInput;