@pega/cosmos-react-cs 5.0.0-dev.4.9 → 5.0.0-dev.6.0

package/lib/components/TaskManager/TaskManagerTabs.js

@@ -0,0 +1,186 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { createElement as _createElement } from "react";
+import { forwardRef, useContext, createRef, useMemo, useRef, useEffect, useState, useLayoutEffect } from 'react';
+import { cap, Flex } from '@pega/cosmos-react-core';
+import { useDirection, useI18n } from '@pega/cosmos-react-core/lib/hooks';
+import { StyledTaskManagerTabs, StyleTaskName, StyledTasksTabList, StyledTaskManagerTab, StyledOverflowTabMenu } from './TaskManager.styles';
+import TaskManagerContext from './TaskManager.context';
+const TaskManagerTabs = forwardRef(function TaskManagerTabs({ wrapUpTabId, wrapUpTabPanelId, ...restProps }, ref) {
+    const { wrapUp, tasks = [], onTaskLaunch } = useContext(TaskManagerContext);
+    const [tabs, setTabs] = useState(tasks);
+    const [isOverflowing, setIsOverflowing] = useState(false);
+    // Used to keep a reference for every tab in order to focus them with key presses
+    const tabRefs = tasks.map(() => createRef());
+    const wrapUpRef = useRef(null);
+    const tabListRef = useRef(null);
+    const { rtl, end: endDirection, start: startDirection } = useDirection();
+    const t = useI18n();
+    const tasksMenu = useMemo(() => {
+        const openTasks = tasks.filter(task => !task.isResolved);
+        const openTasksMenuItems = openTasks.map(({ name, secondary, id, active }) => {
+            return {
+                primary: name,
+                secondary,
+                id,
+                selected: !!active,
+                onClick: idx => {
+                    onTaskLaunch?.(idx);
+                }
+            };
+        });
+        if (wrapUp?.showTab) {
+            openTasksMenuItems.push({
+                primary: t('task_manager_wrap_up'),
+                secondary: [],
+                id: '',
+                selected: !!wrapUp.active,
+                onClick: () => {
+                    wrapUp?.onClick();
+                }
+            });
+        }
+        const resolvedTasks = tasks.filter(task => task.isResolved);
+        const resolvedTasksMenuItems = resolvedTasks.map(({ id, name, secondary, active }) => {
+            return {
+                primary: name,
+                secondary,
+                id,
+                selected: !!active,
+                onClick: () => {
+                    onTaskLaunch?.(id);
+                }
+            };
+        });
+        const taskCategories = [];
+        if (openTasksMenuItems.length > 0) {
+            taskCategories.push({ id: 'open_tasks', label: t('open_cases'), items: [] });
+            taskCategories
+                .find(category => category.id === 'open_tasks')
+                ?.items?.push(...openTasksMenuItems);
+        }
+        if (resolvedTasksMenuItems.length > 0) {
+            taskCategories.push({ id: 'resolved_tasks', label: t('resolved_cases'), items: [] });
+            taskCategories
+                .find(category => category.id === 'resolved_tasks')
+                ?.items?.push(...resolvedTasksMenuItems);
+        }
+        return taskCategories;
+    }, [tasks]);
+    const checkAndUpdateIsOverflowing = () => {
+        if (tabListRef.current) {
+            const value = tabListRef.current.scrollWidth > tabListRef.current.clientWidth;
+            if (value !== isOverflowing) {
+                setIsOverflowing(value);
+                return value;
+            }
+        }
+        return isOverflowing;
+    };
+    useEffect(() => {
+        setTabs(tasks.filter(task => !task.hideFromTab));
+    }, [tasks]);
+    useEffect(() => {
+        const resizeObserver = new ResizeObserver(() => {
+            checkAndUpdateIsOverflowing();
+        });
+        if (tabListRef?.current)
+            resizeObserver.observe(tabListRef?.current);
+        return () => {
+            resizeObserver.disconnect();
+        };
+    }, [checkAndUpdateIsOverflowing]);
+    useLayoutEffect(() => {
+        if (!checkAndUpdateIsOverflowing())
+            return;
+        const activeTabRef = [...tabRefs, wrapUpRef].find(tab => tab?.current?.getAttribute('aria-selected') === 'true');
+        if (activeTabRef && activeTabRef.current && tabListRef.current) {
+            const activeTabRect = activeTabRef.current.getBoundingClientRect();
+            const tabListWidth = tabListRef.current.clientWidth;
+            // Check if it is not in view
+            if (activeTabRect.left <= 0 || activeTabRect.right >= tabListWidth) {
+                tabListRef.current.scrollLeft = rtl
+                    ? -(tabListWidth - (activeTabRef.current.offsetLeft + activeTabRect.width))
+                    : activeTabRef.current.offsetLeft;
+            }
+        }
+    }, [tasks, wrapUp]);
+    const changeTabFocus = (event, index) => {
+        let activeIndex = index;
+        if (tabs.length) {
+            const { key } = event;
+            if (key === `Arrow${cap(endDirection)}`) {
+                event.preventDefault();
+                let nextIndex;
+                if (wrapUpRef?.current === event.currentTarget) {
+                    nextIndex = 0;
+                }
+                else {
+                    if (index === tabs.length - 1 && wrapUp?.showTab) {
+                        wrapUpRef?.current?.focus();
+                        return;
+                    }
+                    nextIndex = index + 1 < tabs.length ? index + 1 : 0;
+                }
+                activeIndex = nextIndex;
+                const nextTab = tabRefs[nextIndex]?.current;
+                nextTab?.focus();
+            }
+            else if (key === `Arrow${cap(startDirection)}`) {
+                event.preventDefault();
+                let prevIndex;
+                if (wrapUpRef?.current === event.currentTarget) {
+                    prevIndex = tabs.length - 1;
+                }
+                else {
+                    if (index === 0 && wrapUp?.showTab) {
+                        wrapUpRef?.current?.focus();
+                        return;
+                    }
+                    prevIndex = index === 0 ? tabs.length - 1 : index - 1;
+                }
+                const prevTab = tabRefs[prevIndex]?.current;
+                activeIndex = prevIndex;
+                prevTab?.focus();
+            }
+            else if (key === 'Enter' || key === ' ') {
+                event.preventDefault();
+                if (wrapUpRef?.current === event.currentTarget) {
+                    wrapUp?.onClick();
+                    return;
+                }
+                onTaskLaunch?.(tabs[activeIndex].id);
+            }
+        }
+    };
+    return (_jsx(Flex, { container: { gap: 1 }, as: StyledTaskManagerTabs, ref: ref, children: (tasks.length > 0 || wrapUp?.showTab) && (_jsxs(_Fragment, { children: [_jsxs(StyledTasksTabList, { role: 'tablist', ref: tabListRef, ...restProps, children: [tabs.map(({ id, active = false, icon, meta, name, ...tabRestProps }, i) => {
+                            return (_createElement(StyledTaskManagerTab, { ...tabRestProps, ref: tabRefs[i], key: id, onClick: () => onTaskLaunch?.(id), "aria-selected": active, "aria-controls": `tab-panel-${id}`, id: `tab-${id}`, role: 'tab', tabIndex: active ? 0 : -1, onKeyUp: (e) => {
+                                    changeTabFocus(e, i);
+                                }, onKeyDown: (e) => {
+                                    const { key } = e;
+                                    if (key === 'ArrowRight' ||
+                                        key === 'ArrowDown' ||
+                                        key === 'ArrowLeft' ||
+                                        key === 'ArrowUp' ||
+                                        key === 'Enter' ||
+                                        key === ' ') {
+                                        e.preventDefault();
+                                    }
+                                }, active: active },
+                                _jsx(Flex, { container: { justify: 'start', gap: 1, alignItems: 'center' }, children: _jsx(StyleTaskName, { children: name }) })));
+                        }), wrapUp?.showTab && (_jsx(StyledTaskManagerTab, { onClick: wrapUp.onClick, variant: 'wrap-up', "aria-selected": wrapUp.active, "aria-controls": wrapUpTabPanelId, id: wrapUpTabId, role: 'tab', active: wrapUp.active, tabIndex: wrapUp.active ? 0 : -1, onKeyUp: (e) => {
+                                changeTabFocus(e);
+                            }, onKeyDown: (e) => {
+                                const { key } = e;
+                                if (key === 'ArrowRight' ||
+                                    key === 'ArrowDown' ||
+                                    key === 'ArrowLeft' ||
+                                    key === 'ArrowUp') {
+                                    e.preventDefault();
+                                }
+                            }, ref: wrapUpRef, children: _jsx("span", { children: t('task_manager_wrap_up') }) }))] }), _jsx(StyledOverflowTabMenu, { menu: {
+                        items: tasksMenu,
+                        mode: 'single-select'
+                    }, icon: 'caret-down', iconOnly: true, variant: 'simple', text: t('case_manager_overflow_menu') })] })) }));
+});
+export default TaskManagerTabs;
+//# sourceMappingURL=TaskManagerTabs.js.map

