@pega/cosmos-react-demos 3.0.0-dev.2.1 → 3.0.0-dev.20.0

package/lib/dnd/DragDropList/DragDropList.stories.js

@@ -1,10 +1,10 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { useCallback, useState } from 'react';
 import { action } from '@storybook/addon-actions';
-import { optionsKnob } from '@storybook/addon-knobs';
-import styled from 'styled-components';
-import { Button, Flex, createUID } from '@pega/cosmos-react-core';
+import { Button, Flex } from '@pega/cosmos-react-core';
 import { DragDropManager, DragDropList } from '@pega/cosmos-react-dnd';
+import { StyledDemoDragDropList } from './DragDropList.styles';
+import { createMockDataArray, DemoListItem, EmptyItem, itemType, mockDataArrayA, mockDataArrayB, sort } from './DragDropList.mocks';
 export default {
     title: 'DnD/DragDropList',
     component: DragDropList,
@@ -12,102 +12,31 @@ export default {
         layout: 'fullscreen'
     }
 };
-// Helper function to create demo arrays
-const createMockDataArray = (length, type, listId) => {
-    return Array.from({ length }, (_, i) => {
-        const id = `${i}`;
-        return {
-            type,
-            id: createUID(),
-            data: {
-                content: `Item ${listId}:${id}`,
-                color: `hsl(${(i * 360) / length}deg, 100%, 66%)`
-            }
-        };
-    });
-};
-// styled demo list component
-const StyledEmptyItem = styled.li `
-  display: grid;
-  padding: 1rem;
-  gap: 1rem;
-`;
-// Demo component used to render list items
-const EmptyItem = () => {
-    return _jsx(StyledEmptyItem, { children: "No Items" }, void 0);
-};
-// styled demo list component
-const StyledDemoDragDropList = styled.ul `
-  list-style: none;
-  position: relative;
-  display: flex;
-  flex-direction: column;
-  flex-grow: 1;
-  padding: 0.5rem;
-`;
-// styled demo list item component
-const StyledDemoDragDropListItem = styled.li `
-  border: 0.0625rem dashed gray;
-  margin: 0.5rem;
-  padding: 0.5rem;
-  background: white;
-  cursor: ${({ useDragHandle }) => (useDragHandle ? 'auto' : 'move')};
-  transition: transform 0.3s;
-
-  .handle {
-    background: pink;
-    width: 1rem;
-    height: 1rem;
-    display: inline-block;
-    margin-right: 0.0625rem;
-    cursor: move;
-  }
-`;
-// Demo component used to render list items
-const DemoListItem = ({ id, type, dragRef, data, isDragging, ...restProps }) => {
-    return (_jsx(StyledDemoDragDropListItem, { ref: dragRef, style: {
-            opacity: isDragging ? '0.5' : undefined,
-            backgroundColor: data?.color ?? 'white'
-        }, ...restProps, children: data?.content }, void 0));
-};
-const pullModes = {
-    remove: 'remove',
-    clone: 'clone'
-};
-const pushModes = {
-    insert: 'insert',
-    prepend: 'prepend',
-    append: 'append',
-    sort: 'sort'
-};
-const sort = (a, b) => {
-    return a.data.content.localeCompare(b.data.content);
-};
-const itemType = Symbol('');
-const mockDataArrayA = createMockDataArray(10, itemType, 'A');
-const mockDataArrayB = createMockDataArray(4, itemType, 'B');
-// -----------------------------------------------------------------------------
-// DragDropList
-// -----------------------------------------------------------------------------
-export const DragDropListDemo = () => {
-    const pullMode = optionsKnob('Pull Mode', pullModes, 'remove', { display: 'inline-radio' });
-    const pushMode = optionsKnob('Push Mode', pushModes, 'insert', { display: 'inline-radio' });
+export const DragDropListDemo = (args) => {
     const [arrayA, setArrayA] = useState(mockDataArrayA);
     const [arrayB, setArrayB] = useState(mockDataArrayB);
     return (_jsxs(_Fragment, { children: [_jsx(Button, { onClick: useCallback(() => {
                     setArrayA(items => {
                         return [...items, ...createMockDataArray(1, itemType, 'A-new')];
                     });
-                }, []), children: "Add to List A" }, void 0), _jsx(Button, { onClick: useCallback(() => {
+                }, []), children: "Add to List A" }), _jsx(Button, { onClick: useCallback(() => {
                     setArrayB(items => {
                         return [...items, ...createMockDataArray(1, itemType, 'B-new')];
                     });
-                }, []), children: "Add to List B" }, void 0), _jsx(DragDropManager, { children: _jsxs(Flex, { container: true, style: { minHeight: '100vh' }, children: [_jsx(DragDropList, { as: StyledDemoDragDropList, id: 'list1', accept: itemType, pullMode: pullMode, pushMode: pushMode === 'sort' ? sort : pushMode, items: arrayA, itemRenderer: DemoListItem, emptyRenderer: EmptyItem, onChange: newArray => {
+                }, []), children: "Add to List B" }), _jsx(DragDropManager, { children: _jsxs(Flex, { container: true, style: { minHeight: '100vh' }, children: [_jsx(DragDropList, { as: StyledDemoDragDropList, id: 'list1', accept: itemType, pullMode: args.pullMode, pushMode: args.pushMode === 'sort' ? sort : args.pushMode, items: arrayA, itemRenderer: DemoListItem, emptyRenderer: EmptyItem, onChange: newArray => {
                                 setArrayA(newArray);
                                 action('List A changed')(newArray);
-                            }, style: { background: 'palegreen' } }, void 0), _jsx(DragDropList, { as: StyledDemoDragDropList, id: 'list2', accept: itemType, pullMode: pullMode, pushMode: pushMode === 'sort' ? sort : pushMode, items: arrayB, itemRenderer: DemoListItem, emptyRenderer: EmptyItem, onChange: newArray => {
+                            }, style: { background: 'palegreen' } }), _jsx(DragDropList, { as: StyledDemoDragDropList, id: 'list2', accept: itemType, pullMode: args.pullMode, pushMode: args.pushMode === 'sort' ? sort : args.pushMode, items: arrayB, itemRenderer: DemoListItem, emptyRenderer: EmptyItem, onChange: newArray => {
                                 setArrayB(newArray);
                                 action('List B changed')(newArray);
-                            }, style: { background: 'lightblue' } }, void 0)] }, void 0) }, void 0)] }, void 0));
+                            }, style: { background: 'lightblue' } })] }) })] }));
+};
+DragDropListDemo.args = {
+    pullMode: 'remove',
+    pushMode: 'insert'
+};
+DragDropListDemo.argTypes = {
+    pullMode: { options: ['remove', 'clone'], control: { type: 'select' } },
+    pushMode: { options: ['insert', 'prepend', 'append', 'sort'], control: { type: 'select' } }
 };
 //# sourceMappingURL=DragDropList.stories.js.map

package/lib/dnd/DragDropList/DragDropList.stories.js.map

