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

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

@@ -1,55 +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: SelectButtons */ /** */
-import * as React from 'react';
-import { spawnError } from '../../shared/error_utils';
-import useSynced from '../../shared/ui/use_synced';
-import SelectButtons from './select_buttons';
-
-/**
- * Props for the {@link SelectButtonsSynced} component. Also accepts:
- * * {@link SelectButtonsStyleProps}
- *
- * @docsPath UI/components/SelectButtonsSynced
- * @groupPath UI/components/SelectButtons
- */
-
-/**
- *  A wrapper around the {@link SelectButtons} component that syncs with {@link GlobalConfig}.
- *
- * [[ Story id="selectbuttons--synced-example" title="SelectButtonsSynced example" ]]
- *
- * @docsPath UI/components/SelectButtonsSynced
- * @groupPath UI/components/SelectButtons
- * @component
- */
-const SelectButtonsSynced = (props, ref) => {
-  const {
-    globalConfigKey,
-    onChange,
-    disabled,
-    ...restOfProps
-  } = props;
-  const [value, setValue, canSetValue] = useSynced(globalConfigKey);
-  let selectValue;
-  if (value === null || value === undefined) {
-    selectValue = null;
-  } else if (typeof value === 'string' || typeof value === 'number' || typeof value === 'boolean') {
-    selectValue = value;
-  } else {
-    throw spawnError('SelectButtonsSynced only works with a global config value that is a string, number, boolean, null or undefined.');
-  }
-  return /*#__PURE__*/React.createElement(SelectButtons, _extends({}, restOfProps, {
-    ref: ref,
-    value: selectValue,
-    onChange: newValue => {
-      setValue(newValue);
-      if (onChange) {
-        onChange(newValue);
-      }
-    },
-    disabled: disabled || !canSetValue
-  }));
-};
-const ForwardedRefSelectButtonsSynced = /*#__PURE__*/React.forwardRef(SelectButtonsSynced);
-ForwardedRefSelectButtonsSynced.displayName = 'SelectButtonsSynced';
-export default ForwardedRefSelectButtonsSynced;

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

@@ -1,58 +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: Select */ /** */
-import * as React from 'react';
-import { spawnError } from '../../shared/error_utils';
-import useSynced from '../../shared/ui/use_synced';
-import Select from './select';
-
-/**
- * Props for the {@link SelectSynced} component. Also accepts:
- * * {@link SelectStyleProps}
- *
- * @docsPath UI/components/SelectSynced
- * @groupPath UI/components/Select
- */
-
-/**
- * A wrapper around the {@link Select} component that syncs with {@link GlobalConfig}.
- *
- * [[ Story id="select--synced-example" title="Synced select example" ]]
- *
- * @docsPath UI/components/SelectSynced
- * @groupPath UI/components/Select
- * @component
- */
-const SelectSynced = (props, ref) => {
-  const {
-    globalConfigKey,
-    disabled,
-    onChange,
-    ...restOfProps
-  } = props;
-  const [value, setValue, canSetValue] = useSynced(globalConfigKey);
-  let selectValue;
-  if (value === null || value === undefined) {
-    selectValue = null;
-  } else if (typeof value === 'string' || typeof value === 'number' || typeof value === 'boolean') {
-    selectValue = value;
-  } else {
-    throw spawnError('SelectSynced only works with a global config value that is a string, number, boolean, null or undefined.');
-  }
-  return /*#__PURE__*/React.createElement(Select, _extends({}, restOfProps, {
-    ref: ref,
-    value: selectValue,
-    onChange: newValue => {
-      if (newValue === undefined) {
-        newValue = null;
-      }
-      setValue(newValue);
-      if (onChange) {
-        onChange(newValue);
-      }
-    },
-    disabled: disabled || !canSetValue
-  }));
-};
-const ForwardedRefSelectSynced = /*#__PURE__*/React.forwardRef(SelectSynced);
-ForwardedRefSelectSynced.displayName = 'SelectSynced';
-export default ForwardedRefSelectSynced;

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

