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

package/dist/{cjs → esm}/base/ui/theme/default_theme/link_variants.js

@@ -6,7 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = void 0;
 var _emotion = require("emotion");
 var _tokens = require("./tokens");
-var baseStyles = (0, _emotion.css)({
+const baseStyles = (0, _emotion.css)({
   alignItems: 'center',
   justifyContent: 'center',
   borderRadius: _tokens.radii.default,
@@ -18,10 +18,10 @@ var baseStyles = (0, _emotion.css)({
     opacity: 1
   },
   '&:focus': {
-    boxShadow: "0 0 0 2px ".concat(_tokens.colors.darken3)
+    boxShadow: `0 0 0 2px ${_tokens.colors.darken3}`
   }
 });
-var linkVariants = {
+const linkVariants = {
   default: (0, _emotion.cx)(baseStyles, (0, _emotion.css)({
     color: _tokens.colors.blueBright
   })),

package/dist/{cjs → esm}/base/ui/theme/default_theme/select_buttons_variants.js

@@ -6,7 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = void 0;
 var _emotion = require("emotion");
 var _tokens = require("./tokens");
-var baseContainerStyles = (0, _emotion.css)({
+const baseContainerStyles = (0, _emotion.css)({
   borderRadius: _tokens.radii.default,
   backgroundColor: _tokens.colors.lightGray2,
   boxSizing: 'border-box',
@@ -16,14 +16,14 @@ var baseContainerStyles = (0, _emotion.css)({
   userSelect: 'none',
   fontWeight: 400,
   '&:active, &[data-focused="true"]': {
-    boxShadow: "inset 0 0 0 2px ".concat(_tokens.colors.darken3)
+    boxShadow: `inset 0 0 0 2px ${_tokens.colors.darken3}`
   },
   '&[data-disabled="true"]': {
     opacity: _tokens.opacities.quieter,
     cursor: 'default'
   }
 });
-var baseOptionStyles = (0, _emotion.css)({
+const baseOptionStyles = (0, _emotion.css)({
   position: 'relative',
   display: 'flex',
   flex: 'auto',
@@ -63,7 +63,7 @@ var baseOptionStyles = (0, _emotion.css)({
     opacity: _tokens.opacities.quiet
   }
 });
-var selectButtonsVariants = {
+const selectButtonsVariants = {
   default: {
     containerClassNameForVariant: baseContainerStyles,
     optionClassNameForVariant: baseOptionStyles

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

@@ -0,0 +1,50 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _emotion = require("emotion");
+var _tokens = require("./tokens");
+const styleForChevron = {
+  // https://codepen.io/tigt/post/optimizing-svgs-in-data-uris
+  // You can use https://www.npmjs.com/package/mini-svg-data-uri to generate the `background-image` from a svg.
+  backgroundImage: `url("data:image/svg+xml,%3csvg width='7' height='6' viewBox='0 0 7 6' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cpath fill-rule='evenodd' clip-rule='evenodd' d='M.601.8h4.8a.6.6 0 01.48.96l-2.4 3.2a.6.6 0 01-.96 0l-2.4-3.2A.6.6 0 01.601.8z' fill='rgba(0%2c 0%2c 0%2c 0.5)'/%3e%3c/svg%3e")`,
+  backgroundRepeat: 'no-repeat'
+};
+const baseStyles = (0, _emotion.css)({
+  fontFamily: _tokens.fontFamilies.default,
+  borderRadius: _tokens.radii.default,
+  justifyContent: 'center',
+  alignItems: 'center',
+  paddingTop: 0,
+  paddingBottom: 0,
+  fontWeight: 400,
+  outline: 'none',
+  appearance: 'none',
+  border: 'none',
+  ...styleForChevron,
+  '&:not(:disabled)': {
+    cursor: 'pointer',
+    '&:hover': {
+      opacity: _tokens.opacities.quiet
+    },
+    '&:active': {
+      opacity: 1
+    },
+    '&:focus': {
+      boxShadow: `inset 0 0 0 2px ${_tokens.colors.darken3}`
+    }
+  },
+  '&:disabled': {
+    cursor: 'default',
+    opacity: _tokens.opacities.quieter
+  }
+});
+const selectVariants = {
+  default: (0, _emotion.cx)(baseStyles, (0, _emotion.css)({
+    color: _tokens.colors.dark,
+    backgroundColor: _tokens.colors.lightGray2
+  }))
+};
+var _default = exports.default = selectVariants;

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

@@ -0,0 +1,85 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _emotion = require("emotion");
+var _css_helpers = _interopRequireDefault(require("../../css_helpers"));
+var _tokens = require("./tokens");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const SWITCH_WIDTH = 20;
+const SWITCH_HEIGHT = 12;
+const SWITCH_PADDING = 2;
+const CIRCLE_SIZE = SWITCH_HEIGHT - 2 * SWITCH_PADDING;
+const switchClassName = (0, _emotion.css)({
+  width: CIRCLE_SIZE,
+  height: CIRCLE_SIZE,
+  transition: '0.085s all ease-in',
+  borderRadius: _tokens.radii.circle,
+  backgroundColor: _tokens.colors.white
+});
+const switchContainerClassName = (0, _emotion.css)({
+  flex: 'none',
+  width: SWITCH_WIDTH,
+  height: SWITCH_HEIGHT,
+  padding: SWITCH_PADDING,
+  transition: '0.085s all ease-in',
+  boxSizing: 'border-box',
+  borderRadius: _tokens.radii.circle,
+  backgroundColor: _tokens.colors.darken2
+});
+const switchLabelClassName = (0, _emotion.css)({
+  cursor: 'inherit',
+  userSelect: 'none',
+  marginLeft: _tokens.space[2],
+  color: _tokens.colors.dark,
+  flex: 'auto'
+});
+const baseStyles = (0, _emotion.css)({
+  alignItems: 'center',
+  borderRadius: _tokens.radii.default,
+  boxSizing: 'border-box',
+  outline: 'none',
+  fontFamily: _tokens.fontFamilies.default,
+  backgroundColor: _tokens.colors.lightGray2,
+  '&[aria-disabled="true"]': {
+    opacity: _tokens.opacities.quieter
+  },
+  '&:not([aria-disabled="true"])': {
+    cursor: 'pointer',
+    '&:hover': {
+      opacity: _tokens.opacities.quiet
+    },
+    '&:focus': {
+      boxShadow: `inset 0 0 0 2px ${_tokens.colors.darken3}`
+    }
+  },
+  [`&[aria-checked="true"] .${switchClassName}`]: {
+    transform: 'translateX(100%)'
+  }
+});
+const subcomponentClassNames = {
+  switchClassName,
+  switchContainerClassName,
+  switchLabelClassName: (0, _emotion.cx)(switchLabelClassName, _css_helpers.default.TRUNCATE)
+};
+const switchVariants = {
+  default: {
+    baseClassName: (0, _emotion.cx)(baseStyles, (0, _emotion.css)({
+      [`&[aria-checked="true"] > .${switchContainerClassName}`]: {
+        backgroundColor: _tokens.colors.greenBright
+      }
+    })),
+    ...subcomponentClassNames
+  },
+  danger: {
+    baseClassName: (0, _emotion.cx)(baseStyles, (0, _emotion.css)({
+      [`&[aria-checked="true"] > .${switchContainerClassName}`]: {
+        backgroundColor: _tokens.colors.redBright
+      }
+    })),
+    ...subcomponentClassNames
+  }
+};
+var _default = exports.default = switchVariants;

package/dist/{cjs → esm}/base/ui/theme/default_theme/text_button_variants.js

@@ -6,9 +6,9 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = void 0;
 var _emotion = require("emotion");
 var _tokens = require("./tokens");
-var NOT_DISABLED = '&:not([aria-disabled="true"])';
-var DISABLED = '&[aria-disabled="true"]';
-var baseStyles = (0, _emotion.css)({
+const NOT_DISABLED = '&:not([aria-disabled="true"])';
+const DISABLED = '&[aria-disabled="true"]';
+const baseStyles = (0, _emotion.css)({
   alignItems: 'center',
   justifyContent: 'center',
   borderRadius: _tokens.radii.default,
@@ -23,14 +23,14 @@ var baseStyles = (0, _emotion.css)({
       opacity: 1
     },
     '&:focus': {
-      boxShadow: "0 0 0 2px ".concat(_tokens.colors.darken3)
+      boxShadow: `0 0 0 2px ${_tokens.colors.darken3}`
     }
   },
   [DISABLED]: {
     opacity: _tokens.opacities.quieter
   }
 });
-var textButtonVariants = {
+const textButtonVariants = {
   default: (0, _emotion.cx)(baseStyles, (0, _emotion.css)({
     color: _tokens.colors.blueBright
   })),

package/dist/{cjs → esm}/base/ui/theme/default_theme/text_styles.js

@@ -4,7 +4,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-var textStyles = {
+const textStyles = {
   default: {
     small: {
       fontSize: 1,

package/dist/{cjs → esm}/base/ui/theme/default_theme/tokens.js

@@ -4,7 +4,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.textColorsByBackgroundColor = exports.textColors = exports.space = exports.radii = exports.opacities = exports.fontWeights = exports.fontSizes = exports.fontFamilies = exports.colors = exports.breakpoints = exports.borders = exports.borderWidths = void 0;
-var colors = exports.colors = {
+const colors = exports.colors = {
   // neutrals
   white: 'hsl(0, 0%, 100%)',
   dark: 'hsl(0, 0%, 20%)',
@@ -84,7 +84,7 @@ var colors = exports.colors = {
   yellowLight1: 'rgb(255, 214, 110)',
   yellowLight2: 'rgb(255, 234, 182)'
 };
-var textColorsByBackgroundColor = exports.textColorsByBackgroundColor = {
+const textColorsByBackgroundColor = exports.textColorsByBackgroundColor = {
   // blue bg
   blueBright: 'white',
   blue: 'white',
@@ -146,26 +146,26 @@ var textColorsByBackgroundColor = exports.textColorsByBackgroundColor = {
   yellowLight1: 'rgb(66, 10, 0)',
   yellowLight2: 'rgb(66, 10, 0)'
 };
-var textColors = exports.textColors = {
+const textColors = exports.textColors = {
   dark: colors.dark,
   default: colors.dark,
   light: colors.light
 };
-var breakpoints = exports.breakpoints = {
+const breakpoints = exports.breakpoints = {
   xsmallViewport: '480px',
   smallViewport: '640px',
   mediumViewport: '832px',
   largeViewport: '1152px'
 };
-var borderWidths = exports.borderWidths = {
+const borderWidths = exports.borderWidths = {
   default: '1px',
   thick: '2px'
 };
-var borders = exports.borders = {
-  default: "1px solid ".concat(colors.darken2),
-  thick: "2px solid ".concat(colors.darken2)
+const borders = exports.borders = {
+  default: `1px solid ${colors.darken2}`,
+  thick: `2px solid ${colors.darken2}`
 };
-var fontFamilies = exports.fontFamilies = {
+const fontFamilies = exports.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'
 };
@@ -173,7 +173,7 @@ var fontFamilies = exports.fontFamilies = {
 // 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.
-var fontSizes = exports.fontSizes = ['9px',
+const fontSizes = exports.fontSizes = ['9px',
 // 0
 '11px',
 // 1
@@ -193,19 +193,19 @@ var fontSizes = exports.fontSizes = ['9px',
 // 8
 '35px' // 9
 ];
-var fontWeights = exports.fontWeights = {
+const fontWeights = exports.fontWeights = {
   strong: 500
 };
-var opacities = exports.opacities = {
+const opacities = exports.opacities = {
   normal: 1,
   quiet: 0.75,
   quieter: 0.5,
   quietest: 0.25,
   invisible: 0
 };
-var radii = exports.radii = {
+const radii = exports.radii = {
   default: 3,
   large: 6,
   circle: 9999
 };
-var space = exports.space = [0, 4, 8, 16, 32, 64, 128];
+const space = exports.space = [0, 4, 8, 16, 32, 64, 128];

package/dist/{cjs → esm}/base/ui/theme/theme_context.js

@@ -1,13 +1,13 @@
 "use strict";
 
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
 var _react = require("react");
 var _default_theme = _interopRequireDefault(require("./default_theme"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 /** @hidden */
 
-var ThemeContext = /*#__PURE__*/(0, _react.createContext)(_default_theme.default);
+const ThemeContext = /*#__PURE__*/(0, _react.createContext)(_default_theme.default);
 var _default = exports.default = ThemeContext;

package/dist/{cjs → esm}/base/ui/theme/use_theme.js

@@ -1,11 +1,11 @@
 "use strict";
 
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
 var _react = require("react");
 var _theme_context = _interopRequireDefault(require("./theme_context"));
-var useTheme = () => (0, _react.useContext)(_theme_context.default);
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const useTheme = () => (0, _react.useContext)(_theme_context.default);
 var _default = exports.default = useTheme;

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

@@ -0,0 +1,175 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _emotion = require("emotion");
+var React = _interopRequireWildcard(require("react"));
+var _baymax_utils = require("./baymax_utils");
+var _popover = _interopRequireDefault(require("./popover"));
+var _text = _interopRequireDefault(require("./text"));
+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: Tooltip */ /** */
+
+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.default.placements;
+  /** @hidden */
+  static fitInWindowModes = _popover.default.fitInWindowModes;
+
+  /** @hidden */
+  static defaultProps = {
+    placementX: _popover.default.placements.RIGHT,
+    placementY: _popover.default.placements.CENTER,
+    placementOffsetX: 8,
+    placementOffsetY: 8,
+    fitInWindowMode: _popover.default.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.default, {
+      className: (0, _emotion.cx)((0, _baymax_utils.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.default, {
+      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);
+  }
+}
+var _default = exports.default = Tooltip;