@@ -1 +1 @@
-{"version":3,"file":"DragDropList.stories.js","sourceRoot":"","sources":["../../../src/dnd/DragDropList/DragDropList.stories.tsx"],"names":[],"mappings":"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","sourcesContent":["import { useCallback, useState } from 'react';\nimport { action } from '@storybook/addon-actions';\nimport { optionsKnob } from '@storybook/addon-knobs';\nimport styled from 'styled-components';\n\nimport { Button, Flex, createUID } from '@pega/cosmos-react-core';\nimport {\n  DragDropManager,\n  DraggableItem,\n  DraggableProps,\n  DragDropList,\n  ItemRendererProps\n} from '@pega/cosmos-react-dnd';\n\nexport default {\n  title: 'DnD/DragDropList',\n  component: DragDropList,\n  parameters: {\n    layout: 'fullscreen'\n  }\n};\n\ninterface ItemData {\n  content: string;\n  color: string;\n}\n\n// Helper function to create demo arrays\nconst createMockDataArray = (\n  length: number,\n  type: DraggableProps['type'],\n  listId: string\n): DraggableItem<ItemData>[] => {\n  return Array.from({ length }, (_, i) => {\n    const id = `${i}`;\n    return {\n      type,\n      id: createUID(),\n      data: {\n        content: `Item ${listId}:${id}`,\n        color: `hsl(${(i * 360) / length}deg, 100%, 66%)`\n      }\n    };\n  });\n};\n\n// styled demo list component\nconst StyledEmptyItem = styled.li`\n  display: grid;\n  padding: 1rem;\n  gap: 1rem;\n`;\n\n// Demo component used to render list items\nconst EmptyItem = () => {\n  return <StyledEmptyItem>No Items</StyledEmptyItem>;\n};\n\n// styled demo list component\nconst StyledDemoDragDropList = styled.ul`\n  list-style: none;\n  position: relative;\n  display: flex;\n  flex-direction: column;\n  flex-grow: 1;\n  padding: 0.5rem;\n`;\n\n// styled demo list item component\nconst StyledDemoDragDropListItem = styled.li<{ [key: string]: any }>`\n  border: 0.0625rem dashed gray;\n  margin: 0.5rem;\n  padding: 0.5rem;\n  background: white;\n  cursor: ${({ useDragHandle }) => (useDragHandle ? 'auto' : 'move')};\n  transition: transform 0.3s;\n\n  .handle {\n    background: pink;\n    width: 1rem;\n    height: 1rem;\n    display: inline-block;\n    margin-right: 0.0625rem;\n    cursor: move;\n  }\n`;\n\n// Demo component used to render list items\nconst DemoListItem = ({\n  id,\n  type,\n  dragRef,\n  data,\n  isDragging,\n  ...restProps\n}: ItemRendererProps<ItemData>) => {\n  return (\n    <StyledDemoDragDropListItem\n      ref={dragRef}\n      style={{\n        opacity: isDragging ? '0.5' : undefined,\n        backgroundColor: data?.color ?? 'white'\n      }}\n      {...restProps}\n    >\n      {data?.content}\n    </StyledDemoDragDropListItem>\n  );\n};\n\nconst pullModes = {\n  remove: 'remove',\n  clone: 'clone'\n} as const;\n\nconst pushModes = {\n  insert: 'insert',\n  prepend: 'prepend',\n  append: 'append',\n  sort: 'sort'\n} as const;\n\nconst sort = (a: DraggableItem<ItemData>, b: DraggableItem<ItemData>): number => {\n  return a.data!.content.localeCompare(b.data!.content);\n};\n\nconst itemType = Symbol('');\nconst mockDataArrayA = createMockDataArray(10, itemType, 'A');\nconst mockDataArrayB = createMockDataArray(4, itemType, 'B');\n\n// -----------------------------------------------------------------------------\n// DragDropList\n// -----------------------------------------------------------------------------\nexport const DragDropListDemo = () => {\n  const pullMode = optionsKnob('Pull Mode', pullModes, 'remove', { display: 'inline-radio' });\n  const pushMode = optionsKnob('Push Mode', pushModes, 'insert', { display: 'inline-radio' });\n\n  const [arrayA, setArrayA] = useState(mockDataArrayA);\n  const [arrayB, setArrayB] = useState(mockDataArrayB);\n\n  return (\n    <>\n      <Button\n        onClick={useCallback(() => {\n          setArrayA(items => {\n            return [...items, ...createMockDataArray(1, itemType, 'A-new')];\n          });\n        }, [])}\n      >\n        Add to List A\n      </Button>\n      <Button\n        onClick={useCallback(() => {\n          setArrayB(items => {\n            return [...items, ...createMockDataArray(1, itemType, 'B-new')];\n          });\n        }, [])}\n      >\n        Add to List B\n      </Button>\n      <DragDropManager>\n        <Flex container style={{ minHeight: '100vh' }}>\n          <DragDropList\n            as={StyledDemoDragDropList}\n            id='list1'\n            accept={itemType}\n            pullMode={pullMode}\n            pushMode={pushMode === 'sort' ? sort : pushMode}\n            items={arrayA}\n            itemRenderer={DemoListItem}\n            emptyRenderer={EmptyItem}\n            onChange={newArray => {\n              setArrayA(newArray);\n              action('List A changed')(newArray);\n            }}\n            style={{ background: 'palegreen' }}\n          />\n\n          <DragDropList\n            as={StyledDemoDragDropList}\n            id='list2'\n            accept={itemType}\n            pullMode={pullMode}\n            pushMode={pushMode === 'sort' ? sort : pushMode}\n            items={arrayB}\n            itemRenderer={DemoListItem}\n            emptyRenderer={EmptyItem}\n            onChange={newArray => {\n              setArrayB(newArray);\n              action('List B changed')(newArray);\n            }}\n            style={{ background: 'lightblue' }}\n          />\n        </Flex>\n      </DragDropManager>\n    </>\n  );\n};\n"]}
+{"version":3,"file":"DragDropList.stories.js","sourceRoot":"","sources":["../../../src/dnd/DragDropList/DragDropList.stories.tsx"],"names":[],"mappings":"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","sourcesContent":["import { useCallback, useState } from 'react';\nimport { action } from '@storybook/addon-actions';\nimport { Meta, Story } from '@storybook/react';\n\nimport { Button, Flex } from '@pega/cosmos-react-core';\nimport { DragDropManager, DragDropList, DragDropListProps } from '@pega/cosmos-react-dnd';\n\nimport { StyledDemoDragDropList } from './DragDropList.styles';\nimport {\n  createMockDataArray,\n  DemoListItem,\n  EmptyItem,\n  itemType,\n  mockDataArrayA,\n  mockDataArrayB,\n  sort\n} from './DragDropList.mocks';\n\nexport default {\n  title: 'DnD/DragDropList',\n  component: DragDropList,\n  parameters: {\n    layout: 'fullscreen'\n  }\n} as Meta;\n\ninterface DragDropListDemoProps {\n  pullMode?: DragDropListProps['pullMode'];\n  pushMode?: DragDropListProps['pushMode'] | 'sort';\n}\n\nexport const DragDropListDemo: Story<DragDropListDemoProps> = (args: DragDropListDemoProps) => {\n  const [arrayA, setArrayA] = useState(mockDataArrayA);\n  const [arrayB, setArrayB] = useState(mockDataArrayB);\n\n  return (\n    <>\n      <Button\n        onClick={useCallback(() => {\n          setArrayA(items => {\n            return [...items, ...createMockDataArray(1, itemType, 'A-new')];\n          });\n        }, [])}\n      >\n        Add to List A\n      </Button>\n      <Button\n        onClick={useCallback(() => {\n          setArrayB(items => {\n            return [...items, ...createMockDataArray(1, itemType, 'B-new')];\n          });\n        }, [])}\n      >\n        Add to List B\n      </Button>\n      <DragDropManager>\n        <Flex container style={{ minHeight: '100vh' }}>\n          <DragDropList\n            as={StyledDemoDragDropList}\n            id='list1'\n            accept={itemType}\n            pullMode={args.pullMode}\n            pushMode={args.pushMode === 'sort' ? sort : args.pushMode}\n            items={arrayA}\n            itemRenderer={DemoListItem}\n            emptyRenderer={EmptyItem}\n            onChange={newArray => {\n              setArrayA(newArray);\n              action('List A changed')(newArray);\n            }}\n            style={{ background: 'palegreen' }}\n          />\n\n          <DragDropList\n            as={StyledDemoDragDropList}\n            id='list2'\n            accept={itemType}\n            pullMode={args.pullMode}\n            pushMode={args.pushMode === 'sort' ? sort : args.pushMode}\n            items={arrayB}\n            itemRenderer={DemoListItem}\n            emptyRenderer={EmptyItem}\n            onChange={newArray => {\n              setArrayB(newArray);\n              action('List B changed')(newArray);\n            }}\n            style={{ background: 'lightblue' }}\n          />\n        </Flex>\n      </DragDropManager>\n    </>\n  );\n};\n\nDragDropListDemo.args = {\n  pullMode: 'remove',\n  pushMode: 'insert'\n};\n\nDragDropListDemo.argTypes = {\n  pullMode: { options: ['remove', 'clone'], control: { type: 'select' } },\n  pushMode: { options: ['insert', 'prepend', 'append', 'sort'], control: { type: 'select' } }\n};\n"]}

