@pega/cosmos-react-cs 3.0.0-dev.4.2 → 3.0.0-dev.7.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (51) hide show
  1. package/lib/components/Article/Article.js +2 -2
  2. package/lib/components/Article/Article.js.map +1 -1
  3. package/lib/components/Article/ArticleFooter.js +1 -1
  4. package/lib/components/Article/ArticleFooter.js.map +1 -1
  5. package/lib/components/Article/ArticleSkeleton.js +1 -1
  6. package/lib/components/Article/ArticleSkeleton.js.map +1 -1
  7. package/lib/components/ArticleList/ArticleList.js +1 -1
  8. package/lib/components/ArticleList/ArticleList.js.map +1 -1
  9. package/lib/components/ArticleList/ArticleListHeader.js +3 -3
  10. package/lib/components/ArticleList/ArticleListHeader.js.map +1 -1
  11. package/lib/components/ArticleList/ArticleSummary.js +1 -1
  12. package/lib/components/ArticleList/ArticleSummary.js.map +1 -1
  13. package/lib/components/ArticleList/SummarySkeleton.js +1 -1
  14. package/lib/components/ArticleList/SummarySkeleton.js.map +1 -1
  15. package/lib/components/CSCaseView/CSCaseView.js +1 -1
  16. package/lib/components/CSCaseView/CSCaseView.js.map +1 -1
  17. package/lib/components/CallControlPanel/Call.js +10 -10
  18. package/lib/components/CallControlPanel/Call.js.map +1 -1
  19. package/lib/components/CallControlPanel/CallControlPanel.js +4 -4
  20. package/lib/components/CallControlPanel/CallControlPanel.js.map +1 -1
  21. package/lib/components/CallControlPanel/CallControlPanelIcon.js +2 -2
  22. package/lib/components/CallControlPanel/CallControlPanelIcon.js.map +1 -1
  23. package/lib/components/CallControlPanel/CallTransfer.js +4 -4
  24. package/lib/components/CallControlPanel/CallTransfer.js.map +1 -1
  25. package/lib/components/CallControlPanel/CalleePicker.js +3 -3
  26. package/lib/components/CallControlPanel/CalleePicker.js.map +1 -1
  27. package/lib/components/CallControlPanel/ContactsList.js +3 -3
  28. package/lib/components/CallControlPanel/ContactsList.js.map +1 -1
  29. package/lib/components/CallControlPanel/DTMFKeypad.js +1 -1
  30. package/lib/components/CallControlPanel/DTMFKeypad.js.map +1 -1
  31. package/lib/components/CallControlPanel/StopWatch.js +1 -1
  32. package/lib/components/CallControlPanel/StopWatch.js.map +1 -1
  33. package/lib/components/DialPad/DialPad.js +1 -1
  34. package/lib/components/DialPad/DialPad.js.map +1 -1
  35. package/lib/components/DialPad/DialPadKeyboard.js +2 -2
  36. package/lib/components/DialPad/DialPadKeyboard.js.map +1 -1
  37. package/lib/components/IntelligentGuidance/IntelligentGuidance.js +3 -3
  38. package/lib/components/IntelligentGuidance/IntelligentGuidance.js.map +1 -1
  39. package/lib/components/InteractionNotification/InteractionNotification.js +1 -1
  40. package/lib/components/InteractionNotification/InteractionNotification.js.map +1 -1
  41. package/lib/components/InteractionTimer/InteractionTimer.js +1 -1
  42. package/lib/components/InteractionTimer/InteractionTimer.js.map +1 -1
  43. package/lib/components/TaskManager/Picker/Picker.js +6 -6
  44. package/lib/components/TaskManager/Picker/Picker.js.map +1 -1
  45. package/lib/components/TaskManager/TaskManager.js +8 -8
  46. package/lib/components/TaskManager/TaskManager.js.map +1 -1
  47. package/lib/components/TaskManager/TaskManagerTabs.js +3 -3
  48. package/lib/components/TaskManager/TaskManagerTabs.js.map +1 -1
  49. package/lib/components/TaskManager/TaskView.js +1 -1
  50. package/lib/components/TaskManager/TaskView.js.map +1 -1
  51. package/package.json +4 -4
package/lib/components/InteractionTimer/InteractionTimer.js CHANGED
@@ -66,7 +66,7 @@ const InteractionTimer = forwardRef(({ icon, progress = 0, hasNotifications = fa
66
66
  return (_jsxs(Flex, { ...restProps, ref: ref, container: {
67
67
  direction: 'column',
68
68
  alignItems: 'center'
69
- }, sla: sla, hasNotifications: hasNotifications, as: StyledInteractionTimer, "aria-label": ariaLabel, children: [_jsxs(StyledInteractionTimerIconWrapper, { children: [_jsx(Icon, { name: icon, as: StyledInteractionTimerIcon }, void 0), _jsx(Progress, { variant: 'ring', minValue: 0, maxValue: 100, value: progress, placement: 'inline' }, void 0)] }, void 0), meta && (_jsx(Text, { variant: 'secondary', as: StyledInteractionTimerMetaText, children: meta }, void 0))] }, void 0));
69
+ }, sla: sla, hasNotifications: hasNotifications, as: StyledInteractionTimer, "aria-label": ariaLabel, children: [_jsxs(StyledInteractionTimerIconWrapper, { children: [_jsx(Icon, { name: icon, as: StyledInteractionTimerIcon }), _jsx(Progress, { variant: 'ring', minValue: 0, maxValue: 100, value: progress, placement: 'inline' })] }), meta && (_jsx(Text, { variant: 'secondary', as: StyledInteractionTimerMetaText, children: meta }))] }));
70
70
  });
71
71
  export default InteractionTimer;
72
72
  //# sourceMappingURL=InteractionTimer.js.map