package/lib/components/TaskManager/TaskManagerTabs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TaskManagerTabs.js","sourceRoot":"","sources":["../../../src/components/TaskManager/TaskManagerTabs.tsx"],"names":[],"mappings":";;AAAA,OAAO,EACL,UAAU,EACV,UAAU,EACV,SAAS,EACT,OAAO,EACP,MAAM,EACN,SAAS,EACT,QAAQ,EACR,eAAe,EAChB,MAAM,OAAO,CAAC;AAGf,OAAO,EAAE,GAAG,EAAE,IAAI,EAAE,MAAM,yBAAyB,CAAC;AAEpD,OAAO,EAAE,YAAY,EAAE,OAAO,EAAE,MAAM,mCAAmC,CAAC;AAE1E,OAAO,EACL,qBAAqB,EACrB,aAAa,EACb,kBAAkB,EAClB,oBAAoB,EACpB,qBAAqB,EACtB,MAAM,sBAAsB,CAAC;AAC9B,OAAO,kBAAkB,MAAM,uBAAuB,CAAC;AAGvD,MAAM,eAAe,GAA2D,UAAU,CACxF,SAAS,eAAe,CACtB,EAAE,WAAW,EAAE,gBAAgB,EAAE,GAAG,SAAS,EAAyC,EACtF,GAAgC;IAEhC,MAAM,EAAE,MAAM,EAAE,KAAK,GAAG,EAAE,EAAE,YAAY,EAAE,GAAG,UAAU,CAAC,kBAAkB,CAAC,CAAC;IAE5E,MAAM,CAAC,IAAI,EAAE,OAAO,CAAC,GAAG,QAAQ,CAAc,KAAK,CAAC,CAAC;IACrD,MAAM,CAAC,aAAa,EAAE,gBAAgB,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAE1D,iFAAiF;IACjF,MAAM,OAAO,GAA+B,KAAK,CAAC,GAAG,CAAC,GAAG,EAAE,CAAC,SAAS,EAAiB,CAAC,CAAC;IACxF,MAAM,SAAS,GAAG,MAAM,CAAgB,IAAI,CAAC,CAAC;IAC9C,MAAM,UAAU,GAAG,MAAM,CAAmB,IAAI,CAAC,CAAC;IAElD,MAAM,EAAE,GAAG,EAAE,GAAG,EAAE,YAAY,EAAE,KAAK,EAAE,cAAc,EAAE,GAAG,YAAY,EAAE,CAAC;IACzE,MAAM,CAAC,GAAG,OAAO,EAAE,CAAC;IAEpB,MAAM,SAAS,GAAG,OAAO,CAAC,GAAG,EAAE;QAC7B,MAAM,SAAS,GAAG,KAAK,CAAC,MAAM,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC;QACzD,MAAM,kBAAkB,GAAoB,SAAS,CAAC,GAAG,CACvD,CAAC,EAAE,IAAI,EAAE,SAAS,EAAE,EAAE,EAAE,MAAM,EAAE,EAAE,EAAE;YAClC,OAAO;gBACL,OAAO,EAAE,IAAI;gBACb,SAAS;gBACT,EAAE;gBACF,QAAQ,EAAE,CAAC,CAAC,MAAM;gBAClB,OAAO,EAAE,GAAG,CAAC,EAAE;oBACb,YAAY,EAAE,CAAC,GAAG,CAAC,CAAC;gBACtB,CAAC;aACF,CAAC;QACJ,CAAC,CACF,CAAC;QACF,IAAI,MAAM,EAAE,OAAO,EAAE;YACnB,kBAAkB,CAAC,IAAI,CAAC;gBACtB,OAAO,EAAE,CAAC,CAAC,sBAAsB,CAAC;gBAClC,SAAS,EAAE,EAAE;gBACb,EAAE,EAAE,EAAE;gBACN,QAAQ,EAAE,CAAC,CAAC,MAAM,CAAC,MAAM;gBACzB,OAAO,EAAE,GAAG,EAAE;oBACZ,MAAM,EAAE,OAAO,EAAE,CAAC;gBACpB,CAAC;aACF,CAAC,CAAC;SACJ;QAED,MAAM,aAAa,GAAG,KAAK,CAAC,MAAM,CAAC,IAAI,CAAC,EAAE,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC;QAC5D,MAAM,sBAAsB,GAAoB,aAAa,CAAC,GAAG,CAC/D,CAAC,EAAE,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE,MAAM,EAAE,EAAE,EAAE;YAClC,OAAO;gBACL,OAAO,EAAE,IAAI;gBACb,SAAS;gBACT,EAAE;gBACF,QAAQ,EAAE,CAAC,CAAC,MAAM;gBAClB,OAAO,EAAE,GAAG,EAAE;oBACZ,YAAY,EAAE,CAAC,EAAE,CAAC,CAAC;gBACrB,CAAC;aACF,CAAC;QACJ,CAAC,CACF,CAAC;QACF,MAAM,cAAc,GAAuB,EAAE,CAAC;QAC9C,IAAI,kBAAkB,CAAC,MAAM,GAAG,CAAC,EAAE;YACjC,cAAc,CAAC,IAAI,CAAC,EAAE,EAAE,EAAE,YAAY,EAAE,KAAK,EAAE,CAAC,CAAC,YAAY,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE,CAAC,CAAC;YAC7E,cAAc;iBACX,IAAI,CAAC,QAAQ,CAAC,EAAE,CAAC,QAAQ,CAAC,EAAE,KAAK,YAAY,CAAC;gBAC/C,EAAE,KAAK,EAAE,IAAI,CAAC,GAAG,kBAAkB,CAAC,CAAC;SACxC;QACD,IAAI,sBAAsB,CAAC,MAAM,GAAG,CAAC,EAAE;YACrC,cAAc,CAAC,IAAI,CAAC,EAAE,EAAE,EAAE,gBAAgB,EAAE,KAAK,EAAE,CAAC,CAAC,gBAAgB,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE,CAAC,CAAC;YACrF,cAAc;iBACX,IAAI,CAAC,QAAQ,CAAC,EAAE,CAAC,QAAQ,CAAC,EAAE,KAAK,gBAAgB,CAAC;gBACnD,EAAE,KAAK,EAAE,IAAI,CAAC,GAAG,sBAAsB,CAAC,CAAC;SAC5C;QACD,OAAO,cAAc,CAAC;IACxB,CAAC,EAAE,CAAC,KAAK,CAAC,CAAC,CAAC;IAEZ,MAAM,2BAA2B,GAAG,GAAG,EAAE;QACvC,IAAI,UAAU,CAAC,OAAO,EAAE;YACtB,MAAM,KAAK,GAAG,UAAU,CAAC,OAAO,CAAC,WAAW,GAAG,UAAU,CAAC,OAAO,CAAC,WAAW,CAAC;YAC9E,IAAI,KAAK,KAAK,aAAa,EAAE;gBAC3B,gBAAgB,CAAC,KAAK,CAAC,CAAC;gBACxB,OAAO,KAAK,CAAC;aACd;SACF;QACD,OAAO,aAAa,CAAC;IACvB,CAAC,CAAC;IAEF,SAAS,CAAC,GAAG,EAAE;QACb,OAAO,CAAC,KAAK,CAAC,MAAM,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC,CAAC;IACnD,CAAC,EAAE,CAAC,KAAK,CAAC,CAAC,CAAC;IAEZ,SAAS,CAAC,GAAG,EAAE;QACb,MAAM,cAAc,GAAG,IAAI,cAAc,CAAC,GAAG,EAAE;YAC7C,2BAA2B,EAAE,CAAC;QAChC,CAAC,CAAC,CAAC;QACH,IAAI,UAAU,EAAE,OAAO;YAAE,cAAc,CAAC,OAAO,CAAC,UAAU,EAAE,OAAkB,CAAC,CAAC;QAChF,OAAO,GAAG,EAAE;YACV,cAAc,CAAC,UAAU,EAAE,CAAC;QAC9B,CAAC,CAAC;IACJ,CAAC,EAAE,CAAC,2BAA2B,CAAC,CAAC,CAAC;IAElC,eAAe,CAAC,GAAG,EAAE;QACnB,IAAI,CAAC,2BAA2B,EAAE;YAAE,OAAO;QAC3C,MAAM,YAAY,GAAG,CAAC,GAAG,OAAO,EAAE,SAAS,CAAC,CAAC,IAAI,CAC/C,GAAG,CAAC,EAAE,CAAC,GAAG,EAAE,OAAO,EAAE,YAAY,CAAC,eAAe,CAAC,KAAK,MAAM,CAC9D,CAAC;QAEF,IAAI,YAAY,IAAI,YAAY,CAAC,OAAO,IAAI,UAAU,CAAC,OAAO,EAAE;YAC9D,MAAM,aAAa,GAAG,YAAY,CAAC,OAAO,CAAC,qBAAqB,EAAE,CAAC;YACnE,MAAM,YAAY,GAAG,UAAU,CAAC,OAAO,CAAC,WAAW,CAAC;YAEpD,6BAA6B;YAC7B,IAAI,aAAa,CAAC,IAAI,IAAI,CAAC,IAAI,aAAa,CAAC,KAAK,IAAI,YAAY,EAAE;gBAClE,UAAU,CAAC,OAAO,CAAC,UAAU,GAAG,GAAG;oBACjC,CAAC,CAAC,CAAC,CAAC,YAAY,GAAG,CAAC,YAAY,CAAC,OAAO,CAAC,UAAU,GAAG,aAAa,CAAC,KAAK,CAAC,CAAC;oBAC3E,CAAC,CAAC,YAAY,CAAC,OAAO,CAAC,UAAU,CAAC;aACrC;SACF;IACH,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,CAAC,CAAC,CAAC;IAEpB,MAAM,cAAc,GAAG,CAAC,KAAoB,EAAE,KAAc,EAAQ,EAAE;QACpE,IAAI,WAAW,GAAG,KAAK,CAAC;QACxB,IAAI,IAAI,CAAC,MAAM,EAAE;YACf,MAAM,EAAE,GAAG,EAAE,GAAG,KAAK,CAAC;YAEtB,IAAI,GAAG,KAAK,QAAQ,GAAG,CAAC,YAAY,CAAC,EAAE,EAAE;gBACvC,KAAK,CAAC,cAAc,EAAE,CAAC;gBACvB,IAAI,SAAS,CAAC;gBACd,IAAI,SAAS,EAAE,OAAO,KAAK,KAAK,CAAC,aAAa,EAAE;oBAC9C,SAAS,GAAG,CAAC,CAAC;iBACf;qBAAM;oBACL,IAAI,KAAK,KAAK,IAAI,CAAC,MAAM,GAAG,CAAC,IAAI,MAAM,EAAE,OAAO,EAAE;wBAChD,SAAS,EAAE,OAAO,EAAE,KAAK,EAAE,CAAC;wBAC5B,OAAO;qBACR;oBACD,SAAS,GAAG,KAAM,GAAG,CAAC,GAAG,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,KAAM,GAAG,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;iBACvD;gBACD,WAAW,GAAG,SAAS,CAAC;gBACxB,MAAM,OAAO,GAAG,OAAO,CAAC,SAAS,CAAC,EAAE,OAAO,CAAC;gBAC5C,OAAO,EAAE,KAAK,EAAE,CAAC;aAClB;iBAAM,IAAI,GAAG,KAAK,QAAQ,GAAG,CAAC,cAAc,CAAC,EAAE,EAAE;gBAChD,KAAK,CAAC,cAAc,EAAE,CAAC;gBACvB,IAAI,SAAS,CAAC;gBACd,IAAI,SAAS,EAAE,OAAO,KAAK,KAAK,CAAC,aAAa,EAAE;oBAC9C,SAAS,GAAG,IAAI,CAAC,MAAM,GAAG,CAAC,CAAC;iBAC7B;qBAAM;oBACL,IAAI,KAAK,KAAK,CAAC,IAAI,MAAM,EAAE,OAAO,EAAE;wBAClC,SAAS,EAAE,OAAO,EAAE,KAAK,EAAE,CAAC;wBAC5B,OAAO;qBACR;oBACD,SAAS,GAAG,KAAK,KAAK,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC,CAAC,KAAM,GAAG,CAAC,CAAC;iBACxD;gBACD,MAAM,OAAO,GAAG,OAAO,CAAC,SAAS,CAAC,EAAE,OAAO,CAAC;gBAC5C,WAAW,GAAG,SAAS,CAAC;gBACxB,OAAO,EAAE,KAAK,EAAE,CAAC;aAClB;iBAAM,IAAI,GAAG,KAAK,OAAO,IAAI,GAAG,KAAK,GAAG,EAAE;gBACzC,KAAK,CAAC,cAAc,EAAE,CAAC;gBACvB,IAAI,SAAS,EAAE,OAAO,KAAK,KAAK,CAAC,aAAa,EAAE;oBAC9C,MAAM,EAAE,OAAO,EAAE,CAAC;oBAClB,OAAO;iBACR;gBACD,YAAY,EAAE,CAAC,IAAI,CAAC,WAAY,CAAC,CAAC,EAAE,CAAC,CAAC;aACvC;SACF;IACH,CAAC,CAAC;IAEF,OAAO,CACL,KAAC,IAAI,IAAC,SAAS,EAAE,EAAE,GAAG,EAAE,CAAC,EAAE,EAAE,EAAE,EAAE,qBAAqB,EAAE,GAAG,EAAE,GAAG,YAC7D,CAAC,KAAK,CAAC,MAAM,GAAG,CAAC,IAAI,MAAM,EAAE,OAAO,CAAC,IAAI,CACxC,8BACE,MAAC,kBAAkB,IAAC,IAAI,EAAC,SAAS,EAAC,GAAG,EAAE,UAAU,KAAM,SAAS,aAC9D,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,EAAE,EAAE,MAAM,GAAG,KAAK,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,GAAG,YAAY,EAAE,EAAE,CAAC,EAAE,EAAE;4BACzE,OAAO,CACL,eAAC,oBAAoB,OACf,YAAY,EAChB,GAAG,EAAE,OAAO,CAAC,CAAC,CAAC,EACf,GAAG,EAAE,EAAE,EACP,OAAO,EAAE,GAAG,EAAE,CAAC,YAAY,EAAE,CAAC,EAAE,CAAC,mBAClB,MAAM,mBACN,aAAa,EAAE,EAAE,EAChC,EAAE,EAAE,OAAO,EAAE,EAAE,EACf,IAAI,EAAC,KAAK,EACV,QAAQ,EAAE,MAAM,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,EACzB,OAAO,EAAE,CAAC,CAAgB,EAAE,EAAE;oCAC5B,cAAc,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC;gCACvB,CAAC,EACD,SAAS,EAAE,CAAC,CAAgB,EAAE,EAAE;oCAC9B,MAAM,EAAE,GAAG,EAAE,GAAG,CAAC,CAAC;oCAClB,IACE,GAAG,KAAK,YAAY;wCACpB,GAAG,KAAK,WAAW;wCACnB,GAAG,KAAK,WAAW;wCACnB,GAAG,KAAK,SAAS;wCACjB,GAAG,KAAK,OAAO;wCACf,GAAG,KAAK,GAAG,EACX;wCACA,CAAC,CAAC,cAAc,EAAE,CAAC;qCACpB;gCACH,CAAC,EACD,MAAM,EAAE,MAAM;gCAEd,KAAC,IAAI,IAAC,SAAS,EAAE,EAAE,OAAO,EAAE,OAAO,EAAE,GAAG,EAAE,CAAC,EAAE,UAAU,EAAE,QAAQ,EAAE,YACjE,KAAC,aAAa,cAAE,IAAI,GAAiB,GAChC,CACc,CACxB,CAAC;wBACJ,CAAC,CAAC,EACD,MAAM,EAAE,OAAO,IAAI,CAClB,KAAC,oBAAoB,IACnB,OAAO,EAAE,MAAM,CAAC,OAAO,EACvB,OAAO,EAAC,SAAS,mBACF,MAAM,CAAC,MAAM,mBACb,gBAAgB,EAC/B,EAAE,EAAE,WAAW,EACf,IAAI,EAAC,KAAK,EACV,MAAM,EAAE,MAAM,CAAC,MAAM,EACrB,QAAQ,EAAE,MAAM,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,EAChC,OAAO,EAAE,CAAC,CAAgB,EAAE,EAAE;gCAC5B,cAAc,CAAC,CAAC,CAAC,CAAC;4BACpB,CAAC,EACD,SAAS,EAAE,CAAC,CAAgB,EAAE,EAAE;gCAC9B,MAAM,EAAE,GAAG,EAAE,GAAG,CAAC,CAAC;gCAClB,IACE,GAAG,KAAK,YAAY;oCACpB,GAAG,KAAK,WAAW;oCACnB,GAAG,KAAK,WAAW;oCACnB,GAAG,KAAK,SAAS,EACjB;oCACA,CAAC,CAAC,cAAc,EAAE,CAAC;iCACpB;4BACH,CAAC,EACD,GAAG,EAAE,SAAS,YAEd,yBAAO,CAAC,CAAC,sBAAsB,CAAC,GAAQ,GACnB,CACxB,IACkB,EACrB,KAAC,qBAAqB,IACpB,IAAI,EAAE;wBACJ,KAAK,EAAE,SAAS;wBAChB,IAAI,EAAE,eAAe;qBACtB,EACD,IAAI,EAAC,YAAY,EACjB,QAAQ,QACR,OAAO,EAAC,QAAQ,EAChB,IAAI,EAAE,CAAC,CAAC,4BAA4B,CAAC,GACrC,IACD,CACJ,GACI,CACR,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,eAAe,eAAe,CAAC","sourcesContent":["import {\n  forwardRef,\n  useContext,\n  createRef,\n  useMemo,\n  useRef,\n  useEffect,\n  useState,\n  useLayoutEffect\n} from 'react';\nimport type { FunctionComponent, RefObject, KeyboardEvent, PropsWithoutRef } from 'react';\n\nimport { cap, Flex } from '@pega/cosmos-react-core';\nimport type { ForwardProps, MenuItemProps, MenuProps } from '@pega/cosmos-react-core';\nimport { useDirection, useI18n } from '@pega/cosmos-react-core/lib/hooks';\n\nimport {\n  StyledTaskManagerTabs,\n  StyleTaskName,\n  StyledTasksTabList,\n  StyledTaskManagerTab,\n  StyledOverflowTabMenu\n} from './TaskManager.styles';\nimport TaskManagerContext from './TaskManager.context';\nimport type { TaskManagerTabsProps, TaskProps } from './TaskManager.types';\n\nconst TaskManagerTabs: FunctionComponent<TaskManagerTabsProps & ForwardProps> = forwardRef(\n  function TaskManagerTabs(\n    { wrapUpTabId, wrapUpTabPanelId, ...restProps }: PropsWithoutRef<TaskManagerTabsProps>,\n    ref: TaskManagerTabsProps['ref']\n  ) {\n    const { wrapUp, tasks = [], onTaskLaunch } = useContext(TaskManagerContext);\n\n    const [tabs, setTabs] = useState<TaskProps[]>(tasks);\n    const [isOverflowing, setIsOverflowing] = useState(false);\n\n    // Used to keep a reference for every tab in order to focus them with key presses\n    const tabRefs: RefObject<HTMLLIElement>[] = tasks.map(() => createRef<HTMLLIElement>());\n    const wrapUpRef = useRef<HTMLLIElement>(null);\n    const tabListRef = useRef<HTMLUListElement>(null);\n\n    const { rtl, end: endDirection, start: startDirection } = useDirection();\n    const t = useI18n();\n\n    const tasksMenu = useMemo(() => {\n      const openTasks = tasks.filter(task => !task.isResolved);\n      const openTasksMenuItems: MenuItemProps[] = openTasks.map(\n        ({ name, secondary, id, active }) => {\n          return {\n            primary: name,\n            secondary,\n            id,\n            selected: !!active,\n            onClick: idx => {\n              onTaskLaunch?.(idx);\n            }\n          };\n        }\n      );\n      if (wrapUp?.showTab) {\n        openTasksMenuItems.push({\n          primary: t('task_manager_wrap_up'),\n          secondary: [],\n          id: '',\n          selected: !!wrapUp.active,\n          onClick: () => {\n            wrapUp?.onClick();\n          }\n        });\n      }\n\n      const resolvedTasks = tasks.filter(task => task.isResolved);\n      const resolvedTasksMenuItems: MenuItemProps[] = resolvedTasks.map(\n        ({ id, name, secondary, active }) => {\n          return {\n            primary: name,\n            secondary,\n            id,\n            selected: !!active,\n            onClick: () => {\n              onTaskLaunch?.(id);\n            }\n          };\n        }\n      );\n      const taskCategories: MenuProps['items'] = [];\n      if (openTasksMenuItems.length > 0) {\n        taskCategories.push({ id: 'open_tasks', label: t('open_cases'), items: [] });\n        taskCategories\n          .find(category => category.id === 'open_tasks')\n          ?.items?.push(...openTasksMenuItems);\n      }\n      if (resolvedTasksMenuItems.length > 0) {\n        taskCategories.push({ id: 'resolved_tasks', label: t('resolved_cases'), items: [] });\n        taskCategories\n          .find(category => category.id === 'resolved_tasks')\n          ?.items?.push(...resolvedTasksMenuItems);\n      }\n      return taskCategories;\n    }, [tasks]);\n\n    const checkAndUpdateIsOverflowing = () => {\n      if (tabListRef.current) {\n        const value = tabListRef.current.scrollWidth > tabListRef.current.clientWidth;\n        if (value !== isOverflowing) {\n          setIsOverflowing(value);\n          return value;\n        }\n      }\n      return isOverflowing;\n    };\n\n    useEffect(() => {\n      setTabs(tasks.filter(task => !task.hideFromTab));\n    }, [tasks]);\n\n    useEffect(() => {\n      const resizeObserver = new ResizeObserver(() => {\n        checkAndUpdateIsOverflowing();\n      });\n      if (tabListRef?.current) resizeObserver.observe(tabListRef?.current as Element);\n      return () => {\n        resizeObserver.disconnect();\n      };\n    }, [checkAndUpdateIsOverflowing]);\n\n    useLayoutEffect(() => {\n      if (!checkAndUpdateIsOverflowing()) return;\n      const activeTabRef = [...tabRefs, wrapUpRef].find(\n        tab => tab?.current?.getAttribute('aria-selected') === 'true'\n      );\n\n      if (activeTabRef && activeTabRef.current && tabListRef.current) {\n        const activeTabRect = activeTabRef.current.getBoundingClientRect();\n        const tabListWidth = tabListRef.current.clientWidth;\n\n        // Check if it is not in view\n        if (activeTabRect.left <= 0 || activeTabRect.right >= tabListWidth) {\n          tabListRef.current.scrollLeft = rtl\n            ? -(tabListWidth - (activeTabRef.current.offsetLeft + activeTabRect.width))\n            : activeTabRef.current.offsetLeft;\n        }\n      }\n    }, [tasks, wrapUp]);\n\n    const changeTabFocus = (event: KeyboardEvent, index?: number): void => {\n      let activeIndex = index;\n      if (tabs.length) {\n        const { key } = event;\n\n        if (key === `Arrow${cap(endDirection)}`) {\n          event.preventDefault();\n          let nextIndex;\n          if (wrapUpRef?.current === event.currentTarget) {\n            nextIndex = 0;\n          } else {\n            if (index === tabs.length - 1 && wrapUp?.showTab) {\n              wrapUpRef?.current?.focus();\n              return;\n            }\n            nextIndex = index! + 1 < tabs.length ? index! + 1 : 0;\n          }\n          activeIndex = nextIndex;\n          const nextTab = tabRefs[nextIndex]?.current;\n          nextTab?.focus();\n        } else if (key === `Arrow${cap(startDirection)}`) {\n          event.preventDefault();\n          let prevIndex;\n          if (wrapUpRef?.current === event.currentTarget) {\n            prevIndex = tabs.length - 1;\n          } else {\n            if (index === 0 && wrapUp?.showTab) {\n              wrapUpRef?.current?.focus();\n              return;\n            }\n            prevIndex = index === 0 ? tabs.length - 1 : index! - 1;\n          }\n          const prevTab = tabRefs[prevIndex]?.current;\n          activeIndex = prevIndex;\n          prevTab?.focus();\n        } else if (key === 'Enter' || key === ' ') {\n          event.preventDefault();\n          if (wrapUpRef?.current === event.currentTarget) {\n            wrapUp?.onClick();\n            return;\n          }\n          onTaskLaunch?.(tabs[activeIndex!].id);\n        }\n      }\n    };\n\n    return (\n      <Flex container={{ gap: 1 }} as={StyledTaskManagerTabs} ref={ref}>\n        {(tasks.length > 0 || wrapUp?.showTab) && (\n          <>\n            <StyledTasksTabList role='tablist' ref={tabListRef} {...restProps}>\n              {tabs.map(({ id, active = false, icon, meta, name, ...tabRestProps }, i) => {\n                return (\n                  <StyledTaskManagerTab\n                    {...tabRestProps}\n                    ref={tabRefs[i]}\n                    key={id}\n                    onClick={() => onTaskLaunch?.(id)}\n                    aria-selected={active}\n                    aria-controls={`tab-panel-${id}`}\n                    id={`tab-${id}`}\n                    role='tab'\n                    tabIndex={active ? 0 : -1}\n                    onKeyUp={(e: KeyboardEvent) => {\n                      changeTabFocus(e, i);\n                    }}\n                    onKeyDown={(e: KeyboardEvent) => {\n                      const { key } = e;\n                      if (\n                        key === 'ArrowRight' ||\n                        key === 'ArrowDown' ||\n                        key === 'ArrowLeft' ||\n                        key === 'ArrowUp' ||\n                        key === 'Enter' ||\n                        key === ' '\n                      ) {\n                        e.preventDefault();\n                      }\n                    }}\n                    active={active}\n                  >\n                    <Flex container={{ justify: 'start', gap: 1, alignItems: 'center' }}>\n                      <StyleTaskName>{name}</StyleTaskName>\n                    </Flex>\n                  </StyledTaskManagerTab>\n                );\n              })}\n              {wrapUp?.showTab && (\n                <StyledTaskManagerTab\n                  onClick={wrapUp.onClick}\n                  variant='wrap-up'\n                  aria-selected={wrapUp.active}\n                  aria-controls={wrapUpTabPanelId}\n                  id={wrapUpTabId}\n                  role='tab'\n                  active={wrapUp.active}\n                  tabIndex={wrapUp.active ? 0 : -1}\n                  onKeyUp={(e: KeyboardEvent) => {\n                    changeTabFocus(e);\n                  }}\n                  onKeyDown={(e: KeyboardEvent) => {\n                    const { key } = e;\n                    if (\n                      key === 'ArrowRight' ||\n                      key === 'ArrowDown' ||\n                      key === 'ArrowLeft' ||\n                      key === 'ArrowUp'\n                    ) {\n                      e.preventDefault();\n                    }\n                  }}\n                  ref={wrapUpRef}\n                >\n                  <span>{t('task_manager_wrap_up')}</span>\n                </StyledTaskManagerTab>\n              )}\n            </StyledTasksTabList>\n            <StyledOverflowTabMenu\n              menu={{\n                items: tasksMenu,\n                mode: 'single-select'\n              }}\n              icon='caret-down'\n              iconOnly\n              variant='simple'\n              text={t('case_manager_overflow_menu')}\n            />\n          </>\n        )}\n      </Flex>\n    );\n  }\n);\n\nexport default TaskManagerTabs;\n"]}

package/lib/components/TaskManager/TaskPicker.d.ts

@@ -0,0 +1,19 @@
+import type { FunctionComponent, Ref } from 'react';
+import type { ForwardProps, MenuItemProps, BaseProps, FormDialogProps } from '@pega/cosmos-react-core';
+import Dialog from '@pega/cosmos-react-core/lib/components/Dialog/Dialog';
+import type { PickerProps } from '../Picker/Picker.types';
+export interface TaskPickerProps extends BaseProps, Pick<PickerProps, 'items'> {
+    /** Callback when add button is clicked */
+    onAdd: (selections: MenuItemProps[]) => void;
+    /** Callback when cancel button is clicked */
+    onCancel: () => void;
+    /** Target for the modal */
+    target: FormDialogProps['target'];
+    /** Picker reference . */
+    ref?: Ref<HTMLDivElement>;
+}
+export declare const StyledSingleTaskDialog: typeof Dialog;
+export declare const StyledMultiTaskDialog: import("styled-components").StyledComponent<import("react").FC<FormDialogProps & Pick<import("react").HTMLAttributes<HTMLDivElement>, "hidden" | "color" | "content" | "style" | "translate" | "prefix" | "slot" | "title" | "children" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "autoFocus" | "className" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "id" | "lang" | "nonce" | "placeholder" | "spellCheck" | "tabIndex" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "property" | "rel" | "resource" | "rev" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture">>, import("styled-components").DefaultTheme, {}, never>;
+declare const TaskPicker: FunctionComponent<TaskPickerProps & ForwardProps>;
+export default TaskPicker;
+//# sourceMappingURL=TaskPicker.d.ts.map

package/lib/components/TaskManager/TaskPicker.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TaskPicker.d.ts","sourceRoot":"","sources":["../../../src/components/TaskManager/TaskPicker.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,iBAAiB,EAAmB,GAAG,EAAE,MAAM,OAAO,CAAC;AAkBrE,OAAO,KAAK,EACV,YAAY,EACZ,aAAa,EACb,SAAS,EACT,eAAe,EAChB,MAAM,yBAAyB,CAAC;AAMjC,OAAO,MAAM,MAAM,sDAAsD,CAAC;AAG1E,OAAO,KAAK,EAAE,WAAW,EAAqB,MAAM,wBAAwB,CAAC;AAG7E,MAAM,WAAW,eAAgB,SAAQ,SAAS,EAAE,IAAI,CAAC,WAAW,EAAE,OAAO,CAAC;IAC5E,0CAA0C;IAC1C,KAAK,EAAE,CAAC,UAAU,EAAE,aAAa,EAAE,KAAK,IAAI,CAAC;IAC7C,6CAA6C;IAC7C,QAAQ,EAAE,MAAM,IAAI,CAAC;IACrB,2BAA2B;IAC3B,MAAM,EAAE,eAAe,CAAC,QAAQ,CAAC,CAAC;IAClC,yBAAyB;IACzB,GAAG,CAAC,EAAE,GAAG,CAAC,cAAc,CAAC,CAAC;CAC3B;AAED,eAAO,MAAM,sBAAsB,EAAE,OAAO,MAM1C,CAAC;AAEH,eAAO,MAAM,qBAAqB,mtJAyBjC,CAAC;AAIF,QAAA,MAAM,UAAU,EAAE,iBAAiB,CAAC,eAAe,GAAG,YAAY,CAmHjE,CAAC;AAEF,eAAe,UAAU,CAAC"}

package/lib/components/TaskManager/TaskPicker.js

@@ -0,0 +1,89 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef, useCallback, useEffect, useRef, useState } from 'react';
+import styled, { css } from 'styled-components';
+import { useI18n, useConsolidatedRef, useElement, useUID, useOuterEvent, Flex, Button, Icon, Text, useFocusTrap, useEvent, FormDialog, defaultThemeProp } from '@pega/cosmos-react-core';
+import { StyledChildrenWrap, StyledDialogContent, StyledDialogHeader } from '@pega/cosmos-react-core/lib/components/Dialog/Dialog.styles';
+import Dialog from '@pega/cosmos-react-core/lib/components/Dialog/Dialog';
+import { StyledMenu } from '@pega/cosmos-react-core/lib/components/Menu/Menu.styles';
+import Picker from '../Picker';
+export const StyledSingleTaskDialog = styled(Dialog)(() => {
+    return css `
+    ${StyledMenu} {
+      overflow: auto;
+    }
+  `;
+});
+export const StyledMultiTaskDialog = styled(FormDialog)(({ theme: { base: { spacing } } }) => {
+    return css `
+      ${StyledDialogContent},
+      ${StyledChildrenWrap} {
+        display: flex;
+      }
+
+      ${StyledDialogHeader} {
+        padding-inline: ${spacing};
+      }
+
+      ${StyledDialogContent} {
+        padding-inline: 0;
+      }
+
+      ${StyledMenu} {
+        overflow: auto;
+      }
+    `;
+});
+StyledMultiTaskDialog.defaultProps = defaultThemeProp;
+const TaskPicker = forwardRef(function TaskPicker({ items, onAdd, onCancel, target, ...restProps }, ref) {
+    const t = useI18n();
+    const headingId = useUID();
+    const [selections, setSelections] = useState([]);
+    const [enableMultiSelect, setEnableMultiSelect] = useState(false);
+    const [pickerEl, setPickerEl] = useElement();
+    const pickerRef = useConsolidatedRef(ref, setPickerEl);
+    const initialRender = useRef(true);
+    const toggleHandleRef = useRef(null);
+    const onSelectionChange = (selectedItems) => {
+        setSelections(selectedItems);
+    };
+    useOuterEvent('mousedown', [target, pickerRef], () => {
+        onCancel?.();
+    });
+    const onModeToggle = () => {
+        setSelections([]);
+        setEnableMultiSelect(curr => !curr);
+    };
+    useEffect(() => {
+        if (!enableMultiSelect && selections?.length) {
+            onAdd(selections);
+        }
+    }, [selections, enableMultiSelect]);
+    useEffect(() => {
+        if (initialRender.current) {
+            initialRender.current = false;
+        }
+        else {
+            toggleHandleRef.current?.focusToggleSwitch();
+        }
+    }, [enableMultiSelect]);
+    const onKeydown = useCallback((e) => {
+        const { key } = e;
+        if (key === 'Escape') {
+            onCancel?.();
+        }
+    }, [onCancel]);
+    useFocusTrap(pickerRef, false, [onCancel, pickerEl, enableMultiSelect]);
+    useEvent('keydown', onKeydown, { dependencies: [pickerEl, enableMultiSelect] });
+    const pickerContent = (_jsx(Picker, { ...restProps, contextualLabel: t('task_manager_cases').toLowerCase(), items: items, multiSelect: enableMultiSelect, onModeToggle: onModeToggle, reorderSelections: true, selections: selections, onSelectionChange: onSelectionChange, handle: toggleHandleRef }));
+    return enableMultiSelect ? (_jsx(StyledMultiTaskDialog, { ...restProps, target: target, heading: t('add_cases'), ref: pickerRef, onCancel: () => {
+            onCancel();
+        }, onSubmit: {
+            text: t('add'),
+            disabled: !selections.length,
+            handler: () => {
+                onAdd(selections);
+            }
+        }, children: pickerContent })) : (_jsxs(Flex, { ...restProps, container: { direction: 'column', gap: 1 }, as: StyledSingleTaskDialog, target: target, labelledbyId: headingId, ref: pickerRef, children: [_jsxs(Flex, { container: { justify: 'between', alignItems: 'center', pad: 1 }, children: [_jsx(Text, { id: headingId, variant: 'h2', children: t('task_manager_add_case') }), _jsx(Button, { icon: true, variant: 'simple', onClick: onCancel, label: t('close'), "aria-label": t('close_noun', [t('task_manager_add_case')]), children: _jsx(Icon, { name: 'times' }) })] }), pickerContent] }));
+});
+export default TaskPicker;
+//# sourceMappingURL=TaskPicker.js.map

package/lib/components/TaskManager/TaskPicker.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TaskPicker.js","sourceRoot":"","sources":["../../../src/components/TaskManager/TaskPicker.tsx"],"names":[],"mappings":"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","sourcesContent":["import { forwardRef, useCallback, useEffect, useRef, useState } from 'react';\nimport type { FunctionComponent, PropsWithoutRef, Ref } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport {\n  useI18n,\n  useConsolidatedRef,\n  useElement,\n  useUID,\n  useOuterEvent,\n  Flex,\n  Button,\n  Icon,\n  Text,\n  useFocusTrap,\n  useEvent,\n  FormDialog,\n  defaultThemeProp\n} from '@pega/cosmos-react-core';\nimport type {\n  ForwardProps,\n  MenuItemProps,\n  BaseProps,\n  FormDialogProps\n} from '@pega/cosmos-react-core';\nimport {\n  StyledChildrenWrap,\n  StyledDialogContent,\n  StyledDialogHeader\n} from '@pega/cosmos-react-core/lib/components/Dialog/Dialog.styles';\nimport Dialog from '@pega/cosmos-react-core/lib/components/Dialog/Dialog';\nimport { StyledMenu } from '@pega/cosmos-react-core/lib/components/Menu/Menu.styles';\n\nimport type { PickerProps, SwitchHandleValue } from '../Picker/Picker.types';\nimport Picker from '../Picker';\n\nexport interface TaskPickerProps extends BaseProps, Pick<PickerProps, 'items'> {\n  /** Callback when add button is clicked */\n  onAdd: (selections: MenuItemProps[]) => void;\n  /** Callback when cancel button is clicked */\n  onCancel: () => void;\n  /** Target for the modal */\n  target: FormDialogProps['target'];\n  /** Picker reference . */\n  ref?: Ref<HTMLDivElement>;\n}\n\nexport const StyledSingleTaskDialog: typeof Dialog = styled(Dialog)(() => {\n  return css`\n    ${StyledMenu} {\n      overflow: auto;\n    }\n  `;\n});\n\nexport const StyledMultiTaskDialog = styled(FormDialog)(\n  ({\n    theme: {\n      base: { spacing }\n    }\n  }) => {\n    return css`\n      ${StyledDialogContent},\n      ${StyledChildrenWrap} {\n        display: flex;\n      }\n\n      ${StyledDialogHeader} {\n        padding-inline: ${spacing};\n      }\n\n      ${StyledDialogContent} {\n        padding-inline: 0;\n      }\n\n      ${StyledMenu} {\n        overflow: auto;\n      }\n    `;\n  }\n);\n\nStyledMultiTaskDialog.defaultProps = defaultThemeProp;\n\nconst TaskPicker: FunctionComponent<TaskPickerProps & ForwardProps> = forwardRef(\n  function TaskPicker(\n    { items, onAdd, onCancel, target, ...restProps }: PropsWithoutRef<TaskPickerProps>,\n    ref: TaskPickerProps['ref']\n  ) {\n    const t = useI18n();\n    const headingId = useUID();\n    const [selections, setSelections] = useState<MenuItemProps[]>([]);\n    const [enableMultiSelect, setEnableMultiSelect] = useState(false);\n    const [pickerEl, setPickerEl] = useElement<HTMLDivElement>();\n    const pickerRef = useConsolidatedRef(ref, setPickerEl);\n    const initialRender = useRef(true);\n    const toggleHandleRef = useRef<SwitchHandleValue>(null);\n\n    const onSelectionChange = (selectedItems: MenuItemProps[]) => {\n      setSelections(selectedItems);\n    };\n\n    useOuterEvent('mousedown', [target, pickerRef], () => {\n      onCancel?.();\n    });\n\n    const onModeToggle = () => {\n      setSelections([]);\n      setEnableMultiSelect(curr => !curr);\n    };\n\n    useEffect(() => {\n      if (!enableMultiSelect && selections?.length) {\n        onAdd(selections);\n      }\n    }, [selections, enableMultiSelect]);\n\n    useEffect(() => {\n      if (initialRender.current) {\n        initialRender.current = false;\n      } else {\n        toggleHandleRef.current?.focusToggleSwitch();\n      }\n    }, [enableMultiSelect]);\n\n    const onKeydown = useCallback(\n      (e: KeyboardEvent) => {\n        const { key } = e;\n        if (key === 'Escape') {\n          onCancel?.();\n        }\n      },\n      [onCancel]\n    );\n\n    useFocusTrap(pickerRef, false, [onCancel, pickerEl, enableMultiSelect]);\n\n    useEvent('keydown', onKeydown, { dependencies: [pickerEl, enableMultiSelect] });\n\n    const pickerContent = (\n      <Picker\n        {...restProps}\n        contextualLabel={t('task_manager_cases').toLowerCase()}\n        items={items}\n        multiSelect={enableMultiSelect}\n        onModeToggle={onModeToggle}\n        reorderSelections\n        selections={selections}\n        onSelectionChange={onSelectionChange}\n        handle={toggleHandleRef}\n      />\n    );\n\n    return enableMultiSelect ? (\n      <StyledMultiTaskDialog\n        {...restProps}\n        target={target}\n        heading={t('add_cases')}\n        ref={pickerRef}\n        onCancel={() => {\n          onCancel();\n        }}\n        onSubmit={{\n          text: t('add'),\n          disabled: !selections.length,\n          handler: () => {\n            onAdd(selections);\n          }\n        }}\n      >\n        {pickerContent}\n      </StyledMultiTaskDialog>\n    ) : (\n      <Flex\n        {...restProps}\n        container={{ direction: 'column', gap: 1 }}\n        as={StyledSingleTaskDialog}\n        target={target}\n        labelledbyId={headingId}\n        ref={pickerRef}\n      >\n        <Flex container={{ justify: 'between', alignItems: 'center', pad: 1 }}>\n          <Text id={headingId} variant='h2'>\n            {t('task_manager_add_case')}\n          </Text>\n          <Button\n            icon\n            variant='simple'\n            onClick={onCancel}\n            label={t('close')}\n            aria-label={t('close_noun', [t('task_manager_add_case')])}\n          >\n            <Icon name='times' />\n          </Button>\n        </Flex>\n        {pickerContent}\n      </Flex>\n    );\n  }\n);\n\nexport default TaskPicker;\n"]}

package/lib/components/TaskManager/TaskView.d.ts

@@ -0,0 +1,6 @@
+import type { FunctionComponent } from 'react';
+import type { ForwardProps } from '@pega/cosmos-react-core';
+import type { TaskViewProps } from './TaskManager.types';
+declare const TaskView: FunctionComponent<TaskViewProps & ForwardProps>;
+export default TaskView;
+//# sourceMappingURL=TaskView.d.ts.map

package/lib/components/TaskManager/TaskView.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TaskView.d.ts","sourceRoot":"","sources":["../../../src/components/TaskManager/TaskView.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,iBAAiB,EAAmB,MAAM,OAAO,CAAC;AAGhE,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,yBAAyB,CAAC;AAE5D,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,qBAAqB,CAAC;AAGzD,QAAA,MAAM,QAAQ,EAAE,iBAAiB,CAAC,aAAa,GAAG,YAAY,CAc5D,CAAC;AAEH,eAAe,QAAQ,CAAC"}

package/lib/components/TaskManager/TaskView.js

@@ -0,0 +1,10 @@
+import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef } from 'react';
+import { Card, CardContent, CardHeader } from '@pega/cosmos-react-core';
+import { StyledStickyCardHeader } from './TaskManager.styles';
+const TaskView = forwardRef(function TaskView(props, ref) {
+    const { header, actions, children, ...restProps } = props;
+    return (_jsxs(Card, { ...restProps, ref: ref, children: [_jsxs(CardHeader, { as: StyledStickyCardHeader, children: [header, actions] }), _jsx(CardContent, { children: children })] }));
+});
+export default TaskView;
+//# sourceMappingURL=TaskView.js.map

