npm - @pega/cosmos-react-demos - Versions diffs - 4.0.0-dev.2.0 → 4.0.0-dev.20.0 - Mend

@pega/cosmos-react-demos 4.0.0-dev.2.0 → 4.0.0-dev.20.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (1187) hide show

package/jsx/social/Feed/FeedReply.stories.jsx.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"FeedReply.stories.jsx","sourceRoot":"","sources":["../../../src/social/Feed/FeedReply.stories.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Meta, Story } from '@storybook/react';\nimport { useState, useCallback } from 'react';\n\nimport { Avatar, CardContent, Popover, SummaryListItem, useUID } from '@pega/cosmos-react-core';\nimport {\n Feed,\n FeedReply,\n FeedReplyProps,\n HashtagButtonConfig,\n MentionButtonConfig\n} from '@pega/cosmos-react-social';\nimport { Glimpse } from '@pega/cosmos-react-work';\n\nimport { generatedLikes, userMentions } from './Feed.mocks';\n\nexport default {\n title: 'Social/Feed/FeedReply',\n component: FeedReply\n} as Meta;\n\ninterface FeedReplyDemoProps {\n fullname?: FeedReplyProps['info']['fullname'];\n username?: FeedReplyProps['info']['username'];\n content?: FeedReplyProps['info']['content'];\n attachments?: FeedReplyProps['info']['attachments'];\n postTimestamp?: FeedReplyProps['info']['postTimestamp'];\n userStatus?: FeedReplyProps['info']['userStatus'];\n renderFeed?: boolean;\n}\n\nexport const FeedReplyDemo: Story<FeedReplyDemoProps> = ({\n fullname = 'Demo User',\n username = 'demo_user',\n content,\n attachments,\n postTimestamp = new Date(2022, 0, 1),\n userStatus,\n renderFeed = true\n}: FeedReplyDemoProps) => {\n const defaultContent = attachments\n ? ''\n : \"This reply mentions <pega-mention id='deans' text='Seth DeAngelo' type='user'/> and also contains a tag! <pega-tag tag='cosmos'/>\";\n\n const key = useUID();\n const [likes, setLikes] = useState<SummaryListItem[]>([]);\n const [liked, setLiked] = useState(false);\n const [likeCount, setLikeCount] = useState(renderFeed ? generatedLikes.length : 0);\n const [replyContent, setReplyContent] = useState(content \|\| defaultContent);\n const [edited, setEdited] = useState(false);\n const [editTimestamp, setEditTimestamp] = useState(new Date());\n const [popoverOpen, setPopoverOpen] = useState(false);\n const [popoverTarget, setPopoverTarget] = useState<Element>();\n const [additionalLikeAdded, setAdditionalLikeAdded] = useState(false);\n\n const getInitialLikes = () => {\n if (likes.length) return;\n\n setLikes(renderFeed ? generatedLikes : []);\n };\n\n const [likesLoading, setLikesLoading] = useState(false);\n\n const generateNewLike = useCallback(() => {\n if (!likesLoading) {\n setLikesLoading(true);\n setTimeout(() => {\n setLikesLoading(false);\n setLikes(oldLikes => [\n ...oldLikes,\n {\n primary: 'Generated Like',\n secondary: ['This like was added after the onLoadMore callback triggered'],\n visual: <Avatar size='l' name='Generated Like' />,\n id: 'generatedLike'\n }\n ]);\n setAdditionalLikeAdded(true);\n }, 1000);\n }\n }, [likesLoading]);\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 reply = (\n <>\n <FeedReply\n id={key}\n key={key}\n info={{\n postTimestamp,\n content: replyContent,\n attachments,\n username,\n fullname,\n fullnameLabel: `${fullname}'s Profile`,\n liked,\n userStatus\n }}\n interactionInfo={{\n likes,\n likeCount: likeCount >= 10 ? likeCount + 1 : likeCount,\n likeLabel: 'Like',\n commentLabel: 'Comment'\n }}\n maxContentHeight={40}\n menuItems={[{ primary: 'Custom action', id: 'custom', onClick: () => {} }]}\n onEditSubmit={({ value }) => {\n setReplyContent(value);\n setEdited(true);\n setEditTimestamp(new Date());\n }}\n edited={edited}\n editTimestamp={editTimestamp}\n onCommentClick={() => {}}\n onLikeClick={({ user }) => {\n const userLikedIndex = likes.findIndex(x => x.id === user.id);\n if (userLikedIndex !== -1) {\n setLikes(oldLikes => {\n const oldLikesArr = [...oldLikes];\n oldLikesArr.splice(userLikedIndex, 1);\n return oldLikesArr;\n });\n setLikeCount(curr => curr - 1);\n } else {\n setLikes(oldLikes => [user, ...oldLikes]);\n setLikeCount(curr => curr + 1);\n }\n setLiked(curr => !curr);\n }}\n onLikeCountInteraction={getInitialLikes}\n onLoadMoreLikes={!additionalLikeAdded ? generateNewLike : undefined}\n likesLoading={likesLoading}\n onUserClick={(_, clickEvent) => {\n if (clickEvent) {\n setPopoverTarget(clickEvent.target as Element);\n setPopoverOpen(curr => !curr);\n }\n }}\n />\n {popoverTarget && (\n <Popover show={popoverOpen} target={popoverTarget} placement='bottom' portal>\n <CardContent>{fullname}</CardContent>\n </Popover>\n )}\n </>\n );\n\n return renderFeed ? (\n <Feed\n title='Pulse'\n onMentionClick={onMentionClick}\n interactionRenderers={[MentionButtonConfig, HashtagButtonConfig]}\n userInfo={{ username: 'demo_user', fullname: 'Demo User' }}\n posts={[reply]}\n />\n ) : (\n reply\n );\n};\n\nexport const FeedReplyWithPresence: Story = () => {\n return <FeedReplyDemo userStatus='active' />;\n};\n"]}
1	+ {"version":3,"file":"FeedReply.stories.jsx","sourceRoot":"","sources":["../../../src/social/Feed/FeedReply.stories.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Meta, Story } from '@storybook/react';\nimport { useState, useCallback } from 'react';\n\nimport { Avatar, CardContent, Popover, SummaryListItem, useUID } from '@pega/cosmos-react-core';\nimport {\n Feed,\n FeedReply,\n FeedReplyProps,\n HashtagButtonConfig,\n MentionButtonConfig\n} from '@pega/cosmos-react-social';\nimport { Glimpse, GlimpseProps } from '@pega/cosmos-react-work';\n\nimport { generatedLikes, userMentions } from './Feed.mocks';\n\nexport default {\n title: 'Social/Feed/FeedReply',\n component: FeedReply\n} as Meta;\n\ninterface FeedReplyDemoProps {\n fullname?: FeedReplyProps['info']['fullname'];\n username?: FeedReplyProps['info']['username'];\n content?: FeedReplyProps['info']['content'];\n attachments?: FeedReplyProps['info']['attachments'];\n postTimestamp?: FeedReplyProps['info']['postTimestamp'];\n userStatus?: FeedReplyProps['info']['userStatus'];\n renderFeed?: boolean;\n}\n\nexport const FeedReplyDemo: Story<FeedReplyDemoProps> = ({\n fullname = 'Demo User',\n username = 'demo_user',\n content,\n attachments,\n postTimestamp = new Date(2022, 0, 1),\n userStatus,\n renderFeed = true\n}: FeedReplyDemoProps) => {\n const defaultContent = attachments\n ? ''\n : \"This reply mentions <pega-mention id='deans' text='Seth DeAngelo' type='user'/> and also contains a tag! <pega-tag tag='cosmos'/>\";\n\n const key = useUID();\n const [likes, setLikes] = useState<SummaryListItem[]>([]);\n const [liked, setLiked] = useState(false);\n const [likeCount, setLikeCount] = useState(renderFeed ? generatedLikes.length : 0);\n const [replyContent, setReplyContent] = useState(content \|\| defaultContent);\n const [edited, setEdited] = useState(false);\n const [editTimestamp, setEditTimestamp] = useState(new Date());\n const [popoverOpen, setPopoverOpen] = useState(false);\n const [popoverTarget, setPopoverTarget] = useState<Element>();\n const [additionalLikeAdded, setAdditionalLikeAdded] = useState(false);\n\n const getInitialLikes = () => {\n if (likes.length) return;\n\n setLikes(renderFeed ? generatedLikes : []);\n };\n\n const [likesLoading, setLikesLoading] = useState(false);\n\n const generateNewLike = useCallback(() => {\n if (!likesLoading) {\n setLikesLoading(true);\n setTimeout(() => {\n setLikesLoading(false);\n setLikes(oldLikes => [\n ...oldLikes,\n {\n primary: 'Generated Like',\n secondary: ['This like was added after the onLoadMore callback triggered'],\n visual: <Avatar size='l' name='Generated Like' />,\n id: 'generatedLike'\n }\n ]);\n setAdditionalLikeAdded(true);\n }, 1000);\n }\n }, [likesLoading]);\n\n const onMentionClick = ({\n id,\n type,\n target,\n closeGlimpse\n }: { id: string; type: string; closeGlimpse?: () => void } & Partial<\n Pick<GlimpseProps, 'target'>\n >) => {\n if (type === 'user') {\n const user = userMentions.find(mention => mention.id === id);\n if (user && target && closeGlimpse) {\n const { primary, secondary, visual, ...restUser } = user;\n\n return (\n <Glimpse\n {...restUser}\n heading={{\n primary,\n secondary: Array.isArray(secondary) ? secondary.join(', ') : secondary,\n visual\n }}\n target={target}\n onDismiss={() => {\n closeGlimpse();\n }}\n placement='right'\n />\n );\n }\n }\n };\n\n const reply = (\n <>\n <FeedReply\n id={key}\n key={key}\n info={{\n postTimestamp,\n content: replyContent,\n attachments,\n username,\n fullname,\n fullnameLabel: `${fullname}'s Profile`,\n liked,\n userStatus\n }}\n interactionInfo={{\n likes,\n likeCount: likeCount >= 10 ? likeCount + 1 : likeCount,\n likeLabel: 'Like',\n commentLabel: 'Comment'\n }}\n maxContentHeight={40}\n menuItems={[{ primary: 'Custom action', id: 'custom', onClick: () => {} }]}\n onEditSubmit={({ value }) => {\n setReplyContent(value);\n setEdited(true);\n setEditTimestamp(new Date());\n }}\n edited={edited}\n editTimestamp={editTimestamp}\n onCommentClick={() => {}}\n onLikeClick={({ user }) => {\n const userLikedIndex = likes.findIndex(x => x.id === user.id);\n if (userLikedIndex !== -1) {\n setLikes(oldLikes => {\n const oldLikesArr = [...oldLikes];\n oldLikesArr.splice(userLikedIndex, 1);\n return oldLikesArr;\n });\n setLikeCount(curr => curr - 1);\n } else {\n setLikes(oldLikes => [user, ...oldLikes]);\n setLikeCount(curr => curr + 1);\n }\n setLiked(curr => !curr);\n }}\n onLikeCountInteraction={getInitialLikes}\n onLoadMoreLikes={!additionalLikeAdded ? generateNewLike : undefined}\n likesLoading={likesLoading}\n onUserClick={(_, clickEvent) => {\n if (clickEvent) {\n setPopoverTarget(clickEvent.target as Element);\n setPopoverOpen(curr => !curr);\n }\n }}\n />\n {popoverTarget && (\n <Popover show={popoverOpen} target={popoverTarget} placement='bottom' portal>\n <CardContent>{fullname}</CardContent>\n </Popover>\n )}\n </>\n );\n\n return renderFeed ? (\n <Feed\n title='Pulse'\n onMentionClick={onMentionClick}\n interactionRenderers={[MentionButtonConfig, HashtagButtonConfig]}\n userInfo={{ username: 'demo_user', fullname: 'Demo User' }}\n posts={[reply]}\n />\n ) : (\n reply\n );\n};\n\nexport const FeedReplyWithPresence: Story = () => {\n return <FeedReplyDemo userStatus='active' />;\n};\n"]}