package/lib/components/InteractionTimer/InteractionTimer.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"InteractionTimer.js","sourceRoot":"","sources":["../../../src/components/InteractionTimer/InteractionTimer.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAA2C,MAAM,OAAO,CAAC;AAC5E,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAEhD,OAAO,EAGL,IAAI,EACJ,IAAI,EACJ,IAAI,EACJ,QAAQ,EAER,gBAAgB,EAChB,kBAAkB,EAGnB,MAAM,yBAAyB,CAAC;AAuBjC,MAAM,CAAC,MAAM,iCAAiC,GAAG,MAAM,CAAC,IAAI,CAAA,EAAE,CAAC;AAC/D,MAAM,CAAC,MAAM,0BAA0B,GAAG,MAAM,CAAC,GAAG,CAAA,EAAE,CAAC;AACvD,MAAM,CAAC,MAAM,8BAA8B,GAAG,MAAM,CAAC,IAAI,CAAA,EAAE,CAAC;AAI5D,MAAM,CAAC,MAAM,sBAAsB,GAAG,MAAM,CAAC,GAAG,CAC9C,CAAC,EACC,GAAG,EACH,gBAAgB,EAChB,KAAK,EAAE,EACL,UAAU,EAAE,EAAE,mBAAmB,EAAE,qBAAqB,EAAE,EAC3D,EACD,KAAK,EACN,EAAE,EAAE;IACH,OAAO,GAAG,CAAA;wBACU,KAAK,CAAC,IAAI,CAAC,OAAO;;;QAGlC,iCAAiC;;;;8BAIX,KAAK,CAAC,IAAI,CAAC,OAAO;UACtC,gBAAgB;QAClB,GAAG,CAAA;;;gCAGqB,qBAAqB,CAAC,wBAAwB,CAAC;;;;;;;;SAQtE;;;QAGD,kBAAkB;;;oBAGN,GAAG;QACX,CAAC,CAAC,qBAAqB,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC,QAAQ,CAAC,iBAAiB,CAAC;QAC5D,CAAC,CAAC,cAAc;;;oBAGR,GAAG;QACX,CAAC,CAAC,qBAAqB,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC,QAAQ,CAAC,eAAe,CAAC;QAC1D,CAAC,CAAC,cAAc;;;QAGpB,0BAA0B;;;;;;;;;;;;;QAa1B,8BAA8B;;;KAGjC,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,sBAAsB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAEvD,MAAM,gBAAgB,GAA4D,UAAU,CAC1F,CACE,EACE,IAAI,EACJ,QAAQ,GAAG,CAAC,EACZ,gBAAgB,GAAG,KAAK,EACxB,IAAI,EACJ,GAAG,EACH,SAAS,EACT,GAAG,SAAS,EAC2B,EACzC,GAAiC,EACjC,EAAE;IACF,OAAO,CACL,MAAC,IAAI,OACC,SAAS,EACb,GAAG,EAAE,GAAG,EACR,SAAS,EAAE;YACT,SAAS,EAAE,QAAQ;YACnB,UAAU,EAAE,QAAQ;SACrB,EACD,GAAG,EAAE,GAAG,EACR,gBAAgB,EAAE,gBAAgB,EAClC,EAAE,EAAE,sBAAsB,gBACd,SAAS,aAErB,MAAC,iCAAiC,eAChC,KAAC,IAAI,IAAC,IAAI,EAAE,IAAI,EAAE,EAAE,EAAE,0BAA0B,WAAI,EACpD,KAAC,QAAQ,IACP,OAAO,EAAC,MAAM,EACd,QAAQ,EAAE,CAAC,EACX,QAAQ,EAAE,GAAG,EACb,KAAK,EAAE,QAAQ,EACf,SAAS,EAAC,QAAQ,WAClB,YACgC,EACnC,IAAI,IAAI,CACP,KAAC,IAAI,IAAC,OAAO,EAAC,WAAW,EAAC,EAAE,EAAE,8BAA8B,YACzD,IAAI,WACA,CACR,YACI,CACR,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,eAAe,gBAAgB,CAAC","sourcesContent":["import { forwardRef, FunctionComponent, PropsWithoutRef, Ref } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport {\n BaseProps,\n AsProp,\n Flex,\n Icon,\n Text,\n Progress,\n ForwardProps,\n defaultThemeProp,\n StyledProgressRing,\n PropsWithDefaults,\n NoChildrenProp\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 return (\n <Flex\n {...restProps}\n ref={ref}\n container={{\n direction: 'column',\n alignItems: 'center'\n }}\n sla={sla}\n hasNotifications={hasNotifications}\n as={StyledInteractionTimer}\n aria-label={ariaLabel}\n >\n <StyledInteractionTimerIconWrapper>\n <Icon name={icon} as={StyledInteractionTimerIcon} />\n <Progress\n variant='ring'\n minValue={0}\n maxValue={100}\n value={progress}\n placement='inline'\n />\n </StyledInteractionTimerIconWrapper>\n {meta && (\n <Text variant='secondary' as={StyledInteractionTimerMetaText}>\n {meta}\n </Text>\n )}\n </Flex>\n );\n }\n);\n\nexport default InteractionTimer;\n"]}
1
+ {"version":3,"file":"InteractionTimer.js","sourceRoot":"","sources":["../../../src/components/InteractionTimer/InteractionTimer.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAA2C,MAAM,OAAO,CAAC;AAC5E,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAEhD,OAAO,EAGL,IAAI,EACJ,IAAI,EACJ,IAAI,EACJ,QAAQ,EAER,gBAAgB,EAChB,kBAAkB,EAGnB,MAAM,yBAAyB,CAAC;AAuBjC,MAAM,CAAC,MAAM,iCAAiC,GAAG,MAAM,CAAC,IAAI,CAAA,EAAE,CAAC;AAC/D,MAAM,CAAC,MAAM,0BAA0B,GAAG,MAAM,CAAC,GAAG,CAAA,EAAE,CAAC;AACvD,MAAM,CAAC,MAAM,8BAA8B,GAAG,MAAM,CAAC,IAAI,CAAA,EAAE,CAAC;AAI5D,MAAM,CAAC,MAAM,sBAAsB,GAAG,MAAM,CAAC,GAAG,CAC9C,CAAC,EACC,GAAG,EACH,gBAAgB,EAChB,KAAK,EAAE,EACL,UAAU,EAAE,EAAE,mBAAmB,EAAE,qBAAqB,EAAE,EAC3D,EACD,KAAK,EACN,EAAE,EAAE;IACH,OAAO,GAAG,CAAA;wBACU,KAAK,CAAC,IAAI,CAAC,OAAO;;;QAGlC,iCAAiC;;;;8BAIX,KAAK,CAAC,IAAI,CAAC,OAAO;UACtC,gBAAgB;QAClB,GAAG,CAAA;;;gCAGqB,qBAAqB,CAAC,wBAAwB,CAAC;;;;;;;;SAQtE;;;QAGD,kBAAkB;;;oBAGN,GAAG;QACX,CAAC,CAAC,qBAAqB,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC,QAAQ,CAAC,iBAAiB,CAAC;QAC5D,CAAC,CAAC,cAAc;;;oBAGR,GAAG;QACX,CAAC,CAAC,qBAAqB,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC,QAAQ,CAAC,eAAe,CAAC;QAC1D,CAAC,CAAC,cAAc;;;QAGpB,0BAA0B;;;;;;;;;;;;;QAa1B,8BAA8B;;;KAGjC,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,sBAAsB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAEvD,MAAM,gBAAgB,GAA4D,UAAU,CAC1F,CACE,EACE,IAAI,EACJ,QAAQ,GAAG,CAAC,EACZ,gBAAgB,GAAG,KAAK,EACxB,IAAI,EACJ,GAAG,EACH,SAAS,EACT,GAAG,SAAS,EAC2B,EACzC,GAAiC,EACjC,EAAE;IACF,OAAO,CACL,MAAC,IAAI,OACC,SAAS,EACb,GAAG,EAAE,GAAG,EACR,SAAS,EAAE;YACT,SAAS,EAAE,QAAQ;YACnB,UAAU,EAAE,QAAQ;SACrB,EACD,GAAG,EAAE,GAAG,EACR,gBAAgB,EAAE,gBAAgB,EAClC,EAAE,EAAE,sBAAsB,gBACd,SAAS,aAErB,MAAC,iCAAiC,eAChC,KAAC,IAAI,IAAC,IAAI,EAAE,IAAI,EAAE,EAAE,EAAE,0BAA0B,GAAI,EACpD,KAAC,QAAQ,IACP,OAAO,EAAC,MAAM,EACd,QAAQ,EAAE,CAAC,EACX,QAAQ,EAAE,GAAG,EACb,KAAK,EAAE,QAAQ,EACf,SAAS,EAAC,QAAQ,GAClB,IACgC,EACnC,IAAI,IAAI,CACP,KAAC,IAAI,IAAC,OAAO,EAAC,WAAW,EAAC,EAAE,EAAE,8BAA8B,YACzD,IAAI,GACA,CACR,IACI,CACR,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,eAAe,gBAAgB,CAAC","sourcesContent":["import { forwardRef, FunctionComponent, PropsWithoutRef, Ref } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport {\n BaseProps,\n AsProp,\n Flex,\n Icon,\n Text,\n Progress,\n ForwardProps,\n defaultThemeProp,\n StyledProgressRing,\n PropsWithDefaults,\n NoChildrenProp\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 return (\n <Flex\n {...restProps}\n ref={ref}\n container={{\n direction: 'column',\n alignItems: 'center'\n }}\n sla={sla}\n hasNotifications={hasNotifications}\n as={StyledInteractionTimer}\n aria-label={ariaLabel}\n >\n <StyledInteractionTimerIconWrapper>\n <Icon name={icon} as={StyledInteractionTimerIcon} />\n <Progress\n variant='ring'\n minValue={0}\n maxValue={100}\n value={progress}\n placement='inline'\n />\n </StyledInteractionTimerIconWrapper>\n {meta && (\n <Text variant='secondary' as={StyledInteractionTimerMetaText}>\n {meta}\n </Text>\n )}\n </Flex>\n );\n }\n);\n\nexport default InteractionTimer;\n"]}
package/lib/components/TaskManager/Picker/Picker.js CHANGED
@@ -80,14 +80,14 @@ const StyledCount = styled(Count)(({ theme }) => {
80
80
  StyledCount.defaultProps = defaultThemeProp;
81
81
  const SelectedItemRenderer = ({ dragRef, previewRef, data }) => {
82
82
  const t = useI18n();
83
- return (_jsx("li", { children: _jsx(StyledSummaryItem, { ref: previewRef, visual: _jsx(StyledDragHandle, { ref: dragRef, children: _jsx(Icon, { name: 'drag' }, void 0) }, void 0), primary: data?.primary, secondary: data?.secondary, actions: _jsx(Button, { variant: 'simple', icon: true, label: t('task_manager_delete_task'), onClick: () => data?.onRemoveSelection?.(data.id), children: _jsx(Icon, { name: 'trash' }, void 0) }, void 0) }, void 0) }, void 0));
83
+ return (_jsx("li", { children: _jsx(StyledSummaryItem, { ref: previewRef, visual: _jsx(StyledDragHandle, { ref: dragRef, children: _jsx(Icon, { name: 'drag' }) }), primary: data?.primary, secondary: data?.secondary, actions: _jsx(Button, { variant: 'simple', icon: true, label: t('task_manager_delete_task'), onClick: () => data?.onRemoveSelection?.(data.id), children: _jsx(Icon, { name: 'trash' }) }) }) }));
84
84
  };
85
85
  const DraggableSelectedList = ({ selectedItems, onChange, itemRenderer }) => {
86
86
  return (_jsx(DragDropManager, { children: _jsx(DragDropList, { as: StyledDDList, accept: 'string', items: selectedItems.map(item => ({
87
87
  id: item.id,
88
88
  type: 'string',
89
89
  data: item
90
- })), itemRenderer: itemRenderer, onChange: onChange }, void 0) }, void 0));
90
+ })), itemRenderer: itemRenderer, onChange: onChange }) }));
91
91
  };
