@pega/cosmos-react-cs 4.0.0-dev.14.2 → 4.0.0-dev.15.0

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

@@ -0,0 +1 @@
+{"version":3,"file":"Picker.js","sourceRoot":"","sources":["../../../src/components/Picker/Picker.tsx"],"names":[],"mappings":";AAAA,OAAO,EACL,UAAU,EAGV,WAAW,EACX,mBAAmB,EACnB,OAAO,EACP,MAAM,EACN,QAAQ,EACT,MAAM,OAAO,CAAC;AAEf,OAAO,EACL,MAAM,EACN,IAAI,EACJ,IAAI,EACJ,IAAI,EACJ,WAAW,EACX,UAAU,EACV,WAAW,EACX,IAAI,EACJ,OAAO,EACP,MAAM,EACN,SAAS,EACT,YAAY,EACZ,aAAa,EAEb,mBAAmB,EACnB,IAAI,EACL,MAAM,yBAAyB,CAAC;AAEjC,OAAO,EAAE,YAAY,EAAE,eAAe,EAAqB,MAAM,wBAAwB,CAAC;AAC1F,OAAO,KAAK,SAAS,MAAM,8DAA8D,CAAC;AAC1F,OAAO,KAAK,QAAQ,MAAM,6DAA6D,CAAC;AACxF,OAAO,KAAK,SAAS,MAAM,8DAA8D,CAAC;AAG1F,OAAO,EACL,0BAA0B,EAC1B,iBAAiB,EACjB,gBAAgB,EAChB,mBAAmB,EACnB,mBAAmB,EACpB,MAAM,iBAAiB,CAAC;AAEzB,YAAY,CAAC,SAAS,EAAE,QAAQ,EAAE,SAAS,CAAC,CAAC;AAE7C,MAAM,YAAY,GAAG,CAAC,EACpB,UAAU,EACV,OAAO,EACP,iBAAiB,EACjB,EAAE,EACF,OAAO,EACP,SAAS,EACS,EAAE,EAAE;IACtB,MAAM,CAAC,GAAG,OAAO,EAAE,CAAC;IACpB,OAAO,CACL,uBACE,KAAC,iBAAiB,OACZ,CAAC,UAAU,IAAI,EAAE,GAAG,EAAE,UAAU,EAAE,CAAC,EACvC,MAAM,EACJ,OAAO,CAAC,CAAC,CAAC,CACR,KAAC,gBAAgB,IAAC,GAAG,EAAE,OAAO,YAC5B,KAAC,IAAI,IAAC,IAAI,EAAC,MAAM,GAAG,GACH,CACpB,CAAC,CAAC,CAAC,SAAS,EAEf,OAAO,EAAE,OAAO,EAChB,SAAS,EAAE,SAAS,EACpB,OAAO,EACL,KAAC,MAAM,IACL,OAAO,EAAC,QAAQ,EAChB,IAAI,sBACQ,CAAC,CAAC,aAAa,EAAE,CAAC,OAAO,CAAC,CAAC,EACvC,KAAK,EAAE,CAAC,CAAC,QAAQ,CAAC,EAClB,OAAO,EAAE,GAAG,EAAE,CAAC,iBAAiB,EAAE,CAAC,EAAE,CAAC,YAEtC,KAAC,IAAI,IAAC,IAAI,EAAC,OAAO,GAAG,GACd,GAEX,GACC,CACN,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,oBAAoB,GAAG,CAAC,EAC5B,OAAO,EACP,UAAU,EACV,IAAI,EACJ,iBAAiB,EAC+D,EAAE,EAAE,CAAC,CACrF,KAAC,YAAY,IACX,OAAO,EAAE,OAAO,EAChB,UAAU,EAAE,UAAU,EACtB,iBAAiB,EAAE,iBAAiB,KAChC,IAAI,GACR,CACH,CAAC;AAEF,MAAM,qBAAqB,GAAG,CAAC,EAC7B,aAAa,EACb,QAAQ,EACR,YAAY,EACe,EAAE,EAAE;IAC/B,OAAO,CACL,KAAC,eAAe,cACd,KAAC,YAAY,IACX,EAAE,EAAE,mBAAmB,EACvB,MAAM,EAAC,kBAAkB,EACzB,KAAK,EAAE,aAAa,CAAC,GAAG,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;gBAChC,EAAE,EAAE,IAAI,CAAC,EAAE;gBACX,IAAI,EAAE,kBAAkB;gBACxB,IAAI,EAAE,IAAI;aACX,CAAC,CAAC,EACH,YAAY,EAAE,YAAY,EAC1B,QAAQ,EAAE,QAAQ,GAClB,GACc,CACnB,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,MAAM,GAAkD,UAAU,CACtE,CACE,EACE,KAAK,EACL,WAAW,GAAG,KAAK,EACnB,YAAY,EACZ,eAAe,EACf,iBAAiB,GAAG,KAAK,EACzB,UAAU,EACV,iBAAiB,EACjB,MAAM,EACuB,EAC/B,GAAuB,EACvB,EAAE;IACF,MAAM,CAAC,GAAG,OAAO,EAAE,CAAC;IACpB,MAAM,CAAC,WAAW,EAAE,cAAc,CAAC,GAAG,QAAQ,CAAC,EAAE,CAAC,CAAC;IACnD,MAAM,WAAW,GAAG,mBAAmB,CAAC,WAAW,CAAC,CAAC;IACrD,MAAM,YAAY,GAAG,MAAM,CAAmB,IAAI,CAAC,CAAC;IACpD,MAAM,uBAAuB,GAAG,MAAM,CAAiB,IAAI,CAAC,CAAC;IAC7D,MAAM,SAAS,GAAG,MAAM,CAAmB,IAAI,CAAC,CAAC;IAEjD,mBAAmB,CAAC,MAAM,EAAE,GAAG,EAAE,CAAC,CAAC;QACjC,iBAAiB,EAAE,GAAG,EAAE;YACtB,SAAS,CAAC,OAAO,EAAE,KAAK,EAAE,CAAC;QAC7B,CAAC;KACF,CAAC,CAAC,CAAC;IAEJ,MAAM,WAAW,GAAG,OAAO,CAAC,GAAG,EAAE;QAC/B,OAAO,WAAW,CAAC,OAAO,CACxB,WAAW;YACT,CAAC,CAAC,WAAW,CAAC,OAAO,CAAC,KAAK,CAAC,CAAC,MAAM,CAAC,CAAC,EAAE,OAAO,EAAE,KAAK,EAAE,UAAU,EAAiB,EAAE,EAAE;gBAClF,OAAO,WAAW,CAAC,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,UAAU,EAAE,MAAM,CAAC;YAC1D,CAAC,CAAC;YACJ,CAAC,CAAC,KAAK,EACT,IAAI,CAAC,EAAE;YACL,IAAI,UAAU,GAAG,KAAK,CAAC;YAEvB,IAAI,CAAC,IAAI,CAAC,KAAK,EAAE;gBACf,UAAU,GAAG,IAAI,CAAC;aACnB;YAED,OAAO;gBACL,GAAG,IAAI;gBACP,QAAQ,EAAE,UAAU,CAAC,CAAC,CAAC,CAAC,CAAC,WAAW,CAAC,OAAO,CAAC,UAAU,EAAE,IAAI,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,SAAS;aAC9E,CAAC;QACJ,CAAC,CACF,CAAC;IACJ,CAAC,EAAE,CAAC,UAAU,EAAE,WAAW,EAAE,KAAK,EAAE,WAAW,CAAC,CAAC,CAAC;IAElD,MAAM,kBAAkB,GAAG,WAAW,CACpC,CAAC,GAAW,EAAE,EAAE;QACd,MAAM,YAAY,GAAG,WAAW,CAAC,OAAO,CAAC,UAAU,EAAE,GAAG,CAAC,CAAC;QAC1D,iBAAiB,CAAC,UAAU,CAAC,MAAM,CAAC,IAAI,CAAC,EAAE,CAAC,IAAI,CAAC,EAAE,KAAK,YAAY,EAAE,EAAE,CAAC,CAAC,CAAC;QAC3E,uGAAuG;QACvG,mGAAmG;QACnG,UAAU,CAAC,GAAG,EAAE;YACd,MAAM,SAAS,GAAG,aAAa,CAAC,uBAAuB,CAAC,CAAC;YACzD,IAAI,SAAS,CAAC,MAAM,GAAG,CAAC;gBAAE,SAAS,CAAC,CAAC,CAAC,CAAC,KAAK,EAAE,CAAC;;gBAC1C,YAAY,CAAC,OAAO,EAAE,KAAK,EAAE,CAAC;QACrC,CAAC,EAAE,CAAC,CAAC,CAAC;IACR,CAAC,EACD,CAAC,UAAU,CAAC,CACb,CAAC;IAEF,SAAS,CACP,uBAAuB,EACvB;QACE,QAAQ,EAAE,QAAQ;QAClB,GAAG,EAAE,SAAS;KACf,EACD,CAAC,UAAU,CAAC,MAAM,CAAC,CACpB,CAAC;IAEF,MAAM,aAAa,GAAG,OAAO,CAAC,GAAG,EAAE;QACjC,OAAO,iBAAiB,CAAC,CAAC,CAAC,CACzB,KAAC,qBAAqB,IACpB,aAAa,EAAE,UAAU,EACzB,QAAQ,EAAE,QAAQ,CAAC,EAAE;gBACnB,iBAAiB,CACf,QAAQ,CAAC,GAAG,CAAC,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,EAAE,EAAE,CAAC,CAAC;oBAChC,GAAG,IAAI;oBACP,IAAI;iBACL,CAAC,CAAoB,CACvB,CAAC;YACJ,CAAC,EACD,YAAY,EAAE,KAAK,CAAC,EAAE,CACpB,oBAAoB,CAAC,EAAE,GAAG,KAAK,EAAE,iBAAiB,EAAE,kBAAkB,EAAE,CAAC,GAE3E,CACH,CAAC,CAAC,CAAC,CACF,KAAC,mBAAmB,cACjB,UAAU,CAAC,GAAG,CAAC,CAAC,EAAE,EAAE,EAAE,OAAO,EAAE,SAAS,EAAE,EAAE,EAAE,CAAC,CAC9C,KAAC,YAAY,IAEX,EAAE,EAAE,EAAE,EACN,OAAO,EAAE,OAAO,EAChB,SAAS,EAAE,SAAS,EACpB,iBAAiB,EAAE,kBAAkB,IAJhC,EAAE,CAKP,CACH,CAAC,GACkB,CACvB,CAAC;IACJ,CAAC,EAAE,CAAC,UAAU,EAAE,iBAAiB,EAAE,kBAAkB,CAAC,CAAC,CAAC;IAExD,MAAM,eAAe,GAAG,CACtB,MAAC,IAAI,IAAC,SAAS,EAAE,EAAE,SAAS,EAAE,QAAQ,EAAE,GAAG,EAAE,CAAC,EAAE,GAAG,EAAE,CAAC,GAAG,EAAE,CAAC,CAAC,EAAE,aAC7D,KAAC,WAAW,IACV,GAAG,EAAE,YAAY,EACjB,KAAK,EAAE,WAAW,EAClB,cAAc,EAAE,cAAc,EAC9B,WAAW,EAAE,CAAC,CAAC,qBAAqB,EAAE,CAAC,eAAe,CAAC,CAAC,EACxD,SAAS,SACT,EACD,YAAY,IAAI,CACf,KAAC,MAAM,IACL,KAAK,EAAE,CAAC,CAAC,iBAAiB,CAAC,EAC3B,EAAE,EAAE,WAAW,EACf,QAAQ,EAAE,YAAY,EACtB,GAAG,EAAE,SAAS,GACd,CACH,IACI,CACR,CAAC;IAEF,MAAM,cAAc,GAAG,CACrB,KAAC,IAAI,IACH,KAAK,EAAE,WAAW,EAClB,IAAI,EAAC,SAAS,EACd,WAAW,EAAE,CAAC,GAAW,EAAE,EAAE;YAC3B,MAAM,WAAW,GAAG,WAAW,CAAC,OAAO,CAAC,WAAW,EAAE,GAAG,CAAC,CAAC;YAC1D,MAAM,UAAU,GAAG,WAAW,EAAE,SAAS;gBACvC,CAAC,CAAC,WAAW,CAAC,SAAS,CAAC,CAAC,CAAC;gBAC1B,CAAC,CAAC,WAAW,CAAC,aAAa,CAAC,WAAW,EAAE,GAAG,CAAC,CAAC;YAEhD,IAAI,CAAC,WAAW;gBAAE,OAAO;YACzB,IAAI,WAAW,EAAE;gBACf,YAAY,CAAC,OAAO,EAAE,KAAK,EAAE,CAAC;gBAE9B,IAAI,UAAU,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE,CAAC,IAAI,CAAC,EAAE,KAAK,GAAG,CAAC,EAAE;oBAC5C,iBAAiB,CAAC,UAAU,CAAC,MAAM,CAAC,IAAI,CAAC,EAAE,CAAC,IAAI,CAAC,EAAE,KAAK,WAAW,EAAE,EAAE,CAAC,CAAC,CAAC;iBAC3E;qBAAM;oBACL,IAAI,SAAS,CAAC;oBACd,IAAI,UAAU;wBACZ,SAAS,GAAG,WAAW,CAAC,MAAM,CAAC,UAAU,CAAC,CAAC,CAAC,CAAC,UAAU,CAAC,OAAO,CAAC,CAAC,CAAC,UAAU,CAAC,KAAK,CAAC;oBAErF,iBAAiB,CAAC;wBAChB,GAAG,UAAU;wBACb;4BACE,GAAG,WAAW;4BACd,SAAS;yBACO;qBACnB,CAAC,CAAC;iBACJ;gBACD,cAAc,CAAC,EAAE,CAAC,CAAC;aACpB;iBAAM;gBACL,iBAAiB,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC;aAClC;QACH,CAAC,EACD,cAAc,EAAE,YAAY,CAAC,OAAO,IAAI,SAAS,EACjD,SAAS,EAAE,CAAC,CAAC,iBAAiB,EAAE,CAAC,eAAe,CAAC,CAAC,EAClD,MAAM,EAAE,WAAW,EACnB,IAAI,EAAE,WAAW,CAAC,CAAC,CAAC,cAAc,CAAC,CAAC,CAAC,QAAQ,EAC7C,0BAA0B,QAC1B,QAAQ,EAAE,QAAQ,GAClB,CACH,CAAC;IAEF,OAAO,CACL,MAAC,IAAI,IACH,EAAE,EAAE,mBAAmB,EACvB,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,EAAE,QAAQ,EAAE,QAAQ,EAAE,QAAQ,EAAE,gBAAgB,EAAE,aAE7D,MAAC,IAAI,IAAC,SAAS,EAAE,EAAE,SAAS,EAAE,QAAQ,EAAE,GAAG,EAAE,CAAC,EAAE,aAC7C,eAAe,EACf,cAAc,IACV,EACN,WAAW,IAAI,CACd,MAAC,IAAI,IACH,EAAE,EAAE,0BAA0B,EAC9B,SAAS,EAAE,EAAE,SAAS,EAAE,QAAQ,EAAE,EAClC,GAAG,EAAE,uBAAuB,aAE5B,KAAC,IAAI,IAAC,OAAO,EAAC,IAAI,YAAE,CAAC,CAAC,uBAAuB,EAAE,CAAC,eAAe,CAAC,CAAC,GAAQ,EAExE,UAAU,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC,CAAC,CACvB,aAAa,CACd,CAAC,CAAC,CAAC,CACF,KAAC,UAAU,IAAC,OAAO,EAAE,CAAC,CAAC,0BAA0B,EAAE,CAAC,eAAe,CAAC,CAAC,GAAI,CAC1E,IACI,CACR,IACI,CACR,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,eAAe,MAAM,CAAC","sourcesContent":["import {\n  forwardRef,\n  FunctionComponent,\n  PropsWithoutRef,\n  useCallback,\n  useImperativeHandle,\n  useMemo,\n  useRef,\n  useState\n} from 'react';\n\nimport {\n  Button,\n  Flex,\n  Icon,\n  Menu,\n  menuHelpers,\n  EmptyState,\n  SearchInput,\n  Text,\n  useI18n,\n  Switch,\n  useArrows,\n  registerIcon,\n  getFocusables,\n  ForwardProps,\n  createStringMatcher,\n  Grid\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';\nimport {\n  StyledSelectedItemsWrapper,\n  StyledSummaryItem,\n  StyledDragHandle,\n  StyledPickerContent,\n  StyledSelectedItems\n} from './Picker.styles';\n\nregisterIcon(timesIcon, dragIcon, trashIcon);\n\nconst SelectedItem = ({\n  previewRef,\n  dragRef,\n  onRemoveSelection,\n  id,\n  primary,\n  secondary\n}: SelectedItemProps) => {\n  const t = useI18n();\n  return (\n    <li>\n      <StyledSummaryItem\n        {...(previewRef && { ref: previewRef })}\n        visual={\n          dragRef ? (\n            <StyledDragHandle ref={dragRef}>\n              <Icon name='drag' />\n            </StyledDragHandle>\n          ) : undefined\n        }\n        primary={primary}\n        secondary={secondary}\n        actions={\n          <Button\n            variant='simple'\n            icon\n            aria-label={t('delete_noun', [primary])}\n            label={t('delete')}\n            onClick={() => onRemoveSelection?.(id)}\n          >\n            <Icon name='trash' />\n          </Button>\n        }\n      />\n    </li>\n  );\n};\n\nconst selectedItemRenderer = ({\n  dragRef,\n  previewRef,\n  data,\n  onRemoveSelection\n}: ItemRendererProps<MenuItemProps> & Pick<SelectedItemProps, 'onRemoveSelection'>) => (\n  <SelectedItem\n    dragRef={dragRef}\n    previewRef={previewRef}\n    onRemoveSelection={onRemoveSelection}\n    {...data}\n  />\n);\n\nconst DraggableSelectedList = ({\n  selectedItems,\n  onChange,\n  itemRenderer\n}: DraggableSelectedListProps) => {\n  return (\n    <DragDropManager>\n      <DragDropList\n        as={StyledSelectedItems}\n        accept='picker-selection'\n        items={selectedItems.map(item => ({\n          id: item.id,\n          type: 'picker-selection',\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      items,\n      multiSelect = false,\n      onModeToggle,\n      contextualLabel,\n      reorderSelections = false,\n      selections,\n      onSelectionChange,\n      handle\n    }: PropsWithoutRef<PickerProps>,\n    ref: PickerProps['ref']\n  ) => {\n    const t = useI18n();\n    const [searchInput, setSearchInput] = useState('');\n    const filterRegex = createStringMatcher(searchInput);\n    const searchEleRef = useRef<HTMLInputElement>(null);\n    const selectedItemsWrapperRef = useRef<HTMLDivElement>(null);\n    const switchRef = useRef<HTMLInputElement>(null);\n\n    useImperativeHandle(handle, () => ({\n      focusToggleSwitch: () => {\n        switchRef.current?.focus();\n      }\n    }));\n\n    const renderItems = useMemo(() => {\n      return menuHelpers.mapTree(\n        searchInput\n          ? menuHelpers.flatten(items).filter(({ primary, items: childItems }: MenuItemProps) => {\n              return filterRegex.test(primary) && !childItems?.length;\n            })\n          : items,\n        item => {\n          let selectable = false;\n\n          if (!item.items) {\n            selectable = true;\n          }\n\n          return {\n            ...item,\n            selected: selectable ? !!menuHelpers.getItem(selections, item.id) : undefined\n          };\n        }\n      );\n    }, [selections, searchInput, items, filterRegex]);\n\n    const removeSelectedItem = useCallback(\n      (uid: string) => {\n        const itemToRemove = menuHelpers.getItem(selections, uid);\n        onSelectionChange(selections.filter(item => item.id !== itemToRemove?.id));\n        // 0 second timeout added because DOM needs to be up to date after list is updated before running query\n        // setting the focus to the first element in the list on deletion and if empty then to search input\n        setTimeout(() => {\n          const focusable = getFocusables(selectedItemsWrapperRef);\n          if (focusable.length > 0) focusable[0].focus();\n          else searchEleRef.current?.focus();\n        }, 0);\n      },\n      [selections]\n    );\n\n    useArrows(\n      selectedItemsWrapperRef,\n      {\n        selector: 'button',\n        dir: 'up-down'\n      },\n      [selections.length]\n    );\n\n    const selectedItems = useMemo(() => {\n      return reorderSelections ? (\n        <DraggableSelectedList\n          selectedItems={selections}\n          onChange={newItems => {\n            onSelectionChange(\n              newItems.map(({ type, data }) => ({\n                ...data,\n                type\n              })) as MenuItemProps[]\n            );\n          }}\n          itemRenderer={props =>\n            selectedItemRenderer({ ...props, onRemoveSelection: removeSelectedItem })\n          }\n        />\n      ) : (\n        <StyledSelectedItems>\n          {selections.map(({ id, primary, secondary }) => (\n            <SelectedItem\n              key={id}\n              id={id}\n              primary={primary}\n              secondary={secondary}\n              onRemoveSelection={removeSelectedItem}\n            />\n          ))}\n        </StyledSelectedItems>\n      );\n    }, [selections, reorderSelections, removeSelectedItem]);\n\n    const searchAndSwitch = (\n      <Flex container={{ direction: 'column', gap: 1, pad: [0.5, 1] }}>\n        <SearchInput\n          ref={searchEleRef}\n          value={searchInput}\n          onSearchChange={setSearchInput}\n          placeholder={t('search_picker_items', [contextualLabel])}\n          autoFocus\n        />\n        {onModeToggle && (\n          <Switch\n            label={t('select_multiple')}\n            on={multiSelect}\n            onChange={onModeToggle}\n            ref={switchRef}\n          />\n        )}\n      </Flex>\n    );\n\n    const availableItems = (\n      <Menu\n        items={renderItems}\n        role='listbox'\n        onItemClick={(uid: string) => {\n          const clickedItem = menuHelpers.getItem(renderItems, uid);\n          const parentItem = clickedItem?.ancestors\n            ? clickedItem.ancestors[0]\n            : menuHelpers.getParentItem(renderItems, uid);\n\n          if (!clickedItem) return;\n          if (multiSelect) {\n            searchEleRef.current?.focus();\n\n            if (selections.find(item => item.id === uid)) {\n              onSelectionChange(selections.filter(item => item.id !== clickedItem?.id));\n            } else {\n              let secondary;\n              if (parentItem)\n                secondary = menuHelpers.isItem(parentItem) ? parentItem.primary : parentItem.label;\n\n              onSelectionChange([\n                ...selections,\n                {\n                  ...clickedItem,\n                  secondary\n                } as MenuItemProps\n              ]);\n            }\n            setSearchInput('');\n          } else {\n            onSelectionChange([clickedItem]);\n          }\n        }}\n        focusControlEl={searchEleRef.current ?? undefined}\n        emptyText={t('no_picker_items', [contextualLabel])}\n        accent={filterRegex}\n        mode={multiSelect ? 'multi-select' : 'action'}\n        arrowNavigationUnsupported\n        scrollAt={Infinity}\n      />\n    );\n\n    return (\n      <Grid\n        as={StyledPickerContent}\n        ref={ref}\n        container={{ autoFlow: 'column', autoCols: 'minmax(0, 1fr)' }}\n      >\n        <Flex container={{ direction: 'column', gap: 1 }}>\n          {searchAndSwitch}\n          {availableItems}\n        </Flex>\n        {multiSelect && (\n          <Flex\n            as={StyledSelectedItemsWrapper}\n            container={{ direction: 'column' }}\n            ref={selectedItemsWrapperRef}\n          >\n            <Text variant='h3'>{t('selected_picker_items', [contextualLabel])}</Text>\n\n            {selections.length > 0 ? (\n              selectedItems\n            ) : (\n              <EmptyState message={t('no_selected_picker_items', [contextualLabel])} />\n            )}\n          </Flex>\n        )}\n      </Grid>\n    );\n  }\n);\n\nexport default Picker;\n"]}

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

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+export declare const StyledSelectedItemsWrapper: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
+export declare const StyledDragHandle: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
+export declare const StyledSummaryItem: import("styled-components").StyledComponent<import("react").FunctionComponent<import("@pega/cosmos-react-core").SummaryItemProps & import("@pega/cosmos-react-core").ForwardProps>, import("styled-components").DefaultTheme, {}, never>;
+export declare const StyledSelectedItems: import("styled-components").StyledComponent<"ul", import("styled-components").DefaultTheme, {}, never>;
+export declare const StyledCount: import("styled-components").StyledComponent<import("react").FC<import("@pega/cosmos-react-core").ForwardProps & import("@pega/cosmos-react-core").CountProps>, import("styled-components").DefaultTheme, {}, never>;
+export declare const StyledPickerContent: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
+//# sourceMappingURL=Picker.styles.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Picker.styles.d.ts","sourceRoot":"","sources":["../../../src/components/Picker/Picker.styles.ts"],"names":[],"mappings":";AAMA,eAAO,MAAM,0BAA0B,yGAetC,CAAC;AAIF,eAAO,MAAM,gBAAgB,yGAK5B,CAAC;AAEF,eAAO,MAAM,iBAAiB,0OAmB7B,CAAC;AAIF,eAAO,MAAM,mBAAmB,wGAW/B,CAAC;AAIF,eAAO,MAAM,WAAW,qNAUvB,CAAC;AAIF,eAAO,MAAM,mBAAmB,yGAS/B,CAAC"}

