@pega/cosmos-react-cs 4.0.0-dev.23.1 → 4.0.0-dev.24.0

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

@@ -1 +1 @@
-{"version":3,"file":"InteractionTimer.js","sourceRoot":"","sources":["../../../src/components/InteractionTimer/InteractionTimer.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  forwardRef,\n  FunctionComponent,\n  PropsWithoutRef,\n  Ref,\n  useEffect,\n  useRef,\n  useState\n} 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  NoChildrenProp,\n  useConsolidatedRef\n} from '@pega/cosmos-react-core';\n\nexport interface InteractionTimerProps extends BaseProps, AsProp, NoChildrenProp {\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    const [currentTimeLabel, setCurrentTimeLabel] = useState('');\n    const containerRef = useConsolidatedRef(ref);\n    const labelRef = useRef('');\n\n    useEffect(() => {\n      if (ariaLabel) labelRef.current = ariaLabel;\n    }, [ariaLabel]);\n\n    useEffect(() => {\n      const onFocus = () => {\n        if (document.activeElement?.contains(containerRef.current) && labelRef.current) {\n          setCurrentTimeLabel(labelRef.current);\n        }\n      };\n\n      document.addEventListener('focusin', onFocus);\n      return () => {\n        document.removeEventListener('focusin', onFocus);\n      };\n    }, []);\n\n    return (\n      <Flex\n        {...restProps}\n        ref={containerRef}\n        container={{\n          direction: 'column',\n          alignItems: 'center'\n        }}\n        sla={sla}\n        hasNotifications={hasNotifications}\n        as={StyledInteractionTimer}\n        aria-label={currentTimeLabel}\n        role='timer'\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            aria-hidden='true'\n          />\n        </StyledInteractionTimerIconWrapper>\n        {meta && (\n          <Text variant='secondary' as={StyledInteractionTimerMetaText} aria-hidden='true'>\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":"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","sourcesContent":["import {\n  forwardRef,\n  FunctionComponent,\n  PropsWithoutRef,\n  Ref,\n  useEffect,\n  useRef,\n  useState\n} 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  NoChildrenProp,\n  useConsolidatedRef\n} from '@pega/cosmos-react-core';\n\nexport interface InteractionTimerProps extends BaseProps, AsProp, NoChildrenProp {\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  function InteractionTimer(\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    const [currentTimeLabel, setCurrentTimeLabel] = useState('');\n    const containerRef = useConsolidatedRef(ref);\n    const labelRef = useRef('');\n\n    useEffect(() => {\n      if (ariaLabel) labelRef.current = ariaLabel;\n    }, [ariaLabel]);\n\n    useEffect(() => {\n      const onFocus = () => {\n        if (document.activeElement?.contains(containerRef.current) && labelRef.current) {\n          setCurrentTimeLabel(labelRef.current);\n        }\n      };\n\n      document.addEventListener('focusin', onFocus);\n      return () => {\n        document.removeEventListener('focusin', onFocus);\n      };\n    }, []);\n\n    return (\n      <Flex\n        {...restProps}\n        ref={containerRef}\n        container={{\n          direction: 'column',\n          alignItems: 'center'\n        }}\n        sla={sla}\n        hasNotifications={hasNotifications}\n        as={StyledInteractionTimer}\n        aria-label={currentTimeLabel}\n        role='timer'\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            aria-hidden='true'\n          />\n        </StyledInteractionTimerIconWrapper>\n        {meta && (\n          <Text variant='secondary' as={StyledInteractionTimerMetaText} aria-hidden='true'>\n            {meta}\n          </Text>\n        )}\n      </Flex>\n    );\n  }\n);\n\nexport default InteractionTimer;\n"]}

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

@@ -1 +1 @@
-{"version":3,"file":"Picker.d.ts","sourceRoot":"","sources":["../../../src/components/Picker/Picker.tsx"],"names":[],"mappings":"AAAA,OAAO,EAEL,iBAAiB,EAOlB,MAAM,OAAO,CAAC;AAEf,OAAO,EAcL,YAAY,EAGb,MAAM,yBAAyB,CAAC;AAOjC,OAAO,EAA8B,WAAW,EAAqB,MAAM,gBAAgB,CAAC;AAqF5F,QAAA,MAAM,MAAM,EAAE,iBAAiB,CAAC,WAAW,GAAG,YAAY,CAmMzD,CAAC;AAEF,eAAe,MAAM,CAAC"}
+{"version":3,"file":"Picker.d.ts","sourceRoot":"","sources":["../../../src/components/Picker/Picker.tsx"],"names":[],"mappings":"AAAA,OAAO,EAEL,iBAAiB,EAOlB,MAAM,OAAO,CAAC;AAEf,OAAO,EAcL,YAAY,EAGb,MAAM,yBAAyB,CAAC;AAOjC,OAAO,EAA8B,WAAW,EAAqB,MAAM,gBAAgB,CAAC;AAqF5F,QAAA,MAAM,MAAM,EAAE,iBAAiB,CAAC,WAAW,GAAG,YAAY,CAiMxD,CAAC;AAEH,eAAe,MAAM,CAAC"}

package/lib/components/Picker/Picker.js

@@ -19,7 +19,7 @@ const DraggableSelectedList = ({ selectedItems, onChange, itemRenderer }) => {
                 data: item
             })), itemRenderer: itemRenderer, onChange: onChange }) }));
 };
