@pega/cosmos-react-core 5.0.0-dev.10.1 → 5.0.0-dev.10.3

package/lib/components/Banner/Banner.d.ts

@@ -1,5 +1,5 @@
 import type { Ref, MouseEventHandler } from 'react';
-import type { ForwardProps, HeadingTag, NoChildrenProp, WithAttributes } from '../../types';
+import type { ForwardProps, HeadingTag, NoChildrenProp, TestIdProp, WithAttributes } from '../../types';
 export interface BannerHandleValue {
     /** Used to apply focus to the banner via an imperative handle. */
     focus: () => void;
@@ -14,7 +14,7 @@ export interface BannerMessage {
     };
     items?: (BannerMessage | string)[];
 }
-export type BannerProps = WithAttributes<'div', NoChildrenProp & {
+export type BannerProps = WithAttributes<'div', TestIdProp & NoChildrenProp & {
     /** Controls the styling of the Banner. */ variant: 'urgent' | 'warning' | 'success' | 'info';
     /**
      * The heading tag to render the provided heading as. This is agnostic to the styling of the heading.
@@ -38,6 +38,8 @@ export declare const StyledBannerContent: import("styled-components").StyledComp
 }, never>;
 export declare const StyledBannerMessageList: import("styled-components").StyledComponent<import("react").FC<import("../List").UnorderedListProps & ForwardProps>, import("styled-components").DefaultTheme, {}, never>;
 export declare const StyledBannerMessage: import("styled-components").StyledComponent<"span", import("styled-components").DefaultTheme, {}, never>;
-declare const _default: import("react").ForwardRefExoticComponent<Omit<BannerProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+declare const _default: import("react").ForwardRefExoticComponent<Omit<BannerProps, "ref"> & import("react").RefAttributes<HTMLDivElement>> & {
+    getTestIds: (testIdProp?: string | undefined) => import("../../types").TestIdsRecord<readonly ["heading", "expand-collapse", "dismiss", "message-label", "message-description", "message-action"]>;
+};
 export default _default;
 //# sourceMappingURL=Banner.d.ts.map

package/lib/components/Banner/Banner.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Banner.d.ts","sourceRoot":"","sources":["../../../src/components/Banner/Banner.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAmB,GAAG,EAAE,iBAAiB,EAAa,MAAM,OAAO,CAAC;AAKhF,OAAO,KAAK,EACV,YAAY,EACZ,UAAU,EACV,cAAc,EAGd,cAAc,EACf,MAAM,aAAa,CAAC;AA4BrB,MAAM,WAAW,iBAAiB;IAChC,kEAAkE;IAClE,KAAK,EAAE,MAAM,IAAI,CAAC;CACnB;AAED,MAAM,WAAW,aAAa;IAC5B,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,MAAM,CAAC,EAAE;QACP,IAAI,EAAE,MAAM,CAAC;QACb,OAAO,CAAC,EAAE,iBAAiB,CAAC,iBAAiB,GAAG,iBAAiB,CAAC,CAAC;QACnE,IAAI,CAAC,EAAE,MAAM,CAAC;KACf,CAAC;IACF,KAAK,CAAC,EAAE,CAAC,aAAa,GAAG,MAAM,CAAC,EAAE,CAAC;CACpC;AAED,MAAM,MAAM,WAAW,GAAG,cAAc,CACtC,KAAK,EACL,cAAc,GAAG;IACf,0CAA0C,CAAC,OAAO,EAAE,QAAQ,GAAG,SAAS,GAAG,SAAS,GAAG,MAAM,CAAC;IAC9F;;;OAGG;IACH,UAAU,CAAC,EAAE,UAAU,CAAC;IACxB,gEAAgE;IAChE,QAAQ,EAAE,CAAC,MAAM,GAAG,aAAa,CAAC,EAAE,CAAC;IACrC,0DAA0D;IAC1D,SAAS,CAAC,EAAE,iBAAiB,CAAC;IAC9B,4DAA4D;IAC5D,MAAM,CAAC,EAAE,GAAG,CAAC,iBAAiB,CAAC,CAAC;CACjC,CACF,CAAC;AAEF,eAAO,MAAM,YAAY;gBAA4B,WAAW,CAAC,YAAY,CAAC;SAU7E,CAAC;AAIF,eAAO,MAAM,kBAAkB,mIAiB7B,CAAC;AAIH,eAAO,MAAM,kBAAkB,yGAoB7B,CAAC;AAIH,eAAO,MAAM,mBAAmB;;SAW9B,CAAC;AAIH,eAAO,MAAM,uBAAuB,2KAMnC,CAAC;AAIF,eAAO,MAAM,mBAAmB,0GAG/B,CAAC;;AAyDF,wBA8IG"}
+{"version":3,"file":"Banner.d.ts","sourceRoot":"","sources":["../../../src/components/Banner/Banner.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAmB,GAAG,EAAE,iBAAiB,EAAa,MAAM,OAAO,CAAC;AAKhF,OAAO,KAAK,EACV,YAAY,EACZ,UAAU,EACV,cAAc,EAGd,UAAU,EACV,cAAc,EACf,MAAM,aAAa,CAAC;AA8BrB,MAAM,WAAW,iBAAiB;IAChC,kEAAkE;IAClE,KAAK,EAAE,MAAM,IAAI,CAAC;CACnB;AAED,MAAM,WAAW,aAAa;IAC5B,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,MAAM,CAAC,EAAE;QACP,IAAI,EAAE,MAAM,CAAC;QACb,OAAO,CAAC,EAAE,iBAAiB,CAAC,iBAAiB,GAAG,iBAAiB,CAAC,CAAC;QACnE,IAAI,CAAC,EAAE,MAAM,CAAC;KACf,CAAC;IACF,KAAK,CAAC,EAAE,CAAC,aAAa,GAAG,MAAM,CAAC,EAAE,CAAC;CACpC;AAED,MAAM,MAAM,WAAW,GAAG,cAAc,CACtC,KAAK,EACL,UAAU,GACR,cAAc,GAAG;IACf,0CAA0C,CAAC,OAAO,EAAE,QAAQ,GAAG,SAAS,GAAG,SAAS,GAAG,MAAM,CAAC;IAC9F;;;OAGG;IACH,UAAU,CAAC,EAAE,UAAU,CAAC;IACxB,gEAAgE;IAChE,QAAQ,EAAE,CAAC,MAAM,GAAG,aAAa,CAAC,EAAE,CAAC;IACrC,0DAA0D;IAC1D,SAAS,CAAC,EAAE,iBAAiB,CAAC;IAC9B,4DAA4D;IAC5D,MAAM,CAAC,EAAE,GAAG,CAAC,iBAAiB,CAAC,CAAC;CACjC,CACJ,CAAC;AAEF,eAAO,MAAM,YAAY;gBAA4B,WAAW,CAAC,YAAY,CAAC;SAU7E,CAAC;AAIF,eAAO,MAAM,kBAAkB,mIAiB7B,CAAC;AAIH,eAAO,MAAM,kBAAkB,yGAoB7B,CAAC;AAIH,eAAO,MAAM,mBAAmB;;SAW9B,CAAC;AAIH,eAAO,MAAM,uBAAuB,2KAMnC,CAAC;AAIF,eAAO,MAAM,mBAAmB,0GAG/B,CAAC;;;;AAoEF,wBAsJE"}

package/lib/components/Banner/Banner.js

@@ -4,8 +4,8 @@ import styled, { css } from 'styled-components';
 import { getContrast, readableColor } from 'polished';
 import { defaultThemeProp } from '../../theme';
 import Button, { StyledButton } from '../Button';
-import { focusHeadingOrContainer, tryCatch } from '../../utils';
-import { useConsolidatedRef, useDirection, useI18n } from '../../hooks';
+import { focusHeadingOrContainer, tryCatch, withTestIds } from '../../utils';
+import { useConsolidatedRef, useDirection, useI18n, useTestIds } from '../../hooks';
 import Flex from '../Flex';
 import Text from '../Text';
 import Grid from '../Grid';
@@ -20,6 +20,7 @@ import * as informationSolidIcon from '../Icon/icons/information-solid.icon';
 import * as checkIcon from '../Icon/icons/check.icon';
 import VisuallyHiddenText from '../VisuallyHiddenText';
 import { UnorderedList } from '../List';
+import { getBannerTestIds } from './Banner.test-ids';
 registerIcon(timesIcon, caretRightIcon, warnSolidIcon, flagWaveSolidIcon, informationSolidIcon, checkIcon);
 export const StyledBanner = styled.div(({ headingTag, theme }) => {
     return css `
@@ -92,10 +93,11 @@ export const StyledBannerMessage = styled.span `
   list-style: none;
 `;
 StyledBannerMessage.defaultProps = defaultThemeProp;
-const BannerMessageItem = forwardRef(function BannerMessageItem({ label, description, action, ...restProps }, ref) {
-    return (_jsxs(StyledBannerMessage, { ...restProps, ref: ref, children: [_jsx("span", { children: label }), description && (_jsxs(_Fragment, { children: [' ', _jsx(Text, { variant: 'secondary', children: description })] })), action && (_jsxs(_Fragment, { children: [' ', _jsx(Text, { variant: 'secondary', children: _jsx(Button, { variant: 'link', href: action.href, onClick: action.onClick, ...action, children: action.text }) })] }))] }));
+const BannerMessageItem = forwardRef(function BannerMessageItem({ testId, label, description, action, ...restProps }, ref) {
+    const testIds = useTestIds(testId, getBannerTestIds);
+    return (_jsxs(StyledBannerMessage, { ...restProps, ref: ref, children: [_jsx("span", { "data-testid": testIds.messageLabel, children: label }), description && (_jsxs(_Fragment, { children: [' ', _jsx(Text, { "data-testid": testIds.messageDescription, variant: 'secondary', children: description })] })), action && (_jsxs(_Fragment, { children: [' ', _jsx(Text, { variant: 'secondary', children: _jsx(Button, { "data-testid": testIds.messageAction, variant: 'link', href: action.href, onClick: action.onClick, ...action, children: action.text }) })] }))] }));
 });
-const prepareMessages = (messages) => {
+const prepareMessages = (messages, testId) => {
     let count = 0;
     return [
         messages.flatMap(msg => {
@@ -105,17 +107,18 @@ const prepareMessages = (messages) => {
             }
             if (msg.items) {
                 const { items, ...restMsg } = msg;
-                const [subMessages, subCount] = prepareMessages(items);
+                const [subMessages, subCount] = prepareMessages(items, testId);
                 count += subCount;
-                return [_jsx(BannerMessageItem, { ...restMsg }), subMessages];
+                return [_jsx(BannerMessageItem, { ...restMsg, testId: testId }), subMessages];
             }
-            return [_jsx(BannerMessageItem, { ...msg })];
+            return [_jsx(BannerMessageItem, { ...msg, testId: testId })];
         }),
         count
     ];
 };
-export default forwardRef(function Banner({ variant, headingTag = 'h2', messages, onDismiss, handle, ...restProps }, ref) {
-    const [messagesToRender, count] = useMemo(() => prepareMessages(messages), [messages]);
+export default withTestIds(forwardRef(function Banner({ testId, variant, headingTag = 'h2', messages, onDismiss, handle, ...restProps }, ref) {
+    const testIds = useTestIds(testId, getBannerTestIds);
+    const [messagesToRender, count] = useMemo(() => prepareMessages(messages, testId), [messages]);
     const t = useI18n();
     const [collapsed, setCollapsed] = useState(count > 2);
     const bannerRef = useConsolidatedRef(ref);
@@ -156,8 +159,8 @@ export default forwardRef(function Banner({ variant, headingTag = 'h2', messages
                 focusHeadingOrContainer(bannerRef.current, heading);
         }
     }), []);
-    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: 'min-content min-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: () => {
+    return (_jsxs(Grid, { "data-testid": testIds.root, ...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, { testId: testId, label: messages[0], as: 'li' })) : (_jsx(BannerMessageItem, { ...messages[0], testId: testId, as: 'li' })) }), onDismiss && (_jsx(Button, { "data-testid": testIds.dismiss, 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, { "data-testid": testIds.heading, container: { cols: 'min-content min-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, { "data-testid": testIds.expandCollapse, onClick: () => {
                                         setCollapsed(cur => !cur);
-                                    }, 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 }) })] }))] }));
-});
+                                    }, 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, { "data-testid": testIds.dismiss, 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 }) })] }))] }));
+}), getBannerTestIds);
 //# sourceMappingURL=Banner.js.map

package/lib/components/Banner/Banner.js.map

@@ -1 +1 @@
-{"version":3,"file":"Banner.js","sourceRoot":"","sources":["../../../src/components/Banner/Banner.tsx"],"names":[],"mappings":"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","sourcesContent":["import { useState, forwardRef, useMemo, useImperativeHandle } from 'react';\nimport type { PropsWithoutRef, Ref, MouseEventHandler, ReactNode } from 'react';\nimport styled, { css } from 'styled-components';\nimport { getContrast, readableColor } from 'polished';\n\nimport { defaultThemeProp } from '../../theme';\nimport type {\n  ForwardProps,\n  HeadingTag,\n  NoChildrenProp,\n  OmitStrict,\n  RefElement,\n  WithAttributes\n} 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 type BannerProps = WithAttributes<\n  'div',\n  NoChildrenProp & {\n    /** Controls the styling of the Banner. */ 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  }\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 = 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\nexport default forwardRef<RefElement<BannerProps>, PropsWithoutRef<BannerProps>>(function Banner(\n  { variant, headingTag = 'h2', messages, onDismiss, handle, ...restProps },\n  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"]}
+{"version":3,"file":"Banner.js","sourceRoot":"","sources":["../../../src/components/Banner/Banner.tsx"],"names":[],"mappings":"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","sourcesContent":["import { useState, forwardRef, useMemo, useImperativeHandle } from 'react';\nimport type { PropsWithoutRef, Ref, MouseEventHandler, ReactNode } from 'react';\nimport styled, { css } from 'styled-components';\nimport { getContrast, readableColor } from 'polished';\n\nimport { defaultThemeProp } from '../../theme';\nimport type {\n  ForwardProps,\n  HeadingTag,\n  NoChildrenProp,\n  OmitStrict,\n  RefElement,\n  TestIdProp,\n  WithAttributes\n} from '../../types';\nimport Button, { StyledButton } from '../Button';\nimport { focusHeadingOrContainer, tryCatch, withTestIds } from '../../utils';\nimport { useConsolidatedRef, useDirection, useI18n, useTestIds } 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\nimport { getBannerTestIds } from './Banner.test-ids';\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 type BannerProps = WithAttributes<\n  'div',\n  TestIdProp &\n    NoChildrenProp & {\n      /** Controls the styling of the Banner. */ 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    }\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 = 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  TestIdProp & OmitStrict<BannerMessage, 'items'> & ForwardProps\n>(function BannerMessageItem({ testId, label, description, action, ...restProps }, ref) {\n  const testIds = useTestIds(testId, getBannerTestIds);\n\n  return (\n    <StyledBannerMessage {...restProps} ref={ref}>\n      <span data-testid={testIds.messageLabel}>{label}</span>\n      {description && (\n        <>\n          {' '}\n          <Text data-testid={testIds.messageDescription} variant='secondary'>\n            {description}\n          </Text>\n        </>\n      )}\n      {action && (\n        <>\n          {' '}\n          <Text variant='secondary'>\n            <Button\n              data-testid={testIds.messageAction}\n              variant='link'\n              href={action.href}\n              onClick={action.onClick}\n              {...action}\n            >\n              {action.text}\n            </Button>\n          </Text>\n        </>\n      )}\n    </StyledBannerMessage>\n  );\n});\n\nconst prepareMessages = (\n  messages: (string | BannerMessage)[],\n  testId: TestIdProp['testId']\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, testId);\n        count += subCount;\n        return [<BannerMessageItem {...restMsg} testId={testId} />, subMessages];\n      }\n\n      return [<BannerMessageItem {...msg} testId={testId} />];\n    }),\n    count\n  ];\n};\n\nexport default withTestIds(\n  forwardRef<RefElement<BannerProps>, PropsWithoutRef<BannerProps>>(function Banner(\n    { testId, variant, headingTag = 'h2', messages, onDismiss, handle, ...restProps },\n    ref\n  ) {\n    const testIds = useTestIds(testId, getBannerTestIds);\n    const [messagesToRender, count] = useMemo(() => prepareMessages(messages, testId), [messages]);\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        data-testid={testIds.root}\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 testId={testId} label={messages[0]} as='li' />\n              ) : (\n                <BannerMessageItem {...messages[0]} testId={testId} as='li' />\n              )}\n            </Flex>\n            {onDismiss && (\n              <Button\n                data-testid={testIds.dismiss}\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                data-testid={testIds.heading}\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                  data-testid={testIds.expandCollapse}\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                    data-testid={testIds.dismiss}\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  getBannerTestIds\n);\n"]}

package/lib/components/Banner/Banner.test-ids.d.ts

@@ -0,0 +1,2 @@
+export declare const getBannerTestIds: (testIdProp?: string | undefined) => import("../..").TestIdsRecord<readonly ["heading", "expand-collapse", "dismiss", "message-label", "message-description", "message-action"]>;
+//# sourceMappingURL=Banner.test-ids.d.ts.map

package/lib/components/Banner/Banner.test-ids.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Banner.test-ids.d.ts","sourceRoot":"","sources":["../../../src/components/Banner/Banner.test-ids.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,gBAAgB,kLAOlB,CAAC"}

package/lib/components/Banner/Banner.test-ids.js

@@ -0,0 +1,10 @@
+import { createTestIds } from '../../utils';
+export const getBannerTestIds = createTestIds('banner', [
+    'heading',
+    'expand-collapse',
+    'dismiss',
+    'message-label',
+    'message-description',
+    'message-action'
+]);
+//# sourceMappingURL=Banner.test-ids.js.map

package/lib/components/Banner/Banner.test-ids.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Banner.test-ids.js","sourceRoot":"","sources":["../../../src/components/Banner/Banner.test-ids.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,aAAa,CAAC;AAE5C,MAAM,CAAC,MAAM,gBAAgB,GAAG,aAAa,CAAC,QAAQ,EAAE;IACtD,SAAS;IACT,iBAAiB;IACjB,SAAS;IACT,eAAe;IACf,qBAAqB;IACrB,gBAAgB;CACR,CAAC,CAAC","sourcesContent":["import { createTestIds } from '../../utils';\n\nexport const getBannerTestIds = createTestIds('banner', [\n  'heading',\n  'expand-collapse',\n  'dismiss',\n  'message-label',\n  'message-description',\n  'message-action'\n] as const);\n"]}

package/lib/components/HTML/HTML.js

@@ -200,7 +200,7 @@ const HTML = forwardRef(function HTML({ testId, content, customTags, ...restProp
             ? DOMPurify.sanitize(content, {
                 FORBID_TAGS: ['style'],
                 CUSTOM_ELEMENT_HANDLING: {
-                    tagNameCheck: customTags ? tagName => customTags.includes(tagName) : null
+                    tagNameCheck: customTags ? tagName => customTags.includes(tagName) : undefined
                 }
             })
             : '';

package/lib/components/HTML/HTML.js.map

@@ -1 +1 @@
-{"version":3,"file":"HTML.js","sourceRoot":"","sources":["../../../src/components/HTML/HTML.tsx"],"names":[],"mappings":"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","sourcesContent":["import { forwardRef, useState, useEffect, useMemo } from 'react';\nimport type { FunctionComponent, PropsWithoutRef, Ref } from 'react';\nimport styled, { css } from 'styled-components';\nimport type { DefaultTheme } from 'styled-components';\nimport createDOMPurify from 'dompurify';\n\nimport { StyledPopover } from '../Popover';\nimport { defaultThemeProp } from '../../theme';\nimport { calculateFontSize } from '../../styles';\nimport type { FontSize } from '../../styles';\nimport type { BaseProps, ForwardProps, NoChildrenProp, TestIdProp } from '../../types';\nimport { sameOrigin, withTestIds } from '../../utils';\nimport { useTestIds } from '../../hooks';\n\nimport { getHTMLTestIds } from './HTML.test-ids';\n\nconst DOMPurify = createDOMPurify();\n\nexport interface HTMLProps extends BaseProps, NoChildrenProp, TestIdProp {\n  content: string;\n  customTags?: string[];\n  ref?: Ref<HTMLDivElement>;\n}\n\nexport const listStyles = css`\n  ul,\n  ol {\n    padding-inline-start: 2.5rem;\n  }\n\n  li {\n    margin: 0.5rem 0;\n  }\n\n  ul li {\n    ul {\n      margin-inline-start: 1rem;\n      list-style-type: circle;\n    }\n\n    ul ul {\n      margin-inline-start: 2rem;\n      list-style-type: square;\n    }\n\n    ul ul ul {\n      margin-inline-start: 3rem;\n      list-style-type: disc;\n    }\n  }\n\n  ol li {\n    ol {\n      margin-inline-start: 1rem;\n      list-style-type: lower-alpha;\n    }\n\n    ol ol {\n      margin-inline-start: 2rem;\n      list-style-type: lower-roman;\n    }\n\n    ol ol ol {\n      margin-inline-start: 3rem;\n      list-style-type: decimal;\n    }\n  }\n`;\n\nexport const getTableStyles = (theme: DefaultTheme) => css`\n  border-collapse: collapse;\n\n  td {\n    border: 0.0625rem solid ${theme.base.palette['border-line']};\n    min-width: 6.25rem;\n  }\n\n  tr:first-child {\n    td:first-child {\n      border-top-left-radius: 0.125rem;\n    }\n\n    td:last-child {\n      border-top-right-radius: 0.125rem;\n    }\n  }\n\n  tr:last-child {\n    td:first-child {\n      border-bottom-left-radius: 0.125rem;\n    }\n\n    td:last-child {\n      border-bottom-right-radius: 0.125rem;\n    }\n  }\n`;\n\nexport const getHtmlStyles = (theme: DefaultTheme) => {\n  const {\n    base: { 'font-size': baseFontSize, 'font-scale': baseFontScale, palette },\n    components: { text }\n  } = theme;\n  const fontSize = calculateFontSize(baseFontSize, baseFontScale);\n  return `\n    ${listStyles}\n    table {\n      ${getTableStyles(theme)}\n    }\n    img {\n      max-width: 100%;\n      height: auto;\n      border-radius: 0.25rem;\n    }\n    a {\n      color: ${palette.interactive};\n    }\n    pre {\n      white-space: break-spaces;\n    }\n    p {\n      min-height: ${fontSize[text.primary['font-size'] as FontSize]};\n    }\n    h1 {\n      font-size: ${fontSize[text.h1['font-size'] as FontSize]};\n      font-weight: ${text.h1['font-weight']};\n      min-height: ${fontSize[text.h1['font-size'] as FontSize]};\n    }\n    h2 {\n      font-size: ${fontSize[text.h2['font-size'] as FontSize]};\n      font-weight: ${text.h2['font-weight']};\n      min-height: ${fontSize[text.h2['font-size'] as FontSize]};\n    }\n    h3 {\n      font-size: ${fontSize[text.h3['font-size'] as FontSize]};\n      font-weight: ${text.h3['font-weight']};\n      min-height: ${fontSize[text.h3['font-size'] as FontSize]};\n    }\n    h4 {\n      font-size: ${fontSize[text.h4['font-size'] as FontSize]};\n      font-weight: ${text.h4['font-weight']};\n      min-height: ${fontSize[text.h4['font-size'] as FontSize]};\n    }\n    h5 {\n      font-size: ${fontSize[text.h5['font-size'] as FontSize]};\n      font-weight: ${text.h5['font-weight']};\n      min-height: ${fontSize[text.h5['font-size'] as FontSize]};\n    }\n    h6 {\n      font-size: ${fontSize[text.h6['font-size'] as FontSize]};\n      font-weight: ${text.h6['font-weight']};\n      min-height: ${fontSize[text.h6['font-size'] as FontSize]};\n    }\n  `;\n};\n\nexport const StyledHTML = styled.div(({ theme }) => {\n  return css`\n    width: 100%;\n    overflow-x: auto;\n    overflow-wrap: break-word;\n    contain: paint;\n    ${getHtmlStyles(theme)}\n\n    ${StyledPopover} ul {\n      ul {\n        padding-inline-start: 0;\n      }\n      ol {\n        padding-inline-start: 0;\n      }\n    }\n\n    ${StyledPopover} li {\n      margin: 0;\n    }\n  `;\n});\n\nStyledHTML.defaultProps = defaultThemeProp;\n\nif (DOMPurify.isSupported) {\n  const targetBlankSet = new WeakSet<HTMLAnchorElement>();\n\n  DOMPurify.addHook('beforeSanitizeAttributes', node => {\n    // Can be passed text nodes\n    if (!(node instanceof HTMLElement || node instanceof SVGElement)) return;\n\n    node.removeAttribute('class');\n\n    if (\n      node.tagName === 'A' &&\n      node.hasAttribute('href') &&\n      node.getAttribute('target') === '_blank'\n    ) {\n      targetBlankSet.add(node as HTMLAnchorElement);\n    }\n  });\n\n  DOMPurify.addHook('afterSanitizeAttributes', node => {\n    if (node.tagName === 'A' && node.hasAttribute('href')) {\n      const href = node.getAttribute('href')!;\n\n      let fullURL: URL;\n      try {\n        fullURL = new URL(href, window.location.href);\n      } catch (e) {\n        return;\n      }\n\n      if (!sameOrigin(window.location, fullURL)) {\n        node.setAttribute('target', '_blank');\n        node.setAttribute('rel', 'noopener');\n      } else if (targetBlankSet.has(node as HTMLAnchorElement)) {\n        node.setAttribute('target', '_blank');\n        targetBlankSet.delete(node as HTMLAnchorElement);\n      }\n    }\n  });\n}\n\nconst HTML: FunctionComponent<HTMLProps & ForwardProps> = forwardRef(function HTML(\n  { testId, content, customTags, ...restProps }: PropsWithoutRef<HTMLProps>,\n  ref: HTMLProps['ref']\n) {\n  const [mounted, setMounted] = useState(false);\n  const sanitizedHtml = useMemo(() => {\n    // Don't render content on the server at all.\n    return mounted && DOMPurify.isSupported\n      ? DOMPurify.sanitize(content, {\n          FORBID_TAGS: ['style'],\n          CUSTOM_ELEMENT_HANDLING: {\n            tagNameCheck: customTags ? tagName => customTags.includes(tagName) : null\n          }\n        })\n      : '';\n  }, [content, customTags, mounted]);\n  const testIds = useTestIds(testId, getHTMLTestIds);\n\n  useEffect(() => {\n    setMounted(true);\n  }, []);\n\n  return (\n    <StyledHTML\n      data-testid={testIds.root}\n      {...restProps}\n      dangerouslySetInnerHTML={{ __html: sanitizedHtml }}\n      ref={ref}\n    />\n  );\n});\n\nexport default withTestIds(HTML, getHTMLTestIds);\n"]}
+{"version":3,"file":"HTML.js","sourceRoot":"","sources":["../../../src/components/HTML/HTML.tsx"],"names":[],"mappings":"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","sourcesContent":["import { forwardRef, useState, useEffect, useMemo } from 'react';\nimport type { FunctionComponent, PropsWithoutRef, Ref } from 'react';\nimport styled, { css } from 'styled-components';\nimport type { DefaultTheme } from 'styled-components';\nimport createDOMPurify from 'dompurify';\n\nimport { StyledPopover } from '../Popover';\nimport { defaultThemeProp } from '../../theme';\nimport { calculateFontSize } from '../../styles';\nimport type { FontSize } from '../../styles';\nimport type { BaseProps, ForwardProps, NoChildrenProp, TestIdProp } from '../../types';\nimport { sameOrigin, withTestIds } from '../../utils';\nimport { useTestIds } from '../../hooks';\n\nimport { getHTMLTestIds } from './HTML.test-ids';\n\nconst DOMPurify = createDOMPurify();\n\nexport interface HTMLProps extends BaseProps, NoChildrenProp, TestIdProp {\n  content: string;\n  customTags?: string[];\n  ref?: Ref<HTMLDivElement>;\n}\n\nexport const listStyles = css`\n  ul,\n  ol {\n    padding-inline-start: 2.5rem;\n  }\n\n  li {\n    margin: 0.5rem 0;\n  }\n\n  ul li {\n    ul {\n      margin-inline-start: 1rem;\n      list-style-type: circle;\n    }\n\n    ul ul {\n      margin-inline-start: 2rem;\n      list-style-type: square;\n    }\n\n    ul ul ul {\n      margin-inline-start: 3rem;\n      list-style-type: disc;\n    }\n  }\n\n  ol li {\n    ol {\n      margin-inline-start: 1rem;\n      list-style-type: lower-alpha;\n    }\n\n    ol ol {\n      margin-inline-start: 2rem;\n      list-style-type: lower-roman;\n    }\n\n    ol ol ol {\n      margin-inline-start: 3rem;\n      list-style-type: decimal;\n    }\n  }\n`;\n\nexport const getTableStyles = (theme: DefaultTheme) => css`\n  border-collapse: collapse;\n\n  td {\n    border: 0.0625rem solid ${theme.base.palette['border-line']};\n    min-width: 6.25rem;\n  }\n\n  tr:first-child {\n    td:first-child {\n      border-top-left-radius: 0.125rem;\n    }\n\n    td:last-child {\n      border-top-right-radius: 0.125rem;\n    }\n  }\n\n  tr:last-child {\n    td:first-child {\n      border-bottom-left-radius: 0.125rem;\n    }\n\n    td:last-child {\n      border-bottom-right-radius: 0.125rem;\n    }\n  }\n`;\n\nexport const getHtmlStyles = (theme: DefaultTheme) => {\n  const {\n    base: { 'font-size': baseFontSize, 'font-scale': baseFontScale, palette },\n    components: { text }\n  } = theme;\n  const fontSize = calculateFontSize(baseFontSize, baseFontScale);\n  return `\n    ${listStyles}\n    table {\n      ${getTableStyles(theme)}\n    }\n    img {\n      max-width: 100%;\n      height: auto;\n      border-radius: 0.25rem;\n    }\n    a {\n      color: ${palette.interactive};\n    }\n    pre {\n      white-space: break-spaces;\n    }\n    p {\n      min-height: ${fontSize[text.primary['font-size'] as FontSize]};\n    }\n    h1 {\n      font-size: ${fontSize[text.h1['font-size'] as FontSize]};\n      font-weight: ${text.h1['font-weight']};\n      min-height: ${fontSize[text.h1['font-size'] as FontSize]};\n    }\n    h2 {\n      font-size: ${fontSize[text.h2['font-size'] as FontSize]};\n      font-weight: ${text.h2['font-weight']};\n      min-height: ${fontSize[text.h2['font-size'] as FontSize]};\n    }\n    h3 {\n      font-size: ${fontSize[text.h3['font-size'] as FontSize]};\n      font-weight: ${text.h3['font-weight']};\n      min-height: ${fontSize[text.h3['font-size'] as FontSize]};\n    }\n    h4 {\n      font-size: ${fontSize[text.h4['font-size'] as FontSize]};\n      font-weight: ${text.h4['font-weight']};\n      min-height: ${fontSize[text.h4['font-size'] as FontSize]};\n    }\n    h5 {\n      font-size: ${fontSize[text.h5['font-size'] as FontSize]};\n      font-weight: ${text.h5['font-weight']};\n      min-height: ${fontSize[text.h5['font-size'] as FontSize]};\n    }\n    h6 {\n      font-size: ${fontSize[text.h6['font-size'] as FontSize]};\n      font-weight: ${text.h6['font-weight']};\n      min-height: ${fontSize[text.h6['font-size'] as FontSize]};\n    }\n  `;\n};\n\nexport const StyledHTML = styled.div(({ theme }) => {\n  return css`\n    width: 100%;\n    overflow-x: auto;\n    overflow-wrap: break-word;\n    contain: paint;\n    ${getHtmlStyles(theme)}\n\n    ${StyledPopover} ul {\n      ul {\n        padding-inline-start: 0;\n      }\n      ol {\n        padding-inline-start: 0;\n      }\n    }\n\n    ${StyledPopover} li {\n      margin: 0;\n    }\n  `;\n});\n\nStyledHTML.defaultProps = defaultThemeProp;\n\nif (DOMPurify.isSupported) {\n  const targetBlankSet = new WeakSet<HTMLAnchorElement>();\n\n  DOMPurify.addHook('beforeSanitizeAttributes', node => {\n    // Can be passed text nodes\n    if (!(node instanceof HTMLElement || node instanceof SVGElement)) return;\n\n    node.removeAttribute('class');\n\n    if (\n      node.tagName === 'A' &&\n      node.hasAttribute('href') &&\n      node.getAttribute('target') === '_blank'\n    ) {\n      targetBlankSet.add(node as HTMLAnchorElement);\n    }\n  });\n\n  DOMPurify.addHook('afterSanitizeAttributes', node => {\n    if (node.tagName === 'A' && node.hasAttribute('href')) {\n      const href = node.getAttribute('href')!;\n\n      let fullURL: URL;\n      try {\n        fullURL = new URL(href, window.location.href);\n      } catch (e) {\n        return;\n      }\n\n      if (!sameOrigin(window.location, fullURL)) {\n        node.setAttribute('target', '_blank');\n        node.setAttribute('rel', 'noopener');\n      } else if (targetBlankSet.has(node as HTMLAnchorElement)) {\n        node.setAttribute('target', '_blank');\n        targetBlankSet.delete(node as HTMLAnchorElement);\n      }\n    }\n  });\n}\n\nconst HTML: FunctionComponent<HTMLProps & ForwardProps> = forwardRef(function HTML(\n  { testId, content, customTags, ...restProps }: PropsWithoutRef<HTMLProps>,\n  ref: HTMLProps['ref']\n) {\n  const [mounted, setMounted] = useState(false);\n  const sanitizedHtml = useMemo(() => {\n    // Don't render content on the server at all.\n    return mounted && DOMPurify.isSupported\n      ? DOMPurify.sanitize(content, {\n          FORBID_TAGS: ['style'],\n          CUSTOM_ELEMENT_HANDLING: {\n            tagNameCheck: customTags ? tagName => customTags.includes(tagName) : undefined\n          }\n        })\n      : '';\n  }, [content, customTags, mounted]);\n  const testIds = useTestIds(testId, getHTMLTestIds);\n\n  useEffect(() => {\n    setMounted(true);\n  }, []);\n\n  return (\n    <StyledHTML\n      data-testid={testIds.root}\n      {...restProps}\n      dangerouslySetInnerHTML={{ __html: sanitizedHtml }}\n      ref={ref}\n    />\n  );\n});\n\nexport default withTestIds(HTML, getHTMLTestIds);\n"]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pega/cosmos-react-core",
-  "version": "5.0.0-dev.10.1",
+  "version": "5.0.0-dev.10.3",
   "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.",
   "repository": {
     "type": "git",
@@ -25,7 +25,7 @@
   },
   "dependencies": {
     "@popperjs/core": "^2.11.6",
-    "@types/dompurify": "^3.0.2",
+    "@types/dompurify": "^3.0.5",
     "@types/emoji-mart": "^3.0.4",
     "@types/emoji-regex": "^8.0.0",
     "@types/google.maps": "^3.49.2",
@@ -35,7 +35,7 @@
     "@types/styled-components": "^5.1.26",
     "bignumber.js": "^9.0.1",
     "credit-card-type": "^9.1.0",
-    "dompurify": "^3.0.5",
+    "dompurify": "^3.0.7",
     "emoji-mart": "^3.0.1",
     "emoji-regex": "^9.2.0",
     "libphonenumber-js": "^1.9.9",