@pega/cosmos-react-core 4.4.10 → 4.4.11
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.
|
@@ -156,7 +156,7 @@ const Banner = forwardRef(function Banner({ variant, headingTag = 'h2', messages
|
|
|
156
156
|
focusHeadingOrContainer(bannerRef.current, heading);
|
|
157
157
|
}
|
|
158
158
|
}), []);
|
|
159
|
-
return (_jsxs(Grid, { ...restProps, as: StyledBanner, container: { cols: '2rem minmax(0, 1fr)' }, role: role, "aria-live": ariaLive, headingTag: headingTag, ref: bannerRef, children: [_jsx(Flex, { as: StyledBannerStatus, container: { justify: 'center', alignItems: 'start', pad: [1.5, 0] }, variant: variant, children: _jsx(Icon, { name: icon }) }), count === 1 ? (_jsxs(Flex, { container: { alignItems: 'start' }, as: StyledBannerContent, children: [_jsx(VisuallyHiddenText, { as: headingTag, children: `${heading} ${count}` }), _jsx(Flex, { item: { alignSelf: 'center', grow: 1 }, as: 'ul', children: typeof messages[0] === 'string' ? (_jsx(BannerMessageItem, { label: messages[0], as: 'li' })) : (_jsx(BannerMessageItem, { ...messages[0], as: 'li' })) }), onDismiss && (_jsx(Button, { onClick: onDismiss, label: t('dismiss'), "aria-label": t('banner_dismiss_button_label_a11y'), variant: 'simple', icon: true, children: _jsx(Icon, { name: 'times' }) }))] })) : (_jsxs(StyledBannerContent, { expandable: true, children: [_jsxs(Grid, { as: StyledBannerHeader, container: { cols: 'auto 1fr auto', areas: '"toggle heading dismiss"', gap: 0.5 }, children: [_jsxs(Grid, { container: { cols: '
|
|
159
|
+
return (_jsxs(Grid, { ...restProps, as: StyledBanner, container: { cols: '2rem minmax(0, 1fr)' }, role: role, "aria-live": ariaLive, headingTag: headingTag, ref: bannerRef, children: [_jsx(Flex, { as: StyledBannerStatus, container: { justify: 'center', alignItems: 'start', pad: [1.5, 0] }, variant: variant, children: _jsx(Icon, { name: icon }) }), count === 1 ? (_jsxs(Flex, { container: { alignItems: 'start' }, as: StyledBannerContent, children: [_jsx(VisuallyHiddenText, { as: headingTag, children: `${heading} ${count}` }), _jsx(Flex, { item: { alignSelf: 'center', grow: 1 }, as: 'ul', children: typeof messages[0] === 'string' ? (_jsx(BannerMessageItem, { label: messages[0], as: 'li' })) : (_jsx(BannerMessageItem, { ...messages[0], as: 'li' })) }), onDismiss && (_jsx(Button, { onClick: onDismiss, label: t('dismiss'), "aria-label": t('banner_dismiss_button_label_a11y'), variant: 'simple', icon: true, children: _jsx(Icon, { name: 'times' }) }))] })) : (_jsxs(StyledBannerContent, { expandable: true, children: [_jsxs(Grid, { as: StyledBannerHeader, container: { cols: 'auto 1fr auto', areas: '"toggle heading dismiss"', gap: 0.5 }, children: [_jsxs(Grid, { container: { cols: 'fit-content(100%) max-content', gap: 0.5, alignItems: 'center' }, item: { area: 'heading', alignSelf: 'center' }, as: Text, forwardedAs: headingTag, variant: 'h2', children: [heading, " ", _jsx(Count, { children: count })] }), _jsx(Grid, { item: { area: 'toggle', alignSelf: 'center' }, children: _jsx(Button, { onClick: () => {
|
|
160
160
|
setCollapsed(cur => !cur);
|
|
161
161
|
}, label: t(collapsed ? 'expand' : 'collapse'), "aria-expanded": collapsed ? 'false' : 'true', variant: 'simple', icon: true, children: _jsx(Icon, { name: 'caret-right' }) }) }), _jsx(Grid, { item: { area: 'dismiss', alignSelf: 'center' }, children: onDismiss && (_jsx(Button, { onClick: onDismiss, label: t('dismiss'), "aria-label": t('banner_dismiss_button_label_a11y'), variant: 'simple', icon: true, children: _jsx(Icon, { name: 'times' }) })) })] }), _jsx(ExpandCollapse, { collapsed: collapsed, children: _jsx(StyledBannerMessageList, { items: messagesToRender }) })] }))] }));
|
|
162
162
|
});
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Banner.js","sourceRoot":"","sources":["../../../src/components/Banner/Banner.tsx"],"names":[],"mappings":";AAAA,OAAO,EACL,QAAQ,EACR,UAAU,EAKV,OAAO,EAEP,mBAAmB,EACpB,MAAM,OAAO,CAAC;AACf,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAChD,OAAO,EAAE,WAAW,EAAE,aAAa,EAAE,MAAM,UAAU,CAAC;AAEtD,OAAO,EAAE,gBAAgB,EAAE,MAAM,aAAa,CAAC;AAE/C,OAAO,MAAM,EAAE,EAAE,YAAY,EAAE,MAAM,WAAW,CAAC;AACjD,OAAO,EAAE,uBAAuB,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAC;AAChE,OAAO,EAAE,kBAAkB,EAAE,YAAY,EAAE,OAAO,EAAE,MAAM,aAAa,CAAC;AACxE,OAAO,IAAI,MAAM,SAAS,CAAC;AAC3B,OAAO,IAAI,MAAM,SAAS,CAAC;AAC3B,OAAO,IAAI,MAAM,SAAS,CAAC;AAC3B,OAAO,cAAc,MAAM,mBAAmB,CAAC;AAC/C,OAAO,EAAE,KAAK,EAAE,MAAM,WAAW,CAAC;AAClC,OAAO,IAAI,EAAE,EAAE,UAAU,EAAE,YAAY,EAAE,MAAM,SAAS,CAAC;AACzD,OAAO,KAAK,SAAS,MAAM,0BAA0B,CAAC;AACtD,OAAO,KAAK,cAAc,MAAM,gCAAgC,CAAC;AACjE,OAAO,KAAK,aAAa,MAAM,+BAA+B,CAAC;AAC/D,OAAO,KAAK,iBAAiB,MAAM,oCAAoC,CAAC;AACxE,OAAO,KAAK,oBAAoB,MAAM,sCAAsC,CAAC;AAC7E,OAAO,KAAK,SAAS,MAAM,0BAA0B,CAAC;AACtD,OAAO,kBAAkB,MAAM,uBAAuB,CAAC;AACvD,OAAO,EAAE,aAAa,EAAE,MAAM,SAAS,CAAC;AAExC,YAAY,CACV,SAAS,EACT,cAAc,EACd,aAAa,EACb,iBAAiB,EACjB,oBAAoB,EACpB,SAAS,CACV,CAAC;AAoCF,MAAM,CAAC,MAAM,YAAY,GAAG,MAAM,CAAC,GAAG,CACpC,CAAC,EAAE,UAAU,EAAE,KAAK,EAAE,EAAE,EAAE;IACxB,OAAO,GAAG,CAAA;uBACS,KAAK,CAAC,UAAU,CAAC,IAAI,CAAC,eAAe,CAAC;;cAE/C,UAAU;sBACF,KAAK,CAAC,IAAI,CAAC,MAAM,CAAC,KAAK;;KAExC,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,YAAY,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAE7C,MAAM,CAAC,MAAM,kBAAkB,GAAG,MAAM,CAAC,GAAG,CAA+B,CAAC,EAAE,OAAO,EAAE,KAAK,EAAE,EAAE,EAAE;IAChG,MAAM,EAAE,UAAU,EAAE,GAAG,KAAK,CAAC,UAAU,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC;IACxD,MAAM,KAAK,GAAG,QAAQ,CAAC,GAAG,EAAE,CAC1B,WAAW,CAAC,UAAU,EAAE,KAAK,CAAC,IAAI,CAAC,OAAO,CAAC,oBAAoB,CAAC,CAAC,IAAI,CAAC;QACpE,CAAC,CAAC,KAAK,CAAC,IAAI,CAAC,OAAO,CAAC,oBAAoB,CAAC;QAC1C,CAAC,CAAC,aAAa,CAAC,UAAU,CAAC,CAC9B,CAAC;IAEF,OAAO,GAAG,CAAA;wBACY,UAAU;aACrB,KAAK;;;8BAGY,KAAK,CAAC,IAAI,CAAC,OAAO,CAAC,aAAa,CAAC;;;GAG5D,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,kBAAkB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAEnD,MAAM,CAAC,MAAM,kBAAkB,GAAG,MAAM,CAAC,GAAG,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE;IACzD,MAAM,EAAE,GAAG,EAAE,GAAG,YAAY,EAAE,CAAC;IAE/B,OAAO,GAAG,CAAA;;;MAGN,YAAY;QACV,UAAU;6BACW,KAAK,CAAC,IAAI,CAAC,SAAS,CAAC,KAAK,IAAI,KAAK,CAAC,IAAI,CAAC,SAAS,CAAC,MAAM,CAAC,IAAI;;;gCAG3D,UAAU;;;;iCAIT,UAAU;kBACzB,GAAG,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC;;;GAG5B,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,kBAAkB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAEnD,MAAM,CAAC,MAAM,mBAAmB,GAAG,MAAM,CAAC,GAAG,CAA2B,CAAC,EAAE,UAAU,EAAE,KAAK,EAAE,EAAE,EAAE;IAChG,OAAO,GAAG,CAAA;kBACM,KAAK,CAAC,UAAU,CAAC,IAAI,CAAC,UAAU;gCAClB,KAAK,CAAC,IAAI,CAAC,OAAO;iCACjB,UAAU,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,MAAM,KAAK,CAAC,IAAI,CAAC,OAAO;qCACxC,KAAK,CAAC,IAAI,CAAC,OAAO;8BACzB,KAAK,CAAC,IAAI,CAAC,OAAO,CAAC,aAAa,CAAC;;;;GAI5D,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,mBAAmB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAEpD,MAAM,CAAC,MAAM,uBAAuB,GAAyB,MAAM,CAAC,aAAa,CAAC,CAChF,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE,CAAC,GAAG,CAAA;oCACgB,KAAK,CAAC,IAAI,CAAC,OAAO;qCACjB,KAAK,CAAC,IAAI,CAAC,OAAO;mCACpB,KAAK,CAAC,IAAI,CAAC,OAAO;GAClD,CACF,CAAC;AAEF,uBAAuB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAExD,MAAM,CAAC,MAAM,mBAAmB,GAAG,MAAM,CAAC,IAAI,CAAA;;;CAG7C,CAAC;AAEF,mBAAmB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAEpD,MAAM,iBAAiB,GAAG,UAAU,CAGlC,SAAS,iBAAiB,CAAC,EAAE,KAAK,EAAE,WAAW,EAAE,MAAM,EAAE,GAAG,SAAS,EAAE,EAAE,GAAG;IAC5E,OAAO,CACL,MAAC,mBAAmB,OAAK,SAAS,EAAE,GAAG,EAAE,GAAG,aAC1C,yBAAO,KAAK,GAAQ,EACnB,WAAW,IAAI,CACd,8BACG,GAAG,EACJ,KAAC,IAAI,IAAC,OAAO,EAAC,WAAW,YAAE,WAAW,GAAQ,IAC7C,CACJ,EACA,MAAM,IAAI,CACT,8BACG,GAAG,EACJ,KAAC,IAAI,IAAC,OAAO,EAAC,WAAW,YACvB,KAAC,MAAM,IAAC,OAAO,EAAC,MAAM,EAAC,IAAI,EAAE,MAAM,CAAC,IAAI,EAAE,OAAO,EAAE,MAAM,CAAC,OAAO,KAAM,MAAM,YAC1E,MAAM,CAAC,IAAI,GACL,GACJ,IACN,CACJ,IACmB,CACvB,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,MAAM,eAAe,GAAG,CACtB,QAAoC,EACI,EAAE;IAC1C,IAAI,KAAK,GAAG,CAAC,CAAC;IAEd,OAAO;QACL,QAAQ,CAAC,OAAO,CAAC,GAAG,CAAC,EAAE;YACrB,KAAK,IAAI,CAAC,CAAC;YAEX,IAAI,OAAO,GAAG,KAAK,QAAQ,EAAE;gBAC3B,OAAO,CAAC,KAAC,iBAAiB,IAAC,KAAK,EAAE,GAAG,GAAI,CAAC,CAAC;aAC5C;YAED,IAAI,GAAG,CAAC,KAAK,EAAE;gBACb,MAAM,EAAE,KAAK,EAAE,GAAG,OAAO,EAAE,GAAG,GAAG,CAAC;gBAClC,MAAM,CAAC,WAAW,EAAE,QAAQ,CAAC,GAAG,eAAe,CAAC,KAAK,CAAC,CAAC;gBACvD,KAAK,IAAI,QAAQ,CAAC;gBAClB,OAAO,CAAC,KAAC,iBAAiB,OAAK,OAAO,GAAI,EAAE,WAAW,CAAC,CAAC;aAC1D;YAED,OAAO,CAAC,KAAC,iBAAiB,OAAK,GAAG,GAAI,CAAC,CAAC;QAC1C,CAAC,CAAC;QACF,KAAK;KACN,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,MAAM,GAAkD,UAAU,CAAC,SAAS,MAAM,CACtF,EACE,OAAO,EACP,UAAU,GAAG,IAAI,EACjB,QAAQ,EACR,SAAS,EACT,MAAM,EACN,GAAG,SAAS,EACiB,EAC/B,GAAuB;IAEvB,MAAM,CAAC,gBAAgB,EAAE,KAAK,CAAC,GAAG,OAAO,CAAC,GAAG,EAAE,CAAC,eAAe,CAAC,QAAQ,CAAC,EAAE,CAAC,QAAQ,CAAC,CAAC,CAAC;IAEvF,MAAM,CAAC,GAAG,OAAO,EAAE,CAAC;IACpB,MAAM,CAAC,SAAS,EAAE,YAAY,CAAC,GAAG,QAAQ,CAAC,KAAK,GAAG,CAAC,CAAC,CAAC;IAEtD,MAAM,SAAS,GAAG,kBAAkB,CAAC,GAAG,CAAC,CAAC;IAE1C,IAAI,IAAY,CAAC;IACjB,IAAI,IAAY,CAAC;IACjB,IAAI,OAAe,CAAC;IACpB,IAAI,QAAgB,CAAC;IAErB,QAAQ,OAAO,EAAE;QACf,KAAK,QAAQ;YACX,OAAO,GAAG,CAAC,CAAC,OAAO,CAAC,CAAC;YACrB,IAAI,GAAG,YAAY,CAAC;YACpB,IAAI,GAAG,OAAO,CAAC;YACf,QAAQ,GAAG,WAAW,CAAC;YACvB,MAAM;QACR,KAAK,SAAS;YACZ,OAAO,GAAG,CAAC,CAAC,SAAS,CAAC,CAAC;YACvB,IAAI,GAAG,iBAAiB,CAAC;YACzB,IAAI,GAAG,OAAO,CAAC;YACf,QAAQ,GAAG,WAAW,CAAC;YACvB,MAAM;QACR,KAAK,SAAS;YACZ,OAAO,GAAG,CAAC,CAAC,SAAS,CAAC,CAAC;YACvB,IAAI,GAAG,OAAO,CAAC;YACf,IAAI,GAAG,MAAM,CAAC;YACd,QAAQ,GAAG,QAAQ,CAAC;YACpB,MAAM;QACR,KAAK,MAAM,CAAC;QACZ;YACE,OAAO,GAAG,CAAC,CAAC,aAAa,CAAC,CAAC;YAC3B,IAAI,GAAG,mBAAmB,CAAC;YAC3B,IAAI,GAAG,MAAM,CAAC;YACd,QAAQ,GAAG,QAAQ,CAAC;YACpB,MAAM;KACT;IAED,mBAAmB,CACjB,MAAM,EACN,GAAG,EAAE,CAAC,CAAC;QACL,KAAK,EAAE,GAAG,EAAE;YACV,IAAI,SAAS,CAAC,OAAO;gBAAE,uBAAuB,CAAC,SAAS,CAAC,OAAO,EAAE,OAAO,CAAC,CAAC;QAC7E,CAAC;KACF,CAAC,EACF,EAAE,CACH,CAAC;IAEF,OAAO,CACL,MAAC,IAAI,OACC,SAAS,EACb,EAAE,EAAE,YAAY,EAChB,SAAS,EAAE,EAAE,IAAI,EAAE,qBAAqB,EAAE,EAC1C,IAAI,EAAE,IAAI,eACC,QAAQ,EACnB,UAAU,EAAE,UAAU,EACtB,GAAG,EAAE,SAAS,aAEd,KAAC,IAAI,IACH,EAAE,EAAE,kBAAkB,EACtB,SAAS,EAAE,EAAE,OAAO,EAAE,QAAQ,EAAE,UAAU,EAAE,OAAO,EAAE,GAAG,EAAE,CAAC,GAAG,EAAE,CAAC,CAAC,EAAE,EACpE,OAAO,EAAE,OAAO,YAEhB,KAAC,IAAI,IAAC,IAAI,EAAE,IAAI,GAAI,GACf,EACN,KAAK,KAAK,CAAC,CAAC,CAAC,CAAC,CACb,MAAC,IAAI,IAAC,SAAS,EAAE,EAAE,UAAU,EAAE,OAAO,EAAE,EAAE,EAAE,EAAE,mBAAmB,aAC/D,KAAC,kBAAkB,IAAC,EAAE,EAAE,UAAU,YAAG,GAAG,OAAO,IAAI,KAAK,EAAE,GAAsB,EAChF,KAAC,IAAI,IAAC,IAAI,EAAE,EAAE,SAAS,EAAE,QAAQ,EAAE,IAAI,EAAE,CAAC,EAAE,EAAE,EAAE,EAAC,IAAI,YAClD,OAAO,QAAQ,CAAC,CAAC,CAAC,KAAK,QAAQ,CAAC,CAAC,CAAC,CACjC,KAAC,iBAAiB,IAAC,KAAK,EAAE,QAAQ,CAAC,CAAC,CAAC,EAAE,EAAE,EAAC,IAAI,GAAG,CAClD,CAAC,CAAC,CAAC,CACF,KAAC,iBAAiB,OAAK,QAAQ,CAAC,CAAC,CAAC,EAAE,EAAE,EAAC,IAAI,GAAG,CAC/C,GACI,EACN,SAAS,IAAI,CACZ,KAAC,MAAM,IACL,OAAO,EAAE,SAAS,EAClB,KAAK,EAAE,CAAC,CAAC,SAAS,CAAC,gBACP,CAAC,CAAC,kCAAkC,CAAC,EACjD,OAAO,EAAC,QAAQ,EAChB,IAAI,kBAEJ,KAAC,IAAI,IAAC,IAAI,EAAC,OAAO,GAAG,GACd,CACV,IACI,CACR,CAAC,CAAC,CAAC,CACF,MAAC,mBAAmB,IAAC,UAAU,mBAC7B,MAAC,IAAI,IACH,EAAE,EAAE,kBAAkB,EACtB,SAAS,EAAE,EAAE,IAAI,EAAE,eAAe,EAAE,KAAK,EAAE,0BAA0B,EAAE,GAAG,EAAE,GAAG,EAAE,aAEjF,MAAC,IAAI,IACH,SAAS,EAAE,EAAE,IAAI,EAAE,yBAAyB,EAAE,GAAG,EAAE,GAAG,EAAE,UAAU,EAAE,QAAQ,EAAE,EAC9E,IAAI,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE,SAAS,EAAE,QAAQ,EAAE,EAC9C,EAAE,EAAE,IAAI,EACR,WAAW,EAAE,UAAU,EACvB,OAAO,EAAC,IAAI,aAEX,OAAO,OAAE,KAAC,KAAK,cAAE,KAAK,GAAS,IAC3B,EACP,KAAC,IAAI,IAAC,IAAI,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE,SAAS,EAAE,QAAQ,EAAE,YACjD,KAAC,MAAM,IACL,OAAO,EAAE,GAAG,EAAE;wCACZ,YAAY,CAAC,GAAG,CAAC,EAAE,CAAC,CAAC,GAAG,CAAC,CAAC;oCAC5B,CAAC,EACD,KAAK,EAAE,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,UAAU,CAAC,mBAC5B,SAAS,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,MAAM,EAC3C,OAAO,EAAC,QAAQ,EAChB,IAAI,kBAEJ,KAAC,IAAI,IAAC,IAAI,EAAC,aAAa,GAAG,GACpB,GACJ,EACP,KAAC,IAAI,IAAC,IAAI,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE,SAAS,EAAE,QAAQ,EAAE,YACjD,SAAS,IAAI,CACZ,KAAC,MAAM,IACL,OAAO,EAAE,SAAS,EAClB,KAAK,EAAE,CAAC,CAAC,SAAS,CAAC,gBACP,CAAC,CAAC,kCAAkC,CAAC,EACjD,OAAO,EAAC,QAAQ,EAChB,IAAI,kBAEJ,KAAC,IAAI,IAAC,IAAI,EAAC,OAAO,GAAG,GACd,CACV,GACI,IACF,EACP,KAAC,cAAc,IAAC,SAAS,EAAE,SAAS,YAClC,KAAC,uBAAuB,IAAC,KAAK,EAAE,gBAAgB,GAAI,GACrC,IACG,CACvB,IACI,CACR,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,eAAe,MAAM,CAAC","sourcesContent":["import {\n useState,\n forwardRef,\n FunctionComponent,\n PropsWithoutRef,\n Ref,\n MouseEventHandler,\n useMemo,\n ReactNode,\n useImperativeHandle\n} from 'react';\nimport styled, { css } from 'styled-components';\nimport { getContrast, readableColor } from 'polished';\n\nimport { defaultThemeProp } from '../../theme';\nimport { BaseProps, ForwardProps, HeadingTag, NoChildrenProp, OmitStrict } from '../../types';\nimport Button, { StyledButton } from '../Button';\nimport { focusHeadingOrContainer, tryCatch } from '../../utils';\nimport { useConsolidatedRef, useDirection, useI18n } from '../../hooks';\nimport Flex from '../Flex';\nimport Text from '../Text';\nimport Grid from '../Grid';\nimport ExpandCollapse from '../ExpandCollapse';\nimport { Count } from '../Badges';\nimport Icon, { StyledIcon, registerIcon } from '../Icon';\nimport * as timesIcon from '../Icon/icons/times.icon';\nimport * as caretRightIcon from '../Icon/icons/caret-right.icon';\nimport * as warnSolidIcon from '../Icon/icons/warn-solid.icon';\nimport * as flagWaveSolidIcon from '../Icon/icons/flag-wave-solid.icon';\nimport * as informationSolidIcon from '../Icon/icons/information-solid.icon';\nimport * as checkIcon from '../Icon/icons/check.icon';\nimport VisuallyHiddenText from '../VisuallyHiddenText';\nimport { UnorderedList } from '../List';\n\nregisterIcon(\n timesIcon,\n caretRightIcon,\n warnSolidIcon,\n flagWaveSolidIcon,\n informationSolidIcon,\n checkIcon\n);\n\nexport interface BannerHandleValue {\n /** Used to apply focus to the banner via an imperative handle. */\n focus: () => void;\n}\n\nexport interface BannerMessage {\n label: string;\n description?: string;\n action?: {\n text: string;\n onClick?: MouseEventHandler<HTMLButtonElement | HTMLAnchorElement>;\n href?: string;\n };\n items?: (BannerMessage | string)[];\n}\n\nexport interface BannerProps extends BaseProps, NoChildrenProp {\n /** Controls the styling of the Banner. */\n variant: 'urgent' | 'warning' | 'success' | 'info';\n /**\n * The heading tag to render the provided heading as. This is agnostic to the styling of the heading.\n * @default 'h2'\n */\n headingTag?: HeadingTag;\n /** Pass one or more descriptive messages to inform the user. */\n messages: (string | BannerMessage)[];\n /** Callback when user explicitly dismisses the Banner. */\n onDismiss?: MouseEventHandler;\n /** Ref that can be used to access the imperative handle. */\n handle?: Ref<BannerHandleValue>;\n /** Ref forwarded to the wrapping element. */\n ref?: Ref<HTMLDivElement>;\n}\n\nexport const StyledBanner = styled.div<{ headingTag: BannerProps['headingTag'] }>(\n ({ headingTag, theme }) => {\n return css`\n border-radius: ${theme.components.card['border-radius']};\n\n &:has(${headingTag}:focus) {\n box-shadow: ${theme.base.shadow.focus};\n }\n `;\n }\n);\n\nStyledBanner.defaultProps = defaultThemeProp;\n\nexport const StyledBannerStatus = styled.div<Pick<BannerProps, 'variant'>>(({ variant, theme }) => {\n const { background } = theme.components.banner[variant];\n const color = tryCatch(() =>\n getContrast(background, theme.base.palette['primary-background']) >= 3\n ? theme.base.palette['primary-background']\n : readableColor(background)\n );\n\n return css`\n background-color: ${background};\n color: ${color};\n border-start-start-radius: inherit;\n border-end-start-radius: inherit;\n border: 0.0625rem solid ${theme.base.palette['border-line']};\n border-inline-end: none;\n font-size: 1.25rem;\n `;\n});\n\nStyledBannerStatus.defaultProps = defaultThemeProp;\n\nexport const StyledBannerHeader = styled.div(({ theme }) => {\n const { rtl } = useDirection();\n\n return css`\n min-height: 2.125rem;\n\n ${StyledButton}[aria-expanded] {\n ${StyledIcon} {\n transition: rotate ${theme.base.animation.speed} ${theme.base.animation.timing.ease};\n }\n\n &[aria-expanded='true'] ${StyledIcon} {\n rotate: 90deg;\n }\n\n &[aria-expanded='false'] ${StyledIcon} {\n rotate: ${rtl ? 180 : 0}deg;\n }\n }\n `;\n});\n\nStyledBannerHeader.defaultProps = defaultThemeProp;\n\nexport const StyledBannerContent = styled.div<{ expandable?: boolean }>(({ expandable, theme }) => {\n return css`\n background: ${theme.components.card.background};\n padding-block: calc(0.5 * ${theme.base.spacing});\n padding-inline-start: calc(${expandable ? 0.5 : 2} * ${theme.base.spacing});\n padding-inline-end: calc(0.5 * ${theme.base.spacing});\n border: 0.0625rem solid ${theme.base.palette['border-line']};\n border-inline-start: none;\n border-start-end-radius: inherit;\n border-end-end-radius: inherit;\n `;\n});\n\nStyledBannerContent.defaultProps = defaultThemeProp;\n\nexport const StyledBannerMessageList: typeof UnorderedList = styled(UnorderedList)(\n ({ theme }) => css`\n padding-block-end: calc(0.5 * ${theme.base.spacing});\n padding-inline-start: calc(5 * ${theme.base.spacing});\n padding-inline-end: calc(2 * ${theme.base.spacing});\n `\n);\n\nStyledBannerMessageList.defaultProps = defaultThemeProp;\n\nexport const StyledBannerMessage = styled.span`\n overflow-wrap: break-word;\n list-style: none;\n`;\n\nStyledBannerMessage.defaultProps = defaultThemeProp;\n\nconst BannerMessageItem = forwardRef<\n HTMLLIElement,\n OmitStrict<BannerMessage, 'items'> & ForwardProps\n>(function BannerMessageItem({ label, description, action, ...restProps }, ref) {\n return (\n <StyledBannerMessage {...restProps} ref={ref}>\n <span>{label}</span>\n {description && (\n <>\n {' '}\n <Text variant='secondary'>{description}</Text>\n </>\n )}\n {action && (\n <>\n {' '}\n <Text variant='secondary'>\n <Button variant='link' href={action.href} onClick={action.onClick} {...action}>\n {action.text}\n </Button>\n </Text>\n </>\n )}\n </StyledBannerMessage>\n );\n});\n\nconst prepareMessages = (\n messages: (string | BannerMessage)[]\n): [messages: ReactNode[], count: number] => {\n let count = 0;\n\n return [\n messages.flatMap(msg => {\n count += 1;\n\n if (typeof msg === 'string') {\n return [<BannerMessageItem label={msg} />];\n }\n\n if (msg.items) {\n const { items, ...restMsg } = msg;\n const [subMessages, subCount] = prepareMessages(items);\n count += subCount;\n return [<BannerMessageItem {...restMsg} />, subMessages];\n }\n\n return [<BannerMessageItem {...msg} />];\n }),\n count\n ];\n};\n\nconst Banner: FunctionComponent<BannerProps & ForwardProps> = forwardRef(function Banner(\n {\n variant,\n headingTag = 'h2',\n messages,\n onDismiss,\n handle,\n ...restProps\n }: PropsWithoutRef<BannerProps>,\n ref: BannerProps['ref']\n) {\n const [messagesToRender, count] = useMemo(() => prepareMessages(messages), [messages]);\n\n const t = useI18n();\n const [collapsed, setCollapsed] = useState(count > 2);\n\n const bannerRef = useConsolidatedRef(ref);\n\n let role: string;\n let icon: string;\n let heading: string;\n let ariaLive: string;\n\n switch (variant) {\n case 'urgent':\n heading = t('error');\n icon = 'warn-solid';\n role = 'alert';\n ariaLive = 'assertive';\n break;\n case 'warning':\n heading = t('warning');\n icon = 'flag-wave-solid';\n role = 'alert';\n ariaLive = 'assertive';\n break;\n case 'success':\n heading = t('success');\n icon = 'check';\n role = 'none';\n ariaLive = 'polite';\n break;\n case 'info':\n default:\n heading = t('information');\n icon = 'information-solid';\n role = 'none';\n ariaLive = 'polite';\n break;\n }\n\n useImperativeHandle(\n handle,\n () => ({\n focus: () => {\n if (bannerRef.current) focusHeadingOrContainer(bannerRef.current, heading);\n }\n }),\n []\n );\n\n return (\n <Grid\n {...restProps}\n as={StyledBanner}\n container={{ cols: '2rem minmax(0, 1fr)' }}\n role={role}\n aria-live={ariaLive}\n headingTag={headingTag}\n ref={bannerRef}\n >\n <Flex\n as={StyledBannerStatus}\n container={{ justify: 'center', alignItems: 'start', pad: [1.5, 0] }}\n variant={variant}\n >\n <Icon name={icon} />\n </Flex>\n {count === 1 ? (\n <Flex container={{ alignItems: 'start' }} as={StyledBannerContent}>\n <VisuallyHiddenText as={headingTag}>{`${heading} ${count}`}</VisuallyHiddenText>\n <Flex item={{ alignSelf: 'center', grow: 1 }} as='ul'>\n {typeof messages[0] === 'string' ? (\n <BannerMessageItem label={messages[0]} as='li' />\n ) : (\n <BannerMessageItem {...messages[0]} as='li' />\n )}\n </Flex>\n {onDismiss && (\n <Button\n onClick={onDismiss}\n label={t('dismiss')}\n aria-label={t('banner_dismiss_button_label_a11y')}\n variant='simple'\n icon\n >\n <Icon name='times' />\n </Button>\n )}\n </Flex>\n ) : (\n <StyledBannerContent expandable>\n <Grid\n as={StyledBannerHeader}\n container={{ cols: 'auto 1fr auto', areas: '\"toggle heading dismiss\"', gap: 0.5 }}\n >\n <Grid\n container={{ cols: 'min-content min-content', gap: 0.5, alignItems: 'center' }}\n item={{ area: 'heading', alignSelf: 'center' }}\n as={Text}\n forwardedAs={headingTag}\n variant='h2'\n >\n {heading} <Count>{count}</Count>\n </Grid>\n <Grid item={{ area: 'toggle', alignSelf: 'center' }}>\n <Button\n onClick={() => {\n setCollapsed(cur => !cur);\n }}\n label={t(collapsed ? 'expand' : 'collapse')}\n aria-expanded={collapsed ? 'false' : 'true'}\n variant='simple'\n icon\n >\n <Icon name='caret-right' />\n </Button>\n </Grid>\n <Grid item={{ area: 'dismiss', alignSelf: 'center' }}>\n {onDismiss && (\n <Button\n onClick={onDismiss}\n label={t('dismiss')}\n aria-label={t('banner_dismiss_button_label_a11y')}\n variant='simple'\n icon\n >\n <Icon name='times' />\n </Button>\n )}\n </Grid>\n </Grid>\n <ExpandCollapse collapsed={collapsed}>\n <StyledBannerMessageList items={messagesToRender} />\n </ExpandCollapse>\n </StyledBannerContent>\n )}\n </Grid>\n );\n});\n\nexport default Banner;\n"]}
|
|
1
|
+
{"version":3,"file":"Banner.js","sourceRoot":"","sources":["../../../src/components/Banner/Banner.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n useState,\n forwardRef,\n FunctionComponent,\n PropsWithoutRef,\n Ref,\n MouseEventHandler,\n useMemo,\n ReactNode,\n useImperativeHandle\n} from 'react';\nimport styled, { css } from 'styled-components';\nimport { getContrast, readableColor } from 'polished';\n\nimport { defaultThemeProp } from '../../theme';\nimport { BaseProps, ForwardProps, HeadingTag, NoChildrenProp, OmitStrict } from '../../types';\nimport Button, { StyledButton } from '../Button';\nimport { focusHeadingOrContainer, tryCatch } from '../../utils';\nimport { useConsolidatedRef, useDirection, useI18n } from '../../hooks';\nimport Flex from '../Flex';\nimport Text from '../Text';\nimport Grid from '../Grid';\nimport ExpandCollapse from '../ExpandCollapse';\nimport { Count } from '../Badges';\nimport Icon, { StyledIcon, registerIcon } from '../Icon';\nimport * as timesIcon from '../Icon/icons/times.icon';\nimport * as caretRightIcon from '../Icon/icons/caret-right.icon';\nimport * as warnSolidIcon from '../Icon/icons/warn-solid.icon';\nimport * as flagWaveSolidIcon from '../Icon/icons/flag-wave-solid.icon';\nimport * as informationSolidIcon from '../Icon/icons/information-solid.icon';\nimport * as checkIcon from '../Icon/icons/check.icon';\nimport VisuallyHiddenText from '../VisuallyHiddenText';\nimport { UnorderedList } from '../List';\n\nregisterIcon(\n timesIcon,\n caretRightIcon,\n warnSolidIcon,\n flagWaveSolidIcon,\n informationSolidIcon,\n checkIcon\n);\n\nexport interface BannerHandleValue {\n /** Used to apply focus to the banner via an imperative handle. */\n focus: () => void;\n}\n\nexport interface BannerMessage {\n label: string;\n description?: string;\n action?: {\n text: string;\n onClick?: MouseEventHandler<HTMLButtonElement | HTMLAnchorElement>;\n href?: string;\n };\n items?: (BannerMessage | string)[];\n}\n\nexport interface BannerProps extends BaseProps, NoChildrenProp {\n /** Controls the styling of the Banner. */\n variant: 'urgent' | 'warning' | 'success' | 'info';\n /**\n * The heading tag to render the provided heading as. This is agnostic to the styling of the heading.\n * @default 'h2'\n */\n headingTag?: HeadingTag;\n /** Pass one or more descriptive messages to inform the user. */\n messages: (string | BannerMessage)[];\n /** Callback when user explicitly dismisses the Banner. */\n onDismiss?: MouseEventHandler;\n /** Ref that can be used to access the imperative handle. */\n handle?: Ref<BannerHandleValue>;\n /** Ref forwarded to the wrapping element. */\n ref?: Ref<HTMLDivElement>;\n}\n\nexport const StyledBanner = styled.div<{ headingTag: BannerProps['headingTag'] }>(\n ({ headingTag, theme }) => {\n return css`\n border-radius: ${theme.components.card['border-radius']};\n\n &:has(${headingTag}:focus) {\n box-shadow: ${theme.base.shadow.focus};\n }\n `;\n }\n);\n\nStyledBanner.defaultProps = defaultThemeProp;\n\nexport const StyledBannerStatus = styled.div<Pick<BannerProps, 'variant'>>(({ variant, theme }) => {\n const { background } = theme.components.banner[variant];\n const color = tryCatch(() =>\n getContrast(background, theme.base.palette['primary-background']) >= 3\n ? theme.base.palette['primary-background']\n : readableColor(background)\n );\n\n return css`\n background-color: ${background};\n color: ${color};\n border-start-start-radius: inherit;\n border-end-start-radius: inherit;\n border: 0.0625rem solid ${theme.base.palette['border-line']};\n border-inline-end: none;\n font-size: 1.25rem;\n `;\n});\n\nStyledBannerStatus.defaultProps = defaultThemeProp;\n\nexport const StyledBannerHeader = styled.div(({ theme }) => {\n const { rtl } = useDirection();\n\n return css`\n min-height: 2.125rem;\n\n ${StyledButton}[aria-expanded] {\n ${StyledIcon} {\n transition: rotate ${theme.base.animation.speed} ${theme.base.animation.timing.ease};\n }\n\n &[aria-expanded='true'] ${StyledIcon} {\n rotate: 90deg;\n }\n\n &[aria-expanded='false'] ${StyledIcon} {\n rotate: ${rtl ? 180 : 0}deg;\n }\n }\n `;\n});\n\nStyledBannerHeader.defaultProps = defaultThemeProp;\n\nexport const StyledBannerContent = styled.div<{ expandable?: boolean }>(({ expandable, theme }) => {\n return css`\n background: ${theme.components.card.background};\n padding-block: calc(0.5 * ${theme.base.spacing});\n padding-inline-start: calc(${expandable ? 0.5 : 2} * ${theme.base.spacing});\n padding-inline-end: calc(0.5 * ${theme.base.spacing});\n border: 0.0625rem solid ${theme.base.palette['border-line']};\n border-inline-start: none;\n border-start-end-radius: inherit;\n border-end-end-radius: inherit;\n `;\n});\n\nStyledBannerContent.defaultProps = defaultThemeProp;\n\nexport const StyledBannerMessageList: typeof UnorderedList = styled(UnorderedList)(\n ({ theme }) => css`\n padding-block-end: calc(0.5 * ${theme.base.spacing});\n padding-inline-start: calc(5 * ${theme.base.spacing});\n padding-inline-end: calc(2 * ${theme.base.spacing});\n `\n);\n\nStyledBannerMessageList.defaultProps = defaultThemeProp;\n\nexport const StyledBannerMessage = styled.span`\n overflow-wrap: break-word;\n list-style: none;\n`;\n\nStyledBannerMessage.defaultProps = defaultThemeProp;\n\nconst BannerMessageItem = forwardRef<\n HTMLLIElement,\n OmitStrict<BannerMessage, 'items'> & ForwardProps\n>(function BannerMessageItem({ label, description, action, ...restProps }, ref) {\n return (\n <StyledBannerMessage {...restProps} ref={ref}>\n <span>{label}</span>\n {description && (\n <>\n {' '}\n <Text variant='secondary'>{description}</Text>\n </>\n )}\n {action && (\n <>\n {' '}\n <Text variant='secondary'>\n <Button variant='link' href={action.href} onClick={action.onClick} {...action}>\n {action.text}\n </Button>\n </Text>\n </>\n )}\n </StyledBannerMessage>\n );\n});\n\nconst prepareMessages = (\n messages: (string | BannerMessage)[]\n): [messages: ReactNode[], count: number] => {\n let count = 0;\n\n return [\n messages.flatMap(msg => {\n count += 1;\n\n if (typeof msg === 'string') {\n return [<BannerMessageItem label={msg} />];\n }\n\n if (msg.items) {\n const { items, ...restMsg } = msg;\n const [subMessages, subCount] = prepareMessages(items);\n count += subCount;\n return [<BannerMessageItem {...restMsg} />, subMessages];\n }\n\n return [<BannerMessageItem {...msg} />];\n }),\n count\n ];\n};\n\nconst Banner: FunctionComponent<BannerProps & ForwardProps> = forwardRef(function Banner(\n {\n variant,\n headingTag = 'h2',\n messages,\n onDismiss,\n handle,\n ...restProps\n }: PropsWithoutRef<BannerProps>,\n ref: BannerProps['ref']\n) {\n const [messagesToRender, count] = useMemo(() => prepareMessages(messages), [messages]);\n\n const t = useI18n();\n const [collapsed, setCollapsed] = useState(count > 2);\n\n const bannerRef = useConsolidatedRef(ref);\n\n let role: string;\n let icon: string;\n let heading: string;\n let ariaLive: string;\n\n switch (variant) {\n case 'urgent':\n heading = t('error');\n icon = 'warn-solid';\n role = 'alert';\n ariaLive = 'assertive';\n break;\n case 'warning':\n heading = t('warning');\n icon = 'flag-wave-solid';\n role = 'alert';\n ariaLive = 'assertive';\n break;\n case 'success':\n heading = t('success');\n icon = 'check';\n role = 'none';\n ariaLive = 'polite';\n break;\n case 'info':\n default:\n heading = t('information');\n icon = 'information-solid';\n role = 'none';\n ariaLive = 'polite';\n break;\n }\n\n useImperativeHandle(\n handle,\n () => ({\n focus: () => {\n if (bannerRef.current) focusHeadingOrContainer(bannerRef.current, heading);\n }\n }),\n []\n );\n\n return (\n <Grid\n {...restProps}\n as={StyledBanner}\n container={{ cols: '2rem minmax(0, 1fr)' }}\n role={role}\n aria-live={ariaLive}\n headingTag={headingTag}\n ref={bannerRef}\n >\n <Flex\n as={StyledBannerStatus}\n container={{ justify: 'center', alignItems: 'start', pad: [1.5, 0] }}\n variant={variant}\n >\n <Icon name={icon} />\n </Flex>\n {count === 1 ? (\n <Flex container={{ alignItems: 'start' }} as={StyledBannerContent}>\n <VisuallyHiddenText as={headingTag}>{`${heading} ${count}`}</VisuallyHiddenText>\n <Flex item={{ alignSelf: 'center', grow: 1 }} as='ul'>\n {typeof messages[0] === 'string' ? (\n <BannerMessageItem label={messages[0]} as='li' />\n ) : (\n <BannerMessageItem {...messages[0]} as='li' />\n )}\n </Flex>\n {onDismiss && (\n <Button\n onClick={onDismiss}\n label={t('dismiss')}\n aria-label={t('banner_dismiss_button_label_a11y')}\n variant='simple'\n icon\n >\n <Icon name='times' />\n </Button>\n )}\n </Flex>\n ) : (\n <StyledBannerContent expandable>\n <Grid\n as={StyledBannerHeader}\n container={{ cols: 'auto 1fr auto', areas: '\"toggle heading dismiss\"', gap: 0.5 }}\n >\n <Grid\n container={{ cols: 'fit-content(100%) max-content', gap: 0.5, alignItems: 'center' }}\n item={{ area: 'heading', alignSelf: 'center' }}\n as={Text}\n forwardedAs={headingTag}\n variant='h2'\n >\n {heading} <Count>{count}</Count>\n </Grid>\n <Grid item={{ area: 'toggle', alignSelf: 'center' }}>\n <Button\n onClick={() => {\n setCollapsed(cur => !cur);\n }}\n label={t(collapsed ? 'expand' : 'collapse')}\n aria-expanded={collapsed ? 'false' : 'true'}\n variant='simple'\n icon\n >\n <Icon name='caret-right' />\n </Button>\n </Grid>\n <Grid item={{ area: 'dismiss', alignSelf: 'center' }}>\n {onDismiss && (\n <Button\n onClick={onDismiss}\n label={t('dismiss')}\n aria-label={t('banner_dismiss_button_label_a11y')}\n variant='simple'\n icon\n >\n <Icon name='times' />\n </Button>\n )}\n </Grid>\n </Grid>\n <ExpandCollapse collapsed={collapsed}>\n <StyledBannerMessageList items={messagesToRender} />\n </ExpandCollapse>\n </StyledBannerContent>\n )}\n </Grid>\n );\n});\n\nexport default Banner;\n"]}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@pega/cosmos-react-core",
|
|
3
|
-
"version": "4.4.
|
|
3
|
+
"version": "4.4.11",
|
|
4
4
|
"description": "Cosmos is a visual design system and UI component collection. Its goal is to empower application developers in their pursuit to create engaging and rewarding user experiences.",
|
|
5
5
|
"repository": {
|
|
6
6
|
"type": "git",
|