npm - @pega/cosmos-react-demos - Versions diffs - 4.0.0-dev.5.0 → 4.0.0-dev.6.0 - Mend

@pega/cosmos-react-demos 4.0.0-dev.5.0 → 4.0.0-dev.6.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (81) hide show

package/jsx/core/Dialog/Dialog.mocks.jsx ADDED Viewed

@@ -0,0 +1,136 @@
+import { useEffect, useReducer, useState } from 'react';
+import { ComboBox, createUID, Flex, FormDialog, Input } from '@pega/cosmos-react-core';
+const errorText = 'Cannot be blank';
+const categories = Array.from({ length: 5 }, (_, i) => `Category ${i + 1}`);
+const initialItems = Array.from({ length: 3 }, (_, i) => {
+    return {
+        id: createUID(),
+        name: `Editable item ${i + 1}`,
+        category: categories[i]
+    };
+});
+const itemReducer = (items, payload) => {
+    switch (payload.type) {
+        case 'add': {
+            return [...items, { ...payload.item, id: createUID() }];
+        }
+        case 'edit': {
+            return items.map(item => {
+                return item.id === payload.item.id
+                    ? { ...item, name: payload.item.name, category: payload.item.category }
+                    : item;
+            });
+        }
+        case 'remove': {
+            const itemIndex = items.findIndex(item => item.id === payload.item.id);
+            if (itemIndex === -1)
+                return items;
+            items.splice(itemIndex, 1);
+            return [...items];
+        }
+        default: {
+            return items;
+        }
+    }
+};
+const progressStates = {
+    loading: 'Loading...',
+    submitting: 'Submitting...'
+};
+export const useMockItems = () => {
+    return useReducer(itemReducer, undefined, () => initialItems);
+};
+export const ItemDialog = ({ target, item: itemProp, dispatch, onComplete }) => {
+    const [nameField, setNameField] = useState(() => {
+        return {
+            value: itemProp?.name ?? null,
+            error: null,
+            errorOnPriorBlur: false
+        };
+    });
+    const [categoryField, setCategoryField] = useState(() => {
+        return {
+            value: itemProp?.category ?? null,
+            error: null
+        };
+    });
+    const [progress, setProgress] = useState(progressStates.loading);
+    useEffect(() => {
+        let timerId;
+        if (progress === progressStates.loading) {
+            timerId = window.setTimeout(() => {
+                setProgress(false);
+            }, 1000);
+        }
+        else if (progress === progressStates.submitting) {
+            timerId = window.setTimeout(() => {
+                setProgress(false);
+                dispatch({ name: nameField.value, category: categoryField.value });
+                onComplete();
+            }, 2000);
+        }
+        return () => {
+            window.clearTimeout(timerId);
+        };
+    }, [progress]);
+    return (<FormDialog target={target} heading={`${itemProp ? 'Edit' : 'Add'} item`} progress={progress} onCancel={{
+            handler: () => {
+                setProgress(false);
+                onComplete();
+            }
+        }} onSubmit={{
+            disabled: !!progress || [nameField, categoryField].some(field => !field.value || field.error),
+            handler: () => {
+                setProgress(progressStates.submitting);
+            }
+        }}>
+      {(!progress || progress !== progressStates.loading) && (<Flex container={{ direction: 'column', gap: 2 }}>
+          <Input required label='Name' value={nameField.value ?? ''} onChange={(e) => {
+                setNameField(cur => ({
+                    ...cur,
+                    value: e.target.value,
+                    error: !e.target.value && cur.errorOnPriorBlur ? errorText : null
+                }));
+            }} onBlur={(e) => {
+                if (!e.target.value) {
+                    setNameField(cur => ({
+                        ...cur,
+                        error: errorText,
+                        errorOnPriorBlur: true
+                    }));
+                }
+                else if (nameField.errorOnPriorBlur) {
+                    setNameField(cur => ({ ...cur, errorOnPriorBlur: false }));
+                }
+            }} status={nameField.error ? 'error' : undefined} info={nameField.error}/>
+          <ComboBox required label='Category' selected={categoryField.value
+                ? {
+                    items: {
+                        id: categoryField.value,
+                        text: categoryField.value
+                    }
+                }
+                : undefined} menu={{
+                mode: 'single-select',
+                onItemClick: category => {
+                    setCategoryField({
+                        value: category,
+                        error: null
+                    });
+                },
+                items: categories.map(category => {
+                    return {
+                        id: category,
+                        primary: category,
+                        selected: category === categoryField.value
+                    };
+                })
+            }} onBlur={selected => {
+                if (!selected) {
+                    setCategoryField(cur => ({ ...cur, error: errorText }));
+                }
+            }} status={categoryField.error ? 'error' : undefined} info={categoryField.error}/>
+        </Flex>)}
+    </FormDialog>);
+};
+//# sourceMappingURL=Dialog.mocks.jsx.map

