npm - @pega/cosmos-react-cs - Versions diffs - 2.0.0-dev.12.1 → 2.0.0-dev.14.2 - Mend

@pega/cosmos-react-cs 2.0.0-dev.12.1 → 2.0.0-dev.14.2

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 (73) hide show

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

	@@ -1 +1 @@
1	- {"version":3,"file":"Picker.js","sourceRoot":"","sources":["../../../../src/components/TaskManager/Picker/Picker.tsx"],"names":[],"mappings":";AAAA,OAAO,EAEL,UAAU,EAGV,SAAS,EACT,OAAO,EACP,QAAQ,EACT,MAAM,OAAO,CAAC;AACf,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAEhD,OAAO,EACL,MAAM,EACN,KAAK,EACL,gBAAgB,EAChB,IAAI,EAEJ,IAAI,EACJ,WAAW,EACX,IAAI,EACJ,OAAO,EACR,MAAM,yBAAyB,CAAC;AACjC,OAAO,gBAAgB,MAAM,mFAAmF,CAAC;AAMjH,MAAM,YAAY,GAAG,MAAM,CAAC,GAAG,CAAA,EAAE,CAAC;AAClC,MAAM,sBAAsB,GAAG,MAAM,CAAC,gBAAgB,CAAC,CAAC,KAAK,CAAC,EAAE;IAC9D,MAAM,EAAE,KAAK,EAAE,GAAG,KAAK,CAAC;IACxB,OAAO,GAAG,CAAA;8BACkB,KAAK,CAAC,IAAI,CAAC,eAAe,CAAC;GACtD,CAAC;AACJ,CAAC,CAAC,CAAC;AACH,YAAY,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAE7C,MAAM,WAAW,GAAG,MAAM,CAAC,KAAK,CAAC,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE;IAC9C,OAAO,GAAG,CAAA;sCAC0B,KAAK,CAAC,IAAI,CAAC,OAAO;GACrD,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,WAAW,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAE5C,MAAM,MAAM,GAAkD,UAAU,CACtE,CACE,EACE,EAAE,EACF,KAAK,EACL,SAAS,EACT,KAAK,EACL,WAAW,EACX,KAAK,EACL,QAAQ,EACR,GAAG,SAAS,EACiB,EAC/B,GAAuB,EACvB,EAAE;IACF,MAAM,CAAC,GAAG,OAAO,EAAE,CAAC;IAEpB,MAAM,CAAC,YAAY,EAAE,QAAQ,CAAC,GAAG,QAAQ,CAAuB,KAAK,CAAC,CAAC;IAEvE,SAAS,CAAC,GAAG,EAAE;QACb,QAAQ,CAAC,KAAK,CAAC,CAAC;IAClB,CAAC,EAAE,CAAC,KAAK,CAAC,CAAC,CAAC;IAEZ,MAAM,CAAC,WAAW,EAAE,cAAc,CAAC,GAAG,QAAQ,CAAC,EAAE,CAAC,CAAC;IAEnD,MAAM,WAAW,GAAG,IAAI,MAAM,CAAC,WAAW,CAAC,OAAO,CAAC,uBAAuB,EAAE,MAAM,CAAC,EAAE,GAAG,CAAC,CAAC;IAE1F,MAAM,WAAW,GAAG,OAAO,CAAC,GAAG,EAAE;QAC/B,OAAO,WAAW,CAAC,OAAO,CACxB,WAAW;YACT,CAAC,CAAC,WAAW,CAAC,OAAO,CAAC,YAAY,CAAC,CAAC,MAAM,CAAC,CAAC,EAAE,OAAO,EAAiB,EAAE,EAAE;gBACtE,OAAO,WAAW,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC;YACnC,CAAC,CAAC;YACJ,CAAC,CAAC,YAAY,EAChB,IAAI,CAAC,EAAE;YACL,IAAI,UAAU,GAAG,KAAK,CAAC;YACvB,IAAI,CAAC,IAAI,CAAC,KAAK,EAAE;gBACf,UAAU,GAAG,IAAI,CAAC;aACnB;YACD,OAAO;gBACL,GAAG,IAAI;gBACP,QAAQ,EAAE,UAAU,CAAC,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,SAAS;aACnD,CAAC;QACJ,CAAC,CACF,CAAC;IACJ,CAAC,EAAE,CAAC,WAAW,EAAE,YAAY,EAAE,WAAW,CAAC,CAAC,CAAC;IAE7C,MAAM,CAAC,UAAU,EAAE,aAAa,CAAC,GAAG,QAAQ,CAAkB,EAAE,CAAC,CAAC;IAElE,MAAM,aAAa,GAAe,UAAU,CAAC,GAAG,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;QACxD,IAAI,EAAE,IAAI,CAAC,OAAO;QAClB,EAAE,EAAE,IAAI,CAAC,EAAE;KACZ,CAAC,CAAC,CAAC;IAEJ,OAAO,CACL,KAAC,YAAY,kBAAC,GAAG,EAAE,GAAG,EAAE,EAAE,EAAE,EAAE,gBAC5B,KAAC,IAAI,kBACH,KAAK,EAAE,WAAW,EAClB,WAAW,EAAE,CAAC,GAAW,EAAE,EAAE;gBAC3B,MAAM,WAAW,GAAG,WAAW,CAAC,OAAO,CAAC,WAAW,EAAE,GAAG,CAAC,CAAC;gBAC1D,IAAI,WAAW,EAAE;oBACf,QAAQ,CAAC,CAAC,GAAyB,EAAE,EAAE,CACrC,WAAW,CAAC,cAAc,CAAC,GAAG,EAAE,GAAG,EAAE,cAAc,CAAC,CACrD,CAAC;oBACF,IAAI,UAAU,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE,CAAC,IAAI,CAAC,EAAE,KAAK,GAAG,CAAC,EAAE;wBAC5C,aAAa,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,CAAC,MAAM,CAAC,IAAI,CAAC,EAAE,CAAC,IAAI,CAAC,EAAE,KAAK,WAAW,EAAE,EAAE,CAAC,CAAC,CAAC;qBACvE;yBAAM;wBACL,aAAa,CAAC,GAAG,CAAC,EAAE,CAAC,CAAC,GAAG,GAAG,EAAE,WAAW,CAAC,CAAC,CAAC;qBAC7C;oBACD,cAAc,CAAC,EAAE,CAAC,CAAC;iBACpB;YACH,CAAC,EACD,SAAS,EAAE,SAAS,IAAI,CAAC,CAAC,UAAU,CAAC,EACrC,MAAM,EAAE,WAAW,IACf,SAAS,IACb,IAAI,EAAC,cAAc,EACnB,MAAM,EACJ,MAAC,IAAI,kBAAC,SAAS,EAAE,EAAE,SAAS,EAAE,QAAQ,EAAE,GAAG,EAAE,CAAC,EAAE,iBAC7C,KAAK,IAAI,KAAC,IAAI,kBAAC,OAAO,EAAC,IAAI,gBAAE,KAAK,YAAQ,EAC3C,KAAC,sBAAsB,IACrB,KAAK,EAAE,WAAW,EAClB,QAAQ,EAAE,CAAC,EAAiC,EAAE,EAAE;4BAC9C,cAAc,CAAC,EAAE,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC;wBAClC,CAAC,EACD,QAAQ,EAAE,aAAa,EACvB,QAAQ,EAAE,CAAC,GAAW,EAAE,EAAE;4BACxB,QAAQ,CAAC,CAAC,GAAyB,EAAE,EAAE,CACrC,WAAW,CAAC,cAAc,CAAC,GAAG,EAAE,GAAG,EAAE,cAAc,CAAC,CACrD,CAAC;4BACF,aAAa,CAAC,GAAG,CAAC,EAAE;gCAClB,MAAM,YAAY,GAAG,WAAW,CAAC,OAAO,CAAC,GAAG,EAAE,GAAG,CAAC,CAAC;gCACnD,OAAO,GAAG,CAAC,MAAM,CAAC,IAAI,CAAC,EAAE,CAAC,IAAI,CAAC,EAAE,KAAK,YAAY,EAAE,EAAE,CAAC,CAAC;4BAC1D,CAAC,CAAC,CAAC;wBACL,CAAC,EACD,WAAW,EACT,aAAa,CAAC,MAAM,GAAG,CAAC,IAAI,CAAC,WAAW,IAAI,CAAC,CAAC,4BAA4B,CAAC,CAAC,EAE9E,SAAS,iBACT,aACG,EAET,MAAM,EACJ,MAAC,IAAI,kBAAC,SAAS,EAAE,EAAE,OAAO,EAAE,SAAS,EAAE,iBACrC,KAAC,MAAM,kBAAC,OAAO,EAAE,QAAQ,gBAAc,CAAC,CAAC,QAAQ,CAAC,oCAEzC,EACT,MAAC,MAAM,kBACL,OAAO,EAAC,SAAS,EACjB,QAAQ,EAAE,CAAC,aAAa,CAAC,MAAM,EAC/B,OAAO,EAAE,GAAG,EAAE;4BACZ,KAAK,EAAE,CAAC,UAAU,CAAC,CAAC;4BACpB,QAAQ,CAAC,YAAY,CAAC,CAAC;wBACzB,CAAC,gBACW,CAAC,CAAC,+BAA+B,EAAE,aAAa,EAAE,MAAM,CAAC,iBAEpE,CAAC,CAAC,KAAK,CAAC,EACR,CAAC,CAAC,aAAa,EAAE,MAAM,IAAI,KAAC,WAAW,cAAE,aAAa,CAAC,MAAM,WAAe,aACtE,aACJ,YAET,YACW,CAChB,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,eAAe,MAAM,CAAC","sourcesContent":["import {\n ChangeEvent,\n forwardRef,\n FunctionComponent,\n PropsWithoutRef,\n useEffect,\n useMemo,\n useState\n} from 'react';\nimport styled, { css } from 'styled-components';\n\nimport {\n Button,\n Count,\n defaultThemeProp,\n Flex,\n ForwardProps,\n Menu,\n menuHelpers,\n Text,\n useI18n\n} from '@pega/cosmos-react-core';\nimport MultiSelectInput from '@pega/cosmos-react-core/lib/components/ComboBox/MultiSelectInput/MultiSelectInput';\nimport { Selected } from '@pega/cosmos-react-core/lib/components/ComboBox/ComboBox.types';\nimport { MenuItemProps } from '@pega/cosmos-react-core/lib/components/Menu/Menu.types';\n\nimport { PickerProps } from './Picker.types';\n\nconst StyledPicker = styled.div``;\nconst StyledMultiSelectInput = styled(MultiSelectInput)(props => {\n const { theme } = props;\n return css`\n border-radius: calc(2 * ${theme.base['border-radius']});\n `;\n});\nStyledPicker.defaultProps = defaultThemeProp;\n\nconst StyledCount = styled(Count)(({ theme }) => {\n return css`\n margin-inline-start: calc(0.5 * ${theme.base.spacing});\n `;\n});\n\nStyledCount.defaultProps = defaultThemeProp;\n\nconst Picker: FunctionComponent<PickerProps & ForwardProps> = forwardRef(\n (\n {\n id,\n items,\n emptyText,\n title,\n placeholder,\n onAdd,\n onCancel,\n ...restProps\n }: PropsWithoutRef<PickerProps>,\n ref: PickerProps['ref']\n ) => {\n const t = useI18n();\n\n const [initialItems, setItems] = useState<PickerProps['items']>(items);\n\n useEffect(() => {\n setItems(items);\n }, [items]);\n\n const [searchInput, setSearchInput] = useState('');\n\n const filterRegex = new RegExp(searchInput.replace(/[.*+\\-?^${}()\|[\\]\\\\]/g, '\\\\$&'), 'i');\n\n const renderItems = useMemo(() => {\n return menuHelpers.mapTree(\n searchInput\n ? menuHelpers.flatten(initialItems).filter(({ primary }: MenuItemProps) => {\n return filterRegex.test(primary);\n })\n : initialItems,\n item => {\n let selectable = false;\n if (!item.items) {\n selectable = true;\n }\n return {\n ...item,\n selected: selectable ? !!item.selected : undefined\n };\n }\n );\n }, [searchInput, initialItems, filterRegex]);\n\n const [selections, setSelections] = useState<MenuItemProps[]>([]);\n\n const selectedArray: Selected[] = selections.map(item => ({\n text: item.primary,\n id: item.id\n }));\n\n return (\n <StyledPicker ref={ref} id={id}>\n <Menu\n items={renderItems}\n onItemClick={(uid: string) => {\n const clickedItem = menuHelpers.getItem(renderItems, uid);\n if (clickedItem) {\n setItems((cur: PickerProps['items']) =>\n menuHelpers.toggleSelected(cur, uid, 'multi-select')\n );\n if (selections.find(item => item.id === uid)) {\n setSelections(cur => cur.filter(item => item.id !== clickedItem?.id));\n } else {\n setSelections(cur => [...cur, clickedItem]);\n }\n setSearchInput('');\n }\n }}\n emptyText={emptyText \|\| t('no_items')}\n accent={filterRegex}\n {...restProps}\n mode='multi-select'\n header={\n <Flex container={{ direction: 'column', gap: 1 }}>\n {title && <Text variant='h4'>{title}</Text>}\n <StyledMultiSelectInput\n value={searchInput}\n onChange={(ev: ChangeEvent<HTMLInputElement>) => {\n setSearchInput(ev.target.value);\n }}\n selected={selectedArray}\n onRemove={(uid: string) => {\n setItems((cur: PickerProps['items']) =>\n menuHelpers.toggleSelected(cur, uid, 'multi-select')\n );\n setSelections(cur => {\n const itemToRemove = menuHelpers.getItem(cur, uid);\n return cur.filter(item => item.id !== itemToRemove?.id);\n });\n }}\n placeholder={\n selectedArray.length < 1 && (placeholder \|\| t('search_placeholder_default'))\n }\n autoFocus\n />\n </Flex>\n }\n footer={\n <Flex container={{ justify: 'between' }}>\n <Button onClick={onCancel} aria-label={t('cancel')}>\n Cancel\n </Button>\n <Button\n variant='primary'\n disabled={!selectedArray.length}\n onClick={() => {\n onAdd?.(selections);\n setItems(initialItems);\n }}\n aria-label={t('task_manager_picker_add_label', selectedArray?.length)}\n >\n {t('add')}\n {!!selectedArray?.length && <StyledCount>{selectedArray.length}</StyledCount>}\n </Button>\n </Flex>\n }\n />\n </StyledPicker>\n );\n }\n);\n\nexport default Picker;\n"]}
1	+ {"version":3,"file":"Picker.js","sourceRoot":"","sources":["../../../../src/components/TaskManager/Picker/Picker.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n forwardRef,\n FunctionComponent,\n PropsWithoutRef,\n useCallback,\n useEffect,\n useMemo,\n useRef,\n useState\n} from 'react';\nimport styled, { css } from 'styled-components';\n\nimport {\n Button,\n Count,\n defaultThemeProp,\n Flex,\n ForwardProps,\n Icon,\n Menu,\n menuHelpers,\n EmptyState,\n SearchInput,\n SummaryItem,\n Text,\n useI18n\n} from '@pega/cosmos-react-core';\nimport { MenuItemProps } from '@pega/cosmos-react-core/lib/components/Menu/Menu.types';\nimport { DragDropList, DragDropManager } from '@pega/cosmos-react-dnd';\nimport { ItemRendererProps } from '@pega/cosmos-react-dnd/lib/components/DragDrop/DragDrop.types';\n\nimport { DraggableSelectedListProps, PickerProps, SelectedItemProps } from './Picker.types';\n\nconst StyledPickerHeader = styled.div(({ theme }) => {\n return css`\n padding-inline-start: calc(2 * ${theme.base.spacing});\n `;\n});\nStyledPickerHeader.defaultProps = defaultThemeProp;\n\nconst StyledAddTasks = styled.div(({ theme }) => {\n return css`\n /* temporary remove height once list is replaced with flat list /\n height: calc(45 0.5rem);\n flex-basis: 50%;\n padding: 0 ${theme.base.spacing} ${theme.base.spacing};\n header {\n padding-top: 0;\n border-bottom: none;\n }\n `;\n});\nStyledAddTasks.defaultProps = defaultThemeProp;\n\nconst StyledSelectedTasks = styled.div(({ theme }) => {\n return css`\n flex-basis: 50%;\n padding: 0 ${theme.base.spacing} ${theme.base.spacing};\n border-inline-start: 0.0625rem solid ${theme.base.palette['border-line']};\n > h3 {\n padding: 0 0 ${theme.base.spacing} ${theme.base.spacing};\n }\n `;\n});\nStyledSelectedTasks.defaultProps = defaultThemeProp;\n\nconst StyledSummaryItem = styled(SummaryItem)(({ theme }) => {\n return css`\n padding: ${theme.base.spacing} 0;\n &:not(:last-child) {\n border-bottom: 0.0625rem solid ${theme.base.palette['border-line']};\n }\n `;\n});\nStyledSummaryItem.defaultProps = defaultThemeProp;\n\nconst StyledPickerFooter = styled.div(({ theme }) => {\n return css`\n border-top: 0.0625rem solid ${theme.base.palette['border-line']};\n padding: ${theme.base.spacing};\n `;\n});\nStyledPickerFooter.defaultProps = defaultThemeProp;\n\nconst StyledDDList = styled.ul`\n height: 20rem;\n overflow-y: auto;\n`;\n\nconst StyledPicker = styled.div`\n height: 100%;\n`;\n\nconst StyledDragHandle = styled.div`\n cursor: move;\n > svg {\n display: block;\n }\n`;\n\nconst StyledCount = styled(Count)(({ theme }) => {\n return css`\n margin-inline-start: calc(0.5 * ${theme.base.spacing});\n `;\n});\n\nStyledCount.defaultProps = defaultThemeProp;\n\nconst SelectedItemRenderer = ({\n dragRef,\n previewRef,\n data\n}: ItemRendererProps<SelectedItemProps>) => {\n const t = useI18n();\n return (\n <StyledSummaryItem\n ref={previewRef}\n visual={\n <StyledDragHandle ref={dragRef}>\n <Icon name='drag' />\n </StyledDragHandle>\n }\n primary={data?.primary}\n secondary={data?.secondary}\n actions={\n <Button\n variant='simple'\n icon\n label={t('task_manager_delete_task')}\n onClick={() => data?.onRemoveItem(data.id)}\n >\n <Icon name='trash' />\n </Button>\n }\n />\n );\n};\n\nconst DraggableSelectedList = ({\n selectedItems,\n onChange,\n itemRenderer\n}: DraggableSelectedListProps) => {\n return (\n <DragDropManager>\n <DragDropList\n as={StyledDDList}\n accept='string'\n items={selectedItems.map(item => ({\n id: item.id,\n type: 'string',\n data: item\n }))}\n itemRenderer={itemRenderer}\n onChange={onChange}\n />\n </DragDropManager>\n );\n};\n\nconst Picker: FunctionComponent<PickerProps & ForwardProps> = forwardRef(\n (\n {\n id,\n items,\n emptyText,\n title,\n placeholder,\n onAdd,\n onCancel,\n ...restProps\n }: PropsWithoutRef<PickerProps>,\n ref: PickerProps['ref']\n ) => {\n const t = useI18n();\n\n const [initialItems, setItems] = useState<PickerProps['items']>(items);\n\n const [searchInput, setSearchInput] = useState('');\n\n const filterRegex = new RegExp(searchInput.replace(/[.*+\\-?^${}()\|[\\]\\\\]/g, '\\\\$&'), 'i');\n const [selections, setSelections] = useState<SelectedItemProps[]>([]);\n const searchEleRef = useRef<HTMLInputElement>(null);\n\n useEffect(() => {\n setItems(items);\n }, [items]);\n\n const onKeydown = useCallback(\n ({ key }: KeyboardEvent) => {\n if (key === 'Escape') onCancel?.();\n },\n [onCancel]\n );\n\n useEffect(() => {\n document.addEventListener('keydown', onKeydown);\n return () => {\n document.removeEventListener('keydown', onKeydown);\n };\n }, []);\n\n const renderItems = useMemo(() => {\n return menuHelpers.mapTree(\n searchInput\n ? menuHelpers\n .flatten(initialItems)\n .filter(({ primary, items: childItems }: MenuItemProps) => {\n return filterRegex.test(primary) && !childItems?.length;\n })\n : initialItems,\n item => {\n let selectable = false;\n if (!item.items) {\n selectable = true;\n }\n return {\n ...item,\n selected: selectable ? !!item.selected : undefined\n };\n }\n );\n }, [searchInput, initialItems, filterRegex]);\n\n const removeTasks = useCallback((uid: string) => {\n setItems((cur: PickerProps['items']) => menuHelpers.toggleSelected(cur, uid, 'multi-select'));\n setSelections(cur => {\n const itemToRemove = menuHelpers.getItem(cur, uid);\n return cur.filter(item => item.id !== itemToRemove?.id);\n });\n }, []);\n\n return (\n <Flex as={StyledPicker} container={{ direction: 'column' }} ref={ref} id={id}>\n <Flex\n as={StyledPickerHeader}\n container={{ justify: 'between', alignItems: 'center', pad: 1 }}\n >\n <Text variant='h3'>{t('add_tasks')}</Text>\n <Button variant='simple' onClick={onCancel} aria-label={t('task_picker_close')} icon>\n <Icon name='times' />\n </Button>\n </Flex>\n <Flex container>\n <Flex as={StyledAddTasks}>\n <Menu\n items={renderItems}\n onItemClick={(uid: string) => {\n const clickedItem = menuHelpers.getItem(renderItems, uid);\n const parentItem = menuHelpers.getParentItem(renderItems, uid);\n if (clickedItem) {\n setItems((cur: PickerProps['items']) =>\n menuHelpers.toggleSelected(cur, uid, 'multi-select')\n );\n if (selections.find(item => item.id === uid)) {\n setSelections(cur => cur.filter(item => item.id !== clickedItem?.id));\n } else {\n setSelections(cur => {\n let secondary;\n if (parentItem)\n secondary = menuHelpers.isItem(parentItem)\n ? parentItem.primary\n : parentItem.label;\n return [\n ...cur,\n {\n ...clickedItem,\n secondary,\n onRemoveItem: removeTasks\n } as SelectedItemProps\n ];\n });\n }\n setSearchInput('');\n }\n }}\n focusControlEl={searchEleRef.current \|\| undefined}\n emptyText={emptyText \|\| t('no_items')}\n accent={filterRegex}\n {...restProps}\n mode='multi-select'\n header={\n <Flex container={{ direction: 'column', gap: 1 }}>\n <SearchInput\n ref={searchEleRef}\n value={searchInput}\n onSearchChange={setSearchInput}\n placeholder={placeholder \|\| t('search_placeholder_default')}\n autoFocus\n />\n </Flex>\n }\n />\n </Flex>\n <Flex as={StyledSelectedTasks} container={{ direction: 'column' }}>\n <Text variant='h3'>{t('selected_tasks')}</Text>\n\n {selections.length > 0 ? (\n <DraggableSelectedList\n selectedItems={selections}\n onChange={newItems => {\n setSelections(\n newItems.map(({ type, data }) => ({\n ...data,\n type\n })) as SelectedItemProps[]\n );\n }}\n itemRenderer={SelectedItemRenderer}\n />\n ) : (\n <EmptyState message={t('no_selected_tasks')} />\n )}\n </Flex>\n </Flex>\n <Flex as={StyledPickerFooter} container={{ justify: 'between' }}>\n <Button onClick={onCancel} aria-label={t('cancel')}>\n Cancel\n </Button>\n <Button\n variant='primary'\n disabled={!selections.length}\n onClick={() => {\n onAdd?.(selections);\n setItems(initialItems);\n }}\n aria-label={t('task_manager_picker_add_label', selections?.length)}\n >\n {t('add')}\n {!!selections?.length && <StyledCount>{selections.length}</StyledCount>}\n </Button>\n </Flex>\n </Flex>\n );\n }\n);\n\nexport default Picker;\n"]}

