@aglyn/plugins-outreach 1.0.0-beta.219 → 1.0.0-beta.220

package/src/lib/components/sequence-step-card.js

@@ -19,18 +19,75 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { mdiArrowDown, mdiArrowUp, mdiCodeBraces, mdiEmailFastOutline, mdiTrashCanOutline } from "@aglyn/shared-data-mdi";
 import { MdiIcon } from "@aglyn/shared-ui-jsx";
 import { Autocomplete, Button, Card, CardContent, FormControlLabel, IconButton, ListSubheader, Menu, MenuItem, Stack, Switch, TextField, Tooltip, Typography } from "@mui/material";
-import { useRef, useState } from "react";
+import { memo, useCallback, useRef, useState } from "react";
 import { OUTREACH_MERGE_FIELDS } from "../engine/sequence-validation.js";
 import { OUTREACH_MAX_STEP_DELAY_BUSINESS_DAYS, OUTREACH_TASK_KIND_LABELS, OUTREACH_TASK_KINDS } from "../model/outreach.types.js";
 /** The merge fields, grouped the way the picker heads them. */ const FIELD_GROUPS = [
     ...new Set(OUTREACH_MERGE_FIELDS.map((field)=>field.group))
 ];
+/** A text field that redraws only when what it shows changes (AGL-3423). */ const MemoTextField = /*#__PURE__*/ memo(TextField);
+const HEADER_ROW = {
+    alignItems: 'center'
+};
+const TITLE = {
+    flexGrow: 1
+};
+const DELAY_FIELD = {
+    maxWidth: {
+        sm: 360
+    }
+};
+const DELAY_SLOT_PROPS = {
+    htmlInput: {
+        min: 0,
+        max: OUTREACH_MAX_STEP_DELAY_BUSINESS_DAYS,
+        step: 1
+    }
+};
+const ACTIONS_ROW = {
+    flexWrap: 'wrap',
+    rowGap: 1
+};
+const TASK_ROW = {
+    xs: 'column',
+    sm: 'row'
+};
+const TASK_KIND_FIELD = {
+    minWidth: {
+        sm: 180
+    }
+};
+const templateName = (option)=>option.name;
+const sameTemplate = (option, value)=>option.id === value.id;
+/** Every task kind, as the Task select lists them, built once. */ const TASK_KIND_MENU = OUTREACH_TASK_KINDS.map((kind)=>/*#__PURE__*/ _jsx(MenuItem, {
+        value: kind,
+        children: OUTREACH_TASK_KIND_LABELS[kind]
+    }, kind));
 /**
  * One step of the sequence editor (AGL-2980): an email — subject, body or a
  * CRM template, merge fields, the wait before it — or a task for the rep.
+ *
+ * ## Each field redraws on its own (AGL-3423)
+ *
+ * The editor keeps the whole sequence in one draft, so a letter typed into a
+ * step hands its card a new step. The card's fields are memoized, with
+ * handlers that keep their identity and write the step as last drawn, so the
+ * letter redraws the field it lands in rather than the wait, the subject, the
+ * template picker and the body together. A keystroke that costs one field
+ * leaves typed input nothing to queue behind, which is what kept the
+ * countries chips from being redrawn by fifty keystrokes in a row (#185).
  */ export function OutreachStepCard(props) {
     var _OUTREACH_TASK_KIND_LABELS_step_taskKind, _props_issues_step;
     const { step, index, count, disabled } = props;
+    // The card as last drawn, which every handler below writes from.
+    const latest = useRef(props);
+    latest.current = props;
+    const moveUp = useCallback(()=>latest.current.onMove(-1), []);
+    const moveDown = useCallback(()=>latest.current.onMove(1), []);
+    const remove = useCallback(()=>latest.current.onRemove(), []);
+    const setDelay = useCallback((event)=>latest.current.onChange(_extends({}, latest.current.step, {
+            delayBusinessDays: event.target.value === '' ? Number.NaN : Number(event.target.value)
+        })), []);
     const title = step.kind === 'email' ? `Step ${index + 1} · Email` : `Step ${index + 1} · ${(_OUTREACH_TASK_KIND_LABELS_step_taskKind = OUTREACH_TASK_KIND_LABELS[step.taskKind]) != null ? _OUTREACH_TASK_KIND_LABELS_step_taskKind : 'Task'}`;
     return /*#__PURE__*/ _jsx(Card, {
         variant: "outlined",
@@ -40,68 +97,22 @@ import { OUTREACH_MAX_STEP_DELAY_BUSINESS_DAYS, OUTREACH_TASK_KIND_LABELS, OUTRE
             children: /*#__PURE__*/ _jsxs(Stack, {
                 spacing: 2,
                 children: [
-                    /*#__PURE__*/ _jsxs(Stack, {
-                        direction: "row",
-                        spacing: 1,
-                        sx: {
-                            alignItems: 'center'
-                        },
-                        children: [
-                            /*#__PURE__*/ _jsx(Typography, {
-                                variant: "subtitle1",
-                                sx: {
-                                    flexGrow: 1
-                                },
-                                children: title
-                            }),
-                            /*#__PURE__*/ _jsx(Tooltip, {
-                                title: "Move up",
-                                children: /*#__PURE__*/ _jsx("span", {
-                                    children: /*#__PURE__*/ _jsx(IconButton, {
-                                        size: "small",
-                                        "aria-label": `Move step ${index + 1} up`,
-                                        disabled: disabled || index === 0,
-                                        onClick: ()=>props.onMove(-1),
-                                        children: /*#__PURE__*/ _jsx(MdiIcon, {
-                                            path: mdiArrowUp.path,
-                                            fontSize: "small"
-                                        })
-                                    })
-                                })
-                            }),
-                            /*#__PURE__*/ _jsx(Tooltip, {
-                                title: "Move down",
-                                children: /*#__PURE__*/ _jsx("span", {
-                                    children: /*#__PURE__*/ _jsx(IconButton, {
-                                        size: "small",
-                                        "aria-label": `Move step ${index + 1} down`,
-                                        disabled: disabled || index === count - 1,
-                                        onClick: ()=>props.onMove(1),
-                                        children: /*#__PURE__*/ _jsx(MdiIcon, {
-                                            path: mdiArrowDown.path,
-                                            fontSize: "small"
-                                        })
-                                    })
-                                })
-                            }),
-                            /*#__PURE__*/ _jsx(Tooltip, {
-                                title: "Remove",
-                                children: /*#__PURE__*/ _jsx("span", {
-                                    children: /*#__PURE__*/ _jsx(IconButton, {
-                                        size: "small",
-                                        "aria-label": `Remove step ${index + 1}`,
-                                        disabled: disabled || count === 1,
-                                        onClick: props.onRemove,
-                                        children: /*#__PURE__*/ _jsx(MdiIcon, {
-                                            path: mdiTrashCanOutline.path,
-                                            fontSize: "small"
-                                        })
-                                    })
-                                })
-                            })
-                        ]
+                    /*#__PURE__*/ _jsx(StepHeader, {
+                        title: title,
+                        index: index,
+                        count: count,
+                        disabled: disabled,
+                        onMoveUp: moveUp,
+                        onMoveDown: moveDown,
+                        onRemove: remove
+                    }),
+                    /*#__PURE__*/ _jsx(DelayField, {
+                        first: index === 0,
+                        value: step.delayBusinessDays,
+                        issue: props.issues['delayBusinessDays'],
+                        disabled: disabled,
+                        onChange: setDelay
                     }),
-                    /*#__PURE__*/ _jsx(DelayField, _extends({}, props)),
                     step.kind === 'email' ? /*#__PURE__*/ _jsx(EmailStepFields, _extends({}, props, {
                         step: step
                     })) : step.kind === 'task' ? /*#__PURE__*/ _jsx(TaskStepFields, _extends({}, props, {
@@ -117,82 +128,159 @@ import { OUTREACH_MAX_STEP_DELAY_BUSINESS_DAYS, OUTREACH_TASK_KIND_LABELS, OUTRE
     });
 }
 OutreachStepCard.displayName = 'OutreachStepCard';
-function DelayField(props) {
-    const { step, index, disabled } = props;
-    const first = index === 0;
-    const issue = props.issues['delayBusinessDays'];
+/** The step's title and the controls that move or remove it. */ const StepHeader = /*#__PURE__*/ memo(function StepHeader(props) {
+    const { index, count, disabled } = props;
+    return /*#__PURE__*/ _jsxs(Stack, {
+        direction: "row",
+        spacing: 1,
+        sx: HEADER_ROW,
+        children: [
+            /*#__PURE__*/ _jsx(Typography, {
+                variant: "subtitle1",
+                sx: TITLE,
+                children: props.title
+            }),
+            /*#__PURE__*/ _jsx(Tooltip, {
+                title: "Move up",
+                children: /*#__PURE__*/ _jsx("span", {
+                    children: /*#__PURE__*/ _jsx(IconButton, {
+                        size: "small",
+                        "aria-label": `Move step ${index + 1} up`,
+                        disabled: disabled || index === 0,
+                        onClick: props.onMoveUp,
+                        children: /*#__PURE__*/ _jsx(MdiIcon, {
+                            path: mdiArrowUp.path,
+                            fontSize: "small"
+                        })
+                    })
+                })
+            }),
+            /*#__PURE__*/ _jsx(Tooltip, {
+                title: "Move down",
+                children: /*#__PURE__*/ _jsx("span", {
+                    children: /*#__PURE__*/ _jsx(IconButton, {
+                        size: "small",
+                        "aria-label": `Move step ${index + 1} down`,
+                        disabled: disabled || index === count - 1,
+                        onClick: props.onMoveDown,
+                        children: /*#__PURE__*/ _jsx(MdiIcon, {
+                            path: mdiArrowDown.path,
+                            fontSize: "small"
+                        })
+                    })
+                })
+            }),
+            /*#__PURE__*/ _jsx(Tooltip, {
+                title: "Remove",
+                children: /*#__PURE__*/ _jsx("span", {
+                    children: /*#__PURE__*/ _jsx(IconButton, {
+                        size: "small",
+                        "aria-label": `Remove step ${index + 1}`,
+                        disabled: disabled || count === 1,
+                        onClick: props.onRemove,
+                        children: /*#__PURE__*/ _jsx(MdiIcon, {
+                            path: mdiTrashCanOutline.path,
+                            fontSize: "small"
+                        })
+                    })
+                })
+            })
+        ]
+    });
+});
+const DelayField = /*#__PURE__*/ memo(function DelayField(props) {
+    const { first, value, issue } = props;
     return /*#__PURE__*/ _jsx(TextField, {
         type: "number",
         label: first ? 'Wait after enrolling (business days)' : 'Wait after the step before (business days)',
-        value: Number.isFinite(step.delayBusinessDays) ? step.delayBusinessDays : '',
-        onChange: (event)=>props.onChange(_extends({}, step, {
-                delayBusinessDays: event.target.value === '' ? Number.NaN : Number(event.target.value)
-            })),
-        disabled: disabled,
+        value: Number.isFinite(value) ? value : '',
+        onChange: props.onChange,
+        disabled: props.disabled,
         error: Boolean(issue),
         helperText: issue != null ? issue : first ? '0 sends at the next opening of the sending hours.' : 'Counted in the mailbox’s timezone, skipping weekends.',
-        slotProps: {
-            htmlInput: {
-                min: 0,
-                max: OUTREACH_MAX_STEP_DELAY_BUSINESS_DAYS,
-                step: 1
-            }
-        },
-        sx: {
-            maxWidth: {
-                sm: 360
-            }
-        }
+        slotProps: DELAY_SLOT_PROPS,
+        sx: DELAY_FIELD
     });
-}
+});
 function EmailStepFields(props) {
-    var _props_templates_find, _props_sendTestDisabledReason;
+    var _props_templates_find;
     const { step, disabled, issues } = props;
+    // The step as last drawn, which every handler below writes from.
+    const latest = useRef(props);
+    latest.current = props;
     const subjectRef = useRef(null);
     const bodyRef = useRef(null);
     const lastFocused = useRef('body');
     const [fieldsAnchor, setFieldsAnchor] = useState(null);
     const template = (_props_templates_find = props.templates.find((option)=>option.id === step.templateId)) != null ? _props_templates_find : null;
     const showSubject = !props.inThread;
-    /** Puts `{{key}}` where the caret was in the field last focused. */ const insertField = (key)=>{
+    const write = useCallback((patch)=>latest.current.onChange(_extends({}, latest.current.step, patch)), []);
+    const setReply = useCallback((event)=>write({
+            replyInThread: event.target.checked
+        }), [
+        write
+    ]);
+    const setSubject = useCallback((event)=>write({
+            subject: event.target.value
+        }), [
+        write
+    ]);
+    const setBody = useCallback((event)=>write({
+            body: event.target.value
+        }), [
+        write
+    ]);
+    const pickTemplate = useCallback((next)=>{
+        var _ref;
+        return write({
+            templateId: (_ref = next == null ? void 0 : next.id) != null ? _ref : null,
+            body: next ? '' : latest.current.step.body
+        });
+    }, [
+        write
+    ]);
+    const focusSubject = useCallback(()=>{
+        lastFocused.current = 'subject';
+    }, []);
+    const focusBody = useCallback(()=>{
+        lastFocused.current = 'body';
+    }, []);
+    const openFields = useCallback((event)=>setFieldsAnchor(event.currentTarget), []);
+    const closeFields = useCallback(()=>setFieldsAnchor(null), []);
+    const sendTest = useCallback(()=>latest.current.onSendTest == null ? void 0 : latest.current.onSendTest.call(latest.current), []);
+    /** Puts `{{key}}` where the caret was in the field last focused. */ const insertField = useCallback((key)=>{
         var _ref, _ref1;
         setFieldsAnchor(null);
+        const current = latest.current;
         const token = `{{${key}}}`;
-        const target = lastFocused.current === 'subject' && showSubject ? 'subject' : template ? null : 'body';
+        const target = lastFocused.current === 'subject' && !current.inThread ? 'subject' : current.templates.some((option)=>option.id === current.step.templateId) ? null : 'body';
         if (!target) return;
         const element = target === 'subject' ? subjectRef.current : bodyRef.current;
-        const value = step[target];
+        const value = current.step[target];
         const start = (_ref = element == null ? void 0 : element.selectionStart) != null ? _ref : value.length;
         const end = (_ref1 = element == null ? void 0 : element.selectionEnd) != null ? _ref1 : value.length;
-        props.onChange(_extends({}, step, {
+        current.onChange(_extends({}, current.step, {
             [target]: `${value.slice(0, start)}${token}${value.slice(end)}`
         }));
         requestAnimationFrame(()=>{
             element == null ? void 0 : element.focus();
             element == null ? void 0 : element.setSelectionRange(start + token.length, start + token.length);
         });
-    };
+    }, []);
     return /*#__PURE__*/ _jsxs(Stack, {
         spacing: 2,
         children: [
-            props.firstEmail ? null : /*#__PURE__*/ _jsx(FormControlLabel, {
-                control: /*#__PURE__*/ _jsx(Switch, {
-                    checked: step.replyInThread !== false,
-                    onChange: (event)=>props.onChange(_extends({}, step, {
-                            replyInThread: event.target.checked
-                        })),
-                    disabled: disabled
-                }),
-                label: "Reply in the same thread"
+            props.firstEmail ? null : /*#__PURE__*/ _jsx(ReplyInThreadField, {
+                checked: step.replyInThread !== false,
+                disabled: disabled,
+                onChange: setReply
             }),
-            showSubject ? /*#__PURE__*/ _jsx(TextField, {
+            showSubject ? /*#__PURE__*/ _jsx(MemoTextField, {
                 label: "Subject",
                 value: step.subject,
                 inputRef: subjectRef,
-                onFocus: ()=>lastFocused.current = 'subject',
-                onChange: (event)=>props.onChange(_extends({}, step, {
-                        subject: event.target.value
-                    })),
+                onFocus: focusSubject,
+                onChange: setSubject,
                 disabled: disabled,
                 error: Boolean(issues['subject']),
                 helperText: issues['subject'],
@@ -202,41 +290,25 @@ function EmailStepFields(props) {
                 color: "text.secondary",
                 children: props.threadSubject ? `Sent as a reply: “Re: ${props.threadSubject}”.` : 'Sent as a reply in the thread the earlier email started.'
             }),
-            /*#__PURE__*/ _jsx(Autocomplete, {
-                options: [
-                    ...props.templates
-                ],
-                value: template,
-                getOptionLabel: (option)=>option.name,
-                isOptionEqualToValue: (option, value)=>option.id === value.id,
-                onChange: (_event, next)=>{
-                    var _ref;
-                    return props.onChange(_extends({}, step, {
-                        templateId: (_ref = next == null ? void 0 : next.id) != null ? _ref : null,
-                        body: next ? '' : step.body
-                    }));
-                },
+            /*#__PURE__*/ _jsx(TemplateField, {
+                templates: props.templates,
+                template: template,
                 disabled: disabled,
-                renderInput: (params)=>/*#__PURE__*/ _jsx(TextField, _extends({}, params, {
-                        label: "CRM email template",
-                        helperText: template ? 'The template’s body is sent; this step’s own subject is the one used.' : 'Optional. Pick one to send its body instead of writing it here.'
-                    }))
+                onChange: pickTemplate
             }),
-            template ? /*#__PURE__*/ _jsx(TextField, {
+            template ? /*#__PURE__*/ _jsx(MemoTextField, {
                 label: "Body (from the template)",
                 value: template.body,
                 multiline: true,
                 minRows: 4,
                 fullWidth: true,
                 disabled: true
-            }) : /*#__PURE__*/ _jsx(TextField, {
+            }) : /*#__PURE__*/ _jsx(MemoTextField, {
                 label: "Body",
                 value: step.body,
                 inputRef: bodyRef,
-                onFocus: ()=>lastFocused.current = 'body',
-                onChange: (event)=>props.onChange(_extends({}, step, {
-                        body: event.target.value
-                    })),
+                onFocus: focusBody,
+                onChange: setBody,
                 disabled: disabled,
                 error: Boolean(issues['body']),
                 helperText: issues['body'],
@@ -244,98 +316,131 @@ function EmailStepFields(props) {
                 minRows: 6,
                 fullWidth: true
             }),
-            /*#__PURE__*/ _jsxs(Stack, {
-                direction: "row",
-                spacing: 1,
-                sx: {
-                    flexWrap: 'wrap',
-                    rowGap: 1
-                },
-                children: [
-                    /*#__PURE__*/ _jsx(Button, {
+            /*#__PURE__*/ _jsx(EmailStepActions, {
+                stepNumber: props.index + 1,
+                insertDisabled: Boolean(disabled || template && !showSubject),
+                canSendTest: Boolean(props.onSendTest),
+                sendTestDisabledReason: props.sendTestDisabledReason,
+                onInsertField: openFields,
+                onSendTest: sendTest
+            }),
+            /*#__PURE__*/ _jsx(MergeFieldMenu, {
+                anchorEl: fieldsAnchor,
+                onClose: closeFields,
+                onPick: insertField
+            })
+        ]
+    });
+}
+const ReplyInThreadField = /*#__PURE__*/ memo(function ReplyInThreadField(props) {
+    return /*#__PURE__*/ _jsx(FormControlLabel, {
+        control: /*#__PURE__*/ _jsx(Switch, {
+            checked: props.checked,
+            onChange: props.onChange,
+            disabled: props.disabled
+        }),
+        label: "Reply in the same thread"
+    });
+});
+const TemplateField = /*#__PURE__*/ memo(function TemplateField(props) {
+    const { template, onChange } = props;
+    return /*#__PURE__*/ _jsx(Autocomplete, {
+        options: [
+            ...props.templates
+        ],
+        value: template,
+        getOptionLabel: templateName,
+        isOptionEqualToValue: sameTemplate,
+        onChange: (_event, next)=>onChange(next),
+        disabled: props.disabled,
+        renderInput: (params)=>/*#__PURE__*/ _jsx(TextField, _extends({}, params, {
+                label: "CRM email template",
+                helperText: template ? 'The template’s body is sent; this step’s own subject is the one used.' : 'Optional. Pick one to send its body instead of writing it here.'
+            }))
+    });
+});
+const EmailStepActions = /*#__PURE__*/ memo(function EmailStepActions(props) {
+    var _props_sendTestDisabledReason;
+    return /*#__PURE__*/ _jsxs(Stack, {
+        direction: "row",
+        spacing: 1,
+        sx: ACTIONS_ROW,
+        children: [
+            /*#__PURE__*/ _jsx(Button, {
+                size: "small",
+                variant: "outlined",
+                startIcon: /*#__PURE__*/ _jsx(MdiIcon, {
+                    path: mdiCodeBraces.path,
+                    fontSize: "small"
+                }),
+                onClick: props.onInsertField,
+                disabled: props.insertDisabled,
+                "aria-haspopup": "menu",
+                children: "Insert field"
+            }),
+            props.canSendTest ? /*#__PURE__*/ _jsx(Tooltip, {
+                title: (_props_sendTestDisabledReason = props.sendTestDisabledReason) != null ? _props_sendTestDisabledReason : '',
+                children: /*#__PURE__*/ _jsx("span", {
+                    children: /*#__PURE__*/ _jsx(Button, {
                         size: "small",
                         variant: "outlined",
                         startIcon: /*#__PURE__*/ _jsx(MdiIcon, {
-                            path: mdiCodeBraces.path,
+                            path: mdiEmailFastOutline.path,
                             fontSize: "small"
                         }),
-                        onClick: (event)=>setFieldsAnchor(event.currentTarget),
-                        disabled: disabled || Boolean(template) && !showSubject,
-                        "aria-haspopup": "menu",
-                        children: "Insert field"
-                    }),
-                    props.onSendTest ? /*#__PURE__*/ _jsx(Tooltip, {
-                        title: (_props_sendTestDisabledReason = props.sendTestDisabledReason) != null ? _props_sendTestDisabledReason : '',
-                        children: /*#__PURE__*/ _jsx("span", {
-                            children: /*#__PURE__*/ _jsx(Button, {
-                                size: "small",
-                                variant: "outlined",
-                                startIcon: /*#__PURE__*/ _jsx(MdiIcon, {
-                                    path: mdiEmailFastOutline.path,
-                                    fontSize: "small"
-                                }),
-                                onClick: props.onSendTest,
-                                disabled: Boolean(props.sendTestDisabledReason),
-                                "aria-label": `Send a test of step ${props.index + 1}`,
-                                children: "Send a test"
-                            })
-                        })
-                    }) : null
-                ]
-            }),
-            /*#__PURE__*/ _jsx(Menu, {
-                anchorEl: fieldsAnchor,
-                open: Boolean(fieldsAnchor),
-                onClose: ()=>setFieldsAnchor(null),
-                children: FIELD_GROUPS.flatMap((group)=>[
-                        /*#__PURE__*/ _jsx(ListSubheader, {
-                            children: group
-                        }, `group-${group}`),
-                        ...OUTREACH_MERGE_FIELDS.filter((field)=>field.group === group).map((field)=>/*#__PURE__*/ _jsx(MenuItem, {
-                                onClick: ()=>insertField(field.key),
-                                children: field.label
-                            }, field.key))
-                    ])
-            })
+                        onClick: props.onSendTest,
+                        disabled: Boolean(props.sendTestDisabledReason),
+                        "aria-label": `Send a test of step ${props.stepNumber}`,
+                        children: "Send a test"
+                    })
+                })
+            }) : null
         ]
     });
-}
+});
+const MergeFieldMenu = /*#__PURE__*/ memo(function MergeFieldMenu(props) {
+    const { onPick } = props;
+    return /*#__PURE__*/ _jsx(Menu, {
+        anchorEl: props.anchorEl,
+        open: Boolean(props.anchorEl),
+        onClose: props.onClose,
+        children: FIELD_GROUPS.flatMap((group)=>[
+                /*#__PURE__*/ _jsx(ListSubheader, {
+                    children: group
+                }, `group-${group}`),
+                ...OUTREACH_MERGE_FIELDS.filter((field)=>field.group === group).map((field)=>/*#__PURE__*/ _jsx(MenuItem, {
+                        onClick: ()=>onPick(field.key),
+                        children: field.label
+                    }, field.key))
+            ])
+    });
+});
 function TaskStepFields(props) {
     var _issues_title;
     const { step, disabled, issues } = props;
+    // The step as last drawn, which both handlers write from.
+    const latest = useRef(props);
+    latest.current = props;
+    const setKind = useCallback((event)=>latest.current.onChange(_extends({}, latest.current.step, {
+            taskKind: event.target.value
+        })), []);
+    const setTitle = useCallback((event)=>latest.current.onChange(_extends({}, latest.current.step, {
+            title: event.target.value
+        })), []);
     return /*#__PURE__*/ _jsxs(Stack, {
-        direction: {
-            xs: 'column',
-            sm: 'row'
-        },
+        direction: TASK_ROW,
         spacing: 2,
         children: [
-            /*#__PURE__*/ _jsx(TextField, {
-                select: true,
-                label: "Task",
+            /*#__PURE__*/ _jsx(TaskKindField, {
                 value: OUTREACH_TASK_KINDS.includes(step.taskKind) ? step.taskKind : '',
-                onChange: (event)=>props.onChange(_extends({}, step, {
-                        taskKind: event.target.value
-                    })),
+                issue: issues['taskKind'],
                 disabled: disabled,
-                error: Boolean(issues['taskKind']),
-                helperText: issues['taskKind'],
-                sx: {
-                    minWidth: {
-                        sm: 180
-                    }
-                },
-                children: OUTREACH_TASK_KINDS.map((kind)=>/*#__PURE__*/ _jsx(MenuItem, {
-                        value: kind,
-                        children: OUTREACH_TASK_KIND_LABELS[kind]
-                    }, kind))
+                onChange: setKind
             }),
-            /*#__PURE__*/ _jsx(TextField, {
+            /*#__PURE__*/ _jsx(MemoTextField, {
                 label: "Title",
                 value: step.title,
-                onChange: (event)=>props.onChange(_extends({}, step, {
-                        title: event.target.value
-                    })),
+                onChange: setTitle,
                 disabled: disabled,
                 error: Boolean(issues['title']),
                 helperText: (_issues_title = issues['title']) != null ? _issues_title : 'What the task says, for example “Connect on LinkedIn”.',
@@ -344,6 +449,19 @@ function TaskStepFields(props) {
         ]
     });
 }
+const TaskKindField = /*#__PURE__*/ memo(function TaskKindField(props) {
+    return /*#__PURE__*/ _jsx(TextField, {
+        select: true,
+        label: "Task",
+        value: props.value,
+        onChange: props.onChange,
+        disabled: props.disabled,
+        error: Boolean(props.issue),
+        helperText: props.issue,
+        sx: TASK_KIND_FIELD,
+        children: TASK_KIND_MENU
+    });
+});
 export default OutreachStepCard;
 
 //# sourceMappingURL=sequence-step-card.js.map