package/lib/components/Picker/Picker.styles.js

@@ -0,0 +1,59 @@
+import styled, { css } from 'styled-components';
+import { defaultThemeProp, SummaryItem, Count, StyledFlex } from '@pega/cosmos-react-core';
+import { StyledMenu } from '@pega/cosmos-react-core/lib/components/Menu/Menu.styles';
+import { StyledModalContent } from '@pega/cosmos-react-core/lib/components/Modal/Modal.styles';
+export const StyledSelectedItemsWrapper = styled.div(({ theme: { base: { spacing, palette } } }) => {
+    return css `
+      width: 17.5rem;
+      padding: ${spacing} 0 0 ${spacing};
+      border-inline-start: 0.0625rem solid ${palette['border-line']};
+      > h3 {
+        padding: 0 0 ${spacing} ${spacing};
+      }
+    `;
+});
+StyledSelectedItemsWrapper.defaultProps = defaultThemeProp;
+export const StyledDragHandle = styled.div `
+  cursor: move;
+  > svg {
+    display: block;
+  }
+`;
+export const StyledSummaryItem = styled(SummaryItem)(({ theme: { base: { spacing, palette } }, visual }) => {
+    return css `
+      padding: ${spacing} 0;
+      ${!visual &&
+        css `
+        padding-inline-start: ${spacing};
+      `}
+
+      &:not(:last-child) {
+        border-bottom: 0.0625rem solid ${palette['border-line']};
+      }
+    `;
+});
+StyledSummaryItem.defaultProps = defaultThemeProp;
+export const StyledSelectedItems = styled.ul(({ theme: { base: { spacing } } }) => {
+    return css `
+      padding-inline-end: calc(0.25 * ${spacing});
+      overflow-y: auto;
+    `;
+});
+StyledSelectedItems.defaultProps = defaultThemeProp;
+export const StyledCount = styled(Count)(({ theme: { base: { spacing } } }) => {
+    return css `
+      margin-inline-start: calc(0.5 * ${spacing});
+    `;
+});
+StyledCount.defaultProps = defaultThemeProp;
+export const StyledPickerContent = styled.div `
+  &,
+  & > ${StyledFlex}, ${StyledMenu} {
+    overflow: auto;
+  }
+
+  ${StyledModalContent} & > ${StyledFlex} {
+    max-height: 50vh;
+  }
+`;
+//# sourceMappingURL=Picker.styles.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Picker.styles.js","sourceRoot":"","sources":["../../../src/components/Picker/Picker.styles.ts"],"names":[],"mappings":"AAAA,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAEhD,OAAO,EAAE,gBAAgB,EAAE,WAAW,EAAE,KAAK,EAAE,UAAU,EAAE,MAAM,yBAAyB,CAAC;AAC3F,OAAO,EAAE,UAAU,EAAE,MAAM,yDAAyD,CAAC;AACrF,OAAO,EAAE,kBAAkB,EAAE,MAAM,2DAA2D,CAAC;AAE/F,MAAM,CAAC,MAAM,0BAA0B,GAAG,MAAM,CAAC,GAAG,CAClD,CAAC,EACC,KAAK,EAAE,EACL,IAAI,EAAE,EAAE,OAAO,EAAE,OAAO,EAAE,EAC3B,EACF,EAAE,EAAE;IACH,OAAO,GAAG,CAAA;;iBAEG,OAAO,QAAQ,OAAO;6CACM,OAAO,CAAC,aAAa,CAAC;;uBAE5C,OAAO,IAAI,OAAO;;KAEpC,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,0BAA0B,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAE3D,MAAM,CAAC,MAAM,gBAAgB,GAAG,MAAM,CAAC,GAAG,CAAA;;;;;CAKzC,CAAC;AAEF,MAAM,CAAC,MAAM,iBAAiB,GAAG,MAAM,CAAC,WAAW,CAAC,CAClD,CAAC,EACC,KAAK,EAAE,EACL,IAAI,EAAE,EAAE,OAAO,EAAE,OAAO,EAAE,EAC3B,EACD,MAAM,EACP,EAAE,EAAE;IACH,OAAO,GAAG,CAAA;iBACG,OAAO;QAChB,CAAC,MAAM;QACT,GAAG,CAAA;gCACuB,OAAO;OAChC;;;yCAGkC,OAAO,CAAC,aAAa,CAAC;;KAE1D,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,iBAAiB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAElD,MAAM,CAAC,MAAM,mBAAmB,GAAG,MAAM,CAAC,EAAE,CAC1C,CAAC,EACC,KAAK,EAAE,EACL,IAAI,EAAE,EAAE,OAAO,EAAE,EAClB,EACF,EAAE,EAAE;IACH,OAAO,GAAG,CAAA;wCAC0B,OAAO;;KAE1C,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,mBAAmB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAEpD,MAAM,CAAC,MAAM,WAAW,GAAG,MAAM,CAAC,KAAK,CAAC,CACtC,CAAC,EACC,KAAK,EAAE,EACL,IAAI,EAAE,EAAE,OAAO,EAAE,EAClB,EACF,EAAE,EAAE;IACH,OAAO,GAAG,CAAA;wCAC0B,OAAO;KAC1C,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,WAAW,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAE5C,MAAM,CAAC,MAAM,mBAAmB,GAAG,MAAM,CAAC,GAAG,CAAA;;QAErC,UAAU,KAAK,UAAU;;;;IAI7B,kBAAkB,QAAQ,UAAU;;;CAGvC,CAAC","sourcesContent":["import styled, { css } from 'styled-components';\n\nimport { defaultThemeProp, SummaryItem, Count, StyledFlex } from '@pega/cosmos-react-core';\nimport { StyledMenu } from '@pega/cosmos-react-core/lib/components/Menu/Menu.styles';\nimport { StyledModalContent } from '@pega/cosmos-react-core/lib/components/Modal/Modal.styles';\n\nexport const StyledSelectedItemsWrapper = styled.div(\n  ({\n    theme: {\n      base: { spacing, palette }\n    }\n  }) => {\n    return css`\n      width: 17.5rem;\n      padding: ${spacing} 0 0 ${spacing};\n      border-inline-start: 0.0625rem solid ${palette['border-line']};\n      > h3 {\n        padding: 0 0 ${spacing} ${spacing};\n      }\n    `;\n  }\n);\n\nStyledSelectedItemsWrapper.defaultProps = defaultThemeProp;\n\nexport const StyledDragHandle = styled.div`\n  cursor: move;\n  > svg {\n    display: block;\n  }\n`;\n\nexport const StyledSummaryItem = styled(SummaryItem)(\n  ({\n    theme: {\n      base: { spacing, palette }\n    },\n    visual\n  }) => {\n    return css`\n      padding: ${spacing} 0;\n      ${!visual &&\n      css`\n        padding-inline-start: ${spacing};\n      `}\n\n      &:not(:last-child) {\n        border-bottom: 0.0625rem solid ${palette['border-line']};\n      }\n    `;\n  }\n);\n\nStyledSummaryItem.defaultProps = defaultThemeProp;\n\nexport const StyledSelectedItems = styled.ul(\n  ({\n    theme: {\n      base: { spacing }\n    }\n  }) => {\n    return css`\n      padding-inline-end: calc(0.25 * ${spacing});\n      overflow-y: auto;\n    `;\n  }\n);\n\nStyledSelectedItems.defaultProps = defaultThemeProp;\n\nexport const StyledCount = styled(Count)(\n  ({\n    theme: {\n      base: { spacing }\n    }\n  }) => {\n    return css`\n      margin-inline-start: calc(0.5 * ${spacing});\n    `;\n  }\n);\n\nStyledCount.defaultProps = defaultThemeProp;\n\nexport const StyledPickerContent = styled.div`\n  &,\n  & > ${StyledFlex}, ${StyledMenu} {\n    overflow: auto;\n  }\n\n  ${StyledModalContent} & > ${StyledFlex} {\n    max-height: 50vh;\n  }\n`;\n"]}

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

