@pega/cosmos-react-demos 6.6.0 → 6.6.2

package/jsx/dnd/StandardDragDropList/Demo.jsx

@@ -1,156 +0,0 @@
-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 }) => {
-    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;
-            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();
-                    }
-                }
-                : rawItem.label;
-            const baseItem = {
-                ...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]);
-    const itemsToRender = useMemo(() => {
-        return createListItems(mockRawItems, onAddToGroup);
-    }, [mockRawItems, onAddToGroup, createListItems]);
-    return (<>
-      <DragDropManager>
-        {useMemo(() => (<StandardDragDropList accept={[...contentTypes, 'Field', 'View', 'Group']} heading='Mock view' items={itemsToRender} onChange={onChange} footer={<Button onClick={showSelectionMenu} variant='link'>
-                  <Flex container={{ inline: true, alignItems: 'center', gap: 1 }}>
-                    <Icon name='plus'/>
-                    <span>Add</span>
-                  </Flex>
-                </Button>}/>), [itemsToRender, showSelectionMenu, onChange])}
-      </DragDropManager>
-      {configTarget && configItemId && (<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 && (<SelectionMenu target={selectionMenuTarget} constraint={selectionConstraint} onCancel={() => {
-                setSelectionMenuTarget(null);
-                setAddToItemId(null);
-                setSelectionConstraint(undefined);
-            }} onSubmit={onAddContent}/>)}
-    </>);
-};
-//# sourceMappingURL=Demo.jsx.map

package/jsx/dnd/StandardDragDropList/Demo.jsx.map