package/lib/components/TaskManager/TaskView.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TaskView.js","sourceRoot":"","sources":["../../../src/components/TaskManager/TaskView.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AAGnC,OAAO,EAAE,IAAI,EAAE,WAAW,EAAE,UAAU,EAAE,MAAM,yBAAyB,CAAC;AAIxE,OAAO,EAAE,sBAAsB,EAAE,MAAM,sBAAsB,CAAC;AAE9D,MAAM,QAAQ,GAAoD,UAAU,CAAC,SAAS,QAAQ,CAC5F,KAAqC,EACrC,GAAyB;IAEzB,MAAM,EAAE,MAAM,EAAE,OAAO,EAAE,QAAQ,EAAE,GAAG,SAAS,EAAE,GAAG,KAAK,CAAC;IAC1D,OAAO,CACL,MAAC,IAAI,OAAK,SAAS,EAAE,GAAG,EAAE,GAAG,aAC3B,MAAC,UAAU,IAAC,EAAE,EAAE,sBAAsB,aACnC,MAAM,EACN,OAAO,IACG,EACb,KAAC,WAAW,cAAE,QAAQ,GAAe,IAChC,CACR,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,eAAe,QAAQ,CAAC","sourcesContent":["import { forwardRef } from 'react';\nimport type { FunctionComponent, PropsWithoutRef } from 'react';\n\nimport { Card, CardContent, CardHeader } from '@pega/cosmos-react-core';\nimport type { ForwardProps } from '@pega/cosmos-react-core';\n\nimport type { TaskViewProps } from './TaskManager.types';\nimport { StyledStickyCardHeader } from './TaskManager.styles';\n\nconst TaskView: FunctionComponent<TaskViewProps & ForwardProps> = forwardRef(function TaskView(\n  props: PropsWithoutRef<TaskViewProps>,\n  ref: TaskViewProps['ref']\n) {\n  const { header, actions, children, ...restProps } = props;\n  return (\n    <Card {...restProps} ref={ref}>\n      <CardHeader as={StyledStickyCardHeader}>\n        {header}\n        {actions}\n      </CardHeader>\n      <CardContent>{children}</CardContent>\n    </Card>\n  );\n});\n\nexport default TaskView;\n"]}

