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

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

@@ -1,84 +0,0 @@
-/** @module @airtable/blocks/ui: ChoiceToken */ /** */
-import { cx } from 'emotion';
-import * as React from 'react';
-import { compose } from '@styled-system/core';
-import { baymax } from './baymax_utils';
-import Box from './box';
-import Text from './text';
-import useStyledSystem from './use_styled_system';
-import useTextColorForBackgroundColor from './use_text_color_for_background_color';
-import { flexItemSet, positionSet, margin } from './system';
-
-/**
- * Style props for the {@link ChoiceToken} component. Accepts:
- * * {@link FlexItemSetProps}
- * * {@link MarginProps}
- * * {@link PositionSetProps}
- *
- * @noInheritDoc
- */
-
-const styleParser = compose(flexItemSet, positionSet, margin);
-const DEFAULT_CHOICE_COLOR = 'gray';
-
-/** An option from a select field. You should not create these objects from scratch, but should instead grab them from base data. */
-
-/**
- * Props for the {@link ChoiceToken} component. Also accepts:
- * * {@link ChoiceTokenStyleProps}
- *
- * @docsPath UI/components/ChoiceToken
- * @noInheritDoc
- */
-
-/**
- * A component that shows a single choice in a small token, to be displayed inline or in a list of choices.
- *
- * [[ Story id="choicetoken--example" title="Choice token example" ]]
- *
- * @component
- * @docsPath UI/components/ChoiceToken
- */
-const ChoiceToken = props => {
-  const {
-    choice,
-    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,
-    ...styleProps
-  } = props;
-  const classNameForStyleProps = useStyledSystem(styleProps, styleParser);
-  const color = choice.color || DEFAULT_CHOICE_COLOR;
-  const textColor = useTextColorForBackgroundColor(color);
-  return /*#__PURE__*/React.createElement(Box, {
-    className: cx(className, classNameForStyleProps),
-    style: style,
-    display: "inline-block"
-  }, /*#__PURE__*/React.createElement(Box
-  // TODO (stephen): remove tooltip anchor props
-  , {
-    onMouseEnter: onMouseEnter,
-    onMouseLeave: onMouseLeave,
-    onClick: onClick,
-    className: baymax('print-color-exact align-top border-box'),
-    backgroundColor: color,
-    minWidth: "18px",
-    height: "18px",
-    borderRadius: "circle",
-    paddingX: 2
-  }, /*#__PURE__*/React.createElement(Text, {
-    className: baymax('truncate'),
-    textColor: textColor,
-    fontSize: "13px",
-    fontWeight: "400",
-    lineHeight: 1.5
-  }, choice.name)));
-};
-export default ChoiceToken;

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

