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

package/jsx/social/Feed/Feed.mocks.jsx.map

@@ -1 +1 @@
-{"version":3,"file":"Feed.mocks.jsx","sourceRoot":"","sources":["../../../src/social/Feed/Feed.mocks.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  Avatar,\n  EmailDisplay,\n  PhoneDisplay,\n  Link,\n  Flex,\n  Image,\n  createUID\n} from '@pega/cosmos-react-core';\nimport { FeedPostProps } from '@pega/cosmos-react-social';\n\n// cspell: disable\nexport const userMentions = [\n  {\n    id: 'turnc',\n    primary: 'Cindy Turner',\n    secondary: ['Lead Engineer'],\n    fields: [\n      {\n        name: 'Project',\n        value: 'Cosmos Demo'\n      },\n      {\n        name: 'Phone number',\n        value: <PhoneDisplay value='(111) 111-1111' />\n      },\n      {\n        name: 'Email',\n        value: <EmailDisplay value='turnc@example.com' />\n      },\n      {\n        name: 'Reports to',\n        value: 'Helen Bush'\n      }\n    ],\n    visual: <Avatar size='l' name='Cindy Turner' />\n  },\n  {\n    id: 'deans',\n    primary: 'Seth DeAngelo',\n    secondary: ['Senior Software Engineer', 'Backend Developer'],\n    fields: [\n      {\n        name: 'Project',\n        value: 'Cosmos Demo'\n      },\n      {\n        name: 'Phone number',\n        value: <PhoneDisplay value='(222) 222-2222' />\n      },\n      {\n        name: 'Email',\n        value: <EmailDisplay value='deans@example.com' />\n      },\n      {\n        name: 'Reports to',\n        value: 'Helen Bush'\n      }\n    ],\n    visual: <Avatar size='l' name='Seth DeAngelo' />\n  },\n  {\n    id: 'moorj',\n    primary: 'Janet Moore',\n    secondary: ['Backend Developer'],\n    fields: [\n      {\n        name: 'Project',\n        value: 'Cosmos Demo'\n      },\n      {\n        name: 'Phone number',\n        value: <PhoneDisplay value='(333) 333-3333' />\n      },\n      {\n        name: 'Email',\n        value: <EmailDisplay value='moorj@example.com' />\n      },\n      {\n        name: 'Reports to',\n        value: 'Helen Bush'\n      }\n    ],\n    visual: <Avatar size='l' name='Janet Moore' />\n  },\n  {\n    id: 'thomd',\n    primary: 'Dean Thomas',\n    secondary: ['Designer'],\n    fields: [\n      {\n        name: 'Project',\n        value: 'Cosmos Demo'\n      },\n      {\n        name: 'Phone number',\n        value: <PhoneDisplay value='(444) 444-4444' />\n      },\n      {\n        name: 'Email',\n        value: <EmailDisplay value='thomd@example.com' />\n      },\n      {\n        name: 'Reports to',\n        value: 'Bob Hathoway'\n      }\n    ],\n    visual: <Avatar size='l' name='Dean Thomas' />\n  },\n  {\n    id: 'hathb',\n    primary: 'Bob Hathoway',\n    secondary: ['Lead Designer', 'Product Owner'],\n    fields: [\n      {\n        name: 'Project',\n        value: 'Cosmos Demo'\n      },\n      {\n        name: 'Phone number',\n        value: <PhoneDisplay value='(555) 555-5555' />\n      },\n      {\n        name: 'Email',\n        value: <EmailDisplay value='hathb@example.com' />\n      },\n      {\n        name: 'Reports to',\n        value: ''\n      }\n    ],\n    visual: <Avatar size='l' name='Bob Hathoway' />\n  }\n];\n\nexport const caseMentions = [\n  {\n    id: 'c-001',\n    primary: 'Complete user sign up form',\n    secondary: ['US-111111'],\n    visual: <Avatar size='l' name='c-001' icon='case' />\n  },\n  {\n    id: 'c-002',\n    primary: 'Button missing on home page',\n    secondary: ['BUG-222222'],\n    visual: <Avatar size='l' name='c-002' icon='case' />\n  },\n  {\n    id: 'c-003',\n    primary: 'Set up transaction broker',\n    secondary: ['US-333333'],\n    visual: <Avatar size='l' name='c-03' icon='case' />\n  },\n  {\n    id: 'c-004',\n    primary: 'Check in with security team',\n    secondary: ['TASK-444444'],\n    visual: <Avatar size='l' name='c-004' icon='case' />\n  },\n  {\n    id: 'c-005',\n    primary: 'Error occurs upon submitting form',\n    secondary: ['BUG-555555'],\n    visual: <Avatar size='l' name='c-005' icon='case' />\n  }\n];\n\nexport const generatedLikes = [\n  {\n    primary: 'Cindy Turner',\n    secondary: ['Lead Engineer'],\n    visual: <Avatar size='l' name='Cindy Turner' />,\n    id: 'turnc'\n  },\n  {\n    primary: 'Helen Bush',\n    secondary: ['Product Manager', 'Product Owner'],\n    visual: <Avatar size='l' name='Helen Bush' />,\n    id: 'bushh'\n  },\n  {\n    primary: 'Randy Paul',\n    secondary: ['Frontend Developer', 'Backend Developer'],\n    visual: <Avatar size='l' name='Randy Paul' />,\n    id: 'paulr'\n  },\n  {\n    primary: 'Janet Moore',\n    secondary: ['Backend Developer'],\n    visual: <Avatar size='l' name='Janet Moore' />,\n    id: 'moorj'\n  },\n  {\n    primary: 'Kate Mirin',\n    secondary: ['Quality Engineer'],\n    visual: <Avatar size='l' name='Kate Mirin' />,\n    id: 'mirik'\n  },\n  {\n    primary: 'Bob Hathoway',\n    secondary: ['Lead Designer', 'Product Owner'],\n    visual: <Avatar size='l' name='Bob Hathoway' />,\n    id: 'hathb'\n  },\n  {\n    primary: 'Seth DeAngelo',\n    secondary: ['Senior Software Engineer', 'Backend Developer'],\n    visual: <Avatar size='l' name='Seth DeAngelo' />,\n    id: 'deans'\n  },\n  {\n    primary: 'Dean Thomas',\n    secondary: ['Designer'],\n    visual: <Avatar size='l' name='Dean Thomas' />,\n    id: 'thomd'\n  },\n  {\n    primary: 'Louie Santos',\n    secondary: ['Marketing Specialist'],\n    visual: <Avatar size='l' name='Louie Santos' />,\n    id: 'santl'\n  },\n  {\n    primary: 'Margaret Foster',\n    secondary: ['Architect', 'Designer'],\n    visual: <Avatar size='l' name='Margaret Foster' />,\n    id: 'fostm'\n  }\n];\n\nexport const availableRecipients = [\n  {\n    primary: 'Cindy Turner',\n    secondary: ['Lead Engineer'],\n    visual: <Avatar size='l' name='Cindy Turner' />,\n    value: 'turnc',\n    id: 'turnc'\n  },\n  {\n    primary: 'Helen Bush',\n    secondary: ['Product Manager', 'Product Owner'],\n    visual: <Avatar size='l' name='Helen Bush' />,\n    value: 'bushh',\n    id: 'bushh'\n  },\n  {\n    primary: 'Randy Paul',\n    secondary: ['Frontend Developer', 'Backend Developer'],\n    visual: <Avatar size='l' name='Randy Paul' />,\n    value: 'paulr',\n    id: 'paulr'\n  },\n  {\n    primary: 'Janet Moore',\n    secondary: ['Backend Developer'],\n    visual: <Avatar size='l' name='Janet Moore' />,\n    value: 'moorj',\n    id: 'moorj'\n  },\n  {\n    primary: 'Kate Mirin',\n    secondary: ['Quality Engineer'],\n    visual: <Avatar size='l' name='Kate Mirin' />,\n    value: 'mirik',\n    id: 'mirik'\n  },\n  {\n    primary: 'Bob Hathoway',\n    secondary: ['Lead Designer', 'Product Owner'],\n    visual: <Avatar size='l' name='Bob Hathoway' />,\n    value: 'hathb',\n    id: 'hathb'\n  },\n  {\n    primary: 'Seth DeAngelo',\n    secondary: ['Senior Software Engineer', 'Backend Developer'],\n    visual: <Avatar size='l' name='Seth DeAngelo' />,\n    value: 'deans',\n    id: 'deans'\n  },\n  {\n    primary: 'Dean Thomas',\n    secondary: ['Designer'],\n    visual: <Avatar size='l' name='Dean Thomas' />,\n    value: 'thomd',\n    id: 'thomd'\n  }\n];\n\nexport interface FeedPostDemoProps {\n  id?: string;\n  fullname?: FeedPostProps['info']['fullname'];\n  username?: FeedPostProps['info']['username'];\n  content?: FeedPostProps['info']['content'];\n  postType?: FeedPostProps['info']['postType'];\n  recipients?: FeedPostProps['info']['recipients'];\n  attachments?: FeedPostProps['info']['attachments'];\n  replies?: FeedPostProps['replies'];\n  timeElapsed?: FeedPostProps['info']['timeElapsed'];\n  userStatus?: FeedPostProps['info']['userStatus'];\n  likes?: FeedPostProps['interactionInfo']['likes'];\n  likeCount?: FeedPostProps['interactionInfo']['likeCount'];\n  onDelete?: () => void;\n  renderFeed?: boolean;\n}\n\nexport const feedPosts: FeedPostDemoProps[] = [\n  {\n    id: createUID(),\n    fullname: 'Feed Bot',\n    username: 'feed_bot',\n    content: 'How is everyone doing with their reports?',\n    postType: 'private',\n    replies: [],\n    likes: generatedLikes,\n    likeCount: generatedLikes.length,\n    userStatus: 'active',\n    renderFeed: false\n  },\n  {\n    id: createUID(),\n    fullname: 'Feed Bot',\n    username: 'feed_bot',\n    content: (\n      <Link\n        href='https://www.pega.com/webinars/future-proof-your-business-architecture?utm_content=1606750722&utm_keyword=sprout&utm_medium=oso&utm_source=twitter'\n        target='_blank'\n      >\n        <Flex container={{ direction: 'column' }}>\n          Check out this awesome event!\n          <Image\n            src='https://pbs.twimg.com/media/EoKHAUKWEAM5hpz?format=jpg&name=medium'\n            alt='Pegasystems'\n          />\n        </Flex>\n      </Link>\n    ),\n    replies: [],\n    userStatus: 'active',\n    renderFeed: false\n  },\n  {\n    id: createUID(),\n    content: (\n      <Link href='https://www.pega.com/products/sales-automation' target='_blank'>\n        <Flex container={{ direction: 'column' }}>\n          Sales Automation makes business happen.\n          <Image\n            src='https://cf-images.us-east-1.prod.boltdns.net/v1/static/1900410236/893966f4-f7e1-41f0-9cc2-e3064273d3aa/72837f91-61a1-455b-a7e3-126972b61ddd/1280x720/match/image.jpg'\n            alt='Pega Sales Automation'\n          />\n        </Flex>\n      </Link>\n    ),\n    replies: [],\n    renderFeed: false\n  }\n];\n"]}
+{"version":3,"file":"Feed.mocks.jsx","sourceRoot":"","sources":["../../../src/social/Feed/Feed.mocks.tsx"],"names":[],"mappings":"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","sourcesContent":["import { ReactNode } from 'react';\n\nimport {\n  Avatar,\n  EmailDisplay,\n  PhoneDisplay,\n  Link,\n  Flex,\n  Image,\n  createUID\n} from '@pega/cosmos-react-core';\nimport { FeedPostProps } from '@pega/cosmos-react-social';\n\ninterface Mention {\n  id: string;\n  primary: string;\n  secondary?: string[];\n  visual?: ReactNode;\n  fields?: { name: string; value: ReactNode }[];\n  href?: string;\n}\n\n// cspell: disable\nexport const userMentions: Mention[] = [\n  {\n    id: 'turnc',\n    primary: 'Cindy Turner',\n    secondary: ['Lead Engineer'],\n    fields: [\n      {\n        name: 'Project',\n        value: 'Cosmos Demo'\n      },\n      {\n        name: 'Phone number',\n        value: <PhoneDisplay value='(111) 111-1111' />\n      },\n      {\n        name: 'Email',\n        value: <EmailDisplay value='turnc@example.com' />\n      },\n      {\n        name: 'Reports to',\n        value: 'Helen Bush'\n      }\n    ],\n    visual: <Avatar size='l' name='Cindy Turner' />\n  },\n  {\n    id: 'deans',\n    primary: 'Seth DeAngelo',\n    secondary: ['Senior Software Engineer', 'Backend Developer'],\n    fields: [\n      {\n        name: 'Project',\n        value: 'Cosmos Demo'\n      },\n      {\n        name: 'Phone number',\n        value: <PhoneDisplay value='(222) 222-2222' />\n      },\n      {\n        name: 'Email',\n        value: <EmailDisplay value='deans@example.com' />\n      },\n      {\n        name: 'Reports to',\n        value: 'Helen Bush'\n      }\n    ],\n    visual: <Avatar size='l' name='Seth DeAngelo' />\n  },\n  {\n    id: 'moorj',\n    primary: 'Janet Moore',\n    secondary: ['Backend Developer'],\n    fields: [\n      {\n        name: 'Project',\n        value: 'Cosmos Demo'\n      },\n      {\n        name: 'Phone number',\n        value: <PhoneDisplay value='(333) 333-3333' />\n      },\n      {\n        name: 'Email',\n        value: <EmailDisplay value='moorj@example.com' />\n      },\n      {\n        name: 'Reports to',\n        value: 'Helen Bush'\n      }\n    ],\n    visual: <Avatar size='l' name='Janet Moore' />\n  },\n  {\n    id: 'thomd',\n    primary: 'Dean Thomas',\n    secondary: ['Designer'],\n    fields: [\n      {\n        name: 'Project',\n        value: 'Cosmos Demo'\n      },\n      {\n        name: 'Phone number',\n        value: <PhoneDisplay value='(444) 444-4444' />\n      },\n      {\n        name: 'Email',\n        value: <EmailDisplay value='thomd@example.com' />\n      },\n      {\n        name: 'Reports to',\n        value: 'Bob Hathoway'\n      }\n    ],\n    visual: <Avatar size='l' name='Dean Thomas' />\n  },\n  {\n    id: 'hathb',\n    primary: 'Bob Hathoway',\n    secondary: ['Lead Designer', 'Product Owner'],\n    fields: [\n      {\n        name: 'Project',\n        value: 'Cosmos Demo'\n      },\n      {\n        name: 'Phone number',\n        value: <PhoneDisplay value='(555) 555-5555' />\n      },\n      {\n        name: 'Email',\n        value: <EmailDisplay value='hathb@example.com' />\n      },\n      {\n        name: 'Reports to',\n        value: ''\n      }\n    ],\n    visual: <Avatar size='l' name='Bob Hathoway' />\n  }\n];\n\nexport const caseMentions: Mention[] = [\n  {\n    id: 'c-001',\n    primary: 'Complete user sign up form',\n    secondary: ['US-111111'],\n    visual: <Avatar size='l' name='c-001' icon='case' />,\n    href: '#c-001'\n  },\n  {\n    id: 'c-002',\n    primary: 'Button missing on home page',\n    secondary: ['BUG-222222'],\n    visual: <Avatar size='l' name='c-002' icon='case' />,\n    href: '#c-002'\n  },\n  {\n    id: 'c-003',\n    primary: 'Set up transaction broker',\n    secondary: ['US-333333'],\n    visual: <Avatar size='l' name='c-03' icon='case' />,\n    href: '#c-003'\n  },\n  {\n    id: 'c-004',\n    primary: 'Check in with security team',\n    secondary: ['TASK-444444'],\n    visual: <Avatar size='l' name='c-004' icon='case' />,\n    href: '#c-004'\n  },\n  {\n    id: 'c-005',\n    primary: 'Error occurs upon submitting form',\n    secondary: ['BUG-555555'],\n    visual: <Avatar size='l' name='c-005' icon='case' />,\n    href: '#c-005'\n  }\n];\n\nexport const generatedLikes = [\n  {\n    primary: 'Cindy Turner',\n    secondary: ['Lead Engineer'],\n    visual: <Avatar size='l' name='Cindy Turner' />,\n    id: 'turnc'\n  },\n  {\n    primary: 'Helen Bush',\n    secondary: ['Product Manager', 'Product Owner'],\n    visual: <Avatar size='l' name='Helen Bush' />,\n    id: 'bushh'\n  },\n  {\n    primary: 'Randy Paul',\n    secondary: ['Frontend Developer', 'Backend Developer'],\n    visual: <Avatar size='l' name='Randy Paul' />,\n    id: 'paulr'\n  },\n  {\n    primary: 'Janet Moore',\n    secondary: ['Backend Developer'],\n    visual: <Avatar size='l' name='Janet Moore' />,\n    id: 'moorj'\n  },\n  {\n    primary: 'Kate Mirin',\n    secondary: ['Quality Engineer'],\n    visual: <Avatar size='l' name='Kate Mirin' />,\n    id: 'mirik'\n  },\n  {\n    primary: 'Bob Hathoway',\n    secondary: ['Lead Designer', 'Product Owner'],\n    visual: <Avatar size='l' name='Bob Hathoway' />,\n    id: 'hathb'\n  },\n  {\n    primary: 'Seth DeAngelo',\n    secondary: ['Senior Software Engineer', 'Backend Developer'],\n    visual: <Avatar size='l' name='Seth DeAngelo' />,\n    id: 'deans'\n  },\n  {\n    primary: 'Dean Thomas',\n    secondary: ['Designer'],\n    visual: <Avatar size='l' name='Dean Thomas' />,\n    id: 'thomd'\n  },\n  {\n    primary: 'Louie Santos',\n    secondary: ['Marketing Specialist'],\n    visual: <Avatar size='l' name='Louie Santos' />,\n    id: 'santl'\n  },\n  {\n    primary: 'Margaret Foster',\n    secondary: ['Architect', 'Designer'],\n    visual: <Avatar size='l' name='Margaret Foster' />,\n    id: 'fostm'\n  }\n];\n\nexport const availableRecipients = [\n  {\n    primary: 'Cindy Turner',\n    secondary: ['Lead Engineer'],\n    visual: <Avatar size='l' name='Cindy Turner' />,\n    value: 'turnc',\n    id: 'turnc'\n  },\n  {\n    primary: 'Helen Bush',\n    secondary: ['Product Manager', 'Product Owner'],\n    visual: <Avatar size='l' name='Helen Bush' />,\n    value: 'bushh',\n    id: 'bushh'\n  },\n  {\n    primary: 'Randy Paul',\n    secondary: ['Frontend Developer', 'Backend Developer'],\n    visual: <Avatar size='l' name='Randy Paul' />,\n    value: 'paulr',\n    id: 'paulr'\n  },\n  {\n    primary: 'Janet Moore',\n    secondary: ['Backend Developer'],\n    visual: <Avatar size='l' name='Janet Moore' />,\n    value: 'moorj',\n    id: 'moorj'\n  },\n  {\n    primary: 'Kate Mirin',\n    secondary: ['Quality Engineer'],\n    visual: <Avatar size='l' name='Kate Mirin' />,\n    value: 'mirik',\n    id: 'mirik'\n  },\n  {\n    primary: 'Bob Hathoway',\n    secondary: ['Lead Designer', 'Product Owner'],\n    visual: <Avatar size='l' name='Bob Hathoway' />,\n    value: 'hathb',\n    id: 'hathb'\n  },\n  {\n    primary: 'Seth DeAngelo',\n    secondary: ['Senior Software Engineer', 'Backend Developer'],\n    visual: <Avatar size='l' name='Seth DeAngelo' />,\n    value: 'deans',\n    id: 'deans'\n  },\n  {\n    primary: 'Dean Thomas',\n    secondary: ['Designer'],\n    visual: <Avatar size='l' name='Dean Thomas' />,\n    value: 'thomd',\n    id: 'thomd'\n  }\n];\n// cspell:enable\n\nexport interface FeedPostDemoProps {\n  id?: string;\n  fullname?: FeedPostProps['info']['fullname'];\n  username?: FeedPostProps['info']['username'];\n  content?: FeedPostProps['info']['content'];\n  postType?: FeedPostProps['info']['postType'];\n  recipients?: FeedPostProps['info']['recipients'];\n  attachments?: FeedPostProps['info']['attachments'];\n  replies?: FeedPostProps['replies'];\n  postTimestamp?: FeedPostProps['info']['postTimestamp'];\n  userStatus?: FeedPostProps['info']['userStatus'];\n  likes?: FeedPostProps['interactionInfo']['likes'];\n  likeCount?: FeedPostProps['interactionInfo']['likeCount'];\n  onDelete?: () => void;\n  renderFeed?: boolean;\n}\n\nexport const feedPosts: FeedPostDemoProps[] = [\n  {\n    id: createUID(),\n    fullname: 'Feed Bot',\n    username: 'feed_bot',\n    content: 'How is everyone doing with their reports?',\n    postType: 'private',\n    replies: [],\n    likes: generatedLikes,\n    likeCount: generatedLikes.length,\n    userStatus: 'active',\n    renderFeed: false\n  },\n  {\n    id: createUID(),\n    fullname: 'Feed Bot',\n    username: 'feed_bot',\n    content: (\n      <Link\n        href='https://www.pega.com/webinars/future-proof-your-business-architecture?utm_content=1606750722&utm_keyword=sprout&utm_medium=oso&utm_source=twitter'\n        target='_blank'\n      >\n        <Flex container={{ direction: 'column' }}>\n          Check out this awesome event!\n          <Image\n            src='https://pbs.twimg.com/media/EoKHAUKWEAM5hpz?format=jpg&name=medium'\n            alt='Pegasystems'\n          />\n        </Flex>\n      </Link>\n    ),\n    replies: [],\n    userStatus: 'active',\n    renderFeed: false\n  },\n  {\n    id: createUID(),\n    content: (\n      <Link href='https://www.pega.com/products/sales-automation' target='_blank'>\n        <Flex container={{ direction: 'column' }}>\n          Sales Automation makes business happen.\n          <Image\n            src='https://cf-images.us-east-1.prod.boltdns.net/v1/static/1900410236/893966f4-f7e1-41f0-9cc2-e3064273d3aa/72837f91-61a1-455b-a7e3-126972b61ddd/1280x720/match/image.jpg'\n            alt='Pega Sales Automation'\n          />\n        </Flex>\n      </Link>\n    ),\n    replies: [],\n    renderFeed: false\n  }\n];\n"]}