92
92
  const Picker = forwardRef(({ id, items, emptyText, title, placeholder, onAdd, onCancel, ...restProps }, ref) => {
93
93
  const t = useI18n();
@@ -184,7 +184,7 @@ const Picker = forwardRef(({ id, items, emptyText, title, placeholder, onAdd, on
184
184
  selector: 'button',
185
185
  dir: 'up-down'
186
186
  }, [selections.length]);
187
- return (_jsxs(Flex, { as: StyledPicker, container: { direction: 'column' }, ref: pickerRef, id: id, children: [_jsxs(Flex, { as: StyledPickerHeader, container: { justify: 'between', alignItems: 'center', pad: 1 }, children: [_jsx(Text, { variant: 'h3', children: t('add_tasks') }, void 0), _jsx(Button, { variant: 'simple', onClick: onCancel, "aria-label": t('task_picker_close'), icon: true, children: _jsx(Icon, { name: 'times' }, void 0) }, void 0)] }, void 0), _jsxs(Flex, { container: true, children: [_jsx(Flex, { as: StyledAddTasks, children: _jsx(Menu, { items: renderItems, onItemClick: (uid) => {
187
+ return (_jsxs(Flex, { as: StyledPicker, container: { direction: 'column' }, ref: pickerRef, id: id, children: [_jsxs(Flex, { as: StyledPickerHeader, container: { justify: 'between', alignItems: 'center', pad: 1 }, children: [_jsx(Text, { variant: 'h3', children: t('add_tasks') }), _jsx(Button, { variant: 'simple', onClick: onCancel, "aria-label": t('task_picker_close'), icon: true, children: _jsx(Icon, { name: 'times' }) })] }), _jsxs(Flex, { container: true, children: [_jsx(Flex, { as: StyledAddTasks, children: _jsx(Menu, { items: renderItems, onItemClick: (uid) => {
188
188
  const clickedItem = menuHelpers.getItem(renderItems, uid);
189
189
  const parentItem = clickedItem?.ancestors
190
190
  ? clickedItem.ancestors[0]
@@ -218,17 +218,17 @@ const Picker = forwardRef(({ id, items, emptyText, title, placeholder, onAdd, on
218
218
  onAdd([clickedItem]);
219
219
  }
220
220
  }
221
- }, focusControlEl: searchEleRef.current || undefined, emptyText: emptyText || t('no_items'), accent: filterRegex, ...restProps, mode: selectMultipleToggle ? 'multi-select' : 'action', header: _jsxs(Flex, { container: { direction: 'column', gap: 1 }, children: [_jsx(SearchInput, { ref: searchEleRef, value: searchInput, onSearchChange: setSearchInput, placeholder: placeholder || t('search_placeholder_default'), autoFocus: true }, void 0), _jsx(Switch, { label: t('select_multiple'), on: selectMultipleToggle, onChange: toggleSelectedRegion }, void 0)] }, void 0), arrowNavigationUnsupported: true }, void 0) }, void 0), selectMultipleToggle && (_jsxs(Flex, { as: StyledSelectedTasks, container: { direction: 'column' }, ref: selectedTasksWrapperRef, children: [_jsx(Text, { variant: 'h3', children: t('selected_tasks') }, void 0), selections.length > 0 ? (_jsx(DraggableSelectedList, { selectedItems: selections, onChange: newItems => {
221
+ }, focusControlEl: searchEleRef.current || undefined, emptyText: emptyText || t('no_items'), accent: filterRegex, ...restProps, mode: selectMultipleToggle ? 'multi-select' : 'action', header: _jsxs(Flex, { container: { direction: 'column', gap: 1 }, children: [_jsx(SearchInput, { ref: searchEleRef, value: searchInput, onSearchChange: setSearchInput, placeholder: placeholder || t('search_placeholder_default'), autoFocus: true }), _jsx(Switch, { label: t('select_multiple'), on: selectMultipleToggle, onChange: toggleSelectedRegion })] }), arrowNavigationUnsupported: true }) }), selectMultipleToggle && (_jsxs(Flex, { as: StyledSelectedTasks, container: { direction: 'column' }, ref: selectedTasksWrapperRef, children: [_jsx(Text, { variant: 'h3', children: t('selected_tasks') }), selections.length > 0 ? (_jsx(DraggableSelectedList, { selectedItems: selections, onChange: newItems => {
222
222
  setSelections(newItems.map(({ type, data }) => ({
223
223
  ...data,
224
224
  type
225
225
  })));
226
- }, itemRenderer: SelectedItemRenderer }, void 0)) : (_jsx(EmptyState, { message: t('no_selected_tasks') }, void 0))] }, void 0))] }, void 0), selectMultipleToggle && (_jsxs(Flex, { as: StyledPickerFooter, container: { justify: 'between' }, children: [_jsx(Button, { onClick: onCancel, "aria-label": t('cancel'), children: "Cancel" }, void 0), _jsxs(Button, { variant: 'primary', disabled: !selections.length, onClick: () => {
226
+ }, itemRenderer: SelectedItemRenderer })) : (_jsx(EmptyState, { message: t('no_selected_tasks') }))] }))] }), selectMultipleToggle && (_jsxs(Flex, { as: StyledPickerFooter, container: { justify: 'between' }, children: [_jsx(Button, { onClick: onCancel, "aria-label": t('cancel'), children: "Cancel" }), _jsxs(Button, { variant: 'primary', disabled: !selections.length, onClick: () => {
227
227
  onAdd?.(selections);
228
228
  setItems(initialItems);
229
229
  }, "aria-label": t('task_manager_picker_add_label', [selections?.length], {
230
230
  count: selections?.length
231
- }), children: [t('add'), !!selections?.length && _jsx(StyledCount, { children: selections.length }, void 0)] }, void 0)] }, void 0))] }, void 0));
231
+ }), children: [t('add'), !!selections?.length && _jsx(StyledCount, { children: selections.length })] })] }))] }));
232
232
  });
233
233
  export default Picker;
234
234
  //# sourceMappingURL=Picker.js.map
package/lib/components/TaskManager/Picker/Picker.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"Picker.js","sourceRoot":"","sources":["../../../../src/components/TaskManager/Picker/Picker.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n forwardRef,\n FunctionComponent,\n PropsWithoutRef,\n useCallback,\n useEffect,\n useMemo,\n useRef,\n useState\n} from 'react';\nimport styled, { css } from 'styled-components';\n\nimport {\n Button,\n Count,\n defaultThemeProp,\n Flex,\n ForwardProps,\n Icon,\n Menu,\n menuHelpers,\n EmptyState,\n SearchInput,\n SummaryItem,\n Text,\n useI18n,\n Switch,\n useArrows,\n useConsolidatedRef,\n useElement,\n registerIcon,\n getFocusables,\n StyledMenuListWrapper\n} from '@pega/cosmos-react-core';\nimport { MenuItemProps } from '@pega/cosmos-react-core/lib/components/Menu/Menu.types';\nimport { DragDropList, DragDropManager, ItemRendererProps } from '@pega/cosmos-react-dnd';\nimport * as timesIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/times.icon';\nimport * as dragIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/drag.icon';\nimport * as trashIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/trash.icon';\n\nimport { DraggableSelectedListProps, PickerProps, SelectedItemProps } from './Picker.types';\n\nregisterIcon(timesIcon, dragIcon, trashIcon);\nexport const StyledPickerHeader = styled.div(({ theme }) => {\n return css`\n padding-inline-start: calc(2 * ${theme.base.spacing});\n padding-inline-end: calc(1.25 * ${theme.base.spacing});\n `;\n});\nStyledPickerHeader.defaultProps = defaultThemeProp;\n\nexport const StyledAddTasks = styled.div(({ theme }) => {\n return css`\n width: 17.5rem;\n padding: 0 ${theme.base.spacing} ${theme.base.spacing};\n header {\n padding-top: 0;\n border-bottom: none;\n }\n ${StyledMenuListWrapper} {\n max-height: 23rem;\n }\n `;\n});\nStyledAddTasks.defaultProps = defaultThemeProp;\n\nexport const StyledSelectedTasks = styled.div(({ theme }) => {\n return css`\n width: 17.5rem;\n padding: 0 ${theme.base.spacing} ${theme.base.spacing};\n border-inline-start: 0.0625rem solid ${theme.base.palette['border-line']};\n > h3 {\n padding: 0 0 ${theme.base.spacing} ${theme.base.spacing};\n }\n `;\n});\nStyledSelectedTasks.defaultProps = defaultThemeProp;\n\nexport const StyledSummaryItem = styled(SummaryItem)(({ theme }) => {\n return css`\n padding: ${theme.base.spacing} 0;\n &:not(:last-child) {\n border-bottom: 0.0625rem solid ${theme.base.palette['border-line']};\n }\n `;\n});\nStyledSummaryItem.defaultProps = defaultThemeProp;\n\nexport const StyledPickerFooter = styled.div(({ theme }) => {\n return css`\n border-top: 0.0625rem solid ${theme.base.palette['border-line']};\n padding: ${theme.base.spacing};\n `;\n});\nStyledPickerFooter.defaultProps = defaultThemeProp;\n\nexport const StyledDDList = styled.ul(({ theme }) => {\n return css`\n padding-inline-end: calc(0.25 * ${theme.base.spacing});\n height: 26rem;\n overflow-y: auto;\n `;\n});\n\nStyledDDList.defaultProps = defaultThemeProp;\n\nexport const StyledPicker = styled.div`\n height: 100%;\n`;\n\nexport const StyledDragHandle = styled.div`\n cursor: move;\n > svg {\n display: block;\n }\n`;\n\nconst StyledCount = styled(Count)(({ theme }) => {\n return css`\n margin-inline-start: calc(0.5 * ${theme.base.spacing});\n `;\n});\n\nStyledCount.defaultProps = defaultThemeProp;\n\nconst SelectedItemRenderer = ({\n dragRef,\n previewRef,\n data\n}: ItemRendererProps<SelectedItemProps>) => {\n const t = useI18n();\n\n return (\n <li>\n <StyledSummaryItem\n ref={previewRef}\n visual={\n <StyledDragHandle ref={dragRef}>\n <Icon name='drag' />\n </StyledDragHandle>\n }\n primary={data?.primary}\n secondary={data?.secondary}\n actions={\n <Button\n variant='simple'\n icon\n label={t('task_manager_delete_task')}\n onClick={() => data?.onRemoveSelection?.(data.id)}\n >\n <Icon name='trash' />\n </Button>\n }\n />\n </li>\n );\n};\n\nconst DraggableSelectedList = ({\n selectedItems,\n onChange,\n itemRenderer\n}: DraggableSelectedListProps) => {\n return (\n <DragDropManager>\n <DragDropList\n as={StyledDDList}\n accept='string'\n items={selectedItems.map(item => ({\n id: item.id,\n type: 'string',\n data: item\n }))}\n itemRenderer={itemRenderer}\n onChange={onChange}\n />\n </DragDropManager>\n );\n};\n\nconst Picker: FunctionComponent<PickerProps & ForwardProps> = forwardRef(\n (\n {\n id,\n items,\n emptyText,\n title,\n placeholder,\n onAdd,\n onCancel,\n ...restProps\n }: PropsWithoutRef<PickerProps>,\n ref: PickerProps['ref']\n ) => {\n const t = useI18n();\n\n const [initialItems, setItems] = useState<PickerProps['items']>(items);\n\n const [searchInput, setSearchInput] = useState('');\n const [selectMultipleToggle, setSelectMultipleToggle] = useState(false);\n\n const filterRegex = new RegExp(searchInput.replace(/[.*+\\-?^${}()|[\\]\\\\]/g, '\\\\$&'), 'i');\n const [selections, setSelections] = useState<SelectedItemProps[]>([]);\n const searchEleRef = useRef<HTMLInputElement>(null);\n\n const selectedTasksWrapperRef = useRef<HTMLDivElement>(null);\n const [pickerEl, setPickerEl] = useElement<HTMLDivElement>();\n const pickerRef = useConsolidatedRef(ref, setPickerEl);\n\n useEffect(() => {\n setItems(items);\n }, [items]);\n\n const onKeydown = useCallback(\n (e: KeyboardEvent) => {\n const { key } = e;\n if (key === 'Escape') {\n onCancel?.();\n } else if (key === 'Tab' && pickerEl) {\n const focusableContent = getFocusables(pickerRef);\n\n if (!focusableContent || focusableContent.length < 2) return;\n\n const firstFocusableElement = focusableContent[0];\n const lastFocusableElement = focusableContent[focusableContent.length - 1];\n\n if (e.shiftKey) {\n if (document.activeElement === firstFocusableElement) {\n lastFocusableElement.focus();\n e.preventDefault();\n }\n } else if (document.activeElement === lastFocusableElement) {\n firstFocusableElement.focus();\n e.preventDefault();\n }\n }\n\n // when focus is in the list setting the tabindex of first element as -1 and on focusing out the tabindex to be 0\n const focusEl = selectedTasksWrapperRef.current;\n if (!focusEl) return;\n\n const focusable = Array.from(focusEl.querySelectorAll('button'));\n if (focusable.length === 0) return;\n\n if (focusEl.contains(document.activeElement)) focusable[0].tabIndex = -1;\n else if (focusable[0].tabIndex === -1) focusable[0].tabIndex = 0;\n },\n [onCancel, pickerEl, selectMultipleToggle]\n );\n\n useEffect(() => {\n document.addEventListener('keydown', onKeydown);\n return () => {\n document.removeEventListener('keydown', onKeydown);\n };\n }, [pickerEl, selectMultipleToggle]);\n\n const renderItems = useMemo(() => {\n return menuHelpers.mapTree(\n searchInput\n ? menuHelpers\n .flatten(initialItems)\n .filter(({ primary, items: childItems }: MenuItemProps) => {\n return filterRegex.test(primary) && !childItems?.length;\n })\n : initialItems,\n item => {\n let selectable = false;\n\n if (!item.items) {\n selectable = true;\n }\n\n return {\n ...item,\n selected: selectable ? !!item.selected : undefined\n };\n }\n );\n }, [searchInput, items, filterRegex]);\n\n const removeTasks = useCallback((uid: string) => {\n setItems((cur: PickerProps['items']) => menuHelpers.toggleSelected(cur, uid, 'multi-select'));\n setSelections(cur => {\n const itemToRemove = menuHelpers.getItem(cur, uid);\n return cur.filter(item => item.id !== itemToRemove?.id);\n });\n\n // 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(selectedTasksWrapperRef);\n if (focusable.length > 0) focusable[0].focus();\n else searchEleRef.current!.focus();\n }, 0);\n }, []);\n\n const toggleSelectedRegion = () => {\n setSelectMultipleToggle(curr => !curr);\n };\n\n useArrows(\n selectedTasksWrapperRef,\n {\n selector: 'button',\n dir: 'up-down'\n },\n [selections.length]\n );\n\n return (\n <Flex as={StyledPicker} container={{ direction: 'column' }} ref={pickerRef} id={id}>\n <Flex\n as={StyledPickerHeader}\n container={{ justify: 'between', alignItems: 'center', pad: 1 }}\n >\n <Text variant='h3'>{t('add_tasks')}</Text>\n <Button variant='simple' onClick={onCancel} aria-label={t('task_picker_close')} icon>\n <Icon name='times' />\n </Button>\n </Flex>\n <Flex container>\n <Flex as={StyledAddTasks}>\n <Menu\n items={renderItems}\n onItemClick={(uid: string) => {\n const clickedItem = menuHelpers.getItem(renderItems, uid);\n const parentItem = clickedItem?.ancestors\n ? clickedItem.ancestors[0]\n : menuHelpers.getParentItem(renderItems, uid);\n\n if (clickedItem) {\n if (selectMultipleToggle) {\n setItems((cur: PickerProps['items']) =>\n menuHelpers.toggleSelected(cur, uid, 'multi-select')\n );\n\n if (selections.find(item => item.id === uid)) {\n setSelections(cur => cur.filter(item => item.id !== clickedItem?.id));\n } else {\n setSelections(cur => {\n let secondary;\n if (parentItem)\n secondary = menuHelpers.isItem(parentItem)\n ? parentItem.primary\n : parentItem.label;\n return [\n ...cur,\n {\n ...clickedItem,\n secondary,\n onRemoveSelection: removeTasks\n } as SelectedItemProps\n ];\n });\n }\n setSearchInput('');\n } else {\n onAdd([clickedItem]);\n }\n }\n }}\n focusControlEl={searchEleRef.current || undefined}\n emptyText={emptyText || t('no_items')}\n accent={filterRegex}\n {...restProps}\n mode={selectMultipleToggle ? 'multi-select' : 'action'}\n header={\n <Flex container={{ direction: 'column', gap: 1 }}>\n <SearchInput\n ref={searchEleRef}\n value={searchInput}\n onSearchChange={setSearchInput}\n placeholder={placeholder || t('search_placeholder_default')}\n autoFocus\n />\n <Switch\n label={t('select_multiple')}\n on={selectMultipleToggle}\n onChange={toggleSelectedRegion}\n />\n </Flex>\n }\n arrowNavigationUnsupported\n />\n </Flex>\n {selectMultipleToggle && (\n <Flex\n as={StyledSelectedTasks}\n container={{ direction: 'column' }}\n ref={selectedTasksWrapperRef}\n >\n <Text variant='h3'>{t('selected_tasks')}</Text>\n\n {selections.length > 0 ? (\n <DraggableSelectedList\n selectedItems={selections}\n onChange={newItems => {\n setSelections(\n newItems.map(({ type, data }) => ({\n ...data,\n type\n })) as SelectedItemProps[]\n );\n }}\n itemRenderer={SelectedItemRenderer}\n />\n ) : (\n <EmptyState message={t('no_selected_tasks')} />\n )}\n </Flex>\n )}\n </Flex>\n {selectMultipleToggle && (\n <Flex as={StyledPickerFooter} container={{ justify: 'between' }}>\n <Button onClick={onCancel} aria-label={t('cancel')}>\n Cancel\n </Button>\n <Button\n variant='primary'\n disabled={!selections.length}\n onClick={() => {\n onAdd?.(selections);\n setItems(initialItems);\n }}\n aria-label={t('task_manager_picker_add_label', [selections?.length], {\n count: selections?.length\n })}\n >\n {t('add')}\n {!!selections?.length && <StyledCount>{selections.length}</StyledCount>}\n </Button>\n </Flex>\n )}\n </Flex>\n );\n }\n);\n\nexport default Picker;\n"]}
1
+ {"version":3,"file":"Picker.js","sourceRoot":"","sources":["../../../../src/components/TaskManager/Picker/Picker.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n forwardRef,\n FunctionComponent,\n PropsWithoutRef,\n useCallback,\n useEffect,\n useMemo,\n useRef,\n useState\n} from 'react';\nimport styled, { css } from 'styled-components';\n\nimport {\n Button,\n Count,\n defaultThemeProp,\n Flex,\n ForwardProps,\n Icon,\n Menu,\n menuHelpers,\n EmptyState,\n SearchInput,\n SummaryItem,\n Text,\n useI18n,\n Switch,\n useArrows,\n useConsolidatedRef,\n useElement,\n registerIcon,\n getFocusables,\n StyledMenuListWrapper\n} from '@pega/cosmos-react-core';\nimport { MenuItemProps } from '@pega/cosmos-react-core/lib/components/Menu/Menu.types';\nimport { DragDropList, DragDropManager, ItemRendererProps } from '@pega/cosmos-react-dnd';\nimport * as timesIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/times.icon';\nimport * as dragIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/drag.icon';\nimport * as trashIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/trash.icon';\n\nimport { DraggableSelectedListProps, PickerProps, SelectedItemProps } from './Picker.types';\n\nregisterIcon(timesIcon, dragIcon, trashIcon);\nexport const StyledPickerHeader = styled.div(({ theme }) => {\n return css`\n padding-inline-start: calc(2 * ${theme.base.spacing});\n padding-inline-end: calc(1.25 * ${theme.base.spacing});\n `;\n});\nStyledPickerHeader.defaultProps = defaultThemeProp;\n\nexport const StyledAddTasks = styled.div(({ theme }) => {\n return css`\n width: 17.5rem;\n padding: 0 ${theme.base.spacing} ${theme.base.spacing};\n header {\n padding-top: 0;\n border-bottom: none;\n }\n ${StyledMenuListWrapper} {\n max-height: 23rem;\n }\n `;\n});\nStyledAddTasks.defaultProps = defaultThemeProp;\n\nexport const StyledSelectedTasks = styled.div(({ theme }) => {\n return css`\n width: 17.5rem;\n padding: 0 ${theme.base.spacing} ${theme.base.spacing};\n border-inline-start: 0.0625rem solid ${theme.base.palette['border-line']};\n > h3 {\n padding: 0 0 ${theme.base.spacing} ${theme.base.spacing};\n }\n `;\n});\nStyledSelectedTasks.defaultProps = defaultThemeProp;\n\nexport const StyledSummaryItem = styled(SummaryItem)(({ theme }) => {\n return css`\n padding: ${theme.base.spacing} 0;\n &:not(:last-child) {\n border-bottom: 0.0625rem solid ${theme.base.palette['border-line']};\n }\n `;\n});\nStyledSummaryItem.defaultProps = defaultThemeProp;\n\nexport const StyledPickerFooter = styled.div(({ theme }) => {\n return css`\n border-top: 0.0625rem solid ${theme.base.palette['border-line']};\n padding: ${theme.base.spacing};\n `;\n});\nStyledPickerFooter.defaultProps = defaultThemeProp;\n\nexport const StyledDDList = styled.ul(({ theme }) => {\n return css`\n padding-inline-end: calc(0.25 * ${theme.base.spacing});\n height: 26rem;\n overflow-y: auto;\n `;\n});\n\nStyledDDList.defaultProps = defaultThemeProp;\n\nexport const StyledPicker = styled.div`\n height: 100%;\n`;\n\nexport const StyledDragHandle = styled.div`\n cursor: move;\n > svg {\n display: block;\n }\n`;\n\nconst StyledCount = styled(Count)(({ theme }) => {\n return css`\n margin-inline-start: calc(0.5 * ${theme.base.spacing});\n `;\n});\n\nStyledCount.defaultProps = defaultThemeProp;\n\nconst SelectedItemRenderer = ({\n dragRef,\n previewRef,\n data\n}: ItemRendererProps<SelectedItemProps>) => {\n const t = useI18n();\n\n return (\n <li>\n <StyledSummaryItem\n ref={previewRef}\n visual={\n <StyledDragHandle ref={dragRef}>\n <Icon name='drag' />\n </StyledDragHandle>\n }\n primary={data?.primary}\n secondary={data?.secondary}\n actions={\n <Button\n variant='simple'\n icon\n label={t('task_manager_delete_task')}\n onClick={() => data?.onRemoveSelection?.(data.id)}\n >\n <Icon name='trash' />\n </Button>\n }\n />\n </li>\n );\n};\n\nconst DraggableSelectedList = ({\n selectedItems,\n onChange,\n itemRenderer\n}: DraggableSelectedListProps) => {\n return (\n <DragDropManager>\n <DragDropList\n as={StyledDDList}\n accept='string'\n items={selectedItems.map(item => ({\n id: item.id,\n type: 'string',\n data: item\n }))}\n itemRenderer={itemRenderer}\n onChange={onChange}\n />\n </DragDropManager>\n );\n};\n\nconst Picker: FunctionComponent<PickerProps & ForwardProps> = forwardRef(\n (\n {\n id,\n items,\n emptyText,\n title,\n placeholder,\n onAdd,\n onCancel,\n ...restProps\n }: PropsWithoutRef<PickerProps>,\n ref: PickerProps['ref']\n ) => {\n const t = useI18n();\n\n const [initialItems, setItems] = useState<PickerProps['items']>(items);\n\n const [searchInput, setSearchInput] = useState('');\n const [selectMultipleToggle, setSelectMultipleToggle] = useState(false);\n\n const filterRegex = new RegExp(searchInput.replace(/[.*+\\-?^${}()|[\\]\\\\]/g, '\\\\$&'), 'i');\n const [selections, setSelections] = useState<SelectedItemProps[]>([]);\n const searchEleRef = useRef<HTMLInputElement>(null);\n\n const selectedTasksWrapperRef = useRef<HTMLDivElement>(null);\n const [pickerEl, setPickerEl] = useElement<HTMLDivElement>();\n const pickerRef = useConsolidatedRef(ref, setPickerEl);\n\n useEffect(() => {\n setItems(items);\n }, [items]);\n\n const onKeydown = useCallback(\n (e: KeyboardEvent) => {\n const { key } = e;\n if (key === 'Escape') {\n onCancel?.();\n } else if (key === 'Tab' && pickerEl) {\n const focusableContent = getFocusables(pickerRef);\n\n if (!focusableContent || focusableContent.length < 2) return;\n\n const firstFocusableElement = focusableContent[0];\n const lastFocusableElement = focusableContent[focusableContent.length - 1];\n\n if (e.shiftKey) {\n if (document.activeElement === firstFocusableElement) {\n lastFocusableElement.focus();\n e.preventDefault();\n }\n } else if (document.activeElement === lastFocusableElement) {\n firstFocusableElement.focus();\n e.preventDefault();\n }\n }\n\n // when focus is in the list setting the tabindex of first element as -1 and on focusing out the tabindex to be 0\n const focusEl = selectedTasksWrapperRef.current;\n if (!focusEl) return;\n\n const focusable = Array.from(focusEl.querySelectorAll('button'));\n if (focusable.length === 0) return;\n\n if (focusEl.contains(document.activeElement)) focusable[0].tabIndex = -1;\n else if (focusable[0].tabIndex === -1) focusable[0].tabIndex = 0;\n },\n [onCancel, pickerEl, selectMultipleToggle]\n );\n\n useEffect(() => {\n document.addEventListener('keydown', onKeydown);\n return () => {\n document.removeEventListener('keydown', onKeydown);\n };\n }, [pickerEl, selectMultipleToggle]);\n\n const renderItems = useMemo(() => {\n return menuHelpers.mapTree(\n searchInput\n ? menuHelpers\n .flatten(initialItems)\n .filter(({ primary, items: childItems }: MenuItemProps) => {\n return filterRegex.test(primary) && !childItems?.length;\n })\n : initialItems,\n item => {\n let selectable = false;\n\n if (!item.items) {\n selectable = true;\n }\n\n return {\n ...item,\n selected: selectable ? !!item.selected : undefined\n };\n }\n );\n }, [searchInput, items, filterRegex]);\n\n const removeTasks = useCallback((uid: string) => {\n setItems((cur: PickerProps['items']) => menuHelpers.toggleSelected(cur, uid, 'multi-select'));\n setSelections(cur => {\n const itemToRemove = menuHelpers.getItem(cur, uid);\n return cur.filter(item => item.id !== itemToRemove?.id);\n });\n\n // 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(selectedTasksWrapperRef);\n if (focusable.length > 0) focusable[0].focus();\n else searchEleRef.current!.focus();\n }, 0);\n }, []);\n\n const toggleSelectedRegion = () => {\n setSelectMultipleToggle(curr => !curr);\n };\n\n useArrows(\n selectedTasksWrapperRef,\n {\n selector: 'button',\n dir: 'up-down'\n },\n [selections.length]\n );\n\n return (\n <Flex as={StyledPicker} container={{ direction: 'column' }} ref={pickerRef} id={id}>\n <Flex\n as={StyledPickerHeader}\n container={{ justify: 'between', alignItems: 'center', pad: 1 }}\n >\n <Text variant='h3'>{t('add_tasks')}</Text>\n <Button variant='simple' onClick={onCancel} aria-label={t('task_picker_close')} icon>\n <Icon name='times' />\n </Button>\n </Flex>\n <Flex container>\n <Flex as={StyledAddTasks}>\n <Menu\n items={renderItems}\n onItemClick={(uid: string) => {\n const clickedItem = menuHelpers.getItem(renderItems, uid);\n const parentItem = clickedItem?.ancestors\n ? clickedItem.ancestors[0]\n : menuHelpers.getParentItem(renderItems, uid);\n\n if (clickedItem) {\n if (selectMultipleToggle) {\n setItems((cur: PickerProps['items']) =>\n menuHelpers.toggleSelected(cur, uid, 'multi-select')\n );\n\n if (selections.find(item => item.id === uid)) {\n setSelections(cur => cur.filter(item => item.id !== clickedItem?.id));\n } else {\n setSelections(cur => {\n let secondary;\n if (parentItem)\n secondary = menuHelpers.isItem(parentItem)\n ? parentItem.primary\n : parentItem.label;\n return [\n ...cur,\n {\n ...clickedItem,\n secondary,\n onRemoveSelection: removeTasks\n } as SelectedItemProps\n ];\n });\n }\n setSearchInput('');\n } else {\n onAdd([clickedItem]);\n }\n }\n }}\n focusControlEl={searchEleRef.current || undefined}\n emptyText={emptyText || t('no_items')}\n accent={filterRegex}\n {...restProps}\n mode={selectMultipleToggle ? 'multi-select' : 'action'}\n header={\n <Flex container={{ direction: 'column', gap: 1 }}>\n <SearchInput\n ref={searchEleRef}\n value={searchInput}\n onSearchChange={setSearchInput}\n placeholder={placeholder || t('search_placeholder_default')}\n autoFocus\n />\n <Switch\n label={t('select_multiple')}\n on={selectMultipleToggle}\n onChange={toggleSelectedRegion}\n />\n </Flex>\n }\n arrowNavigationUnsupported\n />\n </Flex>\n {selectMultipleToggle && (\n <Flex\n as={StyledSelectedTasks}\n container={{ direction: 'column' }}\n ref={selectedTasksWrapperRef}\n >\n <Text variant='h3'>{t('selected_tasks')}</Text>\n\n {selections.length > 0 ? (\n <DraggableSelectedList\n selectedItems={selections}\n onChange={newItems => {\n setSelections(\n newItems.map(({ type, data }) => ({\n ...data,\n type\n })) as SelectedItemProps[]\n );\n }}\n itemRenderer={SelectedItemRenderer}\n />\n ) : (\n <EmptyState message={t('no_selected_tasks')} />\n )}\n </Flex>\n )}\n </Flex>\n {selectMultipleToggle && (\n <Flex as={StyledPickerFooter} container={{ justify: 'between' }}>\n <Button onClick={onCancel} aria-label={t('cancel')}>\n Cancel\n </Button>\n <Button\n variant='primary'\n disabled={!selections.length}\n onClick={() => {\n onAdd?.(selections);\n setItems(initialItems);\n }}\n aria-label={t('task_manager_picker_add_label', [selections?.length], {\n count: selections?.length\n })}\n >\n {t('add')}\n {!!selections?.length && <StyledCount>{selections.length}</StyledCount>}\n </Button>\n </Flex>\n )}\n </Flex>\n );\n }\n);\n\nexport default Picker;\n"]}
package/lib/components/TaskManager/TaskManager.js CHANGED
@@ -35,15 +35,15 @@ const TaskManager = forwardRef((props, ref) => {
35
35
  onTaskLaunch
36
36
  }, children: _jsxs("div", { children: [banner && (_jsxs(Flex, { as: StyledTaskManagerBanner, container: {
37
37
  alignItems: 'center'
38
- }, "aria-live": 'polite', children: [_jsx(Icon, { name: banner.icon }, void 0), _jsx(Text, { variant: 'h4', children: banner.content }, void 0)] }, void 0)), _jsx(StyledTaskManager, { ...restProps, ref: consolidatedRef, hasDrawer: hasActiveTask, children: _jsxs(TaskView, { header: _jsx(Text, { variant: 'h2', children: t('task_manager_tasks') }, void 0), actions: _jsxs(Flex, { container: {
38
+ }, "aria-live": 'polite', children: [_jsx(Icon, { name: banner.icon }), _jsx(Text, { variant: 'h4', children: banner.content })] })), _jsx(StyledTaskManager, { ...restProps, ref: consolidatedRef, hasDrawer: hasActiveTask, children: _jsxs(TaskView, { header: _jsx(Text, { variant: 'h2', children: t('task_manager_tasks') }), actions: _jsxs(Flex, { container: {
39
39
  itemGap: 1
40
40
  }, children: [wrapUp && (_jsx(Button, { variant: 'secondary', disabled: wrapUp.disable, onClick: () => wrapUp?.onClick(), children: _jsxs(Flex, { container: {
41
41
  itemGap: 1,
42
42
  alignItems: 'center'
43
- }, children: [_jsx(Icon, { name: 'flag-finish' }, void 0), _jsx("span", { children: t('task_manager_wrap_up') }, void 0)] }, void 0) }, void 0)), addTask && (_jsxs(_Fragment, { children: [_jsx(Button, { variant: 'primary', onClick: () => setShowPicker(cur => !cur), ref: setAddTaskEl, children: _jsxs(Flex, { container: {
43
+ }, children: [_jsx(Icon, { name: 'flag-finish' }), _jsx("span", { children: t('task_manager_wrap_up') })] }) })), addTask && (_jsxs(_Fragment, { children: [_jsx(Button, { variant: 'primary', onClick: () => setShowPicker(cur => !cur), ref: setAddTaskEl, children: _jsxs(Flex, { container: {
44
44
  gap: 1,
45
45
  alignItems: 'center'
46
- }, children: [_jsx(Icon, { name: 'plus' }, void 0), _jsx("span", { children: t('task_manager_add_task') }, void 0)] }, void 0) }, void 0), _jsx(StyledPopover, { show: showPicker, target: addTaskEl, placement: 'bottom-end', modifiers: [
46
+ }, children: [_jsx(Icon, { name: 'plus' }), _jsx("span", { children: t('task_manager_add_task') })] }) }), _jsx(StyledPopover, { show: showPicker, target: addTaskEl, placement: 'bottom-end', modifiers: [
47
47
  {
48
48
  name: 'offset',
49
49
  options: {
@@ -60,13 +60,13 @@ const TaskManager = forwardRef((props, ref) => {
60
60
  setShowPicker(false);
61
61
  }, onCancel: () => {
62
62
  setShowPicker(false);
63
- }, ref: addTask.ref, placeholder: t('search_tasks') }, void 0) }, void 0)] }, void 0))] }, void 0), children: [hasActiveTask && _jsx(TaskManagerTabs, { ref: TaskManagerTabsRef }, void 0), hasActiveTask && _jsx(StyledTaskMain, { children: main }, void 0), !hasActiveTask && (_jsxs(Grid, { as: 'ul', container: true, children: [tasks.map(({ name, id, status, isResolved, meta, icon, ...restTaskProps }) => {
64
- return (_createElement(SummaryItem, { ...restTaskProps, key: id, as: StyledTaskSummaryItem, primary: _jsx(Text, { variant: 'h4', children: name }, void 0), secondary: _jsxs(_Fragment, { children: [!status && meta && _jsx(Text, { variant: 'secondary', children: meta }, void 0), status && _jsx(Status, { variant: status.variant, children: status.text }, void 0)] }, void 0), visual: _jsx(Icon, { name: icon }, void 0), actions: _jsxs(Flex, { container: { gap: 1 }, children: [!isResolved && (_jsx(Button, { variant: 'secondary', "aria-label": t('continue_label_a11y', [name]), onClick: () => {
63
+ }, ref: addTask.ref, placeholder: t('search_tasks') }) })] }))] }), children: [hasActiveTask && _jsx(TaskManagerTabs, { ref: TaskManagerTabsRef }), hasActiveTask && _jsx(StyledTaskMain, { children: main }), !hasActiveTask && (_jsxs(Grid, { as: 'ul', container: true, children: [tasks.map(({ name, id, status, isResolved, meta, icon, ...restTaskProps }) => {
64
+ return (_createElement(SummaryItem, { ...restTaskProps, key: id, as: StyledTaskSummaryItem, primary: _jsx(Text, { variant: 'h4', children: name }), secondary: _jsxs(_Fragment, { children: [!status && meta && _jsx(Text, { variant: 'secondary', children: meta }), status && _jsx(Status, { variant: status.variant, children: status.text })] }), visual: _jsx(Icon, { name: icon }), actions: _jsxs(Flex, { container: { gap: 1 }, children: [!isResolved && (_jsx(Button, { variant: 'secondary', "aria-label": t('continue_label_a11y', [name]), onClick: () => {
65
65
  onTaskLaunch?.(id);
66
- }, children: t('continue_label') }, void 0)), isResolved && (_jsx(Button, { variant: 'secondary', "aria-label": t('review_label_a11y', [name]), onClick: () => {
66
+ }, children: t('continue_label') })), isResolved && (_jsx(Button, { variant: 'secondary', "aria-label": t('review_label_a11y', [name]), onClick: () => {
67
67
  onTaskLaunch?.(id);
68
- }, children: t('review_label') }, void 0))] }, void 0) }));
69
- }), tasks.length === 0 && _jsx(EmptyState, { message: emptyText }, void 0)] }, void 0))] }, void 0) }, void 0)] }, void 0) }, void 0));
68
+ }, children: t('review_label') }))] }) }));
69
+ }), tasks.length === 0 && _jsx(EmptyState, { message: emptyText })] }))] }) })] }) }));
70
70
  });