@@ -1,160 +0,0 @@
-/** @module @airtable/blocks/ui: Switch */ /** */
-import { cx } from 'emotion';
-import React from 'react';
-import { compose } from '@styled-system/core';
-import { createEnum } from '../../shared/private_utils';
-import useStyledSystem from './use_styled_system';
-import { maxWidth, minWidth, width, flexItemSet, positionSet, spacingSet, display, backgroundColor } from './system';
-import useTheme from './theme/use_theme';
-import { useSwitchSize, ControlSize } from './control_sizes';
-
-/**
- * Variants for the {@link Switch} component:
- *
- * • **default**
- *
- * Green switch for toggling a setting or other boolean property.
- *
- * • **danger**
- *
- * Red switch for toggling a dangerous or infrequently-used setting.
- */
-
-const SwitchVariant = createEnum('default', 'danger');
-
-/** @internal */
-function useSwitchVariant() {
-  let variant = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : SwitchVariant.default;
-  const {
-    switchVariants
-  } = useTheme();
-  return switchVariants[variant];
-}
-
-/**
- * Props shared between the {@link Switch} and {@link SwitchSynced} components.
- *
- * @noInheritDoc
- */
-
-/**
- * Props for the {@link Switch} component. Also accepts:
- * * {@link SwitchStyleProps}
- *
- * @docsPath UI/components/Switch
- */
-
-/**
- * Style props for the {@link Switch} component. Also accepts:
- * * {@link BackgroundColorProps}
- * * {@link FlexItemSetProps}
- * * {@link MinWidthProps}
- * * {@link MaxWidthProps}
- * * {@link PositionSetProps}
- * * {@link SpacingSetProps}
- * * {@link WidthProps}
- *
- * @noInheritDoc
- */
-
-const styleParser = compose(maxWidth, minWidth, width, flexItemSet, positionSet, spacingSet, display, backgroundColor);
-
-/**
- * A toggle switch for controlling boolean values. Similar to a checkbox.
- *
- * [[ Story id="switch--example" title="Switch example" ]]
- *
- * By default, the Switch component is styled to be full-width (`width="100%"`) with a gray
- * background to match other controls like Select, SelectButtons, Input, etc. This behavior can be
- * overridden using style props. For example, you can set `backgroundColor="transparent"` on the
- * Switch for a transparent background.
- *
- * @docsPath UI/components/Switch
- * @component
- */
-const Switch = (props, ref) => {
-  const {
-    disabled,
-    id,
-    label,
-    tabIndex = 0,
-    variant = SwitchVariant.default,
-    size = ControlSize.default,
-    value,
-    onClick,
-    onChange,
-    onMouseEnter,
-    onMouseLeave,
-    className,
-    style,
-    'aria-label': ariaLabel,
-    'aria-describedby': ariaDescribedBy,
-    'aria-labelledby': ariaLabelledBy,
-    ...styleProps
-  } = props;
-  const classNameForStyleProps = useStyledSystem({
-    display: 'flex',
-    width: '100%',
-    ...styleProps
-  }, styleParser);
-  const {
-    baseClassName: classNameForVariant,
-    switchContainerClassName,
-    switchClassName,
-    switchLabelClassName
-  } = useSwitchVariant(variant);
-  const classNameForSize = useSwitchSize(size);
-  if (!label && !ariaLabelledBy && !ariaLabel) {
-    // eslint-disable-next-line no-console
-    console.warn('<Switch> should be labeled using either the `label`, `ariaLabel`, or `ariaLabelledBy` prop');
-  }
-  function _onClick(e) {
-    // onClick should only be defined in the case of a tooltip
-    if (onClick) {
-      onClick(e);
-    }
-    _toggleValue();
-  }
-  function _onKeyDown(e) {
-    if (e.ctrlKey || e.altKey || e.metaKey) {
-      return;
-    }
-    if (['Enter', ' '].includes(e.key)) {
-      e.preventDefault();
-      _toggleValue();
-    }
-  }
-  function _toggleValue() {
-    if (onChange) {
-      onChange(!value);
-    }
-  }
-  return /*#__PURE__*/React.createElement("div", {
-    ref: ref
-    // TODO (stephen): remove tooltip anchor props
-    ,
-    onMouseEnter: onMouseEnter,
-    onMouseLeave: onMouseLeave,
-    onClick: disabled ? undefined : _onClick,
-    onKeyDown: disabled ? undefined : _onKeyDown,
-    id: id,
-    className: cx(classNameForVariant, classNameForSize, classNameForStyleProps, className),
-    style: style,
-    tabIndex: disabled ? undefined : tabIndex,
-    role: "checkbox",
-    "aria-disabled": disabled,
-    "aria-checked": !!value,
-    "aria-label": ariaLabel,
-    "aria-labelledby": ariaLabelledBy,
-    "aria-describedby": ariaDescribedBy
-  }, /*#__PURE__*/React.createElement("div", {
-    className: switchContainerClassName
-  }, /*#__PURE__*/React.createElement("div", {
-    className: switchClassName
-  })), label && /*#__PURE__*/React.createElement("label", {
-    className: switchLabelClassName
-  }, label));
-};
-const ForwardedRefSwitch = /*#__PURE__*/React.forwardRef(Switch);
-ForwardedRefSwitch.displayName = 'Switch';
-export default ForwardedRefSwitch;

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

