@pega/cosmos-react-work 5.0.0-dev.4.7 → 5.0.0-dev.4.8
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.
- package/package.json +2 -2
- package/lib/components/AppAnnouncement/AppAnnouncement.d.ts +0 -23
- package/lib/components/AppAnnouncement/AppAnnouncement.d.ts.map +0 -1
- package/lib/components/AppAnnouncement/AppAnnouncement.js +0 -93
- package/lib/components/AppAnnouncement/AppAnnouncement.js.map +0 -1
- package/lib/components/AppAnnouncement/index.d.ts +0 -3
- package/lib/components/AppAnnouncement/index.d.ts.map +0 -1
- package/lib/components/AppAnnouncement/index.js +0 -2
- package/lib/components/AppAnnouncement/index.js.map +0 -1
- package/lib/components/Article/Article.d.ts +0 -49
- package/lib/components/Article/Article.d.ts.map +0 -1
- package/lib/components/Article/Article.js +0 -73
- package/lib/components/Article/Article.js.map +0 -1
- package/lib/components/Article/ArticleFooter.d.ts +0 -40
- package/lib/components/Article/ArticleFooter.d.ts.map +0 -1
- package/lib/components/Article/ArticleFooter.js +0 -54
- package/lib/components/Article/ArticleFooter.js.map +0 -1
- package/lib/components/Article/ArticleMeta.d.ts +0 -13
- package/lib/components/Article/ArticleMeta.d.ts.map +0 -1
- package/lib/components/Article/ArticleMeta.js +0 -24
- package/lib/components/Article/ArticleMeta.js.map +0 -1
- package/lib/components/Article/index.d.ts +0 -5
- package/lib/components/Article/index.d.ts.map +0 -1
- package/lib/components/Article/index.js +0 -3
- package/lib/components/Article/index.js.map +0 -1
- package/lib/components/ArticleList/ArticleList.d.ts +0 -6
- package/lib/components/ArticleList/ArticleList.d.ts.map +0 -1
- package/lib/components/ArticleList/ArticleList.js +0 -132
- package/lib/components/ArticleList/ArticleList.js.map +0 -1
- package/lib/components/ArticleList/ArticleList.types.d.ts +0 -87
- package/lib/components/ArticleList/ArticleList.types.d.ts.map +0 -1
- package/lib/components/ArticleList/ArticleList.types.js +0 -2
- package/lib/components/ArticleList/ArticleList.types.js.map +0 -1
- package/lib/components/ArticleList/ArticleListFilter.d.ts +0 -6
- package/lib/components/ArticleList/ArticleListFilter.d.ts.map +0 -1
- package/lib/components/ArticleList/ArticleListFilter.js +0 -61
- package/lib/components/ArticleList/ArticleListFilter.js.map +0 -1
- package/lib/components/ArticleList/ArticleListHeader.d.ts +0 -5
- package/lib/components/ArticleList/ArticleListHeader.d.ts.map +0 -1
- package/lib/components/ArticleList/ArticleListHeader.js +0 -20
- package/lib/components/ArticleList/ArticleListHeader.js.map +0 -1
- package/lib/components/ArticleList/ArticleSummary.d.ts +0 -7
- package/lib/components/ArticleList/ArticleSummary.d.ts.map +0 -1
- package/lib/components/ArticleList/ArticleSummary.js +0 -56
- package/lib/components/ArticleList/ArticleSummary.js.map +0 -1
- package/lib/components/ArticleList/index.d.ts +0 -6
- package/lib/components/ArticleList/index.d.ts.map +0 -1
- package/lib/components/ArticleList/index.js +0 -4
- package/lib/components/ArticleList/index.js.map +0 -1
- package/lib/components/Assignments/Assignments.d.ts +0 -21
- package/lib/components/Assignments/Assignments.d.ts.map +0 -1
- package/lib/components/Assignments/Assignments.js +0 -20
- package/lib/components/Assignments/Assignments.js.map +0 -1
- package/lib/components/Assignments/Assignments.styles.d.ts +0 -8
- package/lib/components/Assignments/Assignments.styles.d.ts.map +0 -1
- package/lib/components/Assignments/Assignments.styles.js +0 -41
- package/lib/components/Assignments/Assignments.styles.js.map +0 -1
- package/lib/components/Assignments/index.d.ts +0 -2
- package/lib/components/Assignments/index.d.ts.map +0 -1
- package/lib/components/Assignments/index.js +0 -2
- package/lib/components/Assignments/index.js.map +0 -1
- package/lib/components/CasePreview/CasePreview.d.ts +0 -27
- package/lib/components/CasePreview/CasePreview.d.ts.map +0 -1
- package/lib/components/CasePreview/CasePreview.js +0 -82
- package/lib/components/CasePreview/CasePreview.js.map +0 -1
- package/lib/components/CasePreview/CasePreview.test-ids.d.ts +0 -2
- package/lib/components/CasePreview/CasePreview.test-ids.d.ts.map +0 -1
- package/lib/components/CasePreview/CasePreview.test-ids.js +0 -3
- package/lib/components/CasePreview/CasePreview.test-ids.js.map +0 -1
- package/lib/components/CasePreview/index.d.ts +0 -3
- package/lib/components/CasePreview/index.d.ts.map +0 -1
- package/lib/components/CasePreview/index.js +0 -2
- package/lib/components/CasePreview/index.js.map +0 -1
- package/lib/components/CaseView/CaseHeader/CaseHeader.d.ts +0 -4
- package/lib/components/CaseView/CaseHeader/CaseHeader.d.ts.map +0 -1
- package/lib/components/CaseView/CaseHeader/CaseHeader.js +0 -127
- package/lib/components/CaseView/CaseHeader/CaseHeader.js.map +0 -1
- package/lib/components/CaseView/CaseHeader/Summary.d.ts +0 -6
- package/lib/components/CaseView/CaseHeader/Summary.d.ts.map +0 -1
- package/lib/components/CaseView/CaseHeader/Summary.js +0 -182
- package/lib/components/CaseView/CaseHeader/Summary.js.map +0 -1
- package/lib/components/CaseView/CaseSummary.d.ts +0 -4
- package/lib/components/CaseView/CaseSummary.d.ts.map +0 -1
- package/lib/components/CaseView/CaseSummary.js +0 -18
- package/lib/components/CaseView/CaseSummary.js.map +0 -1
- package/lib/components/CaseView/CaseSummaryFields.d.ts +0 -6
- package/lib/components/CaseView/CaseSummaryFields.d.ts.map +0 -1
- package/lib/components/CaseView/CaseSummaryFields.js +0 -18
- package/lib/components/CaseView/CaseSummaryFields.js.map +0 -1
- package/lib/components/CaseView/CaseView.context.d.ts +0 -5
- package/lib/components/CaseView/CaseView.context.d.ts.map +0 -1
- package/lib/components/CaseView/CaseView.context.js +0 -5
- package/lib/components/CaseView/CaseView.context.js.map +0 -1
- package/lib/components/CaseView/CaseView.d.ts +0 -8
- package/lib/components/CaseView/CaseView.d.ts.map +0 -1
- package/lib/components/CaseView/CaseView.js +0 -421
- package/lib/components/CaseView/CaseView.js.map +0 -1
- package/lib/components/CaseView/CaseView.styles.d.ts +0 -45
- package/lib/components/CaseView/CaseView.styles.d.ts.map +0 -1
- package/lib/components/CaseView/CaseView.styles.js +0 -559
- package/lib/components/CaseView/CaseView.styles.js.map +0 -1
- package/lib/components/CaseView/CaseView.test-ids.d.ts +0 -2
- package/lib/components/CaseView/CaseView.test-ids.d.ts.map +0 -1
- package/lib/components/CaseView/CaseView.test-ids.js +0 -18
- package/lib/components/CaseView/CaseView.test-ids.js.map +0 -1
- package/lib/components/CaseView/CaseView.types.d.ts +0 -98
- package/lib/components/CaseView/CaseView.types.d.ts.map +0 -1
- package/lib/components/CaseView/CaseView.types.js +0 -2
- package/lib/components/CaseView/CaseView.types.js.map +0 -1
- package/lib/components/CaseView/UtilitiesSummary.d.ts +0 -9
- package/lib/components/CaseView/UtilitiesSummary.d.ts.map +0 -1
- package/lib/components/CaseView/UtilitiesSummary.js +0 -53
- package/lib/components/CaseView/UtilitiesSummary.js.map +0 -1
- package/lib/components/CaseView/UtilitySummaryItemDialog.d.ts +0 -9
- package/lib/components/CaseView/UtilitySummaryItemDialog.d.ts.map +0 -1
- package/lib/components/CaseView/UtilitySummaryItemDialog.js +0 -29
- package/lib/components/CaseView/UtilitySummaryItemDialog.js.map +0 -1
- package/lib/components/CaseView/index.d.ts +0 -5
- package/lib/components/CaseView/index.d.ts.map +0 -1
- package/lib/components/CaseView/index.js +0 -4
- package/lib/components/CaseView/index.js.map +0 -1
- package/lib/components/ConfigurableLayout/ConfigurableLayout.d.ts +0 -4
- package/lib/components/ConfigurableLayout/ConfigurableLayout.d.ts.map +0 -1
- package/lib/components/ConfigurableLayout/ConfigurableLayout.js +0 -86
- package/lib/components/ConfigurableLayout/ConfigurableLayout.js.map +0 -1
- package/lib/components/ConfigurableLayout/ConfigurableLayout.types.d.ts +0 -41
- package/lib/components/ConfigurableLayout/ConfigurableLayout.types.d.ts.map +0 -1
- package/lib/components/ConfigurableLayout/ConfigurableLayout.types.js +0 -2
- package/lib/components/ConfigurableLayout/ConfigurableLayout.types.js.map +0 -1
- package/lib/components/ConfigurableLayout/LayoutCell.d.ts +0 -6
- package/lib/components/ConfigurableLayout/LayoutCell.d.ts.map +0 -1
- package/lib/components/ConfigurableLayout/LayoutCell.js +0 -64
- package/lib/components/ConfigurableLayout/LayoutCell.js.map +0 -1
- package/lib/components/ConfigurableLayout/defaults.d.ts +0 -4
- package/lib/components/ConfigurableLayout/defaults.d.ts.map +0 -1
- package/lib/components/ConfigurableLayout/defaults.js +0 -4
- package/lib/components/ConfigurableLayout/defaults.js.map +0 -1
- package/lib/components/ConfigurableLayout/index.d.ts +0 -4
- package/lib/components/ConfigurableLayout/index.d.ts.map +0 -1
- package/lib/components/ConfigurableLayout/index.js +0 -3
- package/lib/components/ConfigurableLayout/index.js.map +0 -1
- package/lib/components/ConfigurableLayout/options.d.ts +0 -10
- package/lib/components/ConfigurableLayout/options.d.ts.map +0 -1
- package/lib/components/ConfigurableLayout/options.js +0 -10
- package/lib/components/ConfigurableLayout/options.js.map +0 -1
- package/lib/components/ConfigurableLayout/useTrackWrappedRegions.d.ts +0 -7
- package/lib/components/ConfigurableLayout/useTrackWrappedRegions.d.ts.map +0 -1
- package/lib/components/ConfigurableLayout/useTrackWrappedRegions.js +0 -37
- package/lib/components/ConfigurableLayout/useTrackWrappedRegions.js.map +0 -1
- package/lib/components/Confirmation/Confirmation.d.ts +0 -19
- package/lib/components/Confirmation/Confirmation.d.ts.map +0 -1
- package/lib/components/Confirmation/Confirmation.js +0 -29
- package/lib/components/Confirmation/Confirmation.js.map +0 -1
- package/lib/components/Confirmation/index.d.ts +0 -3
- package/lib/components/Confirmation/index.d.ts.map +0 -1
- package/lib/components/Confirmation/index.js +0 -2
- package/lib/components/Confirmation/index.js.map +0 -1
- package/lib/components/Details/Details.d.ts +0 -38
- package/lib/components/Details/Details.d.ts.map +0 -1
- package/lib/components/Details/Details.js +0 -92
- package/lib/components/Details/Details.js.map +0 -1
- package/lib/components/Details/Details.styles.d.ts +0 -50
- package/lib/components/Details/Details.styles.d.ts.map +0 -1
- package/lib/components/Details/Details.styles.js +0 -204
- package/lib/components/Details/Details.styles.js.map +0 -1
- package/lib/components/Details/Details.test-ids.d.ts +0 -2
- package/lib/components/Details/Details.test-ids.d.ts.map +0 -1
- package/lib/components/Details/Details.test-ids.js +0 -9
- package/lib/components/Details/Details.test-ids.js.map +0 -1
- package/lib/components/Details/DetailsContext.d.ts +0 -9
- package/lib/components/Details/DetailsContext.d.ts.map +0 -1
- package/lib/components/Details/DetailsContext.js +0 -9
- package/lib/components/Details/DetailsContext.js.map +0 -1
- package/lib/components/Details/index.d.ts +0 -4
- package/lib/components/Details/index.d.ts.map +0 -1
- package/lib/components/Details/index.js +0 -4
- package/lib/components/Details/index.js.map +0 -1
- package/lib/components/Glimpse/Glimpse.d.ts +0 -20
- package/lib/components/Glimpse/Glimpse.d.ts.map +0 -1
- package/lib/components/Glimpse/Glimpse.js +0 -12
- package/lib/components/Glimpse/Glimpse.js.map +0 -1
- package/lib/components/Glimpse/index.d.ts +0 -3
- package/lib/components/Glimpse/index.d.ts.map +0 -1
- package/lib/components/Glimpse/index.js +0 -2
- package/lib/components/Glimpse/index.js.map +0 -1
- package/lib/components/IntelligentGuidance/IntelligentGuidance.d.ts +0 -6
- package/lib/components/IntelligentGuidance/IntelligentGuidance.d.ts.map +0 -1
- package/lib/components/IntelligentGuidance/IntelligentGuidance.js +0 -83
- package/lib/components/IntelligentGuidance/IntelligentGuidance.js.map +0 -1
- package/lib/components/IntelligentGuidance/IntelligentGuidance.styles.d.ts +0 -9
- package/lib/components/IntelligentGuidance/IntelligentGuidance.styles.d.ts.map +0 -1
- package/lib/components/IntelligentGuidance/IntelligentGuidance.styles.js +0 -199
- package/lib/components/IntelligentGuidance/IntelligentGuidance.styles.js.map +0 -1
- package/lib/components/IntelligentGuidance/IntelligentGuidance.types.d.ts +0 -35
- package/lib/components/IntelligentGuidance/IntelligentGuidance.types.d.ts.map +0 -1
- package/lib/components/IntelligentGuidance/IntelligentGuidance.types.js +0 -2
- package/lib/components/IntelligentGuidance/IntelligentGuidance.types.js.map +0 -1
- package/lib/components/IntelligentGuidance/index.d.ts +0 -3
- package/lib/components/IntelligentGuidance/index.d.ts.map +0 -1
- package/lib/components/IntelligentGuidance/index.js +0 -2
- package/lib/components/IntelligentGuidance/index.js.map +0 -1
- package/lib/components/Predictions/Predictions.d.ts +0 -6
- package/lib/components/Predictions/Predictions.d.ts.map +0 -1
- package/lib/components/Predictions/Predictions.js +0 -68
- package/lib/components/Predictions/Predictions.js.map +0 -1
- package/lib/components/Predictions/Predictions.types.d.ts +0 -23
- package/lib/components/Predictions/Predictions.types.d.ts.map +0 -1
- package/lib/components/Predictions/Predictions.types.js +0 -2
- package/lib/components/Predictions/Predictions.types.js.map +0 -1
- package/lib/components/Predictions/index.d.ts +0 -3
- package/lib/components/Predictions/index.d.ts.map +0 -1
- package/lib/components/Predictions/index.js +0 -2
- package/lib/components/Predictions/index.js.map +0 -1
- package/lib/components/SearchResults/Filter.d.ts +0 -8
- package/lib/components/SearchResults/Filter.d.ts.map +0 -1
- package/lib/components/SearchResults/Filter.js +0 -45
- package/lib/components/SearchResults/Filter.js.map +0 -1
- package/lib/components/SearchResults/SearchResult.d.ts +0 -4
- package/lib/components/SearchResults/SearchResult.d.ts.map +0 -1
- package/lib/components/SearchResults/SearchResult.js +0 -27
- package/lib/components/SearchResults/SearchResult.js.map +0 -1
- package/lib/components/SearchResults/SearchResults.d.ts +0 -6
- package/lib/components/SearchResults/SearchResults.d.ts.map +0 -1
- package/lib/components/SearchResults/SearchResults.js +0 -121
- package/lib/components/SearchResults/SearchResults.js.map +0 -1
- package/lib/components/SearchResults/SearchResults.styles.d.ts +0 -11
- package/lib/components/SearchResults/SearchResults.styles.d.ts.map +0 -1
- package/lib/components/SearchResults/SearchResults.styles.js +0 -88
- package/lib/components/SearchResults/SearchResults.styles.js.map +0 -1
- package/lib/components/SearchResults/SearchResults.types.d.ts +0 -100
- package/lib/components/SearchResults/SearchResults.types.d.ts.map +0 -1
- package/lib/components/SearchResults/SearchResults.types.js +0 -2
- package/lib/components/SearchResults/SearchResults.types.js.map +0 -1
- package/lib/components/SearchResults/index.d.ts +0 -3
- package/lib/components/SearchResults/index.d.ts.map +0 -1
- package/lib/components/SearchResults/index.js +0 -2
- package/lib/components/SearchResults/index.js.map +0 -1
- package/lib/components/Stages/StageGlimpse.d.ts +0 -8
- package/lib/components/Stages/StageGlimpse.d.ts.map +0 -1
- package/lib/components/Stages/StageGlimpse.js +0 -11
- package/lib/components/Stages/StageGlimpse.js.map +0 -1
- package/lib/components/Stages/Stages.d.ts +0 -6
- package/lib/components/Stages/Stages.d.ts.map +0 -1
- package/lib/components/Stages/Stages.js +0 -107
- package/lib/components/Stages/Stages.js.map +0 -1
- package/lib/components/Stages/Stages.styles.d.ts +0 -14
- package/lib/components/Stages/Stages.styles.d.ts.map +0 -1
- package/lib/components/Stages/Stages.styles.js +0 -270
- package/lib/components/Stages/Stages.styles.js.map +0 -1
- package/lib/components/Stages/Stages.types.d.ts +0 -38
- package/lib/components/Stages/Stages.types.d.ts.map +0 -1
- package/lib/components/Stages/Stages.types.js +0 -2
- package/lib/components/Stages/Stages.types.js.map +0 -1
- package/lib/components/Stages/index.d.ts +0 -3
- package/lib/components/Stages/index.d.ts.map +0 -1
- package/lib/components/Stages/index.js +0 -2
- package/lib/components/Stages/index.js.map +0 -1
- package/lib/components/Stakeholders/StakeholderForm.d.ts +0 -7
- package/lib/components/Stakeholders/StakeholderForm.d.ts.map +0 -1
- package/lib/components/Stakeholders/StakeholderForm.js +0 -49
- package/lib/components/Stakeholders/StakeholderForm.js.map +0 -1
- package/lib/components/Stakeholders/Stakeholders.d.ts +0 -6
- package/lib/components/Stakeholders/Stakeholders.d.ts.map +0 -1
- package/lib/components/Stakeholders/Stakeholders.js +0 -220
- package/lib/components/Stakeholders/Stakeholders.js.map +0 -1
- package/lib/components/Stakeholders/Stakeholders.types.d.ts +0 -75
- package/lib/components/Stakeholders/Stakeholders.types.d.ts.map +0 -1
- package/lib/components/Stakeholders/Stakeholders.types.js +0 -2
- package/lib/components/Stakeholders/Stakeholders.types.js.map +0 -1
- package/lib/components/Stakeholders/index.d.ts +0 -3
- package/lib/components/Stakeholders/index.d.ts.map +0 -1
- package/lib/components/Stakeholders/index.js +0 -2
- package/lib/components/Stakeholders/index.js.map +0 -1
- package/lib/components/Tags/Tags.d.ts +0 -34
- package/lib/components/Tags/Tags.d.ts.map +0 -1
- package/lib/components/Tags/Tags.js +0 -230
- package/lib/components/Tags/Tags.js.map +0 -1
- package/lib/components/Tags/index.d.ts +0 -3
- package/lib/components/Tags/index.d.ts.map +0 -1
- package/lib/components/Tags/index.js +0 -2
- package/lib/components/Tags/index.js.map +0 -1
- package/lib/components/Tasks/TaskList.d.ts +0 -39
- package/lib/components/Tasks/TaskList.d.ts.map +0 -1
- package/lib/components/Tasks/TaskList.js +0 -71
- package/lib/components/Tasks/TaskList.js.map +0 -1
- package/lib/components/Tasks/Tasks.d.ts +0 -29
- package/lib/components/Tasks/Tasks.d.ts.map +0 -1
- package/lib/components/Tasks/Tasks.js +0 -52
- package/lib/components/Tasks/Tasks.js.map +0 -1
- package/lib/components/Tasks/Tasks.test-ids.d.ts +0 -4
- package/lib/components/Tasks/Tasks.test-ids.d.ts.map +0 -1
- package/lib/components/Tasks/Tasks.test-ids.js +0 -5
- package/lib/components/Tasks/Tasks.test-ids.js.map +0 -1
- package/lib/components/Tasks/index.d.ts +0 -4
- package/lib/components/Tasks/index.d.ts.map +0 -1
- package/lib/components/Tasks/index.js +0 -4
- package/lib/components/Tasks/index.js.map +0 -1
- package/lib/components/Timeline/Timeline.d.ts +0 -6
- package/lib/components/Timeline/Timeline.d.ts.map +0 -1
- package/lib/components/Timeline/Timeline.js +0 -26
- package/lib/components/Timeline/Timeline.js.map +0 -1
- package/lib/components/Timeline/Timeline.styles.d.ts +0 -21
- package/lib/components/Timeline/Timeline.styles.d.ts.map +0 -1
- package/lib/components/Timeline/Timeline.styles.js +0 -165
- package/lib/components/Timeline/Timeline.styles.js.map +0 -1
- package/lib/components/Timeline/Timeline.types.d.ts +0 -66
- package/lib/components/Timeline/Timeline.types.d.ts.map +0 -1
- package/lib/components/Timeline/Timeline.types.js +0 -2
- package/lib/components/Timeline/Timeline.types.js.map +0 -1
- package/lib/components/Timeline/TimelineItem.d.ts +0 -13
- package/lib/components/Timeline/TimelineItem.d.ts.map +0 -1
- package/lib/components/Timeline/TimelineItem.js +0 -33
- package/lib/components/Timeline/TimelineItem.js.map +0 -1
- package/lib/components/Timeline/TimelineToolbar.d.ts +0 -6
- package/lib/components/Timeline/TimelineToolbar.d.ts.map +0 -1
- package/lib/components/Timeline/TimelineToolbar.js +0 -68
- package/lib/components/Timeline/TimelineToolbar.js.map +0 -1
- package/lib/components/Timeline/index.d.ts +0 -4
- package/lib/components/Timeline/index.d.ts.map +0 -1
- package/lib/components/Timeline/index.js +0 -3
- package/lib/components/Timeline/index.js.map +0 -1
- package/lib/components/Timeline/utils.d.ts +0 -15
- package/lib/components/Timeline/utils.d.ts.map +0 -1
- package/lib/components/Timeline/utils.js +0 -75
- package/lib/components/Timeline/utils.js.map +0 -1
- package/lib/index.d.ts +0 -37
- package/lib/index.d.ts.map +0 -1
- package/lib/index.js +0 -38
- package/lib/index.js.map +0 -1
|
@@ -1,41 +0,0 @@
|
|
|
1
|
-
import styled, { css } from 'styled-components';
|
|
2
|
-
import { Button, Card, CardContent, defaultThemeProp, StyledCard, StyledIcon, useDirection } from '@pega/cosmos-react-core';
|
|
3
|
-
export const StyledExpandButton = styled(Button)(({ theme: { base: { animation } } }) => {
|
|
4
|
-
const { rtl } = useDirection();
|
|
5
|
-
return css `
|
|
6
|
-
${StyledIcon} {
|
|
7
|
-
transition: transform ${animation.speed} ${animation.timing.ease};
|
|
8
|
-
}
|
|
9
|
-
|
|
10
|
-
&[aria-expanded='true'] ${StyledIcon} {
|
|
11
|
-
transform: rotate(90deg);
|
|
12
|
-
}
|
|
13
|
-
|
|
14
|
-
&[aria-expanded='false'] ${StyledIcon} {
|
|
15
|
-
transform: rotate(${rtl ? 180 : 0}deg);
|
|
16
|
-
}
|
|
17
|
-
|
|
18
|
-
&:hover,
|
|
19
|
-
&:active {
|
|
20
|
-
text-decoration: none;
|
|
21
|
-
}
|
|
22
|
-
`;
|
|
23
|
-
});
|
|
24
|
-
StyledExpandButton.defaultProps = defaultThemeProp;
|
|
25
|
-
export const StyledAssignments = styled(Card)(({ theme, openItem }) => {
|
|
26
|
-
return openItem
|
|
27
|
-
? css `
|
|
28
|
-
box-shadow: ${theme.base.shadow.low};
|
|
29
|
-
`
|
|
30
|
-
: null;
|
|
31
|
-
});
|
|
32
|
-
StyledAssignments.defaultProps = defaultThemeProp;
|
|
33
|
-
export const StyledCardContent = styled(CardContent)(({ theme, openItem }) => {
|
|
34
|
-
return css `
|
|
35
|
-
&:not(${StyledCard} ${StyledCard} > &) {
|
|
36
|
-
padding: ${openItem ? theme.base.spacing : '0'} calc(2 * ${theme.base.spacing});
|
|
37
|
-
}
|
|
38
|
-
`;
|
|
39
|
-
});
|
|
40
|
-
StyledCardContent.defaultProps = defaultThemeProp;
|
|
41
|
-
//# sourceMappingURL=Assignments.styles.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"Assignments.styles.js","sourceRoot":"","sources":["../../../src/components/Assignments/Assignments.styles.ts"],"names":[],"mappings":"AAAA,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAEhD,OAAO,EACL,MAAM,EACN,IAAI,EACJ,WAAW,EACX,gBAAgB,EAChB,UAAU,EACV,UAAU,EACV,YAAY,EACb,MAAM,yBAAyB,CAAC;AAEjC,MAAM,CAAC,MAAM,kBAAkB,GAAG,MAAM,CAAC,MAAM,CAAC,CAC9C,CAAC,EACC,KAAK,EAAE,EACL,IAAI,EAAE,EAAE,SAAS,EAAE,EACpB,EACF,EAAE,EAAE;IACH,MAAM,EAAE,GAAG,EAAE,GAAG,YAAY,EAAE,CAAC;IAC/B,OAAO,GAAG,CAAA;QACN,UAAU;gCACc,SAAS,CAAC,KAAK,IAAI,SAAS,CAAC,MAAM,CAAC,IAAI;;;gCAGxC,UAAU;;;;iCAIT,UAAU;4BACf,GAAG,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC;;;;;;;KAOpC,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,kBAAkB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAEnD,MAAM,CAAC,MAAM,iBAAiB,GAAG,MAAM,CAAC,IAAI,CAAC,CAAyB,CAAC,EAAE,KAAK,EAAE,QAAQ,EAAE,EAAE,EAAE;IAC5F,OAAO,QAAQ;QACb,CAAC,CAAC,GAAG,CAAA;sBACa,KAAK,CAAC,IAAI,CAAC,MAAM,CAAC,GAAG;OACpC;QACH,CAAC,CAAC,IAAI,CAAC;AACX,CAAC,CAAC,CAAC;AAEH,iBAAiB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAElD,MAAM,CAAC,MAAM,iBAAiB,GAAG,MAAM,CAAC,WAAW,CAAC,CAClD,CAAC,EAAE,KAAK,EAAE,QAAQ,EAAE,EAAE,EAAE;IACtB,OAAO,GAAG,CAAA;cACA,UAAU,IAAI,UAAU;mBACnB,QAAQ,CAAC,CAAC,CAAC,KAAK,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC,GAAG,aAAa,KAAK,CAAC,IAAI,CAAC,OAAO;;KAEhF,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,iBAAiB,CAAC,YAAY,GAAG,gBAAgB,CAAC","sourcesContent":["import styled, { css } from 'styled-components';\n\nimport {\n Button,\n Card,\n CardContent,\n defaultThemeProp,\n StyledCard,\n StyledIcon,\n useDirection\n} from '@pega/cosmos-react-core';\n\nexport const StyledExpandButton = styled(Button)(\n ({\n theme: {\n base: { animation }\n }\n }) => {\n const { rtl } = useDirection();\n return css`\n ${StyledIcon} {\n transition: transform ${animation.speed} ${animation.timing.ease};\n }\n\n &[aria-expanded='true'] ${StyledIcon} {\n transform: rotate(90deg);\n }\n\n &[aria-expanded='false'] ${StyledIcon} {\n transform: rotate(${rtl ? 180 : 0}deg);\n }\n\n &:hover,\n &:active {\n text-decoration: none;\n }\n `;\n }\n);\n\nStyledExpandButton.defaultProps = defaultThemeProp;\n\nexport const StyledAssignments = styled(Card)<{ openItem?: boolean }>(({ theme, openItem }) => {\n return openItem\n ? css`\n box-shadow: ${theme.base.shadow.low};\n `\n : null;\n});\n\nStyledAssignments.defaultProps = defaultThemeProp;\n\nexport const StyledCardContent = styled(CardContent)<{ openItem?: boolean }>(\n ({ theme, openItem }) => {\n return css`\n &:not(${StyledCard} ${StyledCard} > &) {\n padding: ${openItem ? theme.base.spacing : '0'} calc(2 * ${theme.base.spacing});\n }\n `;\n }\n);\n\nStyledCardContent.defaultProps = defaultThemeProp;\n"]}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Assignments/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,KAAK,gBAAgB,EAAE,MAAM,eAAe,CAAC"}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/Assignments/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAyB,MAAM,eAAe,CAAC","sourcesContent":["export { default, type AssignmentsProps } from './Assignments';\n"]}
|
|
@@ -1,27 +0,0 @@
|
|
|
1
|
-
import { FunctionComponent, Ref } from 'react';
|
|
2
|
-
import { ForwardProps, BaseProps, TestIdProp, NoChildrenProp } from '@pega/cosmos-react-core';
|
|
3
|
-
import { CaseViewProps } from '../CaseView';
|
|
4
|
-
import { CaseViewContextValue } from '../CaseView/CaseView.types';
|
|
5
|
-
export interface CasePreviewProps extends Pick<CaseViewProps, 'caseId' | 'heading' | 'subheading' | 'parentCases' | 'icon' | 'followed' | 'onFollowedChange' | 'actions' | 'promotedActions' | 'onEdit' | 'summaryFields' | 'tabs' | 'tabContent' | 'stages' | 'tasks' | 'banners' | 'utilities' | 'utilitiesSummaryItems'>, NoChildrenProp, TestIdProp, BaseProps {
|
|
6
|
-
/** A set of props including an href that will be forwarded to the case preview's heading and subheading. */
|
|
7
|
-
caseLink?: CaseViewContextValue['caseLink'];
|
|
8
|
-
/** If true, the Case Preview will be visible. */
|
|
9
|
-
open: boolean;
|
|
10
|
-
/** Callback fired before Case Preview opens. */
|
|
11
|
-
onBeforeOpen?: () => void;
|
|
12
|
-
/** Callback fired after Case Preview opens. */
|
|
13
|
-
onAfterOpen?: () => void;
|
|
14
|
-
/** Callback fired before Case Preview closes. */
|
|
15
|
-
onBeforeClose?: () => void;
|
|
16
|
-
/** Callback fired after Case Preview closes. */
|
|
17
|
-
onAfterClose?: () => void;
|
|
18
|
-
/** Callback fired when a click action occurs outside of the Case Preview. */
|
|
19
|
-
onOuterClick?: () => void;
|
|
20
|
-
/** Reference to the wrapping element. */
|
|
21
|
-
ref?: Ref<HTMLDivElement>;
|
|
22
|
-
}
|
|
23
|
-
declare const _default: FunctionComponent<CasePreviewProps & ForwardProps> & {
|
|
24
|
-
getTestIds: (testIdProp?: string | undefined) => import("@pega/cosmos-react-core").TestIdsRecord<readonly ["close"]>;
|
|
25
|
-
};
|
|
26
|
-
export default _default;
|
|
27
|
-
//# sourceMappingURL=CasePreview.d.ts.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"CasePreview.d.ts","sourceRoot":"","sources":["../../../src/components/CasePreview/CasePreview.tsx"],"names":[],"mappings":"AAAA,OAAO,EAEL,iBAAiB,EAEjB,GAAG,EAKJ,MAAM,OAAO,CAAC;AAIf,OAAO,EAQL,YAAY,EAMZ,SAAS,EACT,UAAU,EACV,cAAc,EAGf,MAAM,yBAAyB,CAAC;AAGjC,OAAiB,EACf,aAAa,EAKd,MAAM,aAAa,CAAC;AACrB,OAAO,EAAE,oBAAoB,EAAE,MAAM,4BAA4B,CAAC;AAMlE,MAAM,WAAW,gBACf,SAAQ,IAAI,CACR,aAAa,EACX,QAAQ,GACR,SAAS,GACT,YAAY,GACZ,aAAa,GACb,MAAM,GACN,UAAU,GACV,kBAAkB,GAClB,SAAS,GACT,iBAAiB,GACjB,QAAQ,GACR,eAAe,GACf,MAAM,GACN,YAAY,GACZ,QAAQ,GACR,OAAO,GACP,SAAS,GACT,WAAW,GACX,uBAAuB,CAC1B,EACD,cAAc,EACd,UAAU,EACV,SAAS;IACX,4GAA4G;IAC5G,QAAQ,CAAC,EAAE,oBAAoB,CAAC,UAAU,CAAC,CAAC;IAC5C,iDAAiD;IACjD,IAAI,EAAE,OAAO,CAAC;IACd,gDAAgD;IAChD,YAAY,CAAC,EAAE,MAAM,IAAI,CAAC;IAC1B,+CAA+C;IAC/C,WAAW,CAAC,EAAE,MAAM,IAAI,CAAC;IACzB,iDAAiD;IACjD,aAAa,CAAC,EAAE,MAAM,IAAI,CAAC;IAC3B,gDAAgD;IAChD,YAAY,CAAC,EAAE,MAAM,IAAI,CAAC;IAC1B,6EAA6E;IAC7E,YAAY,CAAC,EAAE,MAAM,IAAI,CAAC;IAC1B,yCAAyC;IACzC,GAAG,CAAC,EAAE,GAAG,CAAC,cAAc,CAAC,CAAC;CAC3B;;;;AA0KD,wBAA+D"}
|
|
@@ -1,82 +0,0 @@
|
|
|
1
|
-
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
-
import { forwardRef, useState, useCallback, useEffect, useContext } from 'react';
|
|
3
|
-
import styled, { css } from 'styled-components';
|
|
4
|
-
import { readableColor } from 'polished';
|
|
5
|
-
import { Drawer, Icon, registerIcon, Button, Flex, tryCatch, defaultThemeProp, useBreakpoint, useElement, useDirection, useI18n, AppShellContext, useTestIds, withTestIds } from '@pega/cosmos-react-core';
|
|
6
|
-
import * as timesIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/times.icon';
|
|
7
|
-
import CaseView, { StyledCaseView, StyledCaseViewContent, StyledCaseDrawer, StyledSummaryRegion } from '../CaseView';
|
|
8
|
-
import { getCasePreviewTestIds } from './CasePreview.test-ids';
|
|
9
|
-
registerIcon(timesIcon);
|
|
10
|
-
const StyledPreviewHeader = styled.div(({ theme }) => {
|
|
11
|
-
return css `
|
|
12
|
-
z-index: ${theme.base['z-index'].drawer};
|
|
13
|
-
background-color: ${theme.base.palette['primary-background']};
|
|
14
|
-
`;
|
|
15
|
-
});
|
|
16
|
-
StyledPreviewHeader.defaultProps = defaultThemeProp;
|
|
17
|
-
const StyledPreviewActions = styled.div(({ theme: { base: { spacing, palette: { 'brand-primary': brandPrimary } } } }) => {
|
|
18
|
-
const buttonColor = tryCatch(() => readableColor(brandPrimary));
|
|
19
|
-
return css `
|
|
20
|
-
background-color: ${brandPrimary};
|
|
21
|
-
padding: ${spacing} calc(2 * ${spacing}) 0;
|
|
22
|
-
|
|
23
|
-
button {
|
|
24
|
-
color: ${buttonColor};
|
|
25
|
-
}
|
|
26
|
-
`;
|
|
27
|
-
});
|
|
28
|
-
StyledPreviewActions.defaultProps = defaultThemeProp;
|
|
29
|
-
const StyledPreviewDrawer = styled(StyledCaseDrawer)(({ theme }) => {
|
|
30
|
-
return css `
|
|
31
|
-
height: calc(100vh - var(--appshell-offset, 0rem));
|
|
32
|
-
top: var(--appshell-offset, 0);
|
|
33
|
-
z-index: calc(${theme.base['z-index'].drawer} + 500);
|
|
34
|
-
|
|
35
|
-
${StyledCaseView} {
|
|
36
|
-
height: calc(100vh - ${theme.base.spacing} - ${theme.base['hit-area']['mouse-min']});
|
|
37
|
-
|
|
38
|
-
@media (pointer: coarse) {
|
|
39
|
-
height: calc(100vh - ${theme.base.spacing} - ${theme.base['hit-area']['finger-min']});
|
|
40
|
-
}
|
|
41
|
-
|
|
42
|
-
${StyledSummaryRegion} {
|
|
43
|
-
position: relative;
|
|
44
|
-
top: 0;
|
|
45
|
-
}
|
|
46
|
-
}
|
|
47
|
-
|
|
48
|
-
${StyledCaseViewContent} {
|
|
49
|
-
overflow-y: auto;
|
|
50
|
-
|
|
51
|
-
& > :last-child {
|
|
52
|
-
padding-bottom: calc(2 * ${theme.base.spacing});
|
|
53
|
-
}
|
|
54
|
-
}
|
|
55
|
-
`;
|
|
56
|
-
});
|
|
57
|
-
StyledPreviewDrawer.defaultProps = defaultThemeProp;
|
|
58
|
-
const CasePreview = forwardRef(function CasePreview(props, ref) {
|
|
59
|
-
const { testId, open: openProp, caseId, heading, subheading, caseLink, parentCases, icon, followed, onFollowedChange, summaryFields, tabs, stages, tasks, tabContent, utilities, utilitiesSummaryItems, actions, banners, onEdit, ...restProps } = props;
|
|
60
|
-
const testIds = useTestIds(testId, getCasePreviewTestIds);
|
|
61
|
-
const t = useI18n();
|
|
62
|
-
const { previewTriggerRef } = useContext(AppShellContext);
|
|
63
|
-
const [closeButtonEl, setCloseButtonEl] = useElement();
|
|
64
|
-
const isSmallOrAbove = useBreakpoint('sm');
|
|
65
|
-
const [open, setOpen] = useState(openProp);
|
|
66
|
-
const direction = useDirection();
|
|
67
|
-
const closePreview = useCallback(() => {
|
|
68
|
-
setOpen(false);
|
|
69
|
-
previewTriggerRef.current?.focus();
|
|
70
|
-
}, []);
|
|
71
|
-
useEffect(() => {
|
|
72
|
-
setOpen(openProp);
|
|
73
|
-
}, [openProp]);
|
|
74
|
-
useEffect(() => {
|
|
75
|
-
if (openProp && closeButtonEl) {
|
|
76
|
-
closeButtonEl.focus();
|
|
77
|
-
}
|
|
78
|
-
}, [openProp, closeButtonEl]);
|
|
79
|
-
return (_jsxs(Drawer, { "data-testid": testIds.root, ...restProps, as: StyledPreviewDrawer, role: 'complementary', forwardedAs: Flex, container: { direction: 'column' }, ref: ref, open: open && isSmallOrAbove, position: 'fixed', placement: direction.end, "aria-label": t('preview_of_noun', [heading]), shadow: true, nullWhenClosed: true, children: [_jsx(StyledPreviewActions, { children: _jsx(Button, { "data-testid": testIds.close, variant: 'simple', icon: true, onClick: closePreview, ref: setCloseButtonEl, label: t('close_preview'), children: _jsx(Icon, { name: 'times' }) }) }), _jsx(CaseView, { caseId: caseId, parentCases: parentCases, heading: heading, subheading: subheading, caseLink: caseLink, icon: icon, followed: followed, onFollowedChange: onFollowedChange, summaryFields: summaryFields, tabs: tabs, stages: stages, tasks: tasks, tabContent: tabContent, utilities: utilities, utilitiesSummaryItems: utilitiesSummaryItems, actions: actions, banners: banners, onEdit: onEdit, isPreview: true })] }));
|
|
80
|
-
});
|
|
81
|
-
export default withTestIds(CasePreview, getCasePreviewTestIds);
|
|
82
|
-
//# sourceMappingURL=CasePreview.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"CasePreview.js","sourceRoot":"","sources":["../../../src/components/CasePreview/CasePreview.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n forwardRef,\n FunctionComponent,\n PropsWithoutRef,\n Ref,\n useState,\n useCallback,\n useEffect,\n useContext\n} from 'react';\nimport styled, { css } from 'styled-components';\nimport { readableColor } from 'polished';\n\nimport {\n Drawer,\n Icon,\n registerIcon,\n Button,\n Flex,\n tryCatch,\n defaultThemeProp,\n ForwardProps,\n useBreakpoint,\n useElement,\n useDirection,\n useI18n,\n AppShellContext,\n BaseProps,\n TestIdProp,\n NoChildrenProp,\n useTestIds,\n withTestIds\n} from '@pega/cosmos-react-core';\nimport * as timesIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/times.icon';\n\nimport CaseView, {\n CaseViewProps,\n StyledCaseView,\n StyledCaseViewContent,\n StyledCaseDrawer,\n StyledSummaryRegion\n} from '../CaseView';\nimport { CaseViewContextValue } from '../CaseView/CaseView.types';\n\nimport { getCasePreviewTestIds } from './CasePreview.test-ids';\n\nregisterIcon(timesIcon);\n\nexport interface CasePreviewProps\n extends Pick<\n CaseViewProps,\n | 'caseId'\n | 'heading'\n | 'subheading'\n | 'parentCases'\n | 'icon'\n | 'followed'\n | 'onFollowedChange'\n | 'actions'\n | 'promotedActions'\n | 'onEdit'\n | 'summaryFields'\n | 'tabs'\n | 'tabContent'\n | 'stages'\n | 'tasks'\n | 'banners'\n | 'utilities'\n | 'utilitiesSummaryItems'\n >,\n NoChildrenProp,\n TestIdProp,\n BaseProps {\n /** A set of props including an href that will be forwarded to the case preview's heading and subheading. */\n caseLink?: CaseViewContextValue['caseLink'];\n /** If true, the Case Preview will be visible. */\n open: boolean;\n /** Callback fired before Case Preview opens. */\n onBeforeOpen?: () => void;\n /** Callback fired after Case Preview opens. */\n onAfterOpen?: () => void;\n /** Callback fired before Case Preview closes. */\n onBeforeClose?: () => void;\n /** Callback fired after Case Preview closes. */\n onAfterClose?: () => void;\n /** Callback fired when a click action occurs outside of the Case Preview. */\n onOuterClick?: () => void;\n /** Reference to the wrapping element. */\n ref?: Ref<HTMLDivElement>;\n}\n\nconst StyledPreviewHeader = styled.div(({ theme }) => {\n return css`\n z-index: ${theme.base['z-index'].drawer};\n background-color: ${theme.base.palette['primary-background']};\n `;\n});\n\nStyledPreviewHeader.defaultProps = defaultThemeProp;\n\nconst StyledPreviewActions = styled.div(\n ({\n theme: {\n base: {\n spacing,\n palette: { 'brand-primary': brandPrimary }\n }\n }\n }) => {\n const buttonColor = tryCatch(() => readableColor(brandPrimary));\n\n return css`\n background-color: ${brandPrimary};\n padding: ${spacing} calc(2 * ${spacing}) 0;\n\n button {\n color: ${buttonColor};\n }\n `;\n }\n);\n\nStyledPreviewActions.defaultProps = defaultThemeProp;\n\nconst StyledPreviewDrawer = styled(StyledCaseDrawer)(({ theme }) => {\n return css`\n height: calc(100vh - var(--appshell-offset, 0rem));\n top: var(--appshell-offset, 0);\n z-index: calc(${theme.base['z-index'].drawer} + 500);\n\n ${StyledCaseView} {\n height: calc(100vh - ${theme.base.spacing} - ${theme.base['hit-area']['mouse-min']});\n\n @media (pointer: coarse) {\n height: calc(100vh - ${theme.base.spacing} - ${theme.base['hit-area']['finger-min']});\n }\n\n ${StyledSummaryRegion} {\n position: relative;\n top: 0;\n }\n }\n\n ${StyledCaseViewContent} {\n overflow-y: auto;\n\n & > :last-child {\n padding-bottom: calc(2 * ${theme.base.spacing});\n }\n }\n `;\n});\n\nStyledPreviewDrawer.defaultProps = defaultThemeProp;\n\nconst CasePreview: FunctionComponent<CasePreviewProps & ForwardProps> = forwardRef(\n function CasePreview(props: PropsWithoutRef<CasePreviewProps>, ref: CasePreviewProps['ref']) {\n const {\n testId,\n open: openProp,\n caseId,\n heading,\n subheading,\n caseLink,\n parentCases,\n icon,\n followed,\n onFollowedChange,\n summaryFields,\n tabs,\n stages,\n tasks,\n tabContent,\n utilities,\n utilitiesSummaryItems,\n actions,\n banners,\n onEdit,\n ...restProps\n } = props;\n const testIds = useTestIds(testId, getCasePreviewTestIds);\n\n const t = useI18n();\n const { previewTriggerRef } = useContext(AppShellContext);\n const [closeButtonEl, setCloseButtonEl] = useElement<HTMLButtonElement>();\n const isSmallOrAbove = useBreakpoint('sm');\n const [open, setOpen] = useState(openProp);\n const direction = useDirection();\n\n const closePreview = useCallback(() => {\n setOpen(false);\n previewTriggerRef.current?.focus();\n }, []);\n\n useEffect(() => {\n setOpen(openProp);\n }, [openProp]);\n\n useEffect(() => {\n if (openProp && closeButtonEl) {\n closeButtonEl.focus();\n }\n }, [openProp, closeButtonEl]);\n\n return (\n <Drawer\n data-testid={testIds.root}\n {...restProps}\n as={StyledPreviewDrawer}\n role='complementary'\n forwardedAs={Flex}\n container={{ direction: 'column' }}\n ref={ref}\n open={open && isSmallOrAbove}\n position='fixed'\n placement={direction.end}\n aria-label={t('preview_of_noun', [heading])}\n shadow\n nullWhenClosed\n >\n <StyledPreviewActions>\n <Button\n data-testid={testIds.close}\n variant='simple'\n icon\n onClick={closePreview}\n ref={setCloseButtonEl}\n label={t('close_preview')}\n >\n <Icon name='times' />\n </Button>\n </StyledPreviewActions>\n\n <CaseView\n caseId={caseId}\n parentCases={parentCases}\n heading={heading}\n subheading={subheading}\n caseLink={caseLink}\n icon={icon}\n followed={followed}\n onFollowedChange={onFollowedChange}\n summaryFields={summaryFields}\n tabs={tabs}\n stages={stages}\n tasks={tasks}\n tabContent={tabContent}\n utilities={utilities}\n utilitiesSummaryItems={utilitiesSummaryItems}\n actions={actions}\n banners={banners}\n onEdit={onEdit}\n isPreview\n />\n </Drawer>\n );\n }\n);\n\nexport default withTestIds(CasePreview, getCasePreviewTestIds);\n"]}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"CasePreview.test-ids.d.ts","sourceRoot":"","sources":["../../../src/components/CasePreview/CasePreview.test-ids.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,qBAAqB,0GAAoD,CAAC"}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"CasePreview.test-ids.js","sourceRoot":"","sources":["../../../src/components/CasePreview/CasePreview.test-ids.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,yBAAyB,CAAC;AAExD,MAAM,CAAC,MAAM,qBAAqB,GAAG,aAAa,CAAC,cAAc,EAAE,CAAC,OAAO,CAAU,CAAC,CAAC","sourcesContent":["import { createTestIds } from '@pega/cosmos-react-core';\n\nexport const getCasePreviewTestIds = createTestIds('case-preview', ['close'] as const);\n"]}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/CasePreview/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,eAAe,CAAC;AACxC,YAAY,EAAE,gBAAgB,EAAE,MAAM,eAAe,CAAC"}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/CasePreview/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,eAAe,CAAC","sourcesContent":["export { default } from './CasePreview';\nexport type { CasePreviewProps } from './CasePreview';\n"]}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"CaseHeader.d.ts","sourceRoot":"","sources":["../../../../src/components/CaseView/CaseHeader/CaseHeader.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,EAAE,EAAqE,MAAM,OAAO,CAAC;AAsC9F,QAAA,MAAM,UAAU,EAAE,EAuRjB,CAAC;AAEF,eAAe,UAAU,CAAC"}
|
|
@@ -1,127 +0,0 @@
|
|
|
1
|
-
import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
|
|
2
|
-
import { useEffect, useLayoutEffect, useMemo, useRef, useState } from 'react';
|
|
3
|
-
import { parseToHsl } from 'polished';
|
|
4
|
-
import { Breadcrumbs, Flex, getEdge, Icon, registerIcon, Text, Link, Button, MenuButton, throttle, useDirection, useI18n, useAfterInitialEffect, useTheme, tryCatch } from '@pega/cosmos-react-core';
|
|
5
|
-
import * as pencilIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/pencil.icon';
|
|
6
|
-
import * as moreIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/more.icon';
|
|
7
|
-
import { StyledCaseHeader, StyledCaseHeaderText, StyledExpandCollapseSummaryButton, StyledSubheading, StyledHeaderActions, StyledCaseHeaderPromotedAction } from '../CaseView.styles';
|
|
8
|
-
import { useCaseViewContext } from '../CaseView.context';
|
|
9
|
-
import Summary from './Summary';
|
|
10
|
-
registerIcon(pencilIcon, moreIcon);
|
|
11
|
-
const CaseHeader = () => {
|
|
12
|
-
const t = useI18n();
|
|
13
|
-
const { ltr } = useDirection();
|
|
14
|
-
const theme = useTheme();
|
|
15
|
-
const { testIds, caseId, icon, heading, subheading, actions, caseLink, parentCases, onEdit, followed, onFollowedChange, promotedActions, summaryExpanded, summaryFields, onToggleSummary, isPreview, aboveSM, aboveMD, persistentUtility } = useCaseViewContext();
|
|
16
|
-
const [wrapPromotedActions, setWrapPromotedActions] = useState(false);
|
|
17
|
-
const [summaryResetID, setSummaryResetID] = useState(Math.random());
|
|
18
|
-
const wrapActionsBreakpoint = useRef(null);
|
|
19
|
-
const iconBackground = useMemo(() => {
|
|
20
|
-
return tryCatch(() => {
|
|
21
|
-
const { lightness } = parseToHsl(theme.base.palette['brand-primary']);
|
|
22
|
-
return lightness > 0.35 ? 'rgba(0, 0, 0, 0.2)' : 'rgba(255, 255, 255, 0.2)';
|
|
23
|
-
});
|
|
24
|
-
}, [theme]);
|
|
25
|
-
const contentsEl = useRef(null);
|
|
26
|
-
const headerGroupEl = useRef(null);
|
|
27
|
-
const actionsContainerEl = useRef(null);
|
|
28
|
-
const toggleButtonRef = useRef(null);
|
|
29
|
-
const caseActions = actions
|
|
30
|
-
? actions.map(action => {
|
|
31
|
-
return {
|
|
32
|
-
...action,
|
|
33
|
-
primary: action.text,
|
|
34
|
-
visual: action.icon ? _jsx(Icon, { name: action.icon }) : null
|
|
35
|
-
};
|
|
36
|
-
})
|
|
37
|
-
: undefined;
|
|
38
|
-
const showExpandCollapse = !isPreview && aboveMD;
|
|
39
|
-
const collapsedMainHeader = (!isPreview && !aboveMD && aboveSM) || (showExpandCollapse && !summaryExpanded);
|
|
40
|
-
// FIXME: This is a hack to get the Tooltip to reset its position when the summary changes layout.
|
|
41
|
-
useAfterInitialEffect(() => {
|
|
42
|
-
if (toggleButtonRef.current && toggleButtonRef.current === document.activeElement) {
|
|
43
|
-
toggleButtonRef.current.blur();
|
|
44
|
-
setTimeout(() => {
|
|
45
|
-
toggleButtonRef.current?.focus();
|
|
46
|
-
}, 0);
|
|
47
|
-
}
|
|
48
|
-
}, [summaryExpanded]);
|
|
49
|
-
// Actions wrapping
|
|
50
|
-
useLayoutEffect(() => {
|
|
51
|
-
if (!wrapPromotedActions &&
|
|
52
|
-
contentsEl.current &&
|
|
53
|
-
headerGroupEl.current &&
|
|
54
|
-
actionsContainerEl.current) {
|
|
55
|
-
const contentStart = getEdge({
|
|
56
|
-
el: contentsEl.current,
|
|
57
|
-
side: 'leading',
|
|
58
|
-
ltr
|
|
59
|
-
});
|
|
60
|
-
const headerGroupEnd = getEdge({
|
|
61
|
-
el: headerGroupEl.current,
|
|
62
|
-
side: 'trailing',
|
|
63
|
-
ltr
|
|
64
|
-
});
|
|
65
|
-
const actionsContainerWidth = actionsContainerEl.current.getBoundingClientRect().width;
|
|
66
|
-
wrapActionsBreakpoint.current =
|
|
67
|
-
Math.ceil(headerGroupEnd) - Math.ceil(contentStart) + Math.ceil(actionsContainerWidth);
|
|
68
|
-
}
|
|
69
|
-
const promotedActionsWrapHandler = () => {
|
|
70
|
-
if (wrapActionsBreakpoint.current && contentsEl.current) {
|
|
71
|
-
setWrapPromotedActions(Math.ceil(contentsEl.current.offsetWidth) < wrapActionsBreakpoint.current);
|
|
72
|
-
}
|
|
73
|
-
};
|
|
74
|
-
const resizeObserver = new ResizeObserver(throttle(promotedActionsWrapHandler, 30));
|
|
75
|
-
promotedActionsWrapHandler();
|
|
76
|
-
if (contentsEl.current) {
|
|
77
|
-
resizeObserver.observe(contentsEl.current, { box: 'border-box' });
|
|
78
|
-
}
|
|
79
|
-
return () => {
|
|
80
|
-
resizeObserver.disconnect();
|
|
81
|
-
};
|
|
82
|
-
}, [
|
|
83
|
-
contentsEl,
|
|
84
|
-
headerGroupEl,
|
|
85
|
-
actionsContainerEl,
|
|
86
|
-
promotedActions,
|
|
87
|
-
heading,
|
|
88
|
-
subheading,
|
|
89
|
-
wrapPromotedActions
|
|
90
|
-
]);
|
|
91
|
-
// Reset summary
|
|
92
|
-
useEffect(() => {
|
|
93
|
-
setSummaryResetID(Math.random());
|
|
94
|
-
}, [heading, summaryFields, promotedActions]);
|
|
95
|
-
return (_jsxs(Flex, { "data-testid": testIds.header, as: StyledCaseHeader, container: { direction: 'column', gap: 1.5 }, children: [_jsxs(Flex, { container: true, ref: contentsEl, children: [showExpandCollapse && onToggleSummary && !persistentUtility && (_jsx(StyledExpandCollapseSummaryButton, { ref: toggleButtonRef, onClick: onToggleSummary, label: t(summaryExpanded ? 'collapse' : 'expand'), "aria-label": t(summaryExpanded ? 'collapse_summary' : 'expand_summary'), icon: true, compact: true, children: _jsx(Icon, { name: 'arrow-micro-left' }) })), icon && (_jsx(Flex, { container: { pad: [1, 0, 0] }, item: { shrink: 0 }, children: _jsx(Icon, { "data-testid": testIds.icon, name: icon, background: iconBackground }) })), _jsxs(Flex, { as: StyledCaseHeaderText, container: {
|
|
96
|
-
direction: 'column',
|
|
97
|
-
pad: [0.5, 2, 0.5, 1.5],
|
|
98
|
-
alignItems: 'start'
|
|
99
|
-
}, item: aboveSM ? { shrink: wrapPromotedActions ? 1 : 0 } : { shrink: 1, grow: 1 }, ref: headerGroupEl, 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: [
|
|
100
|
-
...parentCases,
|
|
101
|
-
{
|
|
102
|
-
...caseLink,
|
|
103
|
-
id: caseId,
|
|
104
|
-
primary: caseId,
|
|
105
|
-
href: caseLink?.href
|
|
106
|
-
}
|
|
107
|
-
], leafOnly: true }))] }), collapsedMainHeader && !wrapPromotedActions && (_jsx(Summary, { siblingRef: actionsContainerEl }, summaryResetID)), _jsxs(Flex, { as: StyledHeaderActions, item: { shrink: 0 }, container: { alignItems: 'start', pad: [0, 0, 0, 2] }, offsetEnd: !summaryExpanded, ref: actionsContainerEl, children: [collapsedMainHeader &&
|
|
108
|
-
!wrapPromotedActions &&
|
|
109
|
-
promotedActions &&
|
|
110
|
-
promotedActions.length > 0 ? (_jsx(_Fragment, { children: promotedActions.map(promotedAction => (_jsx(StyledCaseHeaderPromotedAction, { variant: 'secondary', onClick: (e) => promotedAction.onClick?.(promotedAction.id, e), children: promotedAction.text }, promotedAction.id))) })) : null, 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: {
|
|
111
|
-
items: followed !== undefined
|
|
112
|
-
? [
|
|
113
|
-
{
|
|
114
|
-
id: 'follow',
|
|
115
|
-
primary: followed ? t('unfollow') : t('follow'),
|
|
116
|
-
onClick: () => onFollowedChange?.(!followed)
|
|
117
|
-
},
|
|
118
|
-
...caseActions
|
|
119
|
-
]
|
|
120
|
-
: caseActions,
|
|
121
|
-
scrollAt: 20
|
|
122
|
-
} }))] })] }), (!collapsedMainHeader || wrapPromotedActions || !aboveSM) &&
|
|
123
|
-
promotedActions &&
|
|
124
|
-
promotedActions.length > 0 ? (_jsx(Flex, { "data-testid": testIds.promotedActions, container: { justify: 'start', wrap: 'wrap', gap: 1, pad: [0, 0, 0.5] }, children: promotedActions.map(({ id, text, onClick }) => (_jsx("div", { children: _jsx(StyledCaseHeaderPromotedAction, { variant: 'secondary', onClick: (e) => onClick?.(id, e), children: text }) }, text))) })) : null] }));
|
|
125
|
-
};
|
|
126
|
-
export default CaseHeader;
|
|
127
|
-
//# sourceMappingURL=CaseHeader.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"CaseHeader.js","sourceRoot":"","sources":["../../../../src/components/CaseView/CaseHeader/CaseHeader.tsx"],"names":[],"mappings":"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","sourcesContent":["import { FC, MouseEvent, useEffect, useLayoutEffect, useMemo, useRef, useState } from 'react';\nimport { parseToHsl } from 'polished';\n\nimport {\n Breadcrumbs,\n Flex,\n getEdge,\n Icon,\n registerIcon,\n Text,\n Link,\n MenuItemProps,\n Button,\n MenuButton,\n throttle,\n useDirection,\n useI18n,\n useAfterInitialEffect,\n useTheme,\n tryCatch\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 StyledCaseHeaderText,\n StyledExpandCollapseSummaryButton,\n StyledSubheading,\n StyledHeaderActions,\n StyledCaseHeaderPromotedAction\n} from '../CaseView.styles';\nimport { useCaseViewContext } from '../CaseView.context';\n\nimport Summary from './Summary';\n\nregisterIcon(pencilIcon, moreIcon);\n\nconst CaseHeader: FC = () => {\n const t = useI18n();\n const { ltr } = useDirection();\n const theme = useTheme();\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 summaryExpanded,\n summaryFields,\n onToggleSummary,\n isPreview,\n aboveSM,\n aboveMD,\n persistentUtility\n } = useCaseViewContext();\n\n const [wrapPromotedActions, setWrapPromotedActions] = useState(false);\n const [summaryResetID, setSummaryResetID] = useState<number | undefined>(Math.random());\n\n const wrapActionsBreakpoint = useRef<number | null>(null);\n\n const iconBackground = useMemo(() => {\n return tryCatch(() => {\n const { lightness } = parseToHsl(theme.base.palette['brand-primary']);\n return lightness > 0.35 ? 'rgba(0, 0, 0, 0.2)' : 'rgba(255, 255, 255, 0.2)';\n });\n }, [theme]);\n\n const contentsEl = useRef<HTMLDivElement>(null);\n const headerGroupEl = useRef<HTMLElement>(null);\n const actionsContainerEl = useRef<HTMLDivElement>(null);\n const toggleButtonRef = useRef<HTMLButtonElement>(null);\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 const showExpandCollapse = !isPreview && aboveMD;\n const collapsedMainHeader =\n (!isPreview && !aboveMD && aboveSM) || (showExpandCollapse && !summaryExpanded);\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 // Actions wrapping\n useLayoutEffect(() => {\n if (\n !wrapPromotedActions &&\n contentsEl.current &&\n headerGroupEl.current &&\n actionsContainerEl.current\n ) {\n const contentStart = getEdge({\n el: contentsEl.current,\n side: 'leading',\n ltr\n });\n const headerGroupEnd = getEdge({\n el: headerGroupEl.current,\n side: 'trailing',\n ltr\n });\n const actionsContainerWidth = actionsContainerEl.current.getBoundingClientRect().width;\n\n wrapActionsBreakpoint.current =\n Math.ceil(headerGroupEnd) - Math.ceil(contentStart) + Math.ceil(actionsContainerWidth);\n }\n\n const promotedActionsWrapHandler = () => {\n if (wrapActionsBreakpoint.current && contentsEl.current) {\n setWrapPromotedActions(\n Math.ceil(contentsEl.current.offsetWidth) < wrapActionsBreakpoint.current\n );\n }\n };\n\n const resizeObserver = new ResizeObserver(throttle(promotedActionsWrapHandler, 30));\n\n promotedActionsWrapHandler();\n\n if (contentsEl.current) {\n resizeObserver.observe(contentsEl.current, { box: 'border-box' });\n }\n\n return () => {\n resizeObserver.disconnect();\n };\n }, [\n contentsEl,\n headerGroupEl,\n actionsContainerEl,\n promotedActions,\n heading,\n subheading,\n wrapPromotedActions\n ]);\n\n // Reset summary\n useEffect(() => {\n setSummaryResetID(Math.random());\n }, [heading, summaryFields, promotedActions]);\n\n return (\n <Flex\n data-testid={testIds.header}\n as={StyledCaseHeader}\n container={{ direction: 'column', gap: 1.5 }}\n >\n <Flex container ref={contentsEl}>\n {showExpandCollapse && onToggleSummary && !persistentUtility && (\n <StyledExpandCollapseSummaryButton\n ref={toggleButtonRef}\n onClick={onToggleSummary}\n label={t(summaryExpanded ? 'collapse' : 'expand')}\n aria-label={t(summaryExpanded ? 'collapse_summary' : 'expand_summary')}\n icon\n compact\n >\n <Icon name='arrow-micro-left' />\n </StyledExpandCollapseSummaryButton>\n )}\n\n {icon && (\n <Flex container={{ pad: [1, 0, 0] }} item={{ shrink: 0 }}>\n <Icon data-testid={testIds.icon} name={icon} background={iconBackground} />\n </Flex>\n )}\n\n {/* header group */}\n <Flex\n as={StyledCaseHeaderText}\n container={{\n direction: 'column',\n pad: [0.5, 2, 0.5, 1.5],\n alignItems: 'start'\n }}\n item={aboveSM ? { shrink: wrapPromotedActions ? 1 : 0 } : { shrink: 1, grow: 1 }}\n ref={headerGroupEl}\n >\n <Text data-testid={testIds.heading} variant='h1'>\n {caseLink ? <Link {...caseLink}>{heading}</Link> : heading}\n </Text>\n\n {subheading && (!parentCases || subheading !== caseId) && (\n <StyledSubheading data-testid={testIds.subheading}>{subheading}</StyledSubheading>\n )}\n\n {parentCases && (\n <Breadcrumbs\n forwardedAs='p'\n path={[\n ...parentCases,\n {\n ...caseLink,\n id: caseId,\n primary: caseId,\n href: caseLink?.href\n }\n ]}\n leafOnly\n />\n )}\n </Flex>\n\n {/* summary */}\n {collapsedMainHeader && !wrapPromotedActions && (\n <Summary siblingRef={actionsContainerEl} key={summaryResetID} />\n )}\n\n {/* inline actions */}\n <Flex\n as={StyledHeaderActions}\n item={{ shrink: 0 }}\n container={{ alignItems: 'start', pad: [0, 0, 0, 2] }}\n offsetEnd={!summaryExpanded}\n ref={actionsContainerEl}\n >\n {collapsedMainHeader &&\n !wrapPromotedActions &&\n promotedActions &&\n promotedActions.length > 0 ? (\n <>\n {promotedActions.map(promotedAction => (\n <StyledCaseHeaderPromotedAction\n variant='secondary'\n onClick={(e: MouseEvent<HTMLButtonElement>) =>\n promotedAction.onClick?.(promotedAction.id, e)\n }\n key={promotedAction.id}\n >\n {promotedAction.text}\n </StyledCaseHeaderPromotedAction>\n ))}\n </>\n ) : null}\n\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 </Flex>\n </Flex>\n\n {/* wrapped promoted actions */}\n {(!collapsedMainHeader || wrapPromotedActions || !aboveSM) &&\n promotedActions &&\n promotedActions.length > 0 ? (\n <Flex\n data-testid={testIds.promotedActions}\n container={{ justify: 'start', wrap: 'wrap', gap: 1, pad: [0, 0, 0.5] }}\n >\n {promotedActions.map(({ id, text, onClick }) => (\n <div key={text}>\n <StyledCaseHeaderPromotedAction\n variant='secondary'\n onClick={(e: MouseEvent<HTMLButtonElement>) => onClick?.(id, e)}\n >\n {text}\n </StyledCaseHeaderPromotedAction>\n </div>\n ))}\n </Flex>\n ) : null}\n </Flex>\n );\n};\n\nexport default CaseHeader;\n"]}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"Summary.d.ts","sourceRoot":"","sources":["../../../../src/components/CaseView/CaseHeader/Summary.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAA+B,MAAM,OAAO,CAAC;AAgD/D,QAAA,MAAM,OAAO;gBAAkC,UAAU,cAAc,CAAC;iBAkQvE,CAAC;AAEF,eAAe,OAAO,CAAC"}
|
|
@@ -1,182 +0,0 @@
|
|
|
1
|
-
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
-
import { useEffect, useRef, useState } from 'react';
|
|
3
|
-
import { Flex, getEdge, registerIcon, StyledStackedFieldValue, StyledLabel, StyledFieldName, useDirection, useChToPxConversionFactor, NoValue } 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 { StyledHeaderSummary, StyledHeaderSummaryValue, StyledHeaderSummaryBlock } from '../CaseView.styles';
|
|
7
|
-
import { useCaseViewContext } from '../CaseView.context';
|
|
8
|
-
registerIcon(pencilIcon, moreIcon);
|
|
9
|
-
const Field = ({ item, primary, truncate }) => {
|
|
10
|
-
const { name, value, simpleValue } = item;
|
|
11
|
-
const displayValue = simpleValue ?? value ?? _jsx(NoValue, {});
|
|
12
|
-
return (_jsxs(StyledStackedFieldValue, { children: [_jsx(StyledLabel, { as: StyledFieldName, children: name }), _jsx(StyledHeaderSummaryValue, { bold: primary, truncate: truncate, children: displayValue })] }));
|
|
13
|
-
};
|
|
14
|
-
const Summary = ({ siblingRef }) => {
|
|
15
|
-
const { ltr } = useDirection();
|
|
16
|
-
const { summaryFields } = useCaseViewContext();
|
|
17
|
-
const chToPxConversionFactor = useChToPxConversionFactor();
|
|
18
|
-
const containerRef = useRef(null);
|
|
19
|
-
const listRef = useRef(null);
|
|
20
|
-
const primaryItems = summaryFields?.primary ?? [];
|
|
21
|
-
const secondaryItems = summaryFields?.secondary ?? [];
|
|
22
|
-
const items = [...primaryItems, ...secondaryItems];
|
|
23
|
-
const [displayCount, setDisplayCount] = useState(items.length);
|
|
24
|
-
const [truncatedIndices, setTruncatedIndices] = useState(items.map((_, i) => i));
|
|
25
|
-
const priorTrailingEdgeStack = useRef([]);
|
|
26
|
-
const priorAvailableSpace = useRef(null);
|
|
27
|
-
const evalItemAddition = ({ nextSiblingLeadingEdge }) => {
|
|
28
|
-
const indicesToTruncate = truncatedIndices ? [...truncatedIndices] : [];
|
|
29
|
-
let nextDisplayCount = displayCount;
|
|
30
|
-
const reversedTrailingEdgeStack = [...priorTrailingEdgeStack.current].reverse();
|
|
31
|
-
for (let i = 0; i < reversedTrailingEdgeStack.length; i += 1) {
|
|
32
|
-
const priorEdge = reversedTrailingEdgeStack[i];
|
|
33
|
-
const shouldRender = ltr
|
|
34
|
-
? priorEdge < nextSiblingLeadingEdge
|
|
35
|
-
: priorEdge > nextSiblingLeadingEdge;
|
|
36
|
-
if (shouldRender) {
|
|
37
|
-
priorTrailingEdgeStack.current.pop();
|
|
38
|
-
if (!indicesToTruncate.includes(nextDisplayCount)) {
|
|
39
|
-
indicesToTruncate.push(nextDisplayCount);
|
|
40
|
-
}
|
|
41
|
-
nextDisplayCount += 1;
|
|
42
|
-
}
|
|
43
|
-
else {
|
|
44
|
-
break;
|
|
45
|
-
}
|
|
46
|
-
}
|
|
47
|
-
return { indicesToTruncate, nextDisplayCount };
|
|
48
|
-
};
|
|
49
|
-
const evalTruncationReduction = ({ listChildren, availableSpace }) => {
|
|
50
|
-
const indicesToTruncate = [];
|
|
51
|
-
let hasAvailableSpace = availableSpace;
|
|
52
|
-
listChildren.forEach((item, index) => {
|
|
53
|
-
const valueEl = item.lastChild;
|
|
54
|
-
const truncatedSpace = Math.floor(valueEl.scrollWidth - valueEl.offsetWidth);
|
|
55
|
-
const shouldTruncate = truncatedSpace === 0 ? false : hasAvailableSpace - truncatedSpace <= 0;
|
|
56
|
-
if (shouldTruncate) {
|
|
57
|
-
if (!truncatedIndices?.includes(index)) {
|
|
58
|
-
hasAvailableSpace += truncatedSpace;
|
|
59
|
-
}
|
|
60
|
-
indicesToTruncate.push(index);
|
|
61
|
-
}
|
|
62
|
-
else if (truncatedIndices?.includes(index)) {
|
|
63
|
-
hasAvailableSpace -= truncatedSpace;
|
|
64
|
-
}
|
|
65
|
-
});
|
|
66
|
-
return { indicesToTruncate };
|
|
67
|
-
};
|
|
68
|
-
const evalTruncationIncrease = ({ listChildren, availableSpace }) => {
|
|
69
|
-
const indicesToTruncate = [];
|
|
70
|
-
const lastIndex = listChildren.length - 1;
|
|
71
|
-
let hasAvailableSpace = availableSpace;
|
|
72
|
-
[...listChildren].reverse().forEach((item, index) => {
|
|
73
|
-
if (truncatedIndices?.includes(lastIndex - index)) {
|
|
74
|
-
indicesToTruncate.push(lastIndex - index);
|
|
75
|
-
}
|
|
76
|
-
else if (hasAvailableSpace < 0) {
|
|
77
|
-
const truncatedElMaxWidth = 20 * chToPxConversionFactor;
|
|
78
|
-
const valueEl = item.lastChild;
|
|
79
|
-
const spaceToTruncate = Math.max(Math.floor(valueEl.offsetWidth - truncatedElMaxWidth), 0);
|
|
80
|
-
if (spaceToTruncate) {
|
|
81
|
-
indicesToTruncate.push(lastIndex - index);
|
|
82
|
-
hasAvailableSpace += spaceToTruncate;
|
|
83
|
-
}
|
|
84
|
-
}
|
|
85
|
-
});
|
|
86
|
-
return { indicesToTruncate, availableSpace: hasAvailableSpace };
|
|
87
|
-
};
|
|
88
|
-
const evalItemRemoval = ({ listChildren, availableSpace, nextSiblingLeadingEdge }) => {
|
|
89
|
-
let nextDisplayCount = displayCount;
|
|
90
|
-
let hasAvailableSpace = availableSpace;
|
|
91
|
-
let lastChildIndex = listChildren.length - 1;
|
|
92
|
-
do {
|
|
93
|
-
const itemTrailingEdge = getEdge({
|
|
94
|
-
el: listChildren[lastChildIndex],
|
|
95
|
-
side: 'trailing',
|
|
96
|
-
ltr
|
|
97
|
-
});
|
|
98
|
-
hasAvailableSpace = Math.floor(ltr ? nextSiblingLeadingEdge - itemTrailingEdge : itemTrailingEdge - nextSiblingLeadingEdge);
|
|
99
|
-
if (hasAvailableSpace < 0) {
|
|
100
|
-
priorTrailingEdgeStack.current = [...priorTrailingEdgeStack.current, itemTrailingEdge];
|
|
101
|
-
nextDisplayCount -= 1;
|
|
102
|
-
lastChildIndex -= 1;
|
|
103
|
-
}
|
|
104
|
-
} while (hasAvailableSpace < 0 && lastChildIndex > -1);
|
|
105
|
-
return { displayCount: nextDisplayCount };
|
|
106
|
-
};
|
|
107
|
-
const evaluateSummaryDisplay = () => {
|
|
108
|
-
const containerEl = containerRef.current;
|
|
109
|
-
if (!containerEl)
|
|
110
|
-
return;
|
|
111
|
-
const listChildren = Array.from(listRef.current?.children ?? []);
|
|
112
|
-
const lastSummaryItem = listChildren.length ? listChildren[listChildren.length - 1] : undefined;
|
|
113
|
-
const nextSibling = siblingRef?.current ?? document.body;
|
|
114
|
-
const nextSiblingLeadingEdge = getEdge({
|
|
115
|
-
el: nextSibling,
|
|
116
|
-
side: 'leading',
|
|
117
|
-
ltr
|
|
118
|
-
});
|
|
119
|
-
const testEdge = lastSummaryItem
|
|
120
|
-
? getEdge({ el: lastSummaryItem, side: 'trailing', ltr })
|
|
121
|
-
: getEdge({ el: containerEl, side: 'leading', ltr });
|
|
122
|
-
let availableSpace = Math.floor(ltr ? nextSiblingLeadingEdge - testEdge : testEdge - nextSiblingLeadingEdge);
|
|
123
|
-
if (availableSpace === priorAvailableSpace.current)
|
|
124
|
-
return;
|
|
125
|
-
priorAvailableSpace.current = availableSpace;
|
|
126
|
-
let indicesToTruncate;
|
|
127
|
-
let nextDisplayCount = displayCount;
|
|
128
|
-
if (availableSpace >= 0) {
|
|
129
|
-
if (displayCount !== items.length) {
|
|
130
|
-
const additionsConfig = evalItemAddition({ nextSiblingLeadingEdge });
|
|
131
|
-
indicesToTruncate = additionsConfig.indicesToTruncate;
|
|
132
|
-
nextDisplayCount = additionsConfig.nextDisplayCount;
|
|
133
|
-
}
|
|
134
|
-
else if (truncatedIndices?.length) {
|
|
135
|
-
const truncationConfig = evalTruncationReduction({
|
|
136
|
-
listChildren,
|
|
137
|
-
availableSpace
|
|
138
|
-
});
|
|
139
|
-
indicesToTruncate = truncationConfig.indicesToTruncate;
|
|
140
|
-
}
|
|
141
|
-
}
|
|
142
|
-
else if (listChildren) {
|
|
143
|
-
const truncationConfig = evalTruncationIncrease({
|
|
144
|
-
listChildren,
|
|
145
|
-
availableSpace
|
|
146
|
-
});
|
|
147
|
-
indicesToTruncate = truncationConfig.indicesToTruncate;
|
|
148
|
-
availableSpace = truncationConfig.availableSpace;
|
|
149
|
-
if (availableSpace < 0) {
|
|
150
|
-
const removalConfig = evalItemRemoval({
|
|
151
|
-
listChildren,
|
|
152
|
-
availableSpace,
|
|
153
|
-
nextSiblingLeadingEdge
|
|
154
|
-
});
|
|
155
|
-
nextDisplayCount = removalConfig.displayCount;
|
|
156
|
-
}
|
|
157
|
-
}
|
|
158
|
-
setDisplayCount(nextDisplayCount);
|
|
159
|
-
if (indicesToTruncate) {
|
|
160
|
-
setTruncatedIndices(indicesToTruncate);
|
|
161
|
-
}
|
|
162
|
-
};
|
|
163
|
-
// Initial display evaluation
|
|
164
|
-
useEffect(() => {
|
|
165
|
-
evaluateSummaryDisplay();
|
|
166
|
-
}, []);
|
|
167
|
-
// Overflow resize observer
|
|
168
|
-
useEffect(() => {
|
|
169
|
-
const resizeObserver = new ResizeObserver(evaluateSummaryDisplay);
|
|
170
|
-
if (containerRef.current) {
|
|
171
|
-
resizeObserver.observe(containerRef.current, { box: 'border-box' });
|
|
172
|
-
}
|
|
173
|
-
return () => {
|
|
174
|
-
resizeObserver.disconnect();
|
|
175
|
-
};
|
|
176
|
-
}, [evaluateSummaryDisplay]);
|
|
177
|
-
return (_jsx(Flex, { as: StyledHeaderSummaryBlock, item: { grow: 1, shrink: 1 }, container: { pad: [0.5, 0], alignItems: 'center' }, ref: containerRef, hasItems: displayCount > 0, children: _jsx(Flex, { as: StyledHeaderSummary, container: { gap: 4 }, ref: listRef, children: items.slice(0, displayCount).map((item, index) => {
|
|
178
|
-
return (_jsx(Field, { item: item, primary: !!primaryItems?.length && index < primaryItems.length, truncate: !!truncatedIndices?.includes(index) }, item.name));
|
|
179
|
-
}) }) }));
|
|
180
|
-
};
|
|
181
|
-
export default Summary;
|
|
182
|
-
//# sourceMappingURL=Summary.js.map
|