@pega/cosmos-react-cs 2.1.6 → 2.1.7

package/lib/components/TaskManager/TaskManager.js

@@ -0,0 +1,76 @@
+import { createElement as _createElement } from "react";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { forwardRef, useRef, useEffect, useState } from 'react';
+import { remToPx, stripUnit } from 'polished';
+import { Flex, Icon, registerIcon, Text, Status, useI18n, useConsolidatedRef, useElement, Button, Grid, SummaryItem, EmptyState, useTheme, tryCatch } from '@pega/cosmos-react-core';
+import * as flagFinishIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/flag-finish.icon';
+import * as plusIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/plus.icon';
+import { StyledTaskManager, StyledTaskManagerBanner, StyledTaskSummaryItem, StyledPopover, StyledTaskMain } from './TaskManager.styles';
+import TaskManagerContext from './TaskManager.context';
+import TaskManagerTabs from './TaskManagerTabs';
+import TaskView from './TaskView';
+import Picker from './Picker/Picker';
+registerIcon(plusIcon, flagFinishIcon);
+const TaskManager = forwardRef((props, ref) => {
+    const { tasks = [], emptyText, onTaskLaunch, onTaskDismiss, addTask, wrapUp, main, banner, ...restProps } = props;
+    const t = useI18n();
+    const TaskManagerTabsRef = useRef(null);
+    const consolidatedRef = useConsolidatedRef(ref);
+    const hasDrawer = tasks.filter(task => task.active).length > 0 || !!wrapUp?.active;
+    const [showPicker, setShowPicker] = useState(false);
+    const [addTaskEl, setAddTaskEl] = useElement(null);
+    const theme = useTheme();
+    useEffect(() => {
+        if (TaskManagerTabsRef.current && consolidatedRef.current) {
+            consolidatedRef.current.style.minHeight = `${TaskManagerTabsRef.current.scrollHeight}px`;
+        }
+        else if (consolidatedRef.current) {
+            consolidatedRef.current.style.minHeight = '0';
+        }
+    }, [tasks, addTask]);
+    return (_jsx(TaskManagerContext.Provider, { value: {
+            addTask,
+            wrapUp,
+            tasks,
+            onTaskLaunch
+        }, children: _jsxs("div", { children: [banner && (_jsxs(Flex, { as: StyledTaskManagerBanner, container: {
+                        alignItems: 'center'
+                    }, "aria-live": 'polite', children: [_jsx(Icon, { name: banner.icon }, void 0), _jsx(Text, { variant: 'h4', children: banner.content }, void 0)] }, void 0)), _jsx(StyledTaskManager, { ...restProps, ref: consolidatedRef, hasDrawer: hasDrawer, children: _jsxs(TaskView, { header: _jsx(Text, { variant: 'h2', children: t('task_manager_tasks') }, void 0), actions: _jsxs(Flex, { container: {
+                                itemGap: 1
+                            }, children: [wrapUp && (_jsx(Button, { variant: 'secondary', onClick: wrapUp.onWrapUp, children: _jsxs(Flex, { container: {
+                                            itemGap: 1,
+                                            alignItems: 'center'
+                                        }, children: [_jsx(Icon, { name: 'flag-finish' }, void 0), _jsx("span", { children: t('task_manager_wrap_up') }, void 0)] }, void 0) }, void 0)), addTask && (_jsxs(_Fragment, { children: [_jsx(Button, { variant: 'primary', onClick: () => setShowPicker(cur => !cur), ref: setAddTaskEl, children: _jsxs(Flex, { container: {
+                                                    gap: 1,
+                                                    alignItems: 'center'
+                                                }, children: [_jsx(Icon, { name: 'plus' }, void 0), _jsx("span", { children: t('task_manager_add_task') }, void 0)] }, void 0) }, void 0), _jsx(StyledPopover, { show: showPicker, target: addTaskEl, placement: 'bottom-end', modifiers: [
+                                                {
+                                                    name: 'offset',
+                                                    options: {
+                                                        offset: [
+                                                            tryCatch(() => stripUnit(remToPx(theme.base.spacing)), () => 8),
+                                                            tryCatch(() => stripUnit(remToPx(theme.base.spacing)), () => 8)
+                                                        ]
+                                                    }
+                                                }
+                                            ], children: _jsx(Picker, { scrollAt: 10, emptyText: t('task_manager_search_results_empty_text'), items: addTask?.items, onAdd: (selectedItems) => {
+                                                    if (addTask.onAdd) {
+                                                        addTask?.onAdd(selectedItems);
+                                                    }
+                                                    setShowPicker(false);
+                                                }, onCancel: () => {
+                                                    setShowPicker(false);
+                                                }, ref: addTask.ref, placeholder: t('search_tasks') }, void 0) }, void 0)] }, void 0))] }, void 0), children: [hasDrawer && _jsx(TaskManagerTabs, { ref: TaskManagerTabsRef }, void 0), hasDrawer && _jsx(StyledTaskMain, { children: main }, void 0), !hasDrawer && (_jsxs(Grid, { as: 'ul', container: true, children: [tasks.map(({ name, id, status, variant = 'in-progress', meta, icon, ...restTaskProps }) => {
+                                        return (_createElement(SummaryItem, { ...restTaskProps, key: id, as: StyledTaskSummaryItem, variant: variant, primary: _jsx(Text, { variant: 'h4', children: name }, void 0), secondary: _jsxs(_Fragment, { children: [!status && meta && _jsx(Text, { variant: 'secondary', children: meta }, void 0), status && _jsx(Status, { variant: status.variant, children: status.text }, void 0)] }, void 0), visual: _jsx(Icon, { name: icon }, void 0), actions: _jsxs(Flex, { container: { gap: 1 }, children: [(variant === 'queued' || variant === 'suggested') && (_jsxs(_Fragment, { children: [_jsx(Button, { variant: 'simple', "aria-label": t('dismiss_label_a11y', [name]), onClick: () => {
+                                                                    onTaskDismiss?.(id);
+                                                                }, children: t('dismiss_label') }, void 0), _jsx(Button, { variant: 'secondary', "aria-label": t('go_label_a11y', [name]), onClick: () => {
+                                                                    onTaskLaunch?.(id);
+                                                                }, children: t('go_label') }, void 0)] }, void 0)), variant === 'in-progress' && (_jsx(Button, { variant: 'secondary', "aria-label": t('continue_label_a11y', [name]), onClick: () => {
+                                                            onTaskLaunch?.(id);
+                                                        }, children: t('continue_label') }, void 0)), variant === 'resolved' && (_jsx(Button, { variant: 'secondary', "aria-label": t('review_label_a11y', [name]), onClick: () => {
+                                                            onTaskLaunch?.(id);
+                                                        }, children: t('review_label') }, void 0))] }, void 0) }));
+                                    }), tasks.length === 0 && _jsx(EmptyState, { message: emptyText }, void 0)] }, void 0))] }, void 0) }, void 0)] }, void 0) }, void 0));
+});
+export default TaskManager;
+//# sourceMappingURL=TaskManager.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"TaskManager.js","sourceRoot":"","sources":["../../../src/components/TaskManager/TaskManager.tsx"],"names":[],"mappings":"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","sourcesContent":["import { FunctionComponent, PropsWithoutRef, forwardRef, useRef, useEffect, useState } from 'react';\nimport { remToPx, stripUnit } from 'polished';\n\nimport {\n  Flex,\n  Icon,\n  registerIcon,\n  Text,\n  Status,\n  useI18n,\n  useConsolidatedRef,\n  useElement,\n  Button,\n  Grid,\n  SummaryItem,\n  EmptyState,\n  useTheme,\n  tryCatch,\n  ForwardProps\n} from '@pega/cosmos-react-core';\nimport * as flagFinishIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/flag-finish.icon';\nimport * as plusIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/plus.icon';\n\nimport {\n  StyledTaskManager,\n  StyledTaskManagerBanner,\n  StyledTaskSummaryItem,\n  StyledPopover,\n  StyledTaskMain\n} from './TaskManager.styles';\nimport TaskManagerContext from './TaskManager.context';\nimport TaskManagerTabs from './TaskManagerTabs';\nimport { TaskManagerProps } from './TaskManager.types';\nimport TaskView from './TaskView';\nimport Picker from './Picker/Picker';\nimport { SelectedItemProps } from './Picker/Picker.types';\n\nregisterIcon(plusIcon, flagFinishIcon);\n\nconst TaskManager: FunctionComponent<TaskManagerProps & ForwardProps> = forwardRef(\n  (props: PropsWithoutRef<TaskManagerProps>, ref: TaskManagerProps['ref']) => {\n    const {\n      tasks = [],\n      emptyText,\n      onTaskLaunch,\n      onTaskDismiss,\n      addTask,\n      wrapUp,\n      main,\n      banner,\n      ...restProps\n    } = props;\n    const t = useI18n();\n    const TaskManagerTabsRef = useRef<HTMLDivElement>(null);\n    const consolidatedRef = useConsolidatedRef(ref);\n    const hasDrawer = tasks.filter(task => task.active).length > 0 || !!wrapUp?.active;\n    const [showPicker, setShowPicker] = useState(false);\n    const [addTaskEl, setAddTaskEl] = useElement<HTMLButtonElement>(null);\n    const theme = useTheme();\n\n    useEffect(() => {\n      if (TaskManagerTabsRef.current && consolidatedRef.current) {\n        consolidatedRef.current.style.minHeight = `${TaskManagerTabsRef.current.scrollHeight}px`;\n      } else if (consolidatedRef.current) {\n        consolidatedRef.current.style.minHeight = '0';\n      }\n    }, [tasks, addTask]);\n\n    return (\n      <TaskManagerContext.Provider\n        value={{\n          addTask,\n          wrapUp,\n          tasks,\n          onTaskLaunch\n        }}\n      >\n        <div>\n          {banner && (\n            <Flex\n              as={StyledTaskManagerBanner}\n              container={{\n                alignItems: 'center'\n              }}\n              aria-live='polite'\n            >\n              <Icon name={banner.icon} />\n              <Text variant='h4'>{banner.content}</Text>\n            </Flex>\n          )}\n          <StyledTaskManager {...restProps} ref={consolidatedRef} hasDrawer={hasDrawer}>\n            <TaskView\n              header={<Text variant='h2'>{t('task_manager_tasks')}</Text>}\n              actions={\n                <Flex\n                  container={{\n                    itemGap: 1\n                  }}\n                >\n                  {wrapUp && (\n                    <Button variant='secondary' onClick={wrapUp.onWrapUp}>\n                      <Flex\n                        container={{\n                          itemGap: 1,\n                          alignItems: 'center'\n                        }}\n                      >\n                        <Icon name='flag-finish' />\n                        <span>{t('task_manager_wrap_up')}</span>\n                      </Flex>\n                    </Button>\n                  )}\n                  {addTask && (\n                    <>\n                      <Button\n                        variant='primary'\n                        onClick={() => setShowPicker(cur => !cur)}\n                        ref={setAddTaskEl}\n                      >\n                        <Flex\n                          container={{\n                            gap: 1,\n                            alignItems: 'center'\n                          }}\n                        >\n                          <Icon name='plus' />\n                          <span>{t('task_manager_add_task')}</span>\n                        </Flex>\n                      </Button>\n                      <StyledPopover\n                        show={showPicker}\n                        target={addTaskEl}\n                        placement='bottom-end'\n                        modifiers={[\n                          {\n                            name: 'offset',\n                            options: {\n                              offset: [\n                                tryCatch(\n                                  () => stripUnit(remToPx(theme.base.spacing)),\n                                  () => 8\n                                ),\n                                tryCatch(\n                                  () => stripUnit(remToPx(theme.base.spacing)),\n                                  () => 8\n                                )\n                              ]\n                            }\n                          }\n                        ]}\n                      >\n                        <Picker\n                          scrollAt={10}\n                          emptyText={t('task_manager_search_results_empty_text')}\n                          items={addTask?.items}\n                          onAdd={(selectedItems: SelectedItemProps[]) => {\n                            if (addTask.onAdd) {\n                              addTask?.onAdd(selectedItems);\n                            }\n                            setShowPicker(false);\n                          }}\n                          onCancel={() => {\n                            setShowPicker(false);\n                          }}\n                          ref={addTask.ref}\n                          placeholder={t('search_tasks')}\n                        />\n                      </StyledPopover>\n                    </>\n                  )}\n                </Flex>\n              }\n            >\n              {hasDrawer && <TaskManagerTabs ref={TaskManagerTabsRef} />}\n              {hasDrawer && <StyledTaskMain>{main}</StyledTaskMain>}\n              {!hasDrawer && (\n                <Grid as='ul' container>\n                  {tasks.map(\n                    ({\n                      name,\n                      id,\n                      status,\n                      variant = 'in-progress',\n                      meta,\n                      icon,\n                      ...restTaskProps\n                    }) => {\n                      return (\n                        <SummaryItem\n                          {...restTaskProps}\n                          key={id}\n                          as={StyledTaskSummaryItem}\n                          variant={variant}\n                          primary={<Text variant='h4'>{name}</Text>}\n                          secondary={\n                            <>\n                              {!status && meta && <Text variant='secondary'>{meta}</Text>}\n                              {status && <Status variant={status.variant}>{status.text}</Status>}\n                            </>\n                          }\n                          visual={<Icon name={icon} />}\n                          actions={\n                            <Flex container={{ gap: 1 }}>\n                              {(variant === 'queued' || variant === 'suggested') && (\n                                <>\n                                  <Button\n                                    variant='simple'\n                                    aria-label={t('dismiss_label_a11y', [name])}\n                                    onClick={() => {\n                                      onTaskDismiss?.(id);\n                                    }}\n                                  >\n                                    {t('dismiss_label')}\n                                  </Button>\n                                  <Button\n                                    variant='secondary'\n                                    aria-label={t('go_label_a11y', [name])}\n                                    onClick={() => {\n                                      onTaskLaunch?.(id);\n                                    }}\n                                  >\n                                    {t('go_label')}\n                                  </Button>\n                                </>\n                              )}\n                              {variant === 'in-progress' && (\n                                <Button\n                                  variant='secondary'\n                                  aria-label={t('continue_label_a11y', [name])}\n                                  onClick={() => {\n                                    onTaskLaunch?.(id);\n                                  }}\n                                >\n                                  {t('continue_label')}\n                                </Button>\n                              )}\n                              {variant === 'resolved' && (\n                                <Button\n                                  variant='secondary'\n                                  aria-label={t('review_label_a11y', [name])}\n                                  onClick={() => {\n                                    onTaskLaunch?.(id);\n                                  }}\n                                >\n                                  {t('review_label')}\n                                </Button>\n                              )}\n                            </Flex>\n                          }\n                        />\n                      );\n                    }\n                  )}\n                  {tasks.length === 0 && <EmptyState message={emptyText} />}\n                </Grid>\n              )}\n            </TaskView>\n          </StyledTaskManager>\n        </div>\n      </TaskManagerContext.Provider>\n    );\n  }\n);\n\nexport default TaskManager;\n"]}

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

