npm - @pega/cosmos-react-demos - Versions diffs - 3.0.0-dev.3.0 → 3.0.0-dev.4.0 - Mend

@pega/cosmos-react-demos 3.0.0-dev.3.0 → 3.0.0-dev.4.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 (79) hide show

package/lib/core/AppShell/AppShell.stories.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"AppShell.stories.js","sourceRoot":"","sources":["../../../src/core/AppShell/AppShell.stories.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Meta, Story } from '@storybook/react';\nimport { MouseEvent, useContext, FormEvent, useState, useMemo, useRef } from 'react';\n\nimport {\n AppShell,\n AppShellProps,\n AppShellList,\n DrawerItemProps,\n Button,\n DateInput,\n Grid,\n Icon,\n registerIcon,\n Input,\n Select,\n Option,\n Modal,\n ModalManagerContext,\n TextArea,\n ToasterContext,\n ForwardProps,\n useAfterInitialEffect,\n windowIsAvailable,\n Configuration\n} from '@pega/cosmos-react-core';\nimport * as bellSolidIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/bell-solid.icon';\nimport * as clockSolidIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/clock-solid.icon';\n\nimport {\n defaultLinks,\n defaultMainContent,\n defaultNotifications,\n defaultRecents,\n operatorData\n} from './AppShell.mocks';\n\nregisterIcon(bellSolidIcon, clockSolidIcon);\n\nexport default {\n title: 'Core/App Shell',\n component: AppShell,\n id: 'App Shell',\n parameters: {\n layout: 'fullscreen'\n }\n} as Meta;\n\ninterface AppShellStoryProps {\n /** Demo props /\n main?: AppShellProps['main'];\n appInfo?: AppShellProps['appInfo'];\n banners?: AppShellProps['banners'];\n cases?: AppShellProps['cases'];\n caseLinks?: AppShellProps['links'];\n createLinks?: any[];\n recentItems?: any[];\n utils?: AppShellProps['utils'];\n onLinkClick?: (name: string) => void;\n\n /* Storybook controls */\n appName?: AppShellProps['appInfo']['appName'];\n portalName?: AppShellProps['appInfo']['portalName'];\n href?: AppShellProps['appInfo']['href'];\n imageSrc?: AppShellProps['appInfo']['imageSrc'];\n fullImageSrc?: AppShellProps['appInfo']['fullImageSrc'];\n withSearch?: boolean;\n appHeader?: AppShellProps['appHeader'];\n environmentName?: string;\n environmentColor?: string;\n notificationsEmpty?: boolean;\n notificationsLoading?: boolean;\n recentsEmpty?: boolean;\n recentsLoading?: boolean;\n pinsLoading?: boolean;\n}\n\nexport const AppShellDemo: Story<AppShellStoryProps> = (args: AppShellStoryProps) => {\n const CreateCaseModal = ({ caseType }: { caseType: string }) => {\n const { ModalContext } = useContext(ModalManagerContext);\n const { dismiss } = useContext(ModalContext);\n const { push: pushToaster } = useContext(ToasterContext);\n\n return (\n <Modal\n as='form'\n heading={`New ${caseType}`}\n actions={\n <>\n <Button onClick={dismiss}>Cancel</Button>\n <Button\n variant='primary'\n type='submit'\n onClick={(e: FormEvent) => {\n e.preventDefault();\n dismiss();\n pushToaster({ content: `${caseType} requested` });\n }}\n >\n Request\n </Button>\n </>\n }\n >\n <Grid container={{ rowGap: 2 }}>\n <DateInput label='Date Requested' info={null} />\n <Select label='Department'>\n <Option value=''>Select…</Option>\n <Option value='Fire'>Fire</Option>\n <Option value='Facilities'>Facilities</Option>\n <Option value='Parks'>Parks</Option>\n <Option value='Sanitation'>Sanitation</Option>\n <Option value='Parking & Traffic'>Parking & Traffic</Option>\n <Option value='Police'>Police</Option>\n <Option value='Courts'>Courts</Option>\n <Option value='Healthcare'>Healthcare</Option>\n <Option value='Energy'>Energy</Option>\n <Option value='Justice department'>Justice department</Option>\n <Option value='Environmental'>Environmental</Option>\n </Select>\n <TextArea label='Purpose of Purchase' />\n <Select label='Desired Make'>\n <Option value=''>Select...</Option>\n <Option value='Ford'>Ford</Option>\n <Option value='Dodge'>Dodge</Option>\n <Option value='Toyota'>Toyota</Option>\n <Option value='Tesla'>Tesla</Option>\n </Select>\n <Input label='Desired Make' />\n <Input\n type='number'\n min='2016'\n max='2021'\n label='Year'\n info='Must be within last 5 years'\n />\n <Input\n type='number'\n min='0.01'\n step='0.01'\n max='50000'\n label='Estimated Cost'\n info='May not exceed $50,000.00'\n />\n </Grid>\n </Modal>\n );\n };\n\n const caseLinks = args.caseLinks \|\| defaultLinks;\n const showSearch = args.withSearch !== undefined ? args.withSearch : true;\n\n const { create: createModal } = useContext(ModalManagerContext);\n const [links, setLinks] = useState<AppShellProps['links']>(caseLinks);\n const [notifications, setNotifications] =\n useState<(DrawerItemProps & ForwardProps)[]>(defaultNotifications);\n const [recents, setRecents] = useState<(DrawerItemProps & ForwardProps)[]>(\n args.recentItems \|\| defaultRecents\n );\n const [numNewNotifications, setNumNewNotifications] = useState(\n notifications.filter(x => x.unread).length\n );\n const [searchVal, setSearchVal] = useState('');\n\n useAfterInitialEffect(() => {\n setLinks(caseLinks);\n }, [caseLinks]);\n\n const linksWithHandlers = useMemo<AppShellProps['links']>(() => {\n return (links \|\| []).map(link => ({\n ...link,\n onClick(e: MouseEvent<HTMLAnchorElement>) {\n e.preventDefault();\n setLinks((prevLinks = []) => {\n return prevLinks.map(prevLink => {\n return { ...link, active: prevLink.name === link.name };\n });\n });\n args.onLinkClick?.(link.name);\n }\n }));\n }, [links]);\n\n const defaultCreateLinks = ['Vehicle Purchase'].map(name => ({\n name,\n onClick: () => {\n createModal(CreateCaseModal, { caseType: name });\n }\n }));\n\n const handleNotificationClick = (passedId: string) => {\n setNotifications(cur =>\n cur.map(({ id, unread, ...item }) => ({\n id,\n unread: passedId === id ? false : unread,\n ...item\n }))\n );\n };\n\n const handlePinToggle = (passedId: string) => {\n setRecents(cur =>\n cur.map(({ id, pinned, ...item }) => ({\n id,\n pinned: passedId === id ? !pinned : pinned,\n ...item\n }))\n );\n };\n\n const notificationViewItems = [\n {\n id: '234',\n items: args.notificationsEmpty ? [] : notifications,\n loading: args.notificationsLoading,\n onItemClick: handleNotificationClick,\n viewAll: {\n href: '#'\n },\n emptyText: 'No notifications'\n }\n ];\n\n const recentViewItems = [\n {\n id: '456',\n items: recents.filter(x => x.pinned),\n loading: args.pinsLoading,\n onItemPinToggle: handlePinToggle,\n viewAll: {\n href: '#'\n },\n displayPins: true,\n headingText: 'Pinned items',\n emptyText: 'No pinned items'\n },\n {\n id: '789',\n items: args.recentsEmpty ? [] : recents,\n loading: args.recentsLoading,\n onItemPinToggle: handlePinToggle,\n viewAll: {\n href: '#'\n },\n displayPins: true,\n headingText: 'Recently viewed',\n emptyText: 'No recents'\n }\n ];\n\n const newNotificationCountTimerRef = useRef(NaN);\n\n const defaultUtils = [\n {\n name: 'Notifications',\n visual: <Icon name='bell-solid' />,\n count: args.notificationsEmpty ? 0 : numNewNotifications,\n drawerView: <AppShellList listView={notificationViewItems} />,\n onDrawerOpen: () => {\n clearInterval(newNotificationCountTimerRef.current);\n setNumNewNotifications(0);\n },\n onDrawerClose: () => {\n if (windowIsAvailable) {\n // Mock new notifications arriving on a minute interval after the drawer closes.\n // Let's face it, you're popular.\n newNotificationCountTimerRef.current = window.setInterval(() => {\n setNumNewNotifications(cur => cur + 2);\n }, 60000);\n }\n }\n },\n {\n name: 'Recents',\n visual: <Icon name='clock-solid' />,\n drawerView: <AppShellList listView={recentViewItems} />\n }\n ];\n\n return (\n <AppShell\n appInfo={\n args.appInfo \|\| {\n href: args.href \|\| 'https://www.pega.com/',\n imageSrc:\n args.imageSrc \|\|\n 'https://pbs.twimg.com/profile_images/1410341211978752004/pLYjGIa8_bigger.jpg',\n fullImageSrc:\n args.fullImageSrc \|\|\n 'https://www.pega.com/themes/custom/pegawww_theme/images/pega-logo.svg',\n appName: args.appName \|\| 'Cosmos AppShell',\n portalName: args.portalName \|\| 'Demo'\n }\n }\n searchInput={\n showSearch\n ? {\n onSearchChange: (value: string) => {\n setSearchVal(value);\n },\n value: searchVal\n }\n : undefined\n }\n appHeader={args.appHeader}\n caseTypes={args.createLinks \|\| defaultCreateLinks}\n links={linksWithHandlers}\n main={args.main \|\| defaultMainContent}\n cases={args.cases}\n banners={args.banners}\n operator={operatorData}\n utils={args.utils \|\| defaultUtils}\n environment={\n args.environmentName\n ? {\n name: args.environmentName,\n color: args.environmentColor\n }\n : undefined\n }\n />\n );\n};\n\nAppShellDemo.args = {\n appName: 'Cosmos AppShell',\n portalName: 'Demo',\n href: 'https://www.pega.com/',\n imageSrc: 'https://pbs.twimg.com/profile_images/1410341211978752004/pLYjGIa8_bigger.jpg',\n fullImageSrc: 'https://www.pega.com/themes/custom/pegawww_theme/images/pega-logo.svg',\n withSearch: true,\n appHeader: true,\n environmentName: 'dev',\n environmentColor: '#FFDBDE',\n notificationsEmpty: false,\n notificationsLoading: false,\n recentsEmpty: false,\n recentsLoading: false,\n pinsLoading: false\n};\n\nAppShellDemo.argTypes = {\n appName: { control: { type: 'text' } },\n portalName: { control: { type: 'text' } },\n href: { control: { type: 'text' } },\n imageSrc: { control: { type: 'text' } },\n fullImageSrc: { control: { type: 'text' } },\n withSearch: { control: { type: 'boolean' } },\n appHeader: { control: { type: 'boolean' } },\n environmentName: { control: { type: 'text' } },\n environmentColor: { control: { type: 'color' } },\n notificationsEmpty: { control: { type: 'boolean' } },\n notificationsLoading: { control: { type: 'boolean' } },\n recentsEmpty: { control: { type: 'boolean' } },\n recentsLoading: { control: { type: 'boolean' } },\n pinsLoading: { control: { type: 'boolean' } }\n};\n\ninterface ConfigurableAppShellProps {\n navColor?: string;\n headerColor?: string;\n}\n\nexport const ConfigurableAppShell: Story<ConfigurableAppShellProps> = (\n args: ConfigurableAppShellProps\n) => {\n return (\n <Configuration\n theme={{\n components: {\n 'app-shell': {\n nav: {\n 'background-color': args.navColor\n },\n header: {\n 'background-color': args.headerColor\n }\n }\n }\n }}\n >\n <AppShellDemo appHeader />\n </Configuration>\n );\n};\n\nConfigurableAppShell.args = {\n navColor: '#252c32',\n headerColor: '#e2f1ff'\n};\n\nConfigurableAppShell.argTypes = {\n navColor: { control: { type: 'color' } },\n headerColor: { control: { type: 'color' } }\n};\n"]}
1	+ {"version":3,"file":"AppShell.stories.js","sourceRoot":"","sources":["../../../src/core/AppShell/AppShell.stories.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Meta, Story } from '@storybook/react';\nimport { MouseEvent, useContext, FormEvent, useState, useMemo, useRef } from 'react';\n\nimport {\n AppShell,\n AppShellProps,\n AppShellList,\n DrawerItemProps,\n Button,\n DateInput,\n Grid,\n Icon,\n registerIcon,\n Input,\n Select,\n Option,\n Modal,\n ModalManagerContext,\n TextArea,\n ToasterContext,\n ForwardProps,\n useAfterInitialEffect,\n windowIsAvailable,\n Configuration\n} from '@pega/cosmos-react-core';\nimport * as bellSolidIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/bell-solid.icon';\nimport * as clockSolidIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/clock-solid.icon';\n\nimport {\n defaultLinks,\n defaultMainContent,\n defaultNotifications,\n defaultRecents,\n operatorData\n} from './AppShell.mocks';\n\nregisterIcon(bellSolidIcon, clockSolidIcon);\n\nexport default {\n title: 'Core/App Shell',\n component: AppShell,\n id: 'App Shell',\n parameters: {\n layout: 'fullscreen'\n }\n} as Meta;\n\ninterface AppShellStoryProps {\n /** Demo props /\n main?: AppShellProps['main'];\n appInfo?: AppShellProps['appInfo'];\n banners?: AppShellProps['banners'];\n cases?: AppShellProps['cases'];\n caseLinks?: AppShellProps['links'];\n createLinks?: any[];\n recentItems?: any[];\n utils?: AppShellProps['utils'];\n onLinkClick?: (name: string) => void;\n\n /* Storybook controls */\n appName?: AppShellProps['appInfo']['appName'];\n portalName?: AppShellProps['appInfo']['portalName'];\n href?: AppShellProps['appInfo']['href'];\n imageSrc?: AppShellProps['appInfo']['imageSrc'];\n fullImageSrc?: AppShellProps['appInfo']['fullImageSrc'];\n withSearch?: boolean;\n appHeader?: AppShellProps['appHeader'];\n environmentName?: string;\n environmentColor?: string;\n notificationsEmpty?: boolean;\n notificationsLoading?: boolean;\n casesTypesEmpty?: boolean;\n recentsEmpty?: boolean;\n recentsLoading?: boolean;\n pinsLoading?: boolean;\n}\n\nexport const AppShellDemo: Story<AppShellStoryProps> = (args: AppShellStoryProps) => {\n const CreateCaseModal = ({ caseType }: { caseType: string }) => {\n const { ModalContext } = useContext(ModalManagerContext);\n const { dismiss } = useContext(ModalContext);\n const { push: pushToaster } = useContext(ToasterContext);\n\n return (\n <Modal\n as='form'\n heading={`New ${caseType}`}\n actions={\n <>\n <Button onClick={dismiss}>Cancel</Button>\n <Button\n variant='primary'\n type='submit'\n onClick={(e: FormEvent) => {\n e.preventDefault();\n dismiss();\n pushToaster({ content: `${caseType} requested` });\n }}\n >\n Request\n </Button>\n </>\n }\n >\n <Grid container={{ rowGap: 2 }}>\n <DateInput label='Date Requested' info={null} />\n <Select label='Department'>\n <Option value=''>Select…</Option>\n <Option value='Fire'>Fire</Option>\n <Option value='Facilities'>Facilities</Option>\n <Option value='Parks'>Parks</Option>\n <Option value='Sanitation'>Sanitation</Option>\n <Option value='Parking & Traffic'>Parking & Traffic</Option>\n <Option value='Police'>Police</Option>\n <Option value='Courts'>Courts</Option>\n <Option value='Healthcare'>Healthcare</Option>\n <Option value='Energy'>Energy</Option>\n <Option value='Justice department'>Justice department</Option>\n <Option value='Environmental'>Environmental</Option>\n </Select>\n <TextArea label='Purpose of Purchase' />\n <Select label='Desired Make'>\n <Option value=''>Select...</Option>\n <Option value='Ford'>Ford</Option>\n <Option value='Dodge'>Dodge</Option>\n <Option value='Toyota'>Toyota</Option>\n <Option value='Tesla'>Tesla</Option>\n </Select>\n <Input label='Desired Make' />\n <Input\n type='number'\n min='2016'\n max='2021'\n label='Year'\n info='Must be within last 5 years'\n />\n <Input\n type='number'\n min='0.01'\n step='0.01'\n max='50000'\n label='Estimated Cost'\n info='May not exceed $50,000.00'\n />\n </Grid>\n </Modal>\n );\n };\n\n const caseLinks = args.caseLinks \|\| defaultLinks;\n const showSearch = args.withSearch !== undefined ? args.withSearch : true;\n\n const { create: createModal } = useContext(ModalManagerContext);\n const [links, setLinks] = useState<AppShellProps['links']>(caseLinks);\n const [notifications, setNotifications] =\n useState<(DrawerItemProps & ForwardProps)[]>(defaultNotifications);\n const [recents, setRecents] = useState<(DrawerItemProps & ForwardProps)[]>(\n args.recentItems \|\| defaultRecents\n );\n const [numNewNotifications, setNumNewNotifications] = useState(\n notifications.filter(x => x.unread).length\n );\n const [searchVal, setSearchVal] = useState('');\n\n useAfterInitialEffect(() => {\n setLinks(caseLinks);\n }, [caseLinks]);\n\n const linksWithHandlers = useMemo<AppShellProps['links']>(() => {\n return (links \|\| []).map(link => ({\n ...link,\n onClick(e: MouseEvent<HTMLAnchorElement>) {\n e.preventDefault();\n setLinks((prevLinks = []) => {\n return prevLinks.map(prevLink => {\n return { ...link, active: prevLink.name === link.name };\n });\n });\n args.onLinkClick?.(link.name);\n }\n }));\n }, [links]);\n\n const defaultCreateLinks = ['Vehicle Purchase'].map(name => ({\n name,\n onClick: () => {\n createModal(CreateCaseModal, { caseType: name });\n }\n }));\n\n const handleNotificationClick = (passedId: string) => {\n setNotifications(cur =>\n cur.map(({ id, unread, ...item }) => ({\n id,\n unread: passedId === id ? false : unread,\n ...item\n }))\n );\n };\n\n const handlePinToggle = (passedId: string) => {\n setRecents(cur =>\n cur.map(({ id, pinned, ...item }) => ({\n id,\n pinned: passedId === id ? !pinned : pinned,\n ...item\n }))\n );\n };\n\n const notificationViewItems = [\n {\n id: '234',\n items: args.notificationsEmpty ? [] : notifications,\n loading: args.notificationsLoading,\n onItemClick: handleNotificationClick,\n viewAll: {\n href: '#'\n },\n emptyText: 'No notifications'\n }\n ];\n\n const recentViewItems = [\n {\n id: '456',\n items: recents.filter(x => x.pinned),\n loading: args.pinsLoading,\n onItemPinToggle: handlePinToggle,\n viewAll: {\n href: '#'\n },\n displayPins: true,\n headingText: 'Pinned items',\n emptyText: 'No pinned items'\n },\n {\n id: '789',\n items: args.recentsEmpty ? [] : recents,\n loading: args.recentsLoading,\n onItemPinToggle: handlePinToggle,\n viewAll: {\n href: '#'\n },\n displayPins: true,\n headingText: 'Recently viewed',\n emptyText: 'No recents'\n }\n ];\n\n const newNotificationCountTimerRef = useRef(NaN);\n\n const defaultUtils = [\n {\n name: 'Notifications',\n visual: <Icon name='bell-solid' />,\n count: args.notificationsEmpty ? 0 : numNewNotifications,\n drawerView: <AppShellList listView={notificationViewItems} />,\n onDrawerOpen: () => {\n clearInterval(newNotificationCountTimerRef.current);\n setNumNewNotifications(0);\n },\n onDrawerClose: () => {\n if (windowIsAvailable) {\n // Mock new notifications arriving on a minute interval after the drawer closes.\n // Let's face it, you're popular.\n newNotificationCountTimerRef.current = window.setInterval(() => {\n setNumNewNotifications(cur => cur + 2);\n }, 60000);\n }\n }\n },\n {\n name: 'Recents',\n visual: <Icon name='clock-solid' />,\n drawerView: <AppShellList listView={recentViewItems} />\n }\n ];\n\n return (\n <AppShell\n appInfo={\n args.appInfo \|\| {\n href: args.href \|\| 'https://www.pega.com/',\n imageSrc:\n args.imageSrc \|\|\n 'https://pbs.twimg.com/profile_images/1410341211978752004/pLYjGIa8_bigger.jpg',\n fullImageSrc:\n args.fullImageSrc \|\|\n 'https://www.pega.com/themes/custom/pegawww_theme/images/pega-logo.svg',\n appName: args.appName \|\| 'Cosmos AppShell',\n portalName: args.portalName \|\| 'Demo'\n }\n }\n searchInput={\n showSearch\n ? {\n onSearchChange: (value: string) => {\n setSearchVal(value);\n },\n value: searchVal\n }\n : undefined\n }\n appHeader={args.appHeader}\n caseTypes={args.casesTypesEmpty ? [] : args.createLinks \|\| defaultCreateLinks}\n links={linksWithHandlers}\n main={args.main \|\| defaultMainContent}\n cases={args.cases}\n banners={args.banners}\n operator={operatorData}\n utils={args.utils \|\| defaultUtils}\n environment={\n args.environmentName\n ? {\n name: args.environmentName,\n color: args.environmentColor\n }\n : undefined\n }\n />\n );\n};\n\nAppShellDemo.args = {\n appName: 'Cosmos AppShell',\n portalName: 'Demo',\n href: 'https://www.pega.com/',\n imageSrc: 'https://pbs.twimg.com/profile_images/1410341211978752004/pLYjGIa8_bigger.jpg',\n fullImageSrc: 'https://www.pega.com/themes/custom/pegawww_theme/images/pega-logo.svg',\n withSearch: true,\n appHeader: true,\n environmentName: 'dev',\n environmentColor: '#FFDBDE',\n notificationsEmpty: false,\n notificationsLoading: false,\n casesTypesEmpty: false,\n recentsEmpty: false,\n recentsLoading: false,\n pinsLoading: false\n};\n\nAppShellDemo.argTypes = {\n appName: { control: { type: 'text' } },\n portalName: { control: { type: 'text' } },\n href: { control: { type: 'text' } },\n imageSrc: { control: { type: 'text' } },\n fullImageSrc: { control: { type: 'text' } },\n withSearch: { control: { type: 'boolean' } },\n appHeader: { control: { type: 'boolean' } },\n environmentName: { control: { type: 'text' } },\n environmentColor: { control: { type: 'color' } },\n notificationsEmpty: { control: { type: 'boolean' } },\n notificationsLoading: { control: { type: 'boolean' } },\n casesTypesEmpty: { control: { type: 'boolean' } },\n recentsEmpty: { control: { type: 'boolean' } },\n recentsLoading: { control: { type: 'boolean' } },\n pinsLoading: { control: { type: 'boolean' } }\n};\n\ninterface ConfigurableAppShellProps {\n navColor?: string;\n headerColor?: string;\n}\n\nexport const ConfigurableAppShell: Story<ConfigurableAppShellProps> = (\n args: ConfigurableAppShellProps\n) => {\n return (\n <Configuration\n theme={{\n components: {\n 'app-shell': {\n nav: {\n 'background-color': args.navColor\n },\n header: {\n 'background-color': args.headerColor\n }\n }\n }\n }}\n >\n <AppShellDemo appHeader />\n </Configuration>\n );\n};\n\nConfigurableAppShell.args = {\n navColor: '#252c32',\n headerColor: '#e2f1ff'\n};\n\nConfigurableAppShell.argTypes = {\n navColor: { control: { type: 'color' } },\n headerColor: { control: { type: 'color' } }\n};\n"]}

