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

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

@@ -0,0 +1,41 @@
+import * as React from 'react';
+import { SdkContext } from '../../shared/ui/sdk_context';
+
+/**
+ * Props for the {@link BaseProvider} component.
+ *
+ * @docsPath UI/components/BaseProvider
+ */
+
+/**
+ * A React Provider which allows Components to be rendered outside of an App's
+ * React tree.
+ *
+ * @example
+ * ```js
+ * import React from 'react';
+ * import ReactDOM from 'react-dom';
+ * import {BaseProvider} from '@airtable/blocks/base/ui';
+ *
+ * function getHtmlStringForRecordCard(base, record) {
+ *     return ReactDOM.renderToStaticMarkup(
+ *         <BaseProvider value={base}>
+ *             <RecordCard record={record} />
+ *         </BaseProvider>
+ *     );
+ * }
+ * ```
+ * @docsPath UI/components/BaseProvider
+ * @component
+ */
+function BaseProvider(props) {
+  const {
+    value,
+    children
+  } = props;
+  const sdk = value.__sdk;
+  return /*#__PURE__*/React.createElement(SdkContext.Provider, {
+    value: sdk
+  }, children);
+}
+export default BaseProvider;

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

@@ -1,13 +1,7 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.baymax = baymax;
-var _emotion = require("emotion");
-var _private_utils = require("../../shared/private_utils");
-var _error_utils = require("../../shared/error_utils");
-const bounceIn = (0, _emotion.keyframes)`
+import { css, keyframes } from 'emotion';
+import { has } from '../../shared/private_utils';
+import { spawnError } from '../../shared/error_utils';
+const bounceIn = keyframes`
     from, 50%, to {
         -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
         animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
@@ -27,7 +21,7 @@ const bounceIn = (0, _emotion.keyframes)`
         transform: scale3d(1, 1, 1);
     }
 `;
-const spinScale = (0, _emotion.keyframes)`
+const spinScale = keyframes`
     0% {
         transform: rotate(0) scale(1);
     }
@@ -41,65 +35,65 @@ const spinScale = (0, _emotion.keyframes)`
 
 // TODO (stephen): import values from theme object?
 const emotionClassNameByBaymaxClassName = {
-  absolute: (0, _emotion.css)`
+  absolute: css`
         position: absolute;
     `,
-  'align-top': (0, _emotion.css)`
+  'align-top': css`
         vertical-align: top;
     `,
-  'all-0': (0, _emotion.css)`
+  'all-0': css`
         top: 0;
         left: 0;
         right: 0;
         bottom: 0;
     `,
-  animate: (0, _emotion.css)`
+  animate: css`
         transition: 0.085s all ease-in;
     `,
-  'animate-bounce-in': (0, _emotion.css)`
+  'animate-bounce-in': css`
         animation-name: ${bounceIn};
         animation-duration: 240ms;
     `,
-  'animate-infinite': (0, _emotion.css)`
+  'animate-infinite': css`
         animation-iteration-count: infinite;
     `,
-  'animate-spin-scale': (0, _emotion.css)`
+  'animate-spin-scale': css`
         animation-name: ${spinScale};
         animation-duration: 1800ms;
         animation-timing-function: cubic-bezier(0.785, 0.135, 0.15, 0.86);
     `,
-  appFontColorLight: (0, _emotion.css)`
+  appFontColorLight: css`
         color: hsl(0, 0%, 33%);
     `,
-  'background-center': (0, _emotion.css)`
+  'background-center': css`
         background-position: center center;
     `,
-  'background-cover': (0, _emotion.css)`
+  'background-cover': css`
         background-size: cover;
     `,
-  'background-transparent': (0, _emotion.css)`
+  'background-transparent': css`
         background-color: transparent;
     `,
-  big: (0, _emotion.css)`
+  big: css`
         font-size: 0.9rem;
     `,
-  block: (0, _emotion.css)`
+  block: css`
         display: block;
     `,
-  blue: (0, _emotion.css)`
+  blue: css`
         background-color: rgb(45, 127, 249);
     `,
-  'border-box': (0, _emotion.css)`
+  'border-box': css`
         box-sizing: border-box;
     `,
-  'bottom-0': (0, _emotion.css)`
+  'bottom-0': css`
         bottom: 0;
     `,
-  caps: (0, _emotion.css)`
+  caps: css`
         text-transform: uppercase;
         letter-spacing: 0.1em;
     `,
-  cardBoxShadow: (0, _emotion.css)`
+  cardBoxShadow: css`
         box-shadow: 0 0 0 2px hsla(0, 0%, 0%, 0.1);
         transition-property: box-shadow;
         -webkit-transition-property: box-shadow;
@@ -114,47 +108,47 @@ const emotionClassNameByBaymaxClassName = {
             box-shadow: 0 0 0 2px hsla(0, 0%, 0%, 0.25);
         }
     `,
-  center: (0, _emotion.css)`
+  center: css`
         text-align: center;
     `,
-  circle: (0, _emotion.css)`
+  circle: css`
         border-radius: 50%;
     `,
-  dark: (0, _emotion.css)`
+  dark: css`
         background-color: hsl(0, 0%, 20%);
     `,
-  darken1: (0, _emotion.css)`
+  darken1: css`
         background-color: hsla(0, 0%, 0%, 0.05);
     `,
-  'darken1-focus': (0, _emotion.css)`
+  'darken1-focus': css`
         &:focus {
             background-color: hsla(0, 0%, 0%, 0.05);
         }
     `,
-  'darken1-hover': (0, _emotion.css)`
+  'darken1-hover': css`
         &:hover {
             background-color: hsla(0, 0%, 0%, 0.05);
         }
     `,
-  darken2: (0, _emotion.css)`
+  darken2: css`
         background-color: hsla(0, 0%, 0%, 0.1);
     `,
-  darken3: (0, _emotion.css)`
+  darken3: css`
         background-color: hsla(0, 0%, 0%, 0.25);
     `,
-  darken4: (0, _emotion.css)`
+  darken4: css`
         background-color: hsla(0, 0%, 0%, 0.5);
     `,
-  fixed: (0, _emotion.css)`
+  fixed: css`
         position: fixed;
     `,
-  flex: (0, _emotion.css)`
+  flex: css`
         display: -webkit-box;
         display: -webkit-flex;
         display: -ms-flexbox;
         display: flex;
     `,
-  'flex-auto': (0, _emotion.css)`
+  'flex-auto': css`
         -webkit-box-flex: 1;
         -webkit-flex: 1 1 auto;
         -ms-flex: 1 1 auto;
@@ -162,79 +156,79 @@ const emotionClassNameByBaymaxClassName = {
         min-width: 0;
         min-height: 0;
     `,
-  'flex-inline': (0, _emotion.css)`
+  'flex-inline': css`
         display: -webkit-inline-flex;
         display: -ms-inline-flexbox;
         display: inline-flex;
     `,
-  'flex-none': (0, _emotion.css)`
+  'flex-none': css`
         -webkit-box-flex: 0;
         -webkit-flex: none;
         -ms-flex: none;
         flex: none;
     `,
-  'flex-reverse': (0, _emotion.css)`
+  'flex-reverse': css`
         -webkit-flex-direction: row-reverse;
         flex-direction: row-reverse;
     `,
-  'flex-wrap': (0, _emotion.css)`
+  'flex-wrap': css`
         -webkit-flex-wrap: wrap;
         -ms-flex-wrap: wrap;
         flex-wrap: wrap;
     `,
-  focusable: (0, _emotion.css)`
+  focusable: css`
         &:focus {
             outline: 0;
             box-shadow: inset 0 0 0 2px rgba(0, 0, 0, 0.1);
         }
     `,
-  gray: (0, _emotion.css)`
+  gray: css`
         background-color: rgb(102, 102, 102);
     `,
-  grayLight2: (0, _emotion.css)`
+  grayLight2: css`
         background-color: rgb(238, 238, 238);
     `,
-  green: (0, _emotion.css)`
+  green: css`
         background-color: rgb(32, 201, 51);
     `,
-  'height-full': (0, _emotion.css)`
+  'height-full': css`
         height: 100%;
     `,
-  inline: (0, _emotion.css)`
+  inline: css`
         display: inline;
     `,
-  'inline-block': (0, _emotion.css)`
+  'inline-block': css`
         display: inline-block;
     `,
-  'items-center': (0, _emotion.css)`
+  'items-center': css`
         -webkit-box-align: center;
         -webkit-align-items: center;
         -ms-flex-align: center;
         -ms-grid-row-align: center;
         align-items: center;
     `,
-  'justify-center': (0, _emotion.css)`
+  'justify-center': css`
         -webkit-box-pack: center;
         -webkit-justify-content: center;
         -ms-flex-pack: center;
         justify-content: center;
     `,
-  'justify-end': (0, _emotion.css)`
+  'justify-end': css`
         -webkit-box-pack: end;
         -webkit-justify-content: flex-end;
         -ms-flex-pack: end;
         justify-content: flex-end;
     `,
-  'justify-start': (0, _emotion.css)`
+  'justify-start': css`
         -webkit-box-pack: start;
         -webkit-justify-content: flex-start;
         -ms-flex-pack: start;
         justify-content: flex-start;
     `,
-  'left-0': (0, _emotion.css)`
+  'left-0': css`
         left: 0;
     `,
-  'light-scrollbar': (0, _emotion.css)`
+  'light-scrollbar': css`
         &::-webkit-scrollbar {
             width: 12px;
             height: 12px;
@@ -260,20 +254,20 @@ const emotionClassNameByBaymaxClassName = {
             background-color: hsla(0, 0%, 0%, 0.4);
         }
     `,
-  'line-height-4': (0, _emotion.css)`
+  'line-height-4': css`
         line-height: 1.5;
     `,
-  'link-quiet': (0, _emotion.css)`
+  'link-quiet': css`
         &:hover {
             opacity: 0.85;
         }
     `,
-  'link-unquiet': (0, _emotion.css)`
+  'link-unquiet': css`
         &:hover {
             opacity: 1;
         }
     `,
-  'link-unquiet-focusable': (0, _emotion.css)`
+  'link-unquiet-focusable': css`
         &:hover {
             opacity: 1;
         }
@@ -281,116 +275,116 @@ const emotionClassNameByBaymaxClassName = {
             opacity: 1;
         }
     `,
-  m0: (0, _emotion.css)`
+  m0: css`
         margin: 0;
     `,
-  m2: (0, _emotion.css)`
+  m2: css`
         margin: 1rem;
     `,
-  mb1: (0, _emotion.css)`
+  mb1: css`
         margin-bottom: 0.5rem;
     `,
-  ml1: (0, _emotion.css)`
+  ml1: css`
         margin-left: 0.5rem;
     `,
-  'mr-half': (0, _emotion.css)`
+  'mr-half': css`
         margin-right: 0.25rem;
     `,
-  mr1: (0, _emotion.css)`
+  mr1: css`
         margin-right: 0.5rem;
     `,
-  mt0: (0, _emotion.css)`
+  mt0: css`
         margin-top: 0;
     `,
-  mt1: (0, _emotion.css)`
+  mt1: css`
         margin-top: 0.5rem;
     `,
-  mt2: (0, _emotion.css)`
+  mt2: css`
         margin-top: 1rem;
     `,
-  'no-outline': (0, _emotion.css)`
+  'no-outline': css`
         outline: 0;
     `,
-  'no-user-select': (0, _emotion.css)`
+  'no-user-select': css`
         user-select: none;
         -webkit-user-select: none;
     `,
-  noevents: (0, _emotion.css)`
+  noevents: css`
         pointer-events: none;
     `,
-  normal: (0, _emotion.css)`
+  normal: css`
         font-size: 0.8rem;
     `,
-  nowrap: (0, _emotion.css)`
+  nowrap: css`
         white-space: nowrap;
     `,
-  'overflow-auto': (0, _emotion.css)`
+  'overflow-auto': css`
         overflow: auto;
     `,
-  'overflow-hidden': (0, _emotion.css)`
+  'overflow-hidden': css`
         overflow: hidden;
     `,
-  'p-half': (0, _emotion.css)`
+  'p-half': css`
         padding: 0.25rem;
     `,
-  p1: (0, _emotion.css)`
+  p1: css`
         padding: 0.5rem;
     `,
-  p2: (0, _emotion.css)`
+  p2: css`
         padding: 1rem;
     `,
-  pill: (0, _emotion.css)`
+  pill: css`
         border-radius: 9999px;
     `,
-  pointer: (0, _emotion.css)`
+  pointer: css`
         cursor: pointer;
     `,
-  pr1: (0, _emotion.css)`
+  pr1: css`
         padding-right: 0.5rem;
     `,
-  'print-color-exact': (0, _emotion.css)`
+  'print-color-exact': css`
         -webkit-print-color-adjust: exact;
     `,
-  px1: (0, _emotion.css)`
+  px1: css`
         padding-left: 0.5rem;
         padding-right: 0.5rem;
     `,
-  quiet: (0, _emotion.css)`
+  quiet: css`
         opacity: 0.75;
     `,
-  quieter: (0, _emotion.css)`
+  quieter: css`
         opacity: 0.5;
     `,
-  red: (0, _emotion.css)`
+  red: css`
         background-color: rgb(248, 43, 96);
     `,
-  relative: (0, _emotion.css)`
+  relative: css`
         position: relative;
     `,
-  'right-0': (0, _emotion.css)`
+  'right-0': css`
         right: 0;
     `,
-  rounded: (0, _emotion.css)`
+  rounded: css`
         border-radius: 3px;
     `,
-  'rounded-big': (0, _emotion.css)`
+  'rounded-big': css`
         border-radius: 6px;
     `,
-  'self-end': (0, _emotion.css)`
+  'self-end': css`
         -webkit-align-self: flex-end;
         -ms-flex-item-align: end;
         align-self: flex-end;
     `,
-  small: (0, _emotion.css)`
+  small: css`
         font-size: 11px;
     `,
-  stroked1: (0, _emotion.css)`
+  stroked1: css`
         box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.1);
     `,
-  strong: (0, _emotion.css)`
+  strong: css`
         font-weight: 500;
     `,
-  'styled-input': (0, _emotion.css)`
+  'styled-input': css`
         -webkit-appearance: none;
         -moz-appearance: none;
         appearance: none;
@@ -405,44 +399,44 @@ const emotionClassNameByBaymaxClassName = {
             border-color: hsla(0, 0%, 0%, 0.25);
         }
     `,
-  'text-blue': (0, _emotion.css)`
+  'text-blue': css`
         color: rgb(45, 127, 249);
         fill: rgb(45, 127, 249);
     `,
-  'text-blue-focus': (0, _emotion.css)`
+  'text-blue-focus': css`
         &:focus {
             color: rgb(45, 127, 249);
             fill: rgb(45, 127, 249);
         }
     `,
-  'text-dark': (0, _emotion.css)`
+  'text-dark': css`
         color: hsl(0, 0%, 20%);
         fill: hsl(0, 0%, 20%);
     `,
-  'text-white': (0, _emotion.css)`
+  'text-white': css`
         color: hsl(0, 0%, 100%);
         fill: hsl(0, 0%, 100%);
     `,
-  'top-0': (0, _emotion.css)`
+  'top-0': css`
         top: 0;
     `,
-  truncate: (0, _emotion.css)`
+  truncate: css`
         max-width: 100%;
         overflow: hidden;
         text-overflow: ellipsis;
         white-space: nowrap;
     `,
-  understroke: (0, _emotion.css)`
+  understroke: css`
         padding-bottom: 0.14rem;
         border-bottom: 2px solid hsla(0, 0%, 0%, 0.1);
     `,
-  white: (0, _emotion.css)`
+  white: css`
         background-color: hsl(0, 0%, 100%);
     `,
-  'width-full': (0, _emotion.css)`
+  'width-full': css`
         width: 100%;
     `,
-  yellow: (0, _emotion.css)`
+  yellow: css`
         background-color: rgb(252, 180, 0);
     `
 };
@@ -450,12 +444,12 @@ const emotionClassNameByBaymaxClassName = {
 /**
  * @internal
  */
-function baymax(baymaxClassNames) {
+export function baymax(baymaxClassNames) {
   return baymaxClassNames.split(/\s+/).filter(Boolean).map(baymaxClassName => {
-    if ((0, _private_utils.has)(emotionClassNameByBaymaxClassName, baymaxClassName)) {
+    if (has(emotionClassNameByBaymaxClassName, baymaxClassName)) {
       return emotionClassNameByBaymaxClassName[baymaxClassName];
     } else {
-      throw (0, _error_utils.spawnError)('Baymax class not found: %s. If required, add the definition to baymax_utils.js.`', baymaxClassName);
+      throw spawnError('Baymax class not found: %s. If required, add the definition to baymax_utils.js.`', baymaxClassName);
     }
   }).join(' ');
 }

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

@@ -1,23 +1,13 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var React = _interopRequireWildcard(require("react"));
-var _error_utils = require("../../shared/error_utils");
-var _with_hooks = _interopRequireDefault(require("../../shared/ui/with_hooks"));
-var _use_watchable = _interopRequireDefault(require("../../shared/ui/use_watchable"));
-var _sdk_context = require("../../shared/ui/sdk_context");
-var _baymax_utils = require("./baymax_utils");
-var _modal = _interopRequireDefault(require("./modal"));
-var _loader = _interopRequireDefault(require("./loader"));
-var _ui = require("./ui");
-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 */ /** */
-
+import * as React from 'react';
+import { invariant } from '../../shared/error_utils';
+import withHooks from '../../shared/ui/with_hooks';
+import useWatchable from '../../shared/ui/use_watchable';
+import { SdkContext } from '../../shared/ui/sdk_context';
+import { baymax } from './baymax_utils';
+import Modal from './modal';
+import Loader from './loader';
+import { globalAlert } from './ui';
 class BlockWrapper extends React.Component {
   /** @internal */
   _minSizeBeforeRender = null;
@@ -32,7 +22,7 @@ class BlockWrapper extends React.Component {
     // would not update.
     // TODO(kasra): maybe change createDataContainer to handle this case
     // without having to special case it.
-    _ui.globalAlert.watch('__alertInfo', () => this.forceUpdate());
+    globalAlert.watch('__alertInfo', () => this.forceUpdate());
   }
   /** @hidden */
   UNSAFE_componentWillMount() {
@@ -62,7 +52,7 @@ class BlockWrapper extends React.Component {
   /** @internal */
   _checkMinSizeConstraintUnchangedAfterRender() {
     const prevMinSize = this._minSizeBeforeRender;
-    (0, _error_utils.invariant)(prevMinSize, 'prevMinSize must be set');
+    invariant(prevMinSize, 'prevMinSize must be set');
     const currentMinSize = this.props.sdk.viewport.minSize;
     if (currentMinSize.width !== prevMinSize.width || currentMinSize.height !== prevMinSize.height) {
       this.forceUpdate();
@@ -73,12 +63,12 @@ class BlockWrapper extends React.Component {
     const {
       viewport
     } = this.props.sdk;
-    const globalAlertInfo = _ui.globalAlert.__alertInfo;
+    const globalAlertInfo = globalAlert.__alertInfo;
     if (globalAlertInfo) {
-      return /*#__PURE__*/React.createElement(_sdk_context.SdkContext.Provider, {
+      return /*#__PURE__*/React.createElement(SdkContext.Provider, {
         value: this.props.sdk
-      }, /*#__PURE__*/React.createElement(_modal.default, {
-        className: (0, _baymax_utils.baymax)('absolute all-0 flex items-center justify-center p2'),
+      }, /*#__PURE__*/React.createElement(Modal, {
+        className: baymax('absolute all-0 flex items-center justify-center p2'),
         style: {
           animation: 'none',
           maxWidth: undefined,
@@ -88,31 +78,31 @@ class BlockWrapper extends React.Component {
         }
       }, globalAlertInfo.content));
     }
-    return /*#__PURE__*/React.createElement(_sdk_context.SdkContext.Provider, {
+    return /*#__PURE__*/React.createElement(SdkContext.Provider, {
       value: this.props.sdk
     }, /*#__PURE__*/React.createElement(React.Suspense, {
       fallback: /*#__PURE__*/React.createElement("div", {
-        className: (0, _baymax_utils.baymax)('absolute all-0 flex items-center justify-center')
-      }, /*#__PURE__*/React.createElement(_loader.default, null))
+        className: baymax('absolute all-0 flex items-center justify-center')
+      }, /*#__PURE__*/React.createElement(Loader, null))
     }, /*#__PURE__*/React.createElement("div", {
-      className: viewport.isSmallerThanMinSize ? (0, _baymax_utils.baymax)('absolute all-0 overflow-hidden') : ''
+      className: viewport.isSmallerThanMinSize ? baymax('absolute all-0 overflow-hidden') : ''
     }, this.props.children)), viewport.isSmallerThanMinSize && /*#__PURE__*/React.createElement("div", {
-      className: (0, _baymax_utils.baymax)('absolute all-0 flex items-center justify-center p2 white'),
+      className: baymax('absolute all-0 flex items-center justify-center p2 white'),
       style: {
         zIndex: 2147483647 // largest 32-bit signed integer (maximum z-index)
       }
     }, /*#__PURE__*/React.createElement("span", {
-      className: (0, _baymax_utils.baymax)('center line-height-4 quiet strong')
+      className: baymax('center line-height-4 quiet strong')
     }, /*#__PURE__*/React.createElement("span", null, "Please make this extension bigger or "), /*#__PURE__*/React.createElement("span", {
-      className: (0, _baymax_utils.baymax)('pointer understroke link-unquiet'),
+      className: baymax('pointer understroke link-unquiet'),
       onClick: () => viewport.enterFullscreenIfPossible()
     }, "fullscreen"))));
   }
 }
-var _default = exports.default = (0, _with_hooks.default)(BlockWrapper, _ref => {
+export default withHooks(BlockWrapper, _ref => {
   let {
     sdk
   } = _ref;
-  (0, _use_watchable.default)(sdk.viewport, ['size', 'minSize']);
+  useWatchable(sdk.viewport, ['size', 'minSize']);
   return {};
 });