@airtable/blocks 0.0.0-experimental-3e47d4d04-20250909 → 0.0.0-experimental-e625869e5-20251002

package/dist/esm/base/ui/theme/default_theme/tokens.js

@@ -1,205 +0,0 @@
-export const colors = {
-  // neutrals
-  white: 'hsl(0, 0%, 100%)',
-  dark: 'hsl(0, 0%, 20%)',
-  // light is the lightest text color possible.
-  light: 'hsl(0, 0%, 46%)',
-  // Light grays are solid colors used for backgrounds primarily.
-  lightGray1: 'hsl(0, 0%, 98%)',
-  lightGray2: 'hsl(0, 0%, 95%)',
-  lightGray3: 'hsl(0, 0%, 91%)',
-  lightGray4: 'hsl(0, 0%, 88%)',
-  lighten1: 'hsla(0, 0%, 100%, 0.05)',
-  lighten2: 'hsla(0, 0%, 100%, 0.1)',
-  lighten3: 'hsla(0, 0%, 100%, 0.25)',
-  lighten4: 'hsla(0, 0%, 100%, 0.5)',
-  darken1: 'hsla(0, 0%, 0%, 0.05)',
-  darken2: 'hsla(0, 0%, 0%, 0.1)',
-  darken3: 'hsla(0, 0%, 0%, 0.25)',
-  darken4: 'hsla(0, 0%, 0%, 0.5)',
-  // blue
-  blueBright: 'rgb(45, 127, 249)',
-  blue: 'rgb(18, 131, 218)',
-  blueDark1: 'rgb(39, 80, 174)',
-  blueLight1: 'rgb(156, 199, 255)',
-  blueLight2: 'rgb(207, 223, 255)',
-  // cyan
-  cyanBright: 'rgb(24, 191, 255)',
-  cyan: 'rgb(1, 169, 219)',
-  cyanDark1: 'rgb(11, 118, 183)',
-  cyanLight1: 'rgb(119, 209, 243)',
-  cyanLight2: 'rgb(208, 240, 253)',
-  // gray
-  grayBright: 'rgb(102, 102, 102)',
-  gray: 'rgb(102, 102, 102)',
-  grayDark1: 'rgb(68, 68, 68)',
-  grayLight1: 'rgb(204, 204, 204)',
-  grayLight2: 'rgb(238, 238, 238)',
-  // green
-  greenBright: 'rgb(32, 201, 51)',
-  green: 'rgb(17, 175, 34)',
-  greenDark1: 'rgb(51, 138, 23)',
-  greenLight1: 'rgb(147, 224, 136)',
-  greenLight2: 'rgb(209, 247, 196)',
-  // orange
-  orangeBright: 'rgb(255, 111, 44)',
-  orange: 'rgb(247, 101, 59)',
-  orangeDark1: 'rgb(215, 77, 38)',
-  orangeLight1: 'rgb(255, 169, 129)',
-  orangeLight2: 'rgb(254, 226, 213)',
-  // pink
-  pinkBright: 'rgb(255, 8, 194)',
-  pink: 'rgb(233, 41, 186)',
-  pinkDark1: 'rgb(178, 21, 139)',
-  pinkLight1: 'rgb(249, 157, 226)',
-  pinkLight2: 'rgb(255, 218, 246)',
-  // purple
-  purpleBright: 'rgb(139, 70, 255)',
-  purple: 'rgb(124, 57, 237)',
-  purpleDark1: 'rgb(107, 28, 176)',
-  purpleLight1: 'rgb(205, 176, 255)',
-  purpleLight2: 'rgb(237, 226, 254)',
-  // red
-  redBright: 'rgb(248, 43, 96)',
-  red: 'rgb(229, 46, 77)',
-  redDark1: 'rgb(186, 30, 69)',
-  redLight1: 'rgb(255, 158, 183)',
-  redLight2: 'rgb(255, 220, 229)',
-  // teal
-  tealBright: 'rgb(32, 217, 210)',
-  teal: 'rgb(2, 170, 164)',
-  tealDark1: 'rgb(6, 160, 155)',
-  tealLight1: 'rgb(114, 221, 195)',
-  tealLight2: 'rgb(194, 245, 233)',
-  // yellow
-  yellowBright: 'rgb(252, 180, 0)',
-  yellow: 'rgb(224, 141, 0)',
-  yellowDark1: 'rgb(184, 117, 3)',
-  yellowLight1: 'rgb(255, 214, 110)',
-  yellowLight2: 'rgb(255, 234, 182)'
-};
-export const textColorsByBackgroundColor = {
-  // blue bg
-  blueBright: 'white',
-  blue: 'white',
-  blueDark1: 'rgb(207, 223, 255)',
-  blueLight1: 'rgb(0, 0, 60)',
-  blueLight2: 'rgb(0, 0, 60)',
-  // cyan bg
-  cyanBright: 'white',
-  cyan: 'white',
-  cyanDark1: 'rgb(208, 240, 253)',
-  cyanLight1: 'rgb(0, 17, 68)',
-  cyanLight2: 'rgb(0, 17, 68)',
-  // gray bg
-  grayBright: 'white',
-  gray: 'white',
-  grayDark1: 'rgb(238, 238, 238)',
-  grayLight1: 'rgb(0, 0, 0)',
-  grayLight2: 'rgb(0, 0, 0)',
-  // green bg
-  greenBright: 'white',
-  green: 'white',
-  greenDark1: 'rgb(209, 247, 196)',
-  greenLight1: 'rgb(0, 34, 0)',
-  greenLight2: 'rgb(0, 34, 0)',
-  // orange bg
-  orangeBright: 'white',
-  orange: 'white',
-  orangeDark1: 'rgb(254, 226, 213)',
-  orangeLight1: 'rgb(83, 0, 0)',
-  orangeLight2: 'rgb(83, 0, 0)',
-  // pink bg
-  pinkBright: 'white',
-  pink: 'white',
-  pinkDark1: 'rgb(255, 218, 246)',
-  pinkLight1: 'rgb(58, 0, 33)',
-  pinkLight2: 'rgb(58, 0, 33)',
-  // purple bg
-  purpleBright: 'white',
-  purple: 'white',
-  purpleDark1: 'rgb(237, 226, 254)',
-  purpleLight1: 'rgb(12, 0, 62)',
-  purpleLight2: 'rgb(12, 0, 62)',
-  // red bg
-  redBright: 'white',
-  red: 'white',
-  redDark1: 'rgb(255, 220, 229)',
-  redLight1: 'rgb(64, 0, 0)',
-  redLight2: 'rgb(64, 0, 0)',
-  // teal bg
-  tealBright: 'white',
-  teal: 'white',
-  tealDark1: 'rgb(194, 245, 233)',
-  tealLight1: 'rgb(0, 47, 46)',
-  tealLight2: 'rgb(0, 47, 46)',
-  // yellow bg
-  yellowBright: 'white',
-  yellow: 'white',
-  yellowDark1: 'rgb(255, 234, 182)',
-  yellowLight1: 'rgb(66, 10, 0)',
-  yellowLight2: 'rgb(66, 10, 0)'
-};
-export const textColors = {
-  dark: colors.dark,
-  default: colors.dark,
-  light: colors.light
-};
-export const breakpoints = {
-  xsmallViewport: '480px',
-  smallViewport: '640px',
-  mediumViewport: '832px',
-  largeViewport: '1152px'
-};
-export const borderWidths = {
-  default: '1px',
-  thick: '2px'
-};
-export const borders = {
-  default: `1px solid ${colors.darken2}`,
-  thick: `2px solid ${colors.darken2}`
-};
-export const fontFamilies = {
-  default: "-apple-system, system-ui, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'",
-  monospace: ' Menlo, Courier, monospace'
-};
-
-// On Mac OS X when `-apple-system` is used, two different fonts are rendered at different font sizes.
-// SF Pro Text is used under 21px (0-5) and SF Pro Display is used from 21px and up (6-9).
-// SF Pro Text visually looks slightly bigger than SF Pro Display.
-export const fontSizes = ['9px',
-// 0
-'11px',
-// 1
-'13px',
-// 2
-'15px',
-// 3
-'17px',
-// 4
-'19px',
-// 5
-'21px',
-// 6
-'23px',
-// 7
-'27px',
-// 8
-'35px' // 9
-];
-export const fontWeights = {
-  strong: 500
-};
-export const opacities = {
-  normal: 1,
-  quiet: 0.75,
-  quieter: 0.5,
-  quietest: 0.25,
-  invisible: 0
-};
-export const radii = {
-  default: 3,
-  large: 6,
-  circle: 9999
-};
-export const space = [0, 4, 8, 16, 32, 64, 128];