package/jsx/social/Feed/FeedReplyInput.stories.d.ts CHANGED Viewed

@@ -1,6 +1,6 @@
 import { Meta, Story } from '@storybook/react';
 import { FeedReplyInputProps } from '@pega/cosmos-react-social';
-declare const _default: Meta<import("@storybook/react").Args>;
+declare const _default: Meta;
 export default _default;
 interface FeedReplyInputDemoProps {
     onSubmit?: FeedReplyInputProps['onSubmit'];

package/jsx/social/Feed/FeedReplyInput.stories.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"FeedReplyInput.stories.d.ts","sourceRoot":"","sources":["../../../src/social/Feed/FeedReplyInput.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,kBAAkB,CAAC;AAI/C,OAAO,EAGL,mBAAmB,EAEpB,MAAM,2BAA2B,CAAC;;~~AAKnC~~,wBAGU;AAEV,UAAU,uBAAuB;IAC/B,QAAQ,CAAC,EAAE,mBAAmB,CAAC,UAAU,CAAC,CAAC;IAC3C,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB;AAED,eAAO,MAAM,kBAAkB,EAAE,KAAK,CAAC,uBAAuB,~~CA0F7D~~,CAAC"}
1	+ {"version":3,"file":"FeedReplyInput.stories.d.ts","sourceRoot":"","sources":["../../../src/social/Feed/FeedReplyInput.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,kBAAkB,CAAC;AAI/C,OAAO,EAGL,mBAAmB,EAEpB,MAAM,2BAA2B,CAAC;;AAInC,wBAGU;AAEV,UAAU,uBAAuB;IAC/B,QAAQ,CAAC,EAAE,mBAAmB,CAAC,UAAU,CAAC,CAAC;IAC3C,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB;AAED,eAAO,MAAM,kBAAkB,EAAE,KAAK,CAAC,uBAAuB,CA2F7D,CAAC"}

package/jsx/social/Feed/FeedReplyInput.stories.jsx CHANGED Viewed

@@ -14,7 +14,7 @@ export const FeedReplyInputDemo = ({ onSubmit, renderFeed = true }) => {
         if (type === 'mention') {
             const availableMentions = mentionType === 'case' ? caseMentions : userMentions;
             const mentions = availableMentions
-                .filter((user) => {
+                .filter(user => {
                 const names = user.primary.toLowerCase().split(' ');
                 const searchWords = search.toLowerCase().split(' ');
                 return !!searchWords.every((word) => names.find((name) => name.startsWith(word)));
@@ -23,7 +23,7 @@ export const FeedReplyInputDemo = ({ onSubmit, renderFeed = true }) => {
                 return {
                     id,
                     primary,
-                    secondary,
+                    secondary: secondary !== undefined && !Array.isArray(secondary) ? [secondary] : secondary,
                     visual,
                     href
                 };

package/jsx/social/Feed/FeedReplyInput.stories.jsx.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"FeedReplyInput.stories.jsx","sourceRoot":"","sources":["../../../src/social/Feed/FeedReplyInput.stories.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAEjC,OAAO,EAAiB,MAAM,EAAE,MAAM,yBAAyB,CAAC;AAChE,OAAO,EACL,IAAI,EACJ,cAAc,EAGf,MAAM,2BAA2B,CAAC;~~AAGnC~~,OAAO,EAAE,YAAY,EAAE,YAAY,EAAE,MAAM,cAAc,CAAC;AAE1D,eAAe;IACb,KAAK,EAAE,4BAA4B;IACnC,SAAS,EAAE,cAAc;CAClB,CAAC;AAOV,MAAM,CAAC,MAAM,kBAAkB,GAAmC,CAAC,EACjE,QAAQ,EACR,UAAU,GAAG,IAAI,EACO,EAAE,EAAE;IAC5B,MAAM,GAAG,GAAG,MAAM,EAAE,CAAC;IACrB,MAAM,CAAC,aAAa,EAAE,gBAAgB,CAAC,GAAG,QAAQ,CAAkB,EAAE,CAAC,CAAC;IACxE,MAAM,CAAC,WAAW,EAAE,cAAc,CAAC,GAAG,QAAQ,CAAkB,EAAE,CAAC,CAAC;IAEpE,MAAM,QAAQ,GAAG,CAAC,EAChB,IAAI,EACJ,MAAM,EACN,WAAW,EAKZ,EAAE,EAAE;QACH,IAAI,IAAI,KAAK,SAAS,EAAE;YACtB,MAAM,iBAAiB,GAAG,WAAW,KAAK,MAAM,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,YAAY,CAAC;YAE/E,MAAM,QAAQ,GAAoB,iBAAiB;iBAChD,MAAM,CAAC,CAAC,~~IAAkB,~~EAAE~~,EAAE~~;~~gBAC7B~~,MAAM,KAAK,GAAG,IAAI,CAAC,OAAO,CAAC,WAAW,EAAE,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC;gBACpD,MAAM,WAAW,GAAG,MAAM,CAAC,WAAW,EAAE,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC;gBACpD,OAAO,CAAC,CAAC,WAAW,CAAC,KAAK,CAAC,CAAC,IAAY,EAAE,EAAE,CAC1C,KAAK,CAAC,IAAI,CAAC,CAAC,IAAY,EAAE,EAAE,CAAC,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,CAAC,CACpD,CAAC;YACJ,CAAC,CAAC;iBACD,GAAG,CAAC,CAAC,EAAE,EAAE,EAAE,OAAO,EAAE,SAAS,EAAE,MAAM,EAAE,IAAI,EAAE,EAAE,EAAE;gBAChD,OAAO;oBACL,EAAE;oBACF,OAAO;oBACP,SAAS;~~oBACT~~,MAAM;oBACN,IAAI;iBACL,CAAC;YACJ,CAAC,CAAC,CAAC;YACL,gBAAgB,CAAC,QAAQ,CAAC,CAAC;SAC5B;aAAM;YACL,gBAAgB,CACd,CAAC,QAAQ,EAAE,SAAS,EAAE,MAAM,CAAC;iBAC1B,MAAM,CAAC,GAAG,CAAC,EAAE;gBACZ,OAAO,GAAG,CAAC,WAAW,EAAE,CAAC,QAAQ,CAAC,MAAM,CAAC,WAAW,EAAE,CAAC,CAAC;YAC1D,CAAC,CAAC;iBACD,GAAG,CAAC,GAAG,CAAC,EAAE,CAAC,CAAC,EAAE,EAAE,EAAE,GAAG,EAAE,OAAO,EAAE,GAAG,EAAE,CAAC,CAAC,CAC3C,CAAC;SACH;IACH,CAAC,CAAC;IAEF,MAAM,YAAY,GAAG,CAAC,KAAsB,EAAE,EAAE;QAC9C,KAAK,CAAC,OAAO,CAAC,IAAI,CAAC,EAAE;YACnB,IAAI,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,KAAK,OAAO;gBAAE,IAAI,CAAC,SAAS,GAAG,GAAG,CAAC,eAAe,CAAC,IAAI,CAAC,CAAC;YAEpF,IAAI,CAAC,QAAQ,GAAG,GAAG,EAAE;gBACnB,cAAc,CAAC,OAAO,CAAC,EAAE;oBACvB,OAAO,OAAO,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,IAAI,KAAK,IAAI,CAAC,IAAI,CAAC,CAAC;gBACnD,CAAC,CAAC,CAAC;YACL,CAAC,CAAC;QACJ,CAAC,CAAC,CAAC;QAEH,cAAc,CAAC,KAAK,CAAC,CAAC;IACxB,CAAC,CAAC;IAEF,MAAM,UAAU,GAAG,CACjB,CAAC,cAAc,CACb,EAAE,CAAC,CAAC,GAAG,CAAC,CACR,YAAY,CAAC,cAAc,CAC3B,WAAW,CAAC,CAAC,WAAW,CAAC,CACzB,WAAW,CAAC,eAAe,CAC3B,YAAY,CAAC,CAAC,YAAY,CAAC,CAC3B,QAAQ,CAAC,CAAC,UAAU,CAAC,EAAE;YACrB,QAAQ,EAAE,CAAC,UAAU,CAAC,CAAC;YACvB,cAAc,CAAC,EAAE,CAAC,CAAC;YACnB,UAAU,CAAC,KAAK,EAAE,CAAC;QACrB,CAAC,CAAC,EACF,CACH,CAAC;IAEF,OAAO,UAAU,CAAC,CAAC,CAAC,CAClB,CAAC,IAAI,CACH,KAAK,CAAC,OAAO,CACb,WAAW,CAAC,CAAC,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC,CAC9B,iBAAiB,CAAC,CAAC,QAAQ,CAAC,CAC5B,aAAa,CAAC,CAAC,aAAa,CAAC,CAC7B,QAAQ,CAAC,CAAC,EAAE,QAAQ,EAAE,WAAW,EAAE,QAAQ,EAAE,WAAW,EAAE,CAAC,CAC3D,KAAK,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,EACpB,CACH,CAAC,CAAC,CAAC,CACF,UAAU,CACX,CAAC;AACJ,CAAC,CAAC","sourcesContent":["import { Meta, Story } from '@storybook/react';\nimport { useState } from 'react';\n\nimport { MenuItemProps, useUID } from '@pega/cosmos-react-core';\nimport {\n Feed,\n FeedReplyInput,\n FeedReplyInputProps,\n AttachedFiles\n} from '@pega/cosmos-react-social';\~~nimport { GlimpseProps } from '@pega/cosmos-react-work';\~~n\nimport { caseMentions, userMentions } from './Feed.mocks';\n\nexport default {\n title: 'Social/Feed/FeedReplyInput',\n component: FeedReplyInput\n} as Meta;\n\ninterface FeedReplyInputDemoProps {\n onSubmit?: FeedReplyInputProps['onSubmit'];\n renderFeed?: boolean;\n}\n\nexport const FeedReplyInputDemo: Story<FeedReplyInputDemoProps> = ({\n onSubmit,\n renderFeed = true\n}: FeedReplyInputDemoProps) => {\n const key = useUID();\n const [searchResults, setSearchResults] = useState<MenuItemProps[]>([]);\n const [attachments, setAttachments] = useState<AttachedFiles[]>([]);\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 file.onDelete = () => {\n setAttachments(current => {\n return current.filter(x => x.name !== file.name);\n });\n };\n });\n\n setAttachments(files);\n };\n\n const replyInput = (\n <FeedReplyInput\n id={key}\n commentLabel='Send Comment'\n attachments={attachments}\n placeholder='Add a comment'\n onFilesAdded={onFilesAdded}\n onSubmit={replyEvent => {\n onSubmit?.(replyEvent);\n setAttachments([]);\n replyEvent.clear();\n }}\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 posts={[replyInput]}\n />\n ) : (\n replyInput\n );\n};\n"]}
1	+ {"version":3,"file":"FeedReplyInput.stories.jsx","sourceRoot":"","sources":["../../../src/social/Feed/FeedReplyInput.stories.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAEjC,OAAO,EAAiB,MAAM,EAAE,MAAM,yBAAyB,CAAC;AAChE,OAAO,EACL,IAAI,EACJ,cAAc,EAGf,MAAM,2BAA2B,CAAC;AAEnC,OAAO,EAAE,YAAY,EAAE,YAAY,EAAE,MAAM,cAAc,CAAC;AAE1D,eAAe;IACb,KAAK,EAAE,4BAA4B;IACnC,SAAS,EAAE,cAAc;CAClB,CAAC;AAOV,MAAM,CAAC,MAAM,kBAAkB,GAAmC,CAAC,EACjE,QAAQ,EACR,UAAU,GAAG,IAAI,EACO,EAAE,EAAE;IAC5B,MAAM,GAAG,GAAG,MAAM,EAAE,CAAC;IACrB,MAAM,CAAC,aAAa,EAAE,gBAAgB,CAAC,GAAG,QAAQ,CAAkB,EAAE,CAAC,CAAC;IACxE,MAAM,CAAC,WAAW,EAAE,cAAc,CAAC,GAAG,QAAQ,CAAkB,EAAE,CAAC,CAAC;IAEpE,MAAM,QAAQ,GAAG,CAAC,EAChB,IAAI,EACJ,MAAM,EACN,WAAW,EAKZ,EAAE,EAAE;QACH,IAAI,IAAI,KAAK,SAAS,EAAE;YACtB,MAAM,iBAAiB,GAAG,WAAW,KAAK,MAAM,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,YAAY,CAAC;YAE/E,MAAM,QAAQ,GAAoB,iBAAiB;iBAChD,MAAM,CAAC,IAAI,CAAC,EAAE;gBACb,MAAM,KAAK,GAAG,IAAI,CAAC,OAAO,CAAC,WAAW,EAAE,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC;gBACpD,MAAM,WAAW,GAAG,MAAM,CAAC,WAAW,EAAE,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC;gBACpD,OAAO,CAAC,CAAC,WAAW,CAAC,KAAK,CAAC,CAAC,IAAY,EAAE,EAAE,CAC1C,KAAK,CAAC,IAAI,CAAC,CAAC,IAAY,EAAE,EAAE,CAAC,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,CAAC,CACpD,CAAC;YACJ,CAAC,CAAC;iBACD,GAAG,CAAC,CAAC,EAAE,EAAE,EAAE,OAAO,EAAE,SAAS,EAAE,MAAM,EAAE,IAAI,EAAE,EAAE,EAAE;gBAChD,OAAO;oBACL,EAAE;oBACF,OAAO;oBACP,SAAS,EACP,SAAS,KAAK,SAAS,IAAI,CAAC,KAAK,CAAC,OAAO,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC,SAAS;oBAChF,MAAM;oBACN,IAAI;iBACL,CAAC;YACJ,CAAC,CAAC,CAAC;YACL,gBAAgB,CAAC,QAAQ,CAAC,CAAC;SAC5B;aAAM;YACL,gBAAgB,CACd,CAAC,QAAQ,EAAE,SAAS,EAAE,MAAM,CAAC;iBAC1B,MAAM,CAAC,GAAG,CAAC,EAAE;gBACZ,OAAO,GAAG,CAAC,WAAW,EAAE,CAAC,QAAQ,CAAC,MAAM,CAAC,WAAW,EAAE,CAAC,CAAC;YAC1D,CAAC,CAAC;iBACD,GAAG,CAAC,GAAG,CAAC,EAAE,CAAC,CAAC,EAAE,EAAE,EAAE,GAAG,EAAE,OAAO,EAAE,GAAG,EAAE,CAAC,CAAC,CAC3C,CAAC;SACH;IACH,CAAC,CAAC;IAEF,MAAM,YAAY,GAAG,CAAC,KAAsB,EAAE,EAAE;QAC9C,KAAK,CAAC,OAAO,CAAC,IAAI,CAAC,EAAE;YACnB,IAAI,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,KAAK,OAAO;gBAAE,IAAI,CAAC,SAAS,GAAG,GAAG,CAAC,eAAe,CAAC,IAAI,CAAC,CAAC;YAEpF,IAAI,CAAC,QAAQ,GAAG,GAAG,EAAE;gBACnB,cAAc,CAAC,OAAO,CAAC,EAAE;oBACvB,OAAO,OAAO,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,IAAI,KAAK,IAAI,CAAC,IAAI,CAAC,CAAC;gBACnD,CAAC,CAAC,CAAC;YACL,CAAC,CAAC;QACJ,CAAC,CAAC,CAAC;QAEH,cAAc,CAAC,KAAK,CAAC,CAAC;IACxB,CAAC,CAAC;IAEF,MAAM,UAAU,GAAG,CACjB,CAAC,cAAc,CACb,EAAE,CAAC,CAAC,GAAG,CAAC,CACR,YAAY,CAAC,cAAc,CAC3B,WAAW,CAAC,CAAC,WAAW,CAAC,CACzB,WAAW,CAAC,eAAe,CAC3B,YAAY,CAAC,CAAC,YAAY,CAAC,CAC3B,QAAQ,CAAC,CAAC,UAAU,CAAC,EAAE;YACrB,QAAQ,EAAE,CAAC,UAAU,CAAC,CAAC;YACvB,cAAc,CAAC,EAAE,CAAC,CAAC;YACnB,UAAU,CAAC,KAAK,EAAE,CAAC;QACrB,CAAC,CAAC,EACF,CACH,CAAC;IAEF,OAAO,UAAU,CAAC,CAAC,CAAC,CAClB,CAAC,IAAI,CACH,KAAK,CAAC,OAAO,CACb,WAAW,CAAC,CAAC,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC,CAC9B,iBAAiB,CAAC,CAAC,QAAQ,CAAC,CAC5B,aAAa,CAAC,CAAC,aAAa,CAAC,CAC7B,QAAQ,CAAC,CAAC,EAAE,QAAQ,EAAE,WAAW,EAAE,QAAQ,EAAE,WAAW,EAAE,CAAC,CAC3D,KAAK,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,EACpB,CACH,CAAC,CAAC,CAAC,CACF,UAAU,CACX,CAAC;AACJ,CAAC,CAAC","sourcesContent":["import { Meta, Story } from '@storybook/react';\nimport { useState } from 'react';\n\nimport { MenuItemProps, useUID } from '@pega/cosmos-react-core';\nimport {\n Feed,\n FeedReplyInput,\n FeedReplyInputProps,\n AttachedFiles\n} from '@pega/cosmos-react-social';\n\nimport { caseMentions, userMentions } from './Feed.mocks';\n\nexport default {\n title: 'Social/Feed/FeedReplyInput',\n component: FeedReplyInput\n} as Meta;\n\ninterface FeedReplyInputDemoProps {\n onSubmit?: FeedReplyInputProps['onSubmit'];\n renderFeed?: boolean;\n}\n\nexport const FeedReplyInputDemo: Story<FeedReplyInputDemoProps> = ({\n onSubmit,\n renderFeed = true\n}: FeedReplyInputDemoProps) => {\n const key = useUID();\n const [searchResults, setSearchResults] = useState<MenuItemProps[]>([]);\n const [attachments, setAttachments] = useState<AttachedFiles[]>([]);\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 => {\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 secondary !== undefined && !Array.isArray(secondary) ? [secondary] : 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 file.onDelete = () => {\n setAttachments(current => {\n return current.filter(x => x.name !== file.name);\n });\n };\n });\n\n setAttachments(files);\n };\n\n const replyInput = (\n <FeedReplyInput\n id={key}\n commentLabel='Send Comment'\n attachments={attachments}\n placeholder='Add a comment'\n onFilesAdded={onFilesAdded}\n onSubmit={replyEvent => {\n onSubmit?.(replyEvent);\n setAttachments([]);\n replyEvent.clear();\n }}\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 posts={[replyInput]}\n />\n ) : (\n replyInput\n );\n};\n"]}

package/jsx/tools/Clipboard/Clipboard.mocks.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Clipboard.mocks.d.ts","sourceRoot":"","sources":["../../../src/tools/Clipboard/Clipboard.mocks.tsx"],"names":[],"mappings":"~~AAAA~~,OAAO,EAAE,iBAAiB,EAAE,MAAM,0BAA0B,CAAC;AAC7D,OAAO,EAAyB,iBAAiB,EAAE,MAAM,yBAAyB,CAAC;AAEnF,eAAO,MAAM,QAAQ,EAAE,iBAAiB,CAAC,OAAO,CAsB/C,CAAC;AAEF,eAAO,MAAM,UAAU,EAAE,iBAAiB,CAAC,OAAO,CAajD,CAAC;~~AAUF~~,eAAO,MAAM,cAAc,EAAE,CAC3B,EAAE,EAAE,MAAM,EACV,EAAE,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,KACtB,iBAAiB,GAAG,SA0CxB,CAAC"}
1	+ {"version":3,"file":"Clipboard.mocks.d.ts","sourceRoot":"","sources":["../../../src/tools/Clipboard/Clipboard.mocks.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,iBAAiB,EAAE,MAAM,0BAA0B,CAAC;AAC7D,OAAO,EAAyB,iBAAiB,EAAE,MAAM,yBAAyB,CAAC;AAEnF,eAAO,MAAM,QAAQ,EAAE,iBAAiB,CAAC,OAAO,CAsB/C,CAAC;AAEF,eAAO,MAAM,UAAU,EAAE,iBAAiB,CAAC,OAAO,CAajD,CAAC;AASF,eAAO,MAAM,cAAc,EAAE,CAC3B,EAAE,EAAE,MAAM,EACV,EAAE,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,KACtB,iBAAiB,GAAG,SA0CxB,CAAC"}

package/jsx/tools/Clipboard/Clipboard.mocks.jsx.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Clipboard.mocks.jsx","sourceRoot":"","sources":["../../../src/tools/Clipboard/Clipboard.mocks.tsx"],"names":[],"mappings":"~~AACA~~,OAAO,EAAE,OAAO,EAAE,MAAM,EAAE,IAAI,EAAqB,MAAM,yBAAyB,CAAC;AAEnF,MAAM,CAAC,MAAM,QAAQ,GAA+B;IAClD;QACE,EAAE,EAAE,UAAU;QACd,KAAK,EAAE,YAAY;QACnB,KAAK,EAAE;YACL;gBACE,EAAE,EAAE,qBAAqB;gBACzB,KAAK,EAAE,qBAAqB;gBAC5B,KAAK,EAAE,EAAE;aACV;YACD;gBACE,EAAE,EAAE,eAAe;gBACnB,KAAK,EAAE,gBAAgB;gBACvB,KAAK,EAAE,EAAE;aACV;SACF;KACF;IACD;QACE,EAAE,EAAE,YAAY;QAChB,KAAK,EAAE,cAAc;QACrB,KAAK,EAAE,EAAE;KACV;CACF,CAAC;AAEF,MAAM,CAAC,MAAM,UAAU,GAA+B;IACpD;QACE,EAAE,EAAE,gBAAgB;QACpB,KAAK,EAAE,gBAAgB;KACxB;IACD;QACE,EAAE,EAAE,yBAAyB;QAC7B,KAAK,EAAE,yBAAyB;KACjC;IACD;QACE,EAAE,EAAE,cAAc;QAClB,KAAK,EAAE,cAAc;KACtB;CACF,CAAC;AAEF,MAAM,WAAW,GAAG;IAClB,EAAE,EAAE,EAAE,QAAQ,EAAE,IAAI,EAAE,kBAAkB,EAAE,KAAK,EAAE,yBAAyB,EAAE;IAC5E,EAAE,EAAE,EAAE,QAAQ,EAAE,IAAI,EAAE,WAAW,EAAE,KAAK,EAAE,YAAY,EAAE;IACxD,EAAE,EAAE,EAAE,QAAQ,EAAE,IAAI,EAAE,YAAY,EAAE,KAAK,EAAE,0BAA0B,EAAE;IACvE,EAAE,EAAE,EAAE,QAAQ,EAAE,IAAI,EAAE,UAAU,EAAE,KAAK,EAAE,qCAAqC,EAAE;CACjF,CAAC;~~AAGF~~,MAAM,CAAC,MAAM,cAAc,GAGU,CAAC,EAAE,EAAE,EAAE,EAAE,EAAE;IAC9C,MAAM,YAAY,GAAG;QACnB,EAAE,EAAE,EAAE,gBAAgB,EAAE,IAAI,EAAE,gBAAgB,EAAE,OAAO,EAAE,EAAE,EAAE;QAC7D,EAAE,EAAE,EAAE,yBAAyB,EAAE,IAAI,EAAE,yBAAyB,EAAE,OAAO,EAAE,EAAE,EAAE;QAC/E,EAAE,EAAE,EAAE,cAAc,EAAE,IAAI,EAAE,cAAc,EAAE,OAAO,EAAE,EAAE,EAAE;KAC1D,CAAC;IAEF,MAAM,QAAQ,GAAG;QACf,OAAO,EAAE,EAAE;QACX,SAAS,EAAE;YACT,EAAE,EAAE,EAAE,GAAG,EAAE,IAAI,EAAE,IAAI,EAAE,KAAK,EAAE,cAAc,EAAE;YAC9C,EAAE,EAAE,EAAE,GAAG,EAAE,IAAI,EAAE,WAAW,EAAE,KAAK,EAAE,OAAO,EAAE;YAC9C;gBACE,EAAE,EAAE,GAAG;gBACP,IAAI,EAAE,OAAO;gBACb,KAAK,EAAE,sCAAsC;aAC9C;YACD,EAAE,EAAE,EAAE,GAAG,EAAE,IAAI,EAAE,aAAa,EAAE,KAAK,EAAE,UAAU,EAAE;SACpD;QACD,OAAO,EAAE,CACP,CAAC,IAAI,CAAC,SAAS,CACb;QAAA,CAAC,MAAM,CAAC,UAAU,CAAC,CAAC,GAAG,EAAE,mBAAmB,CAAC,CAAC,OAAO,CAAC,WAAW,CAC/D;;QACF,EAAE,MAAM,CACR;QAAA,CAAC,MAAM,CAAC,UAAU,CAAC,CAAC,GAAG,EAAE,iBAAiB,CAAC,CAAC,OAAO,CAAC,SAAS,CAC3D;;QACF,EAAE,MAAM,CACR;QAAA,CAAC,OAAO,CACN,MAAM,CAAC,CAAC,CAAC,CAAC,CACV,KAAK,CAAC,CAAC;gBACL;oBACE,EAAE,EAAE,GAAG;oBACP,IAAI,EAAE,oBAAoB;iBAC3B;aACF,CAAC,EAEN;MAAA,EAAE,IAAI,CAAC,CACR;QACD,MAAM,EAAE,EAAE,KAAK,qBAAqB,CAAC,CAAC,CAAC,CAAC,GAAG,WAAW,EAAE,GAAG,YAAY,CAAC,CAAC,CAAC,CAAC,WAAW;KACvF,CAAC;IAEF,OAAO,EAAE,KAAK,YAAY,IAAI,EAAE,KAAK,UAAU,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,QAAQ,CAAC;AACzE,CAAC,CAAC","sourcesContent":["~~import~~ { FieldSummaryProps } from '@pega/cosmos-react-tools';\nimport { Actions, Button, Flex, StandardTreeProps } from '@pega/cosmos-react-core';\n\nexport const allNodes: StandardTreeProps['nodes'] = [\n {\n id: 'dataPage',\n label: 'Data Pages',\n nodes: [\n {\n id: 'D_pzPreferenceStore',\n label: 'D_pzPreferenceStore',\n nodes: []\n },\n {\n id: 'D_creditScore',\n label: 'D_Credit Score',\n nodes: []\n }\n ]\n },\n {\n id: 'systemPage',\n label: 'System Pages',\n nodes: []\n }\n];\n\nexport const childNodes: StandardTreeProps['nodes'] = [\n {\n id: 'pxDPParameters',\n label: 'pxDPParameters'\n },\n {\n id: 'pyDevicePreviewSettings',\n label: 'pyDevicePreviewSettings'\n },\n {\n id: 'pySourcePage',\n label: 'pySourcePage'\n }\n];\n\nconst primaryData = [\n { id: 'field1', name: 'pxCommitDateTime', value: '20220303T121437.913 GMT' },\n { id: 'field2', name: 'pxInsName', value: 'John.smith' },\n { id: 'field3', name: 'pxObjClass', value: 'Data-Preference-Operator' },\n { id: 'field4', name: 'pzInsKey', value: 'DATA-PREFERENCE-OPERATOR JOHN SMITH' }\n];\n\~~n// cSpell:words XPTI\~~nexport const getDetailsData: (\n id: string,\n cb?: (id: string) => void\n) => FieldSummaryProps \| undefined = (id, cb) => {\n const embeddedData = [\n { id: 'pxDPParameters', name: 'pxDPParameters', onClick: cb },\n { id: 'pyDevicePreviewSettings', name: 'pyDevicePreviewSettings', onClick: cb },\n { id: 'pySourcePage', name: 'pySourcePage', onClick: cb }\n ];\n\n const response = {\n primary: id,\n secondary: [\n { id: '1', name: 'ID', value: 'InterestRate' },\n { id: '2', name: 'Rule type', value: 'Field' },\n {\n id: '3',\n name: 'Scope',\n value: 'O1XPTI-CCompass-Work-MortgageRequest'\n },\n { id: '4', name: 'Application', value: 'XCompass' }\n ],\n actions: (\n <Flex container>\n <Button aria-label={`${id}-Secondary action`} variant='secondary'>\n Secondary action\n </Button>\n <Button aria-label={`${id}-Primary action`} variant='primary'>\n Primary action\n </Button>\n <Actions\n menuAt={1}\n items={[\n {\n id: '1',\n text: 'Secondary action 2'\n }\n ]}\n />\n </Flex>\n ),\n fields: id === 'D_pzPreferenceStore' ? [...primaryData, ...embeddedData] : primaryData\n };\n\n return id === 'systemPage' \|\| id === 'dataPage' ? undefined : response;\n};\n"]}
1	+ {"version":3,"file":"Clipboard.mocks.jsx","sourceRoot":"","sources":["../../../src/tools/Clipboard/Clipboard.mocks.tsx"],"names":[],"mappings":"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","sourcesContent":["// cspell:words O1XPTI\nimport { FieldSummaryProps } from '@pega/cosmos-react-tools';\nimport { Actions, Button, Flex, StandardTreeProps } from '@pega/cosmos-react-core';\n\nexport const allNodes: StandardTreeProps['nodes'] = [\n {\n id: 'dataPage',\n label: 'Data Pages',\n nodes: [\n {\n id: 'D_pzPreferenceStore',\n label: 'D_pzPreferenceStore',\n nodes: []\n },\n {\n id: 'D_creditScore',\n label: 'D_Credit Score',\n nodes: []\n }\n ]\n },\n {\n id: 'systemPage',\n label: 'System Pages',\n nodes: []\n }\n];\n\nexport const childNodes: StandardTreeProps['nodes'] = [\n {\n id: 'pxDPParameters',\n label: 'pxDPParameters'\n },\n {\n id: 'pyDevicePreviewSettings',\n label: 'pyDevicePreviewSettings'\n },\n {\n id: 'pySourcePage',\n label: 'pySourcePage'\n }\n];\n\nconst primaryData = [\n { id: 'field1', name: 'pxCommitDateTime', value: '20220303T121437.913 GMT' },\n { id: 'field2', name: 'pxInsName', value: 'John.smith' },\n { id: 'field3', name: 'pxObjClass', value: 'Data-Preference-Operator' },\n { id: 'field4', name: 'pzInsKey', value: 'DATA-PREFERENCE-OPERATOR JOHN SMITH' }\n];\n\nexport const getDetailsData: (\n id: string,\n cb?: (id: string) => void\n) => FieldSummaryProps \| undefined = (id, cb) => {\n const embeddedData = [\n { id: 'pxDPParameters', name: 'pxDPParameters', onClick: cb },\n { id: 'pyDevicePreviewSettings', name: 'pyDevicePreviewSettings', onClick: cb },\n { id: 'pySourcePage', name: 'pySourcePage', onClick: cb }\n ];\n\n const response = {\n primary: id,\n secondary: [\n { id: '1', name: 'ID', value: 'InterestRate' },\n { id: '2', name: 'Rule type', value: 'Field' },\n {\n id: '3',\n name: 'Scope',\n value: 'O1XPTI-CCompass-Work-MortgageRequest'\n },\n { id: '4', name: 'Application', value: 'XCompass' }\n ],\n actions: (\n <Flex container>\n <Button aria-label={`${id}-Secondary action`} variant='secondary'>\n Secondary action\n </Button>\n <Button aria-label={`${id}-Primary action`} variant='primary'>\n Primary action\n </Button>\n <Actions\n menuAt={1}\n items={[\n {\n id: '1',\n text: 'Secondary action 2'\n }\n ]}\n />\n </Flex>\n ),\n fields: id === 'D_pzPreferenceStore' ? [...primaryData, ...embeddedData] : primaryData\n };\n\n return id === 'systemPage' \|\| id === 'dataPage' ? undefined : response;\n};\n"]}

package/jsx/tools/Clipboard/Clipboard.stories.d.ts CHANGED Viewed

@@ -1,6 +1,6 @@
 import { Story, Meta } from '@storybook/react';
 import { ClipboardProps } from '@pega/cosmos-react-tools';
-declare const _default: Meta<import("@storybook/react").Args>;
+declare const _default: Meta;
 export default _default;
 export declare const ClipboardViewerDemo: Story<ClipboardProps>;
 //# sourceMappingURL=Clipboard.stories.d.ts.map

package/jsx/tools/Clipboard/Clipboard.stories.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Clipboard.stories.d.ts","sourceRoot":"","sources":["../../../src/tools/Clipboard/Clipboard.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,EAAE,IAAI,EAAE,MAAM,kBAAkB,CAAC;AAG/C,OAAO,EAAa,cAAc,EAAqB,MAAM,0BAA0B,CAAC;;AAKxF,wBAMU;AAEV,eAAO,MAAM,mBAAmB,EAAE,KAAK,CAAC,cAAc,~~CAuFrD~~,CAAC"}
1	+ {"version":3,"file":"Clipboard.stories.d.ts","sourceRoot":"","sources":["../../../src/tools/Clipboard/Clipboard.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,EAAE,IAAI,EAAE,MAAM,kBAAkB,CAAC;AAG/C,OAAO,EAAa,cAAc,EAAqB,MAAM,0BAA0B,CAAC;;AAKxF,wBAMU;AAEV,eAAO,MAAM,mBAAmB,EAAE,KAAK,CAAC,cAAc,CAkFrD,CAAC"}

package/jsx/tools/Clipboard/Clipboard.stories.jsx CHANGED Viewed

@@ -26,15 +26,6 @@ export const ClipboardViewerDemo = () => {
         const response = getDetailsData(id, cb);
         timeouts.push(setTimeout(() => setPageDetails(response), 1300));
     };
-    const updateActiveParentNode = (id) => {
-        setNodes(tree => treeHelpers.mapNode(tree, id, node => {
-            return {
-                ...node,
-                expanded: !node.expanded,
-                loading: node.nodes?.length === 0
-            };
-        }));
-    };
     const loadChildNodes = (id) => {
         timeouts.push(setTimeout(() => {
             setNodes(tree => treeHelpers.mapNode(tree, id, node => node.nodes?.length === 0
@@ -46,12 +37,18 @@ export const ClipboardViewerDemo = () => {
                 : node));
         }, 1000));
     };
+    const onNodeToggle = (nodeId) => {
+        setNodes(tree => treeHelpers.mapNode(tree, nodeId, node => {
+            return {
+                ...node,
+                expanded: !node.expanded,
+                loading: node.nodes?.length === 0
+            };
+        }));
+        loadChildNodes(nodeId);
+    };
     const onNodeClick = (nodeId, e) => {
-        const node = treeHelpers.getNode(nodes, nodeId);
         setCurrentNodeId(nodeId);
-        if (node?.nodes && node?.nodes?.length >= 0) {
-            updateActiveParentNode(nodeId);
-        }
         loadChildNodes(nodeId);
         if (['ArrowRight', 'ArrowLeft'].includes(e.key))
             return;
@@ -63,7 +60,8 @@ export const ClipboardViewerDemo = () => {
     return (<Clipboard navigation={{
             nodes,
             currentNodeId,
-            onNodeClick
+            onNodeClick,
+            onNodeToggle
         }} content={pageDetails} lastUpdated='Last updated: Less than a minute ago'/>);
 };
 //# sourceMappingURL=Clipboard.stories.jsx.map

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

	@@ -1 +1 @@
1	- {"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"]}
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, 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 // 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 onNodeToggle = (nodeId: string) => {\n setNodes(tree =>\n treeHelpers.mapNode(tree, nodeId, node => {\n return {\n ...node,\n expanded: !node.expanded,\n loading: node.nodes?.length === 0\n };\n })\n );\n loadChildNodes(nodeId);\n };\n\n const onNodeClick = (nodeId: string, e: MouseEvent<HTMLElement> \| KeyboardEvent<HTMLElement>) => {\n // set node id of clicked node as active\n setCurrentNodeId(nodeId);\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 onNodeToggle\n }}\n content={pageDetails}\n lastUpdated='Last updated: Less than a minute ago'\n />\n );\n};\n"]}

package/jsx/tools/DevTools/DevTools.stories.d.ts CHANGED Viewed

@@ -1,6 +1,6 @@
 import { Meta, Story } from '@storybook/react';
 import { DevToolsProps } from '@pega/cosmos-react-tools';
-declare const _default: Meta<import("@storybook/react").Args>;
+declare const _default: Meta;
 export default _default;
 interface DevToolsStoryProps extends DevToolsProps {
     showUtils?: boolean;

package/jsx/tools/DevTools/DevTools.stories.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"DevTools.stories.d.ts","sourceRoot":"","sources":["../../../src/tools/DevTools/DevTools.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,kBAAkB,CAAC;AAI/C,OAAO,EAAY,aAAa,EAAE,MAAM,0BAA0B,CAAC;;AAKnE,wBAMU;AAEV,UAAU,kBAAmB,SAAQ,aAAa;IAChD,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,wBAAwB,CAAC,EAAE,OAAO,CAAC;CACpC;AAED,eAAO,MAAM,YAAY,EAAE,KAAK,CAAC,kBAAkB,~~CAqClD~~,CAAC"}
1	+ {"version":3,"file":"DevTools.stories.d.ts","sourceRoot":"","sources":["../../../src/tools/DevTools/DevTools.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,kBAAkB,CAAC;AAI/C,OAAO,EAAY,aAAa,EAAE,MAAM,0BAA0B,CAAC;;AAKnE,wBAMU;AAEV,UAAU,kBAAmB,SAAQ,aAAa;IAChD,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,wBAAwB,CAAC,EAAE,OAAO,CAAC;CACpC;AAED,eAAO,MAAM,YAAY,EAAE,KAAK,CAAC,kBAAkB,CAkClD,CAAC"}

package/jsx/tools/DevTools/DevTools.stories.jsx CHANGED Viewed

@@ -2,7 +2,7 @@ import { useState } from 'react';
 import { action } from '@storybook/addon-actions';
 import { DevTools } from '@pega/cosmos-react-tools';
 import { Flex, MenuButton, Button, Icon } from '@pega/cosmos-react-core';
-import { footerTabsMockContent, footerTabsMock, footerMenuMock } from './DevTools.mocks';
+import { footerTabsMock, footerMenuMock } from './DevTools.mocks';
 export default {
     title: 'Tools/DevTools',
     component: DevTools,
@@ -11,7 +11,6 @@ export default {
     }
 };
 export const DevToolsDemo = (args) => {
-    const [tabContent, setTabContent] = useState(footerTabsMockContent[1]);
     const [currentTabId, setCurrentTabId] = useState(footerTabsMock[1].id);
     const utils = (<Flex container={{ alignItems: 'center', pad: [0, 2] }}>
       <MenuButton text='More options' variant='simple' icon='more' iconOnly menu={{ items: footerMenuMock }}/>
@@ -19,9 +18,8 @@ export const DevToolsDemo = (args) => {
         <Icon name='open'/>
       </Button>
     </Flex>);
-    return (<DevTools tabs={footerTabsMock} currentTabId={currentTabId} tabContent={tabContent} onTabClick={(id) => {
+    return (<DevTools tabs={footerTabsMock} currentTabId={currentTabId} onTabClick={(id) => {
             setCurrentTabId(id);
-            setTabContent(footerTabsMockContent[Number(id)]);
         }} utils={args.showUtils && utils} onContinueDebug={args.showActiveDebuggingState ? () => { } : undefined}/>);
 };
 DevToolsDemo.args = {

package/jsx/tools/DevTools/DevTools.stories.jsx.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"DevTools.stories.jsx","sourceRoot":"","sources":["../../../src/tools/DevTools/DevTools.stories.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AACjC,OAAO,EAAE,MAAM,EAAE,MAAM,0BAA0B,CAAC;AAElD,OAAO,EAAE,QAAQ,EAAiB,MAAM,0BAA0B,CAAC;AACnE,OAAO,EAAE,IAAI,EAAE,UAAU,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,yBAAyB,CAAC;AAEzE,OAAO,EAAE,~~qBAAqB,EAAE,~~cAAc,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;~~AAEzF~~,eAAe;IACb,KAAK,EAAE,gBAAgB;IACvB,SAAS,EAAE,QAAQ;IACnB,UAAU,EAAE;QACV,MAAM,EAAE,YAAY;KACrB;CACM,CAAC;AAOV,MAAM,CAAC,MAAM,YAAY,GAA8B,CAAC,IAAwB,EAAE,EAAE;IAClF,MAAM,CAAC,~~UAAU,EAAE,aAAa,CAAC,GAAG,QAAQ,CAAC,qBAAqB,CAAC,CAAC,CAAC,CAAC,CAAC;IACvE,MAAM,CAAC,~~YAAY,EAAE,eAAe,CAAC,GAAG,QAAQ,CAAC,cAAc,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC;IAEvE,MAAM,KAAK,GAAG,CACZ,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC,EAAE,UAAU,EAAE,QAAQ,EAAE,GAAG,EAAE,CAAC,CAAC,EAAE,CAAC,CAAC,EAAE,CAAC,CACrD;MAAA,CAAC,UAAU,CACT,IAAI,CAAC,cAAc,CACnB,OAAO,CAAC,QAAQ,CAChB,IAAI,CAAC,MAAM,CACX,QAAQ,CACR,IAAI,CAAC,CAAC,EAAE,KAAK,EAAE,cAAc,EAAE,CAAC,EAElC;MAAA,CAAC,MAAM,CACL,OAAO,CAAC,QAAQ,CAChB,IAAI,CACJ,KAAK,CAAC,oBAAoB,CAC1B,OAAO,CAAC,CAAC,MAAM,CAAC,4BAA4B,CAAC,CAAC,CAE9C;QAAA,CAAC,IAAI,CAAC,IAAI,CAAC,MAAM,EACnB;MAAA,EAAE,MAAM,CACV;IAAA,EAAE,IAAI,CAAC,CACR,CAAC;IAEF,OAAO,CACL,CAAC,QAAQ,CACP,IAAI,CAAC,CAAC,cAAc,CAAC,CACrB,YAAY,CAAC,CAAC,YAAY,CAAC,CAC3B,UAAU,CAAC,CAAC,~~UAAU,~~CAAC,~~CACvB,UAAU,CAAC,CAAC,CAAC,~~EAAU,EAAE,EAAE;YACzB,eAAe,CAAC,EAAE,CAAC,CAAC;~~YACpB~~,~~aAAa,~~CAAC,~~qBAAqB,~~CAAC,~~MAAM,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC;QACnD,CAAC,CAAC,~~CACF,KAAK,CAAC,CAAC,IAAI,CAAC,SAAS,IAAI,KAAK,CAAC,CAC/B,eAAe,CAAC,CAAC,IAAI,CAAC,wBAAwB,CAAC,CAAC,CAAC,GAAG,EAAE,GAAE,CAAC,CAAC,CAAC,CAAC,SAAS,CAAC,EACtE,CACH,CAAC;AACJ,CAAC,CAAC;AAEF,YAAY,CAAC,IAAI,GAAG;IAClB,SAAS,EAAE,KAAK;IAChB,wBAAwB,EAAE,KAAK;CAChC,CAAC;AAEF,YAAY,CAAC,QAAQ,GAAG;IACtB,SAAS,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE,EAAE;IAC3C,wBAAwB,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE,EAAE;CAC3D,CAAC","sourcesContent":["import { Meta, Story } from '@storybook/react';\nimport { useState } from 'react';\nimport { action } from '@storybook/addon-actions';\n\nimport { DevTools, DevToolsProps } from '@pega/cosmos-react-tools';\nimport { Flex, MenuButton, Button, Icon } from '@pega/cosmos-react-core';\n\nimport { ~~footerTabsMockContent,~~ footerTabsMock, footerMenuMock } from './DevTools.mocks';\n\nexport default {\n title: 'Tools/DevTools',\n component: DevTools,\n parameters: {\n layout: 'fullscreen'\n }\n} as Meta;\n\ninterface DevToolsStoryProps extends DevToolsProps {\n showUtils?: boolean;\n showActiveDebuggingState?: boolean;\n}\n\nexport const DevToolsDemo: Story<DevToolsStoryProps> = (args: DevToolsStoryProps) => {\n const [~~tabContent, setTabContent] = useState(footerTabsMockContent[1]);\n const [~~currentTabId, setCurrentTabId] = useState(footerTabsMock[1].id);\n\n const utils = (\n <Flex container={{ alignItems: 'center', pad: [0, 2] }}>\n <MenuButton\n text='More options'\n variant='simple'\n icon='more'\n iconOnly\n menu={{ items: footerMenuMock }}\n />\n <Button\n variant='simple'\n icon\n label='Open in new window'\n onClick={action('Clicked open in new window')}\n >\n <Icon name='open' />\n </Button>\n </Flex>\n );\n\n return (\n <DevTools\n tabs={footerTabsMock}\n currentTabId={currentTabId}\n ~~tabContent={tabContent}\n~~ onTabClick={(id: string) => {\n setCurrentTabId(id);\n ~~setTabContent(footerTabsMockContent[Number(id)]);\n~~ }}\n utils={args.showUtils && utils}\n onContinueDebug={args.showActiveDebuggingState ? () => {} : undefined}\n />\n );\n};\n\nDevToolsDemo.args = {\n showUtils: false,\n showActiveDebuggingState: false\n};\n\nDevToolsDemo.argTypes = {\n showUtils: { control: { type: 'boolean' } },\n showActiveDebuggingState: { control: { type: 'boolean' } }\n};\n"]}
1	+ {"version":3,"file":"DevTools.stories.jsx","sourceRoot":"","sources":["../../../src/tools/DevTools/DevTools.stories.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AACjC,OAAO,EAAE,MAAM,EAAE,MAAM,0BAA0B,CAAC;AAElD,OAAO,EAAE,QAAQ,EAAiB,MAAM,0BAA0B,CAAC;AACnE,OAAO,EAAE,IAAI,EAAE,UAAU,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,yBAAyB,CAAC;AAEzE,OAAO,EAAE,cAAc,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAElE,eAAe;IACb,KAAK,EAAE,gBAAgB;IACvB,SAAS,EAAE,QAAQ;IACnB,UAAU,EAAE;QACV,MAAM,EAAE,YAAY;KACrB;CACM,CAAC;AAOV,MAAM,CAAC,MAAM,YAAY,GAA8B,CAAC,IAAwB,EAAE,EAAE;IAClF,MAAM,CAAC,YAAY,EAAE,eAAe,CAAC,GAAG,QAAQ,CAAC,cAAc,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC;IAEvE,MAAM,KAAK,GAAG,CACZ,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC,EAAE,UAAU,EAAE,QAAQ,EAAE,GAAG,EAAE,CAAC,CAAC,EAAE,CAAC,CAAC,EAAE,CAAC,CACrD;MAAA,CAAC,UAAU,CACT,IAAI,CAAC,cAAc,CACnB,OAAO,CAAC,QAAQ,CAChB,IAAI,CAAC,MAAM,CACX,QAAQ,CACR,IAAI,CAAC,CAAC,EAAE,KAAK,EAAE,cAAc,EAAE,CAAC,EAElC;MAAA,CAAC,MAAM,CACL,OAAO,CAAC,QAAQ,CAChB,IAAI,CACJ,KAAK,CAAC,oBAAoB,CAC1B,OAAO,CAAC,CAAC,MAAM,CAAC,4BAA4B,CAAC,CAAC,CAE9C;QAAA,CAAC,IAAI,CAAC,IAAI,CAAC,MAAM,EACnB;MAAA,EAAE,MAAM,CACV;IAAA,EAAE,IAAI,CAAC,CACR,CAAC;IAEF,OAAO,CACL,CAAC,QAAQ,CACP,IAAI,CAAC,CAAC,cAAc,CAAC,CACrB,YAAY,CAAC,CAAC,YAAY,CAAC,CAC3B,UAAU,CAAC,CAAC,CAAC,EAAU,EAAE,EAAE;YACzB,eAAe,CAAC,EAAE,CAAC,CAAC;QACtB,CAAC,CAAC,CACF,KAAK,CAAC,CAAC,IAAI,CAAC,SAAS,IAAI,KAAK,CAAC,CAC/B,eAAe,CAAC,CAAC,IAAI,CAAC,wBAAwB,CAAC,CAAC,CAAC,GAAG,EAAE,GAAE,CAAC,CAAC,CAAC,CAAC,SAAS,CAAC,EACtE,CACH,CAAC;AACJ,CAAC,CAAC;AAEF,YAAY,CAAC,IAAI,GAAG;IAClB,SAAS,EAAE,KAAK;IAChB,wBAAwB,EAAE,KAAK;CAChC,CAAC;AAEF,YAAY,CAAC,QAAQ,GAAG;IACtB,SAAS,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE,EAAE;IAC3C,wBAAwB,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE,EAAE;CAC3D,CAAC","sourcesContent":["import { Meta, Story } from '@storybook/react';\nimport { useState } from 'react';\nimport { action } from '@storybook/addon-actions';\n\nimport { DevTools, DevToolsProps } from '@pega/cosmos-react-tools';\nimport { Flex, MenuButton, Button, Icon } from '@pega/cosmos-react-core';\n\nimport { footerTabsMock, footerMenuMock } from './DevTools.mocks';\n\nexport default {\n title: 'Tools/DevTools',\n component: DevTools,\n parameters: {\n layout: 'fullscreen'\n }\n} as Meta;\n\ninterface DevToolsStoryProps extends DevToolsProps {\n showUtils?: boolean;\n showActiveDebuggingState?: boolean;\n}\n\nexport const DevToolsDemo: Story<DevToolsStoryProps> = (args: DevToolsStoryProps) => {\n const [currentTabId, setCurrentTabId] = useState(footerTabsMock[1].id);\n\n const utils = (\n <Flex container={{ alignItems: 'center', pad: [0, 2] }}>\n <MenuButton\n text='More options'\n variant='simple'\n icon='more'\n iconOnly\n menu={{ items: footerMenuMock }}\n />\n <Button\n variant='simple'\n icon\n label='Open in new window'\n onClick={action('Clicked open in new window')}\n >\n <Icon name='open' />\n </Button>\n </Flex>\n );\n\n return (\n <DevTools\n tabs={footerTabsMock}\n currentTabId={currentTabId}\n onTabClick={(id: string) => {\n setCurrentTabId(id);\n }}\n utils={args.showUtils && utils}\n onContinueDebug={args.showActiveDebuggingState ? () => {} : undefined}\n />\n );\n};\n\nDevToolsDemo.args = {\n showUtils: false,\n showActiveDebuggingState: false\n};\n\nDevToolsDemo.argTypes = {\n showUtils: { control: { type: 'boolean' } },\n showActiveDebuggingState: { control: { type: 'boolean' } }\n};\n"]}

package/jsx/tools/PreviewShell/PreviewShell.mocks.d.ts CHANGED Viewed

@@ -1,9 +1,20 @@
-/// <reference types="react" />
+import { FC } from 'react';
 import { MenuProps } from '@pega/cosmos-react-core';
 export declare const footerTabsMockContent: JSX.Element[];
+export declare const TabContent: FC<{
+    text: string;
+}>;
 export declare const footerTabsMock: {
     name: string;
     id: string;
+    content: JSX.Element;
+}[];
+export declare const channelsMock: {
+    id: string;
+    primary: string;
+    selected: boolean;
+    content: JSX.Element;
+    icon: string;
 }[];
 export declare const footerMenuMock: MenuProps['items'];
 //# sourceMappingURL=PreviewShell.mocks.d.ts.map

package/jsx/tools/PreviewShell/PreviewShell.mocks.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"PreviewShell.mocks.d.ts","sourceRoot":"","sources":["../../../src/tools/PreviewShell/PreviewShell.mocks.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,~~SAAS~~,EAAE,MAAM,yBAAyB,CAAC;~~AAOpD~~,eAAO,MAAM,qBAAqB,eAKjC,CAAC;AAEF,eAAO,MAAM,cAAc~~;;;~~GAG1B,CAAC;AAEF,eAAO,MAAM,cAAc,EAAE,SAAS,CAAC,OAAO,CA2C7C,CAAC"}
1	+ {"version":3,"file":"PreviewShell.mocks.d.ts","sourceRoot":"","sources":["../../../src/tools/PreviewShell/PreviewShell.mocks.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,EAAE,EAAE,MAAM,OAAO,CAAC;AAE3B,OAAO,EAAE,SAAS,EAAc,MAAM,yBAAyB,CAAC;AAOhE,eAAO,MAAM,qBAAqB,eAKjC,CAAC;AAEF,eAAO,MAAM,UAAU,EAAE,EAAE,CAAC;IAAE,IAAI,EAAE,MAAM,CAAA;CAAE,CAM3C,CAAC;AAEF,eAAO,MAAM,cAAc;;;;GAG1B,CAAC;AAEF,eAAO,MAAM,YAAY;;;;;;GAoBxB,CAAC;AAEF,eAAO,MAAM,cAAc,EAAE,SAAS,CAAC,OAAO,CA2C7C,CAAC"}

package/jsx/tools/PreviewShell/PreviewShell.mocks.jsx CHANGED Viewed

@@ -1,3 +1,4 @@
+import { Text, Flex } from '@pega/cosmos-react-core';
 import { ClipboardViewerDemo } from '../Clipboard/Clipboard.stories';
 import { EmptyStateDemo } from '../../core/EmptyState/EmptyState.stories';
 import { StyledContainer } from './PreviewShell.styles';
@@ -7,9 +8,30 @@ export const footerTabsMockContent = [
   </StyledContainer>,
     <ClipboardViewerDemo navigation={{ nodes: [] }}/>
 ];
+export const TabContent = ({ text }) => {
+    return (<Flex container={{ justify: 'center', alignItems: 'center' }} as={StyledContainer}>
+      <Text variant='h3'>{text}</Text>
+    </Flex>);
+};
 export const footerTabsMock = [
-    { name: 'Tracer', id: '0' },
-    { name: 'Clipboard', id: '1' }
+    { name: 'Tracer', id: '0', content: footerTabsMockContent[0] },
+    { name: 'Clipboard', id: '1', content: footerTabsMockContent[1] }
+];
+export const channelsMock = [
+    {
+        id: 'browser',
+        primary: 'Browser',
+        selected: true,
+        content: (<iframe title='Preview frame' src={`${window.location.href.split('?')[0]}?id=core-pagetemplates--tabbed-page-demo`}/>),
+        icon: 'desktop'
+    },
+    {
+        id: 'mobile-app',
+        primary: 'Mobile app',
+        selected: false,
+        content: <TabContent text='This is main content'/>,
+        icon: 'mobile-phone'
+    }
 ];
 export const footerMenuMock = [
     {

package/jsx/tools/PreviewShell/PreviewShell.mocks.jsx.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"PreviewShell.mocks.jsx","sourceRoot":"","sources":["../../../src/tools/PreviewShell/PreviewShell.mocks.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,mBAAmB,EAAE,MAAM,gCAAgC,CAAC;AACrE,OAAO,EAAE,cAAc,EAAE,MAAM,0CAA0C,CAAC;AAE1E,OAAO,EAAE,eAAe,EAAE,MAAM,uBAAuB,CAAC;AAExD,MAAM,CAAC,MAAM,qBAAqB,GAAG;IACnC,CAAC,eAAe,CACd;IAAA,CAAC,cAAc,CAAC,AAAD,EACjB;EAAA,EAAE,eAAe,CAAC;IAClB,CAAC,mBAAmB,CAAC,UAAU,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE,CAAC,EAAG;CACnD,CAAC;AAEF,MAAM,CAAC,MAAM,cAAc,GAAG;IAC5B,EAAE,IAAI,EAAE,QAAQ,EAAE,EAAE,EAAE,GAAG,EAAE;~~IAC3B~~,EAAE,IAAI,EAAE,WAAW,EAAE,EAAE,EAAE,GAAG,EAAE;~~CAC/B~~,CAAC;AAEF,MAAM,CAAC,MAAM,cAAc,GAAuB;IAChD;QACE,EAAE,EAAE,GAAG;QACP,OAAO,EAAE,gBAAgB;KAC1B;IACD;QACE,EAAE,EAAE,GAAG;QACP,OAAO,EAAE,iBAAiB;KAC3B;IACD;QACE,EAAE,EAAE,GAAG;QACP,OAAO,EAAE,YAAY;QACrB,KAAK,EAAE;YACL;gBACE,EAAE,EAAE,KAAK;gBACT,OAAO,EAAE,SAAS;aACnB;YACD;gBACE,EAAE,EAAE,KAAK;gBACT,OAAO,EAAE,aAAa;aACvB;YACD;gBACE,EAAE,EAAE,KAAK;gBACT,OAAO,EAAE,QAAQ;aAClB;YACD;gBACE,EAAE,EAAE,KAAK;gBACT,OAAO,EAAE,aAAa;aACvB;SACF;KACF;IACD;QACE,EAAE,EAAE,GAAG;QACP,OAAO,EAAE,UAAU;KACpB;IACD;QACE,EAAE,EAAE,GAAG;QACP,OAAO,EAAE,WAAW;KACrB;IACD;QACE,EAAE,EAAE,GAAG;QACP,OAAO,EAAE,MAAM;KAChB;CACF,CAAC","sourcesContent":["import { MenuProps } from '@pega/cosmos-react-core';\n\nimport { ClipboardViewerDemo } from '../Clipboard/Clipboard.stories';\nimport { EmptyStateDemo } from '../../core/EmptyState/EmptyState.stories';\n\nimport { StyledContainer } from './PreviewShell.styles';\n\nexport const footerTabsMockContent = [\n <StyledContainer>\n <EmptyStateDemo />\n </StyledContainer>,\n <ClipboardViewerDemo navigation={{ nodes: [] }} />\n];\n\nexport const footerTabsMock = [\n { name: 'Tracer', id: '0' },\n { name: 'Clipboard', id: '1' }\n];\n\nexport const footerMenuMock: MenuProps['items'] = [\n {\n id: '1',\n primary: 'Dock to bottom'\n },\n {\n id: '2',\n primary: 'Separate window'\n },\n {\n id: '3',\n primary: 'More tools',\n items: [\n {\n id: '3-1',\n primary: 'Network'\n },\n {\n id: '3-2',\n primary: 'Performance'\n },\n {\n id: '3-3',\n primary: 'Memory'\n },\n {\n id: '3-4',\n primary: 'Application'\n }\n ]\n },\n {\n id: '4',\n primary: 'Settings'\n },\n {\n id: '5',\n primary: 'Shortcuts'\n },\n {\n id: '6',\n primary: 'Help'\n }\n];\n"]}
1	+ {"version":3,"file":"PreviewShell.mocks.jsx","sourceRoot":"","sources":["../../../src/tools/PreviewShell/PreviewShell.mocks.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAa,IAAI,EAAE,IAAI,EAAE,MAAM,yBAAyB,CAAC;AAEhE,OAAO,EAAE,mBAAmB,EAAE,MAAM,gCAAgC,CAAC;AACrE,OAAO,EAAE,cAAc,EAAE,MAAM,0CAA0C,CAAC;AAE1E,OAAO,EAAE,eAAe,EAAE,MAAM,uBAAuB,CAAC;AAExD,MAAM,CAAC,MAAM,qBAAqB,GAAG;IACnC,CAAC,eAAe,CACd;IAAA,CAAC,cAAc,CAAC,AAAD,EACjB;EAAA,EAAE,eAAe,CAAC;IAClB,CAAC,mBAAmB,CAAC,UAAU,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE,CAAC,EAAG;CACnD,CAAC;AAEF,MAAM,CAAC,MAAM,UAAU,GAAyB,CAAC,EAAE,IAAI,EAAE,EAAE,EAAE;IAC3D,OAAO,CACL,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC,EAAE,OAAO,EAAE,QAAQ,EAAE,UAAU,EAAE,QAAQ,EAAE,CAAC,CAAC,EAAE,CAAC,CAAC,eAAe,CAAC,CAChF;MAAA,CAAC,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,CAAC,IAAI,CAAC,EAAE,IAAI,CACjC;IAAA,EAAE,IAAI,CAAC,CACR,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,cAAc,GAAG;IAC5B,EAAE,IAAI,EAAE,QAAQ,EAAE,EAAE,EAAE,GAAG,EAAE,OAAO,EAAE,qBAAqB,CAAC,CAAC,CAAC,EAAE;IAC9D,EAAE,IAAI,EAAE,WAAW,EAAE,EAAE,EAAE,GAAG,EAAE,OAAO,EAAE,qBAAqB,CAAC,CAAC,CAAC,EAAE;CAClE,CAAC;AAEF,MAAM,CAAC,MAAM,YAAY,GAAG;IAC1B;QACE,EAAE,EAAE,SAAS;QACb,OAAO,EAAE,SAAS;QAClB,QAAQ,EAAE,IAAI;QACd,OAAO,EAAE,CACP,CAAC,MAAM,CACL,KAAK,CAAC,eAAe,CACrB,GAAG,CAAC,CAAC,GAAG,MAAM,CAAC,QAAQ,CAAC,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,0CAA0C,CAAC,EACrF,CACH;QACD,IAAI,EAAE,SAAS;KAChB;IACD;QACE,EAAE,EAAE,YAAY;QAChB,OAAO,EAAE,YAAY;QACrB,QAAQ,EAAE,KAAK;QACf,OAAO,EAAE,CAAC,UAAU,CAAC,IAAI,CAAC,sBAAsB,EAAG;QACnD,IAAI,EAAE,cAAc;KACrB;CACF,CAAC;AAEF,MAAM,CAAC,MAAM,cAAc,GAAuB;IAChD;QACE,EAAE,EAAE,GAAG;QACP,OAAO,EAAE,gBAAgB;KAC1B;IACD;QACE,EAAE,EAAE,GAAG;QACP,OAAO,EAAE,iBAAiB;KAC3B;IACD;QACE,EAAE,EAAE,GAAG;QACP,OAAO,EAAE,YAAY;QACrB,KAAK,EAAE;YACL;gBACE,EAAE,EAAE,KAAK;gBACT,OAAO,EAAE,SAAS;aACnB;YACD;gBACE,EAAE,EAAE,KAAK;gBACT,OAAO,EAAE,aAAa;aACvB;YACD;gBACE,EAAE,EAAE,KAAK;gBACT,OAAO,EAAE,QAAQ;aAClB;YACD;gBACE,EAAE,EAAE,KAAK;gBACT,OAAO,EAAE,aAAa;aACvB;SACF;KACF;IACD;QACE,EAAE,EAAE,GAAG;QACP,OAAO,EAAE,UAAU;KACpB;IACD;QACE,EAAE,EAAE,GAAG;QACP,OAAO,EAAE,WAAW;KACrB;IACD;QACE,EAAE,EAAE,GAAG;QACP,OAAO,EAAE,MAAM;KAChB;CACF,CAAC","sourcesContent":["import { FC } from 'react';\n\nimport { MenuProps, Text, Flex } from '@pega/cosmos-react-core';\n\nimport { ClipboardViewerDemo } from '../Clipboard/Clipboard.stories';\nimport { EmptyStateDemo } from '../../core/EmptyState/EmptyState.stories';\n\nimport { StyledContainer } from './PreviewShell.styles';\n\nexport const footerTabsMockContent = [\n <StyledContainer>\n <EmptyStateDemo />\n </StyledContainer>,\n <ClipboardViewerDemo navigation={{ nodes: [] }} />\n];\n\nexport const TabContent: FC<{ text: string }> = ({ text }) => {\n return (\n <Flex container={{ justify: 'center', alignItems: 'center' }} as={StyledContainer}>\n <Text variant='h3'>{text}</Text>\n </Flex>\n );\n};\n\nexport const footerTabsMock = [\n { name: 'Tracer', id: '0', content: footerTabsMockContent[0] },\n { name: 'Clipboard', id: '1', content: footerTabsMockContent[1] }\n];\n\nexport const channelsMock = [\n {\n id: 'browser',\n primary: 'Browser',\n selected: true,\n content: (\n <iframe\n title='Preview frame'\n src={`${window.location.href.split('?')[0]}?id=core-pagetemplates--tabbed-page-demo`}\n />\n ),\n icon: 'desktop'\n },\n {\n id: 'mobile-app',\n primary: 'Mobile app',\n selected: false,\n content: <TabContent text='This is main content' />,\n icon: 'mobile-phone'\n }\n];\n\nexport const footerMenuMock: MenuProps['items'] = [\n {\n id: '1',\n primary: 'Dock to bottom'\n },\n {\n id: '2',\n primary: 'Separate window'\n },\n {\n id: '3',\n primary: 'More tools',\n items: [\n {\n id: '3-1',\n primary: 'Network'\n },\n {\n id: '3-2',\n primary: 'Performance'\n },\n {\n id: '3-3',\n primary: 'Memory'\n },\n {\n id: '3-4',\n primary: 'Application'\n }\n ]\n },\n {\n id: '4',\n primary: 'Settings'\n },\n {\n id: '5',\n primary: 'Shortcuts'\n },\n {\n id: '6',\n primary: 'Help'\n }\n];\n"]}

package/jsx/tools/PreviewShell/PreviewShell.stories.d.ts CHANGED Viewed

@@ -1,17 +1,19 @@
 import { Meta, Story } from '@storybook/react';
+import { MouseEvent } from 'react';
 import { PreviewShellProps } from '@pega/cosmos-react-tools';
 import { StatusProps } from '@pega/cosmos-react-core';
 import { HeaderProps } from '@pega/cosmos-react-tools/lib/components/PreviewShell/PreviewShell.types';
-declare const _default: Meta<import("@storybook/react").Args>;
+declare const _default: Meta;
 export default _default;
 interface PreviewShellStoryProps extends PreviewShellProps {
     appName: HeaderProps['appName'];
     statusVariant: StatusProps['variant'];
     statusText: string;
     operatorName: HeaderProps['operator']['avatar']['name'];
-    expandFooter: PreviewShellProps['footer']['expanded'];
+    expandFooter: boolean;
     showHeader: boolean;
-    onNewWindowClick: PreviewShellProps['footer']['onNewWindowClick'];
+    showFooter?: boolean;
+    onNewWindowClick: (e?: MouseEvent<HTMLButtonElement>) => void;
 }
 export declare const PreviewShellSkeleton: Story<PreviewShellStoryProps>;
 export declare const PreviewShellDemo: Story<PreviewShellStoryProps>;

package/jsx/tools/PreviewShell/PreviewShell.stories.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"PreviewShell.stories.d.ts","sourceRoot":"","sources":["../../../src/tools/PreviewShell/PreviewShell.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,kBAAkB,CAAC;~~AAI~~/C,OAAO,EAAgB,iBAAiB,EAAE,MAAM,0BAA0B,CAAC;AAC3E,OAAO,EAAE,WAAW,EAAE,MAAM,yBAAyB,CAAC;AACtD,OAAO,EAAE,WAAW,EAAE,MAAM,yEAAyE,CAAC;;AAItG,wBAMU;AAEV,UAAU,sBAAuB,SAAQ,iBAAiB;IACxD,OAAO,EAAE,WAAW,CAAC,SAAS,CAAC,CAAC;IAChC,aAAa,EAAE,WAAW,CAAC,SAAS,CAAC,CAAC;IACtC,UAAU,EAAE,MAAM,CAAC;IACnB,YAAY,EAAE,WAAW,CAAC,UAAU,CAAC,CAAC,QAAQ,CAAC,CAAC,MAAM,CAAC,CAAC;IACxD,YAAY,EAAE,~~iBAAiB~~,CAAC,~~QAAQ~~,~~CAAC~~,CAAC,UAAU,CAAC,~~CAAC;IACtD,UAAU,~~EAAE,OAAO,CAAC;~~IACpB~~,gBAAgB,EAAE,~~iBAAiB~~,CAAC,~~QAAQ,~~CAAC,CAAC,~~kBAAkB~~,CAAC,CAAC;~~CACnE~~;AAED,eAAO,MAAM,oBAAoB,EAAE,KAAK,CAAC,sBAAsB,~~CAoE9D~~,CAAC;AAyBF,eAAO,MAAM,gBAAgB,EAAE,KAAK,CAAC,sBAAsB,~~CA6E1D~~,CAAC"}
1	+ {"version":3,"file":"PreviewShell.stories.d.ts","sourceRoot":"","sources":["../../../src/tools/PreviewShell/PreviewShell.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,kBAAkB,CAAC;AAE/C,OAAO,EAAgC,UAAU,EAAE,MAAM,OAAO,CAAC;AAEjE,OAAO,EAAgB,iBAAiB,EAAE,MAAM,0BAA0B,CAAC;AAC3E,OAAO,EAAE,WAAW,EAAE,MAAM,yBAAyB,CAAC;AACtD,OAAO,EAAE,WAAW,EAAE,MAAM,yEAAyE,CAAC;;AAItG,wBAMU;AAEV,UAAU,sBAAuB,SAAQ,iBAAiB;IACxD,OAAO,EAAE,WAAW,CAAC,SAAS,CAAC,CAAC;IAChC,aAAa,EAAE,WAAW,CAAC,SAAS,CAAC,CAAC;IACtC,UAAU,EAAE,MAAM,CAAC;IACnB,YAAY,EAAE,WAAW,CAAC,UAAU,CAAC,CAAC,QAAQ,CAAC,CAAC,MAAM,CAAC,CAAC;IACxD,YAAY,EAAE,OAAO,CAAC;IACtB,UAAU,EAAE,OAAO,CAAC;IACpB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,gBAAgB,EAAE,CAAC,CAAC,CAAC,EAAE,UAAU,CAAC,iBAAiB,CAAC,KAAK,IAAI,CAAC;CAC/D;AAED,eAAO,MAAM,oBAAoB,EAAE,KAAK,CAAC,sBAAsB,CA0E9D,CAAC;AAyBF,eAAO,MAAM,gBAAgB,EAAE,KAAK,CAAC,sBAAsB,CA2F1D,CAAC"}