@pega/cosmos-react-demos 2.1.3 → 2.2.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.
- package/jsx/core/Menu/Menu.stories.d.ts +3 -2
- package/jsx/core/Menu/Menu.stories.d.ts.map +1 -1
- package/jsx/core/Menu/Menu.stories.jsx +7 -9
- package/jsx/core/Menu/Menu.stories.jsx.map +1 -1
- package/jsx/core/Toaster/Toaster.stories.jsx +1 -1
- package/jsx/core/Toaster/Toaster.stories.jsx.map +1 -1
- package/jsx/rte/Editor/Editor.mocks.d.ts +307 -0
- package/jsx/rte/Editor/Editor.mocks.d.ts.map +1 -0
- package/jsx/rte/Editor/Editor.mocks.jsx +23 -0
- package/jsx/rte/Editor/Editor.mocks.jsx.map +1 -0
- package/jsx/rte/Editor/Editor.stories.d.ts.map +1 -1
- package/jsx/rte/Editor/Editor.stories.jsx +9 -21
- package/jsx/rte/Editor/Editor.stories.jsx.map +1 -1
- package/lib/core/Menu/Menu.stories.d.ts +3 -2
- package/lib/core/Menu/Menu.stories.d.ts.map +1 -1
- package/lib/core/Menu/Menu.stories.js +7 -9
- package/lib/core/Menu/Menu.stories.js.map +1 -1
- package/lib/core/Toaster/Toaster.stories.js +1 -1
- package/lib/core/Toaster/Toaster.stories.js.map +1 -1
- package/lib/rte/Editor/Editor.mocks.d.ts +307 -0
- package/lib/rte/Editor/Editor.mocks.d.ts.map +1 -0
- package/lib/rte/Editor/Editor.mocks.js +26 -0
- package/lib/rte/Editor/Editor.mocks.js.map +1 -0
- package/lib/rte/Editor/Editor.stories.d.ts.map +1 -1
- package/lib/rte/Editor/Editor.stories.js +9 -23
- package/lib/rte/Editor/Editor.stories.js.map +1 -1
- package/package.json +9 -9
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
import { Meta, Story } from '@storybook/react';
|
|
2
|
-
import { MenuProps } from '@pega/cosmos-react-core';
|
|
2
|
+
import { MenuProps, OmitStrict } from '@pega/cosmos-react-core';
|
|
3
3
|
declare const _default: Meta<import("@storybook/react").Args>;
|
|
4
4
|
export default _default;
|
|
5
|
-
interface MenuStoryProps extends MenuProps {
|
|
5
|
+
interface MenuStoryProps extends OmitStrict<MenuProps, 'items'> {
|
|
6
6
|
showItemSecondary?: boolean;
|
|
7
7
|
showItemVisual?: boolean;
|
|
8
8
|
showItemCount?: boolean;
|
|
@@ -10,6 +10,7 @@ interface MenuStoryProps extends MenuProps {
|
|
|
10
10
|
filterPattern?: 'contains' | 'starts with';
|
|
11
11
|
infiniteScroll?: boolean;
|
|
12
12
|
noItems?: boolean;
|
|
13
|
+
useFlatData?: boolean;
|
|
13
14
|
}
|
|
14
15
|
export declare const MenuDemo: Story<MenuStoryProps>;
|
|
15
16
|
export declare const FlatMenuDemo: Story<MenuStoryProps>;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Menu.stories.d.ts","sourceRoot":"","sources":["../../../src/core/Menu/Menu.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,kBAAkB,CAAC;AAG/C,OAAO,EAOL,SAAS,
|
|
1
|
+
{"version":3,"file":"Menu.stories.d.ts","sourceRoot":"","sources":["../../../src/core/Menu/Menu.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,kBAAkB,CAAC;AAG/C,OAAO,EAOL,SAAS,EAOT,UAAU,EACX,MAAM,yBAAyB,CAAC;;AAKjC,wBA6BU;AAEV,UAAU,cAAe,SAAQ,UAAU,CAAC,SAAS,EAAE,OAAO,CAAC;IAC7D,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,aAAa,CAAC,EAAE,UAAU,GAAG,aAAa,CAAC;IAC3C,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,WAAW,CAAC,EAAE,OAAO,CAAC;CACvB;AAED,eAAO,MAAM,QAAQ,EAAE,KAAK,CAAC,cAAc,CAgM1C,CAAC;AAEF,eAAO,MAAM,YAAY,EAAE,KAAK,CAAC,cAAc,CAE9C,CAAC"}
|
|
@@ -16,7 +16,7 @@ export default {
|
|
|
16
16
|
infiniteScroll: false,
|
|
17
17
|
noItems: false,
|
|
18
18
|
emptyText: 'No items',
|
|
19
|
-
|
|
19
|
+
useFlatData: false
|
|
20
20
|
},
|
|
21
21
|
argTypes: {
|
|
22
22
|
variant: { options: ['drill-down', 'flyout'], control: { type: 'select' } },
|
|
@@ -29,17 +29,18 @@ export default {
|
|
|
29
29
|
infiniteScroll: { control: { type: 'boolean' } },
|
|
30
30
|
noItems: { control: { type: 'boolean' } },
|
|
31
31
|
emptyText: { control: { type: 'text' } },
|
|
32
|
-
|
|
32
|
+
useFlatData: { control: { type: 'boolean' } }
|
|
33
33
|
}
|
|
34
34
|
};
|
|
35
35
|
export const MenuDemo = (args) => {
|
|
36
36
|
const menuID = createUID();
|
|
37
|
+
const data = args.useFlatData ? cars : countries;
|
|
37
38
|
const searchEleRef = useRef(null);
|
|
38
39
|
const { push } = useContext(ToasterContext);
|
|
39
40
|
const [isOpen, setIsOpen] = useState(false);
|
|
40
41
|
const [isLoading, setIsLoading] = useState(false);
|
|
41
42
|
const [hasMore, setHasMore] = useState(true);
|
|
42
|
-
const [items, setItems] = useState(args.infiniteScroll ?
|
|
43
|
+
const [items, setItems] = useState(args.infiniteScroll ? data.slice(0, 10) : data);
|
|
43
44
|
const [buttonEl, setButtonEl] = useElement(null);
|
|
44
45
|
const [popoverEl, setPopoverEl] = useElement(null);
|
|
45
46
|
const [search, setSearch] = useState('');
|
|
@@ -70,7 +71,7 @@ export const MenuDemo = (args) => {
|
|
|
70
71
|
}, [search, items, searchRegex, args.showItemVisual]);
|
|
71
72
|
const resetMenu = useCallback(() => {
|
|
72
73
|
setIsOpen(false);
|
|
73
|
-
setItems(
|
|
74
|
+
setItems(data.slice(0, 10));
|
|
74
75
|
setSearch('');
|
|
75
76
|
}, []);
|
|
76
77
|
const onKeydown = useCallback(({ key }) => {
|
|
@@ -83,7 +84,7 @@ export const MenuDemo = (args) => {
|
|
|
83
84
|
setTimeout(() => {
|
|
84
85
|
setIsLoading(false);
|
|
85
86
|
setItems(prevItems => {
|
|
86
|
-
const newItems =
|
|
87
|
+
const newItems = data.slice(prevItems.length, prevItems.length + 10);
|
|
87
88
|
if (newItems.length === 0)
|
|
88
89
|
setHasMore(false);
|
|
89
90
|
return menuHelpers.appendTo(prevItems, newItems, expandedItemId);
|
|
@@ -156,9 +157,6 @@ export const MenuDemo = (args) => {
|
|
|
156
157
|
</Flex>);
|
|
157
158
|
};
|
|
158
159
|
export const FlatMenuDemo = (args) => {
|
|
159
|
-
return <MenuDemo {...args}/>;
|
|
160
|
-
};
|
|
161
|
-
FlatMenuDemo.args = {
|
|
162
|
-
items: cars
|
|
160
|
+
return <MenuDemo {...args} useFlatData/>;
|
|
163
161
|
};
|
|
164
162
|
//# sourceMappingURL=Menu.stories.jsx.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Menu.stories.jsx","sourceRoot":"","sources":["../../../src/core/Menu/Menu.stories.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Meta, Story } from '@storybook/react';\nimport { useCallback, useContext, useEffect, useMemo, useRef, useState } from 'react';\n\nimport {\n Button,\n Count,\n Flex,\n Menu,\n menuHelpers,\n MenuItemProps,\n MenuProps,\n Popover,\n SearchInput,\n ToasterContext,\n createUID,\n useElement,\n useOuterEvent\n} from '@pega/cosmos-react-core';\n\nimport { cars, countries } from './Menu.mocks';\nimport { StyledFlag } from './Menu.styles';\n\nexport default {\n title: 'Core/Menu',\n component: Menu,\n args: {\n variant: 'drill-down',\n mode: 'action',\n showItemSecondary: true,\n showItemVisual: true,\n showItemCount: true,\n parentSelection: false,\n filterPattern: 'contains',\n infiniteScroll: false,\n noItems: false,\n emptyText: 'No items',\n items: countries\n },\n argTypes: {\n variant: { options: ['drill-down', 'flyout'], control: { type: 'select' } },\n mode: { options: ['action', 'single-select', 'multi-select'], control: { type: 'select' } },\n showItemSecondary: { control: { type: 'boolean' } },\n showItemVisual: { control: { type: 'boolean' } },\n showItemCount: { control: { type: 'boolean' } },\n parentSelection: { control: { type: 'boolean' } },\n filterPattern: { options: ['contains', 'starts with'], control: { type: 'select' } },\n infiniteScroll: { control: { type: 'boolean' } },\n noItems: { control: { type: 'boolean' } },\n emptyText: { control: { type: 'text' } },\n items: { table: { disable: true } }\n }\n} as Meta;\n\ninterface MenuStoryProps extends MenuProps {\n showItemSecondary?: boolean;\n showItemVisual?: boolean;\n showItemCount?: boolean;\n parentSelection?: boolean;\n filterPattern?: 'contains' | 'starts with';\n infiniteScroll?: boolean;\n noItems?: boolean;\n}\n\nexport const MenuDemo: Story<MenuStoryProps> = (args: MenuStoryProps) => {\n const menuID = createUID();\n\n const searchEleRef = useRef<HTMLInputElement>(null);\n const { push } = useContext(ToasterContext);\n const [isOpen, setIsOpen] = useState(false);\n const [isLoading, setIsLoading] = useState(false);\n const [hasMore, setHasMore] = useState(true);\n const [items, setItems] = useState<MenuProps['items']>(\n args.infiniteScroll ? args.items.slice(0, 10) : args.items\n );\n const [buttonEl, setButtonEl] = useElement<HTMLButtonElement>(null);\n const [popoverEl, setPopoverEl] = useElement<HTMLElement>(null);\n const [search, setSearch] = useState('');\n const selections = useMemo(() => menuHelpers.getSelected(items), [items]);\n const searchRegex = useMemo(() => {\n const escapedSearch = search.replace(/[.*+\\-?^${}()|[\\]\\\\]/g, '\\\\$&');\n return new RegExp(args.filterPattern === 'contains' ? escapedSearch : `^${escapedSearch}`, 'i');\n }, [search, args.filterPattern]);\n\n const itemsToRender = useMemo(() => {\n return menuHelpers.mapTree(\n search\n ? menuHelpers.flatten(items).filter(({ primary }: MenuItemProps) => {\n return searchRegex.test(primary);\n })\n : items,\n item => {\n let selectable = false;\n\n if (!item.items || args.parentSelection) {\n selectable = true;\n }\n\n return {\n ...item,\n visual:\n args.showItemVisual && item.visual ? <StyledFlag>{item.visual}</StyledFlag> : undefined,\n count: args.showItemCount && item.items ? item.items.length : undefined,\n secondary: args.showItemSecondary ? item.secondary : undefined,\n selected: selectable ? !!item.selected : undefined,\n tooltip: args.variant === 'flyout' ? item.tooltip : undefined\n };\n }\n );\n }, [search, items, searchRegex, args.showItemVisual]);\n\n const resetMenu = useCallback(() => {\n setIsOpen(false);\n setItems(args.items.slice(0, 10));\n setSearch('');\n }, []);\n\n const onKeydown = useCallback(\n ({ key }: KeyboardEvent) => {\n if (key === 'Escape') resetMenu();\n },\n [resetMenu]\n );\n\n const loadMore = useCallback(\n (expandedItemId?: MenuItemProps['id']) => {\n if (!expandedItemId) {\n setIsLoading(true);\n setTimeout(() => {\n setIsLoading(false);\n setItems(prevItems => {\n const newItems = args.items.slice(prevItems.length, prevItems.length + 10);\n\n if (newItems.length === 0) setHasMore(false);\n\n return menuHelpers.appendTo(prevItems, newItems, expandedItemId);\n });\n }, 2000);\n }\n },\n [items, isLoading]\n );\n\n useOuterEvent('mousedown', [popoverEl, buttonEl], e => {\n if (args.variant === 'flyout') {\n const path = e.composedPath();\n const considerEvent = path.every(el => {\n return !(el instanceof HTMLElement && el.dataset.flyoutMenuParentId === menuID);\n });\n if (considerEvent) {\n resetMenu();\n }\n } else {\n resetMenu();\n }\n });\n\n useEffect(() => {\n document.addEventListener('keydown', onKeydown);\n return () => {\n document.removeEventListener('keydown', onKeydown);\n };\n }, []);\n\n useEffect(() => {\n if (isOpen) {\n searchEleRef?.current?.focus();\n }\n }, [isOpen, searchEleRef.current]);\n\n return (\n <Flex container={{ justify: 'center' }}>\n <Button ref={setButtonEl} onClick={() => setIsOpen(cur => !cur)} variant='primary'>\n Open the MENU\n </Button>\n\n <Popover show={isOpen} ref={setPopoverEl} target={buttonEl}>\n <Menu\n {...args}\n id={menuID}\n items={args.noItems ? [] : itemsToRender}\n accent={search ? searchRegex : undefined}\n mode={args.variant === 'drill-down' ? args.mode : 'action'}\n loading={isLoading}\n emptyText={args.emptyText}\n variant={args.variant}\n loadMore={args.infiniteScroll && hasMore ? loadMore : undefined}\n focusControlEl={searchEleRef.current || undefined}\n onItemClick={id => {\n if (args.mode === 'single-select' || args.mode === 'multi-select') {\n setItems(cur => menuHelpers.toggleSelected(cur, id, args.mode));\n } else {\n const clicked = menuHelpers.getItem(items, id);\n if (clicked) {\n push({\n id: `${Date.now()}`,\n content: `${clicked.primary} added`\n });\n }\n resetMenu();\n }\n }}\n header={\n args.variant === 'drill-down' && (\n <SearchInput\n ref={searchEleRef}\n onSearchChange={setSearch}\n value={search}\n role='combobox'\n searchInputAriaLabel='Start typing to search.'\n />\n )\n }\n footer={\n args.variant === 'flyout' ? (\n <SearchInput\n ref={searchEleRef}\n onSearchChange={setSearch}\n value={search}\n role='combobox'\n searchInputAriaLabel='Start typing to search.'\n />\n ) : (\n (args.mode === 'single-select' || args.mode === 'multi-select') && (\n <Flex container={{ justify: 'between' }}>\n <Button onClick={resetMenu}>Cancel</Button>\n\n <Button\n variant='primary'\n disabled={!selections.length}\n onClick={() => {\n resetMenu();\n push({\n id: `${Date.now()}`,\n content: `${selections.length} item${\n selections.length !== 1 ? 's' : ''\n } added`\n });\n }}\n >\n Add\n {selections.length > 0 && args.mode === 'multi-select' && (\n <>\n <Count>{selections.length}</Count>\n </>\n )}\n </Button>\n </Flex>\n )\n )\n }\n />\n </Popover>\n </Flex>\n );\n};\n\nexport const FlatMenuDemo: Story<MenuStoryProps> = (args: MenuStoryProps) => {\n return <MenuDemo {...args} />;\n};\n\nFlatMenuDemo.args = {\n items: cars\n};\n"]}
|
|
1
|
+
{"version":3,"file":"Menu.stories.jsx","sourceRoot":"","sources":["../../../src/core/Menu/Menu.stories.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Meta, Story } from '@storybook/react';\nimport { useCallback, useContext, useEffect, useMemo, useRef, useState } from 'react';\n\nimport {\n Button,\n Count,\n Flex,\n Menu,\n menuHelpers,\n MenuItemProps,\n MenuProps,\n Popover,\n SearchInput,\n ToasterContext,\n createUID,\n useElement,\n useOuterEvent,\n OmitStrict\n} from '@pega/cosmos-react-core';\n\nimport { cars, countries } from './Menu.mocks';\nimport { StyledFlag } from './Menu.styles';\n\nexport default {\n title: 'Core/Menu',\n component: Menu,\n args: {\n variant: 'drill-down',\n mode: 'action',\n showItemSecondary: true,\n showItemVisual: true,\n showItemCount: true,\n parentSelection: false,\n filterPattern: 'contains',\n infiniteScroll: false,\n noItems: false,\n emptyText: 'No items',\n useFlatData: false\n },\n argTypes: {\n variant: { options: ['drill-down', 'flyout'], control: { type: 'select' } },\n mode: { options: ['action', 'single-select', 'multi-select'], control: { type: 'select' } },\n showItemSecondary: { control: { type: 'boolean' } },\n showItemVisual: { control: { type: 'boolean' } },\n showItemCount: { control: { type: 'boolean' } },\n parentSelection: { control: { type: 'boolean' } },\n filterPattern: { options: ['contains', 'starts with'], control: { type: 'select' } },\n infiniteScroll: { control: { type: 'boolean' } },\n noItems: { control: { type: 'boolean' } },\n emptyText: { control: { type: 'text' } },\n useFlatData: { control: { type: 'boolean' } }\n }\n} as Meta;\n\ninterface MenuStoryProps extends OmitStrict<MenuProps, 'items'> {\n showItemSecondary?: boolean;\n showItemVisual?: boolean;\n showItemCount?: boolean;\n parentSelection?: boolean;\n filterPattern?: 'contains' | 'starts with';\n infiniteScroll?: boolean;\n noItems?: boolean;\n useFlatData?: boolean;\n}\n\nexport const MenuDemo: Story<MenuStoryProps> = (args: MenuStoryProps) => {\n const menuID = createUID();\n const data = args.useFlatData ? cars : countries;\n\n const searchEleRef = useRef<HTMLInputElement>(null);\n const { push } = useContext(ToasterContext);\n const [isOpen, setIsOpen] = useState(false);\n const [isLoading, setIsLoading] = useState(false);\n const [hasMore, setHasMore] = useState(true);\n const [items, setItems] = useState<MenuProps['items']>(\n args.infiniteScroll ? data.slice(0, 10) : data\n );\n const [buttonEl, setButtonEl] = useElement<HTMLButtonElement>(null);\n const [popoverEl, setPopoverEl] = useElement<HTMLElement>(null);\n const [search, setSearch] = useState('');\n const selections = useMemo(() => menuHelpers.getSelected(items), [items]);\n const searchRegex = useMemo(() => {\n const escapedSearch = search.replace(/[.*+\\-?^${}()|[\\]\\\\]/g, '\\\\$&');\n return new RegExp(args.filterPattern === 'contains' ? escapedSearch : `^${escapedSearch}`, 'i');\n }, [search, args.filterPattern]);\n\n const itemsToRender = useMemo(() => {\n return menuHelpers.mapTree(\n search\n ? menuHelpers.flatten(items).filter(({ primary }: MenuItemProps) => {\n return searchRegex.test(primary);\n })\n : items,\n item => {\n let selectable = false;\n\n if (!item.items || args.parentSelection) {\n selectable = true;\n }\n\n return {\n ...item,\n visual:\n args.showItemVisual && item.visual ? <StyledFlag>{item.visual}</StyledFlag> : undefined,\n count: args.showItemCount && item.items ? item.items.length : undefined,\n secondary: args.showItemSecondary ? item.secondary : undefined,\n selected: selectable ? !!item.selected : undefined,\n tooltip: args.variant === 'flyout' ? item.tooltip : undefined\n };\n }\n );\n }, [search, items, searchRegex, args.showItemVisual]);\n\n const resetMenu = useCallback(() => {\n setIsOpen(false);\n setItems(data.slice(0, 10));\n setSearch('');\n }, []);\n\n const onKeydown = useCallback(\n ({ key }: KeyboardEvent) => {\n if (key === 'Escape') resetMenu();\n },\n [resetMenu]\n );\n\n const loadMore = useCallback(\n (expandedItemId?: MenuItemProps['id']) => {\n if (!expandedItemId) {\n setIsLoading(true);\n setTimeout(() => {\n setIsLoading(false);\n setItems(prevItems => {\n const newItems = data.slice(prevItems.length, prevItems.length + 10);\n\n if (newItems.length === 0) setHasMore(false);\n\n return menuHelpers.appendTo(prevItems, newItems, expandedItemId);\n });\n }, 2000);\n }\n },\n [items, isLoading]\n );\n\n useOuterEvent('mousedown', [popoverEl, buttonEl], e => {\n if (args.variant === 'flyout') {\n const path = e.composedPath();\n const considerEvent = path.every(el => {\n return !(el instanceof HTMLElement && el.dataset.flyoutMenuParentId === menuID);\n });\n if (considerEvent) {\n resetMenu();\n }\n } else {\n resetMenu();\n }\n });\n\n useEffect(() => {\n document.addEventListener('keydown', onKeydown);\n return () => {\n document.removeEventListener('keydown', onKeydown);\n };\n }, []);\n\n useEffect(() => {\n if (isOpen) {\n searchEleRef?.current?.focus();\n }\n }, [isOpen, searchEleRef.current]);\n\n return (\n <Flex container={{ justify: 'center' }}>\n <Button ref={setButtonEl} onClick={() => setIsOpen(cur => !cur)} variant='primary'>\n Open the MENU\n </Button>\n\n <Popover show={isOpen} ref={setPopoverEl} target={buttonEl}>\n <Menu\n {...args}\n id={menuID}\n items={args.noItems ? [] : itemsToRender}\n accent={search ? searchRegex : undefined}\n mode={args.variant === 'drill-down' ? args.mode : 'action'}\n loading={isLoading}\n emptyText={args.emptyText}\n variant={args.variant}\n loadMore={args.infiniteScroll && hasMore ? loadMore : undefined}\n focusControlEl={searchEleRef.current || undefined}\n onItemClick={id => {\n if (args.mode === 'single-select' || args.mode === 'multi-select') {\n setItems(cur => menuHelpers.toggleSelected(cur, id, args.mode));\n } else {\n const clicked = menuHelpers.getItem(items, id);\n if (clicked) {\n push({\n id: `${Date.now()}`,\n content: `${clicked.primary} added`\n });\n }\n resetMenu();\n }\n }}\n header={\n args.variant === 'drill-down' && (\n <SearchInput\n ref={searchEleRef}\n onSearchChange={setSearch}\n value={search}\n role='combobox'\n searchInputAriaLabel='Start typing to search.'\n />\n )\n }\n footer={\n args.variant === 'flyout' ? (\n <SearchInput\n ref={searchEleRef}\n onSearchChange={setSearch}\n value={search}\n role='combobox'\n searchInputAriaLabel='Start typing to search.'\n />\n ) : (\n (args.mode === 'single-select' || args.mode === 'multi-select') && (\n <Flex container={{ justify: 'between' }}>\n <Button onClick={resetMenu}>Cancel</Button>\n\n <Button\n variant='primary'\n disabled={!selections.length}\n onClick={() => {\n resetMenu();\n push({\n id: `${Date.now()}`,\n content: `${selections.length} item${\n selections.length !== 1 ? 's' : ''\n } added`\n });\n }}\n >\n Add\n {selections.length > 0 && args.mode === 'multi-select' && (\n <>\n <Count>{selections.length}</Count>\n </>\n )}\n </Button>\n </Flex>\n )\n )\n }\n />\n </Popover>\n </Flex>\n );\n};\n\nexport const FlatMenuDemo: Story<MenuStoryProps> = (args: MenuStoryProps) => {\n return <MenuDemo {...args} useFlatData />;\n};\n"]}
|
|
@@ -8,7 +8,7 @@ export const ToasterDemo = () => {
|
|
|
8
8
|
const { push } = useContext(ToasterContext);
|
|
9
9
|
const [count, setCount] = useState(0);
|
|
10
10
|
const messages = [
|
|
11
|
-
'
|
|
11
|
+
'This is a short toast message!',
|
|
12
12
|
'This toast message is much longer and will need to be trimmed with an ellipsis in order to fit within the confines of the component.'
|
|
13
13
|
];
|
|
14
14
|
const pushToaster = () => {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Toaster.stories.jsx","sourceRoot":"","sources":["../../../src/core/Toaster/Toaster.stories.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,UAAU,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAE7C,OAAO,EAAE,MAAM,EAAE,OAAO,EAAE,cAAc,EAAE,MAAM,yBAAyB,CAAC;AAE1E,eAAe;IACb,KAAK,EAAE,cAAc;IACrB,SAAS,EAAE,OAAO;CACX,CAAC;AAEV,MAAM,CAAC,MAAM,WAAW,GAAG,GAAG,EAAE;IAS9B,MAAM,EAAE,IAAI,EAAE,GAAG,UAAU,CAAC,cAAc,CAAC,CAAC;IAC5C,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,QAAQ,CAAC,CAAC,CAAC,CAAC;IAEtC,MAAM,QAAQ,GAAG;QACf
|
|
1
|
+
{"version":3,"file":"Toaster.stories.jsx","sourceRoot":"","sources":["../../../src/core/Toaster/Toaster.stories.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,UAAU,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAE7C,OAAO,EAAE,MAAM,EAAE,OAAO,EAAE,cAAc,EAAE,MAAM,yBAAyB,CAAC;AAE1E,eAAe;IACb,KAAK,EAAE,cAAc;IACrB,SAAS,EAAE,OAAO;CACX,CAAC;AAEV,MAAM,CAAC,MAAM,WAAW,GAAG,GAAG,EAAE;IAS9B,MAAM,EAAE,IAAI,EAAE,GAAG,UAAU,CAAC,cAAc,CAAC,CAAC;IAC5C,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,QAAQ,CAAC,CAAC,CAAC,CAAC;IAEtC,MAAM,QAAQ,GAAG;QACf,gCAAgC;QAChC,sIAAsI;KACvI,CAAC;IAEF,MAAM,WAAW,GAAG,GAAG,EAAE;QACvB,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,IAAI,GAAG,CAAC,CAAC,CAAC;QAC3B,IAAI,CAAC;YACH,OAAO,EAAE,QAAQ,CAAC,KAAK,GAAG,CAAC,CAAC;SAC7B,CAAC,CAAC;IACL,CAAC,CAAC;IAEF,OAAO,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC,WAAW,CAAC,CAAC,eAAe,EAAE,MAAM,CAAC,CAAC;AAChE,CAAC,CAAC","sourcesContent":["import { Meta } from '@storybook/react';\nimport { useContext, useState } from 'react';\n\nimport { Button, Toaster, ToasterContext } from '@pega/cosmos-react-core';\n\nexport default {\n title: 'Core/Toaster',\n component: Toaster\n} as Meta;\n\nexport const ToasterDemo = () => {\n /*\n * The <Toaster> component should be wrapped around the entire portion of an application that utilizes it.\n * For most apps that is once near the root of the app's React tree.\n * Descendant components can utilize the Toaster's push context method via a useContext hook, as demonstrated here.\n * This story component represents an component rendered somewhere in an app's tree.\n * Note, a Toaster provider is already rendered at the root of the Cosmos Storybook, allowing for the use of context here.\n */\n\n const { push } = useContext(ToasterContext);\n const [count, setCount] = useState(0);\n\n const messages = [\n 'This is a short toast message!',\n 'This toast message is much longer and will need to be trimmed with an ellipsis in order to fit within the confines of the component.'\n ];\n\n const pushToaster = () => {\n setCount(curr => curr + 1);\n push({\n content: messages[count % 2]\n });\n };\n\n return <Button onClick={pushToaster}>Make some Toast</Button>;\n};\n"]}
|
|
@@ -0,0 +1,307 @@
|
|
|
1
|
+
export declare const label = "Form field label";
|
|
2
|
+
export declare const createPegaCustomElement: (win: typeof globalThis) => {
|
|
3
|
+
new (): {
|
|
4
|
+
removeElements(): void;
|
|
5
|
+
connectedCallback(): void;
|
|
6
|
+
accessKey: string;
|
|
7
|
+
readonly accessKeyLabel: string;
|
|
8
|
+
autocapitalize: string;
|
|
9
|
+
dir: string;
|
|
10
|
+
draggable: boolean;
|
|
11
|
+
hidden: boolean;
|
|
12
|
+
innerText: string;
|
|
13
|
+
lang: string;
|
|
14
|
+
readonly offsetHeight: number;
|
|
15
|
+
readonly offsetLeft: number;
|
|
16
|
+
readonly offsetParent: Element | null;
|
|
17
|
+
readonly offsetTop: number;
|
|
18
|
+
readonly offsetWidth: number;
|
|
19
|
+
outerText: string;
|
|
20
|
+
spellcheck: boolean;
|
|
21
|
+
title: string;
|
|
22
|
+
translate: boolean;
|
|
23
|
+
attachInternals(): ElementInternals;
|
|
24
|
+
click(): void;
|
|
25
|
+
addEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions | undefined): void;
|
|
26
|
+
addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions | undefined): void;
|
|
27
|
+
removeEventListener<K_1 extends keyof HTMLElementEventMap>(type: K_1, listener: (this: HTMLElement, ev: HTMLElementEventMap[K_1]) => any, options?: boolean | EventListenerOptions | undefined): void;
|
|
28
|
+
removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions | undefined): void;
|
|
29
|
+
readonly attributes: NamedNodeMap;
|
|
30
|
+
readonly classList: DOMTokenList;
|
|
31
|
+
className: string;
|
|
32
|
+
readonly clientHeight: number;
|
|
33
|
+
readonly clientLeft: number;
|
|
34
|
+
readonly clientTop: number;
|
|
35
|
+
readonly clientWidth: number;
|
|
36
|
+
id: string;
|
|
37
|
+
readonly localName: string;
|
|
38
|
+
readonly namespaceURI: string | null;
|
|
39
|
+
onfullscreenchange: ((this: Element, ev: Event) => any) | null;
|
|
40
|
+
onfullscreenerror: ((this: Element, ev: Event) => any) | null;
|
|
41
|
+
outerHTML: string;
|
|
42
|
+
readonly ownerDocument: Document;
|
|
43
|
+
readonly part: DOMTokenList;
|
|
44
|
+
readonly prefix: string | null;
|
|
45
|
+
readonly scrollHeight: number;
|
|
46
|
+
scrollLeft: number;
|
|
47
|
+
scrollTop: number;
|
|
48
|
+
readonly scrollWidth: number;
|
|
49
|
+
readonly shadowRoot: ShadowRoot | null;
|
|
50
|
+
slot: string;
|
|
51
|
+
readonly tagName: string;
|
|
52
|
+
attachShadow(init: ShadowRootInit): ShadowRoot;
|
|
53
|
+
closest<K_2 extends keyof HTMLElementTagNameMap>(selector: K_2): HTMLElementTagNameMap[K_2] | null;
|
|
54
|
+
closest<K_3 extends keyof SVGElementTagNameMap>(selector: K_3): SVGElementTagNameMap[K_3] | null;
|
|
55
|
+
closest<E extends Element = Element>(selectors: string): E | null;
|
|
56
|
+
getAttribute(qualifiedName: string): string | null;
|
|
57
|
+
getAttributeNS(namespace: string | null, localName: string): string | null;
|
|
58
|
+
getAttributeNames(): string[];
|
|
59
|
+
getAttributeNode(qualifiedName: string): Attr | null;
|
|
60
|
+
getAttributeNodeNS(namespace: string | null, localName: string): Attr | null;
|
|
61
|
+
getBoundingClientRect(): DOMRect;
|
|
62
|
+
getClientRects(): DOMRectList;
|
|
63
|
+
getElementsByClassName(classNames: string): HTMLCollectionOf<Element>;
|
|
64
|
+
getElementsByTagName<K_4 extends keyof HTMLElementTagNameMap>(qualifiedName: K_4): HTMLCollectionOf<HTMLElementTagNameMap[K_4]>;
|
|
65
|
+
getElementsByTagName<K_5 extends keyof SVGElementTagNameMap>(qualifiedName: K_5): HTMLCollectionOf<SVGElementTagNameMap[K_5]>;
|
|
66
|
+
getElementsByTagName(qualifiedName: string): HTMLCollectionOf<Element>;
|
|
67
|
+
getElementsByTagNameNS(namespaceURI: "http://www.w3.org/1999/xhtml", localName: string): HTMLCollectionOf<HTMLElement>;
|
|
68
|
+
getElementsByTagNameNS(namespaceURI: "http://www.w3.org/2000/svg", localName: string): HTMLCollectionOf<SVGElement>;
|
|
69
|
+
getElementsByTagNameNS(namespace: string | null, localName: string): HTMLCollectionOf<Element>;
|
|
70
|
+
hasAttribute(qualifiedName: string): boolean;
|
|
71
|
+
hasAttributeNS(namespace: string | null, localName: string): boolean;
|
|
72
|
+
hasAttributes(): boolean;
|
|
73
|
+
hasPointerCapture(pointerId: number): boolean;
|
|
74
|
+
insertAdjacentElement(where: InsertPosition, element: Element): Element | null;
|
|
75
|
+
insertAdjacentHTML(position: InsertPosition, text: string): void;
|
|
76
|
+
insertAdjacentText(where: InsertPosition, data: string): void;
|
|
77
|
+
matches(selectors: string): boolean;
|
|
78
|
+
releasePointerCapture(pointerId: number): void;
|
|
79
|
+
removeAttribute(qualifiedName: string): void;
|
|
80
|
+
removeAttributeNS(namespace: string | null, localName: string): void;
|
|
81
|
+
removeAttributeNode(attr: Attr): Attr;
|
|
82
|
+
requestFullscreen(options?: FullscreenOptions | undefined): Promise<void>;
|
|
83
|
+
requestPointerLock(): void;
|
|
84
|
+
scroll(options?: ScrollToOptions | undefined): void;
|
|
85
|
+
scroll(x: number, y: number): void;
|
|
86
|
+
scrollBy(options?: ScrollToOptions | undefined): void;
|
|
87
|
+
scrollBy(x: number, y: number): void;
|
|
88
|
+
scrollIntoView(arg?: boolean | ScrollIntoViewOptions | undefined): void;
|
|
89
|
+
scrollTo(options?: ScrollToOptions | undefined): void;
|
|
90
|
+
scrollTo(x: number, y: number): void;
|
|
91
|
+
setAttribute(qualifiedName: string, value: string): void;
|
|
92
|
+
setAttributeNS(namespace: string | null, qualifiedName: string, value: string): void;
|
|
93
|
+
setAttributeNode(attr: Attr): Attr | null;
|
|
94
|
+
setAttributeNodeNS(attr: Attr): Attr | null;
|
|
95
|
+
setPointerCapture(pointerId: number): void;
|
|
96
|
+
toggleAttribute(qualifiedName: string, force?: boolean | undefined): boolean;
|
|
97
|
+
webkitMatchesSelector(selectors: string): boolean;
|
|
98
|
+
readonly baseURI: string;
|
|
99
|
+
readonly childNodes: NodeListOf<ChildNode>;
|
|
100
|
+
readonly firstChild: ChildNode | null;
|
|
101
|
+
readonly isConnected: boolean;
|
|
102
|
+
readonly lastChild: ChildNode | null;
|
|
103
|
+
readonly nextSibling: ChildNode | null;
|
|
104
|
+
readonly nodeName: string;
|
|
105
|
+
readonly nodeType: number;
|
|
106
|
+
nodeValue: string | null;
|
|
107
|
+
readonly parentElement: HTMLElement | null;
|
|
108
|
+
readonly parentNode: ParentNode | null;
|
|
109
|
+
readonly previousSibling: ChildNode | null;
|
|
110
|
+
textContent: string | null;
|
|
111
|
+
appendChild<T extends Node>(node: T): T;
|
|
112
|
+
cloneNode(deep?: boolean | undefined): Node;
|
|
113
|
+
compareDocumentPosition(other: Node): number;
|
|
114
|
+
contains(other: Node | null): boolean;
|
|
115
|
+
getRootNode(options?: GetRootNodeOptions | undefined): Node;
|
|
116
|
+
hasChildNodes(): boolean;
|
|
117
|
+
insertBefore<T_1 extends Node>(node: T_1, child: Node | null): T_1;
|
|
118
|
+
isDefaultNamespace(namespace: string | null): boolean;
|
|
119
|
+
isEqualNode(otherNode: Node | null): boolean;
|
|
120
|
+
isSameNode(otherNode: Node | null): boolean;
|
|
121
|
+
lookupNamespaceURI(prefix: string | null): string | null;
|
|
122
|
+
lookupPrefix(namespace: string | null): string | null;
|
|
123
|
+
normalize(): void;
|
|
124
|
+
removeChild<T_2 extends Node>(child: T_2): T_2;
|
|
125
|
+
replaceChild<T_3 extends Node>(node: Node, child: T_3): T_3;
|
|
126
|
+
readonly ATTRIBUTE_NODE: number;
|
|
127
|
+
readonly CDATA_SECTION_NODE: number;
|
|
128
|
+
readonly COMMENT_NODE: number;
|
|
129
|
+
readonly DOCUMENT_FRAGMENT_NODE: number;
|
|
130
|
+
readonly DOCUMENT_NODE: number;
|
|
131
|
+
readonly DOCUMENT_POSITION_CONTAINED_BY: number;
|
|
132
|
+
readonly DOCUMENT_POSITION_CONTAINS: number;
|
|
133
|
+
readonly DOCUMENT_POSITION_DISCONNECTED: number;
|
|
134
|
+
readonly DOCUMENT_POSITION_FOLLOWING: number;
|
|
135
|
+
readonly DOCUMENT_POSITION_IMPLEMENTATION_SPECIFIC: number;
|
|
136
|
+
readonly DOCUMENT_POSITION_PRECEDING: number;
|
|
137
|
+
readonly DOCUMENT_TYPE_NODE: number;
|
|
138
|
+
readonly ELEMENT_NODE: number;
|
|
139
|
+
readonly ENTITY_NODE: number;
|
|
140
|
+
readonly ENTITY_REFERENCE_NODE: number;
|
|
141
|
+
readonly NOTATION_NODE: number;
|
|
142
|
+
readonly PROCESSING_INSTRUCTION_NODE: number;
|
|
143
|
+
readonly TEXT_NODE: number;
|
|
144
|
+
dispatchEvent(event: Event): boolean;
|
|
145
|
+
ariaAtomic: string;
|
|
146
|
+
ariaAutoComplete: string;
|
|
147
|
+
ariaBusy: string;
|
|
148
|
+
ariaChecked: string;
|
|
149
|
+
ariaColCount: string;
|
|
150
|
+
ariaColIndex: string;
|
|
151
|
+
ariaColSpan: string;
|
|
152
|
+
ariaCurrent: string;
|
|
153
|
+
ariaDisabled: string;
|
|
154
|
+
ariaExpanded: string;
|
|
155
|
+
ariaHasPopup: string;
|
|
156
|
+
ariaHidden: string;
|
|
157
|
+
ariaKeyShortcuts: string;
|
|
158
|
+
ariaLabel: string;
|
|
159
|
+
ariaLevel: string;
|
|
160
|
+
ariaLive: string;
|
|
161
|
+
ariaModal: string;
|
|
162
|
+
ariaMultiLine: string;
|
|
163
|
+
ariaMultiSelectable: string;
|
|
164
|
+
ariaOrientation: string;
|
|
165
|
+
ariaPlaceholder: string;
|
|
166
|
+
ariaPosInSet: string;
|
|
167
|
+
ariaPressed: string;
|
|
168
|
+
ariaReadOnly: string;
|
|
169
|
+
ariaRequired: string;
|
|
170
|
+
ariaRoleDescription: string;
|
|
171
|
+
ariaRowCount: string;
|
|
172
|
+
ariaRowIndex: string;
|
|
173
|
+
ariaRowSpan: string;
|
|
174
|
+
ariaSelected: string;
|
|
175
|
+
ariaSetSize: string;
|
|
176
|
+
ariaSort: string;
|
|
177
|
+
ariaValueMax: string;
|
|
178
|
+
ariaValueMin: string;
|
|
179
|
+
ariaValueNow: string;
|
|
180
|
+
ariaValueText: string;
|
|
181
|
+
animate(keyframes: PropertyIndexedKeyframes | Keyframe[] | null, options?: number | KeyframeAnimationOptions | undefined): Animation;
|
|
182
|
+
getAnimations(options?: GetAnimationsOptions | undefined): Animation[];
|
|
183
|
+
after(...nodes: (string | Node)[]): void;
|
|
184
|
+
before(...nodes: (string | Node)[]): void;
|
|
185
|
+
remove(): void;
|
|
186
|
+
replaceWith(...nodes: (string | Node)[]): void;
|
|
187
|
+
innerHTML: string;
|
|
188
|
+
readonly nextElementSibling: Element | null;
|
|
189
|
+
readonly previousElementSibling: Element | null;
|
|
190
|
+
readonly childElementCount: number;
|
|
191
|
+
readonly children: HTMLCollection;
|
|
192
|
+
readonly firstElementChild: Element | null;
|
|
193
|
+
readonly lastElementChild: Element | null;
|
|
194
|
+
append(...nodes: (string | Node)[]): void;
|
|
195
|
+
prepend(...nodes: (string | Node)[]): void;
|
|
196
|
+
querySelector<K_6 extends keyof HTMLElementTagNameMap>(selectors: K_6): HTMLElementTagNameMap[K_6] | null;
|
|
197
|
+
querySelector<K_7 extends keyof SVGElementTagNameMap>(selectors: K_7): SVGElementTagNameMap[K_7] | null;
|
|
198
|
+
querySelector<E_1 extends Element = Element>(selectors: string): E_1 | null;
|
|
199
|
+
querySelectorAll<K_8 extends keyof HTMLElementTagNameMap>(selectors: K_8): NodeListOf<HTMLElementTagNameMap[K_8]>;
|
|
200
|
+
querySelectorAll<K_9 extends keyof SVGElementTagNameMap>(selectors: K_9): NodeListOf<SVGElementTagNameMap[K_9]>;
|
|
201
|
+
querySelectorAll<E_2 extends Element = Element>(selectors: string): NodeListOf<E_2>;
|
|
202
|
+
replaceChildren(...nodes: (string | Node)[]): void;
|
|
203
|
+
readonly assignedSlot: HTMLSlotElement | null;
|
|
204
|
+
oncopy: ((this: DocumentAndElementEventHandlers, ev: ClipboardEvent) => any) | null;
|
|
205
|
+
oncut: ((this: DocumentAndElementEventHandlers, ev: ClipboardEvent) => any) | null;
|
|
206
|
+
onpaste: ((this: DocumentAndElementEventHandlers, ev: ClipboardEvent) => any) | null;
|
|
207
|
+
readonly style: CSSStyleDeclaration;
|
|
208
|
+
contentEditable: string;
|
|
209
|
+
enterKeyHint: string;
|
|
210
|
+
inputMode: string;
|
|
211
|
+
readonly isContentEditable: boolean;
|
|
212
|
+
onabort: ((this: GlobalEventHandlers, ev: UIEvent) => any) | null;
|
|
213
|
+
onanimationcancel: ((this: GlobalEventHandlers, ev: AnimationEvent) => any) | null;
|
|
214
|
+
onanimationend: ((this: GlobalEventHandlers, ev: AnimationEvent) => any) | null;
|
|
215
|
+
onanimationiteration: ((this: GlobalEventHandlers, ev: AnimationEvent) => any) | null;
|
|
216
|
+
onanimationstart: ((this: GlobalEventHandlers, ev: AnimationEvent) => any) | null;
|
|
217
|
+
onauxclick: ((this: GlobalEventHandlers, ev: MouseEvent) => any) | null;
|
|
218
|
+
onblur: ((this: GlobalEventHandlers, ev: FocusEvent) => any) | null;
|
|
219
|
+
oncanplay: ((this: GlobalEventHandlers, ev: Event) => any) | null;
|
|
220
|
+
oncanplaythrough: ((this: GlobalEventHandlers, ev: Event) => any) | null;
|
|
221
|
+
onchange: ((this: GlobalEventHandlers, ev: Event) => any) | null;
|
|
222
|
+
onclick: ((this: GlobalEventHandlers, ev: MouseEvent) => any) | null;
|
|
223
|
+
onclose: ((this: GlobalEventHandlers, ev: Event) => any) | null;
|
|
224
|
+
oncontextmenu: ((this: GlobalEventHandlers, ev: MouseEvent) => any) | null;
|
|
225
|
+
oncuechange: ((this: GlobalEventHandlers, ev: Event) => any) | null;
|
|
226
|
+
ondblclick: ((this: GlobalEventHandlers, ev: MouseEvent) => any) | null;
|
|
227
|
+
ondrag: ((this: GlobalEventHandlers, ev: DragEvent) => any) | null;
|
|
228
|
+
ondragend: ((this: GlobalEventHandlers, ev: DragEvent) => any) | null;
|
|
229
|
+
ondragenter: ((this: GlobalEventHandlers, ev: DragEvent) => any) | null;
|
|
230
|
+
ondragleave: ((this: GlobalEventHandlers, ev: DragEvent) => any) | null;
|
|
231
|
+
ondragover: ((this: GlobalEventHandlers, ev: DragEvent) => any) | null;
|
|
232
|
+
ondragstart: ((this: GlobalEventHandlers, ev: DragEvent) => any) | null;
|
|
233
|
+
ondrop: ((this: GlobalEventHandlers, ev: DragEvent) => any) | null;
|
|
234
|
+
ondurationchange: ((this: GlobalEventHandlers, ev: Event) => any) | null;
|
|
235
|
+
onemptied: ((this: GlobalEventHandlers, ev: Event) => any) | null;
|
|
236
|
+
onended: ((this: GlobalEventHandlers, ev: Event) => any) | null;
|
|
237
|
+
onerror: OnErrorEventHandler;
|
|
238
|
+
onfocus: ((this: GlobalEventHandlers, ev: FocusEvent) => any) | null;
|
|
239
|
+
onformdata: ((this: GlobalEventHandlers, ev: FormDataEvent) => any) | null;
|
|
240
|
+
ongotpointercapture: ((this: GlobalEventHandlers, ev: PointerEvent) => any) | null;
|
|
241
|
+
oninput: ((this: GlobalEventHandlers, ev: Event) => any) | null;
|
|
242
|
+
oninvalid: ((this: GlobalEventHandlers, ev: Event) => any) | null;
|
|
243
|
+
onkeydown: ((this: GlobalEventHandlers, ev: KeyboardEvent) => any) | null;
|
|
244
|
+
onkeypress: ((this: GlobalEventHandlers, ev: KeyboardEvent) => any) | null;
|
|
245
|
+
onkeyup: ((this: GlobalEventHandlers, ev: KeyboardEvent) => any) | null;
|
|
246
|
+
onload: ((this: GlobalEventHandlers, ev: Event) => any) | null;
|
|
247
|
+
onloadeddata: ((this: GlobalEventHandlers, ev: Event) => any) | null;
|
|
248
|
+
onloadedmetadata: ((this: GlobalEventHandlers, ev: Event) => any) | null;
|
|
249
|
+
onloadstart: ((this: GlobalEventHandlers, ev: Event) => any) | null;
|
|
250
|
+
onlostpointercapture: ((this: GlobalEventHandlers, ev: PointerEvent) => any) | null;
|
|
251
|
+
onmousedown: ((this: GlobalEventHandlers, ev: MouseEvent) => any) | null;
|
|
252
|
+
onmouseenter: ((this: GlobalEventHandlers, ev: MouseEvent) => any) | null;
|
|
253
|
+
onmouseleave: ((this: GlobalEventHandlers, ev: MouseEvent) => any) | null;
|
|
254
|
+
onmousemove: ((this: GlobalEventHandlers, ev: MouseEvent) => any) | null;
|
|
255
|
+
onmouseout: ((this: GlobalEventHandlers, ev: MouseEvent) => any) | null;
|
|
256
|
+
onmouseover: ((this: GlobalEventHandlers, ev: MouseEvent) => any) | null;
|
|
257
|
+
onmouseup: ((this: GlobalEventHandlers, ev: MouseEvent) => any) | null;
|
|
258
|
+
onpause: ((this: GlobalEventHandlers, ev: Event) => any) | null;
|
|
259
|
+
onplay: ((this: GlobalEventHandlers, ev: Event) => any) | null;
|
|
260
|
+
onplaying: ((this: GlobalEventHandlers, ev: Event) => any) | null;
|
|
261
|
+
onpointercancel: ((this: GlobalEventHandlers, ev: PointerEvent) => any) | null;
|
|
262
|
+
onpointerdown: ((this: GlobalEventHandlers, ev: PointerEvent) => any) | null;
|
|
263
|
+
onpointerenter: ((this: GlobalEventHandlers, ev: PointerEvent) => any) | null;
|
|
264
|
+
onpointerleave: ((this: GlobalEventHandlers, ev: PointerEvent) => any) | null;
|
|
265
|
+
onpointermove: ((this: GlobalEventHandlers, ev: PointerEvent) => any) | null;
|
|
266
|
+
onpointerout: ((this: GlobalEventHandlers, ev: PointerEvent) => any) | null;
|
|
267
|
+
onpointerover: ((this: GlobalEventHandlers, ev: PointerEvent) => any) | null;
|
|
268
|
+
onpointerup: ((this: GlobalEventHandlers, ev: PointerEvent) => any) | null;
|
|
269
|
+
onprogress: ((this: GlobalEventHandlers, ev: ProgressEvent<EventTarget>) => any) | null;
|
|
270
|
+
onratechange: ((this: GlobalEventHandlers, ev: Event) => any) | null;
|
|
271
|
+
onreset: ((this: GlobalEventHandlers, ev: Event) => any) | null;
|
|
272
|
+
onresize: ((this: GlobalEventHandlers, ev: UIEvent) => any) | null;
|
|
273
|
+
onscroll: ((this: GlobalEventHandlers, ev: Event) => any) | null;
|
|
274
|
+
onseeked: ((this: GlobalEventHandlers, ev: Event) => any) | null;
|
|
275
|
+
onseeking: ((this: GlobalEventHandlers, ev: Event) => any) | null;
|
|
276
|
+
onselect: ((this: GlobalEventHandlers, ev: Event) => any) | null;
|
|
277
|
+
onselectionchange: ((this: GlobalEventHandlers, ev: Event) => any) | null;
|
|
278
|
+
onselectstart: ((this: GlobalEventHandlers, ev: Event) => any) | null;
|
|
279
|
+
onstalled: ((this: GlobalEventHandlers, ev: Event) => any) | null;
|
|
280
|
+
onsubmit: ((this: GlobalEventHandlers, ev: SubmitEvent) => any) | null;
|
|
281
|
+
onsuspend: ((this: GlobalEventHandlers, ev: Event) => any) | null;
|
|
282
|
+
ontimeupdate: ((this: GlobalEventHandlers, ev: Event) => any) | null;
|
|
283
|
+
ontoggle: ((this: GlobalEventHandlers, ev: Event) => any) | null;
|
|
284
|
+
ontouchcancel?: ((this: GlobalEventHandlers, ev: TouchEvent) => any) | null | undefined;
|
|
285
|
+
ontouchend?: ((this: GlobalEventHandlers, ev: TouchEvent) => any) | null | undefined;
|
|
286
|
+
ontouchmove?: ((this: GlobalEventHandlers, ev: TouchEvent) => any) | null | undefined;
|
|
287
|
+
ontouchstart?: ((this: GlobalEventHandlers, ev: TouchEvent) => any) | null | undefined;
|
|
288
|
+
ontransitioncancel: ((this: GlobalEventHandlers, ev: TransitionEvent) => any) | null;
|
|
289
|
+
ontransitionend: ((this: GlobalEventHandlers, ev: TransitionEvent) => any) | null;
|
|
290
|
+
ontransitionrun: ((this: GlobalEventHandlers, ev: TransitionEvent) => any) | null;
|
|
291
|
+
ontransitionstart: ((this: GlobalEventHandlers, ev: TransitionEvent) => any) | null;
|
|
292
|
+
onvolumechange: ((this: GlobalEventHandlers, ev: Event) => any) | null;
|
|
293
|
+
onwaiting: ((this: GlobalEventHandlers, ev: Event) => any) | null;
|
|
294
|
+
onwebkitanimationend: ((this: GlobalEventHandlers, ev: Event) => any) | null;
|
|
295
|
+
onwebkitanimationiteration: ((this: GlobalEventHandlers, ev: Event) => any) | null;
|
|
296
|
+
onwebkitanimationstart: ((this: GlobalEventHandlers, ev: Event) => any) | null;
|
|
297
|
+
onwebkittransitionend: ((this: GlobalEventHandlers, ev: Event) => any) | null;
|
|
298
|
+
onwheel: ((this: GlobalEventHandlers, ev: WheelEvent) => any) | null;
|
|
299
|
+
autofocus: boolean;
|
|
300
|
+
readonly dataset: DOMStringMap;
|
|
301
|
+
nonce?: string | undefined;
|
|
302
|
+
tabIndex: number;
|
|
303
|
+
blur(): void;
|
|
304
|
+
focus(options?: FocusOptions | undefined): void;
|
|
305
|
+
};
|
|
306
|
+
};
|
|
307
|
+
//# sourceMappingURL=Editor.mocks.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Editor.mocks.d.ts","sourceRoot":"","sources":["../../../src/rte/Editor/Editor.mocks.tsx"],"names":[],"mappings":"AAEA,eAAO,MAAM,KAAK,qBAAqB,CAAC;AAYxC,eAAO,MAAM,uBAAuB,QAAS,iBAAiB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAiB7D,CAAC"}
|
|
@@ -0,0 +1,23 @@
|
|
|
1
|
+
import ReactDOM from 'react-dom';
|
|
2
|
+
export const label = 'Form field label';
|
|
3
|
+
const PegaCustom = ({ children }) => {
|
|
4
|
+
return (<p style={{ color: 'blue', textTransform: 'uppercase' }} dangerouslySetInnerHTML={{ __html: children }}/>);
|
|
5
|
+
};
|
|
6
|
+
export const createPegaCustomElement = (win) => {
|
|
7
|
+
const HtmlElement = win.HTMLElement;
|
|
8
|
+
return class PegaCustomElement extends HtmlElement {
|
|
9
|
+
removeElements() {
|
|
10
|
+
while (this.firstChild) {
|
|
11
|
+
this.removeChild(this.firstChild);
|
|
12
|
+
}
|
|
13
|
+
}
|
|
14
|
+
connectedCallback() {
|
|
15
|
+
const inner = this.innerHTML;
|
|
16
|
+
this.removeElements();
|
|
17
|
+
const mountPoint = document.createElement('span');
|
|
18
|
+
this.appendChild(mountPoint);
|
|
19
|
+
ReactDOM.render(<PegaCustom>{inner}</PegaCustom>, mountPoint);
|
|
20
|
+
}
|
|
21
|
+
};
|
|
22
|
+
};
|
|
23
|
+
//# sourceMappingURL=Editor.mocks.jsx.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Editor.mocks.jsx","sourceRoot":"","sources":["../../../src/rte/Editor/Editor.mocks.tsx"],"names":[],"mappings":"AAAA,OAAO,QAAQ,MAAM,WAAW,CAAC;AAEjC,MAAM,CAAC,MAAM,KAAK,GAAG,kBAAkB,CAAC;AAExC,MAAM,UAAU,GAAG,CAAC,EAAE,QAAQ,EAAwB,EAAE,EAAE;IACxD,OAAO,CACL,CAAC,CAAC,CACA,KAAK,CAAC,CAAC,EAAE,KAAK,EAAE,MAAM,EAAE,aAAa,EAAE,WAAW,EAAE,CAAC,CAErD,uBAAuB,CAAC,CAAC,EAAE,MAAM,EAAE,QAAQ,EAAE,CAAC,EAC9C,CACH,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,uBAAuB,GAAG,CAAC,GAAsB,EAAE,EAAE;IAChE,MAAM,WAAW,GAAG,GAAG,CAAC,WAAW,CAAC;IACpC,OAAO,MAAM,iBAAkB,SAAQ,WAAW;QAChD,cAAc;YACZ,OAAO,IAAI,CAAC,UAAU,EAAE;gBACtB,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC;aACnC;QACH,CAAC;QAED,iBAAiB;YACf,MAAM,KAAK,GAAG,IAAI,CAAC,SAAS,CAAC;YAC7B,IAAI,CAAC,cAAc,EAAE,CAAC;YACtB,MAAM,UAAU,GAAG,QAAQ,CAAC,aAAa,CAAC,MAAM,CAAC,CAAC;YAClD,IAAI,CAAC,WAAW,CAAC,UAAU,CAAC,CAAC;YAC7B,QAAQ,CAAC,MAAM,CAAC,CAAC,UAAU,CAAC,CAAC,KAAK,CAAC,EAAE,UAAU,CAAC,EAAE,UAAU,CAAC,CAAC;QAChE,CAAC;KACF,CAAC;AACJ,CAAC,CAAC","sourcesContent":["import ReactDOM from 'react-dom';\n\nexport const label = 'Form field label';\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\nexport const createPegaCustomElement = (win: typeof globalThis) => {\n const HtmlElement = win.HTMLElement;\n return class 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};\n"]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Editor.stories.d.ts","sourceRoot":"","sources":["../../../src/rte/Editor/Editor.stories.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,kBAAkB,CAAC;;
|
|
1
|
+
{"version":3,"file":"Editor.stories.d.ts","sourceRoot":"","sources":["../../../src/rte/Editor/Editor.stories.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,kBAAkB,CAAC;;AAkBxC,wBAGU;AAEV,eAAO,MAAM,UAAU,mBAmBtB,CAAC;AAEF,eAAO,MAAM,eAAe,mBAmB3B,CAAC;AAEF,eAAO,MAAM,iBAAiB,mBAc7B,CAAC;AAEF,eAAO,MAAM,mBAAmB,mBAmC/B,CAAC;AAEF,eAAO,MAAM,sBAAsB,mBAkClC,CAAC;AAEF,eAAO,MAAM,6BAA6B,mBA8BzC,CAAC"}
|
|
@@ -1,20 +1,19 @@
|
|
|
1
1
|
import { useState, useRef } from 'react';
|
|
2
|
-
import ReactDOM from 'react-dom';
|
|
3
2
|
import { action } from '@storybook/addon-actions';
|
|
4
3
|
import { Button, Card, CardContent, CardFooter, Flex, Text, TextArea } from '@pega/cosmos-react-core';
|
|
5
4
|
import { Editor } from '@pega/cosmos-react-rte';
|
|
5
|
+
import { createPegaCustomElement, label } from './Editor.mocks';
|
|
6
6
|
export default {
|
|
7
7
|
title: 'RTE/Editor',
|
|
8
8
|
component: Editor
|
|
9
9
|
};
|
|
10
|
-
const label = 'Form field label';
|
|
11
10
|
export const EditorDemo = () => {
|
|
12
11
|
const editorRef = useRef(null);
|
|
13
12
|
const onImageAdded = (image, id) => {
|
|
14
13
|
const src = URL.createObjectURL(image);
|
|
15
14
|
editorRef.current?.appendImage({ src, alt: image.name }, id);
|
|
16
15
|
};
|
|
17
|
-
return (<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
|
|
16
|
+
return (<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="Example alt text" src="http://via.placeholder.com/640x360"/></body>'/>);
|
|
18
17
|
};
|
|
19
18
|
export const EmptyEditorDemo = () => {
|
|
20
19
|
const editorRef = useRef(null);
|
|
@@ -33,30 +32,19 @@ export const ReadonlyFormField = () => {
|
|
|
33
32
|
<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>
|
|
34
33
|
`}/>);
|
|
35
34
|
};
|
|
36
|
-
const PegaCustom = ({ children }) => {
|
|
37
|
-
return (<p style={{ color: 'blue', textTransform: 'uppercase' }} dangerouslySetInnerHTML={{ __html: children }}/>);
|
|
38
|
-
};
|
|
39
|
-
class PegaCustomElement extends HTMLElement {
|
|
40
|
-
removeElements() {
|
|
41
|
-
while (this.firstChild) {
|
|
42
|
-
this.removeChild(this.firstChild);
|
|
43
|
-
}
|
|
44
|
-
}
|
|
45
|
-
connectedCallback() {
|
|
46
|
-
const inner = this.innerHTML;
|
|
47
|
-
this.removeElements();
|
|
48
|
-
const mountPoint = document.createElement('span');
|
|
49
|
-
this.appendChild(mountPoint);
|
|
50
|
-
ReactDOM.render(<PegaCustom>{inner}</PegaCustom>, mountPoint);
|
|
51
|
-
}
|
|
52
|
-
}
|
|
53
35
|
export const CustomComponentDemo = () => {
|
|
54
36
|
const editorRef = useRef(null);
|
|
55
37
|
const [editor, setEditor] = useState({});
|
|
56
38
|
const onCustomAction = () => {
|
|
57
39
|
editor.insertContent('<pega-custom>Inserted from toolbar</pega-custom>');
|
|
58
40
|
};
|
|
59
|
-
return (<Editor ref={editorRef} label={label} toolbar={['inline-styling', 'lists', 'indentation', 'links', 'images']} defaultValue='<body><p>Hi mom <a href="https://google.com">link</a></p><pega-custom>Hello from custom element.</pega-custom
|
|
41
|
+
return (<Editor ref={editorRef} label={label} toolbar={['inline-styling', 'lists', 'indentation', 'links', 'images']} 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>' customComponents={[
|
|
42
|
+
{
|
|
43
|
+
customElement: createPegaCustomElement(window),
|
|
44
|
+
createCustomElement: createPegaCustomElement,
|
|
45
|
+
name: 'pega-custom'
|
|
46
|
+
}
|
|
47
|
+
]} customActions={[
|
|
60
48
|
{
|
|
61
49
|
icon: 'pega',
|
|
62
50
|
text: 'Insert a custom element',
|