@@ -1,46 +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: Switch */ /** */
-import * as React from 'react';
-import useSynced from '../../shared/ui/use_synced';
-import Switch from './switch';
-
-/**
- * Props for the {@link SwitchSynced} component. Also accepts:
- * * {@link SwitchStyleProps}
- *
- * @docsPath UI/components/SwitchSynced
- * @groupPath UI/components/Switch
- */
-
-/**
- * A toggleable switch for controlling boolean values, synced with {@link GlobalConfig}. Similar to a checkbox.
- *
- * [[ Story id="switch--example-synced" title="Synced switch example" ]]
- *
- * @docsPath UI/components/SwitchSynced
- * @groupPath UI/components/Switch
- * @component
- */
-const SwitchSynced = (props, ref) => {
-  const {
-    disabled,
-    globalConfigKey,
-    onChange,
-    ...restOfProps
-  } = props;
-  const [value, setValue, canSetValue] = useSynced(globalConfigKey);
-  return /*#__PURE__*/React.createElement(Switch, _extends({}, restOfProps, {
-    ref: ref,
-    value: !!value,
-    onChange: newValue => {
-      setValue(newValue);
-      if (onChange) {
-        onChange(newValue);
-      }
-    },
-    disabled: disabled || !canSetValue
-  }));
-};
-const ForwardedRefSwitchSynced = /*#__PURE__*/React.forwardRef(SwitchSynced);
-ForwardedRefSwitchSynced.displayName = 'SwitchSynced';
-export default ForwardedRefSwitchSynced;

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

@@ -1,39 +0,0 @@
-/** @hidden */ /** */
-import * as React from 'react';
-import withHooks from '../../shared/ui/with_hooks';
-import { useSdk } from '../../shared/ui/sdk_context';
-import globalConfigSyncedComponentHelpers from '../../shared/ui/global_config_synced_component_helpers';
-
-/** @hidden */
-
-/** @hidden */
-export class Synced extends React.Component {
-  /** @hidden */
-  constructor(props) {
-    super(props);
-    this._setValue = this._setValue.bind(this);
-  }
-  /** @internal */
-  _setValue(newValue) {
-    this.props.sdk.globalConfig.setAsync(this.props.globalConfigKey, newValue);
-  }
-  /** @hidden */
-  render() {
-    const {
-      globalConfig
-    } = this.props.sdk;
-    const value = globalConfig.get(this.props.globalConfigKey);
-    const canSetValue = globalConfig.hasPermissionToSet(this.props.globalConfigKey);
-    return this.props.render({
-      value,
-      canSetValue,
-      setValue: this._setValue
-    });
-  }
-}
-export default withHooks(Synced, props => {
-  globalConfigSyncedComponentHelpers.useDefaultWatchesForSyncedComponent(props.globalConfigKey);
-  return {
-    sdk: useSdk()
-  };
-});

package/dist/esm/base/ui/system/all_styles_set.js