package/jsx/core/Dialog/Dialog.mocks.jsx.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"Dialog.mocks.jsx","sourceRoot":"","sources":["../../../src/core/Dialog/Dialog.mocks.tsx"],"names":[],"mappings":"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","sourcesContent":["import { ChangeEvent, FocusEvent, useEffect, useReducer, useState } from 'react';\n\nimport {\n ComboBox,\n createUID,\n Flex,\n FormDialog,\n FormDialogProps,\n Input\n} from '@pega/cosmos-react-core';\n\nexport type MockCategory = `Category ${number}`;\n\nexport interface MockItem {\n readonly id: string;\n name: string;\n category: MockCategory;\n}\n\nexport type MockReducerPayload =\n | {\n type: 'add';\n item: Pick<MockItem, 'name' | 'category'>;\n }\n | {\n type: 'edit';\n item: MockItem;\n }\n | {\n type: 'remove';\n item: Pick<MockItem, 'id'>;\n };\n\nexport interface MockItemDialogProps extends Pick<FormDialogProps, 'target'> {\n item: MockItem | null;\n dispatch: (fieldValues: Pick<MockItem, 'name' | 'category'>) => void;\n onComplete: () => void;\n}\n\nconst errorText = 'Cannot be blank';\n\nconst categories = Array.from({ length: 5 }, (_, i): MockCategory => `Category ${i + 1}`);\n\nconst initialItems: MockItem[] = Array.from({ length: 3 }, (_, i) => {\n return {\n id: createUID(),\n name: `Editable item ${i + 1}`,\n category: categories[i]\n };\n});\n\nconst itemReducer = (items: MockItem[], payload: MockReducerPayload) => {\n switch (payload.type) {\n case 'add': {\n return [...items, { ...payload.item, id: createUID() }];\n }\n\n case 'edit': {\n return items.map(item => {\n return item.id === payload.item.id\n ? { ...item, name: payload.item.name, category: payload.item.category }\n : item;\n });\n }\n\n case 'remove': {\n const itemIndex = items.findIndex(item => item.id === payload.item.id);\n if (itemIndex === -1) return items;\n items.splice(itemIndex, 1);\n return [...items];\n }\n\n default: {\n return items;\n }\n }\n};\n\nconst progressStates = {\n loading: 'Loading...',\n submitting: 'Submitting...'\n} as const;\n\nexport const useMockItems = () => {\n return useReducer(itemReducer, undefined, () => initialItems);\n};\n\nexport const ItemDialog = ({\n target,\n item: itemProp,\n dispatch,\n onComplete\n}: MockItemDialogProps) => {\n const [nameField, setNameField] = useState<{\n value: string | null;\n error: typeof errorText | null;\n errorOnPriorBlur: boolean;\n }>(() => {\n return {\n value: itemProp?.name ?? null,\n error: null,\n errorOnPriorBlur: false\n };\n });\n\n const [categoryField, setCategoryField] = useState<{\n value: MockCategory | null;\n error: typeof errorText | null;\n }>(() => {\n return {\n value: itemProp?.category ?? null,\n error: null\n };\n });\n\n const [progress, setProgress] = useState<\n typeof progressStates[keyof typeof progressStates] | false\n >(progressStates.loading);\n\n useEffect(() => {\n let timerId: number;\n\n if (progress === progressStates.loading) {\n timerId = window.setTimeout(() => {\n setProgress(false);\n }, 1000);\n } else if (progress === progressStates.submitting) {\n timerId = window.setTimeout(() => {\n setProgress(false);\n dispatch({ name: nameField.value!, category: categoryField.value! });\n onComplete();\n }, 2000);\n }\n\n return () => {\n window.clearTimeout(timerId);\n };\n }, [progress]);\n\n return (\n <FormDialog\n target={target}\n heading={`${itemProp ? 'Edit' : 'Add'} item`}\n progress={progress}\n onCancel={{\n handler: () => {\n setProgress(false);\n onComplete();\n }\n }}\n onSubmit={{\n disabled:\n !!progress || [nameField, categoryField].some(field => !field.value || field.error),\n handler: () => {\n setProgress(progressStates.submitting);\n }\n }}\n >\n {(!progress || progress !== progressStates.loading) && (\n <Flex container={{ direction: 'column', gap: 2 }}>\n <Input\n required\n label='Name'\n value={nameField.value ?? ''}\n onChange={(e: ChangeEvent<HTMLInputElement>) => {\n setNameField(cur => ({\n ...cur,\n value: e.target.value,\n error: !e.target.value && cur.errorOnPriorBlur ? errorText : null\n }));\n }}\n onBlur={(e: FocusEvent<HTMLInputElement>) => {\n if (!e.target.value) {\n setNameField(cur => ({\n ...cur,\n error: errorText,\n errorOnPriorBlur: true\n }));\n } else if (nameField.errorOnPriorBlur) {\n setNameField(cur => ({ ...cur, errorOnPriorBlur: false }));\n }\n }}\n status={nameField.error ? 'error' : undefined}\n info={nameField.error}\n />\n <ComboBox\n required\n label='Category'\n selected={\n categoryField.value\n ? {\n items: {\n id: categoryField.value,\n text: categoryField.value\n }\n }\n : undefined\n }\n menu={{\n mode: 'single-select',\n onItemClick: category => {\n setCategoryField({\n value: category as MockCategory,\n error: null\n });\n },\n items: categories.map(category => {\n return {\n id: category,\n primary: category,\n selected: category === categoryField.value\n };\n })\n }}\n onBlur={selected => {\n if (!selected) {\n setCategoryField(cur => ({ ...cur, error: errorText }));\n }\n }}\n status={categoryField.error ? 'error' : undefined}\n info={categoryField.error}\n />\n </Flex>\n )}\n </FormDialog>\n );\n};\n"]}

package/jsx/core/Dialog/Dialog.stories.d.ts CHANGED Viewed

@@ -1,6 +1,6 @@
 import { Meta, Story } from '@storybook/react';
 declare const _default: Meta<import("@storybook/react").Args>;
 export default _default;
-export declare const DialogDemo: Story;
+export declare const InfoDialogDemo: Story;
 export declare const FormDialogDemo: Story;
 //# sourceMappingURL=Dialog.stories.d.ts.map

