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

package/src/lib/components/dynamic-list-rule-fields.js

@@ -59,8 +59,9 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
  */ import { CONTACT_LIFECYCLE_STAGES, CONTACT_LIFECYCLE_STAGE_LABELS, CONTACT_SOURCE_LABELS, DYNAMIC_LIST_CUSTOM_OPS, normalizeDynamicListRule } from "@aglyn/aglyn";
 import { Autocomplete, Box, Button, Divider, MenuItem, Stack, TextField, Typography } from "@mui/material";
 import { memo, useCallback, useEffect, useMemo, useRef, useState } from "react";
-import { useHostCampaigns, useOrgMemberOptions } from "@aglyn/tenant-feature-instance";
-import CampaignPicker from "@aglyn/shared-ui-email-campaigns/components/campaign-picker.component";
+import { useSiteContainerOptions, useOrgMemberOptions } from "@aglyn/tenant-feature-instance";
+import ContainerPicker from "@aglyn/tenant-feature-instance/components/container-picker";
+import { useContentStable } from "@aglyn/shared-ui-jsx/hooks/use-content-stable";
 import { useOrgCompanyOptions } from "../hooks/use-org-company-options.js";
 import { useOrgContactFields } from "../hooks/use-org-contact-fields.js";
 import { useOrgContactSegments } from "../hooks/use-org-contact-segments.js";
@@ -632,7 +633,260 @@ const COMPANY_FIELD_SX = {
         sx: COMPANY_FIELD_SX
     });
 });