package/dist/esm/base/ui/theme/theme_context.js

@@ -1,7 +0,0 @@
-import { createContext } from 'react';
-import defaultTheme from './default_theme';
-
-/** @hidden */
-
-const ThemeContext = /*#__PURE__*/createContext(defaultTheme);
-export default ThemeContext;

package/dist/esm/base/ui/theme/use_theme.js

@@ -1,4 +0,0 @@
-import { useContext } from 'react';
-import ThemeContext from './theme_context';
-const useTheme = () => useContext(ThemeContext);
-export default useTheme;

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

@@ -1,165 +0,0 @@
-/** @module @airtable/blocks/ui: Tooltip */ /** */
-import { cx } from 'emotion';
-import * as React from 'react';
-import { baymax } from './baymax_utils';
-import Popover from './popover';
-import Text from './text';
-const FADE_IN_ANIMATION_DURATION = 150;
-
-/**
- * Props for the {@link Tooltip} component.
- *
- * @docsPath UI/components/Tooltip
- */
-
-/** @hidden */
-
-/**
- * A component that renders a tooltip on hover. Wraps its children.
- *
- * [[ Story id="tooltip--example" title="Tooltip example" ]]
- *
- * @docsPath UI/components/Tooltip
- * @component
- */
-class Tooltip extends React.Component {
-  /** @hidden */
-  static placements = Popover.placements;
-  /** @hidden */
-  static fitInWindowModes = Popover.fitInWindowModes;
-
-  /** @hidden */
-  static defaultProps = {
-    placementX: Popover.placements.RIGHT,
-    placementY: Popover.placements.CENTER,
-    placementOffsetX: 8,
-    placementOffsetY: 8,
-    fitInWindowMode: Popover.fitInWindowModes.FLIP
-  };
-  /** @hidden */
-  constructor(props) {
-    super(props);
-    this.state = {
-      isShowingTooltip: false
-    };
-    this._onMouseEnter = this._onMouseEnter.bind(this);
-    this._onMouseLeave = this._onMouseLeave.bind(this);
-    this._onClick = this._onClick.bind(this);
-    this._showTooltip = this._showTooltip.bind(this);
-    this._hideTooltip = this._hideTooltip.bind(this);
-    this._renderTooltipContent = this._renderTooltipContent.bind(this);
-  }
-  /** @internal */
-  _onMouseEnter(e) {
-    this._showTooltip();
-    const originalOnMouseEnter = this.props.children.props.onMouseEnter;
-    if (originalOnMouseEnter) {
-      originalOnMouseEnter(e);
-    }
-  }
-  /** @internal */
-  _onMouseLeave(e) {
-    this._hideTooltip();
-    const originalOnMouseLeave = this.props.children.props.onMouseLeave;
-    if (originalOnMouseLeave) {
-      originalOnMouseLeave(e);
-    }
-  }
-  /** @internal */
-  _onClick(e) {
-    const {
-      shouldHideTooltipOnClick,
-      children
-    } = this.props;
-    if (shouldHideTooltipOnClick) {
-      this._hideTooltip();
-    }
-    const originalOnClick = children.props.onClick;
-    if (originalOnClick) {
-      originalOnClick(e);
-    }
-  }
-  /** @internal */
-  _showTooltip() {
-    this.setState({
-      isShowingTooltip: true
-    });
-  }
-  /** @internal */
-  _hideTooltip() {
-    this.setState({
-      isShowingTooltip: false
-    });
-  }
-  /** @internal */
-  _renderTooltipContent() {
-    const {
-      content,
-      className,
-      style
-    } = this.props;
-    let renderedContent;
-    let isContentAFunction;
-    if (typeof content === 'function') {
-      renderedContent = content();
-      isContentAFunction = true;
-    } else {
-      renderedContent = content;
-      isContentAFunction = false;
-    }
-    return /*#__PURE__*/React.createElement(Text, {
-      className: cx(baymax('nowrap'), className),
-      style: style,
-      position: "relative"
-      // Add padding only when using content.
-      ,
-      padding: isContentAFunction ? null : 2,
-      backgroundColor: "dark",
-      textColor: "white",
-      borderRadius: "default",
-      overflow: "hidden"
-    }, renderedContent);
-  }
-  /** @hidden */
-  render() {
-    const {
-      children,
-      content,
-      disabled
-    } = this.props;
-    if (disabled || !content) {
-      // The tooltip will never show, so just return the children.
-      return children;
-    }
-    const popoverAnchor = /*#__PURE__*/React.cloneElement(React.Children.only(children), {
-      onMouseEnter: this._onMouseEnter,
-      onMouseLeave: this._onMouseLeave,
-      onClick: this._onClick,
-      // Specifically for RecordCard, which needs to know if onClick is defined.
-      hasOnClick: children.props.onClick !== undefined
-    });
-    return /*#__PURE__*/React.createElement(Popover, {
-      renderContent: this._renderTooltipContent,
-      placementX: this.props.placementX,
-      placementY: this.props.placementY,
-      placementOffsetX: this.props.placementOffsetX,
-      placementOffsetY: this.props.placementOffsetY,
-      fitInWindowMode: this.props.fitInWindowMode,
-      isOpen: this.state.isShowingTooltip,
-      backgroundStyle: {
-        // Override the background style of the popover so that it doesn't
-        // take up any space. If we don't do this, the mouseEnter and mouseLeave
-        // handlers won't work, since showing the Popover would place a div over
-        // the content that we care about.
-        top: 0,
-        left: 0,
-        width: 0,
-        height: 0,
-        animationName: 'opacityFadeIn',
-        animationDuration: `${FADE_IN_ANIMATION_DURATION}ms`,
-        animationTimingFunction: 'ease-out'
-      }
-    }, popoverAnchor);
-  }
-}
-export default Tooltip;

