npm - @pega/cosmos-react-cs - Versions diffs - 2.0.0-dev.9.4 → 2.0.0-rc.1 - Mend

@pega/cosmos-react-cs 2.0.0-dev.9.4 → 2.0.0-rc.1

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

Files changed (139) hide show

package/lib/components/TaskManager/TaskManagerTabs.js ADDED Viewed

@@ -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 ADDED Viewed

@@ -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.js CHANGED Viewed

@@ -4,9 +4,7 @@ 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 (_jsxs(Card, Object.assign({}, restProps, { ref: ref }, { children: [_jsxs(CardHeader, Object.assign({ as: StyledStickyCardHeader }, { children: [header,
-                    actions] }), void 0),
-            _jsx(CardContent, { children: children }, void 0)] }), void 0));
+    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 CHANGED Viewed

	@@ -1 +1 @@
1	- {"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,~~oBAAK~~,SAAS,~~IAAE~~,GAAG,EAAE,GAAG,~~iBAC3B~~,MAAC,UAAU,~~kBAAC~~,EAAE,EAAE,sBAAsB,~~iBACnC~~,MAAM~~;oBACN~~,OAAO,~~aACG;YACb~~,KAAC,WAAW,cAAE,QAAQ,WAAe,~~aAChC~~,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"]}
1	+ {"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 CHANGED Viewed

@@ -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 CHANGED Viewed

	@@ -1 +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"}
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,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 CHANGED Viewed

	@@ -1 +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"]}
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;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 CHANGED Viewed

@@ -2,6 +2,8 @@ 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';

package/lib/index.d.ts.map CHANGED Viewed

	@@ -1 +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,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"}
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,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 CHANGED Viewed

@@ -3,6 +3,8 @@ 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';

package/lib/index.js.map CHANGED Viewed

	@@ -1 +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,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 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"]}
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,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 CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@pega/cosmos-react-cs",
-  "version": "2.0.0-dev.9.4",
+  "version": "2.0.0-rc.1",
   "author": "Pegasystems",
   "license": "SEE LICENSE IN LICENSE",
   "repository": {
@@ -20,23 +20,23 @@
     "build": "tsc -b"
   },
   "dependencies": {
-    "@pega/cosmos-react-core": "2.0.0-dev.9.4",
+    "@pega/cosmos-react-core": "2.0.0-rc.1",
+    "@pega/cosmos-react-dnd": "2.0.0-rc.1",
     "polished": "^4.1.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.3.7",
-    "@storybook/addon-actions": "^6.3.7",
-    "@storybook/addon-knobs": "^6.3.0",
-    "@storybook/addon-storysource": "^6.3.7",
-    "@storybook/addon-toolbars": "^6.3.7",
-    "@storybook/addons": "^6.3.7",
-    "@storybook/react": "^6.3.7",
-    "@storybook/theming": "^6.3.7",
+    "@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 DELETED Viewed

@@ -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 DELETED Viewed

	@@ -1 +0,0 @@
1	- {"version":3,"file":"TaskDrawer.d.ts","sourceRoot":"","sources":["../../../src/components/TaskManager/TaskDrawer.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,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 DELETED Viewed

@@ -1,78 +0,0 @@
-import { createElement as _createElement } from "react";
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import { 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 (_jsx(StyledTaskDrawerWrapper, { children: _jsxs(StyledTaskDrawer, Object.assign({ ref: ref }, { children: [addTask && (_jsxs(_Fragment, { children: [_jsx(StyledTaskDrawerBareButton, Object.assign({ ref: setAddTaskEl, onClick: () => setShowPicker(cur => !cur), variant: 'action' }, { children: _jsx(SummaryItem, { as: StyledTaskDrawerSummaryItem, primary: _jsx(Text, Object.assign({ variant: 'h4', as: 'span' }, { children: t('task_manager_add_task') }), void 0), visual: _jsx(Icon, { name: 'plus' }, void 0) }, void 0) }), void 0),
-                        _jsx(StyledPopover, Object.assign({ 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 }, { children: _jsx(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 }, void 0) }), void 0)] }, void 0)),
-                tasks.length > 0 && (_jsx(StyledTasksTabList, Object.assign({ role: 'tablist' }, { children: tasks.map((task, i) => {
-                        const { id, active = false, variant, status, icon, meta, ...restProps } = task;
-                        return (_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 },
-                            _jsx(SummaryItem, { as: StyledTaskDrawerSummaryItem, visual: _jsx(Icon, { name: icon }, void 0), primary: _jsx(Text, Object.assign({ variant: 'h4', as: 'span' }, { children: task.name }), void 0), secondary: _jsxs(_Fragment, { children: [meta && _jsx(Text, Object.assign({ variant: 'secondary' }, { children: meta }), void 0), ' ',
-                                        !meta && status && (_jsx(Status, Object.assign({ variant: status.variant }, { children: status.text }), void 0))] }, void 0) }, void 0)));
-                    }) }), void 0)),
-                wrapUp && (_jsx(StyledTaskDrawerBareButton, Object.assign({ onClick: wrapUp.onWrapUp, variant: 'wrap-up', active: wrapUp.active }, { children: _jsx(SummaryItem, { as: StyledTaskDrawerSummaryItem, primary: _jsx(Text, Object.assign({ variant: 'h4', as: 'span' }, { children: t('task_manager_wrap_up') }), void 0), visual: _jsx(Icon, { name: 'flag-finish' }, void 0) }, void 0) }), void 0))] }), void 0) }, void 0));
-});
-export default TaskDrawer;
-//# sourceMappingURL=TaskDrawer.js.map

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

@@ -1 +0,0 @@

- {"version":3,"file":"TaskDrawer.js","sourceRoot":"","sources":["../../../src/components/TaskManager/TaskDrawer.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\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"]}