71
71
  export default TaskManager;
72
72
  //# sourceMappingURL=TaskManager.js.map
package/lib/components/TaskManager/TaskManager.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"TaskManager.js","sourceRoot":"","sources":["../../../src/components/TaskManager/TaskManager.tsx"],"names":[],"mappings":"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","sourcesContent":["import { FunctionComponent, PropsWithoutRef, forwardRef, useRef, useEffect, useState } from 'react';\nimport { remToPx, stripUnit } from 'polished';\n\nimport {\n Flex,\n Icon,\n registerIcon,\n Text,\n Status,\n useI18n,\n useConsolidatedRef,\n useElement,\n Button,\n Grid,\n SummaryItem,\n EmptyState,\n useTheme,\n tryCatch,\n ForwardProps\n} from '@pega/cosmos-react-core';\nimport * as flagFinishIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/flag-finish.icon';\nimport * as plusIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/plus.icon';\n\nimport {\n StyledTaskManager,\n StyledTaskManagerBanner,\n StyledTaskSummaryItem,\n StyledPopover,\n StyledTaskMain\n} from './TaskManager.styles';\nimport TaskManagerContext from './TaskManager.context';\nimport TaskManagerTabs from './TaskManagerTabs';\nimport { TaskManagerProps } from './TaskManager.types';\nimport TaskView from './TaskView';\nimport Picker from './Picker/Picker';\nimport { SelectedItemProps } from './Picker/Picker.types';\n\nregisterIcon(plusIcon, flagFinishIcon);\n\nconst TaskManager: FunctionComponent<TaskManagerProps & ForwardProps> = forwardRef(\n (props: PropsWithoutRef<TaskManagerProps>, ref: TaskManagerProps['ref']) => {\n const {\n tasks = [],\n emptyText,\n onTaskLaunch,\n onTaskDismiss,\n addTask,\n wrapUp,\n main,\n banner,\n ...restProps\n } = props;\n const t = useI18n();\n const TaskManagerTabsRef = useRef<HTMLDivElement>(null);\n const consolidatedRef = useConsolidatedRef(ref);\n const hasActiveTask = tasks.filter(task => task.active).length > 0 || !!wrapUp?.active;\n const [showPicker, setShowPicker] = useState(false);\n const [addTaskEl, setAddTaskEl] = useElement<HTMLButtonElement>(null);\n const theme = useTheme();\n\n useEffect(() => {\n if (TaskManagerTabsRef.current && consolidatedRef.current) {\n consolidatedRef.current.style.minHeight = `${TaskManagerTabsRef.current.scrollHeight}px`;\n } else if (consolidatedRef.current) {\n consolidatedRef.current.style.minHeight = '0';\n }\n }, [tasks, addTask]);\n\n return (\n <TaskManagerContext.Provider\n value={{\n addTask,\n wrapUp,\n tasks,\n onTaskLaunch\n }}\n >\n <div>\n {banner && (\n <Flex\n as={StyledTaskManagerBanner}\n container={{\n alignItems: 'center'\n }}\n aria-live='polite'\n >\n <Icon name={banner.icon} />\n <Text variant='h4'>{banner.content}</Text>\n </Flex>\n )}\n <StyledTaskManager {...restProps} ref={consolidatedRef} hasDrawer={hasActiveTask}>\n <TaskView\n header={<Text variant='h2'>{t('task_manager_tasks')}</Text>}\n actions={\n <Flex\n container={{\n itemGap: 1\n }}\n >\n {wrapUp && (\n <Button\n variant='secondary'\n disabled={wrapUp.disable}\n onClick={() => wrapUp?.onClick()}\n >\n <Flex\n container={{\n itemGap: 1,\n alignItems: 'center'\n }}\n >\n <Icon name='flag-finish' />\n <span>{t('task_manager_wrap_up')}</span>\n </Flex>\n </Button>\n )}\n {addTask && (\n <>\n <Button\n variant='primary'\n onClick={() => setShowPicker(cur => !cur)}\n ref={setAddTaskEl}\n >\n <Flex\n container={{\n gap: 1,\n alignItems: 'center'\n }}\n >\n <Icon name='plus' />\n <span>{t('task_manager_add_task')}</span>\n </Flex>\n </Button>\n <StyledPopover\n show={showPicker}\n target={addTaskEl}\n placement='bottom-end'\n modifiers={[\n {\n name: 'offset',\n options: {\n offset: [\n tryCatch(\n () => stripUnit(remToPx(theme.base.spacing)),\n () => 8\n ),\n tryCatch(\n () => stripUnit(remToPx(theme.base.spacing)),\n () => 8\n )\n ]\n }\n }\n ]}\n >\n <Picker\n scrollAt={10}\n emptyText={t('task_manager_search_results_empty_text')}\n items={addTask?.items}\n onAdd={(selectedItems: SelectedItemProps[]) => {\n if (addTask.onAdd) {\n addTask?.onAdd(selectedItems);\n }\n setShowPicker(false);\n }}\n onCancel={() => {\n setShowPicker(false);\n }}\n ref={addTask.ref}\n placeholder={t('search_tasks')}\n />\n </StyledPopover>\n </>\n )}\n </Flex>\n }\n >\n {hasActiveTask && <TaskManagerTabs ref={TaskManagerTabsRef} />}\n {hasActiveTask && <StyledTaskMain>{main}</StyledTaskMain>}\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 {tasks.length === 0 && <EmptyState message={emptyText} />}\n </Grid>\n )}\n </TaskView>\n </StyledTaskManager>\n </div>\n </TaskManagerContext.Provider>\n );\n }\n);\n\nexport default TaskManager;\n"]}
1
+ {"version":3,"file":"TaskManager.js","sourceRoot":"","sources":["../../../src/components/TaskManager/TaskManager.tsx"],"names":[],"mappings":"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","sourcesContent":["import { FunctionComponent, PropsWithoutRef, forwardRef, useRef, useEffect, useState } from 'react';\nimport { remToPx, stripUnit } from 'polished';\n\nimport {\n Flex,\n Icon,\n registerIcon,\n Text,\n Status,\n useI18n,\n useConsolidatedRef,\n useElement,\n Button,\n Grid,\n SummaryItem,\n EmptyState,\n useTheme,\n tryCatch,\n ForwardProps\n} from '@pega/cosmos-react-core';\nimport * as flagFinishIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/flag-finish.icon';\nimport * as plusIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/plus.icon';\n\nimport {\n StyledTaskManager,\n StyledTaskManagerBanner,\n StyledTaskSummaryItem,\n StyledPopover,\n StyledTaskMain\n} from './TaskManager.styles';\nimport TaskManagerContext from './TaskManager.context';\nimport TaskManagerTabs from './TaskManagerTabs';\nimport { TaskManagerProps } from './TaskManager.types';\nimport TaskView from './TaskView';\nimport Picker from './Picker/Picker';\nimport { SelectedItemProps } from './Picker/Picker.types';\n\nregisterIcon(plusIcon, flagFinishIcon);\n\nconst TaskManager: FunctionComponent<TaskManagerProps & ForwardProps> = forwardRef(\n (props: PropsWithoutRef<TaskManagerProps>, ref: TaskManagerProps['ref']) => {\n const {\n tasks = [],\n emptyText,\n onTaskLaunch,\n onTaskDismiss,\n addTask,\n wrapUp,\n main,\n banner,\n ...restProps\n } = props;\n const t = useI18n();\n const TaskManagerTabsRef = useRef<HTMLDivElement>(null);\n const consolidatedRef = useConsolidatedRef(ref);\n const hasActiveTask = tasks.filter(task => task.active).length > 0 || !!wrapUp?.active;\n const [showPicker, setShowPicker] = useState(false);\n const [addTaskEl, setAddTaskEl] = useElement<HTMLButtonElement>(null);\n const theme = useTheme();\n\n useEffect(() => {\n if (TaskManagerTabsRef.current && consolidatedRef.current) {\n consolidatedRef.current.style.minHeight = `${TaskManagerTabsRef.current.scrollHeight}px`;\n } else if (consolidatedRef.current) {\n consolidatedRef.current.style.minHeight = '0';\n }\n }, [tasks, addTask]);\n\n return (\n <TaskManagerContext.Provider\n value={{\n addTask,\n wrapUp,\n tasks,\n onTaskLaunch\n }}\n >\n <div>\n {banner && (\n <Flex\n as={StyledTaskManagerBanner}\n container={{\n alignItems: 'center'\n }}\n aria-live='polite'\n >\n <Icon name={banner.icon} />\n <Text variant='h4'>{banner.content}</Text>\n </Flex>\n )}\n <StyledTaskManager {...restProps} ref={consolidatedRef} hasDrawer={hasActiveTask}>\n <TaskView\n header={<Text variant='h2'>{t('task_manager_tasks')}</Text>}\n actions={\n <Flex\n container={{\n itemGap: 1\n }}\n >\n {wrapUp && (\n <Button\n variant='secondary'\n disabled={wrapUp.disable}\n onClick={() => wrapUp?.onClick()}\n >\n <Flex\n container={{\n itemGap: 1,\n alignItems: 'center'\n }}\n >\n <Icon name='flag-finish' />\n <span>{t('task_manager_wrap_up')}</span>\n </Flex>\n </Button>\n )}\n {addTask && (\n <>\n <Button\n variant='primary'\n onClick={() => setShowPicker(cur => !cur)}\n ref={setAddTaskEl}\n >\n <Flex\n container={{\n gap: 1,\n alignItems: 'center'\n }}\n >\n <Icon name='plus' />\n <span>{t('task_manager_add_task')}</span>\n </Flex>\n </Button>\n <StyledPopover\n show={showPicker}\n target={addTaskEl}\n placement='bottom-end'\n modifiers={[\n {\n name: 'offset',\n options: {\n offset: [\n tryCatch(\n () => stripUnit(remToPx(theme.base.spacing)),\n () => 8\n ),\n tryCatch(\n () => stripUnit(remToPx(theme.base.spacing)),\n () => 8\n )\n ]\n }\n }\n ]}\n >\n <Picker\n scrollAt={10}\n emptyText={t('task_manager_search_results_empty_text')}\n items={addTask?.items}\n onAdd={(selectedItems: SelectedItemProps[]) => {\n if (addTask.onAdd) {\n addTask?.onAdd(selectedItems);\n }\n setShowPicker(false);\n }}\n onCancel={() => {\n setShowPicker(false);\n }}\n ref={addTask.ref}\n placeholder={t('search_tasks')}\n />\n </StyledPopover>\n </>\n )}\n </Flex>\n }\n >\n {hasActiveTask && <TaskManagerTabs ref={TaskManagerTabsRef} />}\n {hasActiveTask && <StyledTaskMain>{main}</StyledTaskMain>}\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 {tasks.length === 0 && <EmptyState message={emptyText} />}\n </Grid>\n )}\n </TaskView>\n </StyledTaskManager>\n </div>\n </TaskManagerContext.Provider>\n );\n }\n);\n\nexport default TaskManager;\n"]}
package/lib/components/TaskManager/TaskManagerTabs.js CHANGED
@@ -167,7 +167,7 @@ const TaskManagerTabs = forwardRef((props, ref) => {
167
167
  e.preventDefault();
168
168
  }
169
169
  }, active: active },
