npm - @pega/cosmos-react-work - Versions diffs - 5.0.0-dev.4.4 → 5.0.0-dev.4.6 - Mend

@pega/cosmos-react-work 5.0.0-dev.4.4 → 5.0.0-dev.4.6

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 (23) hide show

package/lib/components/CaseView/CaseView.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"CaseView.d.ts","sourceRoot":"","sources":["../../../src/components/CaseView/CaseView.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,EAAE,EAAyD,MAAM,OAAO,CAAC;AAElF,OAAO,EASL,YAAY,EAYb,MAAM,yBAAyB,CAAC;AAmBjC,OAAO,EAAwB,aAAa,EAAE,MAAM,kBAAkB,CAAC;;;;~~AAqpBvE~~,wBAAyD"}
1	+ {"version":3,"file":"CaseView.d.ts","sourceRoot":"","sources":["../../../src/components/CaseView/CaseView.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,EAAE,EAAyD,MAAM,OAAO,CAAC;AAElF,OAAO,EASL,YAAY,EAYb,MAAM,yBAAyB,CAAC;AAmBjC,OAAO,EAAwB,aAAa,EAAE,MAAM,kBAAkB,CAAC;;;;AAupBvE,wBAAyD"}

package/lib/components/CaseView/CaseView.js CHANGED Viewed

@@ -413,7 +413,9 @@ persistentUtility, intelligentGuidance, isPreview = false, ...restProps }) => {
                             }, "data-app-region": lgOrAbove || !utilitiesExpanded || undefined, "aria-label": t('utilities_label'), children: [_jsxs(Flex, { container: {
                                         alignItems: 'center',
                                         justify: utilitiesExpanded ? 'between' : 'center'
-                                    }, children: [utilitiesHeading, !lgOrAbove && utilitiesExpanded ? null : utilitiesToggleButton] }), utilitiesExpanded && lgOrAbove && utilities, (!utilitiesExpanded || (mdOrAbove && !lgOrAbove)) && (_jsx(UtilitiesSummary, { items: utilitiesSummaryItems }))] }))] }) }), intelligentGuidance] }));
+                                    }, children: [utilitiesHeading, !lgOrAbove && utilitiesExpanded ? null : utilitiesToggleButton] }), utilitiesExpanded && lgOrAbove && utilities, (!utilitiesExpanded || (mdOrAbove && !lgOrAbove)) &&
+                                    utilitiesSummaryItems &&
+                                    utilitiesSummaryItems.length > 0 && (_jsx(UtilitiesSummary, { items: utilitiesSummaryItems }))] }))] }) }), intelligentGuidance] }));
 };
 export default withTestIds(CaseView, getCaseViewTestIds);
 //# sourceMappingURL=CaseView.js.map

