@pega/cosmos-react-work 4.0.0-dev.13.0 → 4.0.0-dev.14.1

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 (89) hide show
  1. package/lib/components/AppAnnouncement/AppAnnouncement.d.ts +7 -21
  2. package/lib/components/AppAnnouncement/AppAnnouncement.d.ts.map +1 -1
  3. package/lib/components/AppAnnouncement/AppAnnouncement.js +2 -1
  4. package/lib/components/AppAnnouncement/AppAnnouncement.js.map +1 -1
  5. package/lib/components/CasePreview/CasePreview.d.ts +1 -3
  6. package/lib/components/CasePreview/CasePreview.d.ts.map +1 -1
  7. package/lib/components/CasePreview/CasePreview.js.map +1 -1
  8. package/lib/components/CaseView/CaseHeader/CaseHeader.d.ts.map +1 -0
  9. package/lib/components/CaseView/CaseHeader/CaseHeader.js +132 -0
  10. package/lib/components/CaseView/CaseHeader/CaseHeader.js.map +1 -0
  11. package/lib/components/CaseView/CaseHeader/Summary.d.ts +6 -0
  12. package/lib/components/CaseView/CaseHeader/Summary.d.ts.map +1 -0
  13. package/lib/components/CaseView/CaseHeader/Summary.js +186 -0
  14. package/lib/components/CaseView/CaseHeader/Summary.js.map +1 -0
  15. package/lib/components/CaseView/CaseSummary.d.ts.map +1 -1
  16. package/lib/components/CaseView/CaseSummary.js +3 -3
  17. package/lib/components/CaseView/CaseSummary.js.map +1 -1
  18. package/lib/components/CaseView/CaseView.d.ts.map +1 -1
  19. package/lib/components/CaseView/CaseView.js +38 -9
  20. package/lib/components/CaseView/CaseView.js.map +1 -1
  21. package/lib/components/CaseView/CaseView.styles.d.ts +39 -22
  22. package/lib/components/CaseView/CaseView.styles.d.ts.map +1 -1
  23. package/lib/components/CaseView/CaseView.styles.js +163 -24
  24. package/lib/components/CaseView/CaseView.styles.js.map +1 -1
  25. package/lib/components/CaseView/CaseView.test-ids.d.ts +1 -1
  26. package/lib/components/CaseView/CaseView.test-ids.d.ts.map +1 -1
  27. package/lib/components/CaseView/CaseView.test-ids.js +1 -0
  28. package/lib/components/CaseView/CaseView.test-ids.js.map +1 -1
  29. package/lib/components/CaseView/CaseView.types.d.ts +16 -18
  30. package/lib/components/CaseView/CaseView.types.d.ts.map +1 -1
  31. package/lib/components/CaseView/CaseView.types.js.map +1 -1
  32. package/lib/components/CaseView/UtilitiesSummary.d.ts +0 -1
  33. package/lib/components/CaseView/UtilitiesSummary.d.ts.map +1 -1
  34. package/lib/components/CaseView/UtilitiesSummary.js.map +1 -1
  35. package/lib/components/CaseView/index.d.ts +0 -3
  36. package/lib/components/CaseView/index.d.ts.map +1 -1
  37. package/lib/components/CaseView/index.js +0 -3
  38. package/lib/components/CaseView/index.js.map +1 -1
  39. package/lib/components/ConfigurableLayout/ConfigurableLayout.types.d.ts +1 -3
  40. package/lib/components/ConfigurableLayout/ConfigurableLayout.types.d.ts.map +1 -1
  41. package/lib/components/ConfigurableLayout/ConfigurableLayout.types.js.map +1 -1
  42. package/lib/components/Confirmation/Confirmation.d.ts +1 -1
  43. package/lib/components/Confirmation/Confirmation.d.ts.map +1 -1
  44. package/lib/components/Confirmation/Confirmation.js.map +1 -1
  45. package/lib/components/Details/Details.d.ts.map +1 -1
  46. package/lib/components/Details/Details.js +10 -21
  47. package/lib/components/Details/Details.js.map +1 -1
  48. package/lib/components/Details/Details.styles.d.ts.map +1 -1
  49. package/lib/components/Details/Details.styles.js +22 -10
  50. package/lib/components/Details/Details.styles.js.map +1 -1
  51. package/lib/components/Glimpse/Glimpse.d.ts +10 -10
  52. package/lib/components/Glimpse/Glimpse.d.ts.map +1 -1
  53. package/lib/components/Glimpse/Glimpse.js +7 -17
  54. package/lib/components/Glimpse/Glimpse.js.map +1 -1
  55. package/lib/components/Glimpse/index.d.ts +1 -1
  56. package/lib/components/Glimpse/index.d.ts.map +1 -1
  57. package/lib/components/Glimpse/index.js +0 -1
  58. package/lib/components/Glimpse/index.js.map +1 -1
  59. package/lib/components/IntelligentGuidance/IntelligentGuidance.types.d.ts +3 -9
  60. package/lib/components/IntelligentGuidance/IntelligentGuidance.types.d.ts.map +1 -1
  61. package/lib/components/IntelligentGuidance/IntelligentGuidance.types.js.map +1 -1
  62. package/lib/components/SearchResults/SearchResults.types.d.ts +2 -2
  63. package/lib/components/SearchResults/SearchResults.types.js.map +1 -1
  64. package/lib/components/Stakeholders/Stakeholders.types.d.ts +4 -12
  65. package/lib/components/Stakeholders/Stakeholders.types.d.ts.map +1 -1
  66. package/lib/components/Stakeholders/Stakeholders.types.js.map +1 -1
  67. package/lib/components/Tags/Tags.d.ts +1 -1
  68. package/lib/components/Tags/Tags.d.ts.map +1 -1
  69. package/lib/components/Tags/Tags.js +1 -17
  70. package/lib/components/Tags/Tags.js.map +1 -1
  71. package/lib/components/Tasks/Tasks.d.ts +13 -12
  72. package/lib/components/Tasks/Tasks.d.ts.map +1 -1
  73. package/lib/components/Tasks/Tasks.js +7 -9
  74. package/lib/components/Tasks/Tasks.js.map +1 -1
  75. package/lib/components/Tasks/Tasks.test-ids.d.ts +1 -1
  76. package/lib/components/Tasks/Tasks.test-ids.d.ts.map +1 -1
  77. package/lib/components/Tasks/Tasks.test-ids.js +1 -5
  78. package/lib/components/Tasks/Tasks.test-ids.js.map +1 -1
  79. package/lib/components/Tasks/index.d.ts +3 -5
  80. package/lib/components/Tasks/index.d.ts.map +1 -1
  81. package/lib/components/Tasks/index.js +1 -0
  82. package/lib/components/Tasks/index.js.map +1 -1
  83. package/lib/components/Timeline/Timeline.types.d.ts +4 -4
  84. package/lib/components/Timeline/Timeline.types.js.map +1 -1
  85. package/package.json +5 -3
  86. package/lib/components/CaseView/CaseHeader.d.ts.map +0 -1
  87. package/lib/components/CaseView/CaseHeader.js +0 -49
  88. package/lib/components/CaseView/CaseHeader.js.map +0 -1
  89. /package/lib/components/CaseView/{CaseHeader.d.ts → CaseHeader/CaseHeader.d.ts} +0 -0
