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

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

@@ -1,152 +0,0 @@
-/** @module @airtable/blocks/ui: Input */ /** */
-import { cx } from 'emotion';
-import * as React from 'react';
-import { compose } from '@styled-system/core';
-import { createEnum } from '../../shared/private_utils';
-import useTheme from './theme/use_theme';
-import useStyledSystem from './use_styled_system';
-import useFormField from './use_form_field';
-import { maxWidth, minWidth, width, flexItemSet, positionSet, margin } from './system';
-import { ControlSize, useInputSize } from './control_sizes';
-
-/** @internal */
-
-const InputVariant = createEnum('default');
-
-/** @internal */
-function useInputVariant() {
-  let variant = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : InputVariant.default;
-  const {
-    inputVariants
-  } = useTheme();
-  return inputVariants[variant];
-}
-export const ValidInputType = createEnum('date', 'datetime-local', 'email', 'month', 'number', 'password', 'search', 'tel', 'text', 'time', 'url', 'week');
-/** */
-
-/**
- * Style props shared between the {@link Input} and {@link InputSynced} 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 Input} and {@link InputSynced} components.
- *
- * @noInheritDoc
- */
-
-export const SupportedInputType = createEnum('date', 'datetime-local', 'email', 'month', 'number', 'password', 'search', 'tel', 'text', 'time', 'url', 'week');
-/**
- * Supported types for the {@link Input} component. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#%3Cinput%3E_types) for more information.
- */
-
-/**
- * Props for the {@link Input} component. Also accepts:
- * * {@link InputStyleProps}
- *
- * @docsPath UI/components/Input
- */
-
-/**
- * An input component. A wrapper around `<input>` that fits in with Airtable's user interface.
- *
- * [[ Story id="input--example" title="Input example" ]]
- *
- * @docsPath UI/components/Input
- * @component
- */
-const Input = (props, ref) => {
-  const {
-    size = ControlSize.default,
-    type = SupportedInputType.text,
-    value,
-    placeholder,
-    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,
-    onChange,
-    onBlur,
-    onFocus,
-    style,
-    className,
-    disabled,
-    required,
-    spellCheck,
-    tabIndex,
-    id,
-    name,
-    autoFocus,
-    max,
-    maxLength,
-    min,
-    minLength,
-    step,
-    pattern,
-    readOnly,
-    autoComplete,
-    'aria-labelledby': ariaLabelledBy,
-    'aria-describedby': ariaDescribedByProp,
-    ...styleProps
-  } = props;
-  const formFieldContextValue = useFormField();
-  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 classNameForInputVariant = useInputVariant();
-  const classNameForInputSize = useInputSize(size);
-  const classNameForStyleProps = useStyledSystem({
-    width: '100%',
-    ...styleProps
-  }, styleParser);
-  return /*#__PURE__*/React.createElement("input", {
-    ref: ref,
-    value: value,
-    type: type,
-    placeholder: placeholder,
-    disabled: disabled,
-    required: required,
-    spellCheck: spellCheck,
-    tabIndex: tabIndex,
-    id: id || controlId,
-    name: name,
-    autoFocus: autoFocus,
-    max: max,
-    maxLength: maxLength,
-    min: min,
-    minLength: minLength,
-    step: step,
-    pattern: pattern,
-    readOnly: readOnly,
-    autoComplete: autoComplete,
-    onChange: onChange,
-    onBlur: onBlur,
-    onFocus: onFocus
-    // TODO (stephen): remove tooltip anchor props
-    ,
-    onMouseEnter: onMouseEnter,
-    onMouseLeave: onMouseLeave,
-    onClick: onClick,
-    style: style,
-    className: cx(classNameForInputSize, classNameForInputVariant, classNameForStyleProps, className),
-    "aria-labelledby": ariaLabelledBy,
-    "aria-describedby": ariaDescribedBy
-  });
-};
-const ForwardedRefInput = /*#__PURE__*/React.forwardRef(Input);
-ForwardedRefInput.displayName = 'Input';
-export default ForwardedRefInput;