package/lib/components/CaseView/CaseView.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"CaseView.js","sourceRoot":"","sources":["../../../src/components/CaseView/CaseView.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAM,SAAS,EAAE,OAAO,EAAE,MAAM,EAAE,eAAe,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAElF,OAAO,EACL,IAAI,EACJ,IAAI,EACJ,IAAI,EACJ,YAAY,EACZ,QAAQ,EACR,aAAa,EACb,cAAc,EACd,UAAU,EAEV,IAAI,EACJ,MAAM,EACN,OAAO,EACP,YAAY,EACZ,IAAI,EACJ,qBAAqB,EACrB,iBAAiB,EACjB,uBAAuB,EACvB,gBAAgB,EAChB,UAAU,EACV,WAAW,EACZ,MAAM,yBAAyB,CAAC;AAEjC,OAAO,KAAK,kBAAkB,MAAM,yEAAyE,CAAC;AAC9G,OAAO,KAAK,iBAAiB,MAAM,wEAAwE,CAAC;AAE5G,OAAO,WAAW,MAAM,eAAe,CAAC;AACxC,OAAO,gBAAgB,MAAM,oBAAoB,CAAC;AAClD,OAAO,EACL,gBAAgB,EAChB,uBAAuB,EACvB,cAAc,EACd,cAAc,EACd,uBAAuB,EACvB,aAAa,EACb,uBAAuB,EACvB,eAAe,EACf,mCAAmC,EACnC,sBAAsB,EACvB,MAAM,mBAAmB,CAAC;AAE3B,OAAO,eAAe,MAAM,oBAAoB,CAAC;AACjD,OAAO,iBAAiB,MAAM,qBAAqB,CAAC;AACpD,OAAO,EAAE,kBAAkB,EAAE,MAAM,qBAAqB,CAAC;AAEzD,YAAY,CAAC,kBAAkB,EAAE,iBAAiB,CAAC,CAAC;AAEpD,gFAAgF;AAChF,MAAM,WAAW,GAAG,CAAC,UAA0B,EAAE,UAA0B,EAAE,EAAE;IAC7E,UAAU,CAAC,KAAK,CAAC,cAAc,CAAC,0BAA0B,CAAC,CAAC;IAE5D,6FAA6F;IAC7F,MAAM,MAAM,GAAG,KAAK,CAAC,IAAI,CAAC,UAAU,CAAC,gBAAgB,CAAC,aAAa,CAAC,CAAC,CAAC,MAAM,CAC1E,KAAK,CAAC,EAAE,CAAC,KAAK,CAAC,qBAAqB,EAAE,CAAC,KAAK,KAAK,CAAC,CACnD,CAAC;IAEF,yEAAyE;IACzE,IAAI,MAAM,CAAC,MAAM,KAAK,CAAC;QAAE,OAAO;IAEhC,qFAAqF;IACrF,MAAM,KAAK,GAAG,MAAM,CAAC,CAAC,CAAC,CAAC,OAAO,CAAC,SAAS,CAAC,CAAC;IAE3C,IAAI,CAAC,KAAK;QAAE,OAAO;IAEnB,MAAM,YAAY,GAAG,UAAU,CAAC,qBAAqB,EAAE,CAAC;IACxD,MAAM,SAAS,GAAG,KAAK,CAAC,qBAAqB,EAAE,CAAC;IAChD,MAAM,QAAQ,GAAG,QAAQ,CAAC,eAAe,CAAC,YAAY,CAAC;IACvD,MAAM,kBAAkB,GAAG,SAAS,CAAC,GAAG,GAAG,MAAM,CAAC,OAAO,CAAC;IAC1D,MAAM,uBAAuB;IAC3B,wDAAwD;IACxD,MAAM,CAAC,gBAAgB,CAAC,UAAU,CAAC,CAAC,gBAAgB,CAAC,mBAAmB,CAAC,IAAI,KAAK,CAAC;IAErF,iDAAiD;IACjD,MAAM,2BAA2B,GAAG,YAAY,CAAC,MAAM,GAAG,SAAS,CAAC,MAAM,CAAC;IAE3E,gFAAgF;IAChF,iDAAiD;IACjD,UAAU,CAAC,KAAK,CAAC,WAAW,CAC1B,0BAA0B,EAC1B,YACE,QAAQ,GAAG,kBAAkB,GAAG,2BAClC,QAAQ,uBAAuB,aAAa,CAC7C,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,QAAQ,GAAqC,CAAC,EAClD,MAAM;AAEN,uDAAuD;AACvD,MAAM,EACN,OAAO,EACP,UAAU,EACV,QAAQ,EACR,WAAW,EACX,IAAI,EACJ,QAAQ,EACR,gBAAgB,EAChB,MAAM,EACN,OAAO,EACP,eAAe;AAEf,kCAAkC;AAClC,aAAa,EACb,eAAe,EAAE,mBAAmB,GAAG,IAAI,EAC3C,eAAe;AAEf,YAAY;AACZ,IAAI,EAAE,EAAE,YAAY,EAAE,KAAK,EAAE,YAAY,EAAE,OAAO,EAAE,UAAU,EAAE;AAEhE,iCAAiC;AACjC,OAAO,EACP,MAAM,EACN,KAAK,EACL,UAAU,EAAE,cAAc,GAAG,EAAE;AAE/B,oCAAoC;AACpC,SAAS,EACT,qBAAqB,EACrB,iBAAiB,EAAE,qBAAqB,GAAG,IAAI,EAC/C,iBAAiB;AAEjB,SAAS;AACT,iBAAiB,EACjB,mBAAmB,EACnB,SAAS,GAAG,KAAK,EACjB,GAAG,SAAS,EACE,EAAE,EAAE;IAClB,MAAM,OAAO,GAAG,UAAU,CAAC,MAAM,EAAE,kBAAkB,CAAC,CAAC;IAEvD,qBAAqB;IACrB,MAAM,CAAC,GAAG,OAAO,EAAE,CAAC;IACpB,MAAM,SAAS,GAAG,YAAY,EAAE,CAAC;IACjC,MAAM,EAAE,SAAS,EAAE,GAAG,gBAAgB,EAAE,CAAC;IAEzC,eAAe;IACf,MAAM,WAAW,GAAG,MAAM,CAAiB,IAAI,CAAC,CAAC;IACjD,MAAM,UAAU,GAAG,MAAM,CAAiB,IAAI,CAAC,CAAC;IAChD,iGAAiG;IACjG,MAAM,WAAW,GAAG,MAAM,EAA8B,CAAC;IACzD,MAAM,eAAe,GAAG,MAAM,CAAoB,IAAI,CAAC,CAAC;IACxD,MAAM,qBAAqB,GAAG,MAAM,CAAC,KAAK,CAAC,CAAC;IAE5C,cAAc;IACd,MAAM,CAAC,YAAY,EAAE,eAAe,CAAC,GAAG,UAAU,CAAc,IAAI,CAAC,CAAC;IAEtE,sBAAsB;IACtB,MAAM,SAAS,GAAG,aAAa,CAAC,IAAI,CAAC,CAAC;IACtC,MAAM,SAAS,GAAG,aAAa,CAAC,IAAI,EAAE,EAAE,aAAa,EAAE,WAAW,EAAE,CAAC,CAAC;IACtE,MAAM,SAAS,GAAG,aAAa,CAAC,IAAI,EAAE,EAAE,aAAa,EAAE,WAAW,EAAE,CAAC,CAAC;IACtE,MAAM,SAAS,GAAG,aAAa,CAAC,IAAI,EAAE,EAAE,aAAa,EAAE,WAAW,EAAE,CAAC,CAAC;IAEtE,UAAU;IACV,MAAM,YAAY,GAAG,YAAY,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC;IACzC,MAAM,YAAY,GAAG,WAAW,MAAM,EAAE,CAAC;IACzC,MAAM,cAAc,GAAG,aAAa,MAAM,EAAE,CAAC;IAC7C,MAAM,sBAAsB,GAAG,sBAAsB,MAAM,EAAE,CAAC;IAE9D,yBAAyB;IACzB,IAAI,eAAe,GAAG,CAAC,SAAS,IAAI,CAAC,CAAC,mBAAmB,CAAC;IAE1D,IAAI,iBAAiB,EAAE;QACrB,eAAe,GAAG,SAAS,CAAC;KAC7B;IAED,iCAAiC;IACjC,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,CAAC,WAAW,CAAC,OAAO;YAAE,OAAO;QAEjC,IAAI,SAAS,CAAC,OAAO,EAAE;YACrB,uBAAuB,CAAC,WAAW,CAAC,OAAO,EAAE,OAAO,CAAC,CAAC;SACvD;aAAM;YACL,SAAS,CAAC,OAAO,GAAG,IAAI,CAAC;SAC1B;IACH,CAAC,EAAE,CAAC,MAAM,CAAC,CAAC,CAAC;IAEb,2BAA2B;IAE3B,qGAAqG;IACrG,8IAA8I;IAC9I,MAAM,CAAC,yBAAyB,EAAE,4BAA4B,CAAC,GAAG,QAAQ,CAAC,SAAS,CAAC,CAAC;IAEtF,yFAAyF;IACzF,eAAe,CAAC,GAAG,EAAE;QACnB,IAAI,SAAS;YAAE,4BAA4B,CAAC,IAAI,CAAC,CAAC;IACpD,CAAC,EAAE,CAAC,SAAS,CAAC,CAAC,CAAC;IAEhB,iGAAiG;IACjG,MAAM,wBAAwB,GAAG,MAAM,CAAC,KAAK,CAAC,CAAC;IAE/C,yGAAyG;IACzG,MAAM,iBAAiB,GAAG,yBAAyB,CAAC,CAAC,CAAC,qBAAqB,CAAC,CAAC,CAAC,KAAK,CAAC;IAEpF,uDAAuD;IACvD,qBAAqB,CAAC,GAAG,EAAE;QACzB,0IAA0I;QAC1I,IAAI,SAAS,IAAI,CAAC,SAAS,IAAI,qBAAqB,EAAE;YACpD,iBAAiB,EAAE,EAAE,CAAC;YACtB,wBAAwB,CAAC,OAAO,GAAG,IAAI,CAAC;SACzC;QAED,IAAI,SAAS,EAAE;YACb,IAAI,wBAAwB,CAAC,OAAO,IAAI,CAAC,qBAAqB,EAAE;gBAC9D,iBAAiB,EAAE,EAAE,CAAC;aACvB;YAED,wBAAwB,CAAC,OAAO,GAAG,KAAK,CAAC;SAC1C;QACD,sHAAsH;IACxH,CAAC,EAAE,CAAC,SAAS,EAAE,SAAS,CAAC,CAAC,CAAC;IAE3B,yFAAyF;IACzF,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,qBAAqB,CAAC,OAAO,EAAE;YACjC,eAAe,CAAC,OAAO,EAAE,KAAK,EAAE,CAAC;SAClC;QAED,IAAI,CAAC,eAAe,CAAC,OAAO,EAAE;YAC5B,+BAA+B;YAC/B,qBAAqB,CAAC,OAAO,GAAG,KAAK,CAAC;SACvC;IACH,CAAC,EAAE,CAAC,iBAAiB,EAAE,SAAS,EAAE,SAAS,CAAC,CAAC,CAAC;IAE9C,eAAe;IACf,MAAM,CAAC,QAAQ,EAAE,UAAU,CAAC,GAAG,OAAO,CAAC,GAAG,EAAE;QAC1C,MAAM,UAAU,GAAG,EAAE,EAAE,EAAE,YAAY,EAAE,IAAI,EAAE,CAAC,CAAC,SAAS,CAAC,EAAE,CAAC;QAC5D,MAAM,iBAAiB,GAAG;YACxB,EAAE,EAAE,YAAY;YAChB,OAAO,EAAE,CACP,KAAC,IAAI,cACH,KAAC,uBAAuB,cACtB,KAAC,iBAAiB,OAAK,aAAa,GAAI,GAChB,GACrB,CACR;SACF,CAAC;QAEF,IAAI,KAAK,GAAG,YAAY,CAAC;QACzB,IAAI,OAAO,GAAG,cAAc,CAAC;QAE7B,IAAI,SAAS,EAAE;YACb,IAAI,CAAC,eAAe,IAAI,CAAC,iBAAiB,IAAI,CAAC,SAAS,CAAC,EAAE;gBACzD,KAAK,GAAG,CAAC,UAAU,EAAE,GAAG,YAAY,CAAC,CAAC;gBACtC,OAAO,GAAG,CAAC,iBAAiB,EAAE,GAAG,cAAc,CAAC,CAAC;aAClD;YAED,OAAO,CAAC,KAAK,EAAE,OAAO,CAAC,CAAC;SACzB;QAED,MAAM,gBAAgB,GAAG,EAAE,CAAC;QAC5B,MAAM,kBAAkB,GAAG,EAAE,CAAC;QAE9B,IAAI,SAAS,EAAE;YACb,gBAAgB,CAAC,IAAI,CAAC,EAAE,EAAE,EAAE,cAAc,EAAE,IAAI,EAAE,CAAC,CAAC,WAAW,CAAC,EAAE,CAAC,CAAC;YACpE,kBAAkB,CAAC,IAAI,CAAC;gBACtB,EAAE,EAAE,cAAc;gBAClB,OAAO,EAAE,KAAC,IAAI,IAAC,SAAS,EAAE,EAAE,SAAS,EAAE,QAAQ,EAAE,GAAG,EAAE,CAAC,EAAE,YAAG,SAAS,GAAQ;aAC9E,CAAC,CAAC;SACJ;QAED,IAAI,iBAAiB,EAAE;YACrB,gBAAgB,CAAC,IAAI,CAAC,EAAE,EAAE,EAAE,sBAAsB,EAAE,IAAI,EAAE,iBAAiB,CAAC,KAAK,EAAE,CAAC,CAAC;YACrF,kBAAkB,CAAC,IAAI,CAAC,EAAE,EAAE,EAAE,sBAAsB,EAAE,OAAO,EAAE,iBAAiB,EAAE,OAAO,EAAE,CAAC,CAAC;SAC9F;QAED,KAAK,GAAG,CAAC,UAAU,EAAE,GAAG,YAAY,EAAE,GAAG,gBAAgB,CAAC,CAAC;QAC3D,OAAO,GAAG,CAAC,iBAAiB,EAAE,GAAG,cAAc,EAAE,GAAG,kBAAkB,CAAC,CAAC;QAExE,OAAO,CAAC,KAAK,EAAE,OAAO,CAAC,CAAC;IAC1B,CAAC,EAAE;QACD,YAAY;QACZ,YAAY;QACZ,SAAS;QACT,eAAe;QACf,iBAAiB;QACjB,SAAS;QACT,cAAc;QACd,SAAS;QACT,cAAc;QACd,sBAAsB;KACvB,CAAC,CAAC;IAEH,oBAAoB;IACpB,IAAI,qBAAqB,GAAG;QAC1B,IAAI,EAAE,gBAAgB;QACtB,MAAM,EAAE,CAAC;QACT,IAAI,EAAE,6BAA6B;QACnC,KAAK,EAAE;;;KAGN;KACF,CAAC;IAEF,MAAM,eAAe,GAAG;QACtB,MAAM,EAAE,CAAC;QACT,IAAI,EAAE,qBAAqB,CAAC,IAAI;KACjC,CAAC;IAEF,IAAI,iBAAiB,EAAE;QACrB,IAAI,SAAS,EAAE;YACb,qBAAqB,GAAG;gBACtB,GAAG,eAAe;gBAClB,IAAI,EAAE,yEAAyE;gBAC/E,KAAK,EAAE,iDAAiD;aACzD,CAAC;SACH;aAAM,IAAI,SAAS,EAAE;YACpB,qBAAqB,GAAG;gBACtB,GAAG,eAAe;gBAClB,IAAI,EAAE,kDAAkD;gBACxD,KAAK,EAAE;;;SAGN;aACF,CAAC;SACH;KACF;SAAM,IAAI,eAAe,EAAE;QAC1B,IAAI,SAAS,EAAE;YACb,qBAAqB,GAAG;gBACtB,GAAG,eAAe;gBAClB,IAAI,EAAE,8DAA8D;gBACpE,KAAK,EAAE,+BAA+B;aACvC,CAAC;SACH;KACF;SAAM,IAAI,SAAS,EAAE;QACpB,qBAAqB,GAAG;YACtB,GAAG,eAAe;YAClB,IAAI,EAAE,uCAAuC;YAC7C,KAAK,EAAE;;;WAGF;SACN,CAAC;KACH;IAED,uBAAuB;IACvB,MAAM,kBAAkB,GAAG,MAAM,CAAmD;QAClF,QAAQ,EAAE,EAAE;KACb,CAAC,CAAC;IAEH,MAAM,WAAW,GAAG,OAAO,CAAC,GAAG,EAAE;QAC/B,IAAI,iBAAiB,IAAI,WAAW,CAAC,OAAO,EAAE;YAC5C,OAAO,UAAU,CACf,MAAM,CAAC,gBAAgB,CAAC,WAAW,CAAC,OAAO,CAAC,CAAC,gBAAgB,CAAC,mBAAmB,CAAC,CACnF,CAAC;SACH;QAED,OAAO,CAAC,CAAC;IACX,CAAC,EAAE,CAAC,WAAW,CAAC,OAAO,CAAC,CAAC,CAAC;IAE1B,cAAc;IACZ,mDAAmD;IACnD,SAAS,CAAC,CAAC,CAAC,EAAE,GAAG,kBAAkB,CAAC,OAAO,EAAE,MAAM,EAAE,WAAW,EAAE,CAAC,CAAC,CAAC,SAAS,CAC/E,CAAC;IAEF,iCAAiC;IACjC,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,SAAS,EAAE;YACb,UAAU,CAAC,YAAY,CAAC,CAAC;SAC1B;IACH,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,wBAAwB;IACxB,SAAS,CAAC,GAAG,EAAE;QACb,IACE,SAAS;YACT,eAAe;YACf,CAAC,iBAAiB;YAClB,CAAC,YAAY,KAAK,YAAY,IAAI,YAAY,KAAK,cAAc,CAAC,EAClE;YACA,UAAU,CAAC,YAAY,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC;SACjC;QACD,iCAAiC;QACjC,IAAI,SAAS,IAAI,CAAC,cAAc,EAAE,sBAAsB,CAAC,CAAC,QAAQ,CAAC,YAAY,CAAC,EAAE;YAChF,UAAU,CAAC,YAAY,CAAC,CAAC;SAC1B;IACH,CAAC,EAAE,CAAC,SAAS,CAAC,CAAC,CAAC;IAEhB,kCAAkC;IAClC,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,CAAC,SAAS,IAAI,YAAY,KAAK,YAAY,EAAE;YAC/C,UAAU,CAAC,YAAY,CAAC,CAAC;SAC1B;aAAM,IAAI,SAAS,IAAI,YAAY,KAAK,YAAY,EAAE;YACrD,UAAU,CAAC,YAAY,CAAC,CAAC;SAC1B;IACH,CAAC,EAAE,CAAC,SAAS,CAAC,CAAC,CAAC;IAEhB,wBAAwB;IACxB,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,SAAS,EAAE;YACb,UAAU,CAAC,YAAY,CAAC,CAAC;SAC1B;IACH,CAAC,EAAE,CAAC,SAAS,CAAC,CAAC,CAAC;IAEhB,wBAAwB;IACxB,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,eAAe,IAAI,YAAY,KAAK,YAAY,EAAE;YACpD,UAAU,CAAC,YAAY,CAAC,CAAC;SAC1B;IACH,CAAC,EAAE,CAAC,eAAe,CAAC,CAAC,CAAC;IAEtB,yDAAyD;IACzD,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,CAAC,YAAY;YAAE,OAAO;QAC1B,MAAM,SAAS,GAAG,MAAM,CAAC,OAAO,CAAC;QACjC,MAAM,YAAY,GAAG,QAAQ,CAAC,eAAe,CAAC,YAAY,CAAC;QAC3D,MAAM,SAAS,GAAG,SAAS,GAAG,YAAY,GAAG,GAAG,CAAC;QACjD,MAAM,aAAa,GAAG,YAAY,CAAC,SAAS,CAAC;QAC7C,IAAI,aAAa,GAAG,SAAS,EAAE;YAC7B,MAAM,GAAG,GAAG,aAAa,GAAG,YAAY,GAAG,GAAG,CAAC;YAC/C,MAAM,CAAC,QAAQ,CAAC,EAAE,GAAG,EAAE,QAAQ,EAAE,QAAQ,EAAE,CAAC,CAAC;SAC9C;IACH,CAAC,EAAE,CAAC,YAAY,CAAC,CAAC,CAAC;IAEnB,2GAA2G;IAC3G,eAAe,CAAC,GAAG,EAAE;QACnB,IAAI,CAAC,WAAW,CAAC,OAAO,IAAI,CAAC,UAAU,CAAC,OAAO;YAAE,OAAO;QAExD,WAAW,CAAC,OAAO,CAAC,KAAK,CAAC,WAAW,CACnC,kBAAkB,EAClB,GAAG,CAAC,eAAe,CAAC,CAAC,CAAC,UAAU,CAAC,OAAO,CAAC,YAAY,CAAC,CAAC,CAAC,CAAC,IAAI,CAC9D,CAAC;IACJ,CAAC,EAAE,CAAC,eAAe,CAAC,CAAC,CAAC;IAEtB,yBAAyB;IACzB,oGAAoG;IACpG,mEAAmE;IACnE,MAAM,QAAQ,GAAyB;QACrC,OAAO;QACP,MAAM;QACN,OAAO;QACP,UAAU;QACV,QAAQ;QACR,WAAW;QACX,IAAI;QACJ,QAAQ;QACR,gBAAgB;QAChB,OAAO;QACP,eAAe;QACf,MAAM;QACN,aAAa;QACb,IAAI,EAAE;YACJ,KAAK,EAAE,QAAQ;YACf,OAAO,EAAE,UAAU;YACnB,YAAY;SACb;QACD,MAAM;QACN,KAAK;QACL,iBAAiB;QACjB,mBAAmB;QACnB,eAAe;QACf,iBAAiB;QACjB,eAAe;QACf,SAAS;QACT,OAAO,EAAE,SAAS;QAClB,OAAO,EAAE,SAAS;QAClB,OAAO,EAAE,SAAS;QAClB,OAAO,EAAE,SAAS;KACnB,CAAC;IAEF,MAAM,kBAAkB,GAAG,MAAM,CAAiB,IAAI,CAAC,CAAC;IAExD,+DAA+D;IAC/D,eAAe,CAAC,GAAG,EAAE;QACnB,IAAI,CAAC,kBAAkB,CAAC,OAAO,IAAI,CAAC,WAAW,CAAC,OAAO;YAAE,OAAO;QAEhE,MAAM,iBAAiB,GAAG,kBAAkB,CAAC,OAAO,CAAC;QACrD,MAAM,UAAU,GAAG,WAAW,CAAC,OAAO,CAAC;QAEvC,WAAW,CAAC,iBAAiB,EAAE,UAAU,CAAC,CAAC;QAE3C,MAAM,WAAW,GAAG,GAAG,EAAE;YACvB,WAAW,CAAC,iBAAiB,EAAE,UAAU,CAAC,CAAC;QAC7C,CAAC,CAAC;QAEF,iBAAiB;QACjB,MAAM,EAAE,GAAG,IAAI,gBAAgB,CAAC,GAAG,EAAE;YACnC,WAAW,CAAC,iBAAiB,EAAE,UAAU,CAAC,CAAC;QAC7C,CAAC,CAAC,CAAC;QAEH,EAAE,CAAC,OAAO,CAAC,iBAAiB,EAAE,EAAE,SAAS,EAAE,IAAI,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC,CAAC;QAElE,iBAAiB,CAAC,gBAAgB,CAAC,oBAAoB,EAAE,WAAW,CAAC,CAAC;QAEtE,OAAO,GAAG,EAAE;YACV,EAAE,CAAC,UAAU,EAAE,CAAC;YAChB,iBAAiB,CAAC,mBAAmB,CAAC,oBAAoB,EAAE,WAAW,CAAC,CAAC;QAC3E,CAAC,CAAC;IACJ,CAAC,CAAC,CAAC;IAEH,MAAM,CAAC,oBAAoB,EAAE,uBAAuB,CAAC,GAAG,UAAU,CAAiB,IAAI,CAAC,CAAC;IAEzF,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,CAAC,oBAAoB;YAAE,OAAO;QAElC,MAAM,QAAQ,GAAG,IAAI,cAAc,CAAC,GAAG,EAAE;YACvC,IAAI,CAAC,kBAAkB,CAAC,OAAO,IAAI,CAAC,WAAW,CAAC,OAAO;gBAAE,OAAO;YAEhE,WAAW,CAAC,kBAAkB,CAAC,OAAO,EAAE,WAAW,CAAC,OAAO,CAAC,CAAC;QAC/D,CAAC,CAAC,CAAC;QAEH,QAAQ,CAAC,OAAO,CAAC,oBAAoB,CAAC,CAAC;QAEvC,OAAO,GAAG,EAAE;YACV,QAAQ,CAAC,UAAU,EAAE,CAAC;QACxB,CAAC,CAAC;IACJ,CAAC,EAAE,CAAC,oBAAoB,CAAC,CAAC,CAAC;IAE3B,SAAS,CAAC,GAAG,EAAE;QACb,MAAM,QAAQ,GAAG,GAAG,EAAE;YACpB,IAAI,CAAC,kBAAkB,CAAC,OAAO,IAAI,CAAC,WAAW,CAAC,OAAO;gBAAE,OAAO;YAEhE,WAAW,CAAC,kBAAkB,CAAC,OAAO,EAAE,WAAW,CAAC,OAAO,CAAC,CAAC;QAC/D,CAAC,CAAC;QAEF,MAAM,CAAC,gBAAgB,CAAC,QAAQ,EAAE,QAAQ,CAAC,CAAC;QAE5C,OAAO,GAAG,EAAE;YACV,MAAM,CAAC,mBAAmB,CAAC,QAAQ,EAAE,QAAQ,CAAC,CAAC;QACjD,CAAC,CAAC;IACJ,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,MAAM,gBAAgB,GAAG,CACvB,KAAC,sBAAsB,IAAC,OAAO,EAAC,IAAI,YAAE,CAAC,CAAC,WAAW,CAAC,GAA0B,CAC/E,CAAC;IAEF,MAAM,qBAAqB,GAAG,CAC5B,KAAC,mCAAmC,IAClC,OAAO,QACP,IAAI,QACJ,KAAK,EAAE,CAAC,CAAC,iBAAiB,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,QAAQ,CAAC,gBACvC,CAAC,CAAC,iBAAiB,CAAC,CAAC,CAAC,0BAA0B,CAAC,CAAC,CAAC,wBAAwB,CAAC,EACxF,OAAO,EAAE,GAAG,EAAE;YACZ,IAAI,CAAC,yBAAyB,IAAI,qBAAqB,EAAE;gBACvD,4BAA4B,CAAC,IAAI,CAAC,CAAC;aACpC;iBAAM;gBACL,iBAAiB,EAAE,EAAE,CAAC;aACvB;QACH,CAAC,EACD,OAAO,EAAE,GAAG,EAAE;YACZ,qBAAqB,CAAC,OAAO,GAAG,IAAI,CAAC;QACvC,CAAC,EACD,MAAM,EAAE,GAAG,EAAE;YACX,qBAAqB,CAAC,OAAO,GAAG,KAAK,CAAC;QACxC,CAAC,EACD,GAAG,EAAE,eAAe,YAEpB,KAAC,IAAI,IAAC,IAAI,EAAC,kBAAkB,GAAG,GACI,CACvC,CAAC;IAEF,gBAAgB;IAChB,OAAO,CACL,8BACE,KAAC,eAAe,CAAC,QAAQ,IAAC,KAAK,EAAE,QAAQ,YAEvC,MAAC,IAAI,mBACU,OAAO,CAAC,IAAI,KACrB,SAAS,EACb,EAAE,EAAE,cAAc,EAClB,GAAG,EAAE,WAAW,EAChB,SAAS,EAAE,qBAAqB,EAChC,IAAI,EAAE,EAAE,IAAI,EAAE,WAAW,EAAE,aAG3B,KAAC,IAAI,IACH,EAAE,EAAE,aAAa,EACjB,IAAI,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE,EACzB,OAAO,EAAE,SAAS,IAAI,CAAC,CAAC,iBAAiB,IAAI,SAAS,CAAC,IAAI,CAAC,eAAe,EAC3E,cAAc,EAAE,SAAS,EACzB,GAAG,EAAE,UAAU,YAEf,KAAC,WAAW,KAAG,GACV,EAGP,MAAC,IAAI,IACH,SAAS,EAAE;gCACT,SAAS,EAAE,QAAQ;gCACnB,YAAY,EAAE,OAAO;gCACrB,MAAM,EAAE,CAAC;6BACV,EACD,EAAE,EAAE,cAAc,EAClB,iBAAiB,EAAE,OAAO,CAAC,iBAAiB,CAAC,EAC7C,GAAG,EAAE,CAAC,EAAkB,EAAE,EAAE;gCAC1B,WAAW,CAAC,OAAO,GAAG,EAAE,CAAC;gCACzB,IAAI,EAAE;oCAAE,kBAAkB,CAAC,OAAO,EAAE,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;4BACxD,CAAC,aAEA,CAAC,OAAO,IAAI,MAAM,IAAI,KAAK,CAAC,IAAI,CAC/B,MAAC,IAAI,IACH,SAAS,EAAE;wCACT,SAAS,EAAE,QAAQ;wCACnB,YAAY,EAAE,OAAO;wCACrB,MAAM,EAAE,CAAC;qCACV,EACD,GAAG,EAAE,uBAAuB,aAE3B,OAAO,IAAI,6BAAkB,OAAO,CAAC,OAAO,YAAG,OAAO,GAAO,EAC7D,MAAM,IAAI,6BAAkB,OAAO,CAAC,MAAM,YAAG,MAAM,GAAO,EAC1D,KAAK,IAAI,6BAAkB,OAAO,CAAC,KAAK,YAAG,KAAK,GAAO,IACnD,CACR,EAEA,CAAC,CAAC,SAAS,IAAI,CAAC,iBAAiB,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,eAAe,CAAC,IAAI,CACxE,KAAC,IAAI,mBACU,OAAO,CAAC,IAAI,EACzB,IAAI,EAAE,QAAQ,EACd,UAAU,EAAE,UAAU,EACtB,YAAY,EAAE,YAAY,GAC1B,CACH,EAED,cAAK,GAAG,EAAE,eAAe,YACtB,UAAU,EAAE,GAAG,CAAC,CAAC,EAAE,EAAE,EAAE,OAAO,EAAE,EAAE,EAAE,CAAC,CACpC,KAAC,QAAQ,mBACM,YAAY,KAAK,EAAE,CAAC,CAAC,CAAC,OAAO,CAAC,UAAU,CAAC,CAAC,CAAC,SAAS,EACjE,YAAY,EAAE,YAAY,EAC1B,KAAK,EAAE,EAAE,EAET,GAAG,EAAE,YAAY,KAAK,EAAE,CAAC,CAAC,CAAC,kBAAkB,CAAC,CAAC,CAAC,SAAS,YAExD,OAAO,IAHH,EAAE,CAIE,CACZ,CAAC,GACE,IACD,EAGN,iBAAiB,IAAI,SAAS,IAAI,CACjC,KAAC,IAAI,IAAC,EAAE,EAAE,uBAAuB,EAAE,IAAI,EAAE,EAAE,IAAI,EAAE,mBAAmB,EAAE,qCACnE,iBAAiB,CAAC,OAAO,GACrB,CACR,EAGA,SAAS,IAAI,SAAS,IAAI,CAAC,SAAS,IAAI,iBAAiB,IAAI,CAC5D,KAAC,MAAM,IACL,EAAE,EAAE,gBAAgB,EACpB,IAAI,EAAE,iBAAiB,EACvB,QAAQ,EAAC,OAAO,EAChB,SAAS,EAAE,SAAS,CAAC,GAAG,EACxB,MAAM,QACN,cAAc,QACd,oBAAoB,EAAE,CAAC,CAAC,iBAAiB,YAEzC,MAAC,IAAI,IACH,EAAE,EAAE,uBAAuB,EAC3B,SAAS,EAAE,EAAE,SAAS,EAAE,QAAQ,EAAE,GAAG,EAAE,CAAC,EAAE,sCAG1C,MAAC,IAAI,IAAC,SAAS,EAAE,EAAE,UAAU,EAAE,QAAQ,EAAE,OAAO,EAAE,SAAS,EAAE,aAC1D,gBAAgB,EAChB,qBAAqB,IACjB,EAEN,SAAS,IACL,GACA,CACV,EAGA,SAAS,IAAI,SAAS,IAAI,CACzB,MAAC,IAAI,mBACU,OAAO,CAAC,SAAS,EAC9B,GAAG,EAAE,CAAC,EAAkB,EAAE,EAAE;gCAC1B,IAAI,EAAE;oCAAE,kBAAkB,CAAC,OAAO,EAAE,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;4BACxD,CAAC,EACD,EAAE,EAAE,eAAe,EACnB,SAAS,EAAE;gCACT,IAAI,EAAE,gBAAgB;gCACtB,MAAM,EAAE,CAAC;6BACV,EACD,IAAI,EAAE;gCACJ,IAAI,EAAE,WAAW;6BAClB,qBACgB,SAAS,IAAI,CAAC,iBAAiB,IAAI,SAAS,gBACjD,CAAC,CAAC,iBAAiB,CAAC,aAEhC,MAAC,IAAI,IACH,SAAS,EAAE;wCACT,UAAU,EAAE,QAAQ;wCACpB,OAAO,EAAE,iBAAiB,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,QAAQ;qCAClD,aAEA,gBAAgB,EAChB,CAAC,SAAS,IAAI,iBAAiB,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,qBAAqB,IAC1D,EAEN,iBAAiB,IAAI,SAAS,IAAI,SAAS,EAE3C,CAAC,CAAC,iBAAiB,IAAI,CAAC,SAAS,IAAI,CAAC,SAAS,CAAC,CAAC,IAAI,CACpD,KAAC,gBAAgB,IAAC,KAAK,EAAE,qBAAqB,GAAI,CACnD,IACI,CACR,IACI,GACkB,EAC1B,mBAAmB,IACnB,CACJ,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,WAAW,CAAC,QAAQ,EAAE,kBAAkB,CAAC,CAAC","sourcesContent":["import { FC, useEffect, useMemo, useRef, useLayoutEffect, useState } from 'react';\n\nimport {\n Flex,\n Grid,\n Icon,\n registerIcon,\n TabPanel,\n useBreakpoint,\n useScrollStick,\n useElement,\n ForwardProps,\n Card,\n Drawer,\n useI18n,\n useDirection,\n Tabs,\n useAfterInitialEffect,\n windowIsAvailable,\n focusHeadingOrContainer,\n useConfiguration,\n useTestIds,\n withTestIds\n} from '@pega/cosmos-react-core';\nimport { ScrollStickOptions } from '@pega/cosmos-react-core/lib/hooks/useScrollStick';\nimport * as moveRightSolidIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/move-right-solid.icon';\nimport * as moveLeftSolidIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/move-left-solid.icon';\n\nimport CaseSummary from './CaseSummary';\nimport UtilitiesSummary from './UtilitiesSummary';\nimport {\n StyledCaseDrawer,\n StyledCaseDrawerContent,\n StyledCaseView,\n StyledWorkArea,\n StyledPersistentUtility,\n StyledSummary,\n StyledSummaryTabContent,\n StyledUtilities,\n StyledExpandCollapseUtilitiesButton,\n StyledUtilitiesHeading\n} from './CaseView.styles';\nimport { CaseViewContextValue, CaseViewProps } from './CaseView.types';\nimport CaseViewContext from './CaseView.context';\nimport CaseSummaryFields from './CaseSummaryFields';\nimport { getCaseViewTestIds } from './CaseView.test-ids';\n\nregisterIcon(moveRightSolidIcon, moveLeftSolidIcon);\n\n// This function is responsible for auto sizing table height in case tab panels.\nconst resizeTable = (tabPanelEl: HTMLDivElement, workAreaEl: HTMLDivElement) => {\n tabPanelEl.style.removeProperty('--content-height-in-view');\n\n // .rs-wrapper is currently the class used by the table component which needs to be targeted.\n const tables = Array.from(tabPanelEl.querySelectorAll('.rs-wrapper')).filter(\n table => table.getBoundingClientRect().width !== 0\n );\n\n // Only perform this logic when there is a single table in a tab's panel.\n if (tables.length !== 1) return;\n\n // This selector finds the table's root element as they are always wrapped in a Card.\n const table = tables[0].closest('article');\n\n if (!table) return;\n\n const tabPanelRect = tabPanelEl.getBoundingClientRect();\n const tableRect = table.getBoundingClientRect();\n const vpHeight = document.documentElement.clientHeight;\n const tableRectOffsetTop = tableRect.top + window.scrollY;\n const workAreaPaddingBlockEnd =\n // px unit are required for proper CSS calc calculation.\n window.getComputedStyle(workAreaEl).getPropertyValue('padding-block-end') \|\| '0px';\n\n // Accounts for content rendered after the table.\n const tableBottomToTabPanelBottom = tabPanelRect.bottom - tableRect.bottom;\n\n // Sets a CSS variable for available height based on screen size and view state.\n // Defines an available minimum height of ~600px.\n tabPanelEl.style.setProperty(\n '--content-height-in-view',\n `max(calc(${\n vpHeight - tableRectOffsetTop - tableBottomToTabPanelBottom\n }px - ${workAreaPaddingBlockEnd}), 37.5rem)`\n );\n};\n\nconst CaseView: FC<CaseViewProps & ForwardProps> = ({\n testId,\n\n // Case data mostly visually related to the case header\n caseId,\n heading,\n subheading,\n caseLink,\n parentCases,\n icon,\n followed,\n onFollowedChange,\n onEdit,\n actions,\n promotedActions,\n\n // Summary content and state props\n summaryFields,\n summaryExpanded: summaryExpandedProp = true,\n onToggleSummary,\n\n // Case tabs\n tabs: { currentTabId, items: tabItemsProp, onClick: onTabClick },\n\n // Workarea related content props\n banners,\n stages,\n tasks,\n tabContent: tabContentProp = [],\n\n // Utilities content and state props\n utilities,\n utilitiesSummaryItems,\n utilitiesExpanded: utilitiesExpandedProp = true,\n onToggleUtilities,\n\n // Etc...\n persistentUtility,\n intelligentGuidance,\n isPreview = false,\n ...restProps\n}: CaseViewProps) => {\n const testIds = useTestIds(testId, getCaseViewTestIds);\n\n // General util hooks\n const t = useI18n();\n const direction = useDirection();\n const { loadedRef } = useConfiguration();\n\n // Element refs\n const caseViewRef = useRef<HTMLDivElement>(null);\n const summaryRef = useRef<HTMLDivElement>(null);\n // undefined used to allow ref to be mutable. Element set below in ref callback for scroll stick.\n const workAreaRef = useRef<HTMLDivElement \| undefined>();\n const toggleButtonRef = useRef<HTMLButtonElement>(null);\n const isToggleButtonFocused = useRef(false);\n\n // Tab content\n const [tabContentEl, setTabContentEl] = useElement<HTMLElement>(null);\n\n // Breakpoint booleans\n const smOrAbove = useBreakpoint('sm');\n const mdOrAbove = useBreakpoint('md', { breakpointRef: caseViewRef });\n const lgOrAbove = useBreakpoint('lg', { breakpointRef: caseViewRef });\n const xlOrAbove = useBreakpoint('xl', { breakpointRef: caseViewRef });\n\n // DOM ids\n const initialTabId = tabItemsProp[0]?.id;\n const summaryTabId = `summary-${caseId}`;\n const utilitiesTabId = `utilities-${caseId}`;\n const persistentUtilityTabId = `persistent-utility-${caseId}`;\n\n // Summary state handling\n let summaryExpanded = !isPreview && !!summaryExpandedProp;\n\n if (persistentUtility) {\n summaryExpanded = xlOrAbove;\n }\n\n // Focus heading on initial mount\n useEffect(() => {\n if (!caseViewRef.current) return;\n\n if (loadedRef.current) {\n focusHeadingOrContainer(caseViewRef.current, heading);\n } else {\n loadedRef.current = true;\n }\n }, [caseId]);\n\n // Utilities state handling\n\n // Used in coordination with a layoutEffect below to determine the utilities state on initial render.\n // Attempted with a ref but it did not work. Using state and enforcing a render in addition to the change render for lgOrAbove seems to fix...\n const [obeyUtilitiesExpandedProp, setObeyUtilitiesExpandedProp] = useState(lgOrAbove);\n\n // Allow the utilitiesExpandedProp to drive the utilities' state after the initial render\n useLayoutEffect(() => {\n if (lgOrAbove) setObeyUtilitiesExpandedProp(true);\n }, [lgOrAbove]);\n\n // Tracks whether a resize forced the onToggleUtilities to close the utilities when it's a drawer\n const utilitiesToggledByResize = useRef(false);\n\n // If the initial render is within the MD size, where the utility drawer renders, it must begin collapsed\n const utilitiesExpanded = obeyUtilitiesExpandedProp ? utilitiesExpandedProp : false;\n\n // Handles utilities state based on breakpoint changes.\n useAfterInitialEffect(() => {\n // If we change into the MD breakpoint range and the utilities state is expanded call the toggle prop to collapse it with controlled state\n if (mdOrAbove && !lgOrAbove && utilitiesExpandedProp) {\n onToggleUtilities?.();\n utilitiesToggledByResize.current = true;\n }\n\n if (lgOrAbove) {\n if (utilitiesToggledByResize.current && !utilitiesExpandedProp) {\n onToggleUtilities?.();\n }\n\n utilitiesToggledByResize.current = false;\n }\n // Purposely not listing utilitiesExpanded as a dependency as it is not a trigger and will be captured when BPs change\n }, [mdOrAbove, lgOrAbove]);\n\n // Handles focus of toggle button when toggled in drawer mode and when browser is resized\n useEffect(() => {\n if (isToggleButtonFocused.current) {\n toggleButtonRef.current?.focus();\n }\n\n if (!toggleButtonRef.current) {\n // Toggle button is not on DOM.\n isToggleButtonFocused.current = false;\n }\n }, [utilitiesExpanded, mdOrAbove, lgOrAbove]);\n\n // Prepare tabs\n const [tabItems, tabContent] = useMemo(() => {\n const summaryTab = { id: summaryTabId, name: t('summary') };\n const summaryTabContent = {\n id: summaryTabId,\n content: (\n <Card>\n <StyledSummaryTabContent>\n <CaseSummaryFields {...summaryFields} />\n </StyledSummaryTabContent>\n </Card>\n )\n };\n\n let items = tabItemsProp;\n let content = tabContentProp;\n\n if (mdOrAbove) {\n if (!summaryExpanded \|\| (persistentUtility && !xlOrAbove)) {\n items = [summaryTab, ...tabItemsProp];\n content = [summaryTabContent, ...tabContentProp];\n }\n\n return [items, content];\n }\n\n const utilityTabsItems = [];\n const utilityTabsContent = [];\n\n if (utilities) {\n utilityTabsItems.push({ id: utilitiesTabId, name: t('utilities') });\n utilityTabsContent.push({\n id: utilitiesTabId,\n content: <Flex container={{ direction: 'column', gap: 2 }}>{utilities}</Flex>\n });\n }\n\n if (persistentUtility) {\n utilityTabsItems.push({ id: persistentUtilityTabId, name: persistentUtility.title });\n utilityTabsContent.push({ id: persistentUtilityTabId, content: persistentUtility?.content });\n }\n\n items = [summaryTab, ...tabItemsProp, ...utilityTabsItems];\n content = [summaryTabContent, ...tabContentProp, ...utilityTabsContent];\n\n return [items, content];\n }, [\n tabItemsProp,\n summaryTabId,\n mdOrAbove,\n summaryExpanded,\n persistentUtility,\n xlOrAbove,\n tabContentProp,\n utilities,\n utilitiesTabId,\n persistentUtilityTabId\n ]);\n\n // Grid layout props\n let caseViewGridContainer = {\n cols: 'minmax(0, 1fr)',\n colGap: 0,\n rows: 'minmax(0, max-content) auto',\n areas: `\n \"summary\"\n \"work-area\"\n `\n };\n\n const sharedGridProps = {\n colGap: 2,\n rows: caseViewGridContainer.rows\n };\n\n if (persistentUtility) {\n if (xlOrAbove) {\n caseViewGridContainer = {\n ...sharedGridProps,\n cols: 'minmax(0, max-content) minmax(0, 1fr) repeat(2, minmax(0, max-content))',\n areas: '\"summary work-area persistentUtility utilities\"'\n };\n } else if (mdOrAbove) {\n caseViewGridContainer = {\n ...sharedGridProps,\n cols: 'minmax(0, 1fr) repeat(2, minmax(0, max-content))',\n areas: `\n \"summary summary summary\"\n \"work-area persistentUtility utilities\"\n `\n };\n }\n } else if (summaryExpanded) {\n if (mdOrAbove) {\n caseViewGridContainer = {\n ...sharedGridProps,\n cols: 'minmax(0, max-content) minmax(0, 1fr) minmax(0, max-content)',\n areas: '\"summary work-area utilities\"'\n };\n }\n } else if (mdOrAbove) {\n caseViewGridContainer = {\n ...sharedGridProps,\n cols: 'minmax(0, 1fr) minmax(0, max-content)',\n areas: `\n \"summary summary\"\n \"work-area utilities\"\n `\n };\n }\n\n // Apply sticky columns\n const scrollStickOptions = useRef<ScrollStickOptions & { elements: HTMLElement[] }>({\n elements: []\n });\n\n const stickOffset = useMemo(() => {\n if (windowIsAvailable && caseViewRef.current) {\n return parseFloat(\n window.getComputedStyle(caseViewRef.current).getPropertyValue('--appshell-offset')\n );\n }\n\n return 0;\n }, [caseViewRef.current]);\n\n useScrollStick(\n // isMediumOrAbove means side by side columns \| \| \|\n mdOrAbove ? { ...scrollStickOptions.current, offset: stickOffset } : undefined\n );\n\n // Preview set summary tab active\n useEffect(() => {\n if (isPreview) {\n onTabClick(summaryTabId);\n }\n }, []);\n\n // Initial tab selection\n useEffect(() => {\n if (\n mdOrAbove &&\n summaryExpanded &&\n !persistentUtility &&\n (currentTabId === summaryTabId \|\| currentTabId === utilitiesTabId)\n ) {\n onTabClick(tabItemsProp[0]?.id);\n }\n // Toggle utilities tab selection\n if (mdOrAbove && [utilitiesTabId, persistentUtilityTabId].includes(currentTabId)) {\n onTabClick(initialTabId);\n }\n }, [mdOrAbove]);\n\n // Initial / summary tab selection\n useEffect(() => {\n if (!smOrAbove && currentTabId === initialTabId) {\n onTabClick(summaryTabId);\n } else if (smOrAbove && currentTabId === summaryTabId) {\n onTabClick(initialTabId);\n }\n }, [smOrAbove]);\n\n // Summary tab selection\n useEffect(() => {\n if (isPreview) {\n onTabClick(summaryTabId);\n }\n }, [isPreview]);\n\n // Initial tab selection\n useEffect(() => {\n if (summaryExpanded && currentTabId === summaryTabId) {\n onTabClick(initialTabId);\n }\n }, [summaryExpanded]);\n\n // Handles scrolling to tab content for newly clicked tab\n useEffect(() => {\n if (!tabContentEl) return;\n const scrollPos = window.scrollY;\n const windowHeight = document.documentElement.clientHeight;\n const bottomPos = scrollPos + windowHeight * 0.8;\n const tabContentPos = tabContentEl.offsetTop;\n if (tabContentPos > bottomPos) {\n const top = tabContentPos - windowHeight * 0.2;\n window.scrollTo({ top, behavior: 'smooth' });\n }\n }, [currentTabId]);\n\n // We need a css variable for the height of the case summary when it is collapsed into a header like layout\n useLayoutEffect(() => {\n if (!caseViewRef.current \|\| !summaryRef.current) return;\n\n caseViewRef.current.style.setProperty(\n '--summary-height',\n `${!summaryExpanded ? summaryRef.current.offsetHeight : 0}px`\n );\n }, [summaryExpanded]);\n\n // CaseView context value\n // Choosing not to memo for now due to extent of deps and how often they change. Optimize as needed.\n // eslint-disable-next-line react/jsx-no-constructed-context-values\n const ctxValue: CaseViewContextValue = {\n testIds,\n caseId,\n heading,\n subheading,\n caseLink,\n parentCases,\n icon,\n followed,\n onFollowedChange,\n actions,\n promotedActions,\n onEdit,\n summaryFields,\n tabs: {\n items: tabItems,\n onClick: onTabClick,\n currentTabId\n },\n stages,\n tasks,\n persistentUtility,\n intelligentGuidance,\n summaryExpanded,\n utilitiesExpanded,\n onToggleSummary,\n isPreview,\n aboveSM: smOrAbove,\n aboveMD: mdOrAbove,\n aboveLG: lgOrAbove,\n aboveXL: xlOrAbove\n };\n\n const currentTabPanelRef = useRef<HTMLDivElement>(null);\n\n // The following effects are dedicated to resizeTable handling.\n useLayoutEffect(() => {\n if (!currentTabPanelRef.current \|\| !workAreaRef.current) return;\n\n const currentTabPanelEl = currentTabPanelRef.current;\n const workAreaEl = workAreaRef.current;\n\n resizeTable(currentTabPanelEl, workAreaEl);\n\n const onTabChange = () => {\n resizeTable(currentTabPanelEl, workAreaEl);\n };\n\n // TODO: optimize\n const mo = new MutationObserver(() => {\n resizeTable(currentTabPanelEl, workAreaEl);\n });\n\n mo.observe(currentTabPanelEl, { childList: true, subtree: true });\n\n currentTabPanelEl.addEventListener('cosmos-tab-changed', onTabChange);\n\n return () => {\n mo.disconnect();\n currentTabPanelEl.removeEventListener('cosmos-tab-changed', onTabChange);\n };\n });\n\n const [bannersStagesTasksEl, setBannersStagesTasksEl] = useElement<HTMLDivElement>(null);\n\n useEffect(() => {\n if (!bannersStagesTasksEl) return;\n\n const observer = new ResizeObserver(() => {\n if (!currentTabPanelRef.current \|\| !workAreaRef.current) return;\n\n resizeTable(currentTabPanelRef.current, workAreaRef.current);\n });\n\n observer.observe(bannersStagesTasksEl);\n\n return () => {\n observer.disconnect();\n };\n }, [bannersStagesTasksEl]);\n\n useEffect(() => {\n const onResize = () => {\n if (!currentTabPanelRef.current \|\| !workAreaRef.current) return;\n\n resizeTable(currentTabPanelRef.current, workAreaRef.current);\n };\n\n window.addEventListener('resize', onResize);\n\n return () => {\n window.removeEventListener('resize', onResize);\n };\n }, []);\n\n const utilitiesHeading = (\n <StyledUtilitiesHeading variant='h2'>{t('utilities')}</StyledUtilitiesHeading>\n );\n\n const utilitiesToggleButton = (\n <StyledExpandCollapseUtilitiesButton\n compact\n icon\n label={t(utilitiesExpanded ? 'collapse' : 'expand')}\n aria-label={t(utilitiesExpanded ? 'collapse_utilities_panel' : 'expand_utilities_panel')}\n onClick={() => {\n if (!obeyUtilitiesExpandedProp && utilitiesExpandedProp) {\n setObeyUtilitiesExpandedProp(true);\n } else {\n onToggleUtilities?.();\n }\n }}\n onFocus={() => {\n isToggleButtonFocused.current = true;\n }}\n onBlur={() => {\n isToggleButtonFocused.current = false;\n }}\n ref={toggleButtonRef}\n >\n <Icon name='arrow-micro-left' />\n </StyledExpandCollapseUtilitiesButton>\n );\n\n // Here we go...\n return (\n <>\n <CaseViewContext.Provider value={ctxValue}>\n {/* Root element /}\n <Grid\n data-testid={testIds.root}\n {...restProps}\n as={StyledCaseView}\n ref={caseViewRef}\n container={caseViewGridContainer}\n item={{ area: 'case-view' }}\n >\n {/ Summary /}\n <Grid\n as={StyledSummary}\n item={{ area: 'summary' }}\n desktop={mdOrAbove && (!persistentUtility \|\| xlOrAbove) && !summaryExpanded}\n isLargeOrAbove={lgOrAbove}\n ref={summaryRef}\n >\n <CaseSummary />\n </Grid>\n\n {/ Work area /}\n <Flex\n container={{\n direction: 'column',\n alignContent: 'start',\n rowGap: 2\n }}\n as={StyledWorkArea}\n persistentUtility={Boolean(persistentUtility)}\n ref={(el: HTMLDivElement) => {\n workAreaRef.current = el;\n if (el) scrollStickOptions.current?.elements.push(el);\n }}\n >\n {(banners \|\| stages \|\| tasks) && (\n <Flex\n container={{\n direction: 'column',\n alignContent: 'start',\n rowGap: 2\n }}\n ref={setBannersStagesTasksEl}\n >\n {banners && <div data-testid={testIds.banners}>{banners}</div>}\n {stages && <div data-testid={testIds.stages}>{stages}</div>}\n {tasks && <div data-testid={testIds.tasks}>{tasks}</div>}\n </Flex>\n )}\n\n {(!mdOrAbove \|\| (persistentUtility && !xlOrAbove) \|\| !summaryExpanded) && (\n <Tabs\n data-testid={testIds.tabs}\n tabs={tabItems}\n onTabClick={onTabClick}\n currentTabId={currentTabId}\n />\n )}\n\n <div ref={setTabContentEl}>\n {tabContent?.map(({ id, content }) => (\n <TabPanel\n data-testid={currentTabId === id ? testIds.tabContent : undefined}\n currentTabId={currentTabId}\n tabId={id}\n key={id}\n ref={currentTabId === id ? currentTabPanelRef : undefined}\n >\n {content}\n </TabPanel>\n ))}\n </div>\n </Flex>\n\n {/ Persistent utility column /}\n {persistentUtility && mdOrAbove && (\n <Grid as={StyledPersistentUtility} item={{ area: 'persistentUtility' }} data-app-region>\n {persistentUtility.content}\n </Grid>\n )}\n\n {/ Utility drawer /}\n {utilities && mdOrAbove && !lgOrAbove && utilitiesExpanded && (\n <Drawer\n as={StyledCaseDrawer}\n open={utilitiesExpanded}\n position='fixed'\n placement={direction.end}\n shadow\n nullWhenClosed\n hasPersistentUtility={!!persistentUtility}\n >\n <Flex\n as={StyledCaseDrawerContent}\n container={{ direction: 'column', gap: 2 }}\n data-app-region\n >\n <Flex container={{ alignItems: 'center', justify: 'between' }}>\n {utilitiesHeading}\n {utilitiesToggleButton}\n </Flex>\n\n {utilities}\n </Flex>\n </Drawer>\n )}\n\n {/ Utilities */}\n {utilities && mdOrAbove && (\n <Grid\n data-testid={testIds.utilities}\n ref={(el: HTMLDivElement) => {\n if (el) scrollStickOptions.current?.elements.push(el);\n }}\n as={StyledUtilities}\n container={{\n cols: 'minmax(0, 1fr)',\n rowGap: 2\n }}\n item={{\n area: 'utilities'\n }}\n data-app-region={lgOrAbove \|\| !utilitiesExpanded \|\| undefined}\n aria-label={t('utilities_label')}\n >\n <Flex\n container={{\n alignItems: 'center',\n justify: utilitiesExpanded ? 'between' : 'center'\n }}\n >\n {utilitiesHeading}\n {!lgOrAbove && utilitiesExpanded ? null : utilitiesToggleButton}\n </Flex>\n\n {utilitiesExpanded && lgOrAbove && utilities}\n\n {(!utilitiesExpanded \|\| (mdOrAbove && !lgOrAbove)) && (\n <UtilitiesSummary items={utilitiesSummaryItems} />\n )}\n </Grid>\n )}\n </Grid>\n </CaseViewContext.Provider>\n {intelligentGuidance}\n </>\n );\n};\n\nexport default withTestIds(CaseView, getCaseViewTestIds);\n"]}
1	+ {"version":3,"file":"CaseView.js","sourceRoot":"","sources":["../../../src/components/CaseView/CaseView.tsx"],"names":[],"mappings":"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","sourcesContent":["import { FC, useEffect, useMemo, useRef, useLayoutEffect, useState } from 'react';\n\nimport {\n Flex,\n Grid,\n Icon,\n registerIcon,\n TabPanel,\n useBreakpoint,\n useScrollStick,\n useElement,\n ForwardProps,\n Card,\n Drawer,\n useI18n,\n useDirection,\n Tabs,\n useAfterInitialEffect,\n windowIsAvailable,\n focusHeadingOrContainer,\n useConfiguration,\n useTestIds,\n withTestIds\n} from '@pega/cosmos-react-core';\nimport { ScrollStickOptions } from '@pega/cosmos-react-core/lib/hooks/useScrollStick';\nimport * as moveRightSolidIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/move-right-solid.icon';\nimport * as moveLeftSolidIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/move-left-solid.icon';\n\nimport CaseSummary from './CaseSummary';\nimport UtilitiesSummary from './UtilitiesSummary';\nimport {\n StyledCaseDrawer,\n StyledCaseDrawerContent,\n StyledCaseView,\n StyledWorkArea,\n StyledPersistentUtility,\n StyledSummary,\n StyledSummaryTabContent,\n StyledUtilities,\n StyledExpandCollapseUtilitiesButton,\n StyledUtilitiesHeading\n} from './CaseView.styles';\nimport { CaseViewContextValue, CaseViewProps } from './CaseView.types';\nimport CaseViewContext from './CaseView.context';\nimport CaseSummaryFields from './CaseSummaryFields';\nimport { getCaseViewTestIds } from './CaseView.test-ids';\n\nregisterIcon(moveRightSolidIcon, moveLeftSolidIcon);\n\n// This function is responsible for auto sizing table height in case tab panels.\nconst resizeTable = (tabPanelEl: HTMLDivElement, workAreaEl: HTMLDivElement) => {\n tabPanelEl.style.removeProperty('--content-height-in-view');\n\n // .rs-wrapper is currently the class used by the table component which needs to be targeted.\n const tables = Array.from(tabPanelEl.querySelectorAll('.rs-wrapper')).filter(\n table => table.getBoundingClientRect().width !== 0\n );\n\n // Only perform this logic when there is a single table in a tab's panel.\n if (tables.length !== 1) return;\n\n // This selector finds the table's root element as they are always wrapped in a Card.\n const table = tables[0].closest('article');\n\n if (!table) return;\n\n const tabPanelRect = tabPanelEl.getBoundingClientRect();\n const tableRect = table.getBoundingClientRect();\n const vpHeight = document.documentElement.clientHeight;\n const tableRectOffsetTop = tableRect.top + window.scrollY;\n const workAreaPaddingBlockEnd =\n // px unit are required for proper CSS calc calculation.\n window.getComputedStyle(workAreaEl).getPropertyValue('padding-block-end') \|\| '0px';\n\n // Accounts for content rendered after the table.\n const tableBottomToTabPanelBottom = tabPanelRect.bottom - tableRect.bottom;\n\n // Sets a CSS variable for available height based on screen size and view state.\n // Defines an available minimum height of ~600px.\n tabPanelEl.style.setProperty(\n '--content-height-in-view',\n `max(calc(${\n vpHeight - tableRectOffsetTop - tableBottomToTabPanelBottom\n }px - ${workAreaPaddingBlockEnd}), 37.5rem)`\n );\n};\n\nconst CaseView: FC<CaseViewProps & ForwardProps> = ({\n testId,\n\n // Case data mostly visually related to the case header\n caseId,\n heading,\n subheading,\n caseLink,\n parentCases,\n icon,\n followed,\n onFollowedChange,\n onEdit,\n actions,\n promotedActions,\n\n // Summary content and state props\n summaryFields,\n summaryExpanded: summaryExpandedProp = true,\n onToggleSummary,\n\n // Case tabs\n tabs: { currentTabId, items: tabItemsProp, onClick: onTabClick },\n\n // Workarea related content props\n banners,\n stages,\n tasks,\n tabContent: tabContentProp = [],\n\n // Utilities content and state props\n utilities,\n utilitiesSummaryItems,\n utilitiesExpanded: utilitiesExpandedProp = true,\n onToggleUtilities,\n\n // Etc...\n persistentUtility,\n intelligentGuidance,\n isPreview = false,\n ...restProps\n}: CaseViewProps) => {\n const testIds = useTestIds(testId, getCaseViewTestIds);\n\n // General util hooks\n const t = useI18n();\n const direction = useDirection();\n const { loadedRef } = useConfiguration();\n\n // Element refs\n const caseViewRef = useRef<HTMLDivElement>(null);\n const summaryRef = useRef<HTMLDivElement>(null);\n // undefined used to allow ref to be mutable. Element set below in ref callback for scroll stick.\n const workAreaRef = useRef<HTMLDivElement \| undefined>();\n const toggleButtonRef = useRef<HTMLButtonElement>(null);\n const isToggleButtonFocused = useRef(false);\n\n // Tab content\n const [tabContentEl, setTabContentEl] = useElement<HTMLElement>(null);\n\n // Breakpoint booleans\n const smOrAbove = useBreakpoint('sm');\n const mdOrAbove = useBreakpoint('md', { breakpointRef: caseViewRef });\n const lgOrAbove = useBreakpoint('lg', { breakpointRef: caseViewRef });\n const xlOrAbove = useBreakpoint('xl', { breakpointRef: caseViewRef });\n\n // DOM ids\n const initialTabId = tabItemsProp[0]?.id;\n const summaryTabId = `summary-${caseId}`;\n const utilitiesTabId = `utilities-${caseId}`;\n const persistentUtilityTabId = `persistent-utility-${caseId}`;\n\n // Summary state handling\n let summaryExpanded = !isPreview && !!summaryExpandedProp;\n\n if (persistentUtility) {\n summaryExpanded = xlOrAbove;\n }\n\n // Focus heading on initial mount\n useEffect(() => {\n if (!caseViewRef.current) return;\n\n if (loadedRef.current) {\n focusHeadingOrContainer(caseViewRef.current, heading);\n } else {\n loadedRef.current = true;\n }\n }, [caseId]);\n\n // Utilities state handling\n\n // Used in coordination with a layoutEffect below to determine the utilities state on initial render.\n // Attempted with a ref but it did not work. Using state and enforcing a render in addition to the change render for lgOrAbove seems to fix...\n const [obeyUtilitiesExpandedProp, setObeyUtilitiesExpandedProp] = useState(lgOrAbove);\n\n // Allow the utilitiesExpandedProp to drive the utilities' state after the initial render\n useLayoutEffect(() => {\n if (lgOrAbove) setObeyUtilitiesExpandedProp(true);\n }, [lgOrAbove]);\n\n // Tracks whether a resize forced the onToggleUtilities to close the utilities when it's a drawer\n const utilitiesToggledByResize = useRef(false);\n\n // If the initial render is within the MD size, where the utility drawer renders, it must begin collapsed\n const utilitiesExpanded = obeyUtilitiesExpandedProp ? utilitiesExpandedProp : false;\n\n // Handles utilities state based on breakpoint changes.\n useAfterInitialEffect(() => {\n // If we change into the MD breakpoint range and the utilities state is expanded call the toggle prop to collapse it with controlled state\n if (mdOrAbove && !lgOrAbove && utilitiesExpandedProp) {\n onToggleUtilities?.();\n utilitiesToggledByResize.current = true;\n }\n\n if (lgOrAbove) {\n if (utilitiesToggledByResize.current && !utilitiesExpandedProp) {\n onToggleUtilities?.();\n }\n\n utilitiesToggledByResize.current = false;\n }\n // Purposely not listing utilitiesExpanded as a dependency as it is not a trigger and will be captured when BPs change\n }, [mdOrAbove, lgOrAbove]);\n\n // Handles focus of toggle button when toggled in drawer mode and when browser is resized\n useEffect(() => {\n if (isToggleButtonFocused.current) {\n toggleButtonRef.current?.focus();\n }\n\n if (!toggleButtonRef.current) {\n // Toggle button is not on DOM.\n isToggleButtonFocused.current = false;\n }\n }, [utilitiesExpanded, mdOrAbove, lgOrAbove]);\n\n // Prepare tabs\n const [tabItems, tabContent] = useMemo(() => {\n const summaryTab = { id: summaryTabId, name: t('summary') };\n const summaryTabContent = {\n id: summaryTabId,\n content: (\n <Card>\n <StyledSummaryTabContent>\n <CaseSummaryFields {...summaryFields} />\n </StyledSummaryTabContent>\n </Card>\n )\n };\n\n let items = tabItemsProp;\n let content = tabContentProp;\n\n if (mdOrAbove) {\n if (!summaryExpanded \|\| (persistentUtility && !xlOrAbove)) {\n items = [summaryTab, ...tabItemsProp];\n content = [summaryTabContent, ...tabContentProp];\n }\n\n return [items, content];\n }\n\n const utilityTabsItems = [];\n const utilityTabsContent = [];\n\n if (utilities) {\n utilityTabsItems.push({ id: utilitiesTabId, name: t('utilities') });\n utilityTabsContent.push({\n id: utilitiesTabId,\n content: <Flex container={{ direction: 'column', gap: 2 }}>{utilities}</Flex>\n });\n }\n\n if (persistentUtility) {\n utilityTabsItems.push({ id: persistentUtilityTabId, name: persistentUtility.title });\n utilityTabsContent.push({ id: persistentUtilityTabId, content: persistentUtility?.content });\n }\n\n items = [summaryTab, ...tabItemsProp, ...utilityTabsItems];\n content = [summaryTabContent, ...tabContentProp, ...utilityTabsContent];\n\n return [items, content];\n }, [\n tabItemsProp,\n summaryTabId,\n mdOrAbove,\n summaryExpanded,\n persistentUtility,\n xlOrAbove,\n tabContentProp,\n utilities,\n utilitiesTabId,\n persistentUtilityTabId\n ]);\n\n // Grid layout props\n let caseViewGridContainer = {\n cols: 'minmax(0, 1fr)',\n colGap: 0,\n rows: 'minmax(0, max-content) auto',\n areas: `\n \"summary\"\n \"work-area\"\n `\n };\n\n const sharedGridProps = {\n colGap: 2,\n rows: caseViewGridContainer.rows\n };\n\n if (persistentUtility) {\n if (xlOrAbove) {\n caseViewGridContainer = {\n ...sharedGridProps,\n cols: 'minmax(0, max-content) minmax(0, 1fr) repeat(2, minmax(0, max-content))',\n areas: '\"summary work-area persistentUtility utilities\"'\n };\n } else if (mdOrAbove) {\n caseViewGridContainer = {\n ...sharedGridProps,\n cols: 'minmax(0, 1fr) repeat(2, minmax(0, max-content))',\n areas: `\n \"summary summary summary\"\n \"work-area persistentUtility utilities\"\n `\n };\n }\n } else if (summaryExpanded) {\n if (mdOrAbove) {\n caseViewGridContainer = {\n ...sharedGridProps,\n cols: 'minmax(0, max-content) minmax(0, 1fr) minmax(0, max-content)',\n areas: '\"summary work-area utilities\"'\n };\n }\n } else if (mdOrAbove) {\n caseViewGridContainer = {\n ...sharedGridProps,\n cols: 'minmax(0, 1fr) minmax(0, max-content)',\n areas: `\n \"summary summary\"\n \"work-area utilities\"\n `\n };\n }\n\n // Apply sticky columns\n const scrollStickOptions = useRef<ScrollStickOptions & { elements: HTMLElement[] }>({\n elements: []\n });\n\n const stickOffset = useMemo(() => {\n if (windowIsAvailable && caseViewRef.current) {\n return parseFloat(\n window.getComputedStyle(caseViewRef.current).getPropertyValue('--appshell-offset')\n );\n }\n\n return 0;\n }, [caseViewRef.current]);\n\n useScrollStick(\n // isMediumOrAbove means side by side columns \| \| \|\n mdOrAbove ? { ...scrollStickOptions.current, offset: stickOffset } : undefined\n );\n\n // Preview set summary tab active\n useEffect(() => {\n if (isPreview) {\n onTabClick(summaryTabId);\n }\n }, []);\n\n // Initial tab selection\n useEffect(() => {\n if (\n mdOrAbove &&\n summaryExpanded &&\n !persistentUtility &&\n (currentTabId === summaryTabId \|\| currentTabId === utilitiesTabId)\n ) {\n onTabClick(tabItemsProp[0]?.id);\n }\n // Toggle utilities tab selection\n if (mdOrAbove && [utilitiesTabId, persistentUtilityTabId].includes(currentTabId)) {\n onTabClick(initialTabId);\n }\n }, [mdOrAbove]);\n\n // Initial / summary tab selection\n useEffect(() => {\n if (!smOrAbove && currentTabId === initialTabId) {\n onTabClick(summaryTabId);\n } else if (smOrAbove && currentTabId === summaryTabId) {\n onTabClick(initialTabId);\n }\n }, [smOrAbove]);\n\n // Summary tab selection\n useEffect(() => {\n if (isPreview) {\n onTabClick(summaryTabId);\n }\n }, [isPreview]);\n\n // Initial tab selection\n useEffect(() => {\n if (summaryExpanded && currentTabId === summaryTabId) {\n onTabClick(initialTabId);\n }\n }, [summaryExpanded]);\n\n // Handles scrolling to tab content for newly clicked tab\n useEffect(() => {\n if (!tabContentEl) return;\n const scrollPos = window.scrollY;\n const windowHeight = document.documentElement.clientHeight;\n const bottomPos = scrollPos + windowHeight * 0.8;\n const tabContentPos = tabContentEl.offsetTop;\n if (tabContentPos > bottomPos) {\n const top = tabContentPos - windowHeight * 0.2;\n window.scrollTo({ top, behavior: 'smooth' });\n }\n }, [currentTabId]);\n\n // We need a css variable for the height of the case summary when it is collapsed into a header like layout\n useLayoutEffect(() => {\n if (!caseViewRef.current \|\| !summaryRef.current) return;\n\n caseViewRef.current.style.setProperty(\n '--summary-height',\n `${!summaryExpanded ? summaryRef.current.offsetHeight : 0}px`\n );\n }, [summaryExpanded]);\n\n // CaseView context value\n // Choosing not to memo for now due to extent of deps and how often they change. Optimize as needed.\n // eslint-disable-next-line react/jsx-no-constructed-context-values\n const ctxValue: CaseViewContextValue = {\n testIds,\n caseId,\n heading,\n subheading,\n caseLink,\n parentCases,\n icon,\n followed,\n onFollowedChange,\n actions,\n promotedActions,\n onEdit,\n summaryFields,\n tabs: {\n items: tabItems,\n onClick: onTabClick,\n currentTabId\n },\n stages,\n tasks,\n persistentUtility,\n intelligentGuidance,\n summaryExpanded,\n utilitiesExpanded,\n onToggleSummary,\n isPreview,\n aboveSM: smOrAbove,\n aboveMD: mdOrAbove,\n aboveLG: lgOrAbove,\n aboveXL: xlOrAbove\n };\n\n const currentTabPanelRef = useRef<HTMLDivElement>(null);\n\n // The following effects are dedicated to resizeTable handling.\n useLayoutEffect(() => {\n if (!currentTabPanelRef.current \|\| !workAreaRef.current) return;\n\n const currentTabPanelEl = currentTabPanelRef.current;\n const workAreaEl = workAreaRef.current;\n\n resizeTable(currentTabPanelEl, workAreaEl);\n\n const onTabChange = () => {\n resizeTable(currentTabPanelEl, workAreaEl);\n };\n\n // TODO: optimize\n const mo = new MutationObserver(() => {\n resizeTable(currentTabPanelEl, workAreaEl);\n });\n\n mo.observe(currentTabPanelEl, { childList: true, subtree: true });\n\n currentTabPanelEl.addEventListener('cosmos-tab-changed', onTabChange);\n\n return () => {\n mo.disconnect();\n currentTabPanelEl.removeEventListener('cosmos-tab-changed', onTabChange);\n };\n });\n\n const [bannersStagesTasksEl, setBannersStagesTasksEl] = useElement<HTMLDivElement>(null);\n\n useEffect(() => {\n if (!bannersStagesTasksEl) return;\n\n const observer = new ResizeObserver(() => {\n if (!currentTabPanelRef.current \|\| !workAreaRef.current) return;\n\n resizeTable(currentTabPanelRef.current, workAreaRef.current);\n });\n\n observer.observe(bannersStagesTasksEl);\n\n return () => {\n observer.disconnect();\n };\n }, [bannersStagesTasksEl]);\n\n useEffect(() => {\n const onResize = () => {\n if (!currentTabPanelRef.current \|\| !workAreaRef.current) return;\n\n resizeTable(currentTabPanelRef.current, workAreaRef.current);\n };\n\n window.addEventListener('resize', onResize);\n\n return () => {\n window.removeEventListener('resize', onResize);\n };\n }, []);\n\n const utilitiesHeading = (\n <StyledUtilitiesHeading variant='h2'>{t('utilities')}</StyledUtilitiesHeading>\n );\n\n const utilitiesToggleButton = (\n <StyledExpandCollapseUtilitiesButton\n compact\n icon\n label={t(utilitiesExpanded ? 'collapse' : 'expand')}\n aria-label={t(utilitiesExpanded ? 'collapse_utilities_panel' : 'expand_utilities_panel')}\n onClick={() => {\n if (!obeyUtilitiesExpandedProp && utilitiesExpandedProp) {\n setObeyUtilitiesExpandedProp(true);\n } else {\n onToggleUtilities?.();\n }\n }}\n onFocus={() => {\n isToggleButtonFocused.current = true;\n }}\n onBlur={() => {\n isToggleButtonFocused.current = false;\n }}\n ref={toggleButtonRef}\n >\n <Icon name='arrow-micro-left' />\n </StyledExpandCollapseUtilitiesButton>\n );\n\n // Here we go...\n return (\n <>\n <CaseViewContext.Provider value={ctxValue}>\n {/* Root element /}\n <Grid\n data-testid={testIds.root}\n {...restProps}\n as={StyledCaseView}\n ref={caseViewRef}\n container={caseViewGridContainer}\n item={{ area: 'case-view' }}\n >\n {/ Summary /}\n <Grid\n as={StyledSummary}\n item={{ area: 'summary' }}\n desktop={mdOrAbove && (!persistentUtility \|\| xlOrAbove) && !summaryExpanded}\n isLargeOrAbove={lgOrAbove}\n ref={summaryRef}\n >\n <CaseSummary />\n </Grid>\n\n {/ Work area /}\n <Flex\n container={{\n direction: 'column',\n alignContent: 'start',\n rowGap: 2\n }}\n as={StyledWorkArea}\n persistentUtility={Boolean(persistentUtility)}\n ref={(el: HTMLDivElement) => {\n workAreaRef.current = el;\n if (el) scrollStickOptions.current?.elements.push(el);\n }}\n >\n {(banners \|\| stages \|\| tasks) && (\n <Flex\n container={{\n direction: 'column',\n alignContent: 'start',\n rowGap: 2\n }}\n ref={setBannersStagesTasksEl}\n >\n {banners && <div data-testid={testIds.banners}>{banners}</div>}\n {stages && <div data-testid={testIds.stages}>{stages}</div>}\n {tasks && <div data-testid={testIds.tasks}>{tasks}</div>}\n </Flex>\n )}\n\n {(!mdOrAbove \|\| (persistentUtility && !xlOrAbove) \|\| !summaryExpanded) && (\n <Tabs\n data-testid={testIds.tabs}\n tabs={tabItems}\n onTabClick={onTabClick}\n currentTabId={currentTabId}\n />\n )}\n\n <div ref={setTabContentEl}>\n {tabContent?.map(({ id, content }) => (\n <TabPanel\n data-testid={currentTabId === id ? testIds.tabContent : undefined}\n currentTabId={currentTabId}\n tabId={id}\n key={id}\n ref={currentTabId === id ? currentTabPanelRef : undefined}\n >\n {content}\n </TabPanel>\n ))}\n </div>\n </Flex>\n\n {/ Persistent utility column /}\n {persistentUtility && mdOrAbove && (\n <Grid as={StyledPersistentUtility} item={{ area: 'persistentUtility' }} data-app-region>\n {persistentUtility.content}\n </Grid>\n )}\n\n {/ Utility drawer /}\n {utilities && mdOrAbove && !lgOrAbove && utilitiesExpanded && (\n <Drawer\n as={StyledCaseDrawer}\n open={utilitiesExpanded}\n position='fixed'\n placement={direction.end}\n shadow\n nullWhenClosed\n hasPersistentUtility={!!persistentUtility}\n >\n <Flex\n as={StyledCaseDrawerContent}\n container={{ direction: 'column', gap: 2 }}\n data-app-region\n >\n <Flex container={{ alignItems: 'center', justify: 'between' }}>\n {utilitiesHeading}\n {utilitiesToggleButton}\n </Flex>\n\n {utilities}\n </Flex>\n </Drawer>\n )}\n\n {/ Utilities */}\n {utilities && mdOrAbove && (\n <Grid\n data-testid={testIds.utilities}\n ref={(el: HTMLDivElement) => {\n if (el) scrollStickOptions.current?.elements.push(el);\n }}\n as={StyledUtilities}\n container={{\n cols: 'minmax(0, 1fr)',\n rowGap: 2\n }}\n item={{\n area: 'utilities'\n }}\n data-app-region={lgOrAbove \|\| !utilitiesExpanded \|\| undefined}\n aria-label={t('utilities_label')}\n >\n <Flex\n container={{\n alignItems: 'center',\n justify: utilitiesExpanded ? 'between' : 'center'\n }}\n >\n {utilitiesHeading}\n {!lgOrAbove && utilitiesExpanded ? null : utilitiesToggleButton}\n </Flex>\n\n {utilitiesExpanded && lgOrAbove && utilities}\n\n {(!utilitiesExpanded \|\| (mdOrAbove && !lgOrAbove)) &&\n utilitiesSummaryItems &&\n utilitiesSummaryItems.length > 0 && (\n <UtilitiesSummary items={utilitiesSummaryItems} />\n )}\n </Grid>\n )}\n </Grid>\n </CaseViewContext.Provider>\n {intelligentGuidance}\n </>\n );\n};\n\nexport default withTestIds(CaseView, getCaseViewTestIds);\n"]}

