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

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

@@ -1,102 +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: FormField */ /** */
-import React, { useState } from 'react';
-import { cx } from 'emotion';
-import { compose } from '@styled-system/core';
-import { getLocallyUniqueId } from '../../shared/private_utils';
-import Box from './box';
-import Text, { TextSize } from './text';
-import Label from './label';
-import { FormFieldContext } from './use_form_field';
-import useStyledSystem from './use_styled_system';
-import { maxWidth, minWidth, width, flexItemSet, positionSet, spacingSet } from './system';
-
-/**
- * Style props for the {@link FormField} component. Accepts:
- * * {@link FlexItemSetProps}
- * * {@link MaxWidthProps}
- * * {@link MinWidthProps}
- * * {@link PositionSetProps}
- * * {@link SpacingSetProps}
- * * {@link WidthProps}
- *
- * @noInheritDoc
- */
-
-const styleParser = compose(maxWidth, minWidth, width, flexItemSet, positionSet, spacingSet);
-
-/**
- * Props for the {@link FormField} component. Also accepts:
- * * {@link FormFieldStyleProps}
- *
- * @noInheritDoc
- * @docsPath UI/components/FormField
- */
-
-/**
- * A form field component that wraps any control field, supplying a provided label and optional
- * description.
- *
- * [[ Story id="formfield--example" title="Form field example" ]]
- *
- * This component will automatically set up the `for` attribute on the outputted label with the `id` attribute
- * on the wrapped control field for the following UI components: Label, Select, FieldPicker,
- * ModelPicker, and ViewPicker. If you'd like to manually override this behavior, you can provide an
- * `htmlFor` prop to this component and manually set the `id` attribute on your wrapped control to
- * the same value.
- *
- * @docsPath UI/components/FormField
- * @component
- */
-const FormField = (props, ref) => {
-  const {
-    id,
-    className,
-    style,
-    label = TextSize.default,
-    htmlFor,
-    description,
-    children,
-    ...styleProps
-  } = props;
-  const classNameForStyleProps = useStyledSystem({
-    width: '100%',
-    ...styleProps
-  }, styleParser);
-  const [generatedId] = useState(getLocallyUniqueId('form-field-'));
-  const controlId = htmlFor || generatedId;
-  const [generatedDescriptionId] = useState(getLocallyUniqueId('input-description-'));
-  const descriptionId = description ? generatedDescriptionId : '';
-  let optionalLabelProps;
-  if (description) {
-    optionalLabelProps = {
-      marginBottom: 1
-    };
-  }
-  return /*#__PURE__*/React.createElement(Box, {
-    ref: ref,
-    id: id,
-    className: cx(classNameForStyleProps, className),
-    style: style,
-    display: "flex",
-    flexDirection: "column",
-    marginBottom: 3
-  }, /*#__PURE__*/React.createElement(Label, _extends({
-    htmlFor: controlId,
-    size: "default"
-  }, optionalLabelProps), label), description && /*#__PURE__*/React.createElement(Text, {
-    variant: "paragraph",
-    id: descriptionId,
-    size: "default",
-    textColor: "light",
-    marginBottom: "6px"
-  }, description), /*#__PURE__*/React.createElement(FormFieldContext.Provider, {
-    value: {
-      controlId,
-      descriptionId
-    }
-  }, children));
-};
-const ForwardedRefFormField = /*#__PURE__*/React.forwardRef(FormField);
-ForwardedRefFormField.displayName = 'FormField';
-export default ForwardedRefFormField;

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

@@ -1,9 +0,0 @@
-/**
- * Everything in Geometry is lifted from Hyperbase.
- * Once we refactor/deprecate Popover we can deprecate this as well.
- *
- * @internal
- */ /** */
-export { default as Rect } from './rect';
-export { default as Size } from './size';
-export { default as Point } from './point';

package/dist/esm/base/ui/geometry/point.js

@@ -1,12 +0,0 @@
-/** @internal */
-export default class Point {
-  /** @internal */
-
-  /** @internal */
-
-  /** @internal */
-  constructor(x, y) {
-    this.x = x;
-    this.y = y;
-  }
-}

package/dist/esm/base/ui/geometry/rect.js