package/jsx/social/Feed/Feed.stories.d.ts

@@ -1,15 +1,11 @@
-/// <reference types="react" />
-import { Meta } from '@storybook/react';
-import { MDMap } from '@pega/cosmos-react-rte';
+import { Meta, Story } from '@storybook/react';
+import { FeedProps } from '@pega/cosmos-react-social/lib/components/Feed/Feed';
 declare const _default: Meta<import("@storybook/react").Args>;
 export default _default;
-export declare const FeedDemo: ({ markdownMap }: {
-    markdownMap?: MDMap | undefined;
-}) => JSX.Element;
-export declare const FeedWithAppShell: {
-    (): JSX.Element;
-    parameters: {
-        layout: string;
-    };
-};
+interface FeedDemoProps {
+    markdownMap?: FeedProps['markdownMap'];
+    onMentionPreview?: FeedProps['onMentionPreview'];
+}
+export declare const FeedDemo: Story<FeedDemoProps>;
+export declare const FeedWithAppShell: Story;
 //# sourceMappingURL=Feed.stories.d.ts.map

package/jsx/social/Feed/Feed.stories.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Feed.stories.d.ts","sourceRoot":"","sources":["../../../src/social/Feed/Feed.stories.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,kBAAkB,CAAC;AAWxC,OAAO,EAAE,KAAK,EAAE,MAAM,wBAAwB,CAAC;;AAgB/C,wBAGU;AAEV,eAAO,MAAM,QAAQ;;iBAmLpB,CAAC;AAEF,eAAO,MAAM,gBAAgB;;;;;CAE5B,CAAC"}
+{"version":3,"file":"Feed.stories.d.ts","sourceRoot":"","sources":["../../../src/social/Feed/Feed.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,kBAAkB,CAAC;AAkB/C,OAAO,EAAE,SAAS,EAAE,MAAM,oDAAoD,CAAC;;AAS/E,wBAGU;AAEV,UAAU,aAAa;IACrB,WAAW,CAAC,EAAE,SAAS,CAAC,aAAa,CAAC,CAAC;IACvC,gBAAgB,CAAC,EAAE,SAAS,CAAC,kBAAkB,CAAC,CAAC;CAClD;AAED,eAAO,MAAM,QAAQ,EAAE,KAAK,CAAC,aAAa,CAoMzC,CAAC;AAEF,eAAO,MAAM,gBAAgB,EAAE,KAE9B,CAAC"}

package/jsx/social/Feed/Feed.stories.jsx

@@ -1,4 +1,4 @@
-import { useState, useRef } from 'react';
+import { useState, useRef, useCallback, useEffect } from 'react';
 import { createUID, DateTimeDisplay, Lightbox, OneColumnPage } from '@pega/cosmos-react-core';
 import { Feed, MentionButtonConfig, HashtagButtonConfig } from '@pega/cosmos-react-social';
 import { Glimpse } from '@pega/cosmos-react-work';
@@ -10,7 +10,7 @@ export default {
     title: 'Social/Feed/Feed',
     component: Feed
 };
-export const FeedDemo = ({ markdownMap }) => {
+export const FeedDemo = ({ markdownMap, onMentionPreview }) => {
     const [extraPosts, setExtraPosts] = useState(() => feedPosts);
     const [searchResults, setSearchResults] = useState([]);
     const [filters, setFilters] = useState(Array.from({ length: 10 }, (_, index) => {
@@ -35,12 +35,13 @@ export const FeedDemo = ({ markdownMap }) => {
                 const searchWords = search.toLowerCase().split(' ');
                 return !!searchWords.every((word) => names.find((name) => name.startsWith(word)));
             })
-                .map(({ id, primary, secondary, visual }) => {
+                .map(({ id, primary, secondary, visual, href }) => {
                 return {
                     id,
                     primary,
                     secondary,
-                    visual
+                    visual,
+                    href
                 };
             });
             setSearchResults(mentions);
@@ -53,22 +54,31 @@ export const FeedDemo = ({ markdownMap }) => {
                 .map(tag => ({ id: tag, primary: tag })));
         }
     };
-    const generateNewPost = () => {
-        setTimeout(() => {
-            setExtraPosts(posts => [
-                ...posts,
-                {
-                    id: createUID(),
-                    fullname: 'Demo User',
-                    username: 'demo_user',
-                    content: 'This post was loaded after the Feed was scrolled to the bottom!',
-                    attachments: [],
-                    replies: [],
-                    renderFeed: false
-                }
-            ]);
-        }, 1000);
-    };
+    const [loading, setLoading] = useState(false);
+    let timeoutId;
+    const generateNewPost = useCallback(() => {
+        if (!loading) {
+            setLoading(true);
+            timeoutId = setTimeout(() => {
+                setLoading(false);
+                setExtraPosts(posts => [
+                    ...posts,
+                    {
+                        id: createUID(),
+                        fullname: 'Demo User',
+                        username: 'demo_user',
+                        content: 'This post was loaded after the Feed was scrolled to the bottom!',
+                        attachments: [],
+                        replies: [],
+                        renderFeed: false
+                    }
+                ]);
+            }, 1000);
+        }
+    }, [loading]);
+    useEffect(() => {
+        return () => clearTimeout(timeoutId);
+    }, []);
     const onMentionClick = ({ id, type }) => {
         if (type === 'user') {
             const user = userMentions.find(mention => mention.id === id);
@@ -102,7 +112,7 @@ export const FeedDemo = ({ markdownMap }) => {
         });
     };
     return (<>
-      <Feed title='Pulse' userInfo={{ username: 'demo_user', fullname: 'Demo User' }} searchTypes={['user', 'case']} onDecoratorSearch={onSearch} searchResults={searchResults} onMentionClick={onMentionClick} markdownMap={markdownMap} interactionRenderers={[MentionButtonConfig, HashtagButtonConfig]} filters={filters} onFilterChange={toggleFilter} onLoadMore={generateNewPost} newPostRegion={<FeedNewPostDemo onPost={postEvent => {
+      <Feed title='Pulse' userInfo={{ username: 'demo_user', fullname: 'Demo User' }} searchTypes={['user', 'case']} onDecoratorSearch={onSearch} searchResults={searchResults} onMentionClick={onMentionClick} onMentionPreview={onMentionPreview} markdownMap={markdownMap} interactionRenderers={[MentionButtonConfig, HashtagButtonConfig]} filters={filters} onFilterChange={toggleFilter} loadingPosts={loading} onLoadMore={generateNewPost} newPostRegion={<FeedNewPostDemo onPost={postEvent => {
                 const { value, attachments, recipients, clear } = postEvent;
                 attachments.forEach(file => {
                     delete file.onDelete;
@@ -122,7 +132,7 @@ export const FeedDemo = ({ markdownMap }) => {
                             recipients,
                             postType: recipients.length ? 'private' : 'public',
                             replies: [],
-                            timeElapsed: 'Just now',
+                            postTimestamp: new Date(),
                             renderFeed: false
                         },
                         ...posts

package/jsx/social/Feed/Feed.stories.jsx.map

@@ -1 +1 @@
-{"version":3,"file":"Feed.stories.jsx","sourceRoot":"","sources":["../../../src/social/Feed/Feed.stories.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Meta } from '@storybook/react';\nimport { useState, useRef } from 'react';\n\nimport {\n  createUID,\n  DateTimeDisplay,\n  Lightbox,\n  LightboxProps,\n  MenuItemProps,\n  OneColumnPage\n} from '@pega/cosmos-react-core';\nimport { MDMap } from '@pega/cosmos-react-rte';\nimport {\n  Feed,\n  Filter,\n  MentionButtonConfig,\n  HashtagButtonConfig,\n  AttachedFiles\n} from '@pega/cosmos-react-social';\nimport { Glimpse, GlimpseProps } from '@pega/cosmos-react-work';\n\nimport { AppShellDemo } from '../../core/AppShell/AppShell.stories';\n\nimport { FeedPostDemo } from './FeedPost.stories';\nimport { FeedNewPostDemo } from './FeedNewPost.stories';\nimport { caseMentions, feedPosts, userMentions, FeedPostDemoProps } from './Feed.mocks';\n\nexport default {\n  title: 'Social/Feed/Feed',\n  component: Feed\n} as Meta;\n\nexport const FeedDemo = ({ markdownMap }: { markdownMap?: MDMap }) => {\n  const [extraPosts, setExtraPosts] = useState<FeedPostDemoProps[]>(() => feedPosts);\n  const [searchResults, setSearchResults] = useState<MenuItemProps[]>([]);\n\n  const [filters, setFilters] = useState<Filter[]>(\n    Array.from({ length: 10 }, (_, index) => {\n      return {\n        id: `filter-${index + 1}`,\n        label: `Filter ${index + 1}`\n      };\n    })\n  );\n\n  const toggleFilter = (filterId: string) => {\n    const updatedFilters = [...filters];\n    const filterToUpdate = updatedFilters.find(x => x.id === filterId);\n\n    if (filterToUpdate) filterToUpdate.on = !filterToUpdate.on;\n\n    setFilters(updatedFilters);\n  };\n\n  const onSearch = ({\n    type,\n    search,\n    mentionType\n  }: {\n    type: 'mention' | 'tag';\n    search: string;\n    mentionType: string;\n  }) => {\n    if (type === 'mention') {\n      const availableMentions = mentionType === 'case' ? caseMentions : userMentions;\n\n      const mentions: MenuItemProps[] = availableMentions\n        .filter((user: GlimpseProps) => {\n          const names = user.primary.toLowerCase().split(' ');\n          const searchWords = search.toLowerCase().split(' ');\n          return !!searchWords.every((word: string) =>\n            names.find((name: string) => name.startsWith(word))\n          );\n        })\n        .map(({ id, primary, secondary, visual }) => {\n          return {\n            id,\n            primary,\n            secondary,\n            visual\n          };\n        });\n      setSearchResults(mentions);\n    } else {\n      setSearchResults(\n        ['cosmos', 'hashtag', 'pega']\n          .filter(tag => {\n            return tag.toLowerCase().includes(search.toLowerCase());\n          })\n          .map(tag => ({ id: tag, primary: tag }))\n      );\n    }\n  };\n\n  const generateNewPost = () => {\n    setTimeout(() => {\n      setExtraPosts(posts => [\n        ...posts,\n        {\n          id: createUID(),\n          fullname: 'Demo User',\n          username: 'demo_user',\n          content: 'This post was loaded after the Feed was scrolled to the bottom!',\n          attachments: [],\n          replies: [],\n          renderFeed: false\n        }\n      ]);\n    }, 1000);\n  };\n\n  const onMentionClick = ({ id, type }: { id: string; type: string }) => {\n    if (type === 'user') {\n      const user = userMentions.find(mention => mention.id === id);\n      if (user) return <Glimpse {...user} />;\n    }\n  };\n\n  const [lightboxImages, setLightboxImages] = useState<LightboxProps['items'] | null>(null);\n  const defaultLBIndex = useRef(0);\n\n  const renderLightbox = (attachments: AttachedFiles[], name: string) => {\n    const images: LightboxProps['items'] = attachments\n      .filter(attachment => attachment.type.includes('image') && attachment.thumbnail)\n      .map(image => {\n        return {\n          id: image.thumbnail as string,\n          name: image.name,\n          description: image.name,\n          src: image.thumbnail as string,\n          metadata: [image.type, <DateTimeDisplay value={new Date()} variant='date' />]\n        };\n      });\n\n    const idx = images.findIndex(image => image.name === name);\n    defaultLBIndex.current = idx > -1 ? idx : 0;\n    setLightboxImages(images);\n  };\n\n  const deletePost = (index: number) => {\n    setExtraPosts(posts => {\n      const postsCopy = [...posts];\n      postsCopy.splice(index, 1);\n      return [...postsCopy];\n    });\n  };\n\n  return (\n    <>\n      <Feed\n        title='Pulse'\n        userInfo={{ username: 'demo_user', fullname: 'Demo User' }}\n        searchTypes={['user', 'case']}\n        onDecoratorSearch={onSearch}\n        searchResults={searchResults}\n        onMentionClick={onMentionClick}\n        markdownMap={markdownMap}\n        interactionRenderers={[MentionButtonConfig, HashtagButtonConfig]}\n        filters={filters}\n        onFilterChange={toggleFilter}\n        onLoadMore={generateNewPost}\n        newPostRegion={\n          <FeedNewPostDemo\n            onPost={postEvent => {\n              const { value, attachments, recipients, clear } = postEvent;\n\n              attachments.forEach(file => {\n                delete file.onDelete;\n                file.onPreview = file.type.includes('image')\n                  ? () => renderLightbox(attachments, file.name)\n                  : undefined;\n                file.onDownload = () => {};\n              });\n\n              if (value || attachments.length > 0) {\n                setExtraPosts(posts => [\n                  {\n                    id: createUID(),\n                    fullname: 'Demo User',\n                    username: 'demo_user',\n                    content: value,\n                    attachments,\n                    recipients,\n                    postType: recipients.length ? 'private' : 'public',\n                    replies: [],\n                    timeElapsed: 'Just now',\n                    renderFeed: false\n                  },\n                  ...posts\n                ]);\n                clear();\n              }\n            }}\n            renderFeed={false}\n          />\n        }\n        posts={extraPosts.map((post, i) => {\n          return <FeedPostDemo {...post} key={post.id} onDelete={() => deletePost(i)} />;\n        })}\n      />\n      {lightboxImages && (\n        <Lightbox\n          items={lightboxImages}\n          defaultIndex={defaultLBIndex.current}\n          onAfterClose={() => {\n            setLightboxImages(null);\n          }}\n        />\n      )}\n    </>\n  );\n};\n\nexport const FeedWithAppShell = () => {\n  return <AppShellDemo appHeader main={<OneColumnPage title='Welcome' a={<FeedDemo />} />} />;\n};\n\nFeedWithAppShell.parameters = {\n  layout: 'fullscreen'\n};\n"]}
+{"version":3,"file":"Feed.stories.jsx","sourceRoot":"","sources":["../../../src/social/Feed/Feed.stories.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Meta, Story } from '@storybook/react';\nimport { useState, useRef, useCallback, useEffect } from 'react';\n\nimport {\n  createUID,\n  DateTimeDisplay,\n  Lightbox,\n  LightboxProps,\n  MenuItemProps,\n  OneColumnPage\n} from '@pega/cosmos-react-core';\nimport {\n  Feed,\n  Filter,\n  MentionButtonConfig,\n  HashtagButtonConfig,\n  AttachedFiles\n} from '@pega/cosmos-react-social';\nimport { FeedProps } from '@pega/cosmos-react-social/lib/components/Feed/Feed';\nimport { Glimpse, GlimpseProps } from '@pega/cosmos-react-work';\n\nimport { AppShellDemo } from '../../core/AppShell/AppShell.stories';\n\nimport { FeedPostDemo } from './FeedPost.stories';\nimport { FeedNewPostDemo } from './FeedNewPost.stories';\nimport { caseMentions, feedPosts, userMentions, FeedPostDemoProps } from './Feed.mocks';\n\nexport default {\n  title: 'Social/Feed/Feed',\n  component: Feed\n} as Meta;\n\ninterface FeedDemoProps {\n  markdownMap?: FeedProps['markdownMap'];\n  onMentionPreview?: FeedProps['onMentionPreview'];\n}\n\nexport const FeedDemo: Story<FeedDemoProps> = ({\n  markdownMap,\n  onMentionPreview\n}: FeedDemoProps) => {\n  const [extraPosts, setExtraPosts] = useState<FeedPostDemoProps[]>(() => feedPosts);\n  const [searchResults, setSearchResults] = useState<MenuItemProps[]>([]);\n\n  const [filters, setFilters] = useState<Filter[]>(\n    Array.from({ length: 10 }, (_, index) => {\n      return {\n        id: `filter-${index + 1}`,\n        label: `Filter ${index + 1}`\n      };\n    })\n  );\n\n  const toggleFilter = (filterId: string) => {\n    const updatedFilters = [...filters];\n    const filterToUpdate = updatedFilters.find(x => x.id === filterId);\n\n    if (filterToUpdate) filterToUpdate.on = !filterToUpdate.on;\n\n    setFilters(updatedFilters);\n  };\n\n  const onSearch = ({\n    type,\n    search,\n    mentionType\n  }: {\n    type: 'mention' | 'tag';\n    search: string;\n    mentionType: string;\n  }) => {\n    if (type === 'mention') {\n      const availableMentions = mentionType === 'case' ? caseMentions : userMentions;\n\n      const mentions: MenuItemProps[] = availableMentions\n        .filter((user: GlimpseProps) => {\n          const names = user.primary.toLowerCase().split(' ');\n          const searchWords = search.toLowerCase().split(' ');\n          return !!searchWords.every((word: string) =>\n            names.find((name: string) => name.startsWith(word))\n          );\n        })\n        .map(({ id, primary, secondary, visual, href }) => {\n          return {\n            id,\n            primary,\n            secondary,\n            visual,\n            href\n          };\n        });\n      setSearchResults(mentions);\n    } else {\n      setSearchResults(\n        ['cosmos', 'hashtag', 'pega']\n          .filter(tag => {\n            return tag.toLowerCase().includes(search.toLowerCase());\n          })\n          .map(tag => ({ id: tag, primary: tag }))\n      );\n    }\n  };\n\n  const [loading, setLoading] = useState(false);\n  let timeoutId: ReturnType<typeof setTimeout>;\n\n  const generateNewPost = useCallback(() => {\n    if (!loading) {\n      setLoading(true);\n      timeoutId = setTimeout(() => {\n        setLoading(false);\n        setExtraPosts(posts => [\n          ...posts,\n          {\n            id: createUID(),\n            fullname: 'Demo User',\n            username: 'demo_user',\n            content: 'This post was loaded after the Feed was scrolled to the bottom!',\n            attachments: [],\n            replies: [],\n            renderFeed: false\n          }\n        ]);\n      }, 1000);\n    }\n  }, [loading]);\n\n  useEffect(() => {\n    return () => clearTimeout(timeoutId);\n  }, []);\n\n  const onMentionClick = ({ id, type }: { id: string; type: string }) => {\n    if (type === 'user') {\n      const user = userMentions.find(mention => mention.id === id);\n      if (user) return <Glimpse {...user} />;\n    }\n  };\n\n  const [lightboxImages, setLightboxImages] = useState<LightboxProps['items'] | null>(null);\n  const defaultLBIndex = useRef(0);\n\n  const renderLightbox = (attachments: AttachedFiles[], name: string) => {\n    const images: LightboxProps['items'] = attachments\n      .filter(attachment => attachment.type.includes('image') && attachment.thumbnail)\n      .map(image => {\n        return {\n          id: image.thumbnail as string,\n          name: image.name,\n          description: image.name,\n          src: image.thumbnail as string,\n          metadata: [image.type, <DateTimeDisplay value={new Date()} variant='date' />]\n        };\n      });\n\n    const idx = images.findIndex(image => image.name === name);\n    defaultLBIndex.current = idx > -1 ? idx : 0;\n    setLightboxImages(images);\n  };\n\n  const deletePost = (index: number) => {\n    setExtraPosts(posts => {\n      const postsCopy = [...posts];\n      postsCopy.splice(index, 1);\n      return [...postsCopy];\n    });\n  };\n\n  return (\n    <>\n      <Feed\n        title='Pulse'\n        userInfo={{ username: 'demo_user', fullname: 'Demo User' }}\n        searchTypes={['user', 'case']}\n        onDecoratorSearch={onSearch}\n        searchResults={searchResults}\n        onMentionClick={onMentionClick}\n        onMentionPreview={onMentionPreview}\n        markdownMap={markdownMap}\n        interactionRenderers={[MentionButtonConfig, HashtagButtonConfig]}\n        filters={filters}\n        onFilterChange={toggleFilter}\n        loadingPosts={loading}\n        onLoadMore={generateNewPost}\n        newPostRegion={\n          <FeedNewPostDemo\n            onPost={postEvent => {\n              const { value, attachments, recipients, clear } = postEvent;\n\n              attachments.forEach(file => {\n                delete file.onDelete;\n                file.onPreview = file.type.includes('image')\n                  ? () => renderLightbox(attachments, file.name)\n                  : undefined;\n                file.onDownload = () => {};\n              });\n\n              if (value || attachments.length > 0) {\n                setExtraPosts(posts => [\n                  {\n                    id: createUID(),\n                    fullname: 'Demo User',\n                    username: 'demo_user',\n                    content: value,\n                    attachments,\n                    recipients,\n                    postType: recipients.length ? 'private' : 'public',\n                    replies: [],\n                    postTimestamp: new Date(),\n                    renderFeed: false\n                  },\n                  ...posts\n                ]);\n                clear();\n              }\n            }}\n            renderFeed={false}\n          />\n        }\n        posts={extraPosts.map((post, i) => {\n          return <FeedPostDemo {...post} key={post.id} onDelete={() => deletePost(i)} />;\n        })}\n      />\n      {lightboxImages && (\n        <Lightbox\n          items={lightboxImages}\n          defaultIndex={defaultLBIndex.current}\n          onAfterClose={() => {\n            setLightboxImages(null);\n          }}\n        />\n      )}\n    </>\n  );\n};\n\nexport const FeedWithAppShell: Story = () => {\n  return <AppShellDemo appHeader main={<OneColumnPage title='Welcome' a={<FeedDemo />} />} />;\n};\n\nFeedWithAppShell.parameters = {\n  layout: 'fullscreen'\n};\n"]}

package/jsx/social/Feed/FeedNewPost.stories.d.ts

@@ -1,17 +1,10 @@
-/// <reference types="react" />
-import { Meta } from '@storybook/react';
-import { FeedNewPostProps, AttachedFiles } from '@pega/cosmos-react-social';
+import { Meta, Story } from '@storybook/react';
+import { FeedNewPostProps } from '@pega/cosmos-react-social';
 declare const _default: Meta<import("@storybook/react").Args>;
 export default _default;
-export declare const FeedNewPostDemo: ({ onPost, renderFeed }: {
-    onPost?: ((event: {
-        newPostId: string;
-        value: string;
-        attachments: AttachedFiles[];
-        recipients: import("@pega/cosmos-react-social/lib/components/Feed/FeedNewPostTypeMenu").RecipientMenuItem[];
-        username: string;
-        clear: () => void;
-    }) => void) | undefined;
-    renderFeed?: boolean | undefined;
-}) => JSX.Element;
+interface FeedNewPostDemoProps {
+    onPost?: FeedNewPostProps['onPost'];
+    renderFeed?: boolean;
+}
+export declare const FeedNewPostDemo: Story<FeedNewPostDemoProps>;
 //# sourceMappingURL=FeedNewPost.stories.d.ts.map

package/jsx/social/Feed/FeedNewPost.stories.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"FeedNewPost.stories.d.ts","sourceRoot":"","sources":["../../../src/social/Feed/FeedNewPost.stories.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,kBAAkB,CAAC;AAIxC,OAAO,EAGL,gBAAgB,EAEhB,aAAa,EACd,MAAM,2BAA2B,CAAC;;AAKnC,wBAGU;AAEV,eAAO,MAAM,eAAe;;;;;;;;;;iBAwH3B,CAAC"}
+{"version":3,"file":"FeedNewPost.stories.d.ts","sourceRoot":"","sources":["../../../src/social/Feed/FeedNewPost.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,kBAAkB,CAAC;AAI/C,OAAO,EAGL,gBAAgB,EAGjB,MAAM,2BAA2B,CAAC;;AAKnC,wBAGU;AAEV,UAAU,oBAAoB;IAC5B,MAAM,CAAC,EAAE,gBAAgB,CAAC,QAAQ,CAAC,CAAC;IACpC,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB;AAED,eAAO,MAAM,eAAe,EAAE,KAAK,CAAC,oBAAoB,CAuHvD,CAAC"}

package/jsx/social/Feed/FeedNewPost.stories.jsx

@@ -21,12 +21,13 @@ export const FeedNewPostDemo = ({ onPost = () => { }, renderFeed = true }) => {
                 const searchWords = search.toLowerCase().split(' ');
                 return !!searchWords.every((word) => names.find((name) => name.startsWith(word)));
             })
-                .map(({ id, primary, secondary, visual }) => {
+                .map(({ id, primary, secondary, visual, href }) => {
                 return {
                     id,
                     primary,
                     secondary,
-                    visual
+                    visual,
+                    href
                 };
             });
             setSearchResults(mentions);
@@ -75,6 +76,6 @@ export const FeedNewPostDemo = ({ onPost = () => { }, renderFeed = true }) => {
             setAttachments([]);
             postEvent.clear();
         }} recipients={itemsToRender} onRecipientSearch={(newSearch) => setFilterValue(newSearch)}/>);
-    return renderFeed ? (<Feed searchTypes={['user', 'case']} onDecoratorSearch={onSearch} searchResults={searchResults} userInfo={{ username: 'demo_user', fullname: 'Demo User' }} newPostRegion={newPost}/>) : (newPost);
+    return renderFeed ? (<Feed title='Pulse' searchTypes={['user', 'case']} onDecoratorSearch={onSearch} searchResults={searchResults} userInfo={{ username: 'demo_user', fullname: 'Demo User' }} newPostRegion={newPost}/>) : (newPost);
 };
 //# sourceMappingURL=FeedNewPost.stories.jsx.map

package/jsx/social/Feed/FeedNewPost.stories.jsx.map

@@ -1 +1 @@
-{"version":3,"file":"FeedNewPost.stories.jsx","sourceRoot":"","sources":["../../../src/social/Feed/FeedNewPost.stories.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Meta } from '@storybook/react';\nimport { useState, useEffect } from 'react';\n\nimport { MenuItemProps, useUID } from '@pega/cosmos-react-core';\nimport {\n  Feed,\n  FeedNewPost,\n  FeedNewPostProps,\n  RecipientOption,\n  AttachedFiles\n} from '@pega/cosmos-react-social';\nimport { GlimpseProps } from '@pega/cosmos-react-work';\n\nimport { availableRecipients, caseMentions, userMentions } from './Feed.mocks';\n\nexport default {\n  title: 'Social/Feed/FeedNewPost',\n  component: FeedNewPost\n} as Meta;\n\nexport const FeedNewPostDemo = ({\n  onPost = () => {},\n  renderFeed = true\n}: {\n  onPost?: FeedNewPostProps['onPost'];\n  renderFeed?: boolean;\n}) => {\n  const key = useUID();\n  const [searchResults, setSearchResults] = useState<MenuItemProps[]>([]);\n  const [attachments, setAttachments] = useState<AttachedFiles[]>([]);\n  const [filterValue, setFilterValue] = useState('');\n  const [itemsToRender, setItemsToRender] = useState<RecipientOption[]>(availableRecipients);\n\n  const onSearch = ({\n    type,\n    search,\n    mentionType\n  }: {\n    type: 'mention' | 'tag';\n    search: string;\n    mentionType: string;\n  }) => {\n    if (type === 'mention') {\n      const availableMentions = mentionType === 'case' ? caseMentions : userMentions;\n\n      const mentions: MenuItemProps[] = availableMentions\n        .filter((user: GlimpseProps) => {\n          const names = user.primary.toLowerCase().split(' ');\n          const searchWords = search.toLowerCase().split(' ');\n          return !!searchWords.every((word: string) =>\n            names.find((name: string) => name.startsWith(word))\n          );\n        })\n        .map(({ id, primary, secondary, visual }) => {\n          return {\n            id,\n            primary,\n            secondary,\n            visual\n          };\n        });\n      setSearchResults(mentions);\n    } else {\n      setSearchResults(\n        ['cosmos', 'hashtag', 'pega']\n          .filter(tag => {\n            return tag.toLowerCase().includes(search.toLowerCase());\n          })\n          .map(tag => ({ id: tag, primary: tag }))\n      );\n    }\n  };\n\n  const onFilesAdded = (files: AttachedFiles[]) => {\n    files.forEach(file => {\n      if (file.type.split('/')[0] === 'image') file.thumbnail = URL.createObjectURL(file);\n\n      if (file.size / 1000000 > 100) {\n        file.meta = 'File size cannot exceed 100MB';\n        file.error = true;\n      }\n\n      file.onDelete = () => {\n        setAttachments(current => {\n          return current.filter(x => x.name !== file.name);\n        });\n      };\n    });\n\n    setAttachments(current => [...current, ...files]);\n  };\n\n  useEffect(() => {\n    // Synthetic delay to mimic async request\n    const timeout = setTimeout(() => {\n      const newItems = availableRecipients.filter(({ primary, secondary }) => {\n        return (\n          primary.toLowerCase().includes(filterValue) ||\n          secondary.find(x => x.toLowerCase().includes(filterValue))\n        );\n      });\n\n      setItemsToRender(newItems);\n    }, 500);\n\n    return () => {\n      clearTimeout(timeout);\n    };\n  }, [filterValue]);\n\n  const newPost = (\n    <FeedNewPost\n      id={key}\n      attachments={attachments}\n      interactionInfo={{\n        textAreaPlaceholder: 'Start a conversation',\n        postLabel: 'Post'\n      }}\n      onFilesAdded={onFilesAdded}\n      onPost={postEvent => {\n        onPost?.(postEvent);\n        setAttachments([]);\n        postEvent.clear();\n      }}\n      recipients={itemsToRender}\n      onRecipientSearch={(newSearch: string) => setFilterValue(newSearch)}\n    />\n  );\n\n  return renderFeed ? (\n    <Feed\n      searchTypes={['user', 'case']}\n      onDecoratorSearch={onSearch}\n      searchResults={searchResults}\n      userInfo={{ username: 'demo_user', fullname: 'Demo User' }}\n      newPostRegion={newPost}\n    />\n  ) : (\n    newPost\n  );\n};\n"]}
+{"version":3,"file":"FeedNewPost.stories.jsx","sourceRoot":"","sources":["../../../src/social/Feed/FeedNewPost.stories.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Meta, Story } from '@storybook/react';\nimport { useState, useEffect } from 'react';\n\nimport { MenuItemProps, useUID } from '@pega/cosmos-react-core';\nimport {\n  Feed,\n  FeedNewPost,\n  FeedNewPostProps,\n  RecipientOption,\n  AttachedFiles\n} from '@pega/cosmos-react-social';\nimport { GlimpseProps } from '@pega/cosmos-react-work';\n\nimport { availableRecipients, caseMentions, userMentions } from './Feed.mocks';\n\nexport default {\n  title: 'Social/Feed/FeedNewPost',\n  component: FeedNewPost\n} as Meta;\n\ninterface FeedNewPostDemoProps {\n  onPost?: FeedNewPostProps['onPost'];\n  renderFeed?: boolean;\n}\n\nexport const FeedNewPostDemo: Story<FeedNewPostDemoProps> = ({\n  onPost = () => {},\n  renderFeed = true\n}: FeedNewPostDemoProps) => {\n  const key = useUID();\n  const [searchResults, setSearchResults] = useState<MenuItemProps[]>([]);\n  const [attachments, setAttachments] = useState<AttachedFiles[]>([]);\n  const [filterValue, setFilterValue] = useState('');\n  const [itemsToRender, setItemsToRender] = useState<RecipientOption[]>(availableRecipients);\n\n  const onSearch = ({\n    type,\n    search,\n    mentionType\n  }: {\n    type: 'mention' | 'tag';\n    search: string;\n    mentionType: string;\n  }) => {\n    if (type === 'mention') {\n      const availableMentions = mentionType === 'case' ? caseMentions : userMentions;\n\n      const mentions: MenuItemProps[] = availableMentions\n        .filter((user: GlimpseProps) => {\n          const names = user.primary.toLowerCase().split(' ');\n          const searchWords = search.toLowerCase().split(' ');\n          return !!searchWords.every((word: string) =>\n            names.find((name: string) => name.startsWith(word))\n          );\n        })\n        .map(({ id, primary, secondary, visual, href }) => {\n          return {\n            id,\n            primary,\n            secondary,\n            visual,\n            href\n          };\n        });\n      setSearchResults(mentions);\n    } else {\n      setSearchResults(\n        ['cosmos', 'hashtag', 'pega']\n          .filter(tag => {\n            return tag.toLowerCase().includes(search.toLowerCase());\n          })\n          .map(tag => ({ id: tag, primary: tag }))\n      );\n    }\n  };\n\n  const onFilesAdded = (files: AttachedFiles[]) => {\n    files.forEach(file => {\n      if (file.type.split('/')[0] === 'image') file.thumbnail = URL.createObjectURL(file);\n\n      if (file.size / 1000000 > 100) {\n        file.meta = 'File size cannot exceed 100MB';\n        file.error = true;\n      }\n\n      file.onDelete = () => {\n        setAttachments(current => {\n          return current.filter(x => x.name !== file.name);\n        });\n      };\n    });\n\n    setAttachments(current => [...current, ...files]);\n  };\n\n  useEffect(() => {\n    // Synthetic delay to mimic async request\n    const timeout = setTimeout(() => {\n      const newItems = availableRecipients.filter(({ primary, secondary }) => {\n        return (\n          primary.toLowerCase().includes(filterValue) ||\n          secondary.find(x => x.toLowerCase().includes(filterValue))\n        );\n      });\n\n      setItemsToRender(newItems);\n    }, 500);\n\n    return () => {\n      clearTimeout(timeout);\n    };\n  }, [filterValue]);\n\n  const newPost = (\n    <FeedNewPost\n      id={key}\n      attachments={attachments}\n      interactionInfo={{\n        textAreaPlaceholder: 'Start a conversation',\n        postLabel: 'Post'\n      }}\n      onFilesAdded={onFilesAdded}\n      onPost={postEvent => {\n        onPost?.(postEvent);\n        setAttachments([]);\n        postEvent.clear();\n      }}\n      recipients={itemsToRender}\n      onRecipientSearch={(newSearch: string) => setFilterValue(newSearch)}\n    />\n  );\n\n  return renderFeed ? (\n    <Feed\n      title='Pulse'\n      searchTypes={['user', 'case']}\n      onDecoratorSearch={onSearch}\n      searchResults={searchResults}\n      userInfo={{ username: 'demo_user', fullname: 'Demo User' }}\n      newPostRegion={newPost}\n    />\n  ) : (\n    newPost\n  );\n};\n"]}

package/jsx/social/Feed/FeedPost.stories.d.ts

@@ -1,9 +1,8 @@
-/// <reference types="react" />
-import { Meta } from '@storybook/react';
+import { Meta, Story } from '@storybook/react';
 import { FeedPostDemoProps } from './Feed.mocks';
 declare const _default: Meta<import("@storybook/react").Args>;
 export default _default;
-export declare const FeedPostDemo: ({ fullname, username, content, postType, recipients, attachments: postAttachments, replies, timeElapsed: time, userStatus, likes: userLikes, likeCount: userLikeCount, onDelete, renderFeed }: FeedPostDemoProps) => JSX.Element;
-export declare const FeedPostWithPresence: () => JSX.Element;
-export declare const FeedPostWithJSX: () => JSX.Element;
+export declare const FeedPostDemo: Story<FeedPostDemoProps>;
+export declare const FeedPostWithPresence: Story;
+export declare const FeedPostWithJSX: Story;
 //# sourceMappingURL=FeedPost.stories.d.ts.map

package/jsx/social/Feed/FeedPost.stories.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"FeedPost.stories.d.ts","sourceRoot":"","sources":["../../../src/social/Feed/FeedPost.stories.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,kBAAkB,CAAC;AAwBxC,OAAO,EAKL,iBAAiB,EAClB,MAAM,cAAc,CAAC;;AAEtB,wBAGU;AAEV,eAAO,MAAM,YAAY,kMActB,iBAAiB,gBA6RnB,CAAC;AAEF,eAAO,MAAM,oBAAoB,mBAEhC,CAAC;AAEF,eAAO,MAAM,eAAe,mBA+C3B,CAAC"}
+{"version":3,"file":"FeedPost.stories.d.ts","sourceRoot":"","sources":["../../../src/social/Feed/FeedPost.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,kBAAkB,CAAC;AAwB/C,OAAO,EAKL,iBAAiB,EAClB,MAAM,cAAc,CAAC;;AAEtB,wBAGU;AAEV,eAAO,MAAM,YAAY,EAAE,KAAK,CAAC,iBAAiB,CA4TjD,CAAC;AAEF,eAAO,MAAM,oBAAoB,EAAE,KAElC,CAAC;AAEF,eAAO,MAAM,eAAe,EAAE,KAgD7B,CAAC"}

package/jsx/social/Feed/FeedPost.stories.jsx

@@ -1,4 +1,4 @@
-import { useState } from 'react';
+import { useCallback, useState } from 'react';
 import { Avatar, CardContent, Link, Popover, Table, useUID } from '@pega/cosmos-react-core';
 import { HashtagButtonConfig, MentionButtonConfig, Feed, FeedPost } from '@pega/cosmos-react-social';
 import { Glimpse } from '@pega/cosmos-react-work';
@@ -8,10 +8,10 @@ export default {
     title: 'Social/Feed/FeedPost',
     component: FeedPost
 };
-export const FeedPostDemo = ({ fullname = 'Katie Smith', username = 'katie_smith', content, postType, recipients, attachments: postAttachments, replies, timeElapsed: time, userStatus, likes: userLikes, likeCount: userLikeCount, onDelete = () => { }, renderFeed = true }) => {
+export const FeedPostDemo = ({ fullname = 'Demo User', username = 'demo_user', content, postType, recipients, attachments: postAttachments, replies, postTimestamp = new Date(2022, 0, 1), userStatus, likes: userLikes, likeCount: userLikeCount, onDelete = () => { }, renderFeed = true }) => {
     const defaultContent = postAttachments
         ? ''
-        : 'This post mentions @deans:Seth DeAngelo:user: and also contains a tag! #cosmos:';
+        : 'This post mentions @[deans]:[Seth DeAngelo]:[user]: and also contains a tag! #cosmos:';
     const defaultReplies = Array.from(Array(12).keys(), index => {
         return (<FeedReplyDemo key={`reply-story-${index + 1}`} fullname={fullname} content={`This is reply number ${index + 1}!`} renderFeed={false}/>);
     });
@@ -23,7 +23,7 @@ export const FeedPostDemo = ({ fullname = 'Katie Smith', username = 'katie_smith
     const [likeCount, setLikeCount] = useState(userLikeCount || (renderFeed ? generatedLikes.length : 0));
     const [recipientsList, setRecipientsList] = useState([]);
     const [edited, setEdited] = useState(false);
-    const [timeElapsed, setTimeElapsed] = useState(time || '4 days ago');
+    const [editTimestamp, setEditTimestamp] = useState(new Date());
     const [popoverOpen, setPopoverOpen] = useState(false);
     const [popoverTarget, setPopoverTarget] = useState();
     const [extraReplies, setExtraReplies] = useState([]);
@@ -60,12 +60,13 @@ export const FeedPostDemo = ({ fullname = 'Katie Smith', username = 'katie_smith
                 const searchWords = search.toLowerCase().split(' ');
                 return !!searchWords.every((word) => names.find((name) => name.startsWith(word)));
             })
-                .map(({ id, primary, secondary, visual }) => {
+                .map(({ id, primary, secondary, visual, href }) => {
                 return {
                     id,
                     primary,
                     secondary,
-                    visual
+                    visual,
+                    href
                 };
             });
             setSearchResults(mentions);
@@ -95,31 +96,41 @@ export const FeedPostDemo = ({ fullname = 'Katie Smith', username = 'katie_smith
             return;
         setLikes(userLikes || (renderFeed ? generatedLikes : []));
     };
-    const generateNewLike = () => {
-        setTimeout(() => {
-            setLikes(oldLikes => [
-                ...oldLikes,
-                {
-                    primary: 'Generated Like',
-                    secondary: ['This like was added after the onLoadMore callback triggered'],
-                    visual: <Avatar size='l' name='Generated Like'/>,
-                    id: 'generatedLike'
-                }
-            ]);
-            setAdditionalLikeAdded(true);
-        }, 1000);
-    };
+    const [likesLoading, setLikesLoading] = useState(false);
+    const generateNewLike = useCallback(() => {
+        if (!likesLoading) {
+            setLikesLoading(true);
+            setTimeout(() => {
+                setLikesLoading(false);
+                setLikes(oldLikes => [
+                    ...oldLikes,
+                    {
+                        primary: 'Generated Like',
+                        secondary: ['This like was added after the onLoadMore callback triggered'],
+                        visual: <Avatar size='l' name='Generated Like'/>,
+                        id: 'generatedLike'
+                    }
+                ]);
+                setAdditionalLikeAdded(true);
+            }, 1000);
+        }
+    }, [likesLoading]);
     const getInitialRecipients = () => {
         if (recipientsList.length)
             return;
         setRecipientsList(recipients ||
             availableRecipients.slice(0, !allRecipientsVisible ? 10 : availableRecipients.length));
     };
+    const [recipientsLoading, setRecipientsLoading] = useState(false);
     const getAllRecipients = () => {
-        setTimeout(() => {
-            setAllRecipientsVisible(true);
-            setRecipientsList(recipients || availableRecipients);
-        }, 1000);
+        if (!recipientsLoading) {
+            setRecipientsLoading(true);
+            setTimeout(() => {
+                setRecipientsLoading(false);
+                setAllRecipientsVisible(true);
+                setRecipientsList(recipients || availableRecipients);
+            }, 1000);
+        }
     };
     const onMentionClick = ({ id, type }) => {
         if (type === 'user') {
@@ -132,7 +143,7 @@ export const FeedPostDemo = ({ fullname = 'Katie Smith', username = 'katie_smith
       <FeedPost id={key} key={key} info={{
             fullname,
             username,
-            timeElapsed,
+            postTimestamp,
             content: postContent,
             postType,
             recipients: recipientsList,
@@ -163,7 +174,7 @@ export const FeedPostDemo = ({ fullname = 'Katie Smith', username = 'katie_smith
                 setLikeCount(curr => curr + 1);
             }
             setLiked(curr => !curr);
-        }} onLikeCountInteraction={getInitialLikes} onLoadMoreLikes={!additionalLikeAdded ? generateNewLike : undefined} onRecipientInteraction={getInitialRecipients} onLoadMoreRecipients={!allRecipientsVisible ? getAllRecipients : undefined} onUserClick={(_, clickEvent) => {
+        }} onLikeCountInteraction={getInitialLikes} likesLoading={likesLoading} onLoadMoreLikes={!additionalLikeAdded ? generateNewLike : undefined} onRecipientInteraction={getInitialRecipients} recipientsLoading={recipientsLoading} onLoadMoreRecipients={!allRecipientsVisible ? getAllRecipients : undefined} onUserClick={(_, clickEvent) => {
             if (clickEvent) {
                 setPopoverTarget(clickEvent.target);
                 setPopoverOpen(curr => !curr);
@@ -174,8 +185,8 @@ export const FeedPostDemo = ({ fullname = 'Katie Smith', username = 'katie_smith
         ]} onEditSubmit={({ value }) => {
             setPostContent(value);
             setEdited(true);
-            setTimeElapsed('Just now');
-        }} edited={edited} replies={replies
+            setEditTimestamp(new Date());
+        }} edited={edited} editTimestamp={editTimestamp} replies={replies
             ? [...replies, ...extraReplies]
             : [...defaultReplies.slice(-repliesShown), ...extraReplies]} replyCount={replyCount} repliesLoading={repliesLoading} onShowMoreReplies={onShowMoreReplies} onShowLessReplies={repliesShown > 3 ? onShowLessReplies : undefined} replyInput={{
             commentLabel: 'Send Comment',
@@ -190,7 +201,7 @@ export const FeedPostDemo = ({ fullname = 'Katie Smith', username = 'katie_smith
                 });
                 setExtraReplies(oldReplies => [
                     ...oldReplies,
-                    <FeedReplyDemo key={`replies-${oldReplies.length}`} fullname='Demo User' username='demo_user' content={replyEvent.value} attachments={replyEvent.attachments} timeElapsed='Just now' renderFeed={false}/>
+                    <FeedReplyDemo key={`replies-${oldReplies.length}`} fullname='Demo User' username='demo_user' content={replyEvent.value} attachments={replyEvent.attachments} postTimestamp={new Date()} renderFeed={false}/>
                 ]);
                 setReplyCount(oldReplyCount => oldReplyCount + 1);
                 replyEvent.clear();
@@ -201,7 +212,7 @@ export const FeedPostDemo = ({ fullname = 'Katie Smith', username = 'katie_smith
           <CardContent>{fullname}</CardContent>
         </Popover>)}
     </>);
-    return renderFeed ? (<Feed searchTypes={['user', 'case']} onDecoratorSearch={onSearch} searchResults={searchResults} onMentionClick={onMentionClick} interactionRenderers={[MentionButtonConfig, HashtagButtonConfig]} userInfo={{ username: 'demo_user', fullname: 'Demo User' }} posts={[post]}/>) : (post);
+    return renderFeed ? (<Feed title='Pulse' searchTypes={['user', 'case']} onDecoratorSearch={onSearch} searchResults={searchResults} onMentionClick={onMentionClick} interactionRenderers={[MentionButtonConfig, HashtagButtonConfig]} userInfo={{ username: 'demo_user', fullname: 'Demo User' }} posts={[post]}/>) : (post);
 };
 export const FeedPostWithPresence = () => {
     return <FeedPostDemo userStatus='active'/>;
@@ -243,6 +254,6 @@ export const FeedPostWithJSX = () => {
         { renderer: 'email', label: 'Email' },
         { renderer: 'balance', label: 'Account Balance', align: 'right' }
     ];
-    return (<Feed userInfo={{ username: 'demo_user', fullname: 'Demo User' }} posts={[<FeedPostDemo content={<Table columns={columns} data={data}/>} replies={[]}/>]}/>);
+    return (<Feed title='Pulse' userInfo={{ username: 'demo_user', fullname: 'Demo User' }} posts={[<FeedPostDemo content={<Table columns={columns} data={data}/>} replies={[]}/>]}/>);
 };
 //# sourceMappingURL=FeedPost.stories.jsx.map