package/dist/esm/base/ui/types/aria_props.js

@@ -1 +0,0 @@
-export {};

package/dist/esm/base/ui/types/data_attributes_prop.js

@@ -1 +0,0 @@
-export {};

package/dist/esm/base/ui/types/tooltip_anchor_props.js

@@ -1 +0,0 @@
-export {};

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

@@ -1,14 +0,0 @@
-import { createContext, useContext } from 'react';
-
-/** @internal */
-
-export const FormFieldContext = /*#__PURE__*/createContext(null);
-
-/**
- * Returns the ID for a control (eg input, select, etc.) inside of a `FormField`.
- *
- * @internal
- */
-export default function useFormField() {
-  return useContext(FormFieldContext);
-}

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

@@ -1,19 +0,0 @@
-import { css } from 'emotion';
-import useTheme from './theme/use_theme';
-import { allStylesParser } from './system/index';
-
-/** @internal */
-export default function useStyledSystem(styleProps) {
-  let styleParser = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : allStylesParser;
-  const theme = useTheme();
-
-  // Add the theme to the style props because that's how the parser expects it.
-  const styles = styleParser({
-    ...styleProps,
-    theme
-  });
-
-  // At this point `styles` is still an object, we need to turn it into a class name.
-  const classNameForStyleProps = css(styles);
-  return classNameForStyleProps;
-}

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

