@pega/cosmos-react-work 9.10.1 → 9.12.0

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

@@ -1 +1 @@
-{"version":3,"file":"Stages.styles.js","sourceRoot":"","sources":["../../../src/components/Stages/Stages.styles.ts"],"names":[],"mappings":"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","sourcesContent":["import styled, { css } from 'styled-components';\n\nimport {\n  calculateFontSize,\n  DateTimeDisplay,\n  defaultThemeProp,\n  Icon,\n  Text,\n  StyledIcon,\n  calculateForegroundColor\n} from '@pega/cosmos-react-core';\n\nconst stageClipPath = (leftNotch: boolean, rightPoint: boolean, mirrored = false): string => {\n  if (mirrored) {\n    // RTL: mirror the LTR clip-path polygon\n    const points = ['100% 0', '0 0'];\n    if (leftNotch) {\n      points.push('var(--stage-chevron-width) 0', '0 50%', 'var(--stage-chevron-width) 100%');\n    } else {\n      points.push('0 100%');\n    }\n    points.push('100% 100%');\n    if (rightPoint) {\n      points.push('calc(100% - var(--stage-chevron-width)) 50%');\n    }\n    return `clip-path: polygon(${points.join(', ')});`;\n  }\n\n  const points = ['0 0', '100% 0'];\n  if (rightPoint) {\n    points.push(\n      'calc(100% - var(--stage-chevron-width)) 0',\n      '100% 50%',\n      'calc(100% - var(--stage-chevron-width)) 100%'\n    );\n  } else {\n    points.push('100% 100%');\n  }\n  points.push('0 100%');\n  if (leftNotch) {\n    points.push('var(--stage-chevron-width) 50%');\n  }\n  return `clip-path: polygon(${points.join(', ')});`;\n};\n\n// === Chevron Configuration ===\n// Centralizes spacing and border thickness via CSS custom properties set at StyledStages\nconst chevronConfig = {\n  width: 'calc(1.156 * var(--chevron-spacing))',\n  coarseWidth: 'calc(1.4375 * var(--chevron-spacing))',\n  squareSize: 'calc(3 * var(--chevron-spacing))',\n  coarseSquareSize: 'calc(3.5 * var(--chevron-spacing))',\n  offsetLeft: 'calc(0.688 * var(--chevron-spacing))',\n  offsetRight: 'calc(1.156 * var(--chevron-spacing))',\n  coarseOffsetLeft: 'calc(0.688 * var(--chevron-spacing))',\n  coarseOffsetRight: 'calc(1.5 * var(--chevron-spacing))'\n} as const;\n\n// === Chevron Helpers ===\n// After team discussion we decided to use logical properties throughout — `inset-block-start`\n// instead of `top`, and `border-block-start/end-width` instead of `border-top/bottom-width` —\n// for consistency with the rest of the file (which already uses logical inline-axis properties).\nconst createChevronPseudo = (borderWidth: string, borderColor: string, size: string): string => `\n  content: '';\n  position: absolute;\n  display: block;\n  inset-block-start: calc(50% - ${size} / 2);\n  width: ${size};\n  height: ${size};\n  border-style: solid;\n  border-color: ${borderColor};\n  border-inline-end-width: ${borderWidth};\n  border-inline-start-width: 0;\n  border-block-start-width: ${borderWidth};\n  border-block-end-width: 0;\n  transform: rotateZ(45deg) skew(15deg, 15deg);\n  pointer-events: none;\n`;\n\nconst createChevronBaseStyles = (config: typeof chevronConfig, borderThicknessVar: string) => css`\n  &:not(:first-of-type)::before,\n  &:not(:last-of-type)::after {\n    border-inline-end-width: calc(1.5 * ${borderThicknessVar});\n    border-block-start-width: calc(1.5 * ${borderThicknessVar});\n  }\n\n  &:not(:first-of-type)::before {\n    inset-inline-start: calc(-1 * ${config.width} - ${config.offsetLeft});\n  }\n\n  &:not(:last-of-type)::after {\n    inset-inline-end: calc(-1 * ${config.width} + ${config.offsetRight});\n  }\n`;\n\nconst createChevronInteractiveStates = (\n  config: typeof chevronConfig,\n  borderThicknessVar: string,\n  includeHover = true\n) => css`\n  ${includeHover &&\n  css`\n    &:has(button:hover)::before,\n    &:has(button:hover)::after {\n      border-inline-end-width: calc(2 * ${borderThicknessVar});\n      border-block-start-width: calc(2 * ${borderThicknessVar});\n    }\n  `}\n  &:has(button:focus-visible)::before,\n  &:has(button:focus-visible)::after,\n  &:has(button:active)::before,\n  &:has(button:active)::after {\n    border-inline-end-width: calc(2 * ${borderThicknessVar});\n    border-block-start-width: calc(2 * ${borderThicknessVar});\n  }\n`;\n\nexport const StyledStages = styled.ol(({ theme }) => {\n  return css`\n    --chevron-spacing: ${theme.base.spacing};\n    --chevron-border-thickness: ${theme.components.button['border-width']};\n    background-color: ${theme.base.palette['primary-background']};\n    border-radius: ${theme.components.card['border-radius']};\n    display: flex;\n    padding: 0;\n    width: 100%;\n    overflow: hidden;\n    list-style: none;\n\n    &:has(:focus-visible) {\n      box-shadow: ${theme.base.shadow['focus-group']};\n    }\n  `;\n});\n\nStyledStages.defaultProps = defaultThemeProp;\n\nexport const StyledInnerStage = styled.span<{ ellipsis?: boolean }>(props => {\n  return css`\n    display: inline-block;\n    text-align: center;\n    white-space: nowrap;\n    ${props.ellipsis &&\n    css`\n      overflow: hidden;\n      text-overflow: ellipsis;\n    `}\n  `;\n});\n\nStyledInnerStage.defaultProps = defaultThemeProp;\n\nexport const StyledStage = styled.button<{\n  status: 'completed' | 'current' | 'pending';\n  readOnly?: boolean;\n}>(\n  ({\n    theme: {\n      base: { palette, 'hit-area': hitArea, transparency, 'font-weight': fontWeight },\n      components: {\n        'case-view': { stages }\n      }\n    },\n    status,\n    readOnly\n  }) => {\n    const stageForeground = calculateForegroundColor(\n      stages.status[status].background,\n      stages.status[status]['foreground-color']\n    );\n\n    return css`\n      background: ${stages.status[status].background};\n      color: ${stageForeground};\n      outline: none;\n      border-color: transparent;\n      border-width: calc(2 * var(--chevron-border-thickness)) 0;\n      border-style: solid;\n      position: relative;\n\n      /* Browsers do not reliably apply flex align-items: stretch to <button> elements.\n       * Adding 0.0625rem (1px at default font size) to min-height compensates so the button fills its <li> container,\n       * keeping the clipped chevron background flush with the top and bottom borders. */\n      min-height: calc(4 * var(--chevron-spacing) + 0.0625rem);\n      padding-inline-start: calc(2 * var(--chevron-spacing));\n      padding-inline-end: var(--chevron-spacing);\n      margin-inline-start: 0;\n      margin-inline-end: 0;\n      width: calc(100% + ${chevronConfig.width});\n      --stage-chevron-width: ${chevronConfig.width};\n\n      ${StyledIcon}, ${StyledInnerStage} {\n        transform: translateX(calc(-0.25 * var(--chevron-spacing)));\n      }\n      ${stageClipPath(true, true)}\n\n      [dir='rtl'] & ${StyledIcon},\n      [dir='rtl'] & ${StyledInnerStage} {\n        transform: translateX(calc(0.25 * var(--chevron-spacing)));\n      }\n\n      [dir='rtl'] & {\n        ${stageClipPath(true, true, true)}\n      }\n\n      ${!readOnly &&\n      css`\n        &:hover {\n          border-color: ${palette['border-line']};\n        }\n      `}\n\n      &:focus-visible {\n        border-color: ${palette.interactive};\n      }\n\n      &:active {\n        border-color: ${palette.interactive};\n\n        ${StyledInnerStage} {\n          opacity: ${transparency['transparent-3']};\n        }\n      }\n\n      &[aria-current] {\n        ${StyledInnerStage} {\n          font-weight: ${fontWeight.bold};\n          opacity: 1;\n        }\n\n        ${!readOnly &&\n        css`\n          &:hover {\n            ${StyledInnerStage} {\n              opacity: ${transparency['transparent-2']};\n            }\n          }\n        `}\n      }\n\n      @media (pointer: coarse) {\n        min-height: ${hitArea['finger-min']};\n        padding-inline-start: calc(2.25 * var(--chevron-spacing));\n        width: calc(100% + ${chevronConfig.coarseWidth});\n        --stage-chevron-width: ${chevronConfig.coarseWidth};\n      }\n\n      ${StyledIcon} {\n        & ~ ${StyledInnerStage} {\n          margin-inline-start: 0.25rem;\n        }\n      }\n\n      ${StyledInnerStage} {\n        opacity: ${transparency['transparent-2']};\n      }\n    `;\n  }\n);\n\nStyledStage.defaultProps = defaultThemeProp;\n\nexport const StyledStageCompleteIcon = styled(Icon)(({\n  theme: {\n    components: {\n      'case-view': {\n        stages: {\n          status: {\n            completed: { 'foreground-color': foregroundColor, background }\n          }\n        }\n      }\n    }\n  }\n}) => {\n  const stageForeground = calculateForegroundColor(background, foregroundColor);\n  return css`\n    color: ${stageForeground};\n  `;\n});\nStyledStageCompleteIcon.defaultProps = defaultThemeProp;\n\nexport const StyledStageText = styled(Text)<{ isCurrent?: boolean }>(\n  ({ theme, isCurrent }) => css`\n    font-weight: ${isCurrent ? theme.base['font-weight'].bold : theme.base['font-weight'].normal};\n  `\n);\n\nStyledStageText.defaultProps = defaultThemeProp;\n\nexport const StyledStageContainer = styled.li<{\n  readOnly?: boolean;\n}>(\n  ({\n    theme: {\n      base: { palette },\n      components: {\n        card: { 'border-radius': borderRadius }\n      }\n    },\n    readOnly\n  }) => {\n    return css`\n      display: flex;\n      position: relative;\n      margin-inline-start: calc(-1 * ${chevronConfig.width});\n\n      &:first-of-type {\n        margin-inline-start: 0;\n      }\n\n      /* Resting z-index: for same-z siblings, DOM order determines paint order.\n       * All non-last <li>s have z-index:1 so the later (right) <li>'s ::before paints on top\n       * at internal boundaries; the last <li> has no z-index so its left neighbor's ::after\n       * wins at the final boundary. On hover/focus/active, the interacting <li> gains z:2/3\n       * and its own pseudo-element surfaces for that boundary, regardless of which side. */\n      &:not(:last-of-type) {\n        z-index: 1;\n      }\n\n      &:has(button:focus-visible),\n      &:has(button:active) {\n        z-index: 2;\n      }\n\n      ${!readOnly &&\n      css`\n        &:has(button:hover) {\n          z-index: 3;\n        }\n      `}\n\n      @media (pointer: coarse) {\n        margin-inline-start: calc(-1 * ${chevronConfig.coarseWidth});\n      }\n\n      &:not(:first-of-type)::before {\n        ${createChevronPseudo(\n          'calc(2 * var(--chevron-border-thickness))',\n          palette['border-line'],\n          chevronConfig.squareSize\n        )}\n        /* Elevate ::before above the button so it renders via the same pathway as ::after.\n         * Without z-index, ::before (first in DOM) is painted first and then covered by the\n         * button, making it only partially visible through the clip-path notch window. This\n         * causes thicker interactive-state borders (3×) to look thinner on the left boundary\n         * than on the right (::after, which paints last and is always fully visible).\n         * The ::before tip's rightmost extent is at --stage-chevron-width from the <li> start,\n         * which is before the stage text (padding-inline-start: 2 × spacing), so no content overlap. */\n        z-index: 1;\n      }\n\n      &:not(:last-of-type)::after {\n        ${createChevronPseudo(\n          'calc(2 * var(--chevron-border-thickness))',\n          palette['border-line'],\n          chevronConfig.squareSize\n        )}\n      }\n\n      /* Chevron positioning: 45° rotated squares create visual tips via offsets:\n       * left ≈ 0.688 × spacing, right ≈ 1.15 × spacing (accounts for skew correction) */\n\n      [dir='rtl'] &::before,\n      [dir='rtl'] &::after {\n        transform: rotateZ(-45deg) skew(-15deg, -15deg);\n      }\n\n      /* Thicken chevrons to visually match button top/bottom border on any colored state.\n       * At 45° rotation, border appears 1/sin(45°) ≈ 0.707× thinner, so 2× border ≈ 1.4× horizontal border weight. */\n      ${createChevronBaseStyles(chevronConfig, 'var(--chevron-border-thickness)')}\n      ${createChevronInteractiveStates(chevronConfig, 'var(--chevron-border-thickness)', !readOnly)}\n\n      ${!readOnly &&\n      css`\n        &:has(button:hover)::before,\n        &:has(button:hover)::after {\n          border-color: ${palette['border-line']};\n        }\n      `}\n\n      &:has(button:focus-visible)::before,\n      &:has(button:focus-visible)::after {\n        border-color: ${palette.interactive};\n      }\n\n      &:has(button:active)::before,\n      &:has(button:active)::after {\n        border-color: ${palette.interactive};\n      }\n\n      @media (pointer: coarse) {\n        &:not(:first-of-type)::before,\n        &:not(:last-of-type)::after {\n          inset-block-start: calc(50% - ${chevronConfig.coarseSquareSize} / 2);\n          width: ${chevronConfig.coarseSquareSize};\n          height: ${chevronConfig.coarseSquareSize};\n        }\n\n        &:not(:first-of-type)::before {\n          inset-inline-start: calc(\n            -1 * ${chevronConfig.coarseWidth} - ${chevronConfig.coarseOffsetLeft}\n          );\n        }\n\n        &:not(:last-of-type)::after {\n          inset-inline-end: calc(\n            -1 * ${chevronConfig.coarseWidth} + ${chevronConfig.coarseOffsetRight}\n          );\n        }\n      }\n\n      &:first-of-type > ${StyledStage} {\n        --stage-chevron-width: ${chevronConfig.width};\n        border-start-start-radius: ${borderRadius};\n        border-end-start-radius: ${borderRadius};\n        width: calc(100% + (2 * var(--stage-chevron-width)));\n        padding-inline-start: calc(var(--chevron-spacing));\n        ${stageClipPath(false, true)}\n\n        ${!readOnly &&\n        css`\n          /* Inline-start interactive indicator via inset shadow — avoids border-color bleeding through gradient backgrounds */\n          &:hover {\n            box-shadow: inset calc(2 * var(--chevron-border-thickness)) 0 0\n              ${palette['border-line']};\n\n            [dir='rtl'] & {\n              box-shadow: inset calc(-2 * var(--chevron-border-thickness)) 0 0\n                ${palette['border-line']};\n            }\n          }\n        `}\n\n        &:focus-visible,\n        &:active {\n          box-shadow: inset calc(2 * var(--chevron-border-thickness)) 0 0 ${palette.interactive};\n\n          [dir='rtl'] & {\n            box-shadow: inset calc(-2 * var(--chevron-border-thickness)) 0 0 ${palette.interactive};\n          }\n        }\n\n        @media (pointer: coarse) {\n          --stage-chevron-width: ${chevronConfig.coarseWidth};\n          width: calc(100% + (2 * var(--stage-chevron-width)));\n        }\n      }\n\n      &:last-of-type > ${StyledStage} {\n        --stage-chevron-width: ${chevronConfig.width};\n        border-start-end-radius: ${borderRadius};\n        border-end-end-radius: ${borderRadius};\n        border-inline-end-width: calc(2 * var(--chevron-border-thickness));\n        padding-inline-end: 0;\n        width: 100%;\n        ${stageClipPath(true, false)}\n\n        @media (pointer: coarse) {\n          --stage-chevron-width: ${chevronConfig.coarseWidth};\n        }\n      }\n\n      [dir='rtl'] &:first-of-type > ${StyledStage} {\n        ${stageClipPath(true, false, true)}\n      }\n\n      [dir='rtl'] &:last-of-type > ${StyledStage} {\n        ${stageClipPath(false, true, true)}\n      }\n    `;\n  }\n);\n\nStyledStageContainer.defaultProps = defaultThemeProp;\n\nexport const StyledStepsContainer = styled.ol(({ theme }) => {\n  return css`\n    list-style-type: none;\n    margin: calc(2 * ${theme.base.spacing}) 0 calc(3 * ${theme.base.spacing});\n\n    &:empty {\n      margin-block-end: 0;\n    }\n  `;\n});\n\nStyledStepsContainer.defaultProps = defaultThemeProp;\n\nexport const StyledStep = styled.li<{ completed: boolean }>(({ completed, theme }) => {\n  const textOpacity = completed ? theme.base.transparency['transparent-2'] : 1;\n\n  return css`\n    border-radius: 0;\n    margin-block-end: calc(${theme.base.spacing});\n    color: ${theme.base.palette['foreground-color']};\n\n    &:last-child {\n      margin-block-end: 0;\n    }\n\n    & > ${StyledIcon} {\n      text-align: center;\n    }\n\n    div {\n      opacity: ${textOpacity};\n    }\n  `;\n});\n\nStyledStep.defaultProps = defaultThemeProp;\n\nexport const StyledDateTimeDisplay = styled(DateTimeDisplay)(({ theme }) => {\n  const fontSize = calculateFontSize(theme.base['font-size'], theme.base['font-scale']);\n  return css`\n    font-size: ${fontSize.xs};\n    opacity: ${theme.base.transparency['transparent-2']};\n  `;\n});\n\nStyledDateTimeDisplay.defaultProps = defaultThemeProp;\n\nexport const StyledStageGlimpse = styled.div(({ theme }) => {\n  return css`\n    max-width: ${theme.base['content-width'].sm};\n  `;\n});\n\nStyledStageGlimpse.defaultProps = defaultThemeProp;\n\nexport const StyledStagesDescription = styled.p`\n  display: none;\n`;\n\nStyledStagesDescription.defaultProps = defaultThemeProp;\n"]}
+{"version":3,"file":"Stages.styles.js","sourceRoot":"","sources":["../../../src/components/Stages/Stages.styles.ts"],"names":[],"mappings":"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","sourcesContent":["import styled, { css } from 'styled-components';\nimport { transparentize } from 'polished';\n\nimport {\n  calculateFontSize,\n  DateTimeDisplay,\n  defaultThemeProp,\n  Icon,\n  Text,\n  StyledIcon,\n  calculateForegroundColor\n} from '@pega/cosmos-react-core';\n\nconst stageClipPath = (leftNotch: boolean, rightPoint: boolean, mirrored = false): string => {\n  if (mirrored) {\n    // RTL: mirror the LTR clip-path polygon\n    const points = ['100% 0', '0 0'];\n    if (leftNotch) {\n      points.push('var(--stage-chevron-width) 0', '0 50%', 'var(--stage-chevron-width) 100%');\n    } else {\n      points.push('0 100%');\n    }\n    points.push('100% 100%');\n    if (rightPoint) {\n      points.push('calc(100% - var(--stage-chevron-width)) 50%');\n    }\n    return `clip-path: polygon(${points.join(', ')});`;\n  }\n\n  const points = ['0 0', '100% 0'];\n  if (rightPoint) {\n    points.push(\n      'calc(100% - var(--stage-chevron-width)) 0',\n      '100% 50%',\n      'calc(100% - var(--stage-chevron-width)) 100%'\n    );\n  } else {\n    points.push('100% 100%');\n  }\n  points.push('0 100%');\n  if (leftNotch) {\n    points.push('var(--stage-chevron-width) 50%');\n  }\n  return `clip-path: polygon(${points.join(', ')});`;\n};\n\n// === Chevron Configuration ===\n// Centralizes spacing and border thickness via CSS custom properties set at StyledStages\nconst chevronConfig = {\n  // Horizontal projection of the rotated border-square forming the chevron point (fine pointer).\n  // Derived from the border-square size × cos(45° + skew). Tuned to visually align with the stage height.\n  // All values scaled by 1.25× relative to the original 4× spacing design (now 5× spacing height).\n  width: 'calc(1.445 * var(--chevron-spacing))',\n  // Same horizontal projection for coarse/touch pointer (larger square, proportionally wider point).\n  coarseWidth: 'calc(1.797 * var(--chevron-spacing))',\n  // Side length of the rotated border-square forming the chevron (fine pointer: 3.75× base spacing).\n  squareSize: 'calc(3.75 * var(--chevron-spacing))',\n  // Side length of the rotated border-square for coarse/touch pointer (5× base spacing).\n  coarseSquareSize: 'calc(5 * var(--chevron-spacing))',\n  // Distance to inset the ::before notch from the left edge of the stage (fine pointer).\n  // 0.86 ≈ width − half-border-overlap, keeps the notch flush with the preceding chevron point.\n  offsetLeft: 'calc(0.86 * var(--chevron-spacing))',\n  // Distance to inset the ::after point from the right edge of the stage (fine pointer).\n  // Equal to `width` so the point extends exactly one chevron-width beyond the stage boundary.\n  offsetRight: 'calc(1.445 * var(--chevron-spacing))',\n  // Coarse-pointer equivalents of offsetLeft/offsetRight, scaled to match coarseWidth/coarseSquareSize.\n  coarseOffsetLeft: 'calc(1.2875 * var(--chevron-spacing))',\n  coarseOffsetRight: 'calc(1.797 * var(--chevron-spacing))'\n} as const;\n\n// === Chevron Helpers ===\n// After team discussion we decided to use logical properties throughout — `inset-block-start`\n// instead of `top`, and `border-block-start/end-width` instead of `border-top/bottom-width` —\n// for consistency with the rest of the file (which already uses logical inline-axis properties).\nconst createChevronPseudo = (borderWidth: string, borderColor: string, size: string): string => `\n  content: '';\n  position: absolute;\n  display: block;\n  inset-block-start: calc(50% - ${size} / 2);\n  width: ${size};\n  height: ${size};\n  border-style: solid;\n  border-color: ${borderColor};\n  border-inline-end-width: ${borderWidth};\n  border-inline-start-width: 0;\n  border-block-start-width: ${borderWidth};\n  border-block-end-width: 0;\n  transform: rotateZ(45deg) skew(15deg, 15deg);\n  pointer-events: none;\n`;\n\nconst createChevronBaseStyles = (config: typeof chevronConfig, borderThicknessVar: string) => css`\n  &:not(:nth-of-type(-n + 2))::before,\n  &:not(:nth-last-of-type(-n + 2))::after {\n    border-inline-end-width: calc(1.5 * ${borderThicknessVar});\n    border-block-start-width: calc(1.5 * ${borderThicknessVar});\n  }\n\n  &:not(:nth-of-type(-n + 2))::before {\n    inset-inline-start: calc(-1 * ${config.width} - ${config.offsetLeft});\n  }\n\n  &:not(:nth-last-of-type(-n + 2))::after {\n    inset-inline-end: calc(-1 * ${config.width} + ${config.offsetRight});\n  }\n`;\n\nconst createChevronInteractiveStates = (\n  config: typeof chevronConfig,\n  borderThicknessVar: string,\n  includeHover = true\n) => css`\n  ${includeHover &&\n  css`\n    &:has(button:hover)::before,\n    &:has(button:hover)::after {\n      border-inline-end-width: calc(2 * ${borderThicknessVar});\n      border-block-start-width: calc(2 * ${borderThicknessVar});\n    }\n  `}\n  &:has(button:focus-visible)::before,\n  &:has(button:focus-visible)::after,\n  &:has(button:active)::before,\n  &:has(button:active)::after {\n    border-inline-end-width: calc(2 * ${borderThicknessVar});\n    border-block-start-width: calc(2 * ${borderThicknessVar});\n  }\n`;\n\n/**\n * Outer wrapper `<div>` for the stages bar. Applies layered scroll-fade masks and\n * reserves scrollbar space so the fade gradient does not overlap the scrollbar track.\n */\nexport const StyledStagesWrapper = styled.div(({ theme }) => {\n  return css`\n    --stages-fade-width: calc(${theme.base.spacing} * 2);\n    --stages-fade-start: 0;\n    --stages-fade-end: 0;\n    --stages-scrollbar-reserve: calc(${theme.base.spacing} * 0.25);\n\n    /* Places gradient stops one physical pixel outside the element boundary,\n     * preventing browser anti-aliasing from creating a semi-transparent seam\n     * at mask edges. 1px is the correct unit here: it must be exactly one CSS pixel\n     * (independent of font-size), so the mask boundary doesn't introduce a seam at the\n     * element edge due to anti-aliasing.\n     * See also StyledSentinel, which uses 1px for the same reason.\n     */\n    /* stylelint-disable-next-line unit-allowed-list -- 1px is intentional; see comment above */\n    --mask-edge-overhang: 1px;\n    position: relative;\n    width: 100%;\n    overflow: hidden;\n    border-radius: ${theme.components.card['border-radius']};\n    border-end-start-radius: var(\n      --stages-wrapper-bottom-radius,\n      ${theme.components.card['border-radius']}\n    );\n    border-end-end-radius: var(\n      --stages-wrapper-bottom-radius,\n      ${theme.components.card['border-radius']}\n    );\n    -webkit-mask-image: linear-gradient(black, black),\n      linear-gradient(\n        to right,\n        transparent calc(-1 * var(--mask-edge-overhang)),\n        black var(--stages-fade-start),\n        black calc(100% - var(--stages-fade-end)),\n        transparent calc(100% + var(--mask-edge-overhang))\n      );\n    mask-image: linear-gradient(black, black),\n      linear-gradient(\n        to right,\n        transparent calc(-1 * var(--mask-edge-overhang)),\n        black var(--stages-fade-start),\n        black calc(100% - var(--stages-fade-end)),\n        transparent calc(100% + var(--mask-edge-overhang))\n      );\n    mask-size:\n      100% var(--stages-scrollbar-reserve),\n      100% calc(100% - var(--stages-scrollbar-reserve));\n    mask-position:\n      0 100%,\n      0 0;\n    mask-repeat: no-repeat, no-repeat;\n\n    [dir='rtl'] & {\n      -webkit-mask-image: linear-gradient(black, black),\n        linear-gradient(\n          to right,\n          transparent calc(-1 * var(--mask-edge-overhang)),\n          black var(--stages-fade-end),\n          black calc(100% - var(--stages-fade-start)),\n          transparent calc(100% + var(--mask-edge-overhang))\n        );\n      mask-image: linear-gradient(black, black),\n        linear-gradient(\n          to right,\n          transparent calc(-1 * var(--mask-edge-overhang)),\n          black var(--stages-fade-end),\n          black calc(100% - var(--stages-fade-start)),\n          transparent calc(100% + var(--mask-edge-overhang))\n        );\n    }\n\n    &:has(:focus-visible) {\n      box-shadow: ${theme.base.shadow['focus-group']};\n    }\n\n    @media (pointer: coarse) {\n      --stages-fade-width: calc(${theme.base.spacing} * 3);\n      -webkit-mask-image: linear-gradient(\n        to right,\n        transparent calc(-1 * var(--mask-edge-overhang)),\n        black var(--stages-fade-start),\n        black calc(100% - var(--stages-fade-end)),\n        transparent calc(100% + var(--mask-edge-overhang))\n      );\n      mask-image: linear-gradient(\n        to right,\n        transparent calc(-1 * var(--mask-edge-overhang)),\n        black var(--stages-fade-start),\n        black calc(100% - var(--stages-fade-end)),\n        transparent calc(100% + var(--mask-edge-overhang))\n      );\n      mask-size: 100% 100%;\n      mask-position: 0 0;\n      mask-repeat: no-repeat;\n\n      [dir='rtl'] & {\n        -webkit-mask-image: linear-gradient(\n          to right,\n          transparent calc(-1 * var(--mask-edge-overhang)),\n          black var(--stages-fade-end),\n          black calc(100% - var(--stages-fade-start)),\n          transparent calc(100% + var(--mask-edge-overhang))\n        );\n        mask-image: linear-gradient(\n          to right,\n          transparent calc(-1 * var(--mask-edge-overhang)),\n          black var(--stages-fade-end),\n          black calc(100% - var(--stages-fade-start)),\n          transparent calc(100% + var(--mask-edge-overhang))\n        );\n      }\n    }\n  `;\n});\n\nStyledStagesWrapper.defaultProps = defaultThemeProp;\n\n/**\n * Scrollable `<ol>` containing all stage chevron items. Sets the `--chevron-spacing`\n * and `--chevron-border-thickness` custom properties consumed by child elements.\n */\nexport const StyledStages = styled.ol(({ theme }) => {\n  return css`\n    --chevron-spacing: ${theme.base.spacing};\n    --chevron-border-thickness: ${theme.components.button['border-width']};\n    background: ${theme.components.card.background};\n    border-radius: ${theme.components.card['border-radius']};\n    display: flex;\n    padding: 0;\n    width: 100%;\n    overflow-x: auto;\n    overflow-y: hidden;\n    list-style: none;\n    scrollbar-width: thin;\n    scrollbar-color: transparent transparent;\n\n    &:hover,\n    &:focus-within {\n      scrollbar-color: var(\n          --stages-scrollbar-thumb,\n          ${transparentize(0.4, theme.base.palette['border-line'])}\n        )\n        var(--stages-scrollbar-track, transparent);\n    }\n\n    &::-webkit-scrollbar {\n      height: 0.25rem;\n    }\n\n    @media (pointer: coarse) {\n      scrollbar-width: none;\n\n      &::-webkit-scrollbar {\n        display: none;\n      }\n    }\n  `;\n});\n\nStyledStages.defaultProps = defaultThemeProp;\n\n/**\n * A sentinel is an invisible 1 px <li> placed at each end of the scrollable stage list.\n * It is observed by an IntersectionObserver; when it scrolls out of view, the component sets\n * --stages-fade-start or --stages-fade-end to show a gradient fade indicating more stages\n * are reachable by scrolling. When it comes back into view the property is reset to 0.\n *\n * Sentinel elements carry aria-hidden=\"true\" so they are valid list items semantically.\n * Because styled-components scopes all CSS to a generated class, the chevron and layout rules\n * in StyledStageContainer never apply to these elements — they carry a different class.\n * CSS type-based selectors (:nth-of-type, :nth-last-of-type) in StyledStageContainer are\n * offset by 1 at each end to skip the sentinels and target only real stage items.\n */\nexport const StyledSentinel = styled.li`\n  flex-shrink: 0;\n\n  /* NOTE: the sentinel must occupy\n   * a single physical pixel so IntersectionObserver can detect it at threshold 0 while having\n   * negligible layout impact. A rem value could collapse to zero at small font sizes.\n   */\n  /* stylelint-disable-next-line unit-allowed-list -- 1px is intentional */\n  width: 1px;\n  /* stylelint-disable-next-line unit-allowed-list -- 1px is intentional */\n  height: 1px;\n  padding: 0;\n  margin: 0;\n  pointer-events: none;\n\n  /* Collapse the sentinel's layout footprint to zero on the side facing the stages.\n   * Without this, each 1px sentinel creates a visible gap between the stage buttons\n   * and the left/right edges of the wrapper. The sentinel remains in flow (required\n   * for IntersectionObserver scroll detection) but no longer displaces stage content.\n   */\n  &:first-of-type {\n    /* stylelint-disable-next-line unit-allowed-list -- 1px matches sentinel width */\n    margin-inline-end: -1px;\n  }\n\n  &:last-of-type {\n    /* stylelint-disable-next-line unit-allowed-list -- 1px matches sentinel width */\n    margin-inline-start: -1px;\n  }\n`;\n\nStyledSentinel.defaultProps = defaultThemeProp;\n\n/**\n * Inner `<span>` holding stage label content. Optionally applies `text-overflow: ellipsis`\n * for stages with long labels.\n */\nexport const StyledInnerStage = styled.span<{ ellipsis?: boolean }>(({ theme, ellipsis }) => {\n  return css`\n    display: inline-flex;\n    align-items: center;\n    gap: calc(0.25 * ${theme.base.spacing});\n    text-align: center;\n    white-space: nowrap;\n    padding-inline-start: calc(0.875 * ${theme.base.spacing});\n    padding-inline-end: calc(1.125 * ${theme.base.spacing});\n    ${ellipsis &&\n    css`\n      overflow: hidden;\n      text-overflow: ellipsis;\n    `}\n  `;\n});\n\nStyledInnerStage.defaultProps = defaultThemeProp;\n\n/**\n * Clickable `<button>` for a single stage. Renders the chevron clip-path shape and\n * applies status-based background and foreground colours.\n */\nexport const StyledStage = styled.button<{\n  status: 'completed' | 'current' | 'pending';\n  readOnly?: boolean;\n}>(\n  ({\n    theme: {\n      base: { palette, 'hit-area': hitArea, transparency, 'font-weight': fontWeight },\n      components: {\n        'case-view': { stages }\n      }\n    },\n    status,\n    readOnly\n  }) => {\n    const stageForeground = calculateForegroundColor(\n      stages.status[status].background,\n      stages.status[status]['foreground-color']\n    );\n\n    return css`\n      background: ${stages.status[status].background};\n      color: ${stageForeground};\n      outline: none;\n      border-color: transparent;\n      border-width: calc(2 * var(--chevron-border-thickness)) 0;\n      border-style: solid;\n      position: relative;\n\n      /* Browsers do not reliably apply flex align-items: stretch to <button> elements.\n       * Adding 0.0625rem (1px at default font size) to min-height compensates so the button fills its <li> container,\n       * keeping the clipped chevron background flush with the top and bottom borders. */\n      min-height: calc(5 * var(--chevron-spacing) + 0.0625rem);\n      padding-inline-start: calc(2 * var(--chevron-spacing));\n      padding-inline-end: var(--chevron-spacing);\n      margin-inline-start: 0;\n      margin-inline-end: 0;\n      width: calc(100% + ${chevronConfig.width});\n      --stage-chevron-width: ${chevronConfig.width};\n\n      ${StyledInnerStage} {\n        transform: translateX(calc(-0.25 * var(--chevron-spacing)));\n        opacity: ${transparency['transparent-2']};\n      }\n      ${stageClipPath(true, true)}\n\n      [dir='rtl'] & ${StyledInnerStage} {\n        transform: translateX(calc(0.25 * var(--chevron-spacing)));\n      }\n\n      [dir='rtl'] & {\n        ${stageClipPath(true, true, true)}\n      }\n\n      ${!readOnly &&\n      css`\n        &:hover {\n          border-color: ${palette['border-line']};\n        }\n      `}\n\n      &:focus-visible {\n        border-color: ${palette.interactive};\n      }\n\n      &:active {\n        border-color: ${palette.interactive};\n\n        ${StyledInnerStage} {\n          opacity: ${transparency['transparent-3']};\n        }\n      }\n\n      &[aria-current] {\n        ${StyledInnerStage} {\n          font-weight: ${fontWeight.bold};\n          opacity: 1;\n        }\n\n        ${!readOnly &&\n        css`\n          &:hover {\n            ${StyledInnerStage} {\n              opacity: ${transparency['transparent-2']};\n            }\n          }\n        `}\n      }\n\n      @media (pointer: coarse) {\n        min-height: ${hitArea['finger-min']};\n        padding-inline-start: calc(2.25 * var(--chevron-spacing));\n        width: calc(100% + ${chevronConfig.coarseWidth});\n        --stage-chevron-width: ${chevronConfig.coarseWidth};\n      }\n    `;\n  }\n);\n\nStyledStage.defaultProps = defaultThemeProp;\n\n/**\n * Checkmark icon shown inside completed stages, tinted to match the stage foreground colour.\n */\nexport const StyledStageCompleteIcon = styled(Icon)(({\n  theme: {\n    components: {\n      'case-view': {\n        stages: {\n          status: {\n            completed: { 'foreground-color': foregroundColor, background }\n          }\n        }\n      }\n    }\n  }\n}) => {\n  const stageForeground = calculateForegroundColor(background, foregroundColor);\n  return css`\n    color: ${stageForeground};\n  `;\n});\nStyledStageCompleteIcon.defaultProps = defaultThemeProp;\n\n/**\n * Stage label text. Renders in bold weight when the stage is the current active stage.\n */\nexport const StyledStageText = styled(Text)<{ isCurrent?: boolean }>(\n  ({ theme, isCurrent }) => css`\n    font-weight: ${isCurrent ? theme.base['font-weight'].bold : theme.base['font-weight'].normal};\n  `\n);\n\nStyledStageText.defaultProps = defaultThemeProp;\n\n/**\n * `<li>` container for a single stage item. Manages negative-margin chevron overlap,\n * pseudo-element positioning, and z-index stacking for interactive states.\n */\nexport const StyledStageContainer = styled.li<{\n  readOnly?: boolean;\n}>(\n  ({\n    theme: {\n      base: { palette },\n      components: {\n        card: { 'border-radius': borderRadius }\n      }\n    },\n    readOnly\n  }) => {\n    return css`\n      display: flex;\n      position: relative;\n      margin-inline-start: calc(-1 * ${chevronConfig.width});\n\n      &:nth-of-type(2) {\n        margin-inline-start: 0;\n      }\n\n      /* Resting z-index: for same-z siblings, DOM order determines paint order.\n       * All non-last <li>s have z-index:1 so the later (right) <li>'s ::before paints on top\n       * at internal boundaries; the last <li> has no z-index so its left neighbor's ::after\n       * wins at the final boundary. On hover/focus/active, the interacting <li> gains z:2/3\n       * and its own pseudo-element surfaces for that boundary, regardless of which side.\n       */\n      &:not(:nth-last-of-type(-n + 2)) {\n        z-index: 1;\n      }\n\n      &:has(button:focus-visible),\n      &:has(button:active) {\n        z-index: 2;\n      }\n\n      ${!readOnly &&\n      css`\n        &:has(button:hover) {\n          z-index: 3;\n        }\n      `}\n\n      @media (pointer: coarse) {\n        margin-inline-start: calc(-1 * ${chevronConfig.coarseWidth});\n      }\n\n      &:not(:nth-of-type(-n + 2))::before {\n        ${createChevronPseudo(\n          'calc(2 * var(--chevron-border-thickness))',\n          palette['border-line'],\n          chevronConfig.squareSize\n        )}\n        /* Elevate ::before above the button so it renders via the same pathway as ::after.\n         * Without z-index, ::before (first in DOM) is painted first and then covered by the\n         * button, making it only partially visible through the clip-path notch window. This\n         * causes thicker interactive-state borders (3×) to look thinner on the left boundary\n         * than on the right (::after, which paints last and is always fully visible).\n         * The ::before tip's rightmost extent is at --stage-chevron-width from the <li> start,\n         * which is before the stage text (padding-inline-start: 2 × spacing), so no content overlap.\n         */\n        z-index: 1;\n      }\n\n      &:not(:nth-last-of-type(-n + 2))::after {\n        ${createChevronPseudo(\n          'calc(2 * var(--chevron-border-thickness))',\n          palette['border-line'],\n          chevronConfig.squareSize\n        )}\n      }\n\n      /* Chevron positioning: 45° rotated squares create visual tips via offsets:\n       * left ≈ 0.86 × spacing, right ≈ 1.445 × spacing (accounts for skew correction)\n       */\n\n      [dir='rtl'] &::before,\n      [dir='rtl'] &::after {\n        transform: rotateZ(-45deg) skew(-15deg, -15deg);\n      }\n\n      /* Thicken chevrons to visually match button top/bottom border on any colored state.\n       *  At 45° rotation, border appears 1/sin(45°) ≈ 0.707× thinner, so 2× border ≈ 1.4× horizontal border weight.\n       */\n      ${createChevronBaseStyles(chevronConfig, 'var(--chevron-border-thickness)')}\n      ${createChevronInteractiveStates(chevronConfig, 'var(--chevron-border-thickness)', !readOnly)}\n        ${!readOnly &&\n      css`\n        &:has(button:hover)::before,\n        &:has(button:hover)::after {\n          border-color: ${palette['border-line']};\n        }\n      `}\n        &:has(button:focus-visible)::before,\n      &:has(button:focus-visible)::after {\n        border-color: ${palette.interactive};\n      }\n\n      &:has(button:active)::before,\n      &:has(button:active)::after {\n        border-color: ${palette.interactive};\n      }\n\n      @media (pointer: coarse) {\n        &:not(:nth-of-type(-n + 2))::before,\n        &:not(:nth-last-of-type(-n + 2))::after {\n          inset-block-start: calc(50% - ${chevronConfig.coarseSquareSize} / 2);\n          width: ${chevronConfig.coarseSquareSize};\n          height: ${chevronConfig.coarseSquareSize};\n        }\n\n        &:not(:nth-of-type(-n + 2))::before {\n          inset-inline-start: calc(\n            -1 * ${chevronConfig.coarseWidth} - ${chevronConfig.coarseOffsetLeft}\n          );\n        }\n\n        &:not(:nth-last-of-type(-n + 2))::after {\n          inset-inline-end: calc(\n            -1 * ${chevronConfig.coarseWidth} + ${chevronConfig.coarseOffsetRight}\n          );\n        }\n      }\n\n      &:nth-of-type(2):not(:nth-last-of-type(2)) > ${StyledStage} {\n        --stage-chevron-width: ${chevronConfig.width};\n        border-start-start-radius: ${borderRadius};\n        border-end-start-radius: ${borderRadius};\n        width: calc(100% + (2 * var(--stage-chevron-width)));\n        padding-inline-start: calc(var(--chevron-spacing));\n        ${stageClipPath(false, true)}\n\n        ${!readOnly &&\n        css`\n          /* Inline-start interactive indicator via inset shadow — avoids border-color bleeding through gradient backgrounds */\n          &:hover {\n            box-shadow: inset calc(2 * var(--chevron-border-thickness)) 0 0\n              ${palette['border-line']};\n\n            [dir='rtl'] & {\n              box-shadow: inset calc(-2 * var(--chevron-border-thickness)) 0 0\n                ${palette['border-line']};\n            }\n          }\n        `}\n\n        &:focus-visible,\n        &:active {\n          box-shadow: inset calc(2 * var(--chevron-border-thickness)) 0 0 ${palette.interactive};\n\n          [dir='rtl'] & {\n            box-shadow: inset calc(-2 * var(--chevron-border-thickness)) 0 0 ${palette.interactive};\n          }\n        }\n\n        @media (pointer: coarse) {\n          --stage-chevron-width: ${chevronConfig.coarseWidth};\n          width: calc(100% + (2 * var(--stage-chevron-width)));\n        }\n      }\n\n      &:nth-last-of-type(2):not(:nth-of-type(2)) > ${StyledStage} {\n        --stage-chevron-width: ${chevronConfig.width};\n        border-start-end-radius: ${borderRadius};\n        border-end-end-radius: ${borderRadius};\n        padding-inline-end: 0;\n        width: 100%;\n        ${stageClipPath(true, false)}\n\n        ${!readOnly &&\n        css`\n          /* Inline-end interactive indicator via inset shadow — avoids border-color bleeding through gradient backgrounds */\n          &:hover {\n            box-shadow: inset calc(-2 * var(--chevron-border-thickness)) 0 0\n              ${palette['border-line']};\n\n            [dir='rtl'] & {\n              box-shadow: inset calc(2 * var(--chevron-border-thickness)) 0 0\n                ${palette['border-line']};\n            }\n          }\n        `}\n\n        &:focus-visible,\n        &:active {\n          box-shadow: inset calc(-2 * var(--chevron-border-thickness)) 0 0 ${palette.interactive};\n\n          [dir='rtl'] & {\n            box-shadow: inset calc(2 * var(--chevron-border-thickness)) 0 0 ${palette.interactive};\n          }\n        }\n\n        @media (pointer: coarse) {\n          --stage-chevron-width: ${chevronConfig.coarseWidth};\n        }\n      }\n\n      [dir='rtl'] &:nth-of-type(2):not(:nth-last-of-type(2)) > ${StyledStage} {\n        ${stageClipPath(true, false, true)}\n      }\n\n      [dir='rtl'] &:nth-last-of-type(2):not(:nth-of-type(2)) > ${StyledStage} {\n        ${stageClipPath(false, true, true)}\n      }\n\n      &:nth-of-type(2):nth-last-of-type(2) > ${StyledStage} {\n        border-radius: ${borderRadius};\n        width: 100%;\n        ${stageClipPath(false, false)}\n\n        ${!readOnly &&\n        css`\n          &:hover {\n            box-shadow:\n              inset calc(2 * var(--chevron-border-thickness)) 0 0 ${palette['border-line']},\n              inset calc(-2 * var(--chevron-border-thickness)) 0 0 ${palette['border-line']};\n          }\n        `}\n\n        &:focus-visible,\n        &:active {\n          box-shadow:\n            inset calc(2 * var(--chevron-border-thickness)) 0 0 ${palette.interactive},\n            inset calc(-2 * var(--chevron-border-thickness)) 0 0 ${palette.interactive};\n        }\n      }\n    `;\n  }\n);\n\nStyledStageContainer.defaultProps = defaultThemeProp;\n\n/**\n * `<ol>` list of sub-step items displayed below the stages bar when a stage is expanded.\n */\nexport const StyledStepsContainer = styled.ol(({ theme }) => {\n  return css`\n    list-style-type: none;\n    margin: calc(2 * ${theme.base.spacing}) 0 calc(3 * ${theme.base.spacing});\n\n    &:empty {\n      margin-block-end: 0;\n    }\n  `;\n});\n\nStyledStepsContainer.defaultProps = defaultThemeProp;\n\n/**\n * Individual step `<li>` within a stage. Dims text and icon at reduced opacity when completed.\n */\nexport const StyledStep = styled.li<{ completed: boolean }>(({ completed, theme }) => {\n  const textOpacity = completed ? theme.base.transparency['transparent-2'] : 1;\n\n  return css`\n    border-radius: 0;\n    margin-block-end: calc(${theme.base.spacing});\n    color: ${theme.base.palette['foreground-color']};\n\n    &:last-child {\n      margin-block-end: 0;\n    }\n\n    & > ${StyledIcon} {\n      text-align: center;\n    }\n\n    div {\n      opacity: ${textOpacity};\n    }\n  `;\n});\n\nStyledStep.defaultProps = defaultThemeProp;\n\n/**\n * Small datetime label rendered beneath a step. Displayed at the `xs` font size\n * and reduced opacity.\n */\nexport const StyledDateTimeDisplay = styled(DateTimeDisplay)(({ theme }) => {\n  const fontSize = calculateFontSize(theme.base['font-size'], theme.base['font-scale']);\n  return css`\n    font-size: ${fontSize.xs};\n    opacity: ${theme.base.transparency['transparent-2']};\n  `;\n});\n\nStyledDateTimeDisplay.defaultProps = defaultThemeProp;\n\n/**\n * Container `<div>` for the stage glimpse preview panel, constrained to a small max-width.\n */\nexport const StyledStageGlimpse = styled.div(({ theme }) => {\n  return css`\n    max-width: ${theme.base['content-width'].sm};\n  `;\n});\n\nStyledStageGlimpse.defaultProps = defaultThemeProp;\n\n/**\n * Visually hidden `<p>` providing an accessible description for the stages list,\n * announced by screen readers but not displayed on screen.\n */\nexport const StyledStagesDescription = styled.p`\n  display: none;\n`;\n\nStyledStagesDescription.defaultProps = defaultThemeProp;\n"]}

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

