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

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

@@ -0,0 +1,129 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var React = _interopRequireWildcard(require("react"));
+var _with_hooks = _interopRequireDefault(require("../../shared/ui/with_hooks"));
+var _sdk_context = require("../../shared/ui/sdk_context");
+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: ViewportConstraint
+ * @docsPath UI/components/ViewportConstraint
+ */ /** */
+
+/** An object specifying a width and/or height for the block's viewport. */
+
+/**
+ * Props for the {@link ViewportConstraint} component.
+ *
+ * @docsPath UI/components/ViewportConstraint
+ */
+
+const didSizeChange = (prev, next) => (prev && prev.width) !== (next && next.width) || (prev && prev.height) !== (next && next.height);
+
+/**
+ * When mounted, this wrapper component applies size constraints to the {@link Viewport}.
+ * Like {@link addMinSize}, this will fullscreen the extension if necessary and possible when
+ * `minSize` is updated.
+ *
+ * @example
+ * ```js
+ * import {ViewportConstraint} from '@airtable/blocks/base/ui';
+ * <ViewportConstraint minSize={{width: 400}} />
+ * ```
+ *
+ * @example
+ * ```js
+ * import {ViewportConstraint} from '@airtable/blocks/base/ui';
+ * <ViewportConstraint maxFullScreenSize={{width: 600, height: 400}}>
+ *      <div>I need a max fullscreen size!</div>
+ * </ViewportConstraint>
+ * ```
+ * @docsPath UI/components/ViewportConstraint
+ * @component
+ */
+class ViewportConstraint extends React.Component {
+  /** @internal */
+  _removeMinSizeConstraintFn = null;
+  /** @internal */
+  _removeMaxFullscreenSizeConstrainFn = null;
+
+  /** @hidden */
+  componentDidMount() {
+    this._setMinSizeConstraint();
+    this._setMaxFullscreenSizeConstraint();
+  }
+
+  /** @hidden */
+  shouldComponentUpdate(nextProps) {
+    return this.props.children !== nextProps.children || didSizeChange(this.props.minSize, nextProps.minSize) || didSizeChange(this.props.maxFullscreenSize, nextProps.maxFullscreenSize);
+  }
+
+  /** @hidden */
+  componentDidUpdate(prevProps) {
+    if (didSizeChange(prevProps.minSize, this.props.minSize)) {
+      this._setMinSizeConstraint();
+    }
+    if (didSizeChange(prevProps.maxFullscreenSize, this.props.maxFullscreenSize)) {
+      this._setMaxFullscreenSizeConstraint();
+    }
+  }
+
+  /** @hidden */
+  componentWillUnmount() {
+    this._removeMinSizeConstraint();
+    this._removeMaxFullscreenSizeConstraint();
+  }
+
+  /** @internal */
+  _removeMinSizeConstraint() {
+    if (this._removeMinSizeConstraintFn) {
+      this._removeMinSizeConstraintFn();
+      this._removeMinSizeConstraintFn = null;
+    }
+  }
+
+  /** @internal */
+  _removeMaxFullscreenSizeConstraint() {
+    if (this._removeMaxFullscreenSizeConstrainFn) {
+      this._removeMaxFullscreenSizeConstrainFn();
+      this._removeMaxFullscreenSizeConstrainFn = null;
+    }
+  }
+
+  /** @internal */
+  _setMinSizeConstraint() {
+    this._removeMinSizeConstraint();
+    const {
+      minSize
+    } = this.props;
+    if (minSize) {
+      this._removeMinSizeConstraintFn = this.props.sdk.viewport.addMinSize(minSize);
+    }
+  }
+
+  /** @internal */
+  _setMaxFullscreenSizeConstraint() {
+    this._removeMaxFullscreenSizeConstraint();
+    const {
+      maxFullscreenSize
+    } = this.props;
+    if (maxFullscreenSize) {
+      this._removeMaxFullscreenSizeConstrainFn = this.props.sdk.viewport.addMaxFullscreenSize(maxFullscreenSize);
+    }
+  }
+
+  /** @hidden */
+  render() {
+    return /*#__PURE__*/React.createElement(React.Fragment, null, this.props.children);
+  }
+}
+var _default = exports.default = (0, _with_hooks.default)(ViewportConstraint, props => {
+  return {
+    sdk: (0, _sdk_context.useSdk)()
+  };
+});

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

