@pega/cosmos-react-work 9.0.0-build.6.8 → 9.0.0-build.7.0

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

@@ -1 +1 @@
-{"version":3,"file":"Details.styles.js","sourceRoot":"","sources":["../../../src/components/Details/Details.styles.ts"],"names":[],"mappings":"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","sourcesContent":["import styled, { css } from 'styled-components';\nimport type { DefaultTheme } from 'styled-components';\nimport { useContext } from 'react';\nimport { transparentize } from 'polished';\n\nimport {\n  calculateFontSize,\n  defaultThemeProp,\n  StyledFieldValue,\n  StyledStackedFieldValue,\n  StyledFieldValueList,\n  StyledIcon,\n  useDirection,\n  StyledButtonLink\n} from '@pega/cosmos-react-core';\nimport type {\n  StyledFieldValueListProps,\n  FontSize,\n  PropsWithDefaults\n} from '@pega/cosmos-react-core';\n\nimport type { DetailsProps } from './Details';\nimport DetailsContext from './DetailsContext';\n\ninterface StyledDetailsListProps extends StyledFieldValueListProps {\n  /** Whether individual list items all have labels stacks on top */\n  stacked?: boolean;\n  /** The character length applied to all list labels */\n  labelLength?: number;\n  /**\n   * Whether to apply narrow list styles\n   * @default false\n   */\n  narrow?: boolean;\n  theme: DefaultTheme;\n}\n\ninterface StyledDetailColumnsProps {\n  /**\n   * Number of columns in the list\n   * @default 1\n   */\n  columnCount?: 1 | 2 | 3;\n  /**\n   * Arrangement of columns\n   */\n  arrangement?: DetailsProps['arrangement'];\n  /**\n   * Style variations\n   */\n  variant?: DetailsProps['variant'];\n  theme: DefaultTheme;\n}\n\ntype StyledDetailsListPropsWithDefaults = PropsWithDefaults<StyledDetailsListProps>;\n\nconst rowGapMultiplier = 1;\nexport const columnGapMultiplier = 5.5;\nexport const oneColumnDetailsColumnWidth = '100ch';\nexport const multiColumnDetailsColumnWidth = '80ch';\n\nexport const StyledFieldValueGroupLabel = styled.div(({ theme }) => {\n  const {\n    base: { spacing, animation, palette }\n  } = theme;\n  const { rtl } = useDirection();\n  const {\n    components: {\n      'field-value-list': {\n        inline: { detached }\n      }\n    }\n  } = theme;\n  return css`\n    width: 100%;\n    grid-column: 1 / -1;\n    margin-block-end: calc(${rowGapMultiplier} * ${spacing});\n    ${detached &&\n    css`\n      border-bottom: 0.0625rem solid ${palette['border-line']};\n      padding-bottom: calc(0.5 * ${spacing});\n    `}\n\n    ${StyledButtonLink} ${StyledIcon} {\n      transition: transform ${animation.speed} ${animation.timing.ease};\n    }\n\n    ${StyledButtonLink}[aria-expanded='true'] ${StyledIcon} {\n      transform: rotate(90deg);\n    }\n\n    ${StyledButtonLink}[aria-expanded='false'] ${StyledIcon} {\n      transform: rotate(${rtl ? 180 : 0}deg);\n    }\n  `;\n});\n\nStyledFieldValueGroupLabel.defaultProps = defaultThemeProp;\n\nexport const StyledDetailDescription = styled.div(({ theme }) => {\n  const {\n    base: {\n      spacing,\n      'content-width': { xl }\n    }\n  } = theme;\n\n  return css`\n    max-width: ${xl};\n    margin-block-end: calc(1.5 * ${spacing});\n  `;\n});\n\nStyledDetailDescription.defaultProps = defaultThemeProp;\n\nexport const StyledDetailColumn = styled.div(({ theme }) => {\n  const {\n    base: { spacing }\n  } = theme;\n\n  return css`\n    display: flex;\n    flex-direction: column;\n    row-gap: calc(${rowGapMultiplier} * ${spacing});\n    width: 100%;\n  `;\n});\n\nStyledDetailColumn.defaultProps = defaultThemeProp;\n\nexport const StyledHighlightedDetailList = styled.dl(({ theme }) => {\n  const {\n    base: { spacing, palette }\n  } = theme;\n  const fontSize = calculateFontSize(theme.base['font-size'], theme.base['font-scale']);\n\n  return css`\n    max-width: calc(${multiColumnDetailsColumnWidth} * 3 + ${columnGapMultiplier} * ${spacing} * 2);\n    padding-block-end: calc(1.5 * ${spacing});\n\n    dd {\n      font-size: ${fontSize[theme.components.text.h1['font-size'] as FontSize]};\n      font-weight: ${theme.components.text.h1['font-weight']};\n    }\n\n    + hr {\n      border-top: unset;\n      border-radius: unset;\n      border-style: unset;\n      border-bottom: 0.0625rem solid ${palette['border-line']};\n      margin-block-end: calc(1.5 * ${spacing});\n    }\n  `;\n});\n\nStyledHighlightedDetailList.defaultProps = defaultThemeProp;\n\nexport const StyledInlineFieldValueItem = styled.div`\n  > * {\n    min-width: 0;\n  }\n`;\n\nexport const StyledDetailsList = styled(StyledFieldValueList)<StyledDetailsListPropsWithDefaults>(({\n  stacked,\n  labelLength,\n  variant,\n  theme,\n  narrow = false\n}) => {\n  const {\n    base: { spacing, palette },\n    components: {\n      details: { 'field-label': fieldLabelPosition },\n      'field-value-list': {\n        inline: { detached }\n      }\n    }\n  } = theme;\n\n  const { inFieldGroup } = useContext(DetailsContext);\n  const labelTop = (stacked || fieldLabelPosition === 'stacked') && variant !== 'value-comparison';\n  const isValueComparison = variant === 'value-comparison';\n  const fieldValueGapMultiplier = 2;\n\n  return css`\n    /* Field Grid Styles */\n    display: flex;\n    flex-direction: column;\n    row-gap: ${detached ? 0 : `calc(${rowGapMultiplier} * ${spacing})`};\n    width: 100%;\n    max-width: ${oneColumnDetailsColumnWidth};\n    height: fit-content;\n\n    ${StyledFieldValue} {\n      word-break: break-word;\n      overflow: auto;\n\n      /* Negative margin to account for overflow clipping of focus indicator */\n      padding: 0.3rem;\n      margin: -0.3rem;\n    }\n\n    ${StyledInlineFieldValueItem}, ${StyledStackedFieldValue} {\n      width: 100%;\n    }\n\n    ${StyledInlineFieldValueItem} {\n      grid-template-columns: minmax(14ch, ${labelLength}ch) minmax(14ch, 1fr);\n      grid-template-rows: max-content;\n      column-gap: calc(${fieldValueGapMultiplier} * ${spacing});\n      ${detached &&\n      css`\n        padding-block: calc(0.5 * ${spacing});\n        &:not(:last-child) {\n          border-bottom: 0.0625rem dashed ${palette['border-line']};\n        }\n      `}\n\n      ${inFieldGroup &&\n      css`\n        grid-template-columns:\n          minmax(calc(14ch - ${spacing}), calc(${labelLength}ch - ${spacing}))\n          minmax(14ch, 1fr);\n      `};\n    }\n\n    ${StyledStackedFieldValue} {\n      ${detached &&\n      css`\n        padding-block: calc(0.5 * ${spacing});\n        &:not(:last-child) {\n          border-bottom: 0.0625rem dashed ${palette['border-line']};\n        }\n      `}\n    }\n\n    /* Stacked Label Styles */\n    ${labelTop &&\n    css`\n      grid-template-columns: minmax(0, 1fr);\n      row-gap: 0;\n\n      dt {\n        max-width: 100%;\n      }\n\n      ${!isValueComparison &&\n      css`\n        ${StyledStackedFieldValue}:not(:first-child) {\n          margin-block-start: calc(${rowGapMultiplier} * ${spacing});\n        }\n      `}\n    `}\n\n    /* Value Comparison Styles */\n      ${isValueComparison &&\n    css`\n      display: grid;\n      grid-template-columns: auto auto;\n      column-gap: 0;\n      row-gap: calc(0.5 * ${spacing});\n\n      > dd {\n        display: flex;\n        flex-direction: column;\n        justify-content: flex-end;\n      }\n    `}\n\n      /* Responsive behavior */\n      ${narrow &&\n    !labelTop &&\n    !isValueComparison &&\n    css`\n      ${StyledInlineFieldValueItem} {\n        grid-template-columns: minmax(0, ${labelLength}ch) minmax(50%, 1fr);\n\n        ${inFieldGroup &&\n        css`\n          grid-template-columns:\n            minmax(0, calc(${labelLength}ch - ${spacing}))\n            minmax(calc(50% + 0.5 * ${spacing}), 1fr);\n        `}\n      }\n\n      dd {\n        min-width: 50%;\n      }\n    `}\n  `;\n});\n\nStyledDetailsList.defaultProps = defaultThemeProp;\n\nconst spacingTop = (spacing: string) => {\n  return css`\n    > ${StyledFieldValueGroupLabel} {\n      margin-block-start: calc((1.5 * ${rowGapMultiplier}) * ${spacing});\n    }\n\n    > ${StyledDetailDescription}:first-child {\n      margin-block-start: calc(1.5 * ${spacing});\n    }\n  `;\n};\n\nexport const StyledDetails = styled.div<{ variant?: DetailsProps['variant'] }>(\n  ({ variant, theme }) => {\n    const {\n      base: { spacing },\n      components: {\n        'field-value-list': {\n          inline: { detached }\n        }\n      }\n    } = theme;\n\n    return css`\n      &:not(:first-child) {\n        ${spacingTop(spacing)}\n      }\n\n      ${variant === 'field-group' &&\n      css`\n        & + ${StyledDetailsList} {\n          margin-block-start: calc(1.5 * ${spacing});\n        }\n      `}\n\n      ${!variant &&\n      detached &&\n      css`\n        & + ${StyledDetailsList} {\n          margin-block-start: 0;\n          border-block-start: 0.0625rem dashed ${theme.base.palette['border-line']};\n        }\n      `};\n    `;\n  }\n);\n\nStyledDetails.defaultProps = defaultThemeProp;\n\nexport const StyledDetailColumns = styled.div<StyledDetailColumnsProps>(\n  ({ theme, arrangement, variant, columnCount = 1 }) => {\n    const {\n      base: {\n        palette: { 'border-line': borderColor },\n        spacing,\n        'border-radius': baseBorderRadius\n      },\n      components: {\n        'form-control': { 'border-width': borderWidth },\n        button: { 'border-radius': buttonBorderRadius },\n        'field-value-list': {\n          inline: { detached }\n        }\n      }\n    } = theme;\n\n    return css`\n      width: 100%;\n\n      ${columnCount === 2 &&\n      !arrangement &&\n      css`\n        flex-wrap: wrap;\n      `}\n\n      ${columnCount === 1 &&\n      css`\n        flex-direction: column;\n        row-gap: calc(${rowGapMultiplier} * ${spacing});\n\n        ${variant === 'field-group' &&\n        css`\n          position: relative;\n          padding-inline-start: ${spacing};\n\n          ${detached &&\n          css`\n            padding-inline-start: calc(1.25 * ${spacing});\n          `}\n\n          &::before {\n            content: '';\n            position: absolute;\n            top: calc(-1 * ${spacing});\n            bottom: 0;\n            left: 0;\n            width: ${borderWidth};\n            background: ${borderColor};\n\n            ${detached &&\n            css`\n              top: 0;\n              width: 0.25rem;\n              background: ${transparentize(0.67, borderColor)};\n              border-radius: calc(${buttonBorderRadius} * ${baseBorderRadius});\n            `}\n          }\n        `}\n      `};\n\n      /* Column Widths */\n      > ${StyledDetailColumn} {\n        overflow: hidden;\n\n        /* Negative margin to account for overflow clipping of focus indicator */\n        padding: 0.3rem;\n        margin: -0.3rem;\n\n        ${columnCount === 3 &&\n        css`\n          width: ${multiColumnDetailsColumnWidth};\n          max-width: calc(33.33% - (${columnGapMultiplier} * ${spacing} * 2) / 3);\n        `}\n\n        ${columnCount === 2 &&\n        css`\n          width: calc(50% - (${columnGapMultiplier} * ${spacing}) / 2);\n          max-width: unset;\n\n          &:nth-child(3) > ${StyledDetails}:first-child {\n            ${spacingTop(spacing)}\n          }\n        `}\n\n        ${columnCount !== 1 &&\n        css`\n          ${arrangement === 'narrowWide' &&\n          css`\n            &:nth-child(2) {\n              width: calc(\n                ${multiColumnDetailsColumnWidth} * 2 + ${columnGapMultiplier} * ${spacing}\n              );\n              max-width: calc(66.66% - (${columnGapMultiplier} * ${spacing}) / 3);\n            }\n          `}\n\n          ${arrangement === 'wideNarrow' &&\n          css`\n            &:nth-child(1) {\n              width: calc(\n                ${multiColumnDetailsColumnWidth} * 2 + ${columnGapMultiplier} * ${spacing}\n              );\n              max-width: calc(66.66% - (${columnGapMultiplier} * ${spacing}) / 3);\n            }\n          `}\n        `}\n\n        ${columnCount === 1 &&\n        css`\n          width: 100%;\n          max-width: 100%;\n\n          &:not(:first-child) > ${StyledDetails}:first-child {\n            ${spacingTop(spacing)}\n          }\n        `}\n      }\n    `;\n  }\n);\n\nStyledDetailColumns.defaultProps = defaultThemeProp;\n"]}
+{"version":3,"file":"Details.styles.js","sourceRoot":"","sources":["../../../src/components/Details/Details.styles.ts"],"names":[],"mappings":"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","sourcesContent":["import styled, { css } from 'styled-components';\nimport type { DefaultTheme } from 'styled-components';\nimport { useContext } from 'react';\nimport { transparentize } from 'polished';\n\nimport {\n  calculateFontSize,\n  defaultThemeProp,\n  StyledFieldValue,\n  StyledStackedFieldValue,\n  StyledFieldValueList,\n  StyledIcon,\n  useDirection,\n  StyledButtonLink\n} from '@pega/cosmos-react-core';\nimport type {\n  StyledFieldValueListProps,\n  FontSize,\n  PropsWithDefaults\n} from '@pega/cosmos-react-core';\n\nimport type { DetailsProps } from './Details';\nimport DetailsContext from './DetailsContext';\n\ninterface StyledDetailsListProps extends StyledFieldValueListProps {\n  /** Whether individual list items all have labels stacks on top */\n  stacked?: boolean;\n  /** The character length applied to all list labels */\n  labelLength?: number;\n  /**\n   * Whether to apply narrow list styles\n   * @default false\n   */\n  narrow?: boolean;\n  theme: DefaultTheme;\n}\n\ninterface StyledDetailColumnsProps {\n  /**\n   * Number of columns in the list\n   * @default 1\n   */\n  columnCount?: 1 | 2 | 3;\n  /**\n   * Arrangement of columns\n   */\n  arrangement?: DetailsProps['arrangement'];\n  /**\n   * Style variations\n   */\n  variant?: DetailsProps['variant'];\n  theme: DefaultTheme;\n}\n\ntype StyledDetailsListPropsWithDefaults = PropsWithDefaults<StyledDetailsListProps>;\n\nconst rowGapMultiplier = 1;\nexport const columnGapMultiplier = 5.5;\nexport const oneColumnDetailsColumnWidth = '100ch';\nexport const multiColumnDetailsColumnWidth = '80ch';\n\nexport const StyledFieldValueGroupLabel = styled.div(({ theme }) => {\n  const {\n    base: { spacing, animation, palette }\n  } = theme;\n  const { rtl } = useDirection();\n  const {\n    components: {\n      'field-value-list': {\n        inline: { detached }\n      }\n    }\n  } = theme;\n  return css`\n    width: 100%;\n    grid-column: 1 / -1;\n    margin-block-end: calc(${rowGapMultiplier} * ${spacing});\n    ${detached &&\n    css`\n      border-bottom: 0.0625rem solid ${palette['border-line']};\n      padding-bottom: calc(0.5 * ${spacing});\n    `}\n\n    ${StyledButtonLink} ${StyledIcon} {\n      transition: transform ${animation.speed} ${animation.timing.ease};\n    }\n\n    ${StyledButtonLink}[aria-expanded='true'] ${StyledIcon} {\n      transform: rotate(90deg);\n    }\n\n    ${StyledButtonLink}[aria-expanded='false'] ${StyledIcon} {\n      transform: rotate(${rtl ? 180 : 0}deg);\n    }\n  `;\n});\n\nStyledFieldValueGroupLabel.defaultProps = defaultThemeProp;\n\nexport const StyledDetailDescription = styled.div(({ theme }) => {\n  const {\n    base: {\n      spacing,\n      'content-width': { xl }\n    }\n  } = theme;\n\n  return css`\n    max-width: ${xl};\n    margin-block-end: calc(1.5 * ${spacing});\n  `;\n});\n\nStyledDetailDescription.defaultProps = defaultThemeProp;\n\nexport const StyledDetailColumn = styled.div(({ theme }) => {\n  const {\n    base: { spacing }\n  } = theme;\n\n  return css`\n    display: flex;\n    flex-direction: column;\n    row-gap: calc(${rowGapMultiplier} * ${spacing});\n    width: 100%;\n  `;\n});\n\nStyledDetailColumn.defaultProps = defaultThemeProp;\n\nexport const StyledHighlightedDetailList = styled.dl(({ theme }) => {\n  const {\n    base: { spacing, palette }\n  } = theme;\n  const fontSize = calculateFontSize(theme.base['font-size'], theme.base['font-scale']);\n\n  return css`\n    max-width: calc(${multiColumnDetailsColumnWidth} * 3 + ${columnGapMultiplier} * ${spacing} * 2);\n    padding-block-end: calc(1.5 * ${spacing});\n\n    dd {\n      font-size: ${fontSize[theme.components.text.h1['font-size'] as FontSize]};\n      font-weight: ${theme.components.text.h1['font-weight']};\n    }\n\n    + hr {\n      border-top: unset;\n      border-radius: unset;\n      border-style: unset;\n      border-bottom: 0.0625rem solid ${palette['border-line']};\n      margin-block-end: calc(1.5 * ${spacing});\n    }\n  `;\n});\n\nStyledHighlightedDetailList.defaultProps = defaultThemeProp;\n\nexport const StyledInlineFieldValueItem = styled.div`\n  > * {\n    min-width: 0;\n  }\n`;\n\nexport const StyledDetailsList = styled(StyledFieldValueList)<StyledDetailsListPropsWithDefaults>(({\n  stacked,\n  labelLength,\n  variant,\n  theme,\n  narrow = false\n}) => {\n  const {\n    base: { spacing, palette },\n    components: {\n      details: { 'field-label': fieldLabelPosition },\n      'field-value-list': {\n        inline: { detached }\n      }\n    }\n  } = theme;\n\n  const { inFieldGroup } = useContext(DetailsContext);\n  const labelTop = (stacked || fieldLabelPosition === 'stacked') && variant !== 'value-comparison';\n  const isValueComparison = variant === 'value-comparison';\n  const fieldValueGapMultiplier = 2;\n\n  return css`\n    /* Field Grid Styles */\n    display: flex;\n    flex-direction: column;\n    row-gap: ${detached ? 0 : `calc(${rowGapMultiplier} * ${spacing})`};\n    width: 100%;\n    max-width: ${oneColumnDetailsColumnWidth};\n    height: fit-content;\n\n    ${StyledFieldValue} {\n      word-break: break-word;\n      overflow: auto;\n\n      /* Negative margin to account for overflow clipping of focus indicator */\n      padding: 0.3rem;\n      margin: -0.3rem;\n    }\n\n    ${StyledInlineFieldValueItem}, ${StyledStackedFieldValue} {\n      width: 100%;\n    }\n\n    ${StyledInlineFieldValueItem} {\n      grid-template-columns: minmax(14ch, ${labelLength}ch) minmax(14ch, 1fr);\n      grid-template-rows: max-content;\n      column-gap: calc(${fieldValueGapMultiplier} * ${spacing});\n      ${detached &&\n      css`\n        padding-block: calc(0.5 * ${spacing});\n        &:not(:last-child) {\n          border-bottom: 0.0625rem dashed ${palette['border-line']};\n        }\n      `}\n\n      ${inFieldGroup &&\n      css`\n        grid-template-columns:\n          minmax(calc(14ch - ${spacing}), calc(${labelLength}ch - ${spacing}))\n          minmax(14ch, 1fr);\n      `};\n    }\n\n    ${StyledStackedFieldValue} {\n      ${detached &&\n      css`\n        padding-block: calc(0.5 * ${spacing});\n        &:not(:last-child) {\n          border-bottom: 0.0625rem dashed ${palette['border-line']};\n        }\n      `}\n    }\n\n    /* Stacked Label Styles */\n    ${labelTop &&\n    css`\n      grid-template-columns: minmax(0, 1fr);\n      row-gap: 0;\n\n      dt {\n        max-width: 100%;\n      }\n\n      ${!isValueComparison &&\n      css`\n        ${StyledStackedFieldValue}:not(:first-child) {\n          margin-block-start: calc(${rowGapMultiplier} * ${spacing});\n        }\n      `}\n    `}\n\n    /* Value Comparison Styles */\n      ${isValueComparison &&\n    css`\n      display: grid;\n      grid-template-columns: auto auto;\n      column-gap: 0;\n      row-gap: calc(0.5 * ${spacing});\n\n      > dd {\n        display: flex;\n        flex-direction: column;\n        justify-content: flex-end;\n      }\n    `}\n\n      /* Responsive behavior */\n      ${narrow &&\n    !labelTop &&\n    !isValueComparison &&\n    css`\n      ${StyledInlineFieldValueItem} {\n        grid-template-columns: minmax(0, ${labelLength}ch) minmax(50%, 1fr);\n\n        ${inFieldGroup &&\n        css`\n          grid-template-columns:\n            minmax(0, calc(${labelLength}ch - ${spacing}))\n            minmax(calc(50% + 0.5 * ${spacing}), 1fr);\n        `}\n      }\n\n      dd {\n        min-width: 50%;\n      }\n    `}\n  `;\n});\n\nStyledDetailsList.defaultProps = defaultThemeProp;\n\nconst spacingTop = (spacing: string) => {\n  return css`\n    > ${StyledFieldValueGroupLabel} {\n      margin-block-start: calc((1.5 * ${rowGapMultiplier}) * ${spacing});\n    }\n\n    > ${StyledDetailDescription}:first-child {\n      margin-block-start: calc(1.5 * ${spacing});\n    }\n  `;\n};\n\nexport const StyledDetails = styled.div<{\n  variant?: DetailsProps['variant'];\n  columnCount?: number;\n}>(({ variant, columnCount, theme }) => {\n  const {\n    base: {\n      spacing,\n      'border-radius': baseBorderRadius,\n      palette: { 'border-line': borderColor }\n    },\n    components: {\n      'form-control': { 'border-width': borderWidth },\n      button: { 'border-radius': buttonBorderRadius },\n      'field-value-list': {\n        inline: { detached }\n      }\n    }\n  } = theme;\n\n  return css`\n    &:not(:first-child) {\n      ${spacingTop(spacing)}\n    }\n\n    ${variant === 'field-group' &&\n    css`\n      & + ${StyledDetailsList} {\n        margin-block-start: calc(1.5 * ${spacing});\n      }\n\n      ${columnCount === 1 &&\n      css`\n        position: relative;\n        padding-inline-start: ${spacing};\n\n        ${detached &&\n        css`\n          padding-inline-start: calc(1.25 * ${spacing});\n        `}\n\n        &::before {\n          content: '';\n          position: absolute;\n          inset-block-start: calc(-1 * ${spacing});\n          inset-block-end: 0;\n          inset-inline-start: 0;\n          width: ${borderWidth};\n          background: ${borderColor};\n\n          ${detached &&\n          css`\n            inset-block-start: 0;\n            width: 0.25rem;\n            background: ${transparentize(0.67, borderColor)};\n            border-radius: calc(${buttonBorderRadius} * ${baseBorderRadius});\n          `}\n        }\n      `}\n    `}\n\n    ${!variant &&\n    detached &&\n    css`\n      & + ${StyledDetailsList} {\n        margin-block-start: 0;\n        border-block-start: 0.0625rem dashed ${theme.base.palette['border-line']};\n      }\n    `};\n  `;\n});\n\nStyledDetails.defaultProps = defaultThemeProp;\n\nexport const StyledDetailColumns = styled.div<StyledDetailColumnsProps>(\n  ({ theme, arrangement, columnCount = 1 }) => {\n    const {\n      base: { spacing }\n    } = theme;\n\n    return css`\n      width: 100%;\n\n      ${columnCount === 2 &&\n      !arrangement &&\n      css`\n        flex-wrap: wrap;\n      `}\n\n      ${columnCount === 1 &&\n      css`\n        flex-direction: column;\n        row-gap: calc(${rowGapMultiplier} * ${spacing});\n      `};\n\n      /* Column Widths */\n      > ${StyledDetailColumn} {\n        overflow: hidden;\n\n        /* Negative margin to account for overflow clipping of focus indicator */\n        padding: 0.3rem;\n        margin: -0.3rem;\n\n        ${columnCount === 3 &&\n        css`\n          width: ${multiColumnDetailsColumnWidth};\n          max-width: calc(33.33% - (${columnGapMultiplier} * ${spacing} * 2) / 3);\n        `}\n\n        ${columnCount === 2 &&\n        css`\n          width: calc(50% - (${columnGapMultiplier} * ${spacing}) / 2);\n          max-width: unset;\n\n          &:nth-child(3) > ${StyledDetails}:first-child {\n            ${spacingTop(spacing)}\n          }\n        `}\n\n        ${columnCount !== 1 &&\n        css`\n          ${arrangement === 'narrowWide' &&\n          css`\n            &:nth-child(2) {\n              width: calc(\n                ${multiColumnDetailsColumnWidth} * 2 + ${columnGapMultiplier} * ${spacing}\n              );\n              max-width: calc(66.66% - (${columnGapMultiplier} * ${spacing}) / 3);\n            }\n          `}\n\n          ${arrangement === 'wideNarrow' &&\n          css`\n            &:nth-child(1) {\n              width: calc(\n                ${multiColumnDetailsColumnWidth} * 2 + ${columnGapMultiplier} * ${spacing}\n              );\n              max-width: calc(66.66% - (${columnGapMultiplier} * ${spacing}) / 3);\n            }\n          `}\n        `}\n\n        ${columnCount === 1 &&\n        css`\n          width: 100%;\n          max-width: 100%;\n\n          &:not(:first-child) > ${StyledDetails}:first-child {\n            ${spacingTop(spacing)}\n          }\n        `}\n      }\n    `;\n  }\n);\n\nStyledDetailColumns.defaultProps = defaultThemeProp;\n"]}

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