package/dist/esm/base/ui/input_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: Input */ /** */
-import * as React from 'react';
-import { spawnError } from '../../shared/error_utils';
-import useSynced from '../../shared/ui/use_synced';
-import Input, { SupportedInputType } from './input';
-
-/**
- * Props for the {@link InputSynced} component. Also accepts:
- * * {@link InputStyleProps}
- *
- * @docsPath UI/components/InputSynced
- * @groupPath UI/components/Input
- */
-
-/**
- * A wrapper around the {@link Input} component that syncs with {@link GlobalConfig}.
- *
- * [[ Story id="input--example-synced" title="Synced input example" ]]
- *
- * @docsPath UI/components/InputSynced
- * @groupPath UI/components/Input
- * @component
- */
-const InputSynced = (props, ref) => {
-  const {
-    globalConfigKey,
-    type = SupportedInputType.text,
-    disabled,
-    onChange,
-    ...restOfProps
-  } = props;
-  const [value, setValue, canSetValue] = useSynced(globalConfigKey);
-  let inputValue;
-  if (value === null || value === undefined) {
-    // If an input gets null or undefined for value, React treats it as uncontrolled
-    // and will throw warnings when it becomes controlled.
-    inputValue = '';
-  } else if (typeof value === 'string') {
-    inputValue = value;
-  } else {
-    throw spawnError('InputSynced only works with a global config value that is a string, null or undefined.');
-  }
-  return /*#__PURE__*/React.createElement(Input, _extends({}, restOfProps, {
-    ref: ref,
-    disabled: disabled || !canSetValue,
-    onChange: e => {
-      setValue(e.target.value);
-      if (onChange) {
-        onChange(e);
-      }
-    },
-    value: inputValue,
-    type: type
-  }));
-};
-const ForwardedRefInputSynced = /*#__PURE__*/React.forwardRef(InputSynced);
-ForwardedRefInputSynced.displayName = 'InputSynced';
-export default ForwardedRefInputSynced;

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

@@ -1,66 +0,0 @@
-/**
- * @internal
- */
-export const KeyCodes = Object.freeze({
-  BACKSPACE: 8,
-  TAB: 9,
-  ENTER: 13,
-  ALT: 18,
-  ESCAPE: 27,
-  SPACE: 32,
-  PAGE_UP: 33,
-  PAGE_DOWN: 34,
-  END: 35,
-  HOME: 36,
-  LEFT: 37,
-  UP: 38,
-  RIGHT: 39,
-  DOWN: 40,
-  DELETE: 46,
-  A: 65,
-  B: 66,
-  C: 67,
-  D: 68,
-  E: 69,
-  F: 70,
-  G: 71,
-  H: 72,
-  I: 73,
-  J: 74,
-  K: 75,
-  L: 76,
-  M: 77,
-  N: 78,
-  O: 79,
-  P: 80,
-  Q: 81,
-  R: 82,
-  S: 83,
-  T: 84,
-  U: 85,
-  V: 86,
-  W: 87,
-  X: 88,
-  Y: 89,
-  Z: 90,
-  F2: 113,
-  F3: 114,
-  COMMA: 188,
-  PERIOD: 190,
-  FORWARD_SLASH: 191,
-  BACKTICK: 192,
-  BACK_SLASH: 220
-});
-
-/**
- * @internal
- * OS-aware check for command/ctrl key.
- */
-export function isCommandModifierKeyEvent(e) {
-  const isMac = window.navigator.platform.toLowerCase().indexOf('mac') !== -1;
-  if (isMac) {
-    return e.metaKey;
-  } else {
-    return e.ctrlKey;
-  }
-}

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