package/lib/dnd/DragDropList/DragDropList.styles.d.ts

@@ -0,0 +1,6 @@
+export declare const StyledEmptyItem: import("styled-components").StyledComponent<"li", import("styled-components").DefaultTheme, {}, never>;
+export declare const StyledDemoDragDropList: import("styled-components").StyledComponent<"ul", import("styled-components").DefaultTheme, {}, never>;
+export declare const StyledDemoDragDropListItem: import("styled-components").StyledComponent<"li", import("styled-components").DefaultTheme, {
+    [key: string]: any;
+}, never>;
+//# sourceMappingURL=DragDropList.styles.d.ts.map

package/lib/dnd/DragDropList/DragDropList.styles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"DragDropList.styles.d.ts","sourceRoot":"","sources":["../../../src/dnd/DragDropList/DragDropList.styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,eAAe,wGAI3B,CAAC;AAEF,eAAO,MAAM,sBAAsB,wGAOlC,CAAC;AAEF,eAAO,MAAM,0BAA0B;;SAgBtC,CAAC"}

package/lib/dnd/DragDropList/DragDropList.styles.js

@@ -0,0 +1,32 @@
+import styled from 'styled-components';
+export const StyledEmptyItem = styled.li `
+  display: grid;
+  padding: 1rem;
+  gap: 1rem;
+`;
+export const StyledDemoDragDropList = styled.ul `
+  list-style: none;
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  flex-grow: 1;
+  padding: 0.5rem;
+`;
+export const StyledDemoDragDropListItem = styled.li `
+  border: 0.0625rem dashed gray;
+  margin: 0.5rem;
+  padding: 0.5rem;
+  background: white;
+  cursor: ${({ useDragHandle }) => (useDragHandle ? 'auto' : 'move')};
+  transition: transform 0.3s;
+
+  .handle {
+    background: pink;
+    width: 1rem;
+    height: 1rem;
+    display: inline-block;
+    margin-right: 0.0625rem;
+    cursor: move;
+  }
+`;
+//# sourceMappingURL=DragDropList.styles.js.map

package/lib/dnd/DragDropList/DragDropList.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DragDropList.styles.js","sourceRoot":"","sources":["../../../src/dnd/DragDropList/DragDropList.styles.ts"],"names":[],"mappings":"AAAA,OAAO,MAAM,MAAM,mBAAmB,CAAC;AAEvC,MAAM,CAAC,MAAM,eAAe,GAAG,MAAM,CAAC,EAAE,CAAA;;;;CAIvC,CAAC;AAEF,MAAM,CAAC,MAAM,sBAAsB,GAAG,MAAM,CAAC,EAAE,CAAA;;;;;;;CAO9C,CAAC;AAEF,MAAM,CAAC,MAAM,0BAA0B,GAAG,MAAM,CAAC,EAAE,CAAwB;;;;;YAK/D,CAAC,EAAE,aAAa,EAAE,EAAE,EAAE,CAAC,CAAC,aAAa,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,MAAM,CAAC;;;;;;;;;;;CAWnE,CAAC","sourcesContent":["import styled from 'styled-components';\n\nexport const StyledEmptyItem = styled.li`\n  display: grid;\n  padding: 1rem;\n  gap: 1rem;\n`;\n\nexport const StyledDemoDragDropList = styled.ul`\n  list-style: none;\n  position: relative;\n  display: flex;\n  flex-direction: column;\n  flex-grow: 1;\n  padding: 0.5rem;\n`;\n\nexport const StyledDemoDragDropListItem = styled.li<{ [key: string]: any }>`\n  border: 0.0625rem dashed gray;\n  margin: 0.5rem;\n  padding: 0.5rem;\n  background: white;\n  cursor: ${({ useDragHandle }) => (useDragHandle ? 'auto' : 'move')};\n  transition: transform 0.3s;\n\n  .handle {\n    background: pink;\n    width: 1rem;\n    height: 1rem;\n    display: inline-block;\n    margin-right: 0.0625rem;\n    cursor: move;\n  }\n`;\n"]}

package/lib/dnd/StandardDragDropList/Demo.d.ts

@@ -0,0 +1,7 @@
+import { MockRawItem } from './mockData';
+interface StandardDragDropListDemoProps {
+    items: MockRawItem[];
+}
+declare const _default: ({ items }: StandardDragDropListDemoProps) => JSX.Element;
+export default _default;
+//# sourceMappingURL=Demo.d.ts.map

package/lib/dnd/StandardDragDropList/Demo.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Demo.d.ts","sourceRoot":"","sources":["../../../src/dnd/StandardDragDropList/Demo.tsx"],"names":[],"mappings":"AAWA,OAAO,EAEL,WAAW,EAKZ,MAAM,YAAY,CAAC;AAIpB,UAAU,6BAA6B;IACrC,KAAK,EAAE,WAAW,EAAE,CAAC;CACtB;oCAE0B,6BAA6B,KAAG,WAAW;AAAtE,wBAoOE"}

package/lib/dnd/StandardDragDropList/Demo.js