@@ -1,9 +0,0 @@
-import useTheme from './theme/use_theme';
-
-/** @internal */
-export default function useTextColorForBackgroundColor(backgroundColor) {
-  const {
-    textColorsByBackgroundColor
-  } = useTheme();
-  return textColorsByBackgroundColor[backgroundColor];
-}

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

@@ -1,82 +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: ViewPicker */ /** */
-import * as React from 'react';
-import { ViewType } from '../types/view';
-import useWatchable from '../../shared/ui/use_watchable';
-import { useSdk } from '../../shared/ui/sdk_context';
-import ModelPickerSelect from './model_picker_select';
-
-/**
- * Props shared between the {@link ViewPicker} and {@link ViewPickerSynced} components.
- */
-
-/**
- * Props for the {@link ViewPicker} component. Also accepts:
- * * {@link SelectStyleProps}
- *
- * @docsPath UI/components/ViewPicker
- */
-
-/**
- * Dropdown menu component for selecting views.
- *
- * [[ Story id="modelpickers--viewpicker-example" title="View picker example" ]]
- *
- * @component
- * @docsPath UI/components/ViewPicker
- */
-const ViewPicker = (props, ref) => {
-  const {
-    table,
-    view: selectedView,
-    shouldAllowPickingNone,
-    // Exclude ViewType.FORM
-    allowedTypes = [ViewType.GRID, ViewType.CALENDAR, ViewType.GALLERY, ViewType.KANBAN],
-    placeholder,
-    // Destructure `onChange` to prevent it from being passed to `Select`.
-    onChange,
-    ...restOfProps
-  } = props;
-  const sdk = useSdk();
-  useWatchable(sdk.base, ['tables']);
-  useWatchable(table, ['views']);
-  if (!table || table.isDeleted) {
-    return null;
-  }
-  function _onChange(viewId) {
-    if (onChange) {
-      const view = table && !table.isDeleted && viewId ? table.getViewByIdIfExists(viewId) : null;
-      onChange(view);
-    }
-  }
-  let placeholderToUse;
-  if (placeholder === undefined) {
-    // Let's set a good default value for the placeholder, depending
-    // on the shouldAllowPickingNone flag.
-    placeholderToUse = shouldAllowPickingNone ? 'None' : 'Pick a view...';
-  } else {
-    placeholderToUse = placeholder;
-  }
-  const allowedTypesSet = {};
-  if (allowedTypes) {
-    for (const allowedType of allowedTypes) {
-      allowedTypesSet[allowedType] = true;
-    }
-  }
-  const shouldAllowPickingViewFn = view => allowedTypesSet[view.type];
-  return /*#__PURE__*/React.createElement(ModelPickerSelect, _extends({}, restOfProps, {
-    ref: ref,
-    models: table.views
-    // `shouldAllowPickingModelFn` is typed as `AnyModel`. Cast to any since we only expect `Field`.
-    ,
-    shouldAllowPickingModelFn: shouldAllowPickingViewFn,
-    selectedModelId: selectedView && !selectedView.isDeleted ? selectedView.id : null,
-    modelKeysToWatch: ['name'],
-    shouldAllowPickingNone: shouldAllowPickingNone,
-    placeholder: placeholderToUse,
-    onChange: _onChange
-  }));
-};
-const ForwardedRefViewPicker = /*#__PURE__*/React.forwardRef(ViewPicker);
-ForwardedRefViewPicker.displayName = 'ViewPicker';
-export default ForwardedRefViewPicker;

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