@@ -1,44 +0,0 @@
-import Point from './point';
-
-/** @internal */
-export default class Rect {
-  /** @internal */
-
-  /** @internal */
-
-  /** @internal */
-
-  /** @internal */
-
-  /** @internal */
-  constructor(x, y, width, height) {
-    this.x = x;
-    this.y = y;
-    this.width = width;
-    this.height = height;
-  }
-  /** @internal */
-  growBy(amount) {
-    return new Rect(this.x - amount, this.y - amount, this.width + 2 * amount, this.height + 2 * amount);
-  }
-  /** @internal */
-  top() {
-    return this.y;
-  }
-  /** @internal */
-  left() {
-    return this.x;
-  }
-  /** @internal */
-  right() {
-    return this.x + this.width;
-  }
-  /** @internal */
-  bottom() {
-    return this.y + this.height;
-  }
-  /** @internal */
-  centerPoint() {
-    return new Point(this.x + this.width / 2, this.y + this.height / 2);
-  }
-}

package/dist/esm/base/ui/geometry/size.js

@@ -1,12 +0,0 @@
-/** @internal */
-export default class Size {
-  /** @internal */
-
-  /** @internal */
-
-  /** @internal */
-  constructor(width, height) {
-    this.width = width;
-    this.height = height;
-  }
-}

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

@@ -1,125 +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: Heading */ /** */
-import * as React from 'react';
-import { cx } from 'emotion';
-import { invariant } from '../../shared/error_utils';
-import { has, createEnum, keys } from '../../shared/private_utils';
-import useStyledSystem from './use_styled_system';
-import getStylePropsForResponsiveProp from './system/utils/get_style_props_for_responsive_prop';
-import useTheme from './theme/use_theme';
-
-/**
- * Sizes for the {@link Heading} component.
- */
-
-const HeadingSize = createEnum('xsmall', 'small', 'default', 'large', 'xlarge', 'xxlarge');
-
-/**
- * Size prop for the {@link Heading} component.
- */
-
-/**
- * Variant prop for the {@link Heading} component.
- * • **default** - Headings typically used for titles.
- * • **caps** - All-caps headings typically used for field names and smaller section headings.
- */
-
-const HeadingVariant = createEnum('default', 'caps');
-
-/** @internal */
-function warnIfHeadingSizeOutOfRangeForVariant(size, variant, headingSizesForVariant) {
-  if (process.env.NODE_ENV === 'development' && !has(headingSizesForVariant, size)) {
-    // eslint-disable-next-line
-    console.warn(`[@airtable/blocks/ui] warning: <Heading variant='${variant}' /> only supports the following values for the size prop: ${Object.keys(headingSizesForVariant).join(', ')}. The component will fall back to the default size.`);
-  }
-}
-
-/** @internal */
-function useHeadingStyle(headingSizeProp, variant) {
-  const {
-    headingStyles
-  } = useTheme();
-  const headingSizesForVariant = headingStyles[variant];
-  let styleProps;
-  if (typeof headingSizeProp === 'string') {
-    warnIfHeadingSizeOutOfRangeForVariant(headingSizeProp, variant, headingSizesForVariant);
-    styleProps = headingSizesForVariant[headingSizeProp] || headingSizesForVariant[HeadingSize.default];
-  } else {
-    const responsiveSizePropObject = {};
-    for (const sizeKey of keys(headingSizeProp)) {
-      const sizeProp = headingSizeProp[sizeKey];
-      invariant(sizeProp, 'sizeProp');
-      warnIfHeadingSizeOutOfRangeForVariant(sizeProp, variant, headingSizesForVariant);
-      responsiveSizePropObject[sizeKey] = sizeProp || HeadingSize.default;
-    }
-    styleProps = getStylePropsForResponsiveProp(responsiveSizePropObject,
-    // Cast to any to because `caps` don't all have the same sizes as `default`.
-    // This in turn requires each size to be typed as optional.
-    headingSizesForVariant);
-  }
-  return useStyledSystem(styleProps);
-}
-
-/**
- * Props for the {@link Heading} component. Also supports:
- * * {@link AllStylesProps}
- * * {@link AriaProps}
- *
- * @docsPath UI/components/Heading
- * @noInheritDoc
- */
-
-/**
- * A heading component with sizes and variants.
- *
- * [[ Story id="heading--example" title="Heading example" ]]
- *
- * @docsPath UI/components/Heading
- * @component
- */
-const Heading = (props, ref) => {
-  const {
-    as: Component = 'h3',
-    size = HeadingSize.default,
-    variant = HeadingVariant.default,
-    children,
-    id,
-    role,
-    dataAttributes,
-    className,
-    style,
-    'aria-label': ariaLabel,
-    'aria-labelledby': ariaLabelledBy,
-    'aria-describedby': ariaDescribedBy,
-    'aria-controls': ariaControls,
-    'aria-expanded': ariaExpanded,
-    'aria-haspopup': ariaHasPopup,
-    'aria-hidden': ariaHidden,
-    'aria-live': ariaLive,
-    ...styleProps
-  } = props;
-  const classNameForHeadingSize = useHeadingStyle(size, variant);
-  const classNameForStyleProps = useStyledSystem({
-    fontFamily: 'default',
-    textColor: 'default',
-    ...styleProps
-  });
-  return /*#__PURE__*/React.createElement(Component, _extends({
-    ref: ref,
-    id: id,
-    className: cx(classNameForHeadingSize, classNameForStyleProps, className),
-    style: style,
-    role: role,
-    "aria-label": ariaLabel,
-    "aria-labelledby": ariaLabelledBy,
-    "aria-describedby": ariaDescribedBy,
-    "aria-controls": ariaControls,
-    "aria-expanded": ariaExpanded,
-    "aria-haspopup": ariaHasPopup,
-    "aria-hidden": ariaHidden,
-    "aria-live": ariaLive
-  }, dataAttributes), children);
-};
-const ForwardedRefHeading = /*#__PURE__*/React.forwardRef(Heading);
-ForwardedRefHeading.displayName = 'Heading';
-export default ForwardedRefHeading;

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