package/jsx/core/Dialog/Dialog.stories.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Dialog.stories.d.ts","sourceRoot":"","sources":["../../../src/core/Dialog/Dialog.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,kBAAkB,CAAC;;~~AAsB~~/C,~~wBAGU~~;~~AAEV~~,eAAO,MAAM,~~UAAU~~,EAAE,~~KAYxB~~,CAAC;~~AAEF~~,eAAO,MAAM,cAAc,EAAE,~~KAuH5B~~,CAAC"}
1	+ {"version":3,"file":"Dialog.stories.d.ts","sourceRoot":"","sources":["../../../src/core/Dialog/Dialog.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,kBAAkB,CAAC;;AAiB/C,wBAEU;AAGV,eAAO,MAAM,cAAc,EAAE,KA+B5B,CAAC;AAGF,eAAO,MAAM,cAAc,EAAE,KA0E5B,CAAC"}

package/jsx/core/Dialog/Dialog.stories.jsx CHANGED Viewed

@@ -1,79 +1,88 @@
-import { useRef } from 'react';
-import { useState } from '@storybook/addons';
-import { Button, Card, CardContent, CardHeader, Dialog, Flex, Input, Option, Select, Status, SummaryItem, Text, useDialog } from '@pega/cosmos-react-core';
+import { useState } from 'react';
+import { Button, Flex, Text, useElement, InfoDialog, SummaryList } from '@pega/cosmos-react-core';
+import { FieldValueListDemo } from '../FieldValueList/FieldValueList.stories';
+import { ItemDialog, useMockItems } from './Dialog.mocks';
 export default {
-    title: 'Core/Dialog',
-    component: Dialog
+    title: 'Core/Dialog'
 };
-export const DialogDemo = () => {
-    const { target, events } = useDialog();
+export const InfoDialogDemo = () => {
+    const [target, setTarget] = useElement(null);
     return (<>
-      <Button variant='secondary' {...events}>
+      <Button variant='secondary' onClick={(e) => {
+            setTarget(e.currentTarget);
+        }}>
         Open dialog
       </Button>
-      <Dialog heading='My dialog' target={target}>
-        Hello Dialog
-      </Dialog>
+      {target && (<InfoDialog heading='General information' target={target} onDismiss={() => setTarget(null)}>
+          <Flex container={{ direction: 'column', gap: 2 }}>
+            <Text as='p'>
+              Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
+              incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
+              exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
+              dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
+              Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt
+              mollit anim id est laborum.
+            </Text>
+            <FieldValueListDemo name='Demo field' value='demo value'/>
+          </Flex>
+        </InfoDialog>)}
     </>);
 };
 export const FormDialogDemo = () => {
-    const editBadgeButton = useRef(null);
-    const editNameButton = useRef(null);
-    const timeoutRef = useRef();
-    const [info, setInfo] = useState({ name: 'James Gregory', badgeType: 'info', badgeText: 'info' });
-    const [name, setName] = useState(() => info.name);
-    const [badgeType, setBadgeType] = useState(() => info.badgeType);
-    const [badgeText, setBadgeText] = useState(() => info.badgeText);
-    const [dialogType, setDialogType] = useState('badge');
-    const { target, events, loading, setLoading } = useDialog();
-    const badgeTypes = ['info', 'pending', 'success', 'urgent', 'warn'];
-    const onOpen = (type) => {
-        setDialogType(type);
-    };
-    const onDialogSubmit = ({ close }) => {
-        setLoading(true);
-        timeoutRef.current = setTimeout(() => {
-            setInfo({ name, badgeText, badgeType });
-            setLoading(false);
-            close();
-            timeoutRef.current = undefined;
-        }, 1000);
-    };
-    const onDialogClose = () => {
-        if (timeoutRef.current) {
-            clearTimeout(timeoutRef.current);
-            setLoading(false);
-        }
-        setName(info.name);
-        setBadgeText(info.badgeText);
-        setBadgeType(info.badgeType);
-    };
-    return (<Card>
-      <CardHeader>
-        <Text variant='h1'>Edit these fields</Text>
-      </CardHeader>
-      <CardContent>
-        <Flex container={{ direction: 'column', gap: 1 }}>
-          <SummaryItem primary={<Text variant='h6'>Badge</Text>} secondary={<Status variant={info.badgeType}>{info.badgeText}</Status>} actions={<Button variant='simple' ref={editBadgeButton} onClick={() => onOpen('badge')} {...events}>
-                Edit
-              </Button>}/>
-          <SummaryItem primary={<Text variant='h6'>Name</Text>} secondary={<Text variant='primary'>{info.name}</Text>} actions={<Button variant='simple' ref={editNameButton} onClick={() => onOpen('name')} {...events}>
-                Edit
-              </Button>}/>
-        </Flex>
-        <Dialog target={target} heading={`Edit ${dialogType}`} placement='bottom-end' onSubmit={onDialogSubmit} onClose={onDialogClose} loading={loading}>
-          <Flex container={{ gap: 1, direction: 'column' }}>
-            {dialogType === 'badge' ? (<>
-                <Select label='Select a badge type' value={badgeType} onChange={e => setBadgeType(e.target.value)}>
-                  {badgeTypes.map(type => (<Option key={type}>{type}</Option>))}
-                </Select>
-                <Input type='text' label='Badge text' value={badgeText} onChange={(e) => setBadgeText(e.target.value)}/>
-              </>) : (<>
-                <Input type='text' label='Text value' value={name} onChange={(e) => setName(e.target.value)}/>
-              </>)}
-          </Flex>
-        </Dialog>
-      </CardContent>
-    </Card>);
+    const [dialogTarget, setDialogTarget] = useState(null);
+    const [editItem, setEditItem] = useState(null);
+    const [items, dispatch] = useMockItems();
+    return (<>
+      <SummaryList name='Editable items' icon='list' count={items.length} actions={[
+            {
+                id: 'Add',
+                text: 'Add',
+                icon: 'plus',
+                onClick: (_, e) => {
+                    setDialogTarget(e.currentTarget);
+                }
+            }
+        ]} items={items.map(({ id, name, category }) => {
+            return {
+                id,
+                primary: name,
+                secondary: <Text variant='secondary'>{category}</Text>,
+                actions: [
+                    {
+                        id: 'Edit',
+                        text: 'Edit',
+                        icon: 'pencil',
+                        onClick: (_, e, menuButton) => {
+                            if (menuButton)
+                                setDialogTarget(menuButton);
+                            setEditItem({
+                                id,
+                                name,
+                                category
+                            });
+                        }
+                    },
+                    {
+                        id: 'Remove',
+                        text: 'Remove',
+                        icon: 'trash',
+                        onClick: () => {
+                            dispatch({ type: 'remove', item: { id } });
+                        }
+                    }
+                ]
+            };
+        })}/>
+      {dialogTarget && (<ItemDialog target={dialogTarget} item={editItem} dispatch={fields => {
+                dispatch(editItem
+                    ? { type: 'edit', item: { id: editItem.id, ...fields } }
+                    : { type: 'add', item: { ...fields } });
+            }} onComplete={() => {
+                setDialogTarget(null);
+                setEditItem(null);
+            }}/>)}
+    </>);
 };
 //# sourceMappingURL=Dialog.stories.jsx.map

package/jsx/core/Dialog/Dialog.stories.jsx.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Dialog.stories.jsx","sourceRoot":"","sources":["../../../src/core/Dialog/Dialog.stories.tsx"],"names":[],"mappings":"AACA,OAAO,~~EAAe~~,~~MAAM~~,EAAE,MAAM,OAAO,CAAC;~~AAC5C,OAAO,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;~~AAE7C,OAAO,EACL,MAAM,EACN,IAAI,EACJ,~~WAAW~~,~~EACX~~,UAAU,EACV,~~MAAM~~,~~EACN~~,~~IAAI~~,~~EACJ~~,~~KAAK~~,~~EACL~~,~~MAAM~~,~~EACN~~,~~MAAM~~,~~EAEN~~,MAAM,~~EACN~~,~~WAAW~~,~~EACX~~,~~IAAI~~,~~EACJ~~,~~SAAS~~,~~EAEV~~,MAAM,~~yBAAyB~~,CAAC;~~AAEjC~~,eAAe;IACb,KAAK,EAAE,aAAa;~~IACpB~~,~~SAAS,EAAE,MAAM;CACV,~~CAAC;~~AAEV~~,MAAM,CAAC,MAAM,~~UAAU~~,GAAU,GAAG,EAAE;~~IACpC~~,MAAM,~~EAAE~~,MAAM,EAAE,~~MAAM~~,~~EAAE~~,GAAG,~~SAAS~~,~~EAAE~~,CAAC;~~IACvC~~,OAAO,CACL,EACE;MAAA,CAAC,MAAM,~~CAAC~~,OAAO,CAAC,WAAW,~~CAAC~~,~~IAAI~~,~~MAAM~~,CAAC,~~CACrC;;MACF~~,EAAE,~~MAAM,CACR~~;~~MAAA~~,CAAC,~~MAAM,~~CAAC,~~OAAO,~~CAAC,~~WAAW~~,CAAC,~~MAAM,~~CAAC,CAAC,~~MAAM,~~CAAC,~~CACzC~~;;MACF,EAAE,MAAM,~~CACV;IAAA~~,~~GAAG~~,~~CACJ~~,~~CAAC;AACJ~~,~~CAAC~~,CAAC~~;AAEF~~,~~MAAM~~,CAAC,~~MAAM~~,~~cAAc~~,~~GAAU~~,~~GAAG~~,~~EAAE;IACxC,~~MAAM,~~eAAe~~,~~GAAG~~,MAAM,CAAC,~~IAAI~~,CAAC,CAAC~~;IACrC~~,~~MAAM~~,~~cAAc~~,~~GAAG~~,~~MAAM~~,CAAC,IAAI,CAAC,CAAC~~;IACpC~~,~~MAAM,UAAU,GAAG,MAAM,EAAU,CAAC~~;~~IACpC~~,~~MAAM,~~CAAC,IAAI,~~EAAE~~,~~OAAO~~,CAAC,~~GAAG~~,~~QAAQ,CAI7B,~~EAAE,~~IAAI,EAAE,eAAe,EAAE,~~SAAS,EAAE,~~MAAM~~,EAAE,~~SAAS~~,EAAE,~~MAAM~~,EAAE,CAAC,~~CAAC~~;~~IACpE~~,~~MAAM,~~CAAC,IAAI,EAAE,~~OAAO,~~CAAC,GAAG,~~QAAQ~~,~~CAAC,GAAG,~~EAAE,~~CAAC,~~IAAI,~~CAAC,IAAI,CAAC,CAAC~~;~~IAClD~~,~~MAAM,~~CAAC,~~SAAS~~,~~EAAE,YAAY,~~CAAC,~~GAAG,QAAQ,CAAyB,GAAG,EAAE,CAAC,~~IAAI,CAAC,~~SAAS~~,CAAC,~~CAAC;IACzF~~,~~MAAM,~~CAAC,~~SAAS,EAAE,~~YAAY,~~CAAC~~,~~GAAG,QAAQ,CAAC,GAAG,~~EAAE,~~CAAC,~~IAAI,~~CAAC,SAAS,CAAC,CAAC~~;~~IACjE~~,~~MAAM~~,~~CAAC,~~UAAU,~~EAAE~~,~~aAAa~~,~~CAAC~~,GAAG,~~QAAQ~~,~~CAAmB~~,~~OAAO,~~CAAC,CAAC;~~IACxE~~,MAAM,~~EAAE~~,MAAM,~~EAAE~~,~~MAAM~~,~~EAAE,OAAO,EAAE,UAAU,EAAE,~~GAAG,~~SAAS,~~EAAE~~,CAAC~~;~~IAE5D~~,MAAM,~~UAAU,GAA6B,~~CAAC,~~MAAM~~,EAAE,~~SAAS~~,~~EAAE~~,~~SAAS~~,~~EAAE,~~QAAQ,~~EAAE~~,~~MAAM~~,CAAC,CAAC;~~IAE9F~~,MAAM,~~MAAM,GAAG,~~CAAC,~~IAAsB~~,EAAE,~~EAAE;QACxC~~,~~aAAa,~~CAAC,~~IAAI~~,~~CAAC~~,~~CAAC;IACtB~~,CAAC,CAAC;~~IAEF~~,MAAM,~~cAAc,GAA4B,~~CAAC,~~EAAE,~~KAAK,EAAE,~~EAAE~~,~~EAAE;QAC5D~~,~~UAAU~~,~~CAAC~~,~~IAAI~~,CAAC~~,CAAC~~;~~QACjB~~,~~UAAU,CAAC,~~OAAO,~~GAAG~~,~~UAAU~~,CAAC,~~GAAG~~,~~EAAE;YACnC~~,~~OAAO~~,CAAC,~~EAAE~~,IAAI,~~EAAE,SAAS,EAAE,SAAS,EAAE,~~CAAC,~~CAAC;YACxC~~,~~UAAU~~,~~CAAC,~~KAAK,CAAC,CAAC~~;YAClB~~,KAAK,~~EAAE,~~CAAC~~;YACR~~,~~UAAU~~,CAAC,OAAO,~~GAAG,SAAS,~~CAAC~~;QACjC~~,CAAC~~,EAAE,IAAI,CAAsB,CAAC~~;~~IAChC,CAAC,CAAC~~;~~IAEF~~,~~MAAM~~,~~aAAa~~,~~GAA2B,GAAG,EAAE~~;~~QACjD~~,IAAI,~~UAAU,CAAC,OAAO,~~EAAE~~;YACtB~~,~~YAAY,CAAC,UAAU,CAAC,OAAO,CAAC,CAAC~~;~~YACjC~~,~~UAAU~~,~~CAAC~~,~~KAAK,CAAC,CAAC~~;~~SACnB;QACD~~,OAAO,~~CAAC~~,~~IAAI,~~CAAC,~~IAAI,~~CAAC,~~CAAC;QACnB~~,~~YAAY,~~CAAC,~~IAAI~~,~~CAAC~~,~~SAAS~~,CAAC,CAAC~~;QAC7B~~,~~YAAY,~~CAAC,~~IAAI~~,CAAC,~~SAAS,~~CAAC~~,CAAC~~;~~IAC/B~~,CAAC~~,CAAC~~;~~IAEF~~,~~OAAO,CACL,~~CAAC,~~IAAI~~,~~CACH;MAAA~~,CAAC,~~UAAU,CACT;QAAA,~~CAAC,~~IAAI~~,CAAC,~~OAAO~~,~~CAAC~~,~~IAAI,~~CAAC,~~iBAAiB~~,EAAE,~~IAAI,CAC5C;MAAA,~~EAAE,~~UAAU,CACZ;MAAA,CAAC,WAAW,CACV;QAAA,CAAC,~~IAAI,~~CAAC,SAAS,CAAC,CAAC,~~EAAE,~~SAAS,EAAE,~~QAAQ,EAAE,~~GAAG,~~EAAE,~~CAAC,~~EAAE~~,CAAC,CAC/C~~;~~UAAA~~,~~CAAC,WAAW,CACV,~~OAAO,~~CAAC~~,~~CAAC,CAAC,IAAI,CAAC,~~OAAO,~~CAAC,IAAI,CAAC,KAAK,~~EAAE,IAAI,~~CAAC,CAAC,CACzC,~~SAAS,~~CAAC~~,CAAC,~~CAAC,MAAM,CAAC,OAAO,CAAC,CAAC,~~IAAI,CAAC,~~SAAS,CAAC,CAAC,CAAC,IAAI,CAAC,SAAS,CAAC,EAAE,MAAM,CAAC,CAAC,CACtE,~~OAAO,CAAC,~~CACN~~,CAAC,~~MAAM,CACL,OAAO,~~CAAC,QAAQ,~~CAChB,GAAG,~~CAAC,~~CAAC~~,~~eAAe~~,CAAC,~~CACrB,~~OAAO,~~CAAC~~,~~CAAC~~,~~GAAG,~~EAAE,~~CAAC,~~MAAM,~~CAAC,OAAO,CAAC,CAAC,CAC/B,~~IAAI,~~MAAM,CAAC,CAEX;;cACF,~~EAAE,MAAM,~~CAAC~~,~~CACV~~,~~EAEH~~;~~UAAA~~,~~CAAC,WAAW,CACV,~~OAAO,~~CAAC~~,CAAC,CAAC,~~IAAI~~,CAAC,~~OAAO~~,~~CAAC~~,~~IAAI~~,~~CAAC,IAAI,~~EAAE,IAAI,~~CAAC~~,~~CAAC~~,~~CACxC,SAAS,~~CAAC,~~CAAC~~,CAAC,~~IAAI,~~CAAC,~~OAAO~~,CAAC,~~SAAS,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,~~EAAE,IAAI,~~CAAC,CAAC,CACtD,OAAO,CAAC,CACN,CAAC,MAAM,CACL,OAAO,CAAC,~~QAAQ,~~CAChB,GAAG,~~CAAC,CAAC,~~cAAc,~~CAAC,~~CACpB~~,~~OAAO,CAAC,CAAC,GAAG,~~EAAE,~~CAAC~~,~~MAAM,CAAC,MAAM,CAAC,CAAC,CAC9B,~~IAAI,~~MAAM,CAAC,CAEX;;cACF,~~EAAE,~~MAAM~~,~~CAAC~~,~~CACV,EAEL;QAAA,~~EAAE,~~IAAI,CACN~~;~~QAAA~~,~~CAAC,MAAM,CACL,MAAM,CAAC,CAAC,MAAM,CAAC,CACf,~~OAAO,~~CAAC~~,~~CAAC~~,~~QAAQ,UAAU,~~EAAE,~~CAAC,CAC9B,SAAS,CAAC,YAAY,CACtB,~~QAAQ,CAAC,~~CAAC~~,~~cAAc~~,~~CAAC~~,~~CACzB~~,~~OAAO~~,~~CAAC,CAAC,aAAa,CAAC,CACvB,OAAO,CAAC,CAAC,OAAO,CAAC,CAEjB;UAAA,CAAC,~~IAAI,~~CAAC,SAAS,CAAC,CAAC,~~EAAE,~~GAAG,~~EAAE,~~CAAC,~~EAAE,~~SAAS,~~EAAE,~~QAAQ,~~EAAE,CAAC,~~CAC/C~~;~~YAAA~~,CAAC,~~UAAU~~,~~KAAK,OAAO,~~CAAC,CAAC,CAAC,~~CACxB~~,~~EACE;gBAAA,~~CAAC,~~MAAM~~,~~CACL~~,~~KAAK~~,CAAC,~~qBAAqB~~,~~CAC3B~~,~~KAAK~~,CAAC,CAAC,~~SAAS~~,CAAC,~~CACjB~~,~~QAAQ~~,CAAC,CAAC,~~CAAC~~,CAAC,~~EAAE~~,~~CAAC~~,~~YAAY,~~CAAC,CAAC,~~CAAC,~~MAAM,CAAC,~~KAA+B~~,~~CAAC~~,~~CAAC~~,~~CAEtE~~;~~kBAAA~~,CAAC,~~UAAU,~~CAAC,~~GAAG~~,~~CAAC,~~IAAI,~~CAAC,~~EAAE,~~CAAC,CACtB,CAAC,~~MAAM,~~CAAC~~,~~GAAG~~,~~CAAC~~,~~CAAC~~,~~IAAI~~,~~CAAC~~,~~CAAC~~,CAAC,~~IAAI~~,~~CAAC,~~EAAE,MAAM,~~CAAC~~,~~CACnC,CAAC,CACJ;gBAAA,~~EAAE~~,MAAM,CACR~~;~~gBAAA~~,CAAC,~~KAAK~~,~~CACJ~~,IAAI,~~CAAC~~,~~MAAM,CACX,~~KAAK,~~CAAC~~,~~YAAY~~,~~CAClB,KAAK,CAAC,CAAC,SAAS,CAAC,CACjB,QAAQ,CAAC,CAAC,CAAC,CAAgC,~~EAAE,EAAE,~~CAAC~~,~~YAAY,CAAC,CAAC,CAAC,~~MAAM,~~CAAC~~,~~KAAK~~,~~CAAC~~,CAAC~~,EAEjF~~;~~cAAA~~,~~GAAG,CACJ,~~CAAC,CAAC,~~CAAC,~~CACF,~~EACE;gBAAA~~,CAAC,~~KAAK,CACJ,IAAI,~~CAAC,~~MAAM~~,~~CACX~~,~~KAAK~~,CAAC,~~YAAY,CAClB,KAAK,CAAC,CAAC,~~IAAI,CAAC,~~CACZ,QAAQ,~~CAAC,~~CAAC~~,CAAC,~~CAAgC~~,~~EAAE,EAAE,~~CAAC,~~OAAO,~~CAAC,CAAC,CAAC,~~MAAM~~,~~CAAC~~,~~KAAK,CAAC,CAAC,EAE5E~~;~~cAAA~~,GAAG,CACJ,~~CACH;UAAA,EAAE,IAAI,CACR;QAAA,EAAE,MAAM,CACV;MAAA,EAAE,WAAW,CACf;IAAA,EAAE,IAAI,~~CAAC~~,CACR,CAAC~~;AACJ,CAAC,CAAC","sourcesContent":["import { Meta, Story } from '@storybook/react';\nimport { ~~ChangeEvent~~, ~~useRef~~ } from 'react';\~~nimport { useState } from '@storybook/addons';\~~n\nimport {\n Button,\n ~~Card,\n CardContent,\n CardHeader,\n Dialog,\n~~ Flex,\n ~~Input~~,\n ~~Option~~,\n ~~Select~~,\n ~~StatusProps~~,\n ~~Status,\n SummaryItem,\n Text,\n useDialog,\n DialogProps~~\n} from '@pega/cosmos-react-core';\n\nexport default {\n title: 'Core/Dialog'~~,\n component: Dialog~~\n} as Meta;\n\nexport const ~~DialogDemo~~: Story = () => {\n const { target, ~~events~~ } = ~~useDialog~~();\n return (\n <>\n <Button variant='secondary' {~~...events~~}>\n Open dialog\n </Button>\n <~~Dialog~~ heading='My ~~dialog~~' target={target}~~>\n Hello~~ ~~Dialog\n </Dialog>\n </>\n );\n};\n\nexport const FormDialogDemo: Story~~ = () => ~~{\n const editBadgeButton = useRef~~(null);\n ~~const~~ ~~editNameButton~~ = ~~useRef(null);\n const~~ ~~timeoutRef = useRef<number>();\n const [info~~, ~~setInfo]~~ = ~~useState~~<~~{\n name:~~ ~~string;\n badgeType: StatusProps[~~'~~variant~~'~~];\~~n ~~badgeText:~~ ~~string;\n }>({~~ ~~name:~~ ~~'James~~ ~~Gregory'~~, ~~badgeType:~~ ~~'info'~~, ~~badgeText:~~ ~~'info'~~ ~~});\~~n ~~const~~ ~~[name,~~ ~~setName]~~ = ~~useState(()~~ => ~~info~~.~~name);\n const~~ ~~[badgeType,~~ ~~setBadgeType]~~ = ~~useState<StatusProps['variant']>(()~~ => ~~info.badgeType);\~~n ~~const~~ ~~[badgeText,~~ ~~setBadgeText]~~ = ~~useState(()~~ => ~~info.badgeText);\n const~~ ~~[dialogType,~~ ~~setDialogType]~~ = ~~useState<'badge'~~ \| ~~'name'>('badge');\~~n ~~const~~ { ~~target,~~ ~~events,~~ ~~loading,~~ ~~setLoading~~ } = ~~useDialog();\~~n~~\n const~~ ~~badgeTypes:~~ ~~StatusProps['variant'][]~~ = ~~['info',~~ ~~'pending'~~, ~~'success',~~ ~~'urgent',~~ ~~'warn'];\n~~\n ~~const~~ ~~onOpen~~ = ~~(type:~~ '~~badge~~' \| '~~name'~~) ~~=> {~~\n ~~setDialogType(type~~);\n };\n\n const ~~onDialogSubmit~~: ~~DialogProps['onSubmit']~~ = (~~{ close }~~) => {\n ~~setLoading(true);\n timeoutRef.current~~ = ~~setTimeout(()~~ => ~~{\n setInfo({~~ ~~name,~~ ~~badgeText, badgeType });\n setLoading~~(~~false~~);\n ~~close();\n timeoutRef.current~~ ~~= undefined;\n }~~, ~~1000)~~ as ~~unknown~~ as ~~number~~;\n ~~};\n\n~~ const ~~onDialogClose:~~ ~~DialogProps['onClose'~~] = () ~~=> {~~\n if (~~timeoutRef.current) {~~\n ~~clearTimeout(timeoutRef.current);\~~n ~~setLoading(false);\n }~~\n ~~setName(info.~~name~~);\~~n ~~setBadgeText(info.badgeText);\~~n ~~setBadgeType(info~~.~~badgeType);\n~~ };\n\n ~~return (~~\n ~~<Card>\~~n ~~<CardHeader>\~~n ~~<Text~~ ~~variant=~~'h1'~~>Edit~~ ~~these~~ ~~fields</Text>\~~n ~~</CardHeader>\~~n ~~<CardContent>\~~n ~~<Flex container~~={{ ~~direction:~~ ~~'column'~~, ~~gap:~~ 1 ~~}}>\~~n ~~<SummaryItem~~\n primary~~={<Text~~ ~~variant='h6'>Badge</Text>}\~~n secondary={<~~Status~~ variant=~~{info.badgeType}~~>{~~info.badgeText~~}</~~Status>}\~~n actions={\n ~~<Button~~\n ~~variant=~~'~~simple~~'\n ~~ref={editBadgeButton}\~~n onClick={() => ~~onOpen~~(~~'badge'~~)}\n {~~...events}~~\n >\n ~~Edit~~\n ~~</Button>\~~n }\n ~~/>\~~n ~~<SummaryItem~~\n ~~primary={<Text~~ ~~variant=~~'h6'~~>Name</Text>}\~~n ~~secondary={<Text~~ ~~variant=~~'~~primary~~'~~>{info.name}</Text>}\~~n ~~actions={\n <Button\n~~ ~~variant=~~'~~simple~~'\n ~~ref={editNameButton}\n~~ onClick={() => ~~onOpen~~('~~name~~')}\n ~~{...events~~}\n ~~>\n Edit~~\n ~~</Button>\n~~ }\n ~~/>\~~n ~~</Flex>\n <Dialog~~\n ~~target={target}~~\n ~~heading=~~{~~`Edit~~ ~~${dialogType}`}~~\n ~~placement='bottom-end'~~\n ~~onSubmit~~={~~onDialogSubmit~~}\n ~~onClose~~={~~onDialogClose~~}\n ~~loading={loading}\n >\n <Flex~~ ~~container={{~~ ~~gap:~~ 1, ~~direction:~~ ~~'column'~~ ~~}}>\n {dialogType~~ ~~===~~ ~~'badge'~~ ? ~~(\n <>\n <Select\n label='Select~~ a ~~badge~~ ~~type'\~~n ~~value~~={~~badgeType}\n onChange={e~~ => ~~setBadgeType~~(~~e.target.value as StatusProps['variant'])}~~\n ~~>\n~~ {~~badgeTypes.map(~~type => ~~(\n <Option~~ ~~key=~~{~~type~~}~~>{type~~}~~</Option>\n ))}~~\n ~~</Select>\n <Input\n~~ type='~~text~~'~~\n label='Badge~~ ~~text'\n value={badgeText}\n onChange={(e~~: ~~ChangeEvent<HTMLInputElement>)~~ => ~~setBadgeText(e.target.value)~~}\n ~~/>\n </>\n~~ ) ~~: (\~~n ~~<>\n <Input\n type='text'\n label='Text value'\n value={name~~}\n ~~onChange~~={(~~e: ChangeEvent<HTMLInputElement>~~) => ~~setName~~(~~e.target.value~~)}\n ~~/>\n </>\n~~ )}\n ~~</Flex>\n~~ ~~</Dialog>\~~n ~~</CardContent>\~~n ~~</Card>\~~n );\n};\n"]}
1	+ {"version":3,"file":"Dialog.stories.jsx","sourceRoot":"","sources":["../../../src/core/Dialog/Dialog.stories.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Meta, Story } from '@storybook/react';\nimport { MouseEvent, useState } from 'react';\n\nimport {\n Button,\n Flex,\n Text,\n useElement,\n InfoDialog,\n SummaryList,\n SummaryListItem\n} from '@pega/cosmos-react-core';\n\nimport { FieldValueListDemo } from '../FieldValueList/FieldValueList.stories';\n\nimport { ItemDialog, MockItem, MockItemDialogProps, useMockItems } from './Dialog.mocks';\n\nexport default {\n title: 'Core/Dialog'\n} as Meta;\n\n// InfoDialogDemo\nexport const InfoDialogDemo: Story = () => {\n const [target, setTarget] = useElement<HTMLButtonElement>(null);\n\n return (\n <>\n <Button\n variant='secondary'\n onClick={(e: MouseEvent<HTMLButtonElement>) => {\n setTarget(e.currentTarget);\n }}\n >\n Open dialog\n </Button>\n\n {target && (\n <InfoDialog heading='General information' target={target} onDismiss={() => setTarget(null)}>\n <Flex container={{ direction: 'column', gap: 2 }}>\n <Text as='p'>\n Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor\n incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud\n exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure\n dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.\n Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt\n mollit anim id est laborum.\n </Text>\n <FieldValueListDemo name='Demo field' value='demo value' />\n </Flex>\n </InfoDialog>\n )}\n </>\n );\n};\n\n// FormDialogDemo\nexport const FormDialogDemo: Story = () => {\n const [dialogTarget, setDialogTarget] = useState<MockItemDialogProps['target'] \| null>(null);\n const [editItem, setEditItem] = useState<MockItem \| null>(null);\n const [items, dispatch] = useMockItems();\n\n return (\n <>\n <SummaryList\n name='Editable items'\n icon='list'\n count={items.length}\n actions={[\n {\n id: 'Add',\n text: 'Add',\n icon: 'plus',\n onClick: (_, e) => {\n setDialogTarget(e.currentTarget);\n }\n }\n ]}\n items={items.map<SummaryListItem>(({ id, name, category }) => {\n return {\n id,\n primary: name,\n secondary: <Text variant='secondary'>{category}</Text>,\n actions: [\n {\n id: 'Edit',\n text: 'Edit',\n icon: 'pencil',\n onClick: (_, e, menuButton) => {\n if (menuButton) setDialogTarget(menuButton);\n\n setEditItem({\n id,\n name,\n category\n });\n }\n },\n {\n id: 'Remove',\n text: 'Remove',\n icon: 'trash',\n onClick: () => {\n dispatch({ type: 'remove', item: { id } });\n }\n }\n ]\n };\n })}\n />\n\n {dialogTarget && (\n <ItemDialog\n target={dialogTarget}\n item={editItem}\n // Wrap dispatch so the dialog can only affect the item it creates or updates.\n dispatch={fields => {\n dispatch(\n editItem\n ? { type: 'edit', item: { id: editItem.id, ...fields } }\n : { type: 'add', item: { ...fields } }\n );\n }}\n onComplete={() => {\n setDialogTarget(null);\n setEditItem(null);\n }}\n />\n )}\n </>\n );\n};\n"]}

package/jsx/cs/CSAppShell/CSAppShell.mocks.d.ts CHANGED Viewed

@@ -70,4 +70,20 @@ export declare const AppShellMockData: {
         }[];
     };
 };