@@ -1,115 +0,0 @@
-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); }
-/** @module @airtable/blocks/ui: CollaboratorToken */ /** */
-import { cx } from 'emotion';
-import * as React from 'react';
-import { compose } from '@styled-system/core';
-import useBase from '../../shared/ui/use_base';
-import Box from './box';
-import Text from './text';
-import { baymax } from './baymax_utils';
-import useStyledSystem from './use_styled_system';
-import { flexItemSet, positionSet, margin } from './system';
-const UNKNOWN_PROFILE_PIC_URL = 'https://static.airtable.com/images/userIcons/user_icon_unknown.png';
-
-/**
- * Style props for the {@link CollaboratorToken} component. Accepts:
- * * {@link FlexItemSetProps}
- * * {@link MarginProps}
- * * {@link PositionSetProps}
- *
- * @noInheritDoc
- */
-
-const styleParser = compose(flexItemSet, positionSet, margin);
-
-/**
- * Props for the {@link CollaboratorToken} component. Also accepts:
- * * {@link CollaboratorTokenStyleProps}
- *
- * @noInheritDoc
- * @docsPath UI/components/CollaboratorToken
- */
-
-/**
- * A version of `Collaborator` that doesn't connect to base. Not part of the public API.
- *
- * @hidden
- */
-const StaticCollaboratorToken = props => {
-  const {
-    collaborator,
-    isActive = true,
-    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,
-    ...styleProps
-  } = props;
-  const classNameForStyledProps = useStyledSystem(styleProps, styleParser);
-  const userName = collaborator.name || collaborator.email || 'Unknown';
-  const profilePicUrl = collaborator.profilePicUrl || UNKNOWN_PROFILE_PIC_URL;
-  return /*#__PURE__*/React.createElement(Box
-  // TODO (stephen): remove tooltip anchor props
-  , {
-    onMouseEnter: onMouseEnter,
-    onMouseLeave: onMouseLeave,
-    onClick: onClick,
-    className: cx(baymax('truncate print-color-exact'), classNameForStyledProps, className),
-    style: style,
-    alignItems: "center",
-    display: "inline-flex",
-    opacity: isActive ? 1 : 0.5
-  }, profilePicUrl && /*#__PURE__*/React.createElement(Box, {
-    className: baymax('background-cover background-center'),
-    style: {
-      backgroundImage: `url("${profilePicUrl}")`
-    },
-    border: "1px solid #eee",
-    width: "22px",
-    height: "22px",
-    borderRadius: "circle",
-    zIndex: 1,
-    flex: "none",
-    backgroundColor: "grayLight2"
-  }), /*#__PURE__*/React.createElement(Text, {
-    className: baymax('truncate'),
-    paddingRight: 2,
-    paddingLeft: 3,
-    textColor: "dark",
-    display: "inline-flex",
-    borderRadius: "circle",
-    alignItems: "center",
-    flex: "none",
-    backgroundColor: "grayLight2",
-    marginLeft: "-12px",
-    lineHeight: 1.4
-  }, userName));
-};
-
-/**
- * A component that shows a single collaborator in a small token, to be displayed inline or in a list of choices.
- *
- * [[ Story id="collaboratortoken--example" title="Collaborator token example" ]]
- *
- * @component
- * @docsPath UI/components/CollaboratorToken
- */
-const CollaboratorToken = props => {
-  // Re-render when collaborator info updates. This is to ensure isActive is accurate.
-  const base = useBase();
-  const activeCollaborators = base.activeCollaborators;
-  const isActive = activeCollaborators.some(activeCollaborator => {
-    return activeCollaborator.id === props.collaborator.id;
-  });
-  return /*#__PURE__*/React.createElement(StaticCollaboratorToken, _extends({}, props, {
-    isActive: isActive
-  }));
-};
-CollaboratorToken.Static = StaticCollaboratorToken;
-export default CollaboratorToken;

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