@@ -1,86 +0,0 @@
-/** @module @airtable/blocks/ui/system: All style props */ /** */
-import { compose } from '@styled-system/core';
-import { appearanceSet, dimensionsSet, flexContainerSet, flexItemSet, positionSet, spacingSet, typographySet, display, overflow } from './index';
-
-/**
- * In the Blocks SDK, UI components can be styled via a set of supported style props.
- * These style props (e.g. `width`, `margin`, `backgroundColor`) take a subset of
- * supported CSS properties and expose them as explicit React component props.
- *
- * Here is an example that uses the {@link Box} layout primitive:
- *
- * ```
- * <Box
- *     display="flex"
- *     alignItems="center"
- *     justifyContent="center"
- *     width="200px"
- *     height="200px"
- * >
- *     Hello world
- * </Box>
- * ```
- *
- * This is equivalent to the following:
- *
- * ```
- * <div style={{
- *     display: 'flex',
- *     alignItems: 'center',
- *     justifyContent: 'center',
- *     width: '200px',
- *     height: '200px',
- * }}>
- *     Hello world
- * </div>
- * ```
- *
- * Style props also provide access to Airtable's design tokens, including our color
- * palette, typographic scale, and spacing scale. This allows developers to quickly
- * build UIs that adhere to the Airtable design system. As an example, numbers passed
- * to the `margin` or `padding` props are converted to our spacing scale, based on
- * powers of two.
- *
- * ```
- * <Box margin={0} /> // margin: 0;
- * <Box margin={1} /> // margin: 4px;
- * <Box margin={2} /> // margin: 8px;
- * <Box margin={3} /> // margin: 16px;
- *
- * // Negative margins are also supported
- * <Box margin={-1} /> // margin: -4px;
- * <Box margin={-2} /> // margin: -8px;
- * <Box margin={-3} /> // margin: -16px;
- * ```
- *
- * To override this behavior and use a specific pixel value (or other units, like percentages
- * or ems/rems), you may pass a string like `200px`. However, this is generally discouraged,
- * as these values don't adhere to the same grid/vertical rhythm as the rest of our components.
- *
- * As another example, style props like `backgroundColor` and `textColor` accept
- * {@link Colors|color names} that ensure visual consistency with the Airtable styleguide.
- * Like the spacing scale, you can always opt out by passing in hex/rgb/hsl strings directly.
- *
- * ```
- * <Box backgroundColor="blue" textColor="white" />
- * ```
- *
- * Each component in our UI library exposes a particular subset of style props, documented as
- * style prop interfaces. For more information, refer to the API reference for the specific
- * component that you're trying to use.
- *
- * All supported style props:
- * * {@link AppearanceSetProps|Appearance}
- * * {@link DimensionsSetProps|Dimensions}
- * * {@link FlexContainerSetProps|Flex container}
- * * {@link FlexItemSetProps|Flex item}
- * * {@link PositionSetProps|Position}
- * * {@link SpacingSetProps|Spacing}
- * * {@link TypographySetProps|Typography}
- * * {@link DisplayProps|Display}
- * * {@link OverflowProps|Overflow}
- *
- * @docsPath UI/Style System/All styles
- */
-
-export const allStylesParser = compose(appearanceSet, dimensionsSet, flexContainerSet, flexItemSet, positionSet, spacingSet, typographySet, display, overflow);

package/dist/esm/base/ui/system/appearance/appearance_set.js

@@ -1,21 +0,0 @@
-/** @module @airtable/blocks/ui/system: Appearance */ /** */
-import { system } from '@styled-system/core';
-import { config as backgroundColorConfig } from './background_color';
-import { config as borderConfig } from './border';
-import { config as borderRadiusConfig } from './border_radius';
-import { config as boxShadowConfig } from './box_shadow';
-import { config as opacityConfig } from './opacity';
-
-/**
- * Style props for the visual appearance of an element.
- *
- * @docsPath UI/Style System/Appearance
- */
-
-export const appearanceSet = system({
-  ...backgroundColorConfig,
-  ...borderRadiusConfig,
-  ...borderConfig,
-  ...boxShadowConfig,
-  ...opacityConfig
-});

package/dist/esm/base/ui/system/appearance/background_color.js

@@ -1,12 +0,0 @@
-/** @module @airtable/blocks/ui/system: Appearance */ /** */
-import { system } from '@styled-system/core';
-
-/** */
-
-export const config = {
-  backgroundColor: {
-    property: 'backgroundColor',
-    scale: 'colors'
-  }
-};
-export const backgroundColor = system(config);

package/dist/esm/base/ui/system/appearance/border.js

@@ -1,48 +0,0 @@
-/** @module @airtable/blocks/ui/system: Appearance */ /** */
-import { system } from '@styled-system/core';
-
-/** */
-
-export const config = {
-  border: {
-    property: 'border',
-    scale: 'borders'
-  },
-  borderWidth: {
-    property: 'borderWidth',
-    scale: 'borderWidths'
-  },
-  borderStyle: {
-    property: 'borderStyle',
-    scale: 'borderStyles'
-  },
-  borderColor: {
-    property: 'borderColor',
-    scale: 'colors'
-  },
-  borderTop: {
-    property: 'borderTop',
-    scale: 'borders'
-  },
-  borderRight: {
-    property: 'borderRight',
-    scale: 'borders'
-  },
-  borderBottom: {
-    property: 'borderBottom',
-    scale: 'borders'
-  },
-  borderLeft: {
-    property: 'borderLeft',
-    scale: 'borders'
-  },
-  borderX: {
-    properties: ['borderLeft', 'borderRight'],
-    scale: 'borders'
-  },
-  borderY: {
-    properties: ['borderTop', 'borderBottom'],
-    scale: 'borders'
-  }
-};
-export const border = system(config);