@@ -1,102 +0,0 @@
-/** @module @airtable/blocks/ui: Icon */ /** */
-import React from 'react';
-import { compose } from '@styled-system/core';
-import { cx } from 'emotion';
-import warning from '../../shared/warning';
-import useStyledSystem from './use_styled_system';
-import { flexItemSet, positionSet, margin, width, height } from './system';
-import { legacyIconNameToPhosphorIconName, phosphorIconConfig, deprecatedIconNameToReplacementName } from './icon_config';
-
-/**
- * Style props shared between the {@link Icon} and {@link FieldIcon} components. Accepts:
- * * {@link FlexItemSetProps}
- * * {@link PositionSetProps}
- * * {@link MarginProps}
- *
- * @noInheritDoc
- */
-
-const styleParser = compose(flexItemSet, positionSet, margin, width, height);
-
-/**
- * Props shared between the {@link Icon} and {@link FieldIcon} components.
- *
- * @noInheritDoc
- */
-// TODO (stephen): inherit shared props without inheriting style props
-
-/**
- * Props for the {@link Icon} component. Also accepts:
- * * {@link IconStyleProps}
- */
-
-/**
- * A vector icon from the Airtable icon set.
- *
- * [[ Story id="icon--example" title="Icon example" height="576px"]]
- *
- * @component
- * @docsPath UI/components/Icon
- */
-const Icon = (props, ref) => {
-  const {
-    name,
-    size = 16,
-    fillColor = 'currentColor',
-    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,
-    pathClassName,
-    pathStyle,
-    suppressWarning = false,
-    ...styleProps
-  } = props;
-  const classNameForStyleProps = useStyledSystem({
-    ...styleProps,
-    width: size,
-    height: size
-  }, styleParser);
-  const phosphorIconName = legacyIconNameToPhosphorIconName[name];
-  const pathData = phosphorIconName ? phosphorIconConfig[phosphorIconName] : null;
-  if (!pathData) {
-    return null;
-  }
-  if (deprecatedIconNameToReplacementName.has(name) && !suppressWarning) {
-    const alternative = deprecatedIconNameToReplacementName.get(name);
-    let alternativeText = '';
-    if (alternative) {
-      alternativeText = `Use <Icon name='${alternative}' .../> instead.`;
-    }
-    warning(`'${name}' as an icon name is deprecated. ${alternativeText}`);
-  }
-  return /*#__PURE__*/React.createElement("svg", {
-    ref: ref,
-    viewBox: "0 0 16 16"
-    // TODO (stephen): remove tooltip anchor props
-    ,
-    onMouseEnter: onMouseEnter,
-    onMouseLeave: onMouseLeave,
-    onClick: onClick,
-    className: cx(classNameForStyleProps, className),
-    style: {
-      shapeRendering: 'geometricPrecision',
-      ...style
-    }
-  }, /*#__PURE__*/React.createElement("path", {
-    fillRule: "evenodd",
-    className: pathClassName,
-    style: pathStyle,
-    fill: fillColor,
-    d: pathData
-  }));
-};
-const ForwardedRefIcon = /*#__PURE__*/React.forwardRef(Icon);
-ForwardedRefIcon.displayName = 'Icon';
-export default ForwardedRefIcon;