@@ -0,0 +1,20 @@
+/// <reference types="react" />
+import { TaskManagerTabProps } from './TaskManager.types';
+export declare const StyledTaskMain: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
+export declare const StyledTaskManagerTabsSummaryItem: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
+export declare const StyledTaskManagerTabs: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
+export declare const StyledTaskSummaryItem: import("styled-components").StyledComponent<"li", import("styled-components").DefaultTheme, {}, never>;
+export declare const StyleTaskName: import("styled-components").StyledComponent<"span", import("styled-components").DefaultTheme, {}, never>;
+export declare const StyledTaskStatus: import("styled-components").StyledComponent<import("react").FC<import("@pega/cosmos-react-core").StatusProps & import("@pega/cosmos-react-core").ForwardProps>, import("styled-components").DefaultTheme, {}, never>;
+export declare const StyledTaskManagerTab: import("styled-components").StyledComponent<"li", import("styled-components").DefaultTheme, TaskManagerTabProps, never>;
+export declare const StyledTasksTabList: import("styled-components").StyledComponent<"ul", import("styled-components").DefaultTheme, {}, never>;
+export declare const StyledStickyCardHeader: import("styled-components").StyledComponent<"header", import("styled-components").DefaultTheme, import("@pega/cosmos-react-core").CardHeaderProps, never>;
+export declare const StyledOverflowTabMenu: import("styled-components").StyledComponent<import("react").FunctionComponent<import("@pega/cosmos-react-core").ForwardProps & import("@pega/cosmos-react-core").MenuButtonProps>, import("styled-components").DefaultTheme, {}, never>;
+interface StyledTaskManagerProps {
+    hasDrawer?: boolean;
+}
+export declare const StyledTaskManager: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, StyledTaskManagerProps, never>;
+export declare const StyledTaskManagerBanner: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
+export declare const StyledPopover: import("styled-components").StyledComponent<(<Modifiers extends string = string>(props: import("@pega/cosmos-react-core").PopoverProps<Modifiers> & import("@pega/cosmos-react-core").ForwardProps) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | null), import("styled-components").DefaultTheme, {}, never>;
+export default StyledTaskManager;
+//# sourceMappingURL=TaskManager.styles.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"TaskManager.styles.d.ts","sourceRoot":"","sources":["../../../src/components/TaskManager/TaskManager.styles.ts"],"names":[],"mappings":";AAkBA,OAAO,EAAE,mBAAmB,EAAE,MAAM,qBAAqB,CAAC;AAE1D,eAAO,MAAM,cAAc,yGAAe,CAAC;AAC3C,eAAO,MAAM,gCAAgC,yGAAe,CAAC;AAE7D,eAAO,MAAM,qBAAqB,yGAahC,CAAC;AAIH,eAAO,MAAM,qBAAqB,wGAWhC,CAAC;AAIH,eAAO,MAAM,aAAa,0GAMxB,CAAC;AAEH,eAAO,MAAM,gBAAgB,sNAI3B,CAAC;AAKH,eAAO,MAAM,oBAAoB,yHAqE/B,CAAC;AAIH,eAAO,MAAM,kBAAkB,wGAwB7B,CAAC;AAIH,eAAO,MAAM,sBAAsB,2JASjC,CAAC;AACH,eAAO,MAAM,qBAAqB,yOAahC,CAAC;AAKH,UAAU,sBAAsB;IAC9B,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB;AAED,eAAO,MAAM,iBAAiB,6HAqC5B,CAAC;AAIH,eAAO,MAAM,uBAAuB,yGAYlC,CAAC;AAIH,eAAO,MAAM,aAAa,6VAKxB,CAAC;AAIH,eAAe,iBAAiB,CAAC"}