@@ -1,185 +0,0 @@
-/** @module @airtable/blocks/ui: ColorPalette */ /** */
-import { cx } from 'emotion';
-import * as React from 'react';
-import { compose } from '@styled-system/core';
-import { invariant } from '../../shared/error_utils';
-import colorUtils from '../../shared/color_utils';
-import { baymax } from './baymax_utils';
-import Box from './box';
-import Icon from './icon';
-import createDetectElementResize from './create_detect_element_resize';
-import withStyledSystem from './with_styled_system';
-import { maxWidth, minWidth, width, flexItemSet, positionSet, margin } from './system';
-const MIN_COLOR_SQUARE_SIZE = 16;
-const DEFAULT_COLOR_SQUARE_SIZE = 24;
-const MAX_COLOR_SQUARE_SIZE = 32;
-
-// TODO: it's confusing that this expects color names, but other components
-// expect a CSS color string.
-
-/**
- * Style props shared between the {@link ColorPalette} and {@link ColorPaletteSynced} 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 ColorPalette} and {@link ColorPaletteSynced} components.
- */
-
-/**
- * Props for the {@link ColorPalette} component. Also accepts:
- * * {@link ColorPaletteStyleProps}
- *
- * @docsPath UI/components/ColorPalette
- */
-
-/** @hidden */
-
-/**
- * A color selection component. Accepts a list of `allowedColors` to be displayed
- * as selectable color squares.
- *
- * [[ Story id="colorpalette--example" title="Color palette example" ]]
- *
- * @component
- * @docsPath UI/components/ColorPalette
- */
-export class ColorPalette extends React.Component {
-  /** @hidden */
-  static defaultProps = {
-    squareMargin: 4,
-    className: '',
-    style: {}
-  };
-  /** @internal */
-
-  /** @internal */
-
-  /** @hidden */
-  constructor(props) {
-    super(props);
-    this._detectElementResize = createDetectElementResize();
-    this._colorPaletteContainerRef = /*#__PURE__*/React.createRef();
-    this._setColorSquareSize = this._setColorSquareSize.bind(this);
-    this.state = {
-      squareSize: DEFAULT_COLOR_SQUARE_SIZE
-    };
-  }
-  /** @hidden */
-  componentDidMount() {
-    if (this._colorPaletteContainerRef.current) {
-      this._detectElementResize.addResizeListener(this._colorPaletteContainerRef.current, this._setColorSquareSize);
-    }
-    this._setColorSquareSize();
-  }
-  /** @hidden */
-  componentWillUnmount() {
-    if (this._colorPaletteContainerRef.current) {
-      this._detectElementResize.removeResizeListener(this._colorPaletteContainerRef.current, this._setColorSquareSize);
-    }
-  }
-  /** @hidden */
-  componentDidUpdate(prevProps) {
-    if (this.props.allowedColors.length !== prevProps.allowedColors.length) {
-      this._setColorSquareSize();
-    }
-  }
-  // Attempts to fit all `allowedColors` onto one line by adjusting color square size.
-  /** @internal */
-  _setColorSquareSize() {
-    const {
-      squareMargin
-    } = this.props;
-    invariant(squareMargin !== null && squareMargin !== undefined, 'colorPalette.squareMargin must be a number');
-    invariant(this._colorPaletteContainerRef.current, 'No container to set color square size');
-
-    // Calculates the size of each square required to fit `numSquares` squares on one line.
-    const calculateSquareSize = numSquares => {
-      return (containerWidth - squareMargin * 2 * numSquares) / numSquares;
-    };
-    const containerWidth = this._colorPaletteContainerRef.current.getBoundingClientRect().width;
-    const numColors = this.props.allowedColors.length;
-    const calculatedSquareSize = calculateSquareSize(numColors);
-    let squareSize;
-    // If we can't fit them all in one line, find the closest square size to the default that
-    // fills the row and let flexbox wrap the remainder
-    if (calculatedSquareSize < MIN_COLOR_SQUARE_SIZE) {
-      const numColorsThatWillFitAsDefaultSize = Math.round((containerWidth + 2 * squareMargin) / (DEFAULT_COLOR_SQUARE_SIZE + 2 * squareMargin));
-      squareSize = squareSize = numColorsThatWillFitAsDefaultSize === 0 ? DEFAULT_COLOR_SQUARE_SIZE : calculateSquareSize(numColorsThatWillFitAsDefaultSize);
-    } else {
-      squareSize = Math.min(MAX_COLOR_SQUARE_SIZE, calculatedSquareSize);
-    }
-    this.setState({
-      squareSize
-    });
-  }
-  /** @internal */
-  _onChange(color) {
-    if (this.props.onChange) {
-      this.props.onChange(color);
-    }
-  }
-  /** @hidden */
-  render() {
-    const {
-      color,
-      allowedColors,
-      squareMargin,
-      onMouseEnter,
-      onMouseLeave,
-      onClick,
-      className,
-      style,
-      disabled
-    } = this.props;
-    const {
-      squareSize
-    } = this.state;
-    invariant(squareMargin !== null && squareMargin !== undefined, 'colorPalette.squareMargin must be a number');
-    return /*#__PURE__*/React.createElement(Box
-    // TODO (stephen): remove tooltip anchor props
-    , {
-      onMouseEnter: onMouseEnter,
-      onMouseLeave: onMouseLeave,
-      onClick: onClick,
-      className: className,
-      style: style,
-      overflow: "hidden"
-    }, /*#__PURE__*/React.createElement(Box, {
-      ref: this._colorPaletteContainerRef,
-      display: "flex",
-      flexWrap: "wrap"
-      // Add a negative margin to offset the margin of each swatch,
-      // so the color swatches are flush with the outer container.
-      ,
-      margin: `${-squareMargin}px`
-    }, allowedColors.map(allowedColor => /*#__PURE__*/React.createElement("label", {
-      key: allowedColor,
-      onClick: disabled ? undefined : () => this._onChange(allowedColor),
-      style: {
-        backgroundColor: colorUtils.getHexForColor(allowedColor) || undefined,
-        height: squareSize,
-        width: squareSize,
-        margin: squareMargin
-      },
-      className: cx(baymax('rounded flex items-center justify-center'), {
-        [baymax('pointer link-quiet')]: !disabled,
-        [baymax('quieter')]: !!disabled
-      })
-    }, allowedColor === color && /*#__PURE__*/React.createElement(Icon, {
-      name: "check",
-      size: squareSize,
-      className: baymax(colorUtils.shouldUseLightTextOnColor(allowedColor) ? 'text-white' : 'text-dark')
-    })))));
-  }
-}
-export default withStyledSystem(ColorPalette, styleParser, {});

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