package/lib/core/FieldGroup/FieldGroup.stories.d.ts CHANGED Viewed

@@ -4,8 +4,10 @@ export default _default;
 interface FieldGroupStoryProps {
     firstGroupName: string;
     firstGroupCollapsible: boolean;
+    firstGroupDescription: string;
     secondGroupName: string;
     secondGroupCollapsible: boolean;
+    secondGroupDescription: string;
 }
 export declare const FieldGroupDemo: Story<FieldGroupStoryProps>;
 //# sourceMappingURL=FieldGroup.stories.d.ts.map

package/lib/core/FieldGroup/FieldGroup.stories.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"FieldGroup.stories.d.ts","sourceRoot":"","sources":["../../../src/core/FieldGroup/FieldGroup.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,kBAAkB,CAAC;;AAY/C,wBAGU;AAEV,UAAU,oBAAoB;IAC5B,cAAc,EAAE,MAAM,CAAC;IACvB,qBAAqB,EAAE,OAAO,CAAC;IAC/B,eAAe,EAAE,MAAM,CAAC;IACxB,sBAAsB,EAAE,OAAO,CAAC;~~CACjC~~;AAED,eAAO,MAAM,cAAc,EAAE,KAAK,CAAC,oBAAoB,~~CAmCtD~~,CAAC"}
1	+ {"version":3,"file":"FieldGroup.stories.d.ts","sourceRoot":"","sources":["../../../src/core/FieldGroup/FieldGroup.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,kBAAkB,CAAC;;AAY/C,wBAGU;AAEV,UAAU,oBAAoB;IAC5B,cAAc,EAAE,MAAM,CAAC;IACvB,qBAAqB,EAAE,OAAO,CAAC;IAC/B,qBAAqB,EAAE,MAAM,CAAC;IAC9B,eAAe,EAAE,MAAM,CAAC;IACxB,sBAAsB,EAAE,OAAO,CAAC;IAChC,sBAAsB,EAAE,MAAM,CAAC;CAChC;AAED,eAAO,MAAM,cAAc,EAAE,KAAK,CAAC,oBAAoB,CA2CtD,CAAC"}

package/lib/core/FieldGroup/FieldGroup.stories.js CHANGED Viewed

@@ -5,18 +5,22 @@ export default {
     component: FieldGroup
 };
 export const FieldGroupDemo = (args) => {
-    return (_jsxs(Grid, { container: { rowGap: 1 }, children: [_jsx(FieldGroup, { name: args.firstGroupName, collapsible: args.firstGroupCollapsible, children: _jsxs(Grid, { container: { gap: 1, cols: 'repeat(auto-fit, minmax(min(40ch, 100%), 1fr))' }, children: [_jsx(Input, { type: 'text', label: 'Text 1' }, void 0), _jsxs(Select, { label: 'Select 1', children: [_jsx(Option, { value: 'A', children: "Option 1A" }, void 0), _jsx(Option, { value: 'B', children: "Option 1B" }, void 0)] }, void 0), _jsx(DateInput, { label: 'Date 1' }, void 0), _jsx(Grid, { item: { colStart: '1', colEnd: '-1' }, children: _jsx(TextArea, { label: 'TextArea 1' }, void 0) }, void 0), _jsx(Input, { required: true, type: 'text', label: 'Required 1' }, void 0), _jsx(Input, { disabled: true, type: 'text', label: 'Disabled 1' }, void 0)] }, void 0) }, void 0), _jsx(FieldGroup, { name: args.secondGroupName, collapsible: args.secondGroupCollapsible, children: _jsxs(Grid, { container: { gap: 1, cols: 'repeat(auto-fill, minmax(min(40ch, 100%), 1fr))' }, children: [_jsx(Input, { type: 'text', label: 'Text 2' }, void 0), _jsxs(Select, { label: 'Select 2', children: [_jsx(Option, { value: 'A', children: "Option 2A" }, void 0), _jsx(Option, { value: 'B', children: "Option 2B" }, void 0)] }, void 0), _jsx(DateInput, { label: 'Date 2' }, void 0), _jsx(Grid, { item: { colStart: '1', colEnd: '-1' }, children: _jsx(TextArea, { label: 'TextArea 2' }, void 0) }, void 0), _jsx(Input, { required: true, type: 'text', label: 'Required 2' }, void 0), _jsx(Input, { disabled: true, type: 'text', label: 'Disabled 2' }, void 0)] }, void 0) }, void 0)] }, void 0));
+    return (_jsxs(Grid, { container: { rowGap: 1 }, children: [_jsx(FieldGroup, { name: args.firstGroupName, description: args.firstGroupDescription, collapsible: args.firstGroupCollapsible, children: _jsxs(Grid, { container: { gap: 1, cols: 'repeat(auto-fit, minmax(min(40ch, 100%), 1fr))' }, children: [_jsx(Input, { type: 'text', label: 'Text 1' }, void 0), _jsxs(Select, { label: 'Select 1', children: [_jsx(Option, { value: 'A', children: "Option 1A" }, void 0), _jsx(Option, { value: 'B', children: "Option 1B" }, void 0)] }, void 0), _jsx(DateInput, { label: 'Date 1' }, void 0), _jsx(Grid, { item: { colStart: '1', colEnd: '-1' }, children: _jsx(TextArea, { label: 'TextArea 1' }, void 0) }, void 0), _jsx(Input, { required: true, type: 'text', label: 'Required 1' }, void 0), _jsx(Input, { disabled: true, type: 'text', label: 'Disabled 1' }, void 0)] }, void 0) }, void 0), _jsx(FieldGroup, { name: args.secondGroupName, description: args.secondGroupDescription, collapsible: args.secondGroupCollapsible, children: _jsxs(Grid, { container: { gap: 1, cols: 'repeat(auto-fill, minmax(min(40ch, 100%), 1fr))' }, children: [_jsx(Input, { type: 'text', label: 'Text 2' }, void 0), _jsxs(Select, { label: 'Select 2', children: [_jsx(Option, { value: 'A', children: "Option 2A" }, void 0), _jsx(Option, { value: 'B', children: "Option 2B" }, void 0)] }, void 0), _jsx(DateInput, { label: 'Date 2' }, void 0), _jsx(Grid, { item: { colStart: '1', colEnd: '-1' }, children: _jsx(TextArea, { label: 'TextArea 2' }, void 0) }, void 0), _jsx(Input, { required: true, type: 'text', label: 'Required 2' }, void 0), _jsx(Input, { disabled: true, type: 'text', label: 'Disabled 2' }, void 0)] }, void 0) }, void 0)] }, void 0));
 };
 FieldGroupDemo.args = {
     firstGroupName: 'Field group 1',
     firstGroupCollapsible: true,
+    firstGroupDescription: '',
     secondGroupName: 'Field group 2',
-    secondGroupCollapsible: true
+    secondGroupCollapsible: true,
+    secondGroupDescription: ''
 };
 FieldGroupDemo.argTypes = {
     firstGroupName: { control: { type: 'text' } },
     firstGroupCollapsible: { control: { type: 'boolean' } },
+    firstGroupDescription: { control: { type: 'text' } },
     secondGroupName: { control: { type: 'text' } },
-    secondGroupCollapsible: { control: { type: 'boolean' } }
+    secondGroupCollapsible: { control: { type: 'boolean' } },
+    secondGroupDescription: { control: { type: 'text' } }
 };
 //# sourceMappingURL=FieldGroup.stories.js.map

package/lib/core/FieldGroup/FieldGroup.stories.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"FieldGroup.stories.js","sourceRoot":"","sources":["../../../src/core/FieldGroup/FieldGroup.stories.tsx"],"names":[],"mappings":";AAEA,OAAO,EACL,SAAS,EACT,UAAU,EACV,IAAI,EACJ,KAAK,EACL,MAAM,EACN,MAAM,EACN,QAAQ,EACT,MAAM,yBAAyB,CAAC;AAEjC,eAAe;IACb,KAAK,EAAE,iBAAiB;IACxB,SAAS,EAAE,UAAU;CACd,CAAC;~~AASV~~,MAAM,CAAC,MAAM,cAAc,GAAgC,CAAC,IAA0B,EAAE,EAAE;IACxF,OAAO,CACL,MAAC,IAAI,IAAC,SAAS,EAAE,EAAE,MAAM,EAAE,CAAC,EAAE,aAC5B,KAAC,UAAU,~~IAAC~~,IAAI,EAAE,IAAI,CAAC,cAAc,EAAE,WAAW,EAAE,IAAI,CAAC,qBAAqB,~~YAC5E~~,MAAC,IAAI,IAAC,SAAS,EAAE,EAAE,GAAG,EAAE,CAAC,EAAE,IAAI,EAAE,gDAAgD,EAAE,aACjF,KAAC,KAAK,IAAC,IAAI,EAAC,MAAM,EAAC,KAAK,EAAC,QAAQ,WAAG,EACpC,MAAC,MAAM,IAAC,KAAK,EAAC,UAAU,aACtB,KAAC,MAAM,IAAC,KAAK,EAAC,GAAG,kCAAmB,EACpC,KAAC,MAAM,IAAC,KAAK,EAAC,GAAG,kCAAmB,YAC7B,EACT,KAAC,SAAS,IAAC,KAAK,EAAC,QAAQ,WAAG,EAC5B,KAAC,IAAI,IAAC,IAAI,EAAE,EAAE,QAAQ,EAAE,GAAG,EAAE,MAAM,EAAE,IAAI,EAAE,YACzC,KAAC,QAAQ,IAAC,KAAK,EAAC,YAAY,WAAG,WAC1B,EACP,KAAC,KAAK,IAAC,QAAQ,QAAC,IAAI,EAAC,MAAM,EAAC,KAAK,EAAC,YAAY,WAAG,EACjD,KAAC,KAAK,IAAC,QAAQ,QAAC,IAAI,EAAC,MAAM,EAAC,KAAK,EAAC,YAAY,WAAG,YAC5C,WACI,EACb,KAAC,UAAU,~~IAAC~~,IAAI,EAAE,IAAI,CAAC,eAAe,EAAE,WAAW,EAAE,IAAI,CAAC,sBAAsB,~~YAC9E~~,MAAC,IAAI,IAAC,SAAS,EAAE,EAAE,GAAG,EAAE,CAAC,EAAE,IAAI,EAAE,iDAAiD,EAAE,aAClF,KAAC,KAAK,IAAC,IAAI,EAAC,MAAM,EAAC,KAAK,EAAC,QAAQ,WAAG,EACpC,MAAC,MAAM,IAAC,KAAK,EAAC,UAAU,aACtB,KAAC,MAAM,IAAC,KAAK,EAAC,GAAG,kCAAmB,EACpC,KAAC,MAAM,IAAC,KAAK,EAAC,GAAG,kCAAmB,YAC7B,EACT,KAAC,SAAS,IAAC,KAAK,EAAC,QAAQ,WAAG,EAC5B,KAAC,IAAI,IAAC,IAAI,EAAE,EAAE,QAAQ,EAAE,GAAG,EAAE,MAAM,EAAE,IAAI,EAAE,YACzC,KAAC,QAAQ,IAAC,KAAK,EAAC,YAAY,WAAG,WAC1B,EACP,KAAC,KAAK,IAAC,QAAQ,QAAC,IAAI,EAAC,MAAM,EAAC,KAAK,EAAC,YAAY,WAAG,EACjD,KAAC,KAAK,IAAC,QAAQ,QAAC,IAAI,EAAC,MAAM,EAAC,KAAK,EAAC,YAAY,WAAG,YAC5C,WACI,YACR,CACR,CAAC;AACJ,CAAC,CAAC;AAEF,cAAc,CAAC,IAAI,GAAG;IACpB,cAAc,EAAE,eAAe;IAC/B,qBAAqB,EAAE,IAAI;IAC3B,eAAe,EAAE,eAAe;IAChC,sBAAsB,EAAE,IAAI;~~CAC7B~~,CAAC;AAEF,cAAc,CAAC,QAAQ,GAAG;IACxB,cAAc,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE,EAAE;IAC7C,qBAAqB,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE,EAAE;IACvD,eAAe,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE,EAAE;IAC9C,sBAAsB,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE,EAAE;~~CACzD~~,CAAC","sourcesContent":["import { Meta, Story } from '@storybook/react';\n\nimport {\n DateInput,\n FieldGroup,\n Grid,\n Input,\n Select,\n Option,\n TextArea\n} from '@pega/cosmos-react-core';\n\nexport default {\n title: 'Core/FieldGroup',\n component: FieldGroup\n} as Meta;\n\ninterface FieldGroupStoryProps {\n firstGroupName: string;\n firstGroupCollapsible: boolean;\n secondGroupName: string;\n secondGroupCollapsible: boolean;\n}\n\nexport const FieldGroupDemo: Story<FieldGroupStoryProps> = (args: FieldGroupStoryProps) => {\n return (\n <Grid container={{ rowGap: 1 }}>\n <FieldGroup name={args.firstGroupName} collapsible={args.firstGroupCollapsible}>\n <Grid container={{ gap: 1, cols: 'repeat(auto-fit, minmax(min(40ch, 100%), 1fr))' }}>\n <Input type='text' label='Text 1' />\n <Select label='Select 1'>\n <Option value='A'>Option 1A</Option>\n <Option value='B'>Option 1B</Option>\n </Select>\n <DateInput label='Date 1' />\n <Grid item={{ colStart: '1', colEnd: '-1' }}>\n <TextArea label='TextArea 1' />\n </Grid>\n <Input required type='text' label='Required 1' />\n <Input disabled type='text' label='Disabled 1' />\n </Grid>\n </FieldGroup>\n <FieldGroup name={args.secondGroupName} collapsible={args.secondGroupCollapsible}>\n <Grid container={{ gap: 1, cols: 'repeat(auto-fill, minmax(min(40ch, 100%), 1fr))' }}>\n <Input type='text' label='Text 2' />\n <Select label='Select 2'>\n <Option value='A'>Option 2A</Option>\n <Option value='B'>Option 2B</Option>\n </Select>\n <DateInput label='Date 2' />\n <Grid item={{ colStart: '1', colEnd: '-1' }}>\n <TextArea label='TextArea 2' />\n </Grid>\n <Input required type='text' label='Required 2' />\n <Input disabled type='text' label='Disabled 2' />\n </Grid>\n </FieldGroup>\n </Grid>\n );\n};\n\nFieldGroupDemo.args = {\n firstGroupName: 'Field group 1',\n firstGroupCollapsible: true,\n secondGroupName: 'Field group 2',\n secondGroupCollapsible: true\n};\n\nFieldGroupDemo.argTypes = {\n firstGroupName: { control: { type: 'text' } },\n firstGroupCollapsible: { control: { type: 'boolean' } },\n secondGroupName: { control: { type: 'text' } },\n secondGroupCollapsible: { control: { type: 'boolean' } }\n};\n"]}
1	+ {"version":3,"file":"FieldGroup.stories.js","sourceRoot":"","sources":["../../../src/core/FieldGroup/FieldGroup.stories.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Meta, Story } from '@storybook/react';\n\nimport {\n DateInput,\n FieldGroup,\n Grid,\n Input,\n Select,\n Option,\n TextArea\n} from '@pega/cosmos-react-core';\n\nexport default {\n title: 'Core/FieldGroup',\n component: FieldGroup\n} as Meta;\n\ninterface FieldGroupStoryProps {\n firstGroupName: string;\n firstGroupCollapsible: boolean;\n firstGroupDescription: string;\n secondGroupName: string;\n secondGroupCollapsible: boolean;\n secondGroupDescription: string;\n}\n\nexport const FieldGroupDemo: Story<FieldGroupStoryProps> = (args: FieldGroupStoryProps) => {\n return (\n <Grid container={{ rowGap: 1 }}>\n <FieldGroup\n name={args.firstGroupName}\n description={args.firstGroupDescription}\n collapsible={args.firstGroupCollapsible}\n >\n <Grid container={{ gap: 1, cols: 'repeat(auto-fit, minmax(min(40ch, 100%), 1fr))' }}>\n <Input type='text' label='Text 1' />\n <Select label='Select 1'>\n <Option value='A'>Option 1A</Option>\n <Option value='B'>Option 1B</Option>\n </Select>\n <DateInput label='Date 1' />\n <Grid item={{ colStart: '1', colEnd: '-1' }}>\n <TextArea label='TextArea 1' />\n </Grid>\n <Input required type='text' label='Required 1' />\n <Input disabled type='text' label='Disabled 1' />\n </Grid>\n </FieldGroup>\n <FieldGroup\n name={args.secondGroupName}\n description={args.secondGroupDescription}\n collapsible={args.secondGroupCollapsible}\n >\n <Grid container={{ gap: 1, cols: 'repeat(auto-fill, minmax(min(40ch, 100%), 1fr))' }}>\n <Input type='text' label='Text 2' />\n <Select label='Select 2'>\n <Option value='A'>Option 2A</Option>\n <Option value='B'>Option 2B</Option>\n </Select>\n <DateInput label='Date 2' />\n <Grid item={{ colStart: '1', colEnd: '-1' }}>\n <TextArea label='TextArea 2' />\n </Grid>\n <Input required type='text' label='Required 2' />\n <Input disabled type='text' label='Disabled 2' />\n </Grid>\n </FieldGroup>\n </Grid>\n );\n};\n\nFieldGroupDemo.args = {\n firstGroupName: 'Field group 1',\n firstGroupCollapsible: true,\n firstGroupDescription: '',\n secondGroupName: 'Field group 2',\n secondGroupCollapsible: true,\n secondGroupDescription: ''\n};\n\nFieldGroupDemo.argTypes = {\n firstGroupName: { control: { type: 'text' } },\n firstGroupCollapsible: { control: { type: 'boolean' } },\n firstGroupDescription: { control: { type: 'text' } },\n secondGroupName: { control: { type: 'text' } },\n secondGroupCollapsible: { control: { type: 'boolean' } },\n secondGroupDescription: { control: { type: 'text' } }\n};\n"]}