170
- _jsx(Flex, { container: { justify: 'start', gap: 1, alignItems: 'center' }, children: _jsx(StyleTaskName, { children: task.name }, void 0) }, void 0)));
170
+ _jsx(Flex, { container: { justify: 'start', gap: 1, alignItems: 'center' }, children: _jsx(StyleTaskName, { children: task.name }) })));
171
171
  }), wrapUp?.showTab && (_jsx(StyledTaskManagerTab, { onClick: wrapUp.onClick, variant: 'wrap-up', "aria-selected": wrapUp.active, role: 'tab', active: wrapUp.active, tabIndex: wrapUp.active ? 0 : -1, onKeyUp: (e) => {
172
172
  changeTabFocus(e);
173
173
  }, onKeyDown: (e) => {
@@ -178,10 +178,10 @@ const TaskManagerTabs = forwardRef((props, ref) => {
178
178
  key === 'ArrowUp') {
179
179
  e.preventDefault();
180
180
  }
181
- }, ref: wrapUpRef, children: _jsx("span", { children: t('task_manager_wrap_up') }, void 0) }, void 0))] }, void 0), _jsx(StyledOverflowTabMenu, { menu: {
181
+ }, ref: wrapUpRef, children: _jsx("span", { children: t('task_manager_wrap_up') }) }))] }), _jsx(StyledOverflowTabMenu, { menu: {
182
182
  items: tasksMenu,
183
183
  mode: 'single-select'
184
- }, icon: 'caret-down', iconOnly: true, variant: 'text', text: t('task_manager_overflow_menu') }, void 0)] }, void 0)) }, void 0));
184
+ }, icon: 'caret-down', iconOnly: true, variant: 'text', text: t('task_manager_overflow_menu') })] })) }));
185
185
  });
