@airtable/blocks 0.0.0-experimental-3e47d4d04-20250909 → 0.0.0-experimental-446b49015-20251008

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

@@ -1,292 +0,0 @@
-/** @module @airtable/blocks/ui: RecordCardList */ /** */
-import * as React from 'react';
-import { FixedSizeList } from 'react-window';
-import { compose } from '@styled-system/core';
-import { invariant, spawnError } from '../../shared/error_utils';
-import Record from '../models/record';
-import Box from './box';
-import createDetectElementResize from './create_detect_element_resize';
-import withStyledSystem from './with_styled_system';
-import { dimensionsSet, flexItemSet, positionSet, margin } from './system';
-import RecordCard from './record_card';
-const RECORD_CARD_ROW_HEIGHT = 80;
-const RECORD_CARD_SPACING = 10;
-
-/** @internal */
-
-/** @internal */
-
-/**
- * Item renderer component for react-window FixedSizeList. Responsible for rendering each
- * individual record card item, identified by the index prop.
- *
- * @param props
- * @internal
- */
-function RecordCardItemRenderer(props) {
-  const {
-    records,
-    fields,
-    view,
-    width,
-    attachmentCoverField,
-    onClick,
-    onMouseEnter,
-    onMouseLeave
-  } = props.data;
-  const {
-    index: itemIndex,
-    style,
-    className
-  } = props;
-  const record = records[itemIndex];
-  // Ensure that expandRecordOptions.records only contains Records, not RecordDefs. RecordCardList
-  // can be given either Records or RecordDefs, but the `opts` argument in `expandRecord` only
-  // accepts an array of Records.
-  const filteredRecords = [];
-  for (const currentRecord of records) {
-    if (currentRecord instanceof Record) {
-      filteredRecords.push(currentRecord);
-    }
-  }
-  if (filteredRecords.length !== records.length && filteredRecords.length !== 0) {
-    throw spawnError("RecordCardList's props.records should not contain a mix of Record and RecordDef");
-  }
-
-  // RecordCard handles null and undefined differently for `onClick`. Treat other
-  // falsey values (e.g. "", false) like null.
-  let _onClick;
-  if (onClick) {
-    _onClick = () => onClick(record, itemIndex);
-  } else if (onClick === undefined) {
-    _onClick = undefined;
-  } else {
-    _onClick = null;
-  }
-  return /*#__PURE__*/React.createElement(RecordCard, {
-    record: record,
-    fields: fields,
-    view: view,
-    attachmentCoverField: attachmentCoverField,
-    onClick: _onClick,
-    expandRecordOptions: filteredRecords.length > 0 ? {
-      records: filteredRecords
-    } : null,
-    onMouseEnter: onMouseEnter ? () => onMouseEnter(record, itemIndex) : undefined,
-    onMouseLeave: onMouseLeave ? () => onMouseLeave(record, itemIndex) : undefined,
-    width: width,
-    height: RECORD_CARD_ROW_HEIGHT,
-    className: className
-    // Adjustments to top and left made to properly position the cards in the list. FixedSizeList doesn't
-    // differentiate between content & gutter for each "item" it renders. See https://github.com/bvaughn/react-window#can-i-add-gutter-or-padding-between-items
-    ,
-    style: {
-      ...style,
-      left: Number(style.left) + RECORD_CARD_SPACING,
-      top: Number(style.top) + RECORD_CARD_SPACING
-    }
-  });
-}
-
-/**
- * Utility function to measure scrollbar size.
- * Used to correctly calculate the width for record cards in the container.
- *
- * @internal
- */
-function getScrollbarWidth() {
-  const scrollDiv = document.createElement('div');
-  scrollDiv.style.position = 'absolute';
-  scrollDiv.style.top = '-9999px';
-  scrollDiv.style.width = '50px';
-  scrollDiv.style.height = '50px';
-  scrollDiv.style.overflow = 'scroll';
-  const body = document.body;
-  invariant(body, 'no document body to measure scrollbar');
-  body.appendChild(scrollDiv);
-  const scrollbarWidth = scrollDiv.offsetWidth - scrollDiv.clientWidth;
-  body.removeChild(scrollDiv);
-  return scrollbarWidth;
-}
-
-/**
- * @internal
- */
-
-/**
- * Wrapper component for RecordCardList's window (passed to FixedSizeList).
- *
- * This is used to force FixedSizeList (`react-window`) to include padding at both top and bottom
- * of the record card list. The FixedSizeList accounts for card padding on every card (baked into
- * `itemSize`), but this doesn't account for the 1 extra padding required beneath the last card.
- * (ie, if we have 10 cards, the height needs to be (10 * card_height) + (11 * card_padding)).
- *
- * @internal
- */
-const innerRecordCardListWindow = /*#__PURE__*/React.forwardRef((props, ref) => {
-  const {
-    style,
-    children
-  } = props;
-  return /*#__PURE__*/React.createElement("div", {
-    ref: ref
-    // Height adjustment required to account for the spacing between the last item and the bottom of the list container.
-    // See https://github.com/bvaughn/react-window#can-i-add-padding-to-the-top-and-bottom-of-a-list
-    ,
-    style: {
-      ...style,
-      height: Number(style.height) + RECORD_CARD_SPACING
-    }
-  }, children);
-});
-
-/**
- * Scroll event for {@link RecordCardList}.
- */
-
-/**
- * Props for the {@link RecordCardList} component. Also accepts:
- * * {@link RecordCardListStyleProps}
- *
- * @docsPath UI/components/RecordCardList
- */
-// This doesn't actually extend RecordCardListStyleProps since withStyledSystem
-// expects non-style props and style props as separate generic type variables.
-
-/**
- * Style props for the {@link RecordCardList} component. Accepts:
- * * {@link DimensionsSetProps}
- * * {@link FlexItemSetProps}
- * * {@link MarginProps}
- * * {@link PositionSetProps}
- *
- * @noInheritDoc
- */
-
-const styleParser = compose(dimensionsSet, flexItemSet, positionSet, margin);
-
-/** @hidden */
-
-/**
- * Scrollable list of record cards.
- *
- * [[ Story id="recordcardlist--example" title="RecordCardList example" height="560px" ]]
- *
- * @docsPath UI/components/RecordCardList
- * @component
- */
-export class RecordCardList extends React.Component {
-  /** @internal */
-
-  /** @internal */
-
-  /** @internal */
-
-  /** @internal */
-
-  /** @internal */
-
-  /** @hidden */
-  constructor(props) {
-    super(props);
-    this._container = /*#__PURE__*/React.createRef();
-    this._cardList = /*#__PURE__*/React.createRef();
-    this._cardListInnerWindow = /*#__PURE__*/React.createRef();
-    this._detectElementResize = createDetectElementResize();
-    this._scrollbarWidth = getScrollbarWidth();
-    this.state = {
-      cardListWidth: 0,
-      cardListHeight: 0,
-      isScrollbarVisible: false
-    };
-  }
-  /** @hidden */
-  componentDidMount() {
-    invariant(this._container.current, 'No container to detect resize on');
-    this._detectElementResize.addResizeListener(this._container.current, this._updateCardListSizeIfNeeded);
-    this._updateCardListSizeIfNeeded();
-  }
-  /** @hidden */
-  componentWillUnmount() {
-    if (this._container.current) {
-      this._detectElementResize.removeResizeListener(this._container.current, this._updateCardListSizeIfNeeded);
-    }
-  }
-  /** @hidden */
-  componentDidUpdate(prevProps) {
-    // If the number of records change, we may need to adjust card widths if a scrollbar
-    // now exists (or no longer exists)
-    if (this.props.records.length !== prevProps.records.length) {
-      this._updateCardListSizeIfNeeded();
-    }
-  }
-  // Functionality for `getScrollTopForRecordAtIndex` and `scrollTop` getter/setter was
-  // removed when migrating from DynamicDraw => react-window, which were not being used
-  // by any consuming component at the time of migration.
-  /** @hidden */
-  scrollToRecordAtIndex(recordIndex) {
-    invariant(this._cardList.current, 'No card list to scroll');
-    this._cardList.current.scrollToItem(recordIndex);
-  }
-  /** @internal */
-  _updateCardListSizeIfNeeded = () => {
-    invariant(this._container.current, 'No container to update card list size');
-    const {
-      width: cardListWidth,
-      height: cardListHeight
-    } = this._container.current.getBoundingClientRect();
-    invariant(this._cardListInnerWindow.current, 'No card list inner window to measure scroll height');
-    const isScrollbarVisible = this._cardListInnerWindow.current.scrollHeight > cardListHeight;
-    if (this.state.cardListWidth !== cardListWidth || this.state.cardListHeight !== cardListHeight || this.state.isScrollbarVisible !== isScrollbarVisible) {
-      this.setState({
-        cardListWidth,
-        cardListHeight,
-        isScrollbarVisible
-      });
-    }
-  };
-  /** @hidden */
-  render() {
-    const {
-      records,
-      fields,
-      view,
-      attachmentCoverField,
-      className,
-      style
-    } = this.props;
-    const itemData = {
-      records,
-      fields,
-      view,
-      width: this.state.cardListWidth - 2 * RECORD_CARD_SPACING - (this.state.isScrollbarVisible ? this._scrollbarWidth : 0),
-      attachmentCoverField,
-      onClick: this.props.onRecordClick,
-      onMouseEnter: this.props.onRecordMouseEnter ?? null,
-      onMouseLeave: this.props.onRecordMouseLeave ?? null,
-      style: {},
-      className: ''
-    };
-    return /*#__PURE__*/React.createElement(Box, {
-      ref: this._container,
-      className: className,
-      overflow: "hidden",
-      height: "100%",
-      style: style
-    }, /*#__PURE__*/React.createElement(FixedSizeList, {
-      outerRef: this._cardList,
-      width: this.state.cardListWidth,
-      height: this.state.cardListHeight,
-      innerElementType: innerRecordCardListWindow,
-      innerRef: this._cardListInnerWindow,
-      itemData: itemData,
-      itemCount: this.props.records.length,
-      itemKey: (index, data) => data.records[index].id,
-      itemSize: RECORD_CARD_ROW_HEIGHT + RECORD_CARD_SPACING,
-      onScroll: this.props.onScroll
-    },
-    // TODO(alex): figure out why this needs a cast to any - something to do with prop-types?
-    RecordCardItemRenderer));
-  }
-}
-export default withStyledSystem(RecordCardList, styleParser);

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