@@ -0,0 +1,35 @@
+import { ComponentType, Ref, RefCallback } from 'react';
+import { MenuItemProps, MenuProps } from '@pega/cosmos-react-core/lib/components/Menu/Menu.types';
+import { DraggableItem, ItemRendererProps } from '@pega/cosmos-react-dnd';
+export interface SwitchHandleValue {
+    focusToggleSwitch: () => void;
+}
+export interface PickerProps extends Pick<MenuProps, 'items'> {
+    /** contextual label for picker */
+    contextualLabel: string;
+    /** Enables single selection or multi selection view */
+    multiSelect?: boolean;
+    /** Enables drag and drop */
+    reorderSelections?: boolean;
+    /** Handles toggle changes */
+    onModeToggle?: () => void;
+    /** Holds selected items */
+    selections: MenuItemProps[];
+    /** callback for selection change */
+    onSelectionChange: (selections: MenuItemProps[]) => void;
+    /** Ref that can be used to access the imperative handle. */
+    handle?: Ref<SwitchHandleValue>;
+    /** ref for controlling toggle */
+    ref?: Ref<HTMLDivElement>;
+}
+export interface DraggableSelectedListProps {
+    selectedItems: MenuItemProps[];
+    onChange: (items: DraggableItem<MenuItemProps>[]) => void;
+    itemRenderer: ComponentType<ItemRendererProps<MenuItemProps>>;
+}
+export interface SelectedItemProps extends Pick<MenuItemProps, 'id' | 'primary' | 'secondary'> {
+    onRemoveSelection: (id: MenuItemProps['id']) => void;
+    dragRef?: RefCallback<HTMLElement>;
+    previewRef?: RefCallback<HTMLElement>;
+}
+//# sourceMappingURL=Picker.types.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Picker.types.d.ts","sourceRoot":"","sources":["../../../src/components/Picker/Picker.types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,GAAG,EAAE,WAAW,EAAE,MAAM,OAAO,CAAC;AAExD,OAAO,EAAE,aAAa,EAAE,SAAS,EAAE,MAAM,wDAAwD,CAAC;AAClG,OAAO,EAAE,aAAa,EAAE,iBAAiB,EAAE,MAAM,wBAAwB,CAAC;AAE1E,MAAM,WAAW,iBAAiB;IAChC,iBAAiB,EAAE,MAAM,IAAI,CAAC;CAC/B;AAED,MAAM,WAAW,WAAY,SAAQ,IAAI,CAAC,SAAS,EAAE,OAAO,CAAC;IAC3D,kCAAkC;IAClC,eAAe,EAAE,MAAM,CAAC;IACxB,uDAAuD;IACvD,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,4BAA4B;IAC5B,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B,6BAA6B;IAC7B,YAAY,CAAC,EAAE,MAAM,IAAI,CAAC;IAC1B,2BAA2B;IAC3B,UAAU,EAAE,aAAa,EAAE,CAAC;IAC5B,oCAAoC;IACpC,iBAAiB,EAAE,CAAC,UAAU,EAAE,aAAa,EAAE,KAAK,IAAI,CAAC;IACzD,4DAA4D;IAC5D,MAAM,CAAC,EAAE,GAAG,CAAC,iBAAiB,CAAC,CAAC;IAChC,iCAAiC;IACjC,GAAG,CAAC,EAAE,GAAG,CAAC,cAAc,CAAC,CAAC;CAC3B;AAED,MAAM,WAAW,0BAA0B;IACzC,aAAa,EAAE,aAAa,EAAE,CAAC;IAC/B,QAAQ,EAAE,CAAC,KAAK,EAAE,aAAa,CAAC,aAAa,CAAC,EAAE,KAAK,IAAI,CAAC;IAC1D,YAAY,EAAE,aAAa,CAAC,iBAAiB,CAAC,aAAa,CAAC,CAAC,CAAC;CAC/D;AAED,MAAM,WAAW,iBAAkB,SAAQ,IAAI,CAAC,aAAa,EAAE,IAAI,GAAG,SAAS,GAAG,WAAW,CAAC;IAC5F,iBAAiB,EAAE,CAAC,EAAE,EAAE,aAAa,CAAC,IAAI,CAAC,KAAK,IAAI,CAAC;IACrD,OAAO,CAAC,EAAE,WAAW,CAAC,WAAW,CAAC,CAAC;IACnC,UAAU,CAAC,EAAE,WAAW,CAAC,WAAW,CAAC,CAAC;CACvC"}

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

