@pega/lists-react 8.0.0-build.27.14

package/lib/Core/Views/Table/StyledTableContainer.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"StyledTableContainer.js","sourceRoot":"","sources":["../../../../Core/Views/Table/StyledTableContainer.jsx"],"names":[],"mappings":"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","sourcesContent":["import { forwardRef } from 'react';\nimport styled, { css } from 'styled-components';\nimport { mix, lighten, darken, getLuminance } from 'polished';\n\nimport { StyledStatus } from '@pega/cosmos-react-core/lib/components/Badges/Status';\nimport { StyledRadioCheck } from '@pega/cosmos-react-core/lib/components/RadioCheck/RadioCheck';\nimport { StyledLabel, calculateFontSize, tryCatch } from '@pega/cosmos-react-core';\n\nconst StyledTableContainer = styled(forwardRef((props, ref) => <div ref={ref} {...props} />))(({\n  theme,\n  style,\n  view\n}) => {\n  const isAggregationApplied = view.columns?.filter(c => !c.hidden).some(c => c.aggregated);\n  const freezeMarginTop = `-${style['--row-height']}`;\n  const fontSize = calculateFontSize(theme.base['font-size'], theme.base['font-scale']);\n  const selectedRowColor = tryCatch(() =>\n    mix(0.85, theme.base.palette['primary-background'], theme.base.palette.interactive)\n  );\n  const lightGreyColor = theme.base.colors.gray['extra-light'];\n  const oddRowBackgroundColor =\n    getLuminance(theme.base.palette['secondary-background']) > 0.5\n      ? lighten(0.01, theme.base.palette['secondary-background'])\n      : darken(0.1, theme.base.palette['secondary-background']);\n\n  return css`\n    --primary-background: ${theme.base.palette['primary-background']};\n    --secondary-background: ${theme.base.palette['secondary-background']};\n    --forground-color: ${theme.base.palette['foreground-color']};\n    --interactive: ${theme.base.palette.interactive};\n    --medium-blue: ${theme.base.colors.blue.medium};\n    --border-color: ${theme.base.palette['border-line']};\n    --border-color-freeze: #a5a5a5;\n    --border-width: 0.062rem;\n    --border-style: var(--border-width) solid var(--border-color);\n    --font-stretch: ${theme.components.table.typography['font-stretch']};\n    --letter-spacing: ${theme.components.table.typography['letter-spacing']};\n    --cell-padding: ${theme.base.spacing};\n    --cell-vertical-padding: calc(${theme.base.spacing} * 0.5);\n    --header-cell-padding: 0 0.12rem 0 var(--cell-padding);\n    --header-cell-right-align-padding: 0 var(--cell-padding) 0 0.12rem;\n    --header-bg-color: var(--secondary-background);\n    --aggregation-footer-bg-color: color-mix(\n      in sRGB,\n      var(--header-bg-color) 66%,\n      ${theme.base.colors.gray.light} 33%\n    );\n    --default-group-header-height: 1.5rem;\n    --group-header-height: var(--default-group-header-height);\n    --box-sizing: content-box;\n    --animation-ease: ${theme.base.animation.timing.ease};\n    --font-weight-semi-bold: ${theme.base['font-weight']['semi-bold']};\n    --row-height-multiplier: 1.125;\n    --cell-fixed-position: sticky;\n    position: relative;\n    border-radius: ${theme.base['border-radius']};\n\n    .small-screen-table {\n      --cell-fixed-position: static;\n    }\n\n    .container {\n      border: var(--border-style);\n      position: relative;\n      letter-spacing: var(--letter-spacing);\n      font-stretch: var(--font-stretch);\n    }\n\n    .hide-rows-till-ready .row[aria-rowindex] {\n      visibility: hidden;\n    }\n\n    .table-drag-proxy {\n      background: rgba(0, 0, 0, 0.21);\n      position: absolute;\n      top: 0;\n      bottom: 0;\n      z-index: 6;\n      pointer-events: none;\n      display: none;\n    }\n\n    .table-drag-line {\n      background: #999999;\n      position: absolute;\n      top: 0;\n      bottom: 0;\n      width: 0.12rem;\n      z-index: 6;\n      pointer-events: none;\n      display: none;\n    }\n\n    .freeze-line {\n      /* stylelint-disable unit-allowed-list */\n      border-right: solid 1px var(--border-color-freeze);\n      position: sticky;\n      top: 0;\n      bottom: 0;\n      width: 1px;\n      z-index: 7; /* Footer has 6 z-index so this needs to be more than that */\n      pointer-events: none;\n      height: 100%;\n      float: left;\n      margin-top: ${freezeMarginTop};\n    }\n\n    .freeze-line.freeze-line-hide {\n      display: none;\n    }\n\n    .horizontally-scrolled {\n      .freeze-line {\n        box-shadow: 2px 0 0 1px rgba(165, 165, 165, 0.2);\n        transition: 0.5s;\n      }\n    }\n\n    .cell-fixed {\n      z-index: 1;\n    }\n\n    .group-wrapper {\n      overflow: hidden;\n      display: inline-flex;\n      line-height: var(--group-header-height);\n\n      .group-context-count {\n        display: inline-flex;\n        overflow: hidden;\n      }\n    }\n\n    /* In review mode(Ex: Tabs) cosmos components are rendered and mark up is not compatible with\n      group-wrapper cell. Overridden css in group-header when dl exists inside that class which indicates\n      mark up is generated from cosmos which differentiates from normal table cell markup */\n    .group-wrapper .group-context-count dl {\n      grid-template-columns: auto;\n    }\n\n    .fallback,\n    .fallback-footer {\n      height: var(--row-height);\n      background-color: var(--header-bg-color);\n      position: absolute;\n      width: 100%;\n      z-index: -1;\n      box-sizing: var(--box-sizing);\n    }\n\n    .fallback {\n      top: -1px;\n      border-bottom: var(--border-style);\n    }\n\n    .fallback-footer {\n      top: 0;\n      border-top: var(--border-style);\n    }\n\n    .sticky-header {\n      display: grid;\n      position: sticky;\n      top: 0;\n      z-index: 6;\n    }\n\n    .cell {\n      white-space: nowrap;\n      text-overflow: ellipsis;\n      overflow: hidden;\n\n      .icons-ph {\n        min-width: 1rem;\n      }\n\n      &.custom-item {\n        width: 10em;\n      }\n    }\n\n    .cell:focus {\n      outline: 0.125rem auto var(--medium-blue);\n    }\n\n    .cell.selection-border:focus,\n    .cell.editable-cell:focus {\n      outline: none 0;\n    }\n\n    .editable-cell > span {\n      height: 100%;\n      display: flex;\n      padding: 0 6px;\n      align-items: center;\n    }\n\n    .row {\n      display: inline-flex;\n      height: var(--row-height);\n      outline: none 0;\n      transition: transform 0.5s var(--animation-ease);\n      box-sizing: var(--box-sizing);\n      position: relative;\n\n      > .cell,\n      .group-header-aggregation-row > .cell {\n        transition: transform 0.5s var(--animation-ease);\n        border-right: var(--border-style);\n        ${!theme.components.table['striped-rows'] &&\n        css`\n          border-bottom: var(--border-style);\n        `}\n        display: flex;\n        align-items: center;\n\n        &::after {\n          opacity: 1;\n          transition: opacity 0.1s var(--animation-ease);\n        }\n\n        /* stylelint-disable selector-max-class */\n        .row-action-menu {\n          display: flex;\n          align-items: center;\n          justify-content: center;\n        }\n\n        &.cell-action {\n          position: sticky;\n          z-index: 4;\n          right: 0;\n          border-right: 0;\n          min-width: 32px;\n          justify-content: center;\n          border-left: var(--border-style);\n\n          .cell-content {\n            padding: 0;\n            overflow: visible;\n          }\n\n          /* The below styles are needed to avoid ellipses in safari when no text is present\n            and to hide the 'Actions' label */\n\n          /* stylelint-disable max-nesting-depth */\n\n          div.header-label {\n            text-overflow: unset;\n            span {\n              visibility: hidden;\n            }\n          }\n        }\n        &.aggregateCell {\n          background-color: var(--aggregation-footer-bg-color);\n        }\n      }\n\n      /** Adds bottom border to the last row of a group, when striped-rows are enabled */\n      &:has(+ .group-header-row) > .cell {\n        ${theme.components.table['striped-rows'] &&\n        css`\n          border-bottom: var(--border-style);\n        `}\n      }\n      &.header > .cell {\n        border-bottom: var(--border-style);\n      }\n      .group-header-aggregation-row {\n        > .cell {\n          &.cell-action {\n            overflow: initial;\n\n            /* extending border on the top left of row action cell as we need to show border for at the end group label value when row actions are present */\n            &::before {\n              content: '';\n              position: absolute;\n              inline-size: 0;\n              inset-inline-start: calc(var(--border-width) * -1);\n              inset-block-start: calc(var(--group-header-height) * -1);\n              block-size: var(--group-header-height);\n              border-inline-start: var(--border-style);\n            }\n          }\n        }\n      }\n\n      > .cell-action {\n        background-color: var(--primary-background);\n      }\n\n      > .row-reorder-handle {\n        padding: 0;\n        border-right: 0 !important;\n        justify-content: center;\n        cursor: move;\n      }\n\n      > .row-select-handle {\n        display: flex;\n        justify-content: center;\n        &:active {\n          outline: none;\n        }\n\n        > .header-lable-container {\n          min-width: 20px;\n        }\n      }\n\n      .aggregateCell.cell {\n        border-right: none;\n      }\n\n      > .cell.cell-fixed,\n      .group-header-aggregation-row > .cell-fixed {\n        position: var(--cell-fixed-position);\n        z-index: 4;\n\n        /* As the row select column and row dragDrop column always have to be frozen */\n        &[data-col-id='RowSelect'],\n        &[data-col-id='RowDragDrop'],\n        &[data-col-id='RowError'] {\n          position: sticky;\n          flex-shrink: 0;\n          z-index: 5;\n        }\n      }\n\n      > .cell.cell-fixed:focus-within,\n      .group-header-aggregation-row > .cell-fixed {\n        z-index: 6;\n      }\n\n      &.click {\n        cursor: pointer;\n      }\n    }\n    .row:not(.row-error):not(.group-header-row):not(.header) {\n      .cell-fixed {\n        background: var(--primary-background);\n      }\n    }\n    ${theme.components.table['striped-rows'] &&\n    css`\n      /* Targets rows with an odd data-index attribute, excluding group header rows */\n      .row[data-index$='1']:not(.group-header-row):not(.header),\n      .row[data-index$='3']:not(.group-header-row):not(.header),\n      .row[data-index$='5']:not(.group-header-row):not(.header),\n      .row[data-index$='7']:not(.group-header-row):not(.header),\n      .row[data-index$='9']:not(.group-header-row):not(.header) {\n        background: ${oddRowBackgroundColor};\n        .cell-fixed {\n          background: ${oddRowBackgroundColor};\n        }\n      }\n    `}\n\n    .row-error {\n      background: ${mix(\n        0.1,\n        theme.components['form-field'].error['status-color'],\n        theme.base.palette['primary-background']\n      )};\n\n      /* stylelint-disable no-descending-specificity */\n      .cell-fixed,\n      .cell-action {\n        background: inherit;\n      }\n\n      > .cell:not(.cell-fixed):not(.cell-action) {\n        background: none;\n      }\n    }\n\n    .sort-info-container {\n      margin-left: 0.312rem;\n\n      .sort-sequence {\n        font-size: 0.625rem;\n        color: ${theme.base.colors.gray['extra-dark']};\n      }\n    }\n\n    .filter-info-container {\n      display: flex;\n      justify-content: center;\n      align-items: center;\n      margin: 0 0 0 0.312rem;\n\n      svg {\n        width: 14px;\n        height: 14px;\n      }\n    }\n\n    .cell.row-error-column {\n      padding: 0;\n      border-right: 0;\n      text-align: right;\n      outline: none;\n\n      /* Focus handling will be done as part of interation 2: EPIC-88751 */\n\n      svg {\n        color: ${theme.base.colors.red.medium};\n      }\n    }\n\n    .cell-right-align .filter-info-container svg {\n      margin: 0 0.312rem 0 0;\n    }\n\n    .editable-cell {\n      padding: 0;\n      border: 2px solid ${theme.base.palette.interactive} !important;\n      box-shadow: 0 0 1px 1px rgba(0, 118, 209) !important;\n    }\n\n    .editable-cell input {\n      border: none;\n      outline: none;\n      min-width: calc(100%);\n      min-height: 0;\n      max-height: 100%;\n      box-shadow: none !important;\n      border-radius: 0;\n    }\n\n    .editable-cell.align-right input {\n      justify-content: right;\n    }\n\n    &.show-expand-collapse-all {\n      .row > .cell-first {\n        padding-left: calc(var(--expand-collapse-all-width) + var(--cell-padding));\n        &.row-reorder-handle,\n        &.row-error-column {\n          padding: 0;\n        }\n        &.row-select-handle {\n          padding-left: calc(var(--expand-collapse-all-width));\n        }\n      }\n\n      .row-container .row > .cell-first {\n        &.row-select-handle {\n          padding-inline-start: calc(var(--expand-collapse-all-width) - var(--cell-padding));\n        }\n      }\n\n      /* stylelint-enable selector-max-class */\n      .expand-collapse-all {\n        position: absolute;\n        width: var(--expand-collapse-all-width);\n        z-index: 10;\n        height: var(--row-height);\n        background-color: var(--header-bg-color);\n        border-right: var(--border-style);\n        border-bottom: var(--border-style);\n        display: flex;\n        align-items: center;\n        justify-content: center;\n\n        > button {\n          color: var(--forground-color);\n          :focus {\n            box-shadow: ${theme.base.shadow.focus};\n          }\n        }\n      }\n      .no-border-right {\n        border-right: 0;\n      }\n    }\n\n    /* stylelint-disable selector-max-class */\n\n    .scroll-end {\n      &.row-container > .row:last-child {\n        & > .cell,\n        & .group-header-aggregation-row > .cell {\n          border-bottom: 0;\n        }\n      }\n    }\n\n    /* stylelint-enable selector-max-class */\n    .header {\n      font-weight: var(--font-weight-semi-bold);\n      position: relative; /* This is required to position .border-fix element */\n      > .cell.row-error-column {\n        border-right: 0;\n      }\n      > .cell {\n        display: flex;\n        justify-content: space-between;\n        align-items: center;\n        z-index: 2;\n        position: relative;\n        cursor: pointer;\n        background-color: var(--header-bg-color);\n        font-weight: ${theme.base['font-weight'].bold};\n        font-size: ${fontSize.xxs};\n        border-right: var(--border-style);\n        padding: var(--header-cell-padding);\n\n        .header-lable-container {\n          display: inline-flex;\n          overflow: hidden;\n          text-overflow: ellipsis;\n          font-size: ${fontSize.xs};\n          font-weight: var(--font-weight-semi-bold);\n          align-items: center;\n        }\n\n        .header-label {\n          overflow: hidden;\n          text-overflow: ellipsis;\n\n          /* To avoid browser tooltip when we get ellipsis in safari */\n          &::after {\n            content: '';\n            display: block;\n          }\n\n          /* To utilize smart tooltip making it as a non-box element */\n          /* stylelint-disable selector-max-class */\n          .cell-content {\n            display: contents;\n          }\n        }\n\n        .header-menu {\n          margin-left: auto;\n          min-width: 1rem;\n          height: auto;\n          width: auto;\n          display: grid;\n        }\n\n        .button-more {\n          gap: ${theme.base.spacing};\n          flex-shrink: 0;\n          white-space: nowrap;\n          border: none;\n          background: none !important;\n          height: auto;\n          width: auto;\n          display: grid;\n          padding: 2px;\n          min-height: 18px;\n          min-width: 18px;\n          margin-right: 0;\n          margin-inline-end: 0.125rem;\n          color: var(--forground-color);\n          :focus,\n          :hover {\n            box-shadow: ${theme.base.shadow.focus};\n          }\n        }\n      }\n\n      > .row-reorder-handle {\n        padding: 0;\n      }\n\n      > .cell-fixed:last-child {\n        border-right: var(--border-style);\n      }\n\n      > .row-select-handle {\n        padding-inline-start: calc(var(--cell-padding) / 4);\n        justify-content: center;\n      }\n\n      > .cell-right-align {\n        padding: var(--header-cell-right-align-padding);\n        justify-content: end;\n\n        .header-lable-container {\n          flex-direction: row-reverse;\n        }\n\n        .sort-info-container {\n          margin-left: 0;\n          margin-right: 0.312rem;\n        }\n      }\n\n      > .cell-first {\n        padding: 0 var(--cell-padding);\n      }\n\n      .row {\n        border-bottom: none;\n      }\n    }\n\n    /* 4 selectors required as aggregateCell of only footer need this effect */\n\n    .pContainer:not(.pContainerScroll) .footer .aggregateCell.cell {\n      border-bottom: none;\n    }\n\n    /* stylelint-enable selector-max-class */\n    .row .cell.cell-last {\n      border-right: 0;\n      flex-grow: 1;\n    }\n\n    .row-container {\n      --data-row-height: calc(\n        var(--hit-area) * var(--row-height-multiplier) + var(--cell-vertical-padding)\n      );\n      --group-header-height: ${isAggregationApplied\n        ? 'var(--default-group-header-height)'\n        : 'var(--data-row-height)'};\n      &:not(.full-content-height) > .row:not(.group-header-row) {\n        height: var(--data-row-height);\n      }\n      & > .row .cell-content {\n        /*\n         * Using box sizing content-box so that the padding is not considered for the alignment of the cell content.\n         * Vertical alignment is done using flex and max-height below even though the .cell-content might overflow due to padding + content size.\n         */\n        box-sizing: content-box;\n        white-space: nowrap;\n        text-overflow: ellipsis;\n        overflow: hidden;\n        word-break: break-all;\n        flex-grow: 1;\n\n        /* Adding padding on .cell-content so that focus rings can appear properly and doesn't clip due to overflow: hidden */\n        padding: var(--cell-vertical-padding) var(--cell-padding);\n\n        /* setting max-height so that the elements with more height like RTL, align with the row density height */\n        max-height: var(--data-row-height);\n\n        /* hiding scroll bar in case the cell render introduces scrollbar based on its implementation */\n        & * {\n          scrollbar-width: none;\n        }\n\n        /* in case of combine columns, removing padding from parent cell-content as children already have the padding */\n        &:has(.combined-cell) {\n          padding: 0;\n\n          /* stylelint-disable-next-line selector-max-class */\n          .cell-content {\n            flex-grow: unset;\n          }\n        }\n      }\n    }\n\n    .row .aggregateCell .cell-content {\n      line-height: initial;\n      padding: 0;\n    }\n\n    .short-height,\n    .medium-height {\n      ${StyledStatus} {\n        white-space: nowrap;\n      }\n    }\n\n    .short-height {\n      ${StyledRadioCheck} ${StyledLabel} {\n        min-height: auto;\n      }\n    }\n\n    .medium-height {\n      --row-height-multiplier: 4 / 3;\n    }\n\n    .tall-height {\n      --row-height-multiplier: calc(4 / 3 + 0.5);\n      > .row:not(.group-header-row) {\n        > .cell {\n          display: inline-grid;\n          align-items: center;\n          white-space: normal;\n          word-break: break-all;\n          grid-auto-flow: column;\n\n          /* stylelint-disable selector-max-class */\n          /* stylelint-disable-next-line selector-max-compound-selectors */\n          > .cell-content > .combined-cell > .combined-cell-content,\n          > .cell-content {\n            display: -webkit-box;\n            -webkit-box-orient: vertical;\n            -webkit-line-clamp: 2;\n            white-space: inherit;\n            word-break: inherit;\n          }\n        }\n      }\n    }\n\n    .full-content-height {\n      --row-height-multiplier: 4 / 3;\n      --row-min-height: calc(\n        var(--hit-area) * var(--row-height-multiplier) + var(--cell-vertical-padding) * 2\n      );\n      --group-header-height: ${isAggregationApplied\n        ? 'var(--default-group-header-height)'\n        : 'var(--row-min-height)'};\n\n      > .row:not(.group-header-row) {\n        height: auto;\n        min-height: var(--row-min-height);\n        > .cell {\n          white-space: normal;\n\n          /* -- For BUG-625508 -- */\n          word-break: break-word;\n          display: inline-grid;\n          align-items: center;\n          padding-top: var(--cell-vertical-padding);\n          padding-bottom: var(--cell-vertical-padding);\n          grid-auto-flow: column;\n\n          /* stylelint-disable-next-line selector-max-compound-selectors */\n          > .cell-content > .combined-cell > .combined-cell-content,\n          > .cell-content {\n            /* for full-content, the row cells should adjust according to content */\n            max-height: none;\n            white-space: inherit;\n            word-break: inherit;\n          }\n        }\n      }\n    }\n\n    .footer {\n      .row {\n        .cell {\n          padding: 0;\n        }\n      }\n    }\n\n    /* stylelint-disable no-duplicate-selectors */\n    .row-container {\n      position: absolute;\n      display: grid;\n      width: 100%;\n      font-size: ${fontSize.s};\n\n      > .group-header-row,\n      .hierarchical-group-footer-row {\n        height: var(--group-header-height);\n        .cell {\n          padding: 0;\n          border-right-width: 0;\n        }\n      }\n\n      > .hierarchical-group-header-row {\n        height: var(--group-header-height);\n      }\n      input.checkbox-on-hover + label {\n        opacity: 0;\n      }\n      input.checkbox-on-hover:checked + label {\n        opacity: 1;\n      }\n      .row.selected-row {\n        background-color: ${selectedRowColor};\n\n        > .cell,\n        .cell-fixed,\n        .cell-action {\n          background-color: ${selectedRowColor};\n        }\n      }\n      .row-on-hover:hover {\n        background-color: ${lightGreyColor};\n        input.checkbox-on-hover + label {\n          opacity: 1;\n        }\n\n        > .cell,\n        .cell-fixed,\n        .cell-action {\n          background-color: ${lightGreyColor};\n        }\n      }\n      .row.hierarchical-group-footer-row {\n        .cell-fixed {\n          background: ${lightGreyColor};\n        }\n      }\n    }\n\n    /* stylelint-enable selector-max-class */\n\n    .toolbar-button-applied {\n      padding: 0 8px;\n      margin: 0 calc(${theme.base.spacing} / 4);\n    }\n\n    .toolbar-button {\n      padding: 0 8px;\n      margin: 0 calc(${theme.base.spacing} / 4);\n    }\n\n    .column-resizer {\n      cursor: col-resize;\n      position: absolute;\n      top: 0;\n      right: 0;\n      z-index: 3;\n      width: 0.25rem;\n      height: 100%;\n    }\n\n    .column-resizer:hover,\n    .column-resizer:active {\n      background: var(--interactive);\n    }\n\n    .align-right {\n      justify-content: right;\n\n      .cell-content {\n        text-align: right;\n      }\n    }\n\n    .align-left {\n      justify-content: left;\n\n      .cell-content {\n        text-align: left;\n      }\n    }\n\n    .align-center {\n      justify-content: center;\n\n      .cell-content {\n        text-align: center;\n      }\n    }\n\n    .selection-border {\n      border: 0.125rem solid var(--medium-blue) !important;\n    }\n\n    .disable-select {\n      user-select: none; /* supported by Chrome and Firefox */\n      -webkit-user-select: none; /* Safari */\n    }\n\n    .popper {\n      div.row {\n        display: flex;\n        vertical-align: middle;\n        line-height: unset;\n        border-bottom: none;\n        outline: none 0;\n        height: auto;\n      }\n    }\n  `;\n});\n\nexport default StyledTableContainer;\n"]}