186
186
  export default TaskManagerTabs;
187
187
  //# sourceMappingURL=TaskManagerTabs.js.map
package/lib/components/TaskManager/TaskManagerTabs.js.map CHANGED
@@ -1 +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 { 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 (props: PropsWithoutRef<TaskManagerTabsProps>, ref: TaskManagerTabsProps['ref']) => {\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 } = 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_tasks'), 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_tasks'), 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 (tasks.length) {\n const { key } = event;\n if (key === 'ArrowRight' || key === 'ArrowDown') {\n event.preventDefault();\n let nextIndex;\n if (wrapUpRef?.current === event.currentTarget) {\n nextIndex = 0;\n } else {\n if (index === tasks.length - 1 && wrapUp?.showTab) {\n wrapUpRef?.current?.focus();\n return;\n }\n nextIndex = index! + 1 < tasks.length ? index! + 1 : 0;\n }\n activeIndex = nextIndex;\n const nextTab = tabRefs[nextIndex]?.current;\n nextTab?.focus();\n } else if (key === 'ArrowLeft' || key === 'ArrowUp') {\n event.preventDefault();\n let prevIndex;\n if (wrapUpRef?.current === event.currentTarget) {\n prevIndex = tasks.length - 1;\n } else {\n if (index === 0 && wrapUp?.showTab) {\n wrapUpRef?.current?.focus();\n return;\n }\n prevIndex = index === 0 ? tasks.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?.(tasks[activeIndex!].id);\n }\n }\n };\n\n return (\n <Flex container as={StyledTaskManagerTabs} ref={ref}>\n {(tasks.length > 0 || wrapUp?.showTab) && (\n <>\n <StyledTasksTabList role='tablist' ref={tabListRef}>\n {tabs.map((task: TaskProps, i) => {\n const { id, active = false, icon, meta, ...restProps } = task;\n return (\n <StyledTaskManagerTab\n {...restProps}\n ref={tabRefs[i]}\n key={id}\n onClick={() => onTaskLaunch?.(id)}\n aria-selected={active}\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>{task.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 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='text'\n text={t('task_manager_overflow_menu')}\n />\n </>\n )}\n </Flex>\n );\n }\n);\n\nexport default TaskManagerTabs;\n"]}
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 { 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 (props: PropsWithoutRef<TaskManagerTabsProps>, ref: TaskManagerTabsProps['ref']) => {\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 } = 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_tasks'), 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_tasks'), 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 (tasks.length) {\n const { key } = event;\n if (key === 'ArrowRight' || key === 'ArrowDown') {\n event.preventDefault();\n let nextIndex;\n if (wrapUpRef?.current === event.currentTarget) {\n nextIndex = 0;\n } else {\n if (index === tasks.length - 1 && wrapUp?.showTab) {\n wrapUpRef?.current?.focus();\n return;\n }\n nextIndex = index! + 1 < tasks.length ? index! + 1 : 0;\n }\n activeIndex = nextIndex;\n const nextTab = tabRefs[nextIndex]?.current;\n nextTab?.focus();\n } else if (key === 'ArrowLeft' || key === 'ArrowUp') {\n event.preventDefault();\n let prevIndex;\n if (wrapUpRef?.current === event.currentTarget) {\n prevIndex = tasks.length - 1;\n } else {\n if (index === 0 && wrapUp?.showTab) {\n wrapUpRef?.current?.focus();\n return;\n }\n prevIndex = index === 0 ? tasks.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?.(tasks[activeIndex!].id);\n }\n }\n };\n\n return (\n <Flex container as={StyledTaskManagerTabs} ref={ref}>\n {(tasks.length > 0 || wrapUp?.showTab) && (\n <>\n <StyledTasksTabList role='tablist' ref={tabListRef}>\n {tabs.map((task: TaskProps, i) => {\n const { id, active = false, icon, meta, ...restProps } = task;\n return (\n <StyledTaskManagerTab\n {...restProps}\n ref={tabRefs[i]}\n key={id}\n onClick={() => onTaskLaunch?.(id)}\n aria-selected={active}\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>{task.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 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='text'\n text={t('task_manager_overflow_menu')}\n />\n </>\n )}\n </Flex>\n );\n }\n);\n\nexport default TaskManagerTabs;\n"]}
package/lib/components/TaskManager/TaskView.js CHANGED
@@ -4,7 +4,7 @@ import { Card, CardContent, CardHeader } from '@pega/cosmos-react-core';
4
4
  import { StyledStickyCardHeader } from './TaskManager.styles';
5
5
  const TaskView = forwardRef((props, ref) => {
6
6
  const { header, actions, children, ...restProps } = props;
7
- return (_jsxs(Card, { ...restProps, ref: ref, children: [_jsxs(CardHeader, { as: StyledStickyCardHeader, children: [header, actions] }, void 0), _jsx(CardContent, { children: children }, void 0)] }, void 0));
7
+ return (_jsxs(Card, { ...restProps, ref: ref, children: [_jsxs(CardHeader, { as: StyledStickyCardHeader, children: [header, actions] }), _jsx(CardContent, { children: children })] }));
8
8
  });
9
9
  export default TaskView;
10
10
  //# sourceMappingURL=TaskView.js.map
package/lib/components/TaskManager/TaskView.js.map CHANGED
@@ -1 +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,YACG,EACb,KAAC,WAAW,cAAE,QAAQ,WAAe,YAChC,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"]}
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"]}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@pega/cosmos-react-cs",
3
- "version": "3.0.0-dev.4.2",
3
+ "version": "3.0.0-dev.7.0",
4
4
  "author": "Pegasystems",
5
5
  "license": "SEE LICENSE IN LICENSE",
6
6
  "repository": {
@@ -20,8 +20,8 @@
20
20
  "build": "tsc -b"
21
21
  },
22
22
  "dependencies": {
23
- "@pega/cosmos-react-core": "3.0.0-dev.4.2",
24
- "@pega/cosmos-react-dnd": "3.0.0-dev.4.2",
23
+ "@pega/cosmos-react-core": "3.0.0-dev.7.0",
24
+ "@pega/cosmos-react-dnd": "3.0.0-dev.7.0",
25
25
  "polished": "^4.1.0",
26
26
  "react": "^16.14.0 || ^17.0.0",
27
27
  "react-dom": "^16.14.0 || ^17.0.0",
@@ -36,6 +36,6 @@
36
36
  "@storybook/react": "^6.4.19",
37
37
  "@storybook/theming": "^6.4.19",
38
38
  "enzyme": "^3.11.0",
39
- "typescript": "~4.5.2"
39
+ "typescript": "~4.6.2"
40
40
  }
41
41
  }