+export declare const statuses: ({
+    id: string;
+    primary: string;
+    selected: boolean;
+    items?: undefined;
+} | {
+    id: string;
+    primary: string;
+    items: {
+        id: string;
+        primary: string;
+        selected: boolean;
+    }[];
+    selected?: undefined;
+})[];
+export declare const ChatSettingsPanelMock: FunctionComponent;
 //# sourceMappingURL=CSAppShell.mocks.d.ts.map

package/jsx/cs/CSAppShell/CSAppShell.mocks.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"CSAppShell.mocks.d.ts","sourceRoot":"","sources":["../../../src/cs/CSAppShell/CSAppShell.mocks.tsx"],"names":[],"mappings":"AAAA,OAAO,~~EAA8B~~,iBAAiB,~~EAAwB~~,MAAM,OAAO,CAAC;~~AAoB5F~~,oBAAY,UAAU,GAAG,MAAM,CAAC;AAEhC,MAAM,WAAW,cAAc;IAC7B,cAAc,EAAE;QAAE,CAAC,GAAG,EAAE,MAAM,GAAG,MAAM,CAAA;KAAE,CAAC;IAC1C,OAAO,EAAE,CACP,SAAS,EAAE,MAAM,cAAc,CAAC,gBAAgB,CAAC,EACjD,OAAO,EAAE,MAAM,EACf,QAAQ,EAAE,MAAM,KACb,OAAO,CAAC,UAAU,GAAG,SAAS,CAAC,CAAC;IACrC,QAAQ,EAAE,MAAM,IAAI,CAAC;CACtB;AAED,eAAO,MAAM,aAAa,EAAE,iBAAiB,CAAC,cAAc,CAiE3D,CAAC;AAEF,eAAO,MAAM,sBAAsB;UAC3B,UAAU,GAAG,UAAU;;qBAEZ,OAAO;EAKxB,CAAC;AAEH,eAAO,MAAM,eAAe,EAAE,iBAmE7B,CAAC;AAEF,eAAO,MAAM,gBAAgB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAmO5B,CAAC"}
1	+ {"version":3,"file":"CSAppShell.mocks.d.ts","sourceRoot":"","sources":["../../../src/cs/CSAppShell/CSAppShell.mocks.tsx"],"names":[],"mappings":"AAAA,OAAO,EAGL,iBAAiB,EAOlB,MAAM,OAAO,CAAC;AA4Bf,oBAAY,UAAU,GAAG,MAAM,CAAC;AAEhC,MAAM,WAAW,cAAc;IAC7B,cAAc,EAAE;QAAE,CAAC,GAAG,EAAE,MAAM,GAAG,MAAM,CAAA;KAAE,CAAC;IAC1C,OAAO,EAAE,CACP,SAAS,EAAE,MAAM,cAAc,CAAC,gBAAgB,CAAC,EACjD,OAAO,EAAE,MAAM,EACf,QAAQ,EAAE,MAAM,KACb,OAAO,CAAC,UAAU,GAAG,SAAS,CAAC,CAAC;IACrC,QAAQ,EAAE,MAAM,IAAI,CAAC;CACtB;AAED,eAAO,MAAM,aAAa,EAAE,iBAAiB,CAAC,cAAc,CAiE3D,CAAC;AAEF,eAAO,MAAM,sBAAsB;UAC3B,UAAU,GAAG,UAAU;;qBAEZ,OAAO;EAKxB,CAAC;AAEH,eAAO,MAAM,eAAe,EAAE,iBAmE7B,CAAC;AAEF,eAAO,MAAM,gBAAgB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAmO5B,CAAC;AAEF,eAAO,MAAM,QAAQ;;;;;;;;;;;;;;IAYpB,CAAC;AAEF,eAAO,MAAM,qBAAqB,EAAE,iBA2HnC,CAAC"}

