@pega/cosmos-react-demos 3.0.0-dev.23.2 → 3.0.0-dev.26.0

package/jsx/tools/Clipboard/Clipboard.stories.jsx

@@ -1,4 +1,4 @@
-import { useState } from 'react';
+import { useState, useEffect } from 'react';
 import { Clipboard } from '@pega/cosmos-react-tools';
 import { treeHelpers } from '@pega/cosmos-react-core';
 import { allNodes, childNodes, getDetailsData } from './Clipboard.mocks';
@@ -13,51 +13,52 @@ export const ClipboardViewerDemo = () => {
     const [nodes, setNodes] = useState(allNodes);
     const [currentNodeId, setCurrentNodeId] = useState(allNodes[0].id);
     const [pageDetails, setPageDetails] = useState();
+    const timeouts = [];
+    useEffect(() => {
+        return () => {
+            timeouts.forEach((timeout) => {
+                clearTimeout(timeout);
+            });
+        };
+    }, []);
     const updatePageDetails = (id, cb) => {
         setPageDetails({ primary: '', fields: [], loading: true });
-        setTimeout(() => {
-            setPageDetails(getDetailsData(id, cb));
-        }, 300);
+        const response = getDetailsData(id, cb);
+        timeouts.push(setTimeout(() => setPageDetails(response), 1300));
     };
-    const getMappedNodes = (tree, id) => {
-        return treeHelpers.mapNode(tree, id, node => {
+    const updateActiveParentNode = (id) => {
+        setNodes(tree => treeHelpers.mapNode(tree, id, node => {
             return {
                 ...node,
                 expanded: !node.expanded,
                 loading: node.nodes?.length === 0
             };
-        });
-    };
-    const updateNodeDetails = (id) => {
-        setCurrentNodeId(id);
-        setNodes(tree => treeHelpers.expandTo(getMappedNodes(tree, id), id));
-        updatePageDetails(id);
+        }));
     };
     const loadChildNodes = (id) => {
-        setTimeout(() => {
-            setNodes(tree => treeHelpers.mapNode(tree, id, node => {
-                return {
+        timeouts.push(setTimeout(() => {
+            setNodes(tree => treeHelpers.mapNode(tree, id, node => node.nodes?.length === 0
+                ? {
                     ...node,
                     loading: false,
-                    nodes: id === 'D_creditScore' || id === 'systemPage' ? undefined : childNodes
-                };
-            }));
-            if (id !== 'systemPage') {
-                updatePageDetails(id, updateNodeDetails);
-            }
-        }, 1000);
+                    nodes: id === 'D_pzPreferenceStore' ? childNodes : undefined
+                }
+                : node));
+        }, 1000));
     };
-    const onNodeClick = (nodeId) => {
+    const onNodeClick = (nodeId, e) => {
+        const node = treeHelpers.getNode(nodes, nodeId);
         setCurrentNodeId(nodeId);
-        if (!treeHelpers.getNode(allNodes, nodeId)?.nodes) {
-            updatePageDetails(nodeId);
-        }
-        else {
-            setNodes(tree => getMappedNodes(tree, nodeId));
-            return ['D_creditScore', 'D_pzPreferenceStore', 'systemPage'].includes(nodeId)
-                ? loadChildNodes(nodeId)
-                : setPageDetails(undefined);
+        if (node?.nodes && node?.nodes?.length >= 0) {
+            updateActiveParentNode(nodeId);
         }
+        loadChildNodes(nodeId);
+        if (['ArrowRight', 'ArrowLeft'].includes(e.key))
+            return;
+        updatePageDetails(nodeId, id => {
+            onNodeClick(id, e);
+            setNodes(tree => treeHelpers.expandTo(tree, nodeId));
+        });
     };
     return (<Clipboard navigation={{
             nodes,

package/jsx/tools/Clipboard/Clipboard.stories.jsx.map

@@ -1 +1 @@
-{"version":3,"file":"Clipboard.stories.jsx","sourceRoot":"","sources":["../../../src/tools/Clipboard/Clipboard.stories.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Story, Meta } from '@storybook/react';\nimport { useState } from 'react';\n\nimport { Clipboard, ClipboardProps, ContentProps } from '@pega/cosmos-react-tools';\nimport { treeHelpers } from '@pega/cosmos-react-core';\nimport { StandardTreeNode } from '@pega/cosmos-react-core/lib/components/Tree/StandardTree.types';\n\nimport { allNodes, childNodes, getDetailsData } from './Clipboard.mocks';\n\nexport default {\n  title: 'Tools/Clipboard',\n  component: Clipboard,\n  parameters: {\n    layout: 'fullscreen'\n  }\n} as Meta;\n\nexport const ClipboardViewerDemo: Story<ClipboardProps> = () => {\n  const [nodes, setNodes] = useState(allNodes);\n  const [currentNodeId, setCurrentNodeId] = useState(allNodes[0].id);\n  const [pageDetails, setPageDetails] = useState<ContentProps | undefined>();\n\n  const updatePageDetails = (id: string, cb?: (id: string) => void) => {\n    setPageDetails({ primary: '', fields: [], loading: true });\n    setTimeout(() => {\n      setPageDetails(getDetailsData(id, cb));\n    }, 300);\n  };\n\n  const getMappedNodes = (tree: StandardTreeNode[], id: string) => {\n    return treeHelpers.mapNode(tree, id, node => {\n      return {\n        ...node,\n        expanded: !node.expanded,\n        loading: node.nodes?.length === 0\n      };\n    });\n  };\n\n  const updateNodeDetails = (id: string) => {\n    setCurrentNodeId(id);\n    setNodes(tree => treeHelpers.expandTo(getMappedNodes(tree, id), id));\n    updatePageDetails(id);\n  };\n\n  const loadChildNodes = (id: string) => {\n    setTimeout(() => {\n      setNodes(tree =>\n        treeHelpers.mapNode(tree, id, node => {\n          return {\n            ...node,\n            loading: false,\n            nodes: id === 'D_creditScore' || id === 'systemPage' ? undefined : childNodes\n          };\n        })\n      );\n      if (id !== 'systemPage') {\n        updatePageDetails(id, updateNodeDetails);\n      }\n    }, 1000);\n  };\n\n  const onNodeClick = (nodeId: string) => {\n    setCurrentNodeId(nodeId);\n\n    if (!treeHelpers.getNode(allNodes, nodeId)?.nodes) {\n      updatePageDetails(nodeId);\n    } else {\n      setNodes(tree => getMappedNodes(tree, nodeId));\n\n      return ['D_creditScore', 'D_pzPreferenceStore', 'systemPage'].includes(nodeId)\n        ? loadChildNodes(nodeId)\n        : setPageDetails(undefined);\n    }\n  };\n\n  return (\n    <Clipboard\n      navigation={{\n        nodes,\n        currentNodeId,\n        onNodeClick\n      }}\n      content={pageDetails}\n      lastUpdated='Last updated: Less than a minute ago'\n    />\n  );\n};\n"]}
+{"version":3,"file":"Clipboard.stories.jsx","sourceRoot":"","sources":["../../../src/tools/Clipboard/Clipboard.stories.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,QAAQ,EAA6B,SAAS,EAAE,MAAM,OAAO,CAAC;AAEvE,OAAO,EAAE,SAAS,EAAqC,MAAM,0BAA0B,CAAC;AACxF,OAAO,EAAE,WAAW,EAAE,MAAM,yBAAyB,CAAC;AAEtD,OAAO,EAAE,QAAQ,EAAE,UAAU,EAAE,cAAc,EAAE,MAAM,mBAAmB,CAAC;AAEzE,eAAe;IACb,KAAK,EAAE,iBAAiB;IACxB,SAAS,EAAE,SAAS;IACpB,UAAU,EAAE;QACV,MAAM,EAAE,YAAY;KACrB;CACM,CAAC;AAEV,MAAM,CAAC,MAAM,mBAAmB,GAA0B,GAAG,EAAE;IAC7D,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,QAAQ,CAAC,QAAQ,CAAC,CAAC;IAC7C,MAAM,CAAC,aAAa,EAAE,gBAAgB,CAAC,GAAG,QAAQ,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC;IACnE,MAAM,CAAC,WAAW,EAAE,cAAc,CAAC,GAAG,QAAQ,EAAiC,CAAC;IAChF,MAAM,QAAQ,GAAoC,EAAE,CAAC;IAErD,SAAS,CAAC,GAAG,EAAE;QACb,OAAO,GAAG,EAAE;YACV,QAAQ,CAAC,OAAO,CAAC,CAAC,OAAsC,EAAE,EAAE;gBAC1D,YAAY,CAAC,OAAO,CAAC,CAAC;YACxB,CAAC,CAAC,CAAC;QACL,CAAC,CAAC;IACJ,CAAC,EAAE,EAAE,CAAC,CAAC;IAGP,MAAM,iBAAiB,GAAG,CAAC,EAAU,EAAE,EAAyB,EAAE,EAAE;QAClE,cAAc,CAAC,EAAE,OAAO,EAAE,EAAE,EAAE,MAAM,EAAE,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC,CAAC;QAC3D,MAAM,QAAQ,GAAG,cAAc,CAAC,EAAE,EAAE,EAAE,CAAC,CAAC;QACxC,QAAQ,CAAC,IAAI,CAAC,UAAU,CAAC,GAAG,EAAE,CAAC,cAAc,CAAC,QAAQ,CAAC,EAAE,IAAI,CAAC,CAAC,CAAC;IAClE,CAAC,CAAC;IAGF,MAAM,sBAAsB,GAAG,CAAC,EAAU,EAAE,EAAE;QAC5C,QAAQ,CAAC,IAAI,CAAC,EAAE,CACd,WAAW,CAAC,OAAO,CAAC,IAAI,EAAE,EAAE,EAAE,IAAI,CAAC,EAAE;YACnC,OAAO;gBACL,GAAG,IAAI;gBACP,QAAQ,EAAE,CAAC,IAAI,CAAC,QAAQ;gBACxB,OAAO,EAAE,IAAI,CAAC,KAAK,EAAE,MAAM,KAAK,CAAC;aAClC,CAAC;QACJ,CAAC,CAAC,CACH,CAAC;IACJ,CAAC,CAAC;IAGF,MAAM,cAAc,GAAG,CAAC,EAAU,EAAE,EAAE;QACpC,QAAQ,CAAC,IAAI,CACX,UAAU,CAAC,GAAG,EAAE;YACd,QAAQ,CAAC,IAAI,CAAC,EAAE,CACd,WAAW,CAAC,OAAO,CAAC,IAAI,EAAE,EAAE,EAAE,IAAI,CAAC,EAAE,CACnC,IAAI,CAAC,KAAK,EAAE,MAAM,KAAK,CAAC;gBACtB,CAAC,CAAC;oBACE,GAAG,IAAI;oBACP,OAAO,EAAE,KAAK;oBACd,KAAK,EAAE,EAAE,KAAK,qBAAqB,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,SAAS;iBAC7D;gBACH,CAAC,CAAC,IAAI,CACT,CACF,CAAC;QACJ,CAAC,EAAE,IAAI,CAAC,CACT,CAAC;IACJ,CAAC,CAAC;IAEF,MAAM,WAAW,GAAG,CAAC,MAAc,EAAE,CAAuD,EAAE,EAAE;QAE9F,MAAM,IAAI,GAAG,WAAW,CAAC,OAAO,CAAC,KAAK,EAAE,MAAM,CAAC,CAAC;QAChD,gBAAgB,CAAC,MAAM,CAAC,CAAC;QAGzB,IAAI,IAAI,EAAE,KAAK,IAAI,IAAI,EAAE,KAAK,EAAE,MAAM,IAAI,CAAC,EAAE;YAC3C,sBAAsB,CAAC,MAAM,CAAC,CAAC;SAChC;QAGD,cAAc,CAAC,MAAM,CAAC,CAAC;QAGvB,IAAI,CAAC,YAAY,EAAE,WAAW,CAAC,CAAC,QAAQ,CAAE,CAAmB,CAAC,GAAG,CAAC;YAAE,OAAO;QAG3E,iBAAiB,CAAC,MAAM,EAAE,EAAE,CAAC,EAAE;YAC7B,WAAW,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC;YACnB,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,WAAW,CAAC,QAAQ,CAAC,IAAI,EAAE,MAAM,CAAC,CAAC,CAAC;QACvD,CAAC,CAAC,CAAC;IACL,CAAC,CAAC;IAEF,OAAO,CACL,CAAC,SAAS,CACR,UAAU,CAAC,CAAC;YACV,KAAK;YACL,aAAa;YACb,WAAW;SACZ,CAAC,CACF,OAAO,CAAC,CAAC,WAAW,CAAC,CACrB,WAAW,CAAC,sCAAsC,EAClD,CACH,CAAC;AACJ,CAAC,CAAC","sourcesContent":["import { Story, Meta } from '@storybook/react';\nimport { useState, MouseEvent, KeyboardEvent, useEffect } from 'react';\n\nimport { Clipboard, ClipboardProps, FieldSummaryProps } from '@pega/cosmos-react-tools';\nimport { treeHelpers } from '@pega/cosmos-react-core';\n\nimport { allNodes, childNodes, getDetailsData } from './Clipboard.mocks';\n\nexport default {\n  title: 'Tools/Clipboard',\n  component: Clipboard,\n  parameters: {\n    layout: 'fullscreen'\n  }\n} as Meta;\n\nexport const ClipboardViewerDemo: Story<ClipboardProps> = () => {\n  const [nodes, setNodes] = useState(allNodes);\n  const [currentNodeId, setCurrentNodeId] = useState(allNodes[0].id);\n  const [pageDetails, setPageDetails] = useState<FieldSummaryProps | undefined>();\n  const timeouts: ReturnType<typeof setTimeout>[] = [];\n\n  useEffect(() => {\n    return () => {\n      timeouts.forEach((timeout: ReturnType<typeof setTimeout>) => {\n        clearTimeout(timeout);\n      });\n    };\n  }, []);\n\n  // Update main content based on id\n  const updatePageDetails = (id: string, cb?: (id: string) => void) => {\n    setPageDetails({ primary: '', fields: [], loading: true });\n    const response = getDetailsData(id, cb);\n    timeouts.push(setTimeout(() => setPageDetails(response), 1300));\n  };\n\n  // set loading and expanded to selected node if it is a parent\n  const updateActiveParentNode = (id: string) => {\n    setNodes(tree =>\n      treeHelpers.mapNode(tree, id, node => {\n        return {\n          ...node,\n          expanded: !node.expanded,\n          loading: node.nodes?.length === 0\n        };\n      })\n    );\n  };\n\n  // get child nodes for the parent and set loading to false\n  const loadChildNodes = (id: string) => {\n    timeouts.push(\n      setTimeout(() => {\n        setNodes(tree =>\n          treeHelpers.mapNode(tree, id, node =>\n            node.nodes?.length === 0\n              ? {\n                  ...node,\n                  loading: false,\n                  nodes: id === 'D_pzPreferenceStore' ? childNodes : undefined\n                }\n              : node\n          )\n        );\n      }, 1000)\n    );\n  };\n\n  const onNodeClick = (nodeId: string, e: MouseEvent<HTMLElement> | KeyboardEvent<HTMLElement>) => {\n    // get clicked node details and set it as active\n    const node = treeHelpers.getNode(nodes, nodeId);\n    setCurrentNodeId(nodeId);\n\n    // expand node if it is a parent and shows loading indicator for child\n    if (node?.nodes && node?.nodes?.length >= 0) {\n      updateActiveParentNode(nodeId);\n    }\n\n    // get child nodes and set new nodes to state\n    loadChildNodes(nodeId);\n\n    // Do not change maincontent if tree is navigated using arrow buttons\n    if (['ArrowRight', 'ArrowLeft'].includes((e as KeyboardEvent).key)) return;\n\n    // set main content based on active node\n    updatePageDetails(nodeId, id => {\n      onNodeClick(id, e);\n      setNodes(tree => treeHelpers.expandTo(tree, nodeId));\n    });\n  };\n\n  return (\n    <Clipboard\n      navigation={{\n        nodes,\n        currentNodeId,\n        onNodeClick\n      }}\n      content={pageDetails}\n      lastUpdated='Last updated: Less than a minute ago'\n    />\n  );\n};\n"]}

package/jsx/work/CaseView/CaseView.mocks.jsx

@@ -233,11 +233,11 @@ export const getSecondaryFields = ({ setPreviewCaseId, setPreviewCurrentTabId })
         },
         {
             name: 'Previewable Case',
-            value: (<Link href='/cases/C-789' previewable onPreview={() => {
-                    setPreviewCaseId('C-789');
-                    setPreviewCurrentTabId('summary-C-789');
+            value: (<Link href='/cases/C-456' previewable onPreview={() => {
+                    setPreviewCaseId('C-456');
+                    setPreviewCurrentTabId('summary-C-456');
                 }}>
-          Previewable Case - C-789
+          Previewable Case - C-456
         </Link>)
         }
     ];

package/jsx/work/CaseView/CaseView.mocks.jsx.map

@@ -1 +1 @@
-{"version":3,"file":"CaseView.mocks.jsx","sourceRoot":"","sources":["../../../src/work/CaseView/CaseView.mocks.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Dispatch, SetStateAction, useEffect, useMemo, useState } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport {\n  Avatar,\n  Button,\n  Link,\n  createStringMatcher,\n  Modal,\n  Popover,\n  SummaryList,\n  SummaryListProps,\n  useModalManager,\n  useElement,\n  useOuterEvent,\n  ViewAll,\n  Status,\n  createUID,\n  Flex\n} from '@pega/cosmos-react-core';\nimport type { Tab } from '@pega/cosmos-react-core/lib/components/Tabs/Tabs.types';\nimport { Glimpse, CaseViewProps } from '@pega/cosmos-react-work';\nimport { TokenMap } from '@pega/cosmos-react-rte';\nimport { FeedProps } from '@pega/cosmos-react-social/lib/components/Feed/Feed';\n\nimport { TableDemo } from '../../core/Table/Table.stories';\nimport { useMockListData } from '../../core/SummaryList/SummaryList.mocks';\nimport { StakeHoldersDemo } from '../Stakeholders/Stakeholders.stories';\nimport { TagsDemo } from '../Tags/Tags.stories';\n\nimport { PulseMock } from './Pulse.mocks';\nimport { Details } from './Details.mocks';\nimport { AttachmentsMock } from './Attachments.mocks';\n\ninterface PreviewSetters {\n  setPreviewCaseId: Dispatch<SetStateAction<string | null>>;\n  setPreviewCurrentTabId: Dispatch<SetStateAction<string>>;\n}\n\nconst createDate = new Date(2016, 1, 8);\nconst msInYear = 1000 * 60 * 60 * 24 * 365;\nconst diffInYears = Math.floor((Date.now() - createDate.getTime()) / msInYear);\n\nexport const baseCaseTabs = ['Details', 'Pulse', 'Accounts'].map((name): Tab => {\n  return {\n    name,\n    id: name\n  };\n});\n\nconst singularize = (s = '') => s.replace(/s$/i, '').toLowerCase();\n\nexport const MockSummaryListViewAllModal = ({ name, count }: any) => {\n  const [search, setSearch] = useState('');\n  const [loading, setLoading] = useState(true);\n  const [items] = useMockListData(\n    () => {\n      setLoading(false);\n    },\n    {\n      count\n    }\n  );\n\n  const onSearchChange = (value: string) => {\n    setSearch(value.trim());\n  };\n\n  const itemsToRender = useMemo(() => {\n    if (search) {\n      const regEx = createStringMatcher(search, 'boundary');\n      return items.filter(({ primary, id }) => regEx.test(primary) || regEx.test(id));\n    }\n\n    return items;\n  }, [items, search]);\n\n  return (\n    <Modal heading={name}>\n      <ViewAll\n        loading={loading}\n        items={itemsToRender}\n        actions={[\n          {\n            id: 'addNew',\n            text: `Add ${singularize(name)}`\n          }\n        ]}\n        searchInputProps={{ onSearchChange }}\n      />\n    </Modal>\n  );\n};\n\nexport const MockSummaryList = ({\n  icon,\n  name,\n  actions,\n  limit\n}: Pick<SummaryListProps, 'icon' | 'name'> & { actions?: null; limit?: number }) => {\n  const { create: createModal } = useModalManager();\n  const [loading, setLoading] = useState(true);\n  const count = Math.floor(Math.random() * 144) + 7;\n\n  const [items] = useMockListData(\n    () => {\n      setLoading(false);\n    },\n    { count: limit }\n  );\n\n  return (\n    <SummaryList\n      loading={loading}\n      items={items}\n      icon={icon}\n      name={name}\n      count={loading ? undefined : count}\n      actions={\n        actions !== null\n          ? [\n              {\n                text: `Add new ${name}`,\n                id: `${name}:addNew`,\n                icon: 'plus',\n                onClick() {\n                  createModal(() => {\n                    const singularName = singularize(name);\n                    return (\n                      <Modal heading={`Add new ${singularName}`}>\n                        {`Content for adding a new ${singularName} goes here…`}\n                      </Modal>\n                    );\n                  });\n                }\n              }\n            ]\n          : undefined\n      }\n      onViewAll={() => {\n        createModal(MockSummaryListViewAllModal, {\n          name,\n          count\n        });\n      }}\n    />\n  );\n};\n\nexport const MockOperatorFieldValue = () => {\n  const [showGlimpse, setShowGlimpse] = useState(false);\n  const [operatorBtn, setOperatorBtn] = useElement(null);\n  const [popoverEl, setPopoverEl] = useElement(null);\n\n  useOuterEvent('click', [popoverEl], () => {\n    setShowGlimpse(false);\n  });\n\n  const onKeydown = (e: KeyboardEvent) => {\n    if (showGlimpse && e.key === 'Escape') {\n      setShowGlimpse(false);\n    }\n  };\n\n  useEffect(() => {\n    document.addEventListener('keydown', onKeydown);\n    return () => {\n      document.removeEventListener('keydown', onKeydown);\n    };\n  }, [showGlimpse]);\n\n  return (\n    <>\n      <Button\n        variant='link'\n        onClick={() => {\n          setShowGlimpse(true);\n        }}\n        ref={setOperatorBtn}\n      >\n        cosmos@pega.com\n      </Button>\n      {showGlimpse && (\n        <Popover\n          target={operatorBtn}\n          ref={setPopoverEl}\n          strategy='fixed'\n          placement='bottom-start'\n          arrow\n        >\n          <Glimpse\n            id='cosmos'\n            primary='Cosmos Operator'\n            secondary={['Director of the stars']}\n            visual={<Avatar size='l' name='Cosmos Operator' />}\n            fields={[\n              {\n                id: '1',\n                name: 'Department',\n                value: 'Space Travel'\n              },\n              {\n                id: '2',\n                name: 'Manager',\n                value: 'Captain Galaxy'\n              },\n              {\n                id: '3',\n                name: 'Location',\n                value: 'A galaxy far away'\n              },\n              {\n                id: '4',\n                name: 'Email',\n                value: <Link href='mailto:cosmos@pega.com'>cosmos@pega.com</Link>\n              },\n              {\n                id: '5',\n                name: 'Telephone',\n                value: <Link href='tel:555-123-4567'>555-123-4567</Link>\n              }\n            ]}\n          />\n        </Popover>\n      )}\n    </>\n  );\n};\n\nexport const PreviewLinkComponent = ({\n  token: linkToken,\n  setPreviewCaseId,\n  setPreviewCurrentTabId\n}: { token: TokenMap['link'] } & PreviewSetters) => {\n  return (\n    <Link\n      href={linkToken.href}\n      previewable\n      onPreview={() => {\n        setPreviewCaseId(linkToken.href);\n        setPreviewCurrentTabId(`summary-${linkToken.href}`);\n      }}\n    >\n      {linkToken.text}\n    </Link>\n  );\n};\n\nexport const getPulseMarkdownMap = ({\n  setPreviewCaseId,\n  setPreviewCurrentTabId\n}: PreviewSetters): FeedProps['markdownMap'] => {\n  return {\n    link: (linkToken: TokenMap['link']) => {\n      if (linkToken.href?.startsWith('C-')) {\n        return () => (\n          <PreviewLinkComponent\n            token={linkToken}\n            setPreviewCaseId={setPreviewCaseId}\n            setPreviewCurrentTabId={setPreviewCurrentTabId}\n          />\n        );\n      }\n    }\n  };\n};\n\nexport const onMentionPreview = ({\n  id,\n  type,\n  setPreviewCaseId,\n  setPreviewCurrentTabId\n}: {\n  id: string;\n  type: string;\n} & PreviewSetters) => {\n  if (type === 'case') {\n    setPreviewCaseId(id);\n    setPreviewCurrentTabId(`summary-${id}`);\n  }\n};\n\nexport const getTabContent = ({ setPreviewCaseId, setPreviewCurrentTabId }: PreviewSetters) => {\n  return [\n    {\n      id: 'Details',\n      content: <Details />\n    },\n    {\n      id: 'Pulse',\n      content: (\n        <PulseMock\n          markdownMap={getPulseMarkdownMap({ setPreviewCaseId, setPreviewCurrentTabId })}\n          onMentionPreview={({ id, type }) => {\n            onMentionPreview({ id, type, setPreviewCaseId, setPreviewCurrentTabId });\n          }}\n        />\n      )\n    },\n    {\n      id: 'Accounts',\n      content: <TableDemo />\n    },\n    {\n      id: 'not found',\n      content: <h2>Not Found</h2>\n    }\n  ];\n};\n\nexport const previewTabContent = [\n  {\n    id: 'Details',\n    content: <Details />\n  },\n  {\n    id: 'Pulse',\n    content: <PulseMock />\n  },\n  {\n    id: 'Accounts',\n    content: <TableDemo />\n  },\n  {\n    id: 'not found',\n    content: <h2>Not Found</h2>\n  }\n];\n\nexport const getPrimaryFields = () => {\n  return [\n    {\n      name: 'Member ID',\n      value: 'M205435569FD'\n    },\n    {\n      name: 'Priority',\n      value: '95'\n    }\n  ].map((f, i) => ({ ...f, id: `p-${i}` }));\n};\n\nconst baseSecondaryFields = [\n  {\n    name: 'Status',\n    value: <Status variant='info'>New</Status>\n  },\n  {\n    name: 'Assigned to',\n    value: 'Dean Thomas'\n  },\n  {\n    name: 'Create date',\n    value: createDate.toDateString()\n  },\n  {\n    name: 'Update date',\n    value: `${diffInYears} years ago`\n  }\n];\n\nexport const getSecondaryFields = ({\n  setPreviewCaseId,\n  setPreviewCurrentTabId\n}: PreviewSetters) => {\n  return [\n    ...baseSecondaryFields,\n    {\n      name: 'Created by',\n      value: <MockOperatorFieldValue />\n    },\n    {\n      name: 'Previewable Case',\n      value: (\n        <Link\n          href='/cases/C-789'\n          previewable\n          onPreview={() => {\n            setPreviewCaseId('C-789');\n            setPreviewCurrentTabId('summary-C-789');\n          }}\n        >\n          Previewable Case - C-789\n        </Link>\n      )\n    }\n  ];\n};\n\nexport const casePreviewPrimaryFields = [\n  {\n    name: 'Member ID',\n    value: 'M204859F438G'\n  },\n  {\n    name: 'Priority',\n    value: '95'\n  }\n];\n\nexport const casePreviewSecondaryFields = baseSecondaryFields;\n\nexport const getParentCases = ({\n  caseId,\n  setPreviewCaseId,\n  setPreviewCurrentTabId\n}: {\n  caseId: CaseViewProps['caseId'];\n} & PreviewSetters) => {\n  const ids = new Set([caseId]);\n\n  return Array.from({ length: 5 }, (_, i) => {\n    let id: string;\n    // Ensure parent ids are unique.\n    do {\n      id = `C-${Math.floor(Math.random() * 200 + 100)}`;\n    } while (ids.has(id));\n    ids.add(id);\n\n    return {\n      id,\n      primary: `Parent ${5 - i} - ${id}`,\n      href: `/cases/${id}`,\n      previewable: true,\n      onPreview: () => {\n        setPreviewCaseId(id);\n        setPreviewCurrentTabId(`summary-${id}`);\n      }\n    };\n  });\n};\n\nexport const Utilities = () => {\n  return (\n    <>\n      <AttachmentsMock />\n      <StakeHoldersDemo />\n      <MockSummaryList icon='user-star' name='Followers' />\n      <TagsDemo />\n    </>\n  );\n};\n\nexport const getUtilitiesSummaryItems = () => {\n  return [\n    { iconName: 'paper-clip', count: 4 },\n    { iconName: 'user-search-solid', count: 10 },\n    { iconName: 'user-star-solid', count: 5 },\n    { iconName: 'tag', count: 10 }\n  ];\n};\n\nexport const getCaseActions = () => {\n  return Array.from({ length: 12 }, (_, i) => {\n    return {\n      text: `Action ${i + 1}`,\n      id: `${i + 1}`,\n      onClick: () => {}\n    };\n  });\n};\n\nexport const getPromotedActions = () => {\n  return [{ id: createUID(), text: 'Promoted action', onClick: () => {} }];\n};\n\nconst StyledPersistentUtilityContent = styled.div(({ theme }) => {\n  return css`\n    height: 100%;\n    border-inline: 0.0625rem dashed ${theme.base.palette['border-line']};\n  `;\n});\n\nexport const PersistentUtilityContent = () => {\n  return (\n    <Flex\n      container={{ justify: 'center', alignItems: 'center' }}\n      as={StyledPersistentUtilityContent}\n    >\n      Persistent utility content\n    </Flex>\n  );\n};\n"]}
+{"version":3,"file":"CaseView.mocks.jsx","sourceRoot":"","sources":["../../../src/work/CaseView/CaseView.mocks.tsx"],"names":[],"mappings":"AAAA,OAAO,EAA4B,SAAS,EAAE,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAC/E,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAEhD,OAAO,EACL,MAAM,EACN,MAAM,EACN,IAAI,EACJ,mBAAmB,EACnB,KAAK,EACL,OAAO,EACP,WAAW,EAEX,eAAe,EACf,UAAU,EACV,aAAa,EACb,OAAO,EACP,MAAM,EACN,SAAS,EACT,IAAI,EACL,MAAM,yBAAyB,CAAC;AAEjC,OAAO,EAAE,OAAO,EAAiB,MAAM,yBAAyB,CAAC;AAIjE,OAAO,EAAE,SAAS,EAAE,MAAM,gCAAgC,CAAC;AAC3D,OAAO,EAAE,eAAe,EAAE,MAAM,0CAA0C,CAAC;AAC3E,OAAO,EAAE,gBAAgB,EAAE,MAAM,sCAAsC,CAAC;AACxE,OAAO,EAAE,QAAQ,EAAE,MAAM,sBAAsB,CAAC;AAEhD,OAAO,EAAE,SAAS,EAAE,MAAM,eAAe,CAAC;AAC1C,OAAO,EAAE,OAAO,EAAE,MAAM,iBAAiB,CAAC;AAC1C,OAAO,EAAE,eAAe,EAAE,MAAM,qBAAqB,CAAC;AAOtD,MAAM,UAAU,GAAG,IAAI,IAAI,CAAC,IAAI,EAAE,CAAC,EAAE,CAAC,CAAC,CAAC;AACxC,MAAM,QAAQ,GAAG,IAAI,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,GAAG,CAAC;AAC3C,MAAM,WAAW,GAAG,IAAI,CAAC,KAAK,CAAC,CAAC,IAAI,CAAC,GAAG,EAAE,GAAG,UAAU,CAAC,OAAO,EAAE,CAAC,GAAG,QAAQ,CAAC,CAAC;AAE/E,MAAM,CAAC,MAAM,YAAY,GAAG,CAAC,SAAS,EAAE,OAAO,EAAE,UAAU,CAAC,CAAC,GAAG,CAAC,CAAC,IAAI,EAAO,EAAE;IAC7E,OAAO;QACL,IAAI;QACJ,EAAE,EAAE,IAAI;KACT,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,MAAM,WAAW,GAAG,CAAC,CAAC,GAAG,EAAE,EAAE,EAAE,CAAC,CAAC,CAAC,OAAO,CAAC,KAAK,EAAE,EAAE,CAAC,CAAC,WAAW,EAAE,CAAC;AAEnE,MAAM,CAAC,MAAM,2BAA2B,GAAG,CAAC,EAAE,IAAI,EAAE,KAAK,EAAO,EAAE,EAAE;IAClE,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,GAAG,QAAQ,CAAC,EAAE,CAAC,CAAC;IACzC,MAAM,CAAC,OAAO,EAAE,UAAU,CAAC,GAAG,QAAQ,CAAC,IAAI,CAAC,CAAC;IAC7C,MAAM,CAAC,KAAK,CAAC,GAAG,eAAe,CAC7B,GAAG,EAAE;QACH,UAAU,CAAC,KAAK,CAAC,CAAC;IACpB,CAAC,EACD;QACE,KAAK;KACN,CACF,CAAC;IAEF,MAAM,cAAc,GAAG,CAAC,KAAa,EAAE,EAAE;QACvC,SAAS,CAAC,KAAK,CAAC,IAAI,EAAE,CAAC,CAAC;IAC1B,CAAC,CAAC;IAEF,MAAM,aAAa,GAAG,OAAO,CAAC,GAAG,EAAE;QACjC,IAAI,MAAM,EAAE;YACV,MAAM,KAAK,GAAG,mBAAmB,CAAC,MAAM,EAAE,UAAU,CAAC,CAAC;YACtD,OAAO,KAAK,CAAC,MAAM,CAAC,CAAC,EAAE,OAAO,EAAE,EAAE,EAAE,EAAE,EAAE,CAAC,KAAK,CAAC,IAAI,CAAC,OAAO,CAAC,IAAI,KAAK,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC,CAAC;SACjF;QAED,OAAO,KAAK,CAAC;IACf,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,CAAC,CAAC,CAAC;IAEpB,OAAO,CACL,CAAC,KAAK,CAAC,OAAO,CAAC,CAAC,IAAI,CAAC,CACnB;MAAA,CAAC,OAAO,CACN,OAAO,CAAC,CAAC,OAAO,CAAC,CACjB,KAAK,CAAC,CAAC,aAAa,CAAC,CACrB,OAAO,CAAC,CAAC;YACP;gBACE,EAAE,EAAE,QAAQ;gBACZ,IAAI,EAAE,OAAO,WAAW,CAAC,IAAI,CAAC,EAAE;aACjC;SACF,CAAC,CACF,gBAAgB,CAAC,CAAC,EAAE,cAAc,EAAE,CAAC,EAEzC;IAAA,EAAE,KAAK,CAAC,CACT,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,eAAe,GAAG,CAAC,EAC9B,IAAI,EACJ,IAAI,EACJ,OAAO,EACP,KAAK,EACwE,EAAE,EAAE;IACjF,MAAM,EAAE,MAAM,EAAE,WAAW,EAAE,GAAG,eAAe,EAAE,CAAC;IAClD,MAAM,CAAC,OAAO,EAAE,UAAU,CAAC,GAAG,QAAQ,CAAC,IAAI,CAAC,CAAC;IAC7C,MAAM,KAAK,GAAG,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,MAAM,EAAE,GAAG,GAAG,CAAC,GAAG,CAAC,CAAC;IAElD,MAAM,CAAC,KAAK,CAAC,GAAG,eAAe,CAC7B,GAAG,EAAE;QACH,UAAU,CAAC,KAAK,CAAC,CAAC;IACpB,CAAC,EACD,EAAE,KAAK,EAAE,KAAK,EAAE,CACjB,CAAC;IAEF,OAAO,CACL,CAAC,WAAW,CACV,OAAO,CAAC,CAAC,OAAO,CAAC,CACjB,KAAK,CAAC,CAAC,KAAK,CAAC,CACb,IAAI,CAAC,CAAC,IAAI,CAAC,CACX,IAAI,CAAC,CAAC,IAAI,CAAC,CACX,KAAK,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,KAAK,CAAC,CACnC,OAAO,CAAC,CACN,OAAO,KAAK,IAAI;YACd,CAAC,CAAC;gBACE;oBACE,IAAI,EAAE,WAAW,IAAI,EAAE;oBACvB,EAAE,EAAE,GAAG,IAAI,SAAS;oBACpB,IAAI,EAAE,MAAM;oBACZ,OAAO;wBACL,WAAW,CAAC,GAAG,EAAE;4BACf,MAAM,YAAY,GAAG,WAAW,CAAC,IAAI,CAAC,CAAC;4BACvC,OAAO,CACL,CAAC,KAAK,CAAC,OAAO,CAAC,CAAC,WAAW,YAAY,EAAE,CAAC,CACxC;wBAAA,CAAC,4BAA4B,YAAY,aAAa,CACxD;sBAAA,EAAE,KAAK,CAAC,CACT,CAAC;wBACJ,CAAC,CAAC,CAAC;oBACL,CAAC;iBACF;aACF;YACH,CAAC,CAAC,SAAS,CACd,CACD,SAAS,CAAC,CAAC,GAAG,EAAE;YACd,WAAW,CAAC,2BAA2B,EAAE;gBACvC,IAAI;gBACJ,KAAK;aACN,CAAC,CAAC;QACL,CAAC,CAAC,EACF,CACH,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,sBAAsB,GAAG,GAAG,EAAE;IACzC,MAAM,CAAC,WAAW,EAAE,cAAc,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IACtD,MAAM,CAAC,WAAW,EAAE,cAAc,CAAC,GAAG,UAAU,CAAC,IAAI,CAAC,CAAC;IACvD,MAAM,CAAC,SAAS,EAAE,YAAY,CAAC,GAAG,UAAU,CAAC,IAAI,CAAC,CAAC;IAEnD,aAAa,CAAC,OAAO,EAAE,CAAC,SAAS,CAAC,EAAE,GAAG,EAAE;QACvC,cAAc,CAAC,KAAK,CAAC,CAAC;IACxB,CAAC,CAAC,CAAC;IAEH,MAAM,SAAS,GAAG,CAAC,CAAgB,EAAE,EAAE;QACrC,IAAI,WAAW,IAAI,CAAC,CAAC,GAAG,KAAK,QAAQ,EAAE;YACrC,cAAc,CAAC,KAAK,CAAC,CAAC;SACvB;IACH,CAAC,CAAC;IAEF,SAAS,CAAC,GAAG,EAAE;QACb,QAAQ,CAAC,gBAAgB,CAAC,SAAS,EAAE,SAAS,CAAC,CAAC;QAChD,OAAO,GAAG,EAAE;YACV,QAAQ,CAAC,mBAAmB,CAAC,SAAS,EAAE,SAAS,CAAC,CAAC;QACrD,CAAC,CAAC;IACJ,CAAC,EAAE,CAAC,WAAW,CAAC,CAAC,CAAC;IAElB,OAAO,CACL,EACE;MAAA,CAAC,MAAM,CACL,OAAO,CAAC,MAAM,CACd,OAAO,CAAC,CAAC,GAAG,EAAE;YACZ,cAAc,CAAC,IAAI,CAAC,CAAC;QACvB,CAAC,CAAC,CACF,GAAG,CAAC,CAAC,cAAc,CAAC,CAEpB;;MACF,EAAE,MAAM,CACR;MAAA,CAAC,WAAW,IAAI,CACd,CAAC,OAAO,CACN,MAAM,CAAC,CAAC,WAAW,CAAC,CACpB,GAAG,CAAC,CAAC,YAAY,CAAC,CAClB,QAAQ,CAAC,OAAO,CAChB,SAAS,CAAC,cAAc,CACxB,KAAK,CAEL;UAAA,CAAC,OAAO,CACN,EAAE,CAAC,QAAQ,CACX,OAAO,CAAC,iBAAiB,CACzB,SAAS,CAAC,CAAC,CAAC,uBAAuB,CAAC,CAAC,CACrC,MAAM,CAAC,CAAC,CAAC,MAAM,CAAC,IAAI,CAAC,GAAG,CAAC,IAAI,CAAC,iBAAiB,EAAG,CAAC,CACnD,MAAM,CAAC,CAAC;gBACN;oBACE,EAAE,EAAE,GAAG;oBACP,IAAI,EAAE,YAAY;oBAClB,KAAK,EAAE,cAAc;iBACtB;gBACD;oBACE,EAAE,EAAE,GAAG;oBACP,IAAI,EAAE,SAAS;oBACf,KAAK,EAAE,gBAAgB;iBACxB;gBACD;oBACE,EAAE,EAAE,GAAG;oBACP,IAAI,EAAE,UAAU;oBAChB,KAAK,EAAE,mBAAmB;iBAC3B;gBACD;oBACE,EAAE,EAAE,GAAG;oBACP,IAAI,EAAE,OAAO;oBACb,KAAK,EAAE,CAAC,IAAI,CAAC,IAAI,CAAC,wBAAwB,CAAC,eAAe,EAAE,IAAI,CAAC;iBAClE;gBACD;oBACE,EAAE,EAAE,GAAG;oBACP,IAAI,EAAE,WAAW;oBACjB,KAAK,EAAE,CAAC,IAAI,CAAC,IAAI,CAAC,kBAAkB,CAAC,YAAY,EAAE,IAAI,CAAC;iBACzD;aACF,CAAC,EAEN;QAAA,EAAE,OAAO,CAAC,CACX,CACH;IAAA,GAAG,CACJ,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,oBAAoB,GAAG,CAAC,EACnC,KAAK,EAAE,SAAS,EAChB,gBAAgB,EAChB,sBAAsB,EACuB,EAAE,EAAE;IACjD,OAAO,CACL,CAAC,IAAI,CACH,IAAI,CAAC,CAAC,SAAS,CAAC,IAAI,CAAC,CACrB,WAAW,CACX,SAAS,CAAC,CAAC,GAAG,EAAE;YACd,gBAAgB,CAAC,SAAS,CAAC,IAAI,CAAC,CAAC;YACjC,sBAAsB,CAAC,WAAW,SAAS,CAAC,IAAI,EAAE,CAAC,CAAC;QACtD,CAAC,CAAC,CAEF;MAAA,CAAC,SAAS,CAAC,IAAI,CACjB;IAAA,EAAE,IAAI,CAAC,CACR,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,mBAAmB,GAAG,CAAC,EAClC,gBAAgB,EAChB,sBAAsB,EACP,EAA4B,EAAE;IAC7C,OAAO;QACL,IAAI,EAAE,CAAC,SAA2B,EAAE,EAAE;YACpC,IAAI,SAAS,CAAC,IAAI,EAAE,UAAU,CAAC,IAAI,CAAC,EAAE;gBACpC,OAAO,GAAG,EAAE,CAAC,CACX,CAAC,oBAAoB,CACnB,KAAK,CAAC,CAAC,SAAS,CAAC,CACjB,gBAAgB,CAAC,CAAC,gBAAgB,CAAC,CACnC,sBAAsB,CAAC,CAAC,sBAAsB,CAAC,EAC/C,CACH,CAAC;aACH;QACH,CAAC;KACF,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,gBAAgB,GAAG,CAAC,EAC/B,EAAE,EACF,IAAI,EACJ,gBAAgB,EAChB,sBAAsB,EAIN,EAAE,EAAE;IACpB,IAAI,IAAI,KAAK,MAAM,EAAE;QACnB,gBAAgB,CAAC,EAAE,CAAC,CAAC;QACrB,sBAAsB,CAAC,WAAW,EAAE,EAAE,CAAC,CAAC;KACzC;AACH,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,aAAa,GAAG,CAAC,EAAE,gBAAgB,EAAE,sBAAsB,EAAkB,EAAE,EAAE;IAC5F,OAAO;QACL;YACE,EAAE,EAAE,SAAS;YACb,OAAO,EAAE,CAAC,OAAO,CAAC,AAAD,EAAG;SACrB;QACD;YACE,EAAE,EAAE,OAAO;YACX,OAAO,EAAE,CACP,CAAC,SAAS,CACR,WAAW,CAAC,CAAC,mBAAmB,CAAC,EAAE,gBAAgB,EAAE,sBAAsB,EAAE,CAAC,CAAC,CAC/E,gBAAgB,CAAC,CAAC,CAAC,EAAE,EAAE,EAAE,IAAI,EAAE,EAAE,EAAE;oBACjC,gBAAgB,CAAC,EAAE,EAAE,EAAE,IAAI,EAAE,gBAAgB,EAAE,sBAAsB,EAAE,CAAC,CAAC;gBAC3E,CAAC,CAAC,EACF,CACH;SACF;QACD;YACE,EAAE,EAAE,UAAU;YACd,OAAO,EAAE,CAAC,SAAS,CAAC,AAAD,EAAG;SACvB;QACD;YACE,EAAE,EAAE,WAAW;YACf,OAAO,EAAE,CAAC,EAAE,CAAC,SAAS,EAAE,EAAE,CAAC;SAC5B;KACF,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,iBAAiB,GAAG;IAC/B;QACE,EAAE,EAAE,SAAS;QACb,OAAO,EAAE,CAAC,OAAO,CAAC,AAAD,EAAG;KACrB;IACD;QACE,EAAE,EAAE,OAAO;QACX,OAAO,EAAE,CAAC,SAAS,CAAC,AAAD,EAAG;KACvB;IACD;QACE,EAAE,EAAE,UAAU;QACd,OAAO,EAAE,CAAC,SAAS,CAAC,AAAD,EAAG;KACvB;IACD;QACE,EAAE,EAAE,WAAW;QACf,OAAO,EAAE,CAAC,EAAE,CAAC,SAAS,EAAE,EAAE,CAAC;KAC5B;CACF,CAAC;AAEF,MAAM,CAAC,MAAM,gBAAgB,GAAG,GAAG,EAAE;IACnC,OAAO;QACL;YACE,IAAI,EAAE,WAAW;YACjB,KAAK,EAAE,cAAc;SACtB;QACD;YACE,IAAI,EAAE,UAAU;YAChB,KAAK,EAAE,IAAI;SACZ;KACF,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC,EAAE,GAAG,CAAC,EAAE,EAAE,EAAE,KAAK,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC;AAC5C,CAAC,CAAC;AAEF,MAAM,mBAAmB,GAAG;IAC1B;QACE,IAAI,EAAE,QAAQ;QACd,KAAK,EAAE,CAAC,MAAM,CAAC,OAAO,CAAC,MAAM,CAAC,GAAG,EAAE,MAAM,CAAC;KAC3C;IACD;QACE,IAAI,EAAE,aAAa;QACnB,KAAK,EAAE,aAAa;KACrB;IACD;QACE,IAAI,EAAE,aAAa;QACnB,KAAK,EAAE,UAAU,CAAC,YAAY,EAAE;KACjC;IACD;QACE,IAAI,EAAE,aAAa;QACnB,KAAK,EAAE,GAAG,WAAW,YAAY;KAClC;CACF,CAAC;AAEF,MAAM,CAAC,MAAM,kBAAkB,GAAG,CAAC,EACjC,gBAAgB,EAChB,sBAAsB,EACP,EAAE,EAAE;IACnB,OAAO;QACL,GAAG,mBAAmB;QACtB;YACE,IAAI,EAAE,YAAY;YAClB,KAAK,EAAE,CAAC,sBAAsB,CAAC,AAAD,EAAG;SAClC;QACD;YACE,IAAI,EAAE,kBAAkB;YACxB,KAAK,EAAE,CACL,CAAC,IAAI,CACH,IAAI,CAAC,cAAc,CACnB,WAAW,CACX,SAAS,CAAC,CAAC,GAAG,EAAE;oBACd,gBAAgB,CAAC,OAAO,CAAC,CAAC;oBAC1B,sBAAsB,CAAC,eAAe,CAAC,CAAC;gBAC1C,CAAC,CAAC,CAEF;;QACF,EAAE,IAAI,CAAC,CACR;SACF;KACF,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,wBAAwB,GAAG;IACtC;QACE,IAAI,EAAE,WAAW;QACjB,KAAK,EAAE,cAAc;KACtB;IACD;QACE,IAAI,EAAE,UAAU;QAChB,KAAK,EAAE,IAAI;KACZ;CACF,CAAC;AAEF,MAAM,CAAC,MAAM,0BAA0B,GAAG,mBAAmB,CAAC;AAE9D,MAAM,CAAC,MAAM,cAAc,GAAG,CAAC,EAC7B,MAAM,EACN,gBAAgB,EAChB,sBAAsB,EAGN,EAAE,EAAE;IACpB,MAAM,GAAG,GAAG,IAAI,GAAG,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC;IAE9B,OAAO,KAAK,CAAC,IAAI,CAAC,EAAE,MAAM,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE;QACxC,IAAI,EAAU,CAAC;QAEf,GAAG;YACD,EAAE,GAAG,KAAK,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,MAAM,EAAE,GAAG,GAAG,GAAG,GAAG,CAAC,EAAE,CAAC;SACnD,QAAQ,GAAG,CAAC,GAAG,CAAC,EAAE,CAAC,EAAE;QACtB,GAAG,CAAC,GAAG,CAAC,EAAE,CAAC,CAAC;QAEZ,OAAO;YACL,EAAE;YACF,OAAO,EAAE,UAAU,CAAC,GAAG,CAAC,MAAM,EAAE,EAAE;YAClC,IAAI,EAAE,UAAU,EAAE,EAAE;YACpB,WAAW,EAAE,IAAI;YACjB,SAAS,EAAE,GAAG,EAAE;gBACd,gBAAgB,CAAC,EAAE,CAAC,CAAC;gBACrB,sBAAsB,CAAC,WAAW,EAAE,EAAE,CAAC,CAAC;YAC1C,CAAC;SACF,CAAC;IACJ,CAAC,CAAC,CAAC;AACL,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,SAAS,GAAG,GAAG,EAAE;IAC5B,OAAO,CACL,EACE;MAAA,CAAC,eAAe,CAAC,AAAD,EAChB;MAAA,CAAC,gBAAgB,CAAC,AAAD,EACjB;MAAA,CAAC,eAAe,CAAC,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,WAAW,EAClD;MAAA,CAAC,QAAQ,CAAC,AAAD,EACX;IAAA,GAAG,CACJ,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,wBAAwB,GAAG,GAAG,EAAE;IAC3C,OAAO;QACL,EAAE,QAAQ,EAAE,YAAY,EAAE,KAAK,EAAE,CAAC,EAAE;QACpC,EAAE,QAAQ,EAAE,mBAAmB,EAAE,KAAK,EAAE,EAAE,EAAE;QAC5C,EAAE,QAAQ,EAAE,iBAAiB,EAAE,KAAK,EAAE,CAAC,EAAE;QACzC,EAAE,QAAQ,EAAE,KAAK,EAAE,KAAK,EAAE,EAAE,EAAE;KAC/B,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,cAAc,GAAG,GAAG,EAAE;IACjC,OAAO,KAAK,CAAC,IAAI,CAAC,EAAE,MAAM,EAAE,EAAE,EAAE,EAAE,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE;QACzC,OAAO;YACL,IAAI,EAAE,UAAU,CAAC,GAAG,CAAC,EAAE;YACvB,EAAE,EAAE,GAAG,CAAC,GAAG,CAAC,EAAE;YACd,OAAO,EAAE,GAAG,EAAE,GAAE,CAAC;SAClB,CAAC;IACJ,CAAC,CAAC,CAAC;AACL,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,kBAAkB,GAAG,GAAG,EAAE;IACrC,OAAO,CAAC,EAAE,EAAE,EAAE,SAAS,EAAE,EAAE,IAAI,EAAE,iBAAiB,EAAE,OAAO,EAAE,GAAG,EAAE,GAAE,CAAC,EAAE,CAAC,CAAC;AAC3E,CAAC,CAAC;AAEF,MAAM,8BAA8B,GAAG,MAAM,CAAC,GAAG,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE;IAC9D,OAAO,GAAG,CAAA;;sCAE0B,KAAK,CAAC,IAAI,CAAC,OAAO,CAAC,aAAa,CAAC;GACpE,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,MAAM,CAAC,MAAM,wBAAwB,GAAG,GAAG,EAAE;IAC3C,OAAO,CACL,CAAC,IAAI,CACH,SAAS,CAAC,CAAC,EAAE,OAAO,EAAE,QAAQ,EAAE,UAAU,EAAE,QAAQ,EAAE,CAAC,CACvD,EAAE,CAAC,CAAC,8BAA8B,CAAC,CAEnC;;IACF,EAAE,IAAI,CAAC,CACR,CAAC;AACJ,CAAC,CAAC","sourcesContent":["import { Dispatch, SetStateAction, useEffect, useMemo, useState } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport {\n  Avatar,\n  Button,\n  Link,\n  createStringMatcher,\n  Modal,\n  Popover,\n  SummaryList,\n  SummaryListProps,\n  useModalManager,\n  useElement,\n  useOuterEvent,\n  ViewAll,\n  Status,\n  createUID,\n  Flex\n} from '@pega/cosmos-react-core';\nimport type { Tab } from '@pega/cosmos-react-core/lib/components/Tabs/Tabs.types';\nimport { Glimpse, CaseViewProps } from '@pega/cosmos-react-work';\nimport { TokenMap } from '@pega/cosmos-react-rte';\nimport { FeedProps } from '@pega/cosmos-react-social/lib/components/Feed/Feed';\n\nimport { TableDemo } from '../../core/Table/Table.stories';\nimport { useMockListData } from '../../core/SummaryList/SummaryList.mocks';\nimport { StakeHoldersDemo } from '../Stakeholders/Stakeholders.stories';\nimport { TagsDemo } from '../Tags/Tags.stories';\n\nimport { PulseMock } from './Pulse.mocks';\nimport { Details } from './Details.mocks';\nimport { AttachmentsMock } from './Attachments.mocks';\n\ninterface PreviewSetters {\n  setPreviewCaseId: Dispatch<SetStateAction<string | null>>;\n  setPreviewCurrentTabId: Dispatch<SetStateAction<string>>;\n}\n\nconst createDate = new Date(2016, 1, 8);\nconst msInYear = 1000 * 60 * 60 * 24 * 365;\nconst diffInYears = Math.floor((Date.now() - createDate.getTime()) / msInYear);\n\nexport const baseCaseTabs = ['Details', 'Pulse', 'Accounts'].map((name): Tab => {\n  return {\n    name,\n    id: name\n  };\n});\n\nconst singularize = (s = '') => s.replace(/s$/i, '').toLowerCase();\n\nexport const MockSummaryListViewAllModal = ({ name, count }: any) => {\n  const [search, setSearch] = useState('');\n  const [loading, setLoading] = useState(true);\n  const [items] = useMockListData(\n    () => {\n      setLoading(false);\n    },\n    {\n      count\n    }\n  );\n\n  const onSearchChange = (value: string) => {\n    setSearch(value.trim());\n  };\n\n  const itemsToRender = useMemo(() => {\n    if (search) {\n      const regEx = createStringMatcher(search, 'boundary');\n      return items.filter(({ primary, id }) => regEx.test(primary) || regEx.test(id));\n    }\n\n    return items;\n  }, [items, search]);\n\n  return (\n    <Modal heading={name}>\n      <ViewAll\n        loading={loading}\n        items={itemsToRender}\n        actions={[\n          {\n            id: 'addNew',\n            text: `Add ${singularize(name)}`\n          }\n        ]}\n        searchInputProps={{ onSearchChange }}\n      />\n    </Modal>\n  );\n};\n\nexport const MockSummaryList = ({\n  icon,\n  name,\n  actions,\n  limit\n}: Pick<SummaryListProps, 'icon' | 'name'> & { actions?: null; limit?: number }) => {\n  const { create: createModal } = useModalManager();\n  const [loading, setLoading] = useState(true);\n  const count = Math.floor(Math.random() * 144) + 7;\n\n  const [items] = useMockListData(\n    () => {\n      setLoading(false);\n    },\n    { count: limit }\n  );\n\n  return (\n    <SummaryList\n      loading={loading}\n      items={items}\n      icon={icon}\n      name={name}\n      count={loading ? undefined : count}\n      actions={\n        actions !== null\n          ? [\n              {\n                text: `Add new ${name}`,\n                id: `${name}:addNew`,\n                icon: 'plus',\n                onClick() {\n                  createModal(() => {\n                    const singularName = singularize(name);\n                    return (\n                      <Modal heading={`Add new ${singularName}`}>\n                        {`Content for adding a new ${singularName} goes here…`}\n                      </Modal>\n                    );\n                  });\n                }\n              }\n            ]\n          : undefined\n      }\n      onViewAll={() => {\n        createModal(MockSummaryListViewAllModal, {\n          name,\n          count\n        });\n      }}\n    />\n  );\n};\n\nexport const MockOperatorFieldValue = () => {\n  const [showGlimpse, setShowGlimpse] = useState(false);\n  const [operatorBtn, setOperatorBtn] = useElement(null);\n  const [popoverEl, setPopoverEl] = useElement(null);\n\n  useOuterEvent('click', [popoverEl], () => {\n    setShowGlimpse(false);\n  });\n\n  const onKeydown = (e: KeyboardEvent) => {\n    if (showGlimpse && e.key === 'Escape') {\n      setShowGlimpse(false);\n    }\n  };\n\n  useEffect(() => {\n    document.addEventListener('keydown', onKeydown);\n    return () => {\n      document.removeEventListener('keydown', onKeydown);\n    };\n  }, [showGlimpse]);\n\n  return (\n    <>\n      <Button\n        variant='link'\n        onClick={() => {\n          setShowGlimpse(true);\n        }}\n        ref={setOperatorBtn}\n      >\n        cosmos@pega.com\n      </Button>\n      {showGlimpse && (\n        <Popover\n          target={operatorBtn}\n          ref={setPopoverEl}\n          strategy='fixed'\n          placement='bottom-start'\n          arrow\n        >\n          <Glimpse\n            id='cosmos'\n            primary='Cosmos Operator'\n            secondary={['Director of the stars']}\n            visual={<Avatar size='l' name='Cosmos Operator' />}\n            fields={[\n              {\n                id: '1',\n                name: 'Department',\n                value: 'Space Travel'\n              },\n              {\n                id: '2',\n                name: 'Manager',\n                value: 'Captain Galaxy'\n              },\n              {\n                id: '3',\n                name: 'Location',\n                value: 'A galaxy far away'\n              },\n              {\n                id: '4',\n                name: 'Email',\n                value: <Link href='mailto:cosmos@pega.com'>cosmos@pega.com</Link>\n              },\n              {\n                id: '5',\n                name: 'Telephone',\n                value: <Link href='tel:555-123-4567'>555-123-4567</Link>\n              }\n            ]}\n          />\n        </Popover>\n      )}\n    </>\n  );\n};\n\nexport const PreviewLinkComponent = ({\n  token: linkToken,\n  setPreviewCaseId,\n  setPreviewCurrentTabId\n}: { token: TokenMap['link'] } & PreviewSetters) => {\n  return (\n    <Link\n      href={linkToken.href}\n      previewable\n      onPreview={() => {\n        setPreviewCaseId(linkToken.href);\n        setPreviewCurrentTabId(`summary-${linkToken.href}`);\n      }}\n    >\n      {linkToken.text}\n    </Link>\n  );\n};\n\nexport const getPulseMarkdownMap = ({\n  setPreviewCaseId,\n  setPreviewCurrentTabId\n}: PreviewSetters): FeedProps['markdownMap'] => {\n  return {\n    link: (linkToken: TokenMap['link']) => {\n      if (linkToken.href?.startsWith('C-')) {\n        return () => (\n          <PreviewLinkComponent\n            token={linkToken}\n            setPreviewCaseId={setPreviewCaseId}\n            setPreviewCurrentTabId={setPreviewCurrentTabId}\n          />\n        );\n      }\n    }\n  };\n};\n\nexport const onMentionPreview = ({\n  id,\n  type,\n  setPreviewCaseId,\n  setPreviewCurrentTabId\n}: {\n  id: string;\n  type: string;\n} & PreviewSetters) => {\n  if (type === 'case') {\n    setPreviewCaseId(id);\n    setPreviewCurrentTabId(`summary-${id}`);\n  }\n};\n\nexport const getTabContent = ({ setPreviewCaseId, setPreviewCurrentTabId }: PreviewSetters) => {\n  return [\n    {\n      id: 'Details',\n      content: <Details />\n    },\n    {\n      id: 'Pulse',\n      content: (\n        <PulseMock\n          markdownMap={getPulseMarkdownMap({ setPreviewCaseId, setPreviewCurrentTabId })}\n          onMentionPreview={({ id, type }) => {\n            onMentionPreview({ id, type, setPreviewCaseId, setPreviewCurrentTabId });\n          }}\n        />\n      )\n    },\n    {\n      id: 'Accounts',\n      content: <TableDemo />\n    },\n    {\n      id: 'not found',\n      content: <h2>Not Found</h2>\n    }\n  ];\n};\n\nexport const previewTabContent = [\n  {\n    id: 'Details',\n    content: <Details />\n  },\n  {\n    id: 'Pulse',\n    content: <PulseMock />\n  },\n  {\n    id: 'Accounts',\n    content: <TableDemo />\n  },\n  {\n    id: 'not found',\n    content: <h2>Not Found</h2>\n  }\n];\n\nexport const getPrimaryFields = () => {\n  return [\n    {\n      name: 'Member ID',\n      value: 'M205435569FD'\n    },\n    {\n      name: 'Priority',\n      value: '95'\n    }\n  ].map((f, i) => ({ ...f, id: `p-${i}` }));\n};\n\nconst baseSecondaryFields = [\n  {\n    name: 'Status',\n    value: <Status variant='info'>New</Status>\n  },\n  {\n    name: 'Assigned to',\n    value: 'Dean Thomas'\n  },\n  {\n    name: 'Create date',\n    value: createDate.toDateString()\n  },\n  {\n    name: 'Update date',\n    value: `${diffInYears} years ago`\n  }\n];\n\nexport const getSecondaryFields = ({\n  setPreviewCaseId,\n  setPreviewCurrentTabId\n}: PreviewSetters) => {\n  return [\n    ...baseSecondaryFields,\n    {\n      name: 'Created by',\n      value: <MockOperatorFieldValue />\n    },\n    {\n      name: 'Previewable Case',\n      value: (\n        <Link\n          href='/cases/C-456'\n          previewable\n          onPreview={() => {\n            setPreviewCaseId('C-456');\n            setPreviewCurrentTabId('summary-C-456');\n          }}\n        >\n          Previewable Case - C-456\n        </Link>\n      )\n    }\n  ];\n};\n\nexport const casePreviewPrimaryFields = [\n  {\n    name: 'Member ID',\n    value: 'M204859F438G'\n  },\n  {\n    name: 'Priority',\n    value: '95'\n  }\n];\n\nexport const casePreviewSecondaryFields = baseSecondaryFields;\n\nexport const getParentCases = ({\n  caseId,\n  setPreviewCaseId,\n  setPreviewCurrentTabId\n}: {\n  caseId: CaseViewProps['caseId'];\n} & PreviewSetters) => {\n  const ids = new Set([caseId]);\n\n  return Array.from({ length: 5 }, (_, i) => {\n    let id: string;\n    // Ensure parent ids are unique.\n    do {\n      id = `C-${Math.floor(Math.random() * 200 + 100)}`;\n    } while (ids.has(id));\n    ids.add(id);\n\n    return {\n      id,\n      primary: `Parent ${5 - i} - ${id}`,\n      href: `/cases/${id}`,\n      previewable: true,\n      onPreview: () => {\n        setPreviewCaseId(id);\n        setPreviewCurrentTabId(`summary-${id}`);\n      }\n    };\n  });\n};\n\nexport const Utilities = () => {\n  return (\n    <>\n      <AttachmentsMock />\n      <StakeHoldersDemo />\n      <MockSummaryList icon='user-star' name='Followers' />\n      <TagsDemo />\n    </>\n  );\n};\n\nexport const getUtilitiesSummaryItems = () => {\n  return [\n    { iconName: 'paper-clip', count: 4 },\n    { iconName: 'user-search-solid', count: 10 },\n    { iconName: 'user-star-solid', count: 5 },\n    { iconName: 'tag', count: 10 }\n  ];\n};\n\nexport const getCaseActions = () => {\n  return Array.from({ length: 12 }, (_, i) => {\n    return {\n      text: `Action ${i + 1}`,\n      id: `${i + 1}`,\n      onClick: () => {}\n    };\n  });\n};\n\nexport const getPromotedActions = () => {\n  return [{ id: createUID(), text: 'Promoted action', onClick: () => {} }];\n};\n\nconst StyledPersistentUtilityContent = styled.div(({ theme }) => {\n  return css`\n    height: 100%;\n    border-inline: 0.0625rem dashed ${theme.base.palette['border-line']};\n  `;\n});\n\nexport const PersistentUtilityContent = () => {\n  return (\n    <Flex\n      container={{ justify: 'center', alignItems: 'center' }}\n      as={StyledPersistentUtilityContent}\n    >\n      Persistent utility content\n    </Flex>\n  );\n};\n"]}

package/jsx/work/CaseView/CaseView.stories.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"CaseView.stories.d.ts","sourceRoot":"","sources":["../../../src/work/CaseView/CaseView.stories.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,kBAAkB,CAAC;;AA2B/C,wBAOU;AAEV,MAAM,WAAW,iBAAiB;IAChC,iBAAiB,CAAC,EAAE,OAAO,CAAC;CAC7B;AAED,eAAO,MAAM,YAAY,EAAE,KAAK,CAAC,iBAAiB,CA2HjD,CAAC"}
+{"version":3,"file":"CaseView.stories.d.ts","sourceRoot":"","sources":["../../../src/work/CaseView/CaseView.stories.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,kBAAkB,CAAC;;AA2B/C,wBAOU;AAEV,MAAM,WAAW,iBAAiB;IAChC,iBAAiB,CAAC,EAAE,OAAO,CAAC;CAC7B;AAED,eAAO,MAAM,YAAY,EAAE,KAAK,CAAC,iBAAiB,CAmIjD,CAAC"}

package/jsx/work/CaseView/CaseView.stories.jsx

@@ -17,7 +17,7 @@ export default {
     }
 };
 export const CaseViewDemo = (args) => {
-    const caseId = 'C-456';
+    const caseId = 'C-123';
     const heading = 'Cosmos demo case';
     const [previewCaseId, setPreviewCaseId] = useState(null);
     const [previewCurrentTabId, setPreviewCurrentTabId] = useState(baseCaseTabs[0].id);
@@ -46,17 +46,21 @@ export const CaseViewDemo = (args) => {
     return (<AppShellDemo appHeader main={<>
           {previewCaseId && (<CasePreview open onAfterClose={() => {
                     setPreviewCaseId(null);
-                }} caseId={previewCaseId} parentCases={[...parentCases]
-                    .filter(c => c.id !== previewCaseId)
-                    .map(c => ({ ...c, id: `preview-${c.id}` }))} heading='Previewable demo case' caseLink={{ href: `/cases/${previewCaseId}`, target: '_blank' }} icon={<Icon name='user-solid'/>} followed={!followed} onEdit={action('Case Preview Edit was clicked')} actions={getCaseActions()} summary={<CaseSummaryFields primaryFields={casePreviewPrimaryFields} secondaryFields={casePreviewSecondaryFields}/>} stages={demoStages} tasks={<TasksDemo />} tabs={previewTabs} tabContent={tabContent} utilities={<Grid container={{ rowGap: 2 }}>
+                }} caseId={previewCaseId} parentCases={Math.random() > 0.5
+                    ? [...parentCases]
+                        .filter(c => c.id !== previewCaseId)
+                        .map(c => ({ ...c, id: `preview-${c.id}` }))
+                    : undefined} heading='Previewable demo case' caseLink={{ href: `/cases/${previewCaseId}`, target: '_blank' }} icon={<Icon name='user-solid'/>} followed={!followed} onEdit={action('Case Preview Edit was clicked')} actions={getCaseActions()} summary={<CaseSummaryFields primaryFields={casePreviewPrimaryFields} secondaryFields={casePreviewSecondaryFields}/>} stages={demoStages} tasks={<TasksDemo />} tabs={previewTabs} tabContent={tabContent} utilities={<Grid container={{ rowGap: 2 }}>
                   <Utilities />
                 </Grid>}/>)}
 
-          <CaseView caseId={caseId} parentCases={getParentCases({
-                caseId,
-                setPreviewCaseId,
-                setPreviewCurrentTabId
-            })} heading={heading} icon={<Icon name='user-solid'/>} followed={followed} onFollowedChange={setFollowed} actions={getCaseActions()} promotedActions={getPromotedActions()} onEdit={action('Case View Edit was clicked')} summary={<CaseSummaryFields primaryFields={getPrimaryFields()} secondaryFields={getSecondaryFields({ setPreviewCaseId, setPreviewCurrentTabId })}/>} summaryExpanded={summaryExpanded} onToggleSummary={() => {
+          <CaseView caseId={caseId} parentCases={Math.random() > 0.5
+                ? getParentCases({
+                    caseId,
+                    setPreviewCaseId,
+                    setPreviewCurrentTabId
+                })
+                : undefined} heading={heading} icon={<Icon name='user-solid'/>} followed={followed} onFollowedChange={setFollowed} actions={getCaseActions()} promotedActions={getPromotedActions()} onEdit={action('Case View Edit was clicked')} summary={<CaseSummaryFields primaryFields={getPrimaryFields()} secondaryFields={getSecondaryFields({ setPreviewCaseId, setPreviewCurrentTabId })}/>} summaryExpanded={summaryExpanded} onToggleSummary={() => {
                 setSummaryExpanded(cur => !cur);
             }} tabs={demoTabs} banners={null} persistentUtility={args.persistentUtility
                 ? { title: 'Persistent utility', content: <PersistentUtilityContent /> }

package/jsx/work/CaseView/CaseView.stories.jsx.map

@@ -1 +1 @@
-{"version":3,"file":"CaseView.stories.jsx","sourceRoot":"","sources":["../../../src/work/CaseView/CaseView.stories.tsx"],"names":[],"mappings":"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","sourcesContent":["import { useState } from 'react';\nimport { action } from '@storybook/addon-actions';\nimport { Meta, Story } from '@storybook/react';\n\nimport { Icon, registerIcon, Grid, useBreakpoint } from '@pega/cosmos-react-core';\nimport * as userSolidIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/user-solid.icon';\nimport { CaseView, CasePreview, CaseSummaryFields } from '@pega/cosmos-react-work';\n\nimport { TasksDemo } from '../Tasks/Tasks.stories';\nimport { AppShellDemo } from '../../core/AppShell/AppShell.stories';\nimport { StagesDemo } from '../Stages/Stages.stories';\n\nimport {\n  baseCaseTabs,\n  casePreviewPrimaryFields,\n  casePreviewSecondaryFields,\n  getCaseActions,\n  getParentCases,\n  getPrimaryFields,\n  getPromotedActions,\n  getSecondaryFields,\n  getTabContent,\n  getUtilitiesSummaryItems,\n  PersistentUtilityContent,\n  Utilities\n} from './CaseView.mocks';\n\nregisterIcon(userSolidIcon);\n\nexport default {\n  title: 'Work/CaseView',\n  component: CaseView,\n  includeStories: ['CaseViewDemo', 'CaseViewWithAppShell', 'CaseViewWithChat'],\n  parameters: {\n    layout: 'fullscreen'\n  }\n} as Meta;\n\nexport interface CaseViewStoryArgs {\n  persistentUtility?: boolean;\n}\n\nexport const CaseViewDemo: Story<CaseViewStoryArgs> = (args: CaseViewStoryArgs) => {\n  const caseId = 'C-456';\n  const heading = 'Cosmos demo case';\n\n  const [previewCaseId, setPreviewCaseId] = useState<null | string>(null);\n  const [previewCurrentTabId, setPreviewCurrentTabId] = useState(baseCaseTabs[0].id);\n  const [followed, setFollowed] = useState(false);\n\n  const isMediumOrAbove = useBreakpoint('md');\n\n  const [demoCurrentTabId, setDemoCurrentTabId] = useState(\n    isMediumOrAbove ? baseCaseTabs[0].id : `summary-${caseId}`\n  );\n\n  const demoTabs = {\n    items: baseCaseTabs,\n    currentTabId: demoCurrentTabId,\n    onClick: setDemoCurrentTabId\n  };\n\n  const previewTabs = {\n    items: baseCaseTabs,\n    currentTabId: previewCurrentTabId,\n    onClick: setPreviewCurrentTabId\n  };\n\n  const tabContent = getTabContent({ setPreviewCaseId, setPreviewCurrentTabId });\n\n  const parentCases = getParentCases({\n    caseId,\n    setPreviewCaseId,\n    setPreviewCurrentTabId\n  });\n\n  const demoStages = <StagesDemo currentStage={3} />;\n\n  const [summaryExpanded, setSummaryExpanded] = useState(true);\n  const [utilitiesCollapsed, setUtilitiesCollapsed] = useState(true);\n\n  return (\n    <AppShellDemo\n      appHeader\n      main={\n        <>\n          {previewCaseId && (\n            <CasePreview\n              open\n              onAfterClose={() => {\n                setPreviewCaseId(null);\n              }}\n              caseId={previewCaseId}\n              parentCases={[...parentCases]\n                .filter(c => c.id !== previewCaseId)\n                .map(c => ({ ...c, id: `preview-${c.id}` }))}\n              heading='Previewable demo case'\n              caseLink={{ href: `/cases/${previewCaseId}`, target: '_blank' }}\n              icon={<Icon name='user-solid' />}\n              followed={!followed}\n              onEdit={action('Case Preview Edit was clicked')}\n              actions={getCaseActions()}\n              summary={\n                <CaseSummaryFields\n                  primaryFields={casePreviewPrimaryFields}\n                  secondaryFields={casePreviewSecondaryFields}\n                />\n              }\n              stages={demoStages}\n              tasks={<TasksDemo />}\n              tabs={previewTabs}\n              tabContent={tabContent}\n              utilities={\n                <Grid container={{ rowGap: 2 }}>\n                  <Utilities />\n                </Grid>\n              }\n            />\n          )}\n\n          <CaseView\n            caseId={caseId}\n            parentCases={getParentCases({\n              caseId,\n              setPreviewCaseId,\n              setPreviewCurrentTabId\n            })}\n            heading={heading}\n            icon={<Icon name='user-solid' />}\n            followed={followed}\n            onFollowedChange={setFollowed}\n            actions={getCaseActions()}\n            promotedActions={getPromotedActions()}\n            onEdit={action('Case View Edit was clicked')}\n            summary={\n              <CaseSummaryFields\n                primaryFields={getPrimaryFields()}\n                secondaryFields={getSecondaryFields({ setPreviewCaseId, setPreviewCurrentTabId })}\n              />\n            }\n            summaryExpanded={summaryExpanded}\n            onToggleSummary={() => {\n              setSummaryExpanded(cur => !cur);\n            }}\n            tabs={demoTabs}\n            banners={null}\n            persistentUtility={\n              args.persistentUtility\n                ? { title: 'Persistent utility', content: <PersistentUtilityContent /> }\n                : undefined\n            }\n            stages={demoStages}\n            tasks={<TasksDemo />}\n            tabContent={tabContent}\n            utilities={<Utilities />}\n            utilitiesSummaryItems={getUtilitiesSummaryItems()}\n            utilitiesExpanded={utilitiesCollapsed}\n            onToggleUtilities={() => {\n              setUtilitiesCollapsed(cur => !cur);\n            }}\n          />\n        </>\n      }\n    />\n  );\n};\n\nCaseViewDemo.parameters = {\n  eyes: {\n    runBefore: () => {\n      document\n        .querySelector<HTMLButtonElement>(\n          // Find the case actions menu.\n          '[aria-label=\"Actions\"]'\n        )\n        ?.click();\n    }\n  }\n};\n\nCaseViewDemo.args = {\n  persistentUtility: false\n};\n\nCaseViewDemo.argTypes = {\n  persistentUtility: { control: { type: 'boolean' } }\n};\n"]}
+{"version":3,"file":"CaseView.stories.jsx","sourceRoot":"","sources":["../../../src/work/CaseView/CaseView.stories.tsx"],"names":[],"mappings":"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","sourcesContent":["import { useState } from 'react';\nimport { action } from '@storybook/addon-actions';\nimport { Meta, Story } from '@storybook/react';\n\nimport { Icon, registerIcon, Grid, useBreakpoint } from '@pega/cosmos-react-core';\nimport * as userSolidIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/user-solid.icon';\nimport { CaseView, CasePreview, CaseSummaryFields } from '@pega/cosmos-react-work';\n\nimport { TasksDemo } from '../Tasks/Tasks.stories';\nimport { AppShellDemo } from '../../core/AppShell/AppShell.stories';\nimport { StagesDemo } from '../Stages/Stages.stories';\n\nimport {\n  baseCaseTabs,\n  casePreviewPrimaryFields,\n  casePreviewSecondaryFields,\n  getCaseActions,\n  getParentCases,\n  getPrimaryFields,\n  getPromotedActions,\n  getSecondaryFields,\n  getTabContent,\n  getUtilitiesSummaryItems,\n  PersistentUtilityContent,\n  Utilities\n} from './CaseView.mocks';\n\nregisterIcon(userSolidIcon);\n\nexport default {\n  title: 'Work/CaseView',\n  component: CaseView,\n  includeStories: ['CaseViewDemo', 'CaseViewWithAppShell', 'CaseViewWithChat'],\n  parameters: {\n    layout: 'fullscreen'\n  }\n} as Meta;\n\nexport interface CaseViewStoryArgs {\n  persistentUtility?: boolean;\n}\n\nexport const CaseViewDemo: Story<CaseViewStoryArgs> = (args: CaseViewStoryArgs) => {\n  const caseId = 'C-123';\n  const heading = 'Cosmos demo case';\n\n  const [previewCaseId, setPreviewCaseId] = useState<null | string>(null);\n  const [previewCurrentTabId, setPreviewCurrentTabId] = useState(baseCaseTabs[0].id);\n  const [followed, setFollowed] = useState(false);\n\n  const isMediumOrAbove = useBreakpoint('md');\n\n  const [demoCurrentTabId, setDemoCurrentTabId] = useState(\n    isMediumOrAbove ? baseCaseTabs[0].id : `summary-${caseId}`\n  );\n\n  const demoTabs = {\n    items: baseCaseTabs,\n    currentTabId: demoCurrentTabId,\n    onClick: setDemoCurrentTabId\n  };\n\n  const previewTabs = {\n    items: baseCaseTabs,\n    currentTabId: previewCurrentTabId,\n    onClick: setPreviewCurrentTabId\n  };\n\n  const tabContent = getTabContent({ setPreviewCaseId, setPreviewCurrentTabId });\n\n  const parentCases = getParentCases({\n    caseId,\n    setPreviewCaseId,\n    setPreviewCurrentTabId\n  });\n\n  const demoStages = <StagesDemo currentStage={3} />;\n\n  const [summaryExpanded, setSummaryExpanded] = useState(true);\n  const [utilitiesCollapsed, setUtilitiesCollapsed] = useState(true);\n\n  return (\n    <AppShellDemo\n      appHeader\n      main={\n        <>\n          {previewCaseId && (\n            <CasePreview\n              open\n              onAfterClose={() => {\n                setPreviewCaseId(null);\n              }}\n              caseId={previewCaseId}\n              parentCases={\n                Math.random() > 0.5\n                  ? [...parentCases]\n                      .filter(c => c.id !== previewCaseId)\n                      .map(c => ({ ...c, id: `preview-${c.id}` }))\n                  : undefined\n              }\n              heading='Previewable demo case'\n              caseLink={{ href: `/cases/${previewCaseId}`, target: '_blank' }}\n              icon={<Icon name='user-solid' />}\n              followed={!followed}\n              onEdit={action('Case Preview Edit was clicked')}\n              actions={getCaseActions()}\n              summary={\n                <CaseSummaryFields\n                  primaryFields={casePreviewPrimaryFields}\n                  secondaryFields={casePreviewSecondaryFields}\n                />\n              }\n              stages={demoStages}\n              tasks={<TasksDemo />}\n              tabs={previewTabs}\n              tabContent={tabContent}\n              utilities={\n                <Grid container={{ rowGap: 2 }}>\n                  <Utilities />\n                </Grid>\n              }\n            />\n          )}\n\n          <CaseView\n            caseId={caseId}\n            parentCases={\n              Math.random() > 0.5\n                ? getParentCases({\n                    caseId,\n                    setPreviewCaseId,\n                    setPreviewCurrentTabId\n                  })\n                : undefined\n            }\n            heading={heading}\n            icon={<Icon name='user-solid' />}\n            followed={followed}\n            onFollowedChange={setFollowed}\n            actions={getCaseActions()}\n            promotedActions={getPromotedActions()}\n            onEdit={action('Case View Edit was clicked')}\n            summary={\n              <CaseSummaryFields\n                primaryFields={getPrimaryFields()}\n                secondaryFields={getSecondaryFields({ setPreviewCaseId, setPreviewCurrentTabId })}\n              />\n            }\n            summaryExpanded={summaryExpanded}\n            onToggleSummary={() => {\n              setSummaryExpanded(cur => !cur);\n            }}\n            tabs={demoTabs}\n            banners={null}\n            persistentUtility={\n              args.persistentUtility\n                ? { title: 'Persistent utility', content: <PersistentUtilityContent /> }\n                : undefined\n            }\n            stages={demoStages}\n            tasks={<TasksDemo />}\n            tabContent={tabContent}\n            utilities={<Utilities />}\n            utilitiesSummaryItems={getUtilitiesSummaryItems()}\n            utilitiesExpanded={utilitiesCollapsed}\n            onToggleUtilities={() => {\n              setUtilitiesCollapsed(cur => !cur);\n            }}\n          />\n        </>\n      }\n    />\n  );\n};\n\nCaseViewDemo.parameters = {\n  eyes: {\n    runBefore: () => {\n      document\n        .querySelector<HTMLButtonElement>(\n          // Find the case actions menu.\n          '[aria-label=\"Actions\"]'\n        )\n        ?.click();\n    }\n  }\n};\n\nCaseViewDemo.args = {\n  persistentUtility: false\n};\n\nCaseViewDemo.argTypes = {\n  persistentUtility: { control: { type: 'boolean' } }\n};\n"]}

package/jsx/work/Details/Details.stories.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Details.stories.d.ts","sourceRoot":"","sources":["../../../src/work/Details/Details.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,kBAAkB,CAAC;;AAK/C,wBAMU;AAEV,eAAO,MAAM,WAAW,EAAE,KAsEzB,CAAC"}
+{"version":3,"file":"Details.stories.d.ts","sourceRoot":"","sources":["../../../src/work/Details/Details.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,kBAAkB,CAAC;;AAK/C,wBAMU;AAEV,eAAO,MAAM,WAAW,EAAE,KA6EzB,CAAC"}

package/jsx/work/Details/Details.stories.jsx

@@ -56,6 +56,13 @@ export const DetailsDemo = () => {
             <FieldValueItem name='52 week high' value='$445.00'/>
             <FieldValueItem name='52 week low' value='$335.00'/>
           </Details>
+
+          <Details name='Collapsible' nested valueComparison collapsible>
+            <FieldValueItem name='Open' value='$205.00'/>
+            <FieldValueItem name='Close' value='$209.00'/>
+            <FieldValueItem name='52 week high' value='$312.00'/>
+            <FieldValueItem name='52 week low' value='$115.00'/>
+          </Details>
         </Details>
 
         <FieldValueItem name='Age' value='56'/>

package/jsx/work/Details/Details.stories.jsx.map

@@ -1 +1 @@
-{"version":3,"file":"Details.stories.jsx","sourceRoot":"","sources":["../../../src/work/Details/Details.stories.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Meta, Story } from '@storybook/react';\n\nimport { FieldValueItem, useBreakpoint } from '@pega/cosmos-react-core';\nimport { Details, DetailsContext } from '@pega/cosmos-react-work';\n\nexport default {\n  title: 'Work/Details',\n  component: Details,\n  parameters: {\n    layout: 'centered'\n  }\n} as Meta;\n\nexport const DetailsDemo: Story = () => {\n  const isNotMobile = useBreakpoint('sm');\n\n  return (\n    <DetailsContext.Provider value={{ mobileView: !isNotMobile, longestLabelLength: 10 }}>\n      <Details\n        name='Outer list'\n        highlightedData={[\n          <FieldValueItem variant='stacked' name='Age' value='56' />,\n          <FieldValueItem variant='stacked' name='Location' value='Berlin' />,\n          <FieldValueItem variant='stacked' name='Make' value='Ford' />,\n          <FieldValueItem variant='stacked' name='Model' value='F150' />\n        ]}\n      >\n        {/* Siblings can be rendered in a responsive row with the `asFlex` attribute */}\n        <Details name='Nested as flex' nested asFlex>\n          {/* Arbitrary recursive nesting is supported with nested attribute */}\n          <Details nested>\n            <Details nested>\n              <FieldValueItem name='Make' value='Ford' />\n              <FieldValueItem name='Model' value='F150' />\n            </Details>\n          </Details>\n\n          <Details nested>\n            <FieldValueItem name='Mileage' value='78,500' />\n            <FieldValueItem name='Trim' value='Lariat' />\n          </Details>\n        </Details>\n\n        <FieldValueItem\n          name='Description'\n          variant='stacked'\n          value={\n            <p>\n              Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse commodo nulla\n              vitae mi bibendum, a fringilla nisl efficitur. Praesent vitae nulla lobortis, finibus\n              felis ultricies, fermentum mi. Nunc lorem ligula, placerat nec elit id, auctor\n              pellentesque est. Pellentesque pharetra justo augue, non maximus nulla venenatis et.\n              Sed laoreet ultricies ullamcorper. Mauris ac nulla quis ipsum semper fringilla in eget\n              risus. Fusce cursus sollicitudin nibh molestie volutpat.\n            </p>\n          }\n        />\n\n        <Details name='Nested list' nested>\n          <FieldValueItem name='First name' value='Howard' />\n          <FieldValueItem name='Last name' value='Kennedy' />\n\n          <Details name='Deeper list' nested>\n            <FieldValueItem name='Color' value='red' />\n            <FieldValueItem name='Year' value='2017' />\n          </Details>\n\n          <Details name='Value comparison' nested valueComparison>\n            <FieldValueItem\n              name='Open lorem ipsum dolor set amet ipsum ket sit amet'\n              value='$405,000,000.00'\n            />\n            <FieldValueItem name='Close' value='$401.00' />\n            <FieldValueItem name='52 week high' value='$445.00' />\n            <FieldValueItem name='52 week low' value='$335.00' />\n          </Details>\n        </Details>\n\n        <FieldValueItem name='Age' value='56' />\n        <FieldValueItem name='Location' value='Berlin' />\n      </Details>\n    </DetailsContext.Provider>\n  );\n};\n"]}
+{"version":3,"file":"Details.stories.jsx","sourceRoot":"","sources":["../../../src/work/Details/Details.stories.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Meta, Story } from '@storybook/react';\n\nimport { FieldValueItem, useBreakpoint } from '@pega/cosmos-react-core';\nimport { Details, DetailsContext } from '@pega/cosmos-react-work';\n\nexport default {\n  title: 'Work/Details',\n  component: Details,\n  parameters: {\n    layout: 'centered'\n  }\n} as Meta;\n\nexport const DetailsDemo: Story = () => {\n  const isNotMobile = useBreakpoint('sm');\n\n  return (\n    <DetailsContext.Provider value={{ mobileView: !isNotMobile, longestLabelLength: 10 }}>\n      <Details\n        name='Outer list'\n        highlightedData={[\n          <FieldValueItem variant='stacked' name='Age' value='56' />,\n          <FieldValueItem variant='stacked' name='Location' value='Berlin' />,\n          <FieldValueItem variant='stacked' name='Make' value='Ford' />,\n          <FieldValueItem variant='stacked' name='Model' value='F150' />\n        ]}\n      >\n        {/* Siblings can be rendered in a responsive row with the `asFlex` attribute */}\n        <Details name='Nested as flex' nested asFlex>\n          {/* Arbitrary recursive nesting is supported with nested attribute */}\n          <Details nested>\n            <Details nested>\n              <FieldValueItem name='Make' value='Ford' />\n              <FieldValueItem name='Model' value='F150' />\n            </Details>\n          </Details>\n\n          <Details nested>\n            <FieldValueItem name='Mileage' value='78,500' />\n            <FieldValueItem name='Trim' value='Lariat' />\n          </Details>\n        </Details>\n\n        <FieldValueItem\n          name='Description'\n          variant='stacked'\n          value={\n            <p>\n              Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse commodo nulla\n              vitae mi bibendum, a fringilla nisl efficitur. Praesent vitae nulla lobortis, finibus\n              felis ultricies, fermentum mi. Nunc lorem ligula, placerat nec elit id, auctor\n              pellentesque est. Pellentesque pharetra justo augue, non maximus nulla venenatis et.\n              Sed laoreet ultricies ullamcorper. Mauris ac nulla quis ipsum semper fringilla in eget\n              risus. Fusce cursus sollicitudin nibh molestie volutpat.\n            </p>\n          }\n        />\n\n        <Details name='Nested list' nested>\n          <FieldValueItem name='First name' value='Howard' />\n          <FieldValueItem name='Last name' value='Kennedy' />\n\n          <Details name='Deeper list' nested>\n            <FieldValueItem name='Color' value='red' />\n            <FieldValueItem name='Year' value='2017' />\n          </Details>\n\n          <Details name='Value comparison' nested valueComparison>\n            <FieldValueItem\n              name='Open lorem ipsum dolor set amet ipsum ket sit amet'\n              value='$405,000,000.00'\n            />\n            <FieldValueItem name='Close' value='$401.00' />\n            <FieldValueItem name='52 week high' value='$445.00' />\n            <FieldValueItem name='52 week low' value='$335.00' />\n          </Details>\n\n          <Details name='Collapsible' nested valueComparison collapsible>\n            <FieldValueItem name='Open' value='$205.00' />\n            <FieldValueItem name='Close' value='$209.00' />\n            <FieldValueItem name='52 week high' value='$312.00' />\n            <FieldValueItem name='52 week low' value='$115.00' />\n          </Details>\n        </Details>\n\n        <FieldValueItem name='Age' value='56' />\n        <FieldValueItem name='Location' value='Berlin' />\n      </Details>\n    </DetailsContext.Provider>\n  );\n};\n"]}

package/lib/build/ExpressionBuilder/ExpressionBuilder.mocks.d.ts

@@ -1,11 +1,60 @@
 import { MenuProps } from '@pega/cosmos-react-core';
 export declare const errors = "Error message 1. Some unrealistic error message. Server unreachable. Check your network connection and try again";
-export declare const items: {
+export declare const items: ({
     id: string;
     primary: string;
     type: string;
     expression: string;
-}[];
+    details: {
+        primary: {
+            field: string;
+            value: string;
+        }[];
+        output: {
+            field: string;
+            value: string;
+        }[];
+        input: {
+            id: string;
+            field: string;
+            type: string;
+        }[];
+    };
+} | {
+    id: string;
+    primary: string;
+    type: string;
+    expression: string;
+    details: {
+        primary: {
+            field: string;
+            value: string;
+        }[];
+        output?: undefined;
+        input?: undefined;
+    };
+} | {
+    id: string;
+    primary: string;
+    type: string;
+    expression: string;
+    details: {
+        primary: {
+            field: string;
+            value: string;
+        }[];
+        output: {
+            field: string;
+            value: string;
+        }[];
+        input?: undefined;
+    };
+})[];
 export declare const filterCategories: MenuProps['items'];
 export declare const StyledExpressionBuilderDemo: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
+export declare const primaryDetails: {
+    id: string;
+    name: string;
+    value: string;
+}[];
 //# sourceMappingURL=ExpressionBuilder.mocks.d.ts.map

package/lib/build/ExpressionBuilder/ExpressionBuilder.mocks.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ExpressionBuilder.mocks.d.ts","sourceRoot":"","sources":["../../../src/build/ExpressionBuilder/ExpressionBuilder.mocks.ts"],"names":[],"mappings":"AAIA,OAAO,EAAa,SAAS,EAAE,MAAM,yBAAyB,CAAC;AAE/D,eAAO,MAAM,MAAM,qHACiG,CAAC;AAErH,eAAO,MAAM,KAAK;;;;;GA2FjB,CAAC;AAEF,eAAO,MAAM,gBAAgB,EAAE,SAAS,CAAC,OAAO,CA+B/C,CAAC;AAEF,eAAO,MAAM,2BAA2B,yGAMtC,CAAC"}
+{"version":3,"file":"ExpressionBuilder.mocks.d.ts","sourceRoot":"","sources":["../../../src/build/ExpressionBuilder/ExpressionBuilder.mocks.ts"],"names":[],"mappings":"AAIA,OAAO,EAAa,SAAS,EAAE,MAAM,yBAAyB,CAAC;AAE/D,eAAO,MAAM,MAAM,qHACiG,CAAC;AAErH,eAAO,MAAM,KAAK;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;IAuZjB,CAAC;AAEF,eAAO,MAAM,gBAAgB,EAAE,SAAS,CAAC,OAAO,CA+B/C,CAAC;AAEF,eAAO,MAAM,2BAA2B,yGAMtC,CAAC;AAEH,eAAO,MAAM,cAAc;;;;GAgB1B,CAAC"}