@pega/cosmos-react-work 9.19.0 → 9.20.0

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

@@ -1 +1 @@
-{"version":3,"file":"AppAnnouncement.d.ts","sourceRoot":"","sources":["../../../src/components/AppAnnouncement/AppAnnouncement.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAmB,GAAG,EAAE,MAAM,OAAO,CAAC;AAelD,OAAO,KAAK,EACV,SAAS,EACT,+BAA+B,EAC/B,cAAc,EACf,MAAM,yBAAyB,CAAC;AAKjC,MAAM,WAAW,oBAAqB,SAAQ,SAAS,EAAE,cAAc;IACrE,yCAAyC;IACzC,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,6CAA6C;IAC7C,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,qEAAqE;IACrE,OAAO,CAAC,EAAE,MAAM,EAAE,CAAC;IACnB,wCAAwC;IACxC,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,mDAAmD;IACnD,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,oGAAoG;IACpG,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,qDAAqD;IACrD,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;OAEG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,sDAAsD;IACtD,SAAS,CAAC,EAAE,MAAM,IAAI,CAAC;IACvB,GAAG,CAAC,EAAE,GAAG,CAAC,WAAW,CAAC,CAAC;CACxB;AAaD,eAAO,MAAM,4BAA4B,6NAiCvC,CAAC;AAIH,eAAO,MAAM,qBAAqB,kRA4EhC,CAAC;AAIH,QAAA,MAAM,eAAe,EAAE,+BAA+B,CAAC,oBAAoB,CAwE1E,CAAC;AAEF,eAAe,eAAe,CAAC"}
+{"version":3,"file":"AppAnnouncement.d.ts","sourceRoot":"","sources":["../../../src/components/AppAnnouncement/AppAnnouncement.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAmB,GAAG,EAAE,MAAM,OAAO,CAAC;AAelD,OAAO,KAAK,EACV,SAAS,EACT,+BAA+B,EAC/B,cAAc,EACf,MAAM,yBAAyB,CAAC;AAKjC,MAAM,WAAW,oBAAqB,SAAQ,SAAS,EAAE,cAAc;IACrE,yCAAyC;IACzC,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,6CAA6C;IAC7C,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,qEAAqE;IACrE,OAAO,CAAC,EAAE,MAAM,EAAE,CAAC;IACnB,wCAAwC;IACxC,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,mDAAmD;IACnD,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,oGAAoG;IACpG,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,qDAAqD;IACrD,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;OAEG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,sDAAsD;IACtD,SAAS,CAAC,EAAE,MAAM,IAAI,CAAC;IACvB,GAAG,CAAC,EAAE,GAAG,CAAC,WAAW,CAAC,CAAC;CACxB;AAaD,eAAO,MAAM,4BAA4B,6NAiCvC,CAAC;AAIH,eAAO,MAAM,qBAAqB,kRAwGhC,CAAC;AAIH,QAAA,MAAM,eAAe,EAAE,+BAA+B,CAAC,oBAAoB,CAwE1E,CAAC;AAEF,eAAe,eAAe,CAAC"}

package/lib/components/AppAnnouncement/AppAnnouncement.js

@@ -43,7 +43,7 @@ export const StyledAppAnnouncementContent = styled.div(props => {
 });
 StyledAppAnnouncementContent.defaultProps = defaultThemeProp;
 export const StyledAppAnnouncement = styled.article(props => {
-    const { theme: { base: { shadow, spacing }, components: { card: { 'border-radius': borderRadius }, announcement: { background, 'foreground-color': foregroundColor } } }, image } = props;
+    const { theme: { base: { shadow, spacing, 'content-width': contentWidth }, components: { card: { 'border-radius': borderRadius }, announcement: { background, 'foreground-color': foregroundColor } } }, image } = props;
     const { end } = useDirection();
     const color = calculateForegroundColor(background, foregroundColor);
     return css `
@@ -53,7 +53,35 @@ export const StyledAppAnnouncement = styled.article(props => {
     color: ${color};
     position: relative;
 
-    ${props.fitToParent && 'block-size: 100%;'};
+    ${props.fitToParent &&
+        css `
+      min-block-size: 100%;
+      display: flex;
+      flex-direction: column;
+
+      > div {
+        flex: 1;
+        display: flex;
+        flex-direction: column;
+        min-height: 0;
+
+        ${StyledAppAnnouncementContent} {
+          flex: 1;
+          min-height: 0;
+          max-height: none;
+        }
+
+        ${StyledButton} {
+          align-self: flex-start;
+        }
+      }
+
+      @container dynamic-layout-item (block-size <= ${contentWidth.sm}) {
+        ${StyledAppAnnouncementContent} {
+          overflow-y: unset;
+        }
+      }
+    `};
 
     &::after {
       background: url('${image}') no-repeat;

package/lib/components/AppAnnouncement/AppAnnouncement.js.map

@@ -1 +1 @@
-{"version":3,"file":"AppAnnouncement.js","sourceRoot":"","sources":["../../../src/components/AppAnnouncement/AppAnnouncement.tsx"],"names":[],"mappings":"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","sourcesContent":["import { forwardRef } from 'react';\nimport type { PropsWithoutRef, Ref } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport {\n  Button,\n  StyledButton,\n  Text,\n  Icon,\n  registerIcon,\n  useI18n,\n  defaultThemeProp,\n  useDirection,\n  calculateForegroundColor,\n  HTML\n} from '@pega/cosmos-react-core';\nimport type {\n  BaseProps,\n  ForwardRefForwardPropsComponent,\n  NoChildrenProp\n} from '@pega/cosmos-react-core';\nimport * as timesIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/times.icon';\n\nregisterIcon(timesIcon);\n\nexport interface AppAnnouncementProps extends BaseProps, NoChildrenProp {\n  /** Heading text for the announcement. */\n  heading?: string;\n  /** Description text for the announcement. */\n  description?: string;\n  /** Announcement details to be displayed in form of bulleted list. */\n  details?: string[];\n  /** Url to open with What's new link. */\n  whatsNewLink?: string;\n  /** Content to populate the announcement button. */\n  whatsNewText?: string;\n  /** When provided, the heading renders as a link to this URL and the What's new button is hidden. */\n  headingUrl?: string;\n  /** An image source for the decorative background. */\n  image?: string;\n  /**\n   * Whether to fit AppAnnouncement widget in the parent element.\n   */\n  fitToParent?: boolean;\n  /** Callback when user dismisses the announcements. */\n  onDismiss?: () => void;\n  ref?: Ref<HTMLElement>;\n}\n\nconst StyledDismissButton = styled.button`\n  font-size: 1.25rem;\n  border: none;\n`;\n\nconst StyledHeadingLink = styled(Button)`\n  color: inherit;\n`;\n\nStyledHeadingLink.defaultProps = defaultThemeProp;\n\nexport const StyledAppAnnouncementContent = styled.div(props => {\n  const {\n    theme: {\n      base: { spacing }\n    }\n  } = props;\n\n  return css`\n    max-height: 12rem;\n    overflow-y: auto;\n    margin-block-start: calc(1.5 * ${spacing});\n    margin-inline: calc(-2 * ${spacing});\n    padding-inline: calc(2 * ${spacing});\n\n    p,\n    ul {\n      line-height: 1.4;\n    }\n\n    ul {\n      padding-inline-start: calc(2 * ${spacing});\n    }\n\n    p + ul {\n      margin-block-start: calc(1.5 * ${spacing});\n    }\n\n    li {\n      &:not(:last-child) {\n        margin-block-end: ${spacing};\n      }\n    }\n  `;\n});\n\nStyledAppAnnouncementContent.defaultProps = defaultThemeProp;\n\nexport const StyledAppAnnouncement = styled.article<\n  Pick<AppAnnouncementProps, 'image' | 'fitToParent'>\n>(props => {\n  const {\n    theme: {\n      base: { shadow, spacing },\n      components: {\n        card: { 'border-radius': borderRadius },\n        announcement: { background, 'foreground-color': foregroundColor }\n      }\n    },\n    image\n  } = props;\n\n  const { end } = useDirection();\n  const color = calculateForegroundColor(background, foregroundColor);\n\n  return css`\n    padding: calc(2 * ${spacing});\n    background: ${background};\n    border-radius: ${borderRadius};\n    color: ${color};\n    position: relative;\n\n    ${props.fitToParent && 'block-size: 100%;'};\n\n    &::after {\n      background: url('${image}') no-repeat;\n      background-position: ${end} bottom;\n      background-size: contain;\n      background-origin: content-box;\n      opacity: 0.2;\n      content: '';\n      display: block;\n      position: absolute;\n      width: 50%;\n      height: 100%;\n      inset-inline-end: 0;\n      bottom: 0;\n      padding: calc(2 * ${spacing});\n    }\n\n    h2 {\n      position: relative;\n      z-index: 2;\n    }\n\n    ${StyledDismissButton} {\n      position: absolute;\n      top: 0.75rem;\n      inset-inline-end: 0.75rem;\n      color: inherit;\n      z-index: 3;\n      &:enabled:hover {\n        background: #ffffff19;\n      }\n      &:enabled:focus-visible {\n        box-shadow: ${shadow.focus};\n      }\n    }\n\n    > div {\n      position: relative;\n      z-index: 2;\n\n      ${StyledButton} {\n        margin-top: calc(2 * ${spacing});\n        white-space: normal;\n\n        &:enabled:focus-visible,\n        &:not([disabled]):focus-visible {\n          box-shadow: ${shadow.focus};\n        }\n      }\n    }\n  `;\n});\n\nStyledAppAnnouncement.defaultProps = defaultThemeProp;\n\nconst AppAnnouncement: ForwardRefForwardPropsComponent<AppAnnouncementProps> = forwardRef(\n  function AppAnnouncement(\n    props: PropsWithoutRef<AppAnnouncementProps>,\n    ref: AppAnnouncementProps['ref']\n  ) {\n    const t = useI18n();\n    const {\n      heading,\n      description,\n      details,\n      whatsNewLink,\n      whatsNewText = t('app_announcement_whats_new_button_label'),\n      headingUrl,\n      image,\n      onDismiss,\n      ...restProps\n    } = props;\n\n    const resolvedHeading = heading || t('app_announcement_details_list_header');\n\n    return (\n      <StyledAppAnnouncement {...restProps} ref={ref} image={image}>\n        {onDismiss && (\n          <Button\n            as={StyledDismissButton}\n            variant='simple'\n            icon\n            onClick={onDismiss}\n            aria-label={t('app_announcement_dismiss_button_label_a11y')}\n          >\n            <Icon name='times' />\n          </Button>\n        )}\n        <Text variant='h2'>\n          {headingUrl ? (\n            <StyledHeadingLink\n              variant='link'\n              href={headingUrl}\n              target='_blank'\n              rel='noopener noreferrer'\n            >\n              {resolvedHeading}\n            </StyledHeadingLink>\n          ) : (\n            resolvedHeading\n          )}\n        </Text>\n        <div>\n          <StyledAppAnnouncementContent>\n            {description && <HTML as='p' content={description} />}\n            {!!details?.length && (\n              <ul>\n                {details.map((item, index) => {\n                  return (\n                    // eslint-disable-next-line react/no-array-index-key\n                    <li key={index}>\n                      <HTML content={item} />\n                    </li>\n                  );\n                })}\n              </ul>\n            )}\n          </StyledAppAnnouncementContent>\n          {!headingUrl && whatsNewLink && (\n            <Button variant='secondary' href={whatsNewLink} target='_blank'>\n              {whatsNewText}\n            </Button>\n          )}\n        </div>\n      </StyledAppAnnouncement>\n    );\n  }\n);\n\nexport default AppAnnouncement;\n"]}
+{"version":3,"file":"AppAnnouncement.js","sourceRoot":"","sources":["../../../src/components/AppAnnouncement/AppAnnouncement.tsx"],"names":[],"mappings":"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","sourcesContent":["import { forwardRef } from 'react';\nimport type { PropsWithoutRef, Ref } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport {\n  Button,\n  StyledButton,\n  Text,\n  Icon,\n  registerIcon,\n  useI18n,\n  defaultThemeProp,\n  useDirection,\n  calculateForegroundColor,\n  HTML\n} from '@pega/cosmos-react-core';\nimport type {\n  BaseProps,\n  ForwardRefForwardPropsComponent,\n  NoChildrenProp\n} from '@pega/cosmos-react-core';\nimport * as timesIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/times.icon';\n\nregisterIcon(timesIcon);\n\nexport interface AppAnnouncementProps extends BaseProps, NoChildrenProp {\n  /** Heading text for the announcement. */\n  heading?: string;\n  /** Description text for the announcement. */\n  description?: string;\n  /** Announcement details to be displayed in form of bulleted list. */\n  details?: string[];\n  /** Url to open with What's new link. */\n  whatsNewLink?: string;\n  /** Content to populate the announcement button. */\n  whatsNewText?: string;\n  /** When provided, the heading renders as a link to this URL and the What's new button is hidden. */\n  headingUrl?: string;\n  /** An image source for the decorative background. */\n  image?: string;\n  /**\n   * Whether to fit AppAnnouncement widget in the parent element.\n   */\n  fitToParent?: boolean;\n  /** Callback when user dismisses the announcements. */\n  onDismiss?: () => void;\n  ref?: Ref<HTMLElement>;\n}\n\nconst StyledDismissButton = styled.button`\n  font-size: 1.25rem;\n  border: none;\n`;\n\nconst StyledHeadingLink = styled(Button)`\n  color: inherit;\n`;\n\nStyledHeadingLink.defaultProps = defaultThemeProp;\n\nexport const StyledAppAnnouncementContent = styled.div(props => {\n  const {\n    theme: {\n      base: { spacing }\n    }\n  } = props;\n\n  return css`\n    max-height: 12rem;\n    overflow-y: auto;\n    margin-block-start: calc(1.5 * ${spacing});\n    margin-inline: calc(-2 * ${spacing});\n    padding-inline: calc(2 * ${spacing});\n\n    p,\n    ul {\n      line-height: 1.4;\n    }\n\n    ul {\n      padding-inline-start: calc(2 * ${spacing});\n    }\n\n    p + ul {\n      margin-block-start: calc(1.5 * ${spacing});\n    }\n\n    li {\n      &:not(:last-child) {\n        margin-block-end: ${spacing};\n      }\n    }\n  `;\n});\n\nStyledAppAnnouncementContent.defaultProps = defaultThemeProp;\n\nexport const StyledAppAnnouncement = styled.article<\n  Pick<AppAnnouncementProps, 'image' | 'fitToParent'>\n>(props => {\n  const {\n    theme: {\n      base: { shadow, spacing, 'content-width': contentWidth },\n      components: {\n        card: { 'border-radius': borderRadius },\n        announcement: { background, 'foreground-color': foregroundColor }\n      }\n    },\n    image\n  } = props;\n\n  const { end } = useDirection();\n  const color = calculateForegroundColor(background, foregroundColor);\n\n  return css`\n    padding: calc(2 * ${spacing});\n    background: ${background};\n    border-radius: ${borderRadius};\n    color: ${color};\n    position: relative;\n\n    ${props.fitToParent &&\n    css`\n      min-block-size: 100%;\n      display: flex;\n      flex-direction: column;\n\n      > div {\n        flex: 1;\n        display: flex;\n        flex-direction: column;\n        min-height: 0;\n\n        ${StyledAppAnnouncementContent} {\n          flex: 1;\n          min-height: 0;\n          max-height: none;\n        }\n\n        ${StyledButton} {\n          align-self: flex-start;\n        }\n      }\n\n      @container dynamic-layout-item (block-size <= ${contentWidth.sm}) {\n        ${StyledAppAnnouncementContent} {\n          overflow-y: unset;\n        }\n      }\n    `};\n\n    &::after {\n      background: url('${image}') no-repeat;\n      background-position: ${end} bottom;\n      background-size: contain;\n      background-origin: content-box;\n      opacity: 0.2;\n      content: '';\n      display: block;\n      position: absolute;\n      width: 50%;\n      height: 100%;\n      inset-inline-end: 0;\n      bottom: 0;\n      padding: calc(2 * ${spacing});\n    }\n\n    h2 {\n      position: relative;\n      z-index: 2;\n    }\n\n    ${StyledDismissButton} {\n      position: absolute;\n      top: 0.75rem;\n      inset-inline-end: 0.75rem;\n      color: inherit;\n      z-index: 3;\n      &:enabled:hover {\n        background: #ffffff19;\n      }\n      &:enabled:focus-visible {\n        box-shadow: ${shadow.focus};\n      }\n    }\n\n    > div {\n      position: relative;\n      z-index: 2;\n\n      ${StyledButton} {\n        margin-top: calc(2 * ${spacing});\n        white-space: normal;\n\n        &:enabled:focus-visible,\n        &:not([disabled]):focus-visible {\n          box-shadow: ${shadow.focus};\n        }\n      }\n    }\n  `;\n});\n\nStyledAppAnnouncement.defaultProps = defaultThemeProp;\n\nconst AppAnnouncement: ForwardRefForwardPropsComponent<AppAnnouncementProps> = forwardRef(\n  function AppAnnouncement(\n    props: PropsWithoutRef<AppAnnouncementProps>,\n    ref: AppAnnouncementProps['ref']\n  ) {\n    const t = useI18n();\n    const {\n      heading,\n      description,\n      details,\n      whatsNewLink,\n      whatsNewText = t('app_announcement_whats_new_button_label'),\n      headingUrl,\n      image,\n      onDismiss,\n      ...restProps\n    } = props;\n\n    const resolvedHeading = heading || t('app_announcement_details_list_header');\n\n    return (\n      <StyledAppAnnouncement {...restProps} ref={ref} image={image}>\n        {onDismiss && (\n          <Button\n            as={StyledDismissButton}\n            variant='simple'\n            icon\n            onClick={onDismiss}\n            aria-label={t('app_announcement_dismiss_button_label_a11y')}\n          >\n            <Icon name='times' />\n          </Button>\n        )}\n        <Text variant='h2'>\n          {headingUrl ? (\n            <StyledHeadingLink\n              variant='link'\n              href={headingUrl}\n              target='_blank'\n              rel='noopener noreferrer'\n            >\n              {resolvedHeading}\n            </StyledHeadingLink>\n          ) : (\n            resolvedHeading\n          )}\n        </Text>\n        <div>\n          <StyledAppAnnouncementContent>\n            {description && <HTML as='p' content={description} />}\n            {!!details?.length && (\n              <ul>\n                {details.map((item, index) => {\n                  return (\n                    // eslint-disable-next-line react/no-array-index-key\n                    <li key={index}>\n                      <HTML content={item} />\n                    </li>\n                  );\n                })}\n              </ul>\n            )}\n          </StyledAppAnnouncementContent>\n          {!headingUrl && whatsNewLink && (\n            <Button variant='secondary' href={whatsNewLink} target='_blank'>\n              {whatsNewText}\n            </Button>\n          )}\n        </div>\n      </StyledAppAnnouncement>\n    );\n  }\n);\n\nexport default AppAnnouncement;\n"]}

package/lib/components/Article/ArticleRating.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ArticleRating.d.ts","sourceRoot":"","sources":["../../../src/components/Article/ArticleRating.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAqB/C,MAAM,WAAW,kBAAkB;IACjC,0BAA0B;IAC1B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,6BAA6B;IAC7B,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,QAAQ,CAAC,EAAE,OAAO,GAAG,UAAU,CAAC;IAChC,UAAU,EAAE,CAAC,QAAQ,EAAE,kBAAkB,CAAC,UAAU,CAAC,KAAK,IAAI,CAAC;CAChE;AAED,eAAO,MAAM,uBAAuB,+NAEnC,CAAC;AAIF,QAAA,MAAM,aAAa,EAAE,iBAAiB,CAAC,kBAAkB,CAsFxD,CAAC;AAEF,eAAe,aAAa,CAAC"}
+{"version":3,"file":"ArticleRating.d.ts","sourceRoot":"","sources":["../../../src/components/Article/ArticleRating.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAqB/C,MAAM,WAAW,kBAAkB;IACjC,0BAA0B;IAC1B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,6BAA6B;IAC7B,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,QAAQ,CAAC,EAAE,OAAO,GAAG,UAAU,CAAC;IAChC,UAAU,EAAE,CAAC,QAAQ,EAAE,kBAAkB,CAAC,UAAU,CAAC,KAAK,IAAI,CAAC;CAChE;AAED,eAAO,MAAM,uBAAuB,+NAEnC,CAAC;AAIF,QAAA,MAAM,aAAa,EAAE,iBAAiB,CAAC,kBAAkB,CA4FxD,CAAC;AAEF,eAAe,aAAa,CAAC"}

package/lib/components/Article/ArticleRating.js

@@ -35,9 +35,9 @@ const ArticleRating = ({ dislikes, likes, reaction, onReaction, ...restProps })
         : dislikes;
     return (_jsxs(Flex, { ...restProps, container: { gap: 1 }, children: [_jsxs(Flex, { container: { gap: 0.5, alignItems: 'center' }, children: [_jsx(Button, { variant: 'simple', label: t('like'), icon: true, compact: true, onClick: () => {
                             onReaction(reaction === 'liked' ? undefined : 'liked');
-                        }, "aria-label": `${formattedLikes} ${t('likes')}`, "aria-pressed": reaction === 'liked', children: _jsx(Icon, { name: reaction === 'liked' ? 'thumbs-up-solid' : 'thumbs-up' }) }), formattedLikes && (_jsx(Text, { as: reaction === 'liked' ? StyledReactedPercentage : undefined, variant: 'secondary', "aria-hidden": true, children: formattedLikes }))] }), _jsxs(Flex, { container: { gap: 0.5, alignItems: 'center' }, children: [_jsx(Button, { "aria-label": `${formattedDislikes} ${t('dislikes')}`, variant: 'simple', label: t('dislike'), icon: true, compact: true, "aria-pressed": reaction === 'disliked', onClick: () => {
+                        }, "aria-label": `${formattedLikes} ${t('likes')}`, "aria-pressed": reaction === 'liked', children: _jsx(Icon, { name: reaction === 'liked' ? 'thumbs-up-solid' : 'thumbs-up', emphasized: reaction === 'liked' }) }), formattedLikes && (_jsx(Text, { as: reaction === 'liked' ? StyledReactedPercentage : undefined, variant: 'secondary', "aria-hidden": true, children: formattedLikes }))] }), _jsxs(Flex, { container: { gap: 0.5, alignItems: 'center' }, children: [_jsx(Button, { "aria-label": `${formattedDislikes} ${t('dislikes')}`, variant: 'simple', label: t('dislike'), icon: true, compact: true, "aria-pressed": reaction === 'disliked', onClick: () => {
                             onReaction(reaction === 'disliked' ? undefined : 'disliked');
-                        }, children: _jsx(Icon, { name: reaction === 'disliked' ? 'thumbs-down-solid' : 'thumbs-down' }) }), formattedDislikes && (_jsx(Text, { as: reaction === 'disliked' ? StyledReactedPercentage : undefined, variant: 'secondary', "aria-hidden": true, children: formattedDislikes }))] })] }));
+                        }, children: _jsx(Icon, { name: reaction === 'disliked' ? 'thumbs-down-solid' : 'thumbs-down', emphasized: reaction === 'disliked' }) }), formattedDislikes && (_jsx(Text, { as: reaction === 'disliked' ? StyledReactedPercentage : undefined, variant: 'secondary', "aria-hidden": true, children: formattedDislikes }))] })] }));
 };
 export default ArticleRating;
 //# sourceMappingURL=ArticleRating.js.map