@@ -0,0 +1,151 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useCallback, useMemo, useState } from 'react';
+import { StandardDragDropList, DragDropManager } from '@pega/cosmos-react-dnd';
+import { Button, Flex, Icon, useElement } from '@pega/cosmos-react-core';
+import { contentTypes, mockQuery, mockFields, mockGroups, mockViews } from './mockData';
+import ItemConfig from './ItemConfig';
+import SelectionMenu from './SelectionMenu';
+export default ({ items }) => {
+    // The state of the list's content is maintained here and the raw item objects are transformed below prior to render.
+    const [mockRawItems, setMockRawItems] = useState(items);
+    const [configItemId, setConfigItemId] = useState(null);
+    const [configTarget, setConfigTarget] = useElement(null);
+    const [selectionMenuTarget, setSelectionMenuTarget] = useElement(null);
+    const [selectionConstraint, setSelectionConstraint] = useState();
+    const [addToItemId, setAddToItemId] = useState(null);
+    const [errors, setErrors] = useState([]);
+    const onAddContent = useCallback(async (selected) => {
+        setSelectionMenuTarget(null);
+        setSelectionConstraint(undefined);
+        if (selected.length === 0)
+            return;
+        const addedItems = await mockQuery({ id: selected.map(({ id }) => id) });
+        setMockRawItems(cur => {
+            if (addToItemId) {
+                return cur.map(item => {
+                    if (item.id === addToItemId && item.items) {
+                        return {
+                            ...item,
+                            items: [
+                                ...item.items,
+                                ...addedItems.map(nestedItem => ({
+                                    ...nestedItem,
+                                    id: `${addToItemId}:${nestedItem.id}`
+                                }))
+                            ]
+                        };
+                    }
+                    return item;
+                });
+            }
+            return [...cur, ...addedItems.filter(newItem => !cur.find(({ id }) => id === newItem.id))];
+        });
+    }, [addToItemId, setSelectionMenuTarget]);
+    const onItemConfigure = useCallback((id, e) => {
+        setConfigTarget(e.currentTarget);
+        setConfigItemId(id);
+    }, [setConfigTarget]);
+    const onItemRemove = useCallback((id) => {
+        setMockRawItems(cur => cur.filter(rawItem => {
+            if (rawItem.id === id)
+                return false;
+            // See if it's there before setting a new array instance.
+            if (rawItem.items && rawItem.items.find(ri => ri.id === id)) {
+                rawItem.items = rawItem.items.filter(ri => ri.id !== id);
+            }
+            return true;
+        }));
+    }, []);
+    const onAddToGroup = useCallback((groupId, e) => {
+        setAddToItemId(groupId);
+        setSelectionMenuTarget(e.currentTarget);
+        setSelectionConstraint({ types: ['Field'] });
+    }, [setSelectionMenuTarget]);
+    const showSelectionMenu = useCallback((e) => {
+        setSelectionMenuTarget(e.currentTarget);
+    }, [setSelectionMenuTarget]);
+    const onChange = useCallback(updatedItems => {
+        setMockRawItems(cur => {
+            const findRawItem = (id) => {
+                for (let i = 0; i < cur.length; i += 1) {
+                    if (cur[i].id === id)
+                        return cur[i];
+                    if (cur[i].items) {
+                        const subItem = cur[i].items.find(s => s.id === id);
+                        if (subItem)
+                            return subItem;
+                    }
+                }
+                return [...mockFields, ...mockViews, ...mockGroups].find(rawItem => rawItem.id === id);
+            };
+            return updatedItems.map(item => {
+                const rawItem = findRawItem(item.id);
+                if (item.items) {
+                    const rawSubItems = item.items.map(subItem => {
+                        return findRawItem(subItem.id);
+                    });
+                    return { ...rawItem, items: rawSubItems };
+                }
+                return rawItem;
+            });
+        });
+    }, []);
+    const createListItems = useCallback((mci, onATG) => {
+        return mci.map(rawItem => {
+            const itemError = errors?.find(error => error.rawItemId === rawItem.id);
+            const primary = rawItem.type === 'View'
+                ? {
+                    text: rawItem.label,
+                    href: '/some-url',
+                    onClick: (e) => {
+                        e.preventDefault();
+                        // Navigate or present a dialog/panel for clicked item...
+                    }
+                }
+                : rawItem.label;
+            const baseItem = {
+                // type property is being spread in via the mock content item.
+                ...rawItem,
+                primary,
+                secondary: rawItem.subType ?? rawItem.type,
+                status: itemError ? { type: 'error', message: itemError.message } : undefined,
+                onConfigure: onItemConfigure,
+                onRemove: onItemRemove,
+                items: undefined
+            };
+            return rawItem.type === 'Group'
+                ? {
+                    ...baseItem,
+                    items: rawItem.items ? createListItems(rawItem.items, onATG) : [],
+                    accept: 'Field',
+                    onAddTo: onATG
+                }
+                : baseItem;
+        });
+    }, [errors, onItemConfigure, onItemRemove]);
+    // Here we transform MockRawItems -> StandardDragDropListProps['items']
+    const itemsToRender = useMemo(() => {
+        return createListItems(mockRawItems, onAddToGroup);
+    }, [mockRawItems, onAddToGroup, createListItems]);
+    return (_jsxs(_Fragment, { children: [_jsx(DragDropManager, { children: useMemo(() => (_jsx(StandardDragDropList, { accept: [...contentTypes, 'Field', 'View', 'Group'], heading: 'Mock view', items: itemsToRender, onChange: onChange, footer: _jsx(_Fragment, { children: _jsx(Button, { onClick: showSelectionMenu, variant: 'link', children: _jsxs(Flex, { container: { inline: true, alignItems: 'center', gap: 1 }, children: [_jsx(Icon, { name: 'plus' }), _jsx("span", { children: "Add" })] }) }) }) })), [itemsToRender, showSelectionMenu, onChange]) }), configTarget && configItemId && (_jsx(ItemConfig, { itemId: configItemId, target: configTarget, onCancel: () => {
+                    setConfigTarget(null);
+                    setConfigItemId(null);
+                    setErrors(currentErrors => {
+                        const currentItemError = currentErrors?.find(err => err.rawItemId === configItemId);
+                        return currentItemError
+                            ? currentErrors.filter(err => err.rawItemId !== configItemId)
+                            : [
+                                ...currentErrors,
+                                { rawItemId: configItemId, message: 'Misconfiguration detected' }
+                            ];
+                    });
+                }, onSubmit: () => {
+                    setConfigTarget(null);
+                    setConfigItemId(null);
+                } })), selectionMenuTarget && (_jsx(SelectionMenu, { target: selectionMenuTarget, constraint: selectionConstraint, onCancel: () => {
+                    setSelectionMenuTarget(null);
+                    setAddToItemId(null);
+                    setSelectionConstraint(undefined);
+                }, onSubmit: onAddContent }))] }));
+};
+//# sourceMappingURL=Demo.js.map