@@ -1,182 +0,0 @@
-/** @module @airtable/blocks/ui: Select */ /** */
-import { cx } from 'emotion';
-import * as React from 'react';
-import { compose } from '@styled-system/core';
-import { createEnum } from '../../shared/private_utils';
-import { spawnError } from '../../shared/error_utils';
-import useFormField from './use_form_field';
-import { maxWidth, minWidth, width, flexItemSet, positionSet, margin } from './system';
-import useTheme from './theme/use_theme';
-import { validateOptions, optionValueToString, stringToOptionValue } from './select_and_select_buttons_helpers';
-import useStyledSystem from './use_styled_system';
-import { useSelectSize, ControlSize } from './control_sizes';
-
-/** @hidden */
-
-const SelectVariant = createEnum('default');
-
-/** @internal */
-function useSelectVariant() {
-  let variant = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : SelectVariant.default;
-  const {
-    selectVariants
-  } = useTheme();
-  return selectVariants[variant];
-}
-
-// This component isn't great right now. It's just a styled <select> with a really hacky
-// way of getting the chevron arrow to show up. It also behaves weirdly when you give it
-// a margin (I think this is a limitation of <select>). We should probably replace it with
-// something like react-select, which would give us nice features like rendering custom
-// elements for options (e.g. for field type icons) and typeahead search.
-
-/**
- * Style props shared between the following components.
- * * {@link Select}, {@link SelectSynced}
- * * {@link TablePicker}, {@link TablePickerSynced}
- * * {@link ViewPicker}, {@link ViewPickerSynced}
- * * {@link FieldPicker}, {@link FieldPickerSynced}
- *
- * Also accepts:
- * * {@link FlexItemSetProps}
- * * {@link MarginProps}
- * * {@link MaxWidthProps}
- * * {@link MinWidthProps}
- * * {@link PositionSetProps}
- * * {@link MaxWidthProps}
- *
- * @noInheritDoc
- */
-
-/**
- * Props shared between the following components:
- * * {@link Select}, {@link SelectSynced}
- * * {@link TablePicker}, {@link TablePickerSynced}
- * * {@link ViewPicker}, {@link ViewPickerSynced}
- * * {@link FieldPicker}, {@link FieldPickerSynced}
- *
- * @noInheritDoc
- */
-
-/**
- * Props shared between the {@link Select} and {@link SelectSynced} components.
- */
-
-/**
- * Props for the {@link Select} component. Also accepts:
- * * {@link SelectStyleProps}
- *
- * @docsPath UI/components/Select
- */
-
-const styleParser = compose(maxWidth, minWidth, width, flexItemSet, positionSet, margin);
-
-/**
- * Dropdown menu component. A wrapper around `<select>` that fits in with Airtable's user interface.
- *
- * [[ Story id="select--example" title="Select example" ]]
- *
- * @component
- * @docsPath UI/components/Select
- */
-const Select = (props, ref) => {
-  const {
-    size = ControlSize.default,
-    value,
-    options: originalOptions = [],
-    autoFocus,
-    disabled,
-    id,
-    name,
-    tabIndex,
-    onChange,
-    // TODO (stephen): remove tooltip anchor props
-    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,
-    'aria-label': ariaLabel,
-    'aria-describedby': ariaDescribedByProp,
-    'aria-labelledby': ariaLabelledBy,
-    ...styleProps
-  } = props;
-  const formFieldContextValue = useFormField();
-  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 classNameForSelectVariant = useSelectVariant();
-  const classNameForSelectSize = useSelectSize(size);
-  const classNameForStyleProps = useStyledSystem({
-    width: '100%',
-    ...styleProps
-  }, styleParser);
-  function _onChange(e) {
-    if (onChange) {
-      const newValue = stringToOptionValue(e.currentTarget.value);
-      onChange(newValue);
-    }
-  }
-
-  // Check options here for a cleaner stack trace.
-  // Also, even though options are required, still check if it's set because
-  // the error is really ugly and covers up the prop type check.
-  const validationResult = validateOptions(originalOptions);
-  if (!validationResult.isValid) {
-    throw spawnError('<Select> %s', validationResult.reason);
-  }
-  let didFindOptionMatchingValue = false;
-  for (const option of originalOptions) {
-    if (option.value === value) {
-      didFindOptionMatchingValue = true;
-      break;
-    }
-  }
-  const options = [];
-  if (!didFindOptionMatchingValue) {
-    // Since there's no option that matches the given value, let's add an
-    // empty option at the top and log a warning.
-    options.push({
-      label: '',
-      value,
-      disabled: true
-    });
-    // eslint-disable-next-line no-console
-    console.warn(`No option for selected value in <Select>: ${String(value)}`.substr(0, 100));
-  }
-  options.push(...originalOptions);
-  return /*#__PURE__*/React.createElement("select", {
-    ref: ref,
-    value: optionValueToString(value),
-    onChange: _onChange,
-    onMouseEnter: onMouseEnter,
-    onMouseLeave: onMouseLeave,
-    onClick: onClick,
-    autoFocus: autoFocus,
-    disabled: disabled,
-    id: id || controlId,
-    name: name,
-    tabIndex: tabIndex,
-    className: cx(classNameForSelectVariant, classNameForSelectSize, classNameForStyleProps, className),
-    style: style,
-    "aria-label": ariaLabel,
-    "aria-labelledby": ariaLabelledBy,
-    "aria-describedby": ariaDescribedBy
-  }, options.map((option, index) => {
-    const valueJson = optionValueToString(option.value);
-    return /*#__PURE__*/React.createElement("option", {
-      key: `${valueJson}-${option.label}-${index}`,
-      value: valueJson,
-      disabled: option.disabled ? option.disabled : false
-    }, option.label);
-  }));
-};
-const ForwardedRefSelect = /*#__PURE__*/React.forwardRef(Select);
-ForwardedRefSelect.displayName = 'Select';
-export default ForwardedRefSelect;

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