@@ -0,0 +1,2 @@
+export declare const getStagesTestIds: (testIdProp?: import("@pega/cosmos-react-core").TestIdProp["testId"]) => import("@pega/cosmos-react-core").TestIdsRecord<readonly []>;
+//# sourceMappingURL=Stages.test-ids.d.ts.map

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

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

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

@@ -0,0 +1,3 @@
+import { createTestIds } from '@pega/cosmos-react-core';
+export const getStagesTestIds = createTestIds('stages', []);
+//# sourceMappingURL=Stages.test-ids.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Stages.test-ids.js","sourceRoot":"","sources":["../../../src/components/Stages/Stages.test-ids.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,yBAAyB,CAAC;AAExD,MAAM,CAAC,MAAM,gBAAgB,GAAG,aAAa,CAAC,QAAQ,EAAE,EAAW,CAAC,CAAC","sourcesContent":["import { createTestIds } from '@pega/cosmos-react-core';\n\nexport const getStagesTestIds = createTestIds('stages', [] as const);\n"]}

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

@@ -1,5 +1,5 @@
 import type { ReactNode, Ref } from 'react';
-import type { BaseProps, NoChildrenProp } from '@pega/cosmos-react-core';
+import type { BaseProps, NoChildrenProp, TestIdProp } from '@pega/cosmos-react-core';
 export interface StepProps {
     /** Step name - either text or link. */
     name: ReactNode;
@@ -20,7 +20,7 @@ export interface StageProps {
     /** Steps data defined in this stage. The stage is treated as not loaded if undefined. */
     steps?: StepProps[];
 }
-export interface StagesProps extends BaseProps, NoChildrenProp {
+export interface StagesProps extends BaseProps, NoChildrenProp, TestIdProp {
     /** List of objects describing each stage and their state. */
     stages: StageProps[];
     /** Current stage id. */
@@ -38,7 +38,7 @@ export interface StagesProps extends BaseProps, NoChildrenProp {
      */
     readOnly?: boolean;
     /** Ref to the stages container. */
-    ref?: Ref<HTMLDivElement>;
+    ref?: Ref<HTMLOListElement>;
 }
 export type StageStatus = 'completed' | 'current' | 'pending';
 //# sourceMappingURL=Stages.types.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"Stages.types.d.ts","sourceRoot":"","sources":["../../../src/components/Stages/Stages.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,GAAG,EAAE,MAAM,OAAO,CAAC;AAE5C,OAAO,KAAK,EAAE,SAAS,EAAE,cAAc,EAAE,MAAM,yBAAyB,CAAC;AAEzE,MAAM,WAAW,SAAS;IACxB,uCAAuC;IACvC,IAAI,EAAE,SAAS,CAAC;IAChB,wDAAwD;IACxD,SAAS,EAAE,OAAO,CAAC;IACnB,8BAA8B;IAC9B,EAAE,EAAE,MAAM,CAAC;CACZ;AAED,MAAM,WAAW,UAAU;IACzB,kBAAkB;IAClB,IAAI,EAAE,MAAM,CAAC;IACb,yBAAyB;IACzB,EAAE,EAAE,MAAM,CAAC;IACX,wEAAwE;IACxE,IAAI,CAAC,EAAE,IAAI,GAAG,MAAM,GAAG,MAAM,CAAC;IAC9B,uDAAuD;IACvD,SAAS,EAAE,OAAO,CAAC;IACnB,yFAAyF;IACzF,KAAK,CAAC,EAAE,SAAS,EAAE,CAAC;CACrB;AAED,MAAM,WAAW,WAAY,SAAQ,SAAS,EAAE,cAAc;IAC5D,6DAA6D;IAC7D,MAAM,EAAE,UAAU,EAAE,CAAC;IACrB,wBAAwB;IACxB,OAAO,EAAE,MAAM,CAAC;IAChB,yBAAyB;IACzB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;;OAGG;IACH,WAAW,CAAC,EAAE,CAAC,MAAM,EAAE,UAAU,CAAC,IAAI,CAAC,EAAE,KAAK,IAAI,CAAC;IACnD;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,mCAAmC;IACnC,GAAG,CAAC,EAAE,GAAG,CAAC,cAAc,CAAC,CAAC;CAC3B;AAED,MAAM,MAAM,WAAW,GAAG,WAAW,GAAG,SAAS,GAAG,SAAS,CAAC"}
+{"version":3,"file":"Stages.types.d.ts","sourceRoot":"","sources":["../../../src/components/Stages/Stages.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,GAAG,EAAE,MAAM,OAAO,CAAC;AAE5C,OAAO,KAAK,EAAE,SAAS,EAAE,cAAc,EAAE,UAAU,EAAE,MAAM,yBAAyB,CAAC;AAErF,MAAM,WAAW,SAAS;IACxB,uCAAuC;IACvC,IAAI,EAAE,SAAS,CAAC;IAChB,wDAAwD;IACxD,SAAS,EAAE,OAAO,CAAC;IACnB,8BAA8B;IAC9B,EAAE,EAAE,MAAM,CAAC;CACZ;AAED,MAAM,WAAW,UAAU;IACzB,kBAAkB;IAClB,IAAI,EAAE,MAAM,CAAC;IACb,yBAAyB;IACzB,EAAE,EAAE,MAAM,CAAC;IACX,wEAAwE;IACxE,IAAI,CAAC,EAAE,IAAI,GAAG,MAAM,GAAG,MAAM,CAAC;IAC9B,uDAAuD;IACvD,SAAS,EAAE,OAAO,CAAC;IACnB,yFAAyF;IACzF,KAAK,CAAC,EAAE,SAAS,EAAE,CAAC;CACrB;AAED,MAAM,WAAW,WAAY,SAAQ,SAAS,EAAE,cAAc,EAAE,UAAU;IACxE,6DAA6D;IAC7D,MAAM,EAAE,UAAU,EAAE,CAAC;IACrB,wBAAwB;IACxB,OAAO,EAAE,MAAM,CAAC;IAChB,yBAAyB;IACzB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;;OAGG;IACH,WAAW,CAAC,EAAE,CAAC,MAAM,EAAE,UAAU,CAAC,IAAI,CAAC,EAAE,KAAK,IAAI,CAAC;IACnD;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,mCAAmC;IACnC,GAAG,CAAC,EAAE,GAAG,CAAC,gBAAgB,CAAC,CAAC;CAC7B;AAED,MAAM,MAAM,WAAW,GAAG,WAAW,GAAG,SAAS,GAAG,SAAS,CAAC"}

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

@@ -1 +1 @@
-{"version":3,"file":"Stages.types.js","sourceRoot":"","sources":["../../../src/components/Stages/Stages.types.ts"],"names":[],"mappings":"","sourcesContent":["import type { ReactNode, Ref } from 'react';\n\nimport type { BaseProps, NoChildrenProp } from '@pega/cosmos-react-core';\n\nexport interface StepProps {\n  /** Step name - either text or link. */\n  name: ReactNode;\n  /** Flag determining whether step has been completed. */\n  completed: boolean;\n  /** Unique step identifier. */\n  id: string;\n}\n\nexport interface StageProps {\n  /** Stage name. */\n  name: string;\n  /** Unique identifier. */\n  id: string;\n  /** Date of completion. Accepts date object, ISO string or timestamp. */\n  date?: Date | string | number;\n  /** Flag determining whether the stage is completed. */\n  completed: boolean;\n  /** Steps data defined in this stage. The stage is treated as not loaded if undefined. */\n  steps?: StepProps[];\n}\n\nexport interface StagesProps extends BaseProps, NoChildrenProp {\n  /** List of objects describing each stage and their state. */\n  stages: StageProps[];\n  /** Current stage id. */\n  current: string;\n  /** Case title (label) */\n  caseTitle?: string;\n  /**\n   * Callback invoked when stage details are requested to show.\n   * @param stages stages' ids requested to load details for.\n   */\n  onLoadStage?: (stages: StageProps['id'][]) => void;\n  /**\n   * Render stages in read-only mode.\n   * @default false\n   */\n  readOnly?: boolean;\n  /** Ref to the stages container. */\n  ref?: Ref<HTMLDivElement>;\n}\n\nexport type StageStatus = 'completed' | 'current' | 'pending';\n"]}
+{"version":3,"file":"Stages.types.js","sourceRoot":"","sources":["../../../src/components/Stages/Stages.types.ts"],"names":[],"mappings":"","sourcesContent":["import type { ReactNode, Ref } from 'react';\n\nimport type { BaseProps, NoChildrenProp, TestIdProp } from '@pega/cosmos-react-core';\n\nexport interface StepProps {\n  /** Step name - either text or link. */\n  name: ReactNode;\n  /** Flag determining whether step has been completed. */\n  completed: boolean;\n  /** Unique step identifier. */\n  id: string;\n}\n\nexport interface StageProps {\n  /** Stage name. */\n  name: string;\n  /** Unique identifier. */\n  id: string;\n  /** Date of completion. Accepts date object, ISO string or timestamp. */\n  date?: Date | string | number;\n  /** Flag determining whether the stage is completed. */\n  completed: boolean;\n  /** Steps data defined in this stage. The stage is treated as not loaded if undefined. */\n  steps?: StepProps[];\n}\n\nexport interface StagesProps extends BaseProps, NoChildrenProp, TestIdProp {\n  /** List of objects describing each stage and their state. */\n  stages: StageProps[];\n  /** Current stage id. */\n  current: string;\n  /** Case title (label) */\n  caseTitle?: string;\n  /**\n   * Callback invoked when stage details are requested to show.\n   * @param stages stages' ids requested to load details for.\n   */\n  onLoadStage?: (stages: StageProps['id'][]) => void;\n  /**\n   * Render stages in read-only mode.\n   * @default false\n   */\n  readOnly?: boolean;\n  /** Ref to the stages container. */\n  ref?: Ref<HTMLOListElement>;\n}\n\nexport type StageStatus = 'completed' | 'current' | 'pending';\n"]}

package/lib/components/Stages/index.d.ts

@@ -1,3 +1,4 @@
 export { default } from './Stages';
 export type { StagesProps } from './Stages.types';
+export { getStagesTestIds } from './Stages.test-ids';
 //# sourceMappingURL=index.d.ts.map

package/lib/components/Stages/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Stages/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,UAAU,CAAC;AACnC,YAAY,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Stages/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,UAAU,CAAC;AACnC,YAAY,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAClD,OAAO,EAAE,gBAAgB,EAAE,MAAM,mBAAmB,CAAC"}

package/lib/components/Stages/index.js

@@ -1,2 +1,3 @@
 export { default } from './Stages';
+export { getStagesTestIds } from './Stages.test-ids';
 //# sourceMappingURL=index.js.map

package/lib/components/Stages/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/Stages/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,UAAU,CAAC","sourcesContent":["export { default } from './Stages';\nexport type { StagesProps } from './Stages.types';\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/Stages/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,UAAU,CAAC;AAEnC,OAAO,EAAE,gBAAgB,EAAE,MAAM,mBAAmB,CAAC","sourcesContent":["export { default } from './Stages';\nexport type { StagesProps } from './Stages.types';\nexport { getStagesTestIds } from './Stages.test-ids';\n"]}

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

@@ -1 +1 @@
-{"version":3,"file":"TaskList.d.ts","sourceRoot":"","sources":["../../../src/components/Tasks/TaskList.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAmB,SAAS,EAAE,GAAG,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AA4BzE,OAAO,KAAK,EAAE,UAAU,EAAE,YAAY,EAAE,UAAU,EAAE,MAAM,yBAAyB,CAAC;AAQpF,MAAM,WAAW,aAAc,SAAQ,UAAU;IAC/C,EAAE,EAAE,MAAM,CAAC;IACX,8CAA8C;IAC9C,IAAI,EAAE,MAAM,CAAC;IACb,wCAAwC;IACxC,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,0DAA0D;IAC1D,UAAU,CAAC,EAAE,UAAU,CAAC;IACxB,uDAAuD;IACvD,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB,sDAAsD;IACtD,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,wDAAwD;IACxD,MAAM,CAAC,EAAE,CAAC,EAAE,EAAE,aAAa,CAAC,IAAI,CAAC,EAAE,CAAC,EAAE,UAAU,CAAC,iBAAiB,CAAC,KAAK,IAAI,CAAC;IAC7E,sBAAsB;IACtB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,sCAAsC;IACtC,OAAO,CAAC,EAAE,SAAS,CAAC;IACpB,+CAA+C;IAC/C,iBAAiB,CAAC,EAAE,YAAY,CAAC,OAAO,CAAC,CAAC;IAC1C;;;OAGG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB;;;OAGG;IACH,kBAAkB,CAAC,EAAE,OAAO,CAAC;CAC9B;AAED,MAAM,WAAW,aAAc,SAAQ,UAAU;IAC/C,KAAK,EAAE,aAAa,EAAE,CAAC;IACvB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;;OAGG;IACH,kBAAkB,CAAC,EAAE,OAAO,CAAC;IAC7B,oCAAoC;IACpC,GAAG,CAAC,EAAE,GAAG,CAAC,WAAW,CAAC,CAAC;CACxB;AAED,UAAU,YAAY;IACpB,IAAI,EAAE,MAAM,CAAC;IACb,MAAM,EAAE,SAAS,GAAG,OAAO,CAAC;CAC7B;AAED,eAAO,MAAM,cAAc;eAA0B,OAAO;YAuB1D,CAAC;AAsDH,eAAO,MAAM,QAAQ,6KAiBhB,aAAa,GAAG;IAAE,eAAe,CAAC,EAAE,CAAC,YAAY,EAAE,YAAY,KAAK,IAAI,CAAA;CAAE;;CAgH9E,CAAC;;;;AAqEF,wBAAyD"}
+{"version":3,"file":"TaskList.d.ts","sourceRoot":"","sources":["../../../src/components/Tasks/TaskList.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAmB,SAAS,EAAE,GAAG,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AA4BzE,OAAO,KAAK,EAAE,UAAU,EAAE,YAAY,EAAE,UAAU,EAAE,MAAM,yBAAyB,CAAC;AAQpF,MAAM,WAAW,aAAc,SAAQ,UAAU;IAC/C,EAAE,EAAE,MAAM,CAAC;IACX,8CAA8C;IAC9C,IAAI,EAAE,MAAM,CAAC;IACb,wCAAwC;IACxC,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,0DAA0D;IAC1D,UAAU,CAAC,EAAE,UAAU,CAAC;IACxB,uDAAuD;IACvD,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB,sDAAsD;IACtD,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,wDAAwD;IACxD,MAAM,CAAC,EAAE,CAAC,EAAE,EAAE,aAAa,CAAC,IAAI,CAAC,EAAE,CAAC,EAAE,UAAU,CAAC,iBAAiB,CAAC,KAAK,IAAI,CAAC;IAC7E,sBAAsB;IACtB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,sCAAsC;IACtC,OAAO,CAAC,EAAE,SAAS,CAAC;IACpB,+CAA+C;IAC/C,iBAAiB,CAAC,EAAE,YAAY,CAAC,OAAO,CAAC,CAAC;IAC1C;;;OAGG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB;;;OAGG;IACH,kBAAkB,CAAC,EAAE,OAAO,CAAC;CAC9B;AAED,MAAM,WAAW,aAAc,SAAQ,UAAU;IAC/C,KAAK,EAAE,aAAa,EAAE,CAAC;IACvB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;;OAGG;IACH,kBAAkB,CAAC,EAAE,OAAO,CAAC;IAC7B,oCAAoC;IACpC,GAAG,CAAC,EAAE,GAAG,CAAC,WAAW,CAAC,CAAC;CACxB;AAED,UAAU,YAAY;IACpB,IAAI,EAAE,MAAM,CAAC;IACb,MAAM,EAAE,SAAS,GAAG,OAAO,CAAC;CAC7B;AAED,eAAO,MAAM,cAAc;eAA0B,OAAO;YAyB1D,CAAC;AA+DH,eAAO,MAAM,QAAQ,6KAiBhB,aAAa,GAAG;IACjB,eAAe,CAAC,EAAE,CAAC,YAAY,EAAE,YAAY,KAAK,IAAI,CAAC;CACxD;;CAkHF,CAAC;;;;AAqEF,wBAAyD"}

package/lib/components/Tasks/TaskList.js

@@ -1,5 +1,5 @@
 import { createElement as _createElement } from "react";
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { forwardRef, useEffect, useRef } from 'react';
 import styled, { css } from 'styled-components';
 import { ellipsisOverflow } from '@pega/cosmos-react-core/lib/styles/mixins';
@@ -25,7 +25,9 @@ export const StyledTaskList = styled.ul(({ theme, hasFooter }) => {
     > li:last-child {
       ${hasFooter
         ? css `
-            border-bottom: 0.0625rem solid ${theme.base.palette['border-line']};
+            &:not([role='button']) {
+              border-bottom: 0.0625rem solid ${theme.base.palette['border-line']};
+            }
           `
         : css `
             padding-block-end: 0;
@@ -56,28 +58,34 @@ const StyledTaskContent = styled.div(({ isAnimating, isExpanded, theme }) => {
 });
 StyledTaskContent.defaultProps = defaultThemeProp;
 const StyledSummaryItem = styled(SummaryItem)(({ hasProcessName }) => {
-    return hasProcessName
-        ? css `
-        ${StyledPrimary} {
-          display: contents;
+    return css `
+    ${hasProcessName &&
+        css `
+      ${StyledPrimary} {
+        display: contents;
 
-          & > ${StyledText} {
-            ${ellipsisOverflow};
-          }
+        & > ${StyledText} {
+          ${ellipsisOverflow};
         }
-      `
-        : null;
+      }
+    `}
+  `;
 });
-const StyledOpenTaskButton = styled(Button)(({ theme: { base } }) => {
+StyledSummaryItem.defaultProps = defaultThemeProp;
+const StyledOpenTaskButton = styled(Button)(({ theme: { base }, $iconOnly }) => {
     return css `
-    padding: 0 calc(2 * ${base.spacing});
+    ${!$iconOnly &&
+        css `
+      padding: 0 calc(2 * ${base.spacing});
+    `}
   `;
 });
 StyledOpenTaskButton.defaultProps = defaultThemeProp;
 export const TaskItem = withTestIds(({ testId, id, name, avatar, meta, processName, onOpen, caseId, content, headingTag, addAnnouncement, additionalActions, animateOpen = true, openButtonIconOnly = false, ...restProps }) => {
     const testIds = useTestIds(testId, getTaskItemTestIds);
     const t = useI18n();
-    const { components: { 'case-view': { summary: { detached } } } } = useTheme();
+    const { components: { 'case-view': { summary: { detached } }, tasks: { 'button-style': buttonStyle } } } = useTheme();
+    const iconOnly = openButtonIconOnly || buttonStyle === 'icon';
     const contentRef = useRef(null);
     const { state, set } = useTransitionState({
         ref: contentRef,
@@ -106,10 +114,10 @@ export const TaskItem = withTestIds(({ testId, id, name, avatar, meta, processNa
     else {
         primaryValue = (_jsx(Text, { variant: headingTag, "data-focusable-form-heading": content ? '' : undefined, children: name }));
     }
+    const openLabelSuffix = ` - ${processName ? `${processName} ` : ''}${name}${caseId ? ` ${caseId}` : ''}`;
     const summary = (_jsx(StyledSummaryItem, { visual: avatar, hasProcessName: !!processName, primary: primaryValue, secondary: meta, actions: content
             ? additionalActions && _jsx(Actions, { menuAt: 1, items: additionalActions })
-            : onOpen &&
-                (openButtonIconOnly ? (_jsx(Button, { "data-testid": testIds.openTask, variant: 'secondary', icon: true, compact: true, "aria-label": `${t('go')} - ${processName ? `${processName} ` : ''}${name}${caseId ? ` ${caseId}` : ''}`, onClick: (e) => onOpen(id, e), children: _jsx(Icon, { name: 'arrow-right' }) })) : (_jsxs(StyledOpenTaskButton, { "data-testid": testIds.openTask, variant: 'primary', compact: detached, onClick: (e) => onOpen(id, e), children: [_jsx("span", { children: t('go') }), _jsx(VisuallyHiddenText, { children: ` - ${processName ? `${processName} ` : ''}${name}${caseId ? ` ${caseId}` : ''}` })] }))) }));
+            : onOpen && (_jsx(StyledOpenTaskButton, { "data-testid": testIds.openTask, "$iconOnly": iconOnly, variant: iconOnly ? 'simple' : 'primary', icon: iconOnly, compact: iconOnly || detached, "aria-label": iconOnly ? `${t('go')}${openLabelSuffix}` : undefined, onClick: (e) => onOpen(id, e), children: iconOnly ? (_jsx(Icon, { name: 'arrow-right' })) : (_jsxs(_Fragment, { children: [_jsx("span", { children: t('go') }), _jsx(VisuallyHiddenText, { children: openLabelSuffix })] })) })) }));
     return (_jsxs(Flex, { "data-testid": testIds.root, ...restProps, container: { direction: 'column', gap: 2 }, item: { grow: 1 }, as: content ? undefined : StyledSummaryListItem, forwardedAs: content ? 'div' : 'li', children: [summary, content && (_jsx(StyledTaskContent, { ref: contentRef, isAnimating: isAnimating, isExpanded: isExpanded, children: content }))] }));
 }, getTaskItemTestIds);
 const TaskList = forwardRef(function TaskList({ testId, items, hasFooter = false, openButtonIconOnly = false }, ref) {

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

@@ -1 +1 @@
-{"version":3,"file":"TaskList.js","sourceRoot":"","sources":["../../../src/components/Tasks/TaskList.tsx"],"names":[],"mappings":"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","sourcesContent":["import { forwardRef, useEffect, useRef } from 'react';\nimport type { PropsWithoutRef, ReactNode, Ref, MouseEvent } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport { ellipsisOverflow } from '@pega/cosmos-react-core/lib/styles/mixins';\nimport { animations } from '@pega/cosmos-react-core/lib/styles';\nimport {\n  SummaryItem,\n  StyledSummaryListItem,\n  Flex,\n  defaultThemeProp,\n  Button,\n  Text,\n  useI18n,\n  VisuallyHiddenText,\n  useTestIds,\n  useLiveLog,\n  debounce,\n  Actions,\n  withTestIds,\n  StyledPrimary,\n  StyledText,\n  useTheme,\n  useTransitionState,\n  Icon,\n  registerIcon\n} from '@pega/cosmos-react-core';\nimport * as arrowRightIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/arrow-right.icon';\nimport { expandCollapseStates } from '@pega/cosmos-react-core/lib/hooks/useTransitionState';\nimport type { TestIdProp, ActionsProps, HeadingTag } from '@pega/cosmos-react-core';\n\nimport AssignmentDetails from '../HierarchicalAssignments/AssignmentDetail';\n\nimport { getTaskListTestIds, getTaskItemTestIds } from './Tasks.test-ids';\n\nregisterIcon(arrowRightIcon);\n\nexport interface TaskItemProps extends TestIdProp {\n  id: string;\n  /** Name of the task displayed in the list. */\n  name: string;\n  /** Name of the process for the task. */\n  processName?: string;\n  /** The heading tag to render task name and process as. */\n  headingTag?: HeadingTag;\n  /** Avatar element to represent the task's assignee. */\n  avatar?: ReactNode;\n  /** MetaList element with info related to the task. */\n  meta?: ReactNode;\n  /** Provide a callback to render a button for a task. */\n  onOpen?: (id: TaskItemProps['id'], e: MouseEvent<HTMLButtonElement>) => void;\n  /** Case identifier */\n  caseId?: string;\n  /** Content for the task when open. */\n  content?: ReactNode;\n  /** An array of actions to add to open task. */\n  additionalActions?: ActionsProps['items'];\n  /**\n   * When true, animates the content expanding in.\n   * @default true\n   */\n  animateOpen?: boolean;\n  /**\n   * When true, renders the open button as a compact icon-only arrow button.\n   * @default false\n   */\n  openButtonIconOnly?: boolean;\n}\n\nexport interface TaskListProps extends TestIdProp {\n  items: TaskItemProps[];\n  hasFooter?: boolean;\n  /**\n   * When true, all task items render the open button as a compact icon-only arrow.\n   * @default false\n   */\n  openButtonIconOnly?: boolean;\n  /** Ref for the wrapping element. */\n  ref?: Ref<HTMLElement>;\n}\n\ninterface Announcement {\n  name: string;\n  status: 'removed' | 'added';\n}\n\nexport const StyledTaskList = styled.ul<{ hasFooter: boolean }>(({ theme, hasFooter }) => {\n  const speed = theme.base.animation.speed;\n\n  return css`\n    ${animations.subProperties}\n    animation-name: ${animations.reveal}, ${animations.slideInYStart};\n    --slide-in-y-start-offset: -0.5rem;\n    --animation-duration: max(calc(${speed} * 3), 1ms);\n\n    @media (prefers-reduced-motion: reduce) {\n      animation-duration: 1ms;\n    }\n\n    > li:last-child {\n      ${hasFooter\n        ? css`\n            border-bottom: 0.0625rem solid ${theme.base.palette['border-line']};\n          `\n        : css`\n            padding-block-end: 0;\n          `}\n    }\n  `;\n});\n\nStyledTaskList.defaultProps = defaultThemeProp;\n\nconst StyledTaskContent = styled.div<{ isAnimating?: boolean; isExpanded?: boolean }>(\n  ({ isAnimating, isExpanded, theme }) => {\n    const speed = theme.base.animation.speed;\n\n    return css`\n      display: grid;\n      grid-template-rows: ${isExpanded ? '1fr' : '0fr'};\n      opacity: ${isExpanded ? 1 : 0};\n      transform: translateY(${isExpanded ? '0' : '-0.5rem'});\n      transition-duration: max(calc(${speed} * 3), 1ms);\n      transition-property: grid-template-rows, opacity, transform;\n      transition-timing-function: ${theme.base.animation.timing.ease};\n\n      @media (prefers-reduced-motion: reduce) {\n        transition-duration: 1ms;\n      }\n\n      > * {\n        overflow: ${isAnimating ? 'hidden' : 'visible'};\n      }\n    `;\n  }\n);\n\nStyledTaskContent.defaultProps = defaultThemeProp;\n\nconst StyledSummaryItem = styled(SummaryItem)<{ hasProcessName?: boolean }>(({\n  hasProcessName\n}) => {\n  return hasProcessName\n    ? css`\n        ${StyledPrimary} {\n          display: contents;\n\n          & > ${StyledText} {\n            ${ellipsisOverflow};\n          }\n        }\n      `\n    : null;\n});\n\nconst StyledOpenTaskButton = styled(Button)(({ theme: { base } }) => {\n  return css`\n    padding: 0 calc(2 * ${base.spacing});\n  `;\n});\n\nStyledOpenTaskButton.defaultProps = defaultThemeProp;\n\nexport const TaskItem = withTestIds(\n  ({\n    testId,\n    id,\n    name,\n    avatar,\n    meta,\n    processName,\n    onOpen,\n    caseId,\n    content,\n    headingTag,\n    addAnnouncement,\n    additionalActions,\n    animateOpen = true,\n    openButtonIconOnly = false,\n    ...restProps\n  }: TaskItemProps & { addAnnouncement?: (announcement: Announcement) => void }) => {\n    const testIds = useTestIds(testId, getTaskItemTestIds);\n    const t = useI18n();\n    const {\n      components: {\n        'case-view': {\n          summary: { detached }\n        }\n      }\n    } = useTheme();\n\n    const contentRef = useRef<HTMLDivElement>(null);\n\n    const { state, set } = useTransitionState({\n      ref: contentRef,\n      property: 'grid-template-rows',\n      states: expandCollapseStates,\n      defaultState: content && !animateOpen ? 'expanded' : 'collapsed'\n    });\n\n    const isAnimating = state === 'expanding' || state === 'collapsing';\n    const isExpanded = state === 'expanded' || state === 'expanding';\n\n    useEffect(() => {\n      const shouldBeExpanded = !!content;\n\n      if (shouldBeExpanded !== isExpanded) {\n        set(shouldBeExpanded ? 'expanded' : 'collapsed');\n      }\n    }, [content, isExpanded, set]);\n\n    useEffect(() => {\n      addAnnouncement?.({ name, status: 'added' });\n\n      return () => {\n        addAnnouncement?.({ name, status: 'removed' });\n      };\n    }, []);\n\n    let primaryValue;\n    if (processName) {\n      primaryValue = (\n        <AssignmentDetails\n          name={name}\n          headingTag={headingTag}\n          processName={processName}\n          active={!!content}\n        />\n      );\n    } else {\n      primaryValue = (\n        <Text variant={headingTag} data-focusable-form-heading={content ? '' : undefined}>\n          {name}\n        </Text>\n      );\n    }\n\n    const summary = (\n      <StyledSummaryItem\n        visual={avatar}\n        hasProcessName={!!processName}\n        primary={primaryValue}\n        secondary={meta}\n        actions={\n          content\n            ? additionalActions && <Actions menuAt={1} items={additionalActions} />\n            : onOpen &&\n              (openButtonIconOnly ? (\n                <Button\n                  data-testid={testIds.openTask}\n                  variant='secondary'\n                  icon\n                  compact\n                  aria-label={`${t('go')} - ${processName ? `${processName} ` : ''}${name}${caseId ? ` ${caseId}` : ''}`}\n                  onClick={(e: MouseEvent<HTMLButtonElement>) => onOpen(id, e)}\n                >\n                  <Icon name='arrow-right' />\n                </Button>\n              ) : (\n                <StyledOpenTaskButton\n                  data-testid={testIds.openTask}\n                  variant='primary'\n                  compact={detached}\n                  onClick={(e: MouseEvent<HTMLButtonElement>) => onOpen(id, e)}\n                >\n                  <span>{t('go')}</span>\n                  <VisuallyHiddenText>{` - ${processName ? `${processName} ` : ''}${name}${caseId ? ` ${caseId}` : ''}`}</VisuallyHiddenText>\n                </StyledOpenTaskButton>\n              ))\n        }\n      />\n    );\n\n    return (\n      <Flex\n        data-testid={testIds.root}\n        {...restProps}\n        container={{ direction: 'column', gap: 2 }}\n        item={{ grow: 1 }}\n        as={content ? undefined : StyledSummaryListItem}\n        forwardedAs={content ? 'div' : 'li'}\n      >\n        {summary}\n        {content && (\n          <StyledTaskContent ref={contentRef} isAnimating={isAnimating} isExpanded={isExpanded}>\n            {content}\n          </StyledTaskContent>\n        )}\n      </Flex>\n    );\n  },\n  getTaskItemTestIds\n);\n\nconst TaskList = forwardRef(function TaskList(\n  { testId, items, hasFooter = false, openButtonIconOnly = false }: PropsWithoutRef<TaskListProps>,\n  ref: TaskListProps['ref']\n) {\n  const testIds = useTestIds(testId, getTaskListTestIds);\n  const t = useI18n();\n  const { announcePolite } = useLiveLog();\n  const announcements = useRef<Announcement[]>([]);\n  const mounted = useRef(false);\n\n  useEffect(() => {\n    mounted.current = true;\n\n    return () => {\n      mounted.current = false;\n    };\n  }, []);\n\n  const debouncedAnnounce = debounce(() => {\n    if (announcements.current.length > 0) {\n      let tasksAdded = 0;\n      let tasksRemoved = 0;\n      announcements.current.forEach(item => {\n        if (item.status === 'removed') {\n          tasksRemoved += 1;\n        } else {\n          tasksAdded += 1;\n        }\n      });\n      let message = tasksAdded ? t('tasks_added', [tasksAdded], { count: tasksAdded }) : '';\n      if (tasksRemoved) {\n        message += t('tasks_removed', [tasksRemoved], { count: tasksRemoved });\n      }\n\n      if (mounted.current) {\n        announcePolite({ message });\n      }\n\n      announcements.current = [];\n    }\n  }, 2000);\n\n  const addAnnouncement = (announcement: Announcement) => {\n    announcements.current = [...announcements.current, announcement];\n    debouncedAnnounce();\n  };\n\n  return (\n    <Flex\n      data-testid={testIds.root}\n      container={{ direction: 'column' }}\n      as={StyledTaskList}\n      hasFooter={hasFooter}\n      ref={ref}\n    >\n      {items.map(item => (\n        <TaskItem\n          {...item}\n          openButtonIconOnly={item.openButtonIconOnly ?? openButtonIconOnly}\n          addAnnouncement={addAnnouncement}\n          key={item.id}\n        />\n      ))}\n    </Flex>\n  );\n});\n\nexport default withTestIds(TaskList, getTaskListTestIds);\n"]}
+{"version":3,"file":"TaskList.js","sourceRoot":"","sources":["../../../src/components/Tasks/TaskList.tsx"],"names":[],"mappings":"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","sourcesContent":["import { forwardRef, useEffect, useRef } from 'react';\nimport type { PropsWithoutRef, ReactNode, Ref, MouseEvent } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport { ellipsisOverflow } from '@pega/cosmos-react-core/lib/styles/mixins';\nimport { animations } from '@pega/cosmos-react-core/lib/styles';\nimport {\n  SummaryItem,\n  StyledSummaryListItem,\n  Flex,\n  defaultThemeProp,\n  Button,\n  Text,\n  useI18n,\n  VisuallyHiddenText,\n  useTestIds,\n  useLiveLog,\n  debounce,\n  Actions,\n  withTestIds,\n  StyledPrimary,\n  StyledText,\n  useTheme,\n  useTransitionState,\n  Icon,\n  registerIcon\n} from '@pega/cosmos-react-core';\nimport * as arrowRightIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/arrow-right.icon';\nimport { expandCollapseStates } from '@pega/cosmos-react-core/lib/hooks/useTransitionState';\nimport type { TestIdProp, ActionsProps, HeadingTag } from '@pega/cosmos-react-core';\n\nimport AssignmentDetails from '../HierarchicalAssignments/AssignmentDetail';\n\nimport { getTaskListTestIds, getTaskItemTestIds } from './Tasks.test-ids';\n\nregisterIcon(arrowRightIcon);\n\nexport interface TaskItemProps extends TestIdProp {\n  id: string;\n  /** Name of the task displayed in the list. */\n  name: string;\n  /** Name of the process for the task. */\n  processName?: string;\n  /** The heading tag to render task name and process as. */\n  headingTag?: HeadingTag;\n  /** Avatar element to represent the task's assignee. */\n  avatar?: ReactNode;\n  /** MetaList element with info related to the task. */\n  meta?: ReactNode;\n  /** Provide a callback to render a button for a task. */\n  onOpen?: (id: TaskItemProps['id'], e: MouseEvent<HTMLButtonElement>) => void;\n  /** Case identifier */\n  caseId?: string;\n  /** Content for the task when open. */\n  content?: ReactNode;\n  /** An array of actions to add to open task. */\n  additionalActions?: ActionsProps['items'];\n  /**\n   * When true, animates the content expanding in.\n   * @default true\n   */\n  animateOpen?: boolean;\n  /**\n   * When true, renders the open button as a compact icon-only arrow button.\n   * @default false\n   */\n  openButtonIconOnly?: boolean;\n}\n\nexport interface TaskListProps extends TestIdProp {\n  items: TaskItemProps[];\n  hasFooter?: boolean;\n  /**\n   * When true, all task items render the open button as a compact icon-only arrow.\n   * @default false\n   */\n  openButtonIconOnly?: boolean;\n  /** Ref for the wrapping element. */\n  ref?: Ref<HTMLElement>;\n}\n\ninterface Announcement {\n  name: string;\n  status: 'removed' | 'added';\n}\n\nexport const StyledTaskList = styled.ul<{ hasFooter: boolean }>(({ theme, hasFooter }) => {\n  const speed = theme.base.animation.speed;\n\n  return css`\n    ${animations.subProperties}\n    animation-name: ${animations.reveal}, ${animations.slideInYStart};\n    --slide-in-y-start-offset: -0.5rem;\n    --animation-duration: max(calc(${speed} * 3), 1ms);\n\n    @media (prefers-reduced-motion: reduce) {\n      animation-duration: 1ms;\n    }\n\n    > li:last-child {\n      ${hasFooter\n        ? css`\n            &:not([role='button']) {\n              border-bottom: 0.0625rem solid ${theme.base.palette['border-line']};\n            }\n          `\n        : css`\n            padding-block-end: 0;\n          `}\n    }\n  `;\n});\n\nStyledTaskList.defaultProps = defaultThemeProp;\n\nconst StyledTaskContent = styled.div<{ isAnimating?: boolean; isExpanded?: boolean }>(\n  ({ isAnimating, isExpanded, theme }) => {\n    const speed = theme.base.animation.speed;\n\n    return css`\n      display: grid;\n      grid-template-rows: ${isExpanded ? '1fr' : '0fr'};\n      opacity: ${isExpanded ? 1 : 0};\n      transform: translateY(${isExpanded ? '0' : '-0.5rem'});\n      transition-duration: max(calc(${speed} * 3), 1ms);\n      transition-property: grid-template-rows, opacity, transform;\n      transition-timing-function: ${theme.base.animation.timing.ease};\n\n      @media (prefers-reduced-motion: reduce) {\n        transition-duration: 1ms;\n      }\n\n      > * {\n        overflow: ${isAnimating ? 'hidden' : 'visible'};\n      }\n    `;\n  }\n);\n\nStyledTaskContent.defaultProps = defaultThemeProp;\n\nconst StyledSummaryItem = styled(SummaryItem)<{ hasProcessName?: boolean }>(({\n  hasProcessName\n}) => {\n  return css`\n    ${hasProcessName &&\n    css`\n      ${StyledPrimary} {\n        display: contents;\n\n        & > ${StyledText} {\n          ${ellipsisOverflow};\n        }\n      }\n    `}\n  `;\n});\n\nStyledSummaryItem.defaultProps = defaultThemeProp;\n\nconst StyledOpenTaskButton = styled(Button)<{ $iconOnly?: boolean }>(({\n  theme: { base },\n  $iconOnly\n}) => {\n  return css`\n    ${!$iconOnly &&\n    css`\n      padding: 0 calc(2 * ${base.spacing});\n    `}\n  `;\n});\n\nStyledOpenTaskButton.defaultProps = defaultThemeProp;\n\nexport const TaskItem = withTestIds(\n  ({\n    testId,\n    id,\n    name,\n    avatar,\n    meta,\n    processName,\n    onOpen,\n    caseId,\n    content,\n    headingTag,\n    addAnnouncement,\n    additionalActions,\n    animateOpen = true,\n    openButtonIconOnly = false,\n    ...restProps\n  }: TaskItemProps & {\n    addAnnouncement?: (announcement: Announcement) => void;\n  }) => {\n    const testIds = useTestIds(testId, getTaskItemTestIds);\n    const t = useI18n();\n    const {\n      components: {\n        'case-view': {\n          summary: { detached }\n        },\n        tasks: { 'button-style': buttonStyle }\n      }\n    } = useTheme();\n\n    const iconOnly = openButtonIconOnly || buttonStyle === 'icon';\n\n    const contentRef = useRef<HTMLDivElement>(null);\n\n    const { state, set } = useTransitionState({\n      ref: contentRef,\n      property: 'grid-template-rows',\n      states: expandCollapseStates,\n      defaultState: content && !animateOpen ? 'expanded' : 'collapsed'\n    });\n\n    const isAnimating = state === 'expanding' || state === 'collapsing';\n    const isExpanded = state === 'expanded' || state === 'expanding';\n\n    useEffect(() => {\n      const shouldBeExpanded = !!content;\n\n      if (shouldBeExpanded !== isExpanded) {\n        set(shouldBeExpanded ? 'expanded' : 'collapsed');\n      }\n    }, [content, isExpanded, set]);\n\n    useEffect(() => {\n      addAnnouncement?.({ name, status: 'added' });\n\n      return () => {\n        addAnnouncement?.({ name, status: 'removed' });\n      };\n    }, []);\n\n    let primaryValue;\n    if (processName) {\n      primaryValue = (\n        <AssignmentDetails\n          name={name}\n          headingTag={headingTag}\n          processName={processName}\n          active={!!content}\n        />\n      );\n    } else {\n      primaryValue = (\n        <Text variant={headingTag} data-focusable-form-heading={content ? '' : undefined}>\n          {name}\n        </Text>\n      );\n    }\n\n    const openLabelSuffix = ` - ${processName ? `${processName} ` : ''}${name}${caseId ? ` ${caseId}` : ''}`;\n\n    const summary = (\n      <StyledSummaryItem\n        visual={avatar}\n        hasProcessName={!!processName}\n        primary={primaryValue}\n        secondary={meta}\n        actions={\n          content\n            ? additionalActions && <Actions menuAt={1} items={additionalActions} />\n            : onOpen && (\n                <StyledOpenTaskButton\n                  data-testid={testIds.openTask}\n                  $iconOnly={iconOnly}\n                  variant={iconOnly ? 'simple' : 'primary'}\n                  icon={iconOnly}\n                  compact={iconOnly || detached}\n                  aria-label={iconOnly ? `${t('go')}${openLabelSuffix}` : undefined}\n                  onClick={(e: MouseEvent<HTMLButtonElement>) => onOpen(id, e)}\n                >\n                  {iconOnly ? (\n                    <Icon name='arrow-right' />\n                  ) : (\n                    <>\n                      <span>{t('go')}</span>\n                      <VisuallyHiddenText>{openLabelSuffix}</VisuallyHiddenText>\n                    </>\n                  )}\n                </StyledOpenTaskButton>\n              )\n        }\n      />\n    );\n\n    return (\n      <Flex\n        data-testid={testIds.root}\n        {...restProps}\n        container={{ direction: 'column', gap: 2 }}\n        item={{ grow: 1 }}\n        as={content ? undefined : StyledSummaryListItem}\n        forwardedAs={content ? 'div' : 'li'}\n      >\n        {summary}\n        {content && (\n          <StyledTaskContent ref={contentRef} isAnimating={isAnimating} isExpanded={isExpanded}>\n            {content}\n          </StyledTaskContent>\n        )}\n      </Flex>\n    );\n  },\n  getTaskItemTestIds\n);\n\nconst TaskList = forwardRef(function TaskList(\n  { testId, items, hasFooter = false, openButtonIconOnly = false }: PropsWithoutRef<TaskListProps>,\n  ref: TaskListProps['ref']\n) {\n  const testIds = useTestIds(testId, getTaskListTestIds);\n  const t = useI18n();\n  const { announcePolite } = useLiveLog();\n  const announcements = useRef<Announcement[]>([]);\n  const mounted = useRef(false);\n\n  useEffect(() => {\n    mounted.current = true;\n\n    return () => {\n      mounted.current = false;\n    };\n  }, []);\n\n  const debouncedAnnounce = debounce(() => {\n    if (announcements.current.length > 0) {\n      let tasksAdded = 0;\n      let tasksRemoved = 0;\n      announcements.current.forEach(item => {\n        if (item.status === 'removed') {\n          tasksRemoved += 1;\n        } else {\n          tasksAdded += 1;\n        }\n      });\n      let message = tasksAdded ? t('tasks_added', [tasksAdded], { count: tasksAdded }) : '';\n      if (tasksRemoved) {\n        message += t('tasks_removed', [tasksRemoved], { count: tasksRemoved });\n      }\n\n      if (mounted.current) {\n        announcePolite({ message });\n      }\n\n      announcements.current = [];\n    }\n  }, 2000);\n\n  const addAnnouncement = (announcement: Announcement) => {\n    announcements.current = [...announcements.current, announcement];\n    debouncedAnnounce();\n  };\n\n  return (\n    <Flex\n      data-testid={testIds.root}\n      container={{ direction: 'column' }}\n      as={StyledTaskList}\n      hasFooter={hasFooter}\n      ref={ref}\n    >\n      {items.map(item => (\n        <TaskItem\n          {...item}\n          openButtonIconOnly={item.openButtonIconOnly ?? openButtonIconOnly}\n          addAnnouncement={addAnnouncement}\n          key={item.id}\n        />\n      ))}\n    </Flex>\n  );\n});\n\nexport default withTestIds(TaskList, getTaskListTestIds);\n"]}

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

@@ -29,6 +29,11 @@ interface TasksBaseProps extends NoChildrenProp, TestIdProp {
     viewSelector?: Pick<ViewSelectorProps, 'views' | 'onViewSelect' | 'filterInputProps'>;
     /** Integer representing the total count of tasks. */
     count?: number;
+    /**
+     * Whether to display the result count in the header.
+     * @default true
+     */
+    showCount?: boolean;
     /** Opt-in search configuration. */
     search?: Pick<SearchInputProps, 'value' | 'onSearchChange'>;
     /** 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. */

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,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;;;AA8H/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,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"}

package/lib/components/Tasks/Tasks.js

@@ -30,7 +30,7 @@ const StyledCardContent = styled(CardContent) `
 `;
 StyledTasks.defaultProps = defaultThemeProp;
 const Tasks = (props) => {
-    const { testId, items = [], name, avatar, viewSelector, count = items.length, search, loadingMore = false, fitToParent = false, onExpandToggle, onItemLimitChange, variant, groups, ...restProps } = props;
+    const { testId, items = [], name, avatar, viewSelector, count, showCount = true, search, loadingMore = false, fitToParent = false, onExpandToggle, onItemLimitChange, variant, groups, ...restProps } = props;
     const testIds = useTestIds(testId, getTasksTestIds);
     const openItem = items.find(item => item.content);
     const t = useI18n();
@@ -38,7 +38,9 @@ const Tasks = (props) => {
     const progressRef = useRef(null);
     const [containerEl, setContainerEl] = useElement();
     const containerSize = useMonitoredSize(containerEl, 0);
-    const hasFooter = !!(!openItem && onExpandToggle && count > 0);
+    const totalCount = count ?? items.length;
+    const hasMore = count !== undefined && count > items.length;
+    const hasFooter = !!(!openItem && onExpandToggle && totalCount > 0);
     const TaskItems = useMemo(() => {
         return openItem ? (_jsx(TaskItem, { ...openItem, headingTag: 'h2' })) : (_jsx(TaskList, { items: items, hasFooter: hasFooter, testId: testIds.root }));
     }, [items, openItem]);
@@ -72,16 +74,16 @@ const Tasks = (props) => {
     if (variant === 'cards' && groups !== undefined) {
         return _jsx(TaskCards, { groups: groups, name: name, testId: testId ?? undefined, ...restProps });
     }
-    return (_jsxs(StyledTasks, { "data-testid": testIds.root, ...restProps, openItem: !!openItem, fitToParent: fitToParent, "data-app-region": true, "data-focusable-form-container": '', ref: setContainerEl, children: [!openItem && (_jsxs(CardHeader, { container: { justify: 'start', alignItems: 'center', gap: 1 }, children: [avatar && _jsx(Avatar, { ...avatar }), _jsx(ListToolbar, { name: name, headingTag: 'h2', viewSelector: viewSelector, count: { total: count }, search: search, item: { grow: 1 } })] })), fitToParent ? (_jsx(StyledCardContent, { children: items.length > 0 ? TaskItems : _jsx(EmptyState, {}) })) : (_jsx(CardContent, { children: items.length > 0 ? TaskItems : _jsx(EmptyState, {}) })), _jsx(Progress, { placement: 'block', ref: progressRef, visible: loadingMore, focusOnVisible: true }), hasFooter && !loadingMore && (_jsx(CardFooter, { justify: 'center', children: _jsx(Button, { "data-testid": testIds.showMoreLess, variant: 'link', "aria-label": t(!!count && count > items.length ? 'show_more' : 'show_less', ['tasks']), onClick: (e) => {
+    return (_jsxs(StyledTasks, { "data-testid": testIds.root, ...restProps, openItem: !!openItem, fitToParent: fitToParent, "data-app-region": true, "data-focusable-form-container": '', ref: setContainerEl, children: [!openItem && (_jsxs(CardHeader, { container: { justify: 'start', alignItems: 'center', gap: 1 }, children: [avatar && _jsx(Avatar, { ...avatar }), _jsx(ListToolbar, { name: name, headingTag: 'h2', viewSelector: viewSelector, count: showCount && count !== undefined ? { total: count } : undefined, search: search, item: { grow: 1 } })] })), fitToParent ? (_jsx(StyledCardContent, { children: items.length > 0 ? TaskItems : _jsx(EmptyState, {}) })) : (_jsx(CardContent, { children: items.length > 0 ? TaskItems : _jsx(EmptyState, {}) })), _jsx(Progress, { placement: 'block', ref: progressRef, visible: loadingMore, focusOnVisible: true }), hasFooter && !loadingMore && (_jsx(CardFooter, { justify: 'center', children: _jsx(Button, { "data-testid": testIds.showMoreLess, variant: 'link', "aria-label": t(hasMore ? 'show_more' : 'show_less', ['tasks']), onClick: (e) => {
                         onExpandToggle?.();
-                        if (!!count && count <= items.length) {
+                        if (!hasMore) {
                             const { currentTarget } = e;
                             requestAnimationFrame(() => {
                                 if (currentTarget.getBoundingClientRect().top < 0)
                                     currentTarget.scrollIntoView();
                             });
                         }
-                    }, ref: toggleButtonRef, children: t(!!count && count > items.length ? 'show_more' : 'show_less') }) }))] }));
+                    }, ref: toggleButtonRef, children: t(hasMore ? 'show_more' : 'show_less') }) }))] }));
 };
 export default withTestIds(Tasks, getTasksTestIds);
 //# sourceMappingURL=Tasks.js.map

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  /** 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 = items.length,\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 hasFooter = !!(!openItem && onExpandToggle && count > 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={{ total: count }}\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(!!count && count > items.length ? 'show_more' : 'show_less', ['tasks'])}\n            onClick={(e: MouseEvent<HTMLButtonElement>) => {\n              onExpandToggle?.();\n              if (!!count && count <= items.length) {\n                const { currentTarget } = e;\n                requestAnimationFrame(() => {\n                  if (currentTarget.getBoundingClientRect().top < 0) currentTarget.scrollIntoView();\n                });\n              }\n            }}\n            ref={toggleButtonRef}\n          >\n            {t(!!count && count > items.length ? '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  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"]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pega/cosmos-react-work",
-  "version": "9.10.1",
+  "version": "9.12.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.10.1",
-    "@pega/cosmos-react-rte": "9.10.1",
+    "@pega/cosmos-react-core": "9.12.0",
+    "@pega/cosmos-react-rte": "9.12.0",
     "@types/react": "^17.0.62 || ^18.3.3",
     "@types/react-dom": "^17.0.20 || ^18.3.0",
     "polished": "^4.1.0",