@pega/cosmos-react-demos 4.0.0-dev.19.0 → 4.0.0-dev.19.1
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 +1 -0
- package/jsx/core/Menu/Menu.stories.d.ts.map +1 -1
- package/jsx/core/Menu/Menu.stories.jsx +33 -0
- package/jsx/core/Menu/Menu.stories.jsx.map +1 -1
- package/lib/core/Menu/Menu.stories.d.ts +1 -0
- package/lib/core/Menu/Menu.stories.d.ts.map +1 -1
- package/lib/core/Menu/Menu.stories.js +27 -0
- package/lib/core/Menu/Menu.stories.js.map +1 -1
- package/package.json +9 -9
|
@@ -14,4 +14,5 @@ interface MenuStoryProps extends OmitStrict<MenuProps, 'items'> {
|
|
|
14
14
|
}
|
|
15
15
|
export declare const MenuDemo: Story<MenuStoryProps>;
|
|
16
16
|
export declare const FlatMenuDemo: Story<MenuStoryProps>;
|
|
17
|
+
export declare const WithoutFocusControlEl: Story<MenuStoryProps>;
|
|
17
18
|
//# sourceMappingURL=Menu.stories.d.ts.map
|
|
@@ -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,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,CAoM1C,CAAC;AAEF,eAAO,MAAM,YAAY,EAAE,KAAK,CAAC,cAAc,CAE9C,CAAC"}
|
|
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,CAoM1C,CAAC;AAEF,eAAO,MAAM,YAAY,EAAE,KAAK,CAAC,cAAc,CAE9C,CAAC;AAEF,eAAO,MAAM,qBAAqB,EAAE,KAAK,CAAC,cAAc,CAsDvD,CAAC"}
|
|
@@ -160,4 +160,37 @@ export const MenuDemo = (args) => {
|
|
|
160
160
|
export const FlatMenuDemo = (args) => {
|
|
161
161
|
return <MenuDemo {...args} useFlatData/>;
|
|
162
162
|
};
|
|
163
|
+
export const WithoutFocusControlEl = (args) => {
|
|
164
|
+
const menuID = createUID();
|
|
165
|
+
const menuListID = `${menuID}--list`;
|
|
166
|
+
const buttonRef = useRef(null);
|
|
167
|
+
const [showMenu, setShowMenu] = useState(false);
|
|
168
|
+
const [items, setItems] = useState(cars);
|
|
169
|
+
const itemsToRender = useMemo(() => {
|
|
170
|
+
return menuHelpers.mapTree(items, item => {
|
|
171
|
+
let selectable = false;
|
|
172
|
+
if (!item.items || args.parentSelection) {
|
|
173
|
+
selectable = true;
|
|
174
|
+
}
|
|
175
|
+
return {
|
|
176
|
+
...item,
|
|
177
|
+
visual: args.showItemVisual && item.visual ? <StyledFlag>{item.visual}</StyledFlag> : undefined,
|
|
178
|
+
count: args.showItemCount && item.items ? item.items.length : undefined,
|
|
179
|
+
secondary: args.showItemSecondary ? item.secondary : undefined,
|
|
180
|
+
selected: selectable ? !!item.selected : undefined
|
|
181
|
+
};
|
|
182
|
+
});
|
|
183
|
+
}, [items, args.showItemVisual, args.showItemCount, args.showItemSecondary]);
|
|
184
|
+
return (<Flex container={{ gap: 2, direction: 'column', alignItems: 'start' }} style={{ maxWidth: '500px' }}>
|
|
185
|
+
<Button ref={buttonRef} onClick={() => {
|
|
186
|
+
setShowMenu(!showMenu);
|
|
187
|
+
}}>
|
|
188
|
+
{showMenu ? 'Hide' : 'Show'}
|
|
189
|
+
</Button>
|
|
190
|
+
|
|
191
|
+
{showMenu && (<Menu id={menuID} listId={menuListID} items={itemsToRender} mode='multi-select' role='listbox' onItemClick={id => {
|
|
192
|
+
setItems(cur => menuHelpers.toggleSelected(cur, id, args.mode));
|
|
193
|
+
}}/>)}
|
|
194
|
+
</Flex>);
|
|
195
|
+
};
|
|
163
196
|
//# 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, 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 createUID,\n useElement,\n useOuterEvent,\n useToaster,\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 menuListID = `${menuID}--list`;\n const data = args.useFlatData ? cars : countries;\n\n const searchEleRef = useRef<HTMLInputElement>(null);\n const { push } = useToaster();\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 [data]\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 listId={menuListID}\n items={args.noItems ? [] : itemsToRender}\n accent={search ? searchRegex : undefined}\n mode={args.variant === 'drill-down' ? args.mode : 'action'}\n role='listbox'\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='searchbox'\n searchInputAriaLabel='Start typing to search.'\n aria-controls={menuListID}\n />\n )\n }\n footer={\n args.variant === 'flyout' ? (\n <SearchInput\n ref={searchEleRef}\n onSearchChange={setSearch}\n value={search}\n role='searchbox'\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"]}
|
|
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, 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 createUID,\n useElement,\n useOuterEvent,\n useToaster,\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 menuListID = `${menuID}--list`;\n const data = args.useFlatData ? cars : countries;\n\n const searchEleRef = useRef<HTMLInputElement>(null);\n const { push } = useToaster();\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 [data]\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 listId={menuListID}\n items={args.noItems ? [] : itemsToRender}\n accent={search ? searchRegex : undefined}\n mode={args.variant === 'drill-down' ? args.mode : 'action'}\n role='listbox'\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='searchbox'\n searchInputAriaLabel='Start typing to search.'\n aria-controls={menuListID}\n />\n )\n }\n footer={\n args.variant === 'flyout' ? (\n <SearchInput\n ref={searchEleRef}\n onSearchChange={setSearch}\n value={search}\n role='searchbox'\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\nexport const WithoutFocusControlEl: Story<MenuStoryProps> = (args: MenuStoryProps) => {\n const menuID = createUID();\n const menuListID = `${menuID}--list`;\n const buttonRef = useRef<HTMLButtonElement | null>(null);\n const [showMenu, setShowMenu] = useState(false);\n const [items, setItems] = useState<MenuProps['items']>(cars);\n\n const itemsToRender = useMemo(() => {\n return menuHelpers.mapTree(items, 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 };\n });\n }, [items, args.showItemVisual, args.showItemCount, args.showItemSecondary]);\n\n return (\n <Flex\n container={{ gap: 2, direction: 'column', alignItems: 'start' }}\n style={{ maxWidth: '500px' }}\n >\n <Button\n ref={buttonRef}\n onClick={() => {\n setShowMenu(!showMenu);\n }}\n >\n {showMenu ? 'Hide' : 'Show'}\n </Button>\n\n {showMenu && (\n <Menu\n id={menuID}\n listId={menuListID}\n items={itemsToRender}\n mode='multi-select'\n role='listbox'\n onItemClick={id => {\n setItems(cur => menuHelpers.toggleSelected(cur, id, args.mode));\n }}\n />\n )}\n </Flex>\n );\n};\n"]}
|
|
@@ -14,4 +14,5 @@ interface MenuStoryProps extends OmitStrict<MenuProps, 'items'> {
|
|
|
14
14
|
}
|
|
15
15
|
export declare const MenuDemo: Story<MenuStoryProps>;
|
|
16
16
|
export declare const FlatMenuDemo: Story<MenuStoryProps>;
|
|
17
|
+
export declare const WithoutFocusControlEl: Story<MenuStoryProps>;
|
|
17
18
|
//# sourceMappingURL=Menu.stories.d.ts.map
|
|
@@ -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,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,CAoM1C,CAAC;AAEF,eAAO,MAAM,YAAY,EAAE,KAAK,CAAC,cAAc,CAE9C,CAAC"}
|
|
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,CAoM1C,CAAC;AAEF,eAAO,MAAM,YAAY,EAAE,KAAK,CAAC,cAAc,CAE9C,CAAC;AAEF,eAAO,MAAM,qBAAqB,EAAE,KAAK,CAAC,cAAc,CAsDvD,CAAC"}
|
|
@@ -144,4 +144,31 @@ export const MenuDemo = (args) => {
|
|
|
144
144
|
export const FlatMenuDemo = (args) => {
|
|
145
145
|
return _jsx(MenuDemo, { ...args, useFlatData: true });
|
|
146
146
|
};
|
|
147
|
+
export const WithoutFocusControlEl = (args) => {
|
|
148
|
+
const menuID = createUID();
|
|
149
|
+
const menuListID = `${menuID}--list`;
|
|
150
|
+
const buttonRef = useRef(null);
|
|
151
|
+
const [showMenu, setShowMenu] = useState(false);
|
|
152
|
+
const [items, setItems] = useState(cars);
|
|
153
|
+
const itemsToRender = useMemo(() => {
|
|
154
|
+
return menuHelpers.mapTree(items, item => {
|
|
155
|
+
let selectable = false;
|
|
156
|
+
if (!item.items || args.parentSelection) {
|
|
157
|
+
selectable = true;
|
|
158
|
+
}
|
|
159
|
+
return {
|
|
160
|
+
...item,
|
|
161
|
+
visual: args.showItemVisual && item.visual ? _jsx(StyledFlag, { children: item.visual }) : undefined,
|
|
162
|
+
count: args.showItemCount && item.items ? item.items.length : undefined,
|
|
163
|
+
secondary: args.showItemSecondary ? item.secondary : undefined,
|
|
164
|
+
selected: selectable ? !!item.selected : undefined
|
|
165
|
+
};
|
|
166
|
+
});
|
|
167
|
+
}, [items, args.showItemVisual, args.showItemCount, args.showItemSecondary]);
|
|
168
|
+
return (_jsxs(Flex, { container: { gap: 2, direction: 'column', alignItems: 'start' }, style: { maxWidth: '500px' }, children: [_jsx(Button, { ref: buttonRef, onClick: () => {
|
|
169
|
+
setShowMenu(!showMenu);
|
|
170
|
+
}, children: showMenu ? 'Hide' : 'Show' }), showMenu && (_jsx(Menu, { id: menuID, listId: menuListID, items: itemsToRender, mode: 'multi-select', role: 'listbox', onItemClick: id => {
|
|
171
|
+
setItems(cur => menuHelpers.toggleSelected(cur, id, args.mode));
|
|
172
|
+
} }))] }));
|
|
173
|
+
};
|
|
147
174
|
//# sourceMappingURL=Menu.stories.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Menu.stories.js","sourceRoot":"","sources":["../../../src/core/Menu/Menu.stories.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Meta, Story } from '@storybook/react';\nimport { useCallback, 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 createUID,\n useElement,\n useOuterEvent,\n useToaster,\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 menuListID = `${menuID}--list`;\n const data = args.useFlatData ? cars : countries;\n\n const searchEleRef = useRef<HTMLInputElement>(null);\n const { push } = useToaster();\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 [data]\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 listId={menuListID}\n items={args.noItems ? [] : itemsToRender}\n accent={search ? searchRegex : undefined}\n mode={args.variant === 'drill-down' ? args.mode : 'action'}\n role='listbox'\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='searchbox'\n searchInputAriaLabel='Start typing to search.'\n aria-controls={menuListID}\n />\n )\n }\n footer={\n args.variant === 'flyout' ? (\n <SearchInput\n ref={searchEleRef}\n onSearchChange={setSearch}\n value={search}\n role='searchbox'\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"]}
|
|
1
|
+
{"version":3,"file":"Menu.stories.js","sourceRoot":"","sources":["../../../src/core/Menu/Menu.stories.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Meta, Story } from '@storybook/react';\nimport { useCallback, 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 createUID,\n useElement,\n useOuterEvent,\n useToaster,\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 menuListID = `${menuID}--list`;\n const data = args.useFlatData ? cars : countries;\n\n const searchEleRef = useRef<HTMLInputElement>(null);\n const { push } = useToaster();\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 [data]\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 listId={menuListID}\n items={args.noItems ? [] : itemsToRender}\n accent={search ? searchRegex : undefined}\n mode={args.variant === 'drill-down' ? args.mode : 'action'}\n role='listbox'\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='searchbox'\n searchInputAriaLabel='Start typing to search.'\n aria-controls={menuListID}\n />\n )\n }\n footer={\n args.variant === 'flyout' ? (\n <SearchInput\n ref={searchEleRef}\n onSearchChange={setSearch}\n value={search}\n role='searchbox'\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\nexport const WithoutFocusControlEl: Story<MenuStoryProps> = (args: MenuStoryProps) => {\n const menuID = createUID();\n const menuListID = `${menuID}--list`;\n const buttonRef = useRef<HTMLButtonElement | null>(null);\n const [showMenu, setShowMenu] = useState(false);\n const [items, setItems] = useState<MenuProps['items']>(cars);\n\n const itemsToRender = useMemo(() => {\n return menuHelpers.mapTree(items, 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 };\n });\n }, [items, args.showItemVisual, args.showItemCount, args.showItemSecondary]);\n\n return (\n <Flex\n container={{ gap: 2, direction: 'column', alignItems: 'start' }}\n style={{ maxWidth: '500px' }}\n >\n <Button\n ref={buttonRef}\n onClick={() => {\n setShowMenu(!showMenu);\n }}\n >\n {showMenu ? 'Hide' : 'Show'}\n </Button>\n\n {showMenu && (\n <Menu\n id={menuID}\n listId={menuListID}\n items={itemsToRender}\n mode='multi-select'\n role='listbox'\n onItemClick={id => {\n setItems(cur => menuHelpers.toggleSelected(cur, id, args.mode));\n }}\n />\n )}\n </Flex>\n );\n};\n"]}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@pega/cosmos-react-demos",
|
|
3
|
-
"version": "4.0.0-dev.19.
|
|
3
|
+
"version": "4.0.0-dev.19.1",
|
|
4
4
|
"repository": {
|
|
5
5
|
"type": "git",
|
|
6
6
|
"url": "https://github.com/pegasystems/cosmos-react.git",
|
|
@@ -20,14 +20,14 @@
|
|
|
20
20
|
"build": "tsc -b"
|
|
21
21
|
},
|
|
22
22
|
"dependencies": {
|
|
23
|
-
"@pega/cosmos-react-build": "4.0.0-dev.19.
|
|
24
|
-
"@pega/cosmos-react-condition-builder": "4.0.0-dev.19.
|
|
25
|
-
"@pega/cosmos-react-core": "4.0.0-dev.19.
|
|
26
|
-
"@pega/cosmos-react-cs": "4.0.0-dev.19.
|
|
27
|
-
"@pega/cosmos-react-dnd": "4.0.0-dev.19.
|
|
28
|
-
"@pega/cosmos-react-rte": "4.0.0-dev.19.
|
|
29
|
-
"@pega/cosmos-react-social": "4.0.0-dev.19.
|
|
30
|
-
"@pega/cosmos-react-work": "4.0.0-dev.19.
|
|
23
|
+
"@pega/cosmos-react-build": "4.0.0-dev.19.1",
|
|
24
|
+
"@pega/cosmos-react-condition-builder": "4.0.0-dev.19.1",
|
|
25
|
+
"@pega/cosmos-react-core": "4.0.0-dev.19.1",
|
|
26
|
+
"@pega/cosmos-react-cs": "4.0.0-dev.19.1",
|
|
27
|
+
"@pega/cosmos-react-dnd": "4.0.0-dev.19.1",
|
|
28
|
+
"@pega/cosmos-react-rte": "4.0.0-dev.19.1",
|
|
29
|
+
"@pega/cosmos-react-social": "4.0.0-dev.19.1",
|
|
30
|
+
"@pega/cosmos-react-work": "4.0.0-dev.19.1",
|
|
31
31
|
"@storybook/addon-a11y": "^6.4.19",
|
|
32
32
|
"@storybook/addon-actions": "^6.4.19",
|
|
33
33
|
"@storybook/addon-links": "^6.5.16",
|