@pega/cosmos-react-demos 3.0.0-dev.4.2 → 3.0.0-dev.7.0

package/lib/build/PageTemplates/PageTemplates.stories.js.map

@@ -1 +1 @@
-{"version":3,"file":"PageTemplates.stories.js","sourceRoot":"","sources":["../../../src/build/PageTemplates/PageTemplates.stories.tsx"],"names":[],"mappings":";AAEA,OAAO,EAAE,QAAQ,EAAE,OAAO,EAAE,UAAU,EAAc,MAAM,OAAO,CAAC;AAClE,OAAO,EAAE,MAAM,EAAE,MAAM,0BAA0B,CAAC;AAElD,OAAO,EACL,MAAM,EACN,MAAM,EAEN,WAAW,EACX,YAAY,EACZ,aAAa,EACb,KAAK,EACL,mBAAmB,EACnB,UAAU,EACV,IAAI,EACJ,IAAI,EACJ,OAAO,EAGR,MAAM,yBAAyB,CAAC;AACjC,OAAO,EAAE,QAAQ,EAAiB,UAAU,EAAE,aAAa,EAAE,MAAM,0BAA0B,CAAC;AAE9F,OAAO,EAAE,SAAS,EAAE,MAAM,gCAAgC,CAAC;AAC3D,OAAO,EAAE,aAAa,EAAE,MAAM,gCAAgC,CAAC;AAC/D,OAAO,EACL,mBAAmB,EACnB,gBAAgB,EAChB,cAAc,EACd,QAAQ,EACT,MAAM,4BAA4B,CAAC;AAEpC,OAAO,EAAE,aAAa,EAAE,MAAM,uBAAuB,CAAC;AAEtD,eAAe;IACb,KAAK,EAAE,qBAAqB;IAC5B,UAAU,EAAE;QACV,MAAM,EAAE,YAAY;KACrB;CACM,CAAC;AAgCV,MAAM,CAAC,MAAM,0BAA0B,GAAG,CAAC,IAAmB,EAAE,EAAE;IAChE,MAAM,CAAC,aAAa,EAAE,gBAAgB,CAAC,GAAG,QAAQ,EAAsB,CAAC;IACzE,MAAM,CAAC,QAAQ,EAAE,WAAW,CAAC,GAAG,QAAQ,CAA6B,QAAQ,CAAC,CAAC;IAE/E,MAAM,WAAW,GAAG,CAAC,EAAU,EAAE,EAAE;QACjC,MAAM,WAAW,GAAG,WAAW,CAAC,OAAO,CAAC,QAAQ,EAAE,EAAE,CAAC,CAAC;QAEtD,IAAI,CAAC,WAAW,EAAE,KAAK,EAAE;YACvB,gBAAgB,CAAC,EAAE,CAAC,CAAC;YACrB,OAAO;SACR;QAED,WAAW,CAAC,IAAI,CAAC,EAAE,CACjB,WAAW,CAAC,OAAO,CAAC,IAAI,EAAE,EAAE,EAAE,IAAI,CAAC,EAAE;YACnC,OAAO;gBACL,GAAG,IAAI;gBACP,QAAQ,EAAE,CAAC,IAAI,CAAC,QAAQ;aACzB,CAAC;QACJ,CAAC,CAAC,CACH,CAAC;QAEF,OAAO,CACL,KAAC,YAAY,IACX,KAAK,EAAE,cAAc,EACrB,WAAW,EAAE,WAAW,EACxB,aAAa,EAAE,aAAa,WAC5B,CACH,CAAC;IACJ,CAAC,CAAC;IAEF,MAAM,SAAS,GAAG;QAChB,KAAK,EAAE;YACL,IAAI,EAAE,YAAY;SACnB;QACD,KAAK,EAAE;YACL,MAAM,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE;YACxB,MAAM,EAAE;gBACN,WAAW,EAAE,2BAA2B;aACzC;YACD,UAAU,EAAE,MAAM;YAClB,OAAO,EAAE;gBACP;oBACE,OAAO,EAAE,eAAe;oBACxB,EAAE,EAAE,cAAc;oBAClB,OAAO,EAAE,MAAM,CAAC,sBAAsB,CAAC;iBACxC;gBACD;oBACE,OAAO,EAAE,eAAe;oBACxB,EAAE,EAAE,cAAc;oBAClB,OAAO,EAAE,MAAM,CAAC,sBAAsB,CAAC;iBACxC;aACF;SACF;QACD,KAAK,EAAE;YACL;gBACE,EAAE,EAAE,GAAG;gBACP,IAAI,EAAE,cAAc;gBACpB,OAAO,EAAE,MAAM,CAAC,sBAAsB,CAAC;aACxC;YACD;gBACE,EAAE,EAAE,GAAG;gBACP,IAAI,EAAE,kBAAkB;gBACxB,OAAO,EAAE,MAAM,CAAC,0BAA0B,CAAC;aAC5C;YACD;gBACE,EAAE,EAAE,GAAG;gBACP,IAAI,EAAE,OAAO;gBACb,OAAO,EAAE,GAAG,EAAE,GAAE,CAAC;aAClB;YACD;gBACE,EAAE,EAAE,GAAG;gBACP,IAAI,EAAE,gBAAgB;gBACtB,OAAO,EAAE,MAAM,CAAC,wBAAwB,CAAC;aAC1C;YACD;gBACE,EAAE,EAAE,GAAG;gBACP,IAAI,EAAE,QAAQ;gBACd,OAAO,EAAE,MAAM,CAAC,gBAAgB,CAAC;aAClC;SACF;KACF,CAAC;IAEF,OAAO,CACL,KAAC,aAAa,IAAC,KAAK,EAAE,UAAU,YAC9B,KAAC,QAAQ,IACP,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,SAAS,EAAE,SAAS,EACpB,OAAO,EAAE,IAAI,CAAC,cAAc,EAC5B,OAAO,EAAE;gBACP,IAAI,EAAE,UAAU;gBAChB,MAAM,EAAE;oBACN,IAAI,EAAE;wBACJ,IAAI,EAAE,SAAS;wBACf,OAAO,EAAE,SAAS;qBACnB;iBACF;aACF,EACD,UAAU,EAAE;gBACV,KAAK,EAAE,QAAQ;gBACf,aAAa;gBACb,WAAW;aACZ,EACD,KAAK,EAAE;gBACL,WAAW,EAAE,EAAE,CAAC,EAAE;oBAChB,IAAI,EAAE,KAAK,UAAU,EAAE;wBACrB,WAAW,CAAC,mBAAmB,CAAC,CAAC;qBAClC;oBAED,IAAI,EAAE,KAAK,UAAU,EAAE;wBACrB,WAAW,CAAC,gBAAgB,CAAC,CAAC;qBAC/B;oBAED,IAAI,EAAE,KAAK,SAAS,EAAE;wBACpB,WAAW,CAAC,cAAc,CAAC,CAAC;qBAC7B;gBACH,CAAC;gBACD,KAAK,EAAE;oBACL;wBACE,KAAK,EAAE,cAAc;wBACrB,EAAE,EAAE,UAAU;qBACf;oBACD;wBACE,KAAK,EAAE,UAAU;wBACjB,EAAE,EAAE,UAAU;qBACf;oBACD;wBACE,KAAK,EAAE,SAAS;wBAChB,EAAE,EAAE,SAAS;qBACd;iBACF;gBACD,MAAM,EAAE;oBACN,aAAa,EAAE,GAAG,EAAE,CAAC,WAAW,CAAC,QAAQ,CAAC;iBAC3C;aACF,WACD,WACY,CACjB,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,iBAAiB,GAAmD,CAC/E,IAA6C,EAC7C,EAAE;IACF,MAAM,CAAC,YAAY,EAAE,eAAe,CAAC,GAAG,QAAQ,CAAC,UAAU,CAAC,CAAC;IAC7D,MAAM,CAAC,OAAO,EAAE,UAAU,CAAC,GAAG,QAAQ,CACpC,4BACE,KAAC,SAAS,aAAG,WACZ,CACJ,CAAC;IACF,MAAM,EAAE,MAAM,EAAE,GAAG,UAAU,CAAC,mBAAmB,CAAC,CAAC;IAEnD,MAAM,OAAO,GAAG,GAAG,EAAE;QACnB,IAAI,IAAI,CAAC,eAAe,EAAE;YACxB,MAAM,IAAI,GAAG,IAAI,CAAC,QAAQ,CAAC;YAE3B,OAAO,IAAI;gBACT,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,GAAG,CAAC,CAAC,KAAa,EAAE,CAAC,EAAE,EAAE;oBACvC,wGAAwG;oBACxG,OAAO;wBACL,EAAE,EAAE,KAAK;wBACT,OAAO,EAAE,KAAK;wBACd,IAAI,EAAE,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,IAAK,KAAa,CAAC,OAAO,CAAC,KAAK,EAAE,GAAG,CAAC,EAAE,CAAC,CAAC,CAAC,SAAS;qBACnE,CAAC;gBACJ,CAAC,CAAC;gBACJ,CAAC,CAAC,EAAE,CAAC;SACR;IACH,CAAC,CAAC;IAEF,MAAM,OAAO,GAAiC,IAAI,CAAC,WAAW,CAAC,CAAC,CAAC,CAC/D,MAAC,IAAI,IAAC,SAAS,mBACb,KAAC,MAAM,IAAC,OAAO,EAAC,SAAS,6BAAc,EACvC,KAAC,OAAO,IACN,MAAM,EAAE,CAAC,EACT,KAAK,EAAE;oBACL;wBACE,EAAE,EAAE,GAAG;wBACP,IAAI,EAAE,eAAe;qBACtB;oBACD;wBACE,EAAE,EAAE,GAAG;wBACP,IAAI,EAAE,eAAe;qBACtB;iBACF,WACD,YACG,CACR,CAAC,CAAC,CAAC,SAAS,CAAC;IAEd,MAAM,OAAO,GAAiC,IAAI,CAAC,WAAW,CAAC,CAAC,CAAC,CAC/D,KAAC,MAAM,IACL,EAAE,EAAC,gBAAgB,EACnB,OAAO,EAAC,SAAS,EACjB,QAAQ,EAAE,CAAC,iDAAiD,CAAC,WAC7D,CACH,CAAC,CAAC,CAAC,SAAS,CAAC;IAEd,MAAM,WAAW,GAAG,KAAC,aAAa,aAAG,CAAC;IACtC,MAAM,KAAK,GAAG,GAAG,EAAE,CAAC,CAClB,KAAC,aAAa,IAAC,KAAK,EAAE,UAAU,YAC9B,KAAC,KAAK,IAAC,OAAO,EAAC,2BAA2B,EAAC,SAAS,EAAE,KAAK,EAAE,MAAM,QAAC,OAAO,EAAE,KAAK,YAChF,KAAC,IAAI,4DAAyC,WACxC,WACM,CACjB,CAAC;IAEF,MAAM,iBAAiB,GAAG,OAAO,CAAC,GAAG,EAAE;QACrC,MAAM,UAAU,GAAG,IAAI,CAAC,UAAU,CAAC,CAAC,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC,CAAC,EAAE,CAAC;QAC1D,MAAM,MAAM,GAAG,IAAI,CAAC,UAAU;YAC5B,CAAC,CAAC;gBACE,IAAI,EAAE,IAAI,CAAC,aAAa;gBACxB,KAAK,EAAE,IAAI,CAAC,WAAW;aACxB;YACH,CAAC,CAAC,SAAS,CAAC;QAEd,OAAO;YACL,KAAK,EAAE,IAAI,CAAC,KAAK;YACjB,OAAO;YACP,OAAO;YACP,IAAI,EAAE,OAAO,EAAE;YACf,UAAU;YACV,MAAM;YACN,QAAQ,EAAE;gBACR,EAAE,EAAE,EAAE,GAAG,EAAE,IAAI,EAAE,IAAI,EAAE,KAAK,EAAE,cAAc,EAAE;gBAC9C,EAAE,EAAE,EAAE,GAAG,EAAE,IAAI,EAAE,WAAW,EAAE,KAAK,EAAE,OAAO,EAAE;gBAC9C;oBACE,EAAE,EAAE,GAAG;oBACP,IAAI,EAAE,OAAO;oBACb,KAAK,EAAE,sCAAsC;iBAC9C;gBACD,EAAE,EAAE,EAAE,GAAG,EAAE,IAAI,EAAE,aAAa,EAAE,KAAK,EAAE,UAAU,EAAE;aACpD;YACD,cAAc,EAAE;gBACd,KAAK,EAAE,eAAe;gBACtB,WAAW,EAAE,uCAAuC;gBACpD,MAAM,EAAE;oBACN;wBACE,EAAE,EAAE,GAAG;wBACP,IAAI,EAAE,IAAI;wBACV,KAAK,EAAE,cAAc;qBACtB;oBACD;wBACE,EAAE,EAAE,GAAG;wBACP,IAAI,EAAE,WAAW;wBACjB,KAAK,EAAE,OAAO;qBACf;oBACD;wBACE,EAAE,EAAE,GAAG;wBACP,IAAI,EAAE,OAAO;wBACb,KAAK,EAAE,sCAAsC;qBAC9C;oBACD;wBACE,EAAE,EAAE,GAAG;wBACP,IAAI,EAAE,QAAQ;wBACd,KAAK,EAAE,iBAAiB;qBACzB;oBACD;wBACE,EAAE,EAAE,GAAG;wBACP,IAAI,EAAE,aAAa;wBACnB,KAAK,EAAE,UAAU;qBAClB;iBACF;gBACD,MAAM,EAAE,IAAI,CAAC,cAAc;oBACzB,CAAC,CAAC,CAAC,CAAgC,EAAE,EAAE;wBACnC,IAAI,CAAC,MAAM,EAAE,CAAC,CAAC,CAAC,CAAC;wBACjB,MAAM,CAAC,KAAK,CAAC,CAAC;oBAChB,CAAC;oBACH,CAAC,CAAC,SAAS;aACd;SACF,CAAC;IACJ,CAAC,EAAE,CAAC,IAAI,CAAC,CAAC,CAAC;IAEX,IAAI,IAAI,CAAC;IAET,QAAQ,IAAI,CAAC,QAAQ,EAAE;QACrB,KAAK,YAAY;YACf,IAAI,GAAG,KAAC,aAAa,IAAC,CAAC,EAAE,WAAW,KAAM,iBAAiB,WAAI,CAAC;YAChE,MAAM;QACR,KAAK,QAAQ,CAAC;QACd;YACE,IAAI,GAAG,CACL,KAAC,UAAU,IACT,CAAC,EAAE,OAAO,EACV,IAAI,EAAE;oBACJ,IAAI,EAAE;wBACJ,EAAE,EAAE,EAAE,UAAU,EAAE,IAAI,EAAE,UAAU,EAAE;wBACpC,EAAE,EAAE,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,EAAE;wBAC5B,EAAE,EAAE,EAAE,WAAW,EAAE,IAAI,EAAE,WAAW,EAAE;qBACvC;oBACD,IAAI,EAAE,YAAY;oBAClB,YAAY;oBACZ,UAAU,EAAE,EAAE,CAAC,EAAE;wBACf,eAAe,CAAC,EAAE,CAAC,CAAC;wBACpB,oDAAoD;wBACpD,QAAQ,EAAE,EAAE;4BACV,KAAK,MAAM;gCACT,UAAU,CAAC,KAAC,aAAa,aAAG,CAAC,CAAC;gCAC9B,MAAM;4BACR,KAAK,UAAU;gCACb,UAAU,CAAC,KAAC,SAAS,aAAG,CAAC,CAAC;gCAC1B,MAAM;4BACR,KAAK,WAAW;gCACd,UAAU,CAAC,KAAC,aAAa,aAAG,CAAC,CAAC;gCAC9B,MAAM;4BACR,QAAQ;yBACT;oBACH,CAAC;iBACF,KACG,iBAAiB,WACrB,CACH,CAAC;YACF,MAAM;KACT;IAED,OAAO,CACL,KAAC,0BAA0B,IACzB,IAAI,EAAE,IAA6B,EACnC,cAAc,EAAE,IAAI,CAAC,cAAc,WACnC,CACH,CAAC;AACJ,CAAC,CAAC;AAEF,iBAAiB,CAAC,IAAI,GAAG;IACvB,QAAQ,EAAE,QAAQ;IAClB,KAAK,EAAE,eAAe;IACtB,QAAQ,EAAE,yBAAyB;IACnC,cAAc,EAAE,KAAK;IACrB,eAAe,EAAE,IAAI;IACrB,QAAQ,EAAE,sBAAsB;IAChC,WAAW,EAAE,IAAI;IACjB,WAAW,EAAE,KAAK;IAClB,UAAU,EAAE,IAAI;IAChB,aAAa,EAAE,SAAS;IACxB,WAAW,EAAE,gBAAgB;IAC7B,UAAU,EAAE,iBAAiB;IAC7B,cAAc,EAAE,IAAI;IACpB,sDAAsD;IACtD,MAAM,EAAE,MAAM,CAAC,gCAAgC,CAAC;CACjD,CAAC;AAEF,iBAAiB,CAAC,QAAQ,GAAG;IAC3B,QAAQ,EAAE;QACR,OAAO,EAAE,CAAC,YAAY,EAAE,QAAQ,CAAC;QACjC,OAAO,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE;KAC5B;IACD,QAAQ,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE,EAAE;IACvC,KAAK,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE,EAAE;IACpC,cAAc,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE,EAAE;IAChD,eAAe,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE,EAAE;IACjD,QAAQ,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE,EAAE;IACvC,WAAW,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE,EAAE;IAC7C,WAAW,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE,EAAE;IAC7C,UAAU,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE,EAAE;IAC5C,aAAa,EAAE;QACb,OAAO,EAAE,CAAC,SAAS,EAAE,QAAQ,EAAE,MAAM,EAAE,SAAS,EAAE,MAAM,CAAC;QACzD,OAAO,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE;KAC5B;IACD,WAAW,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE,EAAE;IAC1C,UAAU,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE,EAAE;IACzC,cAAc,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE,EAAE;IAChD,MAAM,EAAE,EAAE,KAAK,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,EAAE;CACrC,CAAC","sourcesContent":["// cSpell:words XPTI\nimport { Meta, Story } from '@storybook/react';\nimport { useState, useMemo, useContext, MouseEvent } from 'react';\nimport { action } from '@storybook/addon-actions';\n\nimport {\n  Button,\n  Banner,\n  StandardTreeProps,\n  treeHelpers,\n  StandardTree,\n  Configuration,\n  Modal,\n  ModalManagerContext,\n  BuildTheme,\n  Flex,\n  Text,\n  Actions,\n  StatusProps,\n  PageTemplateProps\n} from '@pega/cosmos-react-core';\nimport { AppShell, AppShellProps, TabbedPage, OneColumnPage } from '@pega/cosmos-react-build';\n\nimport { TableDemo } from '../../core/Table/Table.stories';\nimport { WorkbenchDemo } from '../Workbench/Workbench.stories';\nimport {\n  appExplorerMenuList,\n  branchesMenuList,\n  recordMenuList,\n  treeList\n} from '../AppShell/AppShell.mocks';\n\nimport { OneColumnForm } from './PageTemplates.mocks';\n\nexport default {\n  title: 'Build/PageTemplates',\n  parameters: {\n    layout: 'fullscreen'\n  }\n} as Meta;\n\nexport interface PageTemplatesStoryProps extends PageTemplateProps {\n  template:\n    | 'one column'\n    | 'two column'\n    | 'three column'\n    | 'four column'\n    | 'wide narrow'\n    | 'narrow wide'\n    | 'wide wide narrow'\n    | 'narrow wide wide'\n    | 'narrow wide narrow'\n    | 'tabbed';\n  showBreadcrumbs?: boolean;\n  pathData?: string;\n  showActions?: boolean;\n  showBanners?: boolean;\n  subTitle?: string;\n  showBranch?: boolean;\n  branchName?: string;\n  statusVariant?: StatusProps['variant'];\n  statusLabel: string;\n  showEditButton?: boolean;\n  onEdit?: (e: MouseEvent<HTMLButtonElement>) => void;\n}\n\ninterface AppShellStory {\n  main: AppShellProps['main'];\n  hideNavigation?: boolean;\n}\n\nexport const AppShellWithMenuNavigation = (args: AppShellStory) => {\n  const [currentNodeId, setCurrentNodeId] = useState<string | undefined>();\n  const [allNodes, setAllNodes] = useState<StandardTreeProps['nodes']>(treeList);\n\n  const onNodeClick = (id: string) => {\n    const clickedNode = treeHelpers.getNode(allNodes, id);\n\n    if (!clickedNode?.nodes) {\n      setCurrentNodeId(id);\n      return;\n    }\n\n    setAllNodes(tree =>\n      treeHelpers.mapNode(tree, id, node => {\n        return {\n          ...node,\n          expanded: !node.expanded\n        };\n      })\n    );\n\n    return (\n      <StandardTree\n        nodes={recordMenuList}\n        onNodeClick={onNodeClick}\n        currentNodeId={currentNodeId}\n      />\n    );\n  };\n\n  const appHeader = {\n    brand: {\n      name: 'AppStudioX'\n    },\n    utils: {\n      avatar: { name: 'Alan' },\n      search: {\n        placeholder: 'Search anything, anywhere'\n      },\n      branchName: 'test',\n      actions: [\n        {\n          primary: 'Switch branch',\n          id: 'switchbranch',\n          onClick: action('Clicked switchbranch')\n        },\n        {\n          primary: 'Create branch',\n          id: 'createbranch',\n          onClick: action('Clicked createbranch')\n        }\n      ]\n    },\n    links: [\n      {\n        id: '1',\n        name: 'Applications',\n        onClick: action('Clicked Applications')\n      },\n      {\n        id: '2',\n        name: 'Shared resources',\n        onClick: action('Clicked Shared resources')\n      },\n      {\n        id: '3',\n        name: 'Teams',\n        onClick: () => {}\n      },\n      {\n        id: '4',\n        name: 'AI & Analytics',\n        onClick: action('Clicked AI & Analytics')\n      },\n      {\n        id: '5',\n        name: 'Deploy',\n        onClick: action('Clicked Deploy')\n      }\n    ]\n  };\n\n  return (\n    <Configuration theme={BuildTheme}>\n      <AppShell\n        main={args.main}\n        appHeader={appHeader}\n        hideNav={args.hideNavigation}\n        appInfo={{\n          text: 'xCompass',\n          visual: {\n            icon: {\n              name: 'compass',\n              bgColor: '#20AA50'\n            }\n          }\n        }}\n        navigation={{\n          nodes: allNodes,\n          currentNodeId,\n          onNodeClick\n        }}\n        utils={{\n          onItemClick: id => {\n            if (id === 'explorer') {\n              setAllNodes(appExplorerMenuList);\n            }\n\n            if (id === 'branches') {\n              setAllNodes(branchesMenuList);\n            }\n\n            if (id === 'records') {\n              setAllNodes(recordMenuList);\n            }\n          },\n          items: [\n            {\n              label: 'App Explorer',\n              id: 'explorer'\n            },\n            {\n              label: 'Branches',\n              id: 'branches'\n            },\n            {\n              label: 'Records',\n              id: 'records'\n            }\n          ],\n          drawer: {\n            onBeforeClose: () => setAllNodes(treeList)\n          }\n        }}\n      />\n    </Configuration>\n  );\n};\n\nexport const PageTemplatesDemo: Story<PageTemplatesStoryProps & AppShellStory> = (\n  args: PageTemplatesStoryProps & AppShellStory\n) => {\n  const [currentTabId, setCurrentTabId] = useState('accounts');\n  const [content, setContent] = useState(\n    <>\n      <TableDemo />\n    </>\n  );\n  const { create } = useContext(ModalManagerContext);\n\n  const getPath = () => {\n    if (args.showBreadcrumbs) {\n      const path = args.pathData;\n\n      return path\n        ? path.split(',').map((crumb: string, i) => {\n            // FIXME: https://stackoverflow.com/questions/63616486/property-replaceall-does-not-exist-on-type-string\n            return {\n              id: crumb,\n              primary: crumb,\n              href: i < 3 ? `#${(crumb as any).replace(/\\s/g, '-')}` : undefined\n            };\n          })\n        : [];\n    }\n  };\n\n  const actions: PageTemplateProps['actions'] = args.showActions ? (\n    <Flex container>\n      <Button variant='primary'>Save</Button>\n      <Actions\n        menuAt={2}\n        items={[\n          {\n            id: '1',\n            text: 'Page action 1'\n          },\n          {\n            id: '2',\n            text: 'Page action 2'\n          }\n        ]}\n      />\n    </Flex>\n  ) : undefined;\n\n  const banners: PageTemplateProps['banners'] = args.showBanners ? (\n    <Banner\n      id='warning-banner'\n      variant='warning'\n      messages={['This is a warning banner. You have been warned!']}\n    />\n  ) : undefined;\n\n  const mainContent = <OneColumnForm />;\n  const modal = () => (\n    <Configuration theme={BuildTheme}>\n      <Modal heading='This is the Modal heading' autoWidth={false} center stretch={false}>\n        <Text>This is the content of the Modal.</Text>\n      </Modal>\n    </Configuration>\n  );\n\n  const pageTemplateProps = useMemo(() => {\n    const branchName = args.showBranch ? args.branchName : '';\n    const status = args.showBranch\n      ? {\n          type: args.statusVariant,\n          label: args.statusLabel\n        }\n      : undefined;\n\n    return {\n      title: args.title,\n      actions,\n      banners,\n      path: getPath(),\n      branchName,\n      status,\n      metadata: [\n        { id: '1', name: 'ID', value: 'InterestRate' },\n        { id: '2', name: 'Rule type', value: 'Field' },\n        {\n          id: '3',\n          name: 'Scope',\n          value: 'O1XPTI-CCompass-Work-MortgageRequest'\n        },\n        { id: '4', name: 'Application', value: 'XCompass' }\n      ],\n      additionalInfo: {\n        title: 'Interest rate',\n        description: 'Interest rate for the savings account',\n        fields: [\n          {\n            id: '1',\n            name: 'Id',\n            value: 'InterestRate'\n          },\n          {\n            id: '2',\n            name: 'Rule type',\n            value: 'Field'\n          },\n          {\n            id: '3',\n            name: 'Scope',\n            value: 'O1XPTI-CCompass-Work-MortgageRequest'\n          },\n          {\n            id: '4',\n            name: 'Branch',\n            value: 'xCompass (Main)'\n          },\n          {\n            id: '5',\n            name: 'Application',\n            value: 'XCompass'\n          }\n        ],\n        onEdit: args.showEditButton\n          ? (e: MouseEvent<HTMLButtonElement>) => {\n              args.onEdit?.(e);\n              create(modal);\n            }\n          : undefined\n      }\n    };\n  }, [args]);\n\n  let demo;\n\n  switch (args.template) {\n    case 'one column':\n      demo = <OneColumnPage a={mainContent} {...pageTemplateProps} />;\n      break;\n    case 'tabbed':\n    default:\n      demo = (\n        <TabbedPage\n          a={content}\n          tabs={{\n            tabs: [\n              { id: 'accounts', name: 'Accounts' },\n              { id: 'form', name: 'Form' },\n              { id: 'workbench', name: 'Workbench' }\n            ],\n            type: 'horizontal',\n            currentTabId,\n            onTabClick: id => {\n              setCurrentTabId(id);\n              // eslint-disable-next-line sonarjs/no-nested-switch\n              switch (id) {\n                case 'form':\n                  setContent(<OneColumnForm />);\n                  break;\n                case 'accounts':\n                  setContent(<TableDemo />);\n                  break;\n                case 'workbench':\n                  setContent(<WorkbenchDemo />);\n                  break;\n                default:\n              }\n            }\n          }}\n          {...pageTemplateProps}\n        />\n      );\n      break;\n  }\n\n  return (\n    <AppShellWithMenuNavigation\n      main={demo as AppShellProps['main']}\n      hideNavigation={args.hideNavigation}\n    />\n  );\n};\n\nPageTemplatesDemo.args = {\n  template: 'tabbed',\n  title: 'Interest rate',\n  subTitle: 'Uplus-Data-Integrations',\n  hideNavigation: false,\n  showBreadcrumbs: true,\n  pathData: 'Home,xCompass,Fields',\n  showActions: true,\n  showBanners: false,\n  showBranch: true,\n  statusVariant: 'pending',\n  statusLabel: 'private change',\n  branchName: 'xCompass (Main)',\n  showEditButton: true,\n  // eslint-disable-next-line demo-patterns/literal-args\n  onEdit: action('Clicked edit button in popover')\n};\n\nPageTemplatesDemo.argTypes = {\n  template: {\n    options: ['one column', 'tabbed'],\n    control: { type: 'select' }\n  },\n  subTitle: { control: { type: 'text' } },\n  title: { control: { type: 'text' } },\n  hideNavigation: { control: { type: 'boolean' } },\n  showBreadcrumbs: { control: { type: 'boolean' } },\n  pathData: { control: { type: 'text' } },\n  showActions: { control: { type: 'boolean' } },\n  showBanners: { control: { type: 'boolean' } },\n  showBranch: { control: { type: 'boolean' } },\n  statusVariant: {\n    options: ['success', 'urgent', 'warn', 'pending', 'info'],\n    control: { type: 'select' }\n  },\n  statusLabel: { control: { type: 'text' } },\n  branchName: { control: { type: 'text' } },\n  showEditButton: { control: { type: 'boolean' } },\n  onEdit: { table: { disable: true } }\n};\n"]}
+{"version":3,"file":"PageTemplates.stories.js","sourceRoot":"","sources":["../../../src/build/PageTemplates/PageTemplates.stories.tsx"],"names":[],"mappings":"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","sourcesContent":["// cSpell:words XPTI\nimport { Meta, Story } from '@storybook/react';\nimport { useState, useMemo, useContext, MouseEvent } from 'react';\nimport { action } from '@storybook/addon-actions';\n\nimport {\n  Button,\n  Banner,\n  StandardTreeProps,\n  treeHelpers,\n  StandardTree,\n  Configuration,\n  Modal,\n  ModalManagerContext,\n  BuildTheme,\n  Flex,\n  Text,\n  Actions,\n  StatusProps,\n  PageTemplateProps\n} from '@pega/cosmos-react-core';\nimport {\n  AppShell,\n  AppShellProps,\n  TabbedPage,\n  OneColumnPage,\n  ObjectPreview\n} from '@pega/cosmos-react-build';\n\nimport { TableDemo } from '../../core/Table/Table.stories';\nimport { WorkbenchDemo } from '../Workbench/Workbench.stories';\nimport {\n  appExplorerMenuList,\n  branchesMenuList,\n  recordMenuList,\n  treeList\n} from '../AppShell/AppShell.mocks';\n\nimport { OneColumnForm, PreviewMainContent } from './PageTemplates.mocks';\n\nexport default {\n  title: 'Build/PageTemplates',\n  parameters: {\n    layout: 'fullscreen'\n  }\n} as Meta;\n\nexport interface PageTemplatesStoryProps extends PageTemplateProps {\n  template:\n    | 'one column'\n    | 'two column'\n    | 'three column'\n    | 'four column'\n    | 'wide narrow'\n    | 'narrow wide'\n    | 'wide wide narrow'\n    | 'narrow wide wide'\n    | 'narrow wide narrow'\n    | 'tabbed';\n  showBreadcrumbs?: boolean;\n  pathData?: string;\n  showActions?: boolean;\n  showBanners?: boolean;\n  subTitle?: string;\n  showStatus?: boolean;\n  statusVariant: StatusProps['variant'];\n  statusLabel: string;\n  showEditButton?: boolean;\n  onEdit?: (e: MouseEvent<HTMLButtonElement>) => void;\n}\n\ninterface AppShellStory {\n  main: AppShellProps['main'];\n  hideNavigation?: boolean;\n}\n\nexport const PageTemplatesDemo: Story<PageTemplatesStoryProps & AppShellStory> = (\n  args: PageTemplatesStoryProps & AppShellStory\n) => {\n  const [currentTabId, setCurrentTabId] = useState('accounts');\n  const [content, setContent] = useState(<TableDemo />);\n  const { create } = useContext(ModalManagerContext);\n\n  const getPath = () => {\n    if (args.showBreadcrumbs) {\n      const path = args.pathData;\n\n      return path\n        ? path.split(',').map((crumb: string, i) => {\n            // FIXME: https://stackoverflow.com/questions/63616486/property-replaceall-does-not-exist-on-type-string\n            return {\n              id: crumb,\n              primary: crumb,\n              href: i < 3 ? `#${(crumb as any).replace(/\\s/g, '-')}` : undefined\n            };\n          })\n        : [];\n    }\n  };\n\n  const actions: PageTemplateProps['actions'] = args.showActions ? (\n    <Flex container>\n      <Button variant='primary'>Save</Button>\n      <Actions\n        menuAt={2}\n        items={[\n          {\n            id: '1',\n            text: 'Page action 1'\n          },\n          {\n            id: '2',\n            text: 'Page action 2'\n          }\n        ]}\n      />\n    </Flex>\n  ) : undefined;\n\n  const banners: PageTemplateProps['banners'] = args.showBanners ? (\n    <Banner\n      id='warning-banner'\n      variant='warning'\n      messages={['This is a warning banner. You have been warned!']}\n    />\n  ) : undefined;\n\n  const mainContent = <OneColumnForm />;\n  const modal = () => (\n    <Configuration theme={BuildTheme}>\n      <Modal heading='This is the Modal heading' autoWidth={false} center stretch={false}>\n        <Text>This is the content of the Modal.</Text>\n      </Modal>\n    </Configuration>\n  );\n\n  const AppShellWithMenuNavigation = ({ main, hideNavigation }: AppShellStory) => {\n    const [currentNodeId, setCurrentNodeId] = useState<string | undefined>();\n    const [allNodes, setAllNodes] = useState<StandardTreeProps['nodes']>(treeList);\n\n    const onNodeClick = (id: string) => {\n      const clickedNode = treeHelpers.getNode(allNodes, id);\n\n      if (!clickedNode?.nodes) {\n        setCurrentNodeId(id);\n        return;\n      }\n\n      setAllNodes(tree =>\n        treeHelpers.mapNode(tree, id, node => {\n          return {\n            ...node,\n            expanded: !node.expanded\n          };\n        })\n      );\n\n      return (\n        <StandardTree\n          nodes={recordMenuList}\n          onNodeClick={onNodeClick}\n          currentNodeId={currentNodeId}\n        />\n      );\n    };\n\n    const appHeader = {\n      brand: {\n        name: 'AppStudioX',\n        visual: {\n          icon: 'pegasus'\n        }\n      },\n      utils: {\n        avatar: { name: 'Alan' },\n        search: {\n          placeholder: 'Search anything, anywhere'\n        },\n        branchName: 'test',\n        actions: [\n          {\n            primary: 'Switch branch',\n            id: 'switchbranch',\n            onClick: action('Clicked switchbranch')\n          },\n          {\n            primary: 'Create branch',\n            id: 'createbranch',\n            onClick: action('Clicked createbranch')\n          }\n        ]\n      },\n      links: [\n        {\n          id: '1',\n          name: 'Applications',\n          onClick: action('Clicked Applications')\n        },\n        {\n          id: '2',\n          name: 'Shared resources',\n          onClick: action('Clicked Shared resources')\n        },\n        {\n          id: '3',\n          name: 'Teams',\n          onClick: () => {}\n        },\n        {\n          id: '4',\n          name: 'AI & Analytics',\n          onClick: action('Clicked AI & Analytics')\n        },\n        {\n          id: '5',\n          name: 'Deploy',\n          onClick: action('Clicked Deploy')\n        }\n      ]\n    };\n\n    return (\n      <Configuration theme={BuildTheme}>\n        <AppShell\n          main={main}\n          appHeader={appHeader}\n          hideNav={hideNavigation}\n          appInfo={{\n            text: 'xCompass',\n            visual: {\n              icon: 'compass',\n              backgroundColor: '#20AA50'\n            }\n          }}\n          navigation={{\n            nodes: allNodes,\n            currentNodeId,\n            onNodeClick\n          }}\n          utils={{\n            onItemClick: id => {\n              if (id === 'explorer') {\n                setAllNodes(appExplorerMenuList);\n              }\n\n              if (id === 'branches') {\n                setAllNodes(branchesMenuList);\n              }\n\n              if (id === 'records') {\n                setAllNodes(recordMenuList);\n              }\n            },\n            items: [\n              {\n                label: 'App Explorer',\n                id: 'explorer'\n              },\n              {\n                label: 'Branches',\n                id: 'branches'\n              },\n              {\n                label: 'Records',\n                id: 'records'\n              }\n            ],\n            drawer: {\n              onBeforeClose: () => setAllNodes(treeList)\n            }\n          }}\n        />\n      </Configuration>\n    );\n  };\n\n  const pageTemplateProps = useMemo(() => {\n    const status = args.showStatus\n      ? {\n          type: args.statusVariant,\n          label: args.statusLabel\n        }\n      : undefined;\n\n    return {\n      title: args.title,\n      actions,\n      banners,\n      path: getPath(),\n      status,\n      metadata: [\n        { id: '1', name: 'ID', value: 'InterestRate' },\n        { id: '2', name: 'Rule type', value: 'Field' },\n        {\n          id: '3',\n          name: 'Scope',\n          value: 'O1XPTI-CCompass-Work-MortgageRequest'\n        },\n        { id: '4', name: 'Application', value: 'XCompass' }\n      ],\n      additionalInfo: {\n        title: 'Interest rate',\n        description: 'Interest rate for the savings account',\n        fields: [\n          {\n            id: '1',\n            name: 'Id',\n            value: 'InterestRate'\n          },\n          {\n            id: '2',\n            name: 'Rule type',\n            value: 'Field'\n          },\n          {\n            id: '3',\n            name: 'Scope',\n            value: 'O1XPTI-CCompass-Work-MortgageRequest'\n          },\n          {\n            id: '4',\n            name: 'Branch',\n            value: 'xCompass (Main)'\n          },\n          {\n            id: '5',\n            name: 'Application',\n            value: 'XCompass'\n          }\n        ],\n        onEdit: args.showEditButton\n          ? (e: MouseEvent<HTMLButtonElement>) => {\n              args.onEdit?.(e);\n              create(modal);\n            }\n          : undefined\n      }\n    };\n  }, [args]);\n\n  let demo;\n  const [openDrawer, setOpenDrawer] = useState(false);\n\n  switch (args.template) {\n    case 'one column':\n      demo = <OneColumnPage a={mainContent} {...pageTemplateProps} />;\n      break;\n    case 'tabbed':\n    default:\n      demo = (\n        <>\n          <TabbedPage\n            a={content}\n            tabs={{\n              tabs: [\n                { id: 'accounts', name: 'Accounts' },\n                { id: 'form', name: 'Form' },\n                { id: 'workbench', name: 'Workbench' }\n              ],\n              type: 'horizontal',\n              currentTabId,\n              onTabClick: id => {\n                setCurrentTabId(id);\n                // eslint-disable-next-line sonarjs/no-nested-switch\n                switch (id) {\n                  case 'form':\n                    setContent(\n                      <OneColumnForm\n                        previewCallback={() => {\n                          setOpenDrawer(true);\n                        }}\n                      />\n                    );\n                    break;\n                  case 'accounts':\n                    setContent(<TableDemo />);\n                    break;\n                  case 'workbench':\n                    setContent(<WorkbenchDemo />);\n                    break;\n                  default:\n                }\n              }\n            }}\n            {...pageTemplateProps}\n          />\n          <ObjectPreview\n            open={openDrawer}\n            onDismiss={() => setOpenDrawer(false)}\n            header={{\n              title: 'Interest rate',\n              metadata: [\n                { id: '1', name: 'ID', value: 'InterestRate' },\n                { id: '2', name: 'Rule type', value: 'Field' },\n                {\n                  id: '3',\n                  name: 'Scope',\n                  value: 'O1XPTI-CCompass-Work-MortgageRequest'\n                },\n                { id: '4', name: 'Application', value: 'XCompass' }\n              ],\n              additionalInfo: {\n                title: 'Interest rate',\n                description: 'Interest rate for the savings account',\n                fields: [\n                  {\n                    id: '1',\n                    name: 'Id',\n                    value: 'InterestRate'\n                  },\n                  {\n                    id: '2',\n                    name: 'Rule type',\n                    value: 'Field'\n                  },\n                  {\n                    id: '3',\n                    name: 'Scope',\n                    value: 'O1XPTI-CCompass-Work-MortgageRequest'\n                  },\n                  {\n                    id: '4',\n                    name: 'Branch',\n                    value: 'xCompass (Main)'\n                  },\n                  {\n                    id: '5',\n                    name: 'Application',\n                    value: 'XCompass'\n                  }\n                ],\n                onEdit: () => {}\n              }\n            }}\n            content={<PreviewMainContent />}\n            primaryAction={{\n              id: 'PA',\n              text: 'Save',\n              onClick: () => {}\n            }}\n            secondaryAction={{\n              id: 'SA',\n              text: 'Open rule',\n              onClick: () => {}\n            }}\n            additionalActions={{\n              items: [\n                {\n                  id: '1',\n                  text: 'Page action 1'\n                },\n                {\n                  id: '2',\n                  text: 'Page action 2'\n                }\n              ]\n            }}\n          />\n        </>\n      );\n      break;\n  }\n\n  return (\n    <AppShellWithMenuNavigation\n      main={demo as AppShellProps['main']}\n      hideNavigation={args.hideNavigation}\n    />\n  );\n};\n\nPageTemplatesDemo.args = {\n  template: 'tabbed',\n  title: 'Interest rate',\n  subTitle: 'Uplus-Data-Integrations',\n  hideNavigation: false,\n  showBreadcrumbs: true,\n  pathData: 'Home,xCompass,Fields',\n  showActions: true,\n  showBanners: false,\n  showStatus: true,\n  statusVariant: 'pending',\n  statusLabel: 'private change',\n  showEditButton: true,\n  // eslint-disable-next-line demo-patterns/literal-args\n  onEdit: action('Clicked edit button in popover')\n};\n\nPageTemplatesDemo.argTypes = {\n  template: {\n    options: ['one column', 'tabbed'],\n    control: { type: 'select' }\n  },\n  subTitle: { control: { type: 'text' } },\n  title: { control: { type: 'text' } },\n  hideNavigation: { control: { type: 'boolean' } },\n  showBreadcrumbs: { control: { type: 'boolean' } },\n  pathData: { control: { type: 'text' } },\n  showActions: { control: { type: 'boolean' } },\n  showBanners: { control: { type: 'boolean' } },\n  showStatus: { control: { type: 'boolean' } },\n  statusVariant: {\n    options: ['success', 'urgent', 'warn', 'pending', 'info'],\n    control: { type: 'select' }\n  },\n  statusLabel: { control: { type: 'text' } },\n  showEditButton: { control: { type: 'boolean' } },\n  onEdit: { table: { disable: true } }\n};\n"]}

