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

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

@@ -1,203 +1,210 @@
 import styled, { css } from 'styled-components';
-import { transparentize } from 'polished';
-import { defaultThemeProp, Popover, tryCatch } from '@pega/cosmos-react-core';
+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';
-import BareButton from '@pega/cosmos-react-core/lib/components/Button/BareButton';
-export const StyledTaskDrawerWrapper = styled.div ``;
-export const StyledTaskDrawer = styled.div ``;
-const styleTaskIcon = (variant, theme) => {
-    const { background, foreground } = theme.components['task-manager']['task-icon'][variant];
-    let borderColor = 'transparent';
-    if (variant === 'queued') {
-        borderColor = theme.base.colors.slate['extra-dark'];
-    }
+export const StyledTaskMain = styled.div ``;
+export const StyledTaskManagerTabsSummaryItem = styled.div ``;
+export const StyledTaskManagerTabs = styled.div(({ theme }) => {
     return css `
-    margin-inline-end: ${theme.base.spacing};
-    border-radius: 50%;
-    width: 2rem;
-    height: 2rem;
-    align-items: center;
-    min-height: 2rem;
-    min-width: 2rem;
-    justify-content: center;
-    line-height: 1rem;
-    display: inline-flex;
-    padding: calc(0.75 * ${theme.base.spacing});
-    color: ${foreground};
-    background: ${background};
-    font-size: 1rem;
-    border: 0.0625rem dashed ${borderColor};
-  `;
-};
-export const StyledTaskIcon = styled.div(({ variant, theme }) => {
-    return css `
-    ${styleTaskIcon(variant, theme)}
+    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;
+    }
   `;
 });
-export const StyledTaskSummaryItem = styled.li(({ variant, theme }) => {
+StyledTaskManagerTabs.defaultProps = defaultThemeProp;
+export const StyledTaskSummaryItem = styled.li(({ theme }) => {
     const { base: { spacing } } = theme;
     return css `
     min-height: 2.5rem;
-    padding: ${spacing} 0;
-    > ${StyledVisual} {
-      ${styleTaskIcon(variant, theme)}
-    }
+    padding: ${spacing};
     &:not(:last-child) {
-      border-bottom: 0.0625rem solid ${theme.base.palette['border-line']};
+      border-block-end: 0.0625rem solid ${theme.base.palette['border-line']};
     }
   `;
 });
 StyledTaskSummaryItem.defaultProps = defaultThemeProp;
-export const StyledTaskDrawerSummaryItem = styled.div ``;
-export const StyledTaskDrawerBareButton = styled(BareButton)(({ variant, active = false, theme, theme: { base: { palette: { 'border-line': borderLine } } } }) => {
-    const primaryColor = theme.base.palette.interactive;
+export const StyleTaskName = styled.span(() => {
     return css `
-      white-space: nowrap;
-      border-bottom: 0.1rem solid ${borderLine};
-      position: relative;
-      width: 100%;
-      text-align: left;
-      min-height: 3.45rem;
-      outline: none;
-      background-color: ${active &&
+    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.colors.white}
-      `};
+      ${theme.base.palette['primary-background']};
+    `};
 
-      & + & {
-        margin-inline-start: 0;
-      }
+    & + & {
+      margin-inline-start: 0;
+    }
 
-      &::before {
-        content: '';
-        display: ${active ? 'block' : 'none'};
-        background: ${primaryColor};
-        position: absolute;
-        width: 0.25rem;
-        height: 100%;
-        top: 0;
-        left: 0;
-      }
+    > ${StyledTaskManagerTabsSummaryItem} {
+      overflow-x: hidden;
+    }
 
-      &::after {
-        content: '';
-        display: ${active ? 'block' : 'none'};
-        position: absolute;
-        width: 0.0625rem;
-        top: 0;
-        height: 100%;
-        right: -0.0625rem;
-        background-color: ${active &&
+    > ${StyledTaskManagerTabsSummaryItem} > ${StyledVisual} {
+      ${active &&
         css `
-          ${theme.base.colors.white}
-        `};
-      }
-
-      &:not(:first-child):not(:last-child)::before,
-      &:not(:first-child):not(:last-child)::after {
-        height: calc(100% + 0.0625rem);
-      }
-
-      > ${StyledTaskDrawerSummaryItem} {
-        overflow-x: hidden;
+        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;
       }
+    `}
 
-      > ${StyledTaskDrawerSummaryItem} > ${StyledVisual} {
-        ${styleTaskIcon(variant, theme)}
-        ${active &&
-        css `
-          background: ${theme.base.palette.interactive};
-          color: ${theme.base.colors.white};
-        `}
+    &: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 {
-        background: ${theme.base.colors.white};
+        ::before {
+          display: block;
+          background-color: ${lightenedColor};
+        }
       }
-    `;
+    }
+  `;
 });
-StyledTaskDrawerBareButton.defaultProps = defaultThemeProp;
-export const StyledTasksTabList = styled.div ``;
-export const StyledStickyCardHeader = styled(StyledCardHeader) ``;
-export const TASK_DRAWER_COLLAPSED_WIDTH = '4rem';
-export const StyledTaskManager = styled.div(({ hasDrawer = true, theme: { base: { animation } }, theme }) => {
-    var _a;
+StyledTasksTabList.defaultProps = defaultThemeProp;
+export const StyledStickyCardHeader = styled(StyledCardHeader)(({ theme }) => {
     const primaryBackgroundColor = theme.base.palette['primary-background'];
-    const primaryColor = theme.base.palette.interactive;
-    const lightenedColor = (_a = tryCatch(() => transparentize(0.5, primaryColor))) !== null && _a !== void 0 ? _a : '';
     return css `
-      background: ${primaryBackgroundColor};
-      position: relative;
-      border-radius: 0.5rem;
-      padding-left: calc(${hasDrawer ? 8 : 0} * ${theme.base.spacing});
-
-      ${StyledStatus} {
-        line-height: calc(${theme.base.spacing} * 2);
-        height: calc(${theme.base.spacing} * 2);
-        font-size: 0.7rem;
-      }
-
-      ${StyledTaskDrawerWrapper} {
-        background-color: ${theme.base.colors.gray.light};
-        border-right: 0.0625rem solid ${theme.base.palette['border-line']};
-        position: absolute;
-        z-index: 10;
-        top: 0;
-        bottom: 0;
-        left: 0;
-        width: ${TASK_DRAWER_COLLAPSED_WIDTH};
-        transition: width ${animation.speed} ${animation.timing.ease};
-        will-change: width;
-        border-bottom-left-radius: 0.5rem;
-
-        &:hover,
-        &:focus-within {
-          width: 25rem;
-          transition-delay: 0.25s;
-        }
-      }
+    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;
 
-      ${StyledTaskDrawerWrapper} > ${StyledTaskDrawer} {
-        position: sticky;
-        z-index: 2;
-        top: 0;
-        bottom: 0;
-        left: 0;
-        width: 100%;
-      }
+    ${StyledStatus} {
+      line-height: calc(${theme.base.spacing} * 2);
+      height: calc(${theme.base.spacing} * 2);
+      font-size: 0.7rem;
+    }
 
-      ${StyledTasksTabList} {
-        ${StyledTaskDrawerBareButton} {
-          margin-inline-start: 0;
-          &:hover,
-          &:focus {
-            ::before {
-              display: block;
-              background-color: ${lightenedColor};
-            }
-          }
-        }
+    ${StyledCardContent} {
+      &:not(${StyledCard} ${StyledCard} > &) {
+        padding: 0;
       }
-      ${StyledTaskDrawerBareButton} {
-        > ${StyledTaskDrawerSummaryItem} > ${StyledVisual} {
-          margin: 0 calc(2 * ${theme.base.spacing});
-        }
+    }
+    ${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};
       }
-
-      ${StyledStickyCardHeader} {
-        position: sticky;
-        top: 0;
-        left: 0;
-        background: ${primaryBackgroundColor};
-        z-index: 6;
-        height: calc(3.5rem - 0.0625rem);
-        border-bottom: 0.0625rem solid ${theme.base.palette['border-line']};
-        margin-bottom: ${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 }) => {
@@ -206,9 +213,9 @@ export const StyledTaskManagerBanner = styled.div(({ theme }) => {
     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} {
-      box-shadow: ${theme.base.shadow.low};
       margin-block-start: 0;
     }
   `;
@@ -216,7 +223,7 @@ export const StyledTaskManagerBanner = styled.div(({ theme }) => {
 StyledTaskManagerBanner.defaultProps = defaultThemeProp;
 export const StyledPopover = styled(Popover)(({ theme }) => {
     return css `
-    width: 20rem;
+    width: 35rem;
     border-radius: ${theme.base['border-radius']};
   `;
 });

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

@@ -1 +1 @@
-{"version":3,"file":"TaskManager.styles.js","sourceRoot":"","sources":["../../../src/components/TaskManager/TaskManager.styles.ts"],"names":[],"mappings":"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","sourcesContent":["import styled, { css, DefaultTheme } from 'styled-components';\nimport { transparentize } from 'polished';\n\nimport { defaultThemeProp, Popover, tryCatch } from '@pega/cosmos-react-core';\nimport { StyledCardHeader } from '@pega/cosmos-react-core/lib/components/Card/CardHeader';\nimport { StyledStatus } from '@pega/cosmos-react-core/lib/components/Badges/Status';\nimport { StyledVisual } from '@pega/cosmos-react-core/lib/components/SummaryItem/SummaryItem';\nimport BareButton from '@pega/cosmos-react-core/lib/components/Button/BareButton';\n\nimport { TaskProps } from './TaskManager.types';\n\nexport const StyledTaskDrawerWrapper = styled.div``;\nexport const StyledTaskDrawer = styled.div``;\n\nexport interface StyledTaskIconProps {\n  variant: TaskProps['variant'] | 'action' | 'banner';\n}\n\nconst styleTaskIcon = (variant: StyledTaskIconProps['variant'], theme: DefaultTheme) => {\n  const { background, foreground } = theme.components['task-manager']['task-icon'][variant];\n  let borderColor = 'transparent';\n  if (variant === 'queued') {\n    borderColor = theme.base.colors.slate['extra-dark'];\n  }\n  return css`\n    margin-inline-end: ${theme.base.spacing};\n    border-radius: 50%;\n    width: 2rem;\n    height: 2rem;\n    align-items: center;\n    min-height: 2rem;\n    min-width: 2rem;\n    justify-content: center;\n    line-height: 1rem;\n    display: inline-flex;\n    padding: calc(0.75 * ${theme.base.spacing});\n    color: ${foreground};\n    background: ${background};\n    font-size: 1rem;\n    border: 0.0625rem dashed ${borderColor};\n  `;\n};\n\nexport const StyledTaskIcon = styled.div<StyledTaskIconProps>(({ variant, theme }) => {\n  return css`\n    ${styleTaskIcon(variant, theme)}\n  `;\n});\n\nexport const StyledTaskSummaryItem = styled.li<StyledTaskIconProps>(({ variant, theme }) => {\n  const {\n    base: { spacing }\n  } = theme;\n  return css`\n    min-height: 2.5rem;\n    padding: ${spacing} 0;\n    > ${StyledVisual} {\n      ${styleTaskIcon(variant, theme)}\n    }\n    &:not(:last-child) {\n      border-bottom: 0.0625rem solid ${theme.base.palette['border-line']};\n    }\n  `;\n});\n\nStyledTaskSummaryItem.defaultProps = defaultThemeProp;\n\nexport const StyledTaskDrawerSummaryItem = styled.div``;\ninterface StyledTaskDrawerBareButtonProps extends StyledTaskIconProps {\n  active?: boolean;\n}\n\nexport const StyledTaskDrawerBareButton = styled(BareButton)<StyledTaskDrawerBareButtonProps>(\n  ({\n    variant,\n    active = false,\n    theme,\n    theme: {\n      base: {\n        palette: { 'border-line': borderLine }\n      }\n    }\n  }) => {\n    const primaryColor = theme.base.palette.interactive;\n    return css`\n      white-space: nowrap;\n      border-bottom: 0.1rem solid ${borderLine};\n      position: relative;\n      width: 100%;\n      text-align: left;\n      min-height: 3.45rem;\n      outline: none;\n      background-color: ${active &&\n      css`\n        ${theme.base.colors.white}\n      `};\n\n      & + & {\n        margin-inline-start: 0;\n      }\n\n      &::before {\n        content: '';\n        display: ${active ? 'block' : 'none'};\n        background: ${primaryColor};\n        position: absolute;\n        width: 0.25rem;\n        height: 100%;\n        top: 0;\n        left: 0;\n      }\n\n      &::after {\n        content: '';\n        display: ${active ? 'block' : 'none'};\n        position: absolute;\n        width: 0.0625rem;\n        top: 0;\n        height: 100%;\n        right: -0.0625rem;\n        background-color: ${active &&\n        css`\n          ${theme.base.colors.white}\n        `};\n      }\n\n      &:not(:first-child):not(:last-child)::before,\n      &:not(:first-child):not(:last-child)::after {\n        height: calc(100% + 0.0625rem);\n      }\n\n      > ${StyledTaskDrawerSummaryItem} {\n        overflow-x: hidden;\n      }\n\n      > ${StyledTaskDrawerSummaryItem} > ${StyledVisual} {\n        ${styleTaskIcon(variant, theme)}\n        ${active &&\n        css`\n          background: ${theme.base.palette.interactive};\n          color: ${theme.base.colors.white};\n        `}\n      }\n\n      &:hover,\n      &:focus {\n        background: ${theme.base.colors.white};\n      }\n    `;\n  }\n);\n\nStyledTaskDrawerBareButton.defaultProps = defaultThemeProp;\n\nexport const StyledTasksTabList = styled.div``;\nexport const StyledStickyCardHeader = styled(StyledCardHeader)``;\n\ninterface StyledTaskManagerProps {\n  hasDrawer?: boolean;\n}\n\nexport const TASK_DRAWER_COLLAPSED_WIDTH = '4rem';\n\nexport const StyledTaskManager = styled.div<StyledTaskManagerProps>(\n  ({\n    hasDrawer = true,\n    theme: {\n      base: { animation }\n    },\n    theme\n  }) => {\n    const primaryBackgroundColor = theme.base.palette['primary-background'];\n    const primaryColor = theme.base.palette.interactive;\n    const lightenedColor = tryCatch(() => transparentize(0.5, primaryColor)) ?? '';\n\n    return css`\n      background: ${primaryBackgroundColor};\n      position: relative;\n      border-radius: 0.5rem;\n      padding-left: calc(${hasDrawer ? 8 : 0} * ${theme.base.spacing});\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      ${StyledTaskDrawerWrapper} {\n        background-color: ${theme.base.colors.gray.light};\n        border-right: 0.0625rem solid ${theme.base.palette['border-line']};\n        position: absolute;\n        z-index: 10;\n        top: 0;\n        bottom: 0;\n        left: 0;\n        width: ${TASK_DRAWER_COLLAPSED_WIDTH};\n        transition: width ${animation.speed} ${animation.timing.ease};\n        will-change: width;\n        border-bottom-left-radius: 0.5rem;\n\n        &:hover,\n        &:focus-within {\n          width: 25rem;\n          transition-delay: 0.25s;\n        }\n      }\n\n      ${StyledTaskDrawerWrapper} > ${StyledTaskDrawer} {\n        position: sticky;\n        z-index: 2;\n        top: 0;\n        bottom: 0;\n        left: 0;\n        width: 100%;\n      }\n\n      ${StyledTasksTabList} {\n        ${StyledTaskDrawerBareButton} {\n          margin-inline-start: 0;\n          &:hover,\n          &:focus {\n            ::before {\n              display: block;\n              background-color: ${lightenedColor};\n            }\n          }\n        }\n      }\n      ${StyledTaskDrawerBareButton} {\n        > ${StyledTaskDrawerSummaryItem} > ${StyledVisual} {\n          margin: 0 calc(2 * ${theme.base.spacing});\n        }\n      }\n\n      ${StyledStickyCardHeader} {\n        position: sticky;\n        top: 0;\n        left: 0;\n        background: ${primaryBackgroundColor};\n        z-index: 6;\n        height: calc(3.5rem - 0.0625rem);\n        border-bottom: 0.0625rem solid ${theme.base.palette['border-line']};\n        margin-bottom: ${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\n    & + ${StyledTaskManager} {\n      box-shadow: ${theme.base.shadow.low};\n      margin-block-start: 0;\n    }\n  `;\n});\n\nStyledTaskManagerBanner.defaultProps = defaultThemeProp;\n\nexport const StyledPopover = styled(Popover)(({ theme }) => {\n  return css`\n    width: 20rem;\n    border-radius: ${theme.base['border-radius']};\n  `;\n});\n\nStyledPopover.defaultProps = defaultThemeProp;\n\nexport default StyledTaskManager;\n"]}
+{"version":3,"file":"TaskManager.styles.js","sourceRoot":"","sources":["../../../src/components/TaskManager/TaskManager.styles.ts"],"names":[],"mappings":"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","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

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

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

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

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