@airtable/blocks 0.0.0-experimental-e5ab33b68-20250905 → 0.0.0-experimental-3e47d4d04-20250909

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

@@ -1,19 +1,12 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var _emotion = require("emotion");
-var _react = _interopRequireDefault(require("react"));
-var _core = require("@styled-system/core");
-var _private_utils = require("../../shared/private_utils");
-var _use_styled_system = _interopRequireDefault(require("./use_styled_system"));
-var _system = require("./system");
-var _use_theme = _interopRequireDefault(require("./theme/use_theme"));
-var _control_sizes = require("./control_sizes");
-function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 /** @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:
@@ -27,14 +20,14 @@ function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e
  * Red switch for toggling a dangerous or infrequently-used setting.
  */
 
-const SwitchVariant = (0, _private_utils.createEnum)('default', 'danger');
+const SwitchVariant = createEnum('default', 'danger');
 
 /** @internal */
 function useSwitchVariant() {
   let variant = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : SwitchVariant.default;
   const {
     switchVariants
-  } = (0, _use_theme.default)();
+  } = useTheme();
   return switchVariants[variant];
 }
 
@@ -64,7 +57,7 @@ function useSwitchVariant() {
  * @noInheritDoc
  */
 
-const styleParser = (0, _core.compose)(_system.maxWidth, _system.minWidth, _system.width, _system.flexItemSet, _system.positionSet, _system.spacingSet, _system.display, _system.backgroundColor);
+const styleParser = compose(maxWidth, minWidth, width, flexItemSet, positionSet, spacingSet, display, backgroundColor);
 
 /**
  * A toggle switch for controlling boolean values. Similar to a checkbox.
@@ -86,7 +79,7 @@ const Switch = (props, ref) => {
     label,
     tabIndex = 0,
     variant = SwitchVariant.default,
-    size = _control_sizes.ControlSize.default,
+    size = ControlSize.default,
     value,
     onClick,
     onChange,
@@ -99,7 +92,7 @@ const Switch = (props, ref) => {
     'aria-labelledby': ariaLabelledBy,
     ...styleProps
   } = props;
-  const classNameForStyleProps = (0, _use_styled_system.default)({
+  const classNameForStyleProps = useStyledSystem({
     display: 'flex',
     width: '100%',
     ...styleProps
@@ -110,7 +103,7 @@ const Switch = (props, ref) => {
     switchClassName,
     switchLabelClassName
   } = useSwitchVariant(variant);
-  const classNameForSize = (0, _control_sizes.useSwitchSize)(size);
+  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');
@@ -136,7 +129,7 @@ const Switch = (props, ref) => {
       onChange(!value);
     }
   }
-  return /*#__PURE__*/_react.default.createElement("div", {
+  return /*#__PURE__*/React.createElement("div", {
     ref: ref
     // TODO (stephen): remove tooltip anchor props
     ,
@@ -145,7 +138,7 @@ const Switch = (props, ref) => {
     onClick: disabled ? undefined : _onClick,
     onKeyDown: disabled ? undefined : _onKeyDown,
     id: id,
-    className: (0, _emotion.cx)(classNameForVariant, classNameForSize, classNameForStyleProps, className),
+    className: cx(classNameForVariant, classNameForSize, classNameForStyleProps, className),
     style: style,
     tabIndex: disabled ? undefined : tabIndex,
     role: "checkbox",
@@ -154,14 +147,14 @@ const Switch = (props, ref) => {
     "aria-label": ariaLabel,
     "aria-labelledby": ariaLabelledBy,
     "aria-describedby": ariaDescribedBy
-  }, /*#__PURE__*/_react.default.createElement("div", {
+  }, /*#__PURE__*/React.createElement("div", {
     className: switchContainerClassName
-  }, /*#__PURE__*/_react.default.createElement("div", {
+  }, /*#__PURE__*/React.createElement("div", {
     className: switchClassName
-  })), label && /*#__PURE__*/_react.default.createElement("label", {
+  })), label && /*#__PURE__*/React.createElement("label", {
     className: switchLabelClassName
   }, label));
 };
-const ForwardedRefSwitch = /*#__PURE__*/_react.default.forwardRef(Switch);
+const ForwardedRefSwitch = /*#__PURE__*/React.forwardRef(Switch);
 ForwardedRefSwitch.displayName = 'Switch';
-var _default = exports.default = ForwardedRefSwitch;
+export default ForwardedRefSwitch;

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

@@ -0,0 +1,46 @@
+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

@@ -0,0 +1,39 @@
+/** @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/{cjs → esm}/base/ui/system/all_styles_set.js

@@ -1,12 +1,6 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.allStylesParser = void 0;
-var _core = require("@styled-system/core");
-var _index = require("./index");
 /** @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.
@@ -89,4 +83,4 @@ var _index = require("./index");
  * @docsPath UI/Style System/All styles
  */
 
-const allStylesParser = exports.allStylesParser = (0, _core.compose)(_index.appearanceSet, _index.dimensionsSet, _index.flexContainerSet, _index.flexItemSet, _index.positionSet, _index.spacingSet, _index.typographySet, _index.display, _index.overflow);
+export const allStylesParser = compose(appearanceSet, dimensionsSet, flexContainerSet, flexItemSet, positionSet, spacingSet, typographySet, display, overflow);

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

@@ -0,0 +1,21 @@
+/** @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

@@ -0,0 +1,12 @@
+/** @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/{cjs → esm}/base/ui/system/appearance/border.js

@@ -1,15 +1,9 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.config = exports.border = void 0;
-var _core = require("@styled-system/core");
 /** @module @airtable/blocks/ui/system: Appearance */ /** */
+import { system } from '@styled-system/core';
 
 /** */
 
-const config = exports.config = {
+export const config = {
   border: {
     property: 'border',
     scale: 'borders'
@@ -51,4 +45,4 @@ const config = exports.config = {
     scale: 'borders'
   }
 };
-const border = exports.border = (0, _core.system)(config);
+export const border = system(config);

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

@@ -0,0 +1,12 @@
+/** @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

@@ -0,0 +1,12 @@
+/** @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

@@ -0,0 +1,12 @@
+/** @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

@@ -0,0 +1,23 @@
+/** @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

@@ -0,0 +1,12 @@
+/** @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

@@ -0,0 +1,12 @@
+/** @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

@@ -0,0 +1,12 @@
+/** @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

@@ -0,0 +1,12 @@
+/** @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

@@ -0,0 +1,12 @@
+/** @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

@@ -0,0 +1,12 @@
+/** @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);

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

@@ -0,0 +1,13 @@
+/** @module @airtable/blocks/ui/system: Display */ /** */
+import { system } from '@styled-system/core';
+
+/**
+ * Style prop for the display type of an element.
+ *
+ * @docsPath UI/Style System/Display
+ */
+
+const config = {
+  display: true
+};
+export const display = system(config);

package/dist/esm/base/ui/system/flex_container/align_content.js

@@ -0,0 +1,9 @@
+/** @module @airtable/blocks/ui/system: Flex container */ /** */
+import { system } from '@styled-system/core';
+
+/** */
+
+export const config = {
+  alignContent: true
+};
+export const alignContent = system(config);

package/dist/esm/base/ui/system/flex_container/align_items.js

@@ -0,0 +1,9 @@
+/** @module @airtable/blocks/ui/system: Flex container */ /** */
+import { system } from '@styled-system/core';
+
+/** */
+
+export const config = {
+  alignItems: true
+};
+export const alignItems = system(config);

package/dist/esm/base/ui/system/flex_container/flex_container_set.js

@@ -0,0 +1,23 @@
+/** @module @airtable/blocks/ui/system: Flex container */ /** */
+import { system } from '@styled-system/core';
+import { config as alignContentConfig } from './align_content';
+import { config as alignItemsConfig } from './align_items';
+import { config as flexDirectionConfig } from './flex_direction';
+import { config as flexWrapConfig } from './flex_wrap';
+import { config as justifyContentConfig } from './justify_content';
+import { config as justifyItemsConfig } from './justify_items';
+
+/**
+ * Style props for a flex container element.
+ *
+ * @docsPath UI/Style System/FlexContainer
+ */
+
+export const flexContainerSet = system({
+  ...alignContentConfig,
+  ...alignItemsConfig,
+  ...flexDirectionConfig,
+  ...flexWrapConfig,
+  ...justifyContentConfig,
+  ...justifyItemsConfig
+});

package/dist/esm/base/ui/system/flex_container/flex_direction.js

@@ -0,0 +1,9 @@
+/** @module @airtable/blocks/ui/system: Flex container */ /** */
+import { system } from '@styled-system/core';
+
+/** */
+
+export const config = {
+  flexDirection: true
+};
+export const flexDirection = system(config);

package/dist/esm/base/ui/system/flex_container/flex_wrap.js

@@ -0,0 +1,9 @@
+/** @module @airtable/blocks/ui/system: Flex container */ /** */
+import { system } from '@styled-system/core';
+
+/** */
+
+export const config = {
+  flexWrap: true
+};
+export const flexWrap = system(config);

package/dist/esm/base/ui/system/flex_container/justify_content.js

@@ -0,0 +1,9 @@
+/** @module @airtable/blocks/ui/system: Flex container */ /** */
+import { system } from '@styled-system/core';
+
+/** */
+
+export const config = {
+  justifyContent: true
+};
+export const justifyContent = system(config);

package/dist/esm/base/ui/system/flex_container/justify_items.js

@@ -0,0 +1,10 @@
+/** @hidden */ /** */
+// TODO (stephen): This property does nothing in a flex container, consider deprecating
+import { system } from '@styled-system/core';
+
+/** @hidden */
+
+export const config = {
+  justifyItems: true
+};
+export const justifyItems = system(config);

package/dist/esm/base/ui/system/flex_item/align_self.js

@@ -0,0 +1,9 @@
+/** @module @airtable/blocks/ui/system: Flex item */ /** */
+import { system } from '@styled-system/core';
+
+/** */
+
+export const config = {
+  alignSelf: true
+};
+export const alignSelf = system(config);

package/dist/esm/base/ui/system/flex_item/flex.js

@@ -0,0 +1,9 @@
+/** @module @airtable/blocks/ui/system: Flex item */ /** */
+import { system } from '@styled-system/core';
+
+/** */
+
+export const config = {
+  flex: true
+};
+export const flex = system(config);

package/dist/esm/base/ui/system/flex_item/flex_basis.js

@@ -0,0 +1,9 @@
+/** @module @airtable/blocks/ui/system: Flex item */ /** */
+import { system } from '@styled-system/core';
+
+/** */
+
+export const config = {
+  flexBasis: true
+};
+export const flexBasis = system(config);

package/dist/esm/base/ui/system/flex_item/flex_grow.js

@@ -0,0 +1,9 @@
+/** @module @airtable/blocks/ui/system: Flex item */ /** */
+import { system } from '@styled-system/core';
+
+/** */
+
+export const config = {
+  flexGrow: true
+};
+export const flexGrow = system(config);

package/dist/esm/base/ui/system/flex_item/flex_item_set.js

@@ -0,0 +1,25 @@
+/** @module @airtable/blocks/ui/system: Flex item */ /** */
+import { system } from '@styled-system/core';
+import { config as flexConfig } from './flex';
+import { config as flexGrowConfig } from './flex_grow';
+import { config as flexShrinkConfig } from './flex_shrink';
+import { config as flexBasisConfig } from './flex_basis';
+import { config as alignSelfConfig } from './align_self';
+import { config as justifySelfConfig } from './justify_self';
+import { config as orderConfig } from './order';
+
+/**
+ * Style props for a flex item element.
+ *
+ * @docsPath UI/Style System/FlexItem
+ */
+
+export const flexItemSet = system({
+  ...flexConfig,
+  ...flexGrowConfig,
+  ...flexShrinkConfig,
+  ...flexBasisConfig,
+  ...alignSelfConfig,
+  ...justifySelfConfig,
+  ...orderConfig
+});

package/dist/esm/base/ui/system/flex_item/flex_shrink.js

@@ -0,0 +1,9 @@
+/** @module @airtable/blocks/ui/system: Flex item */ /** */
+import { system } from '@styled-system/core';
+
+/** */
+
+export const config = {
+  flexShrink: true
+};
+export const flexShrink = system(config);

package/dist/esm/base/ui/system/flex_item/justify_self.js

@@ -0,0 +1,10 @@
+/** @hidden */ /** */
+// TODO (stephen): This property does nothing in a flex container, consider deprecating
+import { system } from '@styled-system/core';
+
+/** @hidden */
+
+export const config = {
+  justifySelf: true
+};
+export const justifySelf = system(config);

package/dist/esm/base/ui/system/flex_item/order.js

@@ -0,0 +1,9 @@
+/** @module @airtable/blocks/ui/system: Flex item */ /** */
+import { system } from '@styled-system/core';
+
+/** */
+
+export const config = {
+  order: true
+};
+export const order = system(config);