@pega/cosmos-react-cs - npm Package Compare versions

Comparing version 4.0.0-dev.11.0 to 4.0.0-dev.11.1

lib/components/TaskManager/TaskManager.js

 import { createElement as _createElement } from "react";
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { forwardRef, useRef, useEffect } from 'react';
-import { Flex, Icon, registerIcon, Text, Status, useI18n, useConsolidatedRef, useElement, Button, Grid, SummaryItem } from '@pega/cosmos-react-core';
+import { Flex, Icon, registerIcon, Text, Status, useI18n, useConsolidatedRef, useElement, Button, Grid, SummaryItem, useUID } from '@pega/cosmos-react-core';
 import * as flagFinishIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/flag-finish.icon';
@@ -18,9 +18,10 @@ import * as plusIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/plus.icon';
     const t = useI18n();
-    const TaskManagerTabsRef = useRef(null);
+    const taskManagerTabsRef = useRef(null);
     const consolidatedRef = useConsolidatedRef(ref);
     const hasActiveTask = tasks.filter(task => task.active).length > 0 || !!wrapUp?.active;
+    const headingId = useUID();
     const [addTaskEl, setAddTaskEl] = useElement(null);
     useEffect(() => {
-        if (TaskManagerTabsRef.current && consolidatedRef.current) {
-            consolidatedRef.current.style.minHeight = `${TaskManagerTabsRef.current.scrollHeight}px`;
+        if (taskManagerTabsRef.current && consolidatedRef.current) {
+            consolidatedRef.current.style.minHeight = `${taskManagerTabsRef.current.scrollHeight}px`;
         }
@@ -36,3 +37,3 @@ else if (consolidatedRef.current) {
             onTaskLaunch
-        }, children: _jsxs(StyledTaskManager, { ...restProps, ref: consolidatedRef, hasDrawer: hasActiveTask, hasTasks: !!tasks.length, children: [banner && (_jsx(Dialogue, { icon: banner.icon, content: banner.content, verbatimStatus: banner.verbatimStatus, handle: handle })), _jsxs(TaskView, { header: _jsx(Text, { variant: 'h2', children: t('task_manager_tasks') }), actions: _jsxs(Flex, { container: {
+        }, children: _jsxs(StyledTaskManager, { ...restProps, ref: consolidatedRef, hasDrawer: hasActiveTask, hasTasks: !!tasks.length, children: [banner && (_jsx(Dialogue, { icon: banner.icon, content: banner.content, verbatimStatus: banner.verbatimStatus, handle: handle })), _jsxs(TaskView, { header: _jsx(Text, { variant: 'h2', id: headingId, children: t('task_manager_tasks') }), actions: _jsxs(Flex, { container: {
                             gap: 1
@@ -46,3 +47,6 @@ }, children: [conversationAI && (_jsx(ConversationAI, { content: conversationAI.content, entityCount: conversationAI.entityCount })), _jsxs(Flex, { container: true, children: [wrapUp && (_jsxs(Button, { variant: 'secondary', disabled: wrapUp.disable, onClick: wrapUp?.onClick && (() => wrapUp.onClick()), children: [_jsx(Icon, { name: 'flag-finish' }), _jsx("span", { children: t('task_manager_wrap_up') })] })), addTask && (_jsxs(_Fragment, { children: [_jsxs(Button, { variant: 'primary', onClick: (e) => setAddTaskEl(!addTaskEl ? e.currentTarget : null), children: [_jsx(Icon, { name: 'plus' }), _jsx("span", { children: t('task_manager_add_task') })] }), addTaskEl && (_jsx(Picker, { target: addTaskEl, scrollAt: 10, emptyText: t('task_manager_search_results_empty_text'), items: addTask?.items, onAdd: (selectedItems) => {
                                                     setAddTaskEl(null);
-                                                }, ref: addTask.ref, placeholder: t('search_tasks') }))] }))] })] }), children: [hasActiveTask && _jsx(TaskManagerTabs, { ref: TaskManagerTabsRef }), hasActiveTask && _jsx(StyledTaskMain, { children: main }), !hasActiveTask && (_jsx(Grid, { as: 'ul', container: true, children: tasks.map(({ name, id, status, isResolved, meta, icon, ...restTaskProps }) => {
+                                                }, ref: addTask.ref, placeholder: t('search_tasks') }))] }))] })] }), children: [hasActiveTask && (_jsx(TaskManagerTabs, { ref: taskManagerTabsRef, "aria-labelledby": headingId })), hasActiveTask &&
+                            tasks.map(({ id, active }) => {
+                                return (_jsx(StyledTaskMain, { id: `tab-panel-${id}`, role: 'tabpanel', "aria-labelledby": `tab-${id}`, current: !!active, children: active ? main : null }, id));
+                            }), !hasActiveTask && (_jsx(Grid, { as: 'ul', container: true, children: tasks.map(({ name, id, status, isResolved, meta, icon, ...restTaskProps }) => {
                                 return (_createElement(SummaryItem, { ...restTaskProps, key: id, as: StyledTaskSummaryItem, primary: _jsx(Text, { variant: 'h4', children: name }), secondary: _jsxs(_Fragment, { children: [!status && meta && _jsx(Text, { variant: 'secondary', children: meta }), status && _jsx(Status, { variant: status.variant, children: status.text })] }), visual: _jsx(Icon, { name: icon }), actions: _jsxs(Flex, { container: { gap: 1 }, children: [!isResolved && (_jsx(Button, { variant: 'secondary', "aria-label": t('continue_label_a11y', [name]), onClick: () => {
@@ -49,0 +53,0 @@ onTaskLaunch?.(id);

lib/components/TaskManager/TaskManager.styles.d.ts

 /// <reference types="react" />
 import { TaskManagerTabProps, DialogueProps } from './TaskManager.types';
-export declare const StyledTaskMain: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
+export declare const StyledTaskMain: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {
+    current: boolean;
+}, never>;
 export declare const StyledTaskManagerTabsSummaryItem: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
@@ -5,0 +7,0 @@ export declare const StyledHeader: import("styled-components").StyledComponent<import("react").FunctionComponent<import("@pega/cosmos-react-core").CardHeaderProps & import("@pega/cosmos-react-core").ForwardProps>, import("styled-components").DefaultTheme, {}, never>;

lib/components/TaskManager/TaskManager.styles.js

@@ -10,3 +10,10 @@ import styled, { css } from 'styled-components';
 import { StyledFormDialog } from '@pega/cosmos-react-core/lib/components/Dialog/FormDialog';
-export const StyledTaskMain = styled.div ``;
+export const StyledTaskMain = styled.div(({ current }) => {
+    return css `
+    ${!current &&
+        css `
+      display: none;
+    `}
+  `;
+});
 export const StyledTaskManagerTabsSummaryItem = styled.div ``;
@@ -129,2 +136,5 @@ export const StyledHeader = styled(CardHeader) ``;
     scrollbar-width: none;
+    &:has(:focus-visible) {
+      box-shadow: ${theme.base.shadow['focus-group']};
+    }
     ${StyledTaskManagerTab} {
@@ -131,0 +141,0 @@ margin-inline-start: 0;

lib/components/TaskManager/TaskManagerTabs.js

@@ -155,5 +155,4 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
     };
-    return (_jsx(Flex, { container: true, as: StyledTaskManagerTabs, ref: ref, children: (tasks.length > 0 || wrapUp?.showTab) && (_jsxs(_Fragment, { children: [_jsxs(StyledTasksTabList, { role: 'tablist', ref: tabListRef, children: [tabs.map((task, i) => {
-                            const { id, active = false, 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) => {
+    return (_jsx(Flex, { container: { gap: 1 }, as: StyledTaskManagerTabs, ref: ref, children: (tasks.length > 0 || wrapUp?.showTab) && (_jsxs(_Fragment, { children: [_jsxs(StyledTasksTabList, { role: 'tablist', ref: tabListRef, ...props, children: [tabs.map(({ id, active = false, icon, meta, name, ...restProps }, i) => {
+                            return (_createElement(StyledTaskManagerTab, { ...restProps, ref: tabRefs[i], key: id, onClick: () => onTaskLaunch?.(id), "aria-selected": active, "aria-controls": `tab-panel-${id}`, id: `tab-${id}`, role: 'tab', tabIndex: active ? 0 : -1, onKeyUp: (e) => {
                                     changeTabFocus(e, i);
@@ -171,3 +170,3 @@ }, onKeyDown: (e) => {
                                 }, active: active },
-                                _jsx(Flex, { container: { justify: 'start', gap: 1, alignItems: 'center' }, children: _jsx(StyleTaskName, { children: task.name }) })));
+                                _jsx(Flex, { container: { justify: 'start', gap: 1, alignItems: 'center' }, children: _jsx(StyleTaskName, { children: name }) })));
                         }), wrapUp?.showTab && (_jsx(StyledTaskManagerTab, { onClick: wrapUp.onClick, variant: 'wrap-up', "aria-selected": wrapUp.active, role: 'tab', active: wrapUp.active, tabIndex: wrapUp.active ? 0 : -1, onKeyUp: (e) => {
@@ -174,0 +173,0 @@ changeTabFocus(e);

package.json

 {
   "name": "@pega/cosmos-react-cs",
-  "version": "4.0.0-dev.11.0",
+  "version": "4.0.0-dev.11.1",
   "author": "Pegasystems",
@@ -23,4 +23,4 @@ "license": "SEE LICENSE IN LICENSE",
   "dependencies": {
-    "@pega/cosmos-react-core": "4.0.0-dev.11.0",
-    "@pega/cosmos-react-dnd": "4.0.0-dev.11.0",
+    "@pega/cosmos-react-core": "4.0.0-dev.11.1",
+    "@pega/cosmos-react-dnd": "4.0.0-dev.11.1",
     "@types/react": "^16.14.24 || ^17.0.38",
@@ -27,0 +27,0 @@ "@types/react-dom": "^16.9.14 || ^17.0.11",

No alert changes

Improved metrics

Total package byte prevSize

528690

0.38%

Lines of code

3639

0.41%

Dependency changes

• + Added

  @pega/cosmos-react-core@4.0.0-dev.11.1
  (transitive)

• + Added

  @pega/cosmos-react-dnd@4.0.0-dev.11.1
  (transitive)

• - Removed

  @pega/cosmos-react-core@4.0.0-dev.11.0
  (transitive)

• - Removed

  @pega/cosmos-react-dnd@4.0.0-dev.11.0
  (transitive)

• Updated

  @pega/cosmos-react-core@4.0.0-dev.11.1

• Updated

  @pega/cosmos-react-dnd@4.0.0-dev.11.1