@@ -1,59 +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: ViewPicker */ /** */
-import * as React from 'react';
-import useSynced from '../../shared/ui/use_synced';
-import useWatchable from '../../shared/ui/use_watchable';
-import { useSdk } from '../../shared/ui/sdk_context';
-import ViewPicker from './view_picker';
-
-/**
- * Props for the {@link ViewPickerSynced} component. Also accepts:
- * * {@link SelectStyleProps}
- *
- * @docsPath UI/components/ViewPickerSynced
- * @groupPath UI/components/ViewPicker
- */
-
-/**
- * A wrapper around the {@link ViewPicker} component that syncs with {@link GlobalConfig}.
- *
- * [[ Story id="modelpickers--viewpickersynced-example" title="Synced view picker example" ]]
- *
- * @docsPath UI/components/ViewPickerSynced
- * @groupPath UI/components/ViewPicker
- * @component
- */
-const ViewPickerSynced = (props, ref) => {
-  const {
-    globalConfigKey,
-    table,
-    onChange,
-    disabled,
-    ...restOfProps
-  } = props;
-  const [viewId, setViewId, canSetViewId] = useSynced(globalConfigKey);
-  const sdk = useSdk();
-  useWatchable(sdk.base, ['tables']);
-  useWatchable(table, ['views']);
-  function _getViewFromGlobalConfigValue() {
-    if (!table || table.isDeleted) {
-      return null;
-    }
-    return typeof viewId === 'string' && table ? table.getViewByIdIfExists(viewId) : null;
-  }
-  return /*#__PURE__*/React.createElement(ViewPicker, _extends({}, restOfProps, {
-    ref: ref,
-    table: table,
-    view: _getViewFromGlobalConfigValue(),
-    onChange: view => {
-      setViewId(view ? view.id : null);
-      if (onChange) {
-        onChange(view);
-      }
-    },
-    disabled: disabled || !canSetViewId
-  }));
-};
-const ForwardedRefViewPickerSynced = /*#__PURE__*/React.forwardRef(ViewPickerSynced);
-ForwardedRefViewPickerSynced.displayName = 'ViewPickerSynced';
-export default ForwardedRefViewPickerSynced;