package/lib/components/CaseView/CaseView.types.d.ts CHANGED Viewed

@@ -1,4 +1,4 @@
-import { ReactNode, MouseEvent } from 'react';
+import { ReactNode, MouseEvent, MouseEventHandler } from 'react';
 import { Tab, NoChildrenProp, FieldValueListItemProps, ForwardProps, MenuItemProps, Action, BaseProps, TestIdProp } from '@pega/cosmos-react-core';
 import type { getCaseViewTestIds } from './CaseView.test-ids';
 export type CaseSummaryFieldsProps = {
@@ -12,6 +12,12 @@ export type SummaryField = {
     simpleValue?: string | number | ReactNode;
     variant?: FieldValueListItemProps['variant'];
 };
+export type UtilitySummaryItem = {
+    iconName: string;
+    name: string;
+    count?: number;
+    onClick?: MouseEventHandler<HTMLButtonElement>;
+};
 export interface CaseViewProps extends NoChildrenProp, BaseProps, TestIdProp {
     /** A unique identifier for the case instance. */
     caseId: string;
@@ -69,11 +75,7 @@ export interface CaseViewProps extends NoChildrenProp, BaseProps, TestIdProp {
     /** A region for case widgets. */
     utilities?: ReactNode;
     /** An indicator of case widgets when the utilities are collapsed. */
-    utilitiesSummaryItems?: {
-        iconName: string;
-        name: string;
-        count?: number;
-    }[];
+    utilitiesSummaryItems?: UtilitySummaryItem[];
     /**
      * Determines the layout state of the utilities.
      * @default true

package/lib/components/CaseView/CaseView.types.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"CaseView.types.d.ts","sourceRoot":"","sources":["../../../src/components/CaseView/CaseView.types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;~~AAE9C~~,OAAO,EACL,GAAG,EACH,cAAc,EACd,uBAAuB,EACvB,YAAY,EACZ,aAAa,EACb,MAAM,EACN,SAAS,EACT,UAAU,EACX,MAAM,yBAAyB,CAAC;AAEjC,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,qBAAqB,CAAC;AAE9D,MAAM,MAAM,sBAAsB,GAAG;IACnC,OAAO,CAAC,EAAE,YAAY,EAAE,CAAC;IACzB,SAAS,CAAC,EAAE,YAAY,EAAE,CAAC;IAC3B,cAAc,CAAC,EAAE,OAAO,CAAC;CAC1B,CAAC;AAEF,MAAM,MAAM,YAAY,GAAG;IACzB,IAAI,EAAE,uBAAuB,CAAC,MAAM,CAAC,CAAC;IACtC,KAAK,EAAE,uBAAuB,CAAC,OAAO,CAAC,CAAC;IACxC,WAAW,CAAC,EAAE,MAAM,GAAG,MAAM,GAAG,SAAS,CAAC;IAC1C,OAAO,CAAC,EAAE,uBAAuB,CAAC,SAAS,CAAC,CAAC;CAC9C,CAAC;AAEF,MAAM,WAAW,aAAc,SAAQ,cAAc,EAAE,SAAS,EAAE,UAAU;IAC1E,iDAAiD;IACjD,MAAM,EAAE,MAAM,CAAC;IAEf,gDAAgD;IAChD,OAAO,EAAE,MAAM,CAAC;IAEhB,qDAAqD;IACrD,UAAU,CAAC,EAAE,MAAM,CAAC;IAKpB,kFAAkF;IAClF,WAAW,CAAC,EAAE,aAAa,EAAE,CAAC;IAE9B,kEAAkE;IAClE,IAAI,CAAC,EAAE,MAAM,CAAC;IAEd,6GAA6G;IAC7G,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB,4FAA4F;IAC5F,gBAAgB,CAAC,EAAE,CAAC,SAAS,EAAE,OAAO,KAAK,IAAI,CAAC;IAEhD,sDAAsD;IACtD,OAAO,CAAC,EAAE,MAAM,EAAE,CAAC;IAEnB,uEAAuE;IACvE,eAAe,CAAC,EAAE,MAAM,EAAE,CAAC;IAE3B,qDAAqD;IACrD,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IAEpB,6CAA6C;IAC7C,aAAa,EAAE,sBAAsB,CAAC;IAEtC;;;OAGG;IACH,eAAe,CAAC,EAAE,OAAO,CAAC;IAE1B,oDAAoD;IACpD,eAAe,CAAC,EAAE,MAAM,IAAI,CAAC;IAE7B,qFAAqF;IACrF,IAAI,EAAE;QACJ,KAAK,EAAE,GAAG,EAAE,CAAC;QACb,OAAO,EAAE,CAAC,EAAE,EAAE,MAAM,EAAE,KAAK,CAAC,EAAE,UAAU,CAAC,iBAAiB,GAAG,iBAAiB,CAAC,KAAK,IAAI,CAAC;QACzF,YAAY,EAAE,MAAM,CAAC;KACtB,CAAC;IAEF,mFAAmF;IACnF,UAAU,CAAC,EAAE;QAAE,OAAO,EAAE,SAAS,CAAC;QAAC,EAAE,EAAE,MAAM,CAAA;KAAE,EAAE,CAAC;IAElD,2CAA2C;IAC3C,MAAM,CAAC,EAAE,SAAS,CAAC;IAEnB,0CAA0C;IAC1C,KAAK,CAAC,EAAE,SAAS,CAAC;IAElB,2DAA2D;IAC3D,OAAO,CAAC,EAAE,SAAS,CAAC;IAEpB,+DAA+D;IAC/D,iBAAiB,CAAC,EAAE;QAAE,OAAO,EAAE,SAAS,CAAC;QAAC,KAAK,EAAE,MAAM,CAAA;KAAE,CAAC;IAE1D,4EAA4E;IAC5E,mBAAmB,CAAC,EAAE,SAAS,CAAC;IAEhC,iCAAiC;IACjC,SAAS,CAAC,EAAE,SAAS,CAAC;IAEtB,qEAAqE;IACrE,qBAAqB,CAAC,EAAE~~;QAAE~~,~~QAAQ~~,EAAE,~~MAAM,~~CAAC;~~QAAC,IAAI,EAAE,MAAM,CAAC;QAAC,KAAK,CAAC,EAAE,MAAM,CAAA;KAAE,EAAE,CAAC;IAE7E~~;;;OAGG;IACH,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAE5B,wCAAwC;IACxC,iBAAiB,CAAC,EAAE,MAAM,IAAI,CAAC;CAOhC;AAED,MAAM,WAAW,oBACf,SAAQ,IAAI,CACV,aAAa,EACX,QAAQ,GACR,SAAS,GACT,YAAY,GACZ,aAAa,GACb,MAAM,GACN,UAAU,GACV,kBAAkB,GAClB,SAAS,GACT,iBAAiB,GACjB,QAAQ,GACR,MAAM,GACN,iBAAiB,GACjB,eAAe,GACf,iBAAiB,GACjB,mBAAmB,GACnB,QAAQ,GACR,OAAO,GACP,mBAAmB,GACnB,qBAAqB,CACxB;IACD,OAAO,EAAE,OAAO,CAAC,UAAU,CAAC,OAAO,kBAAkB,CAAC,CAAC,CAAC;IACxD,OAAO,EAAE,OAAO,CAAC;IACjB,OAAO,EAAE,OAAO,CAAC;IACjB,OAAO,EAAE,OAAO,CAAC;IACjB,OAAO,EAAE,OAAO,CAAC;IACjB,SAAS,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE;QAAE,IAAI,EAAE,MAAM,CAAA;KAAE,GAAG,YAAY,CAAC;CAC5C"}
1	+ {"version":3,"file":"CaseView.types.d.ts","sourceRoot":"","sources":["../../../src/components/CaseView/CaseView.types.ts"],"names":[],"mappings":"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"}

package/lib/components/CaseView/CaseView.types.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"CaseView.types.js","sourceRoot":"","sources":["../../../src/components/CaseView/CaseView.types.ts"],"names":[],"mappings":"","sourcesContent":["import { ReactNode, MouseEvent } from 'react';\n\nimport {\n Tab,\n NoChildrenProp,\n FieldValueListItemProps,\n ForwardProps,\n MenuItemProps,\n Action,\n BaseProps,\n TestIdProp\n} from '@pega/cosmos-react-core';\n\nimport type { getCaseViewTestIds } from './CaseView.test-ids';\n\nexport type CaseSummaryFieldsProps = {\n primary?: SummaryField[];\n secondary?: SummaryField[];\n inSummaryPanel?: boolean;\n};\n\nexport type SummaryField = {\n name: FieldValueListItemProps['name'];\n value: FieldValueListItemProps['value'];\n simpleValue?: string \| number \| ReactNode;\n variant?: FieldValueListItemProps['variant'];\n};\n\nexport interface CaseViewProps extends NoChildrenProp, BaseProps, TestIdProp {\n /** A unique identifier for the case instance. /\n caseId: string;\n\n /* Text to quickly identify a case instance. /\n heading: string;\n\n /* Supplemental text to identify a case instance. /\n subheading?: string;\n\n /* @internal /\n caseLink?: CaseViewContextValue['caseLink'];\n\n /* A set of Link props representing the case parents, rendered as Breadcrumbs. /\n parentCases?: MenuItemProps[];\n\n /* An icon name to render as a visual in the case view header. /\n icon?: string;\n\n /* Indicates if the current user is following the case. This should be updated based on onFollowedChange. /\n followed?: boolean;\n\n /* Called when user chooses to follow or unfollow the case. Use this to update followed. /\n onFollowedChange?: (following: boolean) => void;\n\n /* Case level actions available in an action menu. /\n actions?: Action[];\n\n /* Visually promoted case level actions available outside the menu. /\n promotedActions?: Action[];\n\n /* A callback for when the edit button is clicked /\n onEdit?: () => void;\n\n /* Field data to render in summary areas. /\n summaryFields: CaseSummaryFieldsProps;\n\n /\n Determines the layout state of the summary region.\n * @default true\n /\n summaryExpanded?: boolean;\n\n /* Callback to toggle the case summary's layout. /\n onToggleSummary?: () => void;\n\n /* An object handling the rendering and functionality of the Tabs in CaseSummary. /\n tabs: {\n items: Tab[];\n onClick: (id: string, event?: MouseEvent<HTMLAnchorElement \| HTMLButtonElement>) => void;\n currentTabId: string;\n };\n\n /* A region within the center column that is controlled by tabs in CaseSummary. /\n tabContent?: { content: ReactNode; id: string }[];\n\n /* A region to hold a Stages component. /\n stages?: ReactNode;\n\n /* A region to hold a Tasks component. /\n tasks?: ReactNode;\n\n /* A region above the center column to display banners. /\n banners?: ReactNode;\n\n /* A region to the right reserved for persistent utilities. /\n persistentUtility?: { content: ReactNode; title: string };\n\n /* Provide an instance of IntelligentGuidance to be rendered for a case. /\n intelligentGuidance?: ReactNode;\n\n /* A region for case widgets. /\n utilities?: ReactNode;\n\n /* An indicator of case widgets when the utilities are collapsed. /\n utilitiesSummaryItems?: ~~{ iconName: string; name: string; count?: number }~~[];\n\n /\n Determines the layout state of the utilities.\n * @default true\n /\n utilitiesExpanded?: boolean;\n\n /* Callback to toggle the utilities. /\n onToggleUtilities?: () => void;\n\n /\n Indicates CaseView is rendered within a CasePreview.\n * @internal\n */\n isPreview?: boolean;\n}\n\nexport interface CaseViewContextValue\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 \| 'tabs'\n \| 'summaryExpanded'\n \| 'summaryFields'\n \| 'onToggleSummary'\n \| 'utilitiesExpanded'\n \| 'stages'\n \| 'tasks'\n \| 'persistentUtility'\n \| 'intelligentGuidance'\n > {\n testIds: Partial<ReturnType<typeof getCaseViewTestIds>>;\n aboveSM: boolean;\n aboveMD: boolean;\n aboveLG: boolean;\n aboveXL: boolean;\n isPreview: boolean;\n caseLink?: { href: string } & ForwardProps;\n}\n"]}
1	+ {"version":3,"file":"CaseView.types.js","sourceRoot":"","sources":["../../../src/components/CaseView/CaseView.types.ts"],"names":[],"mappings":"","sourcesContent":["import { ReactNode, MouseEvent, MouseEventHandler } from 'react';\n\nimport {\n Tab,\n NoChildrenProp,\n FieldValueListItemProps,\n ForwardProps,\n MenuItemProps,\n Action,\n BaseProps,\n TestIdProp\n} from '@pega/cosmos-react-core';\n\nimport type { getCaseViewTestIds } from './CaseView.test-ids';\n\nexport type CaseSummaryFieldsProps = {\n primary?: SummaryField[];\n secondary?: SummaryField[];\n inSummaryPanel?: boolean;\n};\n\nexport type SummaryField = {\n name: FieldValueListItemProps['name'];\n value: FieldValueListItemProps['value'];\n simpleValue?: string \| number \| ReactNode;\n variant?: FieldValueListItemProps['variant'];\n};\n\nexport type UtilitySummaryItem = {\n iconName: string;\n name: string;\n count?: number;\n onClick?: MouseEventHandler<HTMLButtonElement>;\n};\n\nexport interface CaseViewProps extends NoChildrenProp, BaseProps, TestIdProp {\n /** A unique identifier for the case instance. /\n caseId: string;\n\n /* Text to quickly identify a case instance. /\n heading: string;\n\n /* Supplemental text to identify a case instance. /\n subheading?: string;\n\n /* @internal /\n caseLink?: CaseViewContextValue['caseLink'];\n\n /* A set of Link props representing the case parents, rendered as Breadcrumbs. /\n parentCases?: MenuItemProps[];\n\n /* An icon name to render as a visual in the case view header. /\n icon?: string;\n\n /* Indicates if the current user is following the case. This should be updated based on onFollowedChange. /\n followed?: boolean;\n\n /* Called when user chooses to follow or unfollow the case. Use this to update followed. /\n onFollowedChange?: (following: boolean) => void;\n\n /* Case level actions available in an action menu. /\n actions?: Action[];\n\n /* Visually promoted case level actions available outside the menu. /\n promotedActions?: Action[];\n\n /* A callback for when the edit button is clicked /\n onEdit?: () => void;\n\n /* Field data to render in summary areas. /\n summaryFields: CaseSummaryFieldsProps;\n\n /\n Determines the layout state of the summary region.\n * @default true\n /\n summaryExpanded?: boolean;\n\n /* Callback to toggle the case summary's layout. /\n onToggleSummary?: () => void;\n\n /* An object handling the rendering and functionality of the Tabs in CaseSummary. /\n tabs: {\n items: Tab[];\n onClick: (id: string, event?: MouseEvent<HTMLAnchorElement \| HTMLButtonElement>) => void;\n currentTabId: string;\n };\n\n /* A region within the center column that is controlled by tabs in CaseSummary. /\n tabContent?: { content: ReactNode; id: string }[];\n\n /* A region to hold a Stages component. /\n stages?: ReactNode;\n\n /* A region to hold a Tasks component. /\n tasks?: ReactNode;\n\n /* A region above the center column to display banners. /\n banners?: ReactNode;\n\n /* A region to the right reserved for persistent utilities. /\n persistentUtility?: { content: ReactNode; title: string };\n\n /* Provide an instance of IntelligentGuidance to be rendered for a case. /\n intelligentGuidance?: ReactNode;\n\n /* A region for case widgets. /\n utilities?: ReactNode;\n\n /* An indicator of case widgets when the utilities are collapsed. /\n utilitiesSummaryItems?: UtilitySummaryItem[];\n\n /\n Determines the layout state of the utilities.\n * @default true\n /\n utilitiesExpanded?: boolean;\n\n /* Callback to toggle the utilities. /\n onToggleUtilities?: () => void;\n\n /\n Indicates CaseView is rendered within a CasePreview.\n * @internal\n */\n isPreview?: boolean;\n}\n\nexport interface CaseViewContextValue\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 \| 'tabs'\n \| 'summaryExpanded'\n \| 'summaryFields'\n \| 'onToggleSummary'\n \| 'utilitiesExpanded'\n \| 'stages'\n \| 'tasks'\n \| 'persistentUtility'\n \| 'intelligentGuidance'\n > {\n testIds: Partial<ReturnType<typeof getCaseViewTestIds>>;\n aboveSM: boolean;\n aboveMD: boolean;\n aboveLG: boolean;\n aboveXL: boolean;\n isPreview: boolean;\n caseLink?: { href: string } & ForwardProps;\n}\n"]}

package/lib/components/CaseView/UtilitiesSummary.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"UtilitiesSummary.d.ts","sourceRoot":"","sources":["../../../src/components/CaseView/UtilitiesSummary.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAE,MAAM,OAAO,CAAC;~~AAK1C~~,OAAO,EAAE,aAAa,~~EAAE~~,MAAM,kBAAkB,CAAC;~~AAEjD~~,MAAM,WAAW,qBAAqB;IACpC,KAAK,CAAC,EAAE,aAAa,CAAC,uBAAuB,CAAC,CAAC;CAChD;AAED,eAAO,MAAM,sBAAsB,~~yGAKjC~~,CAAC;~~AAEH~~,QAAA,MAAM,gBAAgB,EAAE,iBAAiB,CAAC,qBAAqB,~~CA8B9D~~,CAAC;AAEF,eAAe,gBAAgB,CAAC"}
1	+ {"version":3,"file":"UtilitiesSummary.d.ts","sourceRoot":"","sources":["../../../src/components/CaseView/UtilitiesSummary.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAe1C,OAAO,EAAE,aAAa,EAAsB,MAAM,kBAAkB,CAAC;AAErE,MAAM,WAAW,qBAAqB;IACpC,KAAK,CAAC,EAAE,aAAa,CAAC,uBAAuB,CAAC,CAAC;CAChD;AAED,eAAO,MAAM,sBAAsB,yGAIjC,CAAC;AAkEH,QAAA,MAAM,gBAAgB,EAAE,iBAAiB,CAAC,qBAAqB,CAe9D,CAAC;AAEF,eAAe,gBAAgB,CAAC"}

package/lib/components/CaseView/UtilitiesSummary.js CHANGED Viewed

@@ -1,21 +1,53 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { createElement as _createElement } from "react";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import styled, { css } from 'styled-components';
-import { Card, Count, Flex, Icon, useI18n, VisuallyHiddenText } from '@pega/cosmos-react-core';
-export const StyledUtilitiesSummary = styled.div(({ theme }) => {
+import { Button, Card, Count, Flex, Icon, Tooltip, useI18n, VisuallyHiddenText, useElement } from '@pega/cosmos-react-core';
+export const StyledUtilitiesSummary = styled.div(() => {
     return css `
     width: 2.75rem;
-    padding: ${theme.base.spacing} 0;
   `;
 });
-const UtilitiesSummary = ({ items = [] }) => {
-    const t = useI18n();
-    return items.length ? (_jsx(Card, { container: { direction: 'column', alignItems: 'center', gap: 3 }, as: StyledUtilitiesSummary, "aria-label": t('utilities_summary'), role: 'list', children: items.map(item => {
-            return (_jsxs(Flex, { container: {
+const StyledUtilitySummaryButton = styled(Button)(({ theme }) => css `
+    padding-block: ${theme.base.spacing};
+    padding-inline: 0;
+    width: 100%;
+    color: currentColor;
+    border-radius: unset;
+    border: none;
+    &:hover {
+      color: currentColor;
+    }
+    &:focus {
+      z-index: 1;
+    }
+    &:first-child {
+      border-start-start-radius: inherit;
+      border-start-end-radius: inherit;
+    }
+    &:last-child {
+      border-end-start-radius: inherit;
+      border-end-end-radius: inherit;
+    }
+    & + & {
+      margin: 0;
+    }
+  `);
+const UtilitySummary = ({ name, iconName, count, onClick }) => {
+    const [utilSummaryTooltip, setUtilSummaryTooltip] = useElement();
+    return (_jsxs(_Fragment, { children: [_jsxs(Flex, { container: {
                     direction: 'column',
                     alignItems: 'center',
                     gap: 0.5
-                }, item: { grow: 1 }, children: [_jsx(Icon, { name: item.iconName }), item.count !== undefined && _jsx(Count, { "aria-hidden": true, children: item.count }), _jsx(VisuallyHiddenText, { role: 'listitem', children: `${item.count ?? ''} ${item.name}` })] }, item.iconName));
-        }) })) : null;
+                }, onClick: onClick, ref: setUtilSummaryTooltip, as: StyledUtilitySummaryButton, children: [_jsx(Icon, { name: iconName }), count !== undefined && _jsx(Count, { "aria-hidden": true, children: count }), _jsx(VisuallyHiddenText, { role: 'listitem', children: `${count ?? ''} ${name}` })] }), _jsx(Tooltip, { target: utilSummaryTooltip, showDelay: 'none', hideDelay: 'none', children: name })] }));
+};
+const UtilitiesSummary = ({ items = [] }) => {
+    const t = useI18n();
+    return (_jsx(Card, { container: { direction: 'column', alignItems: 'center' }, as: StyledUtilitiesSummary, "aria-label": t('utilities_summary'), role: 'list', children: items.map(item => (_createElement(UtilitySummary, { ...item, key: item.iconName }))) }));
 };
 export default UtilitiesSummary;
 //# sourceMappingURL=UtilitiesSummary.js.map

package/lib/components/CaseView/UtilitiesSummary.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"UtilitiesSummary.js","sourceRoot":"","sources":["../../../src/components/CaseView/UtilitiesSummary.tsx"],"names":[],"mappings":";AACA,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAEhD,OAAO,~~EAAE~~,IAAI,~~EAAE~~,KAAK,~~EAAE~~,IAAI,~~EAAE~~,IAAI,~~EAAE~~,OAAO,~~EAAE~~,kBAAkB,~~EAAE~~,MAAM,yBAAyB,CAAC;~~AAQ/F~~,MAAM,CAAC,MAAM,sBAAsB,GAAG,MAAM,CAAC,GAAG,CAAC,~~CAAC~~,EAAE~~,KAAK,EAAE,EAAE,EAAE~~;~~IAC7D~~,OAAO,GAAG,CAAA;;~~eAEG~~,~~KAAK,~~CAAC~~,IAAI,CAAC,OAAO~~;~~GAC9B,CAAC;~~AACJ,CAAC,CAAC,CAAC;AAEH,MAAM,~~gBAAgB~~,~~GAA6C~~,CAAC,~~EAAE~~,~~KAAK~~,~~GAAG~~,EAAE,EAAE,EAAE,EAAE~~;IACpF~~,~~MAAM,~~CAAC,GAAG,~~OAAO~~,~~EAAE~~,CAAC~~;IACpB~~,OAAO,~~KAAK~~,CAAC,MAAM,~~CAAC~~,~~CAAC~~,CAAC,~~CACpB~~,~~KAAC,~~IAAI,~~IACH~~,~~SAAS~~,~~EAAE~~,~~EAAE~~,~~SAAS~~,~~EAAE~~,~~QAAQ~~,EAAE,~~UAAU,~~EAAE,~~QAAQ~~,~~EAAE,GAAG,EAAE,~~CAAC,~~EAAE~~,~~EAChE,~~EAAE,~~EAAE~~,~~sBAAsB,gBACd,~~CAAC,~~CAAC,mBAAmB,CAAC,EAClC,IAAI,EAAC,MAAM,YAEV,KAAK,CAAC,~~GAAG,~~CAAC~~,~~IAAI~~,CAAC~~,EAAE~~;~~YAChB~~,OAAO,CACL,MAAC,IAAI,IACH,SAAS,EAAE;oBACT,SAAS,EAAE,QAAQ;oBACnB,UAAU,EAAE,QAAQ;oBACpB,GAAG,EAAE,GAAG;iBACT,EACD,~~IAAI~~,EAAE,~~EAAE~~,~~IAAI~~,EAAE,~~CAAC~~,EAAE,~~aAGjB~~,KAAC,IAAI,IAAC,IAAI,EAAE,~~IAAI,CAAC,~~QAAQ,GAAI,~~EAC5B~~,~~IAAI,CAAC,~~KAAK,KAAK,SAAS,IAAI,KAAC,KAAK,mCAAc,~~IAAI,CAAC,~~KAAK,GAAS,~~EACpE~~,KAAC,kBAAkB,IAAC,IAAI,EAAC,UAAU,YAAE,GAAG,IAAI,~~CAAC~~,~~KAAK~~,IAAI,EAAE,~~IACtD~~,IAAI,CAAC,~~IACP~~,EAAE,~~GAAsB~~,~~KANnB~~,~~IAAI~~,CAAC,~~QAAQ~~,~~CAOb~~,~~CACR~~,CAAC;~~QACJ~~,CAAC,CAAC,~~GACG~~,~~CACR~~,CAAC,CAAC,CAAC,IAAI,CAAC;~~AACX~~,CAAC,CAAC;AAEF,eAAe,gBAAgB,CAAC","sourcesContent":["import { FunctionComponent } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport { Card, Count, Flex, Icon, useI18n, VisuallyHiddenText } from '@pega/cosmos-react-core';\n\nimport { CaseViewProps } from './CaseView.types';\n\nexport interface UtilitiesSummaryProps {\n items?: CaseViewProps['utilitiesSummaryItems'];\n}\n\nexport const StyledUtilitiesSummary = styled.div((~~{ theme }~~) => {\n return css`\n width: 2.75rem;\n ~~padding: ${theme.base.spacing} 0;\n~~ `;\n});\n\nconst ~~UtilitiesSummary:~~ ~~FunctionComponent<UtilitiesSummaryProps>~~ = ({ ~~items~~ ~~= []~~ }) => {\n ~~const~~ t = ~~useI18n()~~;\n ~~return~~ ~~items.length~~ ~~? (~~\n ~~<Card~~\n ~~container={{ direction~~: ~~'column',~~ ~~alignItems~~: ~~'center',~~ ~~gap~~: 3 }}\n ~~as=~~{~~StyledUtilitiesSummary}~~\n ~~aria~~-~~label={t('utilities_summary')~~}\n ~~role='list'~~\n >\n {~~items.map(item~~ => {\n return (\n <Flex\n container={{\n direction: 'column',\n alignItems: 'center',\n gap: 0.5\n }}\n ~~item~~={{ ~~grow: 1~~ }}\n ~~key~~={~~item.iconName~~}\n >\n <Icon name={~~item.~~iconName} />\n {~~item.~~count !== undefined && <Count aria-hidden>{~~item.~~count}</Count>}\n <VisuallyHiddenText role='listitem'>{`${~~item.~~count ?? ''} ${~~\n item.~~name\n }`}</VisuallyHiddenText>\n </Flex>\n );\n })}\n </Card>\n ) ~~: null~~;\n};\n\nexport default UtilitiesSummary;\n"]}
1	+ {"version":3,"file":"UtilitiesSummary.js","sourceRoot":"","sources":["../../../src/components/CaseView/UtilitiesSummary.tsx"],"names":[],"mappings":";;AACA,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAEhD,OAAO,EACL,MAAM,EACN,IAAI,EACJ,KAAK,EACL,IAAI,EACJ,IAAI,EACJ,OAAO,EACP,OAAO,EACP,kBAAkB,EAClB,UAAU,EACX,MAAM,yBAAyB,CAAC;AAQjC,MAAM,CAAC,MAAM,sBAAsB,GAAG,MAAM,CAAC,GAAG,CAAC,GAAG,EAAE;IACpD,OAAO,GAAG,CAAA;;GAET,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,MAAM,0BAA0B,GAAG,MAAM,CAAC,MAAM,CAAC,CAC/C,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE,CAAC,GAAG,CAAA;qBACC,KAAK,CAAC,IAAI,CAAC,OAAO;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA4BpC,CACF,CAAC;AAEF,MAAM,cAAc,GAA0C,CAAC,EAC7D,IAAI,EACJ,QAAQ,EACR,KAAK,EACL,OAAO,EACR,EAAE,EAAE;IACH,MAAM,CAAC,kBAAkB,EAAE,qBAAqB,CAAC,GAAG,UAAU,EAAe,CAAC;IAC9E,OAAO,CACL,8BACE,MAAC,IAAI,IACH,SAAS,EAAE;oBACT,SAAS,EAAE,QAAQ;oBACnB,UAAU,EAAE,QAAQ;oBACpB,GAAG,EAAE,GAAG;iBACT,EACD,OAAO,EAAE,OAAO,EAChB,GAAG,EAAE,qBAAqB,EAC1B,EAAE,EAAE,0BAA0B,aAE9B,KAAC,IAAI,IAAC,IAAI,EAAE,QAAQ,GAAI,EACvB,KAAK,KAAK,SAAS,IAAI,KAAC,KAAK,mCAAc,KAAK,GAAS,EAC1D,KAAC,kBAAkB,IAAC,IAAI,EAAC,UAAU,YAAE,GAAG,KAAK,IAAI,EAAE,IAAI,IAAI,EAAE,GAAsB,IAC9E,EAEP,KAAC,OAAO,IAAC,MAAM,EAAE,kBAAkB,EAAE,SAAS,EAAC,MAAM,EAAC,SAAS,EAAC,MAAM,YACnE,IAAI,GACG,IACT,CACJ,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,gBAAgB,GAA6C,CAAC,EAAE,KAAK,GAAG,EAAE,EAAE,EAAE,EAAE;IACpF,MAAM,CAAC,GAAG,OAAO,EAAE,CAAC;IAEpB,OAAO,CACL,KAAC,IAAI,IACH,SAAS,EAAE,EAAE,SAAS,EAAE,QAAQ,EAAE,UAAU,EAAE,QAAQ,EAAE,EACxD,EAAE,EAAE,sBAAsB,gBACd,CAAC,CAAC,mBAAmB,CAAC,EAClC,IAAI,EAAC,MAAM,YAEV,KAAK,CAAC,GAAG,CAAC,IAAI,CAAC,EAAE,CAAC,CACjB,eAAC,cAAc,OAAK,IAAI,EAAE,GAAG,EAAE,IAAI,CAAC,QAAQ,GAAI,CACjD,CAAC,GACG,CACR,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,gBAAgB,CAAC","sourcesContent":["import { FunctionComponent } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport {\n Button,\n Card,\n Count,\n Flex,\n Icon,\n Tooltip,\n useI18n,\n VisuallyHiddenText,\n useElement\n} from '@pega/cosmos-react-core';\n\nimport { CaseViewProps, UtilitySummaryItem } from './CaseView.types';\n\nexport interface UtilitiesSummaryProps {\n items?: CaseViewProps['utilitiesSummaryItems'];\n}\n\nexport const StyledUtilitiesSummary = styled.div(() => {\n return css`\n width: 2.75rem;\n `;\n});\n\nconst StyledUtilitySummaryButton = styled(Button)(\n ({ theme }) => css`\n padding-block: ${theme.base.spacing};\n padding-inline: 0;\n width: 100%;\n color: currentColor;\n border-radius: unset;\n border: none;\n\n &:hover {\n color: currentColor;\n }\n\n &:focus {\n z-index: 1;\n }\n\n &:first-child {\n border-start-start-radius: inherit;\n border-start-end-radius: inherit;\n }\n\n &:last-child {\n border-end-start-radius: inherit;\n border-end-end-radius: inherit;\n }\n\n & + & {\n margin: 0;\n }\n `\n);\n\nconst UtilitySummary: FunctionComponent<UtilitySummaryItem> = ({\n name,\n iconName,\n count,\n onClick\n}) => {\n const [utilSummaryTooltip, setUtilSummaryTooltip] = useElement<HTMLElement>();\n return (\n <>\n <Flex\n container={{\n direction: 'column',\n alignItems: 'center',\n gap: 0.5\n }}\n onClick={onClick}\n ref={setUtilSummaryTooltip}\n as={StyledUtilitySummaryButton}\n >\n <Icon name={iconName} />\n {count !== undefined && <Count aria-hidden>{count}</Count>}\n <VisuallyHiddenText role='listitem'>{`${count ?? ''} ${name}`}</VisuallyHiddenText>\n </Flex>\n\n <Tooltip target={utilSummaryTooltip} showDelay='none' hideDelay='none'>\n {name}\n </Tooltip>\n </>\n );\n};\n\nconst UtilitiesSummary: FunctionComponent<UtilitiesSummaryProps> = ({ items = [] }) => {\n const t = useI18n();\n\n return (\n <Card\n container={{ direction: 'column', alignItems: 'center' }}\n as={StyledUtilitiesSummary}\n aria-label={t('utilities_summary')}\n role='list'\n >\n {items.map(item => (\n <UtilitySummary {...item} key={item.iconName} />\n ))}\n </Card>\n );\n};\n\nexport default UtilitiesSummary;\n"]}

package/lib/components/CaseView/UtilitySummaryItemDialog.d.ts ADDED Viewed

@@ -0,0 +1,9 @@
+import type { WithAttributes } from '@pega/cosmos-react-core';
+import type { BaseDialogProps } from '@pega/cosmos-react-core/lib/components/Dialog/Dialog.types';
+type UtilitySummaryItemDialogProps = WithAttributes<'div', {
+    target: BaseDialogProps['target'];
+    onDismiss?: () => void;
+}>;
+declare const UtilitySummaryItemDialog: import("react").ForwardRefExoticComponent<Omit<UtilitySummaryItemDialogProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+export default UtilitySummaryItemDialog;
+//# sourceMappingURL=UtilitySummaryItemDialog.d.ts.map

package/lib/components/CaseView/UtilitySummaryItemDialog.d.ts.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"UtilitySummaryItemDialog.d.ts","sourceRoot":"","sources":["../../../src/components/CaseView/UtilitySummaryItemDialog.tsx"],"names":[],"mappings":"AAaA,OAAO,KAAK,EAAc,cAAc,EAAE,MAAM,yBAAyB,CAAC;AAE1E,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,4DAA4D,CAAC;AAQlG,KAAK,6BAA6B,GAAG,cAAc,CACjD,KAAK,EACL;IACE,MAAM,EAAE,eAAe,CAAC,QAAQ,CAAC,CAAC;IAClC,SAAS,CAAC,EAAE,MAAM,IAAI,CAAC;CACxB,CACF,CAAC;AAEF,QAAA,MAAM,wBAAwB,uIAmC5B,CAAC;AAEH,eAAe,wBAAwB,CAAC"}

package/lib/components/CaseView/UtilitySummaryItemDialog.js ADDED Viewed

@@ -0,0 +1,29 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef, useEffect } from 'react';
+import styled from 'styled-components';
+import { defaultThemeProp, getFocusables, useConsolidatedRef, useDirection, useFocusTrap, useEscape, useOuterEvent } from '@pega/cosmos-react-core';
+import Dialog from '@pega/cosmos-react-core/lib/components/Dialog/Dialog';
+const StyledUtilitySummaryItemDialog = styled(Dialog) `
+  width: 25rem;
+`;
+StyledUtilitySummaryItemDialog.defaultProps = defaultThemeProp;
+const UtilitySummaryItemDialog = forwardRef(function UtilitySummaryItemDialog({ children, target, onDismiss }, ref) {
+    const dialogRef = useConsolidatedRef(ref);
+    useOuterEvent('mousedown', [dialogRef], () => {
+        onDismiss?.();
+        target.focus();
+    });
+    useEscape(() => {
+        onDismiss?.();
+        target.focus();
+    }, dialogRef);
+    useFocusTrap(dialogRef, false);
+    useEffect(() => {
+        const focusables = getFocusables(dialogRef);
+        focusables[0]?.focus();
+    }, []);
+    const { start } = useDirection();
+    return (_jsx(StyledUtilitySummaryItemDialog, { ref: dialogRef, target: target, arrow: true, placement: `${start}-start`, children: children }));
+});
+export default UtilitySummaryItemDialog;
+//# sourceMappingURL=UtilitySummaryItemDialog.js.map

package/lib/components/CaseView/UtilitySummaryItemDialog.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"UtilitySummaryItemDialog.js","sourceRoot":"","sources":["../../../src/components/CaseView/UtilitySummaryItemDialog.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAE9C,OAAO,MAAM,MAAM,mBAAmB,CAAC;AAEvC,OAAO,EACL,gBAAgB,EAChB,aAAa,EACb,kBAAkB,EAClB,YAAY,EACZ,YAAY,EACZ,SAAS,EACT,aAAa,EACd,MAAM,yBAAyB,CAAC;AAEjC,OAAO,MAAM,MAAM,sDAAsD,CAAC;AAG1E,MAAM,8BAA8B,GAAG,MAAM,CAAC,MAAM,CAAC,CAAA;;CAEpD,CAAC;AAEF,8BAA8B,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAU/D,MAAM,wBAAwB,GAAG,UAAU,CAGzC,SAAS,wBAAwB,CAAC,EAAE,QAAQ,EAAE,MAAM,EAAE,SAAS,EAAE,EAAE,GAAG;IACtE,MAAM,SAAS,GAAG,kBAAkB,CAAC,GAAG,CAAC,CAAC;IAE1C,aAAa,CAAC,WAAW,EAAE,CAAC,SAAS,CAAC,EAAE,GAAG,EAAE;QAC3C,SAAS,EAAE,EAAE,CAAC;QACd,MAAM,CAAC,KAAK,EAAE,CAAC;IACjB,CAAC,CAAC,CAAC;IAEH,SAAS,CAAC,GAAG,EAAE;QACb,SAAS,EAAE,EAAE,CAAC;QACd,MAAM,CAAC,KAAK,EAAE,CAAC;IACjB,CAAC,EAAE,SAAS,CAAC,CAAC;IAEd,YAAY,CAAC,SAAS,EAAE,KAAK,CAAC,CAAC;IAE/B,SAAS,CAAC,GAAG,EAAE;QACb,MAAM,UAAU,GAAG,aAAa,CAAC,SAAS,CAAC,CAAC;QAC5C,UAAU,CAAC,CAAC,CAAC,EAAE,KAAK,EAAE,CAAC;IACzB,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,MAAM,EAAE,KAAK,EAAE,GAAG,YAAY,EAAE,CAAC;IAEjC,OAAO,CACL,KAAC,8BAA8B,IAC7B,GAAG,EAAE,SAAS,EACd,MAAM,EAAE,MAAM,EACd,KAAK,QACL,SAAS,EAAE,GAAG,KAAK,QAAQ,YAE1B,QAAQ,GACsB,CAClC,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,eAAe,wBAAwB,CAAC","sourcesContent":["import { forwardRef, useEffect } from 'react';\nimport type { PropsWithoutRef } from 'react';\nimport styled from 'styled-components';\n\nimport {\n defaultThemeProp,\n getFocusables,\n useConsolidatedRef,\n useDirection,\n useFocusTrap,\n useEscape,\n useOuterEvent\n} from '@pega/cosmos-react-core';\nimport type { RefElement, WithAttributes } from '@pega/cosmos-react-core';\nimport Dialog from '@pega/cosmos-react-core/lib/components/Dialog/Dialog';\nimport type { BaseDialogProps } from '@pega/cosmos-react-core/lib/components/Dialog/Dialog.types';\n\nconst StyledUtilitySummaryItemDialog = styled(Dialog)`\n width: 25rem;\n`;\n\nStyledUtilitySummaryItemDialog.defaultProps = defaultThemeProp;\n\ntype UtilitySummaryItemDialogProps = WithAttributes<\n 'div',\n {\n target: BaseDialogProps['target'];\n onDismiss?: () => void;\n }\n>;\n\nconst UtilitySummaryItemDialog = forwardRef<\n RefElement<UtilitySummaryItemDialogProps>,\n PropsWithoutRef<UtilitySummaryItemDialogProps>\n>(function UtilitySummaryItemDialog({ children, target, onDismiss }, ref) {\n const dialogRef = useConsolidatedRef(ref);\n\n useOuterEvent('mousedown', [dialogRef], () => {\n onDismiss?.();\n target.focus();\n });\n\n useEscape(() => {\n onDismiss?.();\n target.focus();\n }, dialogRef);\n\n useFocusTrap(dialogRef, false);\n\n useEffect(() => {\n const focusables = getFocusables(dialogRef);\n focusables[0]?.focus();\n }, []);\n\n const { start } = useDirection();\n\n return (\n <StyledUtilitySummaryItemDialog\n ref={dialogRef}\n target={target}\n arrow\n placement={`${start}-start`}\n >\n {children}\n </StyledUtilitySummaryItemDialog>\n );\n});\n\nexport default UtilitySummaryItemDialog;\n"]}

package/lib/components/CaseView/index.d.ts CHANGED Viewed

@@ -1,4 +1,5 @@
 export { default } from './CaseView';
 export type { CaseViewProps } from './CaseView.types';
 export { StyledCaseView, StyledWorkArea as StyledCaseViewContent, StyledCaseDrawer, StyledCaseDrawerContent, StyledSummary as StyledSummaryRegion } from './CaseView.styles';
+export { default as UtilitySummaryItemDialog } from './UtilitySummaryItemDialog';
 //# sourceMappingURL=index.d.ts.map

package/lib/components/CaseView/index.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/CaseView/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,YAAY,CAAC;AACrC,YAAY,EAAE,aAAa,EAAE,MAAM,kBAAkB,CAAC;AACtD,OAAO,EACL,cAAc,EACd,cAAc,IAAI,qBAAqB,EACvC,gBAAgB,EAChB,uBAAuB,EACvB,aAAa,IAAI,mBAAmB,EACrC,MAAM,mBAAmB,CAAC"}
1	+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/CaseView/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,YAAY,CAAC;AACrC,YAAY,EAAE,aAAa,EAAE,MAAM,kBAAkB,CAAC;AACtD,OAAO,EACL,cAAc,EACd,cAAc,IAAI,qBAAqB,EACvC,gBAAgB,EAChB,uBAAuB,EACvB,aAAa,IAAI,mBAAmB,EACrC,MAAM,mBAAmB,CAAC;AAC3B,OAAO,EAAE,OAAO,IAAI,wBAAwB,EAAE,MAAM,4BAA4B,CAAC"}

package/lib/components/CaseView/index.js CHANGED Viewed

@@ -1,3 +1,4 @@
 export { default } from './CaseView';
 export { StyledCaseView, StyledWorkArea as StyledCaseViewContent, StyledCaseDrawer, StyledCaseDrawerContent, StyledSummary as StyledSummaryRegion } from './CaseView.styles';
+export { default as UtilitySummaryItemDialog } from './UtilitySummaryItemDialog';
 //# sourceMappingURL=index.js.map

package/lib/components/CaseView/index.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/CaseView/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,YAAY,CAAC;AAErC,OAAO,EACL,cAAc,EACd,cAAc,IAAI,qBAAqB,EACvC,gBAAgB,EAChB,uBAAuB,EACvB,aAAa,IAAI,mBAAmB,EACrC,MAAM,mBAAmB,CAAC","sourcesContent":["export { default } from './CaseView';\nexport type { CaseViewProps } from './CaseView.types';\nexport {\n StyledCaseView,\n StyledWorkArea as StyledCaseViewContent,\n StyledCaseDrawer,\n StyledCaseDrawerContent,\n StyledSummary as StyledSummaryRegion\n} from './CaseView.styles';\n"]}
1	+ {"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/CaseView/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,YAAY,CAAC;AAErC,OAAO,EACL,cAAc,EACd,cAAc,IAAI,qBAAqB,EACvC,gBAAgB,EAChB,uBAAuB,EACvB,aAAa,IAAI,mBAAmB,EACrC,MAAM,mBAAmB,CAAC;AAC3B,OAAO,EAAE,OAAO,IAAI,wBAAwB,EAAE,MAAM,4BAA4B,CAAC","sourcesContent":["export { default } from './CaseView';\nexport type { CaseViewProps } from './CaseView.types';\nexport {\n StyledCaseView,\n StyledWorkArea as StyledCaseViewContent,\n StyledCaseDrawer,\n StyledCaseDrawerContent,\n StyledSummary as StyledSummaryRegion\n} from './CaseView.styles';\nexport { default as UtilitySummaryItemDialog } from './UtilitySummaryItemDialog';\n"]}

package/lib/components/Stages/Stages.js CHANGED Viewed

@@ -84,7 +84,7 @@ const Stages = forwardRef(function Stages({ current, stages, caseTitle, onLoadSt
                 if (isCurrent)
                     stageStatusText = t('current');
                 const hasToLoad = stagesToLoad.includes(stage.id);
-                return (_jsxs(Fragment, { children: [_jsx(StyledStageContainer, { children: _jsxs(Flex, { container: { justify: 'center', alignItems: 'center' }, as: StyledStage, item: {
+                return (_jsxs(Fragment, { children: [_jsx(Flex, { as: StyledStageContainer, item: { grow: 1, shrink: 0 }, children: _jsxs(Flex, { container: { justify: 'center', alignItems: 'center' }, as: StyledStage, item: {
                                     grow: compressedView && !isCurrent ? 0 : 1,
                                     shrink: compressedView && isCurrent ? 1 : 0
                                 }, "aria-current": isCurrent ? 'step' : undefined, "aria-label": t('stages_stage_label', [stage.name, stageStatusText]), onClick: (e) => {

package/lib/components/Stages/Stages.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Stages.js","sourceRoot":"","sources":["../../../src/components/Stages/Stages.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n FunctionComponent,\n useState,\n useRef,\n useEffect,\n forwardRef,\n MouseEvent,\n PropsWithoutRef,\n Fragment\n} from 'react';\nimport { remToPx } from 'polished';\n\nimport {\n Icon,\n Text,\n registerIcon,\n Flex,\n ForwardProps,\n useI18n,\n Button,\n Modal,\n useBreakpoint,\n debounce,\n useModalManager,\n useConsolidatedRef,\n useUID,\n ModalMethods,\n InfoDialog,\n useArrows,\n useAfterInitialEffect\n} from '@pega/cosmos-react-core';\nimport * as checkIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/check.icon';\n\nimport type { StagesProps } from './Stages.types';\nimport StageGlimpse from './StageGlimpse';\nimport {\n StyledInnerStage,\n StyledStage,\n StyledStageContainer,\n StyledStageGlimpse,\n StyledStages,\n StyledStagesDescription\n} from './Stages.styles';\n\nregisterIcon(checkIcon);\n\nconst Stages: FunctionComponent<StagesProps & ForwardProps> = forwardRef(function Stages(\n { current, stages, caseTitle, onLoadStage, ...restProps }: PropsWithoutRef<StagesProps>,\n ref: StagesProps['ref']\n) {\n const t = useI18n();\n\n const stagesRef = useConsolidatedRef(ref);\n const stagesRefs = useRef<HTMLButtonElement[]>([]);\n\n const [target, setTarget] = useState<HTMLButtonElement \| null>(null);\n\n const { create: createModal } = useModalManager();\n const modalMethods = useRef<ModalMethods>();\n const [showModal, setShowModal] = useState(false);\n\n const isSmallOrAbove = useBreakpoint('sm');\n const [compressedView, setCompressedView] = useState(false);\n const [minExpandedWidth, setMinExpandedWidth] = useState(0);\n\n useArrows(stagesRef, {\n selector: ':scope > li > button:not([aria-expanded])',\n dir: 'left-right'\n });\n\n const dialogId = useUID();\n const descriptionId = useUID();\n\n useEffect(() => {\n if (stagesRef.current) {\n if (compressedView) {\n const resizeObserver = new ResizeObserver(\n debounce((entries: ResizeObserverEntry[]) => {\n if (entries[0].contentRect.width > minExpandedWidth) {\n setCompressedView(false);\n }\n }, 100)\n );\n resizeObserver.observe(stagesRef.current);\n return () => resizeObserver.disconnect();\n }\n\n const intersectionObserver = new IntersectionObserver(\n entries => {\n if (!entries[0].isIntersecting) {\n setCompressedView(true);\n if (entries[0].rootBounds) setMinExpandedWidth(entries[0].rootBounds.width);\n }\n },\n {\n root: stagesRef.current,\n rootMargin: remToPx(0.0625),\n threshold: 1\n }\n );\n\n if (stagesRef.current.lastElementChild) {\n intersectionObserver.observe(stagesRef.current.lastElementChild);\n return () => intersectionObserver.disconnect();\n }\n }\n }, [minExpandedWidth, compressedView, stages.length]);\n\n const stagesToLoad = onLoadStage\n ? stages.filter(stage => !Array.isArray(stage.steps)).map(stage => stage.id)\n : [];\n\n const openModal = () => {\n setShowModal(true);\n if (stagesToLoad.length > 0) onLoadStage?.(stagesToLoad);\n modalMethods.current = createModal(Modal, {\n heading: caseTitle\n ? t('stages_case_lifecycle', [caseTitle])\n : t('stages_default_case_lifecycle'),\n progress: stagesToLoad.length > 0,\n children: stages.map(stage => (\n <Fragment key={stage.id}>\n <Text variant='h2'>{stage.name}</Text>\n <StageGlimpse stage={stage} />\n </Fragment>\n )),\n onBeforeClose: () => {\n setShowModal(false);\n target?.focus();\n setTarget(null);\n modalMethods.current = undefined;\n }\n });\n };\n\n useAfterInitialEffect(() => {\n modalMethods.current?.update({\n progress: stagesToLoad.length > 0,\n children: stages.map(stage => (\n <Fragment key={stage.id}>\n <Text variant='h2'>{stage.name}</Text>\n <StageGlimpse stage={stage} />\n </Fragment>\n ))\n });\n }, [stagesToLoad.length]);\n\n return (\n <Flex\n {...restProps}\n container\n as={StyledStages}\n ref={stagesRef}\n aria-orientation='horizontal'\n aria-label={t('stages_label')}\n aria-describedby={descriptionId}\n >\n <StyledStagesDescription id={descriptionId}>\n {t('stages_description')}\n </StyledStagesDescription>\n {stages.map((stage, index) => {\n const isCurrent = stage.id === current;\n let stageStatusText = t(stage.completed ? 'completed' : 'not_started');\n if (isCurrent) stageStatusText = t('current');\n const hasToLoad = stagesToLoad.includes(stage.id);\n return (\n <Fragment key={stage.id}>\n <StyledStageContainer>\n <Flex\n container={{ justify: 'center', alignItems: 'center' }}\n as={StyledStage}\n item={{\n grow: compressedView && !isCurrent ? 0 : 1,\n shrink: compressedView && isCurrent ? 1 : 0\n }}\n aria-current={isCurrent ? 'step' : undefined}\n aria-label={t('stages_stage_label', [stage.name, stageStatusText])}\n onClick={(e: MouseEvent<HTMLButtonElement>) => {\n if (isSmallOrAbove) {\n if (hasToLoad) onLoadStage?.([stage.id]);\n setTarget(e.currentTarget);\n } else {\n openModal();\n }\n }}\n ref={(el: HTMLButtonElement) => {\n stagesRefs.current[index] = el;\n }}\n aria-expanded={target && isSmallOrAbove}\n aria-controls={target ? dialogId : undefined}\n aria-haspopup\n >\n {stage.completed && <Icon name='check' />}\n {(!compressedView \|\| isCurrent \|\| !stage.completed) && (\n <StyledInnerStage ellipsis={isCurrent && compressedView}>\n {!isCurrent && compressedView ? index + 1 : stage.name}\n </StyledInnerStage>\n )}\n </Flex>\n </StyledStageContainer>\n {target && stagesRefs.current[index] === target && isSmallOrAbove && !showModal && (\n <InfoDialog\n heading={stage.name}\n target={target}\n progress={hasToLoad ? t('loading') : undefined}\n onDismiss={() => {\n setTarget(null);\n }}\n placement='bottom-start'\n >\n {!hasToLoad && (\n <StyledStageGlimpse>\n <StageGlimpse stage={stage} />\n <Button variant='secondary' onClick={openModal}>\n {t('stages_see_full_lifecycle')}\n </Button>\n </StyledStageGlimpse>\n )}\n </InfoDialog>\n )}\n </Fragment>\n );\n })}\n </Flex>\n );\n});\n\nexport default Stages;\n"]}
1	+ {"version":3,"file":"Stages.js","sourceRoot":"","sources":["../../../src/components/Stages/Stages.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n FunctionComponent,\n useState,\n useRef,\n useEffect,\n forwardRef,\n MouseEvent,\n PropsWithoutRef,\n Fragment\n} from 'react';\nimport { remToPx } from 'polished';\n\nimport {\n Icon,\n Text,\n registerIcon,\n Flex,\n ForwardProps,\n useI18n,\n Button,\n Modal,\n useBreakpoint,\n debounce,\n useModalManager,\n useConsolidatedRef,\n useUID,\n ModalMethods,\n InfoDialog,\n useArrows,\n useAfterInitialEffect\n} from '@pega/cosmos-react-core';\nimport * as checkIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/check.icon';\n\nimport type { StagesProps } from './Stages.types';\nimport StageGlimpse from './StageGlimpse';\nimport {\n StyledInnerStage,\n StyledStage,\n StyledStageContainer,\n StyledStageGlimpse,\n StyledStages,\n StyledStagesDescription\n} from './Stages.styles';\n\nregisterIcon(checkIcon);\n\nconst Stages: FunctionComponent<StagesProps & ForwardProps> = forwardRef(function Stages(\n { current, stages, caseTitle, onLoadStage, ...restProps }: PropsWithoutRef<StagesProps>,\n ref: StagesProps['ref']\n) {\n const t = useI18n();\n\n const stagesRef = useConsolidatedRef(ref);\n const stagesRefs = useRef<HTMLButtonElement[]>([]);\n\n const [target, setTarget] = useState<HTMLButtonElement \| null>(null);\n\n const { create: createModal } = useModalManager();\n const modalMethods = useRef<ModalMethods>();\n const [showModal, setShowModal] = useState(false);\n\n const isSmallOrAbove = useBreakpoint('sm');\n const [compressedView, setCompressedView] = useState(false);\n const [minExpandedWidth, setMinExpandedWidth] = useState(0);\n\n useArrows(stagesRef, {\n selector: ':scope > li > button:not([aria-expanded])',\n dir: 'left-right'\n });\n\n const dialogId = useUID();\n const descriptionId = useUID();\n\n useEffect(() => {\n if (stagesRef.current) {\n if (compressedView) {\n const resizeObserver = new ResizeObserver(\n debounce((entries: ResizeObserverEntry[]) => {\n if (entries[0].contentRect.width > minExpandedWidth) {\n setCompressedView(false);\n }\n }, 100)\n );\n resizeObserver.observe(stagesRef.current);\n return () => resizeObserver.disconnect();\n }\n\n const intersectionObserver = new IntersectionObserver(\n entries => {\n if (!entries[0].isIntersecting) {\n setCompressedView(true);\n if (entries[0].rootBounds) setMinExpandedWidth(entries[0].rootBounds.width);\n }\n },\n {\n root: stagesRef.current,\n rootMargin: remToPx(0.0625),\n threshold: 1\n }\n );\n\n if (stagesRef.current.lastElementChild) {\n intersectionObserver.observe(stagesRef.current.lastElementChild);\n return () => intersectionObserver.disconnect();\n }\n }\n }, [minExpandedWidth, compressedView, stages.length]);\n\n const stagesToLoad = onLoadStage\n ? stages.filter(stage => !Array.isArray(stage.steps)).map(stage => stage.id)\n : [];\n\n const openModal = () => {\n setShowModal(true);\n if (stagesToLoad.length > 0) onLoadStage?.(stagesToLoad);\n modalMethods.current = createModal(Modal, {\n heading: caseTitle\n ? t('stages_case_lifecycle', [caseTitle])\n : t('stages_default_case_lifecycle'),\n progress: stagesToLoad.length > 0,\n children: stages.map(stage => (\n <Fragment key={stage.id}>\n <Text variant='h2'>{stage.name}</Text>\n <StageGlimpse stage={stage} />\n </Fragment>\n )),\n onBeforeClose: () => {\n setShowModal(false);\n target?.focus();\n setTarget(null);\n modalMethods.current = undefined;\n }\n });\n };\n\n useAfterInitialEffect(() => {\n modalMethods.current?.update({\n progress: stagesToLoad.length > 0,\n children: stages.map(stage => (\n <Fragment key={stage.id}>\n <Text variant='h2'>{stage.name}</Text>\n <StageGlimpse stage={stage} />\n </Fragment>\n ))\n });\n }, [stagesToLoad.length]);\n\n return (\n <Flex\n {...restProps}\n container\n as={StyledStages}\n ref={stagesRef}\n aria-orientation='horizontal'\n aria-label={t('stages_label')}\n aria-describedby={descriptionId}\n >\n <StyledStagesDescription id={descriptionId}>\n {t('stages_description')}\n </StyledStagesDescription>\n {stages.map((stage, index) => {\n const isCurrent = stage.id === current;\n let stageStatusText = t(stage.completed ? 'completed' : 'not_started');\n if (isCurrent) stageStatusText = t('current');\n const hasToLoad = stagesToLoad.includes(stage.id);\n return (\n <Fragment key={stage.id}>\n <Flex as={StyledStageContainer} item={{ grow: 1, shrink: 0 }}>\n <Flex\n container={{ justify: 'center', alignItems: 'center' }}\n as={StyledStage}\n item={{\n grow: compressedView && !isCurrent ? 0 : 1,\n shrink: compressedView && isCurrent ? 1 : 0\n }}\n aria-current={isCurrent ? 'step' : undefined}\n aria-label={t('stages_stage_label', [stage.name, stageStatusText])}\n onClick={(e: MouseEvent<HTMLButtonElement>) => {\n if (isSmallOrAbove) {\n if (hasToLoad) onLoadStage?.([stage.id]);\n setTarget(e.currentTarget);\n } else {\n openModal();\n }\n }}\n ref={(el: HTMLButtonElement) => {\n stagesRefs.current[index] = el;\n }}\n aria-expanded={target && isSmallOrAbove}\n aria-controls={target ? dialogId : undefined}\n aria-haspopup\n >\n {stage.completed && <Icon name='check' />}\n {(!compressedView \|\| isCurrent \|\| !stage.completed) && (\n <StyledInnerStage ellipsis={isCurrent && compressedView}>\n {!isCurrent && compressedView ? index + 1 : stage.name}\n </StyledInnerStage>\n )}\n </Flex>\n </Flex>\n {target && stagesRefs.current[index] === target && isSmallOrAbove && !showModal && (\n <InfoDialog\n heading={stage.name}\n target={target}\n progress={hasToLoad ? t('loading') : undefined}\n onDismiss={() => {\n setTarget(null);\n }}\n placement='bottom-start'\n >\n {!hasToLoad && (\n <StyledStageGlimpse>\n <StageGlimpse stage={stage} />\n <Button variant='secondary' onClick={openModal}>\n {t('stages_see_full_lifecycle')}\n </Button>\n </StyledStageGlimpse>\n )}\n </InfoDialog>\n )}\n </Fragment>\n );\n })}\n </Flex>\n );\n});\n\nexport default Stages;\n"]}

package/lib/components/Stages/Stages.styles.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Stages.styles.d.ts","sourceRoot":"","sources":["../../../src/components/Stages/Stages.styles.ts"],"names":[],"mappings":"AAYA,eAAO,MAAM,YAAY,wGAYvB,CAAC;AAIH,eAAO,MAAM,gBAAgB;;SAW3B,CAAC;AAEH,eAAO,MAAM,WAAW,~~4GA+IvB~~,CAAC;AAIF,eAAO,MAAM,oBAAoB,wGAoDhC,CAAC;AAIF,eAAO,MAAM,oBAAoB,wGAS/B,CAAC;AAIH,eAAO,MAAM,UAAU;eAA0B,OAAO;SAyBtD,CAAC;AAIH,eAAO,MAAM,qBAAqB,8OAMhC,CAAC;AAIH,eAAO,MAAM,kBAAkB,yGAI7B,CAAC;AAIH,eAAO,MAAM,uBAAuB,uGAEnC,CAAC"}
1	+ {"version":3,"file":"Stages.styles.d.ts","sourceRoot":"","sources":["../../../src/components/Stages/Stages.styles.ts"],"names":[],"mappings":"AAYA,eAAO,MAAM,YAAY,wGAYvB,CAAC;AAIH,eAAO,MAAM,gBAAgB;;SAW3B,CAAC;AAEH,eAAO,MAAM,WAAW,4GAgJvB,CAAC;AAIF,eAAO,MAAM,oBAAoB,wGAoDhC,CAAC;AAIF,eAAO,MAAM,oBAAoB,wGAS/B,CAAC;AAIH,eAAO,MAAM,UAAU;eAA0B,OAAO;SAyBtD,CAAC;AAIH,eAAO,MAAM,qBAAqB,8OAMhC,CAAC;AAIH,eAAO,MAAM,kBAAkB,yGAI7B,CAAC;AAIH,eAAO,MAAM,uBAAuB,uGAEnC,CAAC"}

package/lib/components/Stages/Stages.styles.js CHANGED Viewed

@@ -43,6 +43,7 @@ export const StyledStage = styled.button(({ theme: { base: { spacing, palette, '
       height: calc(4 * ${spacing});
       padding-inline-start: calc(2 * ${spacing});
       padding-inline-end: ${spacing};
+      width: 100%;
       ::before,
       ::after {

package/lib/components/Stages/Stages.styles.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Stages.styles.js","sourceRoot":"","sources":["../../../src/components/Stages/Stages.styles.ts"],"names":[],"mappings":"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","sourcesContent":["import styled, { css } from 'styled-components';\nimport { rgba } from 'polished';\n\nimport {\n calculateFontSize,\n DateTimeDisplay,\n defaultThemeProp,\n StyledIcon,\n tryCatch,\n useDirection\n} from '@pega/cosmos-react-core';\n\nexport const StyledStages = styled.ol(({ theme }) => {\n return css`\n background-color: ${theme.base.palette['primary-background']};\n border-radius: ${theme.base['border-radius']};\n width: 100%;\n overflow: hidden;\n list-style: none;\n\n &:has(:focus-visible) {\n box-shadow: ${theme.base.shadow['focus-group']};\n }\n `;\n});\n\nStyledStages.defaultProps = defaultThemeProp;\n\nexport const StyledInnerStage = styled.span<{ ellipsis?: boolean }>(props => {\n return css`\n display: inline-block;\n text-align: center;\n white-space: nowrap;\n ${props.ellipsis &&\n css`\n overflow: hidden;\n text-overflow: ellipsis;\n `}\n `;\n});\n\nexport const StyledStage = styled.button(\n ({\n theme: {\n base: { spacing, palette, 'hit-area': hitArea, transparency }\n }\n }) => {\n const thinBorderWidth = '0.0625rem';\n const thickBorderWidth = '0.125rem';\n const { rtl } = useDirection();\n const borderShadow = tryCatch(() => rgba(palette['border-line'], 1));\n\n return css`\n background-color: inherit;\n color: ${palette['foreground-color']};\n outline: none;\n border-color: transparent;\n border-width: ${thinBorderWidth} 0;\n border-style: solid;\n position: relative;\n height: calc(4 * ${spacing});\n padding-inline-start: calc(2 * ${spacing});\n padding-inline-end: ${spacing};\n\n ::before,\n ::after {\n content: '';\n position: absolute;\n display: block;\n width: calc(2.25 * ${spacing});\n height: calc(2.25 * ${spacing});\n border-style: solid;\n border-color: ${palette['border-line']};\n border-inline-end-width: ${thinBorderWidth};\n border-inline-start-width: 0;\n border-top-width: ${rtl ? 0 : thinBorderWidth};\n border-bottom-width: ${rtl ? thinBorderWidth : 0};\n transform: rotateZ(45deg) skew(15deg, 15deg);\n\n @media (pointer: coarse) {\n width: calc(2.875 * ${spacing});\n height: calc(2.875 * ${spacing});\n transform: rotateZ(45deg) skew(20deg, 20deg);\n }\n }\n\n ::before {\n inset-inline-start: calc(-1.125 * ${spacing});\n\n @media (pointer: coarse) {\n inset-inline-start: calc(-1.375 * ${spacing});\n }\n }\n\n ::after {\n inset-inline-end: calc(-1.125 * ${spacing});\n z-index: 1;\n\n @media (pointer: coarse) {\n inset-inline-end: calc(-1.375 * ${spacing});\n }\n }\n\n &:hover,\n &:hover::before,\n &:hover::after {\n border-color: ${palette['border-line']};\n }\n\n &:focus,\n &:active,\n &:focus::before,\n &:active::before,\n &:focus::after,\n &:active::after {\n border-color: ${palette.interactive};\n }\n\n &:focus {\n border-width: ${thickBorderWidth} 0;\n }\n\n &:focus::before,\n &:focus::after {\n z-index: 1;\n border-inline-end-width: ${thickBorderWidth};\n border-top-width: ${rtl ? 0 : thickBorderWidth};\n border-bottom-width: ${rtl ? thickBorderWidth : 0};\n }\n\n &:focus::before {\n pointer-events: none;\n }\n\n &:active {\n border-width: ${thinBorderWidth} 0;\n\n ${StyledInnerStage} {\n opacity: ${transparency['transparent-3']};\n }\n }\n\n &:active::before,\n &:active::after {\n border-inline-end-width: ${thinBorderWidth};\n border-top-width: ${rtl ? 0 : thinBorderWidth};\n border-bottom-width: ${rtl ? thinBorderWidth : 0};\n }\n\n &[aria-current] {\n ${StyledInnerStage} {\n font-weight: bold;\n opacity: 1;\n }\n\n :hover {\n ${StyledInnerStage} {\n opacity: ${transparency['transparent-2']};\n }\n }\n\n ::after {\n filter: drop-shadow(0.0625rem -0.0625rem 0.125rem ${borderShadow});\n }\n }\n\n @media (pointer: coarse) {\n height: ${hitArea['finger-min']};\n padding-inline-start: calc(2.25 * ${spacing});\n }\n\n ${StyledIcon} {\n color: ${palette.success};\n\n & ~ ${StyledInnerStage} {\n margin-inline-start: 0.25rem;\n }\n }\n\n ${StyledInnerStage} {\n opacity: ${transparency['transparent-2']};\n }\n `;\n }\n);\n\nStyledStage.defaultProps = defaultThemeProp;\n\nexport const StyledStageContainer = styled.li(\n ({\n theme: {\n base: { spacing, 'border-radius': borderRadius }\n }\n }) => {\n const thinBorderWidth = '0.0625rem';\n const thickBorderWidth = '0.125rem';\n\n return css`\n &:first-of-type > ${StyledStage} {\n border-start-start-radius: ${borderRadius};\n border-end-start-radius: ${borderRadius};\n border-inline-start-width: ${thinBorderWidth};\n padding-inline-start: ${spacing};\n\n &:active {\n padding-inline-start: ${spacing};\n }\n\n &:focus {\n border-inline-start-width: ${thickBorderWidth};\n padding-inline-start: calc(${spacing} - ${thickBorderWidth} + ${thinBorderWidth});\n }\n\n ::before {\n display: none;\n }\n }\n\n &:last-of-type > ${StyledStage} {\n border-start-end-radius: ${borderRadius};\n border-end-end-radius: ${borderRadius};\n border-inline-end-width: ${thinBorderWidth};\n padding-inline-end: ${spacing};\n\n &:active {\n border-inline-end-width: ${thinBorderWidth};\n padding-inline-end: ${spacing};\n }\n\n &:focus {\n border-inline-end-width: ${thickBorderWidth};\n padding-inline-end: calc(${spacing} - ${thinBorderWidth});\n }\n\n ::after {\n display: none;\n }\n }\n `;\n }\n);\n\nStyledStageContainer.defaultProps = defaultThemeProp;\n\nexport const StyledStepsContainer = styled.ol(({ theme }) => {\n return css`\n list-style-type: none;\n margin: calc(2 * ${theme.base.spacing}) 0 calc(3 * ${theme.base.spacing});\n\n &:empty {\n margin-block-end: 0;\n }\n `;\n});\n\nStyledStepsContainer.defaultProps = defaultThemeProp;\n\nexport const StyledStep = styled.li<{ completed: boolean }>(({ completed, theme }) => {\n const textOpacity = completed ? theme.base.transparency['transparent-2'] : 1;\n\n return css`\n border-radius: 0;\n margin-block-end: calc(${theme.base.spacing});\n color: ${theme.base.palette['foreground-color']};\n\n &:last-child {\n margin-block-end: 0;\n }\n\n & > ${StyledIcon} {\n text-align: center;\n\n ${completed &&\n css`\n color: ${theme.base.palette.success};\n `}\n }\n\n div {\n opacity: ${textOpacity};\n }\n `;\n});\n\nStyledStep.defaultProps = defaultThemeProp;\n\nexport const StyledDateTimeDisplay = styled(DateTimeDisplay)(({ theme }) => {\n const fontSize = calculateFontSize(theme.base['font-size'], theme.base['font-scale']);\n return css`\n font-size: ${fontSize.xs};\n opacity: ${theme.base.transparency['transparent-2']};\n `;\n});\n\nStyledDateTimeDisplay.defaultProps = defaultThemeProp;\n\nexport const StyledStageGlimpse = styled.div(({ theme }) => {\n return css`\n max-width: ${theme.base['content-width'].sm};\n `;\n});\n\nStyledStageGlimpse.defaultProps = defaultThemeProp;\n\nexport const StyledStagesDescription = styled.p`\n display: none;\n`;\n"]}
1	+ {"version":3,"file":"Stages.styles.js","sourceRoot":"","sources":["../../../src/components/Stages/Stages.styles.ts"],"names":[],"mappings":"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","sourcesContent":["import styled, { css } from 'styled-components';\nimport { rgba } from 'polished';\n\nimport {\n calculateFontSize,\n DateTimeDisplay,\n defaultThemeProp,\n StyledIcon,\n tryCatch,\n useDirection\n} from '@pega/cosmos-react-core';\n\nexport const StyledStages = styled.ol(({ theme }) => {\n return css`\n background-color: ${theme.base.palette['primary-background']};\n border-radius: ${theme.base['border-radius']};\n width: 100%;\n overflow: hidden;\n list-style: none;\n\n &:has(:focus-visible) {\n box-shadow: ${theme.base.shadow['focus-group']};\n }\n `;\n});\n\nStyledStages.defaultProps = defaultThemeProp;\n\nexport const StyledInnerStage = styled.span<{ ellipsis?: boolean }>(props => {\n return css`\n display: inline-block;\n text-align: center;\n white-space: nowrap;\n ${props.ellipsis &&\n css`\n overflow: hidden;\n text-overflow: ellipsis;\n `}\n `;\n});\n\nexport const StyledStage = styled.button(\n ({\n theme: {\n base: { spacing, palette, 'hit-area': hitArea, transparency }\n }\n }) => {\n const thinBorderWidth = '0.0625rem';\n const thickBorderWidth = '0.125rem';\n const { rtl } = useDirection();\n const borderShadow = tryCatch(() => rgba(palette['border-line'], 1));\n\n return css`\n background-color: inherit;\n color: ${palette['foreground-color']};\n outline: none;\n border-color: transparent;\n border-width: ${thinBorderWidth} 0;\n border-style: solid;\n position: relative;\n height: calc(4 * ${spacing});\n padding-inline-start: calc(2 * ${spacing});\n padding-inline-end: ${spacing};\n width: 100%;\n\n ::before,\n ::after {\n content: '';\n position: absolute;\n display: block;\n width: calc(2.25 * ${spacing});\n height: calc(2.25 * ${spacing});\n border-style: solid;\n border-color: ${palette['border-line']};\n border-inline-end-width: ${thinBorderWidth};\n border-inline-start-width: 0;\n border-top-width: ${rtl ? 0 : thinBorderWidth};\n border-bottom-width: ${rtl ? thinBorderWidth : 0};\n transform: rotateZ(45deg) skew(15deg, 15deg);\n\n @media (pointer: coarse) {\n width: calc(2.875 * ${spacing});\n height: calc(2.875 * ${spacing});\n transform: rotateZ(45deg) skew(20deg, 20deg);\n }\n }\n\n ::before {\n inset-inline-start: calc(-1.125 * ${spacing});\n\n @media (pointer: coarse) {\n inset-inline-start: calc(-1.375 * ${spacing});\n }\n }\n\n ::after {\n inset-inline-end: calc(-1.125 * ${spacing});\n z-index: 1;\n\n @media (pointer: coarse) {\n inset-inline-end: calc(-1.375 * ${spacing});\n }\n }\n\n &:hover,\n &:hover::before,\n &:hover::after {\n border-color: ${palette['border-line']};\n }\n\n &:focus,\n &:active,\n &:focus::before,\n &:active::before,\n &:focus::after,\n &:active::after {\n border-color: ${palette.interactive};\n }\n\n &:focus {\n border-width: ${thickBorderWidth} 0;\n }\n\n &:focus::before,\n &:focus::after {\n z-index: 1;\n border-inline-end-width: ${thickBorderWidth};\n border-top-width: ${rtl ? 0 : thickBorderWidth};\n border-bottom-width: ${rtl ? thickBorderWidth : 0};\n }\n\n &:focus::before {\n pointer-events: none;\n }\n\n &:active {\n border-width: ${thinBorderWidth} 0;\n\n ${StyledInnerStage} {\n opacity: ${transparency['transparent-3']};\n }\n }\n\n &:active::before,\n &:active::after {\n border-inline-end-width: ${thinBorderWidth};\n border-top-width: ${rtl ? 0 : thinBorderWidth};\n border-bottom-width: ${rtl ? thinBorderWidth : 0};\n }\n\n &[aria-current] {\n ${StyledInnerStage} {\n font-weight: bold;\n opacity: 1;\n }\n\n :hover {\n ${StyledInnerStage} {\n opacity: ${transparency['transparent-2']};\n }\n }\n\n ::after {\n filter: drop-shadow(0.0625rem -0.0625rem 0.125rem ${borderShadow});\n }\n }\n\n @media (pointer: coarse) {\n height: ${hitArea['finger-min']};\n padding-inline-start: calc(2.25 * ${spacing});\n }\n\n ${StyledIcon} {\n color: ${palette.success};\n\n & ~ ${StyledInnerStage} {\n margin-inline-start: 0.25rem;\n }\n }\n\n ${StyledInnerStage} {\n opacity: ${transparency['transparent-2']};\n }\n `;\n }\n);\n\nStyledStage.defaultProps = defaultThemeProp;\n\nexport const StyledStageContainer = styled.li(\n ({\n theme: {\n base: { spacing, 'border-radius': borderRadius }\n }\n }) => {\n const thinBorderWidth = '0.0625rem';\n const thickBorderWidth = '0.125rem';\n\n return css`\n &:first-of-type > ${StyledStage} {\n border-start-start-radius: ${borderRadius};\n border-end-start-radius: ${borderRadius};\n border-inline-start-width: ${thinBorderWidth};\n padding-inline-start: ${spacing};\n\n &:active {\n padding-inline-start: ${spacing};\n }\n\n &:focus {\n border-inline-start-width: ${thickBorderWidth};\n padding-inline-start: calc(${spacing} - ${thickBorderWidth} + ${thinBorderWidth});\n }\n\n ::before {\n display: none;\n }\n }\n\n &:last-of-type > ${StyledStage} {\n border-start-end-radius: ${borderRadius};\n border-end-end-radius: ${borderRadius};\n border-inline-end-width: ${thinBorderWidth};\n padding-inline-end: ${spacing};\n\n &:active {\n border-inline-end-width: ${thinBorderWidth};\n padding-inline-end: ${spacing};\n }\n\n &:focus {\n border-inline-end-width: ${thickBorderWidth};\n padding-inline-end: calc(${spacing} - ${thinBorderWidth});\n }\n\n ::after {\n display: none;\n }\n }\n `;\n }\n);\n\nStyledStageContainer.defaultProps = defaultThemeProp;\n\nexport const StyledStepsContainer = styled.ol(({ theme }) => {\n return css`\n list-style-type: none;\n margin: calc(2 * ${theme.base.spacing}) 0 calc(3 * ${theme.base.spacing});\n\n &:empty {\n margin-block-end: 0;\n }\n `;\n});\n\nStyledStepsContainer.defaultProps = defaultThemeProp;\n\nexport const StyledStep = styled.li<{ completed: boolean }>(({ completed, theme }) => {\n const textOpacity = completed ? theme.base.transparency['transparent-2'] : 1;\n\n return css`\n border-radius: 0;\n margin-block-end: calc(${theme.base.spacing});\n color: ${theme.base.palette['foreground-color']};\n\n &:last-child {\n margin-block-end: 0;\n }\n\n & > ${StyledIcon} {\n text-align: center;\n\n ${completed &&\n css`\n color: ${theme.base.palette.success};\n `}\n }\n\n div {\n opacity: ${textOpacity};\n }\n `;\n});\n\nStyledStep.defaultProps = defaultThemeProp;\n\nexport const StyledDateTimeDisplay = styled(DateTimeDisplay)(({ theme }) => {\n const fontSize = calculateFontSize(theme.base['font-size'], theme.base['font-scale']);\n return css`\n font-size: ${fontSize.xs};\n opacity: ${theme.base.transparency['transparent-2']};\n `;\n});\n\nStyledDateTimeDisplay.defaultProps = defaultThemeProp;\n\nexport const StyledStageGlimpse = styled.div(({ theme }) => {\n return css`\n max-width: ${theme.base['content-width'].sm};\n `;\n});\n\nStyledStageGlimpse.defaultProps = defaultThemeProp;\n\nexport const StyledStagesDescription = styled.p`\n display: none;\n`;\n"]}

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@pega/cosmos-react-work",
-  "version": "5.0.0-dev.4.4",
+  "version": "5.0.0-dev.4.6",
   "repository": {
     "type": "git",
     "url": "https://github.com/pegasystems/cosmos-react.git",
@@ -20,7 +20,7 @@
     "build": "tsc -b"
   },
   "dependencies": {
-    "@pega/cosmos-react-core": "5.0.0-dev.4.4",
+    "@pega/cosmos-react-core": "5.0.0-dev.4.6",
     "@types/react": "^17.0.62",
     "@types/react-dom": "^17.0.20",
     "@types/styled-components": "^5.1.26",