@pega/cosmos-react-demos 3.0.0-dev.3.0 → 3.0.0-dev.30.0

package/jsx/condition-builder/ConditionBuilder/ConditionBuilder.stories.jsx

@@ -1,26 +1,14 @@
 import { useRef, useState } from 'react';
-import styled from 'styled-components';
-import { boolean, select } from '@storybook/addon-knobs';
-import { Card, CardContent, Text, Grid, Button, defaultThemeProp, Popover, useElement, useOuterEvent, Flex, useI18n } from '@pega/cosmos-react-core';
+import { Card, CardContent, Text, Button, Popover, useElement, useOuterEvent, Flex, useI18n } from '@pega/cosmos-react-core';
 import { ConditionBuilder, FieldCondition, AtomicCondition, getInitConditionForLhs, isValidCondition, formatCondition } from '@pega/cosmos-react-condition-builder';
 import { demoFields, demoCondition, demoComparators, demoDateFunctions } from './props.mock';
-const StyledGrid = styled(Grid) `
-  max-width: 60rem;
-`;
-const StyledCodeBlock = styled.pre `
-  padding: ${props => props.theme.base.spacing};
-  margin-bottom: ${props => props.theme.base.spacing};
-`;
-StyledCodeBlock.defaultProps = defaultThemeProp;
-const StyledList = styled.ul `
-  padding-left: calc(4 * ${props => props.theme.base.spacing});
-`;
-StyledList.defaultProps = defaultThemeProp;
+import { StyledCodeBlock, StyledGrid, StyledList } from './ConditionBuilder.styles';
+import { convertRhsTypes } from './ConditionBuilder.mocks';
 export default {
     title: 'Condition Builder/ConditionBuilder',
     component: ConditionBuilder
 };
