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

package/lib/components/InteractionTimer/InteractionTimer.js.map

@@ -1 +1 @@
-{"version":3,"file":"InteractionTimer.js","sourceRoot":"","sources":["../../../src/components/InteractionTimer/InteractionTimer.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,UAAU,EAA2C,MAAM,OAAO,CAAC;AACnF,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAEhD,OAAO,EAGL,IAAI,EACJ,IAAI,EACJ,IAAI,EACJ,QAAQ,EAER,gBAAgB,EAChB,kBAAkB,EAEnB,MAAM,yBAAyB,CAAC;AAyBjC,MAAM,CAAC,MAAM,iCAAiC,GAAG,MAAM,CAAC,IAAI,CAAA,EAAE,CAAC;AAC/D,MAAM,CAAC,MAAM,0BAA0B,GAAG,MAAM,CAAC,GAAG,CAAA,EAAE,CAAC;AACvD,MAAM,CAAC,MAAM,8BAA8B,GAAG,MAAM,CAAC,IAAI,CAAA,EAAE,CAAC;AAI5D,MAAM,CAAC,MAAM,sBAAsB,GAAG,MAAM,CAAC,GAAG,CAC9C,CAAC,EACC,GAAG,EACH,gBAAgB,EAChB,KAAK,EAAE,EACL,UAAU,EAAE,EAAE,mBAAmB,EAAE,qBAAqB,EAAE,EAC3D,EACD,KAAK,EACN,EAAE,EAAE;IACH,OAAO,GAAG,CAAA;wBACU,KAAK,CAAC,IAAI,CAAC,OAAO;;QAElC,iCAAiC;;;;8BAIX,KAAK,CAAC,IAAI,CAAC,OAAO;UACtC,gBAAgB;QAClB,GAAG,CAAA;;;gCAGqB,qBAAqB,CAAC,wBAAwB,CAAC;;;;;;;;SAQtE;;QAED,kBAAkB;;;oBAGN,qBAAqB,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC,QAAQ,CAAC,iBAAiB,CAAC;;;oBAG1D,qBAAqB,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC,QAAQ,CAAC,eAAe,CAAC;;;QAGpE,0BAA0B;;;;;;;;;;;;;QAa1B,8BAA8B;;;KAGjC,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,sBAAsB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAEvD,MAAM,gBAAgB,GAA4D,UAAU,CAC1F,CACE,EACE,IAAI,EACJ,QAAQ,GAAG,CAAC,EACZ,gBAAgB,GAAG,KAAK,EACxB,IAAI,EACJ,GAAG,GAAG,MAAM,EACZ,SAAS,EACT,GAAG,SAAS,EAC2B,EACzC,GAAiC,EACjC,EAAE;IACF,OAAO,CACL,oBAAC,IAAI,OACC,SAAS,EACb,GAAG,EAAE,GAAG,EACR,SAAS,EAAE;YACT,SAAS,EAAE,QAAQ;YACnB,UAAU,EAAE,QAAQ;SACrB,EACD,GAAG,EAAE,GAAG,EACR,gBAAgB,EAAE,gBAAgB,EAClC,EAAE,EAAE,sBAAsB,gBACd,SAAS;QAErB,oBAAC,iCAAiC;YAChC,oBAAC,IAAI,IAAC,IAAI,EAAE,IAAI,EAAE,EAAE,EAAE,0BAA0B,GAAI;YACpD,oBAAC,QAAQ,IACP,OAAO,EAAC,MAAM,EACd,QAAQ,EAAE,CAAC,EACX,QAAQ,EAAE,GAAG,EACb,KAAK,EAAE,QAAQ,EACf,SAAS,EAAC,QAAQ,GAClB,CACgC;QACnC,IAAI,IAAI,CACP,oBAAC,IAAI,IAAC,OAAO,EAAC,WAAW,EAAC,EAAE,EAAE,8BAA8B,IACzD,IAAI,CACA,CACR,CACI,CACR,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,eAAe,gBAAgB,CAAC","sourcesContent":["import React, { forwardRef, FunctionComponent, PropsWithoutRef, Ref } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport {\n  BaseProps,\n  AsProp,\n  Flex,\n  Icon,\n  Text,\n  Progress,\n  ForwardProps,\n  defaultThemeProp,\n  StyledProgressRing,\n  PropsWithDefaults\n} from '@pega/cosmos-react-core';\n\nexport interface InteractionTimerProps extends BaseProps, AsProp {\n  /** Name of the icon */\n  icon: string;\n  /** Ref to Component */\n  ref?: Ref<HTMLDivElement>;\n  /** Current Sla\n   * @default 'goal'\n   */\n  sla?: 'goal' | 'deadline' | 'past-deadline';\n  /** Progress % of the current stage\n   * @default 0\n   */\n  progress?: number;\n  /** Indicates if there are any unread notifications\n   * @default false\n   */\n  hasNotifications?: boolean;\n  /** Meta info */\n  meta?: string;\n  /** Aria label for screen readers. */\n  ariaLabel?: string;\n}\n\nexport const StyledInteractionTimerIconWrapper = styled.span``;\nexport const StyledInteractionTimerIcon = styled.svg``;\nexport const StyledInteractionTimerMetaText = styled.span``;\n\ntype InteractionTimerPropsWithDefaults = PropsWithDefaults<InteractionTimerProps, 'sla'>;\n\nexport const StyledInteractionTimer = styled.div<InteractionTimerPropsWithDefaults>(\n  ({\n    sla,\n    hasNotifications,\n    theme: {\n      components: { 'interaction-timer': InteractionTimerTheme }\n    },\n    theme\n  }) => {\n    return css`\n      width: calc(8 * ${theme.base.spacing});\n\n      ${StyledInteractionTimerIconWrapper} {\n        font-size: 2.2rem;\n        position: relative;\n        display: inline-flex;\n        padding: calc(0.3 * ${theme.base.spacing});\n        ${hasNotifications &&\n        css`\n          &::after {\n            position: absolute;\n            background-color: ${InteractionTimerTheme['notification-indicator']};\n            border-radius: 50%;\n            content: '';\n            top: 0;\n            right: 0;\n            width: 0.3rem;\n            height: 0.3rem;\n          }\n        `}\n      }\n      ${StyledProgressRing} {\n        circle {\n          stroke-width: 1;\n          stroke: ${InteractionTimerTheme.sla[sla].progress['secondary-color']};\n        }\n        circle:nth-child(2) {\n          stroke: ${InteractionTimerTheme.sla[sla].progress['primary-color']};\n        }\n      }\n      ${StyledInteractionTimerIcon} {\n        font-size: 1.5rem;\n        margin: auto;\n        position: absolute;\n        display: inline-flex;\n        top: 0;\n        left: 0;\n        bottom: 0;\n        right: 0;\n        width: 100%;\n        align-items: center;\n        justify-content: center;\n      }\n      ${StyledInteractionTimerMetaText} {\n        color: inherit;\n      }\n    `;\n  }\n);\n\nStyledInteractionTimer.defaultProps = defaultThemeProp;\n\nconst InteractionTimer: FunctionComponent<InteractionTimerProps & ForwardProps> = forwardRef(\n  (\n    {\n      icon,\n      progress = 0,\n      hasNotifications = false,\n      meta,\n      sla = 'goal',\n      ariaLabel,\n      ...restProps\n    }: PropsWithoutRef<InteractionTimerProps>,\n    ref: InteractionTimerProps['ref']\n  ) => {\n    return (\n      <Flex\n        {...restProps}\n        ref={ref}\n        container={{\n          direction: 'column',\n          alignItems: 'center'\n        }}\n        sla={sla}\n        hasNotifications={hasNotifications}\n        as={StyledInteractionTimer}\n        aria-label={ariaLabel}\n      >\n        <StyledInteractionTimerIconWrapper>\n          <Icon name={icon} as={StyledInteractionTimerIcon} />\n          <Progress\n            variant='ring'\n            minValue={0}\n            maxValue={100}\n            value={progress}\n            placement='inline'\n          />\n        </StyledInteractionTimerIconWrapper>\n        {meta && (\n          <Text variant='secondary' as={StyledInteractionTimerMetaText}>\n            {meta}\n          </Text>\n        )}\n      </Flex>\n    );\n  }\n);\n\nexport default InteractionTimer;\n"]}
+{"version":3,"file":"InteractionTimer.js","sourceRoot":"","sources":["../../../src/components/InteractionTimer/InteractionTimer.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAA2C,MAAM,OAAO,CAAC;AAC5E,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAEhD,OAAO,EAGL,IAAI,EACJ,IAAI,EACJ,IAAI,EACJ,QAAQ,EAER,gBAAgB,EAChB,kBAAkB,EAEnB,MAAM,yBAAyB,CAAC;AAuBjC,MAAM,CAAC,MAAM,iCAAiC,GAAG,MAAM,CAAC,IAAI,CAAA,EAAE,CAAC;AAC/D,MAAM,CAAC,MAAM,0BAA0B,GAAG,MAAM,CAAC,GAAG,CAAA,EAAE,CAAC;AACvD,MAAM,CAAC,MAAM,8BAA8B,GAAG,MAAM,CAAC,IAAI,CAAA,EAAE,CAAC;AAI5D,MAAM,CAAC,MAAM,sBAAsB,GAAG,MAAM,CAAC,GAAG,CAC9C,CAAC,EACC,GAAG,EACH,gBAAgB,EAChB,KAAK,EAAE,EACL,UAAU,EAAE,EAAE,mBAAmB,EAAE,qBAAqB,EAAE,EAC3D,EACD,KAAK,EACN,EAAE,EAAE;IACH,OAAO,GAAG,CAAA;wBACU,KAAK,CAAC,IAAI,CAAC,OAAO;;;QAGlC,iCAAiC;;;;8BAIX,KAAK,CAAC,IAAI,CAAC,OAAO;UACtC,gBAAgB;QAClB,GAAG,CAAA;;;gCAGqB,qBAAqB,CAAC,wBAAwB,CAAC;;;;;;;;SAQtE;;;QAGD,kBAAkB;;;oBAGN,GAAG;QACX,CAAC,CAAC,qBAAqB,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC,QAAQ,CAAC,iBAAiB,CAAC;QAC5D,CAAC,CAAC,cAAc;;;oBAGR,GAAG;QACX,CAAC,CAAC,qBAAqB,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC,QAAQ,CAAC,eAAe,CAAC;QAC1D,CAAC,CAAC,cAAc;;;QAGpB,0BAA0B;;;;;;;;;;;;;QAa1B,8BAA8B;;;KAGjC,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,sBAAsB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAEvD,MAAM,gBAAgB,GAA4D,UAAU,CAC1F,CACE,EACE,IAAI,EACJ,QAAQ,GAAG,CAAC,EACZ,gBAAgB,GAAG,KAAK,EACxB,IAAI,EACJ,GAAG,EACH,SAAS,EACT,GAAG,SAAS,EAC2B,EACzC,GAAiC,EACjC,EAAE;IACF,OAAO,CACL,MAAC,IAAI,OACC,SAAS,EACb,GAAG,EAAE,GAAG,EACR,SAAS,EAAE;YACT,SAAS,EAAE,QAAQ;YACnB,UAAU,EAAE,QAAQ;SACrB,EACD,GAAG,EAAE,GAAG,EACR,gBAAgB,EAAE,gBAAgB,EAClC,EAAE,EAAE,sBAAsB,gBACd,SAAS,aAErB,MAAC,iCAAiC,eAChC,KAAC,IAAI,IAAC,IAAI,EAAE,IAAI,EAAE,EAAE,EAAE,0BAA0B,WAAI,EACpD,KAAC,QAAQ,IACP,OAAO,EAAC,MAAM,EACd,QAAQ,EAAE,CAAC,EACX,QAAQ,EAAE,GAAG,EACb,KAAK,EAAE,QAAQ,EACf,SAAS,EAAC,QAAQ,WAClB,YACgC,EACnC,IAAI,IAAI,CACP,KAAC,IAAI,IAAC,OAAO,EAAC,WAAW,EAAC,EAAE,EAAE,8BAA8B,YACzD,IAAI,WACA,CACR,YACI,CACR,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,eAAe,gBAAgB,CAAC","sourcesContent":["import { forwardRef, FunctionComponent, PropsWithoutRef, Ref } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport {\n  BaseProps,\n  AsProp,\n  Flex,\n  Icon,\n  Text,\n  Progress,\n  ForwardProps,\n  defaultThemeProp,\n  StyledProgressRing,\n  PropsWithDefaults\n} from '@pega/cosmos-react-core';\n\nexport interface InteractionTimerProps extends BaseProps, AsProp {\n  /** Name of the icon */\n  icon: string;\n  /** Ref to Component */\n  ref?: Ref<HTMLDivElement>;\n  /** Current Sla. This is used to display progress ring color. */\n  sla?: 'goal' | 'deadline' | 'past-deadline';\n  /** Progress % of the current stage\n   * @default 0\n   */\n  progress?: number;\n  /** Indicates if there are any unread notifications\n   * @default false\n   */\n  hasNotifications?: boolean;\n  /** Meta info */\n  meta?: string;\n  /** Aria label for screen readers. */\n  ariaLabel?: string;\n}\n\nexport const StyledInteractionTimerIconWrapper = styled.span``;\nexport const StyledInteractionTimerIcon = styled.svg``;\nexport const StyledInteractionTimerMetaText = styled.span``;\n\ntype InteractionTimerPropsWithDefaults = PropsWithDefaults<InteractionTimerProps, 'sla'>;\n\nexport const StyledInteractionTimer = styled.div<InteractionTimerPropsWithDefaults>(\n  ({\n    sla,\n    hasNotifications,\n    theme: {\n      components: { 'interaction-timer': InteractionTimerTheme }\n    },\n    theme\n  }) => {\n    return css`\n      width: calc(8 * ${theme.base.spacing});\n      flex-shrink: 0;\n\n      ${StyledInteractionTimerIconWrapper} {\n        font-size: 2.2rem;\n        position: relative;\n        display: inline-flex;\n        padding: calc(0.3 * ${theme.base.spacing});\n        ${hasNotifications &&\n        css`\n          &::after {\n            position: absolute;\n            background-color: ${InteractionTimerTheme['notification-indicator']};\n            border-radius: 50%;\n            content: '';\n            top: 0;\n            right: 0;\n            width: 0.3rem;\n            height: 0.3rem;\n          }\n        `}\n      }\n\n      ${StyledProgressRing} {\n        circle {\n          stroke-width: 1;\n          stroke: ${sla\n            ? InteractionTimerTheme.sla[sla].progress['secondary-color']\n            : 'currentcolor'};\n        }\n        circle + circle {\n          stroke: ${sla\n            ? InteractionTimerTheme.sla[sla].progress['primary-color']\n            : 'currentcolor'};\n        }\n      }\n      ${StyledInteractionTimerIcon} {\n        font-size: 1.5rem;\n        margin: auto;\n        position: absolute;\n        display: inline-flex;\n        top: 0;\n        left: 0;\n        bottom: 0;\n        right: 0;\n        width: 100%;\n        align-items: center;\n        justify-content: center;\n      }\n      ${StyledInteractionTimerMetaText} {\n        color: inherit;\n      }\n    `;\n  }\n);\n\nStyledInteractionTimer.defaultProps = defaultThemeProp;\n\nconst InteractionTimer: FunctionComponent<InteractionTimerProps & ForwardProps> = forwardRef(\n  (\n    {\n      icon,\n      progress = 0,\n      hasNotifications = false,\n      meta,\n      sla,\n      ariaLabel,\n      ...restProps\n    }: PropsWithoutRef<InteractionTimerProps>,\n    ref: InteractionTimerProps['ref']\n  ) => {\n    return (\n      <Flex\n        {...restProps}\n        ref={ref}\n        container={{\n          direction: 'column',\n          alignItems: 'center'\n        }}\n        sla={sla}\n        hasNotifications={hasNotifications}\n        as={StyledInteractionTimer}\n        aria-label={ariaLabel}\n      >\n        <StyledInteractionTimerIconWrapper>\n          <Icon name={icon} as={StyledInteractionTimerIcon} />\n          <Progress\n            variant='ring'\n            minValue={0}\n            maxValue={100}\n            value={progress}\n            placement='inline'\n          />\n        </StyledInteractionTimerIconWrapper>\n        {meta && (\n          <Text variant='secondary' as={StyledInteractionTimerMetaText}>\n            {meta}\n          </Text>\n        )}\n      </Flex>\n    );\n  }\n);\n\nexport default InteractionTimer;\n"]}

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

@@ -1 +1 @@
-{"version":3,"file":"Picker.d.ts","sourceRoot":"","sources":["../../../../src/components/TaskManager/Picker/Picker.tsx"],"names":[],"mappings":"AAAA,OAAc,EAGZ,iBAAiB,EAKlB,MAAM,OAAO,CAAC;AAGf,OAAO,EAKL,YAAY,EAKb,MAAM,yBAAyB,CAAC;AAKjC,OAAO,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAmB7C,QAAA,MAAM,MAAM,EAAE,iBAAiB,CAAC,WAAW,GAAG,YAAY,CA2HzD,CAAC;AAEF,eAAe,MAAM,CAAC"}
+{"version":3,"file":"Picker.d.ts","sourceRoot":"","sources":["../../../../src/components/TaskManager/Picker/Picker.tsx"],"names":[],"mappings":"AAAA,OAAO,EAEL,iBAAiB,EAOlB,MAAM,OAAO,CAAC;AAGf,OAAO,EAML,YAAY,EASb,MAAM,yBAAyB,CAAC;AAOjC,OAAO,EAA8B,WAAW,EAAqB,MAAM,gBAAgB,CAAC;AAmI5F,QAAA,MAAM,MAAM,EAAE,iBAAiB,CAAC,WAAW,GAAG,YAAY,CAiLzD,CAAC;AAEF,eAAe,MAAM,CAAC"}

package/lib/components/TaskManager/Picker/Picker.js

@@ -1,33 +1,114 @@
-import React, { forwardRef, useEffect, useMemo, useState } from 'react';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef, useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import styled, { css } from 'styled-components';
-import { Button, Count, defaultThemeProp, Flex, Menu, menuHelpers, Text, useI18n } from '@pega/cosmos-react-core';
-import MultiSelectInput from '@pega/cosmos-react-core/lib/components/ComboBox/MultiSelectInput/MultiSelectInput';
-const StyledPicker = styled.div ``;
-const StyledMultiSelectInput = styled(MultiSelectInput)(props => {
-    const { theme } = props;
+import { Button, Count, defaultThemeProp, Flex, registerIcon, Icon, Menu, menuHelpers, EmptyState, SearchInput, SummaryItem, Text, useI18n } from '@pega/cosmos-react-core';
+import { DragDropList, DragDropManager } from '@pega/cosmos-react-dnd';
+import * as timesIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/times.icon';
+import * as dragIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/drag.icon';
+import * as trashIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/trash.icon';
+registerIcon(timesIcon, dragIcon, trashIcon);
+const StyledPickerHeader = styled.div(({ theme }) => {
     return css `
-    border-radius: calc(2 * ${theme.base['border-radius']});
+    padding-inline-start: calc(2 * ${theme.base.spacing});
   `;
 });
-StyledPicker.defaultProps = defaultThemeProp;
+StyledPickerHeader.defaultProps = defaultThemeProp;
+const StyledAddTasks = styled.div(({ theme }) => {
+    return css `
+    /* temporary remove height once list is replaced with flat list */
+    height: calc(45 * 0.5rem);
+    flex-basis: 50%;
+    padding: 0 ${theme.base.spacing} ${theme.base.spacing};
+    header {
+      padding-top: 0;
+      border-bottom: none;
+    }
+  `;
+});
+StyledAddTasks.defaultProps = defaultThemeProp;
+const StyledSelectedTasks = styled.div(({ theme }) => {
+    return css `
+    flex-basis: 50%;
+    padding: 0 ${theme.base.spacing} ${theme.base.spacing};
+    border-inline-start: 0.0625rem solid ${theme.base.palette['border-line']};
+    > h3 {
+      padding: 0 0 ${theme.base.spacing} ${theme.base.spacing};
+    }
+  `;
+});
+StyledSelectedTasks.defaultProps = defaultThemeProp;
+const StyledSummaryItem = styled(SummaryItem)(({ theme }) => {
+    return css `
+    padding: ${theme.base.spacing} 0;
+    &:not(:last-child) {
+      border-bottom: 0.0625rem solid ${theme.base.palette['border-line']};
+    }
+  `;
+});
+StyledSummaryItem.defaultProps = defaultThemeProp;
+const StyledPickerFooter = styled.div(({ theme }) => {
+    return css `
+    border-top: 0.0625rem solid ${theme.base.palette['border-line']};
+    padding: ${theme.base.spacing};
+  `;
+});
+StyledPickerFooter.defaultProps = defaultThemeProp;
+const StyledDDList = styled.ul `
+  height: 20rem;
+  overflow-y: auto;
+`;
+const StyledPicker = styled.div `
+  height: 100%;
+`;
+const StyledDragHandle = styled.div `
+  cursor: move;
+  > svg {
+    display: block;
+  }
+`;
 const StyledCount = styled(Count)(({ theme }) => {
     return css `
     margin-inline-start: calc(0.5 * ${theme.base.spacing});
   `;
 });
 StyledCount.defaultProps = defaultThemeProp;
+const SelectedItemRenderer = ({ dragRef, previewRef, data }) => {
+    const t = useI18n();
+    return (_jsx(StyledSummaryItem, { ref: previewRef, visual: _jsx(StyledDragHandle, { ref: dragRef, children: _jsx(Icon, { name: 'drag' }, void 0) }, void 0), primary: data?.primary, secondary: data?.secondary, actions: _jsx(Button, { variant: 'simple', icon: true, label: t('task_manager_delete_task'), onClick: () => data?.onRemoveItem(data.id), children: _jsx(Icon, { name: 'trash' }, void 0) }, void 0) }, void 0));
+};
+const DraggableSelectedList = ({ selectedItems, onChange, itemRenderer }) => {
+    return (_jsx(DragDropManager, { children: _jsx(DragDropList, { as: StyledDDList, accept: 'string', items: selectedItems.map(item => ({
+                id: item.id,
+                type: 'string',
+                data: item
+            })), itemRenderer: itemRenderer, onChange: onChange }, void 0) }, void 0));
+};
 const Picker = forwardRef(({ id, items, emptyText, title, placeholder, onAdd, onCancel, ...restProps }, ref) => {
     const t = useI18n();
     const [initialItems, setItems] = useState(items);
+    const [searchInput, setSearchInput] = useState('');
+    const filterRegex = new RegExp(searchInput.replace(/[.*+\-?^${}()|[\]\\]/g, '\\$&'), 'i');
+    const [selections, setSelections] = useState([]);
+    const searchEleRef = useRef(null);
     useEffect(() => {
         setItems(items);
     }, [items]);
-    const [searchInput, setSearchInput] = useState('');
-    const filterRegex = new RegExp(searchInput.replace(/[.*+\-?^${}()|[\]\\]/g, '\\$&'), 'i');
+    const onKeydown = useCallback(({ key }) => {
+        if (key === 'Escape')
+            onCancel?.();
+    }, [onCancel]);
+    useEffect(() => {
+        document.addEventListener('keydown', onKeydown);
+        return () => {
+            document.removeEventListener('keydown', onKeydown);
+        };
+    }, []);
     const renderItems = useMemo(() => {
         return menuHelpers.mapTree(searchInput
-            ? menuHelpers.flatten(initialItems).filter(({ primary }) => {
-                return filterRegex.test(primary);
+            ? menuHelpers
+                .flatten(initialItems)
+                .filter(({ primary, items: childItems }) => {
+                return filterRegex.test(primary) && !childItems?.length;
             })
             : initialItems, item => {
             let selectable = false;
@@ -40,42 +121,51 @@ const Picker = forwardRef(({ id, items, emptyText, title, placeholder, onAdd, on
             };
         });
     }, [searchInput, initialItems, filterRegex]);
-    const [selections, setSelections] = useState([]);
-    const selectedArray = selections.map(item => ({
-        text: item.primary,
-        id: item.id
-    }));
-    return (React.createElement(StyledPicker, { ref: ref, id: id },
-        React.createElement(Menu, { items: renderItems, onItemClick: (uid) => {
-                const clickedItem = menuHelpers.getItem(renderItems, uid);
-                if (clickedItem) {
-                    setItems((cur) => menuHelpers.toggleSelected(cur, uid, 'multi-select'));
-                    if (selections.find(item => item.id === uid)) {
-                        setSelections(cur => cur.filter(item => item.id !== (clickedItem === null || clickedItem === void 0 ? void 0 : clickedItem.id)));
-                    }
-                    else {
-                        setSelections(cur => [...cur, clickedItem]);
-                    }
-                    setSearchInput('');
-                }
-            }, emptyText: emptyText || t('no_items'), accent: filterRegex, ...restProps, mode: 'multi-select', header: React.createElement(Flex, { container: { direction: 'column', itemGap: 1 } },
-                title && React.createElement(Text, { variant: 'h4' }, title),
-                React.createElement(StyledMultiSelectInput, { value: searchInput, onChange: (ev) => {
-                        setSearchInput(ev.target.value);
-                    }, selected: selectedArray, onRemove: (uid) => {
-                        setItems((cur) => menuHelpers.toggleSelected(cur, uid, 'multi-select'));
-                        setSelections(cur => {
-                            const itemToRemove = menuHelpers.getItem(cur, uid);
-                            return cur.filter(item => item.id !== (itemToRemove === null || itemToRemove === void 0 ? void 0 : itemToRemove.id));
-                        });
-                    }, placeholder: selectedArray.length < 1 && (placeholder || t('search_placeholder_default')), autoFocus: true })), footer: React.createElement(Flex, { container: { justify: 'between' } },
-                React.createElement(Button, { onClick: onCancel, "aria-label": t('cancel') }, "Cancel"),
-                React.createElement(Button, { variant: 'primary', disabled: !selectedArray.length, onClick: () => {
-                        onAdd === null || onAdd === void 0 ? void 0 : onAdd(selections);
-                        setItems(initialItems);
-                    }, "aria-label": t('task_manager_picker_add_label', selectedArray === null || selectedArray === void 0 ? void 0 : selectedArray.length) },
-                    t('add'),
-                    !!(selectedArray === null || selectedArray === void 0 ? void 0 : selectedArray.length) && React.createElement(StyledCount, null, selectedArray.length))) })));
+    const removeTasks = useCallback((uid) => {
+        setItems((cur) => menuHelpers.toggleSelected(cur, uid, 'multi-select'));
+        setSelections(cur => {
+            const itemToRemove = menuHelpers.getItem(cur, uid);
+            return cur.filter(item => item.id !== itemToRemove?.id);
+        });
+    }, []);
+    return (_jsxs(Flex, { as: StyledPicker, container: { direction: 'column' }, ref: ref, id: id, children: [_jsxs(Flex, { as: StyledPickerHeader, container: { justify: 'between', alignItems: 'center', pad: 1 }, children: [_jsx(Text, { variant: 'h3', children: t('add_tasks') }, void 0), _jsx(Button, { variant: 'simple', onClick: onCancel, "aria-label": t('task_picker_close'), icon: true, children: _jsx(Icon, { name: 'times' }, void 0) }, void 0)] }, void 0), _jsxs(Flex, { container: true, children: [_jsx(Flex, { as: StyledAddTasks, children: _jsx(Menu, { items: renderItems, onItemClick: (uid) => {
+                                const clickedItem = menuHelpers.getItem(renderItems, uid);
+                                const parentItem = menuHelpers.getParentItem(renderItems, uid);
+                                if (clickedItem) {
+                                    setItems((cur) => menuHelpers.toggleSelected(cur, uid, 'multi-select'));
+                                    if (selections.find(item => item.id === uid)) {
+                                        setSelections(cur => cur.filter(item => item.id !== clickedItem?.id));
+                                    }
+                                    else {
+                                        setSelections(cur => {
+                                            let secondary;
+                                            if (parentItem)
+                                                secondary = menuHelpers.isItem(parentItem)
+                                                    ? parentItem.primary
+                                                    : parentItem.label;
+                                            return [
+                                                ...cur,
+                                                {
+                                                    ...clickedItem,
+                                                    secondary,
+                                                    onRemoveItem: removeTasks
+                                                }
+                                            ];
+                                        });
+                                    }
+                                    setSearchInput('');
+                                }
+                            }, focusControlEl: searchEleRef.current || undefined, emptyText: emptyText || t('no_items'), accent: filterRegex, ...restProps, mode: 'multi-select', header: _jsx(Flex, { container: { direction: 'column', gap: 1 }, children: _jsx(SearchInput, { ref: searchEleRef, value: searchInput, onSearchChange: setSearchInput, placeholder: placeholder || t('search_placeholder_default'), autoFocus: true }, void 0) }, void 0) }, void 0) }, void 0), _jsxs(Flex, { as: StyledSelectedTasks, container: { direction: 'column' }, children: [_jsx(Text, { variant: 'h3', children: t('selected_tasks') }, void 0), selections.length > 0 ? (_jsx(DraggableSelectedList, { selectedItems: selections, onChange: newItems => {
+                                    setSelections(newItems.map(({ type, data }) => ({
+                                        ...data,
+                                        type
+                                    })));
+                                }, itemRenderer: SelectedItemRenderer }, void 0)) : (_jsx(EmptyState, { message: t('no_selected_tasks') }, void 0))] }, void 0)] }, void 0), _jsxs(Flex, { as: StyledPickerFooter, container: { justify: 'between' }, children: [_jsx(Button, { onClick: onCancel, "aria-label": t('cancel'), children: "Cancel" }, void 0), _jsxs(Button, { variant: 'primary', disabled: !selections.length, onClick: () => {
+                            onAdd?.(selections);
+                            setItems(initialItems);
+                        }, "aria-label": t('task_manager_picker_add_label', [selections?.length], {
+                            count: selections?.length
+                        }), children: [t('add'), !!selections?.length && _jsx(StyledCount, { children: selections.length }, void 0)] }, void 0)] }, void 0)] }, void 0));
 });
 export default Picker;
 //# sourceMappingURL=Picker.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"Picker.js","sourceRoot":"","sources":["../../../../src/components/TaskManager/Picker/Picker.tsx"],"names":[],"mappings":"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","sourcesContent":["import React, {\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', itemGap: 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"]}
+{"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  registerIcon,\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, ItemRendererProps } from '@pega/cosmos-react-dnd';\nimport * as timesIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/times.icon';\nimport * as dragIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/drag.icon';\nimport * as trashIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/trash.icon';\n\nimport { DraggableSelectedListProps, PickerProps, SelectedItemProps } from './Picker.types';\n\nregisterIcon(timesIcon, dragIcon, trashIcon);\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              count: selections?.length\n            })}\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

@@ -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';
 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

@@ -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"}
+{"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,EAAE,aAAa,EAAE,iBAAiB,EAAE,MAAM,wBAAwB,CAAC;AAE1E,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

@@ -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"]}
+{"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 { DraggableItem, ItemRendererProps } from '@pega/cosmos-react-dnd';\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

@@ -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

@@ -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"}
+{"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

@@ -1 +1 @@
-{"version":3,"file":"TaskManager.d.ts","sourceRoot":"","sources":["../../../src/components/TaskManager/TaskManager.tsx"],"names":[],"mappings":"AAAA,OAAc,EACZ,iBAAiB,EAMlB,MAAM,OAAO,CAAC;AAGf,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"}
+{"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;AAajC,OAAO,EAAE,gBAAgB,EAAE,MAAM,qBAAqB,CAAC;AAOvD,QAAA,MAAM,WAAW,EAAE,iBAAiB,CAAC,gBAAgB,GAAG,YAAY,CA+NnE,CAAC;AAEF,eAAe,WAAW,CAAC"}

package/lib/components/TaskManager/TaskManager.js

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