package/lib/build/Workbench/Workbench.stories.js

@@ -12,7 +12,7 @@ export default {
         layout: 'fullscreen'
     },
     decorators: [
-        StoryComp => (_jsx("div", { style: { height: '100vh' }, children: _jsx(StoryComp, {}, void 0) }, void 0))
+        StoryComp => (_jsx("div", { style: { height: '100vh' }, children: _jsx(StoryComp, {}) }))
     ]
 };
 export const WorkbenchDemo = (args) => {
@@ -22,7 +22,7 @@ export const WorkbenchDemo = (args) => {
     const Content = () => {
         const [currentNodeId, setCurrentNodeId] = useState();
         const [allNodes, setAllNodes] = useState(sideList);
-        return (_jsxs(_Fragment, { children: [_jsx(SearchInput, {}, void 0), _jsx(StandardTree, { currentNodeId: currentNodeId, nodes: allNodes, onNodeClick: id => {
+        return (_jsxs(_Fragment, { children: [_jsx(SearchInput, {}), _jsx(StandardTree, { currentNodeId: currentNodeId, nodes: allNodes, onNodeClick: id => {
                         const clickedNode = treeHelpers.getNode(allNodes, id);
                         setCurrentNodeId(id);
                         // If a leaf node, just set to current
@@ -34,10 +34,10 @@ export const WorkbenchDemo = (args) => {
                                 expanded: !node.expanded
                             };
                         }));
-                    } }, void 0)] }, void 0));
+                    } })] }));
     };
     const ConfigContent = () => {
-        return (_jsxs(Flex, { container: { direction: 'column', gap: 2 }, children: [_jsx(Input, { defaultValue: heading }, void 0), _jsx(TextArea, { name: 'Description', required: true, label: 'Description', displayCharCount: true, maxLength: 300, value: description }, void 0)] }, void 0));
+        return (_jsxs(Flex, { container: { direction: 'column', gap: 2 }, children: [_jsx(Input, { defaultValue: heading }), _jsx(TextArea, { name: 'Description', required: true, label: 'Description', displayCharCount: true, maxLength: 300, value: description })] }));
     };
     const FlowChartView = () => {
         const [graphData, setGraphData] = useState({
@@ -65,15 +65,15 @@ export const WorkbenchDemo = (args) => {
             const node = graph.getNode(nodeId);
             launchPropertyModal(node);
         };
-        return (_jsx(FlowModeller, { graphData: graphData, nodeLibrary: nodeLibrary, onNodeAdd: addNode, onNodeClick: selectNode, actions: nodeActions }, void 0));
+        return (_jsx(FlowModeller, { graphData: graphData, nodeLibrary: nodeLibrary, onNodeAdd: addNode, onNodeClick: selectNode, actions: nodeActions }));
     };
     const ExplorerContent = () => {
-        return _jsx(SearchInput, {}, void 0);
+        return _jsx(SearchInput, {});
     };
     const utilityPanels = [
-        { title: 'Steps', id: '1', icon: 'plus', content: _jsx(Content, {}, void 0) },
-        { title: 'Explorer', id: '2', icon: 'app', content: _jsx(ExplorerContent, {}, void 0) },
-        { title: 'Views', id: '3', icon: 'headline', content: _jsx(Content, {}, void 0) }
+        { title: 'Steps', id: '1', icon: 'plus', content: _jsx(Content, {}) },
+        { title: 'Explorer', id: '2', icon: 'app', content: _jsx(ExplorerContent, {}) },
+        { title: 'Views', id: '3', icon: 'headline', content: _jsx(Content, {}) }
     ];
     const toolbarActions = {
         undo: { id: 'undo', disabled: false, onClick: () => { } },
@@ -83,12 +83,12 @@ export const WorkbenchDemo = (args) => {
                 toolbarActions: args.showActions ? toolbarActions : undefined
             }, configurationPanel: {
                 open,
-                content: _jsx(ConfigContent, {}, void 0),
+                content: _jsx(ConfigContent, {}),
                 header: heading,
                 onDismiss: () => {
                     setOpen(false);
                 }
-            }, children: _jsx(FlowChartView, {}, void 0) }, void 0) }, void 0));
+            }, children: _jsx(FlowChartView, {}) }) }));
 };
 WorkbenchDemo.args = {
     showActions: true,

package/lib/build/Workbench/Workbench.stories.js.map

@@ -1 +1 @@
-{"version":3,"file":"Workbench.stories.js","sourceRoot":"","sources":["../../../src/build/Workbench/Workbench.stories.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Meta, Story } from '@storybook/react';\nimport { useState } from 'react';\n\nimport {\n  StandardTreeProps,\n  treeHelpers,\n  StandardTree,\n  Flex,\n  SearchInput,\n  TextArea,\n  Input,\n  Configuration,\n  BuildTheme\n} from '@pega/cosmos-react-core';\nimport { FlowModeller, Workbench } from '@pega/cosmos-react-build';\nimport { IconNames } from '@pega/cosmos-react-core/lib/components/Icon/iconNames';\nimport {\n  NodeProps,\n  NodeType\n} from '@pega/cosmos-react-build/lib/components/FlowModeller/Node/Node.types';\nimport {\n  DirectedGraph,\n  GraphData,\n  ConnectorProps\n} from '@pega/cosmos-react-build/lib/components/FlowModeller/Renderer/Utils/Graph';\nimport FlowModellerHelper from '@pega/cosmos-react-build/lib/components/FlowModeller/helper';\nimport { AddNodeHandlerParams } from '@pega/cosmos-react-build/lib/components/FlowModeller/Renderer/Renderer.types';\n\nimport {\n  nodeLibrary,\n  nodeActions,\n  exampleCRMNodesData as nodesData,\n  exampleCRMConnectorsData as connectorsData\n} from '../FlowModeller/FlowModeller.mocks';\n\nimport { sideList } from './Workbench.mocks';\n\nexport default {\n  title: 'Build/Workbench',\n  parameters: {\n    layout: 'fullscreen'\n  },\n  decorators: [\n    StoryComp => (\n      <div style={{ height: '100vh' }}>\n        <StoryComp />\n      </div>\n    )\n  ]\n} as Meta;\n\nexport interface WorkbenchStoryProps {\n  showActions?: boolean;\n  hideSidePanel?: boolean;\n  zoom?: boolean;\n}\n\nexport const WorkbenchDemo: Story<WorkbenchStoryProps> = (args: WorkbenchStoryProps) => {\n  const [open, setOpen] = useState(false);\n  const [heading, setHeading] = useState('');\n  const [description, setDescription] = useState('');\n  const Content = () => {\n    const [currentNodeId, setCurrentNodeId] = useState<string | undefined>();\n    const [allNodes, setAllNodes] = useState<StandardTreeProps['nodes']>(sideList);\n\n    return (\n      <>\n        <SearchInput />\n        <StandardTree\n          currentNodeId={currentNodeId}\n          nodes={allNodes}\n          onNodeClick={id => {\n            const clickedNode = treeHelpers.getNode(allNodes, id);\n            setCurrentNodeId(id);\n            // If a leaf node, just set to current\n            if (!clickedNode?.nodes) return;\n\n            setAllNodes(tree =>\n              treeHelpers.mapNode(tree, id, node => {\n                return {\n                  ...node,\n                  expanded: !node.expanded\n                };\n              })\n            );\n          }}\n        />\n      </>\n    );\n  };\n\n  const ConfigContent = () => {\n    return (\n      <Flex container={{ direction: 'column', gap: 2 }}>\n        <Input defaultValue={heading} />\n        <TextArea\n          name='Description'\n          required\n          label='Description'\n          displayCharCount\n          maxLength={300}\n          value={description}\n        />\n      </Flex>\n    );\n  };\n\n  const FlowChartView = () => {\n    const [graphData, setGraphData] = useState<GraphData<NodeProps, ConnectorProps>>({\n      nodes: nodesData,\n      connectors: connectorsData\n    });\n\n    const launchPropertyModal = (node: NodeProps) => {\n      setHeading(node.label);\n      setDescription(node.description || '');\n      setOpen(true);\n    };\n\n    const addNode = (nodeType: NodeType, metaData: AddNodeHandlerParams) => {\n      const UpdatedData = FlowModellerHelper.addNode({\n        nodeType,\n        graphData,\n        metaData\n      });\n      if (UpdatedData) {\n        const newGraphData: GraphData<NodeProps, ConnectorProps> = UpdatedData;\n        setGraphData(newGraphData);\n      }\n    };\n\n    const selectNode = (nodeId: NodeProps['id']) => {\n      const graph = new DirectedGraph(graphData);\n      const node = graph.getNode(nodeId);\n      launchPropertyModal(node);\n    };\n\n    return (\n      <FlowModeller\n        graphData={graphData}\n        nodeLibrary={nodeLibrary}\n        onNodeAdd={addNode}\n        onNodeClick={selectNode}\n        actions={nodeActions}\n      />\n    );\n  };\n\n  const ExplorerContent = () => {\n    return <SearchInput />;\n  };\n\n  const utilityPanels = [\n    { title: 'Steps', id: '1', icon: 'plus' as IconNames, content: <Content /> },\n    { title: 'Explorer', id: '2', icon: 'app' as IconNames, content: <ExplorerContent /> },\n    { title: 'Views', id: '3', icon: 'headline' as IconNames, content: <Content /> }\n  ];\n\n  const toolbarActions = {\n    undo: { id: 'undo', disabled: false, onClick: () => {} },\n    redo: { id: 'redo', disabled: true, onClick: () => {} }\n  };\n\n  return (\n    <Configuration theme={BuildTheme}>\n      <Workbench\n        utilityPanels={utilityPanels}\n        initiallyVisiblePanelId={utilityPanels[0].id}\n        toolbar={{\n          toolbarActions: args.showActions ? toolbarActions : undefined\n        }}\n        configurationPanel={{\n          open,\n          content: <ConfigContent />,\n          header: heading,\n          onDismiss: () => {\n            setOpen(false);\n          }\n        }}\n      >\n        <FlowChartView />\n      </Workbench>\n    </Configuration>\n  );\n};\n\nWorkbenchDemo.args = {\n  showActions: true,\n  hideSidePanel: false\n};\n\nWorkbenchDemo.argTypes = {\n  showActions: { control: { type: 'boolean' } },\n  hideSidePanel: { control: { type: 'boolean' } }\n};\n"]}
+{"version":3,"file":"Workbench.stories.js","sourceRoot":"","sources":["../../../src/build/Workbench/Workbench.stories.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Meta, Story } from '@storybook/react';\nimport { useState } from 'react';\n\nimport {\n  StandardTreeProps,\n  treeHelpers,\n  StandardTree,\n  Flex,\n  SearchInput,\n  TextArea,\n  Input,\n  Configuration,\n  BuildTheme\n} from '@pega/cosmos-react-core';\nimport { FlowModeller, Workbench } from '@pega/cosmos-react-build';\nimport { IconNames } from '@pega/cosmos-react-core/lib/components/Icon/iconNames';\nimport {\n  NodeProps,\n  NodeType\n} from '@pega/cosmos-react-build/lib/components/FlowModeller/Node/Node.types';\nimport {\n  DirectedGraph,\n  GraphData,\n  ConnectorProps\n} from '@pega/cosmos-react-build/lib/components/FlowModeller/Renderer/Utils/Graph';\nimport FlowModellerHelper from '@pega/cosmos-react-build/lib/components/FlowModeller/helper';\nimport { AddNodeHandlerParams } from '@pega/cosmos-react-build/lib/components/FlowModeller/Renderer/Renderer.types';\n\nimport {\n  nodeLibrary,\n  nodeActions,\n  exampleCRMNodesData as nodesData,\n  exampleCRMConnectorsData as connectorsData\n} from '../FlowModeller/FlowModeller.mocks';\n\nimport { sideList } from './Workbench.mocks';\n\nexport default {\n  title: 'Build/Workbench',\n  parameters: {\n    layout: 'fullscreen'\n  },\n  decorators: [\n    StoryComp => (\n      <div style={{ height: '100vh' }}>\n        <StoryComp />\n      </div>\n    )\n  ]\n} as Meta;\n\nexport interface WorkbenchStoryProps {\n  showActions?: boolean;\n  hideSidePanel?: boolean;\n  zoom?: boolean;\n}\n\nexport const WorkbenchDemo: Story<WorkbenchStoryProps> = (args: WorkbenchStoryProps) => {\n  const [open, setOpen] = useState(false);\n  const [heading, setHeading] = useState('');\n  const [description, setDescription] = useState('');\n  const Content = () => {\n    const [currentNodeId, setCurrentNodeId] = useState<string | undefined>();\n    const [allNodes, setAllNodes] = useState<StandardTreeProps['nodes']>(sideList);\n\n    return (\n      <>\n        <SearchInput />\n        <StandardTree\n          currentNodeId={currentNodeId}\n          nodes={allNodes}\n          onNodeClick={id => {\n            const clickedNode = treeHelpers.getNode(allNodes, id);\n            setCurrentNodeId(id);\n            // If a leaf node, just set to current\n            if (!clickedNode?.nodes) return;\n\n            setAllNodes(tree =>\n              treeHelpers.mapNode(tree, id, node => {\n                return {\n                  ...node,\n                  expanded: !node.expanded\n                };\n              })\n            );\n          }}\n        />\n      </>\n    );\n  };\n\n  const ConfigContent = () => {\n    return (\n      <Flex container={{ direction: 'column', gap: 2 }}>\n        <Input defaultValue={heading} />\n        <TextArea\n          name='Description'\n          required\n          label='Description'\n          displayCharCount\n          maxLength={300}\n          value={description}\n        />\n      </Flex>\n    );\n  };\n\n  const FlowChartView = () => {\n    const [graphData, setGraphData] = useState<GraphData<NodeProps, ConnectorProps>>({\n      nodes: nodesData,\n      connectors: connectorsData\n    });\n\n    const launchPropertyModal = (node: NodeProps) => {\n      setHeading(node.label);\n      setDescription(node.description || '');\n      setOpen(true);\n    };\n\n    const addNode = (nodeType: NodeType, metaData: AddNodeHandlerParams) => {\n      const UpdatedData = FlowModellerHelper.addNode({\n        nodeType,\n        graphData,\n        metaData\n      });\n      if (UpdatedData) {\n        const newGraphData: GraphData<NodeProps, ConnectorProps> = UpdatedData;\n        setGraphData(newGraphData);\n      }\n    };\n\n    const selectNode = (nodeId: NodeProps['id']) => {\n      const graph = new DirectedGraph(graphData);\n      const node = graph.getNode(nodeId);\n      launchPropertyModal(node);\n    };\n\n    return (\n      <FlowModeller\n        graphData={graphData}\n        nodeLibrary={nodeLibrary}\n        onNodeAdd={addNode}\n        onNodeClick={selectNode}\n        actions={nodeActions}\n      />\n    );\n  };\n\n  const ExplorerContent = () => {\n    return <SearchInput />;\n  };\n\n  const utilityPanels = [\n    { title: 'Steps', id: '1', icon: 'plus' as IconNames, content: <Content /> },\n    { title: 'Explorer', id: '2', icon: 'app' as IconNames, content: <ExplorerContent /> },\n    { title: 'Views', id: '3', icon: 'headline' as IconNames, content: <Content /> }\n  ];\n\n  const toolbarActions = {\n    undo: { id: 'undo', disabled: false, onClick: () => {} },\n    redo: { id: 'redo', disabled: true, onClick: () => {} }\n  };\n\n  return (\n    <Configuration theme={BuildTheme}>\n      <Workbench\n        utilityPanels={utilityPanels}\n        initiallyVisiblePanelId={utilityPanels[0].id}\n        toolbar={{\n          toolbarActions: args.showActions ? toolbarActions : undefined\n        }}\n        configurationPanel={{\n          open,\n          content: <ConfigContent />,\n          header: heading,\n          onDismiss: () => {\n            setOpen(false);\n          }\n        }}\n      >\n        <FlowChartView />\n      </Workbench>\n    </Configuration>\n  );\n};\n\nWorkbenchDemo.args = {\n  showActions: true,\n  hideSidePanel: false\n};\n\nWorkbenchDemo.argTypes = {\n  showActions: { control: { type: 'boolean' } },\n  hideSidePanel: { control: { type: 'boolean' } }\n};\n"]}

package/lib/condition-builder/ConditionBuilder/ConditionBuilder.stories.js

@@ -42,11 +42,11 @@ export const DefaultBuilder = (args) => {
             setCondition(c);
             hidePopover();
             sessionStorage.setItem('CBDemoCondition', JSON.stringify(c)); // Persist on sessionStorage for the next time
-        } }, void 0));
+        } }));
     return (_jsxs(StyledGrid, { container: {
             cols: '1fr',
             rowGap: 3
-        }, children: [!args.renderInPopover && builderJsx, args.renderInPopover && (_jsxs(_Fragment, { children: [_jsx(Button, { ref: buttonRef, "aria-haspopup": true, "aria-expanded": isOpen, onClick: () => setIsOpen(!isOpen), onKeyDown: hideOnEscape, children: "Open Condition builder" }, void 0), _jsx(Popover, { show: isOpen, ref: setPopoverEl, target: buttonRef.current, placement: 'bottom-start', children: _jsx(Flex, { container: { pad: 1 }, children: builderJsx }, void 0) }, void 0)] }, void 0)), _jsxs("div", { children: [_jsx(Text, { variant: 'h4', children: "Output:" }, void 0), _jsx(StyledCodeBlock, { children: condition ? JSON.stringify(condition, null, 2) : '(No condition)' }, void 0)] }, void 0), _jsxs("div", { children: [_jsx(Text, { variant: 'h4', children: "Formatted Output:" }, void 0), _jsx(StyledCodeBlock, { children: condition ? formatCondition(condition, demoFields, translate) : '(No condition)' }, void 0)] }, void 0)] }, void 0));
+        }, children: [!args.renderInPopover && builderJsx, args.renderInPopover && (_jsxs(_Fragment, { children: [_jsx(Button, { ref: buttonRef, "aria-haspopup": true, "aria-expanded": isOpen, onClick: () => setIsOpen(!isOpen), onKeyDown: hideOnEscape, children: "Open Condition builder" }), _jsx(Popover, { show: isOpen, ref: setPopoverEl, target: buttonRef.current, placement: 'bottom-start', children: _jsx(Flex, { container: { pad: 1 }, children: builderJsx }) })] })), _jsxs("div", { children: [_jsx(Text, { variant: 'h4', children: "Output:" }), _jsx(StyledCodeBlock, { children: condition ? JSON.stringify(condition, null, 2) : '(No condition)' })] }), _jsxs("div", { children: [_jsx(Text, { variant: 'h4', children: "Formatted Output:" }), _jsx(StyledCodeBlock, { children: condition ? formatCondition(condition, demoFields, translate) : '(No condition)' })] })] }));
 };
 DefaultBuilder.args = {
     validComparators: false,
@@ -80,13 +80,13 @@ export const FieldConditionDemo = (args) => {
     const builderJsx = (_jsx(FieldCondition, { targetField: 'lastActivityAt', fields: demoFields, condition: condition, validComparators: args.validComparators ? demoComparators : undefined, validRhsTypes: new Set(['LITERAL', 'FIELD', 'DATE_FUNCTION', 'RELATIVE_DATE']), dateFunctions: args.dateFunctions ? demoDateFunctions : undefined, onSubmit: c => {
             hidePopover();
             setCondition(c);
-        } }, void 0));
+        } }));
     return (_jsxs(StyledGrid, { container: {
             cols: 'repeat(2, minmax(0, 1fr))',
             justifyItems: 'stretch',
             alignItems: 'start',
             colGap: 4
-        }, children: [!args.renderInPopover && builderJsx, args.renderInPopover && (_jsxs(_Fragment, { children: [_jsx(Button, { ref: buttonRef, "aria-haspopup": true, "aria-expanded": isOpen, onClick: () => setIsOpen(!isOpen), onKeyDown: hideOnEscape, children: "Open Condition builder" }, void 0), _jsx(Popover, { show: isOpen, ref: setPopoverEl, target: buttonRef.current, placement: 'bottom-start', children: _jsx(Flex, { container: { pad: 1 }, children: builderJsx }, void 0) }, void 0)] }, void 0)), _jsxs("div", { children: [_jsx(Text, { variant: 'h4', children: "Output:" }, void 0), _jsx(StyledCodeBlock, { children: condition ? JSON.stringify(condition, null, 2) : '(No condition)' }, void 0), _jsx(Text, { variant: 'h4', children: "Formatted Output:" }, void 0), _jsx(StyledCodeBlock, { children: condition ? formatCondition({ condition }, demoFields, translate) : '(No condition)' }, void 0)] }, void 0)] }, void 0));
+        }, children: [!args.renderInPopover && builderJsx, args.renderInPopover && (_jsxs(_Fragment, { children: [_jsx(Button, { ref: buttonRef, "aria-haspopup": true, "aria-expanded": isOpen, onClick: () => setIsOpen(!isOpen), onKeyDown: hideOnEscape, children: "Open Condition builder" }), _jsx(Popover, { show: isOpen, ref: setPopoverEl, target: buttonRef.current, placement: 'bottom-start', children: _jsx(Flex, { container: { pad: 1 }, children: builderJsx }) })] })), _jsxs("div", { children: [_jsx(Text, { variant: 'h4', children: "Output:" }), _jsx(StyledCodeBlock, { children: condition ? JSON.stringify(condition, null, 2) : '(No condition)' }), _jsx(Text, { variant: 'h4', children: "Formatted Output:" }), _jsx(StyledCodeBlock, { children: condition ? formatCondition({ condition }, demoFields, translate) : '(No condition)' })] })] }));
 };
 FieldConditionDemo.args = {
     validComparators: false,
@@ -135,15 +135,15 @@ export const AtomicConditionDemo = (args) => {
             setShowErrorIndicators(true);
         }
     };