-export const DefaultBuilder = () => {
+export const DefaultBuilder = (args) => {
     const translate = useI18n();
     const [condition, setCondition] = useState(() => {
         const prevCondition = sessionStorage.getItem('CBDemoCondition');
@@ -32,10 +20,6 @@ export const DefaultBuilder = () => {
         }
         return demoCondition;
     });
-    const validComparators = boolean('Limit Comparators', false) ? demoComparators : undefined;
-    const disallowNOT = boolean('Disallow NOT operator', false);
-    const renderInPopover = boolean('Render inside Popover', false);
-    const dateFunctions = boolean('Enable Date functions', true) ? demoDateFunctions : undefined;
     const buttonRef = useRef(null);
     const [isOpen, setIsOpen] = useState(false);
     const [popoverEl, setPopoverEl] = useElement(null);
@@ -49,24 +33,37 @@ export const DefaultBuilder = () => {
         if (e.key === 'Escape')
             hidePopover();
     };
-    const builderJsx = (<ConditionBuilder fields={demoFields} condition={condition} validComparators={validComparators} validRhsTypes={new Set(['LITERAL', 'FIELD', 'DATE_FUNCTION', 'RELATIVE_DATE'])} dateFunctions={dateFunctions} disallowNOT={disallowNOT} onConditionSubmit={(c) => {
-            setCondition(c);
-            hidePopover();
-            sessionStorage.setItem('CBDemoCondition', JSON.stringify(c));
-        }}/>);
+    const handle = useRef(null);
+    const builderJsx = (<>
+      <ConditionBuilder fields={demoFields} condition={condition} validComparators={args.validComparators ? demoComparators : undefined} validRhsTypes={new Set(['LITERAL', 'FIELD', 'DATE_FUNCTION', 'RELATIVE_DATE', 'PARAMETER'])} dateFunctions={args.dateFunctions ? demoDateFunctions : undefined} disallowNOT={args.disallowNOT} handle={handle}/>
+      <Flex container={{ justify: 'end' }}>
+        <Button variant='primary' onClick={() => {
+            if (handle?.current) {
+                const [valid, newCondition] = handle.current.getCondition();
+                if (valid) {
+                    setCondition(newCondition);
+                    hidePopover();
+                    sessionStorage.setItem('CBDemoCondition', JSON.stringify(newCondition));
+                }
+            }
+        }}>
+          Submit
+        </Button>
+      </Flex>
+    </>);
     return (<StyledGrid container={{
             cols: '1fr',
             rowGap: 3
         }}>
-      {!renderInPopover && builderJsx}
+      {!args.renderInPopover && builderJsx}
 
-      {renderInPopover && (<>
+      {args.renderInPopover && (<>
           <Button ref={buttonRef} aria-haspopup aria-expanded={isOpen} onClick={() => setIsOpen(!isOpen)} onKeyDown={hideOnEscape}>
             Open Condition builder
           </Button>
 
           <Popover show={isOpen} ref={setPopoverEl} target={buttonRef.current} placement='bottom-start'>
-            <Flex container={{ pad: 1 }}>{builderJsx}</Flex>
+            <Flex container={{ pad: 1, direction: 'column' }}>{builderJsx}</Flex>
           </Popover>
         </>)}
 
@@ -85,12 +82,21 @@ export const DefaultBuilder = () => {
       </div>
     </StyledGrid>);
 };
-export const FieldConditionDemo = () => {
+DefaultBuilder.args = {
+    validComparators: false,
+    disallowNOT: false,
+    renderInPopover: false,
+    dateFunctions: true
+};
+DefaultBuilder.argTypes = {
+    validComparators: { control: { type: 'boolean' } },
+    disallowNOT: { control: { type: 'boolean' } },
+    renderInPopover: { control: { type: 'boolean' } },
+    dateFunctions: { control: { type: 'boolean' } }
+};
+export const FieldConditionDemo = (args) => {
     const translate = useI18n();
     const [condition, setCondition] = useState(undefined);
-    const validComparators = boolean('Limit Comparators', false) ? demoComparators : undefined;
-    const renderInPopover = boolean('Render inside Popover', false);
-    const dateFunctions = boolean('Enable Date functions', true) ? demoDateFunctions : undefined;
     const buttonRef = useRef(null);
     const [isOpen, setIsOpen] = useState(false);
     const [popoverEl, setPopoverEl] = useElement(null);
@@ -104,19 +110,33 @@ export const FieldConditionDemo = () => {
         if (e.key === 'Escape')
             hidePopover();
     };
-    const builderJsx = (<FieldCondition targetField='lastActivityAt' fields={demoFields} condition={condition} validComparators={validComparators} validRhsTypes={new Set(['LITERAL', 'FIELD', 'DATE_FUNCTION', 'RELATIVE_DATE'])} dateFunctions={dateFunctions} onSubmit={c => {
+    const handle = useRef(null);
+    const builderJsx = (<Flex container={{ direction: 'column', gap: 2 }}>
+      <FieldCondition targetField='technicalDetails.lastActivityAt' fields={demoFields} condition={condition} validComparators={args.validComparators ? demoComparators : undefined} validRhsTypes={new Set(['LITERAL', 'FIELD', 'DATE_FUNCTION', 'RELATIVE_DATE'])} dateFunctions={args.dateFunctions ? demoDateFunctions : undefined} handle={handle}/>
+
+      <Flex container={{ justify: 'end' }}>
+        <Button name='field-condition-submit' variant='primary' onClick={() => {
+            if (!handle.current)
+                return;
+            const [isValid, c] = handle.current.getCondition();
+            if (!isValid)
+                return;
             hidePopover();
             setCondition(c);
-        }}/>);
+        }}>
+          Submit
+        </Button>
+      </Flex>
+    </Flex>);
     return (<StyledGrid container={{
             cols: 'repeat(2, minmax(0, 1fr))',
             justifyItems: 'stretch',
             alignItems: 'start',
             colGap: 4
         }}>
-      {!renderInPopover && builderJsx}
+      {!args.renderInPopover && builderJsx}
 
-      {renderInPopover && (<>
+      {args.renderInPopover && (<>
           <Button ref={buttonRef} aria-haspopup aria-expanded={isOpen} onClick={() => setIsOpen(!isOpen)} onKeyDown={hideOnEscape}>
             Open Condition builder
           </Button>
@@ -139,29 +159,19 @@ export const FieldConditionDemo = () => {
       </div>
     </StyledGrid>);
 };
-const convertRhsTypes = (useLiteralRHSType, useFieldRHSType, useRelativeDatesType, dateFunctions) => {
-    const setRhsTypes = new Set();
-    if (useLiteralRHSType)
-        setRhsTypes.add('LITERAL');
-    if (useFieldRHSType)
-        setRhsTypes.add('FIELD');
-    if (dateFunctions)
-        setRhsTypes.add('DATE_FUNCTION');
-    if (useRelativeDatesType)
-        setRhsTypes.add('RELATIVE_DATE');
-    return setRhsTypes;
+FieldConditionDemo.args = {
+    validComparators: false,
+    renderInPopover: false,
+    dateFunctions: true
 };
-export const AtomicConditionDemo = () => {
+FieldConditionDemo.argTypes = {
+    validComparators: { control: { type: 'boolean' } },
+    renderInPopover: { control: { type: 'boolean' } },
+    dateFunctions: { control: { type: 'boolean' } }
+};
+export const AtomicConditionDemo = (args) => {
     const translate = useI18n();
-    const renderInPopover = boolean('Render inside Popover', false);
-    const itemDirection = select('Item Direction', { Column: 'column', Row: 'row' }, 'column');
-    const validComparators = boolean('Limit Comparators', false) ? demoComparators : undefined;
-    const useLiteralRHSType = boolean('Enable Literal RHS Type', true);
-    const useFieldRHSType = boolean('Enable Field RHS Type', true);
-    const useRelativeDatesRHSType = boolean('Enable Relative Dates RHS Type', true);
-    const dateFunctions = boolean('Enable Date functions', true) ? demoDateFunctions : undefined;
-    const validRHSTypes = convertRhsTypes(useLiteralRHSType, useFieldRHSType, useRelativeDatesRHSType, dateFunctions);
-    const showLhsAsLabel = boolean('Show LHS as Label', false);
+    const validRHSTypes = convertRhsTypes(!!args.useLiteralRHSType, !!args.useFieldRHSType, !!args.useRelativeDatesRHSType, !!args.useParameterRHSType, args.dateFunctions ? demoDateFunctions : undefined);
     const [submitCondition, setSubmitCondition] = useState(undefined);
     const buttonRef = useRef(null);
     const [isOpen, setIsOpen] = useState(false);
@@ -178,11 +188,11 @@ export const AtomicConditionDemo = () => {
     };
     const [showErrorIndicators, setShowErrorIndicators] = useState(false);
     const [condition, setCondition] = useState(() => submitCondition ||
-        getInitConditionForLhs({ field: 'age' }, demoFields, validRHSTypes, validComparators, dateFunctions));
+        getInitConditionForLhs({ field: 'details.age' }, demoFields, validRHSTypes, args.validComparators ? demoComparators : undefined, args.dateFunctions ? demoDateFunctions : undefined));
     const handleSubmission = () => {
         setShowErrorIndicators(false);
         if (isValidCondition(condition, demoFields, true)) {
-            if (renderInPopover)
+            if (args.renderInPopover)
                 setIsOpen(false);
             setSubmitCondition(condition);
         }
@@ -191,10 +201,12 @@ export const AtomicConditionDemo = () => {
         }
     };
     const atomicConditionJSX = (<Flex container={{ direction: 'column', gap: 2 }}>
-      <AtomicCondition condition={condition} fields={demoFields} indicateErrors={showErrorIndicators} validComparators={validComparators} dateFunctions={dateFunctions} onChange={c => setCondition(c)} itemDirection={itemDirection} showLhsAsLabel={showLhsAsLabel} validRhsTypes={validRHSTypes}/>
-      <Button variant='primary' onClick={handleSubmission}>
-        Submit Condition
-      </Button>
+      <AtomicCondition condition={condition} fields={demoFields} indicateErrors={showErrorIndicators} validComparators={args.validComparators ? demoComparators : undefined} dateFunctions={args.dateFunctions ? demoDateFunctions : undefined} onChange={c => setCondition(c)} itemDirection={args.itemDirection} lhsMode={args.lhsMode} validRhsTypes={validRHSTypes}/>
+      <Flex container={{ justify: 'end' }}>
+        <Button variant='primary' onClick={handleSubmission}>
+          Submit
+        </Button>
+      </Flex>
     </Flex>);
     return (<StyledGrid container={{
             cols: 'repeat(2, minmax(0, 1fr))',
@@ -202,9 +214,9 @@ export const AtomicConditionDemo = () => {
             alignItems: 'start',
             colGap: 4
         }}>
-      {!renderInPopover && atomicConditionJSX}
+      {!args.renderInPopover && atomicConditionJSX}
 
-      {renderInPopover && (<>
+      {args.renderInPopover && (<>
           <Button ref={buttonRef} aria-haspopup aria-expanded={isOpen} onClick={() => setIsOpen(!isOpen)} onKeyDown={hideOnEscape}>
             {`${isOpen ? 'Close' : 'Open'} Atomic Condition`}
           </Button>
@@ -260,4 +272,26 @@ export const AtomicConditionDemo = () => {
       </Card>
     </StyledGrid>);
 };
+AtomicConditionDemo.args = {
+    validComparators: false,
+    renderInPopover: false,
+    dateFunctions: true,
+    itemDirection: 'column',
+    useLiteralRHSType: true,
+    useParameterRHSType: true,
+    useFieldRHSType: true,
+    useRelativeDatesRHSType: true,
+    lhsMode: 'input'
+};
+AtomicConditionDemo.argTypes = {
+    validComparators: { control: { type: 'boolean' } },
+    renderInPopover: { control: { type: 'boolean' } },
+    dateFunctions: { control: { type: 'boolean' } },
+    itemDirection: { options: ['column', 'row'], control: { type: 'select' } },
+    useLiteralRHSType: { control: { type: 'boolean' } },
+    useParameterRHSType: { control: { type: 'boolean' } },
+    useFieldRHSType: { control: { type: 'boolean' } },
+    useRelativeDatesRHSType: { control: { type: 'boolean' } },
+    lhsMode: { options: ['input', 'label', 'hidden'], control: { type: 'select' } }
+};
 //# sourceMappingURL=ConditionBuilder.stories.jsx.map

package/jsx/condition-builder/ConditionBuilder/ConditionBuilder.stories.jsx.map

@@ -1 +1 @@
-{"version":3,"file":"ConditionBuilder.stories.jsx","sourceRoot":"","sources":["../../../src/condition-builder/ConditionBuilder/ConditionBuilder.stories.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AACzC,OAAO,MAAM,MAAM,mBAAmB,CAAC;AACvC,OAAO,EAAE,OAAO,EAAE,MAAM,EAAE,MAAM,wBAAwB,CAAC;AAEzD,OAAO,EACL,IAAI,EACJ,WAAW,EACX,IAAI,EACJ,IAAI,EACJ,MAAM,EACN,gBAAgB,EAChB,OAAO,EACP,UAAU,EACV,aAAa,EACb,IAAI,EACJ,OAAO,EACR,MAAM,yBAAyB,CAAC;AACjC,OAAO,EACL,gBAAgB,EAChB,cAAc,EACd,eAAe,EACf,sBAAsB,EACtB,gBAAgB,EAIhB,eAAe,EAEhB,MAAM,sCAAsC,CAAC;AAE9C,OAAO,EAAE,UAAU,EAAE,aAAa,EAAE,eAAe,EAAE,iBAAiB,EAAE,MAAM,cAAc,CAAC;AAE7F,MAAM,UAAU,GAAG,MAAM,CAAC,IAAI,CAAC,CAAA;;CAE9B,CAAC;AAEF,MAAM,eAAe,GAAG,MAAM,CAAC,GAAG,CAAA;aACrB,KAAK,CAAC,EAAE,CAAC,KAAK,CAAC,KAAK,CAAC,IAAI,CAAC,OAAO;mBAC3B,KAAK,CAAC,EAAE,CAAC,KAAK,CAAC,KAAK,CAAC,IAAI,CAAC,OAAO;CACnD,CAAC;AACF,eAAe,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAEhD,MAAM,UAAU,GAAG,MAAM,CAAC,EAAE,CAAA;2BACD,KAAK,CAAC,EAAE,CAAC,KAAK,CAAC,KAAK,CAAC,IAAI,CAAC,OAAO;CAC3D,CAAC;AACF,UAAU,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAE3C,eAAe;IACb,KAAK,EAAE,oCAAoC;IAC3C,SAAS,EAAE,gBAAgB;CAC5B,CAAC;AAEF,MAAM,CAAC,MAAM,cAAc,GAAG,GAAG,EAAE;IACjC,MAAM,SAAS,GAAG,OAAO,EAAE,CAAC;IAC5B,MAAM,CAAC,SAAS,EAAE,YAAY,CAAC,GAAG,QAAQ,CAAwB,GAAG,EAAE;QAErE,MAAM,aAAa,GAAG,cAAc,CAAC,OAAO,CAAC,iBAAiB,CAAC,CAAC;QAChE,IAAI,aAAa,KAAK,IAAI,EAAE;YAE1B,IAAI,aAAa,KAAK,WAAW,EAAE;gBACjC,OAAO,SAAS,CAAC;aAClB;YACD,OAAO,IAAI,CAAC,KAAK,CAAC,aAAa,CAAC,CAAC;SAClC;QACD,OAAO,aAAa,CAAC;IACvB,CAAC,CAAC,CAAC;IAEH,MAAM,gBAAgB,GAAG,OAAO,CAAC,mBAAmB,EAAE,KAAK,CAAC,CAAC,CAAC,CAAC,eAAe,CAAC,CAAC,CAAC,SAAS,CAAC;IAC3F,MAAM,WAAW,GAAG,OAAO,CAAC,uBAAuB,EAAE,KAAK,CAAC,CAAC;IAC5D,MAAM,eAAe,GAAG,OAAO,CAAC,uBAAuB,EAAE,KAAK,CAAC,CAAC;IAChE,MAAM,aAAa,GAAG,OAAO,CAAC,uBAAuB,EAAE,IAAI,CAAC,CAAC,CAAC,CAAC,iBAAiB,CAAC,CAAC,CAAC,SAAS,CAAC;IAG7F,MAAM,SAAS,GAAG,MAAM,CAAC,IAAI,CAAC,CAAC;IAC/B,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAC5C,MAAM,CAAC,SAAS,EAAE,YAAY,CAAC,GAAG,UAAU,CAAc,IAAI,CAAC,CAAC;IAChE,MAAM,WAAW,GAAG,GAAG,EAAE;QACvB,IAAI,MAAM,EAAE;YACV,SAAS,CAAC,KAAK,CAAC,CAAC;SAClB;IACH,CAAC,CAAC;IACF,aAAa,CAAC,WAAW,EAAE,CAAC,SAAS,EAAE,SAAS,CAAC,OAAO,CAAC,EAAE,WAAW,CAAC,CAAC;IACxE,MAAM,YAAY,GAAG,CAAC,CAAgB,EAAE,EAAE;QACxC,IAAI,CAAC,CAAC,GAAG,KAAK,QAAQ;YAAE,WAAW,EAAE,CAAC;IACxC,CAAC,CAAC;IAEF,MAAM,UAAU,GAAG,CACjB,CAAC,gBAAgB,CACf,MAAM,CAAC,CAAC,UAAU,CAAC,CACnB,SAAS,CAAC,CAAC,SAAS,CAAC,CACrB,gBAAgB,CAAC,CAAC,gBAAgB,CAAC,CACnC,aAAa,CAAC,CAAC,IAAI,GAAG,CAAC,CAAC,SAAS,EAAE,OAAO,EAAE,eAAe,EAAE,eAAe,CAAC,CAAC,CAAC,CAC/E,aAAa,CAAC,CAAC,aAAa,CAAC,CAC7B,WAAW,CAAC,CAAC,WAAW,CAAC,CACzB,iBAAiB,CAAC,CAAC,CAAC,CAAwB,EAAE,EAAE;YAC9C,YAAY,CAAC,CAAC,CAAC,CAAC;YAChB,WAAW,EAAE,CAAC;YACd,cAAc,CAAC,OAAO,CAAC,iBAAiB,EAAE,IAAI,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC,CAAC;QAC/D,CAAC,CAAC,EACF,CACH,CAAC;IAEF,OAAO,CACL,CAAC,UAAU,CACT,SAAS,CAAC,CAAC;YACT,IAAI,EAAE,KAAK;YACX,MAAM,EAAE,CAAC;SACV,CAAC,CAEF;MAAA,CAAC,CAAC,eAAe,IAAI,UAAU,CAE/B;;MAAA,CAAC,eAAe,IAAI,CAClB,EACE;UAAA,CAAC,MAAM,CACL,GAAG,CAAC,CAAC,SAAS,CAAC,CACf,aAAa,CACb,aAAa,CAAC,CAAC,MAAM,CAAC,CACtB,OAAO,CAAC,CAAC,GAAG,EAAE,CAAC,SAAS,CAAC,CAAC,MAAM,CAAC,CAAC,CAClC,SAAS,CAAC,CAAC,YAAY,CAAC,CAExB;;UACF,EAAE,MAAM,CAER;;UAAA,CAAC,OAAO,CACN,IAAI,CAAC,CAAC,MAAM,CAAC,CACb,GAAG,CAAC,CAAC,YAAY,CAAC,CAClB,MAAM,CAAC,CAAC,SAAS,CAAC,OAAO,CAAC,CAC1B,SAAS,CAAC,cAAc,CAExB;YAAA,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC,EAAE,GAAG,EAAE,CAAC,EAAE,CAAC,CAAC,CAAC,UAAU,CAAC,EAAE,IAAI,CACjD;UAAA,EAAE,OAAO,CACX;QAAA,GAAG,CACJ,CAED;;MAAA,CAAC,GAAG,CACF;QAAA,CAAC,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,OAAO,EAAE,IAAI,CAChC;QAAA,CAAC,eAAe,CACd;UAAA,CAAC,SAAS,CAAC,CAAC,CAAC,IAAI,CAAC,SAAS,CAAC,SAAS,EAAE,IAAI,EAAE,CAAC,CAAC,CAAC,CAAC,CAAC,gBAAgB,CACpE;QAAA,EAAE,eAAe,CACnB;MAAA,EAAE,GAAG,CAEL;;MAAA,CAAC,GAAG,CACF;QAAA,CAAC,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,iBAAiB,EAAE,IAAI,CAC1C;QAAA,CAAC,eAAe,CACd;UAAA,CAAC,SAAS,CAAC,CAAC,CAAC,eAAe,CAAC,SAAS,EAAE,UAAU,EAAE,SAAS,CAAC,CAAC,CAAC,CAAC,gBAAgB,CACnF;QAAA,EAAE,eAAe,CACnB;MAAA,EAAE,GAAG,CACP;IAAA,EAAE,UAAU,CAAC,CACd,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,kBAAkB,GAAG,GAAG,EAAE;IACrC,MAAM,SAAS,GAAG,OAAO,EAAE,CAAC;IAC5B,MAAM,CAAC,SAAS,EAAE,YAAY,CAAC,GAAG,QAAQ,CAA4B,SAAS,CAAC,CAAC;IAEjF,MAAM,gBAAgB,GAAG,OAAO,CAAC,mBAAmB,EAAE,KAAK,CAAC,CAAC,CAAC,CAAC,eAAe,CAAC,CAAC,CAAC,SAAS,CAAC;IAC3F,MAAM,eAAe,GAAG,OAAO,CAAC,uBAAuB,EAAE,KAAK,CAAC,CAAC;IAChE,MAAM,aAAa,GAAG,OAAO,CAAC,uBAAuB,EAAE,IAAI,CAAC,CAAC,CAAC,CAAC,iBAAiB,CAAC,CAAC,CAAC,SAAS,CAAC;IAG7F,MAAM,SAAS,GAAG,MAAM,CAAC,IAAI,CAAC,CAAC;IAC/B,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAC5C,MAAM,CAAC,SAAS,EAAE,YAAY,CAAC,GAAG,UAAU,CAAc,IAAI,CAAC,CAAC;IAChE,MAAM,WAAW,GAAG,GAAG,EAAE;QACvB,IAAI,MAAM,EAAE;YACV,SAAS,CAAC,KAAK,CAAC,CAAC;SAClB;IACH,CAAC,CAAC;IACF,aAAa,CAAC,WAAW,EAAE,CAAC,SAAS,EAAE,SAAS,CAAC,OAAO,CAAC,EAAE,WAAW,CAAC,CAAC;IACxE,MAAM,YAAY,GAAG,CAAC,CAAgB,EAAE,EAAE;QACxC,IAAI,CAAC,CAAC,GAAG,KAAK,QAAQ;YAAE,WAAW,EAAE,CAAC;IACxC,CAAC,CAAC;IAEF,MAAM,UAAU,GAAG,CACjB,CAAC,cAAc,CACb,WAAW,CAAC,gBAAgB,CAC5B,MAAM,CAAC,CAAC,UAAU,CAAC,CACnB,SAAS,CAAC,CAAC,SAAS,CAAC,CACrB,gBAAgB,CAAC,CAAC,gBAAgB,CAAC,CACnC,aAAa,CAAC,CAAC,IAAI,GAAG,CAAC,CAAC,SAAS,EAAE,OAAO,EAAE,eAAe,EAAE,eAAe,CAAC,CAAC,CAAC,CAC/E,aAAa,CAAC,CAAC,aAAa,CAAC,CAC7B,QAAQ,CAAC,CAAC,CAAC,CAAC,EAAE;YACZ,WAAW,EAAE,CAAC;YACd,YAAY,CAAC,CAAC,CAAC,CAAC;QAClB,CAAC,CAAC,EACF,CACH,CAAC;IAEF,OAAO,CACL,CAAC,UAAU,CACT,SAAS,CAAC,CAAC;YACT,IAAI,EAAE,2BAA2B;YACjC,YAAY,EAAE,SAAS;YACvB,UAAU,EAAE,OAAO;YACnB,MAAM,EAAE,CAAC;SACV,CAAC,CAEF;MAAA,CAAC,CAAC,eAAe,IAAI,UAAU,CAE/B;;MAAA,CAAC,eAAe,IAAI,CAClB,EACE;UAAA,CAAC,MAAM,CACL,GAAG,CAAC,CAAC,SAAS,CAAC,CACf,aAAa,CACb,aAAa,CAAC,CAAC,MAAM,CAAC,CACtB,OAAO,CAAC,CAAC,GAAG,EAAE,CAAC,SAAS,CAAC,CAAC,MAAM,CAAC,CAAC,CAClC,SAAS,CAAC,CAAC,YAAY,CAAC,CAExB;;UACF,EAAE,MAAM,CAER;;UAAA,CAAC,OAAO,CACN,IAAI,CAAC,CAAC,MAAM,CAAC,CACb,GAAG,CAAC,CAAC,YAAY,CAAC,CAClB,MAAM,CAAC,CAAC,SAAS,CAAC,OAAO,CAAC,CAC1B,SAAS,CAAC,cAAc,CAExB;YAAA,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC,EAAE,GAAG,EAAE,CAAC,EAAE,CAAC,CAAC,CAAC,UAAU,CAAC,EAAE,IAAI,CACjD;UAAA,EAAE,OAAO,CACX;QAAA,GAAG,CACJ,CAED;;MAAA,CAAC,GAAG,CACF;QAAA,CAAC,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,OAAO,EAAE,IAAI,CAChC;QAAA,CAAC,eAAe,CACd;UAAA,CAAC,SAAS,CAAC,CAAC,CAAC,IAAI,CAAC,SAAS,CAAC,SAAS,EAAE,IAAI,EAAE,CAAC,CAAC,CAAC,CAAC,CAAC,gBAAgB,CACpE;QAAA,EAAE,eAAe,CAEjB;;QAAA,CAAC,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,iBAAiB,EAAE,IAAI,CAC1C;QAAA,CAAC,eAAe,CACd;UAAA,CAAC,SAAS,CAAC,CAAC,CAAC,eAAe,CAAC,EAAE,SAAS,EAAE,EAAE,UAAU,EAAE,SAAS,CAAC,CAAC,CAAC,CAAC,gBAAgB,CACvF;QAAA,EAAE,eAAe,CACnB;MAAA,EAAE,GAAG,CACP;IAAA,EAAE,UAAU,CAAC,CACd,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,eAAe,GAAG,CACtB,iBAA0B,EAC1B,eAAwB,EACxB,oBAA6B,EAC7B,aAAmC,EACnC,EAAE;IACF,MAAM,WAAW,GAAiB,IAAI,GAAG,EAAW,CAAC;IACrD,IAAI,iBAAiB;QAAE,WAAW,CAAC,GAAG,CAAC,SAAS,CAAC,CAAC;IAClD,IAAI,eAAe;QAAE,WAAW,CAAC,GAAG,CAAC,OAAO,CAAC,CAAC;IAC9C,IAAI,aAAa;QAAE,WAAW,CAAC,GAAG,CAAC,eAAe,CAAC,CAAC;IACpD,IAAI,oBAAoB;QAAE,WAAW,CAAC,GAAG,CAAC,eAAe,CAAC,CAAC;IAC3D,OAAO,WAAW,CAAC;AACrB,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,mBAAmB,GAAG,GAAG,EAAE;IACtC,MAAM,SAAS,GAAG,OAAO,EAAE,CAAC;IAE5B,MAAM,eAAe,GAAG,OAAO,CAAC,uBAAuB,EAAE,KAAK,CAAC,CAAC;IAChE,MAAM,aAAa,GAAG,MAAM,CAAC,gBAAgB,EAAE,EAAE,MAAM,EAAE,QAAQ,EAAE,GAAG,EAAE,KAAK,EAAE,EAAE,QAAQ,CAAC,CAAC;IAC3F,MAAM,gBAAgB,GAAG,OAAO,CAAC,mBAAmB,EAAE,KAAK,CAAC,CAAC,CAAC,CAAC,eAAe,CAAC,CAAC,CAAC,SAAS,CAAC;IAC3F,MAAM,iBAAiB,GAAG,OAAO,CAAC,yBAAyB,EAAE,IAAI,CAAC,CAAC;IACnE,MAAM,eAAe,GAAG,OAAO,CAAC,uBAAuB,EAAE,IAAI,CAAC,CAAC;IAC/D,MAAM,uBAAuB,GAAG,OAAO,CAAC,gCAAgC,EAAE,IAAI,CAAC,CAAC;IAChF,MAAM,aAAa,GAAG,OAAO,CAAC,uBAAuB,EAAE,IAAI,CAAC,CAAC,CAAC,CAAC,iBAAiB,CAAC,CAAC,CAAC,SAAS,CAAC;IAC7F,MAAM,aAAa,GAAiB,eAAe,CACjD,iBAAiB,EACjB,eAAe,EACf,uBAAuB,EACvB,aAAa,CACd,CAAC;IACF,MAAM,cAAc,GAAG,OAAO,CAAC,mBAAmB,EAAE,KAAK,CAAC,CAAC;IAG3D,MAAM,CAAC,eAAe,EAAE,kBAAkB,CAAC,GAAG,QAAQ,CAA4B,SAAS,CAAC,CAAC;IAE7F,MAAM,SAAS,GAAG,MAAM,CAAC,IAAI,CAAC,CAAC;IAC/B,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAC5C,MAAM,CAAC,SAAS,EAAE,YAAY,CAAC,GAAG,UAAU,CAAc,IAAI,CAAC,CAAC;IAChE,MAAM,WAAW,GAAG,GAAG,EAAE;QACvB,IAAI,MAAM,EAAE;YACV,SAAS,CAAC,KAAK,CAAC,CAAC;SAClB;IACH,CAAC,CAAC;IACF,aAAa,CAAC,WAAW,EAAE,CAAC,SAAS,EAAE,SAAS,CAAC,OAAO,CAAC,EAAE,WAAW,CAAC,CAAC;IACxE,MAAM,YAAY,GAAG,CAAC,CAAgB,EAAE,EAAE;QACxC,IAAI,CAAC,CAAC,GAAG,KAAK,QAAQ;YAAE,WAAW,EAAE,CAAC;IACxC,CAAC,CAAC;IAGF,MAAM,CAAC,mBAAmB,EAAE,sBAAsB,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IACtE,MAAM,CAAC,SAAS,EAAE,YAAY,CAAC,GAAG,QAAQ,CAExC,GAAG,EAAE,CACH,eAAe;QACf,sBAAsB,CACpB,EAAE,KAAK,EAAE,KAAK,EAAE,EAChB,UAAU,EACV,aAAa,EACb,gBAAgB,EAChB,aAAa,CACd,CACJ,CAAC;IAEF,MAAM,gBAAgB,GAAG,GAAG,EAAE;QAC5B,sBAAsB,CAAC,KAAK,CAAC,CAAC;QAC9B,IAAI,gBAAgB,CAAC,SAAS,EAAE,UAAU,EAAE,IAAI,CAAC,EAAE;YAEjD,IAAI,eAAe;gBAAE,SAAS,CAAC,KAAK,CAAC,CAAC;YACtC,kBAAkB,CAAC,SAAS,CAAC,CAAC;SAC/B;aAAM;YACL,sBAAsB,CAAC,IAAI,CAAC,CAAC;SAC9B;IACH,CAAC,CAAC;IAEF,MAAM,kBAAkB,GAAG,CACzB,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC,EAAE,SAAS,EAAE,QAAQ,EAAE,GAAG,EAAE,CAAC,EAAE,CAAC,CAC/C;MAAA,CAAC,eAAe,CACd,SAAS,CAAC,CAAC,SAAS,CAAC,CACrB,MAAM,CAAC,CAAC,UAAU,CAAC,CACnB,cAAc,CAAC,CAAC,mBAAmB,CAAC,CACpC,gBAAgB,CAAC,CAAC,gBAAgB,CAAC,CACnC,aAAa,CAAC,CAAC,aAAa,CAAC,CAC7B,QAAQ,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC,YAAY,CAAC,CAAC,CAAC,CAAC,CAC/B,aAAa,CAAC,CAAC,aAAa,CAAC,CAC7B,cAAc,CAAC,CAAC,cAAc,CAAC,CAC/B,aAAa,CAAC,CAAC,aAAa,CAAC,EAE/B;MAAA,CAAC,MAAM,CAAC,OAAO,CAAC,SAAS,CAAC,OAAO,CAAC,CAAC,gBAAgB,CAAC,CAClD;;MACF,EAAE,MAAM,CACV;IAAA,EAAE,IAAI,CAAC,CACR,CAAC;IAEF,OAAO,CACL,CAAC,UAAU,CACT,SAAS,CAAC,CAAC;YACT,IAAI,EAAE,2BAA2B;YACjC,YAAY,EAAE,SAAS;YACvB,UAAU,EAAE,OAAO;YACnB,MAAM,EAAE,CAAC;SACV,CAAC,CAEF;MAAA,CAAC,CAAC,eAAe,IAAI,kBAAkB,CAEvC;;MAAA,CAAC,eAAe,IAAI,CAClB,EACE;UAAA,CAAC,MAAM,CACL,GAAG,CAAC,CAAC,SAAS,CAAC,CACf,aAAa,CACb,aAAa,CAAC,CAAC,MAAM,CAAC,CACtB,OAAO,CAAC,CAAC,GAAG,EAAE,CAAC,SAAS,CAAC,CAAC,MAAM,CAAC,CAAC,CAClC,SAAS,CAAC,CAAC,YAAY,CAAC,CAExB;YAAA,CAAC,GAAG,MAAM,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,MAAM,mBAAmB,CAClD;UAAA,EAAE,MAAM,CAER;;UAAA,CAAC,OAAO,CACN,IAAI,CAAC,CAAC,MAAM,CAAC,CACb,GAAG,CAAC,CAAC,YAAY,CAAC,CAClB,MAAM,CAAC,CAAC,SAAS,CAAC,OAAO,CAAC,CAC1B,SAAS,CAAC,cAAc,CAExB;YAAA,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC,EAAE,GAAG,EAAE,CAAC,EAAE,CAAC,CAAC,CAAC,kBAAkB,CAAC,EAAE,IAAI,CACzD;UAAA,EAAE,OAAO,CACX;QAAA,GAAG,CACJ,CACD;MAAA,CAAC,IAAI,CACH;QAAA,CAAC,WAAW,CACV;UAAA,CAAC,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,OAAO,EAAE,IAAI,CAChC;UAAA,CAAC,eAAe,CACd;YAAA,CAAC,eAAe,CAAC,CAAC,CAAC,IAAI,CAAC,SAAS,CAAC,eAAe,EAAE,IAAI,EAAE,CAAC,CAAC,CAAC,CAAC,CAAC,gBAAgB,CAChF;UAAA,EAAE,eAAe,CAEjB;;UAAA,CAAC,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,iBAAiB,EAAE,IAAI,CAC1C;UAAA,CAAC,eAAe,CACd;YAAA,CAAC,eAAe;YACd,CAAC,CAAC,eAAe,CAAC,EAAE,SAAS,EAAE,eAAe,EAAE,EAAE,UAAU,EAAE,SAAS,CAAC;YACxE,CAAC,CAAC,gBAAgB,CACtB;UAAA,EAAE,eAAe,CACjB;UAAA,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC,EAAE,GAAG,EAAE,CAAC,EAAE,SAAS,EAAE,QAAQ,EAAE,CAAC,CAC/C;YAAA,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC,EAAE,GAAG,EAAE,CAAC,EAAE,SAAS,EAAE,QAAQ,EAAE,CAAC,CAC/C;cAAA,CAAC,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,MAAM,CAAC,OAAO,CAC/B;;cACF,EAAE,IAAI,CACN;cAAA,CAAC,IAAI,CACH;6EAA6D,CAAC,CAAC,CAAC,OAAO,EAAE,CAAC,CAAE;;6DAE/B,CAAC,CAAC,CAAC,MAAM,EAAE,CAAC,CAAE;;;cAG7D,EAAE,IAAI,CACR;YAAA,EAAE,IAAI,CACN;YAAA,CAAC,UAAU,CACT;cAAA,CAAC,EAAE,CACD;gFAAgE,CAAC,CAAC,CAAC,YAAY,EAAE,CAAC,CAAC,CAAC,GAAG,CACvF;;cACF,EAAE,EAAE,CACJ;cAAA,CAAC,EAAE,CACD;+EAA+D,CAAC,CAAC,CAAC,YAAY,EAAE,CAAC,CAAE;;cAErF,EAAE,EAAE,CACN;YAAA,EAAE,UAAU,CACZ;YAAA,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC,EAAE,SAAS,EAAE,QAAQ,EAAE,CAAC,CACvC;cAAA,CAAC,IAAI,CACH;;iEACiD,CAAC,CAAC,CAAC,gBAAgB,EAAE,CAAC,CAAE;cAC3E,EAAE,IAAI,CACR;YAAA,EAAE,IAAI,CACR;UAAA,EAAE,IAAI,CACR;QAAA,EAAE,WAAW,CACf;MAAA,EAAE,IAAI,CACR;IAAA,EAAE,UAAU,CAAC,CACd,CAAC;AACJ,CAAC,CAAC","sourcesContent":["/* eslint-disable react/no-unescaped-entities */\nimport { useRef, useState } from 'react';\nimport styled from 'styled-components';\nimport { boolean, select } from '@storybook/addon-knobs';\n\nimport {\n  Card,\n  CardContent,\n  Text,\n  Grid,\n  Button,\n  defaultThemeProp,\n  Popover,\n  useElement,\n  useOuterEvent,\n  Flex,\n  useI18n\n} from '@pega/cosmos-react-core';\nimport {\n  ConditionBuilder,\n  FieldCondition,\n  AtomicCondition,\n  getInitConditionForLhs,\n  isValidCondition,\n  Condition,\n  DateFunctionsByType,\n  LeafCondition,\n  formatCondition,\n  RHSType\n} from '@pega/cosmos-react-condition-builder';\n\nimport { demoFields, demoCondition, demoComparators, demoDateFunctions } from './props.mock';\n\nconst StyledGrid = styled(Grid)`\n  max-width: 60rem;\n`;\n\nconst StyledCodeBlock = styled.pre`\n  padding: ${props => props.theme.base.spacing};\n  margin-bottom: ${props => props.theme.base.spacing};\n`;\nStyledCodeBlock.defaultProps = defaultThemeProp;\n\nconst StyledList = styled.ul`\n  padding-left: calc(4 * ${props => props.theme.base.spacing});\n`;\nStyledList.defaultProps = defaultThemeProp;\n\nexport default {\n  title: 'Condition Builder/ConditionBuilder',\n  component: ConditionBuilder\n};\n\nexport const DefaultBuilder = () => {\n  const translate = useI18n();\n  const [condition, setCondition] = useState<Condition | undefined>(() => {\n    // If a previous condition exists on the session, use it\n    const prevCondition = sessionStorage.getItem('CBDemoCondition');\n    if (prevCondition !== null) {\n      // If an empty condition was submitted previously, start with an empty one\n      if (prevCondition === 'undefined') {\n        return undefined;\n      }\n      return JSON.parse(prevCondition);\n    }\n    return demoCondition;\n  });\n\n  const validComparators = boolean('Limit Comparators', false) ? demoComparators : undefined;\n  const disallowNOT = boolean('Disallow NOT operator', false);\n  const renderInPopover = boolean('Render inside Popover', false);\n  const dateFunctions = boolean('Enable Date functions', true) ? demoDateFunctions : undefined;\n\n  // Set up content for rendering inside a Popover\n  const buttonRef = useRef(null); // Ref for the opener button\n  const [isOpen, setIsOpen] = useState(false);\n  const [popoverEl, setPopoverEl] = useElement<HTMLElement>(null);\n  const hidePopover = () => {\n    if (isOpen) {\n      setIsOpen(false);\n    }\n  };\n  useOuterEvent('mousedown', [popoverEl, buttonRef.current], hidePopover); // Call the method on clicking outside these elements\n  const hideOnEscape = (e: KeyboardEvent) => {\n    if (e.key === 'Escape') hidePopover(); // Call the method when Escape key is pressed\n  };\n\n  const builderJsx = (\n    <ConditionBuilder\n      fields={demoFields}\n      condition={condition}\n      validComparators={validComparators}\n      validRhsTypes={new Set(['LITERAL', 'FIELD', 'DATE_FUNCTION', 'RELATIVE_DATE'])}\n      dateFunctions={dateFunctions}\n      disallowNOT={disallowNOT}\n      onConditionSubmit={(c: Condition | undefined) => {\n        setCondition(c);\n        hidePopover();\n        sessionStorage.setItem('CBDemoCondition', JSON.stringify(c)); // Persist on sessionStorage for the next time\n      }}\n    />\n  );\n\n  return (\n    <StyledGrid\n      container={{\n        cols: '1fr',\n        rowGap: 3\n      }}\n    >\n      {!renderInPopover && builderJsx}\n\n      {renderInPopover && (\n        <>\n          <Button\n            ref={buttonRef}\n            aria-haspopup\n            aria-expanded={isOpen}\n            onClick={() => setIsOpen(!isOpen)}\n            onKeyDown={hideOnEscape}\n          >\n            Open Condition builder\n          </Button>\n\n          <Popover\n            show={isOpen}\n            ref={setPopoverEl}\n            target={buttonRef.current}\n            placement='bottom-start'\n          >\n            <Flex container={{ pad: 1 }}>{builderJsx}</Flex>\n          </Popover>\n        </>\n      )}\n\n      <div>\n        <Text variant='h4'>Output:</Text>\n        <StyledCodeBlock>\n          {condition ? JSON.stringify(condition, null, 2) : '(No condition)'}\n        </StyledCodeBlock>\n      </div>\n\n      <div>\n        <Text variant='h4'>Formatted Output:</Text>\n        <StyledCodeBlock>\n          {condition ? formatCondition(condition, demoFields, translate) : '(No condition)'}\n        </StyledCodeBlock>\n      </div>\n    </StyledGrid>\n  );\n};\n\nexport const FieldConditionDemo = () => {\n  const translate = useI18n();\n  const [condition, setCondition] = useState<LeafCondition | undefined>(undefined);\n\n  const validComparators = boolean('Limit Comparators', false) ? demoComparators : undefined;\n  const renderInPopover = boolean('Render inside Popover', false);\n  const dateFunctions = boolean('Enable Date functions', true) ? demoDateFunctions : undefined;\n\n  // Set up content for rendering inside a Popover\n  const buttonRef = useRef(null); // Ref for the opener button\n  const [isOpen, setIsOpen] = useState(false);\n  const [popoverEl, setPopoverEl] = useElement<HTMLElement>(null);\n  const hidePopover = () => {\n    if (isOpen) {\n      setIsOpen(false);\n    }\n  };\n  useOuterEvent('mousedown', [popoverEl, buttonRef.current], hidePopover); // Call the method on clicking outside these elements\n  const hideOnEscape = (e: KeyboardEvent) => {\n    if (e.key === 'Escape') hidePopover(); // Call the method when Escape key is pressed\n  };\n\n  const builderJsx = (\n    <FieldCondition\n      targetField='lastActivityAt'\n      fields={demoFields}\n      condition={condition}\n      validComparators={validComparators}\n      validRhsTypes={new Set(['LITERAL', 'FIELD', 'DATE_FUNCTION', 'RELATIVE_DATE'])}\n      dateFunctions={dateFunctions}\n      onSubmit={c => {\n        hidePopover();\n        setCondition(c);\n      }}\n    />\n  );\n\n  return (\n    <StyledGrid\n      container={{\n        cols: 'repeat(2, minmax(0, 1fr))',\n        justifyItems: 'stretch',\n        alignItems: 'start',\n        colGap: 4\n      }}\n    >\n      {!renderInPopover && builderJsx}\n\n      {renderInPopover && (\n        <>\n          <Button\n            ref={buttonRef}\n            aria-haspopup\n            aria-expanded={isOpen}\n            onClick={() => setIsOpen(!isOpen)}\n            onKeyDown={hideOnEscape}\n          >\n            Open Condition builder\n          </Button>\n\n          <Popover\n            show={isOpen}\n            ref={setPopoverEl}\n            target={buttonRef.current}\n            placement='bottom-start'\n          >\n            <Flex container={{ pad: 1 }}>{builderJsx}</Flex>\n          </Popover>\n        </>\n      )}\n\n      <div>\n        <Text variant='h4'>Output:</Text>\n        <StyledCodeBlock>\n          {condition ? JSON.stringify(condition, null, 2) : '(No condition)'}\n        </StyledCodeBlock>\n\n        <Text variant='h4'>Formatted Output:</Text>\n        <StyledCodeBlock>\n          {condition ? formatCondition({ condition }, demoFields, translate) : '(No condition)'}\n        </StyledCodeBlock>\n      </div>\n    </StyledGrid>\n  );\n};\n\nconst convertRhsTypes = (\n  useLiteralRHSType: boolean,\n  useFieldRHSType: boolean,\n  useRelativeDatesType: boolean,\n  dateFunctions?: DateFunctionsByType\n) => {\n  const setRhsTypes: Set<RHSType> = new Set<RHSType>();\n  if (useLiteralRHSType) setRhsTypes.add('LITERAL');\n  if (useFieldRHSType) setRhsTypes.add('FIELD');\n  if (dateFunctions) setRhsTypes.add('DATE_FUNCTION');\n  if (useRelativeDatesType) setRhsTypes.add('RELATIVE_DATE');\n  return setRhsTypes;\n};\n\nexport const AtomicConditionDemo = () => {\n  const translate = useI18n();\n  // Storybook knobs for configuration\n  const renderInPopover = boolean('Render inside Popover', false);\n  const itemDirection = select('Item Direction', { Column: 'column', Row: 'row' }, 'column');\n  const validComparators = boolean('Limit Comparators', false) ? demoComparators : undefined;\n  const useLiteralRHSType = boolean('Enable Literal RHS Type', true);\n  const useFieldRHSType = boolean('Enable Field RHS Type', true);\n  const useRelativeDatesRHSType = boolean('Enable Relative Dates RHS Type', true);\n  const dateFunctions = boolean('Enable Date functions', true) ? demoDateFunctions : undefined;\n  const validRHSTypes: Set<RHSType> = convertRhsTypes(\n    useLiteralRHSType,\n    useFieldRHSType,\n    useRelativeDatesRHSType,\n    dateFunctions\n  );\n  const showLhsAsLabel = boolean('Show LHS as Label', false);\n\n  // Story State object to simulate \"submitting\"\n  const [submitCondition, setSubmitCondition] = useState<LeafCondition | undefined>(undefined);\n  // State needed to use Popover in Story\n  const buttonRef = useRef(null); // Ref for the opener button\n  const [isOpen, setIsOpen] = useState(false);\n  const [popoverEl, setPopoverEl] = useElement<HTMLElement>(null);\n  const hidePopover = () => {\n    if (isOpen) {\n      setIsOpen(false);\n    }\n  };\n  useOuterEvent('mousedown', [popoverEl, buttonRef.current], hidePopover); // Call the method on clicking outside these elements\n  const hideOnEscape = (e: KeyboardEvent) => {\n    if (e.key === 'Escape') hidePopover(); // Call the method when Escape key is pressed\n  };\n\n  // State handling needed to manage/use the AtomicCondition component\n  const [showErrorIndicators, setShowErrorIndicators] = useState(false);\n  const [condition, setCondition] = useState(\n    // If editing use the seedCondition, otherwise, determine an initial condition based on the targetField\n    () =>\n      submitCondition ||\n      getInitConditionForLhs(\n        { field: 'age' },\n        demoFields,\n        validRHSTypes,\n        validComparators,\n        dateFunctions\n      )\n  );\n\n  const handleSubmission = () => {\n    setShowErrorIndicators(false);\n    if (isValidCondition(condition, demoFields, true)) {\n      // Insert all \"submit\" logic to use the valid condition that you've created.\n      if (renderInPopover) setIsOpen(false);\n      setSubmitCondition(condition);\n    } else {\n      setShowErrorIndicators(true);\n    }\n  };\n\n  const atomicConditionJSX = (\n    <Flex container={{ direction: 'column', gap: 2 }}>\n      <AtomicCondition\n        condition={condition}\n        fields={demoFields}\n        indicateErrors={showErrorIndicators}\n        validComparators={validComparators}\n        dateFunctions={dateFunctions}\n        onChange={c => setCondition(c)}\n        itemDirection={itemDirection}\n        showLhsAsLabel={showLhsAsLabel}\n        validRhsTypes={validRHSTypes}\n      />\n      <Button variant='primary' onClick={handleSubmission}>\n        Submit Condition\n      </Button>\n    </Flex>\n  );\n\n  return (\n    <StyledGrid\n      container={{\n        cols: 'repeat(2, minmax(0, 1fr))',\n        justifyItems: 'stretch',\n        alignItems: 'start',\n        colGap: 4\n      }}\n    >\n      {!renderInPopover && atomicConditionJSX}\n\n      {renderInPopover && (\n        <>\n          <Button\n            ref={buttonRef}\n            aria-haspopup\n            aria-expanded={isOpen}\n            onClick={() => setIsOpen(!isOpen)}\n            onKeyDown={hideOnEscape}\n          >\n            {`${isOpen ? 'Close' : 'Open'} Atomic Condition`}\n          </Button>\n\n          <Popover\n            show={isOpen}\n            ref={setPopoverEl}\n            target={buttonRef.current}\n            placement='bottom-start'\n          >\n            <Flex container={{ pad: 1 }}>{atomicConditionJSX}</Flex>\n          </Popover>\n        </>\n      )}\n      <Card>\n        <CardContent>\n          <Text variant='h4'>Output:</Text>\n          <StyledCodeBlock>\n            {submitCondition ? JSON.stringify(submitCondition, null, 2) : '(No condition)'}\n          </StyledCodeBlock>\n\n          <Text variant='h4'>Formatted Output:</Text>\n          <StyledCodeBlock>\n            {submitCondition\n              ? formatCondition({ condition: submitCondition }, demoFields, translate)\n              : '(No condition)'}\n          </StyledCodeBlock>\n          <Flex container={{ gap: 1, direction: 'column' }}>\n            <Flex container={{ gap: 1, direction: 'column' }}>\n              <Text variant='h2' status='error'>\n                validRhsTypes Prop Warning\n              </Text>\n              <Text>\n                There are LHS(Left Hand Side Field)/Comparator pairings that <u>require</u> specific\n                RHS(Right Hand Side Value) types. Please be mindful of these incompatibilities when\n                limiting RHS value types using this prop. We <b>do not</b> support limiting RHS\n                field types to incompatible types and it will result in a validation error if you do\n                so. The pairings referred to here are as follows:\n              </Text>\n            </Flex>\n            <StyledList>\n              <li>\n                BOOLEAN LHS Fields coupled with \"EQ\" or \"NEQ\" comparators, will <u>always yield</u>{' '}\n                a Field RHS\n              </li>\n              <li>\n                Any LHS Fields coupled with \"IN\" or \"NOT_IN\" comparators, will <u>always yield</u> a\n                Literal RHS (Comma separated list)\n              </li>\n            </StyledList>\n            <Flex container={{ direction: 'column' }}>\n              <Text>\n                If you would like to limit RHS value types and avoid these incompatibilities, you\n                will need to exclude these comparators using the <b>validComparators</b> prop.\n              </Text>\n            </Flex>\n          </Flex>\n        </CardContent>\n      </Card>\n    </StyledGrid>\n  );\n};\n"]}
+{"version":3,"file":"ConditionBuilder.stories.jsx","sourceRoot":"","sources":["../../../src/condition-builder/ConditionBuilder/ConditionBuilder.stories.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAGzC,OAAO,EACL,IAAI,EACJ,WAAW,EACX,IAAI,EACJ,MAAM,EACN,OAAO,EACP,UAAU,EACV,aAAa,EACb,IAAI,EACJ,OAAO,EACR,MAAM,yBAAyB,CAAC;AACjC,OAAO,EACL,gBAAgB,EAChB,cAAc,EACd,eAAe,EACf,sBAAsB,EACtB,gBAAgB,EAGhB,eAAe,EAEhB,MAAM,sCAAsC,CAAC;AAI9C,OAAO,EAAE,UAAU,EAAE,aAAa,EAAE,eAAe,EAAE,iBAAiB,EAAE,MAAM,cAAc,CAAC;AAC7F,OAAO,EAAE,eAAe,EAAE,UAAU,EAAE,UAAU,EAAE,MAAM,2BAA2B,CAAC;AACpF,OAAO,EAAE,eAAe,EAAE,MAAM,0BAA0B,CAAC;AAE3D,eAAe;IACb,KAAK,EAAE,oCAAoC;IAC3C,SAAS,EAAE,gBAAgB;CACpB,CAAC;AAeV,MAAM,CAAC,MAAM,cAAc,GAAsC,CAC/D,IAAgC,EAChC,EAAE;IACF,MAAM,SAAS,GAAG,OAAO,EAAE,CAAC;IAC5B,MAAM,CAAC,SAAS,EAAE,YAAY,CAAC,GAAG,QAAQ,CAAwB,GAAG,EAAE;QAErE,MAAM,aAAa,GAAG,cAAc,CAAC,OAAO,CAAC,iBAAiB,CAAC,CAAC;QAChE,IAAI,aAAa,KAAK,IAAI,EAAE;YAE1B,IAAI,aAAa,KAAK,WAAW,EAAE;gBACjC,OAAO,SAAS,CAAC;aAClB;YACD,OAAO,IAAI,CAAC,KAAK,CAAC,aAAa,CAAC,CAAC;SAClC;QACD,OAAO,aAAa,CAAC;IACvB,CAAC,CAAC,CAAC;IAGH,MAAM,SAAS,GAAG,MAAM,CAAC,IAAI,CAAC,CAAC;IAC/B,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAC5C,MAAM,CAAC,SAAS,EAAE,YAAY,CAAC,GAAG,UAAU,CAAc,IAAI,CAAC,CAAC;IAChE,MAAM,WAAW,GAAG,GAAG,EAAE;QACvB,IAAI,MAAM,EAAE;YACV,SAAS,CAAC,KAAK,CAAC,CAAC;SAClB;IACH,CAAC,CAAC;IAEF,aAAa,CAAC,WAAW,EAAE,CAAC,SAAS,EAAE,SAAS,CAAC,OAAO,CAAC,EAAE,WAAW,CAAC,CAAC;IACxE,MAAM,YAAY,GAAG,CAAC,CAAgB,EAAE,EAAE;QACxC,IAAI,CAAC,CAAC,GAAG,KAAK,QAAQ;YAAE,WAAW,EAAE,CAAC;IACxC,CAAC,CAAC;IAEF,MAAM,MAAM,GAAG,MAAM,CAA8B,IAAI,CAAC,CAAC;IAEzD,MAAM,UAAU,GAAG,CACjB,EACE;MAAA,CAAC,gBAAgB,CACf,MAAM,CAAC,CAAC,UAAU,CAAC,CACnB,SAAS,CAAC,CAAC,SAAS,CAAC,CACrB,gBAAgB,CAAC,CAAC,IAAI,CAAC,gBAAgB,CAAC,CAAC,CAAC,eAAe,CAAC,CAAC,CAAC,SAAS,CAAC,CACtE,aAAa,CAAC,CAAC,IAAI,GAAG,CAAC,CAAC,SAAS,EAAE,OAAO,EAAE,eAAe,EAAE,eAAe,EAAE,WAAW,CAAC,CAAC,CAAC,CAC5F,aAAa,CAAC,CAAC,IAAI,CAAC,aAAa,CAAC,CAAC,CAAC,iBAAiB,CAAC,CAAC,CAAC,SAAS,CAAC,CAClE,WAAW,CAAC,CAAC,IAAI,CAAC,WAAW,CAAC,CAC9B,MAAM,CAAC,CAAC,MAAM,CAAC,EAEjB;MAAA,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC,EAAE,OAAO,EAAE,KAAK,EAAE,CAAC,CAClC;QAAA,CAAC,MAAM,CACL,OAAO,CAAC,SAAS,CACjB,OAAO,CAAC,CAAC,GAAG,EAAE;YACZ,IAAI,MAAM,EAAE,OAAO,EAAE;gBACnB,MAAM,CAAC,KAAK,EAAE,YAAY,CAAC,GAAG,MAAM,CAAC,OAAO,CAAC,YAAY,EAAE,CAAC;gBAC5D,IAAI,KAAK,EAAE;oBACT,YAAY,CAAC,YAAY,CAAC,CAAC;oBAC3B,WAAW,EAAE,CAAC;oBACd,cAAc,CAAC,OAAO,CAAC,iBAAiB,EAAE,IAAI,CAAC,SAAS,CAAC,YAAY,CAAC,CAAC,CAAC;iBACzE;aACF;QACH,CAAC,CAAC,CAEF;;QACF,EAAE,MAAM,CACV;MAAA,EAAE,IAAI,CACR;IAAA,GAAG,CACJ,CAAC;IAEF,OAAO,CACL,CAAC,UAAU,CACT,SAAS,CAAC,CAAC;YACT,IAAI,EAAE,KAAK;YACX,MAAM,EAAE,CAAC;SACV,CAAC,CAEF;MAAA,CAAC,CAAC,IAAI,CAAC,eAAe,IAAI,UAAU,CAEpC;;MAAA,CAAC,IAAI,CAAC,eAAe,IAAI,CACvB,EACE;UAAA,CAAC,MAAM,CACL,GAAG,CAAC,CAAC,SAAS,CAAC,CACf,aAAa,CACb,aAAa,CAAC,CAAC,MAAM,CAAC,CACtB,OAAO,CAAC,CAAC,GAAG,EAAE,CAAC,SAAS,CAAC,CAAC,MAAM,CAAC,CAAC,CAClC,SAAS,CAAC,CAAC,YAAY,CAAC,CAExB;;UACF,EAAE,MAAM,CAER;;UAAA,CAAC,OAAO,CACN,IAAI,CAAC,CAAC,MAAM,CAAC,CACb,GAAG,CAAC,CAAC,YAAY,CAAC,CAClB,MAAM,CAAC,CAAC,SAAS,CAAC,OAAO,CAAC,CAC1B,SAAS,CAAC,cAAc,CAExB;YAAA,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC,EAAE,GAAG,EAAE,CAAC,EAAE,SAAS,EAAE,QAAQ,EAAE,CAAC,CAAC,CAAC,UAAU,CAAC,EAAE,IAAI,CACtE;UAAA,EAAE,OAAO,CACX;QAAA,GAAG,CACJ,CAED;;MAAA,CAAC,GAAG,CACF;QAAA,CAAC,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,OAAO,EAAE,IAAI,CAChC;QAAA,CAAC,eAAe,CACd;UAAA,CAAC,SAAS,CAAC,CAAC,CAAC,IAAI,CAAC,SAAS,CAAC,SAAS,EAAE,IAAI,EAAE,CAAC,CAAC,CAAC,CAAC,CAAC,gBAAgB,CACpE;QAAA,EAAE,eAAe,CACnB;MAAA,EAAE,GAAG,CAEL;;MAAA,CAAC,GAAG,CACF;QAAA,CAAC,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,iBAAiB,EAAE,IAAI,CAC1C;QAAA,CAAC,eAAe,CACd;UAAA,CAAC,SAAS,CAAC,CAAC,CAAC,eAAe,CAAC,SAAS,EAAE,UAAU,EAAE,SAAS,CAAC,CAAC,CAAC,CAAC,gBAAgB,CACnF;QAAA,EAAE,eAAe,CACnB;MAAA,EAAE,GAAG,CACP;IAAA,EAAE,UAAU,CAAC,CACd,CAAC;AACJ,CAAC,CAAC;AAEF,cAAc,CAAC,IAAI,GAAG;IACpB,gBAAgB,EAAE,KAAK;IACvB,WAAW,EAAE,KAAK;IAClB,eAAe,EAAE,KAAK;IACtB,aAAa,EAAE,IAAI;CACpB,CAAC;AAEF,cAAc,CAAC,QAAQ,GAAG;IACxB,gBAAgB,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE,EAAE;IAClD,WAAW,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE,EAAE;IAC7C,eAAe,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE,EAAE;IACjD,aAAa,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE,EAAE;CAChD,CAAC;AAEF,MAAM,CAAC,MAAM,kBAAkB,GAAsC,CACnE,IAAgC,EAChC,EAAE;IACF,MAAM,SAAS,GAAG,OAAO,EAAE,CAAC;IAC5B,MAAM,CAAC,SAAS,EAAE,YAAY,CAAC,GAAG,QAAQ,CAA4B,SAAS,CAAC,CAAC;IAGjF,MAAM,SAAS,GAAG,MAAM,CAAC,IAAI,CAAC,CAAC;IAC/B,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAC5C,MAAM,CAAC,SAAS,EAAE,YAAY,CAAC,GAAG,UAAU,CAAc,IAAI,CAAC,CAAC;IAChE,MAAM,WAAW,GAAG,GAAG,EAAE;QACvB,IAAI,MAAM,EAAE;YACV,SAAS,CAAC,KAAK,CAAC,CAAC;SAClB;IACH,CAAC,CAAC;IACF,aAAa,CAAC,WAAW,EAAE,CAAC,SAAS,EAAE,SAAS,CAAC,OAAO,CAAC,EAAE,WAAW,CAAC,CAAC;IACxE,MAAM,YAAY,GAAG,CAAC,CAAgB,EAAE,EAAE;QACxC,IAAI,CAAC,CAAC,GAAG,KAAK,QAAQ;YAAE,WAAW,EAAE,CAAC;IACxC,CAAC,CAAC;IAEF,MAAM,MAAM,GAAG,MAAM,CAA4B,IAAI,CAAC,CAAC;IAEvD,MAAM,UAAU,GAAG,CACjB,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC,EAAE,SAAS,EAAE,QAAQ,EAAE,GAAG,EAAE,CAAC,EAAE,CAAC,CAC/C;MAAA,CAAC,cAAc,CACb,WAAW,CAAC,iCAAiC,CAC7C,MAAM,CAAC,CAAC,UAAU,CAAC,CACnB,SAAS,CAAC,CAAC,SAAS,CAAC,CACrB,gBAAgB,CAAC,CAAC,IAAI,CAAC,gBAAgB,CAAC,CAAC,CAAC,eAAe,CAAC,CAAC,CAAC,SAAS,CAAC,CACtE,aAAa,CAAC,CAAC,IAAI,GAAG,CAAC,CAAC,SAAS,EAAE,OAAO,EAAE,eAAe,EAAE,eAAe,CAAC,CAAC,CAAC,CAC/E,aAAa,CAAC,CAAC,IAAI,CAAC,aAAa,CAAC,CAAC,CAAC,iBAAiB,CAAC,CAAC,CAAC,SAAS,CAAC,CAClE,MAAM,CAAC,CAAC,MAAM,CAAC,EAGjB;;MAAA,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC,EAAE,OAAO,EAAE,KAAK,EAAE,CAAC,CAClC;QAAA,CAAC,MAAM,CACL,IAAI,CAAC,wBAAwB,CAC7B,OAAO,CAAC,SAAS,CACjB,OAAO,CAAC,CAAC,GAAG,EAAE;YACZ,IAAI,CAAC,MAAM,CAAC,OAAO;gBAAE,OAAO;YAE5B,MAAM,CAAC,OAAO,EAAE,CAAC,CAAC,GAAG,MAAM,CAAC,OAAO,CAAC,YAAY,EAAE,CAAC;YACnD,IAAI,CAAC,OAAO;gBAAE,OAAO;YAErB,WAAW,EAAE,CAAC;YACd,YAAY,CAAC,CAAC,CAAC,CAAC;QAClB,CAAC,CAAC,CAEF;;QACF,EAAE,MAAM,CACV;MAAA,EAAE,IAAI,CACR;IAAA,EAAE,IAAI,CAAC,CACR,CAAC;IAEF,OAAO,CACL,CAAC,UAAU,CACT,SAAS,CAAC,CAAC;YACT,IAAI,EAAE,2BAA2B;YACjC,YAAY,EAAE,SAAS;YACvB,UAAU,EAAE,OAAO;YACnB,MAAM,EAAE,CAAC;SACV,CAAC,CAEF;MAAA,CAAC,CAAC,IAAI,CAAC,eAAe,IAAI,UAAU,CAEpC;;MAAA,CAAC,IAAI,CAAC,eAAe,IAAI,CACvB,EACE;UAAA,CAAC,MAAM,CACL,GAAG,CAAC,CAAC,SAAS,CAAC,CACf,aAAa,CACb,aAAa,CAAC,CAAC,MAAM,CAAC,CACtB,OAAO,CAAC,CAAC,GAAG,EAAE,CAAC,SAAS,CAAC,CAAC,MAAM,CAAC,CAAC,CAClC,SAAS,CAAC,CAAC,YAAY,CAAC,CAExB;;UACF,EAAE,MAAM,CAER;;UAAA,CAAC,OAAO,CACN,IAAI,CAAC,CAAC,MAAM,CAAC,CACb,GAAG,CAAC,CAAC,YAAY,CAAC,CAClB,MAAM,CAAC,CAAC,SAAS,CAAC,OAAO,CAAC,CAC1B,SAAS,CAAC,cAAc,CAExB;YAAA,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC,EAAE,GAAG,EAAE,CAAC,EAAE,CAAC,CAAC,CAAC,UAAU,CAAC,EAAE,IAAI,CACjD;UAAA,EAAE,OAAO,CACX;QAAA,GAAG,CACJ,CAED;;MAAA,CAAC,GAAG,CACF;QAAA,CAAC,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,OAAO,EAAE,IAAI,CAChC;QAAA,CAAC,eAAe,CACd;UAAA,CAAC,SAAS,CAAC,CAAC,CAAC,IAAI,CAAC,SAAS,CAAC,SAAS,EAAE,IAAI,EAAE,CAAC,CAAC,CAAC,CAAC,CAAC,gBAAgB,CACpE;QAAA,EAAE,eAAe,CAEjB;;QAAA,CAAC,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,iBAAiB,EAAE,IAAI,CAC1C;QAAA,CAAC,eAAe,CACd;UAAA,CAAC,SAAS,CAAC,CAAC,CAAC,eAAe,CAAC,EAAE,SAAS,EAAE,EAAE,UAAU,EAAE,SAAS,CAAC,CAAC,CAAC,CAAC,gBAAgB,CACvF;QAAA,EAAE,eAAe,CACnB;MAAA,EAAE,GAAG,CACP;IAAA,EAAE,UAAU,CAAC,CACd,CAAC;AACJ,CAAC,CAAC;AAEF,kBAAkB,CAAC,IAAI,GAAG;IACxB,gBAAgB,EAAE,KAAK;IACvB,eAAe,EAAE,KAAK;IACtB,aAAa,EAAE,IAAI;CACpB,CAAC;AAEF,kBAAkB,CAAC,QAAQ,GAAG;IAC5B,gBAAgB,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE,EAAE;IAClD,eAAe,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE,EAAE;IACjD,aAAa,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE,EAAE;CAChD,CAAC;AAEF,MAAM,CAAC,MAAM,mBAAmB,GAAsC,CACpE,IAAgC,EAChC,EAAE;IACF,MAAM,SAAS,GAAG,OAAO,EAAE,CAAC;IAE5B,MAAM,aAAa,GAAiB,eAAe,CACjD,CAAC,CAAC,IAAI,CAAC,iBAAiB,EACxB,CAAC,CAAC,IAAI,CAAC,eAAe,EACtB,CAAC,CAAC,IAAI,CAAC,uBAAuB,EAC9B,CAAC,CAAC,IAAI,CAAC,mBAAmB,EAC1B,IAAI,CAAC,aAAa,CAAC,CAAC,CAAC,iBAAiB,CAAC,CAAC,CAAC,SAAS,CACnD,CAAC;IAGF,MAAM,CAAC,eAAe,EAAE,kBAAkB,CAAC,GAAG,QAAQ,CAA4B,SAAS,CAAC,CAAC;IAE7F,MAAM,SAAS,GAAG,MAAM,CAAC,IAAI,CAAC,CAAC;IAC/B,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAC5C,MAAM,CAAC,SAAS,EAAE,YAAY,CAAC,GAAG,UAAU,CAAc,IAAI,CAAC,CAAC;IAChE,MAAM,WAAW,GAAG,GAAG,EAAE;QACvB,IAAI,MAAM,EAAE;YACV,SAAS,CAAC,KAAK,CAAC,CAAC;SAClB;IACH,CAAC,CAAC;IACF,aAAa,CAAC,WAAW,EAAE,CAAC,SAAS,EAAE,SAAS,CAAC,OAAO,CAAC,EAAE,WAAW,CAAC,CAAC;IACxE,MAAM,YAAY,GAAG,CAAC,CAAgB,EAAE,EAAE;QACxC,IAAI,CAAC,CAAC,GAAG,KAAK,QAAQ;YAAE,WAAW,EAAE,CAAC;IACxC,CAAC,CAAC;IAGF,MAAM,CAAC,mBAAmB,EAAE,sBAAsB,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IACtE,MAAM,CAAC,SAAS,EAAE,YAAY,CAAC,GAAG,QAAQ,CAExC,GAAG,EAAE,CACH,eAAe;QACf,sBAAsB,CACpB,EAAE,KAAK,EAAE,aAAa,EAAE,EACxB,UAAU,EACV,aAAa,EACb,IAAI,CAAC,gBAAgB,CAAC,CAAC,CAAC,eAAe,CAAC,CAAC,CAAC,SAAS,EACnD,IAAI,CAAC,aAAa,CAAC,CAAC,CAAC,iBAAiB,CAAC,CAAC,CAAC,SAAS,CACnD,CACJ,CAAC;IAEF,MAAM,gBAAgB,GAAG,GAAG,EAAE;QAC5B,sBAAsB,CAAC,KAAK,CAAC,CAAC;QAC9B,IAAI,gBAAgB,CAAC,SAAS,EAAE,UAAU,EAAE,IAAI,CAAC,EAAE;YAEjD,IAAI,IAAI,CAAC,eAAe;gBAAE,SAAS,CAAC,KAAK,CAAC,CAAC;YAC3C,kBAAkB,CAAC,SAAS,CAAC,CAAC;SAC/B;aAAM;YACL,sBAAsB,CAAC,IAAI,CAAC,CAAC;SAC9B;IACH,CAAC,CAAC;IAEF,MAAM,kBAAkB,GAAG,CACzB,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC,EAAE,SAAS,EAAE,QAAQ,EAAE,GAAG,EAAE,CAAC,EAAE,CAAC,CAC/C;MAAA,CAAC,eAAe,CACd,SAAS,CAAC,CAAC,SAAS,CAAC,CACrB,MAAM,CAAC,CAAC,UAAU,CAAC,CACnB,cAAc,CAAC,CAAC,mBAAmB,CAAC,CACpC,gBAAgB,CAAC,CAAC,IAAI,CAAC,gBAAgB,CAAC,CAAC,CAAC,eAAe,CAAC,CAAC,CAAC,SAAS,CAAC,CACtE,aAAa,CAAC,CAAC,IAAI,CAAC,aAAa,CAAC,CAAC,CAAC,iBAAiB,CAAC,CAAC,CAAC,SAAS,CAAC,CAClE,QAAQ,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC,YAAY,CAAC,CAAC,CAAC,CAAC,CAC/B,aAAa,CAAC,CAAC,IAAI,CAAC,aAAa,CAAC,CAClC,OAAO,CAAC,CAAC,IAAI,CAAC,OAAO,CAAC,CACtB,aAAa,CAAC,CAAC,aAAa,CAAC,EAE/B;MAAA,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC,EAAE,OAAO,EAAE,KAAK,EAAE,CAAC,CAClC;QAAA,CAAC,MAAM,CAAC,OAAO,CAAC,SAAS,CAAC,OAAO,CAAC,CAAC,gBAAgB,CAAC,CAClD;;QACF,EAAE,MAAM,CACV;MAAA,EAAE,IAAI,CACR;IAAA,EAAE,IAAI,CAAC,CACR,CAAC;IAEF,OAAO,CACL,CAAC,UAAU,CACT,SAAS,CAAC,CAAC;YACT,IAAI,EAAE,2BAA2B;YACjC,YAAY,EAAE,SAAS;YACvB,UAAU,EAAE,OAAO;YACnB,MAAM,EAAE,CAAC;SACV,CAAC,CAEF;MAAA,CAAC,CAAC,IAAI,CAAC,eAAe,IAAI,kBAAkB,CAE5C;;MAAA,CAAC,IAAI,CAAC,eAAe,IAAI,CACvB,EACE;UAAA,CAAC,MAAM,CACL,GAAG,CAAC,CAAC,SAAS,CAAC,CACf,aAAa,CACb,aAAa,CAAC,CAAC,MAAM,CAAC,CACtB,OAAO,CAAC,CAAC,GAAG,EAAE,CAAC,SAAS,CAAC,CAAC,MAAM,CAAC,CAAC,CAClC,SAAS,CAAC,CAAC,YAAY,CAAC,CAExB;YAAA,CAAC,GAAG,MAAM,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,MAAM,mBAAmB,CAClD;UAAA,EAAE,MAAM,CAER;;UAAA,CAAC,OAAO,CACN,IAAI,CAAC,CAAC,MAAM,CAAC,CACb,GAAG,CAAC,CAAC,YAAY,CAAC,CAClB,MAAM,CAAC,CAAC,SAAS,CAAC,OAAO,CAAC,CAC1B,SAAS,CAAC,cAAc,CAExB;YAAA,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC,EAAE,GAAG,EAAE,CAAC,EAAE,CAAC,CAAC,CAAC,kBAAkB,CAAC,EAAE,IAAI,CACzD;UAAA,EAAE,OAAO,CACX;QAAA,GAAG,CACJ,CACD;MAAA,CAAC,IAAI,CACH;QAAA,CAAC,WAAW,CACV;UAAA,CAAC,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,OAAO,EAAE,IAAI,CAChC;UAAA,CAAC,eAAe,CACd;YAAA,CAAC,eAAe,CAAC,CAAC,CAAC,IAAI,CAAC,SAAS,CAAC,eAAe,EAAE,IAAI,EAAE,CAAC,CAAC,CAAC,CAAC,CAAC,gBAAgB,CAChF;UAAA,EAAE,eAAe,CAEjB;;UAAA,CAAC,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,iBAAiB,EAAE,IAAI,CAC1C;UAAA,CAAC,eAAe,CACd;YAAA,CAAC,eAAe;YACd,CAAC,CAAC,eAAe,CAAC,EAAE,SAAS,EAAE,eAAe,EAAE,EAAE,UAAU,EAAE,SAAS,CAAC;YACxE,CAAC,CAAC,gBAAgB,CACtB;UAAA,EAAE,eAAe,CACjB;UAAA,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC,EAAE,GAAG,EAAE,CAAC,EAAE,SAAS,EAAE,QAAQ,EAAE,CAAC,CAC/C;YAAA,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC,EAAE,GAAG,EAAE,CAAC,EAAE,SAAS,EAAE,QAAQ,EAAE,CAAC,CAC/C;cAAA,CAAC,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,MAAM,CAAC,OAAO,CAC/B;;cACF,EAAE,IAAI,CACN;cAAA,CAAC,IAAI,CACH;6EAA6D,CAAC,CAAC,CAAC,OAAO,EAAE,CAAC,CAAE;;6DAE/B,CAAC,CAAC,CAAC,MAAM,EAAE,CAAC,CAAE;;;cAG7D,EAAE,IAAI,CACR;YAAA,EAAE,IAAI,CACN;YAAA,CAAC,UAAU,CACT;cAAA,CAAC,EAAE,CACD;gFAAgE,CAAC,CAAC,CAAC,YAAY,EAAE,CAAC,CAAC,CAAC,GAAG,CACvF;;cACF,EAAE,EAAE,CACJ;cAAA,CAAC,EAAE,CACD;+EAA+D,CAAC,CAAC,CAAC,YAAY,EAAE,CAAC,CAAE;;cAErF,EAAE,EAAE,CACN;YAAA,EAAE,UAAU,CACZ;YAAA,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC,EAAE,SAAS,EAAE,QAAQ,EAAE,CAAC,CACvC;cAAA,CAAC,IAAI,CACH;;iEACiD,CAAC,CAAC,CAAC,gBAAgB,EAAE,CAAC,CAAE;cAC3E,EAAE,IAAI,CACR;YAAA,EAAE,IAAI,CACR;UAAA,EAAE,IAAI,CACR;QAAA,EAAE,WAAW,CACf;MAAA,EAAE,IAAI,CACR;IAAA,EAAE,UAAU,CAAC,CACd,CAAC;AACJ,CAAC,CAAC;AAEF,mBAAmB,CAAC,IAAI,GAAG;IACzB,gBAAgB,EAAE,KAAK;IACvB,eAAe,EAAE,KAAK;IACtB,aAAa,EAAE,IAAI;IACnB,aAAa,EAAE,QAAQ;IACvB,iBAAiB,EAAE,IAAI;IACvB,mBAAmB,EAAE,IAAI;IACzB,eAAe,EAAE,IAAI;IACrB,uBAAuB,EAAE,IAAI;IAC7B,OAAO,EAAE,OAAO;CACjB,CAAC;AAEF,mBAAmB,CAAC,QAAQ,GAAG;IAC7B,gBAAgB,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE,EAAE;IAClD,eAAe,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE,EAAE;IACjD,aAAa,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE,EAAE;IAC/C,aAAa,EAAE,EAAE,OAAO,EAAE,CAAC,QAAQ,EAAE,KAAK,CAAC,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE,EAAE;IAC1E,iBAAiB,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE,EAAE;IACnD,mBAAmB,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE,EAAE;IACrD,eAAe,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE,EAAE;IACjD,uBAAuB,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE,EAAE;IACzD,OAAO,EAAE,EAAE,OAAO,EAAE,CAAC,OAAO,EAAE,OAAO,EAAE,QAAQ,CAAC,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE,EAAE;CAChF,CAAC","sourcesContent":["/* eslint-disable react/no-unescaped-entities */\nimport { useRef, useState } from 'react';\nimport { Meta, Story } from '@storybook/react';\n\nimport {\n  Card,\n  CardContent,\n  Text,\n  Button,\n  Popover,\n  useElement,\n  useOuterEvent,\n  Flex,\n  useI18n\n} from '@pega/cosmos-react-core';\nimport {\n  ConditionBuilder,\n  FieldCondition,\n  AtomicCondition,\n  getInitConditionForLhs,\n  isValidCondition,\n  Condition,\n  LeafCondition,\n  formatCondition,\n  RHSType\n} from '@pega/cosmos-react-condition-builder';\nimport { HandleValue as ConditionBuilderHandleValue } from '@pega/cosmos-react-condition-builder/lib/components/ConditionBuilder/ConditionBuilder.types';\nimport { HandleValue as FieldConditionHandleValue } from '@pega/cosmos-react-condition-builder/lib/components/ConditionBuilder/FieldCondition.types';\n\nimport { demoFields, demoCondition, demoComparators, demoDateFunctions } from './props.mock';\nimport { StyledCodeBlock, StyledGrid, StyledList } from './ConditionBuilder.styles';\nimport { convertRhsTypes } from './ConditionBuilder.mocks';\n\nexport default {\n  title: 'Condition Builder/ConditionBuilder',\n  component: ConditionBuilder\n} as Meta;\n\ninterface ConditionBuilderStoryProps {\n  validComparators?: boolean;\n  disallowNOT?: boolean;\n  renderInPopover?: boolean;\n  dateFunctions?: boolean;\n  itemDirection?: 'column' | 'row';\n  useLiteralRHSType?: boolean;\n  useParameterRHSType?: boolean;\n  useFieldRHSType?: boolean;\n  useRelativeDatesRHSType?: boolean;\n  lhsMode?: 'input' | 'label' | 'hidden';\n}\n\nexport const DefaultBuilder: Story<ConditionBuilderStoryProps> = (\n  args: ConditionBuilderStoryProps\n) => {\n  const translate = useI18n();\n  const [condition, setCondition] = useState<Condition | undefined>(() => {\n    // If a previous condition exists on the session, use it\n    const prevCondition = sessionStorage.getItem('CBDemoCondition');\n    if (prevCondition !== null) {\n      // If an empty condition was submitted previously, start with an empty one\n      if (prevCondition === 'undefined') {\n        return undefined;\n      }\n      return JSON.parse(prevCondition);\n    }\n    return demoCondition;\n  });\n\n  // Set up content for rendering inside a Popover\n  const buttonRef = useRef(null); // Ref for the opener button\n  const [isOpen, setIsOpen] = useState(false);\n  const [popoverEl, setPopoverEl] = useElement<HTMLElement>(null);\n  const hidePopover = () => {\n    if (isOpen) {\n      setIsOpen(false);\n    }\n  };\n\n  useOuterEvent('mousedown', [popoverEl, buttonRef.current], hidePopover); // Call the method on clicking outside these elements\n  const hideOnEscape = (e: KeyboardEvent) => {\n    if (e.key === 'Escape') hidePopover(); // Call the method when Escape key is pressed\n  };\n\n  const handle = useRef<ConditionBuilderHandleValue>(null);\n\n  const builderJsx = (\n    <>\n      <ConditionBuilder\n        fields={demoFields}\n        condition={condition}\n        validComparators={args.validComparators ? demoComparators : undefined}\n        validRhsTypes={new Set(['LITERAL', 'FIELD', 'DATE_FUNCTION', 'RELATIVE_DATE', 'PARAMETER'])}\n        dateFunctions={args.dateFunctions ? demoDateFunctions : undefined}\n        disallowNOT={args.disallowNOT}\n        handle={handle}\n      />\n      <Flex container={{ justify: 'end' }}>\n        <Button\n          variant='primary'\n          onClick={() => {\n            if (handle?.current) {\n              const [valid, newCondition] = handle.current.getCondition();\n              if (valid) {\n                setCondition(newCondition);\n                hidePopover();\n                sessionStorage.setItem('CBDemoCondition', JSON.stringify(newCondition)); // Persist on sessionStorage for the next time\n              }\n            }\n          }}\n        >\n          Submit\n        </Button>\n      </Flex>\n    </>\n  );\n\n  return (\n    <StyledGrid\n      container={{\n        cols: '1fr',\n        rowGap: 3\n      }}\n    >\n      {!args.renderInPopover && builderJsx}\n\n      {args.renderInPopover && (\n        <>\n          <Button\n            ref={buttonRef}\n            aria-haspopup\n            aria-expanded={isOpen}\n            onClick={() => setIsOpen(!isOpen)}\n            onKeyDown={hideOnEscape}\n          >\n            Open Condition builder\n          </Button>\n\n          <Popover\n            show={isOpen}\n            ref={setPopoverEl}\n            target={buttonRef.current}\n            placement='bottom-start'\n          >\n            <Flex container={{ pad: 1, direction: 'column' }}>{builderJsx}</Flex>\n          </Popover>\n        </>\n      )}\n\n      <div>\n        <Text variant='h4'>Output:</Text>\n        <StyledCodeBlock>\n          {condition ? JSON.stringify(condition, null, 2) : '(No condition)'}\n        </StyledCodeBlock>\n      </div>\n\n      <div>\n        <Text variant='h4'>Formatted Output:</Text>\n        <StyledCodeBlock>\n          {condition ? formatCondition(condition, demoFields, translate) : '(No condition)'}\n        </StyledCodeBlock>\n      </div>\n    </StyledGrid>\n  );\n};\n\nDefaultBuilder.args = {\n  validComparators: false,\n  disallowNOT: false,\n  renderInPopover: false,\n  dateFunctions: true\n};\n\nDefaultBuilder.argTypes = {\n  validComparators: { control: { type: 'boolean' } },\n  disallowNOT: { control: { type: 'boolean' } },\n  renderInPopover: { control: { type: 'boolean' } },\n  dateFunctions: { control: { type: 'boolean' } }\n};\n\nexport const FieldConditionDemo: Story<ConditionBuilderStoryProps> = (\n  args: ConditionBuilderStoryProps\n) => {\n  const translate = useI18n();\n  const [condition, setCondition] = useState<LeafCondition | undefined>(undefined);\n\n  // Set up content for rendering inside a Popover\n  const buttonRef = useRef(null); // Ref for the opener button\n  const [isOpen, setIsOpen] = useState(false);\n  const [popoverEl, setPopoverEl] = useElement<HTMLElement>(null);\n  const hidePopover = () => {\n    if (isOpen) {\n      setIsOpen(false);\n    }\n  };\n  useOuterEvent('mousedown', [popoverEl, buttonRef.current], hidePopover); // Call the method on clicking outside these elements\n  const hideOnEscape = (e: KeyboardEvent) => {\n    if (e.key === 'Escape') hidePopover(); // Call the method when Escape key is pressed\n  };\n\n  const handle = useRef<FieldConditionHandleValue>(null);\n\n  const builderJsx = (\n    <Flex container={{ direction: 'column', gap: 2 }}>\n      <FieldCondition\n        targetField='technicalDetails.lastActivityAt'\n        fields={demoFields}\n        condition={condition}\n        validComparators={args.validComparators ? demoComparators : undefined}\n        validRhsTypes={new Set(['LITERAL', 'FIELD', 'DATE_FUNCTION', 'RELATIVE_DATE'])}\n        dateFunctions={args.dateFunctions ? demoDateFunctions : undefined}\n        handle={handle}\n      />\n\n      <Flex container={{ justify: 'end' }}>\n        <Button\n          name='field-condition-submit'\n          variant='primary'\n          onClick={() => {\n            if (!handle.current) return;\n\n            const [isValid, c] = handle.current.getCondition();\n            if (!isValid) return;\n\n            hidePopover();\n            setCondition(c);\n          }}\n        >\n          Submit\n        </Button>\n      </Flex>\n    </Flex>\n  );\n\n  return (\n    <StyledGrid\n      container={{\n        cols: 'repeat(2, minmax(0, 1fr))',\n        justifyItems: 'stretch',\n        alignItems: 'start',\n        colGap: 4\n      }}\n    >\n      {!args.renderInPopover && builderJsx}\n\n      {args.renderInPopover && (\n        <>\n          <Button\n            ref={buttonRef}\n            aria-haspopup\n            aria-expanded={isOpen}\n            onClick={() => setIsOpen(!isOpen)}\n            onKeyDown={hideOnEscape}\n          >\n            Open Condition builder\n          </Button>\n\n          <Popover\n            show={isOpen}\n            ref={setPopoverEl}\n            target={buttonRef.current}\n            placement='bottom-start'\n          >\n            <Flex container={{ pad: 1 }}>{builderJsx}</Flex>\n          </Popover>\n        </>\n      )}\n\n      <div>\n        <Text variant='h4'>Output:</Text>\n        <StyledCodeBlock>\n          {condition ? JSON.stringify(condition, null, 2) : '(No condition)'}\n        </StyledCodeBlock>\n\n        <Text variant='h4'>Formatted Output:</Text>\n        <StyledCodeBlock>\n          {condition ? formatCondition({ condition }, demoFields, translate) : '(No condition)'}\n        </StyledCodeBlock>\n      </div>\n    </StyledGrid>\n  );\n};\n\nFieldConditionDemo.args = {\n  validComparators: false,\n  renderInPopover: false,\n  dateFunctions: true\n};\n\nFieldConditionDemo.argTypes = {\n  validComparators: { control: { type: 'boolean' } },\n  renderInPopover: { control: { type: 'boolean' } },\n  dateFunctions: { control: { type: 'boolean' } }\n};\n\nexport const AtomicConditionDemo: Story<ConditionBuilderStoryProps> = (\n  args: ConditionBuilderStoryProps\n) => {\n  const translate = useI18n();\n\n  const validRHSTypes: Set<RHSType> = convertRhsTypes(\n    !!args.useLiteralRHSType,\n    !!args.useFieldRHSType,\n    !!args.useRelativeDatesRHSType,\n    !!args.useParameterRHSType,\n    args.dateFunctions ? demoDateFunctions : undefined\n  );\n\n  // Story State object to simulate \"submitting\"\n  const [submitCondition, setSubmitCondition] = useState<LeafCondition | undefined>(undefined);\n  // State needed to use Popover in Story\n  const buttonRef = useRef(null); // Ref for the opener button\n  const [isOpen, setIsOpen] = useState(false);\n  const [popoverEl, setPopoverEl] = useElement<HTMLElement>(null);\n  const hidePopover = () => {\n    if (isOpen) {\n      setIsOpen(false);\n    }\n  };\n  useOuterEvent('mousedown', [popoverEl, buttonRef.current], hidePopover); // Call the method on clicking outside these elements\n  const hideOnEscape = (e: KeyboardEvent) => {\n    if (e.key === 'Escape') hidePopover(); // Call the method when Escape key is pressed\n  };\n\n  // State handling needed to manage/use the AtomicCondition component\n  const [showErrorIndicators, setShowErrorIndicators] = useState(false);\n  const [condition, setCondition] = useState(\n    // If editing use the seedCondition, otherwise, determine an initial condition based on the targetField\n    () =>\n      submitCondition ||\n      getInitConditionForLhs(\n        { field: 'details.age' },\n        demoFields,\n        validRHSTypes,\n        args.validComparators ? demoComparators : undefined,\n        args.dateFunctions ? demoDateFunctions : undefined\n      )\n  );\n\n  const handleSubmission = () => {\n    setShowErrorIndicators(false);\n    if (isValidCondition(condition, demoFields, true)) {\n      // Insert all \"submit\" logic to use the valid condition that you've created.\n      if (args.renderInPopover) setIsOpen(false);\n      setSubmitCondition(condition);\n    } else {\n      setShowErrorIndicators(true);\n    }\n  };\n\n  const atomicConditionJSX = (\n    <Flex container={{ direction: 'column', gap: 2 }}>\n      <AtomicCondition\n        condition={condition}\n        fields={demoFields}\n        indicateErrors={showErrorIndicators}\n        validComparators={args.validComparators ? demoComparators : undefined}\n        dateFunctions={args.dateFunctions ? demoDateFunctions : undefined}\n        onChange={c => setCondition(c)}\n        itemDirection={args.itemDirection}\n        lhsMode={args.lhsMode}\n        validRhsTypes={validRHSTypes}\n      />\n      <Flex container={{ justify: 'end' }}>\n        <Button variant='primary' onClick={handleSubmission}>\n          Submit\n        </Button>\n      </Flex>\n    </Flex>\n  );\n\n  return (\n    <StyledGrid\n      container={{\n        cols: 'repeat(2, minmax(0, 1fr))',\n        justifyItems: 'stretch',\n        alignItems: 'start',\n        colGap: 4\n      }}\n    >\n      {!args.renderInPopover && atomicConditionJSX}\n\n      {args.renderInPopover && (\n        <>\n          <Button\n            ref={buttonRef}\n            aria-haspopup\n            aria-expanded={isOpen}\n            onClick={() => setIsOpen(!isOpen)}\n            onKeyDown={hideOnEscape}\n          >\n            {`${isOpen ? 'Close' : 'Open'} Atomic Condition`}\n          </Button>\n\n          <Popover\n            show={isOpen}\n            ref={setPopoverEl}\n            target={buttonRef.current}\n            placement='bottom-start'\n          >\n            <Flex container={{ pad: 1 }}>{atomicConditionJSX}</Flex>\n          </Popover>\n        </>\n      )}\n      <Card>\n        <CardContent>\n          <Text variant='h4'>Output:</Text>\n          <StyledCodeBlock>\n            {submitCondition ? JSON.stringify(submitCondition, null, 2) : '(No condition)'}\n          </StyledCodeBlock>\n\n          <Text variant='h4'>Formatted Output:</Text>\n          <StyledCodeBlock>\n            {submitCondition\n              ? formatCondition({ condition: submitCondition }, demoFields, translate)\n              : '(No condition)'}\n          </StyledCodeBlock>\n          <Flex container={{ gap: 1, direction: 'column' }}>\n            <Flex container={{ gap: 1, direction: 'column' }}>\n              <Text variant='h2' status='error'>\n                validRhsTypes Prop Warning\n              </Text>\n              <Text>\n                There are LHS(Left Hand Side Field)/Comparator pairings that <u>require</u> specific\n                RHS(Right Hand Side Value) types. Please be mindful of these incompatibilities when\n                limiting RHS value types using this prop. We <b>do not</b> support limiting RHS\n                field types to incompatible types and it will result in a validation error if you do\n                so. The pairings referred to here are as follows:\n              </Text>\n            </Flex>\n            <StyledList>\n              <li>\n                BOOLEAN LHS Fields coupled with \"EQ\" or \"NEQ\" comparators, will <u>always yield</u>{' '}\n                a Field RHS\n              </li>\n              <li>\n                Any LHS Fields coupled with \"IN\" or \"NOT_IN\" comparators, will <u>always yield</u> a\n                Literal RHS (Comma separated list)\n              </li>\n            </StyledList>\n            <Flex container={{ direction: 'column' }}>\n              <Text>\n                If you would like to limit RHS value types and avoid these incompatibilities, you\n                will need to exclude these comparators using the <b>validComparators</b> prop.\n              </Text>\n            </Flex>\n          </Flex>\n        </CardContent>\n      </Card>\n    </StyledGrid>\n  );\n};\n\nAtomicConditionDemo.args = {\n  validComparators: false,\n  renderInPopover: false,\n  dateFunctions: true,\n  itemDirection: 'column',\n  useLiteralRHSType: true,\n  useParameterRHSType: true,\n  useFieldRHSType: true,\n  useRelativeDatesRHSType: true,\n  lhsMode: 'input'\n};\n\nAtomicConditionDemo.argTypes = {\n  validComparators: { control: { type: 'boolean' } },\n  renderInPopover: { control: { type: 'boolean' } },\n  dateFunctions: { control: { type: 'boolean' } },\n  itemDirection: { options: ['column', 'row'], control: { type: 'select' } },\n  useLiteralRHSType: { control: { type: 'boolean' } },\n  useParameterRHSType: { control: { type: 'boolean' } },\n  useFieldRHSType: { control: { type: 'boolean' } },\n  useRelativeDatesRHSType: { control: { type: 'boolean' } },\n  lhsMode: { options: ['input', 'label', 'hidden'], control: { type: 'select' } }\n};\n"]}

package/jsx/condition-builder/ConditionBuilder/ConditionBuilder.styles.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+export declare const StyledGrid: import("styled-components").StyledComponent<import("react").FunctionComponent<import("@pega/cosmos-react-core/lib/components/Grid/Grid.types").default & import("@pega/cosmos-react-core").ForwardProps>, import("styled-components").DefaultTheme, {}, never>;
+export declare const StyledCodeBlock: import("styled-components").StyledComponent<"pre", import("styled-components").DefaultTheme, {}, never>;
+export declare const StyledList: import("styled-components").StyledComponent<"ul", import("styled-components").DefaultTheme, {}, never>;
+//# sourceMappingURL=ConditionBuilder.styles.d.ts.map

package/jsx/condition-builder/ConditionBuilder/ConditionBuilder.styles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ConditionBuilder.styles.d.ts","sourceRoot":"","sources":["../../../src/condition-builder/ConditionBuilder/ConditionBuilder.styles.ts"],"names":[],"mappings":";AAIA,eAAO,MAAM,UAAU,gQAEtB,CAAC;AAEF,eAAO,MAAM,eAAe,yGAG3B,CAAC;AAGF,eAAO,MAAM,UAAU,wGAEtB,CAAC"}

package/jsx/condition-builder/ConditionBuilder/ConditionBuilder.styles.js

@@ -0,0 +1,15 @@
+import styled from 'styled-components';
+import { Grid, defaultThemeProp } from '@pega/cosmos-react-core';
+export const StyledGrid = styled(Grid) `
+  max-width: 60rem;
+`;
+export const StyledCodeBlock = styled.pre `
+  padding: ${props => props.theme.base.spacing};
+  margin-bottom: ${props => props.theme.base.spacing};
+`;
+StyledCodeBlock.defaultProps = defaultThemeProp;
+export const StyledList = styled.ul `
+  padding-left: calc(4 * ${props => props.theme.base.spacing});
+`;
+StyledList.defaultProps = defaultThemeProp;
+//# sourceMappingURL=ConditionBuilder.styles.js.map

package/jsx/condition-builder/ConditionBuilder/ConditionBuilder.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ConditionBuilder.styles.js","sourceRoot":"","sources":["../../../src/condition-builder/ConditionBuilder/ConditionBuilder.styles.ts"],"names":[],"mappings":"AAAA,OAAO,MAAM,MAAM,mBAAmB,CAAC;AAEvC,OAAO,EAAE,IAAI,EAAE,gBAAgB,EAAE,MAAM,yBAAyB,CAAC;AAEjE,MAAM,CAAC,MAAM,UAAU,GAAG,MAAM,CAAC,IAAI,CAAC,CAAA;;CAErC,CAAC;AAEF,MAAM,CAAC,MAAM,eAAe,GAAG,MAAM,CAAC,GAAG,CAAA;aAC5B,KAAK,CAAC,EAAE,CAAC,KAAK,CAAC,KAAK,CAAC,IAAI,CAAC,OAAO;mBAC3B,KAAK,CAAC,EAAE,CAAC,KAAK,CAAC,KAAK,CAAC,IAAI,CAAC,OAAO;CACnD,CAAC;AACF,eAAe,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAEhD,MAAM,CAAC,MAAM,UAAU,GAAG,MAAM,CAAC,EAAE,CAAA;2BACR,KAAK,CAAC,EAAE,CAAC,KAAK,CAAC,KAAK,CAAC,IAAI,CAAC,OAAO;CAC3D,CAAC;AACF,UAAU,CAAC,YAAY,GAAG,gBAAgB,CAAC","sourcesContent":["import styled from 'styled-components';\n\nimport { Grid, defaultThemeProp } from '@pega/cosmos-react-core';\n\nexport const StyledGrid = styled(Grid)`\n  max-width: 60rem;\n`;\n\nexport const StyledCodeBlock = styled.pre`\n  padding: ${props => props.theme.base.spacing};\n  margin-bottom: ${props => props.theme.base.spacing};\n`;\nStyledCodeBlock.defaultProps = defaultThemeProp;\n\nexport const StyledList = styled.ul`\n  padding-left: calc(4 * ${props => props.theme.base.spacing});\n`;\nStyledList.defaultProps = defaultThemeProp;\n"]}

package/jsx/condition-builder/ConditionBuilder/props.mock.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"props.mock.d.ts","sourceRoot":"","sources":["../../../src/condition-builder/ConditionBuilder/props.mock.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,iBAAiB,EACjB,SAAS,EACT,mBAAmB,EACnB,KAAK,EACN,MAAM,sCAAsC,CAAC;AAE9C,eAAO,MAAM,UAAU,EAAE,KAAK,EAkD7B,CAAC;AAEF,eAAO,MAAM,aAAa,EAAE,SAiC3B,CAAC;AAEF,eAAO,MAAM,eAAe,EAAE,iBAAiB,EAI9C,CAAC;AAEF,eAAO,MAAM,iBAAiB,EAAE,mBAqB/B,CAAC"}
+{"version":3,"file":"props.mock.d.ts","sourceRoot":"","sources":["../../../src/condition-builder/ConditionBuilder/props.mock.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,iBAAiB,EACjB,SAAS,EACT,mBAAmB,EACnB,KAAK,EACN,MAAM,sCAAsC,CAAC;AAE9C,eAAO,MAAM,UAAU,EAAE,KAAK,EAuJ7B,CAAC;AAEF,eAAO,MAAM,aAAa,EAAE,SAiC3B,CAAC;AAEF,eAAO,MAAM,eAAe,EAAE,iBAAiB,EAI9C,CAAC;AAEF,eAAO,MAAM,iBAAiB,EAAE,mBAqB/B,CAAC"}

package/jsx/condition-builder/ConditionBuilder/props.mock.js

@@ -1,11 +1,7 @@
 export const demoFields = [
-    { name: 'employeeId', label: 'Employee ID', type: 'TEXT' },
-    { name: 'firstName', label: 'First Name', type: 'TEXT' },
-    { name: 'lastName', label: 'Last Name', type: 'TEXT' },
-    { name: 'gender', label: 'Gender', type: 'TEXT' },
     {
-        name: 'department',
-        label: 'Department',
+        id: 'employeeId',
+        primary: 'Employee ID',
         type: 'TEXT',
         possibleValues: [
             'Customer Service',
@@ -17,44 +13,149 @@ export const demoFields = [
             'Sales'
         ]
     },
-    { name: 'age', label: 'Age', type: 'NUMBER' },
-    { name: 'experience', label: 'Experience (yrs)', type: 'NUMBER' },
-    { name: 'salary', label: 'Salary', type: 'NUMBER' },
-    { name: 'hireDate', label: 'Hire Date', type: 'DATE_ONLY' },
-    { name: 'dateOfBirth', label: 'Date of Birth', type: 'DATE_ONLY' },
     {
-        name: 'shiftStartTime',
-        label: 'Shift start time',
-        type: 'TIME_ONLY',
-        groupLabel: 'Technical details'
+        id: 'details',
+        primary: 'Details',
+        items: [
+            {
+                id: 'details.firstName',
+                primary: 'First Name',
+                type: 'TEXT'
+            },
+            {
+                id: 'details.lastName',
+                primary: 'Last Name',
+                type: 'TEXT',
+                possibleValues: () => {
+                    return new Promise(resolve => {
+                        setTimeout(() => {
+                            resolve([
+                                'Value 1',
+                                'Value 2',
+                                'Value 3',
+                                'Value 4',
+                                'Value 5',
+                                'Value 6',
+                                'Value 7'
+                            ]);
+                        }, 5000);
+                    });
+                }
+            },
+            { id: 'details.gender', primary: 'Gender', type: 'TEXT' },
+            {
+                id: 'details.age',
+                primary: 'Age',
+                type: 'NUMBER'
+            },
+            {
+                id: 'details.profileDetails',
+                primary: 'Profile Details',
+                items: [
+                    {
+                        id: 'details.profileDetails.experience',
+                        primary: 'Experience (yrs)',
+                        type: 'NUMBER'
+                    },
+                    {
+                        id: 'details.profileDetails.department',
+                        primary: 'Department',
+                        type: 'TEXT',
+                        possibleValues: [
+                            'Customer Service',
+                            'Engineering',
+                            'Facilities',
+                            'Finance',
+                            'HR',
+                            'IT',
+                            'Sales'
+                        ]
+                    }
+                ]
+            }
+        ]
+    },
+    {
+        id: 'salary',
+        primary: 'Salary',
+        type: 'NUMBER'
     },
+    { id: 'hireDate', primary: 'Hire Date', type: 'DATE_ONLY' },
+    { id: 'dateOfBirth', primary: 'Date of Birth', type: 'DATE_ONLY' },
     {
-        name: 'shiftEndTime',
-        label: 'Shift end time',
-        type: 'TIME_ONLY',
-        groupLabel: 'Technical details'
+        id: 'technicalDetails',
+        primary: 'Technical details',
+        items: [
+            {
+                id: 'technicalDetails.shiftStartTime',
+                primary: 'Shift start time',
+                type: 'TIME_ONLY'
+            },
+            {
+                id: 'technicalDetails.shiftEndTime',
+                primary: 'Shift end time',
+                type: 'TIME_ONLY'
+            },
+            {
+                id: 'technicalDetails.lastActivityAt',
+                primary: 'Last activity at',
+                type: 'DATE_TIME'
+            },
+            {
+                id: 'technicalDetails.nextPasswordReset',
+                primary: 'Next password reset',
+                type: 'DATE_TIME'
+            }
+        ]
     },
+    { id: 'isSeniorCitizen', primary: 'Is Senior Citizen', type: 'BOOLEAN' },
+    { id: 'isRemoteEmployee', primary: 'Is Remote Employee', type: 'BOOLEAN' },
     {
-        name: 'lastActivityAt',
-        label: 'Last activity at',
-        type: 'DATE_TIME',
-        groupLabel: 'Technical details'
+        id: 'createOperator',
+        primary: 'Create operator',
+        type: 'TEXT',
+        parameters: [
+            {
+                id: 'currentOperator',
+                primary: 'Current operator'
+            },
+            {
+                id: 'manager',
+                primary: 'Manager'
+            }
+        ],
+        possibleValues: ['Value 1', 'Value 2', 'Value 3', 'Value 4', 'Value 5', 'Value 6', 'Value 7']
     },
     {
-        name: 'nextPasswordReset',
-        label: 'Next password reset',
-        type: 'DATE_TIME',
-        groupLabel: 'Technical details'
+        id: 'organization',
+        primary: 'Organization',
+        type: 'TEXT',
+        parameters: [
+            {
+                id: 'currentOrganization',
+                primary: 'Current organization'
+            }
+        ]
     },
-    { name: 'isSeniorCitizen', label: 'Is Senior Citizen', type: 'BOOLEAN' },
-    { name: 'isRemoteEmployee', label: 'Is Remote Employee', type: 'BOOLEAN' }
+    {
+        id: 'workgroup',
+        primary: 'Workgroup',
+        type: 'TEXT',
+        parameters: [
+            {
+                id: 'currentWorkgroup',
+                primary: 'Current workgroup'
+            }
+        ],
+        possibleValues: ['Value 1', 'Value 2', 'Value 3', 'Value 4', 'Value 5', 'Value 6', 'Value 7']
+    }
 ];
 export const demoCondition = {
     AND: [
         {
             condition: {
                 lhs: {
-                    field: 'lastActivityAt'
+                    field: 'technicalDetails.lastActivityAt'
                 },
                 comparator: 'EQ',
                 rhs: {
@@ -67,7 +168,7 @@ export const demoCondition = {
                 OR: [
                     {
                         condition: {
-                            lhs: { field: 'experience' },
+                            lhs: { field: 'details.profileDetails.experience' },
                             comparator: 'GTE',
                             rhs: { value: 10 }
                         }