package/lib/components/TaskManager/TaskManager.styles.js

@@ -0,0 +1,232 @@
+import styled, { css } from 'styled-components';
+import { mix, transparentize } from 'polished';
+import { defaultThemeProp, MenuButton, Popover, tryCatch, Status, StyledCard, StyledEmptyState, StyledFlex } from '@pega/cosmos-react-core';
+import { StyledCardHeader } from '@pega/cosmos-react-core/lib/components/Card/CardHeader';
+import { StyledCardContent } from '@pega/cosmos-react-core/lib/components/Card/CardContent';
+import { StyledStatus } from '@pega/cosmos-react-core/lib/components/Badges/Status';
+import { StyledVisual } from '@pega/cosmos-react-core/lib/components/SummaryItem/SummaryItem';
+export const StyledTaskMain = styled.div ``;
+export const StyledTaskManagerTabsSummaryItem = styled.div ``;
+export const StyledTaskManagerTabs = styled.div(({ theme }) => {
+    return css `
+    background-color: ${theme.base.palette['secondary-background']};
+
+    ::before {
+      content: '';
+      border-block-end: 0.0625rem solid ${theme.base.palette['border-line']};
+      height: 0.0625rem;
+      width: 100%;
+      position: absolute;
+      inset-block-end: 0;
+    }
+  `;
+});
+StyledTaskManagerTabs.defaultProps = defaultThemeProp;
+export const StyledTaskSummaryItem = styled.li(({ theme }) => {
+    const { base: { spacing } } = theme;
+    return css `
+    min-height: 2.5rem;
+    padding: ${spacing};
+    &:not(:last-child) {
+      border-block-end: 0.0625rem solid ${theme.base.palette['border-line']};
+    }
+  `;
+});
+StyledTaskSummaryItem.defaultProps = defaultThemeProp;
+export const StyleTaskName = styled.span(() => {
+    return css `
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  `;
+});
+export const StyledTaskStatus = styled(Status)(({ theme }) => {
+    return css `
+    margin-block-start: calc(0.25 * ${theme.base.spacing});
+  `;
+});
+StyleTaskName.defaultProps = defaultThemeProp;
+StyledTaskStatus.defaultProps = defaultThemeProp;
+export const StyledTaskManagerTab = styled.li(({ active = false, theme }) => {
+    const hoverColor = tryCatch(() => mix(0.85, theme.base.palette['primary-background'], theme.base.palette.interactive));
+    return css `
+    max-width: 20rem;
+    min-width: 18rem;
+    white-space: nowrap;
+    border-inline-end: 0.065rem solid ${theme.base.palette['border-line']};
+    text-align: start;
+    outline: none;
+    overflow: hidden;
+    display: flex;
+    align-items: center;
+    position: relative;
+    flex: 1;
+    min-height: 2.5rem;
+    cursor: pointer;
+    padding-block: calc(0.5 * ${theme.base.spacing});
+    padding-inline: calc(2 * ${theme.base.spacing}) calc(1 * ${theme.base.spacing});
+    background-color: ${active &&
+        css `
+      ${theme.base.palette['primary-background']};
+    `};
+
+    & + & {
+      margin-inline-start: 0;
+    }
+
+    > ${StyledTaskManagerTabsSummaryItem} {
+      overflow-x: hidden;
+    }
+
+    > ${StyledTaskManagerTabsSummaryItem} > ${StyledVisual} {
+      ${active &&
+        css `
+        background: ${theme.base.palette.interactive};
+        color: ${theme.base.colors.white};
+      `}
+    }
+    ${active &&
+        css `
+      ::after {
+        position: absolute;
+        content: '';
+        height: 0.0625rem;
+        width: 100%;
+        background-color: ${theme.base.palette['primary-background']};
+        inset-inline-start: 0;
+        inset-block-end: 0;
+      }
+    `}
+
+    &:hover,
+    &:focus {
+      background-color: ${hoverColor};
+      ::after {
+        background-color: ${hoverColor};
+      }
+      box-shadow: none;
+    }
+    &:focus {
+      box-shadow: inset ${theme.base.shadow.focus};
+    }
+
+    > ${StyledFlex} {
+      max-width: 100%;
+    }
+  `;
+});
+StyledTaskManagerTab.defaultProps = defaultThemeProp;
+export const StyledTasksTabList = styled.ul(({ theme }) => {
+    const primaryColor = theme.base.palette.interactive;
+    const lightenedColor = tryCatch(() => transparentize(0.5, primaryColor)) ?? '';
+    return css `
+    position: relative;
+    display: flex;
+    flex-grow: 1;
+    overflow: scroll;
+    -ms-overflow-style: none;
+    &::-webkit-scrollbar {
+      display: none;
+    }
+    scrollbar-width: none;
+    ${StyledTaskManagerTab} {
+      margin-inline-start: 0;
+      &:hover,
+      &:focus {
+        ::before {
+          display: block;
+          background-color: ${lightenedColor};
+        }
+      }
+    }
+  `;
+});
+StyledTasksTabList.defaultProps = defaultThemeProp;
+export const StyledStickyCardHeader = styled(StyledCardHeader)(({ theme }) => {
+    const primaryBackgroundColor = theme.base.palette['primary-background'];
+    return css `
+    inset-block-start: 0;
+    inset-inline-start: 0;
+    background: ${primaryBackgroundColor};
+    height: calc(3.5rem - 0.0625rem);
+    border-block-end: 0.0625rem solid ${theme.base.palette['border-line']};
+  `;
+});
+export const StyledOverflowTabMenu = styled(MenuButton)(({ theme }) => {
+    return css `
+    border-radius: 0;
+    display: inline-block;
+    position: relative;
+    inset-inline-end: 0;
+    inset-block-start: 0;
+    align-self: stretch;
+    margin-inline-start: auto;
+    background-color: ${theme.base.palette['secondary-background']};
+    border-block-end: 0.0625rem solid ${theme.base.palette['border-line']};
+    padding: 0 ${theme.base.spacing};
+  `;
+});
+StyledStickyCardHeader.defaultProps = defaultThemeProp;
+StyledOverflowTabMenu.defaultProps = defaultThemeProp;
+export const StyledTaskManager = styled.div(({ theme }) => {
+    const primaryBackgroundColor = theme.base.palette['primary-background'];
+    return css `
+    background: ${primaryBackgroundColor};
+    position: relative;
+    border-radius: 0 0 0.5rem 0.5rem;
+
+    ${StyledStatus} {
+      line-height: calc(${theme.base.spacing} * 2);
+      height: calc(${theme.base.spacing} * 2);
+      font-size: 0.7rem;
+    }
+
+    ${StyledCardContent} {
+      &:not(${StyledCard} ${StyledCard} > &) {
+        padding: 0;
+      }
+    }
+    ${StyledTaskMain} {
+      padding: 0 calc(2 * ${theme.base.spacing}) calc(2 * ${theme.base.spacing});
+      ${StyledCardHeader} {
+        padding: ${theme.base.spacing} 0;
+        margin-block-end: ${theme.base.spacing};
+      }
+    }
+    ${StyledEmptyState} {
+      padding: calc(2 * ${theme.base.spacing});
+    }
+    ${StyledTaskManagerTabs} {
+      position: relative;
+    }
+    ${StyledTaskManagerTab} {
+      > ${StyledTaskManagerTabsSummaryItem} > ${StyledVisual} {
+        margin: 0 calc(2 * ${theme.base.spacing});
+      }
+    }
+  `;
+});
+StyledTaskManager.defaultProps = defaultThemeProp;
+export const StyledTaskManagerBanner = styled.div(({ theme }) => {
+    return css `
+    padding: calc(1.5 * ${theme.base.spacing});
+    color: ${theme.base.colors.orange.medium};
+    border-radius: ${theme.base['border-radius']} ${theme.base['border-radius']} 0 0;
+    background-color: ${theme.base.colors.gray['extra-light']};
+    gap: ${theme.base.spacing};
+
+    & + ${StyledTaskManager} {
+      margin-block-start: 0;
+    }
+  `;
+});
+StyledTaskManagerBanner.defaultProps = defaultThemeProp;
+export const StyledPopover = styled(Popover)(({ theme }) => {
+    return css `
+    width: 35rem;
+    border-radius: ${theme.base['border-radius']};
+  `;
+});
+StyledPopover.defaultProps = defaultThemeProp;
+export default StyledTaskManager;
+//# sourceMappingURL=TaskManager.styles.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"TaskManager.styles.js","sourceRoot":"","sources":["../../../src/components/TaskManager/TaskManager.styles.ts"],"names":[],"mappings":"AAAA,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAChD,OAAO,EAAE,GAAG,EAAE,cAAc,EAAE,MAAM,UAAU,CAAC;AAE/C,OAAO,EACL,gBAAgB,EAChB,UAAU,EACV,OAAO,EACP,QAAQ,EACR,MAAM,EACN,UAAU,EACV,gBAAgB,EAChB,UAAU,EACX,MAAM,yBAAyB,CAAC;AACjC,OAAO,EAAE,gBAAgB,EAAE,MAAM,wDAAwD,CAAC;AAC1F,OAAO,EAAE,iBAAiB,EAAE,MAAM,yDAAyD,CAAC;AAC5F,OAAO,EAAE,YAAY,EAAE,MAAM,sDAAsD,CAAC;AACpF,OAAO,EAAE,YAAY,EAAE,MAAM,gEAAgE,CAAC;AAI9F,MAAM,CAAC,MAAM,cAAc,GAAG,MAAM,CAAC,GAAG,CAAA,EAAE,CAAC;AAC3C,MAAM,CAAC,MAAM,gCAAgC,GAAG,MAAM,CAAC,GAAG,CAAA,EAAE,CAAC;AAE7D,MAAM,CAAC,MAAM,qBAAqB,GAAG,MAAM,CAAC,GAAG,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE;IAC5D,OAAO,GAAG,CAAA;wBACY,KAAK,CAAC,IAAI,CAAC,OAAO,CAAC,sBAAsB,CAAC;;;;0CAIxB,KAAK,CAAC,IAAI,CAAC,OAAO,CAAC,aAAa,CAAC;;;;;;GAMxE,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,qBAAqB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAEtD,MAAM,CAAC,MAAM,qBAAqB,GAAG,MAAM,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE;IAC3D,MAAM,EACJ,IAAI,EAAE,EAAE,OAAO,EAAE,EAClB,GAAG,KAAK,CAAC;IACV,OAAO,GAAG,CAAA;;eAEG,OAAO;;0CAEoB,KAAK,CAAC,IAAI,CAAC,OAAO,CAAC,aAAa,CAAC;;GAExE,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,qBAAqB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAEtD,MAAM,CAAC,MAAM,aAAa,GAAG,MAAM,CAAC,IAAI,CAAC,GAAG,EAAE;IAC5C,OAAO,GAAG,CAAA;;;;GAIT,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,MAAM,CAAC,MAAM,gBAAgB,GAAG,MAAM,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE;IAC3D,OAAO,GAAG,CAAA;sCAC0B,KAAK,CAAC,IAAI,CAAC,OAAO;GACrD,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,aAAa,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAC9C,gBAAgB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAEjD,MAAM,CAAC,MAAM,oBAAoB,GAAG,MAAM,CAAC,EAAE,CAAsB,CAAC,EAAE,MAAM,GAAG,KAAK,EAAE,KAAK,EAAE,EAAE,EAAE;IAC/F,MAAM,UAAU,GAAG,QAAQ,CAAC,GAAG,EAAE,CAC/B,GAAG,CAAC,IAAI,EAAE,KAAK,CAAC,IAAI,CAAC,OAAO,CAAC,oBAAoB,CAAC,EAAE,KAAK,CAAC,IAAI,CAAC,OAAO,CAAC,WAAW,CAAC,CACpF,CAAC;IACF,OAAO,GAAG,CAAA;;;;wCAI4B,KAAK,CAAC,IAAI,CAAC,OAAO,CAAC,aAAa,CAAC;;;;;;;;;;gCAUzC,KAAK,CAAC,IAAI,CAAC,OAAO;+BACnB,KAAK,CAAC,IAAI,CAAC,OAAO,cAAc,KAAK,CAAC,IAAI,CAAC,OAAO;wBACzD,MAAM;QAC1B,GAAG,CAAA;QACC,KAAK,CAAC,IAAI,CAAC,OAAO,CAAC,oBAAoB,CAAC;KAC3C;;;;;;QAMG,gCAAgC;;;;QAIhC,gCAAgC,MAAM,YAAY;QAClD,MAAM;QACR,GAAG,CAAA;sBACa,KAAK,CAAC,IAAI,CAAC,OAAO,CAAC,WAAW;iBACnC,KAAK,CAAC,IAAI,CAAC,MAAM,CAAC,KAAK;OACjC;;MAED,MAAM;QACR,GAAG,CAAA;;;;;;4BAMqB,KAAK,CAAC,IAAI,CAAC,OAAO,CAAC,oBAAoB,CAAC;;;;KAI/D;;;;0BAIqB,UAAU;;4BAER,UAAU;;;;;0BAKZ,KAAK,CAAC,IAAI,CAAC,MAAM,CAAC,KAAK;;;QAGzC,UAAU;;;GAGf,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,oBAAoB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAErD,MAAM,CAAC,MAAM,kBAAkB,GAAG,MAAM,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE;IACxD,MAAM,YAAY,GAAG,KAAK,CAAC,IAAI,CAAC,OAAO,CAAC,WAAW,CAAC;IACpD,MAAM,cAAc,GAAG,QAAQ,CAAC,GAAG,EAAE,CAAC,cAAc,CAAC,GAAG,EAAE,YAAY,CAAC,CAAC,IAAI,EAAE,CAAC;IAC/E,OAAO,GAAG,CAAA;;;;;;;;;;MAUN,oBAAoB;;;;;;8BAMI,cAAc;;;;GAIzC,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,kBAAkB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAEnD,MAAM,CAAC,MAAM,sBAAsB,GAAG,MAAM,CAAC,gBAAgB,CAAC,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE;IAC3E,MAAM,sBAAsB,GAAG,KAAK,CAAC,IAAI,CAAC,OAAO,CAAC,oBAAoB,CAAC,CAAC;IACxE,OAAO,GAAG,CAAA;;;kBAGM,sBAAsB;;wCAEA,KAAK,CAAC,IAAI,CAAC,OAAO,CAAC,aAAa,CAAC;GACtE,CAAC;AACJ,CAAC,CAAC,CAAC;AACH,MAAM,CAAC,MAAM,qBAAqB,GAAG,MAAM,CAAC,UAAU,CAAC,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE;IACpE,OAAO,GAAG,CAAA;;;;;;;;wBAQY,KAAK,CAAC,IAAI,CAAC,OAAO,CAAC,sBAAsB,CAAC;wCAC1B,KAAK,CAAC,IAAI,CAAC,OAAO,CAAC,aAAa,CAAC;iBACxD,KAAK,CAAC,IAAI,CAAC,OAAO;GAChC,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,sBAAsB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AACvD,qBAAqB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAMtD,MAAM,CAAC,MAAM,iBAAiB,GAAG,MAAM,CAAC,GAAG,CAAyB,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE;IAChF,MAAM,sBAAsB,GAAG,KAAK,CAAC,IAAI,CAAC,OAAO,CAAC,oBAAoB,CAAC,CAAC;IACxE,OAAO,GAAG,CAAA;kBACM,sBAAsB;;;;MAIlC,YAAY;0BACQ,KAAK,CAAC,IAAI,CAAC,OAAO;qBACvB,KAAK,CAAC,IAAI,CAAC,OAAO;;;;MAIjC,iBAAiB;cACT,UAAU,IAAI,UAAU;;;;MAIhC,cAAc;4BACQ,KAAK,CAAC,IAAI,CAAC,OAAO,cAAc,KAAK,CAAC,IAAI,CAAC,OAAO;QACtE,gBAAgB;mBACL,KAAK,CAAC,IAAI,CAAC,OAAO;4BACT,KAAK,CAAC,IAAI,CAAC,OAAO;;;MAGxC,gBAAgB;0BACI,KAAK,CAAC,IAAI,CAAC,OAAO;;MAEtC,qBAAqB;;;MAGrB,oBAAoB;UAChB,gCAAgC,MAAM,YAAY;6BAC/B,KAAK,CAAC,IAAI,CAAC,OAAO;;;GAG5C,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,iBAAiB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAElD,MAAM,CAAC,MAAM,uBAAuB,GAAG,MAAM,CAAC,GAAG,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE;IAC9D,OAAO,GAAG,CAAA;0BACc,KAAK,CAAC,IAAI,CAAC,OAAO;aAC/B,KAAK,CAAC,IAAI,CAAC,MAAM,CAAC,MAAM,CAAC,MAAM;qBACvB,KAAK,CAAC,IAAI,CAAC,eAAe,CAAC,IAAI,KAAK,CAAC,IAAI,CAAC,eAAe,CAAC;wBACvD,KAAK,CAAC,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,aAAa,CAAC;WAClD,KAAK,CAAC,IAAI,CAAC,OAAO;;UAEnB,iBAAiB;;;GAGxB,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,uBAAuB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAExD,MAAM,CAAC,MAAM,aAAa,GAAG,MAAM,CAAC,OAAO,CAAC,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE;IACzD,OAAO,GAAG,CAAA;;qBAES,KAAK,CAAC,IAAI,CAAC,eAAe,CAAC;GAC7C,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,aAAa,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAE9C,eAAe,iBAAiB,CAAC","sourcesContent":["import styled, { css } from 'styled-components';\nimport { mix, transparentize } from 'polished';\n\nimport {\n  defaultThemeProp,\n  MenuButton,\n  Popover,\n  tryCatch,\n  Status,\n  StyledCard,\n  StyledEmptyState,\n  StyledFlex\n} from '@pega/cosmos-react-core';\nimport { StyledCardHeader } from '@pega/cosmos-react-core/lib/components/Card/CardHeader';\nimport { StyledCardContent } from '@pega/cosmos-react-core/lib/components/Card/CardContent';\nimport { StyledStatus } from '@pega/cosmos-react-core/lib/components/Badges/Status';\nimport { StyledVisual } from '@pega/cosmos-react-core/lib/components/SummaryItem/SummaryItem';\n\nimport { TaskManagerTabProps } from './TaskManager.types';\n\nexport const StyledTaskMain = styled.div``;\nexport const StyledTaskManagerTabsSummaryItem = styled.div``;\n\nexport const StyledTaskManagerTabs = styled.div(({ theme }) => {\n  return css`\n    background-color: ${theme.base.palette['secondary-background']};\n\n    ::before {\n      content: '';\n      border-block-end: 0.0625rem solid ${theme.base.palette['border-line']};\n      height: 0.0625rem;\n      width: 100%;\n      position: absolute;\n      inset-block-end: 0;\n    }\n  `;\n});\n\nStyledTaskManagerTabs.defaultProps = defaultThemeProp;\n\nexport const StyledTaskSummaryItem = styled.li(({ theme }) => {\n  const {\n    base: { spacing }\n  } = theme;\n  return css`\n    min-height: 2.5rem;\n    padding: ${spacing};\n    &:not(:last-child) {\n      border-block-end: 0.0625rem solid ${theme.base.palette['border-line']};\n    }\n  `;\n});\n\nStyledTaskSummaryItem.defaultProps = defaultThemeProp;\n\nexport const StyleTaskName = styled.span(() => {\n  return css`\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n  `;\n});\n\nexport const StyledTaskStatus = styled(Status)(({ theme }) => {\n  return css`\n    margin-block-start: calc(0.25 * ${theme.base.spacing});\n  `;\n});\n\nStyleTaskName.defaultProps = defaultThemeProp;\nStyledTaskStatus.defaultProps = defaultThemeProp;\n\nexport const StyledTaskManagerTab = styled.li<TaskManagerTabProps>(({ active = false, theme }) => {\n  const hoverColor = tryCatch(() =>\n    mix(0.85, theme.base.palette['primary-background'], theme.base.palette.interactive)\n  );\n  return css`\n    max-width: 20rem;\n    min-width: 18rem;\n    white-space: nowrap;\n    border-inline-end: 0.065rem solid ${theme.base.palette['border-line']};\n    text-align: start;\n    outline: none;\n    overflow: hidden;\n    display: flex;\n    align-items: center;\n    position: relative;\n    flex: 1;\n    min-height: 2.5rem;\n    cursor: pointer;\n    padding-block: calc(0.5 * ${theme.base.spacing});\n    padding-inline: calc(2 * ${theme.base.spacing}) calc(1 * ${theme.base.spacing});\n    background-color: ${active &&\n    css`\n      ${theme.base.palette['primary-background']};\n    `};\n\n    & + & {\n      margin-inline-start: 0;\n    }\n\n    > ${StyledTaskManagerTabsSummaryItem} {\n      overflow-x: hidden;\n    }\n\n    > ${StyledTaskManagerTabsSummaryItem} > ${StyledVisual} {\n      ${active &&\n      css`\n        background: ${theme.base.palette.interactive};\n        color: ${theme.base.colors.white};\n      `}\n    }\n    ${active &&\n    css`\n      ::after {\n        position: absolute;\n        content: '';\n        height: 0.0625rem;\n        width: 100%;\n        background-color: ${theme.base.palette['primary-background']};\n        inset-inline-start: 0;\n        inset-block-end: 0;\n      }\n    `}\n\n    &:hover,\n    &:focus {\n      background-color: ${hoverColor};\n      ::after {\n        background-color: ${hoverColor};\n      }\n      box-shadow: none;\n    }\n    &:focus {\n      box-shadow: inset ${theme.base.shadow.focus};\n    }\n\n    > ${StyledFlex} {\n      max-width: 100%;\n    }\n  `;\n});\n\nStyledTaskManagerTab.defaultProps = defaultThemeProp;\n\nexport const StyledTasksTabList = styled.ul(({ theme }) => {\n  const primaryColor = theme.base.palette.interactive;\n  const lightenedColor = tryCatch(() => transparentize(0.5, primaryColor)) ?? '';\n  return css`\n    position: relative;\n    display: flex;\n    flex-grow: 1;\n    overflow: scroll;\n    -ms-overflow-style: none;\n    &::-webkit-scrollbar {\n      display: none;\n    }\n    scrollbar-width: none;\n    ${StyledTaskManagerTab} {\n      margin-inline-start: 0;\n      &:hover,\n      &:focus {\n        ::before {\n          display: block;\n          background-color: ${lightenedColor};\n        }\n      }\n    }\n  `;\n});\n\nStyledTasksTabList.defaultProps = defaultThemeProp;\n\nexport const StyledStickyCardHeader = styled(StyledCardHeader)(({ theme }) => {\n  const primaryBackgroundColor = theme.base.palette['primary-background'];\n  return css`\n    inset-block-start: 0;\n    inset-inline-start: 0;\n    background: ${primaryBackgroundColor};\n    height: calc(3.5rem - 0.0625rem);\n    border-block-end: 0.0625rem solid ${theme.base.palette['border-line']};\n  `;\n});\nexport const StyledOverflowTabMenu = styled(MenuButton)(({ theme }) => {\n  return css`\n    border-radius: 0;\n    display: inline-block;\n    position: relative;\n    inset-inline-end: 0;\n    inset-block-start: 0;\n    align-self: stretch;\n    margin-inline-start: auto;\n    background-color: ${theme.base.palette['secondary-background']};\n    border-block-end: 0.0625rem solid ${theme.base.palette['border-line']};\n    padding: 0 ${theme.base.spacing};\n  `;\n});\n\nStyledStickyCardHeader.defaultProps = defaultThemeProp;\nStyledOverflowTabMenu.defaultProps = defaultThemeProp;\n\ninterface StyledTaskManagerProps {\n  hasDrawer?: boolean;\n}\n\nexport const StyledTaskManager = styled.div<StyledTaskManagerProps>(({ theme }) => {\n  const primaryBackgroundColor = theme.base.palette['primary-background'];\n  return css`\n    background: ${primaryBackgroundColor};\n    position: relative;\n    border-radius: 0 0 0.5rem 0.5rem;\n\n    ${StyledStatus} {\n      line-height: calc(${theme.base.spacing} * 2);\n      height: calc(${theme.base.spacing} * 2);\n      font-size: 0.7rem;\n    }\n\n    ${StyledCardContent} {\n      &:not(${StyledCard} ${StyledCard} > &) {\n        padding: 0;\n      }\n    }\n    ${StyledTaskMain} {\n      padding: 0 calc(2 * ${theme.base.spacing}) calc(2 * ${theme.base.spacing});\n      ${StyledCardHeader} {\n        padding: ${theme.base.spacing} 0;\n        margin-block-end: ${theme.base.spacing};\n      }\n    }\n    ${StyledEmptyState} {\n      padding: calc(2 * ${theme.base.spacing});\n    }\n    ${StyledTaskManagerTabs} {\n      position: relative;\n    }\n    ${StyledTaskManagerTab} {\n      > ${StyledTaskManagerTabsSummaryItem} > ${StyledVisual} {\n        margin: 0 calc(2 * ${theme.base.spacing});\n      }\n    }\n  `;\n});\n\nStyledTaskManager.defaultProps = defaultThemeProp;\n\nexport const StyledTaskManagerBanner = styled.div(({ theme }) => {\n  return css`\n    padding: calc(1.5 * ${theme.base.spacing});\n    color: ${theme.base.colors.orange.medium};\n    border-radius: ${theme.base['border-radius']} ${theme.base['border-radius']} 0 0;\n    background-color: ${theme.base.colors.gray['extra-light']};\n    gap: ${theme.base.spacing};\n\n    & + ${StyledTaskManager} {\n      margin-block-start: 0;\n    }\n  `;\n});\n\nStyledTaskManagerBanner.defaultProps = defaultThemeProp;\n\nexport const StyledPopover = styled(Popover)(({ theme }) => {\n  return css`\n    width: 35rem;\n    border-radius: ${theme.base['border-radius']};\n  `;\n});\n\nStyledPopover.defaultProps = defaultThemeProp;\n\nexport default StyledTaskManager;\n"]}

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