-    const atomicConditionJSX = (_jsxs(Flex, { container: { direction: 'column', gap: 2 }, children: [_jsx(AtomicCondition, { condition: condition, fields: demoFields, indicateErrors: showErrorIndicators, validComparators: args.validComparators ? demoComparators : undefined, dateFunctions: args.dateFunctions ? demoDateFunctions : undefined, onChange: c => setCondition(c), itemDirection: args.itemDirection, showLhsAsLabel: args.showLhsAsLabel, validRhsTypes: validRHSTypes }, void 0), _jsx(Button, { variant: 'primary', onClick: handleSubmission, children: "Submit Condition" }, void 0)] }, void 0));
+    const atomicConditionJSX = (_jsxs(Flex, { container: { direction: 'column', gap: 2 }, children: [_jsx(AtomicCondition, { condition: condition, fields: demoFields, indicateErrors: showErrorIndicators, validComparators: args.validComparators ? demoComparators : undefined, dateFunctions: args.dateFunctions ? demoDateFunctions : undefined, onChange: c => setCondition(c), itemDirection: args.itemDirection, showLhsAsLabel: args.showLhsAsLabel, validRhsTypes: validRHSTypes }), _jsx(Button, { variant: 'primary', onClick: handleSubmission, children: "Submit Condition" })] }));
     return (_jsxs(StyledGrid, { container: {
             cols: 'repeat(2, minmax(0, 1fr))',
             justifyItems: 'stretch',
             alignItems: 'start',
             colGap: 4
-        }, children: [!args.renderInPopover && atomicConditionJSX, args.renderInPopover && (_jsxs(_Fragment, { children: [_jsx(Button, { ref: buttonRef, "aria-haspopup": true, "aria-expanded": isOpen, onClick: () => setIsOpen(!isOpen), onKeyDown: hideOnEscape, children: `${isOpen ? 'Close' : 'Open'} Atomic Condition` }, void 0), _jsx(Popover, { show: isOpen, ref: setPopoverEl, target: buttonRef.current, placement: 'bottom-start', children: _jsx(Flex, { container: { pad: 1 }, children: atomicConditionJSX }, void 0) }, void 0)] }, void 0)), _jsx(Card, { children: _jsxs(CardContent, { children: [_jsx(Text, { variant: 'h4', children: "Output:" }, void 0), _jsx(StyledCodeBlock, { children: submitCondition ? JSON.stringify(submitCondition, null, 2) : '(No condition)' }, void 0), _jsx(Text, { variant: 'h4', children: "Formatted Output:" }, void 0), _jsx(StyledCodeBlock, { children: submitCondition
+        }, children: [!args.renderInPopover && atomicConditionJSX, args.renderInPopover && (_jsxs(_Fragment, { children: [_jsx(Button, { ref: buttonRef, "aria-haspopup": true, "aria-expanded": isOpen, onClick: () => setIsOpen(!isOpen), onKeyDown: hideOnEscape, children: `${isOpen ? 'Close' : 'Open'} Atomic Condition` }), _jsx(Popover, { show: isOpen, ref: setPopoverEl, target: buttonRef.current, placement: 'bottom-start', children: _jsx(Flex, { container: { pad: 1 }, children: atomicConditionJSX }) })] })), _jsx(Card, { children: _jsxs(CardContent, { children: [_jsx(Text, { variant: 'h4', children: "Output:" }), _jsx(StyledCodeBlock, { children: submitCondition ? JSON.stringify(submitCondition, null, 2) : '(No condition)' }), _jsx(Text, { variant: 'h4', children: "Formatted Output:" }), _jsx(StyledCodeBlock, { children: submitCondition
                                 ? formatCondition({ condition: submitCondition }, demoFields, translate)
-                                : '(No condition)' }, void 0), _jsxs(Flex, { container: { gap: 1, direction: 'column' }, children: [_jsxs(Flex, { container: { gap: 1, direction: 'column' }, children: [_jsx(Text, { variant: 'h2', status: 'error', children: "validRhsTypes Prop Warning" }, void 0), _jsxs(Text, { children: ["There are LHS(Left Hand Side Field)/Comparator pairings that ", _jsx("u", { children: "require" }, void 0), " specific RHS(Right Hand Side Value) types. Please be mindful of these incompatibilities when limiting RHS value types using this prop. We ", _jsx("b", { children: "do not" }, void 0), " support limiting RHS field types to incompatible types and it will result in a validation error if you do so. The pairings referred to here are as follows:"] }, void 0)] }, void 0), _jsxs(StyledList, { children: [_jsxs("li", { children: ["BOOLEAN LHS Fields coupled with \"EQ\" or \"NEQ\" comparators, will ", _jsx("u", { children: "always yield" }, void 0), ' ', "a Field RHS"] }, void 0), _jsxs("li", { children: ["Any LHS Fields coupled with \"IN\" or \"NOT_IN\" comparators, will ", _jsx("u", { children: "always yield" }, void 0), " a Literal RHS (Comma separated list)"] }, void 0)] }, void 0), _jsx(Flex, { container: { direction: 'column' }, children: _jsxs(Text, { children: ["If you would like to limit RHS value types and avoid these incompatibilities, you will need to exclude these comparators using the ", _jsx("b", { children: "validComparators" }, void 0), " prop."] }, void 0) }, void 0)] }, void 0)] }, void 0) }, void 0)] }, void 0));
+                                : '(No condition)' }), _jsxs(Flex, { container: { gap: 1, direction: 'column' }, children: [_jsxs(Flex, { container: { gap: 1, direction: 'column' }, children: [_jsx(Text, { variant: 'h2', status: 'error', children: "validRhsTypes Prop Warning" }), _jsxs(Text, { children: ["There are LHS(Left Hand Side Field)/Comparator pairings that ", _jsx("u", { children: "require" }), " specific RHS(Right Hand Side Value) types. Please be mindful of these incompatibilities when limiting RHS value types using this prop. We ", _jsx("b", { children: "do not" }), " support limiting RHS field types to incompatible types and it will result in a validation error if you do so. The pairings referred to here are as follows:"] })] }), _jsxs(StyledList, { children: [_jsxs("li", { children: ["BOOLEAN LHS Fields coupled with \"EQ\" or \"NEQ\" comparators, will ", _jsx("u", { children: "always yield" }), ' ', "a Field RHS"] }), _jsxs("li", { children: ["Any LHS Fields coupled with \"IN\" or \"NOT_IN\" comparators, will ", _jsx("u", { children: "always yield" }), " a Literal RHS (Comma separated list)"] })] }), _jsx(Flex, { container: { direction: 'column' }, children: _jsxs(Text, { children: ["If you would like to limit RHS value types and avoid these incompatibilities, you will need to exclude these comparators using the ", _jsx("b", { children: "validComparators" }), " prop."] }) })] })] }) })] }));
 };
 AtomicConditionDemo.args = {
     validComparators: false,

package/lib/condition-builder/ConditionBuilder/ConditionBuilder.stories.js.map

@@ -1 +1 @@
-{"version":3,"file":"ConditionBuilder.stories.js","sourceRoot":"","sources":["../../../src/condition-builder/ConditionBuilder/ConditionBuilder.stories.tsx"],"names":[],"mappings":";AAAA,gDAAgD;AAChD,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;AAE9C,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;AAcV,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;QACrE,wDAAwD;QACxD,MAAM,aAAa,GAAG,cAAc,CAAC,OAAO,CAAC,iBAAiB,CAAC,CAAC;QAChE,IAAI,aAAa,KAAK,IAAI,EAAE;YAC1B,0EAA0E;YAC1E,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,gDAAgD;IAChD,MAAM,SAAS,GAAG,MAAM,CAAC,IAAI,CAAC,CAAC,CAAC,4BAA4B;IAC5D,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,CAAC,qDAAqD;IAC9H,MAAM,YAAY,GAAG,CAAC,CAAgB,EAAE,EAAE;QACxC,IAAI,CAAC,CAAC,GAAG,KAAK,QAAQ;YAAE,WAAW,EAAE,CAAC,CAAC,6CAA6C;IACtF,CAAC,CAAC;IAEF,MAAM,UAAU,GAAG,CACjB,KAAC,gBAAgB,IACf,MAAM,EAAE,UAAU,EAClB,SAAS,EAAE,SAAS,EACpB,gBAAgB,EAAE,IAAI,CAAC,gBAAgB,CAAC,CAAC,CAAC,eAAe,CAAC,CAAC,CAAC,SAAS,EACrE,aAAa,EAAE,IAAI,GAAG,CAAC,CAAC,SAAS,EAAE,OAAO,EAAE,eAAe,EAAE,eAAe,CAAC,CAAC,EAC9E,aAAa,EAAE,IAAI,CAAC,aAAa,CAAC,CAAC,CAAC,iBAAiB,CAAC,CAAC,CAAC,SAAS,EACjE,WAAW,EAAE,IAAI,CAAC,WAAW,EAC7B,iBAAiB,EAAE,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,CAAC,8CAA8C;QAC9G,CAAC,WACD,CACH,CAAC;IAEF,OAAO,CACL,MAAC,UAAU,IACT,SAAS,EAAE;YACT,IAAI,EAAE,KAAK;YACX,MAAM,EAAE,CAAC;SACV,aAEA,CAAC,IAAI,CAAC,eAAe,IAAI,UAAU,EAEnC,IAAI,CAAC,eAAe,IAAI,CACvB,8BACE,KAAC,MAAM,IACL,GAAG,EAAE,SAAS,0CAEC,MAAM,EACrB,OAAO,EAAE,GAAG,EAAE,CAAC,SAAS,CAAC,CAAC,MAAM,CAAC,EACjC,SAAS,EAAE,YAAY,+CAGhB,EAET,KAAC,OAAO,IACN,IAAI,EAAE,MAAM,EACZ,GAAG,EAAE,YAAY,EACjB,MAAM,EAAE,SAAS,CAAC,OAAO,EACzB,SAAS,EAAC,cAAc,YAExB,KAAC,IAAI,IAAC,SAAS,EAAE,EAAE,GAAG,EAAE,CAAC,EAAE,YAAG,UAAU,WAAQ,WACxC,YACT,CACJ,EAED,0BACE,KAAC,IAAI,IAAC,OAAO,EAAC,IAAI,gCAAe,EACjC,KAAC,eAAe,cACb,SAAS,CAAC,CAAC,CAAC,IAAI,CAAC,SAAS,CAAC,SAAS,EAAE,IAAI,EAAE,CAAC,CAAC,CAAC,CAAC,CAAC,gBAAgB,WAClD,YACd,EAEN,0BACE,KAAC,IAAI,IAAC,OAAO,EAAC,IAAI,0CAAyB,EAC3C,KAAC,eAAe,cACb,SAAS,CAAC,CAAC,CAAC,eAAe,CAAC,SAAS,EAAE,UAAU,EAAE,SAAS,CAAC,CAAC,CAAC,CAAC,gBAAgB,WACjE,YACd,YACK,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;IAEjF,gDAAgD;IAChD,MAAM,SAAS,GAAG,MAAM,CAAC,IAAI,CAAC,CAAC,CAAC,4BAA4B;IAC5D,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,CAAC,qDAAqD;IAC9H,MAAM,YAAY,GAAG,CAAC,CAAgB,EAAE,EAAE;QACxC,IAAI,CAAC,CAAC,GAAG,KAAK,QAAQ;YAAE,WAAW,EAAE,CAAC,CAAC,6CAA6C;IACtF,CAAC,CAAC;IAEF,MAAM,UAAU,GAAG,CACjB,KAAC,cAAc,IACb,WAAW,EAAC,gBAAgB,EAC5B,MAAM,EAAE,UAAU,EAClB,SAAS,EAAE,SAAS,EACpB,gBAAgB,EAAE,IAAI,CAAC,gBAAgB,CAAC,CAAC,CAAC,eAAe,CAAC,CAAC,CAAC,SAAS,EACrE,aAAa,EAAE,IAAI,GAAG,CAAC,CAAC,SAAS,EAAE,OAAO,EAAE,eAAe,EAAE,eAAe,CAAC,CAAC,EAC9E,aAAa,EAAE,IAAI,CAAC,aAAa,CAAC,CAAC,CAAC,iBAAiB,CAAC,CAAC,CAAC,SAAS,EACjE,QAAQ,EAAE,CAAC,CAAC,EAAE;YACZ,WAAW,EAAE,CAAC;YACd,YAAY,CAAC,CAAC,CAAC,CAAC;QAClB,CAAC,WACD,CACH,CAAC;IAEF,OAAO,CACL,MAAC,UAAU,IACT,SAAS,EAAE;YACT,IAAI,EAAE,2BAA2B;YACjC,YAAY,EAAE,SAAS;YACvB,UAAU,EAAE,OAAO;YACnB,MAAM,EAAE,CAAC;SACV,aAEA,CAAC,IAAI,CAAC,eAAe,IAAI,UAAU,EAEnC,IAAI,CAAC,eAAe,IAAI,CACvB,8BACE,KAAC,MAAM,IACL,GAAG,EAAE,SAAS,0CAEC,MAAM,EACrB,OAAO,EAAE,GAAG,EAAE,CAAC,SAAS,CAAC,CAAC,MAAM,CAAC,EACjC,SAAS,EAAE,YAAY,+CAGhB,EAET,KAAC,OAAO,IACN,IAAI,EAAE,MAAM,EACZ,GAAG,EAAE,YAAY,EACjB,MAAM,EAAE,SAAS,CAAC,OAAO,EACzB,SAAS,EAAC,cAAc,YAExB,KAAC,IAAI,IAAC,SAAS,EAAE,EAAE,GAAG,EAAE,CAAC,EAAE,YAAG,UAAU,WAAQ,WACxC,YACT,CACJ,EAED,0BACE,KAAC,IAAI,IAAC,OAAO,EAAC,IAAI,gCAAe,EACjC,KAAC,eAAe,cACb,SAAS,CAAC,CAAC,CAAC,IAAI,CAAC,SAAS,CAAC,SAAS,EAAE,IAAI,EAAE,CAAC,CAAC,CAAC,CAAC,CAAC,gBAAgB,WAClD,EAElB,KAAC,IAAI,IAAC,OAAO,EAAC,IAAI,0CAAyB,EAC3C,KAAC,eAAe,cACb,SAAS,CAAC,CAAC,CAAC,eAAe,CAAC,EAAE,SAAS,EAAE,EAAE,UAAU,EAAE,SAAS,CAAC,CAAC,CAAC,CAAC,gBAAgB,WACrE,YACd,YACK,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,IAAI,CAAC,aAAa,CAAC,CAAC,CAAC,iBAAiB,CAAC,CAAC,CAAC,SAAS,CACnD,CAAC;IAEF,8CAA8C;IAC9C,MAAM,CAAC,eAAe,EAAE,kBAAkB,CAAC,GAAG,QAAQ,CAA4B,SAAS,CAAC,CAAC;IAC7F,uCAAuC;IACvC,MAAM,SAAS,GAAG,MAAM,CAAC,IAAI,CAAC,CAAC,CAAC,4BAA4B;IAC5D,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,CAAC,qDAAqD;IAC9H,MAAM,YAAY,GAAG,CAAC,CAAgB,EAAE,EAAE;QACxC,IAAI,CAAC,CAAC,GAAG,KAAK,QAAQ;YAAE,WAAW,EAAE,CAAC,CAAC,6CAA6C;IACtF,CAAC,CAAC;IAEF,oEAAoE;IACpE,MAAM,CAAC,mBAAmB,EAAE,sBAAsB,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IACtE,MAAM,CAAC,SAAS,EAAE,YAAY,CAAC,GAAG,QAAQ;IACxC,uGAAuG;IACvG,GAAG,EAAE,CACH,eAAe;QACf,sBAAsB,CACpB,EAAE,KAAK,EAAE,KAAK,EAAE,EAChB,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;YACjD,4EAA4E;YAC5E,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,MAAC,IAAI,IAAC,SAAS,EAAE,EAAE,SAAS,EAAE,QAAQ,EAAE,GAAG,EAAE,CAAC,EAAE,aAC9C,KAAC,eAAe,IACd,SAAS,EAAE,SAAS,EACpB,MAAM,EAAE,UAAU,EAClB,cAAc,EAAE,mBAAmB,EACnC,gBAAgB,EAAE,IAAI,CAAC,gBAAgB,CAAC,CAAC,CAAC,eAAe,CAAC,CAAC,CAAC,SAAS,EACrE,aAAa,EAAE,IAAI,CAAC,aAAa,CAAC,CAAC,CAAC,iBAAiB,CAAC,CAAC,CAAC,SAAS,EACjE,QAAQ,EAAE,CAAC,CAAC,EAAE,CAAC,YAAY,CAAC,CAAC,CAAC,EAC9B,aAAa,EAAE,IAAI,CAAC,aAAa,EACjC,cAAc,EAAE,IAAI,CAAC,cAAc,EACnC,aAAa,EAAE,aAAa,WAC5B,EACF,KAAC,MAAM,IAAC,OAAO,EAAC,SAAS,EAAC,OAAO,EAAE,gBAAgB,yCAE1C,YACJ,CACR,CAAC;IAEF,OAAO,CACL,MAAC,UAAU,IACT,SAAS,EAAE;YACT,IAAI,EAAE,2BAA2B;YACjC,YAAY,EAAE,SAAS;YACvB,UAAU,EAAE,OAAO;YACnB,MAAM,EAAE,CAAC;SACV,aAEA,CAAC,IAAI,CAAC,eAAe,IAAI,kBAAkB,EAE3C,IAAI,CAAC,eAAe,IAAI,CACvB,8BACE,KAAC,MAAM,IACL,GAAG,EAAE,SAAS,0CAEC,MAAM,EACrB,OAAO,EAAE,GAAG,EAAE,CAAC,SAAS,CAAC,CAAC,MAAM,CAAC,EACjC,SAAS,EAAE,YAAY,YAEtB,GAAG,MAAM,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,MAAM,mBAAmB,WACzC,EAET,KAAC,OAAO,IACN,IAAI,EAAE,MAAM,EACZ,GAAG,EAAE,YAAY,EACjB,MAAM,EAAE,SAAS,CAAC,OAAO,EACzB,SAAS,EAAC,cAAc,YAExB,KAAC,IAAI,IAAC,SAAS,EAAE,EAAE,GAAG,EAAE,CAAC,EAAE,YAAG,kBAAkB,WAAQ,WAChD,YACT,CACJ,EACD,KAAC,IAAI,cACH,MAAC,WAAW,eACV,KAAC,IAAI,IAAC,OAAO,EAAC,IAAI,gCAAe,EACjC,KAAC,eAAe,cACb,eAAe,CAAC,CAAC,CAAC,IAAI,CAAC,SAAS,CAAC,eAAe,EAAE,IAAI,EAAE,CAAC,CAAC,CAAC,CAAC,CAAC,gBAAgB,WAC9D,EAElB,KAAC,IAAI,IAAC,OAAO,EAAC,IAAI,0CAAyB,EAC3C,KAAC,eAAe,cACb,eAAe;gCACd,CAAC,CAAC,eAAe,CAAC,EAAE,SAAS,EAAE,eAAe,EAAE,EAAE,UAAU,EAAE,SAAS,CAAC;gCACxE,CAAC,CAAC,gBAAgB,WACJ,EAClB,MAAC,IAAI,IAAC,SAAS,EAAE,EAAE,GAAG,EAAE,CAAC,EAAE,SAAS,EAAE,QAAQ,EAAE,aAC9C,MAAC,IAAI,IAAC,SAAS,EAAE,EAAE,GAAG,EAAE,CAAC,EAAE,SAAS,EAAE,QAAQ,EAAE,aAC9C,KAAC,IAAI,IAAC,OAAO,EAAC,IAAI,EAAC,MAAM,EAAC,OAAO,mDAE1B,EACP,MAAC,IAAI,gFAC0D,0CAAc,iJAE9B,yCAAa,4KAGrD,YACF,EACP,MAAC,UAAU,eACT,iGACkE,+CAAmB,EAAC,GAAG,2BAEpF,EACL,gGACiE,+CAAmB,qDAE/E,YACM,EACb,KAAC,IAAI,IAAC,SAAS,EAAE,EAAE,SAAS,EAAE,QAAQ,EAAE,YACtC,MAAC,IAAI,sJAE8C,mDAAuB,sBACnE,WACF,YACF,YACK,WACT,YACI,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,eAAe,EAAE,IAAI;IACrB,uBAAuB,EAAE,IAAI;IAC7B,cAAc,EAAE,KAAK;CACtB,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,eAAe,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE,EAAE;IACjD,uBAAuB,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE,EAAE;IACzD,cAAc,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE,EAAE;CACjD,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';\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  useFieldRHSType?: boolean;\n  useRelativeDatesRHSType?: boolean;\n  showLhsAsLabel?: boolean;\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  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={args.validComparators ? demoComparators : undefined}\n      validRhsTypes={new Set(['LITERAL', 'FIELD', 'DATE_FUNCTION', 'RELATIVE_DATE'])}\n      dateFunctions={args.dateFunctions ? demoDateFunctions : undefined}\n      disallowNOT={args.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      {!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      </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 builderJsx = (\n    <FieldCondition\n      targetField='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      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      {!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.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: '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        showLhsAsLabel={args.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      {!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  useFieldRHSType: true,\n  useRelativeDatesRHSType: true,\n  showLhsAsLabel: false\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  useFieldRHSType: { control: { type: 'boolean' } },\n  useRelativeDatesRHSType: { control: { type: 'boolean' } },\n  showLhsAsLabel: { control: { type: 'boolean' } }\n};\n"]}
+{"version":3,"file":"ConditionBuilder.stories.js","sourceRoot":"","sources":["../../../src/condition-builder/ConditionBuilder/ConditionBuilder.stories.tsx"],"names":[],"mappings":"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","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';\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  useFieldRHSType?: boolean;\n  useRelativeDatesRHSType?: boolean;\n  showLhsAsLabel?: boolean;\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  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={args.validComparators ? demoComparators : undefined}\n      validRhsTypes={new Set(['LITERAL', 'FIELD', 'DATE_FUNCTION', 'RELATIVE_DATE'])}\n      dateFunctions={args.dateFunctions ? demoDateFunctions : undefined}\n      disallowNOT={args.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      {!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      </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 builderJsx = (\n    <FieldCondition\n      targetField='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      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      {!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.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: '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        showLhsAsLabel={args.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      {!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  useFieldRHSType: true,\n  useRelativeDatesRHSType: true,\n  showLhsAsLabel: false\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  useFieldRHSType: { control: { type: 'boolean' } },\n  useRelativeDatesRHSType: { control: { type: 'boolean' } },\n  showLhsAsLabel: { control: { type: 'boolean' } }\n};\n"]}