@@ -0,0 +1 @@
+{"version":3,"file":"Picker.types.js","sourceRoot":"","sources":["../../../src/components/Picker/Picker.types.ts"],"names":[],"mappings":"","sourcesContent":["import { ComponentType, Ref, RefCallback } from 'react';\n\nimport { MenuItemProps, MenuProps } from '@pega/cosmos-react-core/lib/components/Menu/Menu.types';\nimport { DraggableItem, ItemRendererProps } from '@pega/cosmos-react-dnd';\n\nexport interface SwitchHandleValue {\n  focusToggleSwitch: () => void;\n}\n\nexport interface PickerProps extends Pick<MenuProps, 'items'> {\n  /** contextual label for picker */\n  contextualLabel: string;\n  /** Enables single selection or multi selection view */\n  multiSelect?: boolean;\n  /** Enables drag and drop */\n  reorderSelections?: boolean;\n  /** Handles toggle changes */\n  onModeToggle?: () => void;\n  /** Holds selected items */\n  selections: MenuItemProps[];\n  /** callback for selection change */\n  onSelectionChange: (selections: MenuItemProps[]) => void;\n  /** Ref that can be used to access the imperative handle. */\n  handle?: Ref<SwitchHandleValue>;\n  /** ref for controlling toggle */\n  ref?: Ref<HTMLDivElement>;\n}\n\nexport interface DraggableSelectedListProps {\n  selectedItems: MenuItemProps[];\n  onChange: (items: DraggableItem<MenuItemProps>[]) => void;\n  itemRenderer: ComponentType<ItemRendererProps<MenuItemProps>>;\n}\n\nexport interface SelectedItemProps extends Pick<MenuItemProps, 'id' | 'primary' | 'secondary'> {\n  onRemoveSelection: (id: MenuItemProps['id']) => void;\n  dragRef?: RefCallback<HTMLElement>;\n  previewRef?: RefCallback<HTMLElement>;\n}\n"]}

package/lib/components/Picker/index.d.ts

@@ -0,0 +1,2 @@
+export { default } from './Picker';
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Picker/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,UAAU,CAAC"}

package/lib/components/Picker/index.js

@@ -0,0 +1,2 @@
+export { default } from './Picker';
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/Picker/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,UAAU,CAAC","sourcesContent":["export { default } from './Picker';\n"]}

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,OAAO,EAAE,iBAAiB,EAA4D,MAAM,OAAO,CAAC;AAEpG,OAAO,EAWL,YAAY,EAEb,MAAM,yBAAyB,CAAC;AAOjC,OAAO,EAAE,gBAAgB,EAAE,MAAM,qBAAqB,CAAC;AASvD,QAAA,MAAM,WAAW,EAAE,iBAAiB,CAAC,gBAAgB,GAAG,YAAY,CAwMnE,CAAC;AAEF,eAAe,WAAW,CAAC"}
+{"version":3,"file":"TaskManager.d.ts","sourceRoot":"","sources":["../../../src/components/TaskManager/TaskManager.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAA0D,MAAM,OAAO,CAAC;AAElG,OAAO,EAUL,YAAY,EAKb,MAAM,yBAAyB,CAAC;AAOjC,OAAO,EAAE,gBAAgB,EAAE,MAAM,qBAAqB,CAAC;AAmBvD,QAAA,MAAM,WAAW,EAAE,iBAAiB,CAAC,gBAAgB,GAAG,YAAY,CA+MnE,CAAC;AAEF,eAAe,WAAW,CAAC"}

package/lib/components/TaskManager/TaskManager.js

@@ -1,17 +1,24 @@
 import { createElement as _createElement } from "react";
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import { forwardRef, useRef, useMemo } from 'react';
-import { Flex, Icon, registerIcon, Text, Status, useI18n, useElement, Button, Grid, SummaryItem, useUID } from '@pega/cosmos-react-core';
+import { forwardRef, useRef, useMemo, useState } from 'react';
+import { Flex, Icon, registerIcon, Text, Status, useI18n, Button, Grid, SummaryItem, useUID, useShortcut, registerAction } 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, StyledTaskSummaryItem, StyledTaskMain } from './TaskManager.styles';
 import TaskManagerContext from './TaskManager.context';
 import TaskManagerTabs from './TaskManagerTabs';
 import TaskView from './TaskView';
-import Picker from './Picker/Picker';
 import Dialogue from './Dialogue';
 import ConversationAI from './ConversationAI';
+import TaskPicker from './TaskPicker';
 registerIcon(plusIcon, flagFinishIcon);