-const Picker = forwardRef(({ items, multiSelect = false, onModeToggle, contextualLabel, reorderSelections = false, selections, onSelectionChange, handle }, ref) => {
+const Picker = forwardRef(function Picker({ items, multiSelect = false, onModeToggle, contextualLabel, reorderSelections = false, selections, onSelectionChange, handle }, ref) {
     const t = useI18n();
     const [searchInput, setSearchInput] = useState('');
     const filterRegex = createStringMatcher(searchInput);

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

@@ -1 +1 @@
-{"version":3,"file":"Picker.js","sourceRoot":"","sources":["../../../src/components/Picker/Picker.tsx"],"names":[],"mappings":"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","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"]}
+{"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,CAAC,SAAS,MAAM,CACtF,EACE,KAAK,EACL,WAAW,GAAG,KAAK,EACnB,YAAY,EACZ,eAAe,EACf,iBAAiB,GAAG,KAAK,EACzB,UAAU,EACV,iBAAiB,EACjB,MAAM,EACuB,EAC/B,GAAuB;IAEvB,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,CAAC,CAAC;AAEH,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(function Picker(\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\nexport default Picker;\n"]}

package/lib/components/TaskManager/ConversationAI.js

@@ -4,7 +4,7 @@ import { Flex, Button, useOuterEvent, useEscape, Icon, Text, EmptyState, useI18n
 import * as aiAssistIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/ai-assist.icon';
 import { StyledCountBadge, StyledEntityPopover, StyledContent, StyledHeader } from './TaskManager.styles';
 registerIcon(aiAssistIcon);
-const ConversationAI = forwardRef(({ content, entityCount }, ref) => {
+const ConversationAI = forwardRef(function ConversationAI({ content, entityCount }, ref) {
     const t = useI18n();
     const [showPopover, setShowPopover] = useState(false);
     const buttonRef = useRef(null);

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

@@ -1 +1 @@
-{"version":3,"file":"ConversationAI.js","sourceRoot":"","sources":["../../../src/components/TaskManager/ConversationAI.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAqB,UAAU,EAAmB,QAAQ,EAAE,MAAM,EAAE,MAAM,OAAO,CAAC;AAEzF,OAAO,EACL,IAAI,EAEJ,MAAM,EACN,aAAa,EACb,SAAS,EACT,IAAI,EACJ,IAAI,EACJ,UAAU,EACV,OAAO,EACP,YAAY,EACb,MAAM,yBAAyB,CAAC;AACjC,OAAO,KAAK,YAAY,MAAM,kEAAkE,CAAC;AAGjG,OAAO,EACL,gBAAgB,EAChB,mBAAmB,EACnB,aAAa,EACb,YAAY,EACb,MAAM,sBAAsB,CAAC;AAE9B,YAAY,CAAC,YAAY,CAAC,CAAC;AAE3B,MAAM,cAAc,GAA0D,UAAU,CACtF,CACE,EAAE,OAAO,EAAE,WAAW,EAAwC,EAC9D,GAA+B,EAC/B,EAAE;IACF,MAAM,CAAC,GAAG,OAAO,EAAE,CAAC;IACpB,MAAM,CAAC,WAAW,EAAE,cAAc,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IACtD,MAAM,SAAS,GAAG,MAAM,CAAC,IAAI,CAAC,CAAC;IAC/B,MAAM,UAAU,GAAG,MAAM,CAAC,IAAI,CAAC,CAAC;IAChC,aAAa,CAAC,WAAW,EAAE,CAAC,UAAU,EAAE,SAAS,CAAC,EAAE,GAAG,EAAE;QACvD,IAAI,WAAW;YAAE,cAAc,CAAC,KAAK,CAAC,CAAC;IACzC,CAAC,CAAC,CAAC;IAEH,SAAS,CAAC,GAAG,EAAE;QACb,cAAc,CAAC,KAAK,CAAC,CAAC;IACxB,CAAC,CAAC,CAAC;IAEH,OAAO,CACL,eAAK,GAAG,EAAE,GAAG,aACX,MAAC,MAAM,IACL,OAAO,EAAC,QAAQ,EAChB,IAAI,QACJ,OAAO,EAAE,GAAG,EAAE;oBACZ,cAAc,CAAC,GAAG,CAAC,EAAE,CAAC,CAAC,GAAG,CAAC,CAAC;gBAC9B,CAAC,EACD,GAAG,EAAE,SAAS,gBACF,CAAC,CAAC,wBAAwB,CAAC,aAEvC,KAAC,IAAI,IAAC,IAAI,EAAC,WAAW,GAAG,EACzB,KAAC,gBAAgB,IAAC,OAAO,EAAC,SAAS,YAAE,WAAW,GAAoB,IAC7D,EAET,MAAC,mBAAmB,IAClB,IAAI,EAAE,WAAW,EACjB,MAAM,EAAE,SAAS,CAAC,OAAO,EACzB,SAAS,EAAC,cAAc,EACxB,GAAG,EAAE,UAAU,EACf,KAAK,mBAEL,MAAC,IAAI,IACH,SAAS,EAAE;4BACT,OAAO,EAAE,SAAS;4BAClB,UAAU,EAAE,QAAQ;yBACrB,EACD,EAAE,EAAE,YAAY,aAEhB,KAAC,IAAI,IAAC,OAAO,EAAC,IAAI,YAAE,CAAC,CAAC,sBAAsB,CAAC,GAAQ,EACrD,KAAC,MAAM,IACL,OAAO,EAAC,QAAQ,EAChB,OAAO,EAAE,GAAG,EAAE;oCACZ,cAAc,CAAC,KAAK,CAAC,CAAC;gCACxB,CAAC,EACD,IAAI,sBACQ,CAAC,CAAC,oBAAoB,CAAC,YAEnC,KAAC,IAAI,IAAC,IAAI,EAAC,OAAO,GAAG,GACd,IACJ,EACP,KAAC,aAAa,cACX,WAAW,KAAK,CAAC,IAAI,OAAO,KAAK,IAAI,CAAC,CAAC,CAAC,CACvC,KAAC,UAAU,IAAC,OAAO,EAAE,CAAC,CAAC,sBAAsB,CAAC,EAAE,IAAI,EAAE,EAAE,IAAI,EAAE,CAAC,EAAE,GAAI,CACtE,CAAC,CAAC,CAAC,CACF,OAAO,CACR,GACa,IACI,IAClB,CACP,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,eAAe,cAAc,CAAC","sourcesContent":["import { FunctionComponent, forwardRef, PropsWithoutRef, useState, useRef } from 'react';\n\nimport {\n  Flex,\n  ForwardProps,\n  Button,\n  useOuterEvent,\n  useEscape,\n  Icon,\n  Text,\n  EmptyState,\n  useI18n,\n  registerIcon\n} from '@pega/cosmos-react-core';\nimport * as aiAssistIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/ai-assist.icon';\n\nimport { ConversationAIProps } from './TaskManager.types';\nimport {\n  StyledCountBadge,\n  StyledEntityPopover,\n  StyledContent,\n  StyledHeader\n} from './TaskManager.styles';\n\nregisterIcon(aiAssistIcon);\n\nconst ConversationAI: FunctionComponent<ConversationAIProps & ForwardProps> = forwardRef(\n  (\n    { content, entityCount }: PropsWithoutRef<ConversationAIProps>,\n    ref: ConversationAIProps['ref']\n  ) => {\n    const t = useI18n();\n    const [showPopover, setShowPopover] = useState(false);\n    const buttonRef = useRef(null);\n    const popoverRef = useRef(null);\n    useOuterEvent('mousedown', [popoverRef, buttonRef], () => {\n      if (showPopover) setShowPopover(false);\n    });\n\n    useEscape(() => {\n      setShowPopover(false);\n    });\n\n    return (\n      <div ref={ref}>\n        <Button\n          variant='simple'\n          icon\n          onClick={() => {\n            setShowPopover(cur => !cur);\n          }}\n          ref={buttonRef}\n          aria-label={t('show_detected_entities')}\n        >\n          <Icon name='ai-assist' />\n          <StyledCountBadge variant='default'>{entityCount}</StyledCountBadge>\n        </Button>\n\n        <StyledEntityPopover\n          show={showPopover}\n          target={buttonRef.current}\n          placement='bottom-start'\n          ref={popoverRef}\n          arrow\n        >\n          <Flex\n            container={{\n              justify: 'between',\n              alignItems: 'center'\n            }}\n            as={StyledHeader}\n          >\n            <Text variant='h3'>{t('ai_detected_entities')}</Text>\n            <Button\n              variant='simple'\n              onClick={() => {\n                setShowPopover(false);\n              }}\n              icon\n              aria-label={t('close_conversation')}\n            >\n              <Icon name='times' />\n            </Button>\n          </Flex>\n          <StyledContent>\n            {entityCount === 0 || content === null ? (\n              <EmptyState message={t('nothing_detected_yet')} item={{ grow: 1 }} />\n            ) : (\n              content\n            )}\n          </StyledContent>\n        </StyledEntityPopover>\n      </div>\n    );\n  }\n);\n\nexport default ConversationAI;\n"]}
+{"version":3,"file":"ConversationAI.js","sourceRoot":"","sources":["../../../src/components/TaskManager/ConversationAI.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAqB,UAAU,EAAmB,QAAQ,EAAE,MAAM,EAAE,MAAM,OAAO,CAAC;AAEzF,OAAO,EACL,IAAI,EAEJ,MAAM,EACN,aAAa,EACb,SAAS,EACT,IAAI,EACJ,IAAI,EACJ,UAAU,EACV,OAAO,EACP,YAAY,EACb,MAAM,yBAAyB,CAAC;AACjC,OAAO,KAAK,YAAY,MAAM,kEAAkE,CAAC;AAGjG,OAAO,EACL,gBAAgB,EAChB,mBAAmB,EACnB,aAAa,EACb,YAAY,EACb,MAAM,sBAAsB,CAAC;AAE9B,YAAY,CAAC,YAAY,CAAC,CAAC;AAE3B,MAAM,cAAc,GAA0D,UAAU,CACtF,SAAS,cAAc,CACrB,EAAE,OAAO,EAAE,WAAW,EAAwC,EAC9D,GAA+B;IAE/B,MAAM,CAAC,GAAG,OAAO,EAAE,CAAC;IACpB,MAAM,CAAC,WAAW,EAAE,cAAc,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IACtD,MAAM,SAAS,GAAG,MAAM,CAAC,IAAI,CAAC,CAAC;IAC/B,MAAM,UAAU,GAAG,MAAM,CAAC,IAAI,CAAC,CAAC;IAChC,aAAa,CAAC,WAAW,EAAE,CAAC,UAAU,EAAE,SAAS,CAAC,EAAE,GAAG,EAAE;QACvD,IAAI,WAAW;YAAE,cAAc,CAAC,KAAK,CAAC,CAAC;IACzC,CAAC,CAAC,CAAC;IAEH,SAAS,CAAC,GAAG,EAAE;QACb,cAAc,CAAC,KAAK,CAAC,CAAC;IACxB,CAAC,CAAC,CAAC;IAEH,OAAO,CACL,eAAK,GAAG,EAAE,GAAG,aACX,MAAC,MAAM,IACL,OAAO,EAAC,QAAQ,EAChB,IAAI,QACJ,OAAO,EAAE,GAAG,EAAE;oBACZ,cAAc,CAAC,GAAG,CAAC,EAAE,CAAC,CAAC,GAAG,CAAC,CAAC;gBAC9B,CAAC,EACD,GAAG,EAAE,SAAS,gBACF,CAAC,CAAC,wBAAwB,CAAC,aAEvC,KAAC,IAAI,IAAC,IAAI,EAAC,WAAW,GAAG,EACzB,KAAC,gBAAgB,IAAC,OAAO,EAAC,SAAS,YAAE,WAAW,GAAoB,IAC7D,EAET,MAAC,mBAAmB,IAClB,IAAI,EAAE,WAAW,EACjB,MAAM,EAAE,SAAS,CAAC,OAAO,EACzB,SAAS,EAAC,cAAc,EACxB,GAAG,EAAE,UAAU,EACf,KAAK,mBAEL,MAAC,IAAI,IACH,SAAS,EAAE;4BACT,OAAO,EAAE,SAAS;4BAClB,UAAU,EAAE,QAAQ;yBACrB,EACD,EAAE,EAAE,YAAY,aAEhB,KAAC,IAAI,IAAC,OAAO,EAAC,IAAI,YAAE,CAAC,CAAC,sBAAsB,CAAC,GAAQ,EACrD,KAAC,MAAM,IACL,OAAO,EAAC,QAAQ,EAChB,OAAO,EAAE,GAAG,EAAE;oCACZ,cAAc,CAAC,KAAK,CAAC,CAAC;gCACxB,CAAC,EACD,IAAI,sBACQ,CAAC,CAAC,oBAAoB,CAAC,YAEnC,KAAC,IAAI,IAAC,IAAI,EAAC,OAAO,GAAG,GACd,IACJ,EACP,KAAC,aAAa,cACX,WAAW,KAAK,CAAC,IAAI,OAAO,KAAK,IAAI,CAAC,CAAC,CAAC,CACvC,KAAC,UAAU,IAAC,OAAO,EAAE,CAAC,CAAC,sBAAsB,CAAC,EAAE,IAAI,EAAE,EAAE,IAAI,EAAE,CAAC,EAAE,GAAI,CACtE,CAAC,CAAC,CAAC,CACF,OAAO,CACR,GACa,IACI,IAClB,CACP,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,eAAe,cAAc,CAAC","sourcesContent":["import { FunctionComponent, forwardRef, PropsWithoutRef, useState, useRef } from 'react';\n\nimport {\n  Flex,\n  ForwardProps,\n  Button,\n  useOuterEvent,\n  useEscape,\n  Icon,\n  Text,\n  EmptyState,\n  useI18n,\n  registerIcon\n} from '@pega/cosmos-react-core';\nimport * as aiAssistIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/ai-assist.icon';\n\nimport { ConversationAIProps } from './TaskManager.types';\nimport {\n  StyledCountBadge,\n  StyledEntityPopover,\n  StyledContent,\n  StyledHeader\n} from './TaskManager.styles';\n\nregisterIcon(aiAssistIcon);\n\nconst ConversationAI: FunctionComponent<ConversationAIProps & ForwardProps> = forwardRef(\n  function ConversationAI(\n    { content, entityCount }: PropsWithoutRef<ConversationAIProps>,\n    ref: ConversationAIProps['ref']\n  ) {\n    const t = useI18n();\n    const [showPopover, setShowPopover] = useState(false);\n    const buttonRef = useRef(null);\n    const popoverRef = useRef(null);\n    useOuterEvent('mousedown', [popoverRef, buttonRef], () => {\n      if (showPopover) setShowPopover(false);\n    });\n\n    useEscape(() => {\n      setShowPopover(false);\n    });\n\n    return (\n      <div ref={ref}>\n        <Button\n          variant='simple'\n          icon\n          onClick={() => {\n            setShowPopover(cur => !cur);\n          }}\n          ref={buttonRef}\n          aria-label={t('show_detected_entities')}\n        >\n          <Icon name='ai-assist' />\n          <StyledCountBadge variant='default'>{entityCount}</StyledCountBadge>\n        </Button>\n\n        <StyledEntityPopover\n          show={showPopover}\n          target={buttonRef.current}\n          placement='bottom-start'\n          ref={popoverRef}\n          arrow\n        >\n          <Flex\n            container={{\n              justify: 'between',\n              alignItems: 'center'\n            }}\n            as={StyledHeader}\n          >\n            <Text variant='h3'>{t('ai_detected_entities')}</Text>\n            <Button\n              variant='simple'\n              onClick={() => {\n                setShowPopover(false);\n              }}\n              icon\n              aria-label={t('close_conversation')}\n            >\n              <Icon name='times' />\n            </Button>\n          </Flex>\n          <StyledContent>\n            {entityCount === 0 || content === null ? (\n              <EmptyState message={t('nothing_detected_yet')} item={{ grow: 1 }} />\n            ) : (\n              content\n            )}\n          </StyledContent>\n        </StyledEntityPopover>\n      </div>\n    );\n  }\n);\n\nexport default ConversationAI;\n"]}

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

@@ -1 +1 @@
-{"version":3,"file":"Dialogue.d.ts","sourceRoot":"","sources":["../../../src/components/TaskManager/Dialogue.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,iBAAiB,EAMlB,MAAM,OAAO,CAAC;AAEf,OAAO,EAAQ,YAAY,EAAkB,MAAM,yBAAyB,CAAC;AAE7E,OAAO,EAAE,aAAa,EAAE,MAAM,qBAAqB,CAAC;AAQpD,QAAA,MAAM,QAAQ,EAAE,iBAAiB,CAAC,aAAa,GAAG,YAAY,CAqE7D,CAAC;AAEF,eAAe,QAAQ,CAAC"}
+{"version":3,"file":"Dialogue.d.ts","sourceRoot":"","sources":["../../../src/components/TaskManager/Dialogue.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,iBAAiB,EAMlB,MAAM,OAAO,CAAC;AAEf,OAAO,EAAQ,YAAY,EAAkB,MAAM,yBAAyB,CAAC;AAE7E,OAAO,EAAE,aAAa,EAAE,MAAM,qBAAqB,CAAC;AAQpD,QAAA,MAAM,QAAQ,EAAE,iBAAiB,CAAC,aAAa,GAAG,YAAY,CAmE5D,CAAC;AAEH,eAAe,QAAQ,CAAC"}

package/lib/components/TaskManager/Dialogue.js

@@ -2,7 +2,7 @@ import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-run
 import { forwardRef, useMemo, useImperativeHandle, useRef } from 'react';
 import { Flex, useTheme, Icon } from '@pega/cosmos-react-core';
 import { StyledTaskManagerBanner, StyledAgentScriptIcon, StyledIconWrap, StyledSymbol } from './TaskManager.styles';
-const Dialogue = forwardRef(({ icon, verbatimStatus, content, handle, ...restProps }, ref) => {
+const Dialogue = forwardRef(function Dialogue({ icon, verbatimStatus, content, handle, ...restProps }, ref) {
     const nudgeSymbolRef = useRef(null);
     const { base: { animation: { timing } } } = useTheme();
     useImperativeHandle(handle, () => ({

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

@@ -1 +1 @@
-{"version":3,"file":"Dialogue.js","sourceRoot":"","sources":["../../../src/components/TaskManager/Dialogue.tsx"],"names":[],"mappings":";AAAA,OAAO,EAEL,UAAU,EAEV,OAAO,EACP,mBAAmB,EACnB,MAAM,EACP,MAAM,OAAO,CAAC;AAEf,OAAO,EAAE,IAAI,EAAgB,QAAQ,EAAE,IAAI,EAAE,MAAM,yBAAyB,CAAC;AAG7E,OAAO,EACL,uBAAuB,EACvB,qBAAqB,EACrB,cAAc,EACd,YAAY,EACb,MAAM,sBAAsB,CAAC;AAE9B,MAAM,QAAQ,GAAoD,UAAU,CAC1E,CACE,EAAE,IAAI,EAAE,cAAc,EAAE,OAAO,EAAE,MAAM,EAAE,GAAG,SAAS,EAAkC,EACvF,GAAyB,EACzB,EAAE;IACF,MAAM,cAAc,GAAG,MAAM,CAAiB,IAAI,CAAC,CAAC;IAEpD,MAAM,EACJ,IAAI,EAAE,EACJ,SAAS,EAAE,EAAE,MAAM,EAAE,EACtB,EACF,GAAG,QAAQ,EAAE,CAAC;IAEf,mBAAmB,CAAC,MAAM,EAAE,GAAG,EAAE,CAAC,CAAC;QACjC,KAAK,EAAE,GAAG,EAAE;YACV,IAAI,CAAC,cAAc,IAAI,CAAC,cAAc,CAAC,OAAO,IAAI,cAAc,KAAK,SAAS,EAAE;gBAC9E,OAAO;aACR;YAED,OAAO,cAAc,CAAC,OAAO,CAAC,OAAO,EAAE,CACrC,CAAC,EAAE,SAAS,EAAE,qBAAqB,EAAE,EAAE,EAAE,SAAS,EAAE,oBAAoB,EAAE,CAAC,EAC3E;gBACE,QAAQ,EAAE,EAAE;gBACZ,UAAU,EAAE,EAAE;gBACd,YAAY,EAAE,CAAC;gBACf,SAAS,EAAE,WAAW;gBACtB,MAAM,EAAE,MAAM,CAAC,IAAI;aACpB,CACF,CAAC;QACJ,CAAC;KACF,CAAC,CAAC,CAAC;IAEJ,MAAM,cAAc,GAAG,OAAO,CAAC,GAAG,EAAE;QAClC,OAAO,CACL,MAAC,IAAI,IACH,EAAE,EAAE,cAAc,EAClB,SAAS,EAAE,EAAE,UAAU,EAAE,QAAQ,EAAE,OAAO,EAAE,QAAQ,EAAE,EACtD,cAAc,EAAE,cAAc,aAE9B,KAAC,qBAAqB,IAAC,IAAI,EAAE,IAAI,GAAI,EACpC,cAAc,IAAI,CACjB,KAAC,IAAI,IACH,EAAE,EAAE,YAAY,EAChB,SAAS,EAAE,EAAE,UAAU,EAAE,QAAQ,EAAE,OAAO,EAAE,QAAQ,EAAE,GAAG,EAAE,IAAI,EAAE,EACjE,GAAG,EAAE,cAAc,EACnB,cAAc,EAAE,cAAc,YAE7B,cAAc,KAAK,SAAS,CAAC,CAAC,CAAC,kCAAM,CAAC,CAAC,CAAC,KAAC,IAAI,IAAC,IAAI,EAAC,OAAO,GAAG,GACzD,CACR,IACI,CACR,CAAC;IACJ,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,EAAE,cAAc,CAAC,CAAC,CAAC;IAEpC,OAAO,CACL,MAAC,IAAI,OACC,SAAS,EACb,EAAE,EAAE,uBAAuB,EAC3B,SAAS,EAAE;YACT,UAAU,EAAE,QAAQ;SACrB,eACS,WAAW,EACrB,GAAG,EAAE,GAAG,aAER,wBAAM,cAAc,GAAO,EAC3B,wBAAM,OAAO,GAAO,IACf,CACR,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,eAAe,QAAQ,CAAC","sourcesContent":["import {\n  FunctionComponent,\n  forwardRef,\n  PropsWithoutRef,\n  useMemo,\n  useImperativeHandle,\n  useRef\n} from 'react';\n\nimport { Flex, ForwardProps, useTheme, Icon } from '@pega/cosmos-react-core';\n\nimport { DialogueProps } from './TaskManager.types';\nimport {\n  StyledTaskManagerBanner,\n  StyledAgentScriptIcon,\n  StyledIconWrap,\n  StyledSymbol\n} from './TaskManager.styles';\n\nconst Dialogue: FunctionComponent<DialogueProps & ForwardProps> = forwardRef(\n  (\n    { icon, verbatimStatus, content, handle, ...restProps }: PropsWithoutRef<DialogueProps>,\n    ref: DialogueProps['ref']\n  ) => {\n    const nudgeSymbolRef = useRef<HTMLDivElement>(null);\n\n    const {\n      base: {\n        animation: { timing }\n      }\n    } = useTheme();\n\n    useImperativeHandle(handle, () => ({\n      nudge: () => {\n        if (!nudgeSymbolRef || !nudgeSymbolRef.current || verbatimStatus !== 'pending') {\n          return;\n        }\n\n        return nudgeSymbolRef.current.animate?.(\n          [{ transform: 'translateX(-0.3rem)' }, { transform: 'translateX(0.3rem)' }],\n          {\n            duration: 50,\n            iterations: 10,\n            playbackRate: 1,\n            direction: 'alternate',\n            easing: timing.ease\n          }\n        );\n      }\n    }));\n\n    const iconWithStatus = useMemo(() => {\n      return (\n        <Flex\n          as={StyledIconWrap}\n          container={{ alignItems: 'center', justify: 'center' }}\n          verbatimStatus={verbatimStatus}\n        >\n          <StyledAgentScriptIcon name={icon} />\n          {verbatimStatus && (\n            <Flex\n              as={StyledSymbol}\n              container={{ alignItems: 'center', justify: 'center', pad: 0.25 }}\n              ref={nudgeSymbolRef}\n              verbatimStatus={verbatimStatus}\n            >\n              {verbatimStatus === 'pending' ? <>!</> : <Icon name='check' />}\n            </Flex>\n          )}\n        </Flex>\n      );\n    }, [icon, content, verbatimStatus]);\n\n    return (\n      <Flex\n        {...restProps}\n        as={StyledTaskManagerBanner}\n        container={{\n          alignItems: 'center'\n        }}\n        aria-live='assertive'\n        ref={ref}\n      >\n        <div>{iconWithStatus}</div>\n        <div>{content}</div>\n      </Flex>\n    );\n  }\n);\n\nexport default Dialogue;\n"]}
+{"version":3,"file":"Dialogue.js","sourceRoot":"","sources":["../../../src/components/TaskManager/Dialogue.tsx"],"names":[],"mappings":";AAAA,OAAO,EAEL,UAAU,EAEV,OAAO,EACP,mBAAmB,EACnB,MAAM,EACP,MAAM,OAAO,CAAC;AAEf,OAAO,EAAE,IAAI,EAAgB,QAAQ,EAAE,IAAI,EAAE,MAAM,yBAAyB,CAAC;AAG7E,OAAO,EACL,uBAAuB,EACvB,qBAAqB,EACrB,cAAc,EACd,YAAY,EACb,MAAM,sBAAsB,CAAC;AAE9B,MAAM,QAAQ,GAAoD,UAAU,CAAC,SAAS,QAAQ,CAC5F,EAAE,IAAI,EAAE,cAAc,EAAE,OAAO,EAAE,MAAM,EAAE,GAAG,SAAS,EAAkC,EACvF,GAAyB;IAEzB,MAAM,cAAc,GAAG,MAAM,CAAiB,IAAI,CAAC,CAAC;IAEpD,MAAM,EACJ,IAAI,EAAE,EACJ,SAAS,EAAE,EAAE,MAAM,EAAE,EACtB,EACF,GAAG,QAAQ,EAAE,CAAC;IAEf,mBAAmB,CAAC,MAAM,EAAE,GAAG,EAAE,CAAC,CAAC;QACjC,KAAK,EAAE,GAAG,EAAE;YACV,IAAI,CAAC,cAAc,IAAI,CAAC,cAAc,CAAC,OAAO,IAAI,cAAc,KAAK,SAAS,EAAE;gBAC9E,OAAO;aACR;YAED,OAAO,cAAc,CAAC,OAAO,CAAC,OAAO,EAAE,CACrC,CAAC,EAAE,SAAS,EAAE,qBAAqB,EAAE,EAAE,EAAE,SAAS,EAAE,oBAAoB,EAAE,CAAC,EAC3E;gBACE,QAAQ,EAAE,EAAE;gBACZ,UAAU,EAAE,EAAE;gBACd,YAAY,EAAE,CAAC;gBACf,SAAS,EAAE,WAAW;gBACtB,MAAM,EAAE,MAAM,CAAC,IAAI;aACpB,CACF,CAAC;QACJ,CAAC;KACF,CAAC,CAAC,CAAC;IAEJ,MAAM,cAAc,GAAG,OAAO,CAAC,GAAG,EAAE;QAClC,OAAO,CACL,MAAC,IAAI,IACH,EAAE,EAAE,cAAc,EAClB,SAAS,EAAE,EAAE,UAAU,EAAE,QAAQ,EAAE,OAAO,EAAE,QAAQ,EAAE,EACtD,cAAc,EAAE,cAAc,aAE9B,KAAC,qBAAqB,IAAC,IAAI,EAAE,IAAI,GAAI,EACpC,cAAc,IAAI,CACjB,KAAC,IAAI,IACH,EAAE,EAAE,YAAY,EAChB,SAAS,EAAE,EAAE,UAAU,EAAE,QAAQ,EAAE,OAAO,EAAE,QAAQ,EAAE,GAAG,EAAE,IAAI,EAAE,EACjE,GAAG,EAAE,cAAc,EACnB,cAAc,EAAE,cAAc,YAE7B,cAAc,KAAK,SAAS,CAAC,CAAC,CAAC,kCAAM,CAAC,CAAC,CAAC,KAAC,IAAI,IAAC,IAAI,EAAC,OAAO,GAAG,GACzD,CACR,IACI,CACR,CAAC;IACJ,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,EAAE,cAAc,CAAC,CAAC,CAAC;IAEpC,OAAO,CACL,MAAC,IAAI,OACC,SAAS,EACb,EAAE,EAAE,uBAAuB,EAC3B,SAAS,EAAE;YACT,UAAU,EAAE,QAAQ;SACrB,eACS,WAAW,EACrB,GAAG,EAAE,GAAG,aAER,wBAAM,cAAc,GAAO,EAC3B,wBAAM,OAAO,GAAO,IACf,CACR,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,eAAe,QAAQ,CAAC","sourcesContent":["import {\n  FunctionComponent,\n  forwardRef,\n  PropsWithoutRef,\n  useMemo,\n  useImperativeHandle,\n  useRef\n} from 'react';\n\nimport { Flex, ForwardProps, useTheme, Icon } from '@pega/cosmos-react-core';\n\nimport { DialogueProps } from './TaskManager.types';\nimport {\n  StyledTaskManagerBanner,\n  StyledAgentScriptIcon,\n  StyledIconWrap,\n  StyledSymbol\n} from './TaskManager.styles';\n\nconst Dialogue: FunctionComponent<DialogueProps & ForwardProps> = forwardRef(function Dialogue(\n  { icon, verbatimStatus, content, handle, ...restProps }: PropsWithoutRef<DialogueProps>,\n  ref: DialogueProps['ref']\n) {\n  const nudgeSymbolRef = useRef<HTMLDivElement>(null);\n\n  const {\n    base: {\n      animation: { timing }\n    }\n  } = useTheme();\n\n  useImperativeHandle(handle, () => ({\n    nudge: () => {\n      if (!nudgeSymbolRef || !nudgeSymbolRef.current || verbatimStatus !== 'pending') {\n        return;\n      }\n\n      return nudgeSymbolRef.current.animate?.(\n        [{ transform: 'translateX(-0.3rem)' }, { transform: 'translateX(0.3rem)' }],\n        {\n          duration: 50,\n          iterations: 10,\n          playbackRate: 1,\n          direction: 'alternate',\n          easing: timing.ease\n        }\n      );\n    }\n  }));\n\n  const iconWithStatus = useMemo(() => {\n    return (\n      <Flex\n        as={StyledIconWrap}\n        container={{ alignItems: 'center', justify: 'center' }}\n        verbatimStatus={verbatimStatus}\n      >\n        <StyledAgentScriptIcon name={icon} />\n        {verbatimStatus && (\n          <Flex\n            as={StyledSymbol}\n            container={{ alignItems: 'center', justify: 'center', pad: 0.25 }}\n            ref={nudgeSymbolRef}\n            verbatimStatus={verbatimStatus}\n          >\n            {verbatimStatus === 'pending' ? <>!</> : <Icon name='check' />}\n          </Flex>\n        )}\n      </Flex>\n    );\n  }, [icon, content, verbatimStatus]);\n\n  return (\n    <Flex\n      {...restProps}\n      as={StyledTaskManagerBanner}\n      container={{\n        alignItems: 'center'\n      }}\n      aria-live='assertive'\n      ref={ref}\n    >\n      <div>{iconWithStatus}</div>\n      <div>{content}</div>\n    </Flex>\n  );\n});\n\nexport default Dialogue;\n"]}

package/lib/components/TaskManager/TaskManager.js

@@ -19,7 +19,7 @@ registerAction({
     id: 'WrapUp',
     defaultKeyBinding: 'Alt+W'
 });
-const TaskManager = forwardRef((props, ref) => {
+const TaskManager = forwardRef(function TaskManager(props, ref) {
     const { tasks = [], onTaskLaunch, onTaskDismiss, addTask, wrapUp, main, banner, handle, conversationAI, ...restProps } = props;
     const t = useI18n();
     const taskManagerTabsRef = useRef(null);

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, 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+A'\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_cases')}\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_case')}</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\n                  .filter(task => !task.hideFromTab)\n                  .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+A'\n  },\n  {\n    id: 'WrapUp',\n    defaultKeyBinding: 'Alt+W'\n  }\n);\n\nconst TaskManager: FunctionComponent<TaskManagerProps & ForwardProps> = forwardRef(\n  function TaskManager(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_cases')}\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_case')}</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\n                  .filter(task => !task.hideFromTab)\n                  .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/TaskManagerTabs.js

@@ -5,7 +5,7 @@ import { cap, Flex } from '@pega/cosmos-react-core';
 import { useDirection, useI18n } from '@pega/cosmos-react-core/lib/hooks';
 import { StyledTaskManagerTabs, StyleTaskName, StyledTasksTabList, StyledTaskManagerTab, StyledOverflowTabMenu } from './TaskManager.styles';
 import TaskManagerContext from './TaskManager.context';
-const TaskManagerTabs = forwardRef(({ wrapUpTabId, wrapUpTabPanelId, ...restProps }, ref) => {
+const TaskManagerTabs = forwardRef(function TaskManagerTabs({ wrapUpTabId, wrapUpTabPanelId, ...restProps }, ref) {
     const { wrapUp, tasks = [], onTaskLaunch } = useContext(TaskManagerContext);
     const [tabs, setTabs] = useState(tasks);
     const [isOverflowing, setIsOverflowing] = useState(false);

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

@@ -1 +1 @@
-{"version":3,"file":"TaskManagerTabs.js","sourceRoot":"","sources":["../../../src/components/TaskManager/TaskManagerTabs.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  FunctionComponent,\n  forwardRef,\n  useContext,\n  createRef,\n  RefObject,\n  KeyboardEvent,\n  useMemo,\n  PropsWithoutRef,\n  useRef,\n  useEffect,\n  useState,\n  useLayoutEffect\n} from 'react';\n\nimport { cap, Flex, ForwardProps, MenuItemProps, MenuProps } from '@pega/cosmos-react-core';\nimport { useDirection, useI18n } from '@pega/cosmos-react-core/lib/hooks';\n\nimport {\n  StyledTaskManagerTabs,\n  StyleTaskName,\n  StyledTasksTabList,\n  StyledTaskManagerTab,\n  StyledOverflowTabMenu\n} from './TaskManager.styles';\nimport TaskManagerContext from './TaskManager.context';\nimport { TaskManagerTabsProps, TaskProps } from './TaskManager.types';\n\nconst TaskManagerTabs: FunctionComponent<TaskManagerTabsProps & ForwardProps> = forwardRef(\n  (\n    { wrapUpTabId, wrapUpTabPanelId, ...restProps }: PropsWithoutRef<TaskManagerTabsProps>,\n    ref: TaskManagerTabsProps['ref']\n  ) => {\n    const { wrapUp, tasks = [], onTaskLaunch } = useContext(TaskManagerContext);\n\n    const [tabs, setTabs] = useState<TaskProps[]>(tasks);\n    const [isOverflowing, setIsOverflowing] = useState(false);\n\n    // Used to keep a reference for every tab in order to focus them with key presses\n    const tabRefs: RefObject<HTMLLIElement>[] = tasks.map(() => createRef<HTMLLIElement>());\n    const wrapUpRef = useRef<HTMLLIElement>(null);\n    const tabListRef = useRef<HTMLUListElement>(null);\n\n    const { rtl, end: endDirection, start: startDirection } = useDirection();\n    const t = useI18n();\n\n    const tasksMenu = useMemo(() => {\n      const openTasks = tasks.filter(task => !task.isResolved);\n      const openTasksMenuItems: MenuItemProps[] = openTasks.map(\n        ({ name, secondary, id, active }) => {\n          return {\n            primary: name,\n            secondary,\n            id,\n            selected: !!active,\n            onClick: idx => {\n              onTaskLaunch?.(idx);\n            }\n          };\n        }\n      );\n      if (wrapUp?.showTab) {\n        openTasksMenuItems.push({\n          primary: t('task_manager_wrap_up'),\n          secondary: [],\n          id: '',\n          selected: !!wrapUp.active,\n          onClick: () => {\n            wrapUp?.onClick();\n          }\n        });\n      }\n\n      const resolvedTasks = tasks.filter(task => task.isResolved);\n      const resolvedTasksMenuItems: MenuItemProps[] = resolvedTasks.map(\n        ({ id, name, secondary, active }) => {\n          return {\n            primary: name,\n            secondary,\n            id,\n            selected: !!active,\n            onClick: () => {\n              onTaskLaunch?.(id);\n            }\n          };\n        }\n      );\n      const taskCategories: MenuProps['items'] = [];\n      if (openTasksMenuItems.length > 0) {\n        taskCategories.push({ id: 'open_tasks', label: t('open_cases'), items: [] });\n        taskCategories\n          .find(category => category.id === 'open_tasks')\n          ?.items?.push(...openTasksMenuItems);\n      }\n      if (resolvedTasksMenuItems.length > 0) {\n        taskCategories.push({ id: 'resolved_tasks', label: t('resolved_cases'), items: [] });\n        taskCategories\n          .find(category => category.id === 'resolved_tasks')\n          ?.items?.push(...resolvedTasksMenuItems);\n      }\n      return taskCategories;\n    }, [tasks]);\n\n    const checkAndUpdateIsOverflowing = () => {\n      if (tabListRef.current) {\n        const value = tabListRef.current.scrollWidth > tabListRef.current.clientWidth;\n        if (value !== isOverflowing) {\n          setIsOverflowing(value);\n          return value;\n        }\n      }\n      return isOverflowing;\n    };\n\n    useEffect(() => {\n      setTabs(tasks.filter(task => !task.hideFromTab));\n    }, [tasks]);\n\n    useEffect(() => {\n      const resizeObserver = new ResizeObserver(() => {\n        checkAndUpdateIsOverflowing();\n      });\n      if (tabListRef?.current) resizeObserver.observe(tabListRef?.current as Element);\n      return () => {\n        resizeObserver.disconnect();\n      };\n    }, [checkAndUpdateIsOverflowing]);\n\n    useLayoutEffect(() => {\n      if (!checkAndUpdateIsOverflowing()) return;\n      const activeTabRef = [...tabRefs, wrapUpRef].find(\n        tab => tab?.current?.getAttribute('aria-selected') === 'true'\n      );\n\n      if (activeTabRef && activeTabRef.current && tabListRef.current) {\n        const activeTabRect = activeTabRef.current.getBoundingClientRect();\n        const tabListWidth = tabListRef.current.clientWidth;\n\n        // Check if it is not in view\n        if (activeTabRect.left <= 0 || activeTabRect.right >= tabListWidth) {\n          tabListRef.current.scrollLeft = rtl\n            ? -(tabListWidth - (activeTabRef.current.offsetLeft + activeTabRect.width))\n            : activeTabRef.current.offsetLeft;\n        }\n      }\n    }, [tasks, wrapUp]);\n\n    const changeTabFocus = (event: KeyboardEvent, index?: number): void => {\n      let activeIndex = index;\n      if (tabs.length) {\n        const { key } = event;\n\n        if (key === `Arrow${cap(endDirection)}`) {\n          event.preventDefault();\n          let nextIndex;\n          if (wrapUpRef?.current === event.currentTarget) {\n            nextIndex = 0;\n          } else {\n            if (index === tabs.length - 1 && wrapUp?.showTab) {\n              wrapUpRef?.current?.focus();\n              return;\n            }\n            nextIndex = index! + 1 < tabs.length ? index! + 1 : 0;\n          }\n          activeIndex = nextIndex;\n          const nextTab = tabRefs[nextIndex]?.current;\n          nextTab?.focus();\n        } else if (key === `Arrow${cap(startDirection)}`) {\n          event.preventDefault();\n          let prevIndex;\n          if (wrapUpRef?.current === event.currentTarget) {\n            prevIndex = tabs.length - 1;\n          } else {\n            if (index === 0 && wrapUp?.showTab) {\n              wrapUpRef?.current?.focus();\n              return;\n            }\n            prevIndex = index === 0 ? tabs.length - 1 : index! - 1;\n          }\n          const prevTab = tabRefs[prevIndex]?.current;\n          activeIndex = prevIndex;\n          prevTab?.focus();\n        } else if (key === 'Enter' || key === ' ') {\n          event.preventDefault();\n          if (wrapUpRef?.current === event.currentTarget) {\n            wrapUp?.onClick();\n            return;\n          }\n          onTaskLaunch?.(tabs[activeIndex!].id);\n        }\n      }\n    };\n\n    return (\n      <Flex container={{ gap: 1 }} as={StyledTaskManagerTabs} ref={ref}>\n        {(tasks.length > 0 || wrapUp?.showTab) && (\n          <>\n            <StyledTasksTabList role='tablist' ref={tabListRef} {...restProps}>\n              {tabs.map(({ id, active = false, icon, meta, name, ...tabRestProps }, i) => {\n                return (\n                  <StyledTaskManagerTab\n                    {...tabRestProps}\n                    ref={tabRefs[i]}\n                    key={id}\n                    onClick={() => onTaskLaunch?.(id)}\n                    aria-selected={active}\n                    aria-controls={`tab-panel-${id}`}\n                    id={`tab-${id}`}\n                    role='tab'\n                    tabIndex={active ? 0 : -1}\n                    onKeyUp={(e: KeyboardEvent) => {\n                      changeTabFocus(e, i);\n                    }}\n                    onKeyDown={(e: KeyboardEvent) => {\n                      const { key } = e;\n                      if (\n                        key === 'ArrowRight' ||\n                        key === 'ArrowDown' ||\n                        key === 'ArrowLeft' ||\n                        key === 'ArrowUp' ||\n                        key === 'Enter' ||\n                        key === ' '\n                      ) {\n                        e.preventDefault();\n                      }\n                    }}\n                    active={active}\n                  >\n                    <Flex container={{ justify: 'start', gap: 1, alignItems: 'center' }}>\n                      <StyleTaskName>{name}</StyleTaskName>\n                    </Flex>\n                  </StyledTaskManagerTab>\n                );\n              })}\n              {wrapUp?.showTab && (\n                <StyledTaskManagerTab\n                  onClick={wrapUp.onClick}\n                  variant='wrap-up'\n                  aria-selected={wrapUp.active}\n                  aria-controls={wrapUpTabPanelId}\n                  id={wrapUpTabId}\n                  role='tab'\n                  active={wrapUp.active}\n                  tabIndex={wrapUp.active ? 0 : -1}\n                  onKeyUp={(e: KeyboardEvent) => {\n                    changeTabFocus(e);\n                  }}\n                  onKeyDown={(e: KeyboardEvent) => {\n                    const { key } = e;\n                    if (\n                      key === 'ArrowRight' ||\n                      key === 'ArrowDown' ||\n                      key === 'ArrowLeft' ||\n                      key === 'ArrowUp'\n                    ) {\n                      e.preventDefault();\n                    }\n                  }}\n                  ref={wrapUpRef}\n                >\n                  <span>{t('task_manager_wrap_up')}</span>\n                </StyledTaskManagerTab>\n              )}\n            </StyledTasksTabList>\n            <StyledOverflowTabMenu\n              menu={{\n                items: tasksMenu,\n                mode: 'single-select'\n              }}\n              icon='caret-down'\n              iconOnly\n              variant='simple'\n              text={t('case_manager_overflow_menu')}\n            />\n          </>\n        )}\n      </Flex>\n    );\n  }\n);\n\nexport default TaskManagerTabs;\n"]}
+{"version":3,"file":"TaskManagerTabs.js","sourceRoot":"","sources":["../../../src/components/TaskManager/TaskManagerTabs.tsx"],"names":[],"mappings":";;AAAA,OAAO,EAEL,UAAU,EACV,UAAU,EACV,SAAS,EAGT,OAAO,EAEP,MAAM,EACN,SAAS,EACT,QAAQ,EACR,eAAe,EAChB,MAAM,OAAO,CAAC;AAEf,OAAO,EAAE,GAAG,EAAE,IAAI,EAA0C,MAAM,yBAAyB,CAAC;AAC5F,OAAO,EAAE,YAAY,EAAE,OAAO,EAAE,MAAM,mCAAmC,CAAC;AAE1E,OAAO,EACL,qBAAqB,EACrB,aAAa,EACb,kBAAkB,EAClB,oBAAoB,EACpB,qBAAqB,EACtB,MAAM,sBAAsB,CAAC;AAC9B,OAAO,kBAAkB,MAAM,uBAAuB,CAAC;AAGvD,MAAM,eAAe,GAA2D,UAAU,CACxF,SAAS,eAAe,CACtB,EAAE,WAAW,EAAE,gBAAgB,EAAE,GAAG,SAAS,EAAyC,EACtF,GAAgC;IAEhC,MAAM,EAAE,MAAM,EAAE,KAAK,GAAG,EAAE,EAAE,YAAY,EAAE,GAAG,UAAU,CAAC,kBAAkB,CAAC,CAAC;IAE5E,MAAM,CAAC,IAAI,EAAE,OAAO,CAAC,GAAG,QAAQ,CAAc,KAAK,CAAC,CAAC;IACrD,MAAM,CAAC,aAAa,EAAE,gBAAgB,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAE1D,iFAAiF;IACjF,MAAM,OAAO,GAA+B,KAAK,CAAC,GAAG,CAAC,GAAG,EAAE,CAAC,SAAS,EAAiB,CAAC,CAAC;IACxF,MAAM,SAAS,GAAG,MAAM,CAAgB,IAAI,CAAC,CAAC;IAC9C,MAAM,UAAU,GAAG,MAAM,CAAmB,IAAI,CAAC,CAAC;IAElD,MAAM,EAAE,GAAG,EAAE,GAAG,EAAE,YAAY,EAAE,KAAK,EAAE,cAAc,EAAE,GAAG,YAAY,EAAE,CAAC;IACzE,MAAM,CAAC,GAAG,OAAO,EAAE,CAAC;IAEpB,MAAM,SAAS,GAAG,OAAO,CAAC,GAAG,EAAE;QAC7B,MAAM,SAAS,GAAG,KAAK,CAAC,MAAM,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC;QACzD,MAAM,kBAAkB,GAAoB,SAAS,CAAC,GAAG,CACvD,CAAC,EAAE,IAAI,EAAE,SAAS,EAAE,EAAE,EAAE,MAAM,EAAE,EAAE,EAAE;YAClC,OAAO;gBACL,OAAO,EAAE,IAAI;gBACb,SAAS;gBACT,EAAE;gBACF,QAAQ,EAAE,CAAC,CAAC,MAAM;gBAClB,OAAO,EAAE,GAAG,CAAC,EAAE;oBACb,YAAY,EAAE,CAAC,GAAG,CAAC,CAAC;gBACtB,CAAC;aACF,CAAC;QACJ,CAAC,CACF,CAAC;QACF,IAAI,MAAM,EAAE,OAAO,EAAE;YACnB,kBAAkB,CAAC,IAAI,CAAC;gBACtB,OAAO,EAAE,CAAC,CAAC,sBAAsB,CAAC;gBAClC,SAAS,EAAE,EAAE;gBACb,EAAE,EAAE,EAAE;gBACN,QAAQ,EAAE,CAAC,CAAC,MAAM,CAAC,MAAM;gBACzB,OAAO,EAAE,GAAG,EAAE;oBACZ,MAAM,EAAE,OAAO,EAAE,CAAC;gBACpB,CAAC;aACF,CAAC,CAAC;SACJ;QAED,MAAM,aAAa,GAAG,KAAK,CAAC,MAAM,CAAC,IAAI,CAAC,EAAE,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC;QAC5D,MAAM,sBAAsB,GAAoB,aAAa,CAAC,GAAG,CAC/D,CAAC,EAAE,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE,MAAM,EAAE,EAAE,EAAE;YAClC,OAAO;gBACL,OAAO,EAAE,IAAI;gBACb,SAAS;gBACT,EAAE;gBACF,QAAQ,EAAE,CAAC,CAAC,MAAM;gBAClB,OAAO,EAAE,GAAG,EAAE;oBACZ,YAAY,EAAE,CAAC,EAAE,CAAC,CAAC;gBACrB,CAAC;aACF,CAAC;QACJ,CAAC,CACF,CAAC;QACF,MAAM,cAAc,GAAuB,EAAE,CAAC;QAC9C,IAAI,kBAAkB,CAAC,MAAM,GAAG,CAAC,EAAE;YACjC,cAAc,CAAC,IAAI,CAAC,EAAE,EAAE,EAAE,YAAY,EAAE,KAAK,EAAE,CAAC,CAAC,YAAY,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE,CAAC,CAAC;YAC7E,cAAc;iBACX,IAAI,CAAC,QAAQ,CAAC,EAAE,CAAC,QAAQ,CAAC,EAAE,KAAK,YAAY,CAAC;gBAC/C,EAAE,KAAK,EAAE,IAAI,CAAC,GAAG,kBAAkB,CAAC,CAAC;SACxC;QACD,IAAI,sBAAsB,CAAC,MAAM,GAAG,CAAC,EAAE;YACrC,cAAc,CAAC,IAAI,CAAC,EAAE,EAAE,EAAE,gBAAgB,EAAE,KAAK,EAAE,CAAC,CAAC,gBAAgB,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE,CAAC,CAAC;YACrF,cAAc;iBACX,IAAI,CAAC,QAAQ,CAAC,EAAE,CAAC,QAAQ,CAAC,EAAE,KAAK,gBAAgB,CAAC;gBACnD,EAAE,KAAK,EAAE,IAAI,CAAC,GAAG,sBAAsB,CAAC,CAAC;SAC5C;QACD,OAAO,cAAc,CAAC;IACxB,CAAC,EAAE,CAAC,KAAK,CAAC,CAAC,CAAC;IAEZ,MAAM,2BAA2B,GAAG,GAAG,EAAE;QACvC,IAAI,UAAU,CAAC,OAAO,EAAE;YACtB,MAAM,KAAK,GAAG,UAAU,CAAC,OAAO,CAAC,WAAW,GAAG,UAAU,CAAC,OAAO,CAAC,WAAW,CAAC;YAC9E,IAAI,KAAK,KAAK,aAAa,EAAE;gBAC3B,gBAAgB,CAAC,KAAK,CAAC,CAAC;gBACxB,OAAO,KAAK,CAAC;aACd;SACF;QACD,OAAO,aAAa,CAAC;IACvB,CAAC,CAAC;IAEF,SAAS,CAAC,GAAG,EAAE;QACb,OAAO,CAAC,KAAK,CAAC,MAAM,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC,CAAC;IACnD,CAAC,EAAE,CAAC,KAAK,CAAC,CAAC,CAAC;IAEZ,SAAS,CAAC,GAAG,EAAE;QACb,MAAM,cAAc,GAAG,IAAI,cAAc,CAAC,GAAG,EAAE;YAC7C,2BAA2B,EAAE,CAAC;QAChC,CAAC,CAAC,CAAC;QACH,IAAI,UAAU,EAAE,OAAO;YAAE,cAAc,CAAC,OAAO,CAAC,UAAU,EAAE,OAAkB,CAAC,CAAC;QAChF,OAAO,GAAG,EAAE;YACV,cAAc,CAAC,UAAU,EAAE,CAAC;QAC9B,CAAC,CAAC;IACJ,CAAC,EAAE,CAAC,2BAA2B,CAAC,CAAC,CAAC;IAElC,eAAe,CAAC,GAAG,EAAE;QACnB,IAAI,CAAC,2BAA2B,EAAE;YAAE,OAAO;QAC3C,MAAM,YAAY,GAAG,CAAC,GAAG,OAAO,EAAE,SAAS,CAAC,CAAC,IAAI,CAC/C,GAAG,CAAC,EAAE,CAAC,GAAG,EAAE,OAAO,EAAE,YAAY,CAAC,eAAe,CAAC,KAAK,MAAM,CAC9D,CAAC;QAEF,IAAI,YAAY,IAAI,YAAY,CAAC,OAAO,IAAI,UAAU,CAAC,OAAO,EAAE;YAC9D,MAAM,aAAa,GAAG,YAAY,CAAC,OAAO,CAAC,qBAAqB,EAAE,CAAC;YACnE,MAAM,YAAY,GAAG,UAAU,CAAC,OAAO,CAAC,WAAW,CAAC;YAEpD,6BAA6B;YAC7B,IAAI,aAAa,CAAC,IAAI,IAAI,CAAC,IAAI,aAAa,CAAC,KAAK,IAAI,YAAY,EAAE;gBAClE,UAAU,CAAC,OAAO,CAAC,UAAU,GAAG,GAAG;oBACjC,CAAC,CAAC,CAAC,CAAC,YAAY,GAAG,CAAC,YAAY,CAAC,OAAO,CAAC,UAAU,GAAG,aAAa,CAAC,KAAK,CAAC,CAAC;oBAC3E,CAAC,CAAC,YAAY,CAAC,OAAO,CAAC,UAAU,CAAC;aACrC;SACF;IACH,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,CAAC,CAAC,CAAC;IAEpB,MAAM,cAAc,GAAG,CAAC,KAAoB,EAAE,KAAc,EAAQ,EAAE;QACpE,IAAI,WAAW,GAAG,KAAK,CAAC;QACxB,IAAI,IAAI,CAAC,MAAM,EAAE;YACf,MAAM,EAAE,GAAG,EAAE,GAAG,KAAK,CAAC;YAEtB,IAAI,GAAG,KAAK,QAAQ,GAAG,CAAC,YAAY,CAAC,EAAE,EAAE;gBACvC,KAAK,CAAC,cAAc,EAAE,CAAC;gBACvB,IAAI,SAAS,CAAC;gBACd,IAAI,SAAS,EAAE,OAAO,KAAK,KAAK,CAAC,aAAa,EAAE;oBAC9C,SAAS,GAAG,CAAC,CAAC;iBACf;qBAAM;oBACL,IAAI,KAAK,KAAK,IAAI,CAAC,MAAM,GAAG,CAAC,IAAI,MAAM,EAAE,OAAO,EAAE;wBAChD,SAAS,EAAE,OAAO,EAAE,KAAK,EAAE,CAAC;wBAC5B,OAAO;qBACR;oBACD,SAAS,GAAG,KAAM,GAAG,CAAC,GAAG,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,KAAM,GAAG,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;iBACvD;gBACD,WAAW,GAAG,SAAS,CAAC;gBACxB,MAAM,OAAO,GAAG,OAAO,CAAC,SAAS,CAAC,EAAE,OAAO,CAAC;gBAC5C,OAAO,EAAE,KAAK,EAAE,CAAC;aAClB;iBAAM,IAAI,GAAG,KAAK,QAAQ,GAAG,CAAC,cAAc,CAAC,EAAE,EAAE;gBAChD,KAAK,CAAC,cAAc,EAAE,CAAC;gBACvB,IAAI,SAAS,CAAC;gBACd,IAAI,SAAS,EAAE,OAAO,KAAK,KAAK,CAAC,aAAa,EAAE;oBAC9C,SAAS,GAAG,IAAI,CAAC,MAAM,GAAG,CAAC,CAAC;iBAC7B;qBAAM;oBACL,IAAI,KAAK,KAAK,CAAC,IAAI,MAAM,EAAE,OAAO,EAAE;wBAClC,SAAS,EAAE,OAAO,EAAE,KAAK,EAAE,CAAC;wBAC5B,OAAO;qBACR;oBACD,SAAS,GAAG,KAAK,KAAK,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC,CAAC,KAAM,GAAG,CAAC,CAAC;iBACxD;gBACD,MAAM,OAAO,GAAG,OAAO,CAAC,SAAS,CAAC,EAAE,OAAO,CAAC;gBAC5C,WAAW,GAAG,SAAS,CAAC;gBACxB,OAAO,EAAE,KAAK,EAAE,CAAC;aAClB;iBAAM,IAAI,GAAG,KAAK,OAAO,IAAI,GAAG,KAAK,GAAG,EAAE;gBACzC,KAAK,CAAC,cAAc,EAAE,CAAC;gBACvB,IAAI,SAAS,EAAE,OAAO,KAAK,KAAK,CAAC,aAAa,EAAE;oBAC9C,MAAM,EAAE,OAAO,EAAE,CAAC;oBAClB,OAAO;iBACR;gBACD,YAAY,EAAE,CAAC,IAAI,CAAC,WAAY,CAAC,CAAC,EAAE,CAAC,CAAC;aACvC;SACF;IACH,CAAC,CAAC;IAEF,OAAO,CACL,KAAC,IAAI,IAAC,SAAS,EAAE,EAAE,GAAG,EAAE,CAAC,EAAE,EAAE,EAAE,EAAE,qBAAqB,EAAE,GAAG,EAAE,GAAG,YAC7D,CAAC,KAAK,CAAC,MAAM,GAAG,CAAC,IAAI,MAAM,EAAE,OAAO,CAAC,IAAI,CACxC,8BACE,MAAC,kBAAkB,IAAC,IAAI,EAAC,SAAS,EAAC,GAAG,EAAE,UAAU,KAAM,SAAS,aAC9D,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,EAAE,EAAE,MAAM,GAAG,KAAK,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,GAAG,YAAY,EAAE,EAAE,CAAC,EAAE,EAAE;4BACzE,OAAO,CACL,eAAC,oBAAoB,OACf,YAAY,EAChB,GAAG,EAAE,OAAO,CAAC,CAAC,CAAC,EACf,GAAG,EAAE,EAAE,EACP,OAAO,EAAE,GAAG,EAAE,CAAC,YAAY,EAAE,CAAC,EAAE,CAAC,mBAClB,MAAM,mBACN,aAAa,EAAE,EAAE,EAChC,EAAE,EAAE,OAAO,EAAE,EAAE,EACf,IAAI,EAAC,KAAK,EACV,QAAQ,EAAE,MAAM,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,EACzB,OAAO,EAAE,CAAC,CAAgB,EAAE,EAAE;oCAC5B,cAAc,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC;gCACvB,CAAC,EACD,SAAS,EAAE,CAAC,CAAgB,EAAE,EAAE;oCAC9B,MAAM,EAAE,GAAG,EAAE,GAAG,CAAC,CAAC;oCAClB,IACE,GAAG,KAAK,YAAY;wCACpB,GAAG,KAAK,WAAW;wCACnB,GAAG,KAAK,WAAW;wCACnB,GAAG,KAAK,SAAS;wCACjB,GAAG,KAAK,OAAO;wCACf,GAAG,KAAK,GAAG,EACX;wCACA,CAAC,CAAC,cAAc,EAAE,CAAC;qCACpB;gCACH,CAAC,EACD,MAAM,EAAE,MAAM;gCAEd,KAAC,IAAI,IAAC,SAAS,EAAE,EAAE,OAAO,EAAE,OAAO,EAAE,GAAG,EAAE,CAAC,EAAE,UAAU,EAAE,QAAQ,EAAE,YACjE,KAAC,aAAa,cAAE,IAAI,GAAiB,GAChC,CACc,CACxB,CAAC;wBACJ,CAAC,CAAC,EACD,MAAM,EAAE,OAAO,IAAI,CAClB,KAAC,oBAAoB,IACnB,OAAO,EAAE,MAAM,CAAC,OAAO,EACvB,OAAO,EAAC,SAAS,mBACF,MAAM,CAAC,MAAM,mBACb,gBAAgB,EAC/B,EAAE,EAAE,WAAW,EACf,IAAI,EAAC,KAAK,EACV,MAAM,EAAE,MAAM,CAAC,MAAM,EACrB,QAAQ,EAAE,MAAM,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,EAChC,OAAO,EAAE,CAAC,CAAgB,EAAE,EAAE;gCAC5B,cAAc,CAAC,CAAC,CAAC,CAAC;4BACpB,CAAC,EACD,SAAS,EAAE,CAAC,CAAgB,EAAE,EAAE;gCAC9B,MAAM,EAAE,GAAG,EAAE,GAAG,CAAC,CAAC;gCAClB,IACE,GAAG,KAAK,YAAY;oCACpB,GAAG,KAAK,WAAW;oCACnB,GAAG,KAAK,WAAW;oCACnB,GAAG,KAAK,SAAS,EACjB;oCACA,CAAC,CAAC,cAAc,EAAE,CAAC;iCACpB;4BACH,CAAC,EACD,GAAG,EAAE,SAAS,YAEd,yBAAO,CAAC,CAAC,sBAAsB,CAAC,GAAQ,GACnB,CACxB,IACkB,EACrB,KAAC,qBAAqB,IACpB,IAAI,EAAE;wBACJ,KAAK,EAAE,SAAS;wBAChB,IAAI,EAAE,eAAe;qBACtB,EACD,IAAI,EAAC,YAAY,EACjB,QAAQ,QACR,OAAO,EAAC,QAAQ,EAChB,IAAI,EAAE,CAAC,CAAC,4BAA4B,CAAC,GACrC,IACD,CACJ,GACI,CACR,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,eAAe,eAAe,CAAC","sourcesContent":["import {\n  FunctionComponent,\n  forwardRef,\n  useContext,\n  createRef,\n  RefObject,\n  KeyboardEvent,\n  useMemo,\n  PropsWithoutRef,\n  useRef,\n  useEffect,\n  useState,\n  useLayoutEffect\n} from 'react';\n\nimport { cap, Flex, ForwardProps, MenuItemProps, MenuProps } from '@pega/cosmos-react-core';\nimport { useDirection, useI18n } from '@pega/cosmos-react-core/lib/hooks';\n\nimport {\n  StyledTaskManagerTabs,\n  StyleTaskName,\n  StyledTasksTabList,\n  StyledTaskManagerTab,\n  StyledOverflowTabMenu\n} from './TaskManager.styles';\nimport TaskManagerContext from './TaskManager.context';\nimport { TaskManagerTabsProps, TaskProps } from './TaskManager.types';\n\nconst TaskManagerTabs: FunctionComponent<TaskManagerTabsProps & ForwardProps> = forwardRef(\n  function TaskManagerTabs(\n    { wrapUpTabId, wrapUpTabPanelId, ...restProps }: PropsWithoutRef<TaskManagerTabsProps>,\n    ref: TaskManagerTabsProps['ref']\n  ) {\n    const { wrapUp, tasks = [], onTaskLaunch } = useContext(TaskManagerContext);\n\n    const [tabs, setTabs] = useState<TaskProps[]>(tasks);\n    const [isOverflowing, setIsOverflowing] = useState(false);\n\n    // Used to keep a reference for every tab in order to focus them with key presses\n    const tabRefs: RefObject<HTMLLIElement>[] = tasks.map(() => createRef<HTMLLIElement>());\n    const wrapUpRef = useRef<HTMLLIElement>(null);\n    const tabListRef = useRef<HTMLUListElement>(null);\n\n    const { rtl, end: endDirection, start: startDirection } = useDirection();\n    const t = useI18n();\n\n    const tasksMenu = useMemo(() => {\n      const openTasks = tasks.filter(task => !task.isResolved);\n      const openTasksMenuItems: MenuItemProps[] = openTasks.map(\n        ({ name, secondary, id, active }) => {\n          return {\n            primary: name,\n            secondary,\n            id,\n            selected: !!active,\n            onClick: idx => {\n              onTaskLaunch?.(idx);\n            }\n          };\n        }\n      );\n      if (wrapUp?.showTab) {\n        openTasksMenuItems.push({\n          primary: t('task_manager_wrap_up'),\n          secondary: [],\n          id: '',\n          selected: !!wrapUp.active,\n          onClick: () => {\n            wrapUp?.onClick();\n          }\n        });\n      }\n\n      const resolvedTasks = tasks.filter(task => task.isResolved);\n      const resolvedTasksMenuItems: MenuItemProps[] = resolvedTasks.map(\n        ({ id, name, secondary, active }) => {\n          return {\n            primary: name,\n            secondary,\n            id,\n            selected: !!active,\n            onClick: () => {\n              onTaskLaunch?.(id);\n            }\n          };\n        }\n      );\n      const taskCategories: MenuProps['items'] = [];\n      if (openTasksMenuItems.length > 0) {\n        taskCategories.push({ id: 'open_tasks', label: t('open_cases'), items: [] });\n        taskCategories\n          .find(category => category.id === 'open_tasks')\n          ?.items?.push(...openTasksMenuItems);\n      }\n      if (resolvedTasksMenuItems.length > 0) {\n        taskCategories.push({ id: 'resolved_tasks', label: t('resolved_cases'), items: [] });\n        taskCategories\n          .find(category => category.id === 'resolved_tasks')\n          ?.items?.push(...resolvedTasksMenuItems);\n      }\n      return taskCategories;\n    }, [tasks]);\n\n    const checkAndUpdateIsOverflowing = () => {\n      if (tabListRef.current) {\n        const value = tabListRef.current.scrollWidth > tabListRef.current.clientWidth;\n        if (value !== isOverflowing) {\n          setIsOverflowing(value);\n          return value;\n        }\n      }\n      return isOverflowing;\n    };\n\n    useEffect(() => {\n      setTabs(tasks.filter(task => !task.hideFromTab));\n    }, [tasks]);\n\n    useEffect(() => {\n      const resizeObserver = new ResizeObserver(() => {\n        checkAndUpdateIsOverflowing();\n      });\n      if (tabListRef?.current) resizeObserver.observe(tabListRef?.current as Element);\n      return () => {\n        resizeObserver.disconnect();\n      };\n    }, [checkAndUpdateIsOverflowing]);\n\n    useLayoutEffect(() => {\n      if (!checkAndUpdateIsOverflowing()) return;\n      const activeTabRef = [...tabRefs, wrapUpRef].find(\n        tab => tab?.current?.getAttribute('aria-selected') === 'true'\n      );\n\n      if (activeTabRef && activeTabRef.current && tabListRef.current) {\n        const activeTabRect = activeTabRef.current.getBoundingClientRect();\n        const tabListWidth = tabListRef.current.clientWidth;\n\n        // Check if it is not in view\n        if (activeTabRect.left <= 0 || activeTabRect.right >= tabListWidth) {\n          tabListRef.current.scrollLeft = rtl\n            ? -(tabListWidth - (activeTabRef.current.offsetLeft + activeTabRect.width))\n            : activeTabRef.current.offsetLeft;\n        }\n      }\n    }, [tasks, wrapUp]);\n\n    const changeTabFocus = (event: KeyboardEvent, index?: number): void => {\n      let activeIndex = index;\n      if (tabs.length) {\n        const { key } = event;\n\n        if (key === `Arrow${cap(endDirection)}`) {\n          event.preventDefault();\n          let nextIndex;\n          if (wrapUpRef?.current === event.currentTarget) {\n            nextIndex = 0;\n          } else {\n            if (index === tabs.length - 1 && wrapUp?.showTab) {\n              wrapUpRef?.current?.focus();\n              return;\n            }\n            nextIndex = index! + 1 < tabs.length ? index! + 1 : 0;\n          }\n          activeIndex = nextIndex;\n          const nextTab = tabRefs[nextIndex]?.current;\n          nextTab?.focus();\n        } else if (key === `Arrow${cap(startDirection)}`) {\n          event.preventDefault();\n          let prevIndex;\n          if (wrapUpRef?.current === event.currentTarget) {\n            prevIndex = tabs.length - 1;\n          } else {\n            if (index === 0 && wrapUp?.showTab) {\n              wrapUpRef?.current?.focus();\n              return;\n            }\n            prevIndex = index === 0 ? tabs.length - 1 : index! - 1;\n          }\n          const prevTab = tabRefs[prevIndex]?.current;\n          activeIndex = prevIndex;\n          prevTab?.focus();\n        } else if (key === 'Enter' || key === ' ') {\n          event.preventDefault();\n          if (wrapUpRef?.current === event.currentTarget) {\n            wrapUp?.onClick();\n            return;\n          }\n          onTaskLaunch?.(tabs[activeIndex!].id);\n        }\n      }\n    };\n\n    return (\n      <Flex container={{ gap: 1 }} as={StyledTaskManagerTabs} ref={ref}>\n        {(tasks.length > 0 || wrapUp?.showTab) && (\n          <>\n            <StyledTasksTabList role='tablist' ref={tabListRef} {...restProps}>\n              {tabs.map(({ id, active = false, icon, meta, name, ...tabRestProps }, i) => {\n                return (\n                  <StyledTaskManagerTab\n                    {...tabRestProps}\n                    ref={tabRefs[i]}\n                    key={id}\n                    onClick={() => onTaskLaunch?.(id)}\n                    aria-selected={active}\n                    aria-controls={`tab-panel-${id}`}\n                    id={`tab-${id}`}\n                    role='tab'\n                    tabIndex={active ? 0 : -1}\n                    onKeyUp={(e: KeyboardEvent) => {\n                      changeTabFocus(e, i);\n                    }}\n                    onKeyDown={(e: KeyboardEvent) => {\n                      const { key } = e;\n                      if (\n                        key === 'ArrowRight' ||\n                        key === 'ArrowDown' ||\n                        key === 'ArrowLeft' ||\n                        key === 'ArrowUp' ||\n                        key === 'Enter' ||\n                        key === ' '\n                      ) {\n                        e.preventDefault();\n                      }\n                    }}\n                    active={active}\n                  >\n                    <Flex container={{ justify: 'start', gap: 1, alignItems: 'center' }}>\n                      <StyleTaskName>{name}</StyleTaskName>\n                    </Flex>\n                  </StyledTaskManagerTab>\n                );\n              })}\n              {wrapUp?.showTab && (\n                <StyledTaskManagerTab\n                  onClick={wrapUp.onClick}\n                  variant='wrap-up'\n                  aria-selected={wrapUp.active}\n                  aria-controls={wrapUpTabPanelId}\n                  id={wrapUpTabId}\n                  role='tab'\n                  active={wrapUp.active}\n                  tabIndex={wrapUp.active ? 0 : -1}\n                  onKeyUp={(e: KeyboardEvent) => {\n                    changeTabFocus(e);\n                  }}\n                  onKeyDown={(e: KeyboardEvent) => {\n                    const { key } = e;\n                    if (\n                      key === 'ArrowRight' ||\n                      key === 'ArrowDown' ||\n                      key === 'ArrowLeft' ||\n                      key === 'ArrowUp'\n                    ) {\n                      e.preventDefault();\n                    }\n                  }}\n                  ref={wrapUpRef}\n                >\n                  <span>{t('task_manager_wrap_up')}</span>\n                </StyledTaskManagerTab>\n              )}\n            </StyledTasksTabList>\n            <StyledOverflowTabMenu\n              menu={{\n                items: tasksMenu,\n                mode: 'single-select'\n              }}\n              icon='caret-down'\n              iconOnly\n              variant='simple'\n              text={t('case_manager_overflow_menu')}\n            />\n          </>\n        )}\n      </Flex>\n    );\n  }\n);\n\nexport default TaskManagerTabs;\n"]}

package/lib/components/TaskManager/TaskPicker.js

@@ -34,7 +34,7 @@ export const StyledMultiTaskDialog = styled(FormDialog)(({ theme: { base: { spac
     `;
 });
 StyledMultiTaskDialog.defaultProps = defaultThemeProp;
-const TaskPicker = forwardRef(({ items, onAdd, onCancel, target, ...restProps }, ref) => {
+const TaskPicker = forwardRef(function TaskPicker({ items, onAdd, onCancel, target, ...restProps }, ref) {
     const t = useI18n();
     const headingId = useUID();
     const [selections, setSelections] = useState([]);

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

@@ -1 +1 @@
-{"version":3,"file":"TaskPicker.js","sourceRoot":"","sources":["../../../src/components/TaskManager/TaskPicker.tsx"],"names":[],"mappings":"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","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_cases').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_cases')}\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_case')}\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_case')])}\n          >\n            <Icon name='times' />\n          </Button>\n        </Flex>\n        {pickerContent}\n      </Flex>\n    );\n  }\n);\n\nexport default TaskPicker;\n"]}
+{"version":3,"file":"TaskPicker.js","sourceRoot":"","sources":["../../../src/components/TaskManager/TaskPicker.tsx"],"names":[],"mappings":"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","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  function TaskPicker(\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_cases').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_cases')}\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_case')}\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_case')])}\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/TaskView.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TaskView.d.ts","sourceRoot":"","sources":["../../../src/components/TaskManager/TaskView.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAA+B,MAAM,OAAO,CAAC;AAEvE,OAAO,EAAiC,YAAY,EAAE,MAAM,yBAAyB,CAAC;AAEtF,OAAO,EAAE,aAAa,EAAE,MAAM,qBAAqB,CAAC;AAGpD,QAAA,MAAM,QAAQ,EAAE,iBAAiB,CAAC,aAAa,GAAG,YAAY,CAa7D,CAAC;AAEF,eAAe,QAAQ,CAAC"}
+{"version":3,"file":"TaskView.d.ts","sourceRoot":"","sources":["../../../src/components/TaskManager/TaskView.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAA+B,MAAM,OAAO,CAAC;AAEvE,OAAO,EAAiC,YAAY,EAAE,MAAM,yBAAyB,CAAC;AAEtF,OAAO,EAAE,aAAa,EAAE,MAAM,qBAAqB,CAAC;AAGpD,QAAA,MAAM,QAAQ,EAAE,iBAAiB,CAAC,aAAa,GAAG,YAAY,CAc5D,CAAC;AAEH,eAAe,QAAQ,CAAC"}

package/lib/components/TaskManager/TaskView.js

@@ -2,7 +2,7 @@ import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
 import { forwardRef } from 'react';
 import { Card, CardContent, CardHeader } from '@pega/cosmos-react-core';
 import { StyledStickyCardHeader } from './TaskManager.styles';
-const TaskView = forwardRef((props, ref) => {
+const TaskView = forwardRef(function TaskView(props, ref) {
     const { header, actions, children, ...restProps } = props;
     return (_jsxs(Card, { ...restProps, ref: ref, children: [_jsxs(CardHeader, { as: StyledStickyCardHeader, children: [header, actions] }), _jsx(CardContent, { children: children })] }));
 });

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

@@ -1 +1 @@
-{"version":3,"file":"TaskView.js","sourceRoot":"","sources":["../../../src/components/TaskManager/TaskView.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAqB,UAAU,EAAmB,MAAM,OAAO,CAAC;AAEvE,OAAO,EAAE,IAAI,EAAE,WAAW,EAAE,UAAU,EAAgB,MAAM,yBAAyB,CAAC;AAGtF,OAAO,EAAE,sBAAsB,EAAE,MAAM,sBAAsB,CAAC;AAE9D,MAAM,QAAQ,GAAoD,UAAU,CAC1E,CAAC,KAAqC,EAAE,GAAyB,EAAE,EAAE;IACnE,MAAM,EAAE,MAAM,EAAE,OAAO,EAAE,QAAQ,EAAE,GAAG,SAAS,EAAE,GAAG,KAAK,CAAC;IAC1D,OAAO,CACL,MAAC,IAAI,OAAK,SAAS,EAAE,GAAG,EAAE,GAAG,aAC3B,MAAC,UAAU,IAAC,EAAE,EAAE,sBAAsB,aACnC,MAAM,EACN,OAAO,IACG,EACb,KAAC,WAAW,cAAE,QAAQ,GAAe,IAChC,CACR,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,eAAe,QAAQ,CAAC","sourcesContent":["import { FunctionComponent, forwardRef, PropsWithoutRef } from 'react';\n\nimport { Card, CardContent, CardHeader, ForwardProps } from '@pega/cosmos-react-core';\n\nimport { TaskViewProps } from './TaskManager.types';\nimport { StyledStickyCardHeader } from './TaskManager.styles';\n\nconst TaskView: FunctionComponent<TaskViewProps & ForwardProps> = forwardRef(\n  (props: PropsWithoutRef<TaskViewProps>, ref: TaskViewProps['ref']) => {\n    const { header, actions, children, ...restProps } = props;\n    return (\n      <Card {...restProps} ref={ref}>\n        <CardHeader as={StyledStickyCardHeader}>\n          {header}\n          {actions}\n        </CardHeader>\n        <CardContent>{children}</CardContent>\n      </Card>\n    );\n  }\n);\n\nexport default TaskView;\n"]}
+{"version":3,"file":"TaskView.js","sourceRoot":"","sources":["../../../src/components/TaskManager/TaskView.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAqB,UAAU,EAAmB,MAAM,OAAO,CAAC;AAEvE,OAAO,EAAE,IAAI,EAAE,WAAW,EAAE,UAAU,EAAgB,MAAM,yBAAyB,CAAC;AAGtF,OAAO,EAAE,sBAAsB,EAAE,MAAM,sBAAsB,CAAC;AAE9D,MAAM,QAAQ,GAAoD,UAAU,CAAC,SAAS,QAAQ,CAC5F,KAAqC,EACrC,GAAyB;IAEzB,MAAM,EAAE,MAAM,EAAE,OAAO,EAAE,QAAQ,EAAE,GAAG,SAAS,EAAE,GAAG,KAAK,CAAC;IAC1D,OAAO,CACL,MAAC,IAAI,OAAK,SAAS,EAAE,GAAG,EAAE,GAAG,aAC3B,MAAC,UAAU,IAAC,EAAE,EAAE,sBAAsB,aACnC,MAAM,EACN,OAAO,IACG,EACb,KAAC,WAAW,cAAE,QAAQ,GAAe,IAChC,CACR,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,eAAe,QAAQ,CAAC","sourcesContent":["import { FunctionComponent, forwardRef, PropsWithoutRef } from 'react';\n\nimport { Card, CardContent, CardHeader, ForwardProps } from '@pega/cosmos-react-core';\n\nimport { TaskViewProps } from './TaskManager.types';\nimport { StyledStickyCardHeader } from './TaskManager.styles';\n\nconst TaskView: FunctionComponent<TaskViewProps & ForwardProps> = forwardRef(function TaskView(\n  props: PropsWithoutRef<TaskViewProps>,\n  ref: TaskViewProps['ref']\n) {\n  const { header, actions, children, ...restProps } = props;\n  return (\n    <Card {...restProps} ref={ref}>\n      <CardHeader as={StyledStickyCardHeader}>\n        {header}\n        {actions}\n      </CardHeader>\n      <CardContent>{children}</CardContent>\n    </Card>\n  );\n});\n\nexport default TaskView;\n"]}

package/lib/index.d.ts

@@ -1,7 +1,3 @@
-export { default as Article } from './components/Article';
-export * from './components/Article';
-export { default as ArticleList } from './components/ArticleList';
-export * from './components/ArticleList';
 export { default as CallControlPanel } from './components/CallControlPanel';
 export * from './components/CallControlPanel';
 export { default as CTIPanel } from './components/CTIPanel';

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,MAAM,EAAE,MAAM,qBAAqB,CAAC;AACxD,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,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

@@ -1,8 +1,4 @@
 // This file is autogenerated. Any changes will be overwritten.
-export { default as Article } from './components/Article';
-export * from './components/Article';
-export { default as ArticleList } from './components/ArticleList';
-export * from './components/ArticleList';
 export { default as CallControlPanel } from './components/CallControlPanel';
 export * from './components/CallControlPanel';
 export { default as CTIPanel } from './components/CTIPanel';

package/lib/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,+DAA+D;AAC/D,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","sourcesContent":["// This file is autogenerated. Any changes will be overwritten.\nexport { default as Article } from './components/Article';\nexport * from './components/Article';\nexport { default as ArticleList } from './components/ArticleList';\nexport * from './components/ArticleList';\nexport { default as CallControlPanel } from './components/CallControlPanel';\nexport * from './components/CallControlPanel';\nexport { default as CTIPanel } from './components/CTIPanel';\nexport * from './components/CTIPanel';\nexport { default as DialPad } from './components/DialPad';\nexport * from './components/DialPad';\nexport { default as InteractionNotification } from './components/InteractionNotification';\nexport { default as InteractionTimer } from './components/InteractionTimer';\nexport * from './components/InteractionTimer';\nexport { default as Picker } from './components/Picker';\nexport { default as TaskManager } from './components/TaskManager';\nexport * from './components/TaskManager';\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,+DAA+D;AAC/D,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","sourcesContent":["// This file is autogenerated. Any changes will be overwritten.\nexport { default as CallControlPanel } from './components/CallControlPanel';\nexport * from './components/CallControlPanel';\nexport { default as CTIPanel } from './components/CTIPanel';\nexport * from './components/CTIPanel';\nexport { default as DialPad } from './components/DialPad';\nexport * from './components/DialPad';\nexport { default as InteractionNotification } from './components/InteractionNotification';\nexport { default as InteractionTimer } from './components/InteractionTimer';\nexport * from './components/InteractionTimer';\nexport { default as Picker } from './components/Picker';\nexport { default as TaskManager } from './components/TaskManager';\nexport * from './components/TaskManager';\n"]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pega/cosmos-react-cs",
-  "version": "4.0.0-dev.23.1",
+  "version": "4.0.0-dev.24.0",
   "repository": {
     "type": "git",
     "url": "https://github.com/pegasystems/cosmos-react.git",
@@ -20,8 +20,8 @@
     "build": "tsc -b"
   },
   "dependencies": {
-    "@pega/cosmos-react-core": "4.0.0-dev.23.1",
-    "@pega/cosmos-react-dnd": "4.0.0-dev.23.1",
+    "@pega/cosmos-react-core": "4.0.0-dev.24.0",
+    "@pega/cosmos-react-dnd": "4.0.0-dev.24.0",
     "@types/react": "^16.14.24 || ^17.0.38",
     "@types/react-dom": "^16.9.14 || ^17.0.11",
     "@types/styled-components": "^5.1.26",