package/lib/components/TaskManager/index.d.ts

@@ -0,0 +1,5 @@
+export { default } from './TaskManager';
+export { default as TaskView } from './TaskView';
+export type { TaskManagerProps, TaskProps, TaskManagerTabsProps, TaskViewProps, DialogueProps } from './TaskManager.types';
+export { default as TaskPicker } from './TaskPicker';
+//# sourceMappingURL=index.d.ts.map

package/lib/components/TaskManager/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/TaskManager/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,eAAe,CAAC;AACxC,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,YAAY,CAAC;AACjD,YAAY,EACV,gBAAgB,EAChB,SAAS,EACT,oBAAoB,EACpB,aAAa,EACb,aAAa,EACd,MAAM,qBAAqB,CAAC;AAC7B,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,cAAc,CAAC"}

package/lib/components/TaskManager/index.js

@@ -0,0 +1,4 @@
+export { default } from './TaskManager';
+export { default as TaskView } from './TaskView';
+export { default as TaskPicker } from './TaskPicker';
+//# sourceMappingURL=index.js.map

package/lib/components/TaskManager/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/TaskManager/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,eAAe,CAAC;AACxC,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,YAAY,CAAC;AAQjD,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,cAAc,CAAC","sourcesContent":["export { default } from './TaskManager';\nexport { default as TaskView } from './TaskView';\nexport type {\n  TaskManagerProps,\n  TaskProps,\n  TaskManagerTabsProps,\n  TaskViewProps,\n  DialogueProps\n} from './TaskManager.types';\nexport { default as TaskPicker } from './TaskPicker';\n"]}