@@ -1 +1 @@
1
- {"version":3,"file":"Stakeholders.types.js","sourceRoot":"","sources":["../../../src/components/Stakeholders/Stakeholders.types.ts"],"names":[],"mappings":"","sourcesContent":["import type { ComponentType } from 'react';\n\nimport type {\n SummaryListProps,\n ForwardProps,\n NoChildrenProp,\n SummaryListItem\n} from '@pega/cosmos-react-core';\n\nexport type Role = {\n name: string;\n description: string;\n};\n\n/** A simple extension of a SummaryListItem. Pass onEdit and or onRemove to render either action for a stakeholder. */\nexport interface Stakeholder extends SummaryListItem, ForwardProps {\n onEdit?: () => void;\n onRemove?: () => void;\n}\n\nexport interface StakeholdersProps\n extends NoChildrenProp,\n Pick<SummaryListProps, 'count' | 'loading' | 'error' | 'ref'> {\n /**\n * The initial array of stakeholders presented in the default state of the widget.\n * This array will be sliced internally to the first three items but recommend only passing up to that length as a best practice.\n */\n items: Stakeholder[];\n /** Called when a user opens the add form. */\n onAddNew?: () => void;\n /**\n * Data and a component required to render a form for both add and edit.\n * If there are roles, the renderer is passed the currently selected role.\n */\n form: {\n /** Indicates the form is in a loading state either initially or after add/edit is submitted. */\n loading?: boolean;\n /** An array of available roles a stakeholder may be assigned. */\n roles?: Role[];\n /**\n * Use this when onAdd or onEdit is invoked to indicate to the component which role option to select.\n */\n currentRole?: Role;\n /**\n * A component to render the main portion of the add/edit stakeholder form.\n * This may be a simple function and will be pass a prop when the selected role changes.\n */\n renderer: ComponentType<{ selectedRoleName?: Role['name'] }>;\n /**\n * A props object that will be passed to the form renderer.\n */\n rendererProps?: {\n [key: string]: unknown;\n };\n /**\n * Called when a user submits the form.\n * The name of the currently selected role will be passed along with a function to close the form on an arg object.\n * closeForm will close the modal or popover the form is preseneted in.\n * closeForm can be call once validations and requests have resolved.\n */\n onSubmit: ({\n selectedRoleName,\n closeForm\n }: {\n selectedRoleName: Role['name'] | undefined;\n closeForm: () => void;\n }) => void;\n /**\n * Called when a user cancels a form.\n * A function to close the form will be passed on an arg object.\n */\n onDismiss: ({ closeForm }: { closeForm: () => void }) => void;\n /**\n * Called after the modal or popover transitions and un-mounts as a result of a closeForm call or user dismissal.\n */\n onAfterClose?: () => void;\n };\n /** Called when a user opens the view all modal. */\n onViewAll?: () => void;\n viewAll: {\n /** Indicates the view all list is in a loading state while data is fetched. */\n loading?: boolean;\n /** Pass a full or filtered list of stakeholder items. Filter based on search input. */\n items: StakeholdersProps['items'];\n /** Called when a user enters a view all search. Return a filtered array to viewAll['items'] with matching stakeholders. */\n onSearch?: (value: string) => void;\n /**\n * Called after the modal or popover transitions and un-mounts as a result of a closeForm call or user dismissal.\n */\n onAfterClose?: () => void;\n };\n}\n"]}
1
+ {"version":3,"file":"Stakeholders.types.js","sourceRoot":"","sources":["../../../src/components/Stakeholders/Stakeholders.types.ts"],"names":[],"mappings":"","sourcesContent":["import type { ComponentType } from 'react';\n\nimport type {\n SummaryListProps,\n ForwardProps,\n NoChildrenProp,\n SummaryListItem\n} from '@pega/cosmos-react-core';\n\nexport type Role = {\n name: string;\n description: string;\n};\n\n/** A simple extension of a SummaryListItem. Pass onEdit and or onRemove to render either action for a stakeholder. */\nexport interface Stakeholder extends SummaryListItem, ForwardProps {\n onEdit?: () => void;\n onRemove?: () => void;\n}\n\nexport interface StakeholdersProps\n extends NoChildrenProp,\n Pick<SummaryListProps, 'count' | 'loading' | 'error' | 'ref'> {\n /**\n * The initial array of stakeholders presented in the default state of the widget.\n * This array will be sliced internally to the first three items but recommend only passing up to that length as a best practice.\n */\n items: Stakeholder[];\n /** Called when a user opens the add form. */\n onAddNew?: () => void;\n /**\n * Data and a component required to render a form for both add and edit.\n * If there are roles, the renderer is passed the currently selected role.\n */\n form: {\n /** Indicates the form is in a loading state either initially or after add/edit is submitted. */\n loading?: boolean;\n /** An array of available roles a stakeholder may be assigned. */\n roles?: Role[];\n /** Use this when onAdd or onEdit is invoked to indicate to the component which role option to select. */\n currentRole?: Role;\n /**\n * A component to render the main portion of the add/edit stakeholder form.\n * This may be a simple function and will be pass a prop when the selected role changes.\n */\n renderer: ComponentType<{ selectedRoleName?: Role['name'] }>;\n /** A props object that will be passed to the form renderer. */\n rendererProps?: {\n [key: string]: unknown;\n };\n /**\n * Called when a user submits the form.\n * The name of the currently selected role will be passed along with a function to close the form on an arg object.\n * closeForm will close the modal or popover the form is preseneted in.\n * closeForm can be call once validations and requests have resolved.\n */\n onSubmit: ({\n selectedRoleName,\n closeForm\n }: {\n selectedRoleName: Role['name'] | undefined;\n closeForm: () => void;\n }) => void;\n /**\n * Called when a user cancels a form.\n * A function to close the form will be passed on an arg object.\n */\n onDismiss: ({ closeForm }: { closeForm: () => void }) => void;\n /** Called after the modal or popover transitions and un-mounts as a result of a closeForm call or user dismissal. */\n onAfterClose?: () => void;\n };\n /** Called when a user opens the view all modal. */\n onViewAll?: () => void;\n viewAll: {\n /** Indicates the view all list is in a loading state while data is fetched. */\n loading?: boolean;\n /** Pass a full or filtered list of stakeholder items. Filter based on search input. */\n items: StakeholdersProps['items'];\n /** Called when a user enters a view all search. Return a filtered array to viewAll['items'] with matching stakeholders. */\n onSearch?: (value: string) => void;\n /** Called after the modal or popover transitions and un-mounts as a result of a closeForm call or user dismissal. */\n onAfterClose?: () => void;\n };\n}\n"]}
@@ -10,7 +10,7 @@ export interface TagsProps extends BaseProps, NoChildrenProp {
10
10
  /**
11
11
  * A list of available tags to add from.
12
12
  * @default []
13
- * */
13
+ */
14
14
  availableTags?: string[];
15
15
  /** If true, a loading indicator will render in place of the tags list. */
16
16
  loading?: boolean;
@@ -1 +1 @@
1
- {"version":3,"file":"Tags.d.ts","sourceRoot":"","sources":["../../../src/components/Tags/Tags.tsx"],"names":[],"mappings":"AAAA,OAAO,EAKL,iBAAiB,EAEjB,GAAG,EAKJ,MAAM,OAAO,CAAC;AAGf,OAAO,EAEL,SAAS,EACT,YAAY,EA0BZ,eAAe,EACf,cAAc,EACf,MAAM,yBAAyB,CAAC;AASjC,MAAM,WAAW,WAAW;IAC1B,IAAI,EAAE,MAAM,CAAC;IACb,MAAM,CAAC,EAAE,OAAO,CAAC;CAClB;AAED,MAAM,WAAW,SAAU,SAAQ,SAAS,EAAE,cAAc;IAC1D,sBAAsB;IACtB,IAAI,EAAE,MAAM,EAAE,CAAC;IACf;;;SAGK;IACL,aAAa,CAAC,EAAE,MAAM,EAAE,CAAC;IACzB,0EAA0E;IAC1E,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,8FAA8F;IAC9F,KAAK,CAAC,EAAE,OAAO,GAAG,MAAM,GAAG,eAAe,CAAC;IAC3C,gFAAgF;IAChF,QAAQ,CAAC,EAAE,CAAC,WAAW,EAAE,MAAM,KAAK,IAAI,CAAC;IACzC,gDAAgD;IAChD,UAAU,CAAC,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC,0EAA0E;IAC1E,UAAU,CAAC,EAAE,CAAC,IAAI,EAAE,WAAW,EAAE,KAAK,OAAO,CAAC,IAAI,CAAC,CAAC;IACpD,6BAA6B;IAC7B,GAAG,CAAC,EAAE,GAAG,CAAC,WAAW,CAAC,CAAC;CACxB;AASD,eAAO,MAAM,UAAU;;;SA4BtB,CAAC;AAqNF,QAAA,MAAM,IAAI,EAAE,iBAAiB,CAAC,SAAS,GAAG,YAAY,CA+HrD,CAAC;AAEF,eAAe,IAAI,CAAC"}
1
+ {"version":3,"file":"Tags.d.ts","sourceRoot":"","sources":["../../../src/components/Tags/Tags.tsx"],"names":[],"mappings":"AAAA,OAAO,EAKL,iBAAiB,EAEjB,GAAG,EAKJ,MAAM,OAAO,CAAC;AAGf,OAAO,EAEL,SAAS,EACT,YAAY,EA0BZ,eAAe,EACf,cAAc,EACf,MAAM,yBAAyB,CAAC;AASjC,MAAM,WAAW,WAAW;IAC1B,IAAI,EAAE,MAAM,CAAC;IACb,MAAM,CAAC,EAAE,OAAO,CAAC;CAClB;AAED,MAAM,WAAW,SAAU,SAAQ,SAAS,EAAE,cAAc;IAC1D,sBAAsB;IACtB,IAAI,EAAE,MAAM,EAAE,CAAC;IACf;;;OAGG;IACH,aAAa,CAAC,EAAE,MAAM,EAAE,CAAC;IACzB,0EAA0E;IAC1E,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,8FAA8F;IAC9F,KAAK,CAAC,EAAE,OAAO,GAAG,MAAM,GAAG,eAAe,CAAC;IAC3C,gFAAgF;IAChF,QAAQ,CAAC,EAAE,CAAC,WAAW,EAAE,MAAM,KAAK,IAAI,CAAC;IACzC,gDAAgD;IAChD,UAAU,CAAC,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC,0EAA0E;IAC1E,UAAU,CAAC,EAAE,CAAC,IAAI,EAAE,WAAW,EAAE,KAAK,OAAO,CAAC,IAAI,CAAC,CAAC;IACpD,6BAA6B;IAC7B,GAAG,CAAC,EAAE,GAAG,CAAC,WAAW,CAAC,CAAC;CACxB;AASD,eAAO,MAAM,UAAU;;;SA4BtB,CAAC;AAoMF,QAAA,MAAM,IAAI,EAAE,iBAAiB,CAAC,SAAS,GAAG,YAAY,CA+HrD,CAAC;AAEF,eAAe,IAAI,CAAC"}
@@ -143,23 +143,7 @@ const EditTagModal = ({ tags, availableTags = [], onSearch, onEditTags }) => {
143
143
  setPauseSelectedDescendantEvaluation(true);
144
144
  }, onSelectedFocus: () => {
145
145
  setPauseSelectedDescendantEvaluation(false);
146
- }, pauseDescendantEvaluation: pauseSelectedDescendantEvaluation, autoFocus: true }), _jsx(Popover, { as: StyledMenuPopover, show: showMenu, target: inputRef.current, placement: 'bottom-start', modifiers: [
147
- {
148
- name: 'flip',
149
- enabled: true,
150
- options: {
151
- fallbackPlacements: ['top-start']
152
- }
153
- },
154
- {
155
- name: 'preventOverflow',
156
- enabled: true
157
- },
158
- {
159
- name: 'hide',
160
- enabled: false
161
- }
162
- ], onMouseDown: (e) => e.preventDefault(), children: _jsx(Menu, { role: 'listbox', mode: 'action', items: items, focusControlEl: inputRef.current || undefined, onItemClick: id => {
146
+ }, pauseDescendantEvaluation: pauseSelectedDescendantEvaluation, autoFocus: true }), _jsx(Popover, { as: StyledMenuPopover, show: showMenu, target: inputRef.current, placement: 'bottom-start', onMouseDown: (e) => e.preventDefault(), children: _jsx(Menu, { role: 'listbox', mode: 'action', items: items, focusControlEl: inputRef.current || undefined, onItemClick: id => {
163
147
  if (id.includes('custom:')) {
164
148
  const tagValue = id.replace('custom:', '');
165
149
  if (!selected.some(x => x.text === tagValue)) {
@@ -1 +1 @@
1
- {"version":3,"file":"Tags.js","sourceRoot":"","sources":["../../../src/components/Tags/Tags.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n ChangeEvent,\n ClipboardEvent,\n KeyboardEvent,\n forwardRef,\n FunctionComponent,\n PropsWithoutRef,\n Ref,\n useMemo,\n useState,\n useEffect,\n useRef\n} from 'react';\nimport styled, { css } from 'styled-components';\n\nimport {\n defaultThemeProp,\n BaseProps,\n ForwardProps,\n Modal,\n Tag,\n Button,\n ModalMethods,\n useI18n,\n Count,\n Flex,\n Text,\n CardHeader,\n Card,\n Actions,\n Icon,\n registerIcon,\n CardContent,\n Progress,\n EmptyState,\n ErrorState,\n Popover,\n Menu,\n MenuProps,\n useModalManager,\n useModalContext,\n useConsolidatedRef,\n CardFooter,\n Banner,\n ErrorStateProps,\n NoChildrenProp\n} from '@pega/cosmos-react-core';\nimport * as tagIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/tag.icon';\nimport { StyledTag } from '@pega/cosmos-react-core/lib/components/Badges/Tag';\nimport { StyledCardContent } from '@pega/cosmos-react-core/lib/components/Card/CardContent';\nimport MultiSelectInput from '@pega/cosmos-react-core/lib/components/ComboBox/MultiSelectInput/MultiSelectInput';\nimport { StyledCardFooter } from '@pega/cosmos-react-core/lib/components/Card/CardFooter';\n\nregisterIcon(tagIcon);\n\nexport interface SelectedTag {\n text: string;\n newTag?: boolean;\n}\n\nexport interface TagsProps extends BaseProps, NoChildrenProp {\n /** A list of tags. */\n tags: string[];\n /**\n * A list of available tags to add from.\n * @default []\n * */\n availableTags?: string[];\n /** If true, a loading indicator will render in place of the tags list. */\n loading?: boolean;\n /** If defined, an error message will render in the component and actions will be disabled. */\n error?: boolean | string | ErrorStateProps;\n /** Callback triggered when a search query is changed in the Edit tags modal. */\n onSearch?: (filterValue: string) => void;\n /** Callback triggered when a tag is clicked. */\n onTagClick?: (tag: string) => void;\n /** Callback triggered when modified tags are submitted from the modal. */\n onEditTags?: (tags: SelectedTag[]) => Promise<void>;\n /** Ref for the Tags card. */\n ref?: Ref<HTMLElement>;\n}\n\ninterface EditTagModalProps {\n tags: TagsProps['tags'];\n availableTags: TagsProps['availableTags'];\n onSearch?: TagsProps['onSearch'];\n onEditTags: NonNullable<TagsProps['onEditTags']>;\n}\n\nexport const StyledTags = styled.article<{ isLoading?: boolean; viewAll?: boolean }>(\n ({ isLoading, theme, viewAll }) => {\n return css`\n ${StyledCardContent} {\n max-height: ${viewAll ? 'fit-content' : '10rem'};\n overflow-y: hidden;\n }\n\n ${StyledCardFooter} {\n margin-block-start: ${theme.base.spacing};\n }\n\n ${StyledTag} {\n cursor: pointer;\n }\n\n ${StyledTag} + ${StyledTag} {\n margin-inline-start: 0;\n }\n\n ${isLoading &&\n css`\n & > ${StyledCardContent} {\n height: 4rem;\n }\n `}\n `;\n }\n);\n\nStyledTags.defaultProps = defaultThemeProp;\n\nconst StyledMenuPopover = styled.div`\n width: 40ch;\n`;\n\nconst StyledBanner = styled(Banner)(({ theme }) => {\n return css`\n padding-block-end: calc(2 * ${theme.base.spacing});\n `;\n});\n\nStyledBanner.defaultProps = defaultThemeProp;\n\nconst EditTagModal = ({ tags, availableTags = [], onSearch, onEditTags }: EditTagModalProps) => {\n const { dismiss } = useModalContext();\n const inputRef = useRef<HTMLInputElement>(null);\n const [filterValue, setFilterValue] = useState('');\n const [editError, setEditError] = useState('');\n const [selected, setSelected] = useState<SelectedTag[]>([]);\n const [items, setItems] = useState<MenuProps['items']>([]);\n const [pauseSelectedDescendantEvaluation, setPauseSelectedDescendantEvaluation] = useState(true);\n const t = useI18n();\n\n const showMenu = !!filterValue && !!items?.length;\n\n const selectedTagValues = useMemo(() => {\n return selected.map(({ text }) => {\n return { id: text, text };\n });\n }, [selected]);\n\n useEffect(() => {\n if (showMenu) {\n setPauseSelectedDescendantEvaluation(true);\n }\n }, [showMenu]);\n\n useEffect(() => {\n setSelected(\n tags.map(tag => {\n return { text: tag };\n })\n );\n }, [tags]);\n\n useEffect(() => {\n const menuItems = availableTags\n .filter(tag => !selected.some(x => x.text === tag))\n .map(tag => {\n return { id: tag, primary: tag };\n });\n\n if (\n filterValue &&\n !menuItems.some(x => x.id === filterValue) &&\n !selected.some(x => x.text === filterValue)\n ) {\n menuItems.push({\n id: `custom:${filterValue}`,\n primary: t('use_input_value', [filterValue])\n });\n }\n\n setItems(menuItems);\n }, [availableTags, filterValue, selected]);\n\n const setInputValue = (value: string) => {\n setEditError('');\n setFilterValue(value);\n onSearch?.(value);\n };\n\n const addTag = (tag: string) => {\n if (tag && !selected.find(x => x.text === tag)) {\n if (items.find(x => x.id === tag)) {\n setSelected(curr => [...curr, { text: tag }]);\n } else {\n setSelected(curr => [...curr, { text: tag, newTag: true }]);\n }\n setInputValue('');\n }\n };\n\n const handlePaste = (e: ClipboardEvent<HTMLInputElement>) => {\n e.preventDefault();\n const potentialTags = e.clipboardData.getData('Text').split(' ');\n\n potentialTags.forEach(potentialTag => {\n addTag(potentialTag);\n });\n };\n\n const handleKeyDown = (e: KeyboardEvent<HTMLInputElement>) => {\n if (e.key === ' ') {\n addTag(filterValue);\n }\n };\n\n return (\n <Modal\n heading={t('edit_tags')}\n actions={\n <>\n <Button onClick={dismiss}>{t('cancel')}</Button>\n <Button\n variant='primary'\n onClick={() => {\n onEditTags(selected)\n .then(dismiss)\n .catch((error: unknown) => {\n if (error instanceof Error) {\n setEditError(error.message || t('unknown_error'));\n } else {\n setEditError(t('unknown_error'));\n }\n });\n }}\n >\n {t('submit')}\n </Button>\n </>\n }\n >\n {editError && (\n <StyledBanner\n id='edit-tags-error'\n variant='urgent'\n messages={[editError]}\n onDismiss={() => {\n setEditError('');\n }}\n />\n )}\n <MultiSelectInput\n ref={inputRef}\n selected={selectedTagValues}\n value={filterValue}\n onChange={(e: ChangeEvent<HTMLInputElement>) => {\n setInputValue(e.target.value.trim());\n }}\n onRemove={(id: string, index: number) => {\n if (selected[index].text === id) {\n const updatedSelected = [...selected];\n updatedSelected.splice(index, 1);\n setSelected(updatedSelected);\n setEditError('');\n }\n }}\n onBlur={() => {\n setPauseSelectedDescendantEvaluation(true);\n setInputValue('');\n }}\n onPaste={handlePaste}\n onKeyDown={handleKeyDown}\n onSelectedBlur={() => {\n setPauseSelectedDescendantEvaluation(true);\n }}\n onSelectedFocus={() => {\n setPauseSelectedDescendantEvaluation(false);\n }}\n pauseDescendantEvaluation={pauseSelectedDescendantEvaluation}\n autoFocus\n />\n <Popover\n as={StyledMenuPopover}\n show={showMenu}\n target={inputRef.current}\n placement='bottom-start'\n modifiers={[\n {\n name: 'flip',\n enabled: true,\n options: {\n fallbackPlacements: ['top-start']\n }\n },\n {\n name: 'preventOverflow',\n enabled: true\n },\n {\n name: 'hide',\n enabled: false\n }\n ]}\n onMouseDown={(e: MouseEvent) => e.preventDefault()}\n >\n <Menu\n role='listbox'\n mode='action'\n items={items}\n focusControlEl={inputRef.current || undefined}\n onItemClick={id => {\n if (id.includes('custom:')) {\n const tagValue = id.replace('custom:', '');\n if (!selected.some(x => x.text === tagValue)) {\n setSelected(curr => [...curr, { text: tagValue, newTag: true }]);\n }\n } else {\n setSelected(curr => [...curr, { text: id }]);\n }\n setInputValue('');\n }}\n arrowNavigationUnsupported\n />\n </Popover>\n </Modal>\n );\n};\n\nconst Tags: FunctionComponent<TagsProps & ForwardProps> = forwardRef(\n (\n {\n tags,\n availableTags,\n loading,\n error,\n onSearch,\n onTagClick,\n onEditTags,\n ...restProps\n }: PropsWithoutRef<TagsProps>,\n ref: TagsProps['ref']\n ) => {\n const { create: createModal } = useModalManager();\n const editModalMethods = useRef<ModalMethods<EditTagModalProps>>();\n const containerRef = useRef<HTMLDivElement>(null);\n const contentRef = useRef<HTMLDivElement>(null);\n const consolidatedRef = useConsolidatedRef(containerRef, ref);\n const [footer, setFooter] = useState(false);\n const [viewAll, setViewAll] = useState(false);\n const t = useI18n();\n\n useEffect(() => {\n if (containerRef.current && contentRef.current) {\n if (\n contentRef.current.getBoundingClientRect().bottom >\n containerRef.current.getBoundingClientRect().bottom\n ) {\n setFooter(true);\n } else {\n setFooter(false);\n }\n }\n }, [containerRef.current, contentRef.current, tags]);\n\n useEffect(() => {\n if (!onEditTags) {\n editModalMethods.current?.dismiss();\n } else {\n editModalMethods.current?.update({\n tags,\n availableTags,\n onSearch,\n onEditTags\n });\n }\n }, [availableTags, tags, onSearch, onEditTags]);\n\n const openEditModal = () => {\n if (!onEditTags) return;\n\n editModalMethods.current = createModal(EditTagModal, {\n tags,\n availableTags,\n onSearch,\n onEditTags\n });\n };\n\n const content = useMemo(() => {\n if (loading) {\n return <Progress placement='local' />;\n }\n\n if (error) {\n if (typeof error === 'boolean') return <ErrorState />;\n if (typeof error === 'string') return <ErrorState message={error} />;\n return <ErrorState {...error} />;\n }\n\n return tags.length > 0 ? (\n <Flex ref={contentRef} container={{ gap: 1, wrap: 'wrap' }}>\n {tags.map(tag => {\n return (\n <Tag key={tag} onClick={() => onTagClick?.(tag)}>\n {tag}\n </Tag>\n );\n })}\n </Flex>\n ) : (\n <EmptyState />\n );\n }, [loading, error, tags]);\n\n return (\n <Card\n ref={consolidatedRef}\n {...restProps}\n as={StyledTags}\n viewAll={viewAll}\n isLoading={loading}\n >\n <CardHeader>\n <Flex container={{ alignItems: 'center', gap: 1 }}>\n <Icon name='tag' />\n <Text variant='h2'>{t('tags')}</Text>\n <Count>{tags.length}</Count>\n </Flex>\n <Actions\n items={\n onEditTags\n ? [\n {\n id: 'editTags',\n text: t('edit_tags'),\n icon: 'pencil',\n onClick: openEditModal,\n disabled: !!error\n }\n ]\n : []\n }\n />\n </CardHeader>\n <CardContent>{content}</CardContent>\n {footer && (\n <CardFooter justify='center'>\n <Button variant='link' onClick={() => setViewAll(curr => !curr)}>\n {viewAll ? t('view_less') : t('view_all')}\n </Button>\n </CardFooter>\n )}\n </Card>\n );\n }\n);\n\nexport default Tags;\n"]}
1
+ {"version":3,"file":"Tags.js","sourceRoot":"","sources":["../../../src/components/Tags/Tags.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n ChangeEvent,\n ClipboardEvent,\n KeyboardEvent,\n forwardRef,\n FunctionComponent,\n PropsWithoutRef,\n Ref,\n useMemo,\n useState,\n useEffect,\n useRef\n} from 'react';\nimport styled, { css } from 'styled-components';\n\nimport {\n defaultThemeProp,\n BaseProps,\n ForwardProps,\n Modal,\n Tag,\n Button,\n ModalMethods,\n useI18n,\n Count,\n Flex,\n Text,\n CardHeader,\n Card,\n Actions,\n Icon,\n registerIcon,\n CardContent,\n Progress,\n EmptyState,\n ErrorState,\n Popover,\n Menu,\n MenuProps,\n useModalManager,\n useModalContext,\n useConsolidatedRef,\n CardFooter,\n Banner,\n ErrorStateProps,\n NoChildrenProp\n} from '@pega/cosmos-react-core';\nimport * as tagIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/tag.icon';\nimport { StyledTag } from '@pega/cosmos-react-core/lib/components/Badges/Tag';\nimport { StyledCardContent } from '@pega/cosmos-react-core/lib/components/Card/CardContent';\nimport MultiSelectInput from '@pega/cosmos-react-core/lib/components/ComboBox/MultiSelectInput/MultiSelectInput';\nimport { StyledCardFooter } from '@pega/cosmos-react-core/lib/components/Card/CardFooter';\n\nregisterIcon(tagIcon);\n\nexport interface SelectedTag {\n text: string;\n newTag?: boolean;\n}\n\nexport interface TagsProps extends BaseProps, NoChildrenProp {\n /** A list of tags. */\n tags: string[];\n /**\n * A list of available tags to add from.\n * @default []\n */\n availableTags?: string[];\n /** If true, a loading indicator will render in place of the tags list. */\n loading?: boolean;\n /** If defined, an error message will render in the component and actions will be disabled. */\n error?: boolean | string | ErrorStateProps;\n /** Callback triggered when a search query is changed in the Edit tags modal. */\n onSearch?: (filterValue: string) => void;\n /** Callback triggered when a tag is clicked. */\n onTagClick?: (tag: string) => void;\n /** Callback triggered when modified tags are submitted from the modal. */\n onEditTags?: (tags: SelectedTag[]) => Promise<void>;\n /** Ref for the Tags card. */\n ref?: Ref<HTMLElement>;\n}\n\ninterface EditTagModalProps {\n tags: TagsProps['tags'];\n availableTags: TagsProps['availableTags'];\n onSearch?: TagsProps['onSearch'];\n onEditTags: NonNullable<TagsProps['onEditTags']>;\n}\n\nexport const StyledTags = styled.article<{ isLoading?: boolean; viewAll?: boolean }>(\n ({ isLoading, theme, viewAll }) => {\n return css`\n ${StyledCardContent} {\n max-height: ${viewAll ? 'fit-content' : '10rem'};\n overflow-y: hidden;\n }\n\n ${StyledCardFooter} {\n margin-block-start: ${theme.base.spacing};\n }\n\n ${StyledTag} {\n cursor: pointer;\n }\n\n ${StyledTag} + ${StyledTag} {\n margin-inline-start: 0;\n }\n\n ${isLoading &&\n css`\n & > ${StyledCardContent} {\n height: 4rem;\n }\n `}\n `;\n }\n);\n\nStyledTags.defaultProps = defaultThemeProp;\n\nconst StyledMenuPopover = styled.div`\n width: 40ch;\n`;\n\nconst StyledBanner = styled(Banner)(({ theme }) => {\n return css`\n padding-block-end: calc(2 * ${theme.base.spacing});\n `;\n});\n\nStyledBanner.defaultProps = defaultThemeProp;\n\nconst EditTagModal = ({ tags, availableTags = [], onSearch, onEditTags }: EditTagModalProps) => {\n const { dismiss } = useModalContext();\n const inputRef = useRef<HTMLInputElement>(null);\n const [filterValue, setFilterValue] = useState('');\n const [editError, setEditError] = useState('');\n const [selected, setSelected] = useState<SelectedTag[]>([]);\n const [items, setItems] = useState<MenuProps['items']>([]);\n const [pauseSelectedDescendantEvaluation, setPauseSelectedDescendantEvaluation] = useState(true);\n const t = useI18n();\n\n const showMenu = !!filterValue && !!items?.length;\n\n const selectedTagValues = useMemo(() => {\n return selected.map(({ text }) => {\n return { id: text, text };\n });\n }, [selected]);\n\n useEffect(() => {\n if (showMenu) {\n setPauseSelectedDescendantEvaluation(true);\n }\n }, [showMenu]);\n\n useEffect(() => {\n setSelected(\n tags.map(tag => {\n return { text: tag };\n })\n );\n }, [tags]);\n\n useEffect(() => {\n const menuItems = availableTags\n .filter(tag => !selected.some(x => x.text === tag))\n .map(tag => {\n return { id: tag, primary: tag };\n });\n\n if (\n filterValue &&\n !menuItems.some(x => x.id === filterValue) &&\n !selected.some(x => x.text === filterValue)\n ) {\n menuItems.push({\n id: `custom:${filterValue}`,\n primary: t('use_input_value', [filterValue])\n });\n }\n\n setItems(menuItems);\n }, [availableTags, filterValue, selected]);\n\n const setInputValue = (value: string) => {\n setEditError('');\n setFilterValue(value);\n onSearch?.(value);\n };\n\n const addTag = (tag: string) => {\n if (tag && !selected.find(x => x.text === tag)) {\n if (items.find(x => x.id === tag)) {\n setSelected(curr => [...curr, { text: tag }]);\n } else {\n setSelected(curr => [...curr, { text: tag, newTag: true }]);\n }\n setInputValue('');\n }\n };\n\n const handlePaste = (e: ClipboardEvent<HTMLInputElement>) => {\n e.preventDefault();\n const potentialTags = e.clipboardData.getData('Text').split(' ');\n\n potentialTags.forEach(potentialTag => {\n addTag(potentialTag);\n });\n };\n\n const handleKeyDown = (e: KeyboardEvent<HTMLInputElement>) => {\n if (e.key === ' ') {\n addTag(filterValue);\n }\n };\n\n return (\n <Modal\n heading={t('edit_tags')}\n actions={\n <>\n <Button onClick={dismiss}>{t('cancel')}</Button>\n <Button\n variant='primary'\n onClick={() => {\n onEditTags(selected)\n .then(dismiss)\n .catch((error: unknown) => {\n if (error instanceof Error) {\n setEditError(error.message || t('unknown_error'));\n } else {\n setEditError(t('unknown_error'));\n }\n });\n }}\n >\n {t('submit')}\n </Button>\n </>\n }\n >\n {editError && (\n <StyledBanner\n id='edit-tags-error'\n variant='urgent'\n messages={[editError]}\n onDismiss={() => {\n setEditError('');\n }}\n />\n )}\n <MultiSelectInput\n ref={inputRef}\n selected={selectedTagValues}\n value={filterValue}\n onChange={(e: ChangeEvent<HTMLInputElement>) => {\n setInputValue(e.target.value.trim());\n }}\n onRemove={(id: string, index: number) => {\n if (selected[index].text === id) {\n const updatedSelected = [...selected];\n updatedSelected.splice(index, 1);\n setSelected(updatedSelected);\n setEditError('');\n }\n }}\n onBlur={() => {\n setPauseSelectedDescendantEvaluation(true);\n setInputValue('');\n }}\n onPaste={handlePaste}\n onKeyDown={handleKeyDown}\n onSelectedBlur={() => {\n setPauseSelectedDescendantEvaluation(true);\n }}\n onSelectedFocus={() => {\n setPauseSelectedDescendantEvaluation(false);\n }}\n pauseDescendantEvaluation={pauseSelectedDescendantEvaluation}\n autoFocus\n />\n <Popover\n as={StyledMenuPopover}\n show={showMenu}\n target={inputRef.current}\n placement='bottom-start'\n onMouseDown={(e: MouseEvent) => e.preventDefault()}\n >\n <Menu\n role='listbox'\n mode='action'\n items={items}\n focusControlEl={inputRef.current || undefined}\n onItemClick={id => {\n if (id.includes('custom:')) {\n const tagValue = id.replace('custom:', '');\n if (!selected.some(x => x.text === tagValue)) {\n setSelected(curr => [...curr, { text: tagValue, newTag: true }]);\n }\n } else {\n setSelected(curr => [...curr, { text: id }]);\n }\n setInputValue('');\n }}\n arrowNavigationUnsupported\n />\n </Popover>\n </Modal>\n );\n};\n\nconst Tags: FunctionComponent<TagsProps & ForwardProps> = forwardRef(\n (\n {\n tags,\n availableTags,\n loading,\n error,\n onSearch,\n onTagClick,\n onEditTags,\n ...restProps\n }: PropsWithoutRef<TagsProps>,\n ref: TagsProps['ref']\n ) => {\n const { create: createModal } = useModalManager();\n const editModalMethods = useRef<ModalMethods<EditTagModalProps>>();\n const containerRef = useRef<HTMLDivElement>(null);\n const contentRef = useRef<HTMLDivElement>(null);\n const consolidatedRef = useConsolidatedRef(containerRef, ref);\n const [footer, setFooter] = useState(false);\n const [viewAll, setViewAll] = useState(false);\n const t = useI18n();\n\n useEffect(() => {\n if (containerRef.current && contentRef.current) {\n if (\n contentRef.current.getBoundingClientRect().bottom >\n containerRef.current.getBoundingClientRect().bottom\n ) {\n setFooter(true);\n } else {\n setFooter(false);\n }\n }\n }, [containerRef.current, contentRef.current, tags]);\n\n useEffect(() => {\n if (!onEditTags) {\n editModalMethods.current?.dismiss();\n } else {\n editModalMethods.current?.update({\n tags,\n availableTags,\n onSearch,\n onEditTags\n });\n }\n }, [availableTags, tags, onSearch, onEditTags]);\n\n const openEditModal = () => {\n if (!onEditTags) return;\n\n editModalMethods.current = createModal(EditTagModal, {\n tags,\n availableTags,\n onSearch,\n onEditTags\n });\n };\n\n const content = useMemo(() => {\n if (loading) {\n return <Progress placement='local' />;\n }\n\n if (error) {\n if (typeof error === 'boolean') return <ErrorState />;\n if (typeof error === 'string') return <ErrorState message={error} />;\n return <ErrorState {...error} />;\n }\n\n return tags.length > 0 ? (\n <Flex ref={contentRef} container={{ gap: 1, wrap: 'wrap' }}>\n {tags.map(tag => {\n return (\n <Tag key={tag} onClick={() => onTagClick?.(tag)}>\n {tag}\n </Tag>\n );\n })}\n </Flex>\n ) : (\n <EmptyState />\n );\n }, [loading, error, tags]);\n\n return (\n <Card\n ref={consolidatedRef}\n {...restProps}\n as={StyledTags}\n viewAll={viewAll}\n isLoading={loading}\n >\n <CardHeader>\n <Flex container={{ alignItems: 'center', gap: 1 }}>\n <Icon name='tag' />\n <Text variant='h2'>{t('tags')}</Text>\n <Count>{tags.length}</Count>\n </Flex>\n <Actions\n items={\n onEditTags\n ? [\n {\n id: 'editTags',\n text: t('edit_tags'),\n icon: 'pencil',\n onClick: openEditModal,\n disabled: !!error\n }\n ]\n : []\n }\n />\n </CardHeader>\n <CardContent>{content}</CardContent>\n {footer && (\n <CardFooter justify='center'>\n <Button variant='link' onClick={() => setViewAll(curr => !curr)}>\n {viewAll ? t('view_less') : t('view_all')}\n </Button>\n </CardFooter>\n )}\n </Card>\n );\n }\n);\n\nexport default Tags;\n"]}
@@ -1,20 +1,21 @@
1
- import { ReactNode, FC, ReactElement } from 'react';
2
- import { ForwardProps, NoChildrenProp, TestIdProp } from '@pega/cosmos-react-core';
1
+ import { FC } from 'react';
2
+ import { ForwardProps, NoChildrenProp, ListToolbarProps, SearchInputProps, TestIdProp, AvatarProps } from '@pega/cosmos-react-core';
3
+ import { ViewSelectorProps } from '@pega/cosmos-react-core/lib/components/ListToolbar/ListToolbar.types';
3
4
  import { TaskItemProps } from './TaskList';
4
5
  export interface TasksProps extends NoChildrenProp, TestIdProp {
5
- /** An array of TaskItemProps to generate the list. */
6
+ /** An array of TaskItemProps to generate the list. */
6
7
  items: TaskItemProps[];
7
- /** Content to render when the list is empty. */
8
- emptyPlaceholder: ReactNode;
9
8
  /** Heading text to render at the top of the list. */
10
- headerText: string;
11
- /** A visual element i.e. (Avatar | Icon) to accompany the header text. */
12
- headerVisual?: ReactElement;
13
- /** A region for supplemental task list info or controls. */
14
- headerSecondary?: ReactNode;
9
+ name: ListToolbarProps['name'];
10
+ /** A visual to accompany the header text. */
11
+ avatar?: Pick<AvatarProps, 'name' | 'icon' | 'imageSrc' | 'status'>;
12
+ /** Definition of view selection. */
13
+ viewSelector?: Pick<ViewSelectorProps, 'views' | 'onViewSelect'>;
15
14
  /** Integer representing the total count of tasks. */
16
- count?: number | null;
17
- /** Callback for when to show more/less button is clicked. Lists greater than 3 items will display the show toggle button in its footer. */
15
+ count?: number;
16
+ /** Opt-in search configuration. */
17
+ search?: Pick<SearchInputProps, 'value' | 'onSearchChange'>;
18
+ /** Callback for when to show more/less button is clicked. Lists greater than 3 items will display the show toggle button in its footer if passed. */
18
19
  onExpandToggle?: () => void;
19
20
  }
20
21
  declare const Tasks: FC<ForwardProps & TasksProps>;
@@ -1 +1 @@
1
- {"version":3,"file":"Tasks.d.ts","sourceRoot":"","sources":["../../../src/components/Tasks/Tasks.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,EAAE,EAAE,YAAY,EAAuB,MAAM,OAAO,CAAC;AAGzE,OAAO,EAWL,YAAY,EACZ,cAAc,EACd,UAAU,EAGX,MAAM,yBAAyB,CAAC;AAEjC,OAAiB,EAAY,aAAa,EAAE,MAAM,YAAY,CAAC;AAG/D,MAAM,WAAW,UAAW,SAAQ,cAAc,EAAE,UAAU;IAC5D,uDAAuD;IACvD,KAAK,EAAE,aAAa,EAAE,CAAC;IACvB,gDAAgD;IAChD,gBAAgB,EAAE,SAAS,CAAC;IAC5B,qDAAqD;IACrD,UAAU,EAAE,MAAM,CAAC;IACnB,0EAA0E;IAC1E,YAAY,CAAC,EAAE,YAAY,CAAC;IAC5B,4DAA4D;IAC5D,eAAe,CAAC,EAAE,SAAS,CAAC;IAC5B,qDAAqD;IACrD,KAAK,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACtB,2IAA2I;IAC3I,cAAc,CAAC,EAAE,MAAM,IAAI,CAAC;CAC7B;AAYD,QAAA,MAAM,KAAK,EAAE,EAAE,CAAC,YAAY,GAAG,UAAU,CAkExC,CAAC;AAEF,eAAe,KAAK,CAAC"}
1
+ {"version":3,"file":"Tasks.d.ts","sourceRoot":"","sources":["../../../src/components/Tasks/Tasks.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,EAAE,EAAuB,MAAM,OAAO,CAAC;AAGhD,OAAO,EAOL,YAAY,EACZ,cAAc,EAGd,gBAAgB,EAChB,gBAAgB,EAGhB,UAAU,EACV,WAAW,EAEZ,MAAM,yBAAyB,CAAC;AACjC,OAAO,EAAE,iBAAiB,EAAE,MAAM,sEAAsE,CAAC;AAEzG,OAAiB,EAAY,aAAa,EAAE,MAAM,YAAY,CAAC;AAG/D,MAAM,WAAW,UAAW,SAAQ,cAAc,EAAE,UAAU;IAC5D,sDAAsD;IACtD,KAAK,EAAE,aAAa,EAAE,CAAC;IACvB,qDAAqD;IACrD,IAAI,EAAE,gBAAgB,CAAC,MAAM,CAAC,CAAC;IAC/B,6CAA6C;IAC7C,MAAM,CAAC,EAAE,IAAI,CAAC,WAAW,EAAE,MAAM,GAAG,MAAM,GAAG,UAAU,GAAG,QAAQ,CAAC,CAAC;IACpE,oCAAoC;IACpC,YAAY,CAAC,EAAE,IAAI,CAAC,iBAAiB,EAAE,OAAO,GAAG,cAAc,CAAC,CAAC;IACjE,qDAAqD;IACrD,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,mCAAmC;IACnC,MAAM,CAAC,EAAE,IAAI,CAAC,gBAAgB,EAAE,OAAO,GAAG,gBAAgB,CAAC,CAAC;IAC5D,qJAAqJ;IACrJ,cAAc,CAAC,EAAE,MAAM,IAAI,CAAC;CAC7B;AAYD,QAAA,MAAM,KAAK,EAAE,EAAE,CAAC,YAAY,GAAG,UAAU,CAiExC,CAAC;AAEF,eAAe,KAAK,CAAC"}
@@ -1,9 +1,9 @@
1
1
  import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
2
2
  import { useMemo } from 'react';
3
3
  import styled, { css } from 'styled-components';
4
- import { Card, CardHeader, CardContent, CardFooter, Flex, Text, SummaryItem, Count, Button, useI18n, defaultThemeProp, useTestIds } from '@pega/cosmos-react-core';
4
+ import { Card, CardHeader, CardContent, CardFooter, Button, useI18n, defaultThemeProp, ListToolbar, EmptyState, useTestIds, Avatar } from '@pega/cosmos-react-core';
5
5
  import TaskList, { TaskItem } from './TaskList';
6
- import { getTaskTestIds } from './Tasks.test-ids';
6
+ import { getTasksTestIds } from './Tasks.test-ids';
7
7
  const StyledTasks = styled(Card)(({ theme, openItem }) => {
8
8
  return openItem
9
9
  ? css `
@@ -13,17 +13,15 @@ const StyledTasks = styled(Card)(({ theme, openItem }) => {
13
13
  });
14
14
  StyledTasks.defaultProps = defaultThemeProp;
15
15
  const Tasks = (props) => {
16
- const { testId, items = [], headerText, headerVisual, headerSecondary, count, onExpandToggle, emptyPlaceholder, ...restProps } = props;
17
- const testIds = useTestIds(testId, getTaskTestIds);
16
+ const { testId, items = [], name, avatar, viewSelector, count = items.length, search, onExpandToggle, ...restProps } = props;
17
+ const testIds = useTestIds(testId, getTasksTestIds);
18
18
  const openItem = items.find(item => item.content);
19
19
  const t = useI18n();
20
- const hasFooter = useMemo(() => {
21
- return !openItem && typeof count === 'number' && count > 3;
22
- }, [openItem, count]);
20
+ const hasFooter = !!(!openItem && onExpandToggle && count > 0);
23
21
  const TaskItems = useMemo(() => {
24
- return openItem ? _jsx(TaskItem, { ...openItem }) : _jsx(TaskList, { items: items, hasFooter: hasFooter });
22
+ return openItem ? (_jsx(TaskItem, { ...openItem })) : (_jsx(TaskList, { items: items, hasFooter: hasFooter, testId: testIds.root }));
25
23
  }, [items, openItem]);
26
- return (_jsxs(StyledTasks, { "data-testid": testIds.root, ...restProps, openItem: !!openItem, children: [!openItem && (_jsx(CardHeader, { children: _jsx(SummaryItem, { visual: headerVisual, primary: _jsxs(Flex, { container: { alignItems: 'center', gap: 1 }, children: [_jsx(Text, { "data-testid": testIds.heading, variant: 'h2', children: headerText }), _jsx(Count, { "data-testid": testIds.count, children: count ?? null })] }), secondary: headerSecondary }) })), _jsx(CardContent, { children: items.length > 0 ? TaskItems : emptyPlaceholder }), hasFooter && (_jsx(CardFooter, { justify: 'center', children: _jsx(Button, { "data-testid": testIds.showMoreLess, variant: 'link', "aria-label": t(!!count && count > items.length ? 'show_more' : 'show_less', ['tasks']), onClick: (e) => {
24
+ return (_jsxs(StyledTasks, { "data-testid": testIds.root, ...restProps, openItem: !!openItem, children: [!openItem && (_jsxs(CardHeader, { container: { justify: 'start', alignItems: 'center', gap: 1 }, children: [avatar && _jsx(Avatar, { ...avatar }), _jsx(ListToolbar, { name: name, headingTag: 'h2', viewSelector: viewSelector, count: { total: count }, search: search, item: { grow: 1 } })] })), _jsx(CardContent, { children: items.length > 0 ? TaskItems : _jsx(EmptyState, {}) }), hasFooter && (_jsx(CardFooter, { justify: 'center', children: _jsx(Button, { "data-testid": testIds.showMoreLess, variant: 'link', "aria-label": t(!!count && count > items.length ? 'show_more' : 'show_less', ['tasks']), onClick: (e) => {
27
25
  onExpandToggle?.();
28
26
  if (!!count && count <= items.length) {
29
27
  const { currentTarget } = e;
@@ -1 +1 @@
1
- {"version":3,"file":"Tasks.js","sourceRoot":"","sources":["../../../src/components/Tasks/Tasks.tsx"],"names":[],"mappings":"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","sourcesContent":["import { ReactNode, FC, ReactElement, useMemo, MouseEvent } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport {\n Card,\n CardHeader,\n CardContent,\n CardFooter,\n Flex,\n Text,\n SummaryItem,\n Count,\n Button,\n useI18n,\n ForwardProps,\n NoChildrenProp,\n TestIdProp,\n defaultThemeProp,\n useTestIds\n} from '@pega/cosmos-react-core';\n\nimport TaskList, { TaskItem, TaskItemProps } from './TaskList';\nimport { getTaskTestIds } from './Tasks.test-ids';\n\nexport interface TasksProps extends NoChildrenProp, TestIdProp {\n /** An array of TaskItemProps to generate the list. */\n items: TaskItemProps[];\n /** Content to render when the list is empty. */\n emptyPlaceholder: ReactNode;\n /** Heading text to render at the top of the list. */\n headerText: string;\n /** A visual element i.e. (Avatar | Icon) to accompany the header text. */\n headerVisual?: ReactElement;\n /** A region for supplemental task list info or controls. */\n headerSecondary?: ReactNode;\n /** Integer representing the total count of tasks. */\n count?: number | null;\n /** Callback for when to show more/less button is clicked. Lists greater than 3 items will display the show toggle button in its footer. */\n onExpandToggle?: () => void;\n}\n\nconst StyledTasks = styled(Card)<{ openItem?: boolean }>(({ theme, openItem }) => {\n return openItem\n ? css`\n box-shadow: ${theme.base.shadow.low};\n `\n : null;\n});\n\nStyledTasks.defaultProps = defaultThemeProp;\n\nconst Tasks: FC<ForwardProps & TasksProps> = (props: TasksProps) => {\n const {\n testId,\n items = [],\n headerText,\n headerVisual,\n headerSecondary,\n count,\n onExpandToggle,\n emptyPlaceholder,\n ...restProps\n } = props;\n const testIds = useTestIds(testId, getTaskTestIds);\n const openItem = items.find(item => item.content);\n const t = useI18n();\n\n const hasFooter = useMemo(() => {\n return !openItem && typeof count === 'number' && count > 3;\n }, [openItem, count]);\n\n const TaskItems = useMemo(() => {\n return openItem ? <TaskItem {...openItem} /> : <TaskList items={items} hasFooter={hasFooter} />;\n }, [items, openItem]);\n\n return (\n <StyledTasks data-testid={testIds.root} {...restProps} openItem={!!openItem}>\n {!openItem && (\n <CardHeader>\n <SummaryItem\n visual={headerVisual}\n primary={\n <Flex container={{ alignItems: 'center', gap: 1 }}>\n <Text data-testid={testIds.heading} variant='h2'>\n {headerText}\n </Text>\n <Count data-testid={testIds.count}>{count ?? null}</Count>\n </Flex>\n }\n secondary={headerSecondary}\n />\n </CardHeader>\n )}\n <CardContent>{items.length > 0 ? TaskItems : emptyPlaceholder}</CardContent>\n\n {hasFooter && (\n <CardFooter justify='center'>\n <Button\n data-testid={testIds.showMoreLess}\n variant='link'\n aria-label={t(!!count && count > items.length ? 'show_more' : 'show_less', ['tasks'])}\n onClick={(e: MouseEvent<HTMLButtonElement>) => {\n onExpandToggle?.();\n if (!!count && count <= items.length) {\n const { currentTarget } = e;\n requestAnimationFrame(() => {\n if (currentTarget.getBoundingClientRect().top < 0) currentTarget.scrollIntoView();\n });\n }\n }}\n >\n {t(!!count && count > items.length ? 'show_more' : 'show_less')}\n </Button>\n </CardFooter>\n )}\n </StyledTasks>\n );\n};\n\nexport default Tasks;\n"]}
1
+ {"version":3,"file":"Tasks.js","sourceRoot":"","sources":["../../../src/components/Tasks/Tasks.tsx"],"names":[],"mappings":"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","sourcesContent":["import { FC, useMemo, MouseEvent } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport {\n Card,\n CardHeader,\n CardContent,\n CardFooter,\n Button,\n useI18n,\n ForwardProps,\n NoChildrenProp,\n defaultThemeProp,\n ListToolbar,\n ListToolbarProps,\n SearchInputProps,\n EmptyState,\n useTestIds,\n TestIdProp,\n AvatarProps,\n Avatar\n} from '@pega/cosmos-react-core';\nimport { ViewSelectorProps } from '@pega/cosmos-react-core/lib/components/ListToolbar/ListToolbar.types';\n\nimport TaskList, { TaskItem, TaskItemProps } from './TaskList';\nimport { getTasksTestIds } from './Tasks.test-ids';\n\nexport interface TasksProps extends NoChildrenProp, TestIdProp {\n /** An array of TaskItemProps to generate the list. */\n items: TaskItemProps[];\n /** Heading text to render at the top of the list. */\n name: ListToolbarProps['name'];\n /** A visual to accompany the header text. */\n avatar?: Pick<AvatarProps, 'name' | 'icon' | 'imageSrc' | 'status'>;\n /** Definition of view selection. */\n viewSelector?: Pick<ViewSelectorProps, 'views' | 'onViewSelect'>;\n /** Integer representing the total count of tasks. */\n count?: number;\n /** Opt-in search configuration. */\n search?: Pick<SearchInputProps, 'value' | 'onSearchChange'>;\n /** Callback for when to show more/less button is clicked. Lists greater than 3 items will display the show toggle button in its footer if passed. */\n onExpandToggle?: () => void;\n}\n\nconst StyledTasks = styled(Card)<{ openItem?: boolean }>(({ theme, openItem }) => {\n return openItem\n ? css`\n box-shadow: ${theme.base.shadow.low};\n `\n : null;\n});\n\nStyledTasks.defaultProps = defaultThemeProp;\n\nconst Tasks: FC<ForwardProps & TasksProps> = (props: TasksProps) => {\n const {\n testId,\n items = [],\n name,\n avatar,\n viewSelector,\n count = items.length,\n search,\n onExpandToggle,\n ...restProps\n } = props;\n const testIds = useTestIds(testId, getTasksTestIds);\n const openItem = items.find(item => item.content);\n const t = useI18n();\n\n const hasFooter = !!(!openItem && onExpandToggle && count > 0);\n\n const TaskItems = useMemo(() => {\n return openItem ? (\n <TaskItem {...openItem} />\n ) : (\n <TaskList items={items} hasFooter={hasFooter} testId={testIds.root} />\n );\n }, [items, openItem]);\n\n return (\n <StyledTasks data-testid={testIds.root} {...restProps} openItem={!!openItem}>\n {!openItem && (\n <CardHeader container={{ justify: 'start', alignItems: 'center', gap: 1 }}>\n {avatar && <Avatar {...avatar} />}\n <ListToolbar\n name={name}\n headingTag='h2'\n viewSelector={viewSelector}\n count={{ total: count }}\n search={search}\n item={{ grow: 1 }}\n />\n </CardHeader>\n )}\n <CardContent>{items.length > 0 ? TaskItems : <EmptyState />}</CardContent>\n\n {hasFooter && (\n <CardFooter justify='center'>\n <Button\n data-testid={testIds.showMoreLess}\n variant='link'\n aria-label={t(!!count && count > items.length ? 'show_more' : 'show_less', ['tasks'])}\n onClick={(e: MouseEvent<HTMLButtonElement>) => {\n onExpandToggle?.();\n if (!!count && count <= items.length) {\n const { currentTarget } = e;\n requestAnimationFrame(() => {\n if (currentTarget.getBoundingClientRect().top < 0) currentTarget.scrollIntoView();\n });\n }\n }}\n >\n {t(!!count && count > items.length ? 'show_more' : 'show_less')}\n </Button>\n </CardFooter>\n )}\n </StyledTasks>\n );\n};\n\nexport default Tasks;\n"]}
@@ -1,4 +1,4 @@
1
- export declare const getTaskTestIds: (testIdProp?: string | undefined) => import("@pega/cosmos-react-core").TestIdsRecord<readonly ["heading", "count", "show-more-less"]>;
1
+ export declare const getTasksTestIds: (testIdProp?: string | undefined) => import("@pega/cosmos-react-core").TestIdsRecord<readonly ["show-more-less"]>;
2
2
  export declare const getTaskListTestIds: (testIdProp?: string | undefined) => import("@pega/cosmos-react-core").TestIdsRecord<readonly []>;
3
3
  export declare const getTaskItemTestIds: (testIdProp?: string | undefined) => import("@pega/cosmos-react-core").TestIdsRecord<readonly ["open-task"]>;
4
4
  //# sourceMappingURL=Tasks.test-ids.d.ts.map
@@ -1 +1 @@
1
- {"version":3,"file":"Tasks.test-ids.d.ts","sourceRoot":"","sources":["../../../src/components/Tasks/Tasks.test-ids.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,cAAc,uIAIhB,CAAC;AAEZ,eAAO,MAAM,kBAAkB,mGAA0C,CAAC;AAE1E,eAAO,MAAM,kBAAkB,8GAAqD,CAAC"}
1
+ {"version":3,"file":"Tasks.test-ids.d.ts","sourceRoot":"","sources":["../../../src/components/Tasks/Tasks.test-ids.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,eAAe,mHAAsD,CAAC;AAEnF,eAAO,MAAM,kBAAkB,mGAA0C,CAAC;AAE1E,eAAO,MAAM,kBAAkB,8GAAqD,CAAC"}
@@ -1,9 +1,5 @@
1
1
  import { createTestIds } from '@pega/cosmos-react-core';
2
- export const getTaskTestIds = createTestIds('tasks', [
3
- 'heading',
4
- 'count',
5
- 'show-more-less'
6
- ]);
2
+ export const getTasksTestIds = createTestIds('tasks', ['show-more-less']);
7
3
  export const getTaskListTestIds = createTestIds('task-list', []);
8
4
  export const getTaskItemTestIds = createTestIds('task-item', ['open-task']);
9
5
  //# sourceMappingURL=Tasks.test-ids.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"Tasks.test-ids.js","sourceRoot":"","sources":["../../../src/components/Tasks/Tasks.test-ids.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,yBAAyB,CAAC;AAExD,MAAM,CAAC,MAAM,cAAc,GAAG,aAAa,CAAC,OAAO,EAAE;IACnD,SAAS;IACT,OAAO;IACP,gBAAgB;CACR,CAAC,CAAC;AAEZ,MAAM,CAAC,MAAM,kBAAkB,GAAG,aAAa,CAAC,WAAW,EAAE,EAAW,CAAC,CAAC;AAE1E,MAAM,CAAC,MAAM,kBAAkB,GAAG,aAAa,CAAC,WAAW,EAAE,CAAC,WAAW,CAAU,CAAC,CAAC","sourcesContent":["import { createTestIds } from '@pega/cosmos-react-core';\n\nexport const getTaskTestIds = createTestIds('tasks', [\n 'heading',\n 'count',\n 'show-more-less'\n] as const);\n\nexport const getTaskListTestIds = createTestIds('task-list', [] as const);\n\nexport const getTaskItemTestIds = createTestIds('task-item', ['open-task'] as const);\n"]}
1
+ {"version":3,"file":"Tasks.test-ids.js","sourceRoot":"","sources":["../../../src/components/Tasks/Tasks.test-ids.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,yBAAyB,CAAC;AAExD,MAAM,CAAC,MAAM,eAAe,GAAG,aAAa,CAAC,OAAO,EAAE,CAAC,gBAAgB,CAAU,CAAC,CAAC;AAEnF,MAAM,CAAC,MAAM,kBAAkB,GAAG,aAAa,CAAC,WAAW,EAAE,EAAW,CAAC,CAAC;AAE1E,MAAM,CAAC,MAAM,kBAAkB,GAAG,aAAa,CAAC,WAAW,EAAE,CAAC,WAAW,CAAU,CAAC,CAAC","sourcesContent":["import { createTestIds } from '@pega/cosmos-react-core';\n\nexport const getTasksTestIds = createTestIds('tasks', ['show-more-less'] as const);\n\nexport const getTaskListTestIds = createTestIds('task-list', [] as const);\n\nexport const getTaskItemTestIds = createTestIds('task-item', ['open-task'] as const);\n"]}
@@ -1,6 +1,4 @@
1
- export { default } from './Tasks';
2
- export { TasksProps } from './Tasks';
3
- export { default as TaskList } from './TaskList';
4
- export { TaskListProps } from './TaskList';
5
- export { TaskItemProps } from './TaskList';
1
+ export { default, type TasksProps } from './Tasks';
2
+ export { default as TaskList, type TaskListProps, type TaskItemProps } from './TaskList';
3
+ export { listToolbarHelpers as tasksHelpers } from '@pega/cosmos-react-core';
6
4
  //# sourceMappingURL=index.d.ts.map
@@ -1 +1 @@
1
- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Tasks/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,SAAS,CAAC;AAClC,OAAO,EAAE,UAAU,EAAE,MAAM,SAAS,CAAC;AACrC,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,YAAY,CAAC;AACjD,OAAO,EAAE,aAAa,EAAE,MAAM,YAAY,CAAC;AAC3C,OAAO,EAAE,aAAa,EAAE,MAAM,YAAY,CAAC"}
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Tasks/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,KAAK,UAAU,EAAE,MAAM,SAAS,CAAC;AACnD,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,KAAK,aAAa,EAAE,KAAK,aAAa,EAAE,MAAM,YAAY,CAAC;AACzF,OAAO,EAAE,kBAAkB,IAAI,YAAY,EAAE,MAAM,yBAAyB,CAAC"}
@@ -1,3 +1,4 @@
1
1
  export { default } from './Tasks';
2
2
  export { default as TaskList } from './TaskList';
3
+ export { listToolbarHelpers as tasksHelpers } from '@pega/cosmos-react-core';
3
4
  //# sourceMappingURL=index.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/Tasks/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,SAAS,CAAC;AAElC,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,YAAY,CAAC","sourcesContent":["export { default } from './Tasks';\nexport { TasksProps } from './Tasks';\nexport { default as TaskList } from './TaskList';\nexport { TaskListProps } from './TaskList';\nexport { TaskItemProps } from './TaskList';\n"]}
1
+ {"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/Tasks/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAmB,MAAM,SAAS,CAAC;AACnD,OAAO,EAAE,OAAO,IAAI,QAAQ,EAA0C,MAAM,YAAY,CAAC;AACzF,OAAO,EAAE,kBAAkB,IAAI,YAAY,EAAE,MAAM,yBAAyB,CAAC","sourcesContent":["export { default, type TasksProps } from './Tasks';\nexport { default as TaskList, type TaskListProps, type TaskItemProps } from './TaskList';\nexport { listToolbarHelpers as tasksHelpers } from '@pega/cosmos-react-core';\n"]}
@@ -25,12 +25,12 @@ export default interface TimelineProps extends BaseProps, NoChildrenProp {
25
25
  currentTime: Date;
26
26
  /**
27
27
  * List of activity sorted in ascending or descending order.
28
- * @default "descending"
28
+ * @default 'descending'
29
29
  */
30
30
  sortOrder?: TimelineSortOrder;
31
31
  /**
32
32
  * List of activity grouped by day, month, quarter or year.
33
- * @default "date"
33
+ * @default 'date'
34
34
  */
35
35
  groupBy?: TimelineGroupBy;
36
36
  /**
@@ -49,7 +49,7 @@ export interface TimelineToolbarProps extends OmitStrict<ListToolbarProps, 'sort
49
49
  onItemClick: (id: TimelineSortOrder, e: MouseEvent<AcceptedMouseEventElement>) => void;
50
50
  /**
51
51
  * Currently selected sort order.
52
- * @default "descending"
52
+ * @default 'descending'
53
53
  */
54
54
  selected: TimelineProps['sortOrder'];
55
55
  };
@@ -58,7 +58,7 @@ export interface TimelineToolbarProps extends OmitStrict<ListToolbarProps, 'sort
58
58
  onItemClick: (id: TimelineGroupBy, e: MouseEvent<AcceptedMouseEventElement>) => void;
59
59
  /**
60
60
  * Currently selected sort order.
61
- * @default "date"
61
+ * @default 'date'
62
62
  */
63
63
  selected: TimelineProps['groupBy'];
64
64
  };
@@ -1 +1 @@
1
- {"version":3,"file":"Timeline.types.js","sourceRoot":"","sources":["../../../src/components/Timeline/Timeline.types.ts"],"names":[],"mappings":"","sourcesContent":["import { MouseEvent, ReactNode, Ref } from 'react';\n\nimport {\n BaseProps,\n FieldValueListProps,\n IconProps,\n ListToolbarProps,\n NoChildrenProp,\n OmitStrict,\n StatusProps\n} from '@pega/cosmos-react-core';\nimport { DateTimeVariant } from '@pega/cosmos-react-core/lib/components/DateTime/DateTime.types';\nimport { AcceptedMouseEventElement } from '@pega/cosmos-react-core/lib/components/Menu/Menu.types';\n\nexport interface ActivityObject {\n /** Unique id for activity */\n id: string;\n /** Date as ISO8601 string, timestamp or native Date object. */\n date: string | number | Date;\n /** Header region for rendering text and links. */\n title: ReactNode;\n /** Name of the icon (to be selected from default Pega icon set) */\n icon?: IconProps['name'];\n /** Represents the current status of activity */\n status?: StatusProps;\n /** The set of field values to render in the list. */\n content?: FieldValueListProps['fields'] | ReactNode;\n}\n\nexport type TimelineSortOrder = 'ascending' | 'descending';\nexport type TimelineGroupBy =\n | Extract<DateTimeVariant, 'date' | 'monthyear' | 'quarteryear' | 'year'>\n | 'none';\n\nexport default interface TimelineProps extends BaseProps, NoChildrenProp {\n /** List of activity */\n activity: ActivityObject[];\n /** Current time as Date */\n currentTime: Date;\n /**\n * List of activity sorted in ascending or descending order.\n * @default \"descending\"\n */\n sortOrder?: TimelineSortOrder;\n /**\n * List of activity grouped by day, month, quarter or year.\n * @default \"date\"\n */\n groupBy?: TimelineGroupBy;\n /**\n * Show a Progress indicator at the end of a list where newly loaded items will be appended.\n * @default false\n */\n loading?: boolean;\n /** Callback to fetch more activity items */\n loadMore?: () => void;\n /** Ref for the wrapping element. */\n ref?: Ref<HTMLTableElement>;\n}\n\nexport interface TimelineToolbarProps extends OmitStrict<ListToolbarProps, 'sort' | 'group'> {\n sort?: {\n /** An item click handler for all item clicks. */\n onItemClick: (id: TimelineSortOrder, e: MouseEvent<AcceptedMouseEventElement>) => void;\n /**\n * Currently selected sort order.\n * @default \"descending\"\n */\n selected: TimelineProps['sortOrder'];\n };\n group?: {\n /** An item click handler for all item clicks. */\n onItemClick: (id: TimelineGroupBy, e: MouseEvent<AcceptedMouseEventElement>) => void;\n /**\n * Currently selected sort order.\n * @default \"date\"\n */\n selected: TimelineProps['groupBy'];\n };\n}\n"]}
1
+ {"version":3,"file":"Timeline.types.js","sourceRoot":"","sources":["../../../src/components/Timeline/Timeline.types.ts"],"names":[],"mappings":"","sourcesContent":["import { MouseEvent, ReactNode, Ref } from 'react';\n\nimport {\n BaseProps,\n FieldValueListProps,\n IconProps,\n ListToolbarProps,\n NoChildrenProp,\n OmitStrict,\n StatusProps\n} from '@pega/cosmos-react-core';\nimport { DateTimeVariant } from '@pega/cosmos-react-core/lib/components/DateTime/DateTime.types';\nimport { AcceptedMouseEventElement } from '@pega/cosmos-react-core/lib/components/Menu/Menu.types';\n\nexport interface ActivityObject {\n /** Unique id for activity */\n id: string;\n /** Date as ISO8601 string, timestamp or native Date object. */\n date: string | number | Date;\n /** Header region for rendering text and links. */\n title: ReactNode;\n /** Name of the icon (to be selected from default Pega icon set) */\n icon?: IconProps['name'];\n /** Represents the current status of activity */\n status?: StatusProps;\n /** The set of field values to render in the list. */\n content?: FieldValueListProps['fields'] | ReactNode;\n}\n\nexport type TimelineSortOrder = 'ascending' | 'descending';\nexport type TimelineGroupBy =\n | Extract<DateTimeVariant, 'date' | 'monthyear' | 'quarteryear' | 'year'>\n | 'none';\n\nexport default interface TimelineProps extends BaseProps, NoChildrenProp {\n /** List of activity */\n activity: ActivityObject[];\n /** Current time as Date */\n currentTime: Date;\n /**\n * List of activity sorted in ascending or descending order.\n * @default 'descending'\n */\n sortOrder?: TimelineSortOrder;\n /**\n * List of activity grouped by day, month, quarter or year.\n * @default 'date'\n */\n groupBy?: TimelineGroupBy;\n /**\n * Show a Progress indicator at the end of a list where newly loaded items will be appended.\n * @default false\n */\n loading?: boolean;\n /** Callback to fetch more activity items */\n loadMore?: () => void;\n /** Ref for the wrapping element. */\n ref?: Ref<HTMLTableElement>;\n}\n\nexport interface TimelineToolbarProps extends OmitStrict<ListToolbarProps, 'sort' | 'group'> {\n sort?: {\n /** An item click handler for all item clicks. */\n onItemClick: (id: TimelineSortOrder, e: MouseEvent<AcceptedMouseEventElement>) => void;\n /**\n * Currently selected sort order.\n * @default 'descending'\n */\n selected: TimelineProps['sortOrder'];\n };\n group?: {\n /** An item click handler for all item clicks. */\n onItemClick: (id: TimelineGroupBy, e: MouseEvent<AcceptedMouseEventElement>) => void;\n /**\n * Currently selected sort order.\n * @default 'date'\n */\n selected: TimelineProps['groupBy'];\n };\n}\n"]}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@pega/cosmos-react-work",
3
- "version": "4.0.0-dev.13.0",
3
+ "version": "4.0.0-dev.14.1",
4
4
  "author": "Pegasystems",
5
5
  "license": "SEE LICENSE IN LICENSE",
6
6
  "repository": {
@@ -20,7 +20,7 @@
20
20
  "build": "tsc -b"
21
21
  },
22
22
  "dependencies": {
23
- "@pega/cosmos-react-core": "4.0.0-dev.13.0",
23
+ "@pega/cosmos-react-core": "4.0.0-dev.14.1",
24
24
  "@types/react": "^16.14.24 || ^17.0.38",
25
25
  "@types/react-dom": "^16.9.14 || ^17.0.11",
26
26
  "@types/styled-components": "^5.1.26",
@@ -40,6 +40,8 @@
40
40
  "@storybook/theming": "^6.4.19",
41
41
  "@testing-library/react": "^12.1.3",
42
42
  "@testing-library/user-event": "^13.5.0",
43
- "typescript": "~4.9.5"
43
+ "@types/dompurify": "^2.3.4",
44
+ "dompurify": "^2.4.0",
45
+ "typescript": "~5.0.2"
44
46
  }
45
47
  }
@@ -1 +0,0 @@
1
- {"version":3,"file":"CaseHeader.d.ts","sourceRoot":"","sources":["../../../src/components/CaseView/CaseHeader.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,EAAE,EAAsB,MAAM,OAAO,CAAC;AA8B/C,QAAA,MAAM,UAAU,EAAE,EAmJjB,CAAC;AAEF,eAAe,UAAU,CAAC"}
@@ -1,49 +0,0 @@
1
- import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
2
- import { useRef } from 'react';
3
- import { Breadcrumbs, Flex, Icon, registerIcon, Text, Link, Button, MenuButton, useI18n, useAfterInitialEffect } from '@pega/cosmos-react-core';
4
- import * as pencilIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/pencil.icon';
5
- import * as moreIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/more.icon';
6
- import { StyledCaseHeader, StyledCaseIconWrap, StyledCaseHeaderText, StyledPromotedActions, StyledExpandCollapseButton, StyledSubheading } from './CaseView.styles';
7
- import { useCaseViewContext } from './CaseView.context';
8
- registerIcon(pencilIcon, moreIcon);
9
- const CaseHeader = () => {
10
- const t = useI18n();
11
- const { testIds, caseId, icon, heading, subheading, actions, caseLink, parentCases, onEdit, followed, onFollowedChange, promotedActions, summaryId, summaryExpanded, onToggleSummary, isPreview, aboveMD, persistentUtility } = useCaseViewContext();
12
- const caseActions = actions
13
- ? actions.map(action => {
14
- return {
15
- ...action,
16
- primary: action.text,
17
- visual: action.icon ? _jsx(Icon, { name: action.icon }) : null
18
- };
19
- })
20
- : undefined;
21
- const toggleButtonRef = useRef(null);
22
- // FIXME: This is a hack to get the Tooltip to reset its position when the summary changes layout.
23
- useAfterInitialEffect(() => {
24
- if (toggleButtonRef.current && toggleButtonRef.current === document.activeElement) {
25
- toggleButtonRef.current.blur();
26
- setTimeout(() => {
27
- toggleButtonRef.current?.focus();
28
- }, 0);
29
- }
30
- }, [summaryExpanded]);
31
- return (_jsxs("div", { children: [_jsxs(Flex, { as: StyledCaseHeader, container: { gap: 2, alignItems: 'start' }, children: [!isPreview && aboveMD && onToggleSummary && !persistentUtility && (_jsx(StyledExpandCollapseButton, { ref: toggleButtonRef, onClick: onToggleSummary, label: t(summaryExpanded ? 'collapse_summary' : 'expand_summary'), icon: true, compact: true, "aria-expanded": summaryExpanded ? 'true' : 'false', "aria-controls": summaryId, children: _jsx(Icon, { name: 'arrow-micro-left' }) })), icon && (_jsx(Flex, { container: true, item: { shrink: 0 }, as: StyledCaseIconWrap, children: icon })), _jsxs(Flex, { as: StyledCaseHeaderText, container: { direction: 'column' }, item: { grow: 1, shrink: 0, basis: '0' }, children: [_jsx(Text, { "data-testid": testIds.heading, variant: 'h1', children: caseLink ? _jsx(Link, { ...caseLink, children: heading }) : heading }), subheading && (!parentCases || subheading !== caseId) && (_jsx(StyledSubheading, { "data-testid": testIds.subheading, children: subheading })), parentCases && (_jsx(Breadcrumbs, { forwardedAs: 'p', path: [
32
- ...parentCases,
33
- { ...caseLink, id: caseId, primary: caseId, href: caseLink?.href }
34
- ] }))] }), _jsxs("div", { children: [onEdit && (_jsx(Button, { "data-testid": testIds.edit, icon: true, variant: 'simple', onClick: onEdit, label: t('edit'), children: _jsx(Icon, { name: 'pencil' }) })), caseActions && (_jsx(MenuButton, { "data-testid": testIds.actions, icon: 'more', iconOnly: true, variant: 'simple', text: t('actions'), menu: {
35
- items: followed !== undefined
36
- ? [
37
- {
38
- id: 'follow',
39
- primary: followed ? t('unfollow') : t('follow'),
40
- onClick: () => onFollowedChange?.(!followed)
41
- },
42
- ...caseActions
43
- ]
44
- : caseActions,
45
- scrollAt: 20
46
- } }))] })] }), promotedActions && promotedActions.length > 0 ? (_jsx(Flex, { "data-testid": testIds.promotedActions, as: StyledPromotedActions, container: { wrap: 'wrap', gap: 1, pad: [1, 2] }, children: promotedActions.map(({ id, text, onClick }) => (_jsx(Button, { variant: 'secondary', onClick: (e) => onClick?.(id, e), children: text }, text))) })) : null] }));
47
- };
48
- export default CaseHeader;
49
- //# sourceMappingURL=CaseHeader.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"CaseHeader.js","sourceRoot":"","sources":["../../../src/components/CaseView/CaseHeader.tsx"],"names":[],"mappings":"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","sourcesContent":["import { FC, MouseEvent, useRef } from 'react';\n\nimport {\n Breadcrumbs,\n Flex,\n Icon,\n registerIcon,\n Text,\n Link,\n MenuItemProps,\n Button,\n MenuButton,\n useI18n,\n useAfterInitialEffect\n} from '@pega/cosmos-react-core';\nimport * as pencilIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/pencil.icon';\nimport * as moreIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/more.icon';\n\nimport {\n StyledCaseHeader,\n StyledCaseIconWrap,\n StyledCaseHeaderText,\n StyledPromotedActions,\n StyledExpandCollapseButton,\n StyledSubheading\n} from './CaseView.styles';\nimport { useCaseViewContext } from './CaseView.context';\n\nregisterIcon(pencilIcon, moreIcon);\n\nconst CaseHeader: FC = () => {\n const t = useI18n();\n\n const {\n testIds,\n caseId,\n icon,\n heading,\n subheading,\n actions,\n caseLink,\n parentCases,\n onEdit,\n followed,\n onFollowedChange,\n promotedActions,\n summaryId,\n summaryExpanded,\n onToggleSummary,\n isPreview,\n aboveMD,\n persistentUtility\n } = useCaseViewContext();\n\n const caseActions: MenuItemProps[] | undefined = actions\n ? actions.map(action => {\n return {\n ...action,\n primary: action.text,\n visual: action.icon ? <Icon name={action.icon} /> : null\n };\n })\n : undefined;\n\n const toggleButtonRef = useRef<HTMLButtonElement>(null);\n\n // FIXME: This is a hack to get the Tooltip to reset its position when the summary changes layout.\n useAfterInitialEffect(() => {\n if (toggleButtonRef.current && toggleButtonRef.current === document.activeElement) {\n toggleButtonRef.current.blur();\n setTimeout(() => {\n toggleButtonRef.current?.focus();\n }, 0);\n }\n }, [summaryExpanded]);\n\n return (\n <div>\n <Flex as={StyledCaseHeader} container={{ gap: 2, alignItems: 'start' }}>\n {!isPreview && aboveMD && onToggleSummary && !persistentUtility && (\n <StyledExpandCollapseButton\n ref={toggleButtonRef}\n onClick={onToggleSummary}\n label={t(summaryExpanded ? 'collapse_summary' : 'expand_summary')}\n icon\n compact\n aria-expanded={summaryExpanded ? 'true' : 'false'}\n aria-controls={summaryId}\n >\n <Icon name='arrow-micro-left' />\n </StyledExpandCollapseButton>\n )}\n\n {icon && (\n <Flex container item={{ shrink: 0 }} as={StyledCaseIconWrap}>\n {icon}\n </Flex>\n )}\n <Flex\n as={StyledCaseHeaderText}\n container={{ direction: 'column' }}\n item={{ grow: 1, shrink: 0, basis: '0' }}\n >\n <Text data-testid={testIds.heading} variant='h1'>\n {caseLink ? <Link {...caseLink}>{heading}</Link> : heading}\n </Text>\n {subheading && (!parentCases || subheading !== caseId) && (\n <StyledSubheading data-testid={testIds.subheading}>{subheading}</StyledSubheading>\n )}\n {parentCases && (\n <Breadcrumbs\n forwardedAs='p'\n path={[\n ...parentCases,\n { ...caseLink, id: caseId, primary: caseId, href: caseLink?.href }\n ]}\n />\n )}\n </Flex>\n <div>\n {onEdit && (\n <Button\n data-testid={testIds.edit}\n icon\n variant='simple'\n onClick={onEdit}\n label={t('edit')}\n >\n <Icon name='pencil' />\n </Button>\n )}\n\n {caseActions && (\n <MenuButton\n data-testid={testIds.actions}\n icon='more'\n iconOnly\n variant='simple'\n text={t('actions')}\n menu={{\n items:\n followed !== undefined\n ? [\n {\n id: 'follow',\n primary: followed ? t('unfollow') : t('follow'),\n onClick: () => onFollowedChange?.(!followed)\n },\n ...caseActions\n ]\n : caseActions,\n scrollAt: 20\n }}\n />\n )}\n </div>\n </Flex>\n\n {promotedActions && promotedActions.length > 0 ? (\n <Flex\n data-testid={testIds.promotedActions}\n as={StyledPromotedActions}\n container={{ wrap: 'wrap', gap: 1, pad: [1, 2] }}\n >\n {promotedActions.map(({ id, text, onClick }) => (\n <Button\n key={text}\n variant='secondary'\n onClick={(e: MouseEvent<HTMLButtonElement>) => onClick?.(id, e)}\n >\n {text}\n </Button>\n ))}\n </Flex>\n ) : null}\n </div>\n );\n};\n\nexport default CaseHeader;\n"]}