@@ -1,62 +0,0 @@
-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); }
-/** @module @airtable/blocks/ui: ColorPalette */ /** */
-import * as React from 'react';
-import { spawnError } from '../../shared/error_utils';
-import Synced from './synced';
-import ColorPalette from './color_palette';
-
-/**
- * Props for the {@link ColorPaletteSynced} component. Also accepts:
- * * {@link ColorPaletteStyleProps}
- *
- * @docsPath UI/components/ColorPaletteSynced
- * @groupPath UI/components/ColorPalette
- */
-
-/**
- * A wrapper around the {@link ColorPalette} component that syncs with {@link GlobalConfig}.
- *
- * [[ Story id="colorpalette--synced-example" title="Synced color palette example" ]]
- *
- * @component
- * @docsPath UI/components/ColorPaletteSynced
- * @groupPath UI/components/ColorPalette
- */
-class ColorPaletteSynced extends React.Component {
-  /** @hidden */
-  render() {
-    const {
-      globalConfigKey,
-      disabled,
-      onChange,
-      ...restOfProps
-    } = this.props;
-    return /*#__PURE__*/React.createElement(Synced, {
-      globalConfigKey: globalConfigKey,
-      render: _ref => {
-        let {
-          value,
-          canSetValue,
-          setValue
-        } = _ref;
-        let currentColor;
-        if (typeof value === 'string' || value === null || value === undefined) {
-          currentColor = value;
-        } else {
-          spawnError('ColorPaletteSynced only works with a global config value that is a string, null, or undefined');
-        }
-        return /*#__PURE__*/React.createElement(ColorPalette, _extends({}, restOfProps, {
-          color: currentColor,
-          onChange: newValue => {
-            setValue(newValue);
-            if (onChange) {
-              onChange(newValue);
-            }
-          },
-          disabled: disabled || !canSetValue
-        }));
-      }
-    });
-  }
-}
-export default ColorPaletteSynced;

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

@@ -1,96 +0,0 @@
-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); }
-/** @module @airtable/blocks/ui: Dialog */ /** */
-import * as React from 'react';
-import Dialog from './dialog';
-import Heading from './heading';
-import Text from './text';
-import Button from './button';
-import Box from './box';
-
-/**
- * Props for the {@link ConfirmationDialog} component. Also accepts:
- * * {@link DialogStyleProps}
- *
- * @noInheritDoc
- * @docsPath UI/components/ConfirmationDialog
- */
-
-/**
- * A styled modal dialog component that prompts the user to confirm or cancel an action.
- *
- * [[ Story id="confirmationdialog--example" title="Confirmation dialog example" ]]
- *
- * By default, this component will focus the "Confirm" button on mount, so that pressing
- * the Enter key will confirm the action.
- *
- * @component
- * @docsPath UI/components/ConfirmationDialog
- */
-class ConfirmationDialog extends React.Component {
-  /** @hidden */
-  static defaultProps = {
-    cancelButtonText: 'Cancel',
-    confirmButtonText: 'Confirm',
-    isConfirmActionDangerous: false,
-    isCancelButtonDisabled: false,
-    isConfirmButtonDisabled: false,
-    width: '400px'
-  };
-  /** @internal */
-  _confirmButtonRef = /*#__PURE__*/React.createRef();
-  /** @hidden */
-  componentDidMount() {
-    if (this._confirmButtonRef.current !== null) {
-      this._confirmButtonRef.current.focus();
-    }
-  }
-  /** @hidden */
-  render() {
-    const {
-      title,
-      body,
-      cancelButtonText,
-      confirmButtonText,
-      isConfirmActionDangerous,
-      className,
-      style,
-      backgroundClassName,
-      backgroundStyle,
-      onCancel,
-      onConfirm,
-      isCancelButtonDisabled,
-      isConfirmButtonDisabled,
-      ...restOfProps
-    } = this.props;
-    return /*#__PURE__*/React.createElement(Dialog, _extends({
-      onClose: onCancel,
-      className: className,
-      style: style,
-      backgroundClassName: backgroundClassName,
-      backgroundStyle: backgroundStyle
-    }, restOfProps), /*#__PURE__*/React.createElement(Dialog.CloseButton, null), /*#__PURE__*/React.createElement(Heading, {
-      size: "small"
-    }, title), typeof body === 'string' ? /*#__PURE__*/React.createElement(Text, {
-      variant: "paragraph"
-    }, body) : body, /*#__PURE__*/React.createElement(Box, {
-      display: "flex",
-      flexDirection: "row-reverse",
-      alignItems: "center",
-      justifyContent: "start",
-      width: "100%",
-      marginTop: 3
-    }, /*#__PURE__*/React.createElement(Button, {
-      ref: this._confirmButtonRef,
-      onClick: onConfirm,
-      variant: isConfirmActionDangerous ? 'danger' : 'primary',
-      disabled: isConfirmButtonDisabled
-    }, confirmButtonText), /*#__PURE__*/React.createElement(Button, {
-      onClick: onCancel,
-      variant: "secondary",
-      alignSelf: "end",
-      marginRight: 2,
-      disabled: isCancelButtonDisabled
-    }, cancelButtonText)));
-  }
-}
-export default ConfirmationDialog;

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

