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

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

@@ -0,0 +1,303 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.RecordCardList = void 0;
+var React = _interopRequireWildcard(require("react"));
+var _reactWindow = require("react-window");
+var _core = require("@styled-system/core");
+var _error_utils = require("../../shared/error_utils");
+var _record = _interopRequireDefault(require("../models/record"));
+var _box = _interopRequireDefault(require("./box"));
+var _create_detect_element_resize = _interopRequireDefault(require("./create_detect_element_resize"));
+var _with_styled_system = _interopRequireDefault(require("./with_styled_system"));
+var _system = require("./system");
+var _record_card = _interopRequireDefault(require("./record_card"));
+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: RecordCardList */ /** */
+
+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.default) {
+      filteredRecords.push(currentRecord);
+    }
+  }
+  if (filteredRecords.length !== records.length && filteredRecords.length !== 0) {
+    throw (0, _error_utils.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(_record_card.default, {
+    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;
+  (0, _error_utils.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 = (0, _core.compose)(_system.dimensionsSet, _system.flexItemSet, _system.positionSet, _system.margin);
+
+/** @hidden */
+
+/**
+ * Scrollable list of record cards.
+ *
+ * [[ Story id="recordcardlist--example" title="RecordCardList example" height="560px" ]]
+ *
+ * @docsPath UI/components/RecordCardList
+ * @component
+ */
+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 = (0, _create_detect_element_resize.default)();
+    this._scrollbarWidth = getScrollbarWidth();
+    this.state = {
+      cardListWidth: 0,
+      cardListHeight: 0,
+      isScrollbarVisible: false
+    };
+  }
+  /** @hidden */
+  componentDidMount() {
+    (0, _error_utils.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) {
+    (0, _error_utils.invariant)(this._cardList.current, 'No card list to scroll');
+    this._cardList.current.scrollToItem(recordIndex);
+  }
+  /** @internal */
+  _updateCardListSizeIfNeeded = () => {
+    (0, _error_utils.invariant)(this._container.current, 'No container to update card list size');
+    const {
+      width: cardListWidth,
+      height: cardListHeight
+    } = this._container.current.getBoundingClientRect();
+    (0, _error_utils.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.default, {
+      ref: this._container,
+      className: className,
+      overflow: "hidden",
+      height: "100%",
+      style: style
+    }, /*#__PURE__*/React.createElement(_reactWindow.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));
+  }
+}
+exports.RecordCardList = RecordCardList;
+var _default = exports.default = (0, _with_styled_system.default)(RecordCardList, styleParser);

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

@@ -0,0 +1,191 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = 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 _error_utils = require("../../shared/error_utils");
+var _use_form_field = _interopRequireDefault(require("./use_form_field"));
+var _system = require("./system");
+var _use_theme = _interopRequireDefault(require("./theme/use_theme"));
+var _select_and_select_buttons_helpers = require("./select_and_select_buttons_helpers");
+var _use_styled_system = _interopRequireDefault(require("./use_styled_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: Select */ /** */
+
+/** @hidden */
+
+const SelectVariant = (0, _private_utils.createEnum)('default');
+
+/** @internal */
+function useSelectVariant() {
+  let variant = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : SelectVariant.default;
+  const {
+    selectVariants
+  } = (0, _use_theme.default)();
+  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 = (0, _core.compose)(_system.maxWidth, _system.minWidth, _system.width, _system.flexItemSet, _system.positionSet, _system.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 = _control_sizes.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 = (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 classNameForSelectVariant = useSelectVariant();
+  const classNameForSelectSize = (0, _control_sizes.useSelectSize)(size);
+  const classNameForStyleProps = (0, _use_styled_system.default)({
+    width: '100%',
+    ...styleProps
+  }, styleParser);
+  function _onChange(e) {
+    if (onChange) {
+      const newValue = (0, _select_and_select_buttons_helpers.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 = (0, _select_and_select_buttons_helpers.validateOptions)(originalOptions);
+  if (!validationResult.isValid) {
+    throw (0, _error_utils.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: (0, _select_and_select_buttons_helpers.optionValueToString)(value),
+    onChange: _onChange,
+    onMouseEnter: onMouseEnter,
+    onMouseLeave: onMouseLeave,
+    onClick: onClick,
+    autoFocus: autoFocus,
+    disabled: disabled,
+    id: id || controlId,
+    name: name,
+    tabIndex: tabIndex,
+    className: (0, _emotion.cx)(classNameForSelectVariant, classNameForSelectSize, classNameForStyleProps, className),
+    style: style,
+    "aria-label": ariaLabel,
+    "aria-labelledby": ariaLabelledBy,
+    "aria-describedby": ariaDescribedBy
+  }, options.map((option, index) => {
+    const valueJson = (0, _select_and_select_buttons_helpers.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';
+var _default = exports.default = ForwardedRefSelect;

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

@@ -0,0 +1,63 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.isSelectOptionValue = isSelectOptionValue;
+exports.optionValueToString = optionValueToString;
+exports.stringToOptionValue = stringToOptionValue;
+exports.validateOptions = void 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
+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.
+ */
+
+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 */
+exports.validateOptions = validateOptions;
+function optionValueToString(value) {
+  const valueJson = JSON.stringify(value === undefined ? {
+    isUndefined: true
+  } : {
+    notUndefinedValue: value
+  });
+  return valueJson;
+}
+/** @internal */
+function stringToOptionValue(valueJson) {
+  const parsed = JSON.parse(valueJson);
+  const value = parsed.isUndefined ? null : parsed.notUndefinedValue;
+  return value;
+}