@@ -0,0 +1,129 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = withStyledSystem;
+exports.splitStyleProps = splitStyleProps;
+var React = _interopRequireWildcard(require("react"));
+var _emotion = require("emotion");
+var _hoistNonReactStatics = _interopRequireDefault(require("hoist-non-react-statics"));
+var _private_utils = require("../../shared/private_utils");
+var _use_styled_system = _interopRequireDefault(require("./use_styled_system"));
+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); }
+/**
+ * @internal
+ * A higher-order component for working with the `useStyledSystem` hook in class-based components.
+ * It takes a React component and converts style props into a single className prop.
+ *
+ * Generate boilerplate for using this hook with our scaffolding tool: https://o80pm.csb.app/
+ *
+ * Returns The transformed React component.
+ *
+ * @param Component The React component you want to use with styled system.
+ * @param styleParser The style parser, constructed with `compose`.
+ * @example
+ * ```js
+ * import * as React from 'react';
+ * import {compose} from '@styled-system/core';
+ * import withStyledSystem from './with_styled_system';
+ * import {
+ *     flexContainerSet,
+ *     FlexContainerSetProps,
+ *     flexItemSet,
+ *     FlexItemSetProps,
+ *     margin,
+ *     MarginProps,
+ * } from './system';
+ *
+ * interface Props {
+ *     className?: string;
+ *     onClick: () => void;
+ *     children: React.ReactNode;
+ * };
+ *
+ * interface MyComponentStyleProps extends FlexContainerSetProps, FlexItemSetProps, MarginProps {}
+ *
+ * const styleParser = compose(
+ *     flexContainerSet,
+ *     flexItemSet,
+ *     margin,
+ * );
+ *
+ *
+ * class MyComponent extends React.Component<Props, void> {
+ *     static staticProp = 'STATIC';
+ *     render() {
+ *         const {className, onClick, children} = this.props;
+ *         return (
+ *             <div className={className} onClick={onClick}>
+ *                 {children}
+ *             </div>
+ *         );
+ *     }
+ * }
+ *
+ * export default withStyledSystem<Props, MyComponentStyleProps, MyComponent, { staticProp: string }>(
+ *     MyComponent,
+ *     styleParser,
+ *     {
+ *         // Optional default style props.
+ *         margin: 3
+ *     }
+ * );
+ * ```
+ */
+function withStyledSystem(Component, styleParser, defaultStyleProps) {
+  const WithStyledSystem = /*#__PURE__*/React.forwardRef((props, ref) => {
+    const {
+      styleProps,
+      nonStyleProps
+    } = splitStyleProps(props, styleParser.propNames, defaultStyleProps);
+    const classNameForStyleProps = (0, _use_styled_system.default)((0, _private_utils.cast)(styleProps), styleParser);
+    return /*#__PURE__*/React.createElement(Component, _extends({
+      ref: ref
+    }, nonStyleProps, {
+      className: (0, _emotion.cx)(classNameForStyleProps, nonStyleProps.className)
+    }));
+  });
+  const componentName = Component.displayName || Component.name || 'Component';
+  WithStyledSystem.displayName = `WithStyledSystem(${componentName})`;
+  (0, _hoistNonReactStatics.default)(WithStyledSystem, Component);
+  return WithStyledSystem;
+}
+
+/**
+ * @internal
+ * A helper method to split props into style props (for use with styled system) and
+ * non-style props (to be passed into the wrapped component).
+ *
+ * Returns A result object with two keys: `styleProps` and `nonStyleProps`, which contain the
+ * respective split props.
+ *
+ * @param props Props to be split into style and non-style props.
+ * @param stylePropNames The list of allowed style prop names.
+ * @param defaultStyleProps Default values for style props.
+ */
+function splitStyleProps(props) {
+  let stylePropNames = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : [];
+  let defaultStyleProps = arguments.length > 2 ? arguments[2] : undefined;
+  const stylePropNamesSet = new Set(stylePropNames);
+  const styleProps = {
+    ...defaultStyleProps
+  };
+  const nonStyleProps = {};
+  for (const propName of (0, _private_utils.keys)(props)) {
+    if (stylePropNamesSet.has(propName)) {
+      styleProps[propName] = props[propName];
+    } else {
+      nonStyleProps[propName] = props[propName];
+    }
+  }
+  return {
+    styleProps,
+    nonStyleProps
+  };
+}

package/dist/esm/base/undo_redo.js

@@ -0,0 +1,37 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _private_utils = require("../shared/private_utils");
+var _error_utils = require("../shared/error_utils");
+var _undo_redo = require("./types/undo_redo");
+/** @hidden */
+class UndoRedo {
+  /** @hidden */
+  modes = _undo_redo.UndoRedoModes;
+
+  /** @internal */
+
+  /** @internal */
+  _mode = _undo_redo.UndoRedoModes.NONE;
+
+  /** @hidden */
+  constructor(airtableInterface) {
+    this._airtableInterface = airtableInterface;
+  }
+  /** @hidden */
+  get mode() {
+    return this._mode;
+  }
+  /** @hidden */
+  set mode(mode) {
+    if (!(0, _private_utils.values)(_undo_redo.UndoRedoModes).includes(mode)) {
+      throw (0, _error_utils.spawnError)('Unexpected UndoRedo mode');
+    }
+    this._mode = mode;
+    this._airtableInterface.setUndoRedoMode(mode);
+  }
+}
+var _default = exports.default = UndoRedo;

package/dist/{cjs → esm}/base/unstable_testing_utils.js