package/lib/core/AppShell/AppShell.mocks.js

@@ -60,20 +60,20 @@ export const defaultNotifications = [
         id: '123',
         primary: "Dean Thomas mentioned your team in a bug 'Button does not initiate onClick event handler'.",
         secondary: ['BUG-12345', new Date(2020, 8, 31, 13, 23).toDateString()],
-        visual: _jsx(Avatar, { name: 'Dean Thomas' }, void 0),
+        visual: _jsx(Avatar, { name: 'Dean Thomas' }),
         unread: true
     },
     {
         id: '456',
         primary: "Seth DeAngelo mentioned your team in a bug 'Text variant h1 renders as h3 in DOM'.",
-        visual: _jsx(Avatar, { name: 'Seth DeAngelo' }, void 0),
+        visual: _jsx(Avatar, { name: 'Seth DeAngelo' }),
         unread: true
     },
     {
         id: '789',
         primary: "Janet Moore mentioned your team in a bug 'Tree expanded state does not match the state that was set on the component'.",
         secondary: ['BUG-12345', new Date(2020, 9, 2, 9, 22).toDateString()],
-        visual: _jsx(Avatar, { name: 'Janet Moore' }, void 0),
+        visual: _jsx(Avatar, { name: 'Janet Moore' }),
         unread: true
     },
     {
@@ -127,9 +127,9 @@ export const defaultRecents = [
         secondary: ['BUG-00000', new Date(2020, 9, 2, 9, 22).toDateString()]
     }
 ];