package/lib/index.d.ts

@@ -0,0 +1,13 @@
+export { default as CallControlPanel } from './components/CallControlPanel';
+export * from './components/CallControlPanel';
+export { default as CTIPanel } from './components/CTIPanel';
+export * from './components/CTIPanel';
+export { default as DialPad } from './components/DialPad';
+export * from './components/DialPad';
+export { default as InteractionNotification } from './components/InteractionNotification';
+export { default as InteractionTimer } from './components/InteractionTimer';
+export * from './components/InteractionTimer';
+export { default as Picker } from './components/Picker';
+export { default as TaskManager } from './components/TaskManager';
+export * from './components/TaskManager';
+//# sourceMappingURL=index.d.ts.map

package/lib/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,OAAO,IAAI,gBAAgB,EAAE,MAAM,+BAA+B,CAAC;AAC5E,cAAc,+BAA+B,CAAC;AAC9C,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAC5D,cAAc,uBAAuB,CAAC;AACtC,OAAO,EAAE,OAAO,IAAI,OAAO,EAAE,MAAM,sBAAsB,CAAC;AAC1D,cAAc,sBAAsB,CAAC;AACrC,OAAO,EAAE,OAAO,IAAI,uBAAuB,EAAE,MAAM,sCAAsC,CAAC;AAC1F,OAAO,EAAE,OAAO,IAAI,gBAAgB,EAAE,MAAM,+BAA+B,CAAC;AAC5E,cAAc,+BAA+B,CAAC;AAC9C,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,MAAM,qBAAqB,CAAC;AACxD,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,0BAA0B,CAAC;AAClE,cAAc,0BAA0B,CAAC"}

