@pega/cosmos-react-cs 2.0.0-dev.2.1 → 2.0.0-dev.20.0

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

@@ -5,12 +5,12 @@ export interface TaskManagerProps extends BaseProps {
     ref?: Ref<HTMLDivElement>;
     /** List of tasks */
     tasks?: TaskProps[];
-    /** Empty text to be shown when no tasks are adedd */
+    /** Empty text to be shown when no tasks are added */
     emptyText?: string;
     /** Callback when task is launched */
-    onLaunchTask?: (id: TaskProps['id']) => void;
+    onTaskLaunch?: (id: TaskProps['id']) => void;
     /** Callback when task is dismissed. Applicable only when task is not launched previously */
-    onDismissTask?: (id: TaskProps['id']) => void;
+    onTaskDismiss?: (id: TaskProps['id']) => void;
     /** Add task utility */
     addTask?: Pick<PickerProps, 'items' | 'onAdd' | 'ref'>;
     /** Banner for the task manager */
@@ -26,13 +26,19 @@ export interface TaskManagerProps extends BaseProps {
         onWrapUp: () => void;
         /** Determines if wrap up is active */
         active?: boolean;
+        /** Determines if wrap up tab should be shown or not */
+        showTab?: boolean;
     };
     /** Selected task content */
     main?: ReactNode;
 }