package/lib/components/Article/ArticleRating.js.map

@@ -1 +1 @@
-{"version":3,"file":"ArticleRating.js","sourceRoot":"","sources":["../../../src/components/Article/ArticleRating.tsx"],"names":[],"mappings":"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","sourcesContent":["import type { FunctionComponent } from 'react';\nimport styled from 'styled-components';\n\nimport {\n  registerIcon,\n  Flex,\n  Button,\n  Icon,\n  Text,\n  useI18n,\n  defaultThemeProp,\n  formatNumber,\n  useConfiguration\n} from '@pega/cosmos-react-core';\nimport * as thumbsUpSolidIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/thumbs-up-solid.icon';\nimport * as thumbsUpIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/thumbs-up.icon';\nimport * as thumbsDownSolidIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/thumbs-down-solid.icon';\nimport * as thumbsDownIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/thumbs-down.icon';\n\nregisterIcon(thumbsUpSolidIcon, thumbsUpIcon, thumbsDownSolidIcon, thumbsDownIcon);\n\nexport interface ArticleRatingProps {\n  /** Percentage of likes */\n  likes?: number;\n  /** Percentage of dislikes */\n  dislikes?: number;\n  reaction?: 'liked' | 'disliked';\n  onReaction: (reaction: ArticleRatingProps['reaction']) => void;\n}\n\nexport const StyledReactedPercentage = styled.span`\n  font-weight: ${p => p.theme.base['font-weight']['semi-bold']};\n`;\n\nStyledReactedPercentage.defaultProps = defaultThemeProp;\n\nconst ArticleRating: FunctionComponent<ArticleRatingProps> = ({\n  dislikes,\n  likes,\n  reaction,\n  onReaction,\n  ...restProps\n}) => {\n  const t = useI18n();\n  const { locale } = useConfiguration();\n\n  const formattedLikes =\n    likes !== undefined\n      ? formatNumber(likes, {\n          locale,\n          options: {\n            style: 'unit',\n            unit: 'percent',\n            maximumFractionDigits: 0\n          }\n        })\n      : likes;\n  const formattedDislikes =\n    dislikes !== undefined\n      ? formatNumber(dislikes, {\n          locale,\n          options: {\n            style: 'unit',\n            unit: 'percent',\n            maximumFractionDigits: 0\n          }\n        })\n      : dislikes;\n\n  return (\n    <Flex {...restProps} container={{ gap: 1 }}>\n      <Flex container={{ gap: 0.5, alignItems: 'center' }}>\n        <Button\n          variant='simple'\n          label={t('like')}\n          icon\n          compact\n          onClick={() => {\n            onReaction(reaction === 'liked' ? undefined : 'liked');\n          }}\n          aria-label={`${formattedLikes} ${t('likes')}`}\n          aria-pressed={reaction === 'liked'}\n        >\n          <Icon name={reaction === 'liked' ? 'thumbs-up-solid' : 'thumbs-up'} />\n        </Button>\n        {formattedLikes && (\n          <Text\n            as={reaction === 'liked' ? StyledReactedPercentage : undefined}\n            variant='secondary'\n            aria-hidden\n          >\n            {formattedLikes}\n          </Text>\n        )}\n      </Flex>\n\n      <Flex container={{ gap: 0.5, alignItems: 'center' }}>\n        <Button\n          aria-label={`${formattedDislikes} ${t('dislikes')}`}\n          variant='simple'\n          label={t('dislike')}\n          icon\n          compact\n          aria-pressed={reaction === 'disliked'}\n          onClick={() => {\n            onReaction(reaction === 'disliked' ? undefined : 'disliked');\n          }}\n        >\n          <Icon name={reaction === 'disliked' ? 'thumbs-down-solid' : 'thumbs-down'} />\n        </Button>\n        {formattedDislikes && (\n          <Text\n            as={reaction === 'disliked' ? StyledReactedPercentage : undefined}\n            variant='secondary'\n            aria-hidden\n          >\n            {formattedDislikes}\n          </Text>\n        )}\n      </Flex>\n    </Flex>\n  );\n};\n\nexport default ArticleRating;\n"]}
+{"version":3,"file":"ArticleRating.js","sourceRoot":"","sources":["../../../src/components/Article/ArticleRating.tsx"],"names":[],"mappings":"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","sourcesContent":["import type { FunctionComponent } from 'react';\nimport styled from 'styled-components';\n\nimport {\n  registerIcon,\n  Flex,\n  Button,\n  Icon,\n  Text,\n  useI18n,\n  defaultThemeProp,\n  formatNumber,\n  useConfiguration\n} from '@pega/cosmos-react-core';\nimport * as thumbsUpSolidIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/thumbs-up-solid.icon';\nimport * as thumbsUpIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/thumbs-up.icon';\nimport * as thumbsDownSolidIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/thumbs-down-solid.icon';\nimport * as thumbsDownIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/thumbs-down.icon';\n\nregisterIcon(thumbsUpSolidIcon, thumbsUpIcon, thumbsDownSolidIcon, thumbsDownIcon);\n\nexport interface ArticleRatingProps {\n  /** Percentage of likes */\n  likes?: number;\n  /** Percentage of dislikes */\n  dislikes?: number;\n  reaction?: 'liked' | 'disliked';\n  onReaction: (reaction: ArticleRatingProps['reaction']) => void;\n}\n\nexport const StyledReactedPercentage = styled.span`\n  font-weight: ${p => p.theme.base['font-weight']['semi-bold']};\n`;\n\nStyledReactedPercentage.defaultProps = defaultThemeProp;\n\nconst ArticleRating: FunctionComponent<ArticleRatingProps> = ({\n  dislikes,\n  likes,\n  reaction,\n  onReaction,\n  ...restProps\n}) => {\n  const t = useI18n();\n  const { locale } = useConfiguration();\n\n  const formattedLikes =\n    likes !== undefined\n      ? formatNumber(likes, {\n          locale,\n          options: {\n            style: 'unit',\n            unit: 'percent',\n            maximumFractionDigits: 0\n          }\n        })\n      : likes;\n  const formattedDislikes =\n    dislikes !== undefined\n      ? formatNumber(dislikes, {\n          locale,\n          options: {\n            style: 'unit',\n            unit: 'percent',\n            maximumFractionDigits: 0\n          }\n        })\n      : dislikes;\n\n  return (\n    <Flex {...restProps} container={{ gap: 1 }}>\n      <Flex container={{ gap: 0.5, alignItems: 'center' }}>\n        <Button\n          variant='simple'\n          label={t('like')}\n          icon\n          compact\n          onClick={() => {\n            onReaction(reaction === 'liked' ? undefined : 'liked');\n          }}\n          aria-label={`${formattedLikes} ${t('likes')}`}\n          aria-pressed={reaction === 'liked'}\n        >\n          <Icon\n            name={reaction === 'liked' ? 'thumbs-up-solid' : 'thumbs-up'}\n            emphasized={reaction === 'liked'}\n          />\n        </Button>\n        {formattedLikes && (\n          <Text\n            as={reaction === 'liked' ? StyledReactedPercentage : undefined}\n            variant='secondary'\n            aria-hidden\n          >\n            {formattedLikes}\n          </Text>\n        )}\n      </Flex>\n\n      <Flex container={{ gap: 0.5, alignItems: 'center' }}>\n        <Button\n          aria-label={`${formattedDislikes} ${t('dislikes')}`}\n          variant='simple'\n          label={t('dislike')}\n          icon\n          compact\n          aria-pressed={reaction === 'disliked'}\n          onClick={() => {\n            onReaction(reaction === 'disliked' ? undefined : 'disliked');\n          }}\n        >\n          <Icon\n            name={reaction === 'disliked' ? 'thumbs-down-solid' : 'thumbs-down'}\n            emphasized={reaction === 'disliked'}\n          />\n        </Button>\n        {formattedDislikes && (\n          <Text\n            as={reaction === 'disliked' ? StyledReactedPercentage : undefined}\n            variant='secondary'\n            aria-hidden\n          >\n            {formattedDislikes}\n          </Text>\n        )}\n      </Flex>\n    </Flex>\n  );\n};\n\nexport default ArticleRating;\n"]}

package/lib/components/ArticleList/ArticleFeedback.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ArticleFeedback.d.ts","sourceRoot":"","sources":["../../../src/components/ArticleList/ArticleFeedback.tsx"],"names":[],"mappings":"AAqBA,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,qBAAqB,CAAC;AAIhE,eAAO,MAAM,yBAAyB;;yLAQpC,CAAC;;AAIH,wBA6FE"}
+{"version":3,"file":"ArticleFeedback.d.ts","sourceRoot":"","sources":["../../../src/components/ArticleList/ArticleFeedback.tsx"],"names":[],"mappings":"AAqBA,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,qBAAqB,CAAC;AAIhE,eAAO,MAAM,yBAAyB;;yLAQpC,CAAC;;AAIH,wBAmGE"}

package/lib/components/ArticleList/ArticleFeedback.js

