@servicetitan/dte-unlayer 0.158.0 → 0.160.0

package/dist/display-conditions/ConditionGroup.js

@@ -4,106 +4,37 @@ import PlusIcon from '@servicetitan/anvil2/assets/icons/material/round/add.svg';
 import { useCallback } from 'react';
 import { ConditionRow } from './ConditionRow';
 import { defaultCondition } from './constants';
-export function ConditionGroup({ dataPointOptions, formFieldOptions, forms, group, onFormSelect, onUpdate }) {
-    const addCondition = useCallback(()=>{
+export function ConditionGroup({ dataPointOptions, formFieldOptions, forms, group, onFormSelect, onUpdate, }) {
+    const addCondition = useCallback(() => {
         const newCondition = {
             ...defaultCondition(),
-            logicalOperator: 'and'
+            logicalOperator: 'and',
         };
         onUpdate({
             ...group,
-            conditions: [
-                ...group.conditions,
-                newCondition
-            ]
+            conditions: [...group.conditions, newCondition],
         });
-    }, [
-        group,
-        onUpdate
-    ]);
-    const updateCondition = useCallback((index, c)=>{
-        const next = [
-            ...group.conditions
-        ];
+    }, [group, onUpdate]);
+    const updateCondition = useCallback((index, c) => {
+        const next = [...group.conditions];
         next[index] = c;
-        onUpdate({
-            ...group,
-            conditions: next
-        });
-    }, [
-        group,
-        onUpdate
-    ]);
-    const removeCondition = useCallback((index)=>{
-        let next = group.conditions.filter((_, i)=>i !== index);
+        onUpdate({ ...group, conditions: next });
+    }, [group, onUpdate]);
+    const removeCondition = useCallback((index) => {
+        let next = group.conditions.filter((_, i) => i !== index);
         if (index === 0 && next.length > 0) {
-            next = [
-                {
-                    ...next[0],
-                    logicalOperator: undefined
-                },
-                ...next.slice(1)
-            ];
+            next = [{ ...next[0], logicalOperator: undefined }, ...next.slice(1)];
         }
         onUpdate({
             ...group,
-            conditions: next.length ? next : [
-                defaultCondition()
-            ]
+            conditions: next.length ? next : [defaultCondition()],
         });
-    }, [
-        group,
-        onUpdate
-    ]);
-    return /*#__PURE__*/ _jsx(Flex, {
-        direction: "column",
-        gap: "2",
-        style: {
-            width: '100%'
-        },
-        children: /*#__PURE__*/ _jsxs(Flex, {
-            direction: "column",
-            gap: "3",
-            style: {
-                width: '100%'
-            },
-            children: [
-                group.conditions.map((c, i)=>/*#__PURE__*/ _jsx(Flex, {
-                        direction: "column",
-                        gap: "3",
-                        style: {
-                            padding: '8px 0'
-                        },
-                        children: /*#__PURE__*/ _jsx(ConditionRow, {
-                            canRemove: true,
-                            condition: c,
-                            dataPointOptions: dataPointOptions,
-                            forms: forms,
-                            formFieldOptions: formFieldOptions,
-                            onChange: (next)=>updateCondition(i, next),
-                            onFormSelect: onFormSelect,
-                            onRemove: ()=>removeCondition(i)
-                        })
-                    }, c.id)),
-                /*#__PURE__*/ _jsx(Flex, {
-                    justifyContent: "center",
-                    style: {
-                        paddingTop: 8,
-                        width: '100%'
-                    },
-                    children: /*#__PURE__*/ _jsx(Button, {
-                        appearance: "secondary",
-                        icon: {
-                            before: PlusIcon
-                        },
-                        size: "small",
-                        onClick: addCondition,
-                        children: "Add Condition"
-                    })
-                })
-            ]
-        })
-    });
+    }, [group, onUpdate]);
+    return (_jsx(Flex, { direction: "column", gap: "2", style: { padding: '0 8px', width: '100%' }, children: _jsxs(Flex, { direction: "column", gap: "3", style: { width: '100%' }, children: [group.conditions.map((c, i) => (_jsx(Flex, { direction: "column", gap: "3", style: {
+                        padding: '8px',
+                        background: '#f7f7f7',
+                        boxShadow: '0px 0px 4px 1px #e0e0e0',
+                        borderRadius: '8px',
+                    }, children: _jsx(ConditionRow, { canRemove: true, condition: c, dataPointOptions: dataPointOptions, forms: forms, formFieldOptions: formFieldOptions, onChange: next => updateCondition(i, next), onFormSelect: onFormSelect, onRemove: () => removeCondition(i) }) }, c.id))), _jsx(Flex, { justifyContent: "center", style: { paddingTop: 8, width: '100%' }, children: _jsx(Button, { appearance: "secondary", icon: { before: PlusIcon }, onClick: addCondition, children: "Add Condition" }) })] }) }));
 }
-
 //# sourceMappingURL=ConditionGroup.js.map

package/dist/display-conditions/ConditionGroup.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/display-conditions/ConditionGroup.tsx"],"sourcesContent":["import { Button, Flex } from '@servicetitan/anvil2';\nimport PlusIcon from '@servicetitan/anvil2/assets/icons/material/round/add.svg';\nimport { useCallback } from 'react';\nimport { FormInfo } from '../shared/forms';\nimport { ConditionRow } from './ConditionRow';\nimport { defaultCondition } from './constants';\nimport { ConditionGroup as ConditionGroupType, FormFieldOption, SingleCondition } from './types';\nimport type { DataPointOption } from './types';\n\nexport interface ConditionGroupProps {\n    dataPointOptions: DataPointOption[];\n    formFieldOptions: FormFieldOption[];\n    forms: FormInfo[];\n    group: ConditionGroupType;\n    onFormSelect: (formId: number) => void;\n    onUpdate: (g: ConditionGroupType) => void;\n}\n\nexport function ConditionGroup({\n    dataPointOptions,\n    formFieldOptions,\n    forms,\n    group,\n    onFormSelect,\n    onUpdate,\n}: Readonly<ConditionGroupProps>) {\n    const addCondition = useCallback(() => {\n        const newCondition: SingleCondition = {\n            ...defaultCondition(),\n            logicalOperator: 'and',\n        };\n        onUpdate({\n            ...group,\n            conditions: [...group.conditions, newCondition],\n        });\n    }, [group, onUpdate]);\n\n    const updateCondition = useCallback(\n        (index: number, c: SingleCondition) => {\n            const next = [...group.conditions];\n            next[index] = c;\n            onUpdate({ ...group, conditions: next });\n        },\n        [group, onUpdate],\n    );\n\n    const removeCondition = useCallback(\n        (index: number) => {\n            let next = group.conditions.filter((_, i) => i !== index);\n            if (index === 0 && next.length > 0) {\n                next = [{ ...next[0], logicalOperator: undefined }, ...next.slice(1)];\n            }\n            onUpdate({\n                ...group,\n                conditions: next.length ? next : [defaultCondition()],\n            });\n        },\n        [group, onUpdate],\n    );\n\n    return (\n        <Flex direction=\"column\" gap=\"2\" style={{ width: '100%' }}>\n            <Flex direction=\"column\" gap=\"3\" style={{ width: '100%' }}>\n                {group.conditions.map((c, i) => (\n                    <Flex key={c.id} direction=\"column\" gap=\"3\" style={{ padding: '8px 0' }}>\n                        <ConditionRow\n                            canRemove\n                            condition={c}\n                            dataPointOptions={dataPointOptions}\n                            forms={forms}\n                            formFieldOptions={formFieldOptions}\n                            onChange={next => updateCondition(i, next)}\n                            onFormSelect={onFormSelect}\n                            onRemove={() => removeCondition(i)}\n                        />\n                    </Flex>\n                ))}\n                <Flex justifyContent=\"center\" style={{ paddingTop: 8, width: '100%' }}>\n                    <Button\n                        appearance=\"secondary\"\n                        icon={{ before: PlusIcon }}\n                        size=\"small\"\n                        onClick={addCondition}\n                    >\n                        Add Condition\n                    </Button>\n                </Flex>\n            </Flex>\n        </Flex>\n    );\n}\n"],"names":["Button","Flex","PlusIcon","useCallback","ConditionRow","defaultCondition","ConditionGroup","dataPointOptions","formFieldOptions","forms","group","onFormSelect","onUpdate","addCondition","newCondition","logicalOperator","conditions","updateCondition","index","c","next","removeCondition","filter","_","i","length","undefined","slice","direction","gap","style","width","map","padding","canRemove","condition","onChange","onRemove","id","justifyContent","paddingTop","appearance","icon","before","size","onClick"],"mappings":";AAAA,SAASA,MAAM,EAAEC,IAAI,QAAQ,uBAAuB;AACpD,OAAOC,cAAc,2DAA2D;AAChF,SAASC,WAAW,QAAQ,QAAQ;AAEpC,SAASC,YAAY,QAAQ,iBAAiB;AAC9C,SAASC,gBAAgB,QAAQ,cAAc;AAa/C,OAAO,SAASC,eAAe,EAC3BC,gBAAgB,EAChBC,gBAAgB,EAChBC,KAAK,EACLC,KAAK,EACLC,YAAY,EACZC,QAAQ,EACoB;IAC5B,MAAMC,eAAeV,YAAY;QAC7B,MAAMW,eAAgC;YAClC,GAAGT,kBAAkB;YACrBU,iBAAiB;QACrB;QACAH,SAAS;YACL,GAAGF,KAAK;YACRM,YAAY;mBAAIN,MAAMM,UAAU;gBAAEF;aAAa;QACnD;IACJ,GAAG;QAACJ;QAAOE;KAAS;IAEpB,MAAMK,kBAAkBd,YACpB,CAACe,OAAeC;QACZ,MAAMC,OAAO;eAAIV,MAAMM,UAAU;SAAC;QAClCI,IAAI,CAACF,MAAM,GAAGC;QACdP,SAAS;YAAE,GAAGF,KAAK;YAAEM,YAAYI;QAAK;IAC1C,GACA;QAACV;QAAOE;KAAS;IAGrB,MAAMS,kBAAkBlB,YACpB,CAACe;QACG,IAAIE,OAAOV,MAAMM,UAAU,CAACM,MAAM,CAAC,CAACC,GAAGC,IAAMA,MAAMN;QACnD,IAAIA,UAAU,KAAKE,KAAKK,MAAM,GAAG,GAAG;YAChCL,OAAO;gBAAC;oBAAE,GAAGA,IAAI,CAAC,EAAE;oBAAEL,iBAAiBW;gBAAU;mBAAMN,KAAKO,KAAK,CAAC;aAAG;QACzE;QACAf,SAAS;YACL,GAAGF,KAAK;YACRM,YAAYI,KAAKK,MAAM,GAAGL,OAAO;gBAACf;aAAmB;QACzD;IACJ,GACA;QAACK;QAAOE;KAAS;IAGrB,qBACI,KAACX;QAAK2B,WAAU;QAASC,KAAI;QAAIC,OAAO;YAAEC,OAAO;QAAO;kBACpD,cAAA,MAAC9B;YAAK2B,WAAU;YAASC,KAAI;YAAIC,OAAO;gBAAEC,OAAO;YAAO;;gBACnDrB,MAAMM,UAAU,CAACgB,GAAG,CAAC,CAACb,GAAGK,kBACtB,KAACvB;wBAAgB2B,WAAU;wBAASC,KAAI;wBAAIC,OAAO;4BAAEG,SAAS;wBAAQ;kCAClE,cAAA,KAAC7B;4BACG8B,SAAS;4BACTC,WAAWhB;4BACXZ,kBAAkBA;4BAClBE,OAAOA;4BACPD,kBAAkBA;4BAClB4B,UAAUhB,CAAAA,OAAQH,gBAAgBO,GAAGJ;4BACrCT,cAAcA;4BACd0B,UAAU,IAAMhB,gBAAgBG;;uBAT7BL,EAAEmB,EAAE;8BAanB,KAACrC;oBAAKsC,gBAAe;oBAAST,OAAO;wBAAEU,YAAY;wBAAGT,OAAO;oBAAO;8BAChE,cAAA,KAAC/B;wBACGyC,YAAW;wBACXC,MAAM;4BAAEC,QAAQzC;wBAAS;wBACzB0C,MAAK;wBACLC,SAAShC;kCACZ;;;;;;AAOrB"}
+{"version":3,"file":"ConditionGroup.js","sourceRoot":"","sources":["../../src/display-conditions/ConditionGroup.tsx"],"names":[],"mappings":"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"}

package/dist/display-conditions/ConditionGroupsSection.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ConditionGroupsSection.d.ts","sourceRoot":"","sources":["../../src/display-conditions/ConditionGroupsSection.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AACvC,OAAO,EAAE,QAAQ,EAAE,MAAM,iBAAiB,CAAC;AAE3C,OAAO,EAAE,cAAc,IAAI,kBAAkB,EAAE,eAAe,EAAE,MAAM,SAAS,CAAC;AAChF,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,SAAS,CAAC;AAE/C,MAAM,MAAM,SAAS,GAAG,KAAK,GAAG,KAAK,CAAC;AAEtC,MAAM,WAAW,2BAA2B;IACxC,eAAe,CAAC,EAAE,SAAS,CAAC;IAC5B,gBAAgB,EAAE,eAAe,EAAE,CAAC;IACpC,gBAAgB,EAAE,eAAe,EAAE,CAAC;IACpC,KAAK,EAAE,QAAQ,EAAE,CAAC;IAClB,MAAM,EAAE,kBAAkB,EAAE,CAAC;IAC7B,SAAS,EAAE,SAAS,CAAC;IACrB,YAAY,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,IAAI,CAAC;IACvC,iBAAiB,EAAE,CAAC,SAAS,EAAE,SAAS,KAAK,IAAI,CAAC;IAClD,aAAa,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,EAAE,kBAAkB,KAAK,IAAI,CAAC;CACrE;AAED,wBAAgB,sBAAsB,CAAC,EACnC,eAAe,EACf,gBAAgB,EAChB,gBAAgB,EAChB,KAAK,EACL,MAAM,EACN,SAAS,EACT,YAAY,EACZ,iBAAiB,EACjB,aAAa,GAChB,EAAE,QAAQ,CAAC,2BAA2B,CAAC,sCAuCvC"}
+{"version":3,"file":"ConditionGroupsSection.d.ts","sourceRoot":"","sources":["../../src/display-conditions/ConditionGroupsSection.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AACvC,OAAO,EAAE,QAAQ,EAAE,MAAM,iBAAiB,CAAC;AAE3C,OAAO,EAAE,cAAc,IAAI,kBAAkB,EAAE,eAAe,EAAE,MAAM,SAAS,CAAC;AAChF,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,SAAS,CAAC;AAE/C,MAAM,MAAM,SAAS,GAAG,KAAK,GAAG,KAAK,CAAC;AAEtC,MAAM,WAAW,2BAA2B;IACxC,eAAe,CAAC,EAAE,SAAS,CAAC;IAC5B,gBAAgB,EAAE,eAAe,EAAE,CAAC;IACpC,gBAAgB,EAAE,eAAe,EAAE,CAAC;IACpC,KAAK,EAAE,QAAQ,EAAE,CAAC;IAClB,MAAM,EAAE,kBAAkB,EAAE,CAAC;IAC7B,SAAS,EAAE,SAAS,CAAC;IACrB,YAAY,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,IAAI,CAAC;IACvC,iBAAiB,EAAE,CAAC,SAAS,EAAE,SAAS,KAAK,IAAI,CAAC;IAClD,aAAa,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,EAAE,kBAAkB,KAAK,IAAI,CAAC;CACrE;AAED,wBAAgB,sBAAsB,CAAC,EACnC,eAAe,EACf,gBAAgB,EAChB,gBAAgB,EAChB,KAAK,EACL,MAAM,EACN,SAAS,EACT,YAAY,EACZ,iBAAiB,EACjB,aAAa,GAChB,EAAE,QAAQ,CAAC,2BAA2B,CAAC,sCA0CvC"}

package/dist/display-conditions/ConditionGroupsSection.js

@@ -1,79 +1,11 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Chip, Flex, SegmentedControl, Text } from '@servicetitan/anvil2';
 import { ConditionGroup } from './ConditionGroup';
-export function ConditionGroupsSection({ behaviorSection, dataPointOptions, formFieldOptions, forms, groups, matchType, onFormSelect, onMatchTypeChange, onUpdateGroup }) {
+export function ConditionGroupsSection({ behaviorSection, dataPointOptions, formFieldOptions, forms, groups, matchType, onFormSelect, onMatchTypeChange, onUpdateGroup, }) {
     const firstGroup = groups[0];
     if (!firstGroup) {
         return null;
     }
-    return /*#__PURE__*/ _jsxs(Flex, {
-        direction: "column",
-        gap: "4",
-        children: [
-            /*#__PURE__*/ _jsxs(Flex, {
-                direction: "row",
-                alignItems: "center",
-                gap: "1",
-                style: {
-                    flexWrap: 'wrap'
-                },
-                children: [
-                    /*#__PURE__*/ _jsx(Text, {
-                        size: "small",
-                        variant: "body",
-                        style: {
-                            fontWeight: 'bold'
-                        },
-                        children: "When"
-                    }),
-                    /*#__PURE__*/ _jsxs(SegmentedControl, {
-                        selected: matchType,
-                        size: "small",
-                        onChange: (value)=>onMatchTypeChange(value),
-                        children: [
-                            /*#__PURE__*/ _jsx(SegmentedControl.Segment, {
-                                value: "all",
-                                children: "All"
-                            }),
-                            /*#__PURE__*/ _jsx(SegmentedControl.Segment, {
-                                value: "any",
-                                children: "Any"
-                            })
-                        ]
-                    }),
-                    /*#__PURE__*/ _jsx(Text, {
-                        size: "small",
-                        variant: "body",
-                        style: {
-                            fontWeight: 'bold'
-                        },
-                        children: "of the"
-                    }),
-                    /*#__PURE__*/ _jsx(Chip, {
-                        label: "IF",
-                        size: "small"
-                    }),
-                    /*#__PURE__*/ _jsx(Text, {
-                        size: "small",
-                        variant: "body",
-                        style: {
-                            fontWeight: 'bold'
-                        },
-                        children: "conditions are met"
-                    })
-                ]
-            }),
-            behaviorSection,
-            /*#__PURE__*/ _jsx(ConditionGroup, {
-                dataPointOptions: dataPointOptions,
-                formFieldOptions: formFieldOptions,
-                forms: forms,
-                group: firstGroup,
-                onFormSelect: onFormSelect,
-                onUpdate: (g)=>onUpdateGroup(0, g)
-            })
-        ]
-    });
+    return (_jsxs(Flex, { direction: "column", gap: "6", children: [_jsxs(Flex, { direction: "column", gap: "3", children: [_jsxs(Flex, { direction: "row", alignItems: "center", gap: "2", style: { flexWrap: 'wrap' }, children: [_jsx(Text, { size: "medium", variant: "body", style: { fontWeight: 'bold' }, children: "When" }), _jsxs(SegmentedControl, { selected: matchType, size: "small", onChange: (value) => onMatchTypeChange(value), children: [_jsx(SegmentedControl.Segment, { value: "all", children: "All" }), _jsx(SegmentedControl.Segment, { value: "any", children: "Any" })] }), _jsx(Text, { size: "medium", variant: "body", style: { fontWeight: 'bold' }, children: "of the" }), _jsx(Chip, { label: "IF", size: "small" }), _jsx(Text, { size: "medium", variant: "body", style: { fontWeight: 'bold' }, children: "conditions are met" })] }), behaviorSection] }), _jsx(ConditionGroup, { dataPointOptions: dataPointOptions, formFieldOptions: formFieldOptions, forms: forms, group: firstGroup, onFormSelect: onFormSelect, onUpdate: g => onUpdateGroup(0, g) })] }));
 }
-
 //# sourceMappingURL=ConditionGroupsSection.js.map

package/dist/display-conditions/ConditionGroupsSection.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/display-conditions/ConditionGroupsSection.tsx"],"sourcesContent":["import { Chip, Flex, SegmentedControl, Text } from '@servicetitan/anvil2';\nimport type { ReactNode } from 'react';\nimport { FormInfo } from '../shared/forms';\nimport { ConditionGroup } from './ConditionGroup';\nimport { ConditionGroup as ConditionGroupType, FormFieldOption } from './types';\nimport type { DataPointOption } from './types';\n\nexport type MatchType = 'all' | 'any';\n\nexport interface ConditionGroupsSectionProps {\n    behaviorSection?: ReactNode;\n    dataPointOptions: DataPointOption[];\n    formFieldOptions: FormFieldOption[];\n    forms: FormInfo[];\n    groups: ConditionGroupType[];\n    matchType: MatchType;\n    onFormSelect: (formId: number) => void;\n    onMatchTypeChange: (matchType: MatchType) => void;\n    onUpdateGroup: (index: number, group: ConditionGroupType) => void;\n}\n\nexport function ConditionGroupsSection({\n    behaviorSection,\n    dataPointOptions,\n    formFieldOptions,\n    forms,\n    groups,\n    matchType,\n    onFormSelect,\n    onMatchTypeChange,\n    onUpdateGroup,\n}: Readonly<ConditionGroupsSectionProps>) {\n    const firstGroup = groups[0];\n    if (!firstGroup) {\n        return null;\n    }\n\n    return (\n        <Flex direction=\"column\" gap=\"4\">\n            <Flex direction=\"row\" alignItems=\"center\" gap=\"1\" style={{ flexWrap: 'wrap' }}>\n                <Text size=\"small\" variant=\"body\" style={{ fontWeight: 'bold' }}>\n                    When\n                </Text>\n                <SegmentedControl\n                    selected={matchType}\n                    size=\"small\"\n                    onChange={(value: string) => onMatchTypeChange(value as MatchType)}\n                >\n                    <SegmentedControl.Segment value=\"all\">All</SegmentedControl.Segment>\n                    <SegmentedControl.Segment value=\"any\">Any</SegmentedControl.Segment>\n                </SegmentedControl>\n                <Text size=\"small\" variant=\"body\" style={{ fontWeight: 'bold' }}>\n                    of the\n                </Text>\n                <Chip label=\"IF\" size=\"small\" />\n                <Text size=\"small\" variant=\"body\" style={{ fontWeight: 'bold' }}>\n                    conditions are met\n                </Text>\n            </Flex>\n            {behaviorSection}\n            <ConditionGroup\n                dataPointOptions={dataPointOptions}\n                formFieldOptions={formFieldOptions}\n                forms={forms}\n                group={firstGroup}\n                onFormSelect={onFormSelect}\n                onUpdate={g => onUpdateGroup(0, g)}\n            />\n        </Flex>\n    );\n}\n"],"names":["Chip","Flex","SegmentedControl","Text","ConditionGroup","ConditionGroupsSection","behaviorSection","dataPointOptions","formFieldOptions","forms","groups","matchType","onFormSelect","onMatchTypeChange","onUpdateGroup","firstGroup","direction","gap","alignItems","style","flexWrap","size","variant","fontWeight","selected","onChange","value","Segment","label","group","onUpdate","g"],"mappings":";AAAA,SAASA,IAAI,EAAEC,IAAI,EAAEC,gBAAgB,EAAEC,IAAI,QAAQ,uBAAuB;AAG1E,SAASC,cAAc,QAAQ,mBAAmB;AAkBlD,OAAO,SAASC,uBAAuB,EACnCC,eAAe,EACfC,gBAAgB,EAChBC,gBAAgB,EAChBC,KAAK,EACLC,MAAM,EACNC,SAAS,EACTC,YAAY,EACZC,iBAAiB,EACjBC,aAAa,EACuB;IACpC,MAAMC,aAAaL,MAAM,CAAC,EAAE;IAC5B,IAAI,CAACK,YAAY;QACb,OAAO;IACX;IAEA,qBACI,MAACd;QAAKe,WAAU;QAASC,KAAI;;0BACzB,MAAChB;gBAAKe,WAAU;gBAAME,YAAW;gBAASD,KAAI;gBAAIE,OAAO;oBAAEC,UAAU;gBAAO;;kCACxE,KAACjB;wBAAKkB,MAAK;wBAAQC,SAAQ;wBAAOH,OAAO;4BAAEI,YAAY;wBAAO;kCAAG;;kCAGjE,MAACrB;wBACGsB,UAAUb;wBACVU,MAAK;wBACLI,UAAU,CAACC,QAAkBb,kBAAkBa;;0CAE/C,KAACxB,iBAAiByB,OAAO;gCAACD,OAAM;0CAAM;;0CACtC,KAACxB,iBAAiByB,OAAO;gCAACD,OAAM;0CAAM;;;;kCAE1C,KAACvB;wBAAKkB,MAAK;wBAAQC,SAAQ;wBAAOH,OAAO;4BAAEI,YAAY;wBAAO;kCAAG;;kCAGjE,KAACvB;wBAAK4B,OAAM;wBAAKP,MAAK;;kCACtB,KAAClB;wBAAKkB,MAAK;wBAAQC,SAAQ;wBAAOH,OAAO;4BAAEI,YAAY;wBAAO;kCAAG;;;;YAIpEjB;0BACD,KAACF;gBACGG,kBAAkBA;gBAClBC,kBAAkBA;gBAClBC,OAAOA;gBACPoB,OAAOd;gBACPH,cAAcA;gBACdkB,UAAUC,CAAAA,IAAKjB,cAAc,GAAGiB;;;;AAIhD"}
+{"version":3,"file":"ConditionGroupsSection.js","sourceRoot":"","sources":["../../src/display-conditions/ConditionGroupsSection.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,IAAI,EAAE,gBAAgB,EAAE,IAAI,EAAE,MAAM,sBAAsB,CAAC;AAG1E,OAAO,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAkBlD,MAAM,UAAU,sBAAsB,CAAC,EACnC,eAAe,EACf,gBAAgB,EAChB,gBAAgB,EAChB,KAAK,EACL,MAAM,EACN,SAAS,EACT,YAAY,EACZ,iBAAiB,EACjB,aAAa,GACuB;IACpC,MAAM,UAAU,GAAG,MAAM,CAAC,CAAC,CAAC,CAAC;IAC7B,IAAI,CAAC,UAAU,EAAE,CAAC;QACd,OAAO,IAAI,CAAC;IAChB,CAAC;IAED,OAAO,CAEH,MAAC,IAAI,IAAC,SAAS,EAAC,QAAQ,EAAC,GAAG,EAAC,GAAG,aAC5B,MAAC,IAAI,IAAC,SAAS,EAAC,QAAQ,EAAC,GAAG,EAAC,GAAG,aAC5B,MAAC,IAAI,IAAC,SAAS,EAAC,KAAK,EAAC,UAAU,EAAC,QAAQ,EAAC,GAAG,EAAC,GAAG,EAAC,KAAK,EAAE,EAAE,QAAQ,EAAE,MAAM,EAAE,aACzE,KAAC,IAAI,IAAC,IAAI,EAAC,QAAQ,EAAC,OAAO,EAAC,MAAM,EAAC,KAAK,EAAE,EAAE,UAAU,EAAE,MAAM,EAAE,qBAEzD,EACP,MAAC,gBAAgB,IACb,QAAQ,EAAE,SAAS,EACnB,IAAI,EAAC,OAAO,EACZ,QAAQ,EAAE,CAAC,KAAa,EAAE,EAAE,CAAC,iBAAiB,CAAC,KAAkB,CAAC,aAElE,KAAC,gBAAgB,CAAC,OAAO,IAAC,KAAK,EAAC,KAAK,oBAA+B,EACpE,KAAC,gBAAgB,CAAC,OAAO,IAAC,KAAK,EAAC,KAAK,oBAA+B,IACrD,EACnB,KAAC,IAAI,IAAC,IAAI,EAAC,QAAQ,EAAC,OAAO,EAAC,MAAM,EAAC,KAAK,EAAE,EAAE,UAAU,EAAE,MAAM,EAAE,uBAEzD,EACP,KAAC,IAAI,IAAC,KAAK,EAAC,IAAI,EAAC,IAAI,EAAC,OAAO,GAAG,EAChC,KAAC,IAAI,IAAC,IAAI,EAAC,QAAQ,EAAC,OAAO,EAAC,MAAM,EAAC,KAAK,EAAE,EAAE,UAAU,EAAE,MAAM,EAAE,mCAEzD,IACJ,EACN,eAAe,IACb,EACP,KAAC,cAAc,IACX,gBAAgB,EAAE,gBAAgB,EAClC,gBAAgB,EAAE,gBAAgB,EAClC,KAAK,EAAE,KAAK,EACZ,KAAK,EAAE,UAAU,EACjB,YAAY,EAAE,YAAY,EAC1B,QAAQ,EAAE,CAAC,CAAC,EAAE,CAAC,aAAa,CAAC,CAAC,EAAE,CAAC,CAAC,GACpC,IACC,CACV,CAAC;AACN,CAAC"}

package/dist/display-conditions/ConditionRow.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ConditionRow.d.ts","sourceRoot":"","sources":["../../src/display-conditions/ConditionRow.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,QAAQ,EAAqB,MAAM,iBAAiB,CAAC;AAE9D,OAAO,EAAoB,eAAe,EAA0C,MAAM,SAAS,CAAC;AACpG,OAAO,KAAK,EAAE,eAAe,EAAE,eAAe,EAAE,MAAM,SAAS,CAAC;AAEhE,MAAM,WAAW,iBAAiB;IAC9B,SAAS,EAAE,OAAO,CAAC;IACnB,SAAS,EAAE,eAAe,CAAC;IAC3B,gBAAgB,EAAE,eAAe,EAAE,CAAC;IACpC,gBAAgB,EAAE,eAAe,EAAE,CAAC;IACpC,KAAK,EAAE,QAAQ,EAAE,CAAC;IAClB,QAAQ,EAAE,CAAC,CAAC,EAAE,eAAe,KAAK,IAAI,CAAC;IACvC,YAAY,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,IAAI,CAAC;IACvC,QAAQ,EAAE,MAAM,IAAI,CAAC;CACxB;AAaD,wBAAgB,YAAY,CAAC,EACzB,SAAS,EACT,SAAS,EACT,gBAAgB,EAChB,gBAAgB,EAChB,KAAK,EACL,QAAQ,EACR,YAAY,EACZ,QAAQ,GACX,EAAE,QAAQ,CAAC,iBAAiB,CAAC,+BAmN7B"}
+{"version":3,"file":"ConditionRow.d.ts","sourceRoot":"","sources":["../../src/display-conditions/ConditionRow.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,QAAQ,EAAqB,MAAM,iBAAiB,CAAC;AAE9D,OAAO,EAAoB,eAAe,EAA0C,MAAM,SAAS,CAAC;AACpG,OAAO,KAAK,EAAE,eAAe,EAAE,eAAe,EAAE,MAAM,SAAS,CAAC;AAEhE,MAAM,WAAW,iBAAiB;IAC9B,SAAS,EAAE,OAAO,CAAC;IACnB,SAAS,EAAE,eAAe,CAAC;IAC3B,gBAAgB,EAAE,eAAe,EAAE,CAAC;IACpC,gBAAgB,EAAE,eAAe,EAAE,CAAC;IACpC,KAAK,EAAE,QAAQ,EAAE,CAAC;IAClB,QAAQ,EAAE,CAAC,CAAC,EAAE,eAAe,KAAK,IAAI,CAAC;IACvC,YAAY,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,IAAI,CAAC;IACvC,QAAQ,EAAE,MAAM,IAAI,CAAC;CACxB;AAmBD,wBAAgB,YAAY,CAAC,EACzB,SAAS,EACT,SAAS,EACT,gBAAgB,EAChB,gBAAgB,EAChB,KAAK,EACL,QAAQ,EACR,YAAY,EACZ,QAAQ,GACX,EAAE,QAAQ,CAAC,iBAAiB,CAAC,+BAwP7B"}

package/dist/display-conditions/ConditionRow.js

@@ -5,242 +5,118 @@ import { useEffect, useMemo, useState } from 'react';
 import { parseFormFieldKey } from '../shared/forms';
 import { LookupValueControl } from './LookupValueControl';
 import { NUMBER_OPERATORS, STRING_OPERATORS, VALUE_LESS_OPERATORS } from './types';
-export function ConditionRow({ canRemove, condition, dataPointOptions, formFieldOptions, forms, onChange, onFormSelect, onRemove }) {
-    var _ref;
-    const selectedFormFieldMeta = useMemo(()=>parseFormFieldKey(condition.dataPointKey), [
-        condition.dataPointKey
-    ]);
-    const [selectedSourceValue, setSelectedSourceValue] = useState(selectedFormFieldMeta ? `form:${selectedFormFieldMeta.formId}` : 'schema');
-    const sourceOptions = useMemo(()=>[
-            {
-                label: 'Merge tags',
-                value: 'schema'
-            },
-            ...forms.map((form)=>({
-                    formId: form.id,
-                    label: form.name,
-                    value: `form:${form.id}`
-                }))
-        ], [
-        forms
-    ]);
-    const selectedSource = useMemo(()=>{
-        var _ref, _sourceOptions_find;
-        return (_ref = (_sourceOptions_find = sourceOptions.find((opt)=>opt.value === selectedSourceValue)) !== null && _sourceOptions_find !== void 0 ? _sourceOptions_find : sourceOptions[0]) !== null && _ref !== void 0 ? _ref : null;
-    }, [
-        selectedSourceValue,
-        sourceOptions
-    ]);
-    useEffect(()=>{
+const SOURCE_KIND_LABELS = {
+    form: 'Form',
+    schema: 'Merge tags',
+};
+export function ConditionRow({ canRemove, condition, dataPointOptions, formFieldOptions, forms, onChange, onFormSelect, onRemove, }) {
+    var _a, _b, _c;
+    const selectedFormFieldMeta = useMemo(() => parseFormFieldKey(condition.dataPointKey), [condition.dataPointKey]);
+    // As in BYOD: the source is "Merge tags" or "Form", and a form source gets its own form picker.
+    const [sourceKind, setSourceKind] = useState(selectedFormFieldMeta ? 'form' : 'schema');
+    const [selectedFormId, setSelectedFormId] = useState(selectedFormFieldMeta === null || selectedFormFieldMeta === void 0 ? void 0 : selectedFormFieldMeta.formId);
+    const sourceOptions = useMemo(() => {
+        const kinds = forms.length || selectedFormFieldMeta ? ['schema', 'form'] : ['schema'];
+        return kinds.map(value => ({ label: SOURCE_KIND_LABELS[value], value }));
+    }, [forms.length, selectedFormFieldMeta]);
+    const selectedSource = (_b = (_a = sourceOptions.find(opt => opt.value === sourceKind)) !== null && _a !== void 0 ? _a : sourceOptions[0]) !== null && _b !== void 0 ? _b : null;
+    const sortedForms = useMemo(() => [...forms].sort((a, b) => a.name.localeCompare(b.name)), [forms]);
+    const selectedForm = useMemo(() => { var _a; return (_a = sortedForms.find(form => form.id === selectedFormId)) !== null && _a !== void 0 ? _a : null; }, [selectedFormId, sortedForms]);
+    useEffect(() => {
         if (selectedFormFieldMeta) {
-            setSelectedSourceValue(`form:${selectedFormFieldMeta.formId}`);
+            setSourceKind('form');
+            setSelectedFormId(selectedFormFieldMeta.formId);
             return;
         }
         if (!condition.dataPointKey) {
             return;
         }
-        const hasSchemaMatch = dataPointOptions.some((opt)=>opt.fullKey === condition.dataPointKey);
+        const hasSchemaMatch = dataPointOptions.some(opt => opt.fullKey === condition.dataPointKey);
         if (hasSchemaMatch) {
-            setSelectedSourceValue('schema');
+            setSourceKind('schema');
         }
-    }, [
-        condition.dataPointKey,
-        dataPointOptions,
-        selectedFormFieldMeta
-    ]);
-    const currentFormId = selectedSource === null || selectedSource === void 0 ? void 0 : selectedSource.formId;
-    const activeDataPointOptions = useMemo(()=>currentFormId ? formFieldOptions.filter((option)=>option.formId === currentFormId) : dataPointOptions, [
-        currentFormId,
-        dataPointOptions,
-        formFieldOptions
-    ]);
-    const selectedDataPoint = useMemo(()=>{
-        var _activeDataPointOptions_find;
-        return (_activeDataPointOptions_find = activeDataPointOptions.find((opt)=>opt.fullKey === condition.dataPointKey)) !== null && _activeDataPointOptions_find !== void 0 ? _activeDataPointOptions_find : null;
-    }, [
-        activeDataPointOptions,
-        condition.dataPointKey
-    ]);
-    const fieldType = (_ref = selectedDataPoint === null || selectedDataPoint === void 0 ? void 0 : selectedDataPoint.fieldType) !== null && _ref !== void 0 ? _ref : 'string';
+    }, [condition.dataPointKey, dataPointOptions, selectedFormFieldMeta]);
+    const isFormSource = (selectedSource === null || selectedSource === void 0 ? void 0 : selectedSource.value) === 'form';
+    const currentFormId = isFormSource ? selectedFormId : undefined;
+    const activeDataPointOptions = useMemo(() => {
+        if (!isFormSource) {
+            return dataPointOptions;
+        }
+        return currentFormId
+            ? formFieldOptions.filter(option => option.formId === currentFormId)
+            : [];
+    }, [currentFormId, dataPointOptions, formFieldOptions, isFormSource]);
+    const selectedDataPoint = useMemo(() => { var _a; return (_a = activeDataPointOptions.find(opt => opt.fullKey === condition.dataPointKey)) !== null && _a !== void 0 ? _a : null; }, [activeDataPointOptions, condition.dataPointKey]);
+    const fieldType = (_c = selectedDataPoint === null || selectedDataPoint === void 0 ? void 0 : selectedDataPoint.fieldType) !== null && _c !== void 0 ? _c : 'string';
     const isValueLess = VALUE_LESS_OPERATORS.includes(condition.operator);
-    const operatorItems = useMemo(()=>fieldType === 'number' ? [
-            ...NUMBER_OPERATORS
-        ] : [
-            ...STRING_OPERATORS
-        ], [
-        fieldType
-    ]);
-    const selectedOperator = useMemo(()=>{
-        var _operatorItems_find;
-        return (_operatorItems_find = operatorItems.find((op)=>op.value === condition.operator)) !== null && _operatorItems_find !== void 0 ? _operatorItems_find : null;
-    }, [
-        operatorItems,
-        condition.operator
-    ]);
-    const handleDataPointChange = (item)=>{
-        var _ref;
+    const operatorItems = useMemo(() => fieldType === 'number'
+        ? [...NUMBER_OPERATORS]
+        : [...STRING_OPERATORS], [fieldType]);
+    const selectedOperator = useMemo(() => { var _a; return (_a = operatorItems.find(op => op.value === condition.operator)) !== null && _a !== void 0 ? _a : null; }, [operatorItems, condition.operator]);
+    const handleDataPointChange = (item) => {
+        var _a;
         const nextIsNumber = (item === null || item === void 0 ? void 0 : item.fieldType) === 'number';
         const nextOperatorItems = nextIsNumber ? NUMBER_OPERATORS : STRING_OPERATORS;
-        const operatorReset = !nextOperatorItems.some((op)=>op.value === condition.operator);
+        const operatorReset = !nextOperatorItems.some(op => op.value === condition.operator);
         onChange({
             ...condition,
-            dataPointKey: (_ref = item === null || item === void 0 ? void 0 : item.fullKey) !== null && _ref !== void 0 ? _ref : '',
-            operator: operatorReset ? nextIsNumber ? 'num_eq' : 'is_equal_to' : condition.operator
+            dataPointKey: (_a = item === null || item === void 0 ? void 0 : item.fullKey) !== null && _a !== void 0 ? _a : '',
+            operator: operatorReset
+                ? nextIsNumber
+                    ? 'num_eq'
+                    : 'is_equal_to'
+                : condition.operator,
         });
     };
-    const handleSourceChange = (item)=>{
+    const handleSourceChange = (item) => {
         if (!item) {
             return;
         }
-        setSelectedSourceValue(item.value);
+        setSourceKind(item.value);
+        setSelectedFormId(undefined);
         // As in BYOD, a new source starts the condition over instead of picking a data point for it.
-        onChange({
-            ...condition,
-            dataPointKey: '',
-            operator: 'is_equal_to',
-            value: ''
-        });
-        if (item.formId) {
-            onFormSelect(item.formId);
+        onChange({ ...condition, dataPointKey: '', operator: 'is_equal_to', value: '' });
+    };
+    const handleFormChange = (formId) => {
+        if (formId === undefined) {
+            return;
         }
+        setSelectedFormId(formId);
+        // Switching forms keeps the "Form" source and its picker, and starts the condition over.
+        onChange({ ...condition, dataPointKey: '', operator: 'is_equal_to', value: '' });
+        onFormSelect(formId);
     };
     // Same controls and layout as BYOD's condition row (`dte-pdf-editor`'s `ConditionRow`).
-    const sourceSelectOptions = sourceOptions.map((option)=>({
-            id: option.value,
-            label: option.label
-        }));
-    const dataPointSelectOptions = activeDataPointOptions.map((option)=>({
-            id: option.fullKey,
-            label: option.title
-        }));
-    const operatorSelectOptions = operatorItems.map((option)=>({
-            id: option.value,
-            label: option.label
-        }));
-    return /*#__PURE__*/ _jsxs(Flex, {
-        direction: "column",
-        gap: "4",
-        flex: 1,
-        children: [
-            /*#__PURE__*/ _jsx(Flex, {
-                flex: 1,
-                gap: "2",
-                children: /*#__PURE__*/ _jsx(SelectFieldSync, {
-                    flex: 1,
-                    disableSearch: true,
-                    disableClearButton: true,
-                    label: "Source",
-                    placeholder: "Select source...",
-                    options: sourceSelectOptions,
-                    value: selectedSource ? {
-                        id: selectedSource.value,
-                        label: selectedSource.label
-                    } : null,
-                    onSelectedOptionChange: (option)=>{
-                        var _sourceOptions_find;
-                        return handleSourceChange((_sourceOptions_find = sourceOptions.find((o)=>o.value === (option === null || option === void 0 ? void 0 : option.id))) !== null && _sourceOptions_find !== void 0 ? _sourceOptions_find : null);
-                    }
-                })
-            }),
-            /*#__PURE__*/ _jsxs(Flex, {
-                direction: "row",
-                alignItems: "flex-end",
-                gap: "2",
-                flex: 1,
-                style: {
-                    flexWrap: 'wrap'
-                },
-                children: [
-                    /*#__PURE__*/ _jsx(Flex, {
-                        alignItems: "flex-end",
-                        style: {
-                            padding: '8px 12px'
-                        },
-                        children: /*#__PURE__*/ _jsx(Chip, {
-                            label: "IF",
-                            size: "medium"
-                        })
-                    }),
-                    /*#__PURE__*/ _jsx(Flex, {
-                        flex: 1,
-                        style: {
-                            minWidth: 160
-                        },
-                        children: /*#__PURE__*/ _jsx(SelectFieldSync, {
-                            flex: 1,
-                            disableSearch: true,
-                            disableClearButton: true,
-                            label: "Data point",
-                            placeholder: currentFormId ? 'Select form field...' : 'Select data point...',
-                            options: dataPointSelectOptions,
-                            value: selectedDataPoint ? {
-                                id: selectedDataPoint.fullKey,
-                                label: selectedDataPoint.title
-                            } : null,
-                            onSelectedOptionChange: (option)=>{
-                                var _activeDataPointOptions_find;
-                                return handleDataPointChange((_activeDataPointOptions_find = activeDataPointOptions.find((o)=>o.fullKey === (option === null || option === void 0 ? void 0 : option.id))) !== null && _activeDataPointOptions_find !== void 0 ? _activeDataPointOptions_find : null);
-                            }
-                        })
-                    }),
-                    /*#__PURE__*/ _jsx(Flex, {
-                        flex: 1,
-                        style: {
-                            minWidth: 160
-                        },
-                        children: /*#__PURE__*/ _jsx(SelectFieldSync, {
-                            flex: 1,
-                            disableSearch: true,
-                            disableClearButton: true,
-                            label: "Condition",
-                            placeholder: "Select...",
-                            options: operatorSelectOptions,
-                            value: selectedOperator ? {
-                                id: selectedOperator.value,
-                                label: selectedOperator.label
-                            } : null,
-                            onSelectedOptionChange: (option)=>{
-                                var _ref;
+    const sourceSelectOptions = sourceOptions.map(option => ({
+        id: option.value,
+        label: option.label,
+    }));
+    const formSelectOptions = sortedForms.map(form => ({ id: form.id, label: form.name }));
+    const dataPointSelectOptions = activeDataPointOptions.map(option => ({
+        id: option.fullKey,
+        label: option.title,
+    }));
+    const operatorSelectOptions = operatorItems.map(option => ({
+        id: option.value,
+        label: option.label,
+    }));
+    return (_jsxs(Flex, { direction: "column", gap: "4", flex: 1, children: [_jsxs(Flex, { flex: 1, gap: "2", children: [_jsx(SelectFieldSync, { flex: 1, disableSearch: true, disableClearButton: true, label: "Source", placeholder: "Select source...", options: sourceSelectOptions, value: selectedSource
+                            ? { id: selectedSource.value, label: selectedSource.label }
+                            : null, onSelectedOptionChange: (option) => { var _a; return handleSourceChange((_a = sourceOptions.find(o => o.value === (option === null || option === void 0 ? void 0 : option.id))) !== null && _a !== void 0 ? _a : null); } }), isFormSource && (_jsx(SelectFieldSync, { flex: 1, disableSearch: true, disableClearButton: true, label: "Select Form", placeholder: "Select form...", options: formSelectOptions, value: selectedForm ? { id: selectedForm.id, label: selectedForm.name } : null, onSelectedOptionChange: (option) => handleFormChange(option === null || option === void 0 ? void 0 : option.id) }))] }), _jsxs(Flex, { direction: "row", alignItems: "flex-end", gap: "2", flex: 1, style: { flexWrap: 'wrap' }, children: [_jsx(Flex, { alignItems: "flex-end", style: { padding: '8px 12px' }, children: _jsx(Chip, { label: "IF", size: "medium" }) }), _jsx(Flex, { flex: 1, style: { minWidth: 160 }, children: _jsx(SelectFieldSync, { flex: 1, disableSearch: true, disableClearButton: true, disabled: isFormSource && !currentFormId, label: "Data point", placeholder: isFormSource && !currentFormId
+                                ? 'Select a form first...'
+                                : 'Select data point...', options: dataPointSelectOptions, value: selectedDataPoint
+                                ? { id: selectedDataPoint.fullKey, label: selectedDataPoint.title }
+                                : null, onSelectedOptionChange: (option) => {
+                                var _a;
+                                return handleDataPointChange((_a = activeDataPointOptions.find(o => o.fullKey === (option === null || option === void 0 ? void 0 : option.id))) !== null && _a !== void 0 ? _a : null);
+                            } }) }), _jsx(Flex, { flex: 1, style: { minWidth: 160 }, children: _jsx(SelectFieldSync, { flex: 1, disableSearch: true, disableClearButton: true, label: "Condition", placeholder: "Select...", options: operatorSelectOptions, value: selectedOperator
+                                ? { id: selectedOperator.value, label: selectedOperator.label }
+                                : null, onSelectedOptionChange: (option) => {
+                                var _a;
                                 return onChange({
                                     ...condition,
-                                    operator: (_ref = option === null || option === void 0 ? void 0 : option.id) !== null && _ref !== void 0 ? _ref : 'is_equal_to'
+                                    operator: ((_a = option === null || option === void 0 ? void 0 : option.id) !== null && _a !== void 0 ? _a : 'is_equal_to'),
                                 });
-                            }
-                        })
-                    }),
-                    !isValueLess && /*#__PURE__*/ _jsx(Flex, {
-                        flex: 1,
-                        style: {
-                            minWidth: 160
-                        },
-                        children: /*#__PURE__*/ _jsx(LookupValueControl, {
-                            value: condition.value,
-                            fieldType: fieldType,
-                            lookupSource: selectedDataPoint === null || selectedDataPoint === void 0 ? void 0 : selectedDataPoint.lookupSource,
-                            onChange: (value)=>onChange({
-                                    ...condition,
-                                    value
-                                })
-                        })
-                    }),
-                    canRemove && /*#__PURE__*/ _jsx(Flex, {
-                        alignItems: "flex-end",
-                        style: {
-                            padding: '6px 12px'
-                        },
-                        children: /*#__PURE__*/ _jsx(Button, {
-                            appearance: "secondary",
-                            "aria-label": "Remove condition",
-                            icon: {
-                                before: TrashIcon
-                            },
-                            onClick: onRemove
-                        })
-                    })
-                ]
-            })
-        ]
-    });
+                            } }) }), !isValueLess && (_jsx(Flex, { flex: 1, style: { minWidth: 160 }, children: _jsx(LookupValueControl, { value: condition.value, fieldType: fieldType, lookupSource: selectedDataPoint === null || selectedDataPoint === void 0 ? void 0 : selectedDataPoint.lookupSource, onChange: value => onChange({ ...condition, value }) }) })), canRemove && (_jsx(Flex, { alignItems: "flex-end", style: { padding: '6px 12px' }, children: _jsx(Button, { appearance: "secondary", "aria-label": "Remove condition", icon: { before: TrashIcon }, onClick: onRemove }) }))] })] }));
 }
-
 //# sourceMappingURL=ConditionRow.js.map