@@ -39,7 +39,7 @@ export type CoachMessageProps = RequireAtLeastOne<Partial<Pick<GenAICoachProps,
     allChunksReceived?: boolean;
     error?: string;
     message?: MessageProps['message'];
-    onStreamingUpdate?: (isStreamingInProgress: boolean) => void;
+    onStreamingUpdate?: (isStreamingDone: boolean) => void;
     feedback?: {
         reaction: Reaction | undefined;
         onReaction: (id: MessageProps['id'], reaction: Reaction) => void;

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

@@ -1 +1 @@
-{"version":3,"file":"GenAICoach.types.d.ts","sourceRoot":"","sources":["../../../src/components/GenAICoach/GenAICoach.types.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"GenAICoach.types.d.ts","sourceRoot":"","sources":["../../../src/components/GenAICoach/GenAICoach.types.ts"],"names":[],"mappings":"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"}

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

@@ -1 +1 @@
-{"version":3,"file":"GenAICoach.types.js","sourceRoot":"","sources":["../../../src/components/GenAICoach/GenAICoach.types.ts"],"names":[],"mappings":"","sourcesContent":["import type { Dispatch, Ref, SetStateAction } from 'react';\n\nimport type {\n  BaseProps,\n  MenuProps,\n  OmitStrict,\n  ProgressProps,\n  RequireAtLeastOne,\n  TestIdProp,\n  WithAttributes,\n  ActionsProps,\n  FileItemProps,\n  FileDisplayProps,\n  LightboxProps\n} from '@pega/cosmos-react-core';\n\nexport type State = 'minimized' | 'maximized';\nexport type Reaction = 'liked' | 'disliked';\n\nexport type Variant =\n  | {\n      placement: 'utilities';\n      state: State;\n      onStateChange: (state: State) => void;\n      setGenAIHeight?: Dispatch<SetStateAction<number | undefined>>;\n    }\n  | { placement: 'fullpage' }\n  | { placement: 'dialog'; onClose: () => void };\n\nexport interface MessageProps {\n  id: string;\n  message: string;\n  announceInteraction?: boolean;\n  attachments?: FileDisplayProps[];\n  /**\n   * Whether the message is a suggestion from the composer\n   * @default false\n   */\n  fromComposer?: boolean;\n  /** Ref forwarded to the wrapping element. */\n  ref?: Ref<HTMLLIElement>;\n}\n\nexport type InitialSuggestedMessageProps = Pick<GenAICoachProps, 'onSend'> &\n  BaseProps &\n  TestIdProp &\n  MessageProps;\n\nexport interface UserMessageProps extends BaseProps, TestIdProp, MessageProps {\n  from: 'user';\n}\n\nexport type CoachMessageProps = RequireAtLeastOne<\n  Partial<Pick<GenAICoachProps, 'onSend'>> &\n    BaseProps &\n    TestIdProp &\n    Pick<MessageProps, 'id' | 'announceInteraction' | 'ref'> & {\n      from: 'coach';\n      coachName: string;\n      suggestions?: MessageProps[];\n      loading?: boolean;\n      enableStreaming?: boolean;\n      allChunksReceived?: boolean;\n      error?: string;\n      message?: MessageProps['message'];\n      onStreamingUpdate?: (isStreamingInProgress: boolean) => void;\n      feedback?: {\n        reaction: Reaction | undefined;\n        onReaction: (id: MessageProps['id'], reaction: Reaction) => void;\n        onFeedbackComplete: (id: MessageProps['id'], comment?: string) => void;\n      };\n    },\n  'loading' | 'message' | 'error'\n>;\n\nexport type GenAIMessageProps = UserMessageProps | CoachMessageProps;\n\nexport interface ConversationHistoryProps extends TestIdProp {\n  /** List of History items. */\n  data: {\n    id: string;\n    section: string;\n    conversations: {\n      id: string;\n      title: string;\n    }[];\n  }[];\n  /** Click event for items within the list. */\n  onItemClick?: (conversationId: string) => void;\n  /** List loading state. */\n  loading?: boolean;\n  /** Called at scroll trigger to load more items. */\n  loadMore?: () => void;\n  /** True if History view is rendered in Full page view.  */\n  inFullPage?: boolean;\n  /** Callback triggered when closing the history view. */\n  onDismiss: () => void;\n  /** Id of the selected item. */\n  selectedItemId?: string;\n  /** Set if there is an error in retreiving the data. */\n  error?: string;\n  /** Ref forwarded to the wrapping element. */\n  ref?: Ref<HTMLUListElement>;\n}\n\nexport type SendMessageProps = OmitStrict<MessageProps, 'attachments'> & {\n  attachmentIds?: string[];\n};\n\nexport type GenAICoachProps = WithAttributes<\n  'div',\n  TestIdProp & {\n    /** Chat loading indicator */\n    loading?: boolean | ProgressProps['message'];\n    /** Set if there is an error in retreiving the data */\n    error?: string;\n    /** Coaches available in the chat header */\n    coachOptions: MenuProps['items'];\n    /** Handle the coach selections */\n    onCoachChange: (id: MenuProps['id']) => void;\n    /** Suggested messages to start the conversation */\n    initialSuggestedMessages?: MessageProps[];\n    /** Additional suggestions presented at the bottom of the chat window */\n    suggestions?: MenuProps['items'];\n    /** Send prompts */\n    onSend: (message: SendMessageProps) => void;\n    /** Messages to be shown in the chatting window. */\n    messages?: GenAIMessageProps[];\n    /** Placement of the component   */\n    variant: Variant;\n    /** callback when component is mounted */\n    onOpen?: () => void;\n    /**\n     * User would be guided with selective prompts to enable interaction with coach.\n     * @default false\n     */\n    guidedMode?: boolean;\n    /** Pass an array of Action objects to show Action button. */\n    actions?: ActionsProps;\n    /** Pass data to show history view. */\n    conversationHistory?: ConversationHistoryProps;\n    /** Callback triggered when the layout component changes. */\n    onLayoutChange?: (inFullPage: boolean) => void;\n    /** Callback when attachment icon is clicked */\n    onAddAttachment?: (files: File[]) => void;\n    /** Attachments list */\n    attachments?: FileItemProps[];\n    /** Error in attachments */\n    attachmentsError?: string;\n    /** Configuration for the Lightbox component that handles preview of media attachments and files */\n    lightboxPreviewProps?: LightboxProps;\n  }\n>;\n\nexport interface UtilitiesGenAICoachProps extends OmitStrict<GenAICoachProps, 'variant'> {\n  onClose?: () => void;\n}\n"]}
+{"version":3,"file":"GenAICoach.types.js","sourceRoot":"","sources":["../../../src/components/GenAICoach/GenAICoach.types.ts"],"names":[],"mappings":"","sourcesContent":["import type { Dispatch, Ref, SetStateAction } from 'react';\n\nimport type {\n  BaseProps,\n  MenuProps,\n  OmitStrict,\n  ProgressProps,\n  RequireAtLeastOne,\n  TestIdProp,\n  WithAttributes,\n  ActionsProps,\n  FileItemProps,\n  FileDisplayProps,\n  LightboxProps\n} from '@pega/cosmos-react-core';\n\nexport type State = 'minimized' | 'maximized';\nexport type Reaction = 'liked' | 'disliked';\n\nexport type Variant =\n  | {\n      placement: 'utilities';\n      state: State;\n      onStateChange: (state: State) => void;\n      setGenAIHeight?: Dispatch<SetStateAction<number | undefined>>;\n    }\n  | { placement: 'fullpage' }\n  | { placement: 'dialog'; onClose: () => void };\n\nexport interface MessageProps {\n  id: string;\n  message: string;\n  announceInteraction?: boolean;\n  attachments?: FileDisplayProps[];\n  /**\n   * Whether the message is a suggestion from the composer\n   * @default false\n   */\n  fromComposer?: boolean;\n  /** Ref forwarded to the wrapping element. */\n  ref?: Ref<HTMLLIElement>;\n}\n\nexport type InitialSuggestedMessageProps = Pick<GenAICoachProps, 'onSend'> &\n  BaseProps &\n  TestIdProp &\n  MessageProps;\n\nexport interface UserMessageProps extends BaseProps, TestIdProp, MessageProps {\n  from: 'user';\n}\n\nexport type CoachMessageProps = RequireAtLeastOne<\n  Partial<Pick<GenAICoachProps, 'onSend'>> &\n    BaseProps &\n    TestIdProp &\n    Pick<MessageProps, 'id' | 'announceInteraction' | 'ref'> & {\n      from: 'coach';\n      coachName: string;\n      suggestions?: MessageProps[];\n      loading?: boolean;\n      enableStreaming?: boolean;\n      allChunksReceived?: boolean;\n      error?: string;\n      message?: MessageProps['message'];\n      onStreamingUpdate?: (isStreamingDone: boolean) => void;\n      feedback?: {\n        reaction: Reaction | undefined;\n        onReaction: (id: MessageProps['id'], reaction: Reaction) => void;\n        onFeedbackComplete: (id: MessageProps['id'], comment?: string) => void;\n      };\n    },\n  'loading' | 'message' | 'error'\n>;\n\nexport type GenAIMessageProps = UserMessageProps | CoachMessageProps;\n\nexport interface ConversationHistoryProps extends TestIdProp {\n  /** List of History items. */\n  data: {\n    id: string;\n    section: string;\n    conversations: {\n      id: string;\n      title: string;\n    }[];\n  }[];\n  /** Click event for items within the list. */\n  onItemClick?: (conversationId: string) => void;\n  /** List loading state. */\n  loading?: boolean;\n  /** Called at scroll trigger to load more items. */\n  loadMore?: () => void;\n  /** True if History view is rendered in Full page view.  */\n  inFullPage?: boolean;\n  /** Callback triggered when closing the history view. */\n  onDismiss: () => void;\n  /** Id of the selected item. */\n  selectedItemId?: string;\n  /** Set if there is an error in retreiving the data. */\n  error?: string;\n  /** Ref forwarded to the wrapping element. */\n  ref?: Ref<HTMLUListElement>;\n}\n\nexport type SendMessageProps = OmitStrict<MessageProps, 'attachments'> & {\n  attachmentIds?: string[];\n};\n\nexport type GenAICoachProps = WithAttributes<\n  'div',\n  TestIdProp & {\n    /** Chat loading indicator */\n    loading?: boolean | ProgressProps['message'];\n    /** Set if there is an error in retreiving the data */\n    error?: string;\n    /** Coaches available in the chat header */\n    coachOptions: MenuProps['items'];\n    /** Handle the coach selections */\n    onCoachChange: (id: MenuProps['id']) => void;\n    /** Suggested messages to start the conversation */\n    initialSuggestedMessages?: MessageProps[];\n    /** Additional suggestions presented at the bottom of the chat window */\n    suggestions?: MenuProps['items'];\n    /** Send prompts */\n    onSend: (message: SendMessageProps) => void;\n    /** Messages to be shown in the chatting window. */\n    messages?: GenAIMessageProps[];\n    /** Placement of the component   */\n    variant: Variant;\n    /** callback when component is mounted */\n    onOpen?: () => void;\n    /**\n     * User would be guided with selective prompts to enable interaction with coach.\n     * @default false\n     */\n    guidedMode?: boolean;\n    /** Pass an array of Action objects to show Action button. */\n    actions?: ActionsProps;\n    /** Pass data to show history view. */\n    conversationHistory?: ConversationHistoryProps;\n    /** Callback triggered when the layout component changes. */\n    onLayoutChange?: (inFullPage: boolean) => void;\n    /** Callback when attachment icon is clicked */\n    onAddAttachment?: (files: File[]) => void;\n    /** Attachments list */\n    attachments?: FileItemProps[];\n    /** Error in attachments */\n    attachmentsError?: string;\n    /** Configuration for the Lightbox component that handles preview of media attachments and files */\n    lightboxPreviewProps?: LightboxProps;\n  }\n>;\n\nexport interface UtilitiesGenAICoachProps extends OmitStrict<GenAICoachProps, 'variant'> {\n  onClose?: () => void;\n}\n"]}

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

@@ -1 +1 @@
-{"version":3,"file":"GenAIMessage.d.ts","sourceRoot":"","sources":["../../../src/components/GenAICoach/GenAIMessage.tsx"],"names":[],"mappings":"AAGA,OAAO,EAiBL,KAAK,+BAA+B,EACrC,MAAM,yBAAyB,CAAC;AASjC,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,oBAAoB,CAAC;AAoB5D,QAAA,MAAM,YAAY,EAAE,+BAA+B,CAAC,iBAAiB,CAmPpE,CAAC;AAEF,eAAe,YAAY,CAAC"}
+{"version":3,"file":"GenAIMessage.d.ts","sourceRoot":"","sources":["../../../src/components/GenAICoach/GenAIMessage.tsx"],"names":[],"mappings":"AAGA,OAAO,EAiBL,KAAK,+BAA+B,EACrC,MAAM,yBAAyB,CAAC;AASjC,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,oBAAoB,CAAC;AAoB5D,QAAA,MAAM,YAAY,EAAE,+BAA+B,CAAC,iBAAiB,CAqPpE,CAAC;AAEF,eAAe,YAAY,CAAC"}

package/lib/components/GenAICoach/GenAIMessage.js

@@ -26,17 +26,18 @@ const GenAIMessage = forwardRef(function GenAIMessage(props, ref) {
     let ariaLabel = plainTextMessage;
     const isStreamingMessage = isCoachMessage(props) && props.enableStreaming;
     const allChunksReceived = isCoachMessage(props) && props.allChunksReceived;
+    const enableStreaming = !!isStreamingMessage && !allChunksReceived;
     const { text: streamingMessage, isAnimationDone: isStreamingDone } = useAnimatedText({
         text: message ?? '',
         allContentReceived: allChunksReceived === undefined ? true : allChunksReceived,
-        enabled: isStreamingMessage && !allChunksReceived,
+        enabled: enableStreaming,
         tokenizeMarkdown: true
     });
     useEffect(() => {
         if (isStreamingMessage && props.onStreamingUpdate) {
-            props.onStreamingUpdate(!isStreamingDone);
+            props.onStreamingUpdate(!!allChunksReceived && isStreamingDone);
         }
-    }, [streamingMessage, isStreamingMessage, isStreamingDone]);
+    }, [enableStreaming, isStreamingDone, allChunksReceived]);
     useElementFocus(wrapperEl, { shouldFocus: !showDialog && focusOnInteractionRef.current });
     useEffect(() => {
         if (!showDialog && focusOnInteractionRef.current) {

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

@@ -1 +1 @@
-{"version":3,"file":"GenAIMessage.js","sourceRoot":"","sources":["../../../src/components/GenAICoach/GenAIMessage.tsx"],"names":[],"mappings":"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","sourcesContent":["import { forwardRef, useEffect, useRef, useState } from 'react';\nimport type { KeyboardEvent, PropsWithoutRef } from 'react';\n\nimport {\n  Button,\n  Flex,\n  Icon,\n  Progress,\n  registerIcon,\n  useI18n,\n  useTheme,\n  Text,\n  useTestIds,\n  ErrorState,\n  useElement,\n  Tooltip,\n  TextArea,\n  FormDialog,\n  useElementFocus,\n  markdownToPlainText,\n  type ForwardRefForwardPropsComponent\n} from '@pega/cosmos-react-core';\nimport * as polarisSolidIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/polaris-solid.icon';\nimport * as thumbsUpSolidIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/thumbs-up-solid.icon';\nimport * as thumbsUpIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/thumbs-up.icon';\nimport * as thumbsDownSolidIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/thumbs-down-solid.icon';\nimport * as thumbsDownIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/thumbs-down.icon';\nimport { RichTextViewer } from '@pega/cosmos-react-rte';\nimport { useAnimatedText } from '@pega/cosmos-react-core';\n\nimport type { GenAIMessageProps } from './GenAICoach.types';\nimport {\n  StyledAttachmentsList,\n  StyledMessage,\n  StyledSuggestion,\n  StyledSuggestionsContainer,\n  StyledUserMessage\n} from './GenAICoach.styles';\nimport { getGenAICoachTestIds } from './GenAICoach.test-ids';\nimport { isCoachMessage, isUserMessage } from './GenAICoach.utils';\nimport GenAIMessageProgress from './GenAIMessageProgress';\n\nregisterIcon(\n  polarisSolidIcon,\n  thumbsUpSolidIcon,\n  thumbsUpIcon,\n  thumbsDownSolidIcon,\n  thumbsDownIcon\n);\n\nconst GenAIMessage: ForwardRefForwardPropsComponent<GenAIMessageProps> = forwardRef(\n  function GenAIMessage(props: PropsWithoutRef<GenAIMessageProps>, ref: GenAIMessageProps['ref']) {\n    const testIds = useTestIds(props.testId, getGenAICoachTestIds);\n    const theme = useTheme();\n    const t = useI18n();\n    const [wrapperEl, setWrapperEl] = useElement<HTMLDivElement>(null);\n    const [feedbackVal, setFeedbackVal] = useState('');\n    const [showDialog, setShowDialog] = useState(false);\n    const focusOnInteractionRef = useRef(false);\n\n    const { message, announceInteraction, ...restProps } = props;\n    const plainTextMessage = markdownToPlainText(message ?? '');\n    let ariaLabel = plainTextMessage;\n\n    const isStreamingMessage = isCoachMessage(props) && props.enableStreaming;\n    const allChunksReceived = isCoachMessage(props) && props.allChunksReceived;\n    const { text: streamingMessage, isAnimationDone: isStreamingDone } = useAnimatedText({\n      text: message ?? '',\n      allContentReceived: allChunksReceived === undefined ? true : allChunksReceived,\n      enabled: isStreamingMessage && !allChunksReceived,\n      tokenizeMarkdown: true\n    });\n\n    useEffect(() => {\n      if (isStreamingMessage && props.onStreamingUpdate) {\n        props.onStreamingUpdate(!isStreamingDone);\n      }\n    }, [streamingMessage, isStreamingMessage, isStreamingDone]);\n\n    useElementFocus(wrapperEl, { shouldFocus: !showDialog && focusOnInteractionRef.current });\n\n    useEffect(() => {\n      if (!showDialog && focusOnInteractionRef.current) {\n        focusOnInteractionRef.current = false;\n      }\n    }, [showDialog]);\n\n    if (isCoachMessage(props)) {\n      const { id: messageId, coachName, suggestions, onSend, loading, error, feedback } = props;\n\n      const { reaction, onReaction, onFeedbackComplete } = feedback ?? {};\n\n      let selectedFeedbackResponse;\n\n      let feedbackAriaLabel = t('sender_replied_message', [coachName, plainTextMessage ?? '']);\n\n      if (feedback && reaction) {\n        selectedFeedbackResponse = t('selected_noun', [\n          reaction === 'liked' ? t('good_response') : t('bad_response')\n        ]);\n\n        feedbackAriaLabel = `${feedbackAriaLabel} ${selectedFeedbackResponse}`;\n      }\n\n      ariaLabel =\n        suggestions && suggestions.length > 0\n          ? `${feedbackAriaLabel} ${t('suggestions_in_message', [suggestions.length])}`\n          : feedbackAriaLabel;\n\n      if (announceInteraction) {\n        ariaLabel = `${ariaLabel} ${t('interaction_message')}`;\n      }\n\n      const streamingContent = isStreamingMessage && (\n        <>\n          {message ? (\n            <>\n              <RichTextViewer\n                content={isStreamingMessage ? streamingMessage : message}\n                type='markdown'\n              />\n              {loading && <Progress variant='ellipsis' placement='inline' />}\n            </>\n          ) : (\n            loading && <GenAIMessageProgress />\n          )}\n        </>\n      );\n\n      return (\n        <Flex\n          as='li'\n          data-testid={testIds.coachMessage}\n          {...restProps}\n          container={{ direction: 'column', pad: [1, 0] }}\n          type='message'\n          aria-label={ariaLabel}\n          ref={ref}\n        >\n          <Flex container={{ gap: 1 }}>\n            <Icon name='polaris-solid' color={theme.base.palette.ai} size='s' />\n            <Text as='span' variant='h4'>\n              {coachName}\n            </Text>\n          </Flex>\n          <StyledMessage>\n            {/* Streaming loader and content */}\n            {streamingContent}\n            {loading || error ? (\n              <>\n                {loading && !isStreamingMessage && <GenAIMessageProgress />}\n                {error && <ErrorState message={error} />}\n              </>\n            ) : (\n              <>\n                {/* Non streaming content */}\n                {!isStreamingMessage && message && (\n                  <RichTextViewer content={message} type='markdown' />\n                )}\n                {feedback && (\n                  <Flex container={{ pad: [0.5, undefined] }}>\n                    {reaction ? (\n                      <>\n                        <Flex\n                          container={{ pad: 0.5 }}\n                          aria-label={selectedFeedbackResponse}\n                          ref={setWrapperEl}\n                          tabIndex={-1}\n                        >\n                          <Icon\n                            name={reaction === 'liked' ? 'thumbs-up-solid' : 'thumbs-down-solid'}\n                          />\n                        </Flex>\n                        {showDialog ? (\n                          onFeedbackComplete &&\n                          wrapperEl && (\n                            <FormDialog\n                              target={wrapperEl}\n                              heading={t('share_feedback')}\n                              onCancel={() => {\n                                focusOnInteractionRef.current = true;\n                                setShowDialog(false);\n                                onFeedbackComplete(messageId);\n                              }}\n                              onSubmit={() => {\n                                focusOnInteractionRef.current = true;\n                                setShowDialog(false);\n                                onFeedbackComplete(messageId, feedbackVal);\n                              }}\n                              onKeyDown={e => e.stopPropagation()}\n                            >\n                              <TextArea\n                                value={feedbackVal}\n                                onChange={e => setFeedbackVal(e.target.value)}\n                                onKeyDown={(e: KeyboardEvent<HTMLTextAreaElement>) => {\n                                  if (e.key === 'Enter' && !e.shiftKey) {\n                                    e.preventDefault();\n                                    focusOnInteractionRef.current = true;\n                                    setShowDialog(false);\n                                    onFeedbackComplete(messageId, feedbackVal);\n                                  }\n                                }}\n                                autoResize={false}\n                              />\n                            </FormDialog>\n                          )\n                        ) : (\n                          <Tooltip target={wrapperEl} describeTarget={false}>\n                            {reaction === 'liked' ? t('good_response') : t('bad_response')}\n                          </Tooltip>\n                        )}\n                      </>\n                    ) : (\n                      <>\n                        <Button\n                          label={t('good_response')}\n                          variant='simple'\n                          icon\n                          compact\n                          onClick={() => {\n                            onReaction?.(messageId, 'liked');\n                            focusOnInteractionRef.current = true;\n                          }}\n                        >\n                          <Icon name='thumbs-up' />\n                        </Button>\n\n                        <Button\n                          label={t('bad_response')}\n                          variant='simple'\n                          icon\n                          compact\n                          onClick={() => {\n                            setShowDialog(true);\n                            onReaction?.(messageId, 'disliked');\n                          }}\n                        >\n                          <Icon name='thumbs-down' />\n                        </Button>\n                      </>\n                    )}\n                  </Flex>\n                )}\n                {suggestions && (\n                  <Flex as={StyledSuggestionsContainer} container={{ direction: 'column', gap: 1 }}>\n                    {suggestions.map(({ id, message: prompt }) => {\n                      return (\n                        <Button\n                          as={StyledSuggestion}\n                          onClick={onSend ? () => onSend({ id, message: prompt }) : undefined}\n                          key={id}\n                        >\n                          {prompt}\n                        </Button>\n                      );\n                    })}\n                  </Flex>\n                )}\n              </>\n            )}\n          </StyledMessage>\n        </Flex>\n      );\n    }\n\n    if (isUserMessage(props)) {\n      if (plainTextMessage) {\n        ariaLabel = t('you_asked', [plainTextMessage]);\n      }\n\n      if (announceInteraction) {\n        ariaLabel = `${ariaLabel} ${t('interaction_message')}`;\n      }\n\n      return (\n        <StyledUserMessage\n          as={StyledUserMessage}\n          data-testid={testIds.userMessage}\n          {...restProps}\n          type='message'\n          aria-label={ariaLabel}\n          ref={ref}\n        >\n          {props.attachments && props.attachments.length > 0 && (\n            <StyledAttachmentsList type='display' items={props.attachments} />\n          )}\n          {message && <RichTextViewer content={message} type='markdown' />}\n        </StyledUserMessage>\n      );\n    }\n\n    return null;\n  }\n);\n\nexport default GenAIMessage;\n"]}
+{"version":3,"file":"GenAIMessage.js","sourceRoot":"","sources":["../../../src/components/GenAICoach/GenAIMessage.tsx"],"names":[],"mappings":"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","sourcesContent":["import { forwardRef, useEffect, useRef, useState } from 'react';\nimport type { KeyboardEvent, PropsWithoutRef } from 'react';\n\nimport {\n  Button,\n  Flex,\n  Icon,\n  Progress,\n  registerIcon,\n  useI18n,\n  useTheme,\n  Text,\n  useTestIds,\n  ErrorState,\n  useElement,\n  Tooltip,\n  TextArea,\n  FormDialog,\n  useElementFocus,\n  markdownToPlainText,\n  type ForwardRefForwardPropsComponent\n} from '@pega/cosmos-react-core';\nimport * as polarisSolidIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/polaris-solid.icon';\nimport * as thumbsUpSolidIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/thumbs-up-solid.icon';\nimport * as thumbsUpIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/thumbs-up.icon';\nimport * as thumbsDownSolidIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/thumbs-down-solid.icon';\nimport * as thumbsDownIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/thumbs-down.icon';\nimport { RichTextViewer } from '@pega/cosmos-react-rte';\nimport { useAnimatedText } from '@pega/cosmos-react-core';\n\nimport type { GenAIMessageProps } from './GenAICoach.types';\nimport {\n  StyledAttachmentsList,\n  StyledMessage,\n  StyledSuggestion,\n  StyledSuggestionsContainer,\n  StyledUserMessage\n} from './GenAICoach.styles';\nimport { getGenAICoachTestIds } from './GenAICoach.test-ids';\nimport { isCoachMessage, isUserMessage } from './GenAICoach.utils';\nimport GenAIMessageProgress from './GenAIMessageProgress';\n\nregisterIcon(\n  polarisSolidIcon,\n  thumbsUpSolidIcon,\n  thumbsUpIcon,\n  thumbsDownSolidIcon,\n  thumbsDownIcon\n);\n\nconst GenAIMessage: ForwardRefForwardPropsComponent<GenAIMessageProps> = forwardRef(\n  function GenAIMessage(props: PropsWithoutRef<GenAIMessageProps>, ref: GenAIMessageProps['ref']) {\n    const testIds = useTestIds(props.testId, getGenAICoachTestIds);\n    const theme = useTheme();\n    const t = useI18n();\n    const [wrapperEl, setWrapperEl] = useElement<HTMLDivElement>(null);\n    const [feedbackVal, setFeedbackVal] = useState('');\n    const [showDialog, setShowDialog] = useState(false);\n    const focusOnInteractionRef = useRef(false);\n\n    const { message, announceInteraction, ...restProps } = props;\n    const plainTextMessage = markdownToPlainText(message ?? '');\n    let ariaLabel = plainTextMessage;\n\n    const isStreamingMessage = isCoachMessage(props) && props.enableStreaming;\n    const allChunksReceived = isCoachMessage(props) && props.allChunksReceived;\n    const enableStreaming = !!isStreamingMessage && !allChunksReceived;\n\n    const { text: streamingMessage, isAnimationDone: isStreamingDone } = useAnimatedText({\n      text: message ?? '',\n      allContentReceived: allChunksReceived === undefined ? true : allChunksReceived,\n      enabled: enableStreaming,\n      tokenizeMarkdown: true\n    });\n\n    useEffect(() => {\n      if (isStreamingMessage && props.onStreamingUpdate) {\n        props.onStreamingUpdate(!!allChunksReceived && isStreamingDone);\n      }\n    }, [enableStreaming, isStreamingDone, allChunksReceived]);\n\n    useElementFocus(wrapperEl, { shouldFocus: !showDialog && focusOnInteractionRef.current });\n\n    useEffect(() => {\n      if (!showDialog && focusOnInteractionRef.current) {\n        focusOnInteractionRef.current = false;\n      }\n    }, [showDialog]);\n\n    if (isCoachMessage(props)) {\n      const { id: messageId, coachName, suggestions, onSend, loading, error, feedback } = props;\n\n      const { reaction, onReaction, onFeedbackComplete } = feedback ?? {};\n\n      let selectedFeedbackResponse;\n\n      let feedbackAriaLabel = t('sender_replied_message', [coachName, plainTextMessage ?? '']);\n\n      if (feedback && reaction) {\n        selectedFeedbackResponse = t('selected_noun', [\n          reaction === 'liked' ? t('good_response') : t('bad_response')\n        ]);\n\n        feedbackAriaLabel = `${feedbackAriaLabel} ${selectedFeedbackResponse}`;\n      }\n\n      ariaLabel =\n        suggestions && suggestions.length > 0\n          ? `${feedbackAriaLabel} ${t('suggestions_in_message', [suggestions.length])}`\n          : feedbackAriaLabel;\n\n      if (announceInteraction) {\n        ariaLabel = `${ariaLabel} ${t('interaction_message')}`;\n      }\n\n      const streamingContent = isStreamingMessage && (\n        <>\n          {message ? (\n            <>\n              <RichTextViewer\n                content={isStreamingMessage ? streamingMessage : message}\n                type='markdown'\n              />\n              {loading && <Progress variant='ellipsis' placement='inline' />}\n            </>\n          ) : (\n            loading && <GenAIMessageProgress />\n          )}\n        </>\n      );\n\n      return (\n        <Flex\n          as='li'\n          data-testid={testIds.coachMessage}\n          {...restProps}\n          container={{ direction: 'column', pad: [1, 0] }}\n          type='message'\n          aria-label={ariaLabel}\n          ref={ref}\n        >\n          <Flex container={{ gap: 1 }}>\n            <Icon name='polaris-solid' color={theme.base.palette.ai} size='s' />\n            <Text as='span' variant='h4'>\n              {coachName}\n            </Text>\n          </Flex>\n          <StyledMessage>\n            {/* Streaming loader and content */}\n            {streamingContent}\n            {loading || error ? (\n              <>\n                {loading && !isStreamingMessage && <GenAIMessageProgress />}\n                {error && <ErrorState message={error} />}\n              </>\n            ) : (\n              <>\n                {/* Non streaming content */}\n                {!isStreamingMessage && message && (\n                  <RichTextViewer content={message} type='markdown' />\n                )}\n                {feedback && (\n                  <Flex container={{ pad: [0.5, undefined] }}>\n                    {reaction ? (\n                      <>\n                        <Flex\n                          container={{ pad: 0.5 }}\n                          aria-label={selectedFeedbackResponse}\n                          ref={setWrapperEl}\n                          tabIndex={-1}\n                        >\n                          <Icon\n                            name={reaction === 'liked' ? 'thumbs-up-solid' : 'thumbs-down-solid'}\n                          />\n                        </Flex>\n                        {showDialog ? (\n                          onFeedbackComplete &&\n                          wrapperEl && (\n                            <FormDialog\n                              target={wrapperEl}\n                              heading={t('share_feedback')}\n                              onCancel={() => {\n                                focusOnInteractionRef.current = true;\n                                setShowDialog(false);\n                                onFeedbackComplete(messageId);\n                              }}\n                              onSubmit={() => {\n                                focusOnInteractionRef.current = true;\n                                setShowDialog(false);\n                                onFeedbackComplete(messageId, feedbackVal);\n                              }}\n                              onKeyDown={e => e.stopPropagation()}\n                            >\n                              <TextArea\n                                value={feedbackVal}\n                                onChange={e => setFeedbackVal(e.target.value)}\n                                onKeyDown={(e: KeyboardEvent<HTMLTextAreaElement>) => {\n                                  if (e.key === 'Enter' && !e.shiftKey) {\n                                    e.preventDefault();\n                                    focusOnInteractionRef.current = true;\n                                    setShowDialog(false);\n                                    onFeedbackComplete(messageId, feedbackVal);\n                                  }\n                                }}\n                                autoResize={false}\n                              />\n                            </FormDialog>\n                          )\n                        ) : (\n                          <Tooltip target={wrapperEl} describeTarget={false}>\n                            {reaction === 'liked' ? t('good_response') : t('bad_response')}\n                          </Tooltip>\n                        )}\n                      </>\n                    ) : (\n                      <>\n                        <Button\n                          label={t('good_response')}\n                          variant='simple'\n                          icon\n                          compact\n                          onClick={() => {\n                            onReaction?.(messageId, 'liked');\n                            focusOnInteractionRef.current = true;\n                          }}\n                        >\n                          <Icon name='thumbs-up' />\n                        </Button>\n\n                        <Button\n                          label={t('bad_response')}\n                          variant='simple'\n                          icon\n                          compact\n                          onClick={() => {\n                            setShowDialog(true);\n                            onReaction?.(messageId, 'disliked');\n                          }}\n                        >\n                          <Icon name='thumbs-down' />\n                        </Button>\n                      </>\n                    )}\n                  </Flex>\n                )}\n                {suggestions && (\n                  <Flex as={StyledSuggestionsContainer} container={{ direction: 'column', gap: 1 }}>\n                    {suggestions.map(({ id, message: prompt }) => {\n                      return (\n                        <Button\n                          as={StyledSuggestion}\n                          onClick={onSend ? () => onSend({ id, message: prompt }) : undefined}\n                          key={id}\n                        >\n                          {prompt}\n                        </Button>\n                      );\n                    })}\n                  </Flex>\n                )}\n              </>\n            )}\n          </StyledMessage>\n        </Flex>\n      );\n    }\n\n    if (isUserMessage(props)) {\n      if (plainTextMessage) {\n        ariaLabel = t('you_asked', [plainTextMessage]);\n      }\n\n      if (announceInteraction) {\n        ariaLabel = `${ariaLabel} ${t('interaction_message')}`;\n      }\n\n      return (\n        <StyledUserMessage\n          as={StyledUserMessage}\n          data-testid={testIds.userMessage}\n          {...restProps}\n          type='message'\n          aria-label={ariaLabel}\n          ref={ref}\n        >\n          {props.attachments && props.attachments.length > 0 && (\n            <StyledAttachmentsList type='display' items={props.attachments} />\n          )}\n          {message && <RichTextViewer content={message} type='markdown' />}\n        </StyledUserMessage>\n      );\n    }\n\n    return null;\n  }\n);\n\nexport default GenAIMessage;\n"]}

package/lib/components/HierarchicalAssignments/AssignmentDetail.d.ts

@@ -1,6 +1,7 @@
 import type { HeadingTag } from '@pega/cosmos-react-core';
 import type { AssignmentProps } from './HierarchicalAssignments.types';
-export declare const AssignmentDetail: ({ processName, name, headingTag }: Pick<AssignmentProps, "processName" | "name"> & {
+export declare const AssignmentDetail: ({ processName, name, active, headingTag }: Pick<AssignmentProps, "processName" | "name"> & {
+    active?: boolean;
     headingTag?: HeadingTag;
 }) => import("react/jsx-runtime").JSX.Element;
 export default AssignmentDetail;

package/lib/components/HierarchicalAssignments/AssignmentDetail.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"AssignmentDetail.d.ts","sourceRoot":"","sources":["../../../src/components/HierarchicalAssignments/AssignmentDetail.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,yBAAyB,CAAC;AAE1D,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,iCAAiC,CAAC;AAEvE,eAAO,MAAM,gBAAgB,GAAI,mCAI9B,IAAI,CAAC,eAAe,EAAE,aAAa,GAAG,MAAM,CAAC,GAAG;IAAE,UAAU,CAAC,EAAE,UAAU,CAAA;CAAE,4CAa7E,CAAC;AAEF,eAAe,gBAAgB,CAAC"}
+{"version":3,"file":"AssignmentDetail.d.ts","sourceRoot":"","sources":["../../../src/components/HierarchicalAssignments/AssignmentDetail.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,yBAAyB,CAAC;AAE1D,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,iCAAiC,CAAC;AAEvE,eAAO,MAAM,gBAAgB,GAAI,2CAK9B,IAAI,CAAC,eAAe,EAAE,aAAa,GAAG,MAAM,CAAC,GAAG;IACjD,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,UAAU,CAAC,EAAE,UAAU,CAAC;CACzB,4CAiBA,CAAC;AAEF,eAAe,gBAAgB,CAAC"}

package/lib/components/HierarchicalAssignments/AssignmentDetail.js

@@ -1,9 +1,9 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { Text, Tooltip, useElement } from '@pega/cosmos-react-core';
-export const AssignmentDetail = ({ processName, name, headingTag }) => {
+export const AssignmentDetail = ({ processName, name, active, headingTag }) => {
     const [element, setElement] = useElement();
     const assignmentDetail = processName ? `${processName} - ${name}` : name;
-    return (_jsxs(_Fragment, { children: [_jsx(Text, { variant: headingTag, ref: setElement, children: assignmentDetail }), _jsx(Tooltip, { target: element, smart: true, children: assignmentDetail })] }));
+    return (_jsxs(_Fragment, { children: [_jsx(Text, { variant: headingTag, ref: setElement, "data-focusable-form-heading": active ? '' : undefined, children: assignmentDetail }), _jsx(Tooltip, { target: element, smart: true, children: assignmentDetail })] }));
 };
 export default AssignmentDetail;
 //# sourceMappingURL=AssignmentDetail.js.map

package/lib/components/HierarchicalAssignments/AssignmentDetail.js.map

@@ -1 +1 @@
-{"version":3,"file":"AssignmentDetail.js","sourceRoot":"","sources":["../../../src/components/HierarchicalAssignments/AssignmentDetail.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,OAAO,EAAE,UAAU,EAAE,MAAM,yBAAyB,CAAC;AAKpE,MAAM,CAAC,MAAM,gBAAgB,GAAG,CAAC,EAC/B,WAAW,EACX,IAAI,EACJ,UAAU,EACkE,EAAE,EAAE;IAChF,MAAM,CAAC,OAAO,EAAE,UAAU,CAAC,GAAG,UAAU,EAAe,CAAC;IACxD,MAAM,gBAAgB,GAAG,WAAW,CAAC,CAAC,CAAC,GAAG,WAAW,MAAM,IAAI,EAAE,CAAC,CAAC,CAAC,IAAI,CAAC;IACzE,OAAO,CACL,8BACE,KAAC,IAAI,IAAC,OAAO,EAAE,UAAU,EAAE,GAAG,EAAE,UAAU,YACvC,gBAAgB,GACZ,EACP,KAAC,OAAO,IAAC,MAAM,EAAE,OAAO,EAAE,KAAK,kBAC5B,gBAAgB,GACT,IACT,CACJ,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,gBAAgB,CAAC","sourcesContent":["import { Text, Tooltip, useElement } from '@pega/cosmos-react-core';\nimport type { HeadingTag } from '@pega/cosmos-react-core';\n\nimport type { AssignmentProps } from './HierarchicalAssignments.types';\n\nexport const AssignmentDetail = ({\n  processName,\n  name,\n  headingTag\n}: Pick<AssignmentProps, 'processName' | 'name'> & { headingTag?: HeadingTag }) => {\n  const [element, setElement] = useElement<HTMLElement>();\n  const assignmentDetail = processName ? `${processName} - ${name}` : name;\n  return (\n    <>\n      <Text variant={headingTag} ref={setElement}>\n        {assignmentDetail}\n      </Text>\n      <Tooltip target={element} smart>\n        {assignmentDetail}\n      </Tooltip>\n    </>\n  );\n};\n\nexport default AssignmentDetail;\n"]}
+{"version":3,"file":"AssignmentDetail.js","sourceRoot":"","sources":["../../../src/components/HierarchicalAssignments/AssignmentDetail.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,OAAO,EAAE,UAAU,EAAE,MAAM,yBAAyB,CAAC;AAKpE,MAAM,CAAC,MAAM,gBAAgB,GAAG,CAAC,EAC/B,WAAW,EACX,IAAI,EACJ,MAAM,EACN,UAAU,EAIX,EAAE,EAAE;IACH,MAAM,CAAC,OAAO,EAAE,UAAU,CAAC,GAAG,UAAU,EAAe,CAAC;IACxD,MAAM,gBAAgB,GAAG,WAAW,CAAC,CAAC,CAAC,GAAG,WAAW,MAAM,IAAI,EAAE,CAAC,CAAC,CAAC,IAAI,CAAC;IACzE,OAAO,CACL,8BACE,KAAC,IAAI,IACH,OAAO,EAAE,UAAU,EACnB,GAAG,EAAE,UAAU,iCACc,MAAM,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,SAAS,YAEnD,gBAAgB,GACZ,EACP,KAAC,OAAO,IAAC,MAAM,EAAE,OAAO,EAAE,KAAK,kBAC5B,gBAAgB,GACT,IACT,CACJ,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,gBAAgB,CAAC","sourcesContent":["import { Text, Tooltip, useElement } from '@pega/cosmos-react-core';\nimport type { HeadingTag } from '@pega/cosmos-react-core';\n\nimport type { AssignmentProps } from './HierarchicalAssignments.types';\n\nexport const AssignmentDetail = ({\n  processName,\n  name,\n  active,\n  headingTag\n}: Pick<AssignmentProps, 'processName' | 'name'> & {\n  active?: boolean;\n  headingTag?: HeadingTag;\n}) => {\n  const [element, setElement] = useElement<HTMLElement>();\n  const assignmentDetail = processName ? `${processName} - ${name}` : name;\n  return (\n    <>\n      <Text\n        variant={headingTag}\n        ref={setElement}\n        data-focusable-form-heading={active ? '' : undefined}\n      >\n        {assignmentDetail}\n      </Text>\n      <Tooltip target={element} smart>\n        {assignmentDetail}\n      </Tooltip>\n    </>\n  );\n};\n\nexport default AssignmentDetail;\n"]}

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

@@ -1 +1 @@
-{"version":3,"file":"HierarchicalAssignments.d.ts","sourceRoot":"","sources":["../../../src/components/HierarchicalAssignments/HierarchicalAssignments.tsx"],"names":[],"mappings":"AAyBA,OAAO,KAAK,EAAE,2BAA2B,EAAiB,MAAM,iCAAiC,CAAC;;;;AAwOlG,wBAAuF"}
+{"version":3,"file":"HierarchicalAssignments.d.ts","sourceRoot":"","sources":["../../../src/components/HierarchicalAssignments/HierarchicalAssignments.tsx"],"names":[],"mappings":"AAyBA,OAAO,KAAK,EAAE,2BAA2B,EAAiB,MAAM,iCAAiC,CAAC;;;;AA6OlG,wBAAuF"}

package/lib/components/HierarchicalAssignments/HierarchicalAssignments.js

@@ -136,7 +136,7 @@ const HierarchicalAssignments = forwardRef(({ assignments, childCases, collapsed
         }
     }, [childCases, expandAllCases]);
     if (openItem?.content) {
-        return (_jsx(StyledAssignments, { "data-testid": testIds.root, ref: ref, expanded: true, children: _jsx(TaskItem, { ...openItem, headingTag: 'h2' }) }));
+        return (_jsx(StyledAssignments, { "data-testid": testIds.root, ref: ref, expanded: true, "data-focusable-form-container": '', children: _jsx(TaskItem, { ...openItem, headingTag: 'h2' }) }));
     }
     return (_jsx(_Fragment, { children: showAssignmentList && (_jsx(StyledAssignments, { "data-testid": testIds.root, ref: ref, expanded: open, children: _jsxs(_Fragment, { children: [_jsx(CardHeader, { ref: containerRef, container: { justify: 'start', alignItems: 'center', gap: 1 }, children: _jsx(StyledTitleExpandButton, { "data-testid": testIds.toggleAction, type: 'button', variant: 'text', onClick: () => {
                                 onToggleCollapsed?.(!collapsed);

package/lib/components/HierarchicalAssignments/HierarchicalAssignments.js.map

@@ -1 +1 @@
-{"version":3,"file":"HierarchicalAssignments.js","sourceRoot":"","sources":["../../../src/components/HierarchicalAssignments/HierarchicalAssignments.tsx"],"names":[],"mappings":"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","sourcesContent":["import { useState, forwardRef, useRef, useCallback, useMemo, useEffect } from 'react';\nimport type { PropsWithoutRef } from 'react';\n\nimport {\n  CardHeader,\n  useI18n,\n  Icon,\n  Text,\n  Flex,\n  useUID,\n  Progress,\n  useTestIds,\n  withTestIds,\n  useBreakpoint,\n  ExpandCollapse,\n  useLiveLog,\n  useEvent\n} from '@pega/cosmos-react-core';\n\nimport { TaskItem } from '../Tasks/TaskList';\n\nimport {\n  StyledAssignments,\n  StyledExpandButton as StyledTitleExpandButton\n} from './Assignments.styles';\nimport type { HierarchicalAssignmentProps, CaseListProps } from './HierarchicalAssignments.types';\nimport { getHierarchicalAssignmentsTestIds } from './HierarchicalAssignments.test-ids';\nimport AssignmentTreeContext from './AssignmentContext';\nimport AssignmentTree from './AssignmentTree';\nimport {\n  getNextNode,\n  getPreviousNode,\n  getParentNode,\n  getFirstChildNode,\n  getDeepestNode,\n  getCaseIdsWithChildren\n} from './helpers';\n\nconst HierarchicalAssignments = forwardRef(\n  (\n    {\n      assignments,\n      childCases,\n      collapsed = false,\n      onToggleCollapsed,\n      openItem,\n      progress,\n      name,\n      testId,\n      expandAllCases = true\n    }: PropsWithoutRef<HierarchicalAssignmentProps>,\n    ref: HierarchicalAssignmentProps['ref']\n  ) => {\n    const t = useI18n();\n    const id = useUID();\n    const { announcePolite } = useLiveLog();\n    const testIds = useTestIds(testId, getHierarchicalAssignmentsTestIds);\n    const containerRef = useRef<HTMLDivElement>(null);\n    const isMediumOrAbove = useBreakpoint('sm', { breakpointRef: containerRef });\n    const open = !collapsed;\n    const [focusedNodeId, setFocusedNodeId] = useState<string>();\n    const parentRef = useRef<HTMLUListElement>(null);\n    const [caseIdExpandList, setCaseIdExpandList] = useState<CaseListProps['id'][]>([]);\n    const [nodeInternalFocus, setNodeInternalFocus] = useState(false);\n    const reverseTabFlow = useRef(false);\n\n    useEvent(\n      'focusin',\n      e => {\n        if (e?.relatedTarget && e.relatedTarget instanceof Node) {\n          if (\n            !(parentRef.current?.contains(e.relatedTarget) && parentRef.current !== e.relatedTarget)\n          ) {\n            announcePolite({ message: t('key_navigation_instruction') });\n          }\n        } else if (!e?.relatedTarget) {\n          announcePolite({ message: t('key_navigation_instruction') });\n        }\n      },\n      { target: parentRef }\n    );\n\n    const setNodeInternalFocusHandler = useCallback((value: boolean) => {\n      setNodeInternalFocus(value);\n    }, []);\n\n    useEffect(() => {\n      if (collapsed || progress) {\n        setFocusedNodeId(undefined);\n      }\n    }, [collapsed, progress]);\n\n    const header = (\n      <Flex container={{ alignItems: 'center', gap: 1 }}>\n        <Icon name='caret-right' />\n        <Text variant='h2'>{name ?? t('assignments')}</Text>\n      </Flex>\n    );\n\n    const firstNode = useMemo(() => {\n      if (assignments?.length) {\n        return assignments[0].id;\n      }\n      if (childCases?.length) {\n        return childCases[0].id;\n      }\n    }, [assignments, childCases]);\n\n    const showAssignmentList = !!(assignments?.length || childCases?.length);\n    const lastNodeId = useMemo(() => {\n      const nodeList = {\n        assignments: assignments?.length ? assignments : [],\n        childCases: childCases?.length ? childCases : []\n      };\n      const nodes = [...nodeList.assignments, ...nodeList.childCases];\n      return getDeepestNode(nodeList, nodes[nodes.length - 1]?.id, caseIdExpandList)?.id;\n    }, [assignments, childCases, caseIdExpandList]);\n\n    const changeFocusHandler = useCallback(\n      (nodeId: string, key?: string, expandList?: string[]) => {\n        const nodeList = {\n          assignments: assignments?.length ? assignments : [],\n          childCases: childCases?.length ? childCases : []\n        };\n        const expandedChildCase = expandList?.length ? expandList : [];\n        switch (key) {\n          case 'down': {\n            const nextNode = getNextNode(nodeList, nodeId, expandedChildCase);\n            if (nextNode) {\n              setFocusedNodeId(nextNode?.id);\n            }\n            break;\n          }\n          case 'up': {\n            const previousNode = getPreviousNode(nodeList, nodeId, expandedChildCase);\n            if (previousNode) {\n              setFocusedNodeId(previousNode?.id);\n            }\n            break;\n          }\n          case 'left': {\n            const parentNode = getParentNode(nodeList, nodeId);\n            if (parentNode) {\n              setFocusedNodeId(parentNode.id);\n            }\n            break;\n          }\n          case 'right': {\n            const childNode = getFirstChildNode(nodeList, nodeId, expandedChildCase);\n            if (childNode) {\n              setFocusedNodeId(childNode.id);\n            }\n            break;\n          }\n          default: {\n            if (nodeId !== focusedNodeId) setFocusedNodeId(nodeId);\n            break;\n          }\n        }\n      },\n      [assignments, childCases, focusedNodeId]\n    );\n\n    const assignmentContextValue = useMemo(() => {\n      return {\n        firstNodeId: firstNode,\n        lastNodeId,\n        focusedNodeId,\n        changeFocusHandler,\n        caseIdExpandList,\n        isMediumOrAbove,\n        parentRef,\n        nodeInternalFocus,\n        setNodeInternalFocusHandler,\n        reverseTabFlow\n      };\n    }, [\n      firstNode,\n      changeFocusHandler,\n      focusedNodeId,\n      caseIdExpandList,\n      lastNodeId,\n      isMediumOrAbove,\n      nodeInternalFocus\n    ]);\n\n    const childCaseToggleHandler = (value: boolean, selectedCaseId: CaseListProps['id']) => {\n      if (value) {\n        setCaseIdExpandList(prevState => [...prevState, selectedCaseId]);\n      } else {\n        setCaseIdExpandList(prevState => {\n          return prevState.filter(caseId => caseId !== selectedCaseId);\n        });\n      }\n    };\n\n    useEffect(() => {\n      if (expandAllCases && childCases?.length) {\n        setCaseIdExpandList(getCaseIdsWithChildren(childCases));\n      }\n    }, [childCases, expandAllCases]);\n\n    if (openItem?.content) {\n      return (\n        <StyledAssignments data-testid={testIds.root} ref={ref} expanded>\n          <TaskItem {...openItem} headingTag='h2' />\n        </StyledAssignments>\n      );\n    }\n\n    return (\n      <>\n        {showAssignmentList && (\n          <StyledAssignments data-testid={testIds.root} ref={ref} expanded={open}>\n            <>\n              <CardHeader\n                ref={containerRef}\n                container={{ justify: 'start', alignItems: 'center', gap: 1 }}\n              >\n                <StyledTitleExpandButton\n                  data-testid={testIds.toggleAction}\n                  type='button'\n                  variant='text'\n                  onClick={() => {\n                    onToggleCollapsed?.(!collapsed);\n                  }}\n                  aria-controls={id}\n                  aria-expanded={open}\n                  aria-label={name || t('assignments')}\n                >\n                  {header}\n                </StyledTitleExpandButton>\n              </CardHeader>\n              {open && (\n                <ExpandCollapse id={id} collapsed={collapsed}>\n                  {progress ? (\n                    <Progress delay placement='block' message={t('loading')} />\n                  ) : (\n                    <AssignmentTreeContext.Provider value={assignmentContextValue}>\n                      <AssignmentTree\n                        assignments={assignments}\n                        childCases={childCases}\n                        childCaseToggleHandler={childCaseToggleHandler}\n                        ref={parentRef}\n                      />\n                    </AssignmentTreeContext.Provider>\n                  )}\n                </ExpandCollapse>\n              )}\n            </>\n          </StyledAssignments>\n        )}\n      </>\n    );\n  }\n);\n\nexport default withTestIds(HierarchicalAssignments, getHierarchicalAssignmentsTestIds);\n"]}
+{"version":3,"file":"HierarchicalAssignments.js","sourceRoot":"","sources":["../../../src/components/HierarchicalAssignments/HierarchicalAssignments.tsx"],"names":[],"mappings":"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","sourcesContent":["import { useState, forwardRef, useRef, useCallback, useMemo, useEffect } from 'react';\nimport type { PropsWithoutRef } from 'react';\n\nimport {\n  CardHeader,\n  useI18n,\n  Icon,\n  Text,\n  Flex,\n  useUID,\n  Progress,\n  useTestIds,\n  withTestIds,\n  useBreakpoint,\n  ExpandCollapse,\n  useLiveLog,\n  useEvent\n} from '@pega/cosmos-react-core';\n\nimport { TaskItem } from '../Tasks/TaskList';\n\nimport {\n  StyledAssignments,\n  StyledExpandButton as StyledTitleExpandButton\n} from './Assignments.styles';\nimport type { HierarchicalAssignmentProps, CaseListProps } from './HierarchicalAssignments.types';\nimport { getHierarchicalAssignmentsTestIds } from './HierarchicalAssignments.test-ids';\nimport AssignmentTreeContext from './AssignmentContext';\nimport AssignmentTree from './AssignmentTree';\nimport {\n  getNextNode,\n  getPreviousNode,\n  getParentNode,\n  getFirstChildNode,\n  getDeepestNode,\n  getCaseIdsWithChildren\n} from './helpers';\n\nconst HierarchicalAssignments = forwardRef(\n  (\n    {\n      assignments,\n      childCases,\n      collapsed = false,\n      onToggleCollapsed,\n      openItem,\n      progress,\n      name,\n      testId,\n      expandAllCases = true\n    }: PropsWithoutRef<HierarchicalAssignmentProps>,\n    ref: HierarchicalAssignmentProps['ref']\n  ) => {\n    const t = useI18n();\n    const id = useUID();\n    const { announcePolite } = useLiveLog();\n    const testIds = useTestIds(testId, getHierarchicalAssignmentsTestIds);\n    const containerRef = useRef<HTMLDivElement>(null);\n    const isMediumOrAbove = useBreakpoint('sm', { breakpointRef: containerRef });\n    const open = !collapsed;\n    const [focusedNodeId, setFocusedNodeId] = useState<string>();\n    const parentRef = useRef<HTMLUListElement>(null);\n    const [caseIdExpandList, setCaseIdExpandList] = useState<CaseListProps['id'][]>([]);\n    const [nodeInternalFocus, setNodeInternalFocus] = useState(false);\n    const reverseTabFlow = useRef(false);\n\n    useEvent(\n      'focusin',\n      e => {\n        if (e?.relatedTarget && e.relatedTarget instanceof Node) {\n          if (\n            !(parentRef.current?.contains(e.relatedTarget) && parentRef.current !== e.relatedTarget)\n          ) {\n            announcePolite({ message: t('key_navigation_instruction') });\n          }\n        } else if (!e?.relatedTarget) {\n          announcePolite({ message: t('key_navigation_instruction') });\n        }\n      },\n      { target: parentRef }\n    );\n\n    const setNodeInternalFocusHandler = useCallback((value: boolean) => {\n      setNodeInternalFocus(value);\n    }, []);\n\n    useEffect(() => {\n      if (collapsed || progress) {\n        setFocusedNodeId(undefined);\n      }\n    }, [collapsed, progress]);\n\n    const header = (\n      <Flex container={{ alignItems: 'center', gap: 1 }}>\n        <Icon name='caret-right' />\n        <Text variant='h2'>{name ?? t('assignments')}</Text>\n      </Flex>\n    );\n\n    const firstNode = useMemo(() => {\n      if (assignments?.length) {\n        return assignments[0].id;\n      }\n      if (childCases?.length) {\n        return childCases[0].id;\n      }\n    }, [assignments, childCases]);\n\n    const showAssignmentList = !!(assignments?.length || childCases?.length);\n    const lastNodeId = useMemo(() => {\n      const nodeList = {\n        assignments: assignments?.length ? assignments : [],\n        childCases: childCases?.length ? childCases : []\n      };\n      const nodes = [...nodeList.assignments, ...nodeList.childCases];\n      return getDeepestNode(nodeList, nodes[nodes.length - 1]?.id, caseIdExpandList)?.id;\n    }, [assignments, childCases, caseIdExpandList]);\n\n    const changeFocusHandler = useCallback(\n      (nodeId: string, key?: string, expandList?: string[]) => {\n        const nodeList = {\n          assignments: assignments?.length ? assignments : [],\n          childCases: childCases?.length ? childCases : []\n        };\n        const expandedChildCase = expandList?.length ? expandList : [];\n        switch (key) {\n          case 'down': {\n            const nextNode = getNextNode(nodeList, nodeId, expandedChildCase);\n            if (nextNode) {\n              setFocusedNodeId(nextNode?.id);\n            }\n            break;\n          }\n          case 'up': {\n            const previousNode = getPreviousNode(nodeList, nodeId, expandedChildCase);\n            if (previousNode) {\n              setFocusedNodeId(previousNode?.id);\n            }\n            break;\n          }\n          case 'left': {\n            const parentNode = getParentNode(nodeList, nodeId);\n            if (parentNode) {\n              setFocusedNodeId(parentNode.id);\n            }\n            break;\n          }\n          case 'right': {\n            const childNode = getFirstChildNode(nodeList, nodeId, expandedChildCase);\n            if (childNode) {\n              setFocusedNodeId(childNode.id);\n            }\n            break;\n          }\n          default: {\n            if (nodeId !== focusedNodeId) setFocusedNodeId(nodeId);\n            break;\n          }\n        }\n      },\n      [assignments, childCases, focusedNodeId]\n    );\n\n    const assignmentContextValue = useMemo(() => {\n      return {\n        firstNodeId: firstNode,\n        lastNodeId,\n        focusedNodeId,\n        changeFocusHandler,\n        caseIdExpandList,\n        isMediumOrAbove,\n        parentRef,\n        nodeInternalFocus,\n        setNodeInternalFocusHandler,\n        reverseTabFlow\n      };\n    }, [\n      firstNode,\n      changeFocusHandler,\n      focusedNodeId,\n      caseIdExpandList,\n      lastNodeId,\n      isMediumOrAbove,\n      nodeInternalFocus\n    ]);\n\n    const childCaseToggleHandler = (value: boolean, selectedCaseId: CaseListProps['id']) => {\n      if (value) {\n        setCaseIdExpandList(prevState => [...prevState, selectedCaseId]);\n      } else {\n        setCaseIdExpandList(prevState => {\n          return prevState.filter(caseId => caseId !== selectedCaseId);\n        });\n      }\n    };\n\n    useEffect(() => {\n      if (expandAllCases && childCases?.length) {\n        setCaseIdExpandList(getCaseIdsWithChildren(childCases));\n      }\n    }, [childCases, expandAllCases]);\n\n    if (openItem?.content) {\n      return (\n        <StyledAssignments\n          data-testid={testIds.root}\n          ref={ref}\n          expanded\n          data-focusable-form-container=''\n        >\n          <TaskItem {...openItem} headingTag='h2' />\n        </StyledAssignments>\n      );\n    }\n\n    return (\n      <>\n        {showAssignmentList && (\n          <StyledAssignments data-testid={testIds.root} ref={ref} expanded={open}>\n            <>\n              <CardHeader\n                ref={containerRef}\n                container={{ justify: 'start', alignItems: 'center', gap: 1 }}\n              >\n                <StyledTitleExpandButton\n                  data-testid={testIds.toggleAction}\n                  type='button'\n                  variant='text'\n                  onClick={() => {\n                    onToggleCollapsed?.(!collapsed);\n                  }}\n                  aria-controls={id}\n                  aria-expanded={open}\n                  aria-label={name || t('assignments')}\n                >\n                  {header}\n                </StyledTitleExpandButton>\n              </CardHeader>\n              {open && (\n                <ExpandCollapse id={id} collapsed={collapsed}>\n                  {progress ? (\n                    <Progress delay placement='block' message={t('loading')} />\n                  ) : (\n                    <AssignmentTreeContext.Provider value={assignmentContextValue}>\n                      <AssignmentTree\n                        assignments={assignments}\n                        childCases={childCases}\n                        childCaseToggleHandler={childCaseToggleHandler}\n                        ref={parentRef}\n                      />\n                    </AssignmentTreeContext.Provider>\n                  )}\n                </ExpandCollapse>\n              )}\n            </>\n          </StyledAssignments>\n        )}\n      </>\n    );\n  }\n);\n\nexport default withTestIds(HierarchicalAssignments, getHierarchicalAssignmentsTestIds);\n"]}

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

@@ -1,4 +1,4 @@
-import type { FunctionComponent } from 'react';
+import { type FunctionComponent } from 'react';
 import type { StageProps } from './Stages.types';
 export interface StageGlimpseProps {
     stage: StageProps;

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

@@ -1 +1 @@
-{"version":3,"file":"StageGlimpse.d.ts","sourceRoot":"","sources":["../../../src/components/Stages/StageGlimpse.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAK/C,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,gBAAgB,CAAC;AAKjD,MAAM,WAAW,iBAAiB;IAChC,KAAK,EAAE,UAAU,CAAC;CACnB;AAED,QAAA,MAAM,YAAY,EAAE,iBAAiB,CAAC,iBAAiB,CA6BtD,CAAC;AAEF,eAAe,YAAY,CAAC"}
+{"version":3,"file":"StageGlimpse.d.ts","sourceRoot":"","sources":["../../../src/components/Stages/StageGlimpse.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAgC,KAAK,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAa7E,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,gBAAgB,CAAC;AAKjD,MAAM,WAAW,iBAAiB;IAChC,KAAK,EAAE,UAAU,CAAC;CACnB;AAED,QAAA,MAAM,YAAY,EAAE,iBAAiB,CAAC,iBAAiB,CA+CtD,CAAC;AAEF,eAAe,YAAY,CAAC"}

package/lib/components/Stages/StageGlimpse.js

@@ -1,11 +1,12 @@
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { Icon, Flex, registerIcon, Text, useI18n, StyledIcon } from '@pega/cosmos-react-core';
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { isValidElement, cloneElement } from 'react';
+import { Icon, Flex, registerIcon, Text, useI18n, StyledIcon, VisuallyHiddenText } from '@pega/cosmos-react-core';
 import * as checkIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/check.icon';
 import { StyledDateTimeDisplay, StyledStep, StyledStepsContainer } from './Stages.styles';
 registerIcon(checkIcon);
 const StageGlimpse = ({ stage }) => {
     const t = useI18n();
-    return (_jsxs(_Fragment, { children: [_jsx("div", { children: stage.date ? (_jsx(StyledDateTimeDisplay, { value: stage.date, variant: 'relative', format: 'short' })) : (_jsx(Text, { variant: 'secondary', children: t('not_started') })) }), stage.steps && (_jsx(StyledStepsContainer, { children: stage.steps.map(({ id, name, completed }) => (_jsxs(Flex, { as: StyledStep, container: { gap: 0.5 }, completed: completed, children: [completed ? (_jsx(Icon, { name: 'check' })) : (_jsx(StyledIcon, { as: 'span', role: 'presentation', "aria-hidden": true, children: "\u2022" })), _jsx("div", { children: name })] }, id))) }))] }));
+    return (_jsxs(_Fragment, { children: [_jsx("div", { children: stage.date ? (_jsx(StyledDateTimeDisplay, { value: stage.date, variant: 'relative', format: 'short' })) : (_jsx(Text, { variant: 'secondary', children: t('not_started') })) }), stage.steps && (_jsx(StyledStepsContainer, { children: stage.steps.map(({ id, name, completed }) => (_jsxs(Flex, { as: StyledStep, container: { gap: 0.5 }, completed: completed, children: [completed ? (_jsx(Icon, { name: 'check' })) : (_jsx(StyledIcon, { as: 'span', role: 'presentation', "aria-hidden": true, children: "\u2022" })), _jsx("div", { children: isValidElement(name) ? (cloneElement(name, {}, _jsxs(_Fragment, { children: [name.props.children, completed && (_jsx(VisuallyHiddenText, { children: ` - ${t('completed')}` }))] }))) : (_jsxs(_Fragment, { children: [name, completed && _jsx(VisuallyHiddenText, { children: ` - ${t('completed')}` })] })) })] }, id))) }))] }));
 };
 export default StageGlimpse;
 //# sourceMappingURL=StageGlimpse.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"StageGlimpse.js","sourceRoot":"","sources":["../../../src/components/Stages/StageGlimpse.tsx"],"names":[],"mappings":";AAEA,OAAO,EAAE,IAAI,EAAE,IAAI,EAAE,YAAY,EAAE,IAAI,EAAE,OAAO,EAAE,UAAU,EAAE,MAAM,yBAAyB,CAAC;AAC9F,OAAO,KAAK,SAAS,MAAM,8DAA8D,CAAC;AAG1F,OAAO,EAAE,qBAAqB,EAAE,UAAU,EAAE,oBAAoB,EAAE,MAAM,iBAAiB,CAAC;AAE1F,YAAY,CAAC,SAAS,CAAC,CAAC;AAMxB,MAAM,YAAY,GAAyC,CAAC,EAAE,KAAK,EAAqB,EAAE,EAAE;IAC1F,MAAM,CAAC,GAAG,OAAO,EAAE,CAAC;IACpB,OAAO,CACL,8BACE,wBACG,KAAK,CAAC,IAAI,CAAC,CAAC,CAAC,CACZ,KAAC,qBAAqB,IAAC,KAAK,EAAE,KAAK,CAAC,IAAI,EAAE,OAAO,EAAC,UAAU,EAAC,MAAM,EAAC,OAAO,GAAG,CAC/E,CAAC,CAAC,CAAC,CACF,KAAC,IAAI,IAAC,OAAO,EAAC,WAAW,YAAE,CAAC,CAAC,aAAa,CAAC,GAAQ,CACpD,GACG,EACL,KAAK,CAAC,KAAK,IAAI,CACd,KAAC,oBAAoB,cAClB,KAAK,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,EAAE,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE,EAAE,EAAE,CAAC,CAC5C,MAAC,IAAI,IAAC,EAAE,EAAE,UAAU,EAAE,SAAS,EAAE,EAAE,GAAG,EAAE,GAAG,EAAE,EAAW,SAAS,EAAE,SAAS,aACzE,SAAS,CAAC,CAAC,CAAC,CACX,KAAC,IAAI,IAAC,IAAI,EAAC,OAAO,GAAG,CACtB,CAAC,CAAC,CAAC,CACF,KAAC,UAAU,IAAC,EAAE,EAAC,MAAM,EAAC,IAAI,EAAC,cAAc,4CAE5B,CACd,EACD,wBAAM,IAAI,GAAO,KARiC,EAAE,CAS/C,CACR,CAAC,GACmB,CACxB,IACA,CACJ,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,YAAY,CAAC","sourcesContent":["import type { FunctionComponent } from 'react';\n\nimport { Icon, Flex, registerIcon, Text, useI18n, StyledIcon } from '@pega/cosmos-react-core';\nimport * as checkIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/check.icon';\n\nimport type { StageProps } from './Stages.types';\nimport { StyledDateTimeDisplay, StyledStep, StyledStepsContainer } from './Stages.styles';\n\nregisterIcon(checkIcon);\n\nexport interface StageGlimpseProps {\n  stage: StageProps;\n}\n\nconst StageGlimpse: FunctionComponent<StageGlimpseProps> = ({ stage }: StageGlimpseProps) => {\n  const t = useI18n();\n  return (\n    <>\n      <div>\n        {stage.date ? (\n          <StyledDateTimeDisplay value={stage.date} variant='relative' format='short' />\n        ) : (\n          <Text variant='secondary'>{t('not_started')}</Text>\n        )}\n      </div>\n      {stage.steps && (\n        <StyledStepsContainer>\n          {stage.steps.map(({ id, name, completed }) => (\n            <Flex as={StyledStep} container={{ gap: 0.5 }} key={id} completed={completed}>\n              {completed ? (\n                <Icon name='check' />\n              ) : (\n                <StyledIcon as='span' role='presentation' aria-hidden>\n                  •\n                </StyledIcon>\n              )}\n              <div>{name}</div>\n            </Flex>\n          ))}\n        </StyledStepsContainer>\n      )}\n    </>\n  );\n};\n\nexport default StageGlimpse;\n"]}
+{"version":3,"file":"StageGlimpse.js","sourceRoot":"","sources":["../../../src/components/Stages/StageGlimpse.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,cAAc,EAAE,YAAY,EAA0B,MAAM,OAAO,CAAC;AAE7E,OAAO,EACL,IAAI,EACJ,IAAI,EACJ,YAAY,EACZ,IAAI,EACJ,OAAO,EACP,UAAU,EACV,kBAAkB,EACnB,MAAM,yBAAyB,CAAC;AACjC,OAAO,KAAK,SAAS,MAAM,8DAA8D,CAAC;AAG1F,OAAO,EAAE,qBAAqB,EAAE,UAAU,EAAE,oBAAoB,EAAE,MAAM,iBAAiB,CAAC;AAE1F,YAAY,CAAC,SAAS,CAAC,CAAC;AAMxB,MAAM,YAAY,GAAyC,CAAC,EAAE,KAAK,EAAqB,EAAE,EAAE;IAC1F,MAAM,CAAC,GAAG,OAAO,EAAE,CAAC;IACpB,OAAO,CACL,8BACE,wBACG,KAAK,CAAC,IAAI,CAAC,CAAC,CAAC,CACZ,KAAC,qBAAqB,IAAC,KAAK,EAAE,KAAK,CAAC,IAAI,EAAE,OAAO,EAAC,UAAU,EAAC,MAAM,EAAC,OAAO,GAAG,CAC/E,CAAC,CAAC,CAAC,CACF,KAAC,IAAI,IAAC,OAAO,EAAC,WAAW,YAAE,CAAC,CAAC,aAAa,CAAC,GAAQ,CACpD,GACG,EACL,KAAK,CAAC,KAAK,IAAI,CACd,KAAC,oBAAoB,cAClB,KAAK,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,EAAE,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE,EAAE,EAAE,CAAC,CAC5C,MAAC,IAAI,IAAC,EAAE,EAAE,UAAU,EAAE,SAAS,EAAE,EAAE,GAAG,EAAE,GAAG,EAAE,EAAW,SAAS,EAAE,SAAS,aACzE,SAAS,CAAC,CAAC,CAAC,CACX,KAAC,IAAI,IAAC,IAAI,EAAC,OAAO,GAAG,CACtB,CAAC,CAAC,CAAC,CACF,KAAC,UAAU,IAAC,EAAE,EAAC,MAAM,EAAC,IAAI,EAAC,cAAc,4CAE5B,CACd,EACD,wBACG,cAAc,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,CACtB,YAAY,CACV,IAAI,EACJ,EAAE,EACF,8BACG,IAAI,CAAC,KAAK,CAAC,QAAQ,EACnB,SAAS,IAAI,CACZ,KAAC,kBAAkB,cAAE,MAAM,CAAC,CAAC,WAAW,CAAC,EAAE,GAAsB,CAClE,IACA,CACJ,CACF,CAAC,CAAC,CAAC,CACF,8BACG,IAAI,EACJ,SAAS,IAAI,KAAC,kBAAkB,cAAE,MAAM,CAAC,CAAC,WAAW,CAAC,EAAE,GAAsB,IAC9E,CACJ,GACG,KA1B4C,EAAE,CA2B/C,CACR,CAAC,GACmB,CACxB,IACA,CACJ,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,YAAY,CAAC","sourcesContent":["import { isValidElement, cloneElement, type FunctionComponent } from 'react';\n\nimport {\n  Icon,\n  Flex,\n  registerIcon,\n  Text,\n  useI18n,\n  StyledIcon,\n  VisuallyHiddenText\n} from '@pega/cosmos-react-core';\nimport * as checkIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/check.icon';\n\nimport type { StageProps } from './Stages.types';\nimport { StyledDateTimeDisplay, StyledStep, StyledStepsContainer } from './Stages.styles';\n\nregisterIcon(checkIcon);\n\nexport interface StageGlimpseProps {\n  stage: StageProps;\n}\n\nconst StageGlimpse: FunctionComponent<StageGlimpseProps> = ({ stage }: StageGlimpseProps) => {\n  const t = useI18n();\n  return (\n    <>\n      <div>\n        {stage.date ? (\n          <StyledDateTimeDisplay value={stage.date} variant='relative' format='short' />\n        ) : (\n          <Text variant='secondary'>{t('not_started')}</Text>\n        )}\n      </div>\n      {stage.steps && (\n        <StyledStepsContainer>\n          {stage.steps.map(({ id, name, completed }) => (\n            <Flex as={StyledStep} container={{ gap: 0.5 }} key={id} completed={completed}>\n              {completed ? (\n                <Icon name='check' />\n              ) : (\n                <StyledIcon as='span' role='presentation' aria-hidden>\n                  •\n                </StyledIcon>\n              )}\n              <div>\n                {isValidElement(name) ? (\n                  cloneElement(\n                    name,\n                    {},\n                    <>\n                      {name.props.children}\n                      {completed && (\n                        <VisuallyHiddenText>{` - ${t('completed')}`}</VisuallyHiddenText>\n                      )}\n                    </>\n                  )\n                ) : (\n                  <>\n                    {name}\n                    {completed && <VisuallyHiddenText>{` - ${t('completed')}`}</VisuallyHiddenText>}\n                  </>\n                )}\n              </div>\n            </Flex>\n          ))}\n        </StyledStepsContainer>\n      )}\n    </>\n  );\n};\n\nexport default StageGlimpse;\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;AAsBzE,OAAO,KAAK,EAAE,UAAU,EAAE,YAAY,EAAE,UAAU,EAAE,MAAM,yBAAyB,CAAC;AAMpF,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,sCAAsC;IACtC,OAAO,CAAC,EAAE,SAAS,CAAC;IACpB,+CAA+C;IAC/C,iBAAiB,CAAC,EAAE,YAAY,CAAC,OAAO,CAAC,CAAC;CAC3C;AAED,MAAM,WAAW,aAAc,SAAQ,UAAU;IAC/C,KAAK,EAAE,aAAa,EAAE,CAAC;IACvB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,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;SAY1D,CAAC;AAoBH,eAAO,MAAM,QAAQ,oIAchB,aAAa,GAAG;IAAE,eAAe,CAAC,EAAE,CAAC,YAAY,EAAE,YAAY,KAAK,IAAI,CAAA;CAAE;;CAmE9E,CAAC;;;;AAgEF,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;AAsBzE,OAAO,KAAK,EAAE,UAAU,EAAE,YAAY,EAAE,UAAU,EAAE,MAAM,yBAAyB,CAAC;AAMpF,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,sCAAsC;IACtC,OAAO,CAAC,EAAE,SAAS,CAAC;IACpB,+CAA+C;IAC/C,iBAAiB,CAAC,EAAE,YAAY,CAAC,OAAO,CAAC,CAAC;CAC3C;AAED,MAAM,WAAW,aAAc,SAAQ,UAAU;IAC/C,KAAK,EAAE,aAAa,EAAE,CAAC;IACvB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,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;SAY1D,CAAC;AAoBH,eAAO,MAAM,QAAQ,oIAchB,aAAa,GAAG;IAAE,eAAe,CAAC,EAAE,CAAC,YAAY,EAAE,YAAY,KAAK,IAAI,CAAA;CAAE;;CA4E9E,CAAC;;;;AAgEF,wBAAyD"}

package/lib/components/Tasks/TaskList.js

@@ -45,10 +45,10 @@ export const TaskItem = withTestIds(({ testId, id, name, avatar, meta, processNa
     }, []);
     let primaryValue;
     if (processName) {
-        primaryValue = (_jsx(AssignmentDetails, { name: name, headingTag: headingTag, processName: processName }));
+        primaryValue = (_jsx(AssignmentDetails, { name: name, headingTag: headingTag, processName: processName, active: !!content }));
     }
     else {
-        primaryValue = headingTag ? _jsx(Text, { variant: headingTag, children: name }) : name;
+        primaryValue = (_jsx(Text, { variant: headingTag, "data-focusable-form-heading": content ? '' : undefined, children: name }));
     }
     const summary = (_jsx(StyledSummaryItem, { visual: avatar, hasProcessName: processName, primary: primaryValue, secondary: meta, actions: content
             ? additionalActions && _jsx(Actions, { menuAt: 1, items: additionalActions })

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 {\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} from '@pega/cosmos-react-core';\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\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  /** 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\nexport interface TaskListProps extends TestIdProp {\n  items: TaskItemProps[];\n  hasFooter?: 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  return css`\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 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\nexport const TaskItem = withTestIds(\n  ({\n    testId,\n    id,\n    name,\n    avatar,\n    meta,\n    processName,\n    onOpen,\n    content,\n    headingTag,\n    addAnnouncement,\n    additionalActions,\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    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 name={name} headingTag={headingTag} processName={processName} />\n      );\n    } else {\n      primaryValue = headingTag ? <Text variant={headingTag}>{name}</Text> : name;\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                <Button\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 ?? ''} ${name}`}</VisuallyHiddenText>\n                </Button>\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      </Flex>\n    );\n  },\n  getTaskItemTestIds\n);\n\nconst TaskList = forwardRef(function TaskList(\n  { testId, items, hasFooter = 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 {...item} addAnnouncement={addAnnouncement} key={item.id} />\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 {\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} from '@pega/cosmos-react-core';\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\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  /** 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\nexport interface TaskListProps extends TestIdProp {\n  items: TaskItemProps[];\n  hasFooter?: 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  return css`\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 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\nexport const TaskItem = withTestIds(\n  ({\n    testId,\n    id,\n    name,\n    avatar,\n    meta,\n    processName,\n    onOpen,\n    content,\n    headingTag,\n    addAnnouncement,\n    additionalActions,\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    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                <Button\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 ?? ''} ${name}`}</VisuallyHiddenText>\n                </Button>\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      </Flex>\n    );\n  },\n  getTaskItemTestIds\n);\n\nconst TaskList = forwardRef(function TaskList(\n  { testId, items, hasFooter = 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 {...item} addAnnouncement={addAnnouncement} key={item.id} />\n      ))}\n    </Flex>\n  );\n});\n\nexport default withTestIds(TaskList, getTaskListTestIds);\n"]}

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,EAAE,EAAE,EAAc,MAAM,OAAO,CAAC;AAmB5C,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;AAGhD,MAAM,WAAW,UAAW,SAAQ,cAAc,EAAE,UAAU;IAC5D,sDAAsD;IACtD,KAAK,EAAE,aAAa,EAAE,CAAC;IACvB,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,CAAC,CAAC;IACjE,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;CACvB;AAED,eAAO,MAAM,WAAW;eAA6B,OAAO;kBAAgB,OAAO;SAiBjF,CAAC;;;;AAwGH,wBAAmD"}
+{"version":3,"file":"Tasks.d.ts","sourceRoot":"","sources":["../../../src/components/Tasks/Tasks.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,EAAE,EAAc,MAAM,OAAO,CAAC;AAmB5C,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;AAGhD,MAAM,WAAW,UAAW,SAAQ,cAAc,EAAE,UAAU;IAC5D,sDAAsD;IACtD,KAAK,EAAE,aAAa,EAAE,CAAC;IACvB,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,CAAC,CAAC;IACjE,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;CACvB;AAED,eAAO,MAAM,WAAW;eAA6B,OAAO;kBAAgB,OAAO;SAiBjF,CAAC;;;;AAyGH,wBAAmD"}

package/lib/components/Tasks/Tasks.js

@@ -44,7 +44,7 @@ const Tasks = (props) => {
             toggleButtonRef?.current.focus();
         }
     }, [loadingMore]);
-    return (_jsxs(StyledTasks, { "data-testid": testIds.root, ...restProps, openItem: !!openItem, fitToParent: fitToParent, "data-app-region": true, ref: containerRef, 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: containerRef, 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) => {
                         onExpandToggle?.();
                         if (!!count && count <= items.length) {
                             const { currentTarget } = e;