package/lib/dnd/StandardDragDropList/Demo.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Demo.js","sourceRoot":"","sources":["../../../src/dnd/StandardDragDropList/Demo.tsx"],"names":[],"mappings":"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","sourcesContent":["import { MouseEvent, useCallback, useMemo, useState } from 'react';\n\nimport {\n  StandardDragDropList,\n  type StandardDragDropListItemProps,\n  StandardDragDropListProps,\n  DragDropManager\n} from '@pega/cosmos-react-dnd';\nimport { Button, Flex, Icon, useElement } from '@pega/cosmos-react-core';\nimport { MultiSelectInputProps } from '@pega/cosmos-react-core/lib/components/ComboBox/MultiSelectInput/MultiSelectInput.types';\n\nimport {\n  contentTypes,\n  MockRawItem,\n  mockQuery,\n  mockFields,\n  mockGroups,\n  mockViews\n} from './mockData';\nimport ItemConfig from './ItemConfig';\nimport SelectionMenu, { SelectionMenuProps } from './SelectionMenu';\n\ninterface StandardDragDropListDemoProps {\n  items: MockRawItem[];\n}\n\nexport default ({ items }: StandardDragDropListDemoProps): JSX.Element => {\n  // The state of the list's content is maintained here and the raw item objects are transformed below prior to render.\n  const [mockRawItems, setMockRawItems] = useState<MockRawItem[]>(items);\n\n  const [configItemId, setConfigItemId] = useState<MockRawItem['id'] | null>(null);\n\n  const [configTarget, setConfigTarget] = useElement(null);\n\n  const [selectionMenuTarget, setSelectionMenuTarget] = useElement(null);\n\n  const [selectionConstraint, setSelectionConstraint] =\n    useState<SelectionMenuProps['constraint']>();\n\n  const [addToItemId, setAddToItemId] = useState<MockRawItem['id'] | null>(null);\n\n  const [errors, setErrors] = useState<{ rawItemId: MockRawItem['id']; message: string }[]>([]);\n\n  const onAddContent = useCallback(\n    async (selected: NonNullable<MultiSelectInputProps['selected']>) => {\n      setSelectionMenuTarget(null);\n      setSelectionConstraint(undefined);\n\n      if (selected.length === 0) return;\n\n      const addedItems = await mockQuery({ id: selected.map(({ id }) => id) });\n\n      setMockRawItems(cur => {\n        if (addToItemId) {\n          return cur.map(item => {\n            if (item.id === addToItemId && item.items) {\n              return {\n                ...item,\n                items: [\n                  ...item.items,\n                  ...addedItems.map(nestedItem => ({\n                    ...nestedItem,\n                    id: `${addToItemId}:${nestedItem.id}`\n                  }))\n                ]\n              };\n            }\n            return item;\n          });\n        }\n\n        return [...cur, ...addedItems.filter(newItem => !cur.find(({ id }) => id === newItem.id))];\n      });\n    },\n    [addToItemId, setSelectionMenuTarget]\n  );\n\n  const onItemConfigure = useCallback(\n    (id: StandardDragDropListItemProps['id'], e: MouseEvent<HTMLButtonElement>) => {\n      setConfigTarget(e.currentTarget);\n      setConfigItemId(id);\n    },\n    [setConfigTarget]\n  );\n\n  const onItemRemove = useCallback((id: StandardDragDropListItemProps['id']) => {\n    setMockRawItems(cur =>\n      cur.filter(rawItem => {\n        if (rawItem.id === id) return false;\n        // See if it's there before setting a new array instance.\n        if (rawItem.items && rawItem.items.find(ri => ri.id === id)) {\n          rawItem.items = rawItem.items.filter(ri => ri.id !== id);\n        }\n        return true;\n      })\n    );\n  }, []);\n\n  const onAddToGroup = useCallback(\n    (groupId: StandardDragDropListItemProps['id'], e: MouseEvent<Element>) => {\n      setAddToItemId(groupId);\n      setSelectionMenuTarget(e.currentTarget);\n      setSelectionConstraint({ types: ['Field'] });\n    },\n    [setSelectionMenuTarget]\n  );\n\n  const showSelectionMenu = useCallback(\n    (e: MouseEvent<HTMLButtonElement>) => {\n      setSelectionMenuTarget(e.currentTarget);\n    },\n    [setSelectionMenuTarget]\n  );\n\n  const onChange: StandardDragDropListProps['onChange'] = useCallback(updatedItems => {\n    setMockRawItems(cur => {\n      const findRawItem = (id: string) => {\n        for (let i = 0; i < cur.length; i += 1) {\n          if (cur[i].id === id) return cur[i];\n\n          if (cur[i].items) {\n            const subItem = cur[i].items!.find(s => s.id === id);\n            if (subItem) return subItem;\n          }\n        }\n\n        return [...mockFields, ...mockViews, ...mockGroups].find(rawItem => rawItem.id === id)!;\n      };\n\n      return updatedItems.map(item => {\n        const rawItem = findRawItem(item.id);\n\n        if (item.items) {\n          const rawSubItems = item.items.map(subItem => {\n            return findRawItem(subItem.id);\n          });\n\n          return { ...rawItem, items: rawSubItems };\n        }\n\n        return rawItem;\n      });\n    });\n  }, []);\n\n  const createListItems = useCallback(\n    (mci: MockRawItem[], onATG: typeof onAddToGroup): StandardDragDropListProps['items'] => {\n      return mci.map(rawItem => {\n        const itemError = errors?.find(error => error.rawItemId === rawItem.id);\n\n        const primary =\n          rawItem.type === 'View'\n            ? {\n                text: rawItem.label,\n                href: '/some-url',\n                onClick: (e: MouseEvent) => {\n                  e.preventDefault();\n                  // Navigate or present a dialog/panel for clicked item...\n                }\n              }\n            : rawItem.label;\n\n        const baseItem: StandardDragDropListItemProps = {\n          // type property is being spread in via the mock content item.\n          ...rawItem,\n          primary,\n          secondary: rawItem.subType ?? rawItem.type,\n          status: itemError ? { type: 'error', message: itemError.message } : undefined,\n          onConfigure: onItemConfigure,\n          onRemove: onItemRemove,\n          items: undefined\n        };\n\n        return rawItem.type === 'Group'\n          ? {\n              ...baseItem,\n              items: rawItem.items ? createListItems(rawItem.items, onATG) : [],\n              accept: 'Field',\n              onAddTo: onATG\n            }\n          : baseItem;\n      });\n    },\n    [errors, onItemConfigure, onItemRemove]\n  );\n\n  // Here we transform MockRawItems -> StandardDragDropListProps['items']\n  const itemsToRender: StandardDragDropListProps['items'] = useMemo(() => {\n    return createListItems(mockRawItems, onAddToGroup);\n  }, [mockRawItems, onAddToGroup, createListItems]);\n\n  return (\n    <>\n      <DragDropManager>\n        {useMemo(\n          () => (\n            <StandardDragDropList\n              accept={[...contentTypes, 'Field', 'View', 'Group']}\n              heading='Mock view'\n              items={itemsToRender}\n              onChange={onChange}\n              footer={\n                <>\n                  <Button onClick={showSelectionMenu} variant='link'>\n                    <Flex container={{ inline: true, alignItems: 'center', gap: 1 }}>\n                      <Icon name='plus' />\n                      <span>Add</span>\n                    </Flex>\n                  </Button>\n                </>\n              }\n            />\n          ),\n          [itemsToRender, showSelectionMenu, onChange]\n        )}\n      </DragDropManager>\n      {configTarget && configItemId && (\n        <ItemConfig\n          itemId={configItemId}\n          target={configTarget}\n          onCancel={() => {\n            setConfigTarget(null);\n            setConfigItemId(null);\n            setErrors(currentErrors => {\n              const currentItemError = currentErrors?.find(err => err.rawItemId === configItemId);\n\n              return currentItemError\n                ? currentErrors.filter(err => err.rawItemId !== configItemId)\n                : [\n                    ...currentErrors,\n                    { rawItemId: configItemId, message: 'Misconfiguration detected' }\n                  ];\n            });\n          }}\n          onSubmit={() => {\n            setConfigTarget(null);\n            setConfigItemId(null);\n          }}\n        />\n      )}\n      {selectionMenuTarget && (\n        <SelectionMenu\n          target={selectionMenuTarget}\n          constraint={selectionConstraint}\n          onCancel={() => {\n            setSelectionMenuTarget(null);\n            setAddToItemId(null);\n            setSelectionConstraint(undefined);\n          }}\n          onSubmit={onAddContent}\n        />\n      )}\n    </>\n  );\n};\n"]}

package/lib/dnd/StandardDragDropList/GroupConfig.d.ts

@@ -0,0 +1,10 @@
+/// <reference types="react" />
+import { PopoverProps } from '@pega/cosmos-react-core';
+interface ItemConfigProps {
+    target: NonNullable<PopoverProps['target']>;
+    onCancel: () => void;
+    onSubmit: () => void;
+}
+declare const GroupConfig: ({ target, onCancel, onSubmit }: ItemConfigProps) => JSX.Element;
+export default GroupConfig;
+//# sourceMappingURL=GroupConfig.d.ts.map

package/lib/dnd/StandardDragDropList/GroupConfig.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"GroupConfig.d.ts","sourceRoot":"","sources":["../../../src/dnd/StandardDragDropList/GroupConfig.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAe,YAAY,EAAkB,MAAM,yBAAyB,CAAC;AAIpF,UAAU,eAAe;IACvB,MAAM,EAAE,WAAW,CAAC,YAAY,CAAC,QAAQ,CAAC,CAAC,CAAC;IAC5C,QAAQ,EAAE,MAAM,IAAI,CAAC;IACrB,QAAQ,EAAE,MAAM,IAAI,CAAC;CACtB;AAWD,QAAA,MAAM,WAAW,mCAAoC,eAAe,gBAenE,CAAC;AAEF,eAAe,WAAW,CAAC"}

package/lib/dnd/StandardDragDropList/GroupConfig.js

@@ -0,0 +1,18 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Flex, Input, Select, Option } from '@pega/cosmos-react-core';
+import Popover from './Popover';
+const comparisionTypes = [
+    'Integer',
+    'Decimal',
+    'Currency',
+    'Date & time',
+    'Date only',
+    'Time only'
+];
+const GroupConfig = ({ target, onCancel, onSubmit }) => {
+    return (_jsx(Popover, { target: target, heading: 'Create Group', onCancel: onCancel, onSubmit: onSubmit, children: _jsxs(Flex, { container: { direction: 'column', gap: 2 }, children: [_jsx(Input, { label: 'Heading', required: true }), _jsxs(Select, { label: 'Allowed types', children: [_jsx(Option, { value: 'All', children: "All" }), comparisionTypes.map(type => {
+                            return _jsx(Option, { value: type, children: type });
+                        })] }), _jsx("div", { children: "Etc..." })] }) }));
+};
+export default GroupConfig;
+//# sourceMappingURL=GroupConfig.js.map