package/lib/index.js

@@ -0,0 +1,14 @@
+// This file is autogenerated. Any changes will be overwritten.
+export { default as CallControlPanel } from './components/CallControlPanel';
+export * from './components/CallControlPanel';
+export { default as CTIPanel } from './components/CTIPanel';
+export * from './components/CTIPanel';
+export { default as DialPad } from './components/DialPad';
+export * from './components/DialPad';
+export { default as InteractionNotification } from './components/InteractionNotification';
+export { default as InteractionTimer } from './components/InteractionTimer';
+export * from './components/InteractionTimer';
+export { default as Picker } from './components/Picker';
+export { default as TaskManager } from './components/TaskManager';
+export * from './components/TaskManager';
+//# sourceMappingURL=index.js.map

package/lib/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,+DAA+D;AAC/D,OAAO,EAAE,OAAO,IAAI,gBAAgB,EAAE,MAAM,+BAA+B,CAAC;AAC5E,cAAc,+BAA+B,CAAC;AAC9C,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAC5D,cAAc,uBAAuB,CAAC;AACtC,OAAO,EAAE,OAAO,IAAI,OAAO,EAAE,MAAM,sBAAsB,CAAC;AAC1D,cAAc,sBAAsB,CAAC;AACrC,OAAO,EAAE,OAAO,IAAI,uBAAuB,EAAE,MAAM,sCAAsC,CAAC;AAC1F,OAAO,EAAE,OAAO,IAAI,gBAAgB,EAAE,MAAM,+BAA+B,CAAC;AAC5E,cAAc,+BAA+B,CAAC;AAC9C,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,MAAM,qBAAqB,CAAC;AACxD,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,0BAA0B,CAAC;AAClE,cAAc,0BAA0B,CAAC","sourcesContent":["// This file is autogenerated. Any changes will be overwritten.\nexport { default as CallControlPanel } from './components/CallControlPanel';\nexport * from './components/CallControlPanel';\nexport { default as CTIPanel } from './components/CTIPanel';\nexport * from './components/CTIPanel';\nexport { default as DialPad } from './components/DialPad';\nexport * from './components/DialPad';\nexport { default as InteractionNotification } from './components/InteractionNotification';\nexport { default as InteractionTimer } from './components/InteractionTimer';\nexport * from './components/InteractionTimer';\nexport { default as Picker } from './components/Picker';\nexport { default as TaskManager } from './components/TaskManager';\nexport * from './components/TaskManager';\n"]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pega/cosmos-react-cs",
-  "version": "5.0.0-dev.4.9",
+  "version": "5.0.0-dev.6.0",
   "repository": {
     "type": "git",
     "url": "https://github.com/pegasystems/cosmos-react.git",
@@ -20,8 +20,8 @@
     "build": "tsc -b"
   },
   "dependencies": {
-    "@pega/cosmos-react-core": "5.0.0-dev.4.9",
-    "@pega/cosmos-react-dnd": "5.0.0-dev.4.9",
+    "@pega/cosmos-react-core": "5.0.0-dev.6.0",
+    "@pega/cosmos-react-dnd": "5.0.0-dev.6.0",
     "@types/react": "^17.0.62",
     "@types/react-dom": "^17.0.20",
     "@types/styled-components": "^5.1.26",