-export function DynamicListRuleFields(props) {
+/** A text field that redraws only when what it shows changes (AGL-3423). */ const MemoTextField = /*#__PURE__*/ memo(TextField);
+const MemoContainerPicker = /*#__PURE__*/ memo(ContainerPicker);
+/**
+ * One `{ minWidth }` object per width, so a memoized field's `sx` is the same
+ * object on every render.
+ */ const MIN_WIDTHS = new Map();
+const atLeast = (minWidth)=>{
+    let sx = MIN_WIDTHS.get(minWidth);
+    if (!sx) {
+        sx = {
+            minWidth
+        };
+        MIN_WIDTHS.set(minWidth, sx);
+    }
+    return sx;
+};
+const WRAP = {
+    flexWrap: 'wrap'
+};
+const WRAP_TOP = {
+    flexWrap: 'wrap',
+    alignItems: 'flex-start'
+};
+const SUMMARY_BOX = {
+    border: 1,
+    borderColor: 'divider',
+    borderRadius: 1,
+    p: 1.5
+};
+const CAMPAIGN_BOX = {
+    minWidth: 240,
+    flexGrow: 1,
+    maxWidth: 360
+};
+const CAPTION_BLOCK = {
+    display: 'block',
+    mt: 0.5
+};
+const MULTIPLE = {
+    select: {
+        multiple: true
+    }
+};
+const SHRUNK_LABEL = {
+    inputLabel: {
+        shrink: true
+    }
+};
+const STAGES_SELECT = {
+    select: {
+        multiple: true,
+        renderValue: (selected)=>selected.map((stage)=>{
+                var _CONTACT_LIFECYCLE_STAGE_LABELS_stage;
+                return (_CONTACT_LIFECYCLE_STAGE_LABELS_stage = CONTACT_LIFECYCLE_STAGE_LABELS[stage]) != null ? _CONTACT_LIFECYCLE_STAGE_LABELS_stage : stage;
+            }).join(', ')
+    }
+};
+/*
+ * The fixed menus, built once. A select's options are its children, and a
+ * child list built during render is a new prop on every render.
+ */ const SOURCE_MENU = Object.entries(SOURCE_LABELS).map(([value, label])=>/*#__PURE__*/ _jsx(MenuItem, {
+        value: value,
+        children: label
+    }, value));
+const MATCH_MENU = [
+    /*#__PURE__*/ _jsx(MenuItem, {
+        value: "all",
+        children: 'All of the filters below'
+    }, "all"),
+    /*#__PURE__*/ _jsx(MenuItem, {
+        value: "any",
+        children: 'Any one of the filters below'
+    }, "any"),
+    /*#__PURE__*/ _jsx(MenuItem, {
+        value: "none",
+        children: 'Nobody matching all of them'
+    }, "none")
+];
+const CAPTURE_MENU = Object.entries(CONTACT_SOURCE_LABELS).map(([value, label])=>/*#__PURE__*/ _jsx(MenuItem, {
+        value: value,
+        children: label
+    }, value));
+const STAGE_MENU = CONTACT_LIFECYCLE_STAGES.map((stage)=>/*#__PURE__*/ _jsx(MenuItem, {
+        value: stage,
+        children: CONTACT_LIFECYCLE_STAGE_LABELS[stage]
+    }, stage));
+const OP_MENU = DYNAMIC_LIST_CUSTOM_OPS.map((op)=>/*#__PURE__*/ _jsx(MenuItem, {
+        value: op,
+        children: CUSTOM_OP_LABELS[op]
+    }, op));
+const CHECKED_MENU = [
+    /*#__PURE__*/ _jsx(MenuItem, {
+        value: "true",
+        children: 'Checked'
+    }, "true"),
+    /*#__PURE__*/ _jsx(MenuItem, {
+        value: "false",
+        children: 'Not checked'
+    }, "false")
+];
+/** A multi-select hands back a string when only one option is chosen. */ const asArray = (value)=>typeof value === 'string' ? [
+        value
+    ] : value != null ? value : [];
+/** Saved segments, views and audiences as menu items: a name, else the id. */ const menuOf = (rows)=>rows.map((row)=>{
+        var _row_name;
+        return /*#__PURE__*/ _jsx(MenuItem, {
+            value: row.$id,
+            children: (_row_name = row.name) != null ? _row_name : row.$id
+        }, row.$id);
+    });
+/** The first choice of a saved segment or view: none. No stored id is empty. */ const NONE_ITEM = /*#__PURE__*/ _jsx(MenuItem, {
+    value: "",
+    children: 'None'
+}, "");
+/**
+ * One field condition: the field, how it compares, and the value — typed by
+ * the field's definition, so a number field hands the matcher a number and a
+ * choice field offers its own options, and a presence test asks for no value
+ * at all.
+ *
+ * Memoized, with handlers that write through the row's index, so a keystroke
+ * in one condition's value redraws that value and nothing else (AGL-3423).
+ */ const CustomClauseRow = /*#__PURE__*/ memo(function CustomClauseRow(props) {
+    var _clause_value, _definition_options;
+    const { index, clause, definition, fieldMenu, onUpdate, onRemove } = props;
+    const valueText = String((_clause_value = clause.value) != null ? _clause_value : '');
+    const setKey = useCallback((event)=>onUpdate(index, {
+            key: event.target.value,
+            value: ''
+        }), [
+        index,
+        onUpdate
+    ]);
+    const setOp = useCallback((event)=>onUpdate(index, {
+            op: event.target.value
+        }), [
+        index,
+        onUpdate
+    ]);
+    const setValue = useCallback((event)=>onUpdate(index, {
+            value: event.target.value
+        }), [
+        index,
+        onUpdate
+    ]);
+    const setChecked = useCallback((event)=>onUpdate(index, {
+            value: event.target.value === 'true'
+        }), [
+        index,
+        onUpdate
+    ]);
+    const setNumber = useCallback((event)=>{
+        // A number field stores a NUMBER, so the matcher compares 10 with 9
+        // and not "10" with "9"; half-typed text stays text until it parses,
+        // rather than becoming NaN.
+        const text = event.target.value;
+        const parsed = Number(text);
+        onUpdate(index, {
+            value: text.trim() !== '' && Number.isFinite(parsed) ? parsed : text
+        });
+    }, [
+        index,
+        onUpdate
+    ]);
+    const remove = useCallback(()=>onRemove(index), [
+        index,
+        onRemove
+    ]);
+    return /*#__PURE__*/ _jsxs(Stack, {
+        direction: "row",
+        spacing: 1,
+        useFlexGap: true,
+        sx: WRAP_TOP,
+        children: [
+            /*#__PURE__*/ _jsx(MemoTextField, {
+                select: true,
+                size: "small",
+                label: "Field",
+                value: clause.key,
+                onChange: setKey,
+                sx: atLeast(180),
+                children: fieldMenu
+            }),
+            /*#__PURE__*/ _jsx(MemoTextField, {
+                select: true,
+                size: "small",
+                label: "Condition",
+                value: clause.op,
+                onChange: setOp,
+                sx: atLeast(160),
+                children: OP_MENU
+            }),
+            PRESENCE_OPS.has(clause.op) ? null : (definition == null ? void 0 : definition.type) === 'select' ? /*#__PURE__*/ _jsx(MemoTextField, {
+                select: true,
+                size: "small",
+                label: "Value",
+                value: valueText,
+                onChange: setValue,
+                sx: atLeast(180),
+                children: ((_definition_options = definition.options) != null ? _definition_options : []).map((option)=>/*#__PURE__*/ _jsx(MenuItem, {
+                        value: option,
+                        children: option
+                    }, option))
+            }) : (definition == null ? void 0 : definition.type) === 'checkbox' ? /*#__PURE__*/ _jsx(MemoTextField, {
+                select: true,
+                size: "small",
+                label: "Value",
+                value: clause.value === true ? 'true' : clause.value === false ? 'false' : '',
+                onChange: setChecked,
+                sx: atLeast(140),
+                children: CHECKED_MENU
+            }) : (definition == null ? void 0 : definition.type) === 'number' ? /*#__PURE__*/ _jsx(MemoTextField, {
+                type: "number",
+                size: "small",
+                label: "Value",
+                value: valueText,
+                onChange: setNumber,
+                sx: atLeast(140)
+            }) : /*#__PURE__*/ _jsx(MemoTextField, {
+                type: (definition == null ? void 0 : definition.type) === 'date' ? 'date' : 'text',
+                size: "small",
+                label: "Value",
+                value: valueText,
+                onChange: setValue,
+                slotProps: (definition == null ? void 0 : definition.type) === 'date' ? SHRUNK_LABEL : undefined,
+                sx: atLeast(180)
+            }),
+            /*#__PURE__*/ _jsx(Button, {
+                size: "small",
+                onClick: remove,
+                children: 'Remove'
+            })
+        ]
+    });
+});
+/**
+ * The rule's controls.
+ *
+ * ## A keystroke redraws the field it lands in (AGL-3423)
+ *
+ * Every control writes the same draft, and the draft is the parent's state,
+ * so each keystroke renders this component again. Drawn inline, that redrew
+ * every control on the form — 27 inputs and some thousand components for one
+ * letter — and a keystroke that costs that much lets typed input queue, which
+ * is what turns a chip field's per-commit update into React #185. So every
+ * control is memoized and handed only props that keep their identity while
+ * what it shows is unchanged: handlers that write through the latest draft,
+ * menus built once or from their own data, and `sx` objects that are
+ * constants. The sentences above the controls are the one part that is meant
+ * to change with every keystroke.
+ *
+ * The component is memoized as a whole as well, so a keystroke in the page's
+ * own fields — the list's name — does not draw the rule at all.
+ */ export const DynamicListRuleFields = /*#__PURE__*/ memo(function DynamicListRuleFields(props) {
     var _team_error;
     const { scope, hostId, draft, onChange, listId } = props;
     const segmentDocs = useOrgContactSegments(scope);
@@ -645,7 +899,7 @@ export function DynamicListRuleFields(props) {
    * picker beside fields a reader came for; here the picker IS one of the
    * fields the reader came for, and the same reasoning that opens the segment
    * listen opens this one.
-   */ const siteCampaigns = useHostCampaigns(hostId, {
+   */ const siteCampaigns = useSiteContainerOptions('campaign', hostId, {
         enabled: true
     });
     /*
@@ -717,6 +971,12 @@ export function DynamicListRuleFields(props) {
         listDocs,
         listId
     ]);
+    const memberNames = useMemo(()=>Object.fromEntries(team.options.map((option)=>[
+                option.uid,
+                option.label
+            ])), [
+        team.options
+    ]);
     /** Ids the pickers can show, so a clause names an audience rather than a uid. */ const names = useMemo(()=>({
             lists: Object.fromEntries(listDocs.map((row)=>{
                 var _row_name;
@@ -740,10 +1000,7 @@ export function DynamicListRuleFields(props) {
                     option.value,
                     option.label
                 ])),
-            members: Object.fromEntries(team.options.map((option)=>[
-                    option.uid,
-                    option.label
-                ])),
+            members: memberNames,
             companies: companies.names,
             fields: Object.fromEntries(fieldDefinitions.fields.map((field)=>[
                     field.key,
@@ -754,7 +1011,7 @@ export function DynamicListRuleFields(props) {
         segments,
         crmViews,
         siteCampaigns.options,
-        team.options,
+        memberNames,
         companies.names,
         fieldDefinitions.fields
     ]);
@@ -779,7 +1036,11 @@ export function DynamicListRuleFields(props) {
         team.options,
         draft.ownerUids
     ]);
-    const fieldOptions = useMemo(()=>{
+    /*
+   * Held by content: the options are read from the clauses' KEYS, and a value
+   * typed into a clause is a new clause list with the same keys — which would
+   * otherwise redraw every row's field picker on each keystroke (AGL-3423).
+   */ const fieldOptions = useContentStable(useMemo(()=>{
         const known = new Set(fieldDefinitions.fields.map((field)=>field.key));
         return [
             ...draft.custom.filter((clause)=>!known.has(clause.key)).map((clause)=>({
@@ -794,14 +1055,47 @@ export function DynamicListRuleFields(props) {
     }, [
         fieldDefinitions.fields,
         draft.custom
+    ]));
+    /* The menus that come from data, rebuilt only when their data changes. */ const segmentMenu = useMemo(()=>[
+            NONE_ITEM,
+            ...menuOf(segments)
+        ], [
+        segments
+    ]);
+    const viewMenu = useMemo(()=>[
+            NONE_ITEM,
+            ...menuOf(crmViews)
+        ], [
+        crmViews
+    ]);
+    const listMenu = useMemo(()=>menuOf(lists), [
+        lists
+    ]);
+    const ownerMenu = useMemo(()=>ownerOptions.map((option)=>/*#__PURE__*/ _jsx(MenuItem, {
+                value: option.uid,
+                children: option.label
+            }, option.uid)), [
+        ownerOptions
+    ]);
+    const ownerSelect = useMemo(()=>({
+            select: {
+                multiple: true,
+                renderValue: (selected)=>selected.map((uid)=>named(uid, memberNames)).join(', ')
+            }
+        }), [
+        memberNames
+    ]);
+    const fieldMenu = useMemo(()=>fieldOptions.map((option)=>/*#__PURE__*/ _jsx(MenuItem, {
+                value: option.key,
+                children: option.label
+            }, option.key)), [
+        fieldOptions
     ]);
-    /** The definition a clause's key names, when the org still has one. */ const definitionFor = (key)=>fieldDefinitions.fields.find((field)=>field.key === key);
-    const set = (key, value)=>onChange(_extends({}, draft, {
-            [key]: value
-        }));
     /*
-   * `set('companyIds', …)` for the memoized company chips: the same write from
-   * the last rendered draft, from a callback that keeps its identity.
+   * Every control writes `{ ...draft, [key]: value }` from the last rendered
+   * draft, through handlers that keep their identity from render to render —
+   * a handler rebuilt per render is a changed prop, and a changed prop redraws
+   * the field it is on.
    */ const latest = useRef({
         draft,
         onChange
@@ -810,9 +1104,40 @@ export function DynamicListRuleFields(props) {
         draft,
         onChange
     };
-    const setCompanyIds = useCallback((companyIds)=>latest.current.onChange(_extends({}, latest.current.draft, {
-            companyIds
+    const set = useCallback((key, value)=>latest.current.onChange(_extends({}, latest.current.draft, {
+            [key]: value
         })), []);
+    const on = useMemo(()=>{
+        const typed = (key)=>(event)=>set(key, event.target.value);
+        return {
+            sources: (event)=>set('sources', asArray(event.target.value)),
+            match: (event)=>set('match', event.target.value),
+            createdAfter: typed('createdAfter'),
+            createdBefore: typed('createdBefore'),
+            formNames: typed('formNames'),
+            campaignIds: (next)=>set('campaignIds', next),
+            segmentId: typed('segmentId'),
+            viewId: typed('viewId'),
+            tags: typed('tags'),
+            captureSources: (event)=>set('captureSources', asArray(event.target.value)),
+            ownerUids: (event)=>set('ownerUids', asArray(event.target.value)),
+            lifecycleStages: (event)=>set('lifecycleStages', asArray(event.target.value)),
+            companyIds: (companyIds)=>set('companyIds', companyIds),
+            engagedWithinDays: typed('engagedWithinDays'),
+            ordersCountAtLeast: typed('ordersCountAtLeast'),
+            ltvAtLeast: typed('ltvAtLeast'),
+            lastPurchaseWithinDays: typed('lastPurchaseWithinDays'),
+            noPurchaseForDays: typed('noPurchaseForDays'),
+            openedWithinDays: typed('openedWithinDays'),
+            clickedWithinDays: typed('clickedWithinDays'),
+            notOpenedForDays: typed('notOpenedForDays'),
+            notClickedForDays: typed('notClickedForDays'),
+            inListIds: (event)=>set('inListIds', asArray(event.target.value)),
+            notInListIds: (event)=>set('notInListIds', asArray(event.target.value))
+        };
+    }, [
+        set
+    ]);
     const companyIds = draft.companyIds;
     const companyNames = companies.names;
     const chosenCompanies = useMemo(()=>companyIds.map((id)=>{
@@ -833,39 +1158,39 @@ export function DynamicListRuleFields(props) {
    * a value typed for a number field is not a value for the select that
    * replaced it; changing the operator to a presence test removes it, so the
    * stored clause carries no value the sentence does not read.
-   */ const addClause = ()=>{
+   */ const addClause = useCallback(()=>{
         const first = fieldOptions[0];
         if (!first) return;
         set('custom', [
-            ...draft.custom,
+            ...latest.current.draft.custom,
             {
                 key: first.key,
                 op: 'eq',
                 value: ''
             }
         ]);
-    };
-    const updateClause = (index, patch)=>set('custom', draft.custom.map((clause, at)=>{
+    }, [
+        fieldOptions,
+        set
+    ]);
+    const updateClause = useCallback((index, patch)=>set('custom', latest.current.draft.custom.map((clause, at)=>{
             if (at !== index) return clause;
             const next = _extends({}, clause, patch);
             if (PRESENCE_OPS.has(next.op)) delete next.value;
             return next;
-        }));
-    const removeClause = (index)=>set('custom', draft.custom.filter((_, at)=>at !== index));
-    /** A multi-select hands back a string when only one option is chosen. */ const asArray = (value)=>typeof value === 'string' ? [
-            value
-        ] : value != null ? value : [];
+        })), [
+        set
+    ]);
+    const removeClause = useCallback((index)=>set('custom', latest.current.draft.custom.filter((_, at)=>at !== index)), [
+        set
+    ]);
+    /** The definition a clause's key names, when the org still has one. */ const definitionFor = (key)=>fieldDefinitions.fields.find((field)=>field.key === key);
     const contactsOnly = draft.sources.includes('contacts');
     return /*#__PURE__*/ _jsxs(Stack, {
         spacing: 1.5,
         children: [
             /*#__PURE__*/ _jsxs(Box, {
-                sx: {
-                    border: 1,
-                    borderColor: 'divider',
-                    borderRadius: 1,
-                    p: 1.5
-                },
+                sx: SUMMARY_BOX,
                 children: [
                     /*#__PURE__*/ _jsx(Typography, {
                         variant: "overline",
@@ -882,105 +1207,62 @@ export function DynamicListRuleFields(props) {
                 direction: "row",
                 spacing: 1,
                 useFlexGap: true,
-                sx: {
-                    flexWrap: 'wrap'
-                },
+                sx: WRAP,
                 children: [
-                    /*#__PURE__*/ _jsx(TextField, {
+                    /*#__PURE__*/ _jsx(MemoTextField, {
                         select: true,
                         size: "small",
                         label: "People from",
                         value: draft.sources,
-                        onChange: (event)=>set('sources', asArray(event.target.value)),
-                        slotProps: {
-                            select: {
-                                multiple: true
-                            }
-                        },
-                        sx: {
-                            minWidth: 220
-                        },
-                        children: Object.entries(SOURCE_LABELS).map(([value, label])=>/*#__PURE__*/ _jsx(MenuItem, {
-                                value: value,
-                                children: label
-                            }, value))
+                        onChange: on.sources,
+                        slotProps: MULTIPLE,
+                        sx: atLeast(220),
+                        children: SOURCE_MENU
                     }),
-                    /*#__PURE__*/ _jsxs(TextField, {
+                    /*#__PURE__*/ _jsx(MemoTextField, {
                         select: true,
                         size: "small",
                         label: "Match",
                         value: draft.match,
-                        onChange: (event)=>set('match', event.target.value),
+                        onChange: on.match,
                         helperText: "A saved segment always applies",
-                        sx: {
-                            minWidth: 210
-                        },
-                        children: [
-                            /*#__PURE__*/ _jsx(MenuItem, {
-                                value: "all",
-                                children: 'All of the filters below'
-                            }),
-                            /*#__PURE__*/ _jsx(MenuItem, {
-                                value: "any",
-                                children: 'Any one of the filters below'
-                            }),
-                            /*#__PURE__*/ _jsx(MenuItem, {
-                                value: "none",
-                                children: 'Nobody matching all of them'
-                            })
-                        ]
+                        sx: atLeast(210),
+                        children: MATCH_MENU
                     }),
-                    /*#__PURE__*/ _jsx(TextField, {
+                    /*#__PURE__*/ _jsx(MemoTextField, {
                         type: "date",
                         size: "small",
                         label: "Created after",
                         value: draft.createdAfter,
-                        onChange: (event)=>set('createdAfter', event.target.value),
-                        slotProps: {
-                            inputLabel: {
-                                shrink: true
-                            }
-                        },
-                        sx: {
-                            minWidth: 170
-                        }
+                        onChange: on.createdAfter,
+                        slotProps: SHRUNK_LABEL,
+                        sx: atLeast(170)
                     }),
-                    /*#__PURE__*/ _jsx(TextField, {
+                    /*#__PURE__*/ _jsx(MemoTextField, {
                         type: "date",
                         size: "small",
                         label: "Created before",
                         value: draft.createdBefore,
-                        onChange: (event)=>set('createdBefore', event.target.value),
-                        slotProps: {
-                            inputLabel: {
-                                shrink: true
-                            }
-                        },
-                        sx: {
-                            minWidth: 170
-                        }
+                        onChange: on.createdBefore,
+                        slotProps: SHRUNK_LABEL,
+                        sx: atLeast(170)
                     }),
-                    /*#__PURE__*/ _jsx(TextField, {
+                    /*#__PURE__*/ _jsx(MemoTextField, {
                         size: "small",
                         label: "Submitted form",
                         placeholder: "Contact us",
                         helperText: "Form submissions only",
                         value: draft.formNames,
-                        onChange: (event)=>set('formNames', event.target.value),
-                        sx: {
-                            minWidth: 180
-                        }
+                        onChange: on.formNames,
+                        sx: atLeast(180)
                     }),
                     /*#__PURE__*/ _jsx(Box, {
-                        sx: {
-                            minWidth: 240,
-                            flexGrow: 1,
-                            maxWidth: 360
-                        },
-                        children: /*#__PURE__*/ _jsx(CampaignPicker, {
+                        sx: CAMPAIGN_BOX,
+                        children: /*#__PURE__*/ _jsx(MemoContainerPicker, {
+                            kind: "campaign",
                             options: siteCampaigns.options,
                             value: draft.campaignIds,
-                            onChange: (next)=>set('campaignIds', next),
+                            onChange: on.campaignIds,
                             label: "In campaign",
                             helperText: "Contacts and form submissions filed under any campaign picked. Being in a campaign is not consent to be emailed.",
                             empty: siteCampaigns.ready && !siteCampaigns.options.length,
@@ -1004,84 +1286,46 @@ export function DynamicListRuleFields(props) {
                 direction: "row",
                 spacing: 1,
                 useFlexGap: true,
-                sx: {
-                    flexWrap: 'wrap'
-                },
+                sx: WRAP,
                 children: [
-                    /*#__PURE__*/ _jsxs(TextField, {
+                    /*#__PURE__*/ _jsx(MemoTextField, {
                         select: true,
                         size: "small",
                         label: "Saved segment",
                         value: draft.segmentId,
-                        onChange: (event)=>set('segmentId', event.target.value),
+                        onChange: on.segmentId,
                         helperText: "Reuses that segment's tags and sources",
-                        sx: {
-                            minWidth: 200
-                        },
-                        children: [
-                            /*#__PURE__*/ _jsx(MenuItem, {
-                                value: "",
-                                children: 'None'
-                            }),
-                            segments.map((segment)=>{
-                                var _segment_name;
-                                return /*#__PURE__*/ _jsx(MenuItem, {
-                                    value: segment.$id,
-                                    children: (_segment_name = segment.name) != null ? _segment_name : segment.$id
-                                }, segment.$id);
-                            })
-                        ]
+                        sx: atLeast(200),
+                        children: segmentMenu
                     }),
-                    /*#__PURE__*/ _jsxs(TextField, {
+                    /*#__PURE__*/ _jsx(MemoTextField, {
                         select: true,
                         size: "small",
                         label: "Saved view",
                         value: draft.viewId,
-                        onChange: (event)=>set('viewId', event.target.value),
+                        onChange: on.viewId,
                         helperText: "Reuses that Contacts view's filters",
-                        sx: {
-                            minWidth: 200
-                        },
-                        children: [
-                            /*#__PURE__*/ _jsx(MenuItem, {
-                                value: "",
-                                children: 'None'
-                            }),
-                            crmViews.map((view)=>/*#__PURE__*/ _jsx(MenuItem, {
-                                    value: view.$id,
-                                    children: view.name
-                                }, view.$id))
-                        ]
+                        sx: atLeast(200),
+                        children: viewMenu
                     }),
-                    /*#__PURE__*/ _jsx(TextField, {
+                    /*#__PURE__*/ _jsx(MemoTextField, {
                         size: "small",
                         label: "Tagged",
                         placeholder: "vip, wholesale",
                         value: draft.tags,
-                        onChange: (event)=>set('tags', event.target.value),
-                        sx: {
-                            minWidth: 180
-                        }
+                        onChange: on.tags,
+                        sx: atLeast(180)
                     }),
-                    /*#__PURE__*/ _jsx(TextField, {
+                    /*#__PURE__*/ _jsx(MemoTextField, {
                         select: true,
                         size: "small",
                         label: "Captured by",
                         value: draft.captureSources,
-                        onChange: (event)=>set('captureSources', asArray(event.target.value)),
-                        slotProps: {
-                            select: {
-                                multiple: true
-                            }
-                        },
+                        onChange: on.captureSources,
+                        slotProps: MULTIPLE,
                         helperText: "How the contact reached you",
-                        sx: {
-                            minWidth: 200
-                        },
-                        children: Object.entries(CONTACT_SOURCE_LABELS).map(([value, label])=>/*#__PURE__*/ _jsx(MenuItem, {
-                                value: value,
-                                children: label
-                            }, value))
+                        sx: atLeast(200),
+                        children: CAPTURE_MENU
                     })
                 ]
             }),
@@ -1089,55 +1333,30 @@ export function DynamicListRuleFields(props) {
                 direction: "row",
                 spacing: 1,
                 useFlexGap: true,
-                sx: {
-                    flexWrap: 'wrap'
-                },
+                sx: WRAP,
                 children: [
-                    /*#__PURE__*/ _jsx(TextField, {
+                    /*#__PURE__*/ _jsx(MemoTextField, {
                         select: true,
                         size: "small",
                         label: "Owned by",
                         value: draft.ownerUids,
-                        onChange: (event)=>set('ownerUids', asArray(event.target.value)),
-                        slotProps: {
-                            select: {
-                                multiple: true,
-                                renderValue: (selected)=>selected.map((uid)=>named(uid, names.members)).join(', ')
-                            }
-                        },
+                        onChange: on.ownerUids,
+                        slotProps: ownerSelect,
                         error: Boolean(team.error),
                         helperText: (_team_error = team.error) != null ? _team_error : 'Any of these team members. Unowned contacts are left out.',
-                        sx: {
-                            minWidth: 220
-                        },
-                        children: ownerOptions.map((option)=>/*#__PURE__*/ _jsx(MenuItem, {
-                                value: option.uid,
-                                children: option.label
-                            }, option.uid))
+                        sx: atLeast(220),
+                        children: ownerMenu
                     }),
-                    /*#__PURE__*/ _jsx(TextField, {
+                    /*#__PURE__*/ _jsx(MemoTextField, {
                         select: true,
                         size: "small",
                         label: "Lifecycle stage",
                         value: draft.lifecycleStages,
-                        onChange: (event)=>set('lifecycleStages', asArray(event.target.value)),
-                        slotProps: {
-                            select: {
-                                multiple: true,
-                                renderValue: (selected)=>selected.map((stage)=>{
-                                        var _CONTACT_LIFECYCLE_STAGE_LABELS_stage;
-                                        return (_CONTACT_LIFECYCLE_STAGE_LABELS_stage = CONTACT_LIFECYCLE_STAGE_LABELS[stage]) != null ? _CONTACT_LIFECYCLE_STAGE_LABELS_stage : stage;
-                                    }).join(', ')
-                            }
-                        },
+                        onChange: on.lifecycleStages,
+                        slotProps: STAGES_SELECT,
                         helperText: "Any of these stages",
-                        sx: {
-                            minWidth: 200
-                        },
-                        children: CONTACT_LIFECYCLE_STAGES.map((stage)=>/*#__PURE__*/ _jsx(MenuItem, {
-                                value: stage,
-                                children: CONTACT_LIFECYCLE_STAGE_LABELS[stage]
-                            }, stage))
+                        sx: atLeast(200),
+                        children: STAGE_MENU
                     }),
                     /*#__PURE__*/ _jsx(RuleCompaniesField, {
                         hits: companies.hits,
@@ -1145,146 +1364,27 @@ export function DynamicListRuleFields(props) {
                         search: companySearch,
                         searching: companies.searching,
                         onSearch: setCompanySearch,
-                        onChange: setCompanyIds
+                        onChange: on.companyIds
                     }),
-                    /*#__PURE__*/ _jsx(TextField, {
+                    /*#__PURE__*/ _jsx(MemoTextField, {
                         type: "number",
                         size: "small",
                         label: "Engaged with a campaign within (days)",
                         helperText: "Opened or clicked one of your campaigns. Never engaged is left out.",
                         value: draft.engagedWithinDays,
-                        onChange: (event)=>set('engagedWithinDays', event.target.value),
-                        sx: {
-                            minWidth: 280
-                        }
+                        onChange: on.engagedWithinDays,
+                        sx: atLeast(280)
                     })
                 ]
             }),
-            draft.custom.map((clause, index)=>{
-                var _clause_value, _definition_options;
-                const definition = definitionFor(clause.key);
-                const valueText = String((_clause_value = clause.value) != null ? _clause_value : '');
-                return /*#__PURE__*/ _jsxs(Stack, {
-                    direction: "row",
-                    spacing: 1,
-                    useFlexGap: true,
-                    sx: {
-                        flexWrap: 'wrap',
-                        alignItems: 'flex-start'
-                    },
-                    children: [
-                        /*#__PURE__*/ _jsx(TextField, {
-                            select: true,
-                            size: "small",
-                            label: "Field",
-                            value: clause.key,
-                            onChange: (event)=>updateClause(index, {
-                                    key: event.target.value,
-                                    value: ''
-                                }),
-                            sx: {
-                                minWidth: 180
-                            },
-                            children: fieldOptions.map((option)=>/*#__PURE__*/ _jsx(MenuItem, {
-                                    value: option.key,
-                                    children: option.label
-                                }, option.key))
-                        }),
-                        /*#__PURE__*/ _jsx(TextField, {
-                            select: true,
-                            size: "small",
-                            label: "Condition",
-                            value: clause.op,
-                            onChange: (event)=>updateClause(index, {
-                                    op: event.target.value
-                                }),
-                            sx: {
-                                minWidth: 160
-                            },
-                            children: DYNAMIC_LIST_CUSTOM_OPS.map((op)=>/*#__PURE__*/ _jsx(MenuItem, {
-                                    value: op,
-                                    children: CUSTOM_OP_LABELS[op]
-                                }, op))
-                        }),
-                        PRESENCE_OPS.has(clause.op) ? null : (definition == null ? void 0 : definition.type) === 'select' ? /*#__PURE__*/ _jsx(TextField, {
-                            select: true,
-                            size: "small",
-                            label: "Value",
-                            value: valueText,
-                            onChange: (event)=>updateClause(index, {
-                                    value: event.target.value
-                                }),
-                            sx: {
-                                minWidth: 180
-                            },
-                            children: ((_definition_options = definition.options) != null ? _definition_options : []).map((option)=>/*#__PURE__*/ _jsx(MenuItem, {
-                                    value: option,
-                                    children: option
-                                }, option))
-                        }) : (definition == null ? void 0 : definition.type) === 'checkbox' ? /*#__PURE__*/ _jsxs(TextField, {
-                            select: true,
-                            size: "small",
-                            label: "Value",
-                            value: clause.value === true ? 'true' : clause.value === false ? 'false' : '',
-                            onChange: (event)=>updateClause(index, {
-                                    value: event.target.value === 'true'
-                                }),
-                            sx: {
-                                minWidth: 140
-                            },
-                            children: [
-                                /*#__PURE__*/ _jsx(MenuItem, {
-                                    value: "true",
-                                    children: 'Checked'
-                                }),
-                                /*#__PURE__*/ _jsx(MenuItem, {
-                                    value: "false",
-                                    children: 'Not checked'
-                                })
-                            ]
-                        }) : (definition == null ? void 0 : definition.type) === 'number' ? /*#__PURE__*/ _jsx(TextField, {
-                            type: "number",
-                            size: "small",
-                            label: "Value",
-                            value: valueText,
-                            onChange: (event)=>{
-                                // A number field stores a NUMBER, so the matcher compares
-                                // 10 with 9 and not "10" with "9"; half-typed text stays
-                                // text until it parses, rather than becoming NaN.
-                                const text = event.target.value;
-                                const parsed = Number(text);
-                                updateClause(index, {
-                                    value: text.trim() !== '' && Number.isFinite(parsed) ? parsed : text
-                                });
-                            },
-                            sx: {
-                                minWidth: 140
-                            }
-                        }) : /*#__PURE__*/ _jsx(TextField, {
-                            type: (definition == null ? void 0 : definition.type) === 'date' ? 'date' : 'text',
-                            size: "small",
-                            label: "Value",
-                            value: valueText,
-                            onChange: (event)=>updateClause(index, {
-                                    value: event.target.value
-                                }),
-                            slotProps: (definition == null ? void 0 : definition.type) === 'date' ? {
-                                inputLabel: {
-                                    shrink: true
-                                }
-                            } : undefined,
-                            sx: {
-                                minWidth: 180
-                            }
-                        }),
-                        /*#__PURE__*/ _jsx(Button, {
-                            size: "small",
-                            onClick: ()=>removeClause(index),
-                            children: 'Remove'
-                        })
-                    ]
-                }, index);
-            }),
+            draft.custom.map((clause, index)=>/*#__PURE__*/ _jsx(CustomClauseRow, {
+                    index: index,
+                    clause: clause,
+                    definition: definitionFor(clause.key),
+                    fieldMenu: fieldMenu,
+                    onUpdate: updateClause,
+                    onRemove: removeClause
+                }, index)),
             /*#__PURE__*/ _jsxs(Box, {
                 children: [
                     /*#__PURE__*/ _jsx(Button, {
@@ -1297,10 +1397,7 @@ export function DynamicListRuleFields(props) {
                     fieldDefinitions.ready && !fieldDefinitions.fields.length ? /*#__PURE__*/ _jsx(Typography, {
                         variant: "caption",
                         color: "text.secondary",
-                        sx: {
-                            display: 'block',
-                            mt: 0.5
-                        },
+                        sx: CAPTION_BLOCK,
                         children: 'This workspace has no custom contact fields yet. Define them ' + 'under CRM → Fields to filter on them here.'
                     }) : null
                 ]
@@ -1314,51 +1411,41 @@ export function DynamicListRuleFields(props) {
                 direction: "row",
                 spacing: 1,
                 useFlexGap: true,
-                sx: {
-                    flexWrap: 'wrap'
-                },
+                sx: WRAP,
                 children: [
-                    /*#__PURE__*/ _jsx(TextField, {
+                    /*#__PURE__*/ _jsx(MemoTextField, {
                         type: "number",
                         size: "small",
                         label: "Orders at least",
                         value: draft.ordersCountAtLeast,
-                        onChange: (event)=>set('ordersCountAtLeast', event.target.value),
-                        sx: {
-                            minWidth: 160
-                        }
+                        onChange: on.ordersCountAtLeast,
+                        sx: atLeast(160)
                     }),
-                    /*#__PURE__*/ _jsx(TextField, {
+                    /*#__PURE__*/ _jsx(MemoTextField, {
                         type: "number",
                         size: "small",
                         label: "Spent at least",
                         helperText: "Lifetime, in your store's currency",
                         value: draft.ltvAtLeast,
-                        onChange: (event)=>set('ltvAtLeast', event.target.value),
-                        sx: {
-                            minWidth: 190
-                        }
+                        onChange: on.ltvAtLeast,
+                        sx: atLeast(190)
                     }),
-                    /*#__PURE__*/ _jsx(TextField, {
+                    /*#__PURE__*/ _jsx(MemoTextField, {
                         type: "number",
                         size: "small",
                         label: "Bought within (days)",
                         value: draft.lastPurchaseWithinDays,
-                        onChange: (event)=>set('lastPurchaseWithinDays', event.target.value),
-                        sx: {
-                            minWidth: 190
-                        }
+                        onChange: on.lastPurchaseWithinDays,
+                        sx: atLeast(190)
                     }),
-                    /*#__PURE__*/ _jsx(TextField, {
+                    /*#__PURE__*/ _jsx(MemoTextField, {
                         type: "number",
                         size: "small",
                         label: "Nothing bought for (days)",
                         helperText: "Lapsed customers — never bought is not lapsed",
                         value: draft.noPurchaseForDays,
-                        onChange: (event)=>set('noPurchaseForDays', event.target.value),
-                        sx: {
-                            minWidth: 220
-                        }
+                        onChange: on.noPurchaseForDays,
+                        sx: atLeast(220)
                     })
                 ]
             }),
@@ -1377,51 +1464,41 @@ export function DynamicListRuleFields(props) {
                 direction: "row",
                 spacing: 1,
                 useFlexGap: true,
-                sx: {
-                    flexWrap: 'wrap'
-                },
+                sx: WRAP,
                 children: [
-                    /*#__PURE__*/ _jsx(TextField, {
+                    /*#__PURE__*/ _jsx(MemoTextField, {
                         type: "number",
                         size: "small",
                         label: "Opened within (days)",
                         value: draft.openedWithinDays,
-                        onChange: (event)=>set('openedWithinDays', event.target.value),
-                        sx: {
-                            minWidth: 190
-                        }
+                        onChange: on.openedWithinDays,
+                        sx: atLeast(190)
                     }),
-                    /*#__PURE__*/ _jsx(TextField, {
+                    /*#__PURE__*/ _jsx(MemoTextField, {
                         type: "number",
                         size: "small",
                         label: "Clicked within (days)",
                         value: draft.clickedWithinDays,
-                        onChange: (event)=>set('clickedWithinDays', event.target.value),
-                        sx: {
-                            minWidth: 190
-                        }
+                        onChange: on.clickedWithinDays,
+                        sx: atLeast(190)
                     }),
-                    /*#__PURE__*/ _jsx(TextField, {
+                    /*#__PURE__*/ _jsx(MemoTextField, {
                         type: "number",
                         size: "small",
                         label: "Nothing opened for (days)",
                         helperText: "Never opened counts",
                         value: draft.notOpenedForDays,
-                        onChange: (event)=>set('notOpenedForDays', event.target.value),
-                        sx: {
-                            minWidth: 210
-                        }
+                        onChange: on.notOpenedForDays,
+                        sx: atLeast(210)
                     }),
-                    /*#__PURE__*/ _jsx(TextField, {
+                    /*#__PURE__*/ _jsx(MemoTextField, {
                         type: "number",
                         size: "small",
                         label: "Nothing clicked for (days)",
                         helperText: "Never clicked counts",
                         value: draft.notClickedForDays,
-                        onChange: (event)=>set('notClickedForDays', event.target.value),
-                        sx: {
-                            minWidth: 210
-                        }
+                        onChange: on.notClickedForDays,
+                        sx: atLeast(210)
                     })
                 ]
             }),
@@ -1435,61 +1512,35 @@ export function DynamicListRuleFields(props) {
                 direction: "row",
                 spacing: 1,
                 useFlexGap: true,
-                sx: {
-                    flexWrap: 'wrap'
-                },
+                sx: WRAP,
                 children: [
-                    /*#__PURE__*/ _jsx(TextField, {
+                    /*#__PURE__*/ _jsx(MemoTextField, {
                         select: true,
                         size: "small",
                         label: "Already on",
                         value: draft.inListIds,
-                        onChange: (event)=>set('inListIds', asArray(event.target.value)),
-                        slotProps: {
-                            select: {
-                                multiple: true
-                            }
-                        },
+                        onChange: on.inListIds,
+                        slotProps: MULTIPLE,
                         helperText: "Members of every audience picked",
-                        sx: {
-                            minWidth: 220
-                        },
-                        children: lists.map((row)=>{
-                            var _row_name;
-                            return /*#__PURE__*/ _jsx(MenuItem, {
-                                value: row.$id,
-                                children: (_row_name = row.name) != null ? _row_name : row.$id
-                            }, row.$id);
-                        })
+                        sx: atLeast(220),
+                        children: listMenu
                     }),
-                    /*#__PURE__*/ _jsx(TextField, {
+                    /*#__PURE__*/ _jsx(MemoTextField, {
                         select: true,
                         size: "small",
                         label: "Not on",
                         value: draft.notInListIds,
-                        onChange: (event)=>set('notInListIds', asArray(event.target.value)),
-                        slotProps: {
-                            select: {
-                                multiple: true
-                            }
-                        },
+                        onChange: on.notInListIds,
+                        slotProps: MULTIPLE,
                         helperText: "Excludes members of any audience picked",
-                        sx: {
-                            minWidth: 220
-                        },
-                        children: lists.map((row)=>{
-                            var _row_name;
-                            return /*#__PURE__*/ _jsx(MenuItem, {
-                                value: row.$id,
-                                children: (_row_name = row.name) != null ? _row_name : row.$id
-                            }, row.$id);
-                        })
+                        sx: atLeast(220),
+                        children: listMenu
                     })
                 ]
             })
         ]
     });
-}
+});
 DynamicListRuleFields.displayName = 'DynamicListRuleFields';
 /**
  * A draft seeded from a rule that arrives after the form does.