package/lib/dnd/StandardDragDropList/GroupConfig.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"GroupConfig.js","sourceRoot":"","sources":["../../../src/dnd/StandardDragDropList/GroupConfig.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,KAAK,EAAgB,MAAM,EAAE,MAAM,EAAE,MAAM,yBAAyB,CAAC;AAEpF,OAAO,OAAO,MAAM,WAAW,CAAC;AAQhC,MAAM,gBAAgB,GAAG;IACvB,SAAS;IACT,SAAS;IACT,UAAU;IACV,aAAa;IACb,WAAW;IACX,WAAW;CACZ,CAAC;AAEF,MAAM,WAAW,GAAG,CAAC,EAAE,MAAM,EAAE,QAAQ,EAAE,QAAQ,EAAmB,EAAE,EAAE;IACtE,OAAO,CACL,KAAC,OAAO,IAAC,MAAM,EAAE,MAAM,EAAE,OAAO,EAAC,cAAc,EAAC,QAAQ,EAAE,QAAQ,EAAE,QAAQ,EAAE,QAAQ,YACpF,MAAC,IAAI,IAAC,SAAS,EAAE,EAAE,SAAS,EAAE,QAAQ,EAAE,GAAG,EAAE,CAAC,EAAE,aAC9C,KAAC,KAAK,IAAC,KAAK,EAAC,SAAS,EAAC,QAAQ,SAAG,EAClC,MAAC,MAAM,IAAC,KAAK,EAAC,eAAe,aAC3B,KAAC,MAAM,IAAC,KAAK,EAAC,KAAK,oBAAa,EAC/B,gBAAgB,CAAC,GAAG,CAAC,IAAI,CAAC,EAAE;4BAC3B,OAAO,KAAC,MAAM,IAAC,KAAK,EAAE,IAAI,YAAG,IAAI,GAAU,CAAC;wBAC9C,CAAC,CAAC,IACK,EACT,mCAAiB,IACZ,GACC,CACX,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,WAAW,CAAC","sourcesContent":["import { Flex, Input, PopoverProps, Select, Option } from '@pega/cosmos-react-core';\n\nimport Popover from './Popover';\n\ninterface ItemConfigProps {\n  target: NonNullable<PopoverProps['target']>;\n  onCancel: () => void;\n  onSubmit: () => void;\n}\n\nconst comparisionTypes = [\n  'Integer',\n  'Decimal',\n  'Currency',\n  'Date & time',\n  'Date only',\n  'Time only'\n];\n\nconst GroupConfig = ({ target, onCancel, onSubmit }: ItemConfigProps) => {\n  return (\n    <Popover target={target} heading='Create Group' onCancel={onCancel} onSubmit={onSubmit}>\n      <Flex container={{ direction: 'column', gap: 2 }}>\n        <Input label='Heading' required />\n        <Select label='Allowed types'>\n          <Option value='All'>All</Option>\n          {comparisionTypes.map(type => {\n            return <Option value={type}>{type}</Option>;\n          })}\n        </Select>\n        <div>Etc...</div>\n      </Flex>\n    </Popover>\n  );\n};\n\nexport default GroupConfig;\n"]}

package/lib/dnd/StandardDragDropList/ItemConfig.d.ts

@@ -0,0 +1,12 @@
+/// <reference types="react" />
+import { PopoverProps } from '@pega/cosmos-react-core';
+import { MockRawItem } from './mockData';
+interface ItemConfigProps {
+    itemId: MockRawItem['id'];
+    target: NonNullable<PopoverProps['target']>;
+    onCancel: () => void;
+    onSubmit: () => void;
+}
+declare const ItemConfig: ({ itemId, target, onCancel, onSubmit }: ItemConfigProps) => JSX.Element;
+export default ItemConfig;
+//# sourceMappingURL=ItemConfig.d.ts.map

package/lib/dnd/StandardDragDropList/ItemConfig.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ItemConfig.d.ts","sourceRoot":"","sources":["../../../src/dnd/StandardDragDropList/ItemConfig.tsx"],"names":[],"mappings":";AAEA,OAAO,EAAE,YAAY,EAAW,MAAM,yBAAyB,CAAC;AAGhE,OAAO,EAAa,WAAW,EAAE,MAAM,YAAY,CAAC;AAEpD,UAAU,eAAe;IACvB,MAAM,EAAE,WAAW,CAAC,IAAI,CAAC,CAAC;IAC1B,MAAM,EAAE,WAAW,CAAC,YAAY,CAAC,QAAQ,CAAC,CAAC,CAAC;IAC5C,QAAQ,EAAE,MAAM,IAAI,CAAC;IACrB,QAAQ,EAAE,MAAM,IAAI,CAAC;CACtB;AAED,QAAA,MAAM,UAAU,2CAA4C,eAAe,gBAwB1E,CAAC;AAEF,eAAe,UAAU,CAAC"}

package/lib/dnd/StandardDragDropList/ItemConfig.js

@@ -0,0 +1,20 @@
+import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
+import { useEffect, useState } from 'react';
+import { useI18n } from '@pega/cosmos-react-core';
+import Popover from './Popover';
+import { mockQuery } from './mockData';
+const ItemConfig = ({ itemId, target, onCancel, onSubmit }) => {
+    const [item, setItem] = useState(null);
+    const [loading, setLoading] = useState(true);
+    const t = useI18n();
+    useEffect(() => {
+        (async () => {
+            const [ci] = await mockQuery({ id: itemId, delay: 500 });
+            setItem(ci);
+            setLoading(false);
+        })();
+    }, []);
+    return (_jsx(Popover, { loading: loading, target: target, heading: !loading && item ? item.label : t('loading'), onCancel: onCancel, onSubmit: onSubmit, children: _jsxs("div", { style: { margin: 'auto' }, children: ["Configuration for ", item?.label, "..."] }) }));
+};
+export default ItemConfig;
+//# sourceMappingURL=ItemConfig.js.map

