+ event - The underlying event object that caused this rule to
+ fire.
+
+
+
+ }
+ language="javascript"
+ placeholder={
+ "// Modify content as necessary. There is no need to wrap the code in a function or return a value." +
+ "\n\n// For example if you are updating an XDM Variable Data Element, you can set the page name by writing:" +
+ "\n\n// content.web = content.web || {};" +
+ "\n// content.web.webPageDetails = content.web.webPageDetails || {};" +
+ '\n// content.web.webPageDetails.name = "Home";' +
+ "\n\n// If you are updating a Data Variable Data Element you can update an Analytics page name by writing:" +
+ "\n\n// content.__adobe = content.__adobe || { };" +
+ "\n// content.__adobe.analytics = content.__adobe.analytics || { };" +
+ '\n// content.__adobe.analytics.eVar5 = "Test";'
+ }
+ />
+
+ )}
+ {!(hasSchema && isSchemaMatched) &&
+ dataElement &&
+ !context.schemaLoadFailed && (
+
+
+
+ )}
+
+ );
+};
+
+UpdateVariable.propTypes = {
+ context: PropTypes.object,
+ initInfo: PropTypes.object,
+ formikProps: PropTypes.object,
+};
+
+const UpdateVariableView = () => {
+ const { current: context } = useRef({});
+
+ return (
+ {
+ return ;
+ }}
+ />
+ );
+};
+
+export default UpdateVariableView;
diff --git a/packages/reactor-extension/src/view/components/alert.css b/packages/reactor-extension/src/view/components/alert.css
new file mode 100644
index 000000000..65fd02160
--- /dev/null
+++ b/packages/reactor-extension/src/view/components/alert.css
@@ -0,0 +1,35 @@
+.Alert {
+ box-sizing: border-box;
+ border: 2px solid;
+ border-radius: 4px;
+ padding: 24px;
+}
+.Alert--neutral {
+ border-color: var(--spectrum-global-color-static-gray-600);
+}
+.Alert--informative {
+ border-color: var(--spectrum-semantic-informative-color-default);
+}
+.Alert--positive {
+ border-color: var(--spectrum-semantic-positive-color-default);
+}
+.Alert--notice {
+ border-color: var(--spectrum-semantic-notice-color-default);
+}
+.Alert--negative {
+ border-color: var(--spectrum-semantic-negative-color-default);
+}
+
+.Alert-description {
+ color: var(--spectrum-alias-label-text-color, var(--spectrum-global-color-gray-700));
+
+ /* Paragraph elements (and possibly other elements?) will add block margin
+ on the top and bottom, which provides too much spacing. */
+ > :first-child {
+ margin-block-start: 0;
+ }
+
+ > :last-child {
+ margin-block-end: 0;
+ }
+}
diff --git a/packages/reactor-extension/src/view/components/alert.jsx b/packages/reactor-extension/src/view/components/alert.jsx
new file mode 100644
index 000000000..bf17e9b18
--- /dev/null
+++ b/packages/reactor-extension/src/view/components/alert.jsx
@@ -0,0 +1,70 @@
+/*
+Copyright 2021 Adobe. All rights reserved.
+This file is licensed to you under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License. You may obtain a copy
+of the License at http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software distributed under
+the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+OF ANY KIND, either express or implied. See the License for the specific language
+governing permissions and limitations under the License.
+*/
+
+import classNames from "classnames";
+import { Flex } from "@adobe/react-spectrum";
+import AlertIcon from "@spectrum-icons/workflow/Alert";
+import InfoIcon from "@spectrum-icons/workflow/Info";
+import CheckmarkCircle from "@spectrum-icons/workflow/CheckmarkCircle";
+import "./alert.css";
+import PropTypes from "prop-types";
+import Heading from "./typography/heading";
+
+const iconByVariant = {
+ neutral: () => {
+ return null;
+ },
+ informative: InfoIcon,
+ positive: CheckmarkCircle,
+ notice: AlertIcon,
+ negative: AlertIcon,
+};
+
+const Alert = ({
+ variant = "neutral",
+ title,
+ children,
+ className,
+ ...otherProps
+}) => {
+ const Icon = iconByVariant[variant];
+ return (
+
+
+ {title}
+
+
+
{children}
+
+ );
+};
+
+Alert.propTypes = {
+ variant: PropTypes.oneOf([
+ "neutral",
+ "informative",
+ "positive",
+ "notice",
+ "negative",
+ ]),
+ title: PropTypes.string.isRequired,
+ children: PropTypes.node.isRequired,
+ width: PropTypes.string,
+ className: PropTypes.string,
+};
+
+export default Alert;
diff --git a/packages/reactor-extension/src/view/components/betaBadge.jsx b/packages/reactor-extension/src/view/components/betaBadge.jsx
new file mode 100644
index 000000000..030537560
--- /dev/null
+++ b/packages/reactor-extension/src/view/components/betaBadge.jsx
@@ -0,0 +1,34 @@
+/*
+Copyright 2023 Adobe. All rights reserved.
+This file is licensed to you under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License. You may obtain a copy
+of the License at http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software distributed under
+the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+OF ANY KIND, either express or implied. See the License for the specific language
+governing permissions and limitations under the License.
+*/
+import { Badge } from "@adobe/react-spectrum";
+import PropTypes from "prop-types";
+
+const betaBadge = ({ isDisabled }) => {
+ const styles = {
+ padding: "0",
+ };
+ if (isDisabled) {
+ styles.backgroundColor = "var(--spectrum-alias-text-color-disabled)";
+ }
+
+ return (
+
+ Beta
+
+ );
+};
+
+betaBadge.propTypes = {
+ isDisabled: PropTypes.bool,
+};
+
+export default betaBadge;
diff --git a/packages/reactor-extension/src/view/components/betaNotice.jsx b/packages/reactor-extension/src/view/components/betaNotice.jsx
new file mode 100644
index 000000000..ee1d99c7c
--- /dev/null
+++ b/packages/reactor-extension/src/view/components/betaNotice.jsx
@@ -0,0 +1,32 @@
+/*
+Copyright 2023 Adobe. All rights reserved.
+This file is licensed to you under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License. You may obtain a copy
+of the License at http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software distributed under
+the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+OF ANY KIND, either express or implied. See the License for the specific language
+governing permissions and limitations under the License.
+*/
+
+import PropTypes from "prop-types";
+import { InlineAlert, Heading, Content } from "@adobe/react-spectrum";
+
+const BetaNotice = ({ componentName }) => {
+ return (
+
+ Beta feature
+
+ This {componentName} is a beta feature while the development team
+ gathers feedback. Future versions may contain breaking changes.
+
+
+ );
+};
+
+BetaNotice.propTypes = {
+ componentName: PropTypes.string.isRequired,
+};
+
+export default BetaNotice;
diff --git a/packages/reactor-extension/src/view/components/clearButton.jsx b/packages/reactor-extension/src/view/components/clearButton.jsx
new file mode 100644
index 000000000..969332b59
--- /dev/null
+++ b/packages/reactor-extension/src/view/components/clearButton.jsx
@@ -0,0 +1,43 @@
+/*
+Copyright 2025 Adobe. All rights reserved.
+This file is licensed to you under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License. You may obtain a copy
+of the License at http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software distributed under
+the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+OF ANY KIND, either express or implied. See the License for the specific language
+governing permissions and limitations under the License.
+*/
+
+import { TooltipTrigger, ActionButton, Tooltip } from "@adobe/react-spectrum";
+import Delete from "@spectrum-icons/workflow/Delete";
+import PropTypes from "prop-types";
+
+const ClearButton = ({ value, setValue, marginTop }) => {
+ return (
+
+ {
+ setValue("");
+ }}
+ isDisabled={!value}
+ aria-label="Clear value"
+ >
+
+
+ Clear
+
+ );
+};
+
+ClearButton.propTypes = {
+ value: PropTypes.string.isRequired,
+ setValue: PropTypes.func.isRequired,
+ marginTop: PropTypes.string,
+};
+
+export default ClearButton;
diff --git a/packages/reactor-extension/src/view/components/codeField.jsx b/packages/reactor-extension/src/view/components/codeField.jsx
new file mode 100644
index 000000000..8453c8cc4
--- /dev/null
+++ b/packages/reactor-extension/src/view/components/codeField.jsx
@@ -0,0 +1,102 @@
+/*
+Copyright 2019 Adobe. All rights reserved.
+This file is licensed to you under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License. You may obtain a copy
+of the License at http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software distributed under
+the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+OF ANY KIND, either express or implied. See the License for the specific language
+governing permissions and limitations under the License.
+*/
+
+import { useField } from "formik";
+import PropTypes from "prop-types";
+import { ActionButton, Flex, Text } from "@adobe/react-spectrum";
+import CodePreview from "./codePreview";
+
+/**
+ * A button that, when clicked, opens the Launch code editor
+ * which allows the user to edit code. When the user
+ * closes the editor, this calls onChange with the updated
+ * code.
+ */
+const CodeField = ({
+ "data-test-id": dataTestId,
+ "aria-label": ariaLabel,
+ label,
+ buttonLabelSuffix,
+ name,
+ description,
+ language,
+ placeholder,
+ beta,
+}) => {
+ const [{ value }, { touched, error }, { setValue, setTouched }] =
+ useField(name);
+
+ const onPress = async () => {
+ setTouched(true);
+
+ const options = {
+ code: value || placeholder || "",
+ };
+
+ if (language) {
+ options.language = language;
+ }
+
+ // This returns undefined when the user clicks cancel.
+ let updatedCode = await window.extensionBridge.openCodeEditor(options);
+ if (updatedCode === undefined) {
+ return;
+ }
+
+ // If the user never changed placeholder code, don't save the placeholder code.
+ if (placeholder && updatedCode === placeholder) {
+ updatedCode = "";
+ }
+ setValue(updatedCode);
+ };
+
+ return (
+
+
+ {value && (
+ {
+ setValue("");
+ }}
+ marginTop={23}
+ >
+ Clear
+
+ )}
+
+ );
+};
+
+CodeField.propTypes = {
+ "data-test-id": PropTypes.string,
+ "aria-label": PropTypes.string,
+ label: PropTypes.string,
+ buttonLabelSuffix: PropTypes.string,
+ name: PropTypes.string.isRequired,
+ description: PropTypes.node,
+ beta: PropTypes.bool,
+ language: PropTypes.string,
+ placeholder: PropTypes.string,
+};
+
+export default CodeField;
diff --git a/packages/reactor-extension/src/view/components/codePreview.css b/packages/reactor-extension/src/view/components/codePreview.css
new file mode 100644
index 000000000..02e85fe9a
--- /dev/null
+++ b/packages/reactor-extension/src/view/components/codePreview.css
@@ -0,0 +1,44 @@
+/*
+Copyright 2021 Adobe. All rights reserved.
+This file is licensed to you under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License. You may obtain a copy
+of the License at http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software distributed under
+the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+OF ANY KIND, either express or implied. See the License for the specific language
+governing permissions and limitations under the License.
+*/
+
+.CodePreview-textArea textarea {
+ font-size: 12px;
+ font-family: monospace;
+ white-space: pre;
+ overflow: hidden !important;
+}
+
+.CodePreview-textArea--invalid textarea:disabled {
+ border-color: var(--spectrum-textfield-border-color-error, var(--spectrum-semantic-negative-color-default));
+}
+
+.CodePreview-openEditorButton {
+ position: absolute !important;
+ /* The TextArea component has been given a specific
+ height, but that height includes the label as well.
+ we want the button to be centered within the underlying
+ textarea DOM element that's showing the code. */
+ top: 87px;
+ left: 50%;
+ transform: translate(-50%, -50%);
+ white-space: nowrap;
+}
+
+/* This is a workaround for a react-spectrum bug */
+/* https://github.com/adobe/react-spectrum/issues/2475 */
+.CodePreview-textArea {
+
+ &>div,
+ & .spectrum-Field-field--multiline {
+ flex: 1 1 auto !important;
+ }
+}
diff --git a/packages/reactor-extension/src/view/components/codePreview.jsx b/packages/reactor-extension/src/view/components/codePreview.jsx
new file mode 100644
index 000000000..ecc054633
--- /dev/null
+++ b/packages/reactor-extension/src/view/components/codePreview.jsx
@@ -0,0 +1,81 @@
+/*
+Copyright 2021 Adobe. All rights reserved.
+This file is licensed to you under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License. You may obtain a copy
+of the License at http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software distributed under
+the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+OF ANY KIND, either express or implied. See the License for the specific language
+governing permissions and limitations under the License.
+*/
+
+import PropTypes from "prop-types";
+import {
+ ActionButton,
+ LabeledValue,
+ Text,
+ TextArea,
+ View,
+} from "@adobe/react-spectrum";
+import CodeIcon from "@spectrum-icons/workflow/Code";
+import FieldDescriptionAndError from "./fieldDescriptionAndError";
+import "./codePreview.css";
+import BetaBadge from "./betaBadge";
+
+const CodePreview = ({
+ "data-test-id": dataTestId,
+ "aria-label": ariaLabel,
+ label,
+ buttonLabel,
+ value,
+ description,
+ error,
+ onPress,
+ beta,
+}) => {
+ const classNames = ["CodePreview-textArea"];
+ if (error) {
+ classNames.push("CodePreview-textArea--invalid");
+ }
+
+ return (
+
+
+ {beta && }
+
+
+
+
+
+ {buttonLabel}
+
+
+ );
+};
+
+CodePreview.propTypes = {
+ "data-test-id": PropTypes.string,
+ "aria-label": PropTypes.string,
+ label: PropTypes.string,
+ buttonLabel: PropTypes.string.isRequired,
+ value: PropTypes.string,
+ description: PropTypes.node,
+ error: PropTypes.string,
+ onPress: PropTypes.func.isRequired,
+ beta: PropTypes.bool,
+};
+
+export default CodePreview;
diff --git a/packages/reactor-extension/src/view/components/dataElementSelector.jsx b/packages/reactor-extension/src/view/components/dataElementSelector.jsx
new file mode 100644
index 000000000..6b7e1ed9d
--- /dev/null
+++ b/packages/reactor-extension/src/view/components/dataElementSelector.jsx
@@ -0,0 +1,65 @@
+/*
+Copyright 2021 Adobe. All rights reserved.
+This file is licensed to you under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License. You may obtain a copy
+of the License at http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software distributed under
+the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+OF ANY KIND, either express or implied. See the License for the specific language
+governing permissions and limitations under the License.
+*/
+
+import { Children } from "react";
+import PropTypes from "prop-types";
+import { useField } from "formik";
+import RawDataElementSelector from "./rawDataElementSelector";
+
+const DataElementSelector = ({
+ children,
+ augmentValue,
+ tokenize,
+ isDisabled,
+ clearable,
+}) => {
+ // We have to vertically nudge down the data element selector
+ // button if the field has a label so the button aligns
+ // with the input box.
+ const inputChild = Children.toArray(children).find(
+ (child) => child.props.name,
+ );
+
+ if (!inputChild) {
+ throw new Error(
+ "DataElementSelector must wrap a component with its `name` prop set.",
+ );
+ }
+
+ const name = inputChild.props.name;
+ const adjustForLabel = Boolean(inputChild.props.label);
+ const [{ value }, , { setValue }] = useField(name);
+
+ return (
+
+ {children}
+
+ );
+};
+
+DataElementSelector.propTypes = {
+ children: PropTypes.node.isRequired,
+ augmentValue: PropTypes.bool,
+ tokenize: PropTypes.bool,
+ isDisabled: PropTypes.bool,
+ clearable: PropTypes.bool,
+};
+
+export default DataElementSelector;
diff --git a/packages/reactor-extension/src/view/components/datastreamSelector.jsx b/packages/reactor-extension/src/view/components/datastreamSelector.jsx
new file mode 100644
index 000000000..42e4823dc
--- /dev/null
+++ b/packages/reactor-extension/src/view/components/datastreamSelector.jsx
@@ -0,0 +1,311 @@
+/*
+Copyright 2021 Adobe. All rights reserved.
+This file is licensed to you under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License. You may obtain a copy
+of the License at http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software distributed under
+the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+OF ANY KIND, either express or implied. See the License for the specific language
+governing permissions and limitations under the License.
+*/
+import { useEffect } from "react";
+import { useAsyncList } from "@react-stately/data";
+import {
+ Flex,
+ Item,
+ Link,
+ View,
+ Picker,
+ ActionButton,
+ TooltipTrigger,
+ Tooltip,
+ InlineAlert,
+ Heading,
+ Content,
+} from "@adobe/react-spectrum";
+import PropTypes from "prop-types";
+import { useField } from "formik";
+import Copy from "@spectrum-icons/workflow/Copy";
+import Delete from "@spectrum-icons/workflow/Delete";
+import copyToClipboard from "clipboard-copy";
+import RefreshButton from "./refreshButton";
+import fetchConfigs from "../configuration/utils/fetchConfigs";
+import usePrevious from "../utils/usePrevious";
+import {
+ PRODUCTION,
+ ENVIRONMENTS,
+} from "../configuration/constants/environmentType";
+import FormikTextField from "./formikReactSpectrum3/formikTextField";
+import { capitialize } from "./overrides/utils";
+
+// eslint-disable-next-line no-underscore-dangle
+const getKey = (datastream) => datastream && datastream._system.id;
+const getLabel = (datastream) => {
+ if (!datastream) {
+ return undefined;
+ }
+ const region = datastream.region
+ ? ` (${datastream.region.toUpperCase()})`
+ : "";
+ return `${datastream.data.title}${region}`;
+};
+
+const DatastreamSelector = ({
+ name,
+ defaultSelectedDatastream,
+ initInfo,
+ selectedSandbox,
+ items,
+ defaultSandboxOnly,
+ label,
+ environmentType,
+ description,
+ fallbackToManualEntry,
+}) => {
+ const [{ value }, { touched, error }, { setValue, setTouched }] =
+ useField(name);
+ const previousSelectedSandbox = usePrevious(selectedSandbox);
+
+ const datastreamList = useAsyncList({
+ async load({ signal }) {
+ if (items) {
+ return { items };
+ }
+
+ const {
+ company: { orgId },
+ tokens: { imsAccess },
+ } = initInfo;
+
+ const { results: datastreams } = await fetchConfigs({
+ orgId,
+ imsAccess,
+ signal,
+ limit: 1000,
+ sandbox: selectedSandbox.name,
+ });
+
+ return {
+ items: datastreams,
+ };
+ },
+ getKey,
+ initialSelectedKeys: defaultSelectedDatastream
+ ? new Set([getKey(defaultSelectedDatastream)])
+ : new Set(),
+ initialFilterText: defaultSelectedDatastream
+ ? getLabel(defaultSelectedDatastream)
+ : "",
+ });
+
+ useEffect(() => {
+ // Reset the datastreams options if the user selects a different sandbox.
+ // if the selected sandbox was changed we want to reload the datastreams dropdown and
+ // reset the formik value, otherwise in case there the user haven't selected another datastream
+ // formik will keep the old datastream value( when the extension was previously set up)
+ if (previousSelectedSandbox && selectedSandbox) {
+ datastreamList.selectedKeys = null;
+ if (value) {
+ setValue(undefined);
+ }
+ datastreamList.reload();
+ }
+ }, [selectedSandbox ? selectedSandbox.name : null]);
+
+ const datastreamProps = {
+ isRequired: defaultSandboxOnly && environmentType === PRODUCTION,
+ label:
+ (label ?? defaultSandboxOnly)
+ ? `${capitialize(environmentType)} datastream`
+ : " ",
+ "aria-label": `${environmentType} datastream`,
+ "data-test-id": `${environmentType}DatastreamField`,
+ UNSAFE_className: "CapitalizedLabel",
+ };
+ const errorLoadingDatastreamsDescription = (
+ <>
+ {`You do not have enough permissions to fetch the ${selectedSandbox.title} sandbox configurations. See the documentation for `}
+
+ data collection permission management
+ {" "}
+ for more information.
+
+ );
+
+ if (datastreamList.loadingState === "error" && !datastreamList.items.length) {
+ const errorMessage = datastreamList?.error?.originatingError?.message;
+
+ if (value || fallbackToManualEntry) {
+ return (
+
+
+
+
+
+
+ {
+ copyToClipboard(value);
+ }}
+ >
+
+
+ Copy datastream ID to clipboard.
+
+
+
+ );
+ }
+ return (
+
+
+ Error fetching datastreams for {selectedSandbox.name} sandbox
+
+ {errorMessage}
+
+ );
+ }
+
+ if (!datastreamList.isLoading && !datastreamList.items.length) {
+ return (
+
+ No datastreams
+
+ No datastreams exist for the selected sandbox. See{" "}
+
+ Configuring a datastream
+ {" "}
+ for more information.
+
+
+ );
+ }
+ return (
+
+
+ {
+ setTouched(true);
+ }}
+ validationState={touched && error ? "invalid" : undefined}
+ width="size-5000"
+ placeholder="Select a datastream"
+ isLoading={datastreamList.isLoading}
+ isDisabled={!datastreamList.isLoading && !datastreamList.items.length}
+ items={datastreamList.items}
+ description={touched && error ? "" : description}
+ errorMessage={touched && error ? error : undefined}
+ >
+ {(item) => {
+ return {getLabel(item)};
+ }}
+
+
+
+
+ {
+ datastreamList.reload();
+ }}
+ isDisabled={datastreamList.isLoading}
+ tooltipText="Refresh datastreams list"
+ ariaLabel="Refresh datastreams"
+ />
+
+ {
+ copyToClipboard(value);
+ }}
+ aria-label="Copy datastream ID to clipboard"
+ >
+
+
+ Copy datastream ID to clipboard.
+
+
+ {
+ setValue("");
+ }}
+ isDisabled={!value}
+ aria-label="Reset datastream ID"
+ >
+
+
+ Reset datastream ID.
+
+
+
+ );
+};
+
+const datastreamShape = PropTypes.shape({
+ _system: PropTypes.shape({
+ id: PropTypes.string.isRequired,
+ }).isRequired,
+ region: PropTypes.string,
+ data: PropTypes.shape({
+ title: PropTypes.string.isRequired,
+ }),
+});
+
+DatastreamSelector.propTypes = {
+ defaultSelectedDatastream: datastreamShape,
+ initInfo: PropTypes.shape({
+ company: PropTypes.shape({
+ orgId: PropTypes.string.isRequired,
+ }).isRequired,
+ tokens: PropTypes.shape({
+ imsAccess: PropTypes.string.isRequired,
+ }).isRequired,
+ }),
+ name: PropTypes.string.isRequired,
+ label: PropTypes.string,
+ selectedSandbox: PropTypes.shape({
+ name: PropTypes.string.isRequired,
+ title: PropTypes.string.isRequired,
+ }).isRequired,
+ defaultSandboxOnly: PropTypes.bool,
+ environmentType: PropTypes.oneOf(ENVIRONMENTS).isRequired,
+ items: PropTypes.arrayOf(datastreamShape),
+ description: PropTypes.string,
+ fallbackToManualEntry: PropTypes.bool,
+};
+
+export default DatastreamSelector;
diff --git a/packages/reactor-extension/src/view/components/decisionScopes.jsx b/packages/reactor-extension/src/view/components/decisionScopes.jsx
new file mode 100644
index 000000000..d9fd012ab
--- /dev/null
+++ b/packages/reactor-extension/src/view/components/decisionScopes.jsx
@@ -0,0 +1,170 @@
+/*
+Copyright 2019 Adobe. All rights reserved.
+This file is licensed to you under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License. You may obtain a copy
+of the License at http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software distributed under
+the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+OF ANY KIND, either express or implied. See the License for the specific language
+governing permissions and limitations under the License.
+*/
+
+import { Radio, Button, ActionButton, Flex } from "@adobe/react-spectrum";
+import Delete from "@spectrum-icons/workflow/Delete";
+import { FieldArray, useField } from "formik";
+import { object, string } from "yup";
+import FormikRadioGroup from "./formikReactSpectrum3/formikRadioGroup";
+import FormikTextField from "./formikReactSpectrum3/formikTextField";
+import DataElementSelector from "./dataElementSelector";
+import singleDataElementRegex from "../constants/singleDataElementRegex";
+import { DATA_ELEMENT_REQUIRED } from "../constants/validationErrorMessages";
+import FieldSubset from "./fieldSubset";
+
+const CONSTANT = "constant";
+const DATA_ELEMENT = "dataElement";
+
+export const bridge = {
+ getInitialValues({ initInfo }) {
+ const { decisionScopes: legacyScopes, personalization = {} } =
+ initInfo.settings || {};
+ const { decisionScopes } = personalization;
+ const scopes =
+ legacyScopes && legacyScopes.length ? legacyScopes : decisionScopes;
+
+ if (Array.isArray(scopes)) {
+ return {
+ decisionsInputMethod: CONSTANT,
+ decisionScopesDataElement: "",
+ decisionScopesArray: scopes,
+ };
+ }
+ if (typeof scopes === "string") {
+ return {
+ decisionsInputMethod: DATA_ELEMENT,
+ decisionScopesDataElement: scopes,
+ decisionScopesArray: [""],
+ };
+ }
+ return {
+ decisionsInputMethod: CONSTANT,
+ decisionScopesDataElement: "",
+ decisionScopesArray: [""],
+ };
+ },
+ getSettings({ values }) {
+ if (
+ values.decisionsInputMethod === DATA_ELEMENT &&
+ values.decisionScopesDataElement
+ ) {
+ return { decisionScopes: values.decisionScopesDataElement };
+ }
+
+ if (
+ values.decisionsInputMethod === CONSTANT &&
+ values.decisionScopesArray.length > 0
+ ) {
+ const decisionScopes = values.decisionScopesArray.filter(
+ (scope) => scope !== "",
+ );
+ if (decisionScopes.length) {
+ return { decisionScopes };
+ }
+ }
+ return undefined;
+ },
+ formikStateValidationSchema: object().shape({
+ decisionScopesDataElement: string().when("decisionsInputMethod", {
+ is: DATA_ELEMENT,
+ then: (schema) =>
+ schema.matches(singleDataElementRegex, DATA_ELEMENT_REQUIRED),
+ }),
+ }),
+};
+
+const DecisionScopes = () => {
+ const [{ value: decisionsInputMethod }] = useField("decisionsInputMethod");
+ const [{ value: decisionScopesArray }] = useField("decisionScopesArray");
+
+ return (
+
+
+
+ Manually enter scopes
+
+
+ Provide a data element
+
+
+ {decisionsInputMethod === DATA_ELEMENT && (
+
+
+
+
+
+ )}
+ {decisionsInputMethod === CONSTANT && (
+
+
+ {
+ return (
+
+ );
+};
+
+export default DecisionScopes;
diff --git a/packages/reactor-extension/src/view/components/errorBoundary.jsx b/packages/reactor-extension/src/view/components/errorBoundary.jsx
new file mode 100644
index 000000000..f825fe78e
--- /dev/null
+++ b/packages/reactor-extension/src/view/components/errorBoundary.jsx
@@ -0,0 +1,76 @@
+/*
+Copyright 2019 Adobe. All rights reserved.
+This file is licensed to you under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License. You may obtain a copy
+of the License at http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software distributed under
+the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+OF ANY KIND, either express or implied. See the License for the specific language
+governing permissions and limitations under the License.
+*/
+
+import { Component } from "react";
+import PropTypes from "prop-types";
+import { Link } from "@adobe/react-spectrum";
+import ErrorMessage from "./errorMessage";
+import UserReportableError from "../errors/userReportableError";
+
+export default class ErrorBoundary extends Component {
+ constructor(props) {
+ super(props);
+ this.state = { error: null };
+ }
+
+ static getDerivedStateFromError(error) {
+ return { error };
+ }
+
+ componentDidUpdate(_, { error: prevError }) {
+ const { error } = this.state;
+ if (error && prevError !== error) {
+ window.dispatchEvent(new Event("extension-reactor-alloy:rendered"));
+ }
+ }
+
+ render() {
+ const { error } = this.state;
+ const { children } = this.props;
+
+ let content = "An unexpected error occurred. Please try again later.";
+
+ if (error instanceof UserReportableError) {
+ content = (
+ <>
+ {error.message}
+ {error.additionalInfoUrl && (
+
+ {" "}
+ Click{" "}
+
+ here
+ {" "}
+ for more information.
+
+ )}
+
+ );
+ }
+
+ if (error) {
+ return (
+ {content}
+ );
+ }
+
+ return children;
+ }
+}
+
+ErrorBoundary.propTypes = {
+ children: PropTypes.node.isRequired,
+};
diff --git a/packages/reactor-extension/src/view/components/errorMessage.jsx b/packages/reactor-extension/src/view/components/errorMessage.jsx
new file mode 100644
index 000000000..5e8cf4e3d
--- /dev/null
+++ b/packages/reactor-extension/src/view/components/errorMessage.jsx
@@ -0,0 +1,41 @@
+/*
+Copyright 2021 Adobe. All rights reserved.
+This file is licensed to you under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License. You may obtain a copy
+of the License at http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software distributed under
+the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+OF ANY KIND, either express or implied. See the License for the specific language
+governing permissions and limitations under the License.
+*/
+import { Content, Heading, IllustratedMessage } from "@adobe/react-spectrum";
+import Error from "@spectrum-icons/illustrations/Error";
+import PropTypes from "prop-types";
+import FillParentAndCenterChildren from "./fillParentAndCenterChildren";
+import useExtensionBridge from "../utils/useExtensionBridge";
+
+const ErrorMessage = ({ children, dataTestId }) => {
+ useExtensionBridge({
+ init: () => ({}),
+ getSettings: () => ({}),
+ validate: () => false,
+ });
+
+ return (
+
+
+
+ An error occurred.
+ {children}
+
+
+ );
+};
+
+ErrorMessage.propTypes = {
+ children: PropTypes.node.isRequired,
+ dataTestId: PropTypes.string,
+};
+
+export default ErrorMessage;
diff --git a/packages/reactor-extension/src/view/components/extensionView.jsx b/packages/reactor-extension/src/view/components/extensionView.jsx
new file mode 100644
index 000000000..0cbba1a99
--- /dev/null
+++ b/packages/reactor-extension/src/view/components/extensionView.jsx
@@ -0,0 +1,243 @@
+/*
+Copyright 2019 Adobe. All rights reserved.
+This file is licensed to you under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License. You may obtain a copy
+of the License at http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software distributed under
+the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+OF ANY KIND, either express or implied. See the License for the specific language
+governing permissions and limitations under the License.
+*/
+
+import { useState, useRef, useEffect } from "react";
+import PropTypes from "prop-types";
+
+import { useFormik, FormikProvider } from "formik";
+import { object } from "yup";
+import { ProgressCircle, View } from "@adobe/react-spectrum";
+import useExtensionBridge from "../utils/useExtensionBridge";
+import useReportAsyncError from "../utils/useReportAsyncError";
+import FillParentAndCenterChildren from "./fillParentAndCenterChildren";
+
+const ExtensionView = ({
+ render,
+ getInitialValues,
+ getSettings,
+ validateFormikState,
+ formikStateValidationSchema,
+ getFormikStateValidationSchema,
+ validateNonFormikState,
+}) => {
+ const reportAsyncError = useReportAsyncError();
+ const [initInfo, setInitInfo] = useState();
+ const [canRenderView, setCanRenderView] = useState(false);
+ const viewRegistrationRef = useRef();
+ const formikPropsRef = useRef();
+ const getInitialValuesPromiseRef = useRef();
+
+ const getValidationSchema = () => {
+ const {
+ getFormikStateValidationSchema: getSchema,
+ formikStateValidationSchema: schema,
+ } = viewRegistrationRef.current ?? {};
+
+ if (schema) {
+ return schema;
+ }
+ if (getSchema && initInfo) {
+ try {
+ const newSchema = getSchema({ initInfo });
+ viewRegistrationRef.current.formikStateValidationSchema = newSchema;
+ } catch (e) {
+ reportAsyncError(e);
+ }
+ }
+ return object();
+ };
+
+ formikPropsRef.current = useFormik({
+ onSubmit: () => {},
+ validate: (values) => {
+ let errors;
+
+ // Formik swallows errors that occur during validation, but we want
+ // to handle them in a proper manner.
+ try {
+ if (viewRegistrationRef.current?.validateFormikState) {
+ errors = viewRegistrationRef.current.validateFormikState({ values });
+ }
+ } catch {
+ reportAsyncError(
+ new Error("An error occurred while validating the view."),
+ );
+ }
+
+ return errors;
+ },
+ validationSchema: getValidationSchema(),
+ });
+
+ const myValidateFormikState = async () => {
+ // The view hasn't yet initialized formik with initialValues.
+ if (!formikPropsRef.current.values) {
+ return false;
+ }
+
+ try {
+ await formikPropsRef.current.submitForm();
+
+ // The docs say that the promise submitForm returns
+ // will be rejected if there are errors, but that is not the case.
+ // Therefore, after the promise is resolved, we manually validate
+ // to see if the form is valid.
+ // https://github.com/jaredpalmer/formik/issues/1580
+ formikPropsRef.current.setSubmitting(false);
+
+ // Setting context to the values so you can use "$..." in when conditions
+ const validationSchema = getValidationSchema();
+ await validationSchema.validate(formikPropsRef.current.values, {
+ abortEarly: false,
+ context: formikPropsRef.current.values,
+ });
+
+ // validate the formik state
+ const formikErrors = await formikPropsRef.current.validateForm();
+ return Object.keys(formikErrors).length === 0;
+ } catch {
+ return false;
+ }
+ };
+
+ const myValidateNonFormikState = async () => {
+ if (!viewRegistrationRef.current) {
+ // If the view hasn't registered yet, we don't want to consider
+ // it valid.
+ return false;
+ }
+
+ if (!viewRegistrationRef.current.validateNonFormikState) {
+ return true;
+ }
+
+ return viewRegistrationRef.current.validateNonFormikState();
+ };
+
+ useExtensionBridge({
+ init({ initInfo: _initInfo }) {
+ setCanRenderView(false);
+ setInitInfo(_initInfo);
+ },
+ async getSettings() {
+ if (!viewRegistrationRef.current || !formikPropsRef?.current?.values) {
+ return {};
+ }
+
+ try {
+ return await viewRegistrationRef.current.getSettings({
+ initInfo,
+ values: formikPropsRef.current.values,
+ });
+ } catch (e) {
+ // This will update the UI to show that an error has occurred.
+ reportAsyncError(e);
+ // Throwing the error will let Launch know not to save the settings.
+ throw e;
+ }
+ },
+ async validate() {
+ if (getInitialValuesPromiseRef.current) {
+ await getInitialValuesPromiseRef.current;
+ }
+ const results = await Promise.all([
+ myValidateFormikState(),
+ myValidateNonFormikState(),
+ ]);
+ return results.every((result) => result);
+ },
+ });
+
+ const registerImperativeFormApi = (api) => {
+ viewRegistrationRef.current = viewRegistrationRef.current || {};
+ viewRegistrationRef.current.getSettings = api.getSettings;
+ viewRegistrationRef.current.validateFormikState = api.validateFormikState;
+ viewRegistrationRef.current.formikStateValidationSchema =
+ api.formikStateValidationSchema;
+ viewRegistrationRef.current.getFormikStateValidationSchema =
+ api.getFormikStateValidationSchema;
+ viewRegistrationRef.current.validateNonFormikState =
+ api.validateNonFormikState;
+ };
+
+ if (getSettings) {
+ useEffect(() => {
+ registerImperativeFormApi({
+ getSettings,
+ validateFormikState,
+ formikStateValidationSchema,
+ getFormikStateValidationSchema,
+ validateNonFormikState,
+ });
+ }, []);
+ }
+ if (getInitialValues) {
+ useEffect(() => {
+ async function getData() {
+ if (initInfo) {
+ try {
+ const getInitialValuesPromise = getInitialValues({ initInfo });
+ getInitialValuesPromiseRef.current = getInitialValuesPromise;
+ formikPropsRef.current.resetForm({
+ values: await getInitialValuesPromise,
+ });
+ setCanRenderView(true);
+ window.loaded = true;
+ } catch (e) {
+ reportAsyncError(e);
+ }
+ }
+ }
+
+ getData();
+ }, [initInfo]);
+ }
+
+ useEffect(() => {
+ if (canRenderView) {
+ window.dispatchEvent(new Event("extension-reactor-alloy:rendered"));
+ }
+ }, [canRenderView]);
+
+ // Show the spinner until getInitialValues is done
+ if (!canRenderView) {
+ return (
+
+
+
+ );
+ }
+
+ return (
+
+
+ {render({
+ initInfo,
+ formikProps: formikPropsRef.current,
+ registerImperativeFormApi,
+ })}
+
+
+ );
+};
+
+ExtensionView.propTypes = {
+ render: PropTypes.func,
+ getInitialValues: PropTypes.func,
+ getSettings: PropTypes.func,
+ validateFormikState: PropTypes.func,
+ formikStateValidationSchema: PropTypes.object,
+ getFormikStateValidationSchema: PropTypes.func,
+ validateNonFormikState: PropTypes.func,
+};
+
+export default ExtensionView;
diff --git a/packages/reactor-extension/src/view/components/fieldDescriptionAndError.css b/packages/reactor-extension/src/view/components/fieldDescriptionAndError.css
new file mode 100644
index 000000000..1efe7181e
--- /dev/null
+++ b/packages/reactor-extension/src/view/components/fieldDescriptionAndError.css
@@ -0,0 +1,21 @@
+.FieldDescriptionAndError-description,
+.FieldDescriptionAndError-error {
+ /* These styles were largely copied from React-Spectrum's labeling of fields,
+ since the description and error look very similar. */
+ box-sizing: border-box;
+ color: var(--spectrum-alias-label-text-color,var(--spectrum-global-color-gray-700));
+ padding-top: var(--spectrum-global-dimension-size-50);
+ padding-bottom: var(--spectrum-global-dimension-size-50);
+
+ font-size: var(--spectrum-global-dimension-font-size-75);
+ font-weight: var(--spectrum-global-font-weight-regular,400);
+ line-height: var(--spectrum-global-font-line-height-small,1.3);
+
+ -webkit-font-smoothing: subpixel-antialiased;
+ -moz-osx-font-smoothing: auto;
+ font-smoothing: subpixel-antialiased;
+}
+
+.FieldDescriptionAndError-error {
+ color: var(--spectrum-semantic-negative-color-default, var(--spectrum-global-color-red-500))
+}
diff --git a/packages/reactor-extension/src/view/components/fieldDescriptionAndError.jsx b/packages/reactor-extension/src/view/components/fieldDescriptionAndError.jsx
new file mode 100644
index 000000000..e9a344109
--- /dev/null
+++ b/packages/reactor-extension/src/view/components/fieldDescriptionAndError.jsx
@@ -0,0 +1,86 @@
+/*
+Copyright 2021 Adobe. All rights reserved.
+This file is licensed to you under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License. You may obtain a copy
+of the License at http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software distributed under
+the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+OF ANY KIND, either express or implied. See the License for the specific language
+governing permissions and limitations under the License.
+*/
+
+import { Children } from "react";
+import PropTypes from "prop-types";
+import "./fieldDescriptionAndError.css";
+import { Flex, Link, View } from "@adobe/react-spectrum";
+
+// This is intended as a temporary solution until descriptions and errors
+// supported natively in React-Spectrum.
+// https://github.com/adobe/react-spectrum/issues/1346
+const FieldDescriptionAndError = ({
+ children,
+ description,
+ error,
+ messagePaddingTop,
+ messagePaddingStart,
+ learnMoreLink,
+}) => {
+ const child = Children.only(children);
+ const width = child.props.width;
+
+ let className;
+ let message;
+
+ if (error) {
+ className = "FieldDescriptionAndError-error";
+ message = error;
+ } else if (description) {
+ className = "FieldDescriptionAndError-description";
+ message = description;
+ }
+
+ // By providing a width directly on the error and description
+ // divs, we ensure that the text wraps at the width of the field.
+ // We're using the same CSS variables here that the field itself receives.
+ // There may be a way to do all of this without Spectrum's CSS variables.
+ const widthStyle = width
+ ? `var(--spectrum-global-dimension-${width}, var(--spectrum-alias-${width}))`
+ : `var(--spectrum-field-default-width)`;
+
+ return (
+
+ {children}
+ {message && (
+
+ {message}
+ {learnMoreLink && (
+
+ Learn more
+
+ )}
+
+ )}
+
+ );
+};
+
+FieldDescriptionAndError.propTypes = {
+ children: PropTypes.node.isRequired,
+ description: PropTypes.node,
+ error: PropTypes.string,
+ messagePaddingTop: PropTypes.string,
+ messagePaddingStart: PropTypes.string,
+ learnMoreLink: PropTypes.object,
+};
+
+export default FieldDescriptionAndError;
diff --git a/packages/reactor-extension/src/view/components/fieldSubset.jsx b/packages/reactor-extension/src/view/components/fieldSubset.jsx
new file mode 100644
index 000000000..20258543d
--- /dev/null
+++ b/packages/reactor-extension/src/view/components/fieldSubset.jsx
@@ -0,0 +1,24 @@
+/*
+Copyright 2021 Adobe. All rights reserved.
+This file is licensed to you under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License. You may obtain a copy
+of the License at http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software distributed under
+the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+OF ANY KIND, either express or implied. See the License for the specific language
+governing permissions and limitations under the License.
+*/
+
+import { View } from "@adobe/react-spectrum";
+import PropTypes from "prop-types";
+
+const FieldSubset = ({ children }) => {
+ return {children};
+};
+
+FieldSubset.propTypes = {
+ children: PropTypes.node.isRequired,
+};
+
+export default FieldSubset;
diff --git a/packages/reactor-extension/src/view/components/fillParentAndCenterChildren.jsx b/packages/reactor-extension/src/view/components/fillParentAndCenterChildren.jsx
new file mode 100644
index 000000000..5f4ad38f4
--- /dev/null
+++ b/packages/reactor-extension/src/view/components/fillParentAndCenterChildren.jsx
@@ -0,0 +1,33 @@
+/*
+Copyright 2020 Adobe. All rights reserved.
+This file is licensed to you under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License. You may obtain a copy
+of the License at http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software distributed under
+the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+OF ANY KIND, either express or implied. See the License for the specific language
+governing permissions and limitations under the License.
+*/
+
+import PropTypes from "prop-types";
+import { Flex } from "@adobe/react-spectrum";
+
+const FillParentAndCenterChildren = ({ children }) => {
+ return (
+
+ {children}
+
+ );
+};
+
+FillParentAndCenterChildren.propTypes = {
+ children: PropTypes.node.isRequired,
+};
+
+export default FillParentAndCenterChildren;
diff --git a/packages/reactor-extension/src/view/components/formElementContainer.jsx b/packages/reactor-extension/src/view/components/formElementContainer.jsx
new file mode 100644
index 000000000..22c683f62
--- /dev/null
+++ b/packages/reactor-extension/src/view/components/formElementContainer.jsx
@@ -0,0 +1,32 @@
+/*
+Copyright 2023 Adobe. All rights reserved.
+This file is licensed to you under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License. You may obtain a copy
+of the License at http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software distributed under
+the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+OF ANY KIND, either express or implied. See the License for the specific language
+governing permissions and limitations under the License.
+*/
+import { Flex } from "@adobe/react-spectrum";
+import PropTypes from "prop-types";
+
+const FormElementContainer = ({
+ children,
+ direction = "column",
+ ...otherProps
+}) => {
+ return (
+
+ {children}
+
+ );
+};
+
+FormElementContainer.propTypes = {
+ children: PropTypes.node,
+ direction: PropTypes.string,
+};
+
+export default FormElementContainer;
diff --git a/packages/reactor-extension/src/view/components/formikReactSpectrum3/formikCheckbox.jsx b/packages/reactor-extension/src/view/components/formikReactSpectrum3/formikCheckbox.jsx
new file mode 100644
index 000000000..f72fa3b72
--- /dev/null
+++ b/packages/reactor-extension/src/view/components/formikReactSpectrum3/formikCheckbox.jsx
@@ -0,0 +1,48 @@
+/*
+Copyright 2021 Adobe. All rights reserved.
+This file is licensed to you under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License. You may obtain a copy
+of the License at http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software distributed under
+the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+OF ANY KIND, either express or implied. See the License for the specific language
+governing permissions and limitations under the License.
+*/
+
+import PropTypes from "prop-types";
+import { Checkbox } from "@adobe/react-spectrum";
+import { useField } from "formik";
+import FieldDescriptionAndError from "../fieldDescriptionAndError";
+
+const FormikCheckbox = ({ name, description, width, ...otherProps }) => {
+ const [{ value }, { touched, error }, { setValue, setTouched }] =
+ useField(name);
+ return (
+
+ {
+ setTouched(true);
+ }}
+ validationState={touched && error ? "invalid" : undefined}
+ width={width}
+ />
+
+ );
+};
+
+FormikCheckbox.propTypes = {
+ name: PropTypes.string.isRequired,
+ description: PropTypes.string,
+ width: PropTypes.string,
+};
+
+export default FormikCheckbox;
diff --git a/packages/reactor-extension/src/view/components/formikReactSpectrum3/formikCheckboxGroup.jsx b/packages/reactor-extension/src/view/components/formikReactSpectrum3/formikCheckboxGroup.jsx
new file mode 100644
index 000000000..f5a03c8a8
--- /dev/null
+++ b/packages/reactor-extension/src/view/components/formikReactSpectrum3/formikCheckboxGroup.jsx
@@ -0,0 +1,74 @@
+/*
+Copyright 2021 Adobe. All rights reserved.
+This file is licensed to you under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License. You may obtain a copy
+of the License at http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software distributed under
+the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+OF ANY KIND, either express or implied. See the License for the specific language
+governing permissions and limitations under the License.
+*/
+
+import { createRef, cloneElement, Children } from "react";
+import PropTypes from "prop-types";
+import { CheckboxGroup } from "@adobe/react-spectrum";
+import { useField } from "formik";
+import FieldDescriptionAndError from "../fieldDescriptionAndError";
+
+const FormikCheckboxGroup = ({
+ name,
+ children,
+ description,
+ width,
+ ...otherProps
+}) => {
+ const [{ value }, { touched, error }, { setValue, setTouched }] =
+ useField(name);
+ const checkboxGroupRef = createRef();
+ // Not entirely sure this is the right approach, but there's
+ // no onBlur prop for FormikCheckboxGroup, so we wire up Formik's
+ // onBlur to every checkbox.
+ const childrenWithOnBlur = Children.map(children, (child) => {
+ return cloneElement(child, {
+ onBlur: (event) => {
+ // If the target that will receive focus is not a child of the
+ // checkbox group, we know the checkbox group has lost focus.
+ if (
+ !checkboxGroupRef.current
+ .UNSAFE_getDOMNode()
+ .contains(event.relatedTarget)
+ ) {
+ setTouched(true);
+ }
+ },
+ });
+ });
+
+ return (
+
+
+ {childrenWithOnBlur}
+
+
+ );
+};
+
+FormikCheckboxGroup.propTypes = {
+ name: PropTypes.string.isRequired,
+ children: PropTypes.node.isRequired,
+ description: PropTypes.string,
+ width: PropTypes.string,
+};
+
+export default FormikCheckboxGroup;
diff --git a/packages/reactor-extension/src/view/components/formikReactSpectrum3/formikComboBox.jsx b/packages/reactor-extension/src/view/components/formikReactSpectrum3/formikComboBox.jsx
new file mode 100644
index 000000000..a7fa2e9cc
--- /dev/null
+++ b/packages/reactor-extension/src/view/components/formikReactSpectrum3/formikComboBox.jsx
@@ -0,0 +1,62 @@
+/*
+Copyright 2021 Adobe. All rights reserved.
+This file is licensed to you under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License. You may obtain a copy
+of the License at http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software distributed under
+the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+OF ANY KIND, either express or implied. See the License for the specific language
+governing permissions and limitations under the License.
+*/
+
+import PropTypes from "prop-types";
+import { ComboBox } from "@adobe/react-spectrum";
+import { useField } from "formik";
+
+/**
+ * @param {object} params
+ * @param {string} params.name
+ * @param {string?} params.width
+ * @param {Function?} params.onBlur
+ * @param {(value: T) => undefined | string} params.validate A function that will be called to validate
+ * the value entered by the user. The function should return an error message if
+ * the value is invalid, or null if the value is valid.
+ * @returns {React.Element}
+ */
+const FormikComboBox = ({
+ name,
+ width,
+ validate,
+ onBlur = () => {},
+ ...otherProps
+}) => {
+ const [{ value }, { touched, error }, { setValue, setTouched }] = useField({
+ name,
+ validate,
+ });
+ return (
+ {
+ onBlur(...args);
+ setTouched(true);
+ }}
+ validationState={touched && error ? "invalid" : undefined}
+ name={name}
+ width={width}
+ errorMessage={error}
+ />
+ );
+};
+
+FormikComboBox.propTypes = {
+ name: PropTypes.string.isRequired,
+ onBlur: PropTypes.func,
+ validate: PropTypes.func,
+ width: PropTypes.string,
+};
+
+export default FormikComboBox;
diff --git a/packages/reactor-extension/src/view/components/formikReactSpectrum3/formikKeyedComboBox.jsx b/packages/reactor-extension/src/view/components/formikReactSpectrum3/formikKeyedComboBox.jsx
new file mode 100644
index 000000000..367ae2943
--- /dev/null
+++ b/packages/reactor-extension/src/view/components/formikReactSpectrum3/formikKeyedComboBox.jsx
@@ -0,0 +1,102 @@
+/*
+Copyright 2021 Adobe. All rights reserved.
+This file is licensed to you under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License. You may obtain a copy
+of the License at http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software distributed under
+the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+OF ANY KIND, either express or implied. See the License for the specific language
+governing permissions and limitations under the License.
+*/
+
+import { useRef } from "react";
+import PropTypes from "prop-types";
+import { ComboBox } from "@adobe/react-spectrum";
+import { useField } from "formik";
+import useForceRender from "../../utils/useForceRender";
+
+const FormikKeyedComboBox = ({
+ name,
+ width,
+ items,
+ getKey,
+ getLabel,
+ ...otherProps
+}) => {
+ const [{ value }, { touched, error }, { setValue, setTouched }] =
+ useField(name);
+ const forceRender = useForceRender();
+ const isFilteringRef = useRef(false);
+ const itemsRef = useRef(items);
+
+ let text;
+ if (isFilteringRef.current) {
+ text = value;
+ } else {
+ const currentItem = items.find((item) => getKey(item) === value);
+ text = currentItem ? getLabel(currentItem) : value;
+ }
+
+ return (
+ {
+ isFilteringRef.current = true;
+ if (newText === "") {
+ itemsRef.current = items;
+ } else {
+ const newTextLowerCase = newText.toLowerCase();
+ itemsRef.current = items.filter(
+ (item) =>
+ getLabel(item).toLowerCase().includes(newTextLowerCase) ||
+ getKey(item).toLowerCase().includes(newTextLowerCase),
+ );
+ }
+ // This will cause a re-render.
+ setValue(newText);
+ }}
+ onSelectionChange={(key) => {
+ if (key) {
+ isFilteringRef.current = false;
+ itemsRef.current = items;
+ setValue(key);
+ }
+ }}
+ onBlur={() => {
+ isFilteringRef.current = false;
+ itemsRef.current = items;
+ const selectedItem = items.find(
+ (item) => getKey(item) === value || getLabel(item) === value,
+ );
+ if (selectedItem) {
+ setValue(getKey(selectedItem));
+ }
+ setTouched(true);
+ }}
+ validationState={touched && error ? "invalid" : undefined}
+ width={width}
+ errorMessage={error}
+ onOpenChange={(isOpen) => {
+ if (!isOpen) {
+ isFilteringRef.current = false;
+ itemsRef.current = items;
+ forceRender();
+ }
+ }}
+ />
+ );
+};
+
+FormikKeyedComboBox.propTypes = {
+ name: PropTypes.string.isRequired,
+ width: PropTypes.string,
+ items: PropTypes.array.isRequired,
+ getKey: PropTypes.func.isRequired,
+ getLabel: PropTypes.func.isRequired,
+};
+
+export default FormikKeyedComboBox;
diff --git a/packages/reactor-extension/src/view/components/formikReactSpectrum3/formikNumberField.jsx b/packages/reactor-extension/src/view/components/formikReactSpectrum3/formikNumberField.jsx
new file mode 100644
index 000000000..3a1a88c48
--- /dev/null
+++ b/packages/reactor-extension/src/view/components/formikReactSpectrum3/formikNumberField.jsx
@@ -0,0 +1,57 @@
+/*
+Copyright 2024 Adobe. All rights reserved.
+This file is licensed to you under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License. You may obtain a copy
+of the License at http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software distributed under
+the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+OF ANY KIND, either express or implied. See the License for the specific language
+governing permissions and limitations under the License.
+*/
+
+import PropTypes from "prop-types";
+import { NumberField } from "@adobe/react-spectrum";
+import { useField } from "formik";
+
+/**
+ * @param {Object} params
+ * @param {string} params.name
+ * @param {string?} params.width
+ * @param {(value: T) => undefined | string} params.validate A function that will be called to validate
+ * the value entered by the user. The function should return an error message if
+ * the value is invalid, or null if the value is valid.
+ * @returns {React.Element}
+ */
+const FormikNumberField = ({ name, width, validate, ...otherProps }) => {
+ const [{ value }, { touched, error }, { setValue, setTouched }] = useField({
+ name,
+ validate,
+ });
+
+ return (
+ {
+ setValue(val).then(() => {
+ setTouched(true);
+ });
+ }}
+ onBlur={() => {
+ setTouched(true);
+ }}
+ validationState={touched && error ? "invalid" : undefined}
+ errorMessage={error}
+ width={width}
+ />
+ );
+};
+
+FormikNumberField.propTypes = {
+ name: PropTypes.string.isRequired,
+ width: PropTypes.string,
+ validate: PropTypes.func,
+};
+
+export default FormikNumberField;
diff --git a/packages/reactor-extension/src/view/components/formikReactSpectrum3/formikPagedComboBox.jsx b/packages/reactor-extension/src/view/components/formikReactSpectrum3/formikPagedComboBox.jsx
new file mode 100644
index 000000000..f817fc449
--- /dev/null
+++ b/packages/reactor-extension/src/view/components/formikReactSpectrum3/formikPagedComboBox.jsx
@@ -0,0 +1,118 @@
+/*
+Copyright 2021 Adobe. All rights reserved.
+This file is licensed to you under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License. You may obtain a copy
+of the License at http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software distributed under
+the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+OF ANY KIND, either express or implied. See the License for the specific language
+governing permissions and limitations under the License.
+*/
+
+import { useEffect } from "react";
+import PropTypes from "prop-types";
+import { ComboBox, Item } from "@adobe/react-spectrum";
+import { useField } from "formik";
+import usePagedComboBox from "../../utils/usePagedComboBox";
+
+import useIsFirstRender from "../../utils/useIsFirstRender";
+import Alert from "../alert";
+
+const FormikPagedComboBox = ({
+ name,
+ width,
+ loadItems,
+ getKey,
+ getLabel,
+ dependencies = [],
+ firstPage,
+ firstPageCursor,
+ "data-test-id": dataTestId,
+ alertTitle,
+ alertDescription,
+ ...otherProps
+}) => {
+ const isFirstRender = useIsFirstRender();
+ const [{ value }, { touched, error }, { setValue, setTouched }] =
+ useField(name);
+
+ const pagedComboBox = usePagedComboBox({
+ defaultSelectedItem: value,
+ loadItems,
+ getKey,
+ getLabel,
+ firstPage,
+ firstPageCursor,
+ });
+
+ useEffect(() => {
+ if (!isFirstRender) {
+ setValue(pagedComboBox.selectedItem);
+ }
+ }, [getKey(pagedComboBox.selectedItem)]);
+
+ useEffect(() => {
+ if (!isFirstRender) {
+ pagedComboBox.clear();
+ }
+ }, dependencies);
+
+ if (dependencies.length > 0 && !dependencies.find((d) => d)) {
+ return null;
+ }
+
+ return (
+ <>
+ {
+ setTouched(true);
+ }}
+ >
+ {(item) => {getLabel(item)}}
+
+ {pagedComboBox.inputValue === "" &&
+ pagedComboBox.loadingState === "idle" &&
+ pagedComboBox.items.length === 0 &&
+ alertTitle &&
+ alertDescription && (
+
+ {alertDescription}
+
+ )}
+
+ );
+};
+
+FormikPagedComboBox.propTypes = {
+ name: PropTypes.string.isRequired,
+ width: PropTypes.string,
+ loadItems: PropTypes.func.isRequired,
+ getKey: PropTypes.func.isRequired,
+ getLabel: PropTypes.func.isRequired,
+ dependencies: PropTypes.array,
+ firstPage: PropTypes.array,
+ firstPageCursor: PropTypes.any,
+ alertTitle: PropTypes.string,
+ alertDescription: PropTypes.string,
+ "data-test-id": PropTypes.string,
+};
+
+export default FormikPagedComboBox;
diff --git a/packages/reactor-extension/src/view/components/formikReactSpectrum3/formikPicker.jsx b/packages/reactor-extension/src/view/components/formikReactSpectrum3/formikPicker.jsx
new file mode 100644
index 000000000..04c3c16d9
--- /dev/null
+++ b/packages/reactor-extension/src/view/components/formikReactSpectrum3/formikPicker.jsx
@@ -0,0 +1,50 @@
+/*
+Copyright 2021 Adobe. All rights reserved.
+This file is licensed to you under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License. You may obtain a copy
+of the License at http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software distributed under
+the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+OF ANY KIND, either express or implied. See the License for the specific language
+governing permissions and limitations under the License.
+*/
+
+import { Picker } from "@adobe/react-spectrum";
+import { useField } from "formik";
+import PropTypes from "prop-types";
+
+const FormikPicker = ({ name, width, validate, onChange, ...otherProps }) => {
+ const [{ value }, { touched, error }, { setValue, setTouched }] = useField({
+ name,
+ validate,
+ });
+
+ return (
+ {
+ setValue(key);
+ if (onChange) {
+ onChange(key);
+ }
+ }}
+ onBlur={() => {
+ setTouched(true);
+ }}
+ validationState={touched && error ? "invalid" : undefined}
+ errorMessage={error}
+ width={width}
+ {...otherProps}
+ />
+ );
+};
+
+FormikPicker.propTypes = {
+ name: PropTypes.string.isRequired,
+ width: PropTypes.string,
+ validate: PropTypes.func,
+ onChange: PropTypes.func,
+};
+
+export default FormikPicker;
diff --git a/packages/reactor-extension/src/view/components/formikReactSpectrum3/formikRadioGroup.jsx b/packages/reactor-extension/src/view/components/formikReactSpectrum3/formikRadioGroup.jsx
new file mode 100644
index 000000000..b8c556743
--- /dev/null
+++ b/packages/reactor-extension/src/view/components/formikReactSpectrum3/formikRadioGroup.jsx
@@ -0,0 +1,94 @@
+/*
+Copyright 2021 Adobe. All rights reserved.
+This file is licensed to you under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License. You may obtain a copy
+of the License at http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software distributed under
+the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+OF ANY KIND, either express or implied. See the License for the specific language
+governing permissions and limitations under the License.
+*/
+
+import { createRef, Children, cloneElement, Fragment } from "react";
+import PropTypes from "prop-types";
+import { RadioGroup } from "@adobe/react-spectrum";
+import { useField } from "formik";
+import FieldDescriptionAndError from "../fieldDescriptionAndError";
+
+const FormikRadioGroup = ({
+ name,
+ children,
+ description,
+ width,
+ onChange,
+ ...otherProps
+}) => {
+ const [{ value }, { touched, error }, { setValue, setTouched }] =
+ useField(name);
+ const radioGroupRef = createRef();
+ // Not entirely sure this is the right approach, but there's
+ // no onBlur prop for RadioGroup, so we wire up Formik's
+ // onBlur to every radio.
+ /** @type {(child: React.ReactNode) => React.ReactNode} */
+ const cloneWithOnBlur = (child) => {
+ if (!child) {
+ return child;
+ }
+ if (child?.type === Fragment) {
+ return cloneElement(
+ child,
+ {},
+ Children.map(child.props.children, cloneWithOnBlur),
+ );
+ }
+
+ return cloneElement(child, {
+ /** @type {(event: React.FocusEvent) => void} */
+ onBlur: (event) => {
+ // If the target that will receive focus is not a child of the
+ // radio group, we know the radio group has lost focus.
+ if (
+ !radioGroupRef.current
+ .UNSAFE_getDOMNode()
+ .contains(event.relatedTarget)
+ ) {
+ setTouched(true);
+ }
+ },
+ });
+ };
+ const childrenWithOnBlur = Children.map(children, cloneWithOnBlur);
+ return (
+
+ {
+ setValue(currentValue);
+ if (onChange) {
+ onChange(currentValue);
+ }
+ }}
+ validationState={touched && error ? "invalid" : undefined}
+ width={width}
+ >
+ {childrenWithOnBlur}
+
+
+ );
+};
+
+FormikRadioGroup.propTypes = {
+ name: PropTypes.string.isRequired,
+ children: PropTypes.node.isRequired,
+ description: PropTypes.string,
+ width: PropTypes.string,
+ onChange: PropTypes.func,
+};
+
+export default FormikRadioGroup;
diff --git a/packages/reactor-extension/src/view/components/formikReactSpectrum3/formikRadioGroupWithDataElement.jsx b/packages/reactor-extension/src/view/components/formikReactSpectrum3/formikRadioGroupWithDataElement.jsx
new file mode 100644
index 000000000..e69c3b55e
--- /dev/null
+++ b/packages/reactor-extension/src/view/components/formikReactSpectrum3/formikRadioGroupWithDataElement.jsx
@@ -0,0 +1,164 @@
+/*
+Copyright 2021 Adobe. All rights reserved.
+This file is licensed to you under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License. You may obtain a copy
+of the License at http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software distributed under
+the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+OF ANY KIND, either express or implied. See the License for the specific language
+governing permissions and limitations under the License.
+*/
+
+import { createRef, Children, cloneElement } from "react";
+import PropTypes from "prop-types";
+import { RadioGroup, Radio, TextField } from "@adobe/react-spectrum";
+import { useField } from "formik";
+import { string } from "yup";
+import RawDataElementSelector from "../rawDataElementSelector";
+import singleDataElementRegex from "../../constants/singleDataElementRegex";
+import { DATA_ELEMENT_REQUIRED } from "../../constants/validationErrorMessages";
+import FieldSubset from "../fieldSubset";
+
+export const createRadioGroupWithDataElementValidationSchema = (name) => {
+ return string().when([`${name}DataElement`], {
+ is: ({ isDataElement } = {}) => isDataElement,
+ then: (schema) =>
+ schema
+ .required(DATA_ELEMENT_REQUIRED)
+ .matches(singleDataElementRegex, DATA_ELEMENT_REQUIRED),
+ });
+};
+
+const FormikRadioGroupWithDataElement = ({
+ name,
+ children,
+ dataElementDescription,
+ dataTestIdPrefix = name,
+ ...otherProps
+}) => {
+ const options = Children.map(children, (child) => {
+ const { value } = child.props;
+ return value;
+ });
+ const [{ value }, { error }, { setValue, setTouched }] = useField(name);
+ const [
+ { value: dataElementValue },
+ { touched: dataElementTouched },
+ { setValue: dataElementSetValue, setTouched: dataElementSetTouched },
+ ] = useField(`${name}DataElement`);
+
+ const radioGroupRef = createRef();
+
+ const radioOnBlur = (event) => {
+ // If the target that will receive focus is not a child of the
+ // radio group, we know the radio group has lost focus.
+ if (
+ !radioGroupRef.current.UNSAFE_getDOMNode().contains(event.relatedTarget)
+ ) {
+ setTouched(true);
+ }
+ };
+
+ // Not entirely sure this is the right approach, but there's
+ // no onBlur prop for RadioGroup, so we wire up Formik's
+ // onBlur to every radio.
+ const childrenWithOnBlur = Children.map(children, (child) => {
+ return cloneElement(child, {
+ onBlur: radioOnBlur,
+ });
+ });
+
+ let radioValue;
+ let dataElementText;
+ if (
+ dataElementValue === undefined &&
+ options.some((option) => option === value)
+ ) {
+ // We haven't ever called setValue so we don't have a dataElementValue yet,
+ // but the value matches one of the options.
+ radioValue = value;
+ dataElementText = "";
+ } else if (
+ dataElementValue !== undefined &&
+ !dataElementValue.isDataElement
+ ) {
+ radioValue = value;
+ dataElementText = dataElementValue.dataElement;
+ } else {
+ radioValue = "dataElement";
+ dataElementText = value;
+ }
+
+ const setValues = (newRadioValue, newDataElement) => {
+ // set the dataElement value first because the main field validation uses it
+ dataElementSetValue(
+ {
+ isDataElement: newRadioValue === "dataElement",
+ dataElement: newDataElement,
+ },
+ false,
+ );
+ setValue(newRadioValue === "dataElement" ? newDataElement : newRadioValue);
+ };
+
+ return (
+
+ );
+};
+
+FormikRadioGroupWithDataElement.propTypes = {
+ name: PropTypes.string.isRequired,
+ children: PropTypes.node.isRequired,
+ description: PropTypes.string,
+ dataElementDescription: PropTypes.string,
+ width: PropTypes.string,
+ dataTestIdPrefix: PropTypes.string,
+};
+
+export default FormikRadioGroupWithDataElement;
diff --git a/packages/reactor-extension/src/view/components/formikReactSpectrum3/formikTextArea.jsx b/packages/reactor-extension/src/view/components/formikReactSpectrum3/formikTextArea.jsx
new file mode 100644
index 000000000..111f2904a
--- /dev/null
+++ b/packages/reactor-extension/src/view/components/formikReactSpectrum3/formikTextArea.jsx
@@ -0,0 +1,69 @@
+/*
+Copyright 2021 Adobe. All rights reserved.
+This file is licensed to you under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License. You may obtain a copy
+of the License at http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software distributed under
+the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+OF ANY KIND, either express or implied. See the License for the specific language
+governing permissions and limitations under the License.
+*/
+
+import PropTypes from "prop-types";
+import { TextArea } from "@adobe/react-spectrum";
+import { useField } from "formik";
+
+/**
+ * @param {Object} params
+ * @param {string} params.name
+ * @param {string?} params.width
+ * @param {(value: T) => undefined | string} params.validate A function that will be called to validate
+ * the value entered by the user. The function should return an error message if
+ * the value is invalid, or null if the value is valid.
+ * @returns {React.Element}
+ */
+const FormikTextField = ({ name, width, validate, onBlur, ...otherProps }) => {
+ const [
+ { value },
+ { touched: fieldTouched, error: fieldError },
+ { setValue, setTouched },
+ ] = useField({
+ name,
+ validate,
+ });
+
+ const touched = otherProps.touched || fieldTouched;
+ const error = otherProps.error === "" ? "" : otherProps.error || fieldError;
+ const validationState =
+ otherProps.invalid || (touched && error) ? "invalid" : undefined;
+
+ return (
+