package/dist/esm/base/ui/system/appearance/border_radius.js

@@ -1,12 +0,0 @@
-/** @module @airtable/blocks/ui/system: Appearance */ /** */
-import { system } from '@styled-system/core';
-
-/** */
-
-export const config = {
-  borderRadius: {
-    property: 'borderRadius',
-    scale: 'radii'
-  }
-};
-export const borderRadius = system(config);

package/dist/esm/base/ui/system/appearance/box_shadow.js

@@ -1,12 +0,0 @@
-/** @module @airtable/blocks/ui/system: Appearance */ /** */
-import { system } from '@styled-system/core';
-
-/** */
-
-export const config = {
-  boxShadow: {
-    property: 'boxShadow',
-    scale: 'shadows'
-  }
-};
-export const boxShadow = system(config);

package/dist/esm/base/ui/system/appearance/opacity.js

@@ -1,12 +0,0 @@
-/** @module @airtable/blocks/ui/system: Appearance */ /** */
-import { system } from '@styled-system/core';
-
-/** */
-
-export const config = {
-  opacity: {
-    property: 'opacity',
-    scale: 'opacities'
-  }
-};
-export const opacity = system(config);

package/dist/esm/base/ui/system/dimensions/dimensions_set.js

@@ -1,23 +0,0 @@
-/** @module @airtable/blocks/ui/system: Dimensions */ /** */
-import { system } from '@styled-system/core';
-import { config as heightConfig } from './height';
-import { config as maxHeightConfig } from './max_height';
-import { config as maxWidthConfig } from './max_width';
-import { config as minHeightConfig } from './min_height';
-import { config as minWidthConfig } from './min_width';
-import { config as widthConfig } from './width';
-
-/**
- * Style props for the dimensions of an element.
- *
- * @docsPath UI/Style System/Dimensions
- */
-
-export const dimensionsSet = system({
-  ...heightConfig,
-  ...maxWidthConfig,
-  ...maxHeightConfig,
-  ...minHeightConfig,
-  ...minWidthConfig,
-  ...widthConfig
-});

package/dist/esm/base/ui/system/dimensions/height.js

@@ -1,12 +0,0 @@
-/** @module @airtable/blocks/ui/system: Dimensions */ /** */
-import { system } from '@styled-system/core';
-
-/** */
-
-export const config = {
-  height: {
-    property: 'height',
-    scale: 'dimensions'
-  }
-};
-export const height = system(config);

package/dist/esm/base/ui/system/dimensions/max_height.js

@@ -1,12 +0,0 @@
-/** @module @airtable/blocks/ui/system: Dimensions */ /** */
-import { system } from '@styled-system/core';
-
-/** */
-
-export const config = {
-  maxHeight: {
-    property: 'maxHeight',
-    scale: 'dimensions'
-  }
-};
-export const maxHeight = system(config);

package/dist/esm/base/ui/system/dimensions/max_width.js

@@ -1,12 +0,0 @@
-/** @module @airtable/blocks/ui/system: Dimensions */ /** */
-import { system } from '@styled-system/core';
-
-/** */
-
-export const config = {
-  maxWidth: {
-    property: 'maxWidth',
-    scale: 'dimensions'
-  }
-};
-export const maxWidth = system(config);

package/dist/esm/base/ui/system/dimensions/min_height.js

@@ -1,12 +0,0 @@
-/** @module @airtable/blocks/ui/system: Dimensions */ /** */
-import { system } from '@styled-system/core';
-
-/** */
-
-export const config = {
-  minHeight: {
-    property: 'minHeight',
-    scale: 'dimensions'
-  }
-};
-export const minHeight = system(config);

package/dist/esm/base/ui/system/dimensions/min_width.js

@@ -1,12 +0,0 @@
-/** @module @airtable/blocks/ui/system: Dimensions */ /** */
-import { system } from '@styled-system/core';
-
-/** */
-
-export const config = {
-  minWidth: {
-    property: 'minWidth',
-    scale: 'dimensions'
-  }
-};
-export const minWidth = system(config);

package/dist/esm/base/ui/system/dimensions/width.js

@@ -1,12 +0,0 @@
-/** @module @airtable/blocks/ui/system: Dimensions */ /** */
-import { system } from '@styled-system/core';
-
-/** */
-
-export const config = {
-  width: {
-    property: 'width',
-    scale: 'dimensions'
-  }
-};
-export const width = system(config);