package/lib/dnd/StandardDragDropList/ItemConfig.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ItemConfig.js","sourceRoot":"","sources":["../../../src/dnd/StandardDragDropList/ItemConfig.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAE5C,OAAO,EAAgB,OAAO,EAAE,MAAM,yBAAyB,CAAC;AAEhE,OAAO,OAAO,MAAM,WAAW,CAAC;AAChC,OAAO,EAAE,SAAS,EAAe,MAAM,YAAY,CAAC;AASpD,MAAM,UAAU,GAAG,CAAC,EAAE,MAAM,EAAE,MAAM,EAAE,QAAQ,EAAE,QAAQ,EAAmB,EAAE,EAAE;IAC7E,MAAM,CAAC,IAAI,EAAE,OAAO,CAAC,GAAG,QAAQ,CAAqB,IAAI,CAAC,CAAC;IAC3D,MAAM,CAAC,OAAO,EAAE,UAAU,CAAC,GAAG,QAAQ,CAAC,IAAI,CAAC,CAAC;IAC7C,MAAM,CAAC,GAAG,OAAO,EAAE,CAAC;IAEpB,SAAS,CAAC,GAAG,EAAE;QACb,CAAC,KAAK,IAAI,EAAE;YACV,MAAM,CAAC,EAAE,CAAC,GAAG,MAAM,SAAS,CAAC,EAAE,EAAE,EAAE,MAAM,EAAE,KAAK,EAAE,GAAG,EAAE,CAAC,CAAC;YACzD,OAAO,CAAC,EAAE,CAAC,CAAC;YACZ,UAAU,CAAC,KAAK,CAAC,CAAC;QACpB,CAAC,CAAC,EAAE,CAAC;IACP,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,OAAO,CACL,KAAC,OAAO,IACN,OAAO,EAAE,OAAO,EAChB,MAAM,EAAE,MAAM,EACd,OAAO,EAAE,CAAC,OAAO,IAAI,IAAI,CAAC,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC,SAAS,CAAC,EACrD,QAAQ,EAAE,QAAQ,EAClB,QAAQ,EAAE,QAAQ,YAElB,eAAK,KAAK,EAAE,EAAE,MAAM,EAAE,MAAM,EAAE,mCAAqB,IAAI,EAAE,KAAK,WAAU,GAChE,CACX,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,UAAU,CAAC","sourcesContent":["import { useEffect, useState } from 'react';\n\nimport { PopoverProps, useI18n } from '@pega/cosmos-react-core';\n\nimport Popover from './Popover';\nimport { mockQuery, MockRawItem } from './mockData';\n\ninterface ItemConfigProps {\n  itemId: MockRawItem['id'];\n  target: NonNullable<PopoverProps['target']>;\n  onCancel: () => void;\n  onSubmit: () => void;\n}\n\nconst ItemConfig = ({ itemId, target, onCancel, onSubmit }: ItemConfigProps) => {\n  const [item, setItem] = useState<MockRawItem | null>(null);\n  const [loading, setLoading] = useState(true);\n  const t = useI18n();\n\n  useEffect(() => {\n    (async () => {\n      const [ci] = await mockQuery({ id: itemId, delay: 500 });\n      setItem(ci);\n      setLoading(false);\n    })();\n  }, []);\n\n  return (\n    <Popover\n      loading={loading}\n      target={target}\n      heading={!loading && item ? item.label : t('loading')}\n      onCancel={onCancel}\n      onSubmit={onSubmit}\n    >\n      <div style={{ margin: 'auto' }}>Configuration for {item?.label}...</div>\n    </Popover>\n  );\n};\n\nexport default ItemConfig;\n"]}

package/lib/dnd/StandardDragDropList/Popover.d.ts

@@ -0,0 +1,14 @@
+import { ReactNode } from 'react';
+import { PopoverProps as CorePopoverProps } from '@pega/cosmos-react-core';
+declare type PopoverProps = {
+    target: NonNullable<CorePopoverProps['target']>;
+    loading?: boolean;
+    heading: string;
+    children?: ReactNode;
+    displayHeading?: boolean;
+    onCancel: () => void;
+    onSubmit: () => void;
+};
+declare const Popover: ({ loading, heading, target, children, displayHeading, onCancel, onSubmit }: PopoverProps) => JSX.Element;
+export default Popover;
+//# sourceMappingURL=Popover.d.ts.map

package/lib/dnd/StandardDragDropList/Popover.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Popover.d.ts","sourceRoot":"","sources":["../../../src/dnd/StandardDragDropList/Popover.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAA8B,MAAM,OAAO,CAAC;AAG9D,OAAO,EAKL,YAAY,IAAI,gBAAgB,EAYjC,MAAM,yBAAyB,CAAC;AAEjC,aAAK,YAAY,GAAG;IAClB,MAAM,EAAE,WAAW,CAAC,gBAAgB,CAAC,QAAQ,CAAC,CAAC,CAAC;IAChD,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,OAAO,EAAE,MAAM,CAAC;IAChB,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,QAAQ,EAAE,MAAM,IAAI,CAAC;IACrB,QAAQ,EAAE,MAAM,IAAI,CAAC;CACtB,CAAC;AAaF,QAAA,MAAM,OAAO,+EAQV,YAAY,gBAyDd,CAAC;AAEF,eAAe,OAAO,CAAC"}

package/lib/dnd/StandardDragDropList/Popover.js

@@ -0,0 +1,33 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useRef, useEffect, useMemo } from 'react';
+import styled from 'styled-components';
+import { Popover as CorePopover, Flex, Button, Text, useI18n, useEscape, useOuterEvent, CardHeader, CardFooter, CardContent, Progress, useFocusTrap, useUID, getFocusables, VisuallyHiddenText } from '@pega/cosmos-react-core';
+const StyledContent = styled(CardContent) `
+  overflow: auto;
+`;
+const StyledPopover = styled(CorePopover) `
+  position: relative;
+  width: min(100vh, 60ch);
+  min-height: 6rem;
+  max-height: calc(100vh - 2rem);
+`;
+const Popover = ({ loading, heading, target, children, displayHeading = true, onCancel, onSubmit }) => {
+    const t = useI18n();
+    const headingId = useUID();
+    const ref = useRef(null);
+    useOuterEvent('mousedown', [ref], onCancel);
+    useEscape(onCancel);
+    useFocusTrap(ref);
+    useEffect(() => {
+        getFocusables(ref)[0]?.focus();
+    }, []);
+    const header = useMemo(() => {
+        if (loading)
+            return;
+        const h2 = (_jsx(Text, { variant: 'h2', id: headingId, children: displayHeading ? heading : _jsx(VisuallyHiddenText, { children: heading }) }));
+        return displayHeading ? _jsx(CardHeader, { children: h2 }) : h2;
+    }, [loading, heading, headingId, displayHeading]);
+    return (_jsxs(Flex, { role: 'dialog', "aria-labelledby": headingId, container: { direction: 'column' }, as: StyledPopover, target: target, arrow: true, ref: ref, children: [header, _jsx(Flex, { item: { grow: 1 }, as: StyledContent, children: !loading && children }), !loading && (_jsxs(CardFooter, { container: { justify: 'between' }, children: [_jsx(Button, { autoFocus: true, onClick: onCancel, children: t('cancel') }), _jsx(Button, { variant: 'primary', onClick: onSubmit, children: t('submit') })] })), loading && _jsx(Progress, { placement: 'local', message: t('loading') })] }));
+};
+export default Popover;
+//# sourceMappingURL=Popover.js.map