package/lib/components/TaskManager/Picker/Picker.types.d.ts CHANGED Viewed

@@ -1,6 +1,7 @@
-import { Ref } from 'react';
+import { ComponentType, Ref } from 'react';
 import { BaseProps, MenuProps } from '@pega/cosmos-react-core';
 import { MenuItemProps } from '@pega/cosmos-react-core/lib/components/Menu/Menu.types';
+import { DraggableItem, ItemRendererProps } from '@pega/cosmos-react-dnd/lib/components/DragDrop/DragDrop.types';
 export interface PickerProps extends BaseProps, MenuProps {
     /** Unique id for picker */
     id?: string;
@@ -9,10 +10,18 @@ export interface PickerProps extends BaseProps, MenuProps {
     /** Callback when cancel button is clicked */
     onCancel?: () => void;
     /** Callback when add button is clicked */
-    onAdd: (selections: MenuItemProps[]) => void;
+    onAdd: (selections: SelectedItemProps[]) => void;
     /** Picker reference . */
     ref?: Ref<HTMLDivElement>;
     /** Title for the picker */
     title?: string;
 }
+export interface DraggableSelectedListProps {
+    selectedItems: SelectedItemProps[];
+    onChange: (items: DraggableItem<SelectedItemProps>[]) => void;
+    itemRenderer: ComponentType<ItemRendererProps<SelectedItemProps>>;
+}
+export interface SelectedItemProps extends MenuItemProps {
+    onRemoveItem: (id: MenuItemProps['id']) => void;
+}
 //# sourceMappingURL=Picker.types.d.ts.map

package/lib/components/TaskManager/Picker/Picker.types.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Picker.types.d.ts","sourceRoot":"","sources":["../../../../src/components/TaskManager/Picker/Picker.types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,OAAO,CAAC;~~AAE5B~~,OAAO,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,yBAAyB,CAAC;AAC/D,OAAO,EAAE,aAAa,EAAE,MAAM,wDAAwD,CAAC;~~AAEvF~~,MAAM,WAAW,WAAY,SAAQ,SAAS,EAAE,SAAS;IACvD,2BAA2B;IAC3B,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,uBAAuB;IACvB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,6CAA6C;IAC7C,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;IACtB,0CAA0C;IAC1C,KAAK,EAAE,CAAC,UAAU,EAAE,~~aAAa~~,EAAE,KAAK,IAAI,CAAC;~~IAC7C~~,yBAAyB;IACzB,GAAG,CAAC,EAAE,GAAG,CAAC,cAAc,CAAC,CAAC;IAC1B,2BAA2B;IAC3B,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB"}
1	+ {"version":3,"file":"Picker.types.d.ts","sourceRoot":"","sources":["../../../../src/components/TaskManager/Picker/Picker.types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,GAAG,EAAE,MAAM,OAAO,CAAC;AAE3C,OAAO,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,yBAAyB,CAAC;AAC/D,OAAO,EAAE,aAAa,EAAE,MAAM,wDAAwD,CAAC;AACvF,OAAO,EACL,aAAa,EACb,iBAAiB,EAClB,MAAM,+DAA+D,CAAC;AAEvE,MAAM,WAAW,WAAY,SAAQ,SAAS,EAAE,SAAS;IACvD,2BAA2B;IAC3B,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,uBAAuB;IACvB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,6CAA6C;IAC7C,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;IACtB,0CAA0C;IAC1C,KAAK,EAAE,CAAC,UAAU,EAAE,iBAAiB,EAAE,KAAK,IAAI,CAAC;IACjD,yBAAyB;IACzB,GAAG,CAAC,EAAE,GAAG,CAAC,cAAc,CAAC,CAAC;IAC1B,2BAA2B;IAC3B,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AACD,MAAM,WAAW,0BAA0B;IACzC,aAAa,EAAE,iBAAiB,EAAE,CAAC;IACnC,QAAQ,EAAE,CAAC,KAAK,EAAE,aAAa,CAAC,iBAAiB,CAAC,EAAE,KAAK,IAAI,CAAC;IAC9D,YAAY,EAAE,aAAa,CAAC,iBAAiB,CAAC,iBAAiB,CAAC,CAAC,CAAC;CACnE;AACD,MAAM,WAAW,iBAAkB,SAAQ,aAAa;IACtD,YAAY,EAAE,CAAC,EAAE,EAAE,aAAa,CAAC,IAAI,CAAC,KAAK,IAAI,CAAC;CACjD"}

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

	@@ -1 +1 @@
1	- {"version":3,"file":"Picker.types.js","sourceRoot":"","sources":["../../../../src/components/TaskManager/Picker/Picker.types.ts"],"names":[],"mappings":"","sourcesContent":["import { Ref } from 'react';\n\nimport { BaseProps, MenuProps } from '@pega/cosmos-react-core';\nimport { MenuItemProps } from '@pega/cosmos-react-core/lib/components/Menu/Menu.types';\n\nexport interface PickerProps extends BaseProps, MenuProps {\n /** Unique id for picker /\n id?: string;\n /* Placeholder text /\n placeholder?: string;\n /* Callback when cancel button is clicked /\n onCancel?: () => void;\n /* Callback when add button is clicked /\n onAdd: (selections: ~~MenuItemProps~~[]) => void;\n /* Picker reference . /\n ref?: Ref<HTMLDivElement>;\n /* Title for the picker */\n title?: string;\n}\n"]}
1	+ {"version":3,"file":"Picker.types.js","sourceRoot":"","sources":["../../../../src/components/TaskManager/Picker/Picker.types.ts"],"names":[],"mappings":"","sourcesContent":["import { ComponentType, Ref } from 'react';\n\nimport { BaseProps, MenuProps } from '@pega/cosmos-react-core';\nimport { MenuItemProps } from '@pega/cosmos-react-core/lib/components/Menu/Menu.types';\nimport {\n DraggableItem,\n ItemRendererProps\n} from '@pega/cosmos-react-dnd/lib/components/DragDrop/DragDrop.types';\n\nexport interface PickerProps extends BaseProps, MenuProps {\n /** Unique id for picker /\n id?: string;\n /* Placeholder text /\n placeholder?: string;\n /* Callback when cancel button is clicked /\n onCancel?: () => void;\n /* Callback when add button is clicked /\n onAdd: (selections: SelectedItemProps[]) => void;\n /* Picker reference . /\n ref?: Ref<HTMLDivElement>;\n /* Title for the picker */\n title?: string;\n}\nexport interface DraggableSelectedListProps {\n selectedItems: SelectedItemProps[];\n onChange: (items: DraggableItem<SelectedItemProps>[]) => void;\n itemRenderer: ComponentType<ItemRendererProps<SelectedItemProps>>;\n}\nexport interface SelectedItemProps extends MenuItemProps {\n onRemoveItem: (id: MenuItemProps['id']) => void;\n}\n"]}

package/lib/components/TaskManager/TaskManager.context.d.ts CHANGED Viewed

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { TaskManagerContextProps } from './TaskManager.types';
 declare const _default: import("react").Context<TaskManagerContextProps>;
 export default _default;

package/lib/components/TaskManager/TaskManager.context.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"TaskManager.context.d.ts","sourceRoot":"","sources":["../../../src/components/TaskManager/TaskManager.context.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,uBAAuB,EAAE,MAAM,qBAAqB,CAAC;;AAE9D,wBAA0D"}
1	+ {"version":3,"file":"TaskManager.context.d.ts","sourceRoot":"","sources":["../../../src/components/TaskManager/TaskManager.context.ts"],"names":[],"mappings":";AAEA,OAAO,EAAE,uBAAuB,EAAE,MAAM,qBAAqB,CAAC;;AAE9D,wBAA0D"}

package/lib/components/TaskManager/TaskManager.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"TaskManager.d.ts","sourceRoot":"","sources":["../../../src/components/TaskManager/TaskManager.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAA4D,MAAM,OAAO,CAAC;AAGpG,OAAO,~~EAeL~~,YAAY,EACb,MAAM,yBAAyB,CAAC;AAWjC,OAAO,EAAE,gBAAgB,EAAE,MAAM,qBAAqB,CAAC;AAKvD,QAAA,MAAM,WAAW,EAAE,iBAAiB,CAAC,gBAAgB,GAAG,YAAY,~~CAsOnE~~,CAAC;AAEF,eAAe,WAAW,CAAC"}
1	+ {"version":3,"file":"TaskManager.d.ts","sourceRoot":"","sources":["../../../src/components/TaskManager/TaskManager.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAA4D,MAAM,OAAO,CAAC;AAGpG,OAAO,EAcL,YAAY,EACb,MAAM,yBAAyB,CAAC;AAWjC,OAAO,EAAE,gBAAgB,EAAE,MAAM,qBAAqB,CAAC;AAKvD,QAAA,MAAM,WAAW,EAAE,iBAAiB,CAAC,gBAAgB,GAAG,YAAY,CA+NnE,CAAC;AAEF,eAAe,WAAW,CAAC"}

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

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

package/lib/components/TaskManager/TaskManager.js.map 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 { FunctionComponent, PropsWithoutRef, forwardRef, useRef, useEffect, useState } 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 gap: 1\n }}\n >\n {wrapUp && (\n <Button variant='secondary' onClick={wrapUp.onWrapUp}>\n <Flex\n container={{\n gap: 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 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={{ gap: 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 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';\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\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"}