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

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

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

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

@@ -0,0 +1,38 @@
+import { css, cx } from 'emotion';
+import { colors, radii, opacities, fontWeights } from './tokens';
+const NOT_DISABLED = '&:not([aria-disabled="true"])';
+const DISABLED = '&[aria-disabled="true"]';
+const baseStyles = css({
+  alignItems: 'center',
+  justifyContent: 'center',
+  borderRadius: radii.default,
+  outline: 'none',
+  fontWeight: fontWeights.strong,
+  [NOT_DISABLED]: {
+    cursor: 'pointer',
+    '&:hover': {
+      opacity: opacities.quiet
+    },
+    '&:active': {
+      opacity: 1
+    },
+    '&:focus': {
+      boxShadow: `0 0 0 2px ${colors.darken3}`
+    }
+  },
+  [DISABLED]: {
+    opacity: opacities.quieter
+  }
+});
+const textButtonVariants = {
+  default: cx(baseStyles, css({
+    color: colors.blueBright
+  })),
+  dark: cx(baseStyles, css({
+    color: colors.dark
+  })),
+  light: cx(baseStyles, css({
+    color: colors.light
+  }))
+};
+export default textButtonVariants;

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

@@ -1,9 +1,3 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
 const textStyles = {
   default: {
     small: {
@@ -78,4 +72,4 @@ const textStyles = {
     }
   }
 };
-var _default = exports.default = textStyles;
+export default textStyles;

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

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

package/dist/esm/base/ui/theme/theme_context.js

@@ -0,0 +1,7 @@
+import { createContext } from 'react';
+import defaultTheme from './default_theme';
+
+/** @hidden */
+
+const ThemeContext = /*#__PURE__*/createContext(defaultTheme);
+export default ThemeContext;

package/dist/esm/base/ui/theme/use_theme.js

@@ -0,0 +1,4 @@
+import { useContext } from 'react';
+import ThemeContext from './theme_context';
+const useTheme = () => useContext(ThemeContext);
+export default useTheme;

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

@@ -1,19 +1,9 @@
-"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 */ /** */
-
+import { cx } from 'emotion';
+import * as React from 'react';
+import { baymax } from './baymax_utils';
+import Popover from './popover';
+import Text from './text';
 const FADE_IN_ANIMATION_DURATION = 150;
 
 /**
@@ -34,17 +24,17 @@ const FADE_IN_ANIMATION_DURATION = 150;
  */
 class Tooltip extends React.Component {
   /** @hidden */
-  static placements = _popover.default.placements;
+  static placements = Popover.placements;
   /** @hidden */
-  static fitInWindowModes = _popover.default.fitInWindowModes;
+  static fitInWindowModes = Popover.fitInWindowModes;
 
   /** @hidden */
   static defaultProps = {
-    placementX: _popover.default.placements.RIGHT,
-    placementY: _popover.default.placements.CENTER,
+    placementX: Popover.placements.RIGHT,
+    placementY: Popover.placements.CENTER,
     placementOffsetX: 8,
     placementOffsetY: 8,
-    fitInWindowMode: _popover.default.fitInWindowModes.FLIP
+    fitInWindowMode: Popover.fitInWindowModes.FLIP
   };
   /** @hidden */
   constructor(props) {
@@ -117,8 +107,8 @@ class Tooltip extends React.Component {
       renderedContent = content;
       isContentAFunction = false;
     }
-    return /*#__PURE__*/React.createElement(_text.default, {
-      className: (0, _emotion.cx)((0, _baymax_utils.baymax)('nowrap'), className),
+    return /*#__PURE__*/React.createElement(Text, {
+      className: cx(baymax('nowrap'), className),
       style: style,
       position: "relative"
       // Add padding only when using content.
@@ -148,7 +138,7 @@ class Tooltip extends React.Component {
       // Specifically for RecordCard, which needs to know if onClick is defined.
       hasOnClick: children.props.onClick !== undefined
     });
-    return /*#__PURE__*/React.createElement(_popover.default, {
+    return /*#__PURE__*/React.createElement(Popover, {
       renderContent: this._renderTooltipContent,
       placementX: this.props.placementX,
       placementY: this.props.placementY,
@@ -172,4 +162,4 @@ class Tooltip extends React.Component {
     }, popoverAnchor);
   }
 }
-var _default = exports.default = Tooltip;
+export default Tooltip;

package/dist/esm/base/ui/types/aria_props.js

@@ -0,0 +1 @@
+export {};

package/dist/esm/base/ui/types/data_attributes_prop.js

@@ -0,0 +1 @@
+export {};

package/dist/esm/base/ui/types/tooltip_anchor_props.js

@@ -0,0 +1 @@
+export {};

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

@@ -0,0 +1,52 @@
+/** @ignore */
+import '../assert_run_context';
+import GlobalAlert from './global_alert';
+// Import the top-level entry point so that an Sdk instance is created from the
+// globally-available AirtableInterface instance. This is a requirement of
+// third-party App code. Consumers who cannot provide an implementation of
+// AirtableInterface may access a subset of the UI Components available here by
+// instead importing `unstable_standalone_ui`.
+import '..';
+export { default as BaseProvider } from './base_provider';
+export { default as colors } from '../../shared/colors';
+export { default as colorUtils } from '../../shared/color_utils';
+export { default as Synced } from './synced';
+export { default as TablePicker } from './table_picker';
+export { default as TablePickerSynced } from './table_picker_synced';
+export { default as FieldPicker } from './field_picker';
+export { default as FieldPickerSynced } from './field_picker_synced';
+export { default as ViewPicker } from './view_picker';
+export { default as ViewPickerSynced } from './view_picker_synced';
+export { default as InputSynced } from './input_synced';
+export { default as CellRenderer } from './cell_renderer';
+export { default as expandRecord } from './expand_record';
+export { default as expandRecordList } from './expand_record_list';
+export { default as expandRecordPickerAsync } from './expand_record_picker_async';
+export { default as GlobalAlert } from './global_alert';
+export { default as FieldIcon } from './field_icon';
+export { default as ColorPaletteSynced } from './color_palette_synced';
+export { default as ProgressBar } from './progress_bar';
+export { default as RecordCard } from './record_card';
+export { default as RecordCardList } from './record_card_list';
+export { default as SelectSynced } from './select_synced';
+export { default as SelectButtonsSynced } from './select_buttons_synced';
+export { default as SwitchSynced } from './switch_synced';
+export { default as ViewportConstraint } from './viewport_constraint';
+export { initializeBlock } from './initialize_block';
+export { default as withHooks } from '../../shared/ui/with_hooks';
+export { default as useLoadable } from './use_loadable';
+export { useColorScheme } from '../../shared/ui/use_color_scheme';
+export { useRecordIds, useRecords, useRecordById, useRecordQueryResult } from './use_records';
+export { default as useBase } from './use_base';
+export { default as useCursor } from './use_cursor';
+export { default as useSession } from './use_session';
+export { default as useSettingsButton } from './use_settings_button';
+export { default as useSynced } from '../../shared/ui/use_synced';
+export { default as useWatchable } from '../../shared/ui/use_watchable';
+export { default as useViewport } from './use_viewport';
+export { default as useGlobalConfig } from '../../shared/ui/use_global_config';
+export { default as useViewMetadata } from './use_view_metadata';
+export { default as useRecordActionData } from './use_record_action_data';
+export { registerRecordActionDataCallback } from '../perform_record_action';
+export * from './unstable_standalone_ui';
+export const globalAlert = new GlobalAlert();

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

@@ -0,0 +1,27 @@
+// This module is maintained as an entry point for consumers who cannot provide
+// an implementation of AirtableInterface. Unlike the larger `ui` module, this
+// module can be imported without an AirtableInterface implementation (and the
+// UI Components can function in such an environment).
+export { default as Box } from './box';
+export { default as Button } from './button';
+export { default as ChoiceToken } from './choice_token';
+export { default as CollaboratorToken } from './collaborator_token';
+export { default as ColorPalette } from './color_palette';
+export { default as ConfirmationDialog } from './confirmation_dialog';
+export { default as Dialog } from './dialog';
+export { default as FormField } from './form_field';
+export { default as Heading } from './heading';
+export { default as Icon } from './icon';
+export { default as Input } from './input';
+export { default as Label } from './label';
+export { default as Link } from './link';
+export { default as Loader } from './loader';
+export { default as Modal } from './modal';
+export { default as Popover } from './popover';
+export { loadCSSFromString, loadCSSFromURLAsync, loadScriptFromURLAsync } from '../../shared/ui/remote_utils';
+export { default as Select } from './select';
+export { default as SelectButtons } from './select_buttons';
+export { default as Switch } from './switch';
+export { default as Text } from './text';
+export { default as TextButton } from './text_button';
+export { default as Tooltip } from './tooltip';

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

@@ -1,13 +1,7 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var _use_base = _interopRequireDefault(require("../../shared/ui/use_base"));
-function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 /** @module @airtable/blocks/ui: useBase */ /** */
 
+import useBaseInternal from '../../shared/ui/use_base';
+
 /**
  * A hook for connecting a React component to your base's schema. This returns a {@link Base}
  * instance and will re-render your component whenever the base's schema changes. That means any
@@ -39,6 +33,6 @@ function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e
  * @hook
  */
 function useBase() {
-  return (0, _use_base.default)();
+  return useBaseInternal();
 }
-var _default = exports.default = useBase;
+export default useBase;

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

@@ -1,14 +1,7 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var _use_watchable = _interopRequireDefault(require("../../shared/ui/use_watchable"));
-var _sdk_context = require("../../shared/ui/sdk_context");
-function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 /** @module @airtable/blocks/ui: useCursor */ /** */
 
+import useWatchable from '../../shared/ui/use_watchable';
+import { useSdk } from '../../shared/ui/sdk_context';
 /**
  * A hook for connecting a React component to your base's cursor. This returns a {@link Cursor}
  * instance and will re-render your component whenever the active Table or active View changes.
@@ -40,8 +33,8 @@ function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e
 const useCursor = () => {
   const {
     cursor
-  } = (0, _sdk_context.useSdk)();
-  (0, _use_watchable.default)(cursor, ['activeTableId', 'activeViewId']);
+  } = useSdk();
+  useWatchable(cursor, ['activeTableId', 'activeViewId']);
   return cursor;
 };
-var _default = exports.default = useCursor;
+export default useCursor;

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

@@ -0,0 +1,14 @@
+import { createContext, useContext } from 'react';
+
+/** @internal */
+
+export const FormFieldContext = /*#__PURE__*/createContext(null);
+
+/**
+ * Returns the ID for a control (eg input, select, etc.) inside of a `FormField`.
+ *
+ * @internal
+ */
+export default function useFormField() {
+  return useContext(FormFieldContext);
+}

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

@@ -1,16 +1,9 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = useLoadable;
-var _react = require("react");
-var _useSubscription = require("use-subscription");
-var _private_utils = require("../../shared/private_utils");
-var _error_utils = require("../../shared/error_utils");
-var _use_array_identity = _interopRequireDefault(require("../../shared/ui/use_array_identity"));
-function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 /** @module @airtable/blocks/ui: useLoadable */ /** */
+import { useMemo, useEffect } from 'react';
+import { useSubscription } from 'use-subscription';
+import { compact, has } from '../../shared/private_utils';
+import { spawnError } from '../../shared/error_utils';
+import useArrayIdentity from '../../shared/ui/use_array_identity';
 
 // rather than asking for an AbstractModelWithAsyncData, we define a much more specific interface
 // that enforces 'isDataLoaded' as a watchable key.
@@ -100,17 +93,17 @@ const SUSPENSE_CLEAN_UP_MS = 60000;
  * @docsPath UI/hooks/useLoadable
  * @hook
  */
-function useLoadable(models) {
+export default function useLoadable(models) {
   let opts = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {
     shouldSuspend: true
   };
-  const shouldSuspend = opts && (0, _private_utils.has)(opts, 'shouldSuspend') ? opts.shouldSuspend : true;
-  const constModels = (0, _use_array_identity.default)(Array.isArray(models) ? models : [models]);
-  const compactModels = (0, _react.useMemo)(() => {
-    const compacted = (0, _private_utils.compact)(constModels);
+  const shouldSuspend = opts && has(opts, 'shouldSuspend') ? opts.shouldSuspend : true;
+  const constModels = useArrayIdentity(Array.isArray(models) ? models : [models]);
+  const compactModels = useMemo(() => {
+    const compacted = compact(constModels);
     for (const model of compacted) {
       if (typeof model.loadDataAsync !== 'function') {
-        throw (0, _error_utils.spawnError)('useLoadable called with %s, which is not a loadable', typeof model === 'object' ? model.toString() : typeof model);
+        throw spawnError('useLoadable called with %s, which is not a loadable', typeof model === 'object' ? model.toString() : typeof model);
       }
     }
     return compacted;
@@ -143,7 +136,7 @@ function useLoadable(models) {
   // re-render when loaded state changes. technically, we could use `useWatchable` here, but as
   // our LoadableModel isn't a Watchable, we can't. There's no way to preserve flow errors when
   // watching something that doesn't have a 'isDataLoaded' watch key and use `Watchable`.
-  const modelIsLoadedSubscription = (0, _react.useMemo)(() => ({
+  const modelIsLoadedSubscription = useMemo(() => ({
     getCurrentValue: () => compactModels.map(model => model.isDataLoaded).join(','),
     subscribe: onChange => {
       for (const model of compactModels) {
@@ -156,12 +149,12 @@ function useLoadable(models) {
       };
     }
   }), [compactModels]);
-  (0, _useSubscription.useSubscription)(modelIsLoadedSubscription);
+  useSubscription(modelIsLoadedSubscription);
 
   // the main part of this hook comes down to managing the query result data loading in sync with
   // the component lifecycle. That means loading the data when the component mounts, and
   // unloading it when the component unmounts.
-  (0, _react.useEffect)(() => {
+  useEffect(() => {
     for (const model of compactModels) {
       model.loadDataAsync();
     }

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

@@ -1,16 +1,10 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = useRecordActionData;
-var _perform_record_action = require("../perform_record_action");
-var _use_watchable = _interopRequireDefault(require("../../shared/ui/use_watchable"));
-var _sdk_context = require("../../shared/ui/sdk_context");
-var _use_loadable = _interopRequireDefault(require("./use_loadable"));
-function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 /** @module @airtable/blocks/ui: useRecordActionData */ /** */
 
+import { WatchablePerformRecordActionKeys } from '../perform_record_action';
+import useWatchable from '../../shared/ui/use_watchable';
+import { useSdk } from '../../shared/ui/sdk_context';
+import useLoadable from './use_loadable';
+
 /**
  * A hook to watch "open extension" / "perform record action" events (from button field). Returns
  * the data corresponding to the latest action, or `null` if no actions have occurred yet. If there
@@ -62,13 +56,13 @@ function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e
  * @hook
  */
 
-function useRecordActionData() {
+export default function useRecordActionData() {
   const {
     performRecordAction
-  } = (0, _sdk_context.useSdk)();
+  } = useSdk();
 
   // Puts the block in suspense until the liveapp handler has been registered.
-  (0, _use_loadable.default)(performRecordAction);
+  useLoadable(performRecordAction);
 
   // Note: if we were to pass a callback to useWatchable, it would drop the callback for the
   // initial recordActionData (if it exists) when the component is mounted.
@@ -76,6 +70,6 @@ function useRecordActionData() {
   // effect, but would need to be careful to not erroneously trigger it when the component
   // unmounts and remounts.
   // So, using a callback with useRecordActionData isn't supported right now for simplicity.
-  (0, _use_watchable.default)(performRecordAction, _perform_record_action.WatchablePerformRecordActionKeys.recordActionData);
+  useWatchable(performRecordAction, WatchablePerformRecordActionKeys.recordActionData);
   return performRecordAction.recordActionData;
 }