-export const defaultMainContent = (_jsx(Flex, { container: { justify: 'center', alignItems: 'center' }, as: StyledMainContent, children: _jsx(Card, { children: _jsx(CardContent, { children: _jsx(Text, { variant: 'h2', children: "This is the main content" }, void 0) }, void 0) }, void 0) }, void 0));
+export const defaultMainContent = (_jsx(Flex, { container: { justify: 'center', alignItems: 'center' }, as: StyledMainContent, children: _jsx(Card, { children: _jsx(CardContent, { children: _jsx(Text, { variant: 'h2', children: "This is the main content" }) }) }) }));
 export const operatorData = {
-    avatar: _jsx(Avatar, { name: 'Cindy Turner' }, void 0),
+    avatar: _jsx(Avatar, { name: 'Cindy Turner' }),
     actions: [
         { text: 'Profile', id: 'profile' },
         { text: 'Settings', id: 'settings' },

package/lib/core/AppShell/AppShell.mocks.js.map

@@ -1 +1 @@
-{"version":3,"file":"AppShell.mocks.js","sourceRoot":"","sources":["../../../src/core/AppShell/AppShell.mocks.tsx"],"names":[],"mappings":";AAAA,OAAO,EAEL,MAAM,EACN,IAAI,EACJ,WAAW,EAEX,IAAI,EAEJ,IAAI,EACL,MAAM,yBAAyB,CAAC;AAEjC,OAAO,EAAE,iBAAiB,EAAE,MAAM,mBAAmB,CAAC;AAEtD,MAAM,CAAC,MAAM,YAAY,GAA2B;IAClD;QACE,EAAE,EAAE,IAAI;QACR,IAAI,EAAE,MAAM;QACZ,IAAI,EAAE,OAAO;QACb,IAAI,EAAE,YAAY;QAClB,MAAM,EAAE,IAAI;KACb;IACD;QACE,EAAE,EAAE,IAAI;QACR,IAAI,EAAE,cAAc;QACpB,IAAI,EAAE,YAAY;QAClB,IAAI,EAAE,aAAa;KACpB;IACD;QACE,EAAE,EAAE,IAAI;QACR,IAAI,EAAE,eAAe;QACrB,IAAI,EAAE,gBAAgB;QACtB,IAAI,EAAE,cAAc;QACpB,KAAK,EAAE;YACL,EAAE,EAAE,EAAE,MAAM,EAAE,IAAI,EAAE,QAAQ,EAAE,IAAI,EAAE,SAAS,EAAE;YAC/C,EAAE,EAAE,EAAE,MAAM,EAAE,IAAI,EAAE,WAAW,EAAE,IAAI,EAAE,YAAY,EAAE;SACtD;KACF;IAED;QACE,EAAE,EAAE,IAAI;QACR,IAAI,EAAE,MAAM;QACZ,IAAI,EAAE,OAAO;QACb,IAAI,EAAE,aAAa;KACpB;IACD;QACE,EAAE,EAAE,IAAI;QACR,IAAI,EAAE,OAAO;QACb,IAAI,EAAE,QAAQ;QACd,IAAI,EAAE,YAAY;KACnB;IACD;QACE,EAAE,EAAE,IAAI;QACR,IAAI,EAAE,OAAO;QACb,IAAI,EAAE,QAAQ;QACd,IAAI,EAAE,gBAAgB;KACvB;IACD;QACE,EAAE,EAAE,IAAI;QACR,IAAI,EAAE,MAAM;QACZ,IAAI,EAAE,OAAO;QACb,IAAI,EAAE,UAAU;QAChB,MAAM,EAAE,KAAK;QACb,KAAK,EAAE;YACL,EAAE,EAAE,EAAE,MAAM,EAAE,IAAI,EAAE,QAAQ,EAAE,IAAI,EAAE,QAAQ,EAAE;YAC9C,EAAE,EAAE,EAAE,MAAM,EAAE,IAAI,EAAE,UAAU,EAAE,IAAI,EAAE,UAAU,EAAE;SACnD;KACF;CACF,CAAC;AAEF,MAAM,CAAC,MAAM,oBAAoB,GAAuC;IACtE;QACE,EAAE,EAAE,KAAK;QACT,OAAO,EACL,4FAA4F;QAC9F,SAAS,EAAE,CAAC,WAAW,EAAE,IAAI,IAAI,CAAC,IAAI,EAAE,CAAC,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,CAAC,CAAC,YAAY,EAAE,CAAC;QACtE,MAAM,EAAE,KAAC,MAAM,IAAC,IAAI,EAAC,aAAa,WAAG;QACrC,MAAM,EAAE,IAAI;KACb;IACD;QACE,EAAE,EAAE,KAAK;QACT,OAAO,EAAE,oFAAoF;QAC7F,MAAM,EAAE,KAAC,MAAM,IAAC,IAAI,EAAC,eAAe,WAAG;QACvC,MAAM,EAAE,IAAI;KACb;IACD;QACE,EAAE,EAAE,KAAK;QACT,OAAO,EACL,wHAAwH;QAC1H,SAAS,EAAE,CAAC,WAAW,EAAE,IAAI,IAAI,CAAC,IAAI,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC,YAAY,EAAE,CAAC;QACpE,MAAM,EAAE,KAAC,MAAM,IAAC,IAAI,EAAC,aAAa,WAAG;QACrC,MAAM,EAAE,IAAI;KACb;IACD;QACE,EAAE,EAAE,KAAK;QACT,OAAO,EAAE,+DAA+D;QACxE,SAAS,EAAE,CAAC,IAAI,IAAI,CAAC,IAAI,EAAE,CAAC,EAAE,CAAC,EAAE,EAAE,EAAE,EAAE,CAAC,CAAC,YAAY,EAAE,CAAC;QACxD,MAAM,EAAE,IAAI;KACb;CACF,CAAC;AAEF,MAAM,CAAC,MAAM,cAAc,GAAuC;IAChE;QACE,EAAE,EAAE,KAAK;QACT,OAAO,EAAE,8DAA8D;QACvE,SAAS,EAAE,CAAC,WAAW,EAAE,IAAI,IAAI,CAAC,IAAI,EAAE,CAAC,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,CAAC,CAAC,YAAY,EAAE,CAAC;KACvE;IACD;QACE,EAAE,EAAE,KAAK;QACT,OAAO,EAAE,oDAAoD;KAC9D;IACD;QACE,EAAE,EAAE,KAAK;QACT,OAAO,EACL,0FAA0F;QAC5F,SAAS,EAAE,CAAC,WAAW,EAAE,IAAI,IAAI,CAAC,IAAI,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC,YAAY,EAAE,CAAC;KACrE;IACD;QACE,EAAE,EAAE,KAAK;QACT,OAAO,EAAE,8DAA8D;QACvE,SAAS,EAAE,CAAC,WAAW,EAAE,IAAI,IAAI,CAAC,IAAI,EAAE,CAAC,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,CAAC,CAAC,YAAY,EAAE,CAAC;KACvE;IACD;QACE,EAAE,EAAE,KAAK;QACT,OAAO,EAAE,oDAAoD;KAC9D;IACD;QACE,EAAE,EAAE,KAAK;QACT,OAAO,EACL,0FAA0F;QAC5F,SAAS,EAAE,CAAC,WAAW,EAAE,IAAI,IAAI,CAAC,IAAI,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC,YAAY,EAAE,CAAC;KACrE;IACD;QACE,EAAE,EAAE,KAAK;QACT,OAAO,EAAE,8DAA8D;QACvE,SAAS,EAAE,CAAC,WAAW,EAAE,IAAI,IAAI,CAAC,IAAI,EAAE,CAAC,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,CAAC,CAAC,YAAY,EAAE,CAAC;KACvE;IACD;QACE,EAAE,EAAE,KAAK;QACT,OAAO,EAAE,oDAAoD;KAC9D;IACD;QACE,EAAE,EAAE,KAAK;QACT,OAAO,EACL,0FAA0F;QAC5F,SAAS,EAAE,CAAC,WAAW,EAAE,IAAI,IAAI,CAAC,IAAI,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC,YAAY,EAAE,CAAC;KACrE;CACF,CAAC;AAEF,MAAM,CAAC,MAAM,kBAAkB,GAAG,CAChC,KAAC,IAAI,IAAC,SAAS,EAAE,EAAE,OAAO,EAAE,QAAQ,EAAE,UAAU,EAAE,QAAQ,EAAE,EAAE,EAAE,EAAE,iBAAiB,YACjF,KAAC,IAAI,cACH,KAAC,WAAW,cACV,KAAC,IAAI,IAAC,OAAO,EAAC,IAAI,iDAAgC,WACtC,WACT,WACF,CACR,CAAC;AAEF,MAAM,CAAC,MAAM,YAAY,GAAG;IAC1B,MAAM,EAAE,KAAC,MAAM,IAAC,IAAI,EAAC,cAAc,WAAG;IACtC,OAAO,EAAE;QACP,EAAE,IAAI,EAAE,SAAS,EAAE,EAAE,EAAE,SAAS,EAAE;QAClC,EAAE,IAAI,EAAE,UAAU,EAAE,EAAE,EAAE,UAAU,EAAE;QACpC,EAAE,IAAI,EAAE,iBAAiB,EAAE,EAAE,EAAE,MAAM,EAAE;QACvC,EAAE,IAAI,EAAE,aAAa,EAAE,EAAE,EAAE,MAAM,EAAE;QACnC,EAAE,IAAI,EAAE,SAAS,EAAE,EAAE,EAAE,QAAQ,EAAE;KAClC;IACD,IAAI,EAAE,cAAc;CACrB,CAAC","sourcesContent":["import {\n  AppShellProps,\n  Avatar,\n  Card,\n  CardContent,\n  DrawerItemProps,\n  Flex,\n  ForwardProps,\n  Text\n} from '@pega/cosmos-react-core';\n\nimport { StyledMainContent } from './AppShell.styles';\n\nexport const defaultLinks: AppShellProps['links'] = [\n  {\n    id: '01',\n    name: 'Home',\n    href: '#home',\n    icon: 'home-solid',\n    active: true\n  },\n  {\n    id: '02',\n    name: 'My Dashboard',\n    href: '#dashboard',\n    icon: 'gauge-solid'\n  },\n  {\n    id: '03',\n    name: 'Collaboration',\n    href: '#collaboration',\n    icon: 'social-solid',\n    links: [\n      { id: '3-01', name: 'Spaces', href: '#spaces' },\n      { id: '3-02', name: 'Documents', href: '#documents' }\n    ]\n  },\n\n  {\n    id: '04',\n    name: 'Bugs',\n    href: '#bugs',\n    icon: 'users-solid'\n  },\n  {\n    id: '05',\n    name: 'Epics',\n    href: '#epics',\n    icon: 'book-solid'\n  },\n  {\n    id: '06',\n    name: 'Goals',\n    href: '#goals',\n    icon: 'analytics-good'\n  },\n  {\n    id: '07',\n    name: 'More',\n    href: '#more',\n    icon: 'more-alt',\n    active: false,\n    links: [\n      { id: '7-01', name: 'Item A', href: '#itemA' },\n      { id: '7-02', name: 'Option 1', href: '#option1' }\n    ]\n  }\n];\n\nexport const defaultNotifications: (DrawerItemProps & ForwardProps)[] = [\n  {\n    id: '123',\n    primary:\n      \"Dean Thomas mentioned your team in a bug 'Button does not initiate onClick event handler'.\",\n    secondary: ['BUG-12345', new Date(2020, 8, 31, 13, 23).toDateString()],\n    visual: <Avatar name='Dean Thomas' />,\n    unread: true\n  },\n  {\n    id: '456',\n    primary: \"Seth DeAngelo mentioned your team in a bug 'Text variant h1 renders as h3 in DOM'.\",\n    visual: <Avatar name='Seth DeAngelo' />,\n    unread: true\n  },\n  {\n    id: '789',\n    primary:\n      \"Janet Moore mentioned your team in a bug 'Tree expanded state does not match the state that was set on the component'.\",\n    secondary: ['BUG-12345', new Date(2020, 9, 2, 9, 22).toDateString()],\n    visual: <Avatar name='Janet Moore' />,\n    unread: true\n  },\n  {\n    id: '000',\n    primary: 'You have been awarded Employee of the Month! Congratulations!',\n    secondary: [new Date(2020, 9, 8, 14, 46).toDateString()],\n    unread: true\n  }\n];\n\nexport const defaultRecents: (DrawerItemProps & ForwardProps)[] = [\n  {\n    id: '123',\n    primary: \"BUG-12345: 'Button does not initiate onClick event handler'.\",\n    secondary: ['BUG-12345', new Date(2020, 8, 31, 13, 23).toDateString()]\n  },\n  {\n    id: '456',\n    primary: \"BUG-54321: 'Text variant h1 renders as h3 in DOM'.\"\n  },\n  {\n    id: '789',\n    primary:\n      \"BUG-00000: 'Tree expanded state does not match the state that was set on the component'.\",\n    secondary: ['BUG-00000', new Date(2020, 9, 2, 9, 22).toDateString()]\n  },\n  {\n    id: '111',\n    primary: \"BUG-12345: 'Button does not initiate onClick event handler'.\",\n    secondary: ['BUG-12345', new Date(2020, 8, 31, 13, 23).toDateString()]\n  },\n  {\n    id: '222',\n    primary: \"BUG-54321: 'Text variant h1 renders as h3 in DOM'.\"\n  },\n  {\n    id: '333',\n    primary:\n      \"BUG-00000: 'Tree expanded state does not match the state that was set on the component'.\",\n    secondary: ['BUG-00000', new Date(2020, 9, 2, 9, 22).toDateString()]\n  },\n  {\n    id: '444',\n    primary: \"BUG-12345: 'Button does not initiate onClick event handler'.\",\n    secondary: ['BUG-12345', new Date(2020, 8, 31, 13, 23).toDateString()]\n  },\n  {\n    id: '555',\n    primary: \"BUG-54321: 'Text variant h1 renders as h3 in DOM'.\"\n  },\n  {\n    id: '666',\n    primary:\n      \"BUG-00000: 'Tree expanded state does not match the state that was set on the component'.\",\n    secondary: ['BUG-00000', new Date(2020, 9, 2, 9, 22).toDateString()]\n  }\n];\n\nexport const defaultMainContent = (\n  <Flex container={{ justify: 'center', alignItems: 'center' }} as={StyledMainContent}>\n    <Card>\n      <CardContent>\n        <Text variant='h2'>This is the main content</Text>\n      </CardContent>\n    </Card>\n  </Flex>\n);\n\nexport const operatorData = {\n  avatar: <Avatar name='Cindy Turner' />,\n  actions: [\n    { text: 'Profile', id: 'profile' },\n    { text: 'Settings', id: 'settings' },\n    { text: 'My applications', id: 'apps' },\n    { text: 'Help center', id: 'help' },\n    { text: 'Log out', id: 'logout' }\n  ],\n  name: 'Cindy Turner'\n};\n"]}
+{"version":3,"file":"AppShell.mocks.js","sourceRoot":"","sources":["../../../src/core/AppShell/AppShell.mocks.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  AppShellProps,\n  Avatar,\n  Card,\n  CardContent,\n  DrawerItemProps,\n  Flex,\n  ForwardProps,\n  Text\n} from '@pega/cosmos-react-core';\n\nimport { StyledMainContent } from './AppShell.styles';\n\nexport const defaultLinks: AppShellProps['links'] = [\n  {\n    id: '01',\n    name: 'Home',\n    href: '#home',\n    icon: 'home-solid',\n    active: true\n  },\n  {\n    id: '02',\n    name: 'My Dashboard',\n    href: '#dashboard',\n    icon: 'gauge-solid'\n  },\n  {\n    id: '03',\n    name: 'Collaboration',\n    href: '#collaboration',\n    icon: 'social-solid',\n    links: [\n      { id: '3-01', name: 'Spaces', href: '#spaces' },\n      { id: '3-02', name: 'Documents', href: '#documents' }\n    ]\n  },\n\n  {\n    id: '04',\n    name: 'Bugs',\n    href: '#bugs',\n    icon: 'users-solid'\n  },\n  {\n    id: '05',\n    name: 'Epics',\n    href: '#epics',\n    icon: 'book-solid'\n  },\n  {\n    id: '06',\n    name: 'Goals',\n    href: '#goals',\n    icon: 'analytics-good'\n  },\n  {\n    id: '07',\n    name: 'More',\n    href: '#more',\n    icon: 'more-alt',\n    active: false,\n    links: [\n      { id: '7-01', name: 'Item A', href: '#itemA' },\n      { id: '7-02', name: 'Option 1', href: '#option1' }\n    ]\n  }\n];\n\nexport const defaultNotifications: (DrawerItemProps & ForwardProps)[] = [\n  {\n    id: '123',\n    primary:\n      \"Dean Thomas mentioned your team in a bug 'Button does not initiate onClick event handler'.\",\n    secondary: ['BUG-12345', new Date(2020, 8, 31, 13, 23).toDateString()],\n    visual: <Avatar name='Dean Thomas' />,\n    unread: true\n  },\n  {\n    id: '456',\n    primary: \"Seth DeAngelo mentioned your team in a bug 'Text variant h1 renders as h3 in DOM'.\",\n    visual: <Avatar name='Seth DeAngelo' />,\n    unread: true\n  },\n  {\n    id: '789',\n    primary:\n      \"Janet Moore mentioned your team in a bug 'Tree expanded state does not match the state that was set on the component'.\",\n    secondary: ['BUG-12345', new Date(2020, 9, 2, 9, 22).toDateString()],\n    visual: <Avatar name='Janet Moore' />,\n    unread: true\n  },\n  {\n    id: '000',\n    primary: 'You have been awarded Employee of the Month! Congratulations!',\n    secondary: [new Date(2020, 9, 8, 14, 46).toDateString()],\n    unread: true\n  }\n];\n\nexport const defaultRecents: (DrawerItemProps & ForwardProps)[] = [\n  {\n    id: '123',\n    primary: \"BUG-12345: 'Button does not initiate onClick event handler'.\",\n    secondary: ['BUG-12345', new Date(2020, 8, 31, 13, 23).toDateString()]\n  },\n  {\n    id: '456',\n    primary: \"BUG-54321: 'Text variant h1 renders as h3 in DOM'.\"\n  },\n  {\n    id: '789',\n    primary:\n      \"BUG-00000: 'Tree expanded state does not match the state that was set on the component'.\",\n    secondary: ['BUG-00000', new Date(2020, 9, 2, 9, 22).toDateString()]\n  },\n  {\n    id: '111',\n    primary: \"BUG-12345: 'Button does not initiate onClick event handler'.\",\n    secondary: ['BUG-12345', new Date(2020, 8, 31, 13, 23).toDateString()]\n  },\n  {\n    id: '222',\n    primary: \"BUG-54321: 'Text variant h1 renders as h3 in DOM'.\"\n  },\n  {\n    id: '333',\n    primary:\n      \"BUG-00000: 'Tree expanded state does not match the state that was set on the component'.\",\n    secondary: ['BUG-00000', new Date(2020, 9, 2, 9, 22).toDateString()]\n  },\n  {\n    id: '444',\n    primary: \"BUG-12345: 'Button does not initiate onClick event handler'.\",\n    secondary: ['BUG-12345', new Date(2020, 8, 31, 13, 23).toDateString()]\n  },\n  {\n    id: '555',\n    primary: \"BUG-54321: 'Text variant h1 renders as h3 in DOM'.\"\n  },\n  {\n    id: '666',\n    primary:\n      \"BUG-00000: 'Tree expanded state does not match the state that was set on the component'.\",\n    secondary: ['BUG-00000', new Date(2020, 9, 2, 9, 22).toDateString()]\n  }\n];\n\nexport const defaultMainContent = (\n  <Flex container={{ justify: 'center', alignItems: 'center' }} as={StyledMainContent}>\n    <Card>\n      <CardContent>\n        <Text variant='h2'>This is the main content</Text>\n      </CardContent>\n    </Card>\n  </Flex>\n);\n\nexport const operatorData = {\n  avatar: <Avatar name='Cindy Turner' />,\n  actions: [\n    { text: 'Profile', id: 'profile' },\n    { text: 'Settings', id: 'settings' },\n    { text: 'My applications', id: 'apps' },\n    { text: 'Help center', id: 'help' },\n    { text: 'Log out', id: 'logout' }\n  ],\n  name: 'Cindy Turner'\n};\n"]}

package/lib/core/AppShell/AppShell.stories.js

@@ -18,11 +18,11 @@ export const AppShellDemo = (args) => {
         const { ModalContext } = useContext(ModalManagerContext);
         const { dismiss } = useContext(ModalContext);
         const { push: pushToaster } = useContext(ToasterContext);
-        return (_jsx(Modal, { as: 'form', heading: `New ${caseType}`, actions: _jsxs(_Fragment, { children: [_jsx(Button, { onClick: dismiss, children: "Cancel" }, void 0), _jsx(Button, { variant: 'primary', type: 'submit', onClick: (e) => {
+        return (_jsx(Modal, { as: 'form', heading: `New ${caseType}`, actions: _jsxs(_Fragment, { children: [_jsx(Button, { onClick: dismiss, children: "Cancel" }), _jsx(Button, { variant: 'primary', type: 'submit', onClick: (e) => {
                             e.preventDefault();
                             dismiss();
                             pushToaster({ content: `${caseType} requested` });
-                        }, children: "Request" }, void 0)] }, void 0), children: _jsxs(Grid, { container: { rowGap: 2 }, children: [_jsx(DateInput, { label: 'Date Requested', info: null }, void 0), _jsxs(Select, { label: 'Department', children: [_jsx(Option, { value: '', children: "Select\u2026" }, void 0), _jsx(Option, { value: 'Fire', children: "Fire" }, void 0), _jsx(Option, { value: 'Facilities', children: "Facilities" }, void 0), _jsx(Option, { value: 'Parks', children: "Parks" }, void 0), _jsx(Option, { value: 'Sanitation', children: "Sanitation" }, void 0), _jsx(Option, { value: 'Parking & Traffic', children: "Parking & Traffic" }, void 0), _jsx(Option, { value: 'Police', children: "Police" }, void 0), _jsx(Option, { value: 'Courts', children: "Courts" }, void 0), _jsx(Option, { value: 'Healthcare', children: "Healthcare" }, void 0), _jsx(Option, { value: 'Energy', children: "Energy" }, void 0), _jsx(Option, { value: 'Justice department', children: "Justice department" }, void 0), _jsx(Option, { value: 'Environmental', children: "Environmental" }, void 0)] }, void 0), _jsx(TextArea, { label: 'Purpose of Purchase' }, void 0), _jsxs(Select, { label: 'Desired Make', children: [_jsx(Option, { value: '', children: "Select..." }, void 0), _jsx(Option, { value: 'Ford', children: "Ford" }, void 0), _jsx(Option, { value: 'Dodge', children: "Dodge" }, void 0), _jsx(Option, { value: 'Toyota', children: "Toyota" }, void 0), _jsx(Option, { value: 'Tesla', children: "Tesla" }, void 0)] }, void 0), _jsx(Input, { label: 'Desired Make' }, void 0), _jsx(Input, { type: 'number', min: '2016', max: '2021', label: 'Year', info: 'Must be within last 5 years' }, void 0), _jsx(Input, { type: 'number', min: '0.01', step: '0.01', max: '50000', label: 'Estimated Cost', info: 'May not exceed $50,000.00' }, void 0)] }, void 0) }, void 0));
+                        }, children: "Request" })] }), children: _jsxs(Grid, { container: { rowGap: 2 }, children: [_jsx(DateInput, { label: 'Date Requested', info: null }), _jsxs(Select, { label: 'Department', children: [_jsx(Option, { value: '', children: "Select\u2026" }), _jsx(Option, { value: 'Fire', children: "Fire" }), _jsx(Option, { value: 'Facilities', children: "Facilities" }), _jsx(Option, { value: 'Parks', children: "Parks" }), _jsx(Option, { value: 'Sanitation', children: "Sanitation" }), _jsx(Option, { value: 'Parking & Traffic', children: "Parking & Traffic" }), _jsx(Option, { value: 'Police', children: "Police" }), _jsx(Option, { value: 'Courts', children: "Courts" }), _jsx(Option, { value: 'Healthcare', children: "Healthcare" }), _jsx(Option, { value: 'Energy', children: "Energy" }), _jsx(Option, { value: 'Justice department', children: "Justice department" }), _jsx(Option, { value: 'Environmental', children: "Environmental" })] }), _jsx(TextArea, { label: 'Purpose of Purchase' }), _jsxs(Select, { label: 'Desired Make', children: [_jsx(Option, { value: '', children: "Select..." }), _jsx(Option, { value: 'Ford', children: "Ford" }), _jsx(Option, { value: 'Dodge', children: "Dodge" }), _jsx(Option, { value: 'Toyota', children: "Toyota" }), _jsx(Option, { value: 'Tesla', children: "Tesla" })] }), _jsx(Input, { label: 'Desired Make' }), _jsx(Input, { type: 'number', min: '2016', max: '2021', label: 'Year', info: 'Must be within last 5 years' }), _jsx(Input, { type: 'number', min: '0.01', step: '0.01', max: '50000', label: 'Estimated Cost', info: 'May not exceed $50,000.00' })] }) }));
     };
     const caseLinks = args.caseLinks || defaultLinks;
     const showSearch = args.withSearch !== undefined ? args.withSearch : true;
@@ -111,9 +111,9 @@ export const AppShellDemo = (args) => {
     const defaultUtils = [
         {
             name: 'Notifications',
-            visual: _jsx(Icon, { name: 'bell-solid' }, void 0),
+            visual: _jsx(Icon, { name: 'bell-solid' }),
             count: args.notificationsEmpty ? 0 : numNewNotifications,
-            drawerView: _jsx(AppShellList, { listView: notificationViewItems }, void 0),
+            drawerView: _jsx(AppShellList, { listView: notificationViewItems }),
             onDrawerOpen: () => {
                 clearInterval(newNotificationCountTimerRef.current);
                 setNumNewNotifications(0);
@@ -130,8 +130,8 @@ export const AppShellDemo = (args) => {
         },
         {
             name: 'Recents',
-            visual: _jsx(Icon, { name: 'clock-solid' }, void 0),
-            drawerView: _jsx(AppShellList, { listView: recentViewItems }, void 0)
+            visual: _jsx(Icon, { name: 'clock-solid' }),
+            drawerView: _jsx(AppShellList, { listView: recentViewItems })
         }
     ];
     return (_jsx(AppShell, { appInfo: args.appInfo || {
@@ -154,7 +154,7 @@ export const AppShellDemo = (args) => {
                 name: args.environmentName,
                 color: args.environmentColor
             }
-            : undefined }, void 0));
+            : undefined }));
 };
 AppShellDemo.args = {
     appName: 'Cosmos AppShell',
@@ -202,7 +202,7 @@ export const ConfigurableAppShell = (args) => {
                     }
                 }
             }
-        }, children: _jsx(AppShellDemo, { appHeader: true }, void 0) }, void 0));
+        }, children: _jsx(AppShellDemo, { appHeader: true }) }));
 };
 ConfigurableAppShell.args = {
     navColor: '#252c32',