package/lib/dnd/StandardDragDropList/Popover.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Popover.js","sourceRoot":"","sources":["../../../src/dnd/StandardDragDropList/Popover.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAa,MAAM,EAAE,SAAS,EAAE,OAAO,EAAE,MAAM,OAAO,CAAC;AAC9D,OAAO,MAAM,MAAM,mBAAmB,CAAC;AAEvC,OAAO,EACL,OAAO,IAAI,WAAW,EACtB,IAAI,EACJ,MAAM,EACN,IAAI,EAEJ,OAAO,EACP,SAAS,EACT,aAAa,EACb,UAAU,EACV,UAAU,EACV,WAAW,EACX,QAAQ,EACR,YAAY,EACZ,MAAM,EACN,aAAa,EACb,kBAAkB,EACnB,MAAM,yBAAyB,CAAC;AAYjC,MAAM,aAAa,GAAG,MAAM,CAAC,WAAW,CAAC,CAAA;;CAExC,CAAC;AAEF,MAAM,aAAa,GAAG,MAAM,CAAC,WAAW,CAAC,CAAA;;;;;CAKxC,CAAC;AAEF,MAAM,OAAO,GAAG,CAAC,EACf,OAAO,EACP,OAAO,EACP,MAAM,EACN,QAAQ,EACR,cAAc,GAAG,IAAI,EACrB,QAAQ,EACR,QAAQ,EACK,EAAE,EAAE;IACjB,MAAM,CAAC,GAAG,OAAO,EAAE,CAAC;IACpB,MAAM,SAAS,GAAG,MAAM,EAAE,CAAC;IAC3B,MAAM,GAAG,GAAG,MAAM,CAAc,IAAI,CAAC,CAAC;IAEtC,aAAa,CAAC,WAAW,EAAE,CAAC,GAAG,CAAC,EAAE,QAAQ,CAAC,CAAC;IAE5C,SAAS,CAAC,QAAQ,CAAC,CAAC;IAEpB,YAAY,CAAC,GAAG,CAAC,CAAC;IAElB,SAAS,CAAC,GAAG,EAAE;QACb,aAAa,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,EAAE,KAAK,EAAE,CAAC;IACjC,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,MAAM,MAAM,GAAG,OAAO,CAAC,GAAG,EAAE;QAC1B,IAAI,OAAO;YAAE,OAAO;QAEpB,MAAM,EAAE,GAAG,CACT,KAAC,IAAI,IAAC,OAAO,EAAC,IAAI,EAAC,EAAE,EAAE,SAAS,YAC7B,cAAc,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,KAAC,kBAAkB,cAAE,OAAO,GAAsB,GACzE,CACR,CAAC;QAEF,OAAO,cAAc,CAAC,CAAC,CAAC,KAAC,UAAU,cAAE,EAAE,GAAc,CAAC,CAAC,CAAC,EAAE,CAAC;IAC7D,CAAC,EAAE,CAAC,OAAO,EAAE,OAAO,EAAE,SAAS,EAAE,cAAc,CAAC,CAAC,CAAC;IAElD,OAAO,CACL,MAAC,IAAI,IACH,IAAI,EAAC,QAAQ,qBACI,SAAS,EAC1B,SAAS,EAAE,EAAE,SAAS,EAAE,QAAQ,EAAE,EAClC,EAAE,EAAE,aAAa,EACjB,MAAM,EAAE,MAAM,EACd,KAAK,QACL,GAAG,EAAE,GAAG,aAEP,MAAM,EAEP,KAAC,IAAI,IAAC,IAAI,EAAE,EAAE,IAAI,EAAE,CAAC,EAAE,EAAE,EAAE,EAAE,aAAa,YACvC,CAAC,OAAO,IAAI,QAAQ,GAChB,EAEN,CAAC,OAAO,IAAI,CACX,MAAC,UAAU,IAAC,SAAS,EAAE,EAAE,OAAO,EAAE,SAAS,EAAE,aAC3C,KAAC,MAAM,IAAC,SAAS,QAAC,OAAO,EAAE,QAAQ,YAChC,CAAC,CAAC,QAAQ,CAAC,GACL,EACT,KAAC,MAAM,IAAC,OAAO,EAAC,SAAS,EAAC,OAAO,EAAE,QAAQ,YACxC,CAAC,CAAC,QAAQ,CAAC,GACL,IACE,CACd,EAEA,OAAO,IAAI,KAAC,QAAQ,IAAC,SAAS,EAAC,OAAO,EAAC,OAAO,EAAE,CAAC,CAAC,SAAS,CAAC,GAAI,IAC5D,CACR,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,OAAO,CAAC","sourcesContent":["import { ReactNode, useRef, useEffect, useMemo } from 'react';\nimport styled from 'styled-components';\n\nimport {\n  Popover as CorePopover,\n  Flex,\n  Button,\n  Text,\n  PopoverProps as CorePopoverProps,\n  useI18n,\n  useEscape,\n  useOuterEvent,\n  CardHeader,\n  CardFooter,\n  CardContent,\n  Progress,\n  useFocusTrap,\n  useUID,\n  getFocusables,\n  VisuallyHiddenText\n} from '@pega/cosmos-react-core';\n\ntype PopoverProps = {\n  target: NonNullable<CorePopoverProps['target']>;\n  loading?: boolean;\n  heading: string;\n  children?: ReactNode;\n  displayHeading?: boolean;\n  onCancel: () => void;\n  onSubmit: () => void;\n};\n\nconst StyledContent = styled(CardContent)`\n  overflow: auto;\n`;\n\nconst StyledPopover = styled(CorePopover)`\n  position: relative;\n  width: min(100vh, 60ch);\n  min-height: 6rem;\n  max-height: calc(100vh - 2rem);\n`;\n\nconst Popover = ({\n  loading,\n  heading,\n  target,\n  children,\n  displayHeading = true,\n  onCancel,\n  onSubmit\n}: PopoverProps) => {\n  const t = useI18n();\n  const headingId = useUID();\n  const ref = useRef<HTMLElement>(null);\n\n  useOuterEvent('mousedown', [ref], onCancel);\n\n  useEscape(onCancel);\n\n  useFocusTrap(ref);\n\n  useEffect(() => {\n    getFocusables(ref)[0]?.focus();\n  }, []);\n\n  const header = useMemo(() => {\n    if (loading) return;\n\n    const h2 = (\n      <Text variant='h2' id={headingId}>\n        {displayHeading ? heading : <VisuallyHiddenText>{heading}</VisuallyHiddenText>}\n      </Text>\n    );\n\n    return displayHeading ? <CardHeader>{h2}</CardHeader> : h2;\n  }, [loading, heading, headingId, displayHeading]);\n\n  return (\n    <Flex\n      role='dialog'\n      aria-labelledby={headingId}\n      container={{ direction: 'column' }}\n      as={StyledPopover}\n      target={target}\n      arrow\n      ref={ref}\n    >\n      {header}\n\n      <Flex item={{ grow: 1 }} as={StyledContent}>\n        {!loading && children}\n      </Flex>\n\n      {!loading && (\n        <CardFooter container={{ justify: 'between' }}>\n          <Button autoFocus onClick={onCancel}>\n            {t('cancel')}\n          </Button>\n          <Button variant='primary' onClick={onSubmit}>\n            {t('submit')}\n          </Button>\n        </CardFooter>\n      )}\n\n      {loading && <Progress placement='local' message={t('loading')} />}\n    </Flex>\n  );\n};\n\nexport default Popover;\n"]}

package/lib/dnd/StandardDragDropList/SelectionMenu.d.ts

@@ -0,0 +1,16 @@
+/// <reference types="react" />
+import { PopoverProps } from '@pega/cosmos-react-core';
+import { MultiSelectInputProps } from '@pega/cosmos-react-core/lib/components/ComboBox/MultiSelectInput/MultiSelectInput.types';
+import { ContentType, FieldType } from './mockData';
+export interface SelectionMenuProps {
+    target: NonNullable<PopoverProps['target']>;
+    constraint?: {
+        types?: ContentType[];
+        subTypes?: FieldType[];
+    };
+    onCancel: () => void;
+    onSubmit: (selected: NonNullable<MultiSelectInputProps['selected']>) => void;
+}
+declare const SelectionMenu: ({ target, constraint, onCancel: onClose, onSubmit }: SelectionMenuProps) => JSX.Element;
+export default SelectionMenu;
+//# sourceMappingURL=SelectionMenu.d.ts.map

package/lib/dnd/StandardDragDropList/SelectionMenu.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SelectionMenu.d.ts","sourceRoot":"","sources":["../../../src/dnd/StandardDragDropList/SelectionMenu.tsx"],"names":[],"mappings":";AAGA,OAAO,EAML,YAAY,EAGb,MAAM,yBAAyB,CAAC;AAEjC,OAAO,EAAE,qBAAqB,EAAE,MAAM,yFAAyF,CAAC;AAEhI,OAAO,EAAE,WAAW,EAAE,SAAS,EAAa,MAAM,YAAY,CAAC;AAG/D,MAAM,WAAW,kBAAkB;IACjC,MAAM,EAAE,WAAW,CAAC,YAAY,CAAC,QAAQ,CAAC,CAAC,CAAC;IAC5C,UAAU,CAAC,EAAE;QACX,KAAK,CAAC,EAAE,WAAW,EAAE,CAAC;QACtB,QAAQ,CAAC,EAAE,SAAS,EAAE,CAAC;KACxB,CAAC;IACF,QAAQ,EAAE,MAAM,IAAI,CAAC;IACrB,QAAQ,EAAE,CAAC,QAAQ,EAAE,WAAW,CAAC,qBAAqB,CAAC,UAAU,CAAC,CAAC,KAAK,IAAI,CAAC;CAC9E;AAeD,QAAA,MAAM,aAAa,wDAAyD,kBAAkB,gBAwI7F,CAAC;AAEF,eAAe,aAAa,CAAC"}