@@ -1 +0,0 @@
-{"version":3,"file":"Demo.jsx","sourceRoot":"","sources":["../../../src/dnd/StandardDragDropList/Demo.tsx"],"names":[],"mappings":"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","sourcesContent":["import { useCallback, useMemo, useState } from 'react';\nimport type { MouseEvent } from 'react';\n\nimport { StandardDragDropList, DragDropManager } from '@pega/cosmos-react-dnd';\nimport type {\n  StandardDragDropListItemProps,\n  StandardDragDropListProps\n} from '@pega/cosmos-react-dnd';\nimport { Button, Flex, Icon, useElement } from '@pega/cosmos-react-core';\nimport type { MultiSelectInputProps } from '@pega/cosmos-react-core/lib/components/ComboBox/MultiSelectInput/MultiSelectInput.types';\n\nimport { contentTypes, mockQuery, mockFields, mockGroups, mockViews } from './mockData';\nimport type { MockRawItem } from './mockData';\nimport ItemConfig from './ItemConfig';\nimport SelectionMenu from './SelectionMenu';\nimport type { 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                <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          [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/jsx/dnd/StandardDragDropList/GroupConfig.d.ts

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

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

@@ -1 +0,0 @@
-{"version":3,"file":"GroupConfig.d.ts","sourceRoot":"","sources":["../../../src/dnd/StandardDragDropList/GroupConfig.tsx"],"names":[],"mappings":";AACA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,yBAAyB,CAAC;AAI5D,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,gCAenE,CAAC;AAEF,eAAe,WAAW,CAAC"}

package/jsx/dnd/StandardDragDropList/GroupConfig.jsx

@@ -1,26 +0,0 @@
-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 (<Popover target={target} heading='Create Group' onCancel={onCancel} onSubmit={onSubmit}>
-      <Flex container={{ direction: 'column', gap: 2 }}>
-        <Input label='Heading' required/>
-        <Select label='Allowed types'>
-          <Option value='All'>All</Option>
-          {comparisionTypes.map(type => {
-            return <Option value={type}>{type}</Option>;
-        })}
-        </Select>
-        <div>Etc...</div>
-      </Flex>
-    </Popover>);
-};
-export default GroupConfig;
-//# sourceMappingURL=GroupConfig.jsx.map

package/jsx/dnd/StandardDragDropList/GroupConfig.jsx.map

@@ -1 +0,0 @@
-{"version":3,"file":"GroupConfig.jsx","sourceRoot":"","sources":["../../../src/dnd/StandardDragDropList/GroupConfig.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,yBAAyB,CAAC;AAGtE,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,CAAC,OAAO,CAAC,MAAM,CAAC,CAAC,MAAM,CAAC,CAAC,OAAO,CAAC,cAAc,CAAC,QAAQ,CAAC,CAAC,QAAQ,CAAC,CAAC,QAAQ,CAAC,CAAC,QAAQ,CAAC,CACrF;MAAA,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC,EAAE,SAAS,EAAE,QAAQ,EAAE,GAAG,EAAE,CAAC,EAAE,CAAC,CAC/C;QAAA,CAAC,KAAK,CAAC,KAAK,CAAC,SAAS,CAAC,QAAQ,EAC/B;QAAA,CAAC,MAAM,CAAC,KAAK,CAAC,eAAe,CAC3B;UAAA,CAAC,MAAM,CAAC,KAAK,CAAC,KAAK,CAAC,GAAG,EAAE,MAAM,CAC/B;UAAA,CAAC,gBAAgB,CAAC,GAAG,CAAC,IAAI,CAAC,EAAE;YAC3B,OAAO,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,IAAI,CAAC,EAAE,MAAM,CAAC,CAAC;QAC9C,CAAC,CAAC,CACJ;QAAA,EAAE,MAAM,CACR;QAAA,CAAC,GAAG,CAAC,MAAM,EAAE,GAAG,CAClB;MAAA,EAAE,IAAI,CACR;IAAA,EAAE,OAAO,CAAC,CACX,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,WAAW,CAAC","sourcesContent":["import { Flex, Input, Select, Option } from '@pega/cosmos-react-core';\nimport type { PopoverProps } 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/jsx/dnd/StandardDragDropList/ItemConfig.d.ts

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

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

@@ -1 +0,0 @@
-{"version":3,"file":"ItemConfig.d.ts","sourceRoot":"","sources":["../../../src/dnd/StandardDragDropList/ItemConfig.tsx"],"names":[],"mappings":";AAGA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,yBAAyB,CAAC;AAI5D,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,YAAY,CAAC;AAE9C,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,gCAwB1E,CAAC;AAEF,eAAe,UAAU,CAAC"}

package/jsx/dnd/StandardDragDropList/ItemConfig.jsx

@@ -1,21 +0,0 @@
-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 (<Popover loading={loading} target={target} heading={!loading && item ? item.label : t('loading')} onCancel={onCancel} onSubmit={onSubmit}>
-      <div style={{ margin: 'auto' }}>Configuration for {item?.label}...</div>
-    </Popover>);
-};
-export default ItemConfig;
-//# sourceMappingURL=ItemConfig.jsx.map

package/jsx/dnd/StandardDragDropList/ItemConfig.jsx.map

@@ -1 +0,0 @@
-{"version":3,"file":"ItemConfig.jsx","sourceRoot":"","sources":["../../../src/dnd/StandardDragDropList/ItemConfig.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAE5C,OAAO,EAAE,OAAO,EAAE,MAAM,yBAAyB,CAAC;AAGlD,OAAO,OAAO,MAAM,WAAW,CAAC;AAChC,OAAO,EAAE,SAAS,EAAE,MAAM,YAAY,CAAC;AAUvC,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,CAAC,OAAO,CACN,OAAO,CAAC,CAAC,OAAO,CAAC,CACjB,MAAM,CAAC,CAAC,MAAM,CAAC,CACf,OAAO,CAAC,CAAC,CAAC,OAAO,IAAI,IAAI,CAAC,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CACtD,QAAQ,CAAC,CAAC,QAAQ,CAAC,CACnB,QAAQ,CAAC,CAAC,QAAQ,CAAC,CAEnB;MAAA,CAAC,GAAG,CAAC,KAAK,CAAC,CAAC,EAAE,MAAM,EAAE,MAAM,EAAE,CAAC,CAAC,kBAAkB,CAAC,IAAI,EAAE,KAAK,CAAC,GAAG,EAAE,GAAG,CACzE;IAAA,EAAE,OAAO,CAAC,CACX,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,UAAU,CAAC","sourcesContent":["import { useEffect, useState } from 'react';\n\nimport { useI18n } from '@pega/cosmos-react-core';\nimport type { PopoverProps } from '@pega/cosmos-react-core';\n\nimport Popover from './Popover';\nimport { mockQuery } from './mockData';\nimport type { 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/jsx/dnd/StandardDragDropList/Popover.d.ts

@@ -1,14 +0,0 @@
-import type { ReactNode } from 'react';
-import type { PopoverProps as CorePopoverProps } from '@pega/cosmos-react-core';
-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) => import("react").JSX.Element;
-export default Popover;
-//# sourceMappingURL=Popover.d.ts.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"Popover.d.ts","sourceRoot":"","sources":["../../../src/dnd/StandardDragDropList/Popover.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAoBvC,OAAO,KAAK,EAAE,YAAY,IAAI,gBAAgB,EAAE,MAAM,yBAAyB,CAAC;AAEhF,KAAK,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,gCAyDd,CAAC;AAEF,eAAe,OAAO,CAAC"}

package/jsx/dnd/StandardDragDropList/Popover.jsx

@@ -1,51 +0,0 @@
-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 = (<Text variant='h2' id={headingId}>
-        {displayHeading ? heading : <VisuallyHiddenText>{heading}</VisuallyHiddenText>}
-      </Text>);
-        return displayHeading ? <CardHeader>{h2}</CardHeader> : h2;
-    }, [loading, heading, headingId, displayHeading]);
-    return (<Flex role='dialog' aria-labelledby={headingId} container={{ direction: 'column' }} as={StyledPopover} target={target} arrow ref={ref}>
-      {header}
-
-      <Flex item={{ grow: 1 }} as={StyledContent}>
-        {!loading && children}
-      </Flex>
-
-      {!loading && (<CardFooter container={{ justify: 'between' }}>
-          <Button autoFocus onClick={onCancel}>
-            {t('cancel')}
-          </Button>
-          <Button variant='primary' onClick={onSubmit}>
-            {t('submit')}
-          </Button>
-        </CardFooter>)}
-
-      {loading && <Progress placement='local' message={t('loading')}/>}
-    </Flex>);
-};
-export default Popover;
-//# sourceMappingURL=Popover.jsx.map

package/jsx/dnd/StandardDragDropList/Popover.jsx.map

@@ -1 +0,0 @@
-{"version":3,"file":"Popover.jsx","sourceRoot":"","sources":["../../../src/dnd/StandardDragDropList/Popover.tsx"],"names":[],"mappings":"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","sourcesContent":["import { useRef, useEffect, useMemo } from 'react';\nimport type { ReactNode } from 'react';\nimport styled from 'styled-components';\n\nimport {\n  Popover as CorePopover,\n  Flex,\n  Button,\n  Text,\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';\nimport type { PopoverProps as CorePopoverProps } 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/jsx/dnd/StandardDragDropList/SelectionMenu.d.ts

@@ -1,16 +0,0 @@
-/// <reference types="react" />
-import type { PopoverProps } from '@pega/cosmos-react-core';
-import type { MultiSelectInputProps } from '@pega/cosmos-react-core/lib/components/ComboBox/MultiSelectInput/MultiSelectInput.types';
-import type { 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) => import("react").JSX.Element;
-export default SelectionMenu;
-//# sourceMappingURL=SelectionMenu.d.ts.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"SelectionMenu.d.ts","sourceRoot":"","sources":["../../../src/dnd/StandardDragDropList/SelectionMenu.tsx"],"names":[],"mappings":";AAYA,OAAO,KAAK,EAAiB,YAAY,EAAE,MAAM,yBAAyB,CAAC;AAE3E,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,yFAAyF,CAAC;AAGrI,OAAO,KAAK,EAAE,WAAW,EAAE,SAAS,EAAE,MAAM,YAAY,CAAC;AAGzD,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,gCAwI7F,CAAC;AAEF,eAAe,aAAa,CAAC"}

package/jsx/dnd/StandardDragDropList/SelectionMenu.jsx

@@ -1,104 +0,0 @@
-import { useCallback, useState } from 'react';
-import styled, { css } from 'styled-components';
-import { defaultThemeProp, Flex, Menu, menuHelpers, useElement, useI18n } from '@pega/cosmos-react-core';
-import MultiSelectInput from '@pega/cosmos-react-core/lib/components/ComboBox/MultiSelectInput/MultiSelectInput';
-import { mockQuery } from './mockData';
-import Popover from './Popover';
-const StyledSelectionMenu = styled(Menu)(({ theme }) => {
-    return css `
-    margin-inline: calc(-2 * ${theme.base.spacing});
-  `;
-});
-StyledSelectionMenu.defaultProps = defaultThemeProp;
-const rootMenuItems = [
-    { id: 'fields', primary: 'Fields', items: [] },
-    { id: 'views', primary: 'Views', items: [] }
-];
-const SelectionMenu = ({ target, constraint, onCancel: onClose, onSubmit }) => {
-    const t = useI18n();
-    const [loading, setLoading] = useState(false);
-    const [filterValue, setFilterValue] = useState('');
-    const [inputEl, setInputEl] = useElement(null);
-    const [menuItems, setMenuItems] = useState(() => {
-        if (constraint?.types) {
-            const constrainedTypes = [];
-            if (constraint.types.includes('Field')) {
-                constrainedTypes.push(rootMenuItems[0]);
-            }
-            if (constraint.types.includes('View')) {
-                constrainedTypes.push(rootMenuItems[1]);
-            }
-            return constrainedTypes;
-        }
-        return rootMenuItems;
-    });
-    const [selected, setSelected] = useState(() => []);
-    const onItemExpand = useCallback(async (id) => {
-        const expandedItem = menuHelpers.getItem(menuItems, id);
-        if (!expandedItem || (expandedItem.items && expandedItem.items.length > 0)) {
-            return;
-        }
-        setLoading(true);
-        const subItems = await mockQuery({
-            type: id === 'fields' ? 'Field' : 'View',
-            delay: 1000
-        });
-        const newMenuItems = menuHelpers.mapItem(menuItems, id, item => {
-            return {
-                ...item,
-                items: subItems.map(subItem => ({
-                    id: subItem.id,
-                    primary: subItem.label,
-                    selected: !!selected.find(s => s.id === subItem.id)
-                }))
-            };
-        });
-        setMenuItems(newMenuItems);
-        setLoading(false);
-    }, [menuItems, selected]);
-    const onFilter = useCallback(async (e) => {
-        const val = e.currentTarget.value;
-        setFilterValue(val);
-        if (val) {
-            setLoading(true);
-            setMenuItems([]);
-            const matchedItems = await mockQuery({
-                filter: val,
-                delay: 1000
-            });
-            setMenuItems(matchedItems.map(matchedItem => {
-                return {
-                    id: matchedItem.id,
-                    primary: matchedItem.label,
-                    secondary: [matchedItem.subType ?? matchedItem.type],
-                    selected: !!selected.find(s => s.id === matchedItem.id)
-                };
-            }));
-            setLoading(false);
-            return;
-        }
-        setMenuItems(rootMenuItems);
-    }, []);
-    const onItemClick = useCallback((id) => {
-        setSelected(cur => {
-            if (cur.find(s => s.id === id)) {
-                return cur.filter(sel => sel.id !== id);
-            }
-            return [
-                ...cur,
-                { id, text: menuHelpers.getItem(menuItems, id).primary }
-            ];
-        });
-        setMenuItems(cur => menuHelpers.toggleSelected(cur, id));
-    }, [menuItems]);
-    return (<Popover target={target} heading='Content selection' onCancel={onClose} onSubmit={() => {
-            onSubmit(selected);
-        }}>
-      <Flex container={{ direction: 'column', gap: 2, pad: [1, 0] }}>
-        <MultiSelectInput ref={setInputEl} placeholder={t('search_placeholder_default')} value={filterValue} selected={selected} onChange={onFilter} onRemove={onItemClick}/>
-        <StyledSelectionMenu focusControlEl={inputEl ?? undefined} mode='multi-select' items={menuItems} scrollAt={10} loading={loading} onItemClick={onItemClick} onItemExpand={onItemExpand}/>
-      </Flex>
-    </Popover>);
-};
-export default SelectionMenu;
-//# sourceMappingURL=SelectionMenu.jsx.map

package/jsx/dnd/StandardDragDropList/SelectionMenu.jsx.map

@@ -1 +0,0 @@
-{"version":3,"file":"SelectionMenu.jsx","sourceRoot":"","sources":["../../../src/dnd/StandardDragDropList/SelectionMenu.tsx"],"names":[],"mappings":"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","sourcesContent":["import { useCallback, useState } from 'react';\nimport type { ChangeEvent } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport {\n  defaultThemeProp,\n  Flex,\n  Menu,\n  menuHelpers,\n  useElement,\n  useI18n\n} from '@pega/cosmos-react-core';\nimport type { MenuItemProps, PopoverProps } from '@pega/cosmos-react-core';\nimport MultiSelectInput from '@pega/cosmos-react-core/lib/components/ComboBox/MultiSelectInput/MultiSelectInput';\nimport type { MultiSelectInputProps } from '@pega/cosmos-react-core/lib/components/ComboBox/MultiSelectInput/MultiSelectInput.types';\n\nimport { mockQuery } from './mockData';\nimport type { ContentType, FieldType } from './mockData';\nimport Popover from './Popover';\n\nexport interface SelectionMenuProps {\n  target: NonNullable<PopoverProps['target']>;\n  constraint?: {\n    types?: ContentType[];\n    subTypes?: FieldType[];\n  };\n  onCancel: () => void;\n  onSubmit: (selected: NonNullable<MultiSelectInputProps['selected']>) => void;\n}\n\nconst StyledSelectionMenu: typeof Menu = styled(Menu)(({ theme }) => {\n  return css`\n    margin-inline: calc(-2 * ${theme.base.spacing});\n  `;\n});\n\nStyledSelectionMenu.defaultProps = defaultThemeProp;\n\nconst rootMenuItems: MenuItemProps[] = [\n  { id: 'fields', primary: 'Fields', items: [] },\n  { id: 'views', primary: 'Views', items: [] }\n];\n\nconst SelectionMenu = ({ target, constraint, onCancel: onClose, onSubmit }: SelectionMenuProps) => {\n  const t = useI18n();\n  const [loading, setLoading] = useState(false);\n  const [filterValue, setFilterValue] = useState('');\n  const [inputEl, setInputEl] = useElement<HTMLElement>(null);\n\n  const [menuItems, setMenuItems] = useState<MenuItemProps[]>(() => {\n    if (constraint?.types) {\n      const constrainedTypes = [];\n      if (constraint.types.includes('Field')) {\n        constrainedTypes.push(rootMenuItems[0]);\n      }\n      if (constraint.types.includes('View')) {\n        constrainedTypes.push(rootMenuItems[1]);\n      }\n\n      return constrainedTypes;\n    }\n\n    return rootMenuItems;\n  });\n\n  const [selected, setSelected] = useState<NonNullable<MultiSelectInputProps['selected']>>(\n    () => []\n  );\n\n  const onItemExpand = useCallback(\n    async (id: MenuItemProps['id']) => {\n      const expandedItem = menuHelpers.getItem(menuItems, id);\n      if (!expandedItem || (expandedItem.items && expandedItem.items.length > 0)) {\n        return;\n      }\n\n      setLoading(true);\n\n      const subItems = await mockQuery({\n        type: id === 'fields' ? 'Field' : 'View',\n        delay: 1000\n      });\n\n      const newMenuItems = menuHelpers.mapItem(menuItems, id, item => {\n        return {\n          ...item,\n          items: subItems.map(subItem => ({\n            id: subItem.id,\n            primary: subItem.label,\n            selected: !!selected.find(s => s.id === subItem.id)\n          }))\n        };\n      });\n\n      setMenuItems(newMenuItems as MenuItemProps[]);\n      setLoading(false);\n    },\n    [menuItems, selected]\n  );\n\n  const onFilter = useCallback(async (e: ChangeEvent<HTMLInputElement>) => {\n    const val = e.currentTarget.value;\n    setFilterValue(val);\n\n    if (val) {\n      setLoading(true);\n      setMenuItems([]);\n\n      const matchedItems = await mockQuery({\n        filter: val,\n        delay: 1000\n      });\n\n      setMenuItems(\n        matchedItems.map(matchedItem => {\n          return {\n            id: matchedItem.id,\n            primary: matchedItem.label,\n            secondary: [matchedItem.subType ?? matchedItem.type],\n            selected: !!selected.find(s => s.id === matchedItem.id)\n          };\n        })\n      );\n\n      setLoading(false);\n      return;\n    }\n\n    setMenuItems(rootMenuItems);\n  }, []);\n\n  const onItemClick = useCallback(\n    (id: MenuItemProps['id']) => {\n      setSelected(cur => {\n        if (cur.find(s => s.id === id)) {\n          return cur.filter(sel => sel.id !== id);\n        }\n\n        return [\n          ...cur,\n          { id, text: (menuHelpers.getItem(menuItems, id) as MenuItemProps).primary }\n        ];\n      });\n\n      setMenuItems(cur => menuHelpers.toggleSelected(cur, id) as MenuItemProps[]);\n    },\n    [menuItems]\n  );\n\n  return (\n    <Popover\n      target={target}\n      heading='Content selection'\n      onCancel={onClose}\n      onSubmit={() => {\n        onSubmit(selected);\n      }}\n    >\n      <Flex container={{ direction: 'column', gap: 2, pad: [1, 0] }}>\n        <MultiSelectInput\n          ref={setInputEl}\n          placeholder={t('search_placeholder_default')}\n          value={filterValue}\n          selected={selected}\n          onChange={onFilter}\n          onRemove={onItemClick}\n        />\n        <StyledSelectionMenu\n          focusControlEl={inputEl ?? undefined}\n          mode='multi-select'\n          items={menuItems}\n          scrollAt={10}\n          loading={loading}\n          onItemClick={onItemClick}\n          onItemExpand={onItemExpand}\n        />\n      </Flex>\n    </Popover>\n  );\n};\n\nexport default SelectionMenu;\n"]}

package/jsx/dnd/StandardDragDropList/StandardDragDropList.stories.d.ts

@@ -1,5 +0,0 @@
-import type { StoryFn } from '@storybook/react';
-declare const _default: import("@storybook/types").ComponentAnnotations<import("@storybook/react/dist/types-0a347bb9").R, import("@storybook/types").Args>;
-export default _default;
-export declare const StandardDragDropListDemo: StoryFn;
-//# sourceMappingURL=StandardDragDropList.stories.d.ts.map

package/jsx/dnd/StandardDragDropList/StandardDragDropList.stories.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"StandardDragDropList.stories.d.ts","sourceRoot":"","sources":["../../../src/dnd/StandardDragDropList/StandardDragDropList.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAQ,OAAO,EAAE,MAAM,kBAAkB,CAAC;;AAQtD,wBAGU;AAEV,eAAO,MAAM,wBAAwB,EAAE,OAWtC,CAAC"}

package/jsx/dnd/StandardDragDropList/StandardDragDropList.stories.jsx

@@ -1,15 +0,0 @@
-import { StandardDragDropList } from '@pega/cosmos-react-dnd';
-import { Flex } from '@pega/cosmos-react-core';
-import StandardListDemoComp from './Demo';
-import { mockFields, mockViews, mockGroups } from './mockData';
-export default {
-    title: 'DnD/StandardDragDropList',
-    component: StandardDragDropList
-};
-export const StandardDragDropListDemo = () => {
-    return (<Flex container={{ direction: 'column', gap: 2 }}>
-      <StandardListDemoComp items={[...mockFields.slice(0, 3), ...mockViews.slice(0, 2), mockGroups[0]]}/>
-      <StandardListDemoComp items={[...mockFields.slice(3, 6), ...mockViews.slice(2, 4), mockGroups[1], mockGroups[2]]}/>
-    </Flex>);
-};
-//# sourceMappingURL=StandardDragDropList.stories.jsx.map

package/jsx/dnd/StandardDragDropList/StandardDragDropList.stories.jsx.map

@@ -1 +0,0 @@
-{"version":3,"file":"StandardDragDropList.stories.jsx","sourceRoot":"","sources":["../../../src/dnd/StandardDragDropList/StandardDragDropList.stories.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,oBAAoB,EAAE,MAAM,wBAAwB,CAAC;AAC9D,OAAO,EAAE,IAAI,EAAE,MAAM,yBAAyB,CAAC;AAE/C,OAAO,oBAAoB,MAAM,QAAQ,CAAC;AAC1C,OAAO,EAAE,UAAU,EAAE,SAAS,EAAE,UAAU,EAAE,MAAM,YAAY,CAAC;AAE/D,eAAe;IACb,KAAK,EAAE,0BAA0B;IACjC,SAAS,EAAE,oBAAoB;CACxB,CAAC;AAEV,MAAM,CAAC,MAAM,wBAAwB,GAAY,GAAG,EAAE;IACpD,OAAO,CACL,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC,EAAE,SAAS,EAAE,QAAQ,EAAE,GAAG,EAAE,CAAC,EAAE,CAAC,CAC/C;MAAA,CAAC,oBAAoB,CACnB,KAAK,CAAC,CAAC,CAAC,GAAG,UAAU,CAAC,KAAK,CAAC,CAAC,EAAE,CAAC,CAAC,EAAE,GAAG,SAAS,CAAC,KAAK,CAAC,CAAC,EAAE,CAAC,CAAC,EAAE,UAAU,CAAC,CAAC,CAAC,CAAC,CAAC,EAE9E;MAAA,CAAC,oBAAoB,CACnB,KAAK,CAAC,CAAC,CAAC,GAAG,UAAU,CAAC,KAAK,CAAC,CAAC,EAAE,CAAC,CAAC,EAAE,GAAG,SAAS,CAAC,KAAK,CAAC,CAAC,EAAE,CAAC,CAAC,EAAE,UAAU,CAAC,CAAC,CAAC,EAAE,UAAU,CAAC,CAAC,CAAC,CAAC,CAAC,EAE/F;IAAA,EAAE,IAAI,CAAC,CACR,CAAC;AACJ,CAAC,CAAC","sourcesContent":["import type { Meta, StoryFn } from '@storybook/react';\n\nimport { StandardDragDropList } from '@pega/cosmos-react-dnd';\nimport { Flex } from '@pega/cosmos-react-core';\n\nimport StandardListDemoComp from './Demo';\nimport { mockFields, mockViews, mockGroups } from './mockData';\n\nexport default {\n  title: 'DnD/StandardDragDropList',\n  component: StandardDragDropList\n} as Meta;\n\nexport const StandardDragDropListDemo: StoryFn = () => {\n  return (\n    <Flex container={{ direction: 'column', gap: 2 }}>\n      <StandardListDemoComp\n        items={[...mockFields.slice(0, 3), ...mockViews.slice(0, 2), mockGroups[0]]}\n      />\n      <StandardListDemoComp\n        items={[...mockFields.slice(3, 6), ...mockViews.slice(2, 4), mockGroups[1], mockGroups[2]]}\n      />\n    </Flex>\n  );\n};\n"]}

package/jsx/dnd/StandardDragDropList/mockData.d.ts

@@ -1,26 +0,0 @@
-export type ContentType = 'Field' | 'View' | 'Group';
-export type FieldType = (typeof fieldTypes)[number];
-export interface MockRawItem {
-    id: string;
-    label: string;
-    type: ContentType;
-    subType?: FieldType;
-    items?: MockRawItem[];
-}
-export interface MockQueryParams {
-    id?: MockRawItem['id'] | MockRawItem['id'][];
-    filter?: string;
-    type?: ContentType;
-    subType?: FieldType;
-    limit?: number;
-    offset?: number;
-    delay?: number;
-}
-declare const fieldTypes: readonly ["Text (single line)", "Text (paragraph)", "Integer", "Decimal", "Currency", "Boolean", "Date & time", "Date only", "Time only", "Email", "Phone", "URL", "Picklist"];
-export declare const contentTypes: readonly ["Text (single line)", "Text (paragraph)", "Integer", "Decimal", "Currency", "Boolean", "Date & time", "Date only", "Time only", "Email", "Phone", "URL", "Picklist", "View", "Group"];
-export declare const mockFields: MockRawItem[];
-export declare const mockViews: MockRawItem[];
-export declare const mockGroups: MockRawItem[];
-export declare const mockQuery: ({ id, filter, type, subType, limit, offset, delay }?: MockQueryParams) => Promise<MockRawItem[]>;
-export {};
-//# sourceMappingURL=mockData.d.ts.map

package/jsx/dnd/StandardDragDropList/mockData.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"mockData.d.ts","sourceRoot":"","sources":["../../../src/dnd/StandardDragDropList/mockData.ts"],"names":[],"mappings":"AAEA,MAAM,MAAM,WAAW,GAAG,OAAO,GAAG,MAAM,GAAG,OAAO,CAAC;AACrD,MAAM,MAAM,SAAS,GAAG,CAAC,OAAO,UAAU,CAAC,CAAC,MAAM,CAAC,CAAC;AAGpD,MAAM,WAAW,WAAW;IAC1B,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,EAAE,WAAW,CAAC;IAClB,OAAO,CAAC,EAAE,SAAS,CAAC;IACpB,KAAK,CAAC,EAAE,WAAW,EAAE,CAAC;CACvB;AAGD,MAAM,WAAW,eAAe;IAC9B,EAAE,CAAC,EAAE,WAAW,CAAC,IAAI,CAAC,GAAG,WAAW,CAAC,IAAI,CAAC,EAAE,CAAC;IAC7C,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,IAAI,CAAC,EAAE,WAAW,CAAC;IACnB,OAAO,CAAC,EAAE,SAAS,CAAC;IACpB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAQD,QAAA,MAAM,UAAU,gLAcN,CAAC;AAEX,eAAO,MAAM,YAAY,iMAA4C,CAAC;AAEtE,eAAO,MAAM,UAAU,EAAE,WAAW,EAOlC,CAAC;AAEH,eAAO,MAAM,SAAS,EAAE,WAAW,EAMjC,CAAC;AAEH,eAAO,MAAM,UAAU,EAAE,WAAW,EAOlC,CAAC;AAGH,eAAO,MAAM,SAAS,yDAQnB,eAAe,KAAQ,QAAQ,WAAW,EAAE,CAiC9C,CAAC"}