@@ -1,73 +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: Label */ /** */
-import * as React from 'react';
-import { cx } from 'emotion';
-import useStyledSystem from './use_styled_system';
-import { allStylesParser } from './system/index';
-import { TextSize, useTextStyle } from './text';
-
-/**
- * Props for the {@link Label} component. Also accepts:
- * * {@link AllStylesProps}
- * * {@link AriaProps}
- *
- * @noInheritDoc
- * @docsPath UI/components/Label
- */
-
-/**
- * A label component.
- *
- * [[ Story id="label--example" title="Label example" ]]
- *
- * @docsPath UI/components/Label
- * @component
- */
-const Label = (props, ref) => {
-  const {
-    size = TextSize.default,
-    htmlFor,
-    id,
-    children,
-    className,
-    style,
-    dataAttributes,
-    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,
-    ...styleProps
-  } = props;
-  const classNameForTextStyle = useTextStyle(size);
-  const classNameForStyleProps = useStyledSystem({
-    display: 'inline-block',
-    textColor: 'light',
-    fontWeight: 'strong',
-    marginBottom: '6px',
-    ...styleProps
-  }, allStylesParser);
-  return /*#__PURE__*/React.createElement("label", _extends({
-    ref: ref,
-    htmlFor: htmlFor,
-    id: id,
-    className: cx(classNameForTextStyle, 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 ForwardedRefLabel = /*#__PURE__*/React.forwardRef(Label);
-ForwardedRefLabel.displayName = 'Label';
-export default ForwardedRefLabel;

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

@@ -1,189 +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: Link */ /** */
-import * as React from 'react';
-import { cx } from 'emotion';
-import { compose } from '@styled-system/core';
-import { createEnum } from '../../shared/private_utils';
-import useStyledSystem from './use_styled_system';
-import useTheme from './theme/use_theme';
-import { maxWidth, minWidth, width, flexItemSet, positionSet, fontWeight, spacingSet, display } from './system';
-import { useTextStyle, TextSize } from './text';
-import Icon from './icon';
-
-/**
- * Style props for the {@link Link} component. Also accepts:
- * * {@link FlexItemSetProps}
- * * {@link FontWeightProps}
- * * {@link MaxWidthProps}
- * * {@link MinWidthProps}
- * * {@link PositionSetProps}
- * * {@link SpacingSetProps}
- * * {@link WidthProps}
- *
- * @noInheritDoc
- */
-
-const styleParser = compose(display, maxWidth, minWidth, width, flexItemSet, positionSet, fontWeight, spacingSet);
-
-/**
- * Variants for the {@link Link} component:
- *
- * • **default**
- *
- * Blue text.
- *
- * • **dark**
- *
- * Dark gray text.
- *
- * • **light**
- *
- * Light gray text.
- */
-
-const LinkVariant = createEnum('default', 'dark', 'light');
-
-/** @internal */
-function useLinkVariant() {
-  let variant = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : LinkVariant.default;
-  const {
-    linkVariants
-  } = useTheme();
-  return linkVariants[variant];
-}
-
-/**
- * Props for the {@link Link} component. Also supports:
- * * {@link AriaProps}
- * * {@link LinkStyleProps}
- *
- * @docsPath UI/components/Link
- * @noInheritDoc
- */
-
-// A "reasonable" scheme is one which does not have any escaped characters.
-// This means if it passes this regex, we can confidently check to make sure the
-// scheme is not "javascript://" to avoid XSS. Otherwise, "javascript" may be encoded
-// as "&#106avascript://" or any other permutation of escaped characters.
-// Ref: https://tools.ietf.org/html/rfc3986#section-3.1
-const reasonableUrlSchemeRegex = /^[a-z0-9]+:\/\//i;
-
-/** @internal */
-function _getSanitizedHref(href) {
-  if (!href) {
-    return undefined;
-  }
-  const hasScheme = href.indexOf('://') !== -1;
-  if (!hasScheme) {
-    // If it's a relative URL (like '/foo'), leave it alone.
-    return href;
-  } else if (reasonableUrlSchemeRegex.test(href) && !/^javascript:/i.test(href) && !/^data:/i.test(href)) {
-    // If it has a scheme and we can be 100% sure the scheme is
-    // not javascript or data, then leave it alone.
-    return href;
-  } else {
-    // We can't be confident that the scheme isn't javascript or data,
-    // (possibly with escaped characters), so prepend http:// to avoid
-    // XSS.
-    return 'http://' + href;
-  }
-}
-
-/**
- * A styled link component with security benefits.
- *
- * [[ Story id="link--example" title="Link example" ]]
- *
- * ## Security benefits
- *
- * This component is a styled wrapper around the `<a>` tag that offers a few security benefits:
- *
- * - Limited XSS protection. If the `href` starts with `javascript:` or `data:`, `http://` will be prepended.
- * - There is [reverse tabnabbing prevention](https://www.owasp.org/index.php/Reverse_Tabnabbing). If `target` is set, the `rel` attribute will be set to `noopener noreferrer`.
- *
- * Developers should use `Link` instead of `a` when possible.
- *
- * @docsPath UI/components/Link
- * @component
- */
-const Link = (props, ref) => {
-  const {
-    size = TextSize.default,
-    variant = LinkVariant.default,
-    underline = false,
-    icon,
-    href,
-    id,
-    target,
-    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,
-    tabIndex,
-    className,
-    style,
-    children,
-    dataAttributes,
-    '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 classNameForTextStyle = useTextStyle(size);
-  const classNameForLinkVariant = useLinkVariant(variant);
-  const classNameForUnderline = useStyledSystem({
-    textDecoration: underline ? 'underline' : 'none'
-  });
-  const classNameForStyleProps = useStyledSystem({
-    display: 'inline-flex',
-    // Use a negative margin to undo the padding.
-    padding: '0 0.1em',
-    margin: '0 -0.1em',
-    maxWidth: '100%',
-    ...styleProps
-  }, styleParser);
-
-  // Set rel="noopener noreferrer" to avoid reverse tabnabbing.
-  // https://www.owasp.org/index.php/Reverse_Tabnabbing
-  const rel = target ? 'noopener noreferrer' : undefined;
-  return /*#__PURE__*/React.createElement("a", _extends({
-    ref: ref,
-    href: _getSanitizedHref(href),
-    target: target,
-    id: id,
-    rel: rel
-    // TODO (stephen): remove tooltip anchor props
-    ,
-    onMouseEnter: onMouseEnter,
-    onMouseLeave: onMouseLeave,
-    onClick: onClick,
-    tabIndex: tabIndex,
-    className: cx(classNameForTextStyle, classNameForLinkVariant, classNameForUnderline, classNameForStyleProps, className),
-    style: 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
-  }, dataAttributes), typeof icon === 'string' ? /*#__PURE__*/React.createElement(Icon, {
-    name: icon,
-    size: "1em",
-    flex: "none",
-    marginRight: "0.5em"
-  }) : icon, children);
-};
-const ForwardedRefLink = /*#__PURE__*/React.forwardRef(Link);
-ForwardedRefLink.displayName = 'Link';
-export default ForwardedRefLink;

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

@@ -1,52 +0,0 @@
-/** @module @airtable/blocks/ui: Loader */ /** */
-import { cx } from 'emotion';
-import * as React from 'react';
-import { compose } from '@styled-system/core';
-import LoaderCore from '../../shared/ui/loader';
-import { baymax } from './baymax_utils';
-import useStyledSystem from './use_styled_system';
-import { flexItemSet, positionSet, margin } from './system';
-
-/**
- * Style props for the {@link Loader} component. Accepts:
- * * {@link FlexItemSetProps}
- * * {@link MarginProps}
- * * {@link PositionSetProps}
- */
-
-const styleParser = compose(flexItemSet, positionSet, margin);
-
-/**
- * Props for the {@link Loader} component. Also accepts:
- * * {@link LoaderStyleProps}
- *
- * @docsPath UI/components/Loader
- * @noInheritDoc
- */
-
-// Override the default props and then just proxy through to our loader.
-/**
- * A loading spinner component.
- *
- * [[ Story id="loader--example" title="Loader example" ]]
- *
- * @docsPath UI/components/Loader
- * @component
- */
-const Loader = _ref => {
-  let {
-    fillColor = '#888',
-    scale = 0.3,
-    className,
-    style,
-    ...styleProps
-  } = _ref;
-  const classNameForStyleProps = useStyledSystem(styleProps, styleParser);
-  return /*#__PURE__*/React.createElement(LoaderCore, {
-    fillColor: fillColor,
-    scale: scale,
-    className: cx(baymax('animate-spin-scale animate-infinite'), classNameForStyleProps, className),
-    style: style
-  });
-};
-export default Loader;