@@ -0,0 +1,74 @@
+import { ReactNode, Ref } from 'react';
+import { BaseProps, NoChildrenProp, StatusProps } from '@pega/cosmos-react-core';
+import { PickerProps } from './Picker/Picker.types';
+export interface TaskManagerProps extends BaseProps, NoChildrenProp {
+    ref?: Ref<HTMLDivElement>;
+    /** List of tasks */
+    tasks?: TaskProps[];
+    /** Empty text to be shown when no tasks are added */
+    emptyText?: string;
+    /** Callback when task is launched */
+    onTaskLaunch?: (id: TaskProps['id']) => void;
+    /** Callback when task is dismissed. Applicable only when task is not launched previously */
+    onTaskDismiss?: (id: TaskProps['id']) => void;
+    /** Add task utility */
+    addTask?: Pick<PickerProps, 'items' | 'onAdd' | 'ref'>;
+    /** Banner for the task manager */
+    banner?: {
+        /** Icon for the banner */
+        icon: string;
+        /** Banner content */
+        content: string;
+    };
+    /** Shows wrap up action when passed */
+    wrapUp?: {
+        /** Callback when wrap up is performed */
+        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 TaskManagerTabsProps {
+    ref?: Ref<HTMLDivElement>;
+}
+export interface TaskManagerTabProps {
+    active?: boolean;
+    variant?: string;
+}
+export interface TaskViewProps extends BaseProps {
+    ref?: Ref<HTMLDivElement>;
+    /** Task header */
+    header: ReactNode;
+    /** Task specific actions */
+    actions?: ReactNode;
+    /** Task form content */
+    children: ReactNode;
+}
+export interface TaskManagerContextProps extends Pick<TaskManagerProps, 'tasks' | 'addTask' | 'onTaskLaunch' | 'wrapUp'> {
+}
+export interface TaskProps {
+    /** Unique id for tasks list */
+    id: string;
+    /** Name of the task */
+    name: string;
+    /** Meta info of the task ex: Queued task */
+    meta?: string;
+    /** Name of the icon (to be selected from default Pega icon set) */
+    icon: string;
+    /** Determines the active task */
+    active?: boolean;
+    /** Variant of the task */
+    variant: 'suggested' | 'queued' | 'in-progress' | 'resolved' | 'cancelled' | 'open';
+    /** Represents the current status of task(like resolved-completed, InProgress etc) */
+    status?: {
+        /** Status text */
+        text: string;
+        /** Status variant */
+        variant: StatusProps['variant'];
+    };
+}
+//# sourceMappingURL=TaskManager.types.d.ts.map

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

@@ -0,0 +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,cAAc,EAAE,WAAW,EAAE,MAAM,yBAAyB,CAAC;AAEjF,OAAO,EAAE,WAAW,EAAE,MAAM,uBAAuB,CAAC;AAEpD,MAAM,WAAW,gBAAiB,SAAQ,SAAS,EAAE,cAAc;IACjE,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

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=TaskManager.types.js.map

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

@@ -0,0 +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, NoChildrenProp, StatusProps } from '@pega/cosmos-react-core';\n\nimport { PickerProps } from './Picker/Picker.types';\n\nexport interface TaskManagerProps extends BaseProps, NoChildrenProp {\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"}