@@ -21,9 +21,9 @@ export default forwardRef(function ArticleFeedback({ question, comment, reaction
     useElementFocus(feedbackCommentRef, { shouldFocus: !!reaction });
     return (_jsx(Flex, { ...restProps, container: { direction: 'column' }, ref: ref, children: !showThankYouMessage ? (_jsxs(_Fragment, { children: [_jsxs(Flex, { container: { gap: 0.5, alignItems: 'center', pad: [0.5, undefined] }, children: [_jsx(Text, { children: question }), _jsxs("div", { role: 'group', "aria-label": t('confirmation_options'), children: [_jsx(Button, { "aria-pressed": reaction === 'liked', label: t('yes'), variant: 'simple', icon: true, compact: true, onClick: () => {
                                         onReaction(reaction === 'liked' ? undefined : 'liked');
-                                    }, children: _jsx(Icon, { name: reaction === 'liked' ? 'thumbs-up-solid' : 'thumbs-up' }) }), _jsx(Button, { variant: 'simple', label: t('no'), icon: true, compact: true, "aria-pressed": reaction === 'disliked', onClick: () => {
+                                    }, children: _jsx(Icon, { name: reaction === 'liked' ? 'thumbs-up-solid' : 'thumbs-up', emphasized: reaction === 'liked' }) }), _jsx(Button, { variant: 'simple', label: t('no'), icon: true, compact: true, "aria-pressed": reaction === 'disliked', onClick: () => {
                                         onReaction(reaction === 'disliked' ? undefined : 'disliked');
-                                    }, children: _jsx(Icon, { name: reaction === 'disliked' ? 'thumbs-down-solid' : 'thumbs-down' }) })] })] }), reaction && comment && onSubmit && (_jsxs(Flex, { container: { direction: 'column', gap: 1, pad: [1, undefined] }, children: [_jsx(TextArea, { ...comment, label: t('add_a_comment'), ref: feedbackCommentRef, autoResize: false, maxLength: 200, hardStop: true, onKeyDown: (e) => {
+                                    }, children: _jsx(Icon, { name: reaction === 'disliked' ? 'thumbs-down-solid' : 'thumbs-down', emphasized: reaction === 'disliked' }) })] })] }), reaction && comment && onSubmit && (_jsxs(Flex, { container: { direction: 'column', gap: 1, pad: [1, undefined] }, children: [_jsx(TextArea, { ...comment, label: t('add_a_comment'), ref: feedbackCommentRef, autoResize: false, maxLength: 200, hardStop: true, onKeyDown: (e) => {
                                 if (e.key === 'Enter' && !e.shiftKey) {
                                     e.preventDefault();
                                     if (comment.value?.trim()) {

package/lib/components/ArticleList/ArticleFeedback.js.map

@@ -1 +1 @@
-{"version":3,"file":"ArticleFeedback.js","sourceRoot":"","sources":["../../../src/components/ArticleList/ArticleFeedback.tsx"],"names":[],"mappings":"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","sourcesContent":["import { forwardRef, useRef } from 'react';\nimport type { MouseEvent, KeyboardEvent, PropsWithoutRef } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport {\n  registerIcon,\n  Text,\n  Flex,\n  useI18n,\n  Button,\n  TextArea,\n  defaultThemeProp,\n  Icon,\n  useElementFocus\n} from '@pega/cosmos-react-core';\nimport * as thumbsUpSolidIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/thumbs-up-solid.icon';\nimport * as thumbsUpIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/thumbs-up.icon';\nimport * as thumbsDownSolidIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/thumbs-down-solid.icon';\nimport * as thumbsDownIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/thumbs-down.icon';\nimport type { RefElement } from '@pega/cosmos-react-core';\n\nimport type { ArticleFeedbackProps } from './ArticleList.types';\n\nregisterIcon(thumbsUpSolidIcon, thumbsUpIcon, thumbsDownSolidIcon, thumbsDownIcon);\n\nexport const StyledAcknowledgementText = styled(Text)(({\n  theme: {\n    base: { spacing }\n  }\n}) => {\n  return css`\n    padding-block: calc(1.5 * ${spacing});\n  `;\n});\n\nStyledAcknowledgementText.defaultProps = defaultThemeProp;\n\nexport default forwardRef<RefElement<ArticleFeedbackProps>, PropsWithoutRef<ArticleFeedbackProps>>(\n  function ArticleFeedback(\n    {\n      question,\n      comment,\n      reaction,\n      onReaction,\n      onSubmit,\n      showThankYouMessage = false,\n      ...restProps\n    },\n    ref\n  ) {\n    const t = useI18n();\n    const acknowledgmentText = useRef<HTMLSpanElement>(null);\n    const feedbackCommentRef = useRef<HTMLTextAreaElement>(null);\n\n    useElementFocus(acknowledgmentText, { shouldFocus: showThankYouMessage });\n    useElementFocus(feedbackCommentRef, { shouldFocus: !!reaction });\n\n    return (\n      <Flex {...restProps} container={{ direction: 'column' }} ref={ref}>\n        {!showThankYouMessage ? (\n          <>\n            <Flex container={{ gap: 0.5, alignItems: 'center', pad: [0.5, undefined] }}>\n              <Text>{question}</Text>\n              <div role='group' aria-label={t('confirmation_options')}>\n                <Button\n                  aria-pressed={reaction === 'liked'}\n                  label={t('yes')}\n                  variant='simple'\n                  icon\n                  compact\n                  onClick={() => {\n                    onReaction(reaction === 'liked' ? undefined : 'liked');\n                  }}\n                >\n                  <Icon name={reaction === 'liked' ? 'thumbs-up-solid' : 'thumbs-up'} />\n                </Button>\n                <Button\n                  variant='simple'\n                  label={t('no')}\n                  icon\n                  compact\n                  aria-pressed={reaction === 'disliked'}\n                  onClick={() => {\n                    onReaction(reaction === 'disliked' ? undefined : 'disliked');\n                  }}\n                >\n                  <Icon name={reaction === 'disliked' ? 'thumbs-down-solid' : 'thumbs-down'} />\n                </Button>\n              </div>\n            </Flex>\n\n            {reaction && comment && onSubmit && (\n              <Flex container={{ direction: 'column', gap: 1, pad: [1, undefined] }}>\n                <TextArea\n                  {...comment}\n                  label={t('add_a_comment')}\n                  ref={feedbackCommentRef}\n                  autoResize={false}\n                  maxLength={200}\n                  hardStop\n                  onKeyDown={(e: KeyboardEvent<HTMLTextAreaElement>) => {\n                    if (e.key === 'Enter' && !e.shiftKey) {\n                      e.preventDefault();\n                      if (comment.value?.trim()) {\n                        onSubmit({ reaction, comment: comment.value ?? '' }, e);\n                      }\n                    }\n                  }}\n                />\n                <Flex container={{ gap: 1, justify: 'end' }}>\n                  <Button\n                    variant='primary'\n                    onClick={(e: MouseEvent<HTMLButtonElement>) => {\n                      onSubmit({ reaction, comment: comment.value ?? '' }, e);\n                    }}\n                  >\n                    {t('submit')}\n                  </Button>\n                </Flex>\n              </Flex>\n            )}\n          </>\n        ) : (\n          <StyledAcknowledgementText ref={acknowledgmentText} tabIndex={-1}>\n            {t('article_thank_you_for_your_feedback')}\n          </StyledAcknowledgementText>\n        )}\n      </Flex>\n    );\n  }\n);\n"]}
+{"version":3,"file":"ArticleFeedback.js","sourceRoot":"","sources":["../../../src/components/ArticleList/ArticleFeedback.tsx"],"names":[],"mappings":"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","sourcesContent":["import { forwardRef, useRef } from 'react';\nimport type { MouseEvent, KeyboardEvent, PropsWithoutRef } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport {\n  registerIcon,\n  Text,\n  Flex,\n  useI18n,\n  Button,\n  TextArea,\n  defaultThemeProp,\n  Icon,\n  useElementFocus\n} from '@pega/cosmos-react-core';\nimport * as thumbsUpSolidIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/thumbs-up-solid.icon';\nimport * as thumbsUpIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/thumbs-up.icon';\nimport * as thumbsDownSolidIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/thumbs-down-solid.icon';\nimport * as thumbsDownIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/thumbs-down.icon';\nimport type { RefElement } from '@pega/cosmos-react-core';\n\nimport type { ArticleFeedbackProps } from './ArticleList.types';\n\nregisterIcon(thumbsUpSolidIcon, thumbsUpIcon, thumbsDownSolidIcon, thumbsDownIcon);\n\nexport const StyledAcknowledgementText = styled(Text)(({\n  theme: {\n    base: { spacing }\n  }\n}) => {\n  return css`\n    padding-block: calc(1.5 * ${spacing});\n  `;\n});\n\nStyledAcknowledgementText.defaultProps = defaultThemeProp;\n\nexport default forwardRef<RefElement<ArticleFeedbackProps>, PropsWithoutRef<ArticleFeedbackProps>>(\n  function ArticleFeedback(\n    {\n      question,\n      comment,\n      reaction,\n      onReaction,\n      onSubmit,\n      showThankYouMessage = false,\n      ...restProps\n    },\n    ref\n  ) {\n    const t = useI18n();\n    const acknowledgmentText = useRef<HTMLSpanElement>(null);\n    const feedbackCommentRef = useRef<HTMLTextAreaElement>(null);\n\n    useElementFocus(acknowledgmentText, { shouldFocus: showThankYouMessage });\n    useElementFocus(feedbackCommentRef, { shouldFocus: !!reaction });\n\n    return (\n      <Flex {...restProps} container={{ direction: 'column' }} ref={ref}>\n        {!showThankYouMessage ? (\n          <>\n            <Flex container={{ gap: 0.5, alignItems: 'center', pad: [0.5, undefined] }}>\n              <Text>{question}</Text>\n              <div role='group' aria-label={t('confirmation_options')}>\n                <Button\n                  aria-pressed={reaction === 'liked'}\n                  label={t('yes')}\n                  variant='simple'\n                  icon\n                  compact\n                  onClick={() => {\n                    onReaction(reaction === 'liked' ? undefined : 'liked');\n                  }}\n                >\n                  <Icon\n                    name={reaction === 'liked' ? 'thumbs-up-solid' : 'thumbs-up'}\n                    emphasized={reaction === 'liked'}\n                  />\n                </Button>\n                <Button\n                  variant='simple'\n                  label={t('no')}\n                  icon\n                  compact\n                  aria-pressed={reaction === 'disliked'}\n                  onClick={() => {\n                    onReaction(reaction === 'disliked' ? undefined : 'disliked');\n                  }}\n                >\n                  <Icon\n                    name={reaction === 'disliked' ? 'thumbs-down-solid' : 'thumbs-down'}\n                    emphasized={reaction === 'disliked'}\n                  />\n                </Button>\n              </div>\n            </Flex>\n\n            {reaction && comment && onSubmit && (\n              <Flex container={{ direction: 'column', gap: 1, pad: [1, undefined] }}>\n                <TextArea\n                  {...comment}\n                  label={t('add_a_comment')}\n                  ref={feedbackCommentRef}\n                  autoResize={false}\n                  maxLength={200}\n                  hardStop\n                  onKeyDown={(e: KeyboardEvent<HTMLTextAreaElement>) => {\n                    if (e.key === 'Enter' && !e.shiftKey) {\n                      e.preventDefault();\n                      if (comment.value?.trim()) {\n                        onSubmit({ reaction, comment: comment.value ?? '' }, e);\n                      }\n                    }\n                  }}\n                />\n                <Flex container={{ gap: 1, justify: 'end' }}>\n                  <Button\n                    variant='primary'\n                    onClick={(e: MouseEvent<HTMLButtonElement>) => {\n                      onSubmit({ reaction, comment: comment.value ?? '' }, e);\n                    }}\n                  >\n                    {t('submit')}\n                  </Button>\n                </Flex>\n              </Flex>\n            )}\n          </>\n        ) : (\n          <StyledAcknowledgementText ref={acknowledgmentText} tabIndex={-1}>\n            {t('article_thank_you_for_your_feedback')}\n          </StyledAcknowledgementText>\n        )}\n      </Flex>\n    );\n  }\n);\n"]}

package/lib/components/CaseView/CaseHeader/CaseHeader.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"CaseHeader.d.ts","sourceRoot":"","sources":["../../../../src/components/CaseView/CaseHeader/CaseHeader.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,EAAE,EAAc,MAAM,OAAO,CAAC;AA8C5C,QAAA,MAAM,UAAU,EAAE,EAyZjB,CAAC;AAEF,eAAe,UAAU,CAAC"}
+{"version":3,"file":"CaseHeader.d.ts","sourceRoot":"","sources":["../../../../src/components/CaseView/CaseHeader/CaseHeader.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,EAAE,EAAc,MAAM,OAAO,CAAC;AA8C5C,QAAA,MAAM,UAAU,EAAE,EA0ZjB,CAAC;AAEF,eAAe,UAAU,CAAC"}

package/lib/components/CaseView/CaseHeader/CaseHeader.js

@@ -148,7 +148,7 @@ const CaseHeader = () => {
     const headingText = typeof heading === 'string' ? heading : heading.text;
     return (_jsxs(Flex, { "data-testid": testIds.header, as: StyledCaseHeader, container: { direction: 'column', gap: 1 }, children: [_jsxs(Flex, { container: true, ref: contentsEl, children: [showExpandCollapse && onToggleSummary && !persistentUtility && (_jsx(StyledExpandCollapseSummaryButton, { ref: toggleButtonRef, onClick: onToggleSummary, label: t(summaryExpanded ? 'collapse' : 'expand'), "aria-label": t(summaryExpanded ? 'collapse_summary' : 'expand_summary'), icon: true, compact: true, children: _jsx(Icon, { name: summaryExpanded ? `arrow-micro-${start}` : 'arrow-micro-down' }) })), showIcon && (_jsx(Flex, { container: { pad: [1, 0, 0] }, item: { shrink: 0 }, children: (() => {
                             if (typeof icon === 'string') {
-                                return (_jsx(StyledCaseViewIcon, { "data-testid": testIds.icon, "aria-label": t('case_type_icon', [caseType ?? t('case_type')]), name: icon, foreground: iconForeground, background: iconBackground }));
+                                return (_jsx(StyledCaseViewIcon, { "data-testid": testIds.icon, "aria-label": t('case_type_icon', [caseType ?? t('case_type')]), name: icon, foreground: iconForeground, background: iconBackground, emphasized: true }));
                             }
                             return (_jsx(StyledIconShape, { background: iconBackground, "data-testid": testIds.icon, children: _jsx(StyledCaseViewImage, { src: icon.href, alt: t('case_image'), onLoad: () => {
                                         setHasBrokenImage(false);

package/lib/components/CaseView/CaseHeader/CaseHeader.js.map

@@ -1 +1 @@
-{"version":3,"file":"CaseHeader.js","sourceRoot":"","sources":["../../../../src/components/CaseView/CaseHeader/CaseHeader.tsx"],"names":[],"mappings":"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","sourcesContent":["import { useEffect, useLayoutEffect, useMemo, useRef, useState } from 'react';\nimport type { FC, MouseEvent } from 'react';\nimport { parseToHsl } from 'polished';\n\nimport {\n  Breadcrumbs,\n  Flex,\n  getEdge,\n  Icon,\n  registerIcon,\n  Text,\n  Link,\n  Button,\n  throttle,\n  useDirection,\n  useI18n,\n  useAfterInitialEffect,\n  useTheme,\n  tryCatch,\n  Actions,\n  StyledIconShape,\n  useToaster,\n  readableColor,\n  InlineEdit,\n  MetaList\n} from '@pega/cosmos-react-core';\nimport type { Action } from '@pega/cosmos-react-core';\nimport * as pencilIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/pencil.icon';\nimport * as moreIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/more.icon';\n\nimport {\n  StyledCaseHeader,\n  StyledCaseHeaderText,\n  StyledExpandCollapseSummaryButton,\n  StyledSubheading,\n  StyledHeaderActions,\n  StyledCaseHeaderPromotedAction,\n  StyledCaseViewImage,\n  StyledCaseViewIcon,\n  resolveCaseTypeColor\n} from '../CaseView.styles';\nimport { useCaseViewContext } from '../CaseView.context';\n\nimport Summary from './Summary';\n\nregisterIcon(pencilIcon, moreIcon);\n\nconst CaseHeader: FC = () => {\n  const t = useI18n();\n  const { ltr, start } = useDirection();\n  const theme = useTheme();\n\n  const {\n    testIds,\n    caseId,\n    icon,\n    color,\n    heading,\n    subheading,\n    caseType,\n    actions,\n    caseLink,\n    parentCases,\n    onEdit,\n    followed,\n    onFollowedChange,\n    promotedActions,\n    summaryExpanded,\n    onToggleSummary,\n    isPreview,\n    aboveSM,\n    aboveMD,\n    persistentUtility,\n    collaboration\n  } = useCaseViewContext();\n  const { push } = useToaster();\n\n  const [wrapPromotedActions, setWrapPromotedActions] = useState(false);\n  const [summaryResetID, setSummaryResetID] = useState<number | undefined>(Math.random());\n\n  const wrapActionsBreakpoint = useRef<number | null>(null);\n\n  const hasPromotedActions = (promotedActions?.length ?? 0) > 0;\n\n  let iconForeground =\n    theme.components['case-view'].icon.color !== 'auto'\n      ? theme.components['case-view'].icon.color\n      : theme.components['case-view'].header['foreground-color'];\n\n  const iconBackground = useMemo(() => {\n    if (theme.components['case-view'].icon.background !== 'auto') {\n      return theme.components['case-view'].icon.background;\n    }\n    return tryCatch(\n      () => {\n        const { lightness } = parseToHsl(theme.components['case-view'].header['background-color']);\n        return lightness > 0.35 ? 'rgba(0, 0, 0, 0.2)' : 'rgba(255, 255, 255, 0.2)';\n      },\n      () => 'transparent'\n    );\n  }, [theme]);\n\n  // Fall back to readable color if theme icon color and header foreground color are both 'auto'\n  if (iconForeground === 'auto') {\n    const caseTypeIconColor =\n      color && theme.base['case-type-colors'] !== 'ignored'\n        ? resolveCaseTypeColor(theme, color)\n        : iconBackground;\n    iconForeground = readableColor(caseTypeIconColor ?? iconBackground, {\n      mode: 'light',\n      level: 'AANonText'\n    });\n  }\n\n  const [hasBrokenImage, setHasBrokenImage] = useState<undefined | boolean>();\n  const showIcon = !!icon && !hasBrokenImage;\n\n  const contentsEl = useRef<HTMLDivElement>(null);\n  const headerGroupEl = useRef<HTMLElement>(null);\n  const actionsContainerEl = useRef<HTMLDivElement>(null);\n  const toggleButtonRef = useRef<HTMLButtonElement>(null);\n\n  let actionsItems: Action[];\n  let actionsLoading: boolean;\n\n  if (Array.isArray(actions)) {\n    actionsItems = actions;\n    actionsLoading = false;\n  } else if (actions) {\n    actionsItems = actions.items ?? [];\n    actionsLoading = !!actions.progress;\n  } else {\n    actionsItems = [];\n    actionsLoading = false;\n  }\n\n  const caseActions: Action[] = actionsLoading\n    ? []\n    : [\n        ...(onFollowedChange\n          ? [\n              {\n                id: 'follow',\n                text: followed ? t('unfollow') : t('follow'),\n                onClick: () => {\n                  onFollowedChange(!followed);\n                  push({\n                    content: followed\n                      ? t('case_unfollowed', [caseId])\n                      : t('case_followed', [caseId])\n                  });\n                }\n              }\n            ]\n          : []),\n        ...actionsItems.map(action => ({\n          ...action,\n          text: action.text,\n          visual: action.icon ? <Icon name={action.icon} /> : null\n        }))\n      ];\n\n  const showExpandCollapse = !isPreview && aboveMD;\n  const collapsedMainHeader =\n    (!isPreview && !aboveMD && aboveSM) || (showExpandCollapse && !summaryExpanded);\n\n  // FIXME: This is a hack to get the Tooltip to reset its position when the summary changes layout.\n  useAfterInitialEffect(() => {\n    if (toggleButtonRef.current && toggleButtonRef.current === document.activeElement) {\n      toggleButtonRef.current.blur();\n      setTimeout(() => {\n        toggleButtonRef.current?.focus();\n      }, 0);\n    }\n  }, [summaryExpanded]);\n\n  // Actions wrapping\n  useLayoutEffect(() => {\n    if (\n      !wrapPromotedActions &&\n      contentsEl.current &&\n      headerGroupEl.current &&\n      actionsContainerEl.current\n    ) {\n      const contentStart = getEdge({\n        el: contentsEl.current,\n        side: 'leading',\n        ltr\n      });\n      const headerGroupEnd = getEdge({\n        el: headerGroupEl.current,\n        side: 'trailing',\n        ltr\n      });\n      const actionsContainerWidth = actionsContainerEl.current.getBoundingClientRect().width;\n\n      wrapActionsBreakpoint.current =\n        Math.ceil(headerGroupEnd) - Math.ceil(contentStart) + Math.ceil(actionsContainerWidth);\n    }\n\n    const promotedActionsWrapHandler = () => {\n      if (wrapActionsBreakpoint.current && contentsEl.current) {\n        setWrapPromotedActions(\n          Math.ceil(contentsEl.current.offsetWidth) < wrapActionsBreakpoint.current\n        );\n      }\n    };\n\n    const resizeObserver = new ResizeObserver(throttle(promotedActionsWrapHandler, 30));\n\n    promotedActionsWrapHandler();\n\n    if (contentsEl.current) {\n      resizeObserver.observe(contentsEl.current, { box: 'border-box' });\n    }\n\n    return () => {\n      resizeObserver.disconnect();\n    };\n  }, [\n    contentsEl,\n    headerGroupEl,\n    actionsContainerEl,\n    promotedActions,\n    heading,\n    subheading,\n    wrapPromotedActions\n  ]);\n\n  // Reset summary\n  useEffect(() => {\n    setSummaryResetID(Math.random());\n  }, [heading, promotedActions]);\n\n  useEffect(() => {\n    setHasBrokenImage(undefined);\n  }, [typeof icon === 'string' ? icon : icon?.href]);\n\n  const headingText = typeof heading === 'string' ? heading : heading.text;\n\n  return (\n    <Flex\n      data-testid={testIds.header}\n      as={StyledCaseHeader}\n      container={{ direction: 'column', gap: 1 }}\n    >\n      <Flex container ref={contentsEl}>\n        {showExpandCollapse && onToggleSummary && !persistentUtility && (\n          <StyledExpandCollapseSummaryButton\n            ref={toggleButtonRef}\n            onClick={onToggleSummary}\n            label={t(summaryExpanded ? 'collapse' : 'expand')}\n            aria-label={t(summaryExpanded ? 'collapse_summary' : 'expand_summary')}\n            icon\n            compact\n          >\n            <Icon name={summaryExpanded ? `arrow-micro-${start}` : 'arrow-micro-down'} />\n          </StyledExpandCollapseSummaryButton>\n        )}\n\n        {showIcon && (\n          <Flex container={{ pad: [1, 0, 0] }} item={{ shrink: 0 }}>\n            {(() => {\n              if (typeof icon === 'string') {\n                return (\n                  <StyledCaseViewIcon\n                    data-testid={testIds.icon}\n                    aria-label={t('case_type_icon', [caseType ?? t('case_type')])}\n                    name={icon}\n                    foreground={iconForeground}\n                    background={iconBackground}\n                  />\n                );\n              }\n\n              return (\n                <StyledIconShape background={iconBackground} data-testid={testIds.icon}>\n                  <StyledCaseViewImage\n                    src={icon.href}\n                    alt={t('case_image')}\n                    onLoad={() => {\n                      setHasBrokenImage(false);\n                    }}\n                    onError={() => {\n                      setHasBrokenImage(true);\n                    }}\n                  />\n                </StyledIconShape>\n              );\n            })()}\n          </Flex>\n        )}\n\n        {/* header group */}\n        <Flex\n          as={StyledCaseHeaderText}\n          container={{\n            direction: 'column',\n            pad: [0.5, 2, 0.5, showIcon ? 1 : undefined],\n            alignItems: 'start',\n            justify: 'center'\n          }}\n          item={\n            aboveSM\n              ? { shrink: wrapPromotedActions || !hasPromotedActions ? 1 : 0 }\n              : { shrink: 1, grow: 1 }\n          }\n          ref={headerGroupEl}\n        >\n          {(() => {\n            const headingContent = caseLink ? (\n              <Link {...caseLink}>{headingText}</Link>\n            ) : (\n              headingText\n            );\n\n            const h1 = (\n              <Text data-testid={testIds.heading} variant='h1'>\n                {headingContent}\n              </Text>\n            );\n\n            if (typeof heading === 'string') return h1;\n\n            return (\n              <InlineEdit contextualLabel={headingText} {...heading.inlineEdit}>\n                {h1}\n              </InlineEdit>\n            );\n          })()}\n\n          {subheading &&\n            (!parentCases || subheading !== caseId) &&\n            (() => {\n              if (typeof subheading === 'string') {\n                return (\n                  <StyledSubheading data-testid={testIds.subheading}>{subheading}</StyledSubheading>\n                );\n              }\n\n              if (Array.isArray(subheading)) {\n                return (\n                  <StyledSubheading data-testid={testIds.subheading}>\n                    <MetaList items={subheading} />\n                  </StyledSubheading>\n                );\n              }\n\n              return (\n                <InlineEdit contextualLabel={subheading.text} {...subheading.inlineEdit}>\n                  <StyledSubheading data-testid={testIds.subheading}>\n                    {subheading.text}\n                  </StyledSubheading>\n                </InlineEdit>\n              );\n            })()}\n\n          {parentCases && (\n            <Breadcrumbs\n              forwardedAs='p'\n              path={[\n                ...parentCases,\n                {\n                  ...caseLink,\n                  id: caseId,\n                  primary: caseId,\n                  href: caseLink?.href\n                }\n              ]}\n              leafOnly\n            />\n          )}\n        </Flex>\n        {/* summary */}\n        {collapsedMainHeader && !wrapPromotedActions && (\n          <Summary siblingRef={actionsContainerEl} key={summaryResetID} />\n        )}\n        {/* inline actions */}\n        <Flex\n          as={StyledHeaderActions}\n          item={{ shrink: 0 }}\n          container={{ alignItems: 'start', pad: [0, 0, 0, 2] }}\n          offsetEnd={!summaryExpanded}\n          ref={actionsContainerEl}\n        >\n          {collapsedMainHeader &&\n          !wrapPromotedActions &&\n          promotedActions &&\n          promotedActions.length > 0 ? (\n            <>\n              {promotedActions.map(promotedAction => (\n                <StyledCaseHeaderPromotedAction\n                  variant='secondary'\n                  onClick={(e: MouseEvent<HTMLButtonElement>) =>\n                    promotedAction.onClick?.(promotedAction.id, e)\n                  }\n                  key={promotedAction.id}\n                >\n                  {promotedAction.text}\n                </StyledCaseHeaderPromotedAction>\n              ))}\n            </>\n          ) : null}\n\n          {onEdit && (\n            <Button\n              data-testid={testIds.edit}\n              icon\n              variant='simple'\n              onClick={onEdit}\n              label={t('edit')}\n              aria-label={`${t('edit')} - ${headingText}`}\n            >\n              <Icon name='pencil' />\n            </Button>\n          )}\n\n          {(actionsLoading || caseActions.length > 0) && (\n            <Actions\n              contextualLabel={typeof heading === 'string' ? heading : heading.text}\n              data-testid={testIds.actions}\n              iconOnly\n              progress={actionsLoading}\n              items={caseActions}\n              menuAt={actionsLoading ? 0 : 1}\n              filterAt={5}\n              scrollAt={Infinity}\n            />\n          )}\n        </Flex>\n      </Flex>\n\n      {/* wrapped promoted actions */}\n      {(!collapsedMainHeader || wrapPromotedActions || !aboveSM) &&\n      promotedActions &&\n      promotedActions.length > 0 ? (\n        <Flex\n          data-testid={testIds.promotedActions}\n          container={{ justify: 'start', wrap: 'wrap', gap: 1, pad: [0, 0, 0.5] }}\n        >\n          {promotedActions.map(({ id, text, onClick }) => (\n            <div key={text}>\n              <StyledCaseHeaderPromotedAction\n                variant='secondary'\n                onClick={(e: MouseEvent<HTMLButtonElement>) => onClick?.(id, e)}\n              >\n                {text}\n              </StyledCaseHeaderPromotedAction>\n            </div>\n          ))}\n        </Flex>\n      ) : null}\n\n      {collaboration}\n    </Flex>\n  );\n};\n\nexport default CaseHeader;\n"]}
+{"version":3,"file":"CaseHeader.js","sourceRoot":"","sources":["../../../../src/components/CaseView/CaseHeader/CaseHeader.tsx"],"names":[],"mappings":"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","sourcesContent":["import { useEffect, useLayoutEffect, useMemo, useRef, useState } from 'react';\nimport type { FC, MouseEvent } from 'react';\nimport { parseToHsl } from 'polished';\n\nimport {\n  Breadcrumbs,\n  Flex,\n  getEdge,\n  Icon,\n  registerIcon,\n  Text,\n  Link,\n  Button,\n  throttle,\n  useDirection,\n  useI18n,\n  useAfterInitialEffect,\n  useTheme,\n  tryCatch,\n  Actions,\n  StyledIconShape,\n  useToaster,\n  readableColor,\n  InlineEdit,\n  MetaList\n} from '@pega/cosmos-react-core';\nimport type { Action } from '@pega/cosmos-react-core';\nimport * as pencilIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/pencil.icon';\nimport * as moreIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/more.icon';\n\nimport {\n  StyledCaseHeader,\n  StyledCaseHeaderText,\n  StyledExpandCollapseSummaryButton,\n  StyledSubheading,\n  StyledHeaderActions,\n  StyledCaseHeaderPromotedAction,\n  StyledCaseViewImage,\n  StyledCaseViewIcon,\n  resolveCaseTypeColor\n} from '../CaseView.styles';\nimport { useCaseViewContext } from '../CaseView.context';\n\nimport Summary from './Summary';\n\nregisterIcon(pencilIcon, moreIcon);\n\nconst CaseHeader: FC = () => {\n  const t = useI18n();\n  const { ltr, start } = useDirection();\n  const theme = useTheme();\n\n  const {\n    testIds,\n    caseId,\n    icon,\n    color,\n    heading,\n    subheading,\n    caseType,\n    actions,\n    caseLink,\n    parentCases,\n    onEdit,\n    followed,\n    onFollowedChange,\n    promotedActions,\n    summaryExpanded,\n    onToggleSummary,\n    isPreview,\n    aboveSM,\n    aboveMD,\n    persistentUtility,\n    collaboration\n  } = useCaseViewContext();\n  const { push } = useToaster();\n\n  const [wrapPromotedActions, setWrapPromotedActions] = useState(false);\n  const [summaryResetID, setSummaryResetID] = useState<number | undefined>(Math.random());\n\n  const wrapActionsBreakpoint = useRef<number | null>(null);\n\n  const hasPromotedActions = (promotedActions?.length ?? 0) > 0;\n\n  let iconForeground =\n    theme.components['case-view'].icon.color !== 'auto'\n      ? theme.components['case-view'].icon.color\n      : theme.components['case-view'].header['foreground-color'];\n\n  const iconBackground = useMemo(() => {\n    if (theme.components['case-view'].icon.background !== 'auto') {\n      return theme.components['case-view'].icon.background;\n    }\n    return tryCatch(\n      () => {\n        const { lightness } = parseToHsl(theme.components['case-view'].header['background-color']);\n        return lightness > 0.35 ? 'rgba(0, 0, 0, 0.2)' : 'rgba(255, 255, 255, 0.2)';\n      },\n      () => 'transparent'\n    );\n  }, [theme]);\n\n  // Fall back to readable color if theme icon color and header foreground color are both 'auto'\n  if (iconForeground === 'auto') {\n    const caseTypeIconColor =\n      color && theme.base['case-type-colors'] !== 'ignored'\n        ? resolveCaseTypeColor(theme, color)\n        : iconBackground;\n    iconForeground = readableColor(caseTypeIconColor ?? iconBackground, {\n      mode: 'light',\n      level: 'AANonText'\n    });\n  }\n\n  const [hasBrokenImage, setHasBrokenImage] = useState<undefined | boolean>();\n  const showIcon = !!icon && !hasBrokenImage;\n\n  const contentsEl = useRef<HTMLDivElement>(null);\n  const headerGroupEl = useRef<HTMLElement>(null);\n  const actionsContainerEl = useRef<HTMLDivElement>(null);\n  const toggleButtonRef = useRef<HTMLButtonElement>(null);\n\n  let actionsItems: Action[];\n  let actionsLoading: boolean;\n\n  if (Array.isArray(actions)) {\n    actionsItems = actions;\n    actionsLoading = false;\n  } else if (actions) {\n    actionsItems = actions.items ?? [];\n    actionsLoading = !!actions.progress;\n  } else {\n    actionsItems = [];\n    actionsLoading = false;\n  }\n\n  const caseActions: Action[] = actionsLoading\n    ? []\n    : [\n        ...(onFollowedChange\n          ? [\n              {\n                id: 'follow',\n                text: followed ? t('unfollow') : t('follow'),\n                onClick: () => {\n                  onFollowedChange(!followed);\n                  push({\n                    content: followed\n                      ? t('case_unfollowed', [caseId])\n                      : t('case_followed', [caseId])\n                  });\n                }\n              }\n            ]\n          : []),\n        ...actionsItems.map(action => ({\n          ...action,\n          text: action.text,\n          visual: action.icon ? <Icon name={action.icon} /> : null\n        }))\n      ];\n\n  const showExpandCollapse = !isPreview && aboveMD;\n  const collapsedMainHeader =\n    (!isPreview && !aboveMD && aboveSM) || (showExpandCollapse && !summaryExpanded);\n\n  // FIXME: This is a hack to get the Tooltip to reset its position when the summary changes layout.\n  useAfterInitialEffect(() => {\n    if (toggleButtonRef.current && toggleButtonRef.current === document.activeElement) {\n      toggleButtonRef.current.blur();\n      setTimeout(() => {\n        toggleButtonRef.current?.focus();\n      }, 0);\n    }\n  }, [summaryExpanded]);\n\n  // Actions wrapping\n  useLayoutEffect(() => {\n    if (\n      !wrapPromotedActions &&\n      contentsEl.current &&\n      headerGroupEl.current &&\n      actionsContainerEl.current\n    ) {\n      const contentStart = getEdge({\n        el: contentsEl.current,\n        side: 'leading',\n        ltr\n      });\n      const headerGroupEnd = getEdge({\n        el: headerGroupEl.current,\n        side: 'trailing',\n        ltr\n      });\n      const actionsContainerWidth = actionsContainerEl.current.getBoundingClientRect().width;\n\n      wrapActionsBreakpoint.current =\n        Math.ceil(headerGroupEnd) - Math.ceil(contentStart) + Math.ceil(actionsContainerWidth);\n    }\n\n    const promotedActionsWrapHandler = () => {\n      if (wrapActionsBreakpoint.current && contentsEl.current) {\n        setWrapPromotedActions(\n          Math.ceil(contentsEl.current.offsetWidth) < wrapActionsBreakpoint.current\n        );\n      }\n    };\n\n    const resizeObserver = new ResizeObserver(throttle(promotedActionsWrapHandler, 30));\n\n    promotedActionsWrapHandler();\n\n    if (contentsEl.current) {\n      resizeObserver.observe(contentsEl.current, { box: 'border-box' });\n    }\n\n    return () => {\n      resizeObserver.disconnect();\n    };\n  }, [\n    contentsEl,\n    headerGroupEl,\n    actionsContainerEl,\n    promotedActions,\n    heading,\n    subheading,\n    wrapPromotedActions\n  ]);\n\n  // Reset summary\n  useEffect(() => {\n    setSummaryResetID(Math.random());\n  }, [heading, promotedActions]);\n\n  useEffect(() => {\n    setHasBrokenImage(undefined);\n  }, [typeof icon === 'string' ? icon : icon?.href]);\n\n  const headingText = typeof heading === 'string' ? heading : heading.text;\n\n  return (\n    <Flex\n      data-testid={testIds.header}\n      as={StyledCaseHeader}\n      container={{ direction: 'column', gap: 1 }}\n    >\n      <Flex container ref={contentsEl}>\n        {showExpandCollapse && onToggleSummary && !persistentUtility && (\n          <StyledExpandCollapseSummaryButton\n            ref={toggleButtonRef}\n            onClick={onToggleSummary}\n            label={t(summaryExpanded ? 'collapse' : 'expand')}\n            aria-label={t(summaryExpanded ? 'collapse_summary' : 'expand_summary')}\n            icon\n            compact\n          >\n            <Icon name={summaryExpanded ? `arrow-micro-${start}` : 'arrow-micro-down'} />\n          </StyledExpandCollapseSummaryButton>\n        )}\n\n        {showIcon && (\n          <Flex container={{ pad: [1, 0, 0] }} item={{ shrink: 0 }}>\n            {(() => {\n              if (typeof icon === 'string') {\n                return (\n                  <StyledCaseViewIcon\n                    data-testid={testIds.icon}\n                    aria-label={t('case_type_icon', [caseType ?? t('case_type')])}\n                    name={icon}\n                    foreground={iconForeground}\n                    background={iconBackground}\n                    emphasized\n                  />\n                );\n              }\n\n              return (\n                <StyledIconShape background={iconBackground} data-testid={testIds.icon}>\n                  <StyledCaseViewImage\n                    src={icon.href}\n                    alt={t('case_image')}\n                    onLoad={() => {\n                      setHasBrokenImage(false);\n                    }}\n                    onError={() => {\n                      setHasBrokenImage(true);\n                    }}\n                  />\n                </StyledIconShape>\n              );\n            })()}\n          </Flex>\n        )}\n\n        {/* header group */}\n        <Flex\n          as={StyledCaseHeaderText}\n          container={{\n            direction: 'column',\n            pad: [0.5, 2, 0.5, showIcon ? 1 : undefined],\n            alignItems: 'start',\n            justify: 'center'\n          }}\n          item={\n            aboveSM\n              ? { shrink: wrapPromotedActions || !hasPromotedActions ? 1 : 0 }\n              : { shrink: 1, grow: 1 }\n          }\n          ref={headerGroupEl}\n        >\n          {(() => {\n            const headingContent = caseLink ? (\n              <Link {...caseLink}>{headingText}</Link>\n            ) : (\n              headingText\n            );\n\n            const h1 = (\n              <Text data-testid={testIds.heading} variant='h1'>\n                {headingContent}\n              </Text>\n            );\n\n            if (typeof heading === 'string') return h1;\n\n            return (\n              <InlineEdit contextualLabel={headingText} {...heading.inlineEdit}>\n                {h1}\n              </InlineEdit>\n            );\n          })()}\n\n          {subheading &&\n            (!parentCases || subheading !== caseId) &&\n            (() => {\n              if (typeof subheading === 'string') {\n                return (\n                  <StyledSubheading data-testid={testIds.subheading}>{subheading}</StyledSubheading>\n                );\n              }\n\n              if (Array.isArray(subheading)) {\n                return (\n                  <StyledSubheading data-testid={testIds.subheading}>\n                    <MetaList items={subheading} />\n                  </StyledSubheading>\n                );\n              }\n\n              return (\n                <InlineEdit contextualLabel={subheading.text} {...subheading.inlineEdit}>\n                  <StyledSubheading data-testid={testIds.subheading}>\n                    {subheading.text}\n                  </StyledSubheading>\n                </InlineEdit>\n              );\n            })()}\n\n          {parentCases && (\n            <Breadcrumbs\n              forwardedAs='p'\n              path={[\n                ...parentCases,\n                {\n                  ...caseLink,\n                  id: caseId,\n                  primary: caseId,\n                  href: caseLink?.href\n                }\n              ]}\n              leafOnly\n            />\n          )}\n        </Flex>\n        {/* summary */}\n        {collapsedMainHeader && !wrapPromotedActions && (\n          <Summary siblingRef={actionsContainerEl} key={summaryResetID} />\n        )}\n        {/* inline actions */}\n        <Flex\n          as={StyledHeaderActions}\n          item={{ shrink: 0 }}\n          container={{ alignItems: 'start', pad: [0, 0, 0, 2] }}\n          offsetEnd={!summaryExpanded}\n          ref={actionsContainerEl}\n        >\n          {collapsedMainHeader &&\n          !wrapPromotedActions &&\n          promotedActions &&\n          promotedActions.length > 0 ? (\n            <>\n              {promotedActions.map(promotedAction => (\n                <StyledCaseHeaderPromotedAction\n                  variant='secondary'\n                  onClick={(e: MouseEvent<HTMLButtonElement>) =>\n                    promotedAction.onClick?.(promotedAction.id, e)\n                  }\n                  key={promotedAction.id}\n                >\n                  {promotedAction.text}\n                </StyledCaseHeaderPromotedAction>\n              ))}\n            </>\n          ) : null}\n\n          {onEdit && (\n            <Button\n              data-testid={testIds.edit}\n              icon\n              variant='simple'\n              onClick={onEdit}\n              label={t('edit')}\n              aria-label={`${t('edit')} - ${headingText}`}\n            >\n              <Icon name='pencil' />\n            </Button>\n          )}\n\n          {(actionsLoading || caseActions.length > 0) && (\n            <Actions\n              contextualLabel={typeof heading === 'string' ? heading : heading.text}\n              data-testid={testIds.actions}\n              iconOnly\n              progress={actionsLoading}\n              items={caseActions}\n              menuAt={actionsLoading ? 0 : 1}\n              filterAt={5}\n              scrollAt={Infinity}\n            />\n          )}\n        </Flex>\n      </Flex>\n\n      {/* wrapped promoted actions */}\n      {(!collapsedMainHeader || wrapPromotedActions || !aboveSM) &&\n      promotedActions &&\n      promotedActions.length > 0 ? (\n        <Flex\n          data-testid={testIds.promotedActions}\n          container={{ justify: 'start', wrap: 'wrap', gap: 1, pad: [0, 0, 0.5] }}\n        >\n          {promotedActions.map(({ id, text, onClick }) => (\n            <div key={text}>\n              <StyledCaseHeaderPromotedAction\n                variant='secondary'\n                onClick={(e: MouseEvent<HTMLButtonElement>) => onClick?.(id, e)}\n              >\n                {text}\n              </StyledCaseHeaderPromotedAction>\n            </div>\n          ))}\n        </Flex>\n      ) : null}\n\n      {collaboration}\n    </Flex>\n  );\n};\n\nexport default CaseHeader;\n"]}

package/lib/components/GenAICoach/GenAIMessageFeedback.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"GenAIMessageFeedback.d.ts","sourceRoot":"","sources":["../../../src/components/GenAICoach/GenAIMessageFeedback.tsx"],"names":[],"mappings":"AAmBA,OAAO,KAAK,EAAE,oBAAoB,EAAY,MAAM,oBAAoB,CAAC;AAIzE,QAAA,MAAM,2BAA2B,GAAI,yBAAyB,oBAAoB,4CAmLjF,CAAC;AAEF,eAAe,2BAA2B,CAAC"}
+{"version":3,"file":"GenAIMessageFeedback.d.ts","sourceRoot":"","sources":["../../../src/components/GenAICoach/GenAIMessageFeedback.tsx"],"names":[],"mappings":"AAmBA,OAAO,KAAK,EAAE,oBAAoB,EAAY,MAAM,oBAAoB,CAAC;AAIzE,QAAA,MAAM,2BAA2B,GAAI,yBAAyB,oBAAoB,4CAsLjF,CAAC;AAEF,eAAe,2BAA2B,CAAC"}

package/lib/components/GenAICoach/GenAIMessageFeedback.js

@@ -87,9 +87,9 @@ const GenAIMessageFeedbackButtons = ({ messageId, feedback }) => {
             }, autoResize: false }) }));
     const shouldShowIcon = !allowFeedbackResubmission && reaction;
     if (shouldShowIcon) {
-        return (_jsxs(Flex, { container: { pad: [0.5, undefined] }, ref: seticonEl, tabIndex: -1, "aria-label": t('selected_noun', [isLikeActive ? t('good_response') : t('bad_response')]), role: 'status', children: [_jsx(Icon, { name: isLikeActive ? 'thumbs-up-solid' : 'thumbs-down-solid' }), _jsx(Tooltip, { target: iconEl, describeTarget: false, children: isLikeActive ? t('good_response') : t('bad_response') }), feedbackDialog] }));
+        return (_jsxs(Flex, { container: { pad: [0.5, undefined] }, ref: seticonEl, tabIndex: -1, "aria-label": t('selected_noun', [isLikeActive ? t('good_response') : t('bad_response')]), role: 'status', children: [_jsx(Icon, { name: isLikeActive ? 'thumbs-up-solid' : 'thumbs-down-solid', emphasized: true }), _jsx(Tooltip, { target: iconEl, describeTarget: false, children: isLikeActive ? t('good_response') : t('bad_response') }), feedbackDialog] }));
     }
-    return (_jsxs(_Fragment, { children: [_jsxs(Flex, { container: { gap: 1 }, children: [_jsx(Button, { label: t('good_response'), variant: 'simple', icon: true, compact: true, ref: likeButtonRef, onClick: () => handleReactionClick('liked'), "aria-pressed": isLikeActive, children: _jsx(Icon, { name: isLikeActive ? 'thumbs-up-solid' : 'thumbs-up' }) }), _jsx(Button, { label: t('bad_response'), variant: 'simple', icon: true, compact: true, ref: dislikeButtonRef, onClick: () => handleReactionClick('disliked'), "aria-pressed": isDislikeActive, children: _jsx(Icon, { name: isDislikeActive ? 'thumbs-down-solid' : 'thumbs-down' }) })] }), feedbackDialog] }));
+    return (_jsxs(_Fragment, { children: [_jsxs(Flex, { container: { gap: 1 }, children: [_jsx(Button, { label: t('good_response'), variant: 'simple', icon: true, compact: true, ref: likeButtonRef, onClick: () => handleReactionClick('liked'), "aria-pressed": isLikeActive, children: _jsx(Icon, { name: isLikeActive ? 'thumbs-up-solid' : 'thumbs-up', emphasized: isLikeActive }) }), _jsx(Button, { label: t('bad_response'), variant: 'simple', icon: true, compact: true, ref: dislikeButtonRef, onClick: () => handleReactionClick('disliked'), "aria-pressed": isDislikeActive, children: _jsx(Icon, { name: isDislikeActive ? 'thumbs-down-solid' : 'thumbs-down', emphasized: isDislikeActive }) })] }), feedbackDialog] }));
 };
 export default GenAIMessageFeedbackButtons;
 //# sourceMappingURL=GenAIMessageFeedback.js.map

package/lib/components/GenAICoach/GenAIMessageFeedback.js.map

@@ -1 +1 @@
-{"version":3,"file":"GenAIMessageFeedback.js","sourceRoot":"","sources":["../../../src/components/GenAICoach/GenAIMessageFeedback.tsx"],"names":[],"mappings":"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","sourcesContent":["import { useCallback, useEffect, useRef, useState } from 'react';\nimport type { KeyboardEvent } from 'react';\n\nimport {\n  Button,\n  Flex,\n  FormDialog,\n  Icon,\n  TextArea,\n  Tooltip,\n  registerIcon,\n  useElement,\n  useI18n\n} from '@pega/cosmos-react-core';\nimport * as thumbsUpSolidIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/thumbs-up-solid.icon';\nimport * as thumbsUpIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/thumbs-up.icon';\nimport * as thumbsDownSolidIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/thumbs-down-solid.icon';\nimport * as thumbsDownIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/thumbs-down.icon';\n\nimport type { MessageFeedbackProps, Reaction } from './GenAICoach.types';\n\nregisterIcon(thumbsUpSolidIcon, thumbsUpIcon, thumbsDownSolidIcon, thumbsDownIcon);\n\nconst GenAIMessageFeedbackButtons = ({ messageId, feedback }: MessageFeedbackProps) => {\n  const {\n    reaction,\n    feedbackText = '',\n    allowFeedbackResubmission = false,\n    promptFeedbackOn = 'disliked',\n    onReaction,\n    onFeedbackComplete\n  } = feedback ?? {};\n\n  const t = useI18n();\n\n  const [feedbackVal, setFeedbackVal] = useState(feedbackText);\n  const [showDialog, setShowDialog] = useState(false);\n\n  const likeButtonRef = useRef<HTMLButtonElement>(null);\n  const dislikeButtonRef = useRef<HTMLButtonElement>(null);\n  const shouldOpenDialogRef = useRef(false);\n  const [iconEl, seticonEl] = useElement<HTMLDivElement>();\n\n  const isLikeActive = reaction === 'liked';\n  const isDislikeActive = reaction === 'disliked';\n\n  const needsDialog = (reactionType: Reaction) => {\n    switch (promptFeedbackOn) {\n      case 'disliked':\n        return reactionType === 'disliked';\n      case 'liked':\n        return reactionType === 'liked';\n      case 'both':\n        return true;\n      default:\n        return false;\n    }\n  };\n\n  const handleReactionClick = useCallback(\n    (reactionType: Reaction) => {\n      if (reaction === reactionType) {\n        if (allowFeedbackResubmission) {\n          onReaction?.(messageId, undefined);\n        }\n\n        return;\n      }\n\n      onReaction?.(messageId, reactionType);\n\n      if (needsDialog(reactionType)) {\n        if (reaction !== reactionType) {\n          setFeedbackVal('');\n        } else {\n          setFeedbackVal(feedbackText);\n        }\n\n        if (!allowFeedbackResubmission) {\n          shouldOpenDialogRef.current = true;\n        } else {\n          setShowDialog(true);\n        }\n      }\n    },\n    [reaction, feedbackText, allowFeedbackResubmission, promptFeedbackOn, messageId, onReaction]\n  );\n\n  const closeDialog = useCallback(\n    (comment?: string) => {\n      setShowDialog(false);\n      shouldOpenDialogRef.current = false;\n\n      onFeedbackComplete?.(messageId, comment);\n\n      if (!allowFeedbackResubmission && iconEl) {\n        iconEl.focus();\n      }\n    },\n    [allowFeedbackResubmission, onFeedbackComplete, messageId, iconEl]\n  );\n\n  const getDialogTarget = () => {\n    if (!allowFeedbackResubmission && iconEl) {\n      return iconEl;\n    }\n\n    return isLikeActive ? likeButtonRef.current : dislikeButtonRef.current;\n  };\n\n  useEffect(() => {\n    if (iconEl && shouldOpenDialogRef.current && !allowFeedbackResubmission) {\n      setShowDialog(true);\n      shouldOpenDialogRef.current = false;\n    }\n  }, [iconEl, allowFeedbackResubmission]);\n\n  useEffect(() => {\n    if (!showDialog && reaction && allowFeedbackResubmission) {\n      const reactionButton =\n        reaction === 'liked' ? likeButtonRef.current : dislikeButtonRef.current;\n      reactionButton?.focus();\n    }\n  }, [showDialog, reaction, allowFeedbackResubmission]);\n\n  const dialogTarget = getDialogTarget();\n\n  const feedbackDialog = showDialog && dialogTarget && (\n    <FormDialog\n      target={dialogTarget}\n      heading={t('share_feedback')}\n      onCancel={() => closeDialog()}\n      onSubmit={() => closeDialog(feedbackVal)}\n      onKeyDown={e => e.stopPropagation()}\n    >\n      <TextArea\n        value={feedbackVal}\n        onChange={e => setFeedbackVal(e.target.value)}\n        onKeyDown={(e: KeyboardEvent<HTMLTextAreaElement>) => {\n          if (e.key === 'Enter' && !e.shiftKey) {\n            e.preventDefault();\n            closeDialog(feedbackVal);\n          }\n        }}\n        autoResize={false}\n      />\n    </FormDialog>\n  );\n\n  const shouldShowIcon = !allowFeedbackResubmission && reaction;\n\n  if (shouldShowIcon) {\n    return (\n      <Flex\n        container={{ pad: [0.5, undefined] }}\n        ref={seticonEl}\n        tabIndex={-1}\n        aria-label={t('selected_noun', [isLikeActive ? t('good_response') : t('bad_response')])}\n        role='status'\n      >\n        <Icon name={isLikeActive ? 'thumbs-up-solid' : 'thumbs-down-solid'} />\n\n        <Tooltip target={iconEl} describeTarget={false}>\n          {isLikeActive ? t('good_response') : t('bad_response')}\n        </Tooltip>\n\n        {feedbackDialog}\n      </Flex>\n    );\n  }\n\n  return (\n    <>\n      <Flex container={{ gap: 1 }}>\n        <Button\n          label={t('good_response')}\n          variant='simple'\n          icon\n          compact\n          ref={likeButtonRef}\n          onClick={() => handleReactionClick('liked')}\n          aria-pressed={isLikeActive}\n        >\n          <Icon name={isLikeActive ? 'thumbs-up-solid' : 'thumbs-up'} />\n        </Button>\n\n        <Button\n          label={t('bad_response')}\n          variant='simple'\n          icon\n          compact\n          ref={dislikeButtonRef}\n          onClick={() => handleReactionClick('disliked')}\n          aria-pressed={isDislikeActive}\n        >\n          <Icon name={isDislikeActive ? 'thumbs-down-solid' : 'thumbs-down'} />\n        </Button>\n      </Flex>\n\n      {feedbackDialog}\n    </>\n  );\n};\n\nexport default GenAIMessageFeedbackButtons;\n"]}
+{"version":3,"file":"GenAIMessageFeedback.js","sourceRoot":"","sources":["../../../src/components/GenAICoach/GenAIMessageFeedback.tsx"],"names":[],"mappings":"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","sourcesContent":["import { useCallback, useEffect, useRef, useState } from 'react';\nimport type { KeyboardEvent } from 'react';\n\nimport {\n  Button,\n  Flex,\n  FormDialog,\n  Icon,\n  TextArea,\n  Tooltip,\n  registerIcon,\n  useElement,\n  useI18n\n} from '@pega/cosmos-react-core';\nimport * as thumbsUpSolidIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/thumbs-up-solid.icon';\nimport * as thumbsUpIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/thumbs-up.icon';\nimport * as thumbsDownSolidIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/thumbs-down-solid.icon';\nimport * as thumbsDownIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/thumbs-down.icon';\n\nimport type { MessageFeedbackProps, Reaction } from './GenAICoach.types';\n\nregisterIcon(thumbsUpSolidIcon, thumbsUpIcon, thumbsDownSolidIcon, thumbsDownIcon);\n\nconst GenAIMessageFeedbackButtons = ({ messageId, feedback }: MessageFeedbackProps) => {\n  const {\n    reaction,\n    feedbackText = '',\n    allowFeedbackResubmission = false,\n    promptFeedbackOn = 'disliked',\n    onReaction,\n    onFeedbackComplete\n  } = feedback ?? {};\n\n  const t = useI18n();\n\n  const [feedbackVal, setFeedbackVal] = useState(feedbackText);\n  const [showDialog, setShowDialog] = useState(false);\n\n  const likeButtonRef = useRef<HTMLButtonElement>(null);\n  const dislikeButtonRef = useRef<HTMLButtonElement>(null);\n  const shouldOpenDialogRef = useRef(false);\n  const [iconEl, seticonEl] = useElement<HTMLDivElement>();\n\n  const isLikeActive = reaction === 'liked';\n  const isDislikeActive = reaction === 'disliked';\n\n  const needsDialog = (reactionType: Reaction) => {\n    switch (promptFeedbackOn) {\n      case 'disliked':\n        return reactionType === 'disliked';\n      case 'liked':\n        return reactionType === 'liked';\n      case 'both':\n        return true;\n      default:\n        return false;\n    }\n  };\n\n  const handleReactionClick = useCallback(\n    (reactionType: Reaction) => {\n      if (reaction === reactionType) {\n        if (allowFeedbackResubmission) {\n          onReaction?.(messageId, undefined);\n        }\n\n        return;\n      }\n\n      onReaction?.(messageId, reactionType);\n\n      if (needsDialog(reactionType)) {\n        if (reaction !== reactionType) {\n          setFeedbackVal('');\n        } else {\n          setFeedbackVal(feedbackText);\n        }\n\n        if (!allowFeedbackResubmission) {\n          shouldOpenDialogRef.current = true;\n        } else {\n          setShowDialog(true);\n        }\n      }\n    },\n    [reaction, feedbackText, allowFeedbackResubmission, promptFeedbackOn, messageId, onReaction]\n  );\n\n  const closeDialog = useCallback(\n    (comment?: string) => {\n      setShowDialog(false);\n      shouldOpenDialogRef.current = false;\n\n      onFeedbackComplete?.(messageId, comment);\n\n      if (!allowFeedbackResubmission && iconEl) {\n        iconEl.focus();\n      }\n    },\n    [allowFeedbackResubmission, onFeedbackComplete, messageId, iconEl]\n  );\n\n  const getDialogTarget = () => {\n    if (!allowFeedbackResubmission && iconEl) {\n      return iconEl;\n    }\n\n    return isLikeActive ? likeButtonRef.current : dislikeButtonRef.current;\n  };\n\n  useEffect(() => {\n    if (iconEl && shouldOpenDialogRef.current && !allowFeedbackResubmission) {\n      setShowDialog(true);\n      shouldOpenDialogRef.current = false;\n    }\n  }, [iconEl, allowFeedbackResubmission]);\n\n  useEffect(() => {\n    if (!showDialog && reaction && allowFeedbackResubmission) {\n      const reactionButton =\n        reaction === 'liked' ? likeButtonRef.current : dislikeButtonRef.current;\n      reactionButton?.focus();\n    }\n  }, [showDialog, reaction, allowFeedbackResubmission]);\n\n  const dialogTarget = getDialogTarget();\n\n  const feedbackDialog = showDialog && dialogTarget && (\n    <FormDialog\n      target={dialogTarget}\n      heading={t('share_feedback')}\n      onCancel={() => closeDialog()}\n      onSubmit={() => closeDialog(feedbackVal)}\n      onKeyDown={e => e.stopPropagation()}\n    >\n      <TextArea\n        value={feedbackVal}\n        onChange={e => setFeedbackVal(e.target.value)}\n        onKeyDown={(e: KeyboardEvent<HTMLTextAreaElement>) => {\n          if (e.key === 'Enter' && !e.shiftKey) {\n            e.preventDefault();\n            closeDialog(feedbackVal);\n          }\n        }}\n        autoResize={false}\n      />\n    </FormDialog>\n  );\n\n  const shouldShowIcon = !allowFeedbackResubmission && reaction;\n\n  if (shouldShowIcon) {\n    return (\n      <Flex\n        container={{ pad: [0.5, undefined] }}\n        ref={seticonEl}\n        tabIndex={-1}\n        aria-label={t('selected_noun', [isLikeActive ? t('good_response') : t('bad_response')])}\n        role='status'\n      >\n        <Icon name={isLikeActive ? 'thumbs-up-solid' : 'thumbs-down-solid'} emphasized />\n\n        <Tooltip target={iconEl} describeTarget={false}>\n          {isLikeActive ? t('good_response') : t('bad_response')}\n        </Tooltip>\n\n        {feedbackDialog}\n      </Flex>\n    );\n  }\n\n  return (\n    <>\n      <Flex container={{ gap: 1 }}>\n        <Button\n          label={t('good_response')}\n          variant='simple'\n          icon\n          compact\n          ref={likeButtonRef}\n          onClick={() => handleReactionClick('liked')}\n          aria-pressed={isLikeActive}\n        >\n          <Icon name={isLikeActive ? 'thumbs-up-solid' : 'thumbs-up'} emphasized={isLikeActive} />\n        </Button>\n\n        <Button\n          label={t('bad_response')}\n          variant='simple'\n          icon\n          compact\n          ref={dislikeButtonRef}\n          onClick={() => handleReactionClick('disliked')}\n          aria-pressed={isDislikeActive}\n        >\n          <Icon\n            name={isDislikeActive ? 'thumbs-down-solid' : 'thumbs-down'}\n            emphasized={isDislikeActive}\n          />\n        </Button>\n      </Flex>\n\n      {feedbackDialog}\n    </>\n  );\n};\n\nexport default GenAIMessageFeedbackButtons;\n"]}

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

@@ -1 +1 @@
-{"version":3,"file":"Shortcuts.d.ts","sourceRoot":"","sources":["../../../src/components/Shortcuts/Shortcuts.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAa,eAAe,EAAE,MAAM,OAAO,CAAC;AAuBxD,OAAO,KAAK,EAAE,cAAc,EAAgB,MAAM,mBAAmB,CAAC;;;;AA8NtE,wBAA2D"}
+{"version":3,"file":"Shortcuts.d.ts","sourceRoot":"","sources":["../../../src/components/Shortcuts/Shortcuts.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAa,eAAe,EAAE,MAAM,OAAO,CAAC;AAwBxD,OAAO,KAAK,EAAE,cAAc,EAAgB,MAAM,mBAAmB,CAAC;;;;AAmOtE,wBAA2D"}

package/lib/components/Shortcuts/Shortcuts.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useRef, forwardRef, useState } from 'react';
-import { calculateForegroundColor, Card, CardContent, CardHeader, EmptyState, Flex, Text, VisuallyHiddenText, readableColor, registerIcon, isSolidColor, useArrows, useI18n, usePrevious, useTestIds, useTheme, withTestIds } from '@pega/cosmos-react-core';
+import { calculateForegroundColor, Card, CardContent, CardHeader, EmptyState, Flex, Text, VisuallyHiddenText, readableColor, registerIcon, isSolidColor, useArrows, useI18n, usePrevious, useTestIds, useTheme, createClassName, withTestIds } from '@pega/cosmos-react-core';
 import * as openNewTabIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/open.icon';
 import { StyledExternalIcon, StyledLabelRow, StyledShortcutsCard, StyledShortcutsCardButton, StyledShortcutsCardsContainer, StyledShortcutsCardsWrapper, StyledShortcutsCategoriesContainer, StyledShortcutsCategoryHeading, StyledShortcutsCardIcon, StyledShortcutImageContainer, StyledShortcutImg, StyledSubtitleText, StyledText, StyledTextContent, StyledCardContentWrapper } from './Shortcuts.styles';
 import { getShortcutsTestIds } from './Shortcuts.test-ids';
@@ -13,6 +13,7 @@ const itemLinkProps = (item) => {
 };
 const CardItem = ({ item, variant }) => {
     const { components: { card, shortcuts: { icon: { background: configuredIconBackground, foreground: configuredIconForeground } } } } = useTheme();
+    const cardClassName = createClassName('shortcuts-card', item.className);
     const isLink = item.type === 'external';
     const image = isLink ? item.image : undefined;
     const description = isLink ? item.description : undefined;
@@ -33,17 +34,18 @@ const CardItem = ({ item, variant }) => {
     };
     const iconVisual = withIconBackground ? (_jsx(StyledShortcutsCardIcon, { ...commonIconProps, background: iconBackground, foreground: iconForeground })) : (_jsx(StyledShortcutsCardIcon, { ...commonIconProps, iconColor: iconForeground, size: 'm' }));
     const visual = showImage ? (_jsx(Flex, { container: { alignItems: 'center', justify: 'center' }, as: StyledShortcutImageContainer, children: _jsx(StyledShortcutImg, { src: image, alt: item.label, onError: () => setIsBrokenImage(true), onLoad: () => setIsBrokenImage(false) }) })) : (iconVisual);
-    return (_jsx(StyledShortcutsCard, { children: _jsx(StyledShortcutsCardButton, { variant: 'link', layoutVariant: variant, ...itemLinkProps(item), children: _jsxs(StyledCardContentWrapper, { layoutVariant: variant, hasDescription: !!description, children: [visual, _jsxs(Flex, { container: { direction: 'column', gap: 0.5 }, as: StyledTextContent, layoutVariant: variant, children: [_jsxs(StyledLabelRow, { children: [_jsx(StyledText, { children: item.label }), item.type === 'external' && _jsx(StyledExternalIcon, { name: 'open' })] }), description && (_jsx(StyledSubtitleText, { variant: 'secondary', forwardedAs: 'p', children: description }))] })] }) }) }));
+    return (_jsx(StyledShortcutsCard, { className: cardClassName, children: _jsx(StyledShortcutsCardButton, { variant: 'link', layoutVariant: variant, ...itemLinkProps(item), children: _jsxs(StyledCardContentWrapper, { layoutVariant: variant, hasDescription: !!description, children: [visual, _jsxs(Flex, { container: { direction: 'column', gap: 0.5 }, as: StyledTextContent, layoutVariant: variant, children: [_jsxs(StyledLabelRow, { children: [_jsx(StyledText, { children: item.label }), item.type === 'external' && _jsx(StyledExternalIcon, { name: 'open' })] }), description && (_jsx(StyledSubtitleText, { variant: 'secondary', forwardedAs: 'p', children: description }))] })] }) }) }));
 };
-const Shortcuts = forwardRef(function Shortcuts({ heading, items = [], categories, showHeader = true, variant = 'inline', testId, ...restProps }, ref) {
+const Shortcuts = forwardRef(function Shortcuts({ heading, className, items = [], categories, showHeader = true, variant = 'inline', testId, ...restProps }, ref) {
     const t = useI18n();
     const testIds = useTestIds(testId, getShortcutsTestIds);
+    const rootClassName = createClassName('shortcuts', className);
     const flatListRef = useRef(null);
     const categoriesContainerRef = useRef(null);
     useArrows(flatListRef, { dir: 'both', cycle: true });
     useArrows(categoriesContainerRef, { dir: 'both', cycle: true });
     const emptyState = _jsx(EmptyState, { message: t('no_items'), "data-testid": testIds.emptyState });
-    const withCardShell = (content) => (_jsxs(Card, { ...restProps, "data-testid": testIds.root, ref: ref, children: [_jsx(CardHeader, { children: _jsx(Text, { variant: 'h2', children: heading ?? t('shortcuts') }) }), _jsx(CardContent, { children: content })] }));
+    const withCardShell = (content) => (_jsxs(Card, { ...restProps, className: rootClassName, "data-testid": testIds.root, ref: ref, children: [_jsx(CardHeader, { children: _jsx(Text, { variant: 'h2', children: heading ?? t('shortcuts') }) }), _jsx(CardContent, { children: content })] }));
     if (categories) {
         const visibleCategories = categories.filter(cat => cat.items.length > 0);
         const categorySections = (_jsx(StyledShortcutsCategoriesContainer, { ref: categoriesContainerRef, children: visibleCategories.map(cat => (_jsxs(Flex, { container: { direction: 'column' }, "aria-labelledby": `cat-${cat.id}`, "data-testid": testIds.categorySection, as: 'section', children: [_jsx(StyledShortcutsCategoryHeading, { id: `cat-${cat.id}`, "data-testid": testIds.categoryHeading, variant: 'h3', children: cat.label }), _jsx(StyledShortcutsCardsContainer, { role: 'list', "aria-label": cat.label, itemCount: cat.items.length, children: cat.items.map(item => (_jsx(CardItem, { item: item, variant: variant }, item.id))) })] }, cat.id))) }));
@@ -53,7 +55,7 @@ const Shortcuts = forwardRef(function Shortcuts({ heading, items = [], categorie
     if (!showHeader) {
         if (items.length === 0)
             return null;
-        return (_jsxs("div", { "data-testid": testIds.root, ...restProps, ref: ref, children: [_jsx(VisuallyHiddenText, { children: heading ?? t('shortcuts') }), cardGrid] }));
+        return (_jsxs("div", { className: rootClassName, "data-testid": testIds.root, ...restProps, ref: ref, children: [_jsx(VisuallyHiddenText, { children: heading ?? t('shortcuts') }), cardGrid] }));
     }
     return withCardShell(items.length === 0 ? emptyState : cardGrid);
 });

package/lib/components/Shortcuts/Shortcuts.js.map

@@ -1 +1 @@
-{"version":3,"file":"Shortcuts.js","sourceRoot":"","sources":["../../../src/components/Shortcuts/Shortcuts.tsx"],"names":[],"mappings":"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","sourcesContent":["import { useRef, forwardRef, useState } from 'react';\nimport type { ReactNode, PropsWithoutRef } from 'react';\n\nimport {\n  calculateForegroundColor,\n  Card,\n  CardContent,\n  CardHeader,\n  EmptyState,\n  Flex,\n  Text,\n  VisuallyHiddenText,\n  readableColor,\n  registerIcon,\n  isSolidColor,\n  useArrows,\n  useI18n,\n  usePrevious,\n  useTestIds,\n  useTheme,\n  withTestIds\n} from '@pega/cosmos-react-core';\nimport * as openNewTabIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/open.icon';\n\nimport type { ShortcutsProps, ShortcutItem } from './Shortcuts.types';\nimport {\n  StyledExternalIcon,\n  StyledLabelRow,\n  StyledShortcutsCard,\n  StyledShortcutsCardButton,\n  StyledShortcutsCardsContainer,\n  StyledShortcutsCardsWrapper,\n  StyledShortcutsCategoriesContainer,\n  StyledShortcutsCategoryHeading,\n  StyledShortcutsCardIcon,\n  StyledShortcutImageContainer,\n  StyledShortcutImg,\n  StyledSubtitleText,\n  StyledText,\n  StyledTextContent,\n  StyledCardContentWrapper\n} from './Shortcuts.styles';\nimport { getShortcutsTestIds } from './Shortcuts.test-ids';\n\nregisterIcon(openNewTabIcon);\n\nconst itemLinkProps = (\n  item: ShortcutItem\n): {\n  href?: string;\n  target?: string;\n  rel?: string;\n  onClick?: () => void;\n} => {\n  if (item.type === 'external') {\n    return { href: item.href, target: '_blank', rel: 'noopener noreferrer' };\n  }\n\n  return { onClick: item.onClick };\n};\n\nconst CardItem = ({ item, variant }: { item: ShortcutItem; variant: 'stacked' | 'inline' }) => {\n  const {\n    components: {\n      card,\n      shortcuts: {\n        icon: { background: configuredIconBackground, foreground: configuredIconForeground }\n      }\n    }\n  } = useTheme();\n\n  const isLink = item.type === 'external';\n  const image = isLink ? item.image : undefined;\n  const description = isLink ? item.description : undefined;\n\n  const [isBrokenImage, setIsBrokenImage] = useState(false);\n  const prevImage = usePrevious(image);\n\n  const iconBackground = configuredIconBackground;\n  const withIconBackground = Boolean(isSolidColor(iconBackground));\n\n  const cardForeground = calculateForegroundColor(card.background, card['foreground-color']);\n  let iconForeground = configuredIconForeground;\n\n  if (configuredIconForeground === 'auto') {\n    iconForeground = withIconBackground\n      ? readableColor(iconBackground, { mode: 'light', level: 'AANonText' })\n      : cardForeground;\n  }\n\n  const showImage = Boolean(image) && !(isBrokenImage && image === prevImage);\n\n  const commonIconProps = {\n    name: item.icon\n  };\n\n  const iconVisual = withIconBackground ? (\n    <StyledShortcutsCardIcon\n      {...commonIconProps}\n      background={iconBackground}\n      foreground={iconForeground}\n    />\n  ) : (\n    <StyledShortcutsCardIcon {...commonIconProps} iconColor={iconForeground} size='m' />\n  );\n\n  const visual = showImage ? (\n    <Flex container={{ alignItems: 'center', justify: 'center' }} as={StyledShortcutImageContainer}>\n      <StyledShortcutImg\n        src={image}\n        alt={item.label}\n        onError={() => setIsBrokenImage(true)}\n        onLoad={() => setIsBrokenImage(false)}\n      />\n    </Flex>\n  ) : (\n    iconVisual\n  );\n\n  return (\n    <StyledShortcutsCard>\n      <StyledShortcutsCardButton variant='link' layoutVariant={variant} {...itemLinkProps(item)}>\n        <StyledCardContentWrapper layoutVariant={variant} hasDescription={!!description}>\n          {visual}\n          <Flex\n            container={{ direction: 'column', gap: 0.5 }}\n            as={StyledTextContent}\n            layoutVariant={variant}\n          >\n            <StyledLabelRow>\n              <StyledText>{item.label}</StyledText>\n              {item.type === 'external' && <StyledExternalIcon name='open' />}\n            </StyledLabelRow>\n\n            {description && (\n              <StyledSubtitleText variant='secondary' forwardedAs='p'>\n                {description}\n              </StyledSubtitleText>\n            )}\n          </Flex>\n        </StyledCardContentWrapper>\n      </StyledShortcutsCardButton>\n    </StyledShortcutsCard>\n  );\n};\n\nconst Shortcuts = forwardRef(function Shortcuts(\n  {\n    heading,\n    items = [],\n    categories,\n    showHeader = true,\n    variant = 'inline',\n    testId,\n    ...restProps\n  }: PropsWithoutRef<ShortcutsProps>,\n  ref: ShortcutsProps['ref']\n) {\n  const t = useI18n();\n  const testIds = useTestIds(testId, getShortcutsTestIds);\n\n  const flatListRef = useRef<HTMLUListElement>(null);\n  const categoriesContainerRef = useRef<HTMLDivElement>(null);\n\n  useArrows(flatListRef, { dir: 'both', cycle: true });\n  useArrows(categoriesContainerRef, { dir: 'both', cycle: true });\n\n  const emptyState = <EmptyState message={t('no_items')} data-testid={testIds.emptyState} />;\n\n  const withCardShell = (content: ReactNode) => (\n    <Card {...restProps} data-testid={testIds.root} ref={ref}>\n      <CardHeader>\n        <Text variant='h2'>{heading ?? t('shortcuts')}</Text>\n      </CardHeader>\n      <CardContent>{content}</CardContent>\n    </Card>\n  );\n\n  if (categories) {\n    const visibleCategories = categories.filter(cat => cat.items.length > 0);\n\n    const categorySections = (\n      <StyledShortcutsCategoriesContainer ref={categoriesContainerRef}>\n        {visibleCategories.map(cat => (\n          <Flex\n            container={{ direction: 'column' }}\n            key={cat.id}\n            aria-labelledby={`cat-${cat.id}`}\n            data-testid={testIds.categorySection}\n            as='section'\n          >\n            <StyledShortcutsCategoryHeading\n              id={`cat-${cat.id}`}\n              data-testid={testIds.categoryHeading}\n              variant='h3'\n            >\n              {cat.label}\n            </StyledShortcutsCategoryHeading>\n\n            <StyledShortcutsCardsContainer\n              role='list'\n              aria-label={cat.label}\n              itemCount={cat.items.length}\n            >\n              {cat.items.map(item => (\n                <CardItem key={item.id} item={item} variant={variant} />\n              ))}\n            </StyledShortcutsCardsContainer>\n          </Flex>\n        ))}\n      </StyledShortcutsCategoriesContainer>\n    );\n\n    return withCardShell(visibleCategories.length === 0 ? emptyState : categorySections);\n  }\n\n  const cardGrid = (\n    <StyledShortcutsCardsWrapper>\n      <StyledShortcutsCardsContainer\n        ref={flatListRef}\n        role='list'\n        data-testid={testIds.list}\n        aria-label={heading ?? t('shortcuts')}\n        itemCount={items.length}\n      >\n        {items.map(item => (\n          <CardItem key={item.id} item={item} variant={variant} />\n        ))}\n      </StyledShortcutsCardsContainer>\n    </StyledShortcutsCardsWrapper>\n  );\n\n  if (!showHeader) {\n    if (items.length === 0) return null;\n\n    return (\n      <div data-testid={testIds.root} {...restProps} ref={ref}>\n        <VisuallyHiddenText>{heading ?? t('shortcuts')}</VisuallyHiddenText>\n        {cardGrid}\n      </div>\n    );\n  }\n\n  return withCardShell(items.length === 0 ? emptyState : cardGrid);\n});\n\nexport default withTestIds(Shortcuts, getShortcutsTestIds);\n"]}
+{"version":3,"file":"Shortcuts.js","sourceRoot":"","sources":["../../../src/components/Shortcuts/Shortcuts.tsx"],"names":[],"mappings":"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","sourcesContent":["import { useRef, forwardRef, useState } from 'react';\nimport type { ReactNode, PropsWithoutRef } from 'react';\n\nimport {\n  calculateForegroundColor,\n  Card,\n  CardContent,\n  CardHeader,\n  EmptyState,\n  Flex,\n  Text,\n  VisuallyHiddenText,\n  readableColor,\n  registerIcon,\n  isSolidColor,\n  useArrows,\n  useI18n,\n  usePrevious,\n  useTestIds,\n  useTheme,\n  createClassName,\n  withTestIds\n} from '@pega/cosmos-react-core';\nimport * as openNewTabIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/open.icon';\n\nimport type { ShortcutsProps, ShortcutItem } from './Shortcuts.types';\nimport {\n  StyledExternalIcon,\n  StyledLabelRow,\n  StyledShortcutsCard,\n  StyledShortcutsCardButton,\n  StyledShortcutsCardsContainer,\n  StyledShortcutsCardsWrapper,\n  StyledShortcutsCategoriesContainer,\n  StyledShortcutsCategoryHeading,\n  StyledShortcutsCardIcon,\n  StyledShortcutImageContainer,\n  StyledShortcutImg,\n  StyledSubtitleText,\n  StyledText,\n  StyledTextContent,\n  StyledCardContentWrapper\n} from './Shortcuts.styles';\nimport { getShortcutsTestIds } from './Shortcuts.test-ids';\n\nregisterIcon(openNewTabIcon);\n\nconst itemLinkProps = (\n  item: ShortcutItem\n): {\n  href?: string;\n  target?: string;\n  rel?: string;\n  onClick?: () => void;\n} => {\n  if (item.type === 'external') {\n    return { href: item.href, target: '_blank', rel: 'noopener noreferrer' };\n  }\n\n  return { onClick: item.onClick };\n};\n\nconst CardItem = ({ item, variant }: { item: ShortcutItem; variant: 'stacked' | 'inline' }) => {\n  const {\n    components: {\n      card,\n      shortcuts: {\n        icon: { background: configuredIconBackground, foreground: configuredIconForeground }\n      }\n    }\n  } = useTheme();\n\n  const cardClassName = createClassName('shortcuts-card', item.className);\n\n  const isLink = item.type === 'external';\n  const image = isLink ? item.image : undefined;\n  const description = isLink ? item.description : undefined;\n\n  const [isBrokenImage, setIsBrokenImage] = useState(false);\n  const prevImage = usePrevious(image);\n\n  const iconBackground = configuredIconBackground;\n  const withIconBackground = Boolean(isSolidColor(iconBackground));\n\n  const cardForeground = calculateForegroundColor(card.background, card['foreground-color']);\n  let iconForeground = configuredIconForeground;\n\n  if (configuredIconForeground === 'auto') {\n    iconForeground = withIconBackground\n      ? readableColor(iconBackground, { mode: 'light', level: 'AANonText' })\n      : cardForeground;\n  }\n\n  const showImage = Boolean(image) && !(isBrokenImage && image === prevImage);\n\n  const commonIconProps = {\n    name: item.icon\n  };\n\n  const iconVisual = withIconBackground ? (\n    <StyledShortcutsCardIcon\n      {...commonIconProps}\n      background={iconBackground}\n      foreground={iconForeground}\n    />\n  ) : (\n    <StyledShortcutsCardIcon {...commonIconProps} iconColor={iconForeground} size='m' />\n  );\n\n  const visual = showImage ? (\n    <Flex container={{ alignItems: 'center', justify: 'center' }} as={StyledShortcutImageContainer}>\n      <StyledShortcutImg\n        src={image}\n        alt={item.label}\n        onError={() => setIsBrokenImage(true)}\n        onLoad={() => setIsBrokenImage(false)}\n      />\n    </Flex>\n  ) : (\n    iconVisual\n  );\n\n  return (\n    <StyledShortcutsCard className={cardClassName}>\n      <StyledShortcutsCardButton variant='link' layoutVariant={variant} {...itemLinkProps(item)}>\n        <StyledCardContentWrapper layoutVariant={variant} hasDescription={!!description}>\n          {visual}\n          <Flex\n            container={{ direction: 'column', gap: 0.5 }}\n            as={StyledTextContent}\n            layoutVariant={variant}\n          >\n            <StyledLabelRow>\n              <StyledText>{item.label}</StyledText>\n              {item.type === 'external' && <StyledExternalIcon name='open' />}\n            </StyledLabelRow>\n\n            {description && (\n              <StyledSubtitleText variant='secondary' forwardedAs='p'>\n                {description}\n              </StyledSubtitleText>\n            )}\n          </Flex>\n        </StyledCardContentWrapper>\n      </StyledShortcutsCardButton>\n    </StyledShortcutsCard>\n  );\n};\n\nconst Shortcuts = forwardRef(function Shortcuts(\n  {\n    heading,\n    className,\n    items = [],\n    categories,\n    showHeader = true,\n    variant = 'inline',\n    testId,\n    ...restProps\n  }: PropsWithoutRef<ShortcutsProps>,\n  ref: ShortcutsProps['ref']\n) {\n  const t = useI18n();\n  const testIds = useTestIds(testId, getShortcutsTestIds);\n\n  const rootClassName = createClassName('shortcuts', className);\n\n  const flatListRef = useRef<HTMLUListElement>(null);\n  const categoriesContainerRef = useRef<HTMLDivElement>(null);\n\n  useArrows(flatListRef, { dir: 'both', cycle: true });\n  useArrows(categoriesContainerRef, { dir: 'both', cycle: true });\n\n  const emptyState = <EmptyState message={t('no_items')} data-testid={testIds.emptyState} />;\n\n  const withCardShell = (content: ReactNode) => (\n    <Card {...restProps} className={rootClassName} data-testid={testIds.root} ref={ref}>\n      <CardHeader>\n        <Text variant='h2'>{heading ?? t('shortcuts')}</Text>\n      </CardHeader>\n      <CardContent>{content}</CardContent>\n    </Card>\n  );\n\n  if (categories) {\n    const visibleCategories = categories.filter(cat => cat.items.length > 0);\n\n    const categorySections = (\n      <StyledShortcutsCategoriesContainer ref={categoriesContainerRef}>\n        {visibleCategories.map(cat => (\n          <Flex\n            container={{ direction: 'column' }}\n            key={cat.id}\n            aria-labelledby={`cat-${cat.id}`}\n            data-testid={testIds.categorySection}\n            as='section'\n          >\n            <StyledShortcutsCategoryHeading\n              id={`cat-${cat.id}`}\n              data-testid={testIds.categoryHeading}\n              variant='h3'\n            >\n              {cat.label}\n            </StyledShortcutsCategoryHeading>\n\n            <StyledShortcutsCardsContainer\n              role='list'\n              aria-label={cat.label}\n              itemCount={cat.items.length}\n            >\n              {cat.items.map(item => (\n                <CardItem key={item.id} item={item} variant={variant} />\n              ))}\n            </StyledShortcutsCardsContainer>\n          </Flex>\n        ))}\n      </StyledShortcutsCategoriesContainer>\n    );\n\n    return withCardShell(visibleCategories.length === 0 ? emptyState : categorySections);\n  }\n\n  const cardGrid = (\n    <StyledShortcutsCardsWrapper>\n      <StyledShortcutsCardsContainer\n        ref={flatListRef}\n        role='list'\n        data-testid={testIds.list}\n        aria-label={heading ?? t('shortcuts')}\n        itemCount={items.length}\n      >\n        {items.map(item => (\n          <CardItem key={item.id} item={item} variant={variant} />\n        ))}\n      </StyledShortcutsCardsContainer>\n    </StyledShortcutsCardsWrapper>\n  );\n\n  if (!showHeader) {\n    if (items.length === 0) return null;\n\n    return (\n      <div className={rootClassName} data-testid={testIds.root} {...restProps} ref={ref}>\n        <VisuallyHiddenText>{heading ?? t('shortcuts')}</VisuallyHiddenText>\n        {cardGrid}\n      </div>\n    );\n  }\n\n  return withCardShell(items.length === 0 ? emptyState : cardGrid);\n});\n\nexport default withTestIds(Shortcuts, getShortcutsTestIds);\n"]}

package/lib/components/Shortcuts/Shortcuts.types.d.ts

@@ -1,5 +1,5 @@
 import type { Ref } from 'react';
-import type { NoChildrenProp, TestIdProp } from '@pega/cosmos-react-core';
+import type { BaseProps, NoChildrenProp, TestIdProp } from '@pega/cosmos-react-core';
 interface ShortcutItemBase {
     /** Unique identifier for this shortcut. */
     id: string;
@@ -7,6 +7,8 @@ interface ShortcutItemBase {
     label: string;
     /** Icon name from the registered icon set. */
     icon: string;
+    /** Optional class name applied to the rendered shortcut card. */
+    className?: string;
 }
 export interface ShortcutLinkItem extends ShortcutItemBase {
     /** Discriminant — this item navigates to an external URL. */
@@ -50,7 +52,7 @@ interface ShortcutsWithCategories {
     categories: ShortcutCategory[];
     showHeader?: never;
 }
-interface ShortcutsBaseProps extends NoChildrenProp, TestIdProp {
+interface ShortcutsBaseProps extends NoChildrenProp, TestIdProp, BaseProps {
     /** Heading displayed above the shortcuts. */
     heading?: string;
     /**

package/lib/components/Shortcuts/Shortcuts.types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Shortcuts.types.d.ts","sourceRoot":"","sources":["../../../src/components/Shortcuts/Shortcuts.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,GAAG,EAAE,MAAM,OAAO,CAAC;AAEjC,OAAO,KAAK,EAAE,cAAc,EAAE,UAAU,EAAE,MAAM,yBAAyB,CAAC;AAE1E,UAAU,gBAAgB;IACxB,2CAA2C;IAC3C,EAAE,EAAE,MAAM,CAAC;IACX,2CAA2C;IAC3C,KAAK,EAAE,MAAM,CAAC;IACd,8CAA8C;IAC9C,IAAI,EAAE,MAAM,CAAC;CACd;AAED,MAAM,WAAW,gBAAiB,SAAQ,gBAAgB;IACxD,6DAA6D;IAC7D,IAAI,EAAE,UAAU,CAAC;IACjB,8DAA8D;IAC9D,IAAI,EAAE,MAAM,CAAC;IACb,mDAAmD;IACnD,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,uGAAuG;IACvG,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED,MAAM,WAAW,eAAgB,SAAQ,gBAAgB;IACvD,mEAAmE;IACnE,IAAI,EAAE,MAAM,CAAC;IACb,8DAA8D;IAC9D,OAAO,EAAE,MAAM,IAAI,CAAC;CACrB;AAED,MAAM,MAAM,YAAY,GAAG,gBAAgB,GAAG,eAAe,CAAC;AAE9D,MAAM,WAAW,gBAAgB;IAC/B,2CAA2C;IAC3C,EAAE,EAAE,MAAM,CAAC;IACX,mDAAmD;IACnD,KAAK,EAAE,MAAM,CAAC;IACd,iDAAiD;IACjD,KAAK,EAAE,YAAY,EAAE,CAAC;CACvB;AAED,UAAU,kBAAkB;IAC1B,yCAAyC;IACzC,KAAK,CAAC,EAAE,YAAY,EAAE,CAAC;IACvB,UAAU,CAAC,EAAE,KAAK,CAAC;IACnB;;;;OAIG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB;AAED,UAAU,uBAAuB;IAC/B,KAAK,CAAC,EAAE,KAAK,CAAC;IACd,+EAA+E;IAC/E,UAAU,EAAE,gBAAgB,EAAE,CAAC;IAC/B,UAAU,CAAC,EAAE,KAAK,CAAC;CACpB;AAED,UAAU,kBAAmB,SAAQ,cAAc,EAAE,UAAU;IAC7D,6CAA6C;IAC7C,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB;;;;;OAKG;IACH,OAAO,CAAC,EAAE,SAAS,GAAG,QAAQ,CAAC;IAC/B,qCAAqC;IACrC,GAAG,CAAC,EAAE,GAAG,CAAC,cAAc,CAAC,CAAC;CAC3B;AAED,MAAM,MAAM,cAAc,GAAG,kBAAkB,GAAG,CAAC,kBAAkB,GAAG,uBAAuB,CAAC,CAAC"}
+{"version":3,"file":"Shortcuts.types.d.ts","sourceRoot":"","sources":["../../../src/components/Shortcuts/Shortcuts.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,GAAG,EAAE,MAAM,OAAO,CAAC;AAEjC,OAAO,KAAK,EAAE,SAAS,EAAE,cAAc,EAAE,UAAU,EAAE,MAAM,yBAAyB,CAAC;AAErF,UAAU,gBAAgB;IACxB,2CAA2C;IAC3C,EAAE,EAAE,MAAM,CAAC;IACX,2CAA2C;IAC3C,KAAK,EAAE,MAAM,CAAC;IACd,8CAA8C;IAC9C,IAAI,EAAE,MAAM,CAAC;IACb,iEAAiE;IACjE,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,MAAM,WAAW,gBAAiB,SAAQ,gBAAgB;IACxD,6DAA6D;IAC7D,IAAI,EAAE,UAAU,CAAC;IACjB,8DAA8D;IAC9D,IAAI,EAAE,MAAM,CAAC;IACb,mDAAmD;IACnD,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,uGAAuG;IACvG,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED,MAAM,WAAW,eAAgB,SAAQ,gBAAgB;IACvD,mEAAmE;IACnE,IAAI,EAAE,MAAM,CAAC;IACb,8DAA8D;IAC9D,OAAO,EAAE,MAAM,IAAI,CAAC;CACrB;AAED,MAAM,MAAM,YAAY,GAAG,gBAAgB,GAAG,eAAe,CAAC;AAE9D,MAAM,WAAW,gBAAgB;IAC/B,2CAA2C;IAC3C,EAAE,EAAE,MAAM,CAAC;IACX,mDAAmD;IACnD,KAAK,EAAE,MAAM,CAAC;IACd,iDAAiD;IACjD,KAAK,EAAE,YAAY,EAAE,CAAC;CACvB;AAED,UAAU,kBAAkB;IAC1B,yCAAyC;IACzC,KAAK,CAAC,EAAE,YAAY,EAAE,CAAC;IACvB,UAAU,CAAC,EAAE,KAAK,CAAC;IACnB;;;;OAIG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB;AAED,UAAU,uBAAuB;IAC/B,KAAK,CAAC,EAAE,KAAK,CAAC;IACd,+EAA+E;IAC/E,UAAU,EAAE,gBAAgB,EAAE,CAAC;IAC/B,UAAU,CAAC,EAAE,KAAK,CAAC;CACpB;AAED,UAAU,kBAAmB,SAAQ,cAAc,EAAE,UAAU,EAAE,SAAS;IACxE,6CAA6C;IAC7C,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB;;;;;OAKG;IACH,OAAO,CAAC,EAAE,SAAS,GAAG,QAAQ,CAAC;IAC/B,qCAAqC;IACrC,GAAG,CAAC,EAAE,GAAG,CAAC,cAAc,CAAC,CAAC;CAC3B;AAED,MAAM,MAAM,cAAc,GAAG,kBAAkB,GAAG,CAAC,kBAAkB,GAAG,uBAAuB,CAAC,CAAC"}

package/lib/components/Shortcuts/Shortcuts.types.js.map

@@ -1 +1 @@
-{"version":3,"file":"Shortcuts.types.js","sourceRoot":"","sources":["../../../src/components/Shortcuts/Shortcuts.types.ts"],"names":[],"mappings":"","sourcesContent":["import type { Ref } from 'react';\n\nimport type { NoChildrenProp, TestIdProp } from '@pega/cosmos-react-core';\n\ninterface ShortcutItemBase {\n  /** Unique identifier for this shortcut. */\n  id: string;\n  /** Display label shown on the shortcut. */\n  label: string;\n  /** Icon name from the registered icon set. */\n  icon: string;\n}\n\nexport interface ShortcutLinkItem extends ShortcutItemBase {\n  /** Discriminant — this item navigates to an external URL. */\n  type: 'external';\n  /** Absolute URL the link navigates to. Opens in a new tab. */\n  href: string;\n  /** Optional subtitle displayed below the label. */\n  description?: string;\n  /** Optional image URL. Renders in place of the icon; falls back to icon if the image fails to load. */\n  image?: string;\n}\n\nexport interface ShortcutNavItem extends ShortcutItemBase {\n  /** Discriminant — this item navigates to a portal landing page. */\n  type: 'page';\n  /** Callback invoked when the user activates this shortcut. */\n  onClick: () => void;\n}\n\nexport type ShortcutItem = ShortcutLinkItem | ShortcutNavItem;\n\nexport interface ShortcutCategory {\n  /** Unique identifier for this category. */\n  id: string;\n  /** Display label shown as the category heading. */\n  label: string;\n  /** Shortcut items belonging to this category. */\n  items: ShortcutItem[];\n}\n\ninterface ShortcutsWithItems {\n  /** Shortcut items to render as cards. */\n  items?: ShortcutItem[];\n  categories?: never;\n  /**\n   * Whether to render the outer card shell with a heading.\n   * When `false`, only the card grid is rendered, centered within its container.\n   * @default true\n   */\n  showHeader?: boolean;\n}\n\ninterface ShortcutsWithCategories {\n  items?: never;\n  /** Grouped shortcut items, each rendered as cards under a category heading. */\n  categories: ShortcutCategory[];\n  showHeader?: never;\n}\n\ninterface ShortcutsBaseProps extends NoChildrenProp, TestIdProp {\n  /** Heading displayed above the shortcuts. */\n  heading?: string;\n  /**\n   * Controls the layout variant of each shortcut card.\n   * - `stacked`: large icon above the label (default card style).\n   * - `inline`: small icon inline to the left of the label (list/link style).\n   * @default 'inline'\n   */\n  variant?: 'stacked' | 'inline';\n  /** Ref for the root card element. */\n  ref?: Ref<HTMLDivElement>;\n}\n\nexport type ShortcutsProps = ShortcutsBaseProps & (ShortcutsWithItems | ShortcutsWithCategories);\n"]}
+{"version":3,"file":"Shortcuts.types.js","sourceRoot":"","sources":["../../../src/components/Shortcuts/Shortcuts.types.ts"],"names":[],"mappings":"","sourcesContent":["import type { Ref } from 'react';\n\nimport type { BaseProps, NoChildrenProp, TestIdProp } from '@pega/cosmos-react-core';\n\ninterface ShortcutItemBase {\n  /** Unique identifier for this shortcut. */\n  id: string;\n  /** Display label shown on the shortcut. */\n  label: string;\n  /** Icon name from the registered icon set. */\n  icon: string;\n  /** Optional class name applied to the rendered shortcut card. */\n  className?: string;\n}\n\nexport interface ShortcutLinkItem extends ShortcutItemBase {\n  /** Discriminant — this item navigates to an external URL. */\n  type: 'external';\n  /** Absolute URL the link navigates to. Opens in a new tab. */\n  href: string;\n  /** Optional subtitle displayed below the label. */\n  description?: string;\n  /** Optional image URL. Renders in place of the icon; falls back to icon if the image fails to load. */\n  image?: string;\n}\n\nexport interface ShortcutNavItem extends ShortcutItemBase {\n  /** Discriminant — this item navigates to a portal landing page. */\n  type: 'page';\n  /** Callback invoked when the user activates this shortcut. */\n  onClick: () => void;\n}\n\nexport type ShortcutItem = ShortcutLinkItem | ShortcutNavItem;\n\nexport interface ShortcutCategory {\n  /** Unique identifier for this category. */\n  id: string;\n  /** Display label shown as the category heading. */\n  label: string;\n  /** Shortcut items belonging to this category. */\n  items: ShortcutItem[];\n}\n\ninterface ShortcutsWithItems {\n  /** Shortcut items to render as cards. */\n  items?: ShortcutItem[];\n  categories?: never;\n  /**\n   * Whether to render the outer card shell with a heading.\n   * When `false`, only the card grid is rendered, centered within its container.\n   * @default true\n   */\n  showHeader?: boolean;\n}\n\ninterface ShortcutsWithCategories {\n  items?: never;\n  /** Grouped shortcut items, each rendered as cards under a category heading. */\n  categories: ShortcutCategory[];\n  showHeader?: never;\n}\n\ninterface ShortcutsBaseProps extends NoChildrenProp, TestIdProp, BaseProps {\n  /** Heading displayed above the shortcuts. */\n  heading?: string;\n  /**\n   * Controls the layout variant of each shortcut card.\n   * - `stacked`: large icon above the label (default card style).\n   * - `inline`: small icon inline to the left of the label (list/link style).\n   * @default 'inline'\n   */\n  variant?: 'stacked' | 'inline';\n  /** Ref for the root card element. */\n  ref?: Ref<HTMLDivElement>;\n}\n\nexport type ShortcutsProps = ShortcutsBaseProps & (ShortcutsWithItems | ShortcutsWithCategories);\n"]}

package/lib/components/Tasks/TaskCard.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TaskCard.d.ts","sourceRoot":"","sources":["../../../src/components/Tasks/TaskCard.tsx"],"names":[],"mappings":"AAsBA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,SAAS,CAAC;AAE9C,UAAU,aAAa;IACrB,KAAK,EAAE,cAAc,CAAC;IACtB,eAAe,EAAE,CAAC,KAAK,EAAE,cAAc,KAAK,IAAI,CAAC;CAClD;AA4BD,QAAA,MAAM,QAAQ,GAAI,4BAA4B,aAAa,4CAmD1D,CAAC;AAEF,eAAe,QAAQ,CAAC"}
+{"version":3,"file":"TaskCard.d.ts","sourceRoot":"","sources":["../../../src/components/Tasks/TaskCard.tsx"],"names":[],"mappings":"AAuBA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,SAAS,CAAC;AAE9C,UAAU,aAAa;IACrB,KAAK,EAAE,cAAc,CAAC;IACtB,eAAe,EAAE,CAAC,KAAK,EAAE,cAAc,KAAK,IAAI,CAAC;CAClD;AA4BD,QAAA,MAAM,QAAQ,GAAI,4BAA4B,aAAa,4CAuD1D,CAAC;AAEF,eAAe,QAAQ,CAAC"}

package/lib/components/Tasks/TaskCard.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import styled, { css } from 'styled-components';
-import { Card, CardHeader, CardContent, CardFooter, Button, Count, Flex, Text, VisuallyHiddenText, Progress, EmptyState, useI18n, defaultThemeProp, StyledEmptyState } from '@pega/cosmos-react-core';
+import { Card, CardHeader, CardContent, CardFooter, Button, Count, Flex, Text, VisuallyHiddenText, Progress, EmptyState, useI18n, createClassName, defaultThemeProp, StyledEmptyState } from '@pega/cosmos-react-core';
 import { StyledCardHeader } from '@pega/cosmos-react-core/lib/components/Card/CardHeader';
 import { StyledCardContent } from '@pega/cosmos-react-core/lib/components/Card/CardContent';
 import TaskList from './TaskList';
@@ -26,11 +26,14 @@ const StyledHeadingFlex = styled(Flex) `
 StyledHeadingFlex.defaultProps = defaultThemeProp;
 const TaskCard = ({ group, onShowMoreClick }) => {
     const { name, visual, items, count = items.length, loadingMore = false } = group;
+    const cardClassName = createClassName('task-card', group.className, {
+        approvals: !!group.isApprovals
+    });
     const t = useI18n();
     const cardItemLimit = 3;
     const displayItems = items.slice(0, cardItemLimit);
     const hasShowMore = items.length > cardItemLimit || (count !== undefined && count > items.length);
-    return (_jsxs(StyledTaskCard, { children: [_jsxs(CardHeader, { container: { justify: 'start', alignItems: 'center', gap: 1.5 }, children: [visual && _jsx(Flex, { item: { shrink: 0 }, children: visual }), _jsx(StyledHeadingFlex, { item: { grow: 0 }, children: _jsx(Text, { variant: 'h3', children: name }) }), count > cardItemLimit ? (_jsx(Count, { children: count })) : (_jsx(VisuallyHiddenText, { children: t('task_count', [count], { count }) }))] }), _jsx(CardContent, { children: displayItems.length > 0 ? (_jsx(TaskList, { items: displayItems, openButtonIconOnly: true })) : (_jsx(EmptyState, {})) }), _jsx(Progress, { placement: 'block', visible: loadingMore }), hasShowMore && (_jsx(CardFooter, { justify: 'center', children: _jsx(Button, { variant: 'link', onClick: () => {
+    return (_jsxs(StyledTaskCard, { className: cardClassName, children: [_jsxs(CardHeader, { container: { justify: 'start', alignItems: 'center', gap: 1.5 }, children: [visual && _jsx(Flex, { item: { shrink: 0 }, children: visual }), _jsx(StyledHeadingFlex, { item: { grow: 0 }, children: _jsx(Text, { variant: 'h3', children: name }) }), count > cardItemLimit ? (_jsx(Count, { children: count })) : (_jsx(VisuallyHiddenText, { children: t('task_count', [count], { count }) }))] }), _jsx(CardContent, { children: displayItems.length > 0 ? (_jsx(TaskList, { items: displayItems, openButtonIconOnly: true })) : (_jsx(EmptyState, {})) }), _jsx(Progress, { placement: 'block', visible: loadingMore }), hasShowMore && (_jsx(CardFooter, { justify: 'center', children: _jsx(Button, { variant: 'link', onClick: () => {
                         group.onShowMore?.();
                         onShowMoreClick(group);
                     }, children: t('show_more') }) }))] }));

package/lib/components/Tasks/TaskCard.js.map

@@ -1 +1 @@
-{"version":3,"file":"TaskCard.js","sourceRoot":"","sources":["../../../src/components/Tasks/TaskCard.tsx"],"names":[],"mappings":"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","sourcesContent":["import styled, { css } from 'styled-components';\n\nimport {\n  Card,\n  CardHeader,\n  CardContent,\n  CardFooter,\n  Button,\n  Count,\n  Flex,\n  Text,\n  VisuallyHiddenText,\n  Progress,\n  EmptyState,\n  useI18n,\n  defaultThemeProp,\n  StyledEmptyState\n} from '@pega/cosmos-react-core';\nimport { StyledCardHeader } from '@pega/cosmos-react-core/lib/components/Card/CardHeader';\nimport { StyledCardContent } from '@pega/cosmos-react-core/lib/components/Card/CardContent';\n\nimport TaskList from './TaskList';\nimport type { TaskGroupProps } from './Tasks';\n\ninterface TaskCardProps {\n  group: TaskGroupProps;\n  onShowMoreClick: (group: TaskGroupProps) => void;\n}\n\nconst StyledTaskCard = styled(Card)(\n  ({ theme }) => css`\n    block-size: 100%;\n\n    ${StyledCardHeader} {\n      border-block-end: 0.0625rem solid ${theme.base.palette['border-line']};\n    }\n\n    ${StyledCardContent} {\n      flex-grow: 1;\n    }\n\n    ${StyledEmptyState} {\n      margin-block: calc(${theme.base.spacing} * 2);\n    }\n  `\n);\n\nStyledTaskCard.defaultProps = defaultThemeProp;\n\nconst StyledHeadingFlex = styled(Flex)`\n  min-width: 0;\n`;\n\nStyledHeadingFlex.defaultProps = defaultThemeProp;\n\nconst TaskCard = ({ group, onShowMoreClick }: TaskCardProps) => {\n  const { name, visual, items, count = items.length, loadingMore = false } = group;\n\n  const t = useI18n();\n\n  const cardItemLimit = 3;\n\n  const displayItems = items.slice(0, cardItemLimit);\n  const hasShowMore = items.length > cardItemLimit || (count !== undefined && count > items.length);\n\n  return (\n    <StyledTaskCard>\n      <CardHeader container={{ justify: 'start', alignItems: 'center', gap: 1.5 }}>\n        {visual && <Flex item={{ shrink: 0 }}>{visual}</Flex>}\n\n        <StyledHeadingFlex item={{ grow: 0 }}>\n          <Text variant='h3'>{name}</Text>\n        </StyledHeadingFlex>\n\n        {count > cardItemLimit ? (\n          <Count>{count}</Count>\n        ) : (\n          <VisuallyHiddenText>{t('task_count', [count], { count })}</VisuallyHiddenText>\n        )}\n      </CardHeader>\n\n      <CardContent>\n        {displayItems.length > 0 ? (\n          <TaskList items={displayItems} openButtonIconOnly />\n        ) : (\n          <EmptyState />\n        )}\n      </CardContent>\n\n      <Progress placement='block' visible={loadingMore} />\n\n      {hasShowMore && (\n        <CardFooter justify='center'>\n          <Button\n            variant='link'\n            onClick={() => {\n              group.onShowMore?.();\n              onShowMoreClick(group);\n            }}\n          >\n            {t('show_more')}\n          </Button>\n        </CardFooter>\n      )}\n    </StyledTaskCard>\n  );\n};\n\nexport default TaskCard;\n"]}
+{"version":3,"file":"TaskCard.js","sourceRoot":"","sources":["../../../src/components/Tasks/TaskCard.tsx"],"names":[],"mappings":"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","sourcesContent":["import styled, { css } from 'styled-components';\n\nimport {\n  Card,\n  CardHeader,\n  CardContent,\n  CardFooter,\n  Button,\n  Count,\n  Flex,\n  Text,\n  VisuallyHiddenText,\n  Progress,\n  EmptyState,\n  useI18n,\n  createClassName,\n  defaultThemeProp,\n  StyledEmptyState\n} from '@pega/cosmos-react-core';\nimport { StyledCardHeader } from '@pega/cosmos-react-core/lib/components/Card/CardHeader';\nimport { StyledCardContent } from '@pega/cosmos-react-core/lib/components/Card/CardContent';\n\nimport TaskList from './TaskList';\nimport type { TaskGroupProps } from './Tasks';\n\ninterface TaskCardProps {\n  group: TaskGroupProps;\n  onShowMoreClick: (group: TaskGroupProps) => void;\n}\n\nconst StyledTaskCard = styled(Card)(\n  ({ theme }) => css`\n    block-size: 100%;\n\n    ${StyledCardHeader} {\n      border-block-end: 0.0625rem solid ${theme.base.palette['border-line']};\n    }\n\n    ${StyledCardContent} {\n      flex-grow: 1;\n    }\n\n    ${StyledEmptyState} {\n      margin-block: calc(${theme.base.spacing} * 2);\n    }\n  `\n);\n\nStyledTaskCard.defaultProps = defaultThemeProp;\n\nconst StyledHeadingFlex = styled(Flex)`\n  min-width: 0;\n`;\n\nStyledHeadingFlex.defaultProps = defaultThemeProp;\n\nconst TaskCard = ({ group, onShowMoreClick }: TaskCardProps) => {\n  const { name, visual, items, count = items.length, loadingMore = false } = group;\n\n  const cardClassName = createClassName('task-card', group.className, {\n    approvals: !!group.isApprovals\n  });\n\n  const t = useI18n();\n\n  const cardItemLimit = 3;\n\n  const displayItems = items.slice(0, cardItemLimit);\n  const hasShowMore = items.length > cardItemLimit || (count !== undefined && count > items.length);\n\n  return (\n    <StyledTaskCard className={cardClassName}>\n      <CardHeader container={{ justify: 'start', alignItems: 'center', gap: 1.5 }}>\n        {visual && <Flex item={{ shrink: 0 }}>{visual}</Flex>}\n\n        <StyledHeadingFlex item={{ grow: 0 }}>\n          <Text variant='h3'>{name}</Text>\n        </StyledHeadingFlex>\n\n        {count > cardItemLimit ? (\n          <Count>{count}</Count>\n        ) : (\n          <VisuallyHiddenText>{t('task_count', [count], { count })}</VisuallyHiddenText>\n        )}\n      </CardHeader>\n\n      <CardContent>\n        {displayItems.length > 0 ? (\n          <TaskList items={displayItems} openButtonIconOnly />\n        ) : (\n          <EmptyState />\n        )}\n      </CardContent>\n\n      <Progress placement='block' visible={loadingMore} />\n\n      {hasShowMore && (\n        <CardFooter justify='center'>\n          <Button\n            variant='link'\n            onClick={() => {\n              group.onShowMore?.();\n              onShowMoreClick(group);\n            }}\n          >\n            {t('show_more')}\n          </Button>\n        </CardFooter>\n      )}\n    </StyledTaskCard>\n  );\n};\n\nexport default TaskCard;\n"]}

package/lib/components/Tasks/Tasks.d.ts

@@ -1,8 +1,8 @@
 import type { ReactNode } from 'react';
-import type { AvatarProps, ForwardProps, ListToolbarProps, NoChildrenProp, SearchInputProps, TestIdProp } from '@pega/cosmos-react-core';
+import type { AvatarProps, BaseProps, ForwardProps, ListToolbarProps, NoChildrenProp, SearchInputProps, TestIdProp } from '@pega/cosmos-react-core';
 import type { ViewSelectorProps } from '@pega/cosmos-react-core/lib/components/ListToolbar/ListToolbar.types';
 import type { TaskItemProps } from './TaskList';
-export interface TaskGroupProps {
+export interface TaskGroupProps extends BaseProps {
     /** Unique key for this group, typically the case type class name. */
     id: string;
     /** Display name for the card header (localized case type label). */

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

@@ -1 +1 @@
-{"version":3,"file":"Tasks.d.ts","sourceRoot":"","sources":["../../../src/components/Tasks/Tasks.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAc,SAAS,EAAE,MAAM,OAAO,CAAC;AAqBnD,OAAO,KAAK,EACV,WAAW,EACX,YAAY,EACZ,gBAAgB,EAChB,cAAc,EACd,gBAAgB,EAChB,UAAU,EACX,MAAM,yBAAyB,CAAC;AAEjC,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,sEAAsE,CAAC;AAG9G,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,YAAY,CAAC;AAIhD,MAAM,WAAW,cAAc;IAC7B,qEAAqE;IACrE,EAAE,EAAE,MAAM,CAAC;IACX,oEAAoE;IACpE,IAAI,EAAE,MAAM,CAAC;IACb,mFAAmF;IACnF,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB,2CAA2C;IAC3C,KAAK,EAAE,aAAa,EAAE,CAAC;IACvB,4EAA4E;IAC5E,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,yEAAyE;IACzE,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,mFAAmF;IACnF,UAAU,CAAC,EAAE,MAAM,IAAI,CAAC;IACxB,mDAAmD;IACnD,WAAW,CAAC,EAAE,OAAO,CAAC;CACvB;AAED,UAAU,cAAe,SAAQ,cAAc,EAAE,UAAU;IACzD,qDAAqD;IACrD,IAAI,EAAE,gBAAgB,CAAC,MAAM,CAAC,CAAC;IAC/B,6CAA6C;IAC7C,MAAM,CAAC,EAAE,IAAI,CAAC,WAAW,EAAE,MAAM,GAAG,MAAM,GAAG,UAAU,GAAG,QAAQ,CAAC,CAAC;IACpE,oCAAoC;IACpC,YAAY,CAAC,EAAE,IAAI,CAAC,iBAAiB,EAAE,OAAO,GAAG,cAAc,GAAG,kBAAkB,CAAC,CAAC;IACtF,qDAAqD;IACrD,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;;OAGG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,mCAAmC;IACnC,MAAM,CAAC,EAAE,IAAI,CAAC,gBAAgB,EAAE,OAAO,GAAG,gBAAgB,CAAC,CAAC;IAC5D,qJAAqJ;IACrJ,cAAc,CAAC,EAAE,MAAM,IAAI,CAAC;IAC5B;;;OAGG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB;;OAEG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB;;;OAGG;IACH,iBAAiB,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;CAC7C;AAED,KAAK,iBAAiB,GAClB;IACE;;;OAGG;IACH,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,sDAAsD;IACtD,KAAK,CAAC,EAAE,aAAa,EAAE,CAAC;IACxB,2CAA2C;IAC3C,MAAM,CAAC,EAAE,KAAK,CAAC;CAChB,GACD;IACE,yBAAyB;IACzB,OAAO,EAAE,OAAO,CAAC;IACjB,4CAA4C;IAC5C,KAAK,CAAC,EAAE,KAAK,CAAC;IACd,iCAAiC;IACjC,MAAM,EAAE,cAAc,EAAE,CAAC;CAC1B,CAAC;AAEN,MAAM,MAAM,UAAU,GAAG,cAAc,GAAG,iBAAiB,CAAC;AAE5D,eAAO,MAAM,WAAW;;;eAA6B,OAAO;kBAAgB,OAAO;kLAiBjF,CAAC;iCAYmB,UAAU,GAAG,YAAY;;;AAiI/C,wBAAmD"}
+{"version":3,"file":"Tasks.d.ts","sourceRoot":"","sources":["../../../src/components/Tasks/Tasks.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAc,SAAS,EAAE,MAAM,OAAO,CAAC;AAqBnD,OAAO,KAAK,EACV,WAAW,EACX,SAAS,EACT,YAAY,EACZ,gBAAgB,EAChB,cAAc,EACd,gBAAgB,EAChB,UAAU,EACX,MAAM,yBAAyB,CAAC;AAEjC,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,sEAAsE,CAAC;AAG9G,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,YAAY,CAAC;AAIhD,MAAM,WAAW,cAAe,SAAQ,SAAS;IAC/C,qEAAqE;IACrE,EAAE,EAAE,MAAM,CAAC;IACX,oEAAoE;IACpE,IAAI,EAAE,MAAM,CAAC;IACb,mFAAmF;IACnF,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB,2CAA2C;IAC3C,KAAK,EAAE,aAAa,EAAE,CAAC;IACvB,4EAA4E;IAC5E,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,yEAAyE;IACzE,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,mFAAmF;IACnF,UAAU,CAAC,EAAE,MAAM,IAAI,CAAC;IACxB,mDAAmD;IACnD,WAAW,CAAC,EAAE,OAAO,CAAC;CACvB;AAED,UAAU,cAAe,SAAQ,cAAc,EAAE,UAAU;IACzD,qDAAqD;IACrD,IAAI,EAAE,gBAAgB,CAAC,MAAM,CAAC,CAAC;IAC/B,6CAA6C;IAC7C,MAAM,CAAC,EAAE,IAAI,CAAC,WAAW,EAAE,MAAM,GAAG,MAAM,GAAG,UAAU,GAAG,QAAQ,CAAC,CAAC;IACpE,oCAAoC;IACpC,YAAY,CAAC,EAAE,IAAI,CAAC,iBAAiB,EAAE,OAAO,GAAG,cAAc,GAAG,kBAAkB,CAAC,CAAC;IACtF,qDAAqD;IACrD,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;;OAGG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,mCAAmC;IACnC,MAAM,CAAC,EAAE,IAAI,CAAC,gBAAgB,EAAE,OAAO,GAAG,gBAAgB,CAAC,CAAC;IAC5D,qJAAqJ;IACrJ,cAAc,CAAC,EAAE,MAAM,IAAI,CAAC;IAC5B;;;OAGG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB;;OAEG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB;;;OAGG;IACH,iBAAiB,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;CAC7C;AAED,KAAK,iBAAiB,GAClB;IACE;;;OAGG;IACH,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,sDAAsD;IACtD,KAAK,CAAC,EAAE,aAAa,EAAE,CAAC;IACxB,2CAA2C;IAC3C,MAAM,CAAC,EAAE,KAAK,CAAC;CAChB,GACD;IACE,yBAAyB;IACzB,OAAO,EAAE,OAAO,CAAC;IACjB,4CAA4C;IAC5C,KAAK,CAAC,EAAE,KAAK,CAAC;IACd,iCAAiC;IACjC,MAAM,EAAE,cAAc,EAAE,CAAC;CAC1B,CAAC;AAEN,MAAM,MAAM,UAAU,GAAG,cAAc,GAAG,iBAAiB,CAAC;AAE5D,eAAO,MAAM,WAAW;;;eAA6B,OAAO;kBAAgB,OAAO;kLAiBjF,CAAC;iCAYmB,UAAU,GAAG,YAAY;;;AAiI/C,wBAAmD"}

package/lib/components/Tasks/Tasks.js.map

@@ -1 +1 @@
-{"version":3,"file":"Tasks.js","sourceRoot":"","sources":["../../../src/components/Tasks/Tasks.tsx"],"names":[],"mappings":"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","sourcesContent":["import { useEffect, useLayoutEffect, useMemo, useRef } from 'react';\nimport type { MouseEvent, ReactNode } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport {\n  Card,\n  CardHeader,\n  CardContent,\n  CardFooter,\n  Button,\n  useI18n,\n  defaultThemeProp,\n  ListToolbar,\n  EmptyState,\n  useTestIds,\n  Avatar,\n  withTestIds,\n  Progress,\n  getActiveElement,\n  useElement\n} from '@pega/cosmos-react-core';\nimport { useMonitoredSize } from '@pega/cosmos-react-core/lib/components/PageTemplates/GridLayout/utils';\nimport type {\n  AvatarProps,\n  ForwardProps,\n  ListToolbarProps,\n  NoChildrenProp,\n  SearchInputProps,\n  TestIdProp\n} from '@pega/cosmos-react-core';\nimport { StyledCardHeader } from '@pega/cosmos-react-core/lib/components/Card/CardHeader';\nimport type { ViewSelectorProps } from '@pega/cosmos-react-core/lib/components/ListToolbar/ListToolbar.types';\n\nimport TaskList, { TaskItem } from './TaskList';\nimport type { TaskItemProps } from './TaskList';\nimport { getTasksTestIds } from './Tasks.test-ids';\nimport TaskCards from './TaskCards';\n\nexport interface TaskGroupProps {\n  /** Unique key for this group, typically the case type class name. */\n  id: string;\n  /** Display name for the card header (localized case type label). */\n  name: string;\n  /** Optional visual element rendered before the heading (e.g. a case-type icon). */\n  visual?: ReactNode;\n  /** Assignments belonging to this group. */\n  items: TaskItemProps[];\n  /** Total count on the server (may exceed items.length before Show More). */\n  count?: number;\n  /** Marks this group as the Approvals card. Controls visual treatment. */\n  isApprovals?: boolean;\n  /** Callback when Show More is clicked for this group (e.g. to trigger a fetch). */\n  onShowMore?: () => void;\n  /** Flag while this group is loading more items. */\n  loadingMore?: boolean;\n}\n\ninterface TasksBaseProps extends NoChildrenProp, TestIdProp {\n  /** Heading text to render at the top of the list. */\n  name: ListToolbarProps['name'];\n  /** A visual to accompany the header text. */\n  avatar?: Pick<AvatarProps, 'name' | 'icon' | 'imageSrc' | 'status'>;\n  /** Definition of view selection. */\n  viewSelector?: Pick<ViewSelectorProps, 'views' | 'onViewSelect' | 'filterInputProps'>;\n  /** Integer representing the total count of tasks. */\n  count?: number;\n  /**\n   * Whether to display the result count in the header.\n   * @default true\n   */\n  showCount?: boolean;\n  /** Opt-in search configuration. */\n  search?: Pick<SearchInputProps, 'value' | 'onSearchChange'>;\n  /** Callback for when to show more/less button is clicked. Lists greater than 3 items will display the show toggle button in its footer if passed. */\n  onExpandToggle?: () => void;\n  /**\n   * Flag indicating more items are being fetched\n   * @default false\n   */\n  loadingMore?: boolean;\n  /**\n   * Whether to fit Tasks widget in the parent element.\n   */\n  fitToParent?: boolean;\n  /**\n   * Callback invoked with the calculated item limit based on available height.\n   * Only fires when fitToParent is true.\n   */\n  onItemLimitChange?: (limit: number) => void;\n}\n\ntype TasksVariantProps =\n  | {\n      /**\n       * Rendering variant.\n       * @default 'list'\n       */\n      variant?: 'list';\n      /** An array of TaskItemProps to generate the list. */\n      items?: TaskItemProps[];\n      /** Not applicable for the list variant. */\n      groups?: never;\n    }\n  | {\n      /** Rendering variant. */\n      variant: 'cards';\n      /** Not applicable for the cards variant. */\n      items?: never;\n      /** Groups to render as cards. */\n      groups: TaskGroupProps[];\n    };\n\nexport type TasksProps = TasksBaseProps & TasksVariantProps;\n\nexport const StyledTasks = styled(Card)<{ openItem?: boolean; fitToParent?: boolean }>(({\n  theme,\n  openItem,\n  fitToParent\n}) => {\n  return openItem\n    ? css`\n        box-shadow: ${theme.base.shadow.low};\n        min-block-size: ${fitToParent ? '100%' : 'auto'};\n      `\n    : css`\n        min-block-size: ${fitToParent ? '100%' : 'auto'};\n\n        ${StyledCardHeader}:not(& & > ${StyledCardHeader}) {\n          padding-block-end: calc(${theme.base.spacing} / 2);\n        }\n      `;\n});\n\nconst StyledCardContent = styled(CardContent)`\n  overflow: auto;\n  flex-grow: 1;\n  flex-basis: 0;\n  min-block-size: 0;\n  min-inline-size: 0;\n`;\n\nStyledTasks.defaultProps = defaultThemeProp;\n\nconst Tasks = (props: TasksProps & ForwardProps) => {\n  const {\n    testId,\n    items = [],\n    name,\n    avatar,\n    viewSelector,\n    count,\n    showCount = true,\n    search,\n    loadingMore = false,\n    fitToParent = false,\n    onExpandToggle,\n    onItemLimitChange,\n    variant,\n    groups,\n    ...restProps\n  } = props;\n  const testIds = useTestIds(testId, getTasksTestIds);\n  const openItem = items.find(item => item.content);\n  const t = useI18n();\n  const toggleButtonRef = useRef<HTMLButtonElement>(null);\n  const progressRef = useRef<HTMLDivElement>(null);\n  const [containerEl, setContainerEl] = useElement<HTMLDivElement>();\n  const containerSize = useMonitoredSize(containerEl, 0);\n\n  const totalCount = count ?? items.length;\n  const hasMore = count !== undefined && count > items.length;\n  const hasFooter = !!(!openItem && onExpandToggle && totalCount > 0);\n\n  const TaskItems = useMemo(() => {\n    return openItem ? (\n      <TaskItem {...openItem} headingTag='h2' />\n    ) : (\n      <TaskList items={items} hasFooter={hasFooter} testId={testIds.root} />\n    );\n  }, [items, openItem]);\n\n  useEffect(() => {\n    if (!loadingMore && getActiveElement() === progressRef.current && toggleButtonRef.current) {\n      toggleButtonRef?.current.focus();\n    }\n  }, [loadingMore]);\n\n  // Measure available height and calculate item limit when fitToParent is enabled\n  useLayoutEffect(() => {\n    if (!fitToParent || !containerEl || !onItemLimitChange || openItem) return;\n\n    const container = containerEl;\n    const containerHeight = container.getBoundingClientRect().height;\n    if (containerHeight === 0) return;\n\n    const header = container.querySelector('header');\n    const footer = container.querySelector('footer');\n    const headerHeight = header ? header.getBoundingClientRect().height : 0;\n    const footerHeight = footer ? footer.getBoundingClientRect().height : 0;\n\n    const listItems = container.querySelectorAll('ul > li');\n    if (listItems.length === 0) return;\n\n    const itemHeight = listItems[0].getBoundingClientRect().height;\n    if (itemHeight === 0) return;\n\n    const availableHeight = containerHeight - headerHeight - footerHeight;\n    const newLimit = Math.max(1, Math.floor(availableHeight / itemHeight));\n\n    onItemLimitChange(newLimit);\n  }, [fitToParent, items, onItemLimitChange, openItem, containerSize]);\n\n  if (variant === 'cards' && groups !== undefined) {\n    return <TaskCards groups={groups} name={name} testId={testId ?? undefined} {...restProps} />;\n  }\n\n  return (\n    <StyledTasks\n      data-testid={testIds.root}\n      {...restProps}\n      openItem={!!openItem}\n      fitToParent={fitToParent}\n      data-app-region\n      data-focusable-form-container=''\n      ref={setContainerEl}\n    >\n      {!openItem && (\n        <CardHeader container={{ justify: 'start', alignItems: 'center', gap: 1 }}>\n          {avatar && <Avatar {...avatar} />}\n          <ListToolbar\n            name={name}\n            headingTag='h2'\n            viewSelector={viewSelector}\n            count={showCount && count !== undefined ? { total: count } : undefined}\n            search={search}\n            item={{ grow: 1 }}\n          />\n        </CardHeader>\n      )}\n\n      {fitToParent ? (\n        <StyledCardContent>{items.length > 0 ? TaskItems : <EmptyState />}</StyledCardContent>\n      ) : (\n        <CardContent>{items.length > 0 ? TaskItems : <EmptyState />}</CardContent>\n      )}\n\n      <Progress placement='block' ref={progressRef} visible={loadingMore} focusOnVisible />\n      {hasFooter && !loadingMore && (\n        <CardFooter justify='center'>\n          <Button\n            data-testid={testIds.showMoreLess}\n            variant='link'\n            aria-label={t(hasMore ? 'show_more' : 'show_less', ['tasks'])}\n            onClick={(e: MouseEvent<HTMLButtonElement>) => {\n              onExpandToggle?.();\n              if (!hasMore) {\n                const { currentTarget } = e;\n                requestAnimationFrame(() => {\n                  if (currentTarget.getBoundingClientRect().top < 0) currentTarget.scrollIntoView();\n                });\n              }\n            }}\n            ref={toggleButtonRef}\n          >\n            {t(hasMore ? 'show_more' : 'show_less')}\n          </Button>\n        </CardFooter>\n      )}\n    </StyledTasks>\n  );\n};\n\nexport default withTestIds(Tasks, getTasksTestIds);\n"]}
+{"version":3,"file":"Tasks.js","sourceRoot":"","sources":["../../../src/components/Tasks/Tasks.tsx"],"names":[],"mappings":"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","sourcesContent":["import { useEffect, useLayoutEffect, useMemo, useRef } from 'react';\nimport type { MouseEvent, ReactNode } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport {\n  Card,\n  CardHeader,\n  CardContent,\n  CardFooter,\n  Button,\n  useI18n,\n  defaultThemeProp,\n  ListToolbar,\n  EmptyState,\n  useTestIds,\n  Avatar,\n  withTestIds,\n  Progress,\n  getActiveElement,\n  useElement\n} from '@pega/cosmos-react-core';\nimport { useMonitoredSize } from '@pega/cosmos-react-core/lib/components/PageTemplates/GridLayout/utils';\nimport type {\n  AvatarProps,\n  BaseProps,\n  ForwardProps,\n  ListToolbarProps,\n  NoChildrenProp,\n  SearchInputProps,\n  TestIdProp\n} from '@pega/cosmos-react-core';\nimport { StyledCardHeader } from '@pega/cosmos-react-core/lib/components/Card/CardHeader';\nimport type { ViewSelectorProps } from '@pega/cosmos-react-core/lib/components/ListToolbar/ListToolbar.types';\n\nimport TaskList, { TaskItem } from './TaskList';\nimport type { TaskItemProps } from './TaskList';\nimport { getTasksTestIds } from './Tasks.test-ids';\nimport TaskCards from './TaskCards';\n\nexport interface TaskGroupProps extends BaseProps {\n  /** Unique key for this group, typically the case type class name. */\n  id: string;\n  /** Display name for the card header (localized case type label). */\n  name: string;\n  /** Optional visual element rendered before the heading (e.g. a case-type icon). */\n  visual?: ReactNode;\n  /** Assignments belonging to this group. */\n  items: TaskItemProps[];\n  /** Total count on the server (may exceed items.length before Show More). */\n  count?: number;\n  /** Marks this group as the Approvals card. Controls visual treatment. */\n  isApprovals?: boolean;\n  /** Callback when Show More is clicked for this group (e.g. to trigger a fetch). */\n  onShowMore?: () => void;\n  /** Flag while this group is loading more items. */\n  loadingMore?: boolean;\n}\n\ninterface TasksBaseProps extends NoChildrenProp, TestIdProp {\n  /** Heading text to render at the top of the list. */\n  name: ListToolbarProps['name'];\n  /** A visual to accompany the header text. */\n  avatar?: Pick<AvatarProps, 'name' | 'icon' | 'imageSrc' | 'status'>;\n  /** Definition of view selection. */\n  viewSelector?: Pick<ViewSelectorProps, 'views' | 'onViewSelect' | 'filterInputProps'>;\n  /** Integer representing the total count of tasks. */\n  count?: number;\n  /**\n   * Whether to display the result count in the header.\n   * @default true\n   */\n  showCount?: boolean;\n  /** Opt-in search configuration. */\n  search?: Pick<SearchInputProps, 'value' | 'onSearchChange'>;\n  /** Callback for when to show more/less button is clicked. Lists greater than 3 items will display the show toggle button in its footer if passed. */\n  onExpandToggle?: () => void;\n  /**\n   * Flag indicating more items are being fetched\n   * @default false\n   */\n  loadingMore?: boolean;\n  /**\n   * Whether to fit Tasks widget in the parent element.\n   */\n  fitToParent?: boolean;\n  /**\n   * Callback invoked with the calculated item limit based on available height.\n   * Only fires when fitToParent is true.\n   */\n  onItemLimitChange?: (limit: number) => void;\n}\n\ntype TasksVariantProps =\n  | {\n      /**\n       * Rendering variant.\n       * @default 'list'\n       */\n      variant?: 'list';\n      /** An array of TaskItemProps to generate the list. */\n      items?: TaskItemProps[];\n      /** Not applicable for the list variant. */\n      groups?: never;\n    }\n  | {\n      /** Rendering variant. */\n      variant: 'cards';\n      /** Not applicable for the cards variant. */\n      items?: never;\n      /** Groups to render as cards. */\n      groups: TaskGroupProps[];\n    };\n\nexport type TasksProps = TasksBaseProps & TasksVariantProps;\n\nexport const StyledTasks = styled(Card)<{ openItem?: boolean; fitToParent?: boolean }>(({\n  theme,\n  openItem,\n  fitToParent\n}) => {\n  return openItem\n    ? css`\n        box-shadow: ${theme.base.shadow.low};\n        min-block-size: ${fitToParent ? '100%' : 'auto'};\n      `\n    : css`\n        min-block-size: ${fitToParent ? '100%' : 'auto'};\n\n        ${StyledCardHeader}:not(& & > ${StyledCardHeader}) {\n          padding-block-end: calc(${theme.base.spacing} / 2);\n        }\n      `;\n});\n\nconst StyledCardContent = styled(CardContent)`\n  overflow: auto;\n  flex-grow: 1;\n  flex-basis: 0;\n  min-block-size: 0;\n  min-inline-size: 0;\n`;\n\nStyledTasks.defaultProps = defaultThemeProp;\n\nconst Tasks = (props: TasksProps & ForwardProps) => {\n  const {\n    testId,\n    items = [],\n    name,\n    avatar,\n    viewSelector,\n    count,\n    showCount = true,\n    search,\n    loadingMore = false,\n    fitToParent = false,\n    onExpandToggle,\n    onItemLimitChange,\n    variant,\n    groups,\n    ...restProps\n  } = props;\n  const testIds = useTestIds(testId, getTasksTestIds);\n  const openItem = items.find(item => item.content);\n  const t = useI18n();\n  const toggleButtonRef = useRef<HTMLButtonElement>(null);\n  const progressRef = useRef<HTMLDivElement>(null);\n  const [containerEl, setContainerEl] = useElement<HTMLDivElement>();\n  const containerSize = useMonitoredSize(containerEl, 0);\n\n  const totalCount = count ?? items.length;\n  const hasMore = count !== undefined && count > items.length;\n  const hasFooter = !!(!openItem && onExpandToggle && totalCount > 0);\n\n  const TaskItems = useMemo(() => {\n    return openItem ? (\n      <TaskItem {...openItem} headingTag='h2' />\n    ) : (\n      <TaskList items={items} hasFooter={hasFooter} testId={testIds.root} />\n    );\n  }, [items, openItem]);\n\n  useEffect(() => {\n    if (!loadingMore && getActiveElement() === progressRef.current && toggleButtonRef.current) {\n      toggleButtonRef?.current.focus();\n    }\n  }, [loadingMore]);\n\n  // Measure available height and calculate item limit when fitToParent is enabled\n  useLayoutEffect(() => {\n    if (!fitToParent || !containerEl || !onItemLimitChange || openItem) return;\n\n    const container = containerEl;\n    const containerHeight = container.getBoundingClientRect().height;\n    if (containerHeight === 0) return;\n\n    const header = container.querySelector('header');\n    const footer = container.querySelector('footer');\n    const headerHeight = header ? header.getBoundingClientRect().height : 0;\n    const footerHeight = footer ? footer.getBoundingClientRect().height : 0;\n\n    const listItems = container.querySelectorAll('ul > li');\n    if (listItems.length === 0) return;\n\n    const itemHeight = listItems[0].getBoundingClientRect().height;\n    if (itemHeight === 0) return;\n\n    const availableHeight = containerHeight - headerHeight - footerHeight;\n    const newLimit = Math.max(1, Math.floor(availableHeight / itemHeight));\n\n    onItemLimitChange(newLimit);\n  }, [fitToParent, items, onItemLimitChange, openItem, containerSize]);\n\n  if (variant === 'cards' && groups !== undefined) {\n    return <TaskCards groups={groups} name={name} testId={testId ?? undefined} {...restProps} />;\n  }\n\n  return (\n    <StyledTasks\n      data-testid={testIds.root}\n      {...restProps}\n      openItem={!!openItem}\n      fitToParent={fitToParent}\n      data-app-region\n      data-focusable-form-container=''\n      ref={setContainerEl}\n    >\n      {!openItem && (\n        <CardHeader container={{ justify: 'start', alignItems: 'center', gap: 1 }}>\n          {avatar && <Avatar {...avatar} />}\n          <ListToolbar\n            name={name}\n            headingTag='h2'\n            viewSelector={viewSelector}\n            count={showCount && count !== undefined ? { total: count } : undefined}\n            search={search}\n            item={{ grow: 1 }}\n          />\n        </CardHeader>\n      )}\n\n      {fitToParent ? (\n        <StyledCardContent>{items.length > 0 ? TaskItems : <EmptyState />}</StyledCardContent>\n      ) : (\n        <CardContent>{items.length > 0 ? TaskItems : <EmptyState />}</CardContent>\n      )}\n\n      <Progress placement='block' ref={progressRef} visible={loadingMore} focusOnVisible />\n      {hasFooter && !loadingMore && (\n        <CardFooter justify='center'>\n          <Button\n            data-testid={testIds.showMoreLess}\n            variant='link'\n            aria-label={t(hasMore ? 'show_more' : 'show_less', ['tasks'])}\n            onClick={(e: MouseEvent<HTMLButtonElement>) => {\n              onExpandToggle?.();\n              if (!hasMore) {\n                const { currentTarget } = e;\n                requestAnimationFrame(() => {\n                  if (currentTarget.getBoundingClientRect().top < 0) currentTarget.scrollIntoView();\n                });\n              }\n            }}\n            ref={toggleButtonRef}\n          >\n            {t(hasMore ? 'show_more' : 'show_less')}\n          </Button>\n        </CardFooter>\n      )}\n    </StyledTasks>\n  );\n};\n\nexport default withTestIds(Tasks, getTasksTestIds);\n"]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pega/cosmos-react-work",
-  "version": "9.19.0",
+  "version": "9.20.0",
   "license": "SEE LICENSE IN LICENSE",
   "author": "Pegasystems",
   "sideEffects": false,
@@ -14,8 +14,8 @@
     "build": "tsc -b tsconfig.build.json"
   },
   "dependencies": {
-    "@pega/cosmos-react-core": "9.19.0",
-    "@pega/cosmos-react-rte": "9.19.0",
+    "@pega/cosmos-react-core": "9.20.0",
+    "@pega/cosmos-react-rte": "9.20.0",
     "@types/react": "^17.0.62 || ^18.3.3",
     "@types/react-dom": "^17.0.20 || ^18.3.0",
     "polished": "^4.1.0",