@@ -1,92 +0,0 @@
-/** @module @airtable/blocks/ui/system: Control sizes */ /** */
-import { compose, system } from '@styled-system/core';
-import { createEnum } from '../../shared/private_utils';
-import useTheme from './theme/use_theme';
-import getStylePropsForResponsiveProp from './system/utils/get_style_props_for_responsive_prop';
-import useStyledSystem from './use_styled_system';
-import { allStylesParser } from './system';
-
-/**
- * Sizes for the {@link Button}, {@link Input}, {@link Select}, {@link SelectButtons}, and {@link Switch} components.
- */
-
-export const ControlSize = createEnum('small', 'default', 'large');
-
-/**
- * Size prop for the {@link Button}, {@link Input}, {@link Select}, {@link SelectButtons}, and {@link Switch} components.
- */
-
-/** @internal */
-export function useButtonSize(controlSizeProp) {
-  const {
-    buttonSizes
-  } = useTheme();
-  let styleProps;
-  if (typeof controlSizeProp === 'string') {
-    styleProps = buttonSizes[controlSizeProp];
-  } else {
-    styleProps = getStylePropsForResponsiveProp(controlSizeProp, buttonSizes);
-  }
-  return useStyledSystem(styleProps);
-}
-
-// For selects we create a custom style parser that includes `backgroundPosition`.
-const selectSizeStyleParser = compose(allStylesParser, system({
-  backgroundPosition: true
-}));
-
-/** @internal */
-export function useSelectSize(controlSizeProp) {
-  const {
-    selectSizes
-  } = useTheme();
-  let styleProps;
-  if (typeof controlSizeProp === 'string') {
-    styleProps = selectSizes[controlSizeProp];
-  } else {
-    styleProps = getStylePropsForResponsiveProp(controlSizeProp, selectSizes);
-  }
-  return useStyledSystem(styleProps, selectSizeStyleParser);
-}
-
-/** @internal */
-export function useInputSize(controlSizeProp) {
-  const {
-    inputSizes
-  } = useTheme();
-  let styleProps;
-  if (typeof controlSizeProp === 'string') {
-    styleProps = inputSizes[controlSizeProp];
-  } else {
-    styleProps = getStylePropsForResponsiveProp(controlSizeProp, inputSizes);
-  }
-  return useStyledSystem(styleProps);
-}
-
-/** @internal */
-export function useSelectButtonsSize(controlSizeProp) {
-  const {
-    selectButtonsSizes
-  } = useTheme();
-  let styleProps;
-  if (typeof controlSizeProp === 'string') {
-    styleProps = selectButtonsSizes[controlSizeProp];
-  } else {
-    styleProps = getStylePropsForResponsiveProp(controlSizeProp, selectButtonsSizes);
-  }
-  return useStyledSystem(styleProps);
-}
-
-/** @internal */
-export function useSwitchSize(controlSizeProp) {
-  const {
-    switchSizes
-  } = useTheme();
-  let styleProps;
-  if (typeof controlSizeProp === 'string') {
-    styleProps = switchSizes[controlSizeProp];
-  } else {
-    styleProps = getStylePropsForResponsiveProp(controlSizeProp, switchSizes);
-  }
-  return useStyledSystem(styleProps);
-}