package/jsx/cs/CSAppShell/CSAppShell.mocks.jsx CHANGED Viewed

@@ -1,6 +1,7 @@
-import { createContext, useContext, useState } from 'react';
-import { AppShellDrawerContext, Banner, Button, Flex, Form, Input, Option, Select } from '@pega/cosmos-react-core';
+import { createContext, useCallback, useContext, useState, useEffect, useMemo } from 'react';
+import { AppShellDrawerContext, Banner, Button, Flex, Form, Input, Option, Select, menuHelpers, CheckboxGroup, Checkbox, ComboBox } from '@pega/cosmos-react-core';
 import { CTIPanel } from '@pega/cosmos-react-cs';
+import ChatSettingsPanel from '@pega/cosmos-react-social/lib/components/Chat/ChatSettingsPanel';
 import { userStatusOptions } from '../CallControlPanel/CallControlPanel.mocks';
 import { CallControlPanelDemo, ExternalCTIDemo } from '../CallControlPanel/CallControlPanel.stories';
 export const CallLoginForm = ({ ctiLinkOptions, onLogin, onCancel }) => {
@@ -296,4 +297,93 @@ export const AppShellMockData = {
         ]
     }
 };
+export const statuses = [
+    { id: 'available', primary: 'Available', selected: false },
+    {
+        id: 'temporarilyUnavailable',
+        primary: 'Temporarily unavailable',
+        items: [
+            { id: 'quick_break', primary: 'Quick break', selected: false },
+            { id: 'personal_work', primary: 'Personal work', selected: false },
+            { id: 'in_a_meeting', primary: 'In a meeting', selected: false }
+        ]
+    },
+    { id: 'unavailable', primary: 'Unavailable', selected: false }
+];
+export const ChatSettingsPanelMock = () => {
+    const { openDrawer, closeDrawer } = useContext(AppShellDrawerContext);
+    const [chatAlias, setChatAlias] = useState('');
+    const [queues, setQueues] = useState([
+        { id: 'Billing', checked: false },
+        { id: 'General', checked: false },
+        { id: 'Technical', checked: false }
+    ]);
+    const [items, setItems] = useState(() => {
+        return menuHelpers.mapTree(statuses, item => ({
+            ...item,
+            selected: item.items ? undefined : !!item.selected
+        }));
+    });
+    const selected = useMemo(() => menuHelpers.getSelected(items)[0], [items]);
+    const selectItem = useCallback((id) => {
+        setItems(cur => menuHelpers.selectItem(cur, id, 'single-select'));
+    }, []);
+    const formActions = (<>
+      <Button name='Cancel' variant='secondary' onClick={closeDrawer}>
+        Cancel
+      </Button>
+      <Button name='Submit' variant='primary' onClick={closeDrawer}>
+        Submit
+      </Button>
+    </>);
+    const chatSettings = useMemo(() => (<Flex container={{ direction: 'column', gap: 2, pad: 2 }} item={{ grow: 1 }}>
+        <Form actions={formActions}>
+          <Flex container={{ direction: 'column', pad: 0.5 }}>
+            <Input label='Chat alias' value={chatAlias} onChange={(e) => {
+            setChatAlias(e.target.value);
+        }}/>
+          </Flex>
+          <Flex container={{ direction: 'column', pad: 1 }}>
+            <CheckboxGroup label='Joined queues' name='queueslist' labelHidden={false}>
+              {queues.map(({ id, checked }) => (<Checkbox label={id} id={id} name={id} checked={checked} onChange={e => setQueues(queues.map(queue => {
+                if (queue.id === id) {
+                    return {
+                        ...queue,
+                        checked: e.target.checked
+                    };
+                }
+                return queue;
+            }))}/>))}
+            </CheckboxGroup>
+          </Flex>
+          <Flex container={{ direction: 'column', pad: 0.5 }}>
+            <ComboBox label='Status' mode='single-select' required selected={selected
+            ? {
+                items: {
+                    id: selected?.id,
+                    text: selected?.primary
+                }
+            }
+            : undefined} menu={{
+            items,
+            variant: 'drill-down',
+            onItemClick: selectItem
+        }}/>
+          </Flex>
+        </Form>
+      </Flex>), [items]);
+    const drawerHeader = 'Chat settings';
+    const drawerContent = {
+        drawerHeader,
+        drawerView: chatSettings,
+        name: drawerHeader
+    };
+    useEffect(() => {
+        if (selected)
+            openDrawer(drawerContent);
+    }, [selected]);
+    return (<ChatSettingsPanel label={drawerHeader} status={menuHelpers.getParentItem(items, selected?.id)?.id === 'temporarilyUnavailable'
+            ? menuHelpers.getParentItem(items, selected?.id)?.id
+            : selected?.id} onClick={() => openDrawer(drawerContent)}/>);
+};
 //# sourceMappingURL=CSAppShell.mocks.jsx.map