@@ -1,156 +1,155 @@
 "use strict";
 
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 Object.defineProperty(exports, "AbstractMockAirtableInterface", {
   enumerable: true,
-  get: function get() {
+  get: function () {
     return _abstract_mock_airtable_interface.AbstractMockAirtableInterface;
   }
 });
 Object.defineProperty(exports, "AppInterface", {
   enumerable: true,
-  get: function get() {
+  get: function () {
     return _airtable_interface_core.AppInterface;
   }
 });
 Object.defineProperty(exports, "BaseData", {
   enumerable: true,
-  get: function get() {
+  get: function () {
     return _base.BaseData;
   }
 });
 Object.defineProperty(exports, "BlockRunContextType", {
   enumerable: true,
-  get: function get() {
+  get: function () {
     return _airtable_interface.BlockRunContextType;
   }
 });
 Object.defineProperty(exports, "CursorData", {
   enumerable: true,
-  get: function get() {
+  get: function () {
     return _cursor.CursorData;
   }
 });
 Object.defineProperty(exports, "FieldData", {
   enumerable: true,
-  get: function get() {
+  get: function () {
     return _field.FieldData;
   }
 });
 Object.defineProperty(exports, "FieldType", {
   enumerable: true,
-  get: function get() {
+  get: function () {
     return _field_core.FieldType;
   }
 });
 Object.defineProperty(exports, "FieldTypeProvider", {
   enumerable: true,
-  get: function get() {
+  get: function () {
     return _airtable_interface.FieldTypeProvider;
   }
 });
 Object.defineProperty(exports, "GlobalConfigArray", {
   enumerable: true,
-  get: function get() {
+  get: function () {
     return _global_config.GlobalConfigArray;
   }
 });
 Object.defineProperty(exports, "GlobalConfigData", {
   enumerable: true,
-  get: function get() {
+  get: function () {
     return _global_config.GlobalConfigData;
   }
 });
 Object.defineProperty(exports, "GlobalConfigHelpers", {
   enumerable: true,
-  get: function get() {
+  get: function () {
     return _airtable_interface_core.GlobalConfigHelpers;
   }
 });
 Object.defineProperty(exports, "GlobalConfigObject", {
   enumerable: true,
-  get: function get() {
+  get: function () {
     return _global_config.GlobalConfigObject;
   }
 });
 Object.defineProperty(exports, "GlobalConfigUpdate", {
   enumerable: true,
-  get: function get() {
+  get: function () {
     return _global_config.GlobalConfigUpdate;
   }
 });
 Object.defineProperty(exports, "IdGenerator", {
   enumerable: true,
-  get: function get() {
+  get: function () {
     return _airtable_interface.IdGenerator;
   }
 });
 Object.defineProperty(exports, "ModelChange", {
   enumerable: true,
-  get: function get() {
+  get: function () {
     return _base_core.ModelChange;
   }
 });
 Object.defineProperty(exports, "Mutation", {
   enumerable: true,
-  get: function get() {
+  get: function () {
     return _mutations.Mutation;
   }
 });
 Object.defineProperty(exports, "MutationTypes", {
   enumerable: true,
-  get: function get() {
+  get: function () {
     return _mutations.MutationTypes;
   }
 });
 Object.defineProperty(exports, "PartialViewData", {
   enumerable: true,
-  get: function get() {
+  get: function () {
     return _airtable_interface.PartialViewData;
   }
 });
 Object.defineProperty(exports, "RecordData", {
   enumerable: true,
-  get: function get() {
+  get: function () {
     return _record.RecordData;
   }
 });
 Object.defineProperty(exports, "RequestJson", {
   enumerable: true,
-  get: function get() {
+  get: function () {
     return _backend_fetch_types.RequestJson;
   }
 });
 Object.defineProperty(exports, "ResponseJson", {
   enumerable: true,
-  get: function get() {
+  get: function () {
     return _backend_fetch_types.ResponseJson;
   }
 });
 Object.defineProperty(exports, "Sdk", {
   enumerable: true,
-  get: function get() {
+  get: function () {
     return _sdk.default;
   }
 });
 Object.defineProperty(exports, "SdkInitData", {
   enumerable: true,
-  get: function get() {
+  get: function () {
     return _airtable_interface.SdkInitData;
   }
 });
 Object.defineProperty(exports, "ViewType", {
   enumerable: true,
-  get: function get() {
+  get: function () {
     return _view.ViewType;
   }
 });
 Object.defineProperty(exports, "ViewportSizeConstraint", {
   enumerable: true,
-  get: function get() {
+  get: function () {
     return _viewport.ViewportSizeConstraint;
   }
 });
@@ -168,4 +167,5 @@ var _viewport = require("./types/viewport");
 var _global_config = require("../shared/types/global_config");
 var _backend_fetch_types = require("./types/backend_fetch_types");
 var _sdk = _interopRequireDefault(require("./sdk"));
-var _abstract_mock_airtable_interface = require("../testing/abstract_mock_airtable_interface");
+var _abstract_mock_airtable_interface = require("../testing/base/abstract_mock_airtable_interface");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }