npm - @pega/cosmos-react-cs - Versions diffs - 2.0.0-dev.2.0 → 2.0.0-dev.21.1 - Mend

@pega/cosmos-react-cs 2.0.0-dev.2.0 → 2.0.0-dev.21.1

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

Files changed (162) hide show

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

	@@ -1 +1 @@
1	- {"version":3,"file":"TaskManager.js","sourceRoot":"","sources":["../../../src/components/TaskManager/TaskManager.tsx"],"names":[],"mappings":"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","sourcesContent":["import React, {\n FunctionComponent,\n PropsWithoutRef,\n forwardRef,\n useRef,\n useEffect,\n useState\n} from 'react';\nimport { remToPx, stripUnit } from 'polished';\n\nimport {\n Flex,\n Icon,\n Text,\n Status,\n useI18n,\n useConsolidatedRef,\n useElement,\n Button,\n Grid,\n SummaryItem,\n useOuterEvent,\n NoItems,\n useTheme,\n tryCatch,\n ForwardProps\n} from '@pega/cosmos-react-core';\n\nimport {\n StyledTaskManager,\n StyledTaskIcon,\n StyledTaskManagerBanner,\n StyledTaskSummaryItem,\n StyledPopover\n} from './TaskManager.styles';\nimport TaskManagerContext from './TaskManager.context';\nimport TaskDrawer from './TaskDrawer';\nimport { TaskManagerProps } from './TaskManager.types';\nimport TaskView from './TaskView';\nimport Picker from './Picker/Picker';\nimport { PickerProps } from './Picker/Picker.types';\n\nconst TaskManager: FunctionComponent<TaskManagerProps & ForwardProps> = forwardRef(\n (props: PropsWithoutRef<TaskManagerProps>, ref: TaskManagerProps['ref']) => {\n const {\n tasks = [],\n emptyText,\n onLaunchTask,\n onDismissTask,\n addTask,\n wrapUp,\n main,\n banner,\n ...restProps\n } = props;\n const t = useI18n();\n const taskDrawerRef = 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 [popoverEl, setPopoverEl] = useElement<HTMLElement>(null);\n const theme = useTheme();\n\n useEffect(() => {\n if (taskDrawerRef.current && consolidatedRef.current) {\n consolidatedRef.current.style.minHeight = `${taskDrawerRef.current.scrollHeight}px`;\n } else if (consolidatedRef.current) {\n consolidatedRef.current.style.minHeight = '0';\n }\n }, [tasks, addTask]);\n\n useOuterEvent('mousedown', [popoverEl, addTaskEl], () => {\n setShowPicker(false);\n });\n\n return (\n <TaskManagerContext.Provider\n value={{\n addTask,\n wrapUp,\n tasks,\n onLaunchTask\n }}\n >\n <div>\n {banner && (\n <Flex\n as={StyledTaskManagerBanner}\n container={{\n alignItems: 'center'\n }}\n aria-live='polite'\n >\n <StyledTaskIcon variant='banner'>\n <Icon name={banner.icon} />\n </StyledTaskIcon>\n <Text variant='h4'>{banner.content}</Text>\n </Flex>\n )}\n <StyledTaskManager {...restProps} ref={consolidatedRef} hasDrawer={hasDrawer}>\n {hasDrawer && <TaskDrawer ref={taskDrawerRef} addTask={addTask} />}\n {hasDrawer && main}\n {!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 itemGap: 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 ref={setPopoverEl}\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: PickerProps['items']) => {\n if (addTask.onAdd) {\n addTask?.onAdd(selectedItems);\n }\n setShowPicker(false);\n }}\n onCancel={() => {\n setShowPicker(false);\n }}\n ref={addTask.ref}\n />\n </StyledPopover>\n </>\n )}\n </Flex>\n }\n >\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={{ itemGap: 1 }}>\n {(variant === 'queued' \|\| variant === 'suggested') && (\n <>\n <Button\n variant='simple'\n aria-label={t('dismiss_label_a11y', name)}\n onClick={() => {\n onDismissTask?.(id);\n }}\n >\n {t('dismiss')}\n </Button>\n <Button\n variant='secondary'\n aria-label={t('go_label_a11y', name)}\n onClick={() => {\n onLaunchTask?.(id);\n }}\n >\n {t('go')}\n </Button>\n </>\n )}\n {variant === 'in-progress' && (\n <Button\n variant='secondary'\n aria-label={t('continue_label_a11y', name)}\n onClick={() => {\n onLaunchTask?.(id);\n }}\n >\n {t('continue')}\n </Button>\n )}\n {variant === 'resolved' && (\n <Button\n variant='secondary'\n aria-label={t('review_label_a11y', name)}\n onClick={() => {\n onLaunchTask?.(id);\n }}\n >\n {t('review')}\n </Button>\n )}\n </Flex>\n }\n />\n );\n }\n )}\n {tasks.length === 0 && <NoItems message={emptyText} />}\n </Grid>\n </TaskView>\n )}\n </StyledTaskManager>\n </div>\n </TaskManagerContext.Provider>\n );\n }\n);\n\nexport default TaskManager;\n"]}
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')}\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')}\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')}\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')}\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 CHANGED Viewed

@@ -1,25 +1,20 @@
-import { DefaultTheme } from 'styled-components';
-import { TaskProps } from './TaskManager.types';
-export declare const StyledTaskDrawerWrapper: import("styled-components").StyledComponent<"div", DefaultTheme, {}, never>;
-export declare const StyledTaskDrawer: import("styled-components").StyledComponent<"div", DefaultTheme, {}, never>;
-export interface StyledTaskIconProps {
-    variant: TaskProps['variant'] | 'action' | 'banner';
-}
-export declare const StyledTaskIcon: import("styled-components").StyledComponent<"div", DefaultTheme, StyledTaskIconProps, never>;
-export declare const StyledTaskSummaryItem: import("styled-components").StyledComponent<"li", DefaultTheme, StyledTaskIconProps, never>;
-export declare const StyledTaskDrawerSummaryItem: import("styled-components").StyledComponent<"div", DefaultTheme, {}, never>;
-interface StyledTaskDrawerBareButtonProps extends StyledTaskIconProps {
-    active?: boolean;
-}
-export declare const StyledTaskDrawerBareButton: import("styled-components").StyledComponent<import("react").FunctionComponent<import("@pega/cosmos-react-core/lib/components/Button/BareButton").BareButtonProps & import("@pega/cosmos-react-core").ForwardProps>, DefaultTheme, StyledTaskDrawerBareButtonProps, never>;
-export declare const StyledTasksTabList: import("styled-components").StyledComponent<"div", DefaultTheme, {}, never>;
-export declare const StyledStickyCardHeader: import("styled-components").StyledComponent<"header", DefaultTheme, import("@pega/cosmos-react-core").CardHeaderProps, never>;
+/// <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 TASK_DRAWER_COLLAPSED_WIDTH = "4rem";
-export declare const StyledTaskManager: import("styled-components").StyledComponent<"div", DefaultTheme, StyledTaskManagerProps, never>;
-export declare const StyledTaskManagerBanner: import("styled-components").StyledComponent<"div", 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), DefaultTheme, {}, never>;
+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 CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"TaskManager.styles.d.ts","sourceRoot":"","sources":["../../../src/components/TaskManager/TaskManager.styles.ts"],"names":[],"mappings":"~~AAAA,OAAe,EAAO,YAAY,EAAE,MAAM,mBAAmB,CAAC~~;~~AAS9D~~,OAAO,EAAE,~~SAAS~~,EAAE,MAAM,qBAAqB,CAAC;~~AAEhD~~,eAAO,MAAM,~~uBAAuB~~,~~6EAAe~~,CAAC;~~AACpD~~,eAAO,MAAM,~~gBAAgB~~,~~6EAAe~~,CAAC;~~AAE7C~~,MAAM,~~WAAW~~,~~mBAAmB;IAClC~~,~~OAAO,EAAE,SAAS,~~CAAC~~,SAAS,CAAC,GAAG,QAAQ,GAAG,QAAQ,CAAC~~;~~CACrD;AA2BD~~,eAAO,MAAM,~~cAAc~~,~~8FAIzB~~,CAAC;~~AAEH~~,eAAO,MAAM,~~qBAAqB~~,~~6FAchC~~,CAAC;~~AAIH~~,eAAO,MAAM,~~2BAA2B~~,~~6EAAe~~,CAAC;~~AACxD~~,~~UAAU,+BAAgC~~,~~SAAQ,mBAAmB;IACnE,~~MAAM,~~CAAC~~,~~EAAE~~,~~OAAO,~~CAAC;~~CAClB;AAED~~,eAAO,MAAM,~~0BAA0B~~,~~2QA8EtC~~,CAAC;~~AAIF~~,eAAO,MAAM,~~kBAAkB~~,~~6EAAe~~,CAAC;~~AAC/C~~,eAAO,MAAM,~~sBAAsB,+HAA6B~~,CAAC;~~AAEjE~~,UAAU,sBAAsB;IAC9B,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB;AAED,eAAO,MAAM,~~2BAA2B,SAAS,CAAC;AAElD,eAAO,MAAM,~~iBAAiB,~~iGAmF7B~~,CAAC;~~AAIF~~,eAAO,MAAM,uBAAuB,~~6EAYlC~~,CAAC;AAIH,eAAO,MAAM,aAAa,~~iUAKxB~~,CAAC;AAIH,eAAe,iBAAiB,CAAC"}
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 CHANGED Viewed

@@ -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;
-      ${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: calc(${theme.base.spacing} * 2);
+    }
+    ${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 CHANGED Viewed

	@@ -1 +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 ${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: calc(${theme.base.spacing} * 2);\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"]}
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"]}