package/lib/Core/Views/Table/TableA11y.d.ts

@@ -0,0 +1,48 @@
+export default TableA11y;
+declare class TableA11y extends BaseA11y {
+    constructor(selectors: any, focusableSelectors: any, customKeys: {} | undefined, container: any, announcePolite: any, translate: any, actionableSelectors: any, ariaLabel: any);
+    nextRowIndex: number | null;
+    nextColumnIndex: any;
+    targetIndex: number;
+    ctrlHomeKeyPressed: boolean;
+    announcePolite: any;
+    translate: any;
+    isTableLoaderFocussed: boolean;
+    dataEntryMode: boolean;
+    reset(): void;
+    getFocusableElementsInCell(column: any, isCalledFromEsc?: boolean): any;
+    getActionableElementsInCell(column: any): any;
+    getSortedColumns(row: any): any[];
+    handleRightKeyPressForExpandCollapseAll(selectAllSelector: any): void | null;
+    handleExpandCollapseAllEvents(event: any, selectAllSelector: any): void;
+    handleAnnouncementForErrors(nextItem: any, currentCol: any, keyCode: any): void;
+    handleKeyleftForButtonMoreSelectAll(event: any, selectAllSelector: any): boolean;
+    handleScrollOnUpArrowForGroupHeaders(event: any, pContainerSelector: any): void;
+    updateTargetColumnIndexForGroupHeader(event: any): void;
+    handleUpDownKeyPressForGroupHeader(keyCode: any, target: any, cellToFocus: any, event: any): boolean;
+    handleLeftRightKeyPressForGroupHeader(keyCode: any, target: any, cellToFocus: any): void;
+    handleGroupHeaderEvents(event: any): boolean;
+    checkEventsForGroupHeader(event: any): boolean;
+    stopEventHandler(event: any): any;
+    handleLeftKeyPressOnAggregateCells(target: any, aggregateCell: any): boolean;
+    isAccessibleElement(element: any): boolean;
+    getNextAccessibleElement(cellInputableElements: any, shiftKey?: boolean, currentElementIndex?: number): any;
+    getAdjacentColumnCell(shiftKey: any, currentColumnIndex: any, currentEleParentIndex: any, sortedColumns: any, parentElements: any, currentCol: any): any[];
+    getNextColumnCellInTaborder(sortedColumns: any, currentCol: any, shiftKey: any, parentElements: any, currentEleParentIndex: any): any;
+    isFocusableElement(element: any): boolean;
+    handleTabKey(shiftKey: any): boolean;
+    updateDataEntry(updateForHandler: any, focusElements: any, nextFocusElement: any): void;
+    clickHandler(event: any): void;
+    handleEnterKey(target: any): void;
+    handleEscapeKey(target: any): boolean;
+    registerEscapeEventForRTE(target: any): void;
+    tableLoaderHandler(event: any): void;
+    a11yHandler(event: any): void;
+    setFocusOnLoader(loader: any, currentCol: any): void;
+    dynamicLoadersKeyDownHandler(event: any): void;
+    itemsLoadedCallback(): void;
+    isFirstDataRowInDOM(): boolean;
+    getFocusableElementOnCtrlHome(): any;
+}
+import { BaseA11y } from 'pega-repeating-structures-core';
+//# sourceMappingURL=TableA11y.d.ts.map

