@airtable/blocks 0.0.0-experimental-e5ab33b68-20250905 → 0.0.0-experimental-e625869e5-20251002

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

@@ -1,303 +0,0 @@
-"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/cjs/base/ui/select.js

@@ -1,191 +0,0 @@
-"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/cjs/base/ui/select_and_select_buttons_helpers.js

@@ -1,63 +0,0 @@
-"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;
-}