+registerAction({
+    id: 'AddTask',
+    defaultKeyBinding: 'Alt+T'
+}, {
+    id: 'WrapUp',
+    defaultKeyBinding: 'Alt+W'
+});
 const TaskManager = forwardRef((props, ref) => {
     const { tasks = [], onTaskLaunch, onTaskDismiss, addTask, wrapUp, main, banner, handle, conversationAI, ...restProps } = props;
     const t = useI18n();
@@ -20,23 +27,32 @@ const TaskManager = forwardRef((props, ref) => {
     const headingId = useUID();
     const wrapUpTabId = useUID();
     const wrapUpTabPanelId = useUID();
-    const [addTaskEl, setAddTaskEl] = useElement(null);
+    const addTaskButtonRef = useRef(null);
+    const [showPicker, setShowPicker] = useState(false);
     const ctx = useMemo(() => ({
         addTask,
         wrapUp,
         tasks,
         onTaskLaunch
     }), [addTask, wrapUp, tasks, onTaskLaunch]);
+    useShortcut('AddTask', () => {
+        if (addTask) {
+            setShowPicker(true);
+        }
+    });
+    useShortcut('WrapUp', () => {
+        if (wrapUp && !wrapUp.disable)
+            wrapUp.onClick();
+    });
     return (_jsx(TaskManagerContext.Provider, { value: ctx, children: _jsxs(StyledTaskManager, { ...restProps, ref: ref, hasDrawer: hasActiveTask, hasTasks: !!tasks.length, children: [banner && (_jsx(Dialogue, { icon: banner.icon, content: banner.content, verbatimStatus: banner.verbatimStatus, handle: handle })), _jsxs(TaskView, { header: _jsx(Text, { variant: 'h2', id: headingId, children: t('task_manager_tasks') }), actions: _jsxs(Flex, { container: {
                             gap: 1
-                        }, children: [conversationAI && (_jsx(ConversationAI, { content: conversationAI.content, entityCount: conversationAI.entityCount })), _jsxs(Flex, { container: true, children: [wrapUp && (_jsxs(Button, { variant: 'secondary', disabled: wrapUp.disable, onClick: wrapUp?.onClick && (() => wrapUp.onClick()), children: [_jsx(Icon, { name: 'flag-finish' }), _jsx("span", { children: t('task_manager_wrap_up') })] })), addTask && (_jsxs(_Fragment, { children: [_jsxs(Button, { variant: 'primary', onClick: (e) => setAddTaskEl(!addTaskEl ? e.currentTarget : null), children: [_jsx(Icon, { name: 'plus' }), _jsx("span", { children: t('task_manager_add_task') })] }), addTaskEl && (_jsx(Picker, { target: addTaskEl, emptyText: t('task_manager_search_results_empty_text'), items: addTask?.items, onAdd: (selectedItems) => {
-                                                    if (addTask.onAdd) {
-                                                        addTask?.onAdd(selectedItems);
-                                                    }
-                                                    setAddTaskEl(null);
+                        }, children: [conversationAI && (_jsx(ConversationAI, { content: conversationAI.content, entityCount: conversationAI.entityCount })), _jsxs(Flex, { container: true, children: [wrapUp && (_jsxs(Button, { variant: 'secondary', disabled: wrapUp.disable, onClick: () => wrapUp.onClick(), children: [_jsx(Icon, { name: 'flag-finish' }), _jsx("span", { children: t('task_manager_wrap_up') })] })), addTask && (_jsxs(_Fragment, { children: [_jsxs(Button, { ref: addTaskButtonRef, variant: 'primary', onClick: () => setShowPicker(prev => !prev), children: [_jsx(Icon, { name: 'plus' }), _jsx("span", { children: t('task_manager_add_task') })] }), showPicker && addTaskButtonRef.current && (_jsx(TaskPicker, { target: addTaskButtonRef.current, items: addTask.items, onAdd: (selectedItems) => {
+                                                    addTask.onAdd(selectedItems);
+                                                    setShowPicker(false);
                                                 }, onCancel: () => {
-                                                    setAddTaskEl(null);
-                                                }, ref: addTask.ref, placeholder: t('search_tasks') }))] }))] })] }), children: [hasActiveTask && (_jsx(TaskManagerTabs, { ref: taskManagerTabsRef, "aria-labelledby": headingId, wrapUpTabId: wrapUpTabId, wrapUpTabPanelId: wrapUpTabPanelId })), hasActiveTask && (_jsxs(_Fragment, { children: [tasks.map(({ id, active }) => {
+                                                    setShowPicker(false);
+                                                    addTaskButtonRef.current?.focus();
+                                                }, ref: addTask.ref }))] }))] })] }), children: [hasActiveTask && (_jsx(TaskManagerTabs, { ref: taskManagerTabsRef, "aria-labelledby": headingId, wrapUpTabId: wrapUpTabId, wrapUpTabPanelId: wrapUpTabPanelId })), hasActiveTask && (_jsxs(_Fragment, { children: [tasks.map(({ id, active }) => {
                                     return (_jsx(StyledTaskMain, { id: `tab-panel-${id}`, role: 'tabpanel', "aria-labelledby": `tab-${id}`, current: !!active, children: active ? main : null }, id));
                                 }), wrapUp?.showTab && (_jsx(StyledTaskMain, { id: wrapUpTabPanelId, role: 'tabpanel', "aria-labelledby": wrapUpTabId, current: !!wrapUp.active, children: wrapUp.active ? main : null }))] })), !hasActiveTask && (_jsx(Grid, { as: 'ul', container: true, children: tasks.map(({ name, id, status, isResolved, meta, icon, ...restTaskProps }) => {
                                 return (_createElement(SummaryItem, { ...restTaskProps, key: id, as: StyledTaskSummaryItem, primary: _jsx(Text, { variant: 'h4', children: name }), secondary: _jsxs(_Fragment, { children: [!status && meta && _jsx(Text, { variant: 'secondary', children: meta }), status && _jsx(Status, { variant: status.variant, children: status.text })] }), visual: _jsx(Icon, { name: icon }), actions: _jsxs(Flex, { container: { gap: 1 }, children: [!isResolved && (_jsx(Button, { variant: 'secondary', "aria-label": t('continue_label_a11y', [name]), onClick: () => {

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

@@ -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, MouseEvent, useMemo } from 'react';\n\nimport {\n  Flex,\n  Icon,\n  registerIcon,\n  Text,\n  Status,\n  useI18n,\n  useElement,\n  Button,\n  Grid,\n  SummaryItem,\n  ForwardProps,\n  useUID\n} from '@pega/cosmos-react-core';\nimport * as flagFinishIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/flag-finish.icon';\nimport * as plusIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/plus.icon';\n\nimport { StyledTaskManager, StyledTaskSummaryItem, StyledTaskMain } 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';\nimport Dialogue from './Dialogue';\nimport ConversationAI from './ConversationAI';\n\nregisterIcon(plusIcon, flagFinishIcon);\n\nconst TaskManager: FunctionComponent<TaskManagerProps & ForwardProps> = forwardRef(\n  (props: PropsWithoutRef<TaskManagerProps>, ref: TaskManagerProps['ref']) => {\n    const {\n      tasks = [],\n      onTaskLaunch,\n      onTaskDismiss,\n      addTask,\n      wrapUp,\n      main,\n      banner,\n      handle,\n      conversationAI,\n      ...restProps\n    } = props;\n    const t = useI18n();\n    const taskManagerTabsRef = useRef<HTMLDivElement>(null);\n    const hasActiveTask = tasks.filter(task => task.active).length > 0 || !!wrapUp?.active;\n    const headingId = useUID();\n    const wrapUpTabId = useUID();\n    const wrapUpTabPanelId = useUID();\n\n    const [addTaskEl, setAddTaskEl] = useElement<HTMLButtonElement>(null);\n\n    const ctx = useMemo(\n      () => ({\n        addTask,\n        wrapUp,\n        tasks,\n        onTaskLaunch\n      }),\n      [addTask, wrapUp, tasks, onTaskLaunch]\n    );\n\n    return (\n      <TaskManagerContext.Provider value={ctx}>\n        <StyledTaskManager\n          {...restProps}\n          ref={ref}\n          hasDrawer={hasActiveTask}\n          hasTasks={!!tasks.length}\n        >\n          {banner && (\n            <Dialogue\n              icon={banner.icon}\n              content={banner.content}\n              verbatimStatus={banner.verbatimStatus}\n              handle={handle}\n            />\n          )}\n          <TaskView\n            header={\n              <Text variant='h2' id={headingId}>\n                {t('task_manager_tasks')}\n              </Text>\n            }\n            actions={\n              <Flex\n                container={{\n                  gap: 1\n                }}\n              >\n                {conversationAI && (\n                  <ConversationAI\n                    content={conversationAI.content}\n                    entityCount={conversationAI.entityCount}\n                  />\n                )}\n                <Flex container>\n                  {wrapUp && (\n                    <Button\n                      variant='secondary'\n                      disabled={wrapUp.disable}\n                      onClick={wrapUp?.onClick && (() => wrapUp.onClick())}\n                    >\n                      <Icon name='flag-finish' />\n                      <span>{t('task_manager_wrap_up')}</span>\n                    </Button>\n                  )}\n                  {addTask && (\n                    <>\n                      <Button\n                        variant='primary'\n                        onClick={(e: MouseEvent<HTMLButtonElement>) =>\n                          setAddTaskEl(!addTaskEl ? e.currentTarget : null)\n                        }\n                      >\n                        <Icon name='plus' />\n                        <span>{t('task_manager_add_task')}</span>\n                      </Button>\n                      {addTaskEl && (\n                        <Picker\n                          target={addTaskEl}\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                            setAddTaskEl(null);\n                          }}\n                          onCancel={() => {\n                            setAddTaskEl(null);\n                          }}\n                          ref={addTask.ref}\n                          placeholder={t('search_tasks')}\n                        />\n                      )}\n                    </>\n                  )}\n                </Flex>\n              </Flex>\n            }\n          >\n            {hasActiveTask && (\n              <TaskManagerTabs\n                ref={taskManagerTabsRef}\n                aria-labelledby={headingId}\n                wrapUpTabId={wrapUpTabId}\n                wrapUpTabPanelId={wrapUpTabPanelId}\n              />\n            )}\n            {hasActiveTask && (\n              <>\n                {tasks.map(({ id, active }) => {\n                  return (\n                    <StyledTaskMain\n                      id={`tab-panel-${id}`}\n                      key={id}\n                      role='tabpanel'\n                      aria-labelledby={`tab-${id}`}\n                      current={!!active}\n                    >\n                      {active ? main : null}\n                    </StyledTaskMain>\n                  );\n                })}\n                {wrapUp?.showTab && (\n                  <StyledTaskMain\n                    id={wrapUpTabPanelId}\n                    role='tabpanel'\n                    aria-labelledby={wrapUpTabId}\n                    current={!!wrapUp.active}\n                  >\n                    {wrapUp.active ? main : null}\n                  </StyledTaskMain>\n                )}\n              </>\n            )}\n            {!hasActiveTask && (\n              <Grid as='ul' container>\n                {tasks.map(({ name, id, status, isResolved, meta, icon, ...restTaskProps }) => {\n                  return (\n                    <SummaryItem\n                      {...restTaskProps}\n                      key={id}\n                      as={StyledTaskSummaryItem}\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                          {!isResolved && (\n                            <Button\n                              variant='secondary'\n                              aria-label={t('continue_label_a11y', [name])}\n                              onClick={() => {\n                                onTaskLaunch?.(id);\n                              }}\n                            >\n                              {t('continue_label')}\n                            </Button>\n                          )}\n                          {isResolved && (\n                            <Button\n                              variant='secondary'\n                              aria-label={t('review_label_a11y', [name])}\n                              onClick={() => {\n                                onTaskLaunch?.(id);\n                              }}\n                            >\n                              {t('review_label')}\n                            </Button>\n                          )}\n                        </Flex>\n                      }\n                    />\n                  );\n                })}\n              </Grid>\n            )}\n          </TaskView>\n        </StyledTaskManager>\n      </TaskManagerContext.Provider>\n    );\n  }\n);\n\nexport default TaskManager;\n"]}
+{"version":3,"file":"TaskManager.js","sourceRoot":"","sources":["../../../src/components/TaskManager/TaskManager.tsx"],"names":[],"mappings":"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","sourcesContent":["import { FunctionComponent, PropsWithoutRef, forwardRef, useRef, useMemo, useState } from 'react';\n\nimport {\n  Flex,\n  Icon,\n  registerIcon,\n  Text,\n  Status,\n  useI18n,\n  Button,\n  Grid,\n  SummaryItem,\n  ForwardProps,\n  useUID,\n  MenuItemProps,\n  useShortcut,\n  registerAction\n} from '@pega/cosmos-react-core';\nimport * as flagFinishIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/flag-finish.icon';\nimport * as plusIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/plus.icon';\n\nimport { StyledTaskManager, StyledTaskSummaryItem, StyledTaskMain } from './TaskManager.styles';\nimport TaskManagerContext from './TaskManager.context';\nimport TaskManagerTabs from './TaskManagerTabs';\nimport { TaskManagerProps } from './TaskManager.types';\nimport TaskView from './TaskView';\nimport Dialogue from './Dialogue';\nimport ConversationAI from './ConversationAI';\nimport TaskPicker from './TaskPicker';\n\nregisterIcon(plusIcon, flagFinishIcon);\n\nregisterAction(\n  {\n    id: 'AddTask',\n    defaultKeyBinding: 'Alt+T'\n  },\n  {\n    id: 'WrapUp',\n    defaultKeyBinding: 'Alt+W'\n  }\n);\n\nconst TaskManager: FunctionComponent<TaskManagerProps & ForwardProps> = forwardRef(\n  (props: PropsWithoutRef<TaskManagerProps>, ref: TaskManagerProps['ref']) => {\n    const {\n      tasks = [],\n      onTaskLaunch,\n      onTaskDismiss,\n      addTask,\n      wrapUp,\n      main,\n      banner,\n      handle,\n      conversationAI,\n      ...restProps\n    } = props;\n    const t = useI18n();\n    const taskManagerTabsRef = useRef<HTMLDivElement>(null);\n    const hasActiveTask = tasks.filter(task => task.active).length > 0 || !!wrapUp?.active;\n    const headingId = useUID();\n    const wrapUpTabId = useUID();\n    const wrapUpTabPanelId = useUID();\n    const addTaskButtonRef = useRef<HTMLButtonElement>(null);\n\n    const [showPicker, setShowPicker] = useState(false);\n\n    const ctx = useMemo(\n      () => ({\n        addTask,\n        wrapUp,\n        tasks,\n        onTaskLaunch\n      }),\n      [addTask, wrapUp, tasks, onTaskLaunch]\n    );\n\n    useShortcut('AddTask', () => {\n      if (addTask) {\n        setShowPicker(true);\n      }\n    });\n\n    useShortcut('WrapUp', () => {\n      if (wrapUp && !wrapUp.disable) wrapUp.onClick();\n    });\n\n    return (\n      <TaskManagerContext.Provider value={ctx}>\n        <StyledTaskManager\n          {...restProps}\n          ref={ref}\n          hasDrawer={hasActiveTask}\n          hasTasks={!!tasks.length}\n        >\n          {banner && (\n            <Dialogue\n              icon={banner.icon}\n              content={banner.content}\n              verbatimStatus={banner.verbatimStatus}\n              handle={handle}\n            />\n          )}\n          <TaskView\n            header={\n              <Text variant='h2' id={headingId}>\n                {t('task_manager_tasks')}\n              </Text>\n            }\n            actions={\n              <Flex\n                container={{\n                  gap: 1\n                }}\n              >\n                {conversationAI && (\n                  <ConversationAI\n                    content={conversationAI.content}\n                    entityCount={conversationAI.entityCount}\n                  />\n                )}\n                <Flex container>\n                  {wrapUp && (\n                    <Button\n                      variant='secondary'\n                      disabled={wrapUp.disable}\n                      onClick={() => wrapUp.onClick()}\n                    >\n                      <Icon name='flag-finish' />\n                      <span>{t('task_manager_wrap_up')}</span>\n                    </Button>\n                  )}\n                  {addTask && (\n                    <>\n                      <Button\n                        ref={addTaskButtonRef}\n                        variant='primary'\n                        onClick={() => setShowPicker(prev => !prev)}\n                      >\n                        <Icon name='plus' />\n                        <span>{t('task_manager_add_task')}</span>\n                      </Button>\n                      {showPicker && addTaskButtonRef.current && (\n                        <TaskPicker\n                          target={addTaskButtonRef.current}\n                          items={addTask.items}\n                          onAdd={(selectedItems: MenuItemProps[]) => {\n                            addTask.onAdd(selectedItems);\n                            setShowPicker(false);\n                          }}\n                          onCancel={() => {\n                            setShowPicker(false);\n                            addTaskButtonRef.current?.focus();\n                          }}\n                          ref={addTask.ref}\n                        />\n                      )}\n                    </>\n                  )}\n                </Flex>\n              </Flex>\n            }\n          >\n            {hasActiveTask && (\n              <TaskManagerTabs\n                ref={taskManagerTabsRef}\n                aria-labelledby={headingId}\n                wrapUpTabId={wrapUpTabId}\n                wrapUpTabPanelId={wrapUpTabPanelId}\n              />\n            )}\n            {hasActiveTask && (\n              <>\n                {tasks.map(({ id, active }) => {\n                  return (\n                    <StyledTaskMain\n                      id={`tab-panel-${id}`}\n                      key={id}\n                      role='tabpanel'\n                      aria-labelledby={`tab-${id}`}\n                      current={!!active}\n                    >\n                      {active ? main : null}\n                    </StyledTaskMain>\n                  );\n                })}\n                {wrapUp?.showTab && (\n                  <StyledTaskMain\n                    id={wrapUpTabPanelId}\n                    role='tabpanel'\n                    aria-labelledby={wrapUpTabId}\n                    current={!!wrapUp.active}\n                  >\n                    {wrapUp.active ? main : null}\n                  </StyledTaskMain>\n                )}\n              </>\n            )}\n            {!hasActiveTask && (\n              <Grid as='ul' container>\n                {tasks.map(({ name, id, status, isResolved, meta, icon, ...restTaskProps }) => {\n                  return (\n                    <SummaryItem\n                      {...restTaskProps}\n                      key={id}\n                      as={StyledTaskSummaryItem}\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                          {!isResolved && (\n                            <Button\n                              variant='secondary'\n                              aria-label={t('continue_label_a11y', [name])}\n                              onClick={() => {\n                                onTaskLaunch?.(id);\n                              }}\n                            >\n                              {t('continue_label')}\n                            </Button>\n                          )}\n                          {isResolved && (\n                            <Button\n                              variant='secondary'\n                              aria-label={t('review_label_a11y', [name])}\n                              onClick={() => {\n                                onTaskLaunch?.(id);\n                              }}\n                            >\n                              {t('review_label')}\n                            </Button>\n                          )}\n                        </Flex>\n                      }\n                    />\n                  );\n                })}\n              </Grid>\n            )}\n          </TaskView>\n        </StyledTaskManager>\n      </TaskManagerContext.Provider>\n    );\n  }\n);\n\nexport default TaskManager;\n"]}

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

@@ -1,6 +1,6 @@
 import { ReactNode, Ref } from 'react';
 import { BaseProps, IconName, MenuItemProps, NoChildrenProp, StatusProps } from '@pega/cosmos-react-core';
-import { PickerProps } from './Picker/Picker.types';
+import { TaskPickerProps } from './TaskPicker';
 export interface HandleValue {
     nudge: () => Animation | undefined;
 }
@@ -12,7 +12,7 @@ export interface TaskManagerProps extends BaseProps, NoChildrenProp {
     /** Callback when task is dismissed. Applicable only when task is not launched previously */
     onTaskDismiss?: (id: TaskProps['id']) => void;
     /** Add task utility */
-    addTask?: Pick<PickerProps, 'items' | 'onAdd' | 'ref'>;
+    addTask?: Pick<TaskPickerProps, 'items' | 'onAdd' | 'ref'>;
     /** Banner for the task manager */
     banner?: Pick<DialogueProps, 'icon' | 'content' | 'verbatimStatus'>;
     /** Shows wrap up action when passed */

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

@@ -1 +1 @@
-{"version":3,"file":"TaskManager.types.d.ts","sourceRoot":"","sources":["../../../src/components/TaskManager/TaskManager.types.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"TaskManager.types.d.ts","sourceRoot":"","sources":["../../../src/components/TaskManager/TaskManager.types.ts"],"names":[],"mappings":"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"}

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

@@ -1 +1 @@
-{"version":3,"file":"TaskManager.types.js","sourceRoot":"","sources":["../../../src/components/TaskManager/TaskManager.types.ts"],"names":[],"mappings":"","sourcesContent":["import { ReactNode, Ref } from 'react';\n\nimport {\n  BaseProps,\n  IconName,\n  MenuItemProps,\n  NoChildrenProp,\n  StatusProps\n} from '@pega/cosmos-react-core';\n\nimport { PickerProps } from './Picker/Picker.types';\n\nexport interface HandleValue {\n  nudge: () => Animation | undefined;\n}\n\nexport interface TaskManagerProps extends BaseProps, NoChildrenProp {\n  /** List of tasks */\n  tasks?: TaskProps[];\n  /** Callback when task is launched */\n  onTaskLaunch?: (id: TaskProps['id']) => void;\n  /** Callback when task is dismissed. Applicable only when task is not launched previously */\n  onTaskDismiss?: (id: TaskProps['id']) => void;\n  /** Add task utility */\n  addTask?: Pick<PickerProps, 'items' | 'onAdd' | 'ref'>;\n  /** Banner for the task manager */\n  banner?: Pick<DialogueProps, 'icon' | 'content' | 'verbatimStatus'>;\n  /** Shows wrap up action when passed */\n  wrapUp?: {\n    /** Determines if wrap up button should be enabled */\n    disable: boolean;\n    /** Callback when wrap up is performed */\n    onClick: () => void;\n    /** Determines if wrap up is active */\n    active?: boolean;\n    /** Determines if wrap up tab should be shown or not */\n    showTab?: boolean;\n  };\n  /** Selected task content */\n  main?: ReactNode;\n  handle?: Ref<HandleValue>;\n  /** Conversation icon on TaskManager Header */\n  conversationAI?: Pick<ConversationAIProps, 'content' | 'entityCount'>;\n  ref?: Ref<HTMLDivElement>;\n}\n\nexport interface TaskManagerTabsProps {\n  wrapUpTabId: string;\n  wrapUpTabPanelId: string;\n  ref?: Ref<HTMLDivElement>;\n}\n\nexport interface TaskManagerTabProps {\n  active?: boolean;\n  variant?: string;\n}\nexport interface TaskViewProps extends BaseProps {\n  /** Task header */\n  header: ReactNode;\n  /** Task specific actions */\n  actions?: ReactNode;\n  /** Task form content */\n  children: ReactNode;\n  ref?: Ref<HTMLDivElement>;\n}\n\nexport interface DialogueProps extends BaseProps {\n  /** Icon for the banner */\n  icon: IconName;\n  /** Banner content */\n  content: string;\n  /** Type of banner icon */\n  verbatimStatus?: 'pending' | 'spoken';\n  handle?: Ref<HandleValue>;\n  ref?: Ref<HTMLDivElement>;\n}\n\nexport interface ConversationAIProps extends BaseProps {\n  /** Content */\n  content: ReactNode;\n  /** Number of entities captured */\n  entityCount: number;\n  ref?: Ref<HTMLDivElement>;\n}\n\nexport interface TaskManagerContextProps\n  extends Pick<TaskManagerProps, 'tasks' | 'addTask' | 'onTaskLaunch' | 'wrapUp'> {}\n\nexport interface TaskProps {\n  /** Unique id for tasks list */\n  id: string;\n  /** Name of the task */\n  name: string;\n  /** Meta info of the task ex: Queued task */\n  meta?: string;\n  /** Secondary information to show with the task name. Eg: CaseId. */\n  secondary?: MenuItemProps['secondary'];\n  /** Name of the icon (to be selected from default Pega icon set) */\n  icon: string;\n  /** Determines to show the task in tab. */\n  hideFromTab?: boolean;\n  /** Determines the active task */\n  active?: boolean;\n  /** Determines if a task is resolved */\n  isResolved?: boolean;\n  /** Represents the current status of task(like resolved-completed, InProgress etc) */\n  status?: {\n    /** Status text */\n    text: string;\n    /** Status variant */\n    variant: StatusProps['variant'];\n  };\n}\n"]}
+{"version":3,"file":"TaskManager.types.js","sourceRoot":"","sources":["../../../src/components/TaskManager/TaskManager.types.ts"],"names":[],"mappings":"","sourcesContent":["import { ReactNode, Ref } from 'react';\n\nimport {\n  BaseProps,\n  IconName,\n  MenuItemProps,\n  NoChildrenProp,\n  StatusProps\n} from '@pega/cosmos-react-core';\n\nimport { TaskPickerProps } from './TaskPicker';\n\nexport interface HandleValue {\n  nudge: () => Animation | undefined;\n}\n\nexport interface TaskManagerProps extends BaseProps, NoChildrenProp {\n  /** List of tasks */\n  tasks?: TaskProps[];\n  /** Callback when task is launched */\n  onTaskLaunch?: (id: TaskProps['id']) => void;\n  /** Callback when task is dismissed. Applicable only when task is not launched previously */\n  onTaskDismiss?: (id: TaskProps['id']) => void;\n  /** Add task utility */\n  addTask?: Pick<TaskPickerProps, 'items' | 'onAdd' | 'ref'>;\n  /** Banner for the task manager */\n  banner?: Pick<DialogueProps, 'icon' | 'content' | 'verbatimStatus'>;\n  /** Shows wrap up action when passed */\n  wrapUp?: {\n    /** Determines if wrap up button should be enabled */\n    disable: boolean;\n    /** Callback when wrap up is performed */\n    onClick: () => void;\n    /** Determines if wrap up is active */\n    active?: boolean;\n    /** Determines if wrap up tab should be shown or not */\n    showTab?: boolean;\n  };\n  /** Selected task content */\n  main?: ReactNode;\n  handle?: Ref<HandleValue>;\n  /** Conversation icon on TaskManager Header */\n  conversationAI?: Pick<ConversationAIProps, 'content' | 'entityCount'>;\n  ref?: Ref<HTMLDivElement>;\n}\n\nexport interface TaskManagerTabsProps {\n  wrapUpTabId: string;\n  wrapUpTabPanelId: string;\n  ref?: Ref<HTMLDivElement>;\n}\n\nexport interface TaskManagerTabProps {\n  active?: boolean;\n  variant?: string;\n}\nexport interface TaskViewProps extends BaseProps {\n  /** Task header */\n  header: ReactNode;\n  /** Task specific actions */\n  actions?: ReactNode;\n  /** Task form content */\n  children: ReactNode;\n  ref?: Ref<HTMLDivElement>;\n}\n\nexport interface DialogueProps extends BaseProps {\n  /** Icon for the banner */\n  icon: IconName;\n  /** Banner content */\n  content: string;\n  /** Type of banner icon */\n  verbatimStatus?: 'pending' | 'spoken';\n  handle?: Ref<HandleValue>;\n  ref?: Ref<HTMLDivElement>;\n}\n\nexport interface ConversationAIProps extends BaseProps {\n  /** Content */\n  content: ReactNode;\n  /** Number of entities captured */\n  entityCount: number;\n  ref?: Ref<HTMLDivElement>;\n}\n\nexport interface TaskManagerContextProps\n  extends Pick<TaskManagerProps, 'tasks' | 'addTask' | 'onTaskLaunch' | 'wrapUp'> {}\n\nexport interface TaskProps {\n  /** Unique id for tasks list */\n  id: string;\n  /** Name of the task */\n  name: string;\n  /** Meta info of the task ex: Queued task */\n  meta?: string;\n  /** Secondary information to show with the task name. Eg: CaseId. */\n  secondary?: MenuItemProps['secondary'];\n  /** Name of the icon (to be selected from default Pega icon set) */\n  icon: string;\n  /** Determines to show the task in tab. */\n  hideFromTab?: boolean;\n  /** Determines the active task */\n  active?: boolean;\n  /** Determines if a task is resolved */\n  isResolved?: boolean;\n  /** Represents the current status of task(like resolved-completed, InProgress etc) */\n  status?: {\n    /** Status text */\n    text: string;\n    /** Status variant */\n    variant: StatusProps['variant'];\n  };\n}\n"]}

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

@@ -0,0 +1,19 @@
+import { FunctionComponent, Ref } from 'react';
+import { ForwardProps, MenuItemProps, BaseProps, FormDialogProps } from '@pega/cosmos-react-core';
+import Dialog from '@pega/cosmos-react-core/lib/components/Dialog/Dialog';
+import { PickerProps } from '../Picker/Picker.types';
+export interface TaskPickerProps extends BaseProps, Pick<PickerProps, 'items'> {
+    /** Callback when add button is clicked */
+    onAdd: (selections: MenuItemProps[]) => void;
+    /** Callback when cancel button is clicked */
+    onCancel: () => void;
+    /** Target for the modal */
+    target: FormDialogProps['target'];
+    /** Picker reference . */
+    ref?: Ref<HTMLDivElement>;
+}
+export declare const StyledSingleTaskDialog: typeof Dialog;
+export declare const StyledMultiTaskDialog: import("styled-components").StyledComponent<import("react").FC<FormDialogProps & import("@pega/cosmos-react-core").OmitStrict<import("react").HTMLAttributes<HTMLDivElement>, "onSubmit">>, import("styled-components").DefaultTheme, {}, never>;
+declare const TaskPicker: FunctionComponent<TaskPickerProps & ForwardProps>;
+export default TaskPicker;
+//# sourceMappingURL=TaskPicker.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"TaskPicker.d.ts","sourceRoot":"","sources":["../../../src/components/TaskManager/TaskPicker.tsx"],"names":[],"mappings":"AAAA,OAAO,EAEL,iBAAiB,EAEjB,GAAG,EAKJ,MAAM,OAAO,CAAC;AAGf,OAAO,EACL,YAAY,EAYZ,aAAa,EAGb,SAAS,EACT,eAAe,EAChB,MAAM,yBAAyB,CAAC;AAMjC,OAAO,MAAM,MAAM,sDAAsD,CAAC;AAG1E,OAAO,EAAE,WAAW,EAAqB,MAAM,wBAAwB,CAAC;AAGxE,MAAM,WAAW,eAAgB,SAAQ,SAAS,EAAE,IAAI,CAAC,WAAW,EAAE,OAAO,CAAC;IAC5E,0CAA0C;IAC1C,KAAK,EAAE,CAAC,UAAU,EAAE,aAAa,EAAE,KAAK,IAAI,CAAC;IAC7C,6CAA6C;IAC7C,QAAQ,EAAE,MAAM,IAAI,CAAC;IACrB,2BAA2B;IAC3B,MAAM,EAAE,eAAe,CAAC,QAAQ,CAAC,CAAC;IAClC,yBAAyB;IACzB,GAAG,CAAC,EAAE,GAAG,CAAC,cAAc,CAAC,CAAC;CAC3B;AAED,eAAO,MAAM,sBAAsB,EAAE,OAAO,MAM1C,CAAC;AAEH,eAAO,MAAM,qBAAqB,kPAyBjC,CAAC;AAIF,QAAA,MAAM,UAAU,EAAE,iBAAiB,CAAC,eAAe,GAAG,YAAY,CAmHjE,CAAC;AAEF,eAAe,UAAU,CAAC"}

package/lib/components/TaskManager/TaskPicker.js

@@ -0,0 +1,89 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef, useCallback, useEffect, useRef, useState } from 'react';
+import styled, { css } from 'styled-components';
+import { useI18n, useConsolidatedRef, useElement, useUID, useOuterEvent, Flex, Button, Icon, Text, useFocusTrap, useEvent, FormDialog, defaultThemeProp } from '@pega/cosmos-react-core';
+import { StyledChildrenWrap, StyledDialogContent, StyledDialogHeader } from '@pega/cosmos-react-core/lib/components/Dialog/Dialog.styles';
+import Dialog from '@pega/cosmos-react-core/lib/components/Dialog/Dialog';
+import { StyledMenu } from '@pega/cosmos-react-core/lib/components/Menu/Menu.styles';
+import Picker from '../Picker';
+export const StyledSingleTaskDialog = styled(Dialog)(() => {
+    return css `
+    ${StyledMenu} {
+      overflow: auto;
+    }
+  `;
+});
+export const StyledMultiTaskDialog = styled(FormDialog)(({ theme: { base: { spacing } } }) => {
+    return css `
+      ${StyledDialogContent},
+      ${StyledChildrenWrap} {
+        display: flex;
+      }
+
+      ${StyledDialogHeader} {
+        padding-inline: ${spacing};
+      }
+
+      ${StyledDialogContent} {
+        padding-inline: 0;
+      }
+
+      ${StyledMenu} {
+        overflow: auto;
+      }
+    `;
+});
+StyledMultiTaskDialog.defaultProps = defaultThemeProp;
+const TaskPicker = forwardRef(({ items, onAdd, onCancel, target, ...restProps }, ref) => {
+    const t = useI18n();
+    const headingId = useUID();
+    const [selections, setSelections] = useState([]);
+    const [enableMultiSelect, setEnableMultiSelect] = useState(false);
+    const [pickerEl, setPickerEl] = useElement();
+    const pickerRef = useConsolidatedRef(ref, setPickerEl);
+    const initialRender = useRef(true);
+    const toggleHandleRef = useRef(null);
+    const onSelectionChange = (selectedItems) => {
+        setSelections(selectedItems);
+    };
+    useOuterEvent('mousedown', [target, pickerRef], () => {
+        onCancel?.();
+    });
+    const onModeToggle = () => {
+        setSelections([]);
+        setEnableMultiSelect(curr => !curr);
+    };
+    useEffect(() => {
+        if (!enableMultiSelect && selections?.length) {
+            onAdd(selections);
+        }
+    }, [selections, enableMultiSelect]);
+    useEffect(() => {
+        if (initialRender.current) {
+            initialRender.current = false;
+        }
+        else {
+            toggleHandleRef.current?.focusToggleSwitch();
+        }
+    }, [enableMultiSelect]);
+    const onKeydown = useCallback((e) => {
+        const { key } = e;
+        if (key === 'Escape') {
+            onCancel?.();
+        }
+    }, [onCancel]);
+    useFocusTrap(pickerRef, false, [onCancel, pickerEl, enableMultiSelect]);
+    useEvent('keydown', onKeydown, { dependencies: [pickerEl, enableMultiSelect] });
+    const pickerContent = (_jsx(Picker, { ...restProps, contextualLabel: t('task_manager_tasks').toLowerCase(), items: items, multiSelect: enableMultiSelect, onModeToggle: onModeToggle, reorderSelections: true, selections: selections, onSelectionChange: onSelectionChange, handle: toggleHandleRef }));
+    return enableMultiSelect ? (_jsx(StyledMultiTaskDialog, { ...restProps, target: target, heading: t('add_tasks'), ref: pickerRef, onCancel: () => {
+            onCancel();
+        }, onSubmit: {
+            text: t('add'),
+            disabled: !selections.length,
+            handler: () => {
+                onAdd(selections);
+            }
+        }, children: pickerContent })) : (_jsxs(Flex, { ...restProps, container: { direction: 'column', gap: 1 }, as: StyledSingleTaskDialog, target: target, labelledbyId: headingId, ref: pickerRef, children: [_jsxs(Flex, { container: { justify: 'between', alignItems: 'center', pad: 1 }, children: [_jsx(Text, { id: headingId, variant: 'h2', children: t('task_manager_add_task') }), _jsx(Button, { icon: true, variant: 'simple', onClick: onCancel, label: t('close'), "aria-label": t('close_noun', [t('task_manager_add_task')]), children: _jsx(Icon, { name: 'times' }) })] }), pickerContent] }));
+});
+export default TaskPicker;
+//# sourceMappingURL=TaskPicker.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"TaskPicker.js","sourceRoot":"","sources":["../../../src/components/TaskManager/TaskPicker.tsx"],"names":[],"mappings":";AAAA,OAAO,EACL,UAAU,EAIV,WAAW,EACX,SAAS,EACT,MAAM,EACN,QAAQ,EACT,MAAM,OAAO,CAAC;AACf,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAEhD,OAAO,EAEL,OAAO,EACP,kBAAkB,EAClB,UAAU,EACV,MAAM,EACN,aAAa,EACb,IAAI,EACJ,MAAM,EACN,IAAI,EACJ,IAAI,EACJ,YAAY,EACZ,QAAQ,EAER,UAAU,EACV,gBAAgB,EAGjB,MAAM,yBAAyB,CAAC;AACjC,OAAO,EACL,kBAAkB,EAClB,mBAAmB,EACnB,kBAAkB,EACnB,MAAM,6DAA6D,CAAC;AACrE,OAAO,MAAM,MAAM,sDAAsD,CAAC;AAC1E,OAAO,EAAE,UAAU,EAAE,MAAM,yDAAyD,CAAC;AAGrF,OAAO,MAAM,MAAM,WAAW,CAAC;AAa/B,MAAM,CAAC,MAAM,sBAAsB,GAAkB,MAAM,CAAC,MAAM,CAAC,CAAC,GAAG,EAAE;IACvE,OAAO,GAAG,CAAA;MACN,UAAU;;;GAGb,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,MAAM,CAAC,MAAM,qBAAqB,GAAG,MAAM,CAAC,UAAU,CAAC,CACrD,CAAC,EACC,KAAK,EAAE,EACL,IAAI,EAAE,EAAE,OAAO,EAAE,EAClB,EACF,EAAE,EAAE;IACH,OAAO,GAAG,CAAA;QACN,mBAAmB;QACnB,kBAAkB;;;;QAIlB,kBAAkB;0BACA,OAAO;;;QAGzB,mBAAmB;;;;QAInB,UAAU;;;KAGb,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,qBAAqB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAEtD,MAAM,UAAU,GAAsD,UAAU,CAC9E,CACE,EAAE,KAAK,EAAE,KAAK,EAAE,QAAQ,EAAE,MAAM,EAAE,GAAG,SAAS,EAAoC,EAClF,GAA2B,EAC3B,EAAE;IACF,MAAM,CAAC,GAAG,OAAO,EAAE,CAAC;IACpB,MAAM,SAAS,GAAG,MAAM,EAAE,CAAC;IAC3B,MAAM,CAAC,UAAU,EAAE,aAAa,CAAC,GAAG,QAAQ,CAAkB,EAAE,CAAC,CAAC;IAClE,MAAM,CAAC,iBAAiB,EAAE,oBAAoB,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAClE,MAAM,CAAC,QAAQ,EAAE,WAAW,CAAC,GAAG,UAAU,EAAkB,CAAC;IAC7D,MAAM,SAAS,GAAG,kBAAkB,CAAC,GAAG,EAAE,WAAW,CAAC,CAAC;IACvD,MAAM,aAAa,GAAG,MAAM,CAAC,IAAI,CAAC,CAAC;IACnC,MAAM,eAAe,GAAG,MAAM,CAAoB,IAAI,CAAC,CAAC;IAExD,MAAM,iBAAiB,GAAG,CAAC,aAA8B,EAAE,EAAE;QAC3D,aAAa,CAAC,aAAa,CAAC,CAAC;IAC/B,CAAC,CAAC;IAEF,aAAa,CAAC,WAAW,EAAE,CAAC,MAAM,EAAE,SAAS,CAAC,EAAE,GAAG,EAAE;QACnD,QAAQ,EAAE,EAAE,CAAC;IACf,CAAC,CAAC,CAAC;IAEH,MAAM,YAAY,GAAG,GAAG,EAAE;QACxB,aAAa,CAAC,EAAE,CAAC,CAAC;QAClB,oBAAoB,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC,IAAI,CAAC,CAAC;IACtC,CAAC,CAAC;IAEF,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,CAAC,iBAAiB,IAAI,UAAU,EAAE,MAAM,EAAE;YAC5C,KAAK,CAAC,UAAU,CAAC,CAAC;SACnB;IACH,CAAC,EAAE,CAAC,UAAU,EAAE,iBAAiB,CAAC,CAAC,CAAC;IAEpC,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,aAAa,CAAC,OAAO,EAAE;YACzB,aAAa,CAAC,OAAO,GAAG,KAAK,CAAC;SAC/B;aAAM;YACL,eAAe,CAAC,OAAO,EAAE,iBAAiB,EAAE,CAAC;SAC9C;IACH,CAAC,EAAE,CAAC,iBAAiB,CAAC,CAAC,CAAC;IAExB,MAAM,SAAS,GAAG,WAAW,CAC3B,CAAC,CAAgB,EAAE,EAAE;QACnB,MAAM,EAAE,GAAG,EAAE,GAAG,CAAC,CAAC;QAClB,IAAI,GAAG,KAAK,QAAQ,EAAE;YACpB,QAAQ,EAAE,EAAE,CAAC;SACd;IACH,CAAC,EACD,CAAC,QAAQ,CAAC,CACX,CAAC;IAEF,YAAY,CAAC,SAAS,EAAE,KAAK,EAAE,CAAC,QAAQ,EAAE,QAAQ,EAAE,iBAAiB,CAAC,CAAC,CAAC;IAExE,QAAQ,CAAC,SAAS,EAAE,SAAS,EAAE,EAAE,YAAY,EAAE,CAAC,QAAQ,EAAE,iBAAiB,CAAC,EAAE,CAAC,CAAC;IAEhF,MAAM,aAAa,GAAG,CACpB,KAAC,MAAM,OACD,SAAS,EACb,eAAe,EAAE,CAAC,CAAC,oBAAoB,CAAC,CAAC,WAAW,EAAE,EACtD,KAAK,EAAE,KAAK,EACZ,WAAW,EAAE,iBAAiB,EAC9B,YAAY,EAAE,YAAY,EAC1B,iBAAiB,QACjB,UAAU,EAAE,UAAU,EACtB,iBAAiB,EAAE,iBAAiB,EACpC,MAAM,EAAE,eAAe,GACvB,CACH,CAAC;IAEF,OAAO,iBAAiB,CAAC,CAAC,CAAC,CACzB,KAAC,qBAAqB,OAChB,SAAS,EACb,MAAM,EAAE,MAAM,EACd,OAAO,EAAE,CAAC,CAAC,WAAW,CAAC,EACvB,GAAG,EAAE,SAAS,EACd,QAAQ,EAAE,GAAG,EAAE;YACb,QAAQ,EAAE,CAAC;QACb,CAAC,EACD,QAAQ,EAAE;YACR,IAAI,EAAE,CAAC,CAAC,KAAK,CAAC;YACd,QAAQ,EAAE,CAAC,UAAU,CAAC,MAAM;YAC5B,OAAO,EAAE,GAAG,EAAE;gBACZ,KAAK,CAAC,UAAU,CAAC,CAAC;YACpB,CAAC;SACF,YAEA,aAAa,GACQ,CACzB,CAAC,CAAC,CAAC,CACF,MAAC,IAAI,OACC,SAAS,EACb,SAAS,EAAE,EAAE,SAAS,EAAE,QAAQ,EAAE,GAAG,EAAE,CAAC,EAAE,EAC1C,EAAE,EAAE,sBAAsB,EAC1B,MAAM,EAAE,MAAM,EACd,YAAY,EAAE,SAAS,EACvB,GAAG,EAAE,SAAS,aAEd,MAAC,IAAI,IAAC,SAAS,EAAE,EAAE,OAAO,EAAE,SAAS,EAAE,UAAU,EAAE,QAAQ,EAAE,GAAG,EAAE,CAAC,EAAE,aACnE,KAAC,IAAI,IAAC,EAAE,EAAE,SAAS,EAAE,OAAO,EAAC,IAAI,YAC9B,CAAC,CAAC,uBAAuB,CAAC,GACtB,EACP,KAAC,MAAM,IACL,IAAI,QACJ,OAAO,EAAC,QAAQ,EAChB,OAAO,EAAE,QAAQ,EACjB,KAAK,EAAE,CAAC,CAAC,OAAO,CAAC,gBACL,CAAC,CAAC,YAAY,EAAE,CAAC,CAAC,CAAC,uBAAuB,CAAC,CAAC,CAAC,YAEzD,KAAC,IAAI,IAAC,IAAI,EAAC,OAAO,GAAG,GACd,IACJ,EACN,aAAa,IACT,CACR,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,eAAe,UAAU,CAAC","sourcesContent":["import {\n  forwardRef,\n  FunctionComponent,\n  PropsWithoutRef,\n  Ref,\n  useCallback,\n  useEffect,\n  useRef,\n  useState\n} from 'react';\nimport styled, { css } from 'styled-components';\n\nimport {\n  ForwardProps,\n  useI18n,\n  useConsolidatedRef,\n  useElement,\n  useUID,\n  useOuterEvent,\n  Flex,\n  Button,\n  Icon,\n  Text,\n  useFocusTrap,\n  useEvent,\n  MenuItemProps,\n  FormDialog,\n  defaultThemeProp,\n  BaseProps,\n  FormDialogProps\n} from '@pega/cosmos-react-core';\nimport {\n  StyledChildrenWrap,\n  StyledDialogContent,\n  StyledDialogHeader\n} from '@pega/cosmos-react-core/lib/components/Dialog/Dialog.styles';\nimport Dialog from '@pega/cosmos-react-core/lib/components/Dialog/Dialog';\nimport { StyledMenu } from '@pega/cosmos-react-core/lib/components/Menu/Menu.styles';\n\nimport { PickerProps, SwitchHandleValue } from '../Picker/Picker.types';\nimport Picker from '../Picker';\n\nexport interface TaskPickerProps extends BaseProps, Pick<PickerProps, 'items'> {\n  /** Callback when add button is clicked */\n  onAdd: (selections: MenuItemProps[]) => void;\n  /** Callback when cancel button is clicked */\n  onCancel: () => void;\n  /** Target for the modal */\n  target: FormDialogProps['target'];\n  /** Picker reference . */\n  ref?: Ref<HTMLDivElement>;\n}\n\nexport const StyledSingleTaskDialog: typeof Dialog = styled(Dialog)(() => {\n  return css`\n    ${StyledMenu} {\n      overflow: auto;\n    }\n  `;\n});\n\nexport const StyledMultiTaskDialog = styled(FormDialog)(\n  ({\n    theme: {\n      base: { spacing }\n    }\n  }) => {\n    return css`\n      ${StyledDialogContent},\n      ${StyledChildrenWrap} {\n        display: flex;\n      }\n\n      ${StyledDialogHeader} {\n        padding-inline: ${spacing};\n      }\n\n      ${StyledDialogContent} {\n        padding-inline: 0;\n      }\n\n      ${StyledMenu} {\n        overflow: auto;\n      }\n    `;\n  }\n);\n\nStyledMultiTaskDialog.defaultProps = defaultThemeProp;\n\nconst TaskPicker: FunctionComponent<TaskPickerProps & ForwardProps> = forwardRef(\n  (\n    { items, onAdd, onCancel, target, ...restProps }: PropsWithoutRef<TaskPickerProps>,\n    ref: TaskPickerProps['ref']\n  ) => {\n    const t = useI18n();\n    const headingId = useUID();\n    const [selections, setSelections] = useState<MenuItemProps[]>([]);\n    const [enableMultiSelect, setEnableMultiSelect] = useState(false);\n    const [pickerEl, setPickerEl] = useElement<HTMLDivElement>();\n    const pickerRef = useConsolidatedRef(ref, setPickerEl);\n    const initialRender = useRef(true);\n    const toggleHandleRef = useRef<SwitchHandleValue>(null);\n\n    const onSelectionChange = (selectedItems: MenuItemProps[]) => {\n      setSelections(selectedItems);\n    };\n\n    useOuterEvent('mousedown', [target, pickerRef], () => {\n      onCancel?.();\n    });\n\n    const onModeToggle = () => {\n      setSelections([]);\n      setEnableMultiSelect(curr => !curr);\n    };\n\n    useEffect(() => {\n      if (!enableMultiSelect && selections?.length) {\n        onAdd(selections);\n      }\n    }, [selections, enableMultiSelect]);\n\n    useEffect(() => {\n      if (initialRender.current) {\n        initialRender.current = false;\n      } else {\n        toggleHandleRef.current?.focusToggleSwitch();\n      }\n    }, [enableMultiSelect]);\n\n    const onKeydown = useCallback(\n      (e: KeyboardEvent) => {\n        const { key } = e;\n        if (key === 'Escape') {\n          onCancel?.();\n        }\n      },\n      [onCancel]\n    );\n\n    useFocusTrap(pickerRef, false, [onCancel, pickerEl, enableMultiSelect]);\n\n    useEvent('keydown', onKeydown, { dependencies: [pickerEl, enableMultiSelect] });\n\n    const pickerContent = (\n      <Picker\n        {...restProps}\n        contextualLabel={t('task_manager_tasks').toLowerCase()}\n        items={items}\n        multiSelect={enableMultiSelect}\n        onModeToggle={onModeToggle}\n        reorderSelections\n        selections={selections}\n        onSelectionChange={onSelectionChange}\n        handle={toggleHandleRef}\n      />\n    );\n\n    return enableMultiSelect ? (\n      <StyledMultiTaskDialog\n        {...restProps}\n        target={target}\n        heading={t('add_tasks')}\n        ref={pickerRef}\n        onCancel={() => {\n          onCancel();\n        }}\n        onSubmit={{\n          text: t('add'),\n          disabled: !selections.length,\n          handler: () => {\n            onAdd(selections);\n          }\n        }}\n      >\n        {pickerContent}\n      </StyledMultiTaskDialog>\n    ) : (\n      <Flex\n        {...restProps}\n        container={{ direction: 'column', gap: 1 }}\n        as={StyledSingleTaskDialog}\n        target={target}\n        labelledbyId={headingId}\n        ref={pickerRef}\n      >\n        <Flex container={{ justify: 'between', alignItems: 'center', pad: 1 }}>\n          <Text id={headingId} variant='h2'>\n            {t('task_manager_add_task')}\n          </Text>\n          <Button\n            icon\n            variant='simple'\n            onClick={onCancel}\n            label={t('close')}\n            aria-label={t('close_noun', [t('task_manager_add_task')])}\n          >\n            <Icon name='times' />\n          </Button>\n        </Flex>\n        {pickerContent}\n      </Flex>\n    );\n  }\n);\n\nexport default TaskPicker;\n"]}

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

@@ -1,5 +1,5 @@
 export { default } from './TaskManager';
 export { default as TaskView } from './TaskView';
 export { TaskManagerProps, TaskProps, TaskManagerTabsProps, TaskViewProps, DialogueProps } from './TaskManager.types';
-export { default as Picker } from './Picker/Picker';
+export { default as TaskPicker } from './TaskPicker';
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/TaskManager/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,eAAe,CAAC;AACxC,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,YAAY,CAAC;AACjD,OAAO,EACL,gBAAgB,EAChB,SAAS,EACT,oBAAoB,EACpB,aAAa,EACb,aAAa,EACd,MAAM,qBAAqB,CAAC;AAC7B,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,MAAM,iBAAiB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/TaskManager/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,eAAe,CAAC;AACxC,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,YAAY,CAAC;AACjD,OAAO,EACL,gBAAgB,EAChB,SAAS,EACT,oBAAoB,EACpB,aAAa,EACb,aAAa,EACd,MAAM,qBAAqB,CAAC;AAC7B,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,cAAc,CAAC"}

package/lib/components/TaskManager/index.js

@@ -1,4 +1,4 @@
 export { default } from './TaskManager';
 export { default as TaskView } from './TaskView';
-export { default as Picker } from './Picker/Picker';
+export { default as TaskPicker } from './TaskPicker';
 //# sourceMappingURL=index.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/TaskManager/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,eAAe,CAAC;AACxC,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,YAAY,CAAC;AAQjD,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,MAAM,iBAAiB,CAAC","sourcesContent":["export { default } from './TaskManager';\nexport { default as TaskView } from './TaskView';\nexport {\n  TaskManagerProps,\n  TaskProps,\n  TaskManagerTabsProps,\n  TaskViewProps,\n  DialogueProps\n} from './TaskManager.types';\nexport { default as Picker } from './Picker/Picker';\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/TaskManager/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,eAAe,CAAC;AACxC,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,YAAY,CAAC;AAQjD,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,cAAc,CAAC","sourcesContent":["export { default } from './TaskManager';\nexport { default as TaskView } from './TaskView';\nexport {\n  TaskManagerProps,\n  TaskProps,\n  TaskManagerTabsProps,\n  TaskViewProps,\n  DialogueProps\n} from './TaskManager.types';\nexport { default as TaskPicker } from './TaskPicker';\n"]}

package/lib/index.d.ts

@@ -11,6 +11,7 @@ export * from './components/DialPad';
 export { default as InteractionNotification } from './components/InteractionNotification';
 export { default as InteractionTimer } from './components/InteractionTimer';
 export * from './components/InteractionTimer';
+export { default as Picker } from './components/Picker';
 export { default as TaskManager } from './components/TaskManager';
 export * from './components/TaskManager';
 //# sourceMappingURL=index.d.ts.map

package/lib/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,OAAO,IAAI,OAAO,EAAE,MAAM,sBAAsB,CAAC;AAC1D,cAAc,sBAAsB,CAAC;AACrC,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,0BAA0B,CAAC;AAClE,cAAc,0BAA0B,CAAC;AACzC,OAAO,EAAE,OAAO,IAAI,gBAAgB,EAAE,MAAM,+BAA+B,CAAC;AAC5E,cAAc,+BAA+B,CAAC;AAC9C,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAC5D,cAAc,uBAAuB,CAAC;AACtC,OAAO,EAAE,OAAO,IAAI,OAAO,EAAE,MAAM,sBAAsB,CAAC;AAC1D,cAAc,sBAAsB,CAAC;AACrC,OAAO,EAAE,OAAO,IAAI,uBAAuB,EAAE,MAAM,sCAAsC,CAAC;AAC1F,OAAO,EAAE,OAAO,IAAI,gBAAgB,EAAE,MAAM,+BAA+B,CAAC;AAC5E,cAAc,+BAA+B,CAAC;AAC9C,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,0BAA0B,CAAC;AAClE,cAAc,0BAA0B,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,OAAO,IAAI,OAAO,EAAE,MAAM,sBAAsB,CAAC;AAC1D,cAAc,sBAAsB,CAAC;AACrC,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,0BAA0B,CAAC;AAClE,cAAc,0BAA0B,CAAC;AACzC,OAAO,EAAE,OAAO,IAAI,gBAAgB,EAAE,MAAM,+BAA+B,CAAC;AAC5E,cAAc,+BAA+B,CAAC;AAC9C,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAC5D,cAAc,uBAAuB,CAAC;AACtC,OAAO,EAAE,OAAO,IAAI,OAAO,EAAE,MAAM,sBAAsB,CAAC;AAC1D,cAAc,sBAAsB,CAAC;AACrC,OAAO,EAAE,OAAO,IAAI,uBAAuB,EAAE,MAAM,sCAAsC,CAAC;AAC1F,OAAO,EAAE,OAAO,IAAI,gBAAgB,EAAE,MAAM,+BAA+B,CAAC;AAC5E,cAAc,+BAA+B,CAAC;AAC9C,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,MAAM,qBAAqB,CAAC;AACxD,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,0BAA0B,CAAC;AAClE,cAAc,0BAA0B,CAAC"}

package/lib/index.js

@@ -12,6 +12,7 @@ export * from './components/DialPad';
 export { default as InteractionNotification } from './components/InteractionNotification';
 export { default as InteractionTimer } from './components/InteractionTimer';
 export * from './components/InteractionTimer';
+export { default as Picker } from './components/Picker';
 export { default as TaskManager } from './components/TaskManager';
 export * from './components/TaskManager';
 //# sourceMappingURL=index.js.map