package/lib/Core/Views/Table/TableA11y.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TableA11y.d.ts","sourceRoot":"","sources":["../../../../Core/Views/Table/TableA11y.js"],"names":[],"mappings":";AA4BA;IACE,gLAoBC;IARC,4BAAwB;IACxB,qBAA2B;IAC3B,oBAAqB;IACrB,4BAA+B;IAC/B,oBAAoC;IACpC,eAA0B;IAC1B,+BAAkC;IAClC,uBAA0B;IAG5B,cAGC;IAED,wEAaC;IAED,8CAEC;IAED,kCAIC;IAED,6EAkBC;IAGD,wEA4BC;IAGD,gFA+BC;IAGD,iFA4BC;IAED,gFAYC;IAGD,wDAkBC;IAED,qGAmCC;IAED,yFASC;IAED,6CAsCC;IAED,+CAWC;IAED,kCAOC;IAED,6EAYC;IAGD,2CAKC;IAED,4GAeC;IAED,2JAkCC;IAGD,sIAmCC;IAED,0CAIC;IAED,qCAuCC;IAED,wFAsBC;IAED,+BAWC;IAED,kCAcC;IAED,sCAeC;IAED,6CAoBC;IAED,qCAkBC;IAGD,8BAiFC;IAmBD,qDAWC;IAED,+CAIC;IAED,4BA8BC;IAED,+BAEC;IAED,qCAcC;CACF;yBAjxB4C,gCAAgC"}