Airtable Blocks SDK

If the default Webpack bundler does not meet your needs, you can replace it entirely by providing a custom CommonJS module.

Steps to implement:

1. Create a JavaScript file (e.g., index.js) that exports a function returning an instance of a Bundler class.
2. The Bundler class must implement the following asynchronous methods:
   • bundleAsync(options: ReleaseBundleOptions): Promise<void>: For release builds.
   • findDependenciesAsync(options: SubmitFindDependenciesOptions): Promise<{files: Array<string>}>: Used during block submit.
   • startDevServerAsync(options: RunDevServerOptions & RunDevServerMethods): Promise<void>: For development builds.
   • teardownAsync(): Promise<void>: For graceful shutdown.
3. Update your block.json to point to your bundler entry file:

{
    "bundler": {
        "module": "./bundler/index.js"
    }
}

Note: Custom bundlers must produce output that conforms to the Airtable platform's expected format, calling convention, and file structure.

Automated testing for Airtable Extensions (which must be written using React) follows a specific lifecycle. Every test file must import TestDriver from @airtable/blocks-testing to ensure proper instrumentation.

Test Lifecycle Pattern:

1. Initialize TestDriver: Create an instance by passing in your Test fixture data.
2. Render the Extension: Wrap your Extension component inside the testDriver.Container component using a testing library like @testing-library/react.
3. Simulate Input: Provide input via simulated user interactions (e.g., using @testing-library/user-event) or simulated backend behaviors (e.g., using the TestDriver API or the Blocks SDK).
4. Verify Results: Assert that the UI updated correctly (using @testing-library/react) or that specific internal behaviors occurred (using testDriver.watch).

import { TestDriver } from '@airtable/blocks-testing';
import { render, screen } from '@testing-library/react';
import userEvent from '@testing-library/user-event';

// 1. Create TestDriver with fixture data
const testDriver = new TestDriver({
    /* fixture data here */
});

// 2. Render Extension inside TestDriver.Container
render(
    <testDriver.Container>
        <MyExtension />
    </testDriver.Container,
);

// 3. Provide input (User Interaction)
const input = screen.getByLabelText('Cheeses');
const option = screen.getByText('Gruyere');
await userEvent.selectOptions(input, [option]);

// OR Provide input (Simulated Backend Behavior)
await testDriver.base.createTableAsync('a new table', [
    {name: 'address', type: FieldType.EMAIL},
]);

// 4. Verify response (UI check)
const checkbox = screen.getByRole('checkbox');
expect(checkbox.checked).toBe(true);

// OR Verify response (Internal behavior check)
const recordIds = [];
testDriver.watch('expandRecord', ({recordId}) => recordIds.push(recordId));
// ... interaction ...
expect(recordIds).toEqual(['reca']);

To customize the webpack configuration used by @airtable/blocks-cli, follow these two steps:

1. Create a bundler.js file in your project root. This file must export a default function that calls createBundler from @airtable/blocks-webpack-bundler, passing a configuration function. This configuration function receives the baseConfig and allows you to modify it.

2. Update block.json to point to your custom bundler module by adding a bundler field with a module key.

// bundler.js
const createBundler = require('@airtable/blocks-webpack-bundler').default;

function createConfig(baseConfig) {
    // Add any desired customizations here
    return baseConfig;
}

exports.default = () => {
    return createBundler(createConfig);
};

{
    "version": "1.0",
    "frontendEntry": "./frontend/index.js",
    "bundler": {
        "module": "./bundler.js"
    }
}

The Popover component allows you to control where the floating content appears relative to its anchor element and how it behaves when it approaches the edge of the screen.

Placement

You can specify horizontal (placementX) and vertical (placementY) positions using PopoverPlacements.

Horizontal options (PopoverPlacementX):

• PopoverPlacements.LEFT
• PopoverPlacements.CENTER (Default)
• PopoverPlacements.RIGHT (Default)

Vertical options (PopoverPlacementY):

• PopoverPlacements.TOP
• PopoverPlacements.CENTER (Default)
• PopoverPlacements.BOTTOM (Default)

You can also use placementOffsetX and placementOffsetY to provide pixel offsets from these positions.

Viewport Fitting

Use fitInWindowMode to dictate behavior when the popover would otherwise be offscreen:

• FitInWindowModes.NONE: Allows the popover to be placed offscreen.
• FitInWindowModes.FLIP: If the placement would be offscreen, the component attempts to flip the placement to the opposite side.
• FitInWindowModes.NUDGE: If the placement would be offscreen, the component nudges the popover just enough to keep it within the viewport.