@@ -1,53 +0,0 @@
-/** @module @airtable/blocks/ui: Select */ /** */
-
-// JSON stringify the value so you can use any primitive.
-// Regular <select> coerces all values to string, which is confusing.
-/**
- * Supported value types for {@link SelectOption}.
- */
-
-/** @internal */
-// Old eslint rule doesn't understand type guards
-// eslint-disable-next-line airtable/is-returns-boolean
-export function isSelectOptionValue(value) {
-  return value === null || value === undefined || typeof value === 'string' || typeof value === 'number' || typeof value === 'boolean';
-}
-
-/**
- * A select option for {@link Select}, {@link TablePicker}, {@link ViewPicker}, {@link FieldPicker}, and their `Synced` counterparts.
- */
-
-export const validateOptions = options => {
-  if (options) {
-    for (const option of options) {
-      // These are hard errors because we can't guarantee that other values
-      // will be JSON-encodable. And undefined gets coerced to the string
-      // "undefined" which is confusing.
-      if (typeof option.value === 'object' && option.value !== null) {
-        return {
-          isValid: false,
-          reason: 'option value must be a string, number, boolean, null, or undefined. Got an object.'
-        };
-      }
-    }
-  }
-  return {
-    isValid: true
-  };
-};
-
-/** @internal */
-export function optionValueToString(value) {
-  const valueJson = JSON.stringify(value === undefined ? {
-    isUndefined: true
-  } : {
-    notUndefinedValue: value
-  });
-  return valueJson;
-}
-/** @internal */
-export function stringToOptionValue(valueJson) {
-  const parsed = JSON.parse(valueJson);
-  const value = parsed.isUndefined ? null : parsed.notUndefinedValue;
-  return value;
-}

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