package/lib/core/File/FileDisplay.stories.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"FileDisplay.stories.d.ts","sourceRoot":"","sources":["../../../src/core/File/FileDisplay.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,kBAAkB,CAAC;AAG/C,OAAO,EAEL,gBAAgB,~~EAQhB~~,mBAAmB,EAEpB,MAAM,yBAAyB,CAAC;;AAEjC,wBAaU;AAEV,UAAU,oBAAoB;IAC5B,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,YAAY,CAAC,EAAE,OAAO,CAAC;CACxB;AAED,eAAO,MAAM,gBAAgB,EAAE,KAAK,CAAC,oBAAoB,CAmGxD,CAAC;AAUF,eAAO,MAAM,eAAe,EAAE,KAAK,CAAC,gBAAgB,GAAG,oBAAoB,~~CAsC1E~~,CAAC;AAYF,UAAU,uBAAwB,SAAQ,oBAAoB;IAC5D,IAAI,EAAE,mBAAmB,CAAC,MAAM,CAAC,CAAC;IAClC,IAAI,CAAC,EAAE,mBAAmB,CAAC,MAAM,CAAC,CAAC;IACnC,KAAK,CAAC,EAAE,mBAAmB,CAAC,OAAO,CAAC,CAAC;IACrC,QAAQ,CAAC,EAAE,mBAAmB,CAAC,UAAU,CAAC,CAAC;CAC5C;AAED,eAAO,MAAM,kBAAkB,EAAE,KAAK,CAAC,uBAAuB,~~CAwC7D~~,CAAC"}
1	+ {"version":3,"file":"FileDisplay.stories.d.ts","sourceRoot":"","sources":["../../../src/core/File/FileDisplay.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,kBAAkB,CAAC;AAG/C,OAAO,EAEL,gBAAgB,EAIhB,mBAAmB,EAEpB,MAAM,yBAAyB,CAAC;;AAEjC,wBAaU;AAEV,UAAU,oBAAoB;IAC5B,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,YAAY,CAAC,EAAE,OAAO,CAAC;CACxB;AAED,eAAO,MAAM,gBAAgB,EAAE,KAAK,CAAC,oBAAoB,CAmGxD,CAAC;AAUF,eAAO,MAAM,eAAe,EAAE,KAAK,CAAC,gBAAgB,GAAG,oBAAoB,CAyB1E,CAAC;AAYF,UAAU,uBAAwB,SAAQ,oBAAoB;IAC5D,IAAI,EAAE,mBAAmB,CAAC,MAAM,CAAC,CAAC;IAClC,IAAI,CAAC,EAAE,mBAAmB,CAAC,MAAM,CAAC,CAAC;IACnC,KAAK,CAAC,EAAE,mBAAmB,CAAC,OAAO,CAAC,CAAC;IACrC,QAAQ,CAAC,EAAE,mBAAmB,CAAC,UAAU,CAAC,CAAC;CAC5C;AAED,eAAO,MAAM,kBAAkB,EAAE,KAAK,CAAC,uBAAuB,CA2B7D,CAAC"}

package/lib/core/File/FileDisplay.stories.js CHANGED Viewed

@@ -1,6 +1,6 @@
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import { useContext, useState } from 'react';
-import { FileDisplay, FieldValueList, Image, Popover, ToasterContext, useElement, useOuterEvent, FileUploadItem } from '@pega/cosmos-react-core';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useContext } from 'react';
+import { FileDisplay, FieldValueList, ToasterContext, FileUploadItem } from '@pega/cosmos-react-core';
 export default {
     title: 'Core/File/Display',
     component: FileDisplay,
@@ -69,21 +69,15 @@ FileDisplayTypes.argTypes = {
     withDisplayText: { control: { type: 'boolean' } }
 };
 export const FileDisplayDemo = (args) => {
-    const [buttonEl, setButtonEl] = useElement();
-    const [popoverEl, setPopoverEl] = useElement();
-    const [showPreview, setShowPreview] = useState(false);
-    useOuterEvent('click', [buttonEl, popoverEl], () => setShowPreview(false));
-    const imageSrc = 'https://www.pega.com/sites/default/files/styles/480/public/media/images/2021-02/pwi-2021-prevcard.jpg';
-    const handlePreview = args.withPreview ? () => setShowPreview(true) : undefined;
+    const { push } = useContext(ToasterContext);
+    const handlePreview = args.withPreview
+        ? (url) => push({ content: `Previewed ${url}` })
+        : undefined;
     const handleDownload = args.withDownload
-        ? () => {
-            const element = document.createElement('a');
-            element.href = imageSrc;
-            element.download = 'cosmos_file_display_download.jpg';
-            element.click();
-        }
+        ? (url) => push({ content: `Downloaded ${url}` })
         : undefined;
-    return (_jsxs(_Fragment, { children: [_jsx(FileDisplay, { ref: setButtonEl, variant: args.variant, displayText: args.displayText, value: args.withValue ? imageSrc : undefined, onPreview: handlePreview, onDownload: handleDownload }, void 0), _jsx(Popover, { ref: setPopoverEl, show: showPreview, target: buttonEl, children: _jsx(Image, { src: imageSrc, alt: args.displayText || 'Pega World iNspire' }, void 0) }, void 0)] }, void 0));
+    const imageSrc = 'https://www.pega.com/sites/default/files/styles/480/public/media/images/2021-02/pwi-2021-prevcard.jpg';
+    return (_jsx(FileDisplay, { variant: args.variant, displayText: args.displayText, value: args.withValue ? imageSrc : undefined, onPreview: handlePreview, onDownload: handleDownload }, void 0));
 };
 FileDisplayDemo.args = {
     variant: 'file',
@@ -94,21 +88,15 @@ FileDisplayDemo.argTypes = {
     displayText: { control: { type: 'text' } }
 };
 export const FileUploadItemDemo = (args) => {
-    const [fileEl, setFileEl] = useElement();
-    const [popoverEl, setPopoverEl] = useElement();
-    const [showPreview, setShowPreview] = useState(false);
-    useOuterEvent('click', [fileEl, popoverEl], () => setShowPreview(false));
-    const imageSrc = 'https://www.pega.com/sites/default/files/styles/480/public/media/images/2021-02/pwi-2021-prevcard.jpg';
-    const handlePreview = args.withPreview ? () => setShowPreview(true) : undefined;
+    const { push } = useContext(ToasterContext);
+    const handlePreview = args.withPreview
+        ? (url) => push({ content: `Previewed ${url}` })
+        : undefined;
     const handleDownload = args.withDownload
-        ? () => {
-            const element = document.createElement('a');
-            element.href = imageSrc;
-            element.download = 'cosmos_file_display_download.jpg';
-            element.click();
-        }
+        ? (url) => push({ content: `Downloaded ${url}` })
         : undefined;
-    return (_jsxs(_Fragment, { children: [_jsx(FileUploadItem, { ref: setFileEl, name: args.name, meta: args.meta, error: args.error, progress: args.progress, thumbnail: imageSrc, onPreview: handlePreview, onDownload: handleDownload }, void 0), _jsx(Popover, { ref: setPopoverEl, show: showPreview, target: fileEl, strategy: 'fixed', children: _jsx(Image, { src: imageSrc, alt: args.name }, void 0) }, void 0)] }, void 0));
+    const imageSrc = 'https://www.pega.com/sites/default/files/styles/480/public/media/images/2021-02/pwi-2021-prevcard.jpg';
+    return (_jsx(FileUploadItem, { name: args.name, meta: args.meta, error: args.error, progress: args.progress, thumbnail: imageSrc, onPreview: handlePreview, onDownload: handleDownload }, void 0));
 };
 FileUploadItemDemo.args = {
     name: 'Pega World iNspire',

package/lib/core/File/FileDisplay.stories.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"FileDisplay.stories.js","sourceRoot":"","sources":["../../../src/core/File/FileDisplay.stories.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Meta, Story } from '@storybook/react';\nimport { useContext, useState } from 'react';\n\nimport {\n FileDisplay,\n FileDisplayProps,\n FileItemProps,\n FieldValueList,\n Image,\n Popover,\n ToasterContext,\n useElement,\n useOuterEvent,\n FileUploadItemProps,\n FileUploadItem\n} from '@pega/cosmos-react-core';\n\nexport default {\n title: 'Core/File/Display',\n component: FileDisplay,\n args: {\n withValue: true,\n withPreview: true,\n withDownload: true\n },\n argTypes: {\n withValue: { control: { type: 'boolean' } },\n withPreview: { control: { type: 'boolean' } },\n withDownload: { control: { type: 'boolean' } }\n }\n} as Meta;\n\ninterface FileDisplayDemoProps {\n withDisplayText?: boolean;\n withValue?: boolean;\n withPreview?: boolean;\n withDownload?: boolean;\n}\n\nexport const FileDisplayTypes: Story<FileDisplayDemoProps> = (args: FileDisplayDemoProps) => {\n const { push } = useContext(ToasterContext);\n\n const handlePreview = args.withPreview\n ? (url: FileItemProps['url']) => push({ content: `Previewed ${url}` })\n : undefined;\n\n const handleDownload = args.withDownload\n ? (url: FileItemProps['url']) => push({ content: `Downloaded ${url}` })\n : undefined;\n\n const fields = [\n {\n id: '1',\n name: 'Image file',\n value: (\n <FileDisplay\n displayText={args.withDisplayText ? 'image.jpg' : undefined}\n value={args.withValue ? 'https://pbs.twimg.com/media/ENNN5PAXkAE-hag.jpg' : undefined}\n onPreview={handlePreview}\n onDownload={handleDownload}\n />\n )\n },\n {\n id: '2',\n name: 'Video file',\n value: (\n <FileDisplay\n displayText={args.withDisplayText ? 'video.avi' : undefined}\n value={args.withValue ? 'https://pega.com/media/some-video.avi' : undefined}\n onPreview={handlePreview}\n onDownload={handleDownload}\n />\n )\n },\n {\n id: '3',\n name: 'Audio file',\n value: (\n <FileDisplay\n displayText={args.withDisplayText ? 'recording.mp3' : undefined}\n value={args.withValue ? 'https://pega.com/media/sprint-review-recording.mp3' : undefined}\n onPreview={handlePreview}\n onDownload={handleDownload}\n />\n )\n },\n {\n id: '4',\n name: 'Document file',\n value: (\n <FileDisplay\n displayText={args.withDisplayText ? 'document.doc' : undefined}\n value={args.withValue ? 'https://pega.com/media/document.doc' : undefined}\n onPreview={handlePreview}\n onDownload={handleDownload}\n />\n )\n },\n {\n id: '5',\n name: 'PDF file',\n value: (\n <FileDisplay\n displayText={args.withDisplayText ? 'invoice.pdf' : undefined}\n value={args.withValue ? 'https://pega.com/media/invoice.pdf' : undefined}\n onPreview={handlePreview}\n onDownload={handleDownload}\n />\n )\n },\n {\n id: '6',\n name: 'Presentation file',\n value: (\n <FileDisplay\n displayText={args.withDisplayText ? 'review.pps' : undefined}\n value={args.withValue ? 'https://pega.com/media/review.pps' : undefined}\n onPreview={handlePreview}\n onDownload={handleDownload}\n />\n )\n },\n {\n id: '7',\n name: 'Spreadsheet file',\n value: (\n <FileDisplay\n displayText={args.withDisplayText ? 'welfare.xlsx' : undefined}\n value={args.withValue ? 'https://pega.com/media/welfare.xlsx' : undefined}\n onPreview={handlePreview}\n onDownload={handleDownload}\n />\n )\n }\n ];\n\n return <FieldValueList fields={fields} />;\n};\n\nFileDisplayTypes.args = {\n withDisplayText: true\n};\n\nFileDisplayTypes.argTypes = {\n withDisplayText: { control: { type: 'boolean' } }\n};\n\nexport const FileDisplayDemo: Story<FileDisplayProps & FileDisplayDemoProps> = (\n args: FileDisplayProps & FileDisplayDemoProps\n) => {\n const [buttonEl, setButtonEl] = useElement();\n const [popoverEl, setPopoverEl] = useElement();\n const [showPreview, setShowPreview] = useState(false);\n\n useOuterEvent('click', [buttonEl, popoverEl], () => setShowPreview(false));\n\n const imageSrc =\n 'https://www.pega.com/sites/default/files/styles/480/public/media/images/2021-02/pwi-2021-prevcard.jpg';\n\n const handlePreview = args.withPreview ? () => setShowPreview(true) : undefined;\n\n const handleDownload = args.withDownload\n ? () => {\n const element = document.createElement('a');\n element.href = imageSrc;\n element.download = 'cosmos_file_display_download.jpg';\n element.click();\n }\n : undefined;\n\n return (\n <>\n <FileDisplay\n ref={setButtonEl}\n variant={args.variant}\n displayText={args.displayText}\n value={args.withValue ? imageSrc : undefined}\n onPreview={handlePreview}\n onDownload={handleDownload}\n />\n <Popover ref={setPopoverEl} show={showPreview} target={buttonEl}>\n <Image src={imageSrc} alt={args.displayText \|\| 'Pega World iNspire'} />\n </Popover>\n </>\n );\n};\n\nFileDisplayDemo.args = {\n variant: 'file',\n displayText: 'Pega World iNspire'\n};\n\nFileDisplayDemo.argTypes = {\n variant: { options: ['file', 'text', 'link'], control: { type: 'radio' } },\n displayText: { control: { type: 'text' } }\n};\n\ninterface FileUploadItemDemoProps extends FileDisplayDemoProps {\n name: FileUploadItemProps['name'];\n meta?: FileUploadItemProps['meta'];\n error?: FileUploadItemProps['error'];\n progress?: FileUploadItemProps['progress'];\n}\n\nexport const FileUploadItemDemo: Story<FileUploadItemDemoProps> = (\n args: FileUploadItemDemoProps\n) => {\n const [fileEl, setFileEl] = useElement();\n const [popoverEl, setPopoverEl] = useElement();\n const [showPreview, setShowPreview] = useState(false);\n\n useOuterEvent('click', [fileEl, popoverEl], () => setShowPreview(false));\n\n const imageSrc =\n 'https://www.pega.com/sites/default/files/styles/480/public/media/images/2021-02/pwi-2021-prevcard.jpg';\n\n const handlePreview = args.withPreview ? () => setShowPreview(true) : undefined;\n\n const handleDownload = args.withDownload\n ? () => {\n const element = document.createElement('a');\n element.href = imageSrc;\n element.download = 'cosmos_file_display_download.jpg';\n element.click();\n }\n : undefined;\n\n return (\n <>\n <FileUploadItem\n ref={setFileEl}\n name={args.name}\n meta={args.meta}\n error={args.error}\n progress={args.progress}\n thumbnail={imageSrc}\n onPreview={handlePreview}\n onDownload={handleDownload}\n />\n <Popover ref={setPopoverEl} show={showPreview} target={fileEl} strategy='fixed'>\n <Image src={imageSrc} alt={args.name} />\n </Popover>\n </>\n );\n};\n\nFileUploadItemDemo.args = {\n name: 'Pega World iNspire',\n meta: 'Some additional information',\n error: false,\n progress: 100\n};\n\nFileUploadItemDemo.argTypes = {\n withValue: { table: { disable: true } },\n name: { control: { type: 'text' } },\n meta: { control: { type: 'text' } },\n error: { control: { type: 'boolean' } },\n progress: { control: { type: 'number' } }\n};\n"]}
1	+ {"version":3,"file":"FileDisplay.stories.js","sourceRoot":"","sources":["../../../src/core/File/FileDisplay.stories.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Meta, Story } from '@storybook/react';\nimport { useContext } from 'react';\n\nimport {\n FileDisplay,\n FileDisplayProps,\n FileItemProps,\n FieldValueList,\n ToasterContext,\n FileUploadItemProps,\n FileUploadItem\n} from '@pega/cosmos-react-core';\n\nexport default {\n title: 'Core/File/Display',\n component: FileDisplay,\n args: {\n withValue: true,\n withPreview: true,\n withDownload: true\n },\n argTypes: {\n withValue: { control: { type: 'boolean' } },\n withPreview: { control: { type: 'boolean' } },\n withDownload: { control: { type: 'boolean' } }\n }\n} as Meta;\n\ninterface FileDisplayDemoProps {\n withDisplayText?: boolean;\n withValue?: boolean;\n withPreview?: boolean;\n withDownload?: boolean;\n}\n\nexport const FileDisplayTypes: Story<FileDisplayDemoProps> = (args: FileDisplayDemoProps) => {\n const { push } = useContext(ToasterContext);\n\n const handlePreview = args.withPreview\n ? (url: FileItemProps['url']) => push({ content: `Previewed ${url}` })\n : undefined;\n\n const handleDownload = args.withDownload\n ? (url: FileItemProps['url']) => push({ content: `Downloaded ${url}` })\n : undefined;\n\n const fields = [\n {\n id: '1',\n name: 'Image file',\n value: (\n <FileDisplay\n displayText={args.withDisplayText ? 'image.jpg' : undefined}\n value={args.withValue ? 'https://pbs.twimg.com/media/ENNN5PAXkAE-hag.jpg' : undefined}\n onPreview={handlePreview}\n onDownload={handleDownload}\n />\n )\n },\n {\n id: '2',\n name: 'Video file',\n value: (\n <FileDisplay\n displayText={args.withDisplayText ? 'video.avi' : undefined}\n value={args.withValue ? 'https://pega.com/media/some-video.avi' : undefined}\n onPreview={handlePreview}\n onDownload={handleDownload}\n />\n )\n },\n {\n id: '3',\n name: 'Audio file',\n value: (\n <FileDisplay\n displayText={args.withDisplayText ? 'recording.mp3' : undefined}\n value={args.withValue ? 'https://pega.com/media/sprint-review-recording.mp3' : undefined}\n onPreview={handlePreview}\n onDownload={handleDownload}\n />\n )\n },\n {\n id: '4',\n name: 'Document file',\n value: (\n <FileDisplay\n displayText={args.withDisplayText ? 'document.doc' : undefined}\n value={args.withValue ? 'https://pega.com/media/document.doc' : undefined}\n onPreview={handlePreview}\n onDownload={handleDownload}\n />\n )\n },\n {\n id: '5',\n name: 'PDF file',\n value: (\n <FileDisplay\n displayText={args.withDisplayText ? 'invoice.pdf' : undefined}\n value={args.withValue ? 'https://pega.com/media/invoice.pdf' : undefined}\n onPreview={handlePreview}\n onDownload={handleDownload}\n />\n )\n },\n {\n id: '6',\n name: 'Presentation file',\n value: (\n <FileDisplay\n displayText={args.withDisplayText ? 'review.pps' : undefined}\n value={args.withValue ? 'https://pega.com/media/review.pps' : undefined}\n onPreview={handlePreview}\n onDownload={handleDownload}\n />\n )\n },\n {\n id: '7',\n name: 'Spreadsheet file',\n value: (\n <FileDisplay\n displayText={args.withDisplayText ? 'welfare.xlsx' : undefined}\n value={args.withValue ? 'https://pega.com/media/welfare.xlsx' : undefined}\n onPreview={handlePreview}\n onDownload={handleDownload}\n />\n )\n }\n ];\n\n return <FieldValueList fields={fields} />;\n};\n\nFileDisplayTypes.args = {\n withDisplayText: true\n};\n\nFileDisplayTypes.argTypes = {\n withDisplayText: { control: { type: 'boolean' } }\n};\n\nexport const FileDisplayDemo: Story<FileDisplayProps & FileDisplayDemoProps> = (\n args: FileDisplayProps & FileDisplayDemoProps\n) => {\n const { push } = useContext(ToasterContext);\n\n const handlePreview = args.withPreview\n ? (url: FileItemProps['url']) => push({ content: `Previewed ${url}` })\n : undefined;\n\n const handleDownload = args.withDownload\n ? (url: FileItemProps['url']) => push({ content: `Downloaded ${url}` })\n : undefined;\n\n const imageSrc =\n 'https://www.pega.com/sites/default/files/styles/480/public/media/images/2021-02/pwi-2021-prevcard.jpg';\n\n return (\n <FileDisplay\n variant={args.variant}\n displayText={args.displayText}\n value={args.withValue ? imageSrc : undefined}\n onPreview={handlePreview}\n onDownload={handleDownload}\n />\n );\n};\n\nFileDisplayDemo.args = {\n variant: 'file',\n displayText: 'Pega World iNspire'\n};\n\nFileDisplayDemo.argTypes = {\n variant: { options: ['file', 'text', 'link'], control: { type: 'radio' } },\n displayText: { control: { type: 'text' } }\n};\n\ninterface FileUploadItemDemoProps extends FileDisplayDemoProps {\n name: FileUploadItemProps['name'];\n meta?: FileUploadItemProps['meta'];\n error?: FileUploadItemProps['error'];\n progress?: FileUploadItemProps['progress'];\n}\n\nexport const FileUploadItemDemo: Story<FileUploadItemDemoProps> = (\n args: FileUploadItemDemoProps\n) => {\n const { push } = useContext(ToasterContext);\n\n const handlePreview = args.withPreview\n ? (url: FileItemProps['url']) => push({ content: `Previewed ${url}` })\n : undefined;\n\n const handleDownload = args.withDownload\n ? (url: FileItemProps['url']) => push({ content: `Downloaded ${url}` })\n : undefined;\n\n const imageSrc =\n 'https://www.pega.com/sites/default/files/styles/480/public/media/images/2021-02/pwi-2021-prevcard.jpg';\n\n return (\n <FileUploadItem\n name={args.name}\n meta={args.meta}\n error={args.error}\n progress={args.progress}\n thumbnail={imageSrc}\n onPreview={handlePreview}\n onDownload={handleDownload}\n />\n );\n};\n\nFileUploadItemDemo.args = {\n name: 'Pega World iNspire',\n meta: 'Some additional information',\n error: false,\n progress: 100\n};\n\nFileUploadItemDemo.argTypes = {\n withValue: { table: { disable: true } },\n name: { control: { type: 'text' } },\n meta: { control: { type: 'text' } },\n error: { control: { type: 'boolean' } },\n progress: { control: { type: 'number' } }\n};\n"]}

package/lib/core/HTML/HTML.stories.d.ts ADDED Viewed

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

package/lib/core/HTML/HTML.stories.d.ts.map ADDED Viewed

	@@ -0,0 +1 @@
1	+ {"version":3,"file":"HTML.stories.d.ts","sourceRoot":"","sources":["../../../src/core/HTML/HTML.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,kBAAkB,CAAC;AAE/C,OAAO,EAAQ,SAAS,EAAE,MAAM,yBAAyB,CAAC;;AAE1D,wBAGU;AAEV,eAAO,MAAM,QAAQ,EAAE,KAAK,CAAC,SAAS,CAA2C,CAAC"}

package/lib/core/HTML/HTML.stories.js ADDED Viewed

@@ -0,0 +1,14 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { HTML } from '@pega/cosmos-react-core';
+export default {
+    title: 'Core/HTML',
+    component: HTML
+};
+export const HTMLDemo = args => _jsx(HTML, { content: args.content }, void 0);
+HTMLDemo.args = {
+    content: '<p>Hello, World!<p>'
+};
+HTMLDemo.argTypes = {
+    content: { control: { type: 'text' } }
+};
+//# sourceMappingURL=HTML.stories.js.map

package/lib/core/HTML/HTML.stories.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"HTML.stories.js","sourceRoot":"","sources":["../../../src/core/HTML/HTML.stories.tsx"],"names":[],"mappings":";AAEA,OAAO,EAAE,IAAI,EAAa,MAAM,yBAAyB,CAAC;AAE1D,eAAe;IACb,KAAK,EAAE,WAAW;IAClB,SAAS,EAAE,IAAI;CACR,CAAC;AAEV,MAAM,CAAC,MAAM,QAAQ,GAAqB,IAAI,CAAC,EAAE,CAAC,KAAC,IAAI,IAAC,OAAO,EAAE,IAAI,CAAC,OAAO,WAAI,CAAC;AAElF,QAAQ,CAAC,IAAI,GAAG;IACd,OAAO,EAAE,qBAAqB;CAC/B,CAAC;AAEF,QAAQ,CAAC,QAAQ,GAAG;IAClB,OAAO,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE,EAAE;CACvC,CAAC","sourcesContent":["import { Meta, Story } from '@storybook/react';\n\nimport { HTML, HTMLProps } from '@pega/cosmos-react-core';\n\nexport default {\n title: 'Core/HTML',\n component: HTML\n} as Meta;\n\nexport const HTMLDemo: Story<HTMLProps> = args => <HTML content={args.content} />;\n\nHTMLDemo.args = {\n content: '<p>Hello, World!<p>'\n};\n\nHTMLDemo.argTypes = {\n content: { control: { type: 'text' } }\n};\n"]}

package/lib/rte/Editor/Editor.stories.js CHANGED Viewed

@@ -15,7 +15,7 @@ export const EditorDemo = () => {
         const src = URL.createObjectURL(image);
         editorRef.current?.appendImage({ src, alt: image.name }, id);
     };
-    return (_jsx(Editor, { ref: editorRef, label: label, toolbar: ['inline-styling', 'lists', 'indentation', 'images', 'links'], onFocus: action('Editor focused'), onBlur: action('Editor blurred'), onImageAdded: onImageAdded, defaultValue: '<body><p>Hi mom <a href="https://google.com">link</a></p></body>' }, void 0));
+    return (_jsx(Editor, { ref: editorRef, label: label, toolbar: ['inline-styling', 'lists', 'indentation', 'images', 'links'], onFocus: action('Editor focused'), onBlur: action('Editor blurred'), onImageAdded: onImageAdded, defaultValue: '<body><p>Hi mom <a href="https://google.com">link</a></p><img alt="placeholder" src="http://via.placeholder.com/640x360"/></body>' }, void 0));
 };
 export const EmptyEditorDemo = () => {
     const editorRef = useRef(null);

package/lib/rte/Editor/Editor.stories.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Editor.stories.js","sourceRoot":"","sources":["../../../src/rte/Editor/Editor.stories.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Meta } from '@storybook/react';\nimport { useState, useRef } from 'react';\nimport ReactDOM from 'react-dom';\nimport { action } from '@storybook/addon-actions';\nimport { Editor as TinymceEditor } from 'tinymce';\n\nimport {\n Button,\n Card,\n CardContent,\n CardFooter,\n Flex,\n Text,\n TextArea\n} from '@pega/cosmos-react-core';\nimport { EditorState, Editor } from '@pega/cosmos-react-rte';\n\nexport default {\n title: 'RTE/Editor',\n component: Editor\n} as Meta;\n\nconst label = 'Form field label';\n\nexport const EditorDemo = () => {\n const editorRef = useRef<EditorState>(null);\n\n const onImageAdded = (image: File, id: string) => {\n const src = URL.createObjectURL(image);\n editorRef.current?.appendImage({ src, alt: image.name }, id);\n };\n\n return (\n <Editor\n ref={editorRef}\n label={label}\n toolbar={['inline-styling', 'lists', 'indentation', 'images', 'links']}\n onFocus={action('Editor focused')}\n onBlur={action('Editor blurred')}\n onImageAdded={onImageAdded}\n defaultValue='<body><p>Hi mom <a href=\"https://google.com\">link</a></p></body>'\n />\n );\n};\n\nexport const EmptyEditorDemo = () => {\n const editorRef = useRef<EditorState>(null);\n\n const onImageAdded = (image: File, id: string) => {\n const src = URL.createObjectURL(image);\n editorRef.current?.appendImage({ src, alt: image.name }, id);\n };\n\n return (\n <Editor\n ref={editorRef}\n label={label}\n toolbar={['inline-styling', 'lists', 'indentation', 'images', 'links']}\n onImageAdded={onImageAdded}\n onFocus={action('Editor has focus')}\n onBlur={action('Editor has blurred')}\n placeholder='Type some stuff in here'\n />\n );\n};\n\nexport const ReadonlyFormField = () => {\n return (\n <Editor\n label={label}\n readOnly\n defaultValue={`<article class=\"main-page-content\" lang=\"en-US\"><h1>HTML: HyperText Markup Language</h1><div><p><strong>HTML</strong> (HyperText Markup Language) is the most basic building block of the Web. It defines the meaning and structure of web content. Other technologies besides HTML are generally used to describe a web page's appearance/presentation (<a href=\"/en-US/docs/Web/CSS\">CSS</a>) or functionality/behavior (<a href=\"/en-US/docs/Web/JavaScript\">JavaScript</a>).</p>\n <p>\"Hypertext\" refers to links that connect web pages to one another, either within a single website or between websites. Links are a fundamental aspect of the Web. By uploading content to the Internet and linking it to pages created by other people, you become an active participant in the World Wide Web.</p>\n <p>HTML uses \"markup\" to annotate text, images, and other content for display in a Web browser. HTML markup includes special \"elements\" such as <a href=\"/en-US/docs/Web/HTML/Element/head\"><code><head></code></a>, <a href=\"/en-US/docs/Web/HTML/Element/title\"><code><title></code></a>, <a href=\"/en-US/docs/Web/HTML/Element/body\"><code><body></code></a>, <a href=\"/en-US/docs/Web/HTML/Element/header\"><code><header></code></a>, <a href=\"/en-US/docs/Web/HTML/Element/footer\"><code><footer></code></a>, <a href=\"/en-US/docs/Web/HTML/Element/article\"><code><article></code></a>, <a href=\"/en-US/docs/Web/HTML/Element/section\"><code><section></code></a>, <a href=\"/en-US/docs/Web/HTML/Element/p\"><code><p></code></a>, <a href=\"/en-US/docs/Web/HTML/Element/div\"><code><div></code></a>, <a href=\"/en-US/docs/Web/HTML/Element/span\"><code><span></code></a>, <a href=\"/en-US/docs/Web/HTML/Element/img\"><code><img></code></a>, <a href=\"/en-US/docs/Web/HTML/Element/aside\"><code><aside></code></a>, <a href=\"/en-US/docs/Web/HTML/Element/audio\"><code><audio></code></a>, <a href=\"/en-US/docs/Web/HTML/Element/canvas\"><code><canvas></code></a>, <a href=\"/en-US/docs/Web/HTML/Element/datalist\"><code><datalist></code></a>, <a href=\"/en-US/docs/Web/HTML/Element/details\"><code><details></code></a>, <a href=\"/en-US/docs/Web/HTML/Element/embed\"><code><embed></code></a>, <a href=\"/en-US/docs/Web/HTML/Element/nav\"><code><nav></code></a>, <a href=\"/en-US/docs/Web/HTML/Element/output\"><code><output></code></a>, <a href=\"/en-US/docs/Web/HTML/Element/progress\"><code><progress></code></a>, <a href=\"/en-US/docs/Web/HTML/Element/video\"><code><video></code></a>, <a href=\"/en-US/docs/Web/HTML/Element/ul\"><code><ul></code></a>, <a href=\"/en-US/docs/Web/HTML/Element/ol\"><code><ol></code></a>, <a href=\"/en-US/docs/Web/HTML/Element/li\"><code><li></code></a> and many others.</p>\n <p>An HTML element is set off from other text in a document by \"tags\", which consist of the element name surrounded by \"<code><</code>\" and \"<code>></code>\".  The name of an element inside a tag is case insensitive. That is, it can be written in uppercase, lowercase, or a mixture. For example, the <code><title></code> tag can be written as <code><Title></code>, <code><TITLE></code>, or in any other way.</p>\n\n <div id=\"on-github\" class=\"on-github\"><h3>Found a problem with this page?</h3><ul><li><a href=\"https://github.com/mdn/content/edit/main/files/en-us/web/html/index.md\" title=\"You're going to need to sign in to GitHub first (Opens in a new tab)\" target=\"_blank\" rel=\"noopener noreferrer\">Edit on <b>GitHub</b></a></li><li><a href=\"https://github.com/mdn/content/blob/main/files/en-us/web/html/index.md\" title=\"Folder: en-us/web/html (Opens in a new tab)\" target=\"_blank\" rel=\"noopener noreferrer\">Source on <b>GitHub</b></a></li><li><a href=\"https://github.com/mdn/content/issues/new?body=MDN+URL%3A+https%3A%2F%2Fdeveloper.mozilla.org%2Fen-US%2Fdocs%2FWeb%2FHTML%0A%0A%23%23%23%23+What+information+was+incorrect%2C+unhelpful%2C+or+incomplete%3F%0A%0A%0A%23%23%23%23+Specific+section+or+headline%3F%0A%0A%0A%23%23%23%23+What+did+you+expect+to+see%3F%0A%0A%0A%23%23%23%23+Did+you+test+this%3F+If+so%2C+how%3F%0A%0A%0A%3C%21--+Do+not+make+changes+below+this+line+--%3E%0A%3Cdetails%3E%0A%3Csummary%3EMDN+Content+page+report+details%3C%2Fsummary%3E%0A%0A+Folder%3A+%60en-us%2Fweb%2Fhtml%60%0A+MDN+URL%3A+https%3A%2F%2Fdeveloper.mozilla.org%2Fen-US%2Fdocs%2FWeb%2FHTML%0A+GitHub+URL%3A+https%3A%2F%2Fgithub.com%2Fmdn%2Fcontent%2Fblob%2Fmain%2Ffiles%2Fen-us%2Fweb%2Fhtml%2Findex.md%0A+Last+commit%3A+https%3A%2F%2Fgithub.com%2Fmdn%2Fcontent%2Fcommit%2F775662998e66813a612e3ff27e02f2ada867bc17%0A*+Document+last+modified%3A+2021-10-03T00%3A01%3A51.000Z%0A%0A%3C%2Fdetails%3E&title=Issue+with+%22HTML%3A+HyperText+Markup+Language%22%3A+%28short+summary+here+please%29&labels=needs-triage%2CContent%3AHTML\" title=\"This will take you to https://github.com/mdn/content to file a new issue\" target=\"_blank\" rel=\"noopener noreferrer\">Report a problem with this content on <b>GitHub</b></a></li><li>Want to fix the problem yourself? See <a href=\"https://github.com/mdn/content/blob/main/README.md\" target=\"_blank\" rel=\"noopener noreferrer\">our Contribution guide</a>.</li></ul></div>\n `}\n />\n );\n};\n\nconst PegaCustom = ({ children }: { children: string }) => {\n return (\n <p\n style={{ color: 'blue', textTransform: 'uppercase' }}\n // eslint-disable-next-line react/no-danger\n dangerouslySetInnerHTML={{ __html: children }}\n />\n );\n};\n\nclass PegaCustomElement extends HTMLElement {\n removeElements() {\n while (this.firstChild) {\n this.removeChild(this.firstChild);\n }\n }\n\n connectedCallback() {\n const inner = this.innerHTML;\n this.removeElements();\n const mountPoint = document.createElement('span');\n this.appendChild(mountPoint);\n ReactDOM.render(<PegaCustom>{inner}</PegaCustom>, mountPoint);\n }\n}\n\nexport const CustomComponentDemo = () => {\n const editorRef = useRef<EditorState>(null);\n const [editor, setEditor] = useState({} as TinymceEditor);\n\n const onCustomAction = () => {\n editor.insertContent('<pega-custom>Inserted from toolbar</pega-custom>');\n };\n\n return (\n <Editor\n ref={editorRef}\n label={label}\n toolbar={['inline-styling', 'lists', 'indentation', 'links', 'images']}\n defaultValue='<body><p>Hi mom <a href=\"https://google.com\">link</a></p><p>hi <pega-custom>Hello from custom element.</pega-custom></p></body>'\n customComponents={[{ customElement: PegaCustomElement, name: 'pega-custom' }]}\n customActions={[\n {\n icon: 'pega',\n text: 'Insert a custom element',\n onMouseDown: () => {\n onCustomAction();\n }\n }\n ]}\n onInit={initializedEditor => {\n setEditor(initializedEditor);\n }}\n />\n );\n};\n\nexport const RichTextEditorWithLogs = () => {\n const editorRef = useRef<EditorState>(null);\n const [content, setContent] = useState<string \| undefined>();\n\n const onImageAdded = (image: File, id: string) => {\n const src = URL.createObjectURL(image);\n editorRef.current?.appendImage({ src, alt: image.name }, id);\n };\n\n const showContent = (type: 'html' \| 'plain_text' \| 'rich_text') => {\n if (type === 'html') setContent(editorRef.current?.getHtml());\n else if (type === 'plain_text') setContent(editorRef.current?.getPlainText());\n else if (type === 'rich_text') setContent(editorRef.current?.getRichText());\n };\n\n return (\n <Flex container={{ direction: 'column', gap: 2 }}>\n <Editor\n ref={editorRef}\n toolbar={['inline-styling', 'headers', 'tables', 'links', 'images', 'lists', 'indentation']}\n onImageAdded={onImageAdded}\n label='Rich text editor with logs'\n info='Click on the buttons below to show the different formatted outputs of the RTE'\n />\n\n <Flex container={{ gap: 1 }}>\n <Button onClick={() => showContent('html')}>Show HTML</Button>\n <Button onClick={() => showContent('plain_text')}>Show plain text</Button>\n <Button onClick={() => showContent('rich_text')}>Show rich text</Button>\n </Flex>\n\n <Text>{content}</Text>\n </Flex>\n );\n};\n\nexport const RichTextEditorHtmlParsingDemo = () => {\n const [html, setHtml] = useState('<p>Hello world!</p>');\n const rteRef = useRef<EditorState>(null);\n\n const onImageAdded = (image: File, id: string) => {\n const src = URL.createObjectURL(image);\n rteRef.current?.appendImage({ src, alt: image.name }, id);\n };\n\n return (\n <Flex container={{ direction: 'column', gap: 2 }}>\n <Card>\n <CardContent>\n <TextArea value={html} onChange={e => setHtml(e.target.value)} />\n </CardContent>\n <CardFooter>\n <Button onClick={() => rteRef.current?.insertHtml(html.trim(), true)}>\n Overwrite RTE with new HTML\n </Button>\n </CardFooter>\n </Card>\n <Editor\n defaultValue={html}\n onImageAdded={onImageAdded}\n ref={rteRef}\n label={label}\n toolbar={['inline-styling', 'headers', 'tables', 'links', 'images', 'lists', 'indentation']}\n />\n </Flex>\n );\n};\n"]}
1	+ {"version":3,"file":"Editor.stories.js","sourceRoot":"","sources":["../../../src/rte/Editor/Editor.stories.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Meta } from '@storybook/react';\nimport { useState, useRef } from 'react';\nimport ReactDOM from 'react-dom';\nimport { action } from '@storybook/addon-actions';\nimport { Editor as TinymceEditor } from 'tinymce';\n\nimport {\n Button,\n Card,\n CardContent,\n CardFooter,\n Flex,\n Text,\n TextArea\n} from '@pega/cosmos-react-core';\nimport { EditorState, Editor } from '@pega/cosmos-react-rte';\n\nexport default {\n title: 'RTE/Editor',\n component: Editor\n} as Meta;\n\nconst label = 'Form field label';\n\nexport const EditorDemo = () => {\n const editorRef = useRef<EditorState>(null);\n\n const onImageAdded = (image: File, id: string) => {\n const src = URL.createObjectURL(image);\n editorRef.current?.appendImage({ src, alt: image.name }, id);\n };\n\n return (\n <Editor\n ref={editorRef}\n label={label}\n toolbar={['inline-styling', 'lists', 'indentation', 'images', 'links']}\n onFocus={action('Editor focused')}\n onBlur={action('Editor blurred')}\n onImageAdded={onImageAdded}\n defaultValue='<body><p>Hi mom <a href=\"https://google.com\">link</a></p><img alt=\"placeholder\" src=\"http://via.placeholder.com/640x360\"/></body>'\n />\n );\n};\n\nexport const EmptyEditorDemo = () => {\n const editorRef = useRef<EditorState>(null);\n\n const onImageAdded = (image: File, id: string) => {\n const src = URL.createObjectURL(image);\n editorRef.current?.appendImage({ src, alt: image.name }, id);\n };\n\n return (\n <Editor\n ref={editorRef}\n label={label}\n toolbar={['inline-styling', 'lists', 'indentation', 'images', 'links']}\n onImageAdded={onImageAdded}\n onFocus={action('Editor has focus')}\n onBlur={action('Editor has blurred')}\n placeholder='Type some stuff in here'\n />\n );\n};\n\nexport const ReadonlyFormField = () => {\n return (\n <Editor\n label={label}\n readOnly\n defaultValue={`<article class=\"main-page-content\" lang=\"en-US\"><h1>HTML: HyperText Markup Language</h1><div><p><strong>HTML</strong> (HyperText Markup Language) is the most basic building block of the Web. It defines the meaning and structure of web content. Other technologies besides HTML are generally used to describe a web page's appearance/presentation (<a href=\"/en-US/docs/Web/CSS\">CSS</a>) or functionality/behavior (<a href=\"/en-US/docs/Web/JavaScript\">JavaScript</a>).</p>\n <p>\"Hypertext\" refers to links that connect web pages to one another, either within a single website or between websites. Links are a fundamental aspect of the Web. By uploading content to the Internet and linking it to pages created by other people, you become an active participant in the World Wide Web.</p>\n <p>HTML uses \"markup\" to annotate text, images, and other content for display in a Web browser. HTML markup includes special \"elements\" such as <a href=\"/en-US/docs/Web/HTML/Element/head\"><code><head></code></a>, <a href=\"/en-US/docs/Web/HTML/Element/title\"><code><title></code></a>, <a href=\"/en-US/docs/Web/HTML/Element/body\"><code><body></code></a>, <a href=\"/en-US/docs/Web/HTML/Element/header\"><code><header></code></a>, <a href=\"/en-US/docs/Web/HTML/Element/footer\"><code><footer></code></a>, <a href=\"/en-US/docs/Web/HTML/Element/article\"><code><article></code></a>, <a href=\"/en-US/docs/Web/HTML/Element/section\"><code><section></code></a>, <a href=\"/en-US/docs/Web/HTML/Element/p\"><code><p></code></a>, <a href=\"/en-US/docs/Web/HTML/Element/div\"><code><div></code></a>, <a href=\"/en-US/docs/Web/HTML/Element/span\"><code><span></code></a>, <a href=\"/en-US/docs/Web/HTML/Element/img\"><code><img></code></a>, <a href=\"/en-US/docs/Web/HTML/Element/aside\"><code><aside></code></a>, <a href=\"/en-US/docs/Web/HTML/Element/audio\"><code><audio></code></a>, <a href=\"/en-US/docs/Web/HTML/Element/canvas\"><code><canvas></code></a>, <a href=\"/en-US/docs/Web/HTML/Element/datalist\"><code><datalist></code></a>, <a href=\"/en-US/docs/Web/HTML/Element/details\"><code><details></code></a>, <a href=\"/en-US/docs/Web/HTML/Element/embed\"><code><embed></code></a>, <a href=\"/en-US/docs/Web/HTML/Element/nav\"><code><nav></code></a>, <a href=\"/en-US/docs/Web/HTML/Element/output\"><code><output></code></a>, <a href=\"/en-US/docs/Web/HTML/Element/progress\"><code><progress></code></a>, <a href=\"/en-US/docs/Web/HTML/Element/video\"><code><video></code></a>, <a href=\"/en-US/docs/Web/HTML/Element/ul\"><code><ul></code></a>, <a href=\"/en-US/docs/Web/HTML/Element/ol\"><code><ol></code></a>, <a href=\"/en-US/docs/Web/HTML/Element/li\"><code><li></code></a> and many others.</p>\n <p>An HTML element is set off from other text in a document by \"tags\", which consist of the element name surrounded by \"<code><</code>\" and \"<code>></code>\".  The name of an element inside a tag is case insensitive. That is, it can be written in uppercase, lowercase, or a mixture. For example, the <code><title></code> tag can be written as <code><Title></code>, <code><TITLE></code>, or in any other way.</p>\n\n <div id=\"on-github\" class=\"on-github\"><h3>Found a problem with this page?</h3><ul><li><a href=\"https://github.com/mdn/content/edit/main/files/en-us/web/html/index.md\" title=\"You're going to need to sign in to GitHub first (Opens in a new tab)\" target=\"_blank\" rel=\"noopener noreferrer\">Edit on <b>GitHub</b></a></li><li><a href=\"https://github.com/mdn/content/blob/main/files/en-us/web/html/index.md\" title=\"Folder: en-us/web/html (Opens in a new tab)\" target=\"_blank\" rel=\"noopener noreferrer\">Source on <b>GitHub</b></a></li><li><a href=\"https://github.com/mdn/content/issues/new?body=MDN+URL%3A+https%3A%2F%2Fdeveloper.mozilla.org%2Fen-US%2Fdocs%2FWeb%2FHTML%0A%0A%23%23%23%23+What+information+was+incorrect%2C+unhelpful%2C+or+incomplete%3F%0A%0A%0A%23%23%23%23+Specific+section+or+headline%3F%0A%0A%0A%23%23%23%23+What+did+you+expect+to+see%3F%0A%0A%0A%23%23%23%23+Did+you+test+this%3F+If+so%2C+how%3F%0A%0A%0A%3C%21--+Do+not+make+changes+below+this+line+--%3E%0A%3Cdetails%3E%0A%3Csummary%3EMDN+Content+page+report+details%3C%2Fsummary%3E%0A%0A+Folder%3A+%60en-us%2Fweb%2Fhtml%60%0A+MDN+URL%3A+https%3A%2F%2Fdeveloper.mozilla.org%2Fen-US%2Fdocs%2FWeb%2FHTML%0A+GitHub+URL%3A+https%3A%2F%2Fgithub.com%2Fmdn%2Fcontent%2Fblob%2Fmain%2Ffiles%2Fen-us%2Fweb%2Fhtml%2Findex.md%0A+Last+commit%3A+https%3A%2F%2Fgithub.com%2Fmdn%2Fcontent%2Fcommit%2F775662998e66813a612e3ff27e02f2ada867bc17%0A*+Document+last+modified%3A+2021-10-03T00%3A01%3A51.000Z%0A%0A%3C%2Fdetails%3E&title=Issue+with+%22HTML%3A+HyperText+Markup+Language%22%3A+%28short+summary+here+please%29&labels=needs-triage%2CContent%3AHTML\" title=\"This will take you to https://github.com/mdn/content to file a new issue\" target=\"_blank\" rel=\"noopener noreferrer\">Report a problem with this content on <b>GitHub</b></a></li><li>Want to fix the problem yourself? See <a href=\"https://github.com/mdn/content/blob/main/README.md\" target=\"_blank\" rel=\"noopener noreferrer\">our Contribution guide</a>.</li></ul></div>\n `}\n />\n );\n};\n\nconst PegaCustom = ({ children }: { children: string }) => {\n return (\n <p\n style={{ color: 'blue', textTransform: 'uppercase' }}\n // eslint-disable-next-line react/no-danger\n dangerouslySetInnerHTML={{ __html: children }}\n />\n );\n};\n\nclass PegaCustomElement extends HTMLElement {\n removeElements() {\n while (this.firstChild) {\n this.removeChild(this.firstChild);\n }\n }\n\n connectedCallback() {\n const inner = this.innerHTML;\n this.removeElements();\n const mountPoint = document.createElement('span');\n this.appendChild(mountPoint);\n ReactDOM.render(<PegaCustom>{inner}</PegaCustom>, mountPoint);\n }\n}\n\nexport const CustomComponentDemo = () => {\n const editorRef = useRef<EditorState>(null);\n const [editor, setEditor] = useState({} as TinymceEditor);\n\n const onCustomAction = () => {\n editor.insertContent('<pega-custom>Inserted from toolbar</pega-custom>');\n };\n\n return (\n <Editor\n ref={editorRef}\n label={label}\n toolbar={['inline-styling', 'lists', 'indentation', 'links', 'images']}\n defaultValue='<body><p>Hi mom <a href=\"https://google.com\">link</a></p><p>hi <pega-custom>Hello from custom element.</pega-custom></p></body>'\n customComponents={[{ customElement: PegaCustomElement, name: 'pega-custom' }]}\n customActions={[\n {\n icon: 'pega',\n text: 'Insert a custom element',\n onMouseDown: () => {\n onCustomAction();\n }\n }\n ]}\n onInit={initializedEditor => {\n setEditor(initializedEditor);\n }}\n />\n );\n};\n\nexport const RichTextEditorWithLogs = () => {\n const editorRef = useRef<EditorState>(null);\n const [content, setContent] = useState<string \| undefined>();\n\n const onImageAdded = (image: File, id: string) => {\n const src = URL.createObjectURL(image);\n editorRef.current?.appendImage({ src, alt: image.name }, id);\n };\n\n const showContent = (type: 'html' \| 'plain_text' \| 'rich_text') => {\n if (type === 'html') setContent(editorRef.current?.getHtml());\n else if (type === 'plain_text') setContent(editorRef.current?.getPlainText());\n else if (type === 'rich_text') setContent(editorRef.current?.getRichText());\n };\n\n return (\n <Flex container={{ direction: 'column', gap: 2 }}>\n <Editor\n ref={editorRef}\n toolbar={['inline-styling', 'headers', 'tables', 'links', 'images', 'lists', 'indentation']}\n onImageAdded={onImageAdded}\n label='Rich text editor with logs'\n info='Click on the buttons below to show the different formatted outputs of the RTE'\n />\n\n <Flex container={{ gap: 1 }}>\n <Button onClick={() => showContent('html')}>Show HTML</Button>\n <Button onClick={() => showContent('plain_text')}>Show plain text</Button>\n <Button onClick={() => showContent('rich_text')}>Show rich text</Button>\n </Flex>\n\n <Text>{content}</Text>\n </Flex>\n );\n};\n\nexport const RichTextEditorHtmlParsingDemo = () => {\n const [html, setHtml] = useState('<p>Hello world!</p>');\n const rteRef = useRef<EditorState>(null);\n\n const onImageAdded = (image: File, id: string) => {\n const src = URL.createObjectURL(image);\n rteRef.current?.appendImage({ src, alt: image.name }, id);\n };\n\n return (\n <Flex container={{ direction: 'column', gap: 2 }}>\n <Card>\n <CardContent>\n <TextArea value={html} onChange={e => setHtml(e.target.value)} />\n </CardContent>\n <CardFooter>\n <Button onClick={() => rteRef.current?.insertHtml(html.trim(), true)}>\n Overwrite RTE with new HTML\n </Button>\n </CardFooter>\n </Card>\n <Editor\n defaultValue={html}\n onImageAdded={onImageAdded}\n ref={rteRef}\n label={label}\n toolbar={['inline-styling', 'headers', 'tables', 'links', 'images', 'lists', 'indentation']}\n />\n </Flex>\n );\n};\n"]}

package/lib/social/Email/Email.stories.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Email.stories.d.ts","sourceRoot":"","sources":["../../../src/social/Email/Email.stories.tsx"],"names":[],"mappings":";AAgCA,OAAO,EASL,UAAU,EAIX,MAAM,2BAA2B,CAAC;;;;;AAiBnC,wBAGE;AAwOF,eAAO,MAAM,KAAK,mBA4CjB,CAAC;AAMF,eAAO,MAAM,YAAY,mBAqCxB,CAAC;AAYF,eAAO,MAAM,aAAa,~~mBAyFzB~~,CAAC;AAaF,eAAO,MAAM,iBAAiB,mBA2C7B,CAAC;AAaF,eAAO,MAAM,iBAAiB,mBAmF7B,CAAC;AAYF,eAAO,MAAM,SAAS;;;;;;;CA0NrB,CAAC;AAqBF,eAAO,MAAM,oBAAoB,mBA8BhC,CAAC;AAgPF,eAAO,MAAM,oBAAoB;;;;;CAyDhC,CAAC"}
1	+ {"version":3,"file":"Email.stories.d.ts","sourceRoot":"","sources":["../../../src/social/Email/Email.stories.tsx"],"names":[],"mappings":";AAgCA,OAAO,EASL,UAAU,EAIX,MAAM,2BAA2B,CAAC;;;;;AAiBnC,wBAGE;AAwOF,eAAO,MAAM,KAAK,mBA4CjB,CAAC;AAMF,eAAO,MAAM,YAAY,mBAqCxB,CAAC;AAYF,eAAO,MAAM,aAAa,mBAkHzB,CAAC;AAaF,eAAO,MAAM,iBAAiB,mBA2C7B,CAAC;AAaF,eAAO,MAAM,iBAAiB,mBAmF7B,CAAC;AAYF,eAAO,MAAM,SAAS;;;;;;;CA0NrB,CAAC;AAqBF,eAAO,MAAM,oBAAoB,mBA8BhC,CAAC;AAgPF,eAAO,MAAM,oBAAoB;;;;;CAyDhC,CAAC"}

package/lib/social/Email/Email.stories.js CHANGED Viewed

@@ -211,7 +211,7 @@ export const ViewAnalysis = () => {
 */
 export const emailEntities = () => {
     const nestedEntities = ['Place: Nagercoil, Hyderabad', 'Location: Nagercoil'];
-    return (_jsx(Card, { children: _jsx(StyledEmailCardContent, { children: _jsx(Email, { id: createUID(), timeStamp: '2021-01-05T09:12', from: mockEmails['Laura Stevens'], cc: [mockEmails['Adam Gillchrist'], mockEmails['John Paul']], bcc: [mockEmails['Anton, Randy'], mockEmails['Hugh Phillips']], to: [mockEmails['Sara Davis'], mockEmails['John Brown'], mockEmails['Joe Stevens']], body: '<div>Hi,<br/><p>I am one of the customer of Indian Overseas Bank, Nagercoil branch, with code 3967. I have a saving bank account here. My account number is 6785420965476.</p><br/><p>I have been given a debit cum ATM card from this bank and the same has been lost when I was traveling from Nagercoil to Trichy by Bus on Jan 04, 2021. I remember that my ATM card number was 1920 6746 8653 1256.</p><br/>I hereby request you to block my debit card immediately to prevent misuse of the same by some others. Also I request you to give me an new debit card as early as possible.<br/><br/>Regards,<br/>Laura Stevens</div>', entityHighlightMapping: boolean('Entity Highlighting', true)
+    return (_jsx(Card, { children: _jsx(StyledEmailCardContent, { children: _jsx(Email, { id: createUID(), timeStamp: '2021-01-05T09:12', from: mockEmails['Laura Stevens'], cc: [mockEmails['Adam Gillchrist'], mockEmails['John Paul']], bcc: [mockEmails['Anton, Randy'], mockEmails['Hugh Phillips']], to: [mockEmails['Sara Davis'], mockEmails['John Brown'], mockEmails['Joe Stevens']], body: '<div>Hi,<br/><p>I am one of the customer of Indian Overseas Bank, <b><i>Nagercoil</i></b> branch, with code <b><a href="www.google.com"><i>3967</i></a></b>. I have a saving bank account here. My account number is <i>6785420965476</i>.</p><br/><p>I have been given a debit cum ATM card from this bank and the same has been lost when I was traveling from Nagercoil to Trichy by Bus on Jan 04, 2021. I remember that my ATM card number was 1920 6746 8653 1256.</p><br/>I hereby request you to block my debit card immediately to prevent misuse of the same by some others. Also I request you to give me an new debit card as early as possible.<br/><br/>Regards,<br/>Laura Stevens</div>', entityHighlightMapping: boolean('Entity Highlighting', true)
                     ? [
                         {
                             value: '3967',
@@ -270,6 +270,28 @@ export const emailEntities = () => {
                             description: 'Date'
                         }
                     ]
+                    : undefined, contextMenu: boolean('Copy to context menu fields', true)
+                    ? {
+                        heading: 'Copy to',
+                        items: [
+                            {
+                                id: createUID(),
+                                primary: 'Field 1',
+                                selected: false
+                            },
+                            {
+                                id: createUID(),
+                                primary: 'Field 2',
+                                selected: true
+                            },
+                            {
+                                id: createUID(),
+                                primary: 'Field 3',
+                                selected: true
+                            }
+                        ],
+                        onItemClick: action('On Copy')
+                    }
                     : undefined, subject: 'I lost my debit card', onReply: action('On reply'), onReplyAll: action('On reply all'), onForward: action('On forward'), onSuggestionClick: action('On Suggested reply clicked'), sentiment: {
                     variant: 'neutral'
                 }, actions: emailActions, suggestions: mockSuggestedReplies }, void 0) }, void 0) }, void 0));