-export interface TaskDrawerProps {
+export interface TaskManagerTabsProps {
     ref?: Ref<HTMLDivElement>;
 }
+export interface TaskManagerTabProps {
+    active?: boolean;
+    variant?: string;
+}
 export interface TaskViewProps extends BaseProps {
     ref?: Ref<HTMLDivElement>;
     /** Task header */
@@ -42,7 +48,7 @@ export interface TaskViewProps extends BaseProps {
     /** Task form content */
     children: ReactNode;
 }
-export interface TaskManagerContextProps extends Pick<TaskManagerProps, 'tasks' | 'addTask' | 'onLaunchTask' | 'wrapUp'> {
+export interface TaskManagerContextProps extends Pick<TaskManagerProps, 'tasks' | 'addTask' | 'onTaskLaunch' | 'wrapUp'> {
 }
 export interface TaskProps {
     /** Unique id for tasks list */
@@ -56,7 +62,7 @@ export interface TaskProps {
     /** Determines the active task */
     active?: boolean;
     /** Variant of the task */
-    variant: 'suggested' | 'queued' | 'in-progress' | 'resolved';
+    variant: 'suggested' | 'queued' | 'in-progress' | 'resolved' | 'cancelled' | 'open';
     /** Represents the current status of task(like resolved-completed, InProgress etc) */
     status?: {
         /** Status text */

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

@@ -1 +1 @@
-{"version":3,"file":"TaskManager.types.d.ts","sourceRoot":"","sources":["../../../src/components/TaskManager/TaskManager.types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,GAAG,EAAE,MAAM,OAAO,CAAC;AAEvC,OAAO,EAAE,SAAS,EAAE,WAAW,EAAE,MAAM,yBAAyB,CAAC;AAEjE,OAAO,EAAE,WAAW,EAAE,MAAM,uBAAuB,CAAC;AAEpD,MAAM,WAAW,gBAAiB,SAAQ,SAAS;IACjD,GAAG,CAAC,EAAE,GAAG,CAAC,cAAc,CAAC,CAAC;IAC1B,oBAAoB;IACpB,KAAK,CAAC,EAAE,SAAS,EAAE,CAAC;IACpB,qDAAqD;IACrD,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,qCAAqC;IACrC,YAAY,CAAC,EAAE,CAAC,EAAE,EAAE,SAAS,CAAC,IAAI,CAAC,KAAK,IAAI,CAAC;IAC7C,4FAA4F;IAC5F,aAAa,CAAC,EAAE,CAAC,EAAE,EAAE,SAAS,CAAC,IAAI,CAAC,KAAK,IAAI,CAAC;IAC9C,uBAAuB;IACvB,OAAO,CAAC,EAAE,IAAI,CAAC,WAAW,EAAE,OAAO,GAAG,OAAO,GAAG,KAAK,CAAC,CAAC;IACvD,kCAAkC;IAClC,MAAM,CAAC,EAAE;QACP,0BAA0B;QAC1B,IAAI,EAAE,MAAM,CAAC;QACb,qBAAqB;QACrB,OAAO,EAAE,MAAM,CAAC;KACjB,CAAC;IACF,uCAAuC;IACvC,MAAM,CAAC,EAAE;QACP,yCAAyC;QACzC,QAAQ,EAAE,MAAM,IAAI,CAAC;QACrB,sCAAsC;QACtC,MAAM,CAAC,EAAE,OAAO,CAAC;KAClB,CAAC;IACF,4BAA4B;IAC5B,IAAI,CAAC,EAAE,SAAS,CAAC;CAClB;AAED,MAAM,WAAW,eAAe;IAC9B,GAAG,CAAC,EAAE,GAAG,CAAC,cAAc,CAAC,CAAC;CAC3B;AAED,MAAM,WAAW,aAAc,SAAQ,SAAS;IAC9C,GAAG,CAAC,EAAE,GAAG,CAAC,cAAc,CAAC,CAAC;IAC1B,kBAAkB;IAClB,MAAM,EAAE,SAAS,CAAC;IAClB,4BAA4B;IAC5B,OAAO,CAAC,EAAE,SAAS,CAAC;IACpB,wBAAwB;IACxB,QAAQ,EAAE,SAAS,CAAC;CACrB;AAED,MAAM,WAAW,uBACf,SAAQ,IAAI,CAAC,gBAAgB,EAAE,OAAO,GAAG,SAAS,GAAG,cAAc,GAAG,QAAQ,CAAC;CAAG;AAEpF,MAAM,WAAW,SAAS;IACxB,+BAA+B;IAC/B,EAAE,EAAE,MAAM,CAAC;IACX,uBAAuB;IACvB,IAAI,EAAE,MAAM,CAAC;IACb,4CAA4C;IAC5C,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,mEAAmE;IACnE,IAAI,EAAE,MAAM,CAAC;IACb,iCAAiC;IACjC,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,0BAA0B;IAC1B,OAAO,EAAE,WAAW,GAAG,QAAQ,GAAG,aAAa,GAAG,UAAU,CAAC;IAC7D,qFAAqF;IACrF,MAAM,CAAC,EAAE;QACP,kBAAkB;QAClB,IAAI,EAAE,MAAM,CAAC;QACb,qBAAqB;QACrB,OAAO,EAAE,WAAW,CAAC,SAAS,CAAC,CAAC;KACjC,CAAC;CACH"}
+{"version":3,"file":"TaskManager.types.d.ts","sourceRoot":"","sources":["../../../src/components/TaskManager/TaskManager.types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,GAAG,EAAE,MAAM,OAAO,CAAC;AAEvC,OAAO,EAAE,SAAS,EAAE,WAAW,EAAE,MAAM,yBAAyB,CAAC;AAEjE,OAAO,EAAE,WAAW,EAAE,MAAM,uBAAuB,CAAC;AAEpD,MAAM,WAAW,gBAAiB,SAAQ,SAAS;IACjD,GAAG,CAAC,EAAE,GAAG,CAAC,cAAc,CAAC,CAAC;IAC1B,oBAAoB;IACpB,KAAK,CAAC,EAAE,SAAS,EAAE,CAAC;IACpB,qDAAqD;IACrD,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,qCAAqC;IACrC,YAAY,CAAC,EAAE,CAAC,EAAE,EAAE,SAAS,CAAC,IAAI,CAAC,KAAK,IAAI,CAAC;IAC7C,4FAA4F;IAC5F,aAAa,CAAC,EAAE,CAAC,EAAE,EAAE,SAAS,CAAC,IAAI,CAAC,KAAK,IAAI,CAAC;IAC9C,uBAAuB;IACvB,OAAO,CAAC,EAAE,IAAI,CAAC,WAAW,EAAE,OAAO,GAAG,OAAO,GAAG,KAAK,CAAC,CAAC;IACvD,kCAAkC;IAClC,MAAM,CAAC,EAAE;QACP,0BAA0B;QAC1B,IAAI,EAAE,MAAM,CAAC;QACb,qBAAqB;QACrB,OAAO,EAAE,MAAM,CAAC;KACjB,CAAC;IACF,uCAAuC;IACvC,MAAM,CAAC,EAAE;QACP,yCAAyC;QACzC,QAAQ,EAAE,MAAM,IAAI,CAAC;QACrB,sCAAsC;QACtC,MAAM,CAAC,EAAE,OAAO,CAAC;QACjB,uDAAuD;QACvD,OAAO,CAAC,EAAE,OAAO,CAAC;KACnB,CAAC;IACF,4BAA4B;IAC5B,IAAI,CAAC,EAAE,SAAS,CAAC;CAClB;AAED,MAAM,WAAW,oBAAoB;IACnC,GAAG,CAAC,EAAE,GAAG,CAAC,cAAc,CAAC,CAAC;CAC3B;AAED,MAAM,WAAW,mBAAmB;IAClC,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB;AACD,MAAM,WAAW,aAAc,SAAQ,SAAS;IAC9C,GAAG,CAAC,EAAE,GAAG,CAAC,cAAc,CAAC,CAAC;IAC1B,kBAAkB;IAClB,MAAM,EAAE,SAAS,CAAC;IAClB,4BAA4B;IAC5B,OAAO,CAAC,EAAE,SAAS,CAAC;IACpB,wBAAwB;IACxB,QAAQ,EAAE,SAAS,CAAC;CACrB;AAED,MAAM,WAAW,uBACf,SAAQ,IAAI,CAAC,gBAAgB,EAAE,OAAO,GAAG,SAAS,GAAG,cAAc,GAAG,QAAQ,CAAC;CAAG;AAEpF,MAAM,WAAW,SAAS;IACxB,+BAA+B;IAC/B,EAAE,EAAE,MAAM,CAAC;IACX,uBAAuB;IACvB,IAAI,EAAE,MAAM,CAAC;IACb,4CAA4C;IAC5C,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,mEAAmE;IACnE,IAAI,EAAE,MAAM,CAAC;IACb,iCAAiC;IACjC,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,0BAA0B;IAC1B,OAAO,EAAE,WAAW,GAAG,QAAQ,GAAG,aAAa,GAAG,UAAU,GAAG,WAAW,GAAG,MAAM,CAAC;IACpF,qFAAqF;IACrF,MAAM,CAAC,EAAE;QACP,kBAAkB;QAClB,IAAI,EAAE,MAAM,CAAC;QACb,qBAAqB;QACrB,OAAO,EAAE,WAAW,CAAC,SAAS,CAAC,CAAC;KACjC,CAAC;CACH"}

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

@@ -1 +1 @@
-{"version":3,"file":"TaskManager.types.js","sourceRoot":"","sources":["../../../src/components/TaskManager/TaskManager.types.ts"],"names":[],"mappings":"","sourcesContent":["import { ReactNode, Ref } from 'react';\n\nimport { BaseProps, StatusProps } from '@pega/cosmos-react-core';\n\nimport { PickerProps } from './Picker/Picker.types';\n\nexport interface TaskManagerProps extends BaseProps {\n  ref?: Ref<HTMLDivElement>;\n  /** List of tasks */\n  tasks?: TaskProps[];\n  /** Empty text to be shown when no tasks are adedd */\n  emptyText?: string;\n  /** Callback when task is launched */\n  onLaunchTask?: (id: TaskProps['id']) => void;\n  /** Callback when task is dismissed. Applicable only when task is not launched previously */\n  onDismissTask?: (id: TaskProps['id']) => void;\n  /** Add task utility */\n  addTask?: Pick<PickerProps, 'items' | 'onAdd' | 'ref'>;\n  /** Banner for the task manager */\n  banner?: {\n    /** Icon for the banner */\n    icon: string;\n    /** Banner content */\n    content: string;\n  };\n  /** Shows wrap up action when passed */\n  wrapUp?: {\n    /** Callback when wrap up is performed */\n    onWrapUp: () => void;\n    /** Determines if wrap up is active */\n    active?: boolean;\n  };\n  /** Selected task content */\n  main?: ReactNode;\n}\n\nexport interface TaskDrawerProps {\n  ref?: Ref<HTMLDivElement>;\n}\n\nexport interface TaskViewProps extends BaseProps {\n  ref?: Ref<HTMLDivElement>;\n  /** Task header */\n  header: ReactNode;\n  /** Task specific actions */\n  actions?: ReactNode;\n  /** Task form content */\n  children: ReactNode;\n}\n\nexport interface TaskManagerContextProps\n  extends Pick<TaskManagerProps, 'tasks' | 'addTask' | 'onLaunchTask' | 'wrapUp'> {}\n\nexport interface TaskProps {\n  /** Unique id for tasks list */\n  id: string;\n  /** Name of the task */\n  name: string;\n  /** Meta info of the task ex: Queued task */\n  meta?: string;\n  /** Name of the icon (to be selected from default Pega icon set) */\n  icon: string;\n  /** Determines the active task */\n  active?: boolean;\n  /** Variant of the task */\n  variant: 'suggested' | 'queued' | 'in-progress' | 'resolved';\n  /** Represents the current status of task(like resolved-completed, InProgress etc) */\n  status?: {\n    /** Status text */\n    text: string;\n    /** Status variant */\n    variant: StatusProps['variant'];\n  };\n}\n"]}
+{"version":3,"file":"TaskManager.types.js","sourceRoot":"","sources":["../../../src/components/TaskManager/TaskManager.types.ts"],"names":[],"mappings":"","sourcesContent":["import { ReactNode, Ref } from 'react';\n\nimport { BaseProps, StatusProps } from '@pega/cosmos-react-core';\n\nimport { PickerProps } from './Picker/Picker.types';\n\nexport interface TaskManagerProps extends BaseProps {\n  ref?: Ref<HTMLDivElement>;\n  /** List of tasks */\n  tasks?: TaskProps[];\n  /** Empty text to be shown when no tasks are added */\n  emptyText?: string;\n  /** Callback when task is launched */\n  onTaskLaunch?: (id: TaskProps['id']) => void;\n  /** Callback when task is dismissed. Applicable only when task is not launched previously */\n  onTaskDismiss?: (id: TaskProps['id']) => void;\n  /** Add task utility */\n  addTask?: Pick<PickerProps, 'items' | 'onAdd' | 'ref'>;\n  /** Banner for the task manager */\n  banner?: {\n    /** Icon for the banner */\n    icon: string;\n    /** Banner content */\n    content: string;\n  };\n  /** Shows wrap up action when passed */\n  wrapUp?: {\n    /** Callback when wrap up is performed */\n    onWrapUp: () => void;\n    /** Determines if wrap up is active */\n    active?: boolean;\n    /** Determines if wrap up tab should be shown or not */\n    showTab?: boolean;\n  };\n  /** Selected task content */\n  main?: ReactNode;\n}\n\nexport interface TaskManagerTabsProps {\n  ref?: Ref<HTMLDivElement>;\n}\n\nexport interface TaskManagerTabProps {\n  active?: boolean;\n  variant?: string;\n}\nexport interface TaskViewProps extends BaseProps {\n  ref?: Ref<HTMLDivElement>;\n  /** Task header */\n  header: ReactNode;\n  /** Task specific actions */\n  actions?: ReactNode;\n  /** Task form content */\n  children: ReactNode;\n}\n\nexport interface TaskManagerContextProps\n  extends Pick<TaskManagerProps, 'tasks' | 'addTask' | 'onTaskLaunch' | 'wrapUp'> {}\n\nexport interface TaskProps {\n  /** Unique id for tasks list */\n  id: string;\n  /** Name of the task */\n  name: string;\n  /** Meta info of the task ex: Queued task */\n  meta?: string;\n  /** Name of the icon (to be selected from default Pega icon set) */\n  icon: string;\n  /** Determines the active task */\n  active?: boolean;\n  /** Variant of the task */\n  variant: 'suggested' | 'queued' | 'in-progress' | 'resolved' | 'cancelled' | 'open';\n  /** Represents the current status of task(like resolved-completed, InProgress etc) */\n  status?: {\n    /** Status text */\n    text: string;\n    /** Status variant */\n    variant: StatusProps['variant'];\n  };\n}\n"]}

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"TaskManagerTabs.d.ts","sourceRoot":"","sources":["../../../src/components/TaskManager/TaskManagerTabs.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,iBAAiB,EAYlB,MAAM,OAAO,CAAC;AAEf,OAAO,EAAQ,YAAY,EAAgB,MAAM,yBAAyB,CAAC;AAY3E,OAAO,EAAE,oBAAoB,EAAE,MAAM,qBAAqB,CAAC;AAE3D,QAAA,MAAM,eAAe,EAAE,iBAAiB,CAAC,oBAAoB,GAAG,YAAY,CA0N3E,CAAC;AAEF,eAAe,eAAe,CAAC"}

package/lib/components/TaskManager/TaskManagerTabs.js

@@ -0,0 +1,159 @@
+import { createElement as _createElement } from "react";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { forwardRef, useContext, createRef, useMemo, useRef, useEffect, useState, useLayoutEffect } from 'react';
+import { Flex, useDirection } from '@pega/cosmos-react-core';
+import { useI18n } from '@pega/cosmos-react-core/lib/hooks';
+import { StyledTaskManagerTabs, StyleTaskName, StyledTaskStatus, StyledTasksTabList, StyledTaskManagerTab, StyledOverflowTabMenu } from './TaskManager.styles';
+import TaskManagerContext from './TaskManager.context';
+const TaskManagerTabs = forwardRef((props, ref) => {
+    const { wrapUp, tasks = [], onTaskLaunch } = useContext(TaskManagerContext);
+    const t = useI18n();
+    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 { rtl } = useDirection();
+    const menuTasksArr = useMemo(() => {
+        const tasksData = tasks.map(task => {
+            return {
+                primary: task.name,
+                secondary: [
+                    _jsx(StyledTaskStatus, { variant: task.status?.variant || 'info', children: task.variant }, void 0)
+                ],
+                id: task.id,
+                selected: !!task.active,
+                onClick: () => {
+                    onTaskLaunch?.(task.id);
+                }
+            };
+        });
+        if (wrapUp?.showTab) {
+            tasksData.push({
+                primary: t('task_manager_wrap_up'),
+                secondary: [],
+                id: '',
+                selected: !!wrapUp.active,
+                onClick: () => {
+                    wrapUp?.onWrapUp();
+                }
+            });
+        }
+        return tasksData;
+    }, [wrapUp?.showTab, wrapUp?.onWrapUp, wrapUp?.active, tasks]);
+    const tabListRef = useRef(null);
+    const checkAndUpdateIsOverflowing = () => {
+        if (tabListRef.current) {
+            const value = tabListRef.current.scrollWidth > tabListRef.current.clientWidth;
+            if (value !== isOverflowing) {
+                setIsOverflowing(value);
+                return value;
+            }
+        }
+        return isOverflowing;
+    };
+    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 (tasks.length) {
+            const { key } = event;
+            if (key === 'ArrowRight' || key === 'ArrowDown') {
+                event.preventDefault();
+                let nextIndex;
+                if (wrapUpRef?.current === event.currentTarget) {
+                    nextIndex = 0;
+                }
+                else {
+                    if (index === tasks.length - 1 && wrapUp?.showTab) {
+                        wrapUpRef?.current?.focus();
+                        return;
+                    }
+                    nextIndex = index + 1 < tasks.length ? index + 1 : 0;
+                }
+                activeIndex = nextIndex;
+                const nextTab = tabRefs[nextIndex]?.current;
+                nextTab?.focus();
+            }
+            else if (key === 'ArrowLeft' || key === 'ArrowUp') {
+                event.preventDefault();
+                let prevIndex;
+                if (wrapUpRef?.current === event.currentTarget) {
+                    prevIndex = tasks.length - 1;
+                }
+                else {
+                    if (index === 0 && wrapUp?.showTab) {
+                        wrapUpRef?.current?.focus();
+                        return;
+                    }
+                    prevIndex = index === 0 ? tasks.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?.onWrapUp();
+                    return;
+                }
+                onTaskLaunch?.(tasks[activeIndex].id);
+            }
+        }
+    };
+    return (_jsx(Flex, { container: true, as: StyledTaskManagerTabs, ref: ref, children: tasks.length > 0 && (_jsxs(_Fragment, { children: [_jsxs(StyledTasksTabList, { role: 'tablist', ref: tabListRef, children: [tasks.map((task, i) => {
+                            const { id, active = false, variant, status, icon, meta, ...restProps } = task;
+                            return (_createElement(StyledTaskManagerTab, { ...restProps, ref: tabRefs[i], key: id, onClick: () => onTaskLaunch?.(id), "aria-selected": active, 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, variant: variant },
+                                _jsxs(Flex, { container: { justify: 'start', gap: 1, alignItems: 'center' }, children: [_jsx(StyleTaskName, { children: task.name }, void 0), _jsx(StyledTaskStatus, { variant: task.status?.variant || 'info', children: variant }, void 0)] }, void 0)));
+                        }), wrapUp?.showTab && (_jsx(StyledTaskManagerTab, { onClick: wrapUp.onWrapUp, variant: 'wrap-up', "aria-selected": wrapUp.active, 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') }, void 0) }, void 0))] }, void 0), isOverflowing && (_jsx(StyledOverflowTabMenu, { menu: {
+                        items: menuTasksArr,
+                        mode: 'single-select'
+                    }, icon: 'caret-down', iconOnly: true, variant: 'text', text: t('task_manager_overflow_menu') }, void 0))] }, void 0)) }, void 0));
+});
+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":"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","sourcesContent":["import {\n  FunctionComponent,\n  forwardRef,\n  useContext,\n  createRef,\n  RefObject,\n  KeyboardEvent,\n  useMemo,\n  PropsWithoutRef,\n  useRef,\n  useEffect,\n  useState,\n  useLayoutEffect\n} from 'react';\n\nimport { Flex, ForwardProps, useDirection } from '@pega/cosmos-react-core';\nimport { useI18n } from '@pega/cosmos-react-core/lib/hooks';\n\nimport {\n  StyledTaskManagerTabs,\n  StyleTaskName,\n  StyledTaskStatus,\n  StyledTasksTabList,\n  StyledTaskManagerTab,\n  StyledOverflowTabMenu\n} from './TaskManager.styles';\nimport TaskManagerContext from './TaskManager.context';\nimport { TaskManagerTabsProps } from './TaskManager.types';\n\nconst TaskManagerTabs: FunctionComponent<TaskManagerTabsProps & ForwardProps> = forwardRef(\n  (props: PropsWithoutRef<TaskManagerTabsProps>, ref: TaskManagerTabsProps['ref']) => {\n    const { wrapUp, tasks = [], onTaskLaunch } = useContext(TaskManagerContext);\n    const t = useI18n();\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 { rtl } = useDirection();\n    const menuTasksArr = useMemo(() => {\n      const tasksData = tasks.map(task => {\n        return {\n          primary: task.name,\n          secondary: [\n            <StyledTaskStatus variant={task.status?.variant || 'info'}>\n              {task.variant}\n            </StyledTaskStatus>\n          ],\n          id: task.id,\n          selected: !!task.active,\n          onClick: () => {\n            onTaskLaunch?.(task.id);\n          }\n        };\n      });\n\n      if (wrapUp?.showTab) {\n        tasksData.push({\n          primary: t('task_manager_wrap_up'),\n          secondary: [],\n          id: '',\n          selected: !!wrapUp.active,\n          onClick: () => {\n            wrapUp?.onWrapUp();\n          }\n        });\n      }\n\n      return tasksData;\n    }, [wrapUp?.showTab, wrapUp?.onWrapUp, wrapUp?.active, tasks]);\n\n    const tabListRef = useRef<HTMLUListElement>(null);\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      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 (tasks.length) {\n        const { key } = event;\n        if (key === 'ArrowRight' || key === 'ArrowDown') {\n          event.preventDefault();\n          let nextIndex;\n          if (wrapUpRef?.current === event.currentTarget) {\n            nextIndex = 0;\n          } else {\n            if (index === tasks.length - 1 && wrapUp?.showTab) {\n              wrapUpRef?.current?.focus();\n              return;\n            }\n            nextIndex = index! + 1 < tasks.length ? index! + 1 : 0;\n          }\n          activeIndex = nextIndex;\n          const nextTab = tabRefs[nextIndex]?.current;\n          nextTab?.focus();\n        } else if (key === 'ArrowLeft' || key === 'ArrowUp') {\n          event.preventDefault();\n          let prevIndex;\n          if (wrapUpRef?.current === event.currentTarget) {\n            prevIndex = tasks.length - 1;\n          } else {\n            if (index === 0 && wrapUp?.showTab) {\n              wrapUpRef?.current?.focus();\n              return;\n            }\n            prevIndex = index === 0 ? tasks.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?.onWrapUp();\n            return;\n          }\n          onTaskLaunch?.(tasks[activeIndex!].id);\n        }\n      }\n    };\n\n    return (\n      <Flex container as={StyledTaskManagerTabs} ref={ref}>\n        {tasks.length > 0 && (\n          <>\n            <StyledTasksTabList role='tablist' ref={tabListRef}>\n              {tasks.map((task, i) => {\n                const { id, active = false, variant, status, icon, meta, ...restProps } = task;\n                return (\n                  <StyledTaskManagerTab\n                    {...restProps}\n                    ref={tabRefs[i]}\n                    key={id}\n                    onClick={() => onTaskLaunch?.(id)}\n                    aria-selected={active}\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                    variant={variant}\n                  >\n                    <Flex container={{ justify: 'start', gap: 1, alignItems: 'center' }}>\n                      <StyleTaskName>{task.name}</StyleTaskName>\n                      <StyledTaskStatus variant={task.status?.variant || 'info'}>\n                        {variant}\n                      </StyledTaskStatus>\n                    </Flex>\n                  </StyledTaskManagerTab>\n                );\n              })}\n              {wrapUp?.showTab && (\n                <StyledTaskManagerTab\n                  onClick={wrapUp.onWrapUp}\n                  variant='wrap-up'\n                  aria-selected={wrapUp.active}\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            {isOverflowing && (\n              <StyledOverflowTabMenu\n                menu={{\n                  items: menuTasksArr,\n                  mode: 'single-select'\n                }}\n                icon='caret-down'\n                iconOnly\n                variant='text'\n                text={t('task_manager_overflow_menu')}\n              />\n            )}\n          </>\n        )}\n      </Flex>\n    );\n  }\n);\n\nexport default TaskManagerTabs;\n"]}

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

@@ -1 +1 @@
-{"version":3,"file":"TaskView.d.ts","sourceRoot":"","sources":["../../../src/components/TaskManager/TaskView.tsx"],"names":[],"mappings":"AAAA,OAAc,EAAE,iBAAiB,EAA+B,MAAM,OAAO,CAAC;AAE9E,OAAO,EAAiC,YAAY,EAAE,MAAM,yBAAyB,CAAC;AAEtF,OAAO,EAAE,aAAa,EAAE,MAAM,qBAAqB,CAAC;AAGpD,QAAA,MAAM,QAAQ,EAAE,iBAAiB,CAAC,aAAa,GAAG,YAAY,CAa7D,CAAC;AAEF,eAAe,QAAQ,CAAC"}
+{"version":3,"file":"TaskView.d.ts","sourceRoot":"","sources":["../../../src/components/TaskManager/TaskView.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAA+B,MAAM,OAAO,CAAC;AAEvE,OAAO,EAAiC,YAAY,EAAE,MAAM,yBAAyB,CAAC;AAEtF,OAAO,EAAE,aAAa,EAAE,MAAM,qBAAqB,CAAC;AAGpD,QAAA,MAAM,QAAQ,EAAE,iBAAiB,CAAC,aAAa,GAAG,YAAY,CAa7D,CAAC;AAEF,eAAe,QAAQ,CAAC"}

package/lib/components/TaskManager/TaskView.js

@@ -1,13 +1,10 @@
-import React, { forwardRef } from 'react';
+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((props, ref) => {
     const { header, actions, children, ...restProps } = props;
-    return (React.createElement(Card, { ...restProps, ref: ref },
-        React.createElement(CardHeader, { as: StyledStickyCardHeader },
-            header,
-            actions),
-        React.createElement(CardContent, null, children)));
+    return (_jsxs(Card, { ...restProps, ref: ref, children: [_jsxs(CardHeader, { as: StyledStickyCardHeader, children: [header, actions] }, void 0), _jsx(CardContent, { children: children }, void 0)] }, void 0));
 });
 export default TaskView;
 //# sourceMappingURL=TaskView.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"TaskView.js","sourceRoot":"","sources":["../../../src/components/TaskManager/TaskView.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAqB,UAAU,EAAmB,MAAM,OAAO,CAAC;AAE9E,OAAO,EAAE,IAAI,EAAE,WAAW,EAAE,UAAU,EAAgB,MAAM,yBAAyB,CAAC;AAGtF,OAAO,EAAE,sBAAsB,EAAE,MAAM,sBAAsB,CAAC;AAE9D,MAAM,QAAQ,GAAoD,UAAU,CAC1E,CAAC,KAAqC,EAAE,GAAyB,EAAE,EAAE;IACnE,MAAM,EAAE,MAAM,EAAE,OAAO,EAAE,QAAQ,EAAE,GAAG,SAAS,EAAE,GAAG,KAAK,CAAC;IAC1D,OAAO,CACL,oBAAC,IAAI,OAAK,SAAS,EAAE,GAAG,EAAE,GAAG;QAC3B,oBAAC,UAAU,IAAC,EAAE,EAAE,sBAAsB;YACnC,MAAM;YACN,OAAO,CACG;QACb,oBAAC,WAAW,QAAE,QAAQ,CAAe,CAChC,CACR,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,eAAe,QAAQ,CAAC","sourcesContent":["import React, { FunctionComponent, forwardRef, PropsWithoutRef } from 'react';\n\nimport { Card, CardContent, CardHeader, ForwardProps } from '@pega/cosmos-react-core';\n\nimport { TaskViewProps } from './TaskManager.types';\nimport { StyledStickyCardHeader } from './TaskManager.styles';\n\nconst TaskView: FunctionComponent<TaskViewProps & ForwardProps> = forwardRef(\n  (props: PropsWithoutRef<TaskViewProps>, ref: TaskViewProps['ref']) => {\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);\n\nexport default TaskView;\n"]}
+{"version":3,"file":"TaskView.js","sourceRoot":"","sources":["../../../src/components/TaskManager/TaskView.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAqB,UAAU,EAAmB,MAAM,OAAO,CAAC;AAEvE,OAAO,EAAE,IAAI,EAAE,WAAW,EAAE,UAAU,EAAgB,MAAM,yBAAyB,CAAC;AAGtF,OAAO,EAAE,sBAAsB,EAAE,MAAM,sBAAsB,CAAC;AAE9D,MAAM,QAAQ,GAAoD,UAAU,CAC1E,CAAC,KAAqC,EAAE,GAAyB,EAAE,EAAE;IACnE,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,YACG,EACb,KAAC,WAAW,cAAE,QAAQ,WAAe,YAChC,CACR,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,eAAe,QAAQ,CAAC","sourcesContent":["import { FunctionComponent, forwardRef, PropsWithoutRef } from 'react';\n\nimport { Card, CardContent, CardHeader, ForwardProps } from '@pega/cosmos-react-core';\n\nimport { TaskViewProps } from './TaskManager.types';\nimport { StyledStickyCardHeader } from './TaskManager.styles';\n\nconst TaskView: FunctionComponent<TaskViewProps & ForwardProps> = forwardRef(\n  (props: PropsWithoutRef<TaskViewProps>, ref: TaskViewProps['ref']) => {\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);\n\nexport default TaskView;\n"]}

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

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

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

@@ -1 +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,OAAO,EAAE,gBAAgB,EAAE,SAAS,EAAE,eAAe,EAAE,aAAa,EAAE,MAAM,qBAAqB,CAAC;AAClG,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,MAAM,iBAAiB,CAAC"}
+{"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,OAAO,EACL,gBAAgB,EAChB,SAAS,EACT,oBAAoB,EACpB,aAAa,EACd,MAAM,qBAAqB,CAAC;AAC7B,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,MAAM,iBAAiB,CAAC"}

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

@@ -1 +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;AAEjD,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,MAAM,iBAAiB,CAAC","sourcesContent":["export { default } from './TaskManager';\nexport { default as TaskView } from './TaskView';\nexport { TaskManagerProps, TaskProps, TaskDrawerProps, TaskViewProps } from './TaskManager.types';\nexport { default as Picker } from './Picker/Picker';\n"]}
+{"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;AAOjD,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,MAAM,iBAAiB,CAAC","sourcesContent":["export { default } from './TaskManager';\nexport { default as TaskView } from './TaskView';\nexport {\n  TaskManagerProps,\n  TaskProps,\n  TaskManagerTabsProps,\n  TaskViewProps\n} from './TaskManager.types';\nexport { default as Picker } from './Picker/Picker';\n"]}

package/lib/index.d.ts

@@ -2,6 +2,12 @@ export { default as Article } from './components/Article';
 export * from './components/Article';
 export { default as ArticleList } from './components/ArticleList';
 export * from './components/ArticleList';
+export { default as CallControlPanel } from './components/CallControlPanel';
+export * from './components/CallControlPanel';
+export { default as CSCaseView } from './components/CSCaseView';
+export * from './components/CSCaseView';
+export { default as IntelligentGuidance } from './components/IntelligentGuidance';
+export * from './components/IntelligentGuidance';
 export { default as InteractionNotification } from './components/InteractionNotification';
 export { default as InteractionTimer } from './components/InteractionTimer';
 export { default as TaskManager } from './components/TaskManager';

package/lib/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,OAAO,IAAI,OAAO,EAAE,MAAM,sBAAsB,CAAC;AAC1D,cAAc,sBAAsB,CAAC;AACrC,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,0BAA0B,CAAC;AAClE,cAAc,0BAA0B,CAAC;AACzC,OAAO,EAAE,OAAO,IAAI,uBAAuB,EAAE,MAAM,sCAAsC,CAAC;AAC1F,OAAO,EAAE,OAAO,IAAI,gBAAgB,EAAE,MAAM,+BAA+B,CAAC;AAC5E,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,0BAA0B,CAAC;AAClE,cAAc,0BAA0B,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,OAAO,IAAI,OAAO,EAAE,MAAM,sBAAsB,CAAC;AAC1D,cAAc,sBAAsB,CAAC;AACrC,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,0BAA0B,CAAC;AAClE,cAAc,0BAA0B,CAAC;AACzC,OAAO,EAAE,OAAO,IAAI,gBAAgB,EAAE,MAAM,+BAA+B,CAAC;AAC5E,cAAc,+BAA+B,CAAC;AAC9C,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,yBAAyB,CAAC;AAChE,cAAc,yBAAyB,CAAC;AACxC,OAAO,EAAE,OAAO,IAAI,mBAAmB,EAAE,MAAM,kCAAkC,CAAC;AAClF,cAAc,kCAAkC,CAAC;AACjD,OAAO,EAAE,OAAO,IAAI,uBAAuB,EAAE,MAAM,sCAAsC,CAAC;AAC1F,OAAO,EAAE,OAAO,IAAI,gBAAgB,EAAE,MAAM,+BAA+B,CAAC;AAC5E,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,0BAA0B,CAAC;AAClE,cAAc,0BAA0B,CAAC"}

package/lib/index.js

@@ -3,6 +3,12 @@ export { default as Article } from './components/Article';
 export * from './components/Article';
 export { default as ArticleList } from './components/ArticleList';
 export * from './components/ArticleList';
+export { default as CallControlPanel } from './components/CallControlPanel';
+export * from './components/CallControlPanel';
+export { default as CSCaseView } from './components/CSCaseView';
+export * from './components/CSCaseView';
+export { default as IntelligentGuidance } from './components/IntelligentGuidance';
+export * from './components/IntelligentGuidance';
 export { default as InteractionNotification } from './components/InteractionNotification';
 export { default as InteractionTimer } from './components/InteractionTimer';
 export { default as TaskManager } from './components/TaskManager';

package/lib/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,+DAA+D;AAC/D,OAAO,EAAE,OAAO,IAAI,OAAO,EAAE,MAAM,sBAAsB,CAAC;AAC1D,cAAc,sBAAsB,CAAC;AACrC,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,0BAA0B,CAAC;AAClE,cAAc,0BAA0B,CAAC;AACzC,OAAO,EAAE,OAAO,IAAI,uBAAuB,EAAE,MAAM,sCAAsC,CAAC;AAC1F,OAAO,EAAE,OAAO,IAAI,gBAAgB,EAAE,MAAM,+BAA+B,CAAC;AAC5E,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 Article } from './components/Article';\nexport * from './components/Article';\nexport { default as ArticleList } from './components/ArticleList';\nexport * from './components/ArticleList';\nexport { default as InteractionNotification } from './components/InteractionNotification';\nexport { default as InteractionTimer } from './components/InteractionTimer';\nexport { default as TaskManager } from './components/TaskManager';\nexport * from './components/TaskManager';\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,+DAA+D;AAC/D,OAAO,EAAE,OAAO,IAAI,OAAO,EAAE,MAAM,sBAAsB,CAAC;AAC1D,cAAc,sBAAsB,CAAC;AACrC,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,0BAA0B,CAAC;AAClE,cAAc,0BAA0B,CAAC;AACzC,OAAO,EAAE,OAAO,IAAI,gBAAgB,EAAE,MAAM,+BAA+B,CAAC;AAC5E,cAAc,+BAA+B,CAAC;AAC9C,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,yBAAyB,CAAC;AAChE,cAAc,yBAAyB,CAAC;AACxC,OAAO,EAAE,OAAO,IAAI,mBAAmB,EAAE,MAAM,kCAAkC,CAAC;AAClF,cAAc,kCAAkC,CAAC;AACjD,OAAO,EAAE,OAAO,IAAI,uBAAuB,EAAE,MAAM,sCAAsC,CAAC;AAC1F,OAAO,EAAE,OAAO,IAAI,gBAAgB,EAAE,MAAM,+BAA+B,CAAC;AAC5E,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 Article } from './components/Article';\nexport * from './components/Article';\nexport { default as ArticleList } from './components/ArticleList';\nexport * from './components/ArticleList';\nexport { default as CallControlPanel } from './components/CallControlPanel';\nexport * from './components/CallControlPanel';\nexport { default as CSCaseView } from './components/CSCaseView';\nexport * from './components/CSCaseView';\nexport { default as IntelligentGuidance } from './components/IntelligentGuidance';\nexport * from './components/IntelligentGuidance';\nexport { default as InteractionNotification } from './components/InteractionNotification';\nexport { default as InteractionTimer } from './components/InteractionTimer';\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": "2.0.0-dev.2.1",
+  "version": "2.0.0-dev.20.0",
   "author": "Pegasystems",
   "license": "SEE LICENSE IN LICENSE",
   "repository": {
@@ -20,23 +20,23 @@
     "build": "tsc -b"
   },
   "dependencies": {
-    "@pega/cosmos-react-core": "2.0.0-dev.2.1",
+    "@pega/cosmos-react-core": "2.0.0-dev.20.0",
+    "@pega/cosmos-react-dnd": "2.0.0-dev.20.0",
     "polished": "^4.1.0",
-    "react": "^16.13.1 || ^17.0.0",
-    "react-dom": "^16.13.1 || ^17.0.0",
+    "react": "^16.14.0 || ^17.0.0",
+    "react-dom": "^16.14.0 || ^17.0.0",
     "styled-components": "^5.2.0"
   },
   "devDependencies": {
-    "@storybook/addon-a11y": "^6.2.9",
-    "@storybook/addon-actions": "^6.2.9",
-    "@storybook/addon-knobs": "^6.2.9",
-    "@storybook/addon-storysource": "^6.2.9",
-    "@storybook/addon-toolbars": "^6.2.9",
-    "@storybook/addons": "^6.2.9",
-    "@storybook/react": "^6.2.9",
-    "@storybook/theming": "^6.2.9",
+    "@storybook/addon-a11y": "^6.3.8",
+    "@storybook/addon-actions": "^6.3.8",
+    "@storybook/addon-knobs": "^6.3.1",
+    "@storybook/addon-storysource": "^6.3.8",
+    "@storybook/addon-toolbars": "^6.3.8",
+    "@storybook/addons": "^6.3.8",
+    "@storybook/react": "^6.3.8",
+    "@storybook/theming": "^6.3.8",
     "enzyme": "^3.11.0",
-    "enzyme-adapter-react-16": "^1.15.5",
-    "typescript": "~4.3.2"
+    "typescript": "~4.5.2"
   }
 }

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

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

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

@@ -1 +0,0 @@
-{"version":3,"file":"TaskDrawer.d.ts","sourceRoot":"","sources":["../../../src/components/TaskManager/TaskDrawer.tsx"],"names":[],"mappings":"AAAA,OAAc,EACZ,iBAAiB,EAQlB,MAAM,OAAO,CAAC;AAGf,OAAO,EACL,YAAY,EAUb,MAAM,yBAAyB,CAAC;AAYjC,OAAO,EAAE,eAAe,EAAE,MAAM,qBAAqB,CAAC;AA0BtD,QAAA,MAAM,UAAU,EAAE,iBAAiB,CAAC,eAAe,GAAG,YAAY,CA8JjE,CAAC;AAEF,eAAe,UAAU,CAAC"}

package/lib/components/TaskManager/TaskDrawer.js

@@ -1,84 +0,0 @@
-import React, { forwardRef, useContext, createRef, useState } from 'react';
-import { stripUnit, remToPx, math } from 'polished';
-import { Icon, Status, useI18n, Text, SummaryItem, useElement, useOuterEvent, tryCatch, useTheme } from '@pega/cosmos-react-core';
-import { StyledTaskDrawer, StyledTaskDrawerWrapper, StyledTaskDrawerSummaryItem, StyledTasksTabList, StyledTaskDrawerBareButton, StyledPopover, TASK_DRAWER_COLLAPSED_WIDTH } from './TaskManager.styles';
-import TaskManagerContext from './TaskManager.context';
-import Picker from './Picker/Picker';
-// Handles arrow keypresses for changing the focus
-const changeTabFocus = (event, index, tabRefs) => {
-    var _a, _b;
-    if (tabRefs.length) {
-        const { key } = event;
-        if (key === 'ArrowRight' || key === 'ArrowDown') {
-            event.preventDefault();
-            const nextIndex = index + 1 < tabRefs.length ? index + 1 : 0;
-            const nextTab = (_a = tabRefs[nextIndex]) === null || _a === void 0 ? void 0 : _a.current;
-            nextTab === null || nextTab === void 0 ? void 0 : nextTab.focus();
-        }
-        else if (key === 'ArrowLeft' || key === 'ArrowUp') {
-            event.preventDefault();
-            const prevIndex = index === 0 ? tabRefs.length - 1 : index - 1;
-            const prevTab = (_b = tabRefs[prevIndex]) === null || _b === void 0 ? void 0 : _b.current;
-            prevTab === null || prevTab === void 0 ? void 0 : prevTab.focus();
-        }
-    }
-};
-const TaskDrawer = forwardRef((props, ref) => {
-    const { addTask, wrapUp, tasks = [], onLaunchTask } = useContext(TaskManagerContext);
-    const [showPicker, setShowPicker] = useState(false);
-    const [addTaskEl, setAddTaskEl] = useElement(null);
-    const [popoverEl, setPopoverEl] = useElement(null);
-    const theme = useTheme();
-    // Used to keep a reference for every tab in order to focus them with key presses
-    const tabRefs = tasks.map(() => createRef());
-    useOuterEvent('mousedown', [popoverEl, addTaskEl], () => {
-        setShowPicker(false);
-    });
-    const t = useI18n();
-    return (React.createElement(StyledTaskDrawerWrapper, null,
-        React.createElement(StyledTaskDrawer, { ref: ref },
-            addTask && (React.createElement(React.Fragment, null,
-                React.createElement(StyledTaskDrawerBareButton, { ref: setAddTaskEl, onClick: () => setShowPicker(cur => !cur), variant: 'action' },
-                    React.createElement(SummaryItem, { as: StyledTaskDrawerSummaryItem, primary: React.createElement(Text, { variant: 'h4', as: 'span' }, t('task_manager_add_task')), visual: React.createElement(Icon, { name: 'plus' }) })),
-                React.createElement(StyledPopover, { show: showPicker, ref: setPopoverEl, target: addTaskEl, placement: 'bottom-start', modifiers: [
-                        {
-                            name: 'offset',
-                            options: {
-                                offset: [
-                                    tryCatch(() => stripUnit(remToPx(math(`${TASK_DRAWER_COLLAPSED_WIDTH} + ${theme.base.spacing}`))), () => 8),
-                                    tryCatch(() => stripUnit(remToPx(theme.base.spacing)), () => 8)
-                                ]
-                            }
-                        }
-                    ], portal: true },
-                    React.createElement(Picker, { title: t('task_manager_add_task'), scrollAt: 10, emptyText: t('task_manager_search_results_empty_text'), items: addTask === null || addTask === void 0 ? void 0 : addTask.items, onAdd: (selectedItems) => {
-                            if (addTask.onAdd) {
-                                addTask === null || addTask === void 0 ? void 0 : addTask.onAdd(selectedItems);
-                            }
-                            setShowPicker(false);
-                        }, onCancel: () => {
-                            setShowPicker(false);
-                        }, ref: addTask.ref })))),
-            tasks.length > 0 && (React.createElement(StyledTasksTabList, { role: 'tablist' }, tasks.map((task, i) => {
-                const { id, active = false, variant, status, icon, meta, ...restProps } = task;
-                return (React.createElement(StyledTaskDrawerBareButton, { ...restProps, ref: tabRefs[i], key: id, onClick: () => {
-                        onLaunchTask === null || onLaunchTask === void 0 ? void 0 : onLaunchTask(id);
-                    }, "aria-selected": active, role: 'tab', onKeyUp: (e) => changeTabFocus(e, i, tabRefs), onKeyDown: (e) => {
-                        const { key } = e;
-                        if (key === 'ArrowRight' ||
-                            key === 'ArrowDown' ||
-                            key === 'ArrowLeft' ||
-                            key === 'ArrowUp') {
-                            e.preventDefault();
-                        }
-                    }, tabIndex: active || ((wrapUp === null || wrapUp === void 0 ? void 0 : wrapUp.active) && i === 0) ? undefined : -1, active: active, variant: variant },
-                    React.createElement(SummaryItem, { as: StyledTaskDrawerSummaryItem, visual: React.createElement(Icon, { name: icon }), primary: React.createElement(Text, { variant: 'h4', as: 'span' }, task.name), secondary: React.createElement(React.Fragment, null,
-                            meta && React.createElement(Text, { variant: 'secondary' }, meta),
-                            ' ',
-                            !meta && status && (React.createElement(Status, { variant: status.variant }, status.text))) })));
-            }))),
-            wrapUp && (React.createElement(StyledTaskDrawerBareButton, { onClick: wrapUp.onWrapUp, variant: 'wrap-up', active: wrapUp.active },
-                React.createElement(SummaryItem, { as: StyledTaskDrawerSummaryItem, primary: React.createElement(Text, { variant: 'h4', as: 'span' }, t('task_manager_wrap_up')), visual: React.createElement(Icon, { name: 'flag-finish' }) }))))));
-});
-export default TaskDrawer;
-//# sourceMappingURL=TaskDrawer.js.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"TaskDrawer.js","sourceRoot":"","sources":["../../../src/components/TaskManager/TaskDrawer.tsx"],"names":[],"mappings":"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","sourcesContent":["import React, {\n  FunctionComponent,\n  forwardRef,\n  PropsWithoutRef,\n  useContext,\n  createRef,\n  RefObject,\n  KeyboardEvent,\n  useState\n} from 'react';\nimport { stripUnit, remToPx, math } from 'polished';\n\nimport {\n  ForwardProps,\n  Icon,\n  Status,\n  useI18n,\n  Text,\n  SummaryItem,\n  useElement,\n  useOuterEvent,\n  tryCatch,\n  useTheme\n} from '@pega/cosmos-react-core';\n\nimport {\n  StyledTaskDrawer,\n  StyledTaskDrawerWrapper,\n  StyledTaskDrawerSummaryItem,\n  StyledTasksTabList,\n  StyledTaskDrawerBareButton,\n  StyledPopover,\n  TASK_DRAWER_COLLAPSED_WIDTH\n} from './TaskManager.styles';\nimport TaskManagerContext from './TaskManager.context';\nimport { TaskDrawerProps } from './TaskManager.types';\nimport { PickerProps } from './Picker/Picker.types';\nimport Picker from './Picker/Picker';\n\n// Handles arrow keypresses for changing the focus\nconst changeTabFocus = (\n  event: KeyboardEvent,\n  index: number,\n  tabRefs: RefObject<HTMLButtonElement>[]\n): void => {\n  if (tabRefs.length) {\n    const { key } = event;\n    if (key === 'ArrowRight' || key === 'ArrowDown') {\n      event.preventDefault();\n      const nextIndex = index + 1 < tabRefs.length ? index + 1 : 0;\n      const nextTab = tabRefs[nextIndex]?.current;\n      nextTab?.focus();\n    } else if (key === 'ArrowLeft' || key === 'ArrowUp') {\n      event.preventDefault();\n      const prevIndex = index === 0 ? tabRefs.length - 1 : index - 1;\n      const prevTab = tabRefs[prevIndex]?.current;\n      prevTab?.focus();\n    }\n  }\n};\n\nconst TaskDrawer: FunctionComponent<TaskDrawerProps & ForwardProps> = forwardRef(\n  (props: PropsWithoutRef<TaskDrawerProps>, ref: TaskDrawerProps['ref']) => {\n    const { addTask, wrapUp, tasks = [], onLaunchTask } = useContext(TaskManagerContext);\n    const [showPicker, setShowPicker] = useState(false);\n    const [addTaskEl, setAddTaskEl] = useElement<HTMLButtonElement>(null);\n    const [popoverEl, setPopoverEl] = useElement<HTMLElement>(null);\n    const theme = useTheme();\n\n    // Used to keep a reference for every tab in order to focus them with key presses\n    const tabRefs: RefObject<HTMLButtonElement>[] = tasks.map(() => createRef<HTMLButtonElement>());\n\n    useOuterEvent('mousedown', [popoverEl, addTaskEl], () => {\n      setShowPicker(false);\n    });\n\n    const t = useI18n();\n\n    return (\n      <StyledTaskDrawerWrapper>\n        <StyledTaskDrawer ref={ref}>\n          {addTask && (\n            <>\n              <StyledTaskDrawerBareButton\n                ref={setAddTaskEl}\n                onClick={() => setShowPicker(cur => !cur)}\n                variant='action'\n              >\n                <SummaryItem\n                  as={StyledTaskDrawerSummaryItem}\n                  primary={\n                    <Text variant='h4' as='span'>\n                      {t('task_manager_add_task')}\n                    </Text>\n                  }\n                  visual={<Icon name='plus' />}\n                />\n              </StyledTaskDrawerBareButton>\n              <StyledPopover\n                show={showPicker}\n                ref={setPopoverEl}\n                target={addTaskEl}\n                placement='bottom-start'\n                modifiers={[\n                  {\n                    name: 'offset',\n                    options: {\n                      offset: [\n                        tryCatch(\n                          () =>\n                            stripUnit(\n                              remToPx(\n                                math(`${TASK_DRAWER_COLLAPSED_WIDTH} + ${theme.base.spacing}`)\n                              )\n                            ),\n                          () => 8\n                        ),\n                        tryCatch(\n                          () => stripUnit(remToPx(theme.base.spacing)),\n                          () => 8\n                        )\n                      ]\n                    }\n                  }\n                ]}\n                portal\n              >\n                <Picker\n                  title={t('task_manager_add_task')}\n                  scrollAt={10}\n                  emptyText={t('task_manager_search_results_empty_text')}\n                  items={addTask?.items}\n                  onAdd={(selectedItems: PickerProps['items']) => {\n                    if (addTask.onAdd) {\n                      addTask?.onAdd(selectedItems);\n                    }\n                    setShowPicker(false);\n                  }}\n                  onCancel={() => {\n                    setShowPicker(false);\n                  }}\n                  ref={addTask.ref}\n                />\n              </StyledPopover>\n            </>\n          )}\n          {tasks.length > 0 && (\n            <StyledTasksTabList role='tablist'>\n              {tasks.map((task, i) => {\n                const { id, active = false, variant, status, icon, meta, ...restProps } = task;\n                return (\n                  <StyledTaskDrawerBareButton\n                    {...restProps}\n                    ref={tabRefs[i]}\n                    key={id}\n                    onClick={() => {\n                      onLaunchTask?.(id);\n                    }}\n                    aria-selected={active}\n                    role='tab'\n                    onKeyUp={(e: KeyboardEvent) => changeTabFocus(e, i, tabRefs)}\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                    tabIndex={active || (wrapUp?.active && i === 0) ? undefined : -1}\n                    active={active}\n                    variant={variant}\n                  >\n                    <SummaryItem\n                      as={StyledTaskDrawerSummaryItem}\n                      visual={<Icon name={icon!} />}\n                      primary={\n                        <Text variant='h4' as='span'>\n                          {task.name}\n                        </Text>\n                      }\n                      secondary={\n                        <>\n                          {meta && <Text variant='secondary'>{meta}</Text>}{' '}\n                          {!meta && status && (\n                            <Status variant={status.variant}>{status.text}</Status>\n                          )}\n                        </>\n                      }\n                    />\n                  </StyledTaskDrawerBareButton>\n                );\n              })}\n            </StyledTasksTabList>\n          )}\n          {wrapUp && (\n            <StyledTaskDrawerBareButton\n              onClick={wrapUp.onWrapUp}\n              variant='wrap-up'\n              active={wrapUp.active}\n            >\n              <SummaryItem\n                as={StyledTaskDrawerSummaryItem}\n                primary={\n                  <Text variant='h4' as='span'>\n                    {t('task_manager_wrap_up')}\n                  </Text>\n                }\n                visual={<Icon name='flag-finish' />}\n              />\n            </StyledTaskDrawerBareButton>\n          )}\n        </StyledTaskDrawer>\n      </StyledTaskDrawerWrapper>\n    );\n  }\n);\n\nexport default TaskDrawer;\n"]}