@@ -1,150 +0,0 @@
-/** @module @airtable/blocks/ui: SelectButtons */ /** */
-import { cx } from 'emotion';
-import React, { useEffect, useState } from 'react';
-import { compose } from '@styled-system/core';
-import { spawnError } from '../../shared/error_utils';
-import { createEnum, getLocallyUniqueId } from '../../shared/private_utils';
-import { validateOptions, optionValueToString } from './select_and_select_buttons_helpers';
-import useStyledSystem from './use_styled_system';
-import useTheme from './theme/use_theme';
-import cssHelpers from './css_helpers';
-import { maxWidth, minWidth, width, flexItemSet, positionSet, margin } from './system';
-import { ControlSize, useSelectButtonsSize } from './control_sizes';
-
-/** @internal */
-
-const SelectButtonsVariant = createEnum('default');
-
-/** @internal */
-function useSelectButtonsVariant() {
-  let variant = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : SelectButtonsVariant.default;
-  const {
-    selectButtonsVariants
-  } = useTheme();
-  return selectButtonsVariants[variant];
-}
-
-/**
- * Style props shared between the {@link SelectButtons} and {@link SelectButtonsSynced} components. Accepts:
- * * {@link FlexItemSetProps}
- * * {@link MarginProps}
- * * {@link MaxWidthProps}
- * * {@link MinWidthProps}
- * * {@link PositionSetProps}
- * * {@link WidthProps}
- *
- * @noInheritDoc
- */
-
-const styleParser = compose(maxWidth, minWidth, width, flexItemSet, positionSet, margin);
-
-/**
- * Props shared between the {@link SelectButtons} and {@link SelectButtonsSynced} components.
- *
- * @noInheritDoc
- */
-
-/**
- * Props for the {@link SelectButtons} component. Also accepts:
- * * {@link SelectButtonsStyleProps}
- *
- * @docsPath UI/components/SelectButtons
- */
-
-/**
- * A segmented control for selecting one value from a set of options.
- *
- * [[ Story id="selectbuttons--example" title="Select buttons example" ]]
- *
- * @docsPath UI/components/SelectButtons
- * @component
- */
-const SelectButtons = (props, ref) => {
-  const {
-    className,
-    style,
-    options,
-    disabled,
-    value,
-    size = ControlSize.default,
-    onChange,
-    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,
-    'aria-describedby': ariaDescribedBy,
-    'aria-labelledby': ariaLabelledBy,
-    ...styleProps
-  } = props;
-  // There is only a single default variant.
-  const {
-    containerClassNameForVariant,
-    optionClassNameForVariant
-  } = useSelectButtonsVariant();
-  const containerClassNameForSize = useSelectButtonsSize(size);
-  const classNameForStyleProps = useStyledSystem({
-    width: '100%',
-    ...styleProps
-  }, styleParser);
-  const [generatedId] = useState(getLocallyUniqueId('sb-'));
-  const [isFocused, setIsFocused] = useState(false);
-  useEffect(() => {
-    // Check options here for a cleaner stack trace.
-    // Also, even though options are required, still check if it's set because
-    // the error is really ugly and covers up the prop type check.
-    const validationResult = validateOptions(options);
-    if (!validationResult.isValid) {
-      throw spawnError('<SelectButtons> %s', validationResult.reason);
-    }
-  }, [options]);
-  function _onChange(newValue) {
-    if (onChange) {
-      if (newValue !== value) {
-        onChange(newValue);
-      }
-    }
-  }
-  return /*#__PURE__*/React.createElement("div", {
-    // TODO (stephen): remove tooltip anchor props
-    ref: ref,
-    onMouseEnter: onMouseEnter,
-    onMouseLeave: onMouseLeave,
-    onClick: onClick,
-    onFocus: () => setIsFocused(true),
-    onBlur: () => setIsFocused(false),
-    className: cx(containerClassNameForSize, containerClassNameForVariant, classNameForStyleProps, className),
-    style: style,
-    "data-disabled": disabled,
-    "data-focused": isFocused,
-    "aria-labelledby": ariaLabelledBy,
-    "aria-describedby": ariaDescribedBy
-  }, options.map((option, index) => {
-    const isSelected = option.value === value;
-    const isOptionDisabled = disabled || option.disabled;
-    const radioId = `${generatedId}-${index}`;
-    const valueJson = optionValueToString(option.value);
-    return /*#__PURE__*/React.createElement("div", {
-      key: `${valueJson}-${option.label}-${index}`,
-      className: optionClassNameForVariant
-    }, /*#__PURE__*/React.createElement("input", {
-      type: "radio",
-      onChange: isOptionDisabled ? undefined : () => _onChange(option.value),
-      disabled: !!isOptionDisabled,
-      checked: isSelected,
-      className: cssHelpers.VISUALLY_HIDDEN,
-      id: radioId,
-      name: generatedId
-    }), /*#__PURE__*/React.createElement("label", {
-      htmlFor: radioId
-    }, /*#__PURE__*/React.createElement("span", {
-      className: cssHelpers.TRUNCATE
-    }, option.label)));
-  }));
-};
-const ForwardedRefSelectButtons = /*#__PURE__*/React.forwardRef(SelectButtons);
-ForwardedRefSelectButtons.displayName = 'SelectButtons';
-export default ForwardedRefSelectButtons;