@elliemae/ds-data-table 3.57.0-next.3 → 3.57.0-next.4

package/dist/esm/styled.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../src/styled.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable max-lines */\nimport { DSInputText } from '@elliemae/ds-form-input-text';\nimport { Grid } from '@elliemae/ds-grid';\nimport { EditPencil } from '@elliemae/ds-icons';\nimport { styled, type Theme } from '@elliemae/ds-system';\nimport { DSDataTableName, DSDataTableSlots } from './DSDataTableDefinitions.js';\nimport { ColsLayoutStyle } from './configs/constants.js';\nimport { ZIndexDataTable } from './configs/zIndexInternalConfig.js';\nimport { cellPadding, columnPadding, sizeToCss } from './helpers/index.js';\nimport type { DSDataTableT } from './react-desc-prop-types.js';\n\ninterface WidthAndHeight {\n  width?: string | number;\n  height?: string | number;\n}\n\nconst styledFocusCss = ({ theme }: { theme: Theme }, color?: string) => `\n&:after {\n  display: block;\n  content: ' ';\n  position: absolute;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  border: 2px solid ${color ?? theme.colors.brand[700]};\n  pointer-events: none;\n  z-index: ${ZIndexDataTable.FOCUS_BORDER};\n}`;\n\nexport const StyledFocusWithin = styled(Grid)<{ hideFocus?: boolean }>`\n  :focus-within {\n    ${(props) => (props.hideFocus ? '' : styledFocusCss(props))}\n  }\n  svg {\n    fill: ${(props) => props.theme.colors.brand['800']};\n  }\n`;\n\nexport const StyledDataTableWrapper = styled(Grid, {\n  name: DSDataTableName,\n  slot: DSDataTableSlots.ROOT,\n})<WidthAndHeight>`\n  width: ${(props) => sizeToCss(props.width ?? ' 100%')};\n  height: ${(props) => sizeToCss(props.height ?? ' 100%')};\n`;\n\nexport const StyledDataTableContentWrapper = styled(Grid, {\n  name: DSDataTableName,\n  slot: DSDataTableSlots.CONTENT_WRAPPER,\n})<{ noSelectionAllowed: boolean }>`\n  user-select: ${({ noSelectionAllowed }) => (noSelectionAllowed ? 'none' : 'auto')};\n  width: 100%;\n`;\n\nexport const StyledTableWrapper = styled('div', {\n  name: DSDataTableName,\n  slot: DSDataTableSlots.TABLE_WRAPPER,\n})<WidthAndHeight>`\n  display: inline-block;\n  border-spacing: 0;\n  z-index: 0;\n  position: relative;\n  width: 100%;\n  height: 100%;\n`;\n\nexport const StyledPaginationWrapper = styled('div', {\n  name: DSDataTableName,\n  slot: DSDataTableSlots.PAGINATION_WRAPPER,\n})`\n  width: 100%;\n`;\n\nexport const StyledTableContentWrapper = styled(Grid, {\n  name: DSDataTableName,\n  slot: DSDataTableSlots.TABLE_CONTENT_WRAPPER,\n})<{ height?: string | number }>`\n  position: relative;\n  ${({ height = 'auto' }) => `\n  height: ${sizeToCss(height) as string};\n  `}\n  width: var(--total-width);\n`;\n\nexport const StyledVirtualListWrapper = styled(Grid, {\n  name: DSDataTableName,\n  slot: DSDataTableSlots.VIRTUAL_LIST_WRAPPER,\n})<{ gridLayout: string[]; totalColumnsWidth: string | number }>`\n  overflow: auto;\n  height: 100%;\n  --grid-layout: ${(props) => props.gridLayout.map((col) => `minmax(0, ${col})`).join(' ')};\n  --total-width: ${(props) => sizeToCss(props.totalColumnsWidth)};\n`;\n\nexport const StyledHeadWrapper = styled(Grid, {\n  name: DSDataTableName,\n  slot: DSDataTableSlots.HEAD_WRAPPER,\n})<{\n  colsLayoutStyle: string;\n}>`\n  position: sticky;\n  top: 0;\n  z-index: 4;\n  background: white;\n  width: 100%;\n`;\n\nexport const StyledHeadTr = styled(Grid, {\n  name: DSDataTableName,\n  slot: DSDataTableSlots.HEAD_TR,\n})<{\n  isExpandable: boolean;\n  colsLayoutStyle: DSDataTableT.ColsLayoutStyleValues;\n}>`\n  ${(props) => (props.colsLayoutStyle === ColsLayoutStyle.Auto ? 'width:100%' : '')};\n  grid-template-columns: var(--grid-layout);\n  border-bottom: 1px solid ${(props) => props.theme.colors.neutral['080']};\n  grid-auto-flow: column;\n`;\n\nexport const StyledHeadTh = styled('div', {\n  name: DSDataTableName,\n  slot: DSDataTableSlots.HEAD_TH,\n})<{\n  isDraggingActive?: boolean;\n  column: DSDataTableT.InternalColumn;\n  shouldShowDnD?: boolean;\n}>`\n  min-height: 24px;\n  line-height: normal;\n  font-weight: 600;\n  text-transform: uppercase;\n  font-size: 0.923rem;\n  text-align: left;\n  ${columnPadding}\n  color: #353c46;\n  min-height: 1.84615rem;\n  position: sticky;\n  z-index: ${ZIndexDataTable.HEADER_ROW};\n  display: flex;\n  justify-content: space-between;\n  box-sizing: border-box;\n  outline: none;\n  ${(props) =>\n    props.isDraggingActive\n      ? ''\n      : `:hover {\n          &:after {\n            display: block;\n            content: ' ';\n            position: absolute;\n            top: 0;\n            left: 0;\n            right: 0;\n            bottom: 0;\n            border-bottom: 1px solid ${props.theme.colors.brand[700]};\n            pointer-events: none;\n            z-index: ${ZIndexDataTable.FOCUS_BORDER};\n          }\n          cursor: pointer;\n        }`}\n\n  :focus {\n    &:after {\n      display: block;\n      content: ' ';\n      position: absolute;\n      top: 0;\n      left: 0;\n      right: 0;\n      bottom: 0;\n      border: 2px solid ${(props) => props.theme.colors.brand[700]};\n      pointer-events: none;\n      z-index: ${ZIndexDataTable.FOCUS_BORDER};\n    }\n  }\n`;\n\nexport const StyledHeaderRightIconsWrapper = styled('div', {\n  name: DSDataTableName,\n  slot: DSDataTableSlots.HEAD_RIGHT_ICONS_WRAPPER,\n})`\n  height: 100%;\n  display: flex;\n  align-items: center;\n  max-height: 24px;\n`;\n\nexport const StyledResizer = styled(DSInputText, {\n  name: DSDataTableName,\n  slot: DSDataTableSlots.RESIZER,\n})`\n  width: 4px;\n  height: 100%;\n  position: absolute;\n  right: 0;\n  top: 0;\n  z-index: 0;\n  min-height: unset;\n  // prevents from scrolling while dragging on touch devices\n  touch-action: none;\n\n  border: none;\n  outline: none;\n\n  &:hover,\n  &:focus,\n  &:focus-visible {\n    border: none;\n    outline: none;\n  }\n\n  input {\n    appearance: none;\n    cursor: col-resize;\n    background-image: transparent;\n    padding: 0;\n    border-radius: 0;\n\n    &:focus::-webkit-slider-runnable-track {\n      background: transparent;\n    }\n\n    &:focus-visible {\n      background: brand-700;\n      ::-webkit-slider-runnable-track {\n        background: transparent;\n      }\n    }\n\n    &::-webkit-slider-runnable-track {\n      background: transparent;\n    }\n\n    &::-webkit-slider-thumb {\n      appearance: none;\n      background: transparent;\n    }\n\n    &::-moz-range-thumb {\n      appearance: none;\n      background: transparent;\n      border: none;\n    }\n  }\n`;\n\n// CELL ***********************************************************************/\nexport const StyledActionCell = styled('div', {\n  name: DSDataTableName,\n  slot: DSDataTableSlots.ACTION_CELL,\n})`\n  position: sticky;\n  display: inline-block;\n  right: 0;\n  /* border-bottom: 1px solid #ebedf0; */\n  background: white;\n`;\n\nexport const StyledCell = styled('div', {\n  name: DSDataTableName,\n  slot: DSDataTableSlots.CELL,\n})`\n  ${cellPadding}\n  display: flex;\n  align-items: center;\n  width: 100%;\n  position: relative;\n`;\n\nexport const StyledCellContent = styled('div', {\n  name: DSDataTableName,\n  slot: DSDataTableSlots.CELL_CONTENT,\n})`\n  display: grid;\n  justify-self: flex-end;\n  flex: 1 1 auto;\n  width: 100%;\n  height: 100%;\n  align-items: center;\n`;\n\nexport const StyledPencilIcon = styled(EditPencil, {\n  name: DSDataTableName,\n  slot: DSDataTableSlots.PENCIL_ICON,\n})``;\n\nexport const StyledEditableContainer = styled(Grid, {\n  name: DSDataTableName,\n  slot: DSDataTableSlots.EDITABLE_CONTAINER,\n})<{ shouldDisplayEditIcon?: boolean }>`\n  width: 100%;\n  height: 100%;\n  align-items: center;\n  & ${StyledPencilIcon} {\n    display: ${({ shouldDisplayEditIcon }) => (shouldDisplayEditIcon ? 'block' : 'none')};\n  }\n  &:hover {\n    ${StyledPencilIcon} {\n      display: block;\n    }\n  }\n  &:focus {\n    ${styledFocusCss}\n    ${StyledPencilIcon} {\n      display: block;\n    }\n  }\n  outline: none;\n`;\n\n// ROW ************************************************************************/\nexport const StyledFullsizeGrid = styled(Grid, {\n  name: DSDataTableName,\n  slot: DSDataTableSlots.FULLSIZE_GRID,\n})<{ minHeight: string }>`\n  position: relative;\n  z-index: ${ZIndexDataTable.ROW};\n\n  min-height: ${(props) => props.minHeight || '36px'};\n  height: ${(props) => props.height || 'auto'};\n`;\n\nexport const GroupHeaderContainer = styled(Grid, {\n  name: DSDataTableName,\n  slot: DSDataTableSlots.GROUP_HEADER_CONTAINER,\n})<{ paddingLeft: string }>`\n  position: relative;\n  background-color: ${({ theme }) => theme.colors.brand[200]};\n  align-items: center;\n  padding-left: ${(props) => props.paddingLeft};\n  border-top: 1px solid ${({ theme }) => theme.colors.brand[300]};\n`;\n\nexport const GroupHeaderTitle = styled('span', {\n  name: DSDataTableName,\n  slot: DSDataTableSlots.GROUP_HEADER_TITLE,\n})`\n  font-weight: ${(props) => props.theme.fontWeights.semibold};\n  font-size: 12px;\n  color: ${(props) => props.theme.colors.neutral[700]};\n`;\n\nexport const StyledCellContainer = styled(Grid, {\n  name: DSDataTableName,\n  slot: DSDataTableSlots.CELL_CONTAINER,\n})<{\n  backgroundColor?: string;\n  isDragOverlay?: boolean;\n  isDragging?: boolean;\n  isDisabled?: boolean;\n  isDropValid?: boolean;\n  shouldDisplayHover?: boolean;\n  isDropIndicatorPositionInside?: boolean;\n  minHeight?: string;\n  gridTemplateColumns?: string;\n}>`\n  position: relative;\n  z-index: 2;\n\n  min-height: ${(props) => props.minHeight || '36px'};\n  height: ${(props) => props.height || 'auto'};\n\n  width: 100%;\n  ${(props) => (props.isDragOverlay ? 'width: fit-content;' : '')};\n\n  grid-template-columns: ${(props) =>\n    props.isDragOverlay ? `minmax(0, 24px) minmax(0, auto)` : (props.gridTemplateColumns ?? `var(--grid-layout)`)};\n\n  background-color: ${({ backgroundColor, isDragging, theme }) =>\n    isDragging ? theme.colors.neutral[100] : backgroundColor || 'white'};\n\n  outline: none;\n\n  :focus {\n    ${(props) => (props.isDragOverlay ? '' : styledFocusCss(props))}\n  }\n\n  ${({ isDropIndicatorPositionInside, isDropValid, theme }) => {\n    if (!isDropIndicatorPositionInside) return '';\n    return styledFocusCss({ theme }, isDropValid ? theme.colors.brand[700] : theme.colors.danger[900]);\n  }}\n\n  ${({ shouldDisplayHover, theme, isDisabled }) =>\n    shouldDisplayHover && !isDisabled\n      ? `:hover {\n            background-color: ${theme.colors.brand[200]};\n          }`\n      : ''}\n\n  box-shadow: 0 2px 4px 0 ${(props) => (props.isDragOverlay ? 'rgba(0,0,0,0.5)' : 'transparent')};\n\n  opacity: ${(props) => (props.isDragging ? 0.8 : 1)};\n\n  ${(props) =>\n    !props.selected\n      ? ''\n      : `\n    background-color: ${props.theme.colors.brand[200]};\n    border: 1px solid ${props.theme.colors.brand[500]};\n    `}\n\n  ${GroupHeaderTitle} {\n    color: ${(props) => (props.isDisabled ? props.theme.colors.neutral['200'] : props.theme.colors.neutral['700'])};\n  }\n  color: ${(props) => (props.isDisabled ? props.theme.colors.neutral['200'] : '#333333')};\n\n  svg {\n    fill: ${(props) => (props.isDisabled ? props.theme.colors.neutral['200'] : props.theme.colors.brand['800'])};\n  }\n`;\n\nexport const ScreenReaderOnly = styled.div`\n  clip: rect(0 0 0 0);\n  clip-path: inset(50%);\n  height: 1px;\n  overflow: hidden;\n  position: absolute;\n  white-space: nowrap;\n  width: 1px;\n`;\n"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable max-lines */\nimport { DSInputText } from '@elliemae/ds-form-input-text';\nimport { Grid } from '@elliemae/ds-grid';\nimport { EditPencil } from '@elliemae/ds-icons';\nimport { styled, type Theme } from '@elliemae/ds-system';\nimport { DSDataTableName, DSDataTableSlots } from './constants/index.js';\nimport { ColsLayoutStyle } from './configs/constants.js';\nimport { ZIndexDataTable } from './configs/zIndexInternalConfig.js';\nimport { cellPadding, columnPadding, sizeToCss } from './helpers/index.js';\nimport type { DSDataTableT } from './react-desc-prop-types.js';\n\ninterface WidthAndHeight {\n  width?: string | number;\n  height?: string | number;\n}\n\nconst styledFocusCss = ({ theme }: { theme: Theme }, color?: string) => `\n&:after {\n  display: block;\n  content: ' ';\n  position: absolute;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  border: 2px solid ${color ?? theme.colors.brand[700]};\n  pointer-events: none;\n  z-index: ${ZIndexDataTable.FOCUS_BORDER};\n}`;\n\nexport const StyledFocusWithin = styled(Grid)<{ hideFocus?: boolean }>`\n  :focus-within {\n    ${(props) => (props.hideFocus ? '' : styledFocusCss(props))}\n  }\n  svg {\n    fill: ${(props) => props.theme.colors.brand['800']};\n  }\n`;\n\nexport const StyledDataTableWrapper = styled(Grid, {\n  name: DSDataTableName,\n  slot: DSDataTableSlots.ROOT,\n})<WidthAndHeight>`\n  width: ${(props) => sizeToCss(props.width ?? ' 100%')};\n  height: ${(props) => sizeToCss(props.height ?? ' 100%')};\n`;\n\nexport const StyledDataTableContentWrapper = styled(Grid, {\n  name: DSDataTableName,\n  slot: DSDataTableSlots.CONTENT_WRAPPER,\n})<{ noSelectionAllowed: boolean }>`\n  user-select: ${({ noSelectionAllowed }) => (noSelectionAllowed ? 'none' : 'auto')};\n  width: 100%;\n`;\n\nexport const StyledTableWrapper = styled('div', {\n  name: DSDataTableName,\n  slot: DSDataTableSlots.TABLE_WRAPPER,\n})<WidthAndHeight>`\n  display: inline-block;\n  border-spacing: 0;\n  z-index: 0;\n  position: relative;\n  width: 100%;\n  height: 100%;\n`;\n\nexport const StyledPaginationWrapper = styled('div', {\n  name: DSDataTableName,\n  slot: DSDataTableSlots.PAGINATION_WRAPPER,\n})`\n  width: 100%;\n`;\n\nexport const StyledTableContentWrapper = styled(Grid, {\n  name: DSDataTableName,\n  slot: DSDataTableSlots.TABLE_CONTENT_WRAPPER,\n})<{ height?: string | number }>`\n  position: relative;\n  ${({ height = 'auto' }) => `\n  height: ${sizeToCss(height) as string};\n  `}\n  width: var(--total-width);\n`;\n\nexport const StyledVirtualListWrapper = styled(Grid, {\n  name: DSDataTableName,\n  slot: DSDataTableSlots.VIRTUAL_LIST_WRAPPER,\n})<{ gridLayout: string[]; totalColumnsWidth: string | number }>`\n  overflow: auto;\n  height: 100%;\n  --grid-layout: ${(props) => props.gridLayout.map((col) => `minmax(0, ${col})`).join(' ')};\n  --total-width: ${(props) => sizeToCss(props.totalColumnsWidth)};\n`;\n\nexport const StyledHeadWrapper = styled(Grid, {\n  name: DSDataTableName,\n  slot: DSDataTableSlots.HEAD_WRAPPER,\n})<{\n  colsLayoutStyle: string;\n}>`\n  position: sticky;\n  top: 0;\n  z-index: 4;\n  background: white;\n  width: 100%;\n`;\n\nexport const StyledHeadTr = styled(Grid, {\n  name: DSDataTableName,\n  slot: DSDataTableSlots.HEAD_TR,\n})<{\n  isExpandable: boolean;\n  colsLayoutStyle: DSDataTableT.ColsLayoutStyleValues;\n}>`\n  ${(props) => (props.colsLayoutStyle === ColsLayoutStyle.Auto ? 'width:100%' : '')};\n  grid-template-columns: var(--grid-layout);\n  border-bottom: 1px solid ${(props) => props.theme.colors.neutral['080']};\n  grid-auto-flow: column;\n`;\n\nexport const StyledHeadTh = styled('div', {\n  name: DSDataTableName,\n  slot: DSDataTableSlots.HEAD_TH,\n})<{\n  isDraggingActive?: boolean;\n  column: DSDataTableT.InternalColumn;\n  shouldShowDnD?: boolean;\n}>`\n  min-height: 24px;\n  line-height: normal;\n  font-weight: 600;\n  text-transform: uppercase;\n  font-size: 0.923rem;\n  text-align: left;\n  ${columnPadding}\n  color: #353c46;\n  min-height: 1.84615rem;\n  position: sticky;\n  z-index: ${ZIndexDataTable.HEADER_ROW};\n  display: flex;\n  justify-content: space-between;\n  box-sizing: border-box;\n  outline: none;\n  ${(props) =>\n    props.isDraggingActive\n      ? ''\n      : `:hover {\n          &:after {\n            display: block;\n            content: ' ';\n            position: absolute;\n            top: 0;\n            left: 0;\n            right: 0;\n            bottom: 0;\n            border-bottom: 1px solid ${props.theme.colors.brand[700]};\n            pointer-events: none;\n            z-index: ${ZIndexDataTable.FOCUS_BORDER};\n          }\n          cursor: pointer;\n        }`}\n\n  :focus {\n    &:after {\n      display: block;\n      content: ' ';\n      position: absolute;\n      top: 0;\n      left: 0;\n      right: 0;\n      bottom: 0;\n      border: 2px solid ${(props) => props.theme.colors.brand[700]};\n      pointer-events: none;\n      z-index: ${ZIndexDataTable.FOCUS_BORDER};\n    }\n  }\n`;\n\nexport const StyledHeaderRightIconsWrapper = styled('div', {\n  name: DSDataTableName,\n  slot: DSDataTableSlots.HEAD_RIGHT_ICONS_WRAPPER,\n})`\n  height: 100%;\n  display: flex;\n  align-items: center;\n  max-height: 24px;\n`;\n\nexport const StyledResizer = styled(DSInputText, {\n  name: DSDataTableName,\n  slot: DSDataTableSlots.RESIZER,\n})`\n  width: 4px;\n  height: 100%;\n  position: absolute;\n  right: 0;\n  top: 0;\n  z-index: 0;\n  min-height: unset;\n  // prevents from scrolling while dragging on touch devices\n  touch-action: none;\n\n  border: none;\n  outline: none;\n\n  &:hover,\n  &:focus,\n  &:focus-visible {\n    border: none;\n    outline: none;\n  }\n\n  input {\n    appearance: none;\n    cursor: col-resize;\n    background-image: transparent;\n    padding: 0;\n    border-radius: 0;\n\n    &:focus::-webkit-slider-runnable-track {\n      background: transparent;\n    }\n\n    &:focus-visible {\n      background: brand-700;\n      ::-webkit-slider-runnable-track {\n        background: transparent;\n      }\n    }\n\n    &::-webkit-slider-runnable-track {\n      background: transparent;\n    }\n\n    &::-webkit-slider-thumb {\n      appearance: none;\n      background: transparent;\n    }\n\n    &::-moz-range-thumb {\n      appearance: none;\n      background: transparent;\n      border: none;\n    }\n  }\n`;\n\n// CELL ***********************************************************************/\nexport const StyledActionCell = styled('div', {\n  name: DSDataTableName,\n  slot: DSDataTableSlots.ACTION_CELL,\n})`\n  position: sticky;\n  display: inline-block;\n  right: 0;\n  /* border-bottom: 1px solid #ebedf0; */\n  background: white;\n`;\n\nexport const StyledCell = styled('div', {\n  name: DSDataTableName,\n  slot: DSDataTableSlots.CELL,\n})`\n  ${cellPadding}\n  display: flex;\n  align-items: center;\n  width: 100%;\n  position: relative;\n`;\n\nexport const StyledCellContent = styled('div', {\n  name: DSDataTableName,\n  slot: DSDataTableSlots.CELL_CONTENT,\n})`\n  display: grid;\n  justify-self: flex-end;\n  flex: 1 1 auto;\n  width: 100%;\n  height: 100%;\n  align-items: center;\n`;\n\nexport const StyledPencilIcon = styled(EditPencil, {\n  name: DSDataTableName,\n  slot: DSDataTableSlots.PENCIL_ICON,\n})``;\n\nexport const StyledEditableContainer = styled(Grid, {\n  name: DSDataTableName,\n  slot: DSDataTableSlots.EDITABLE_CONTAINER,\n})<{ shouldDisplayEditIcon?: boolean }>`\n  width: 100%;\n  height: 100%;\n  align-items: center;\n  & ${StyledPencilIcon} {\n    display: ${({ shouldDisplayEditIcon }) => (shouldDisplayEditIcon ? 'block' : 'none')};\n  }\n  &:hover {\n    ${StyledPencilIcon} {\n      display: block;\n    }\n  }\n  &:focus {\n    ${styledFocusCss}\n    ${StyledPencilIcon} {\n      display: block;\n    }\n  }\n  outline: none;\n`;\n\n// ROW ************************************************************************/\nexport const StyledFullsizeGrid = styled(Grid, {\n  name: DSDataTableName,\n  slot: DSDataTableSlots.FULLSIZE_GRID,\n})<{ minHeight: string }>`\n  position: relative;\n  z-index: ${ZIndexDataTable.ROW};\n\n  min-height: ${(props) => props.minHeight || '36px'};\n  height: ${(props) => props.height || 'auto'};\n`;\n\nexport const GroupHeaderContainer = styled(Grid, {\n  name: DSDataTableName,\n  slot: DSDataTableSlots.GROUP_HEADER_CONTAINER,\n})<{ paddingLeft: string }>`\n  position: relative;\n  background-color: ${({ theme }) => theme.colors.brand[200]};\n  align-items: center;\n  padding-left: ${(props) => props.paddingLeft};\n  border-top: 1px solid ${({ theme }) => theme.colors.brand[300]};\n`;\n\nexport const GroupHeaderTitle = styled('span', {\n  name: DSDataTableName,\n  slot: DSDataTableSlots.GROUP_HEADER_TITLE,\n})`\n  font-weight: ${(props) => props.theme.fontWeights.semibold};\n  font-size: 12px;\n  color: ${(props) => props.theme.colors.neutral[700]};\n`;\n\nexport const StyledCellContainer = styled(Grid, {\n  name: DSDataTableName,\n  slot: DSDataTableSlots.CELL_CONTAINER,\n})<{\n  backgroundColor?: string;\n  isDragOverlay?: boolean;\n  isDragging?: boolean;\n  isDisabled?: boolean;\n  isDropValid?: boolean;\n  shouldDisplayHover?: boolean;\n  isDropIndicatorPositionInside?: boolean;\n  minHeight?: string;\n  gridTemplateColumns?: string;\n}>`\n  position: relative;\n  z-index: 2;\n\n  min-height: ${(props) => props.minHeight || '36px'};\n  height: ${(props) => props.height || 'auto'};\n\n  width: 100%;\n  ${(props) => (props.isDragOverlay ? 'width: fit-content;' : '')};\n\n  grid-template-columns: ${(props) =>\n    props.isDragOverlay ? `minmax(0, 24px) minmax(0, auto)` : (props.gridTemplateColumns ?? `var(--grid-layout)`)};\n\n  background-color: ${({ backgroundColor, isDragging, theme }) =>\n    isDragging ? theme.colors.neutral[100] : backgroundColor || 'white'};\n\n  outline: none;\n\n  :focus {\n    ${(props) => (props.isDragOverlay ? '' : styledFocusCss(props))}\n  }\n\n  ${({ isDropIndicatorPositionInside, isDropValid, theme }) => {\n    if (!isDropIndicatorPositionInside) return '';\n    return styledFocusCss({ theme }, isDropValid ? theme.colors.brand[700] : theme.colors.danger[900]);\n  }}\n\n  ${({ shouldDisplayHover, theme, isDisabled }) =>\n    shouldDisplayHover && !isDisabled\n      ? `:hover {\n            background-color: ${theme.colors.brand[200]};\n          }`\n      : ''}\n\n  box-shadow: 0 2px 4px 0 ${(props) => (props.isDragOverlay ? 'rgba(0,0,0,0.5)' : 'transparent')};\n\n  opacity: ${(props) => (props.isDragging ? 0.8 : 1)};\n\n  ${(props) =>\n    !props.selected\n      ? ''\n      : `\n    background-color: ${props.theme.colors.brand[200]};\n    border: 1px solid ${props.theme.colors.brand[500]};\n    `}\n\n  ${GroupHeaderTitle} {\n    color: ${(props) => (props.isDisabled ? props.theme.colors.neutral['200'] : props.theme.colors.neutral['700'])};\n  }\n  color: ${(props) => (props.isDisabled ? props.theme.colors.neutral['200'] : '#333333')};\n\n  svg {\n    fill: ${(props) => (props.isDisabled ? props.theme.colors.neutral['200'] : props.theme.colors.brand['800'])};\n  }\n`;\n\nexport const ScreenReaderOnly = styled.div`\n  clip: rect(0 0 0 0);\n  clip-path: inset(50%);\n  height: 1px;\n  overflow: hidden;\n  position: absolute;\n  white-space: nowrap;\n  width: 1px;\n`;\n"],
   "mappings": "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",
   "names": []
 }

package/dist/types/DSDataTableDefinitions.d.ts

@@ -43,6 +43,7 @@ export declare const DSDataTableSlots: {
     LOADER_WRAPPER: string;
     FILTER_BAR_WRAPPER: string;
     FREE_TEXT_SEARCH_FILTER: string;
+    FREE_TEXT_SEARCH_FILTER_WRAPPER: string;
 };
 export declare const DSDataTableDataTestIds: {
     ROOT: `ds-datatable-${string}`;
@@ -88,4 +89,5 @@ export declare const DSDataTableDataTestIds: {
     LOADER_WRAPPER: `ds-datatable-${string}`;
     FILTER_BAR_WRAPPER: `ds-datatable-${string}`;
     FREE_TEXT_SEARCH_FILTER: `ds-datatable-${string}`;
+    FREE_TEXT_SEARCH_FILTER_WRAPPER: `ds-datatable-${string}`;
 };

package/dist/types/configs/constants.d.ts

@@ -30,6 +30,7 @@ export declare const DATA_TESTID: {
     readonly DATA_TABLE_FILTER_BUTTON: "data-table-filter-menu-button";
     readonly DATA_TABLE_FILTER_BUTTON_ELEMENT: "ds-button";
     readonly DATA_TABLE_FILTER_MENU_CONTENT: "data-table-filter-menu-content";
+    readonly DATA_TABLE_FILTER_FREE_TEXT_SEARCH_WRAPPER: "data-table-filter-free-text-search_wrapper";
     readonly DATA_TABLE_FILTER_FREE_TEXT_SEARCH: "data-table-filter-free-text-search";
     readonly DATA_TABLE_ROW_CONTENT: "data-table-row-content";
     readonly DATA_TABLE_ROW: "data-table-row";

package/dist/types/constants/index.d.ts

@@ -0,0 +1,261 @@
+export declare const DSDataTableName = "DSDatatable";
+export declare const DATA_TABLE_SLOTS: {
+    readonly ROOT: "root";
+    readonly CONTENT_WRAPPER: "content-wrapper";
+    readonly TABLE_WRAPPER: "table-wrapper";
+    readonly PAGINATION_WRAPPER: "pagination-wrapper";
+    readonly TABLE_CONTENT_WRAPPER: "table-content-wrapper";
+    readonly VIRTUAL_LIST_WRAPPER: "virtual-list-wrapper";
+    readonly HEAD_WRAPPER: "head-wrapper";
+    readonly HEAD_TR: "head-tr";
+    readonly HEAD_TH: "head-th";
+    readonly HEAD_RIGHT_ICONS_WRAPPER: "head-right-icons-wrapper";
+    readonly HEADER_CELL_WRAPPER: "header-cell-wrapper";
+    readonly EMPTY_HEADER: "empty-header";
+    readonly RESIZER: "resizer";
+    readonly ACTION_CELL: "action-cell";
+    readonly EXPAND_CELL_CONTAINER: "expand-cell-container";
+    readonly SINGLE_CELL_CONTAINER: "single-cell-container";
+    readonly DRAG_AND_DROP_GRIPPER: "drag-and-drop-gripper";
+    readonly TEXT_EDITABLE_CELL_INPUT: "text-editable-cell-input";
+    readonly FILTER_POPOVER_BUTTON: "filter-popover-button";
+    readonly FILTER_POPOVER_CONTENT: "filter-popover-content";
+    readonly DROP_INDICATOR: "drop-indicator";
+    readonly CELL: "cell";
+    readonly CELL_CONTENT: "cell-content";
+    readonly PENCIL_ICON: "pencil-icon";
+    readonly EDITABLE_CONTAINER: "editable-container";
+    readonly FULLSIZE_GRID: "fullsize-grid";
+    readonly ROW: "row";
+    readonly GROUP_HEADER_CONTAINER: "group-header-container";
+    readonly GROUP_HEADER_TITLE: "header-title";
+    readonly CELL_CONTAINER: "cells-container";
+    readonly TOOLBAR_WRAPPER: "toolbar-wrapper";
+    readonly TOOLBAR_BUTTONS_WRAPPER: "toolbar-buttons-wrapper";
+    readonly TOOLBAR_BUTTON: "toolbar-button";
+    readonly TOOLBAR_POSITION: "toolbar-position";
+    readonly EMPTY_STATE_WRAPPER: "empty-state-wrapper";
+    readonly WARNING_ICON: "warning-icon";
+    readonly EMPTY_PRIMARY_MESSAGE: "empty-primary-message";
+    readonly EMPTY_SECONDARY_MESSAGE: "empty-secondary-message";
+    readonly EMPTY_BUTTON: "empty-button";
+    readonly CENTER_CONTENT_FLEX_WRAPPER: "center-content-flex-wrapper";
+    readonly LOADER_WRAPPER: "loader-wrapper";
+    readonly FILTER_BAR_WRAPPER: "filter-bar-wrapper";
+    readonly FREE_TEXT_SEARCH_FILTER: "free-text-search-filter";
+};
+export declare const DATA_TABLE_DATA_TESTID: {
+    /**
+     * As there is a mix of hardcoded data-testid and the ones auto generated by slot definitions
+     * we are overriding the auto generated ones with the hardcoded values for consistency.
+     */
+    CONTENT_WRAPPER: string;
+    TABLE_WRAPPER: string;
+    CELL_CONTAINER: string;
+    DRAG_AND_DROP_GRIPPER: string;
+    FREE_TEXT_SEARCH_FILTER: string;
+    FILTER_POPOVER_BUTTON: string;
+    HEAD_TH: string;
+    CELL: string;
+    FULLSIZE_GRID: string;
+    ROOT: string;
+    VIRTUAL_LIST_WRAPPER: string;
+    GROUP_HEADER_CONTAINER: string;
+    EXPAND_CELL_CONTAINER: string;
+    DATA_TABLE_WRAPPER: string;
+    DATA_TABLE_GLOBAL_EXPAND_CELL: string;
+    DATA_TABLE_ICON_ARROW_DOWN: string;
+    DATA_TABLE_ICON_ARROW_RIGHT: string;
+    DATA_TABLE_ICON_ARROW_MIXED: string;
+    DATA_TABLE_ICON_CHILD: string;
+    DATA_TABLE_GLOBAL_CHECKBOX: string;
+    DATA_TABLE_CHECKBOX: string;
+    DATA_TABLE_RADIO: string;
+    DATA_TABLE_DATE_RANGE_CONTROLLER: string;
+    DATA_TABLE_DATE_RANGE_CONTROLLER_CHECKBOX_SWITCHER: string;
+    DATA_TABLE_SINGLE_DATE_CONTROLLER: string;
+    DATA_TABLE_NUMBER_RANGE_CONTROLLER: string;
+    DATA_TABLE_CURRENCY_RANGE_CONTROLLER: string;
+    DATA_TABLE_SELECT_MENU_ITEM: string;
+    DATA_TABLE_MULTISELECT_CONTROLLER: string;
+    DATA_TABLE_SINGLESELECT_CONTROLLER: string;
+    DATA_TABLE_FILTER_BUTTON: string;
+    DATA_TABLE_FILTER_BUTTON_ELEMENT: string;
+    DATA_TABLE_FILTER_MENU_CONTENT: string;
+    DATA_TABLE_FILTER_FREE_TEXT_SEARCH: string;
+    DATA_TABLE_ROW_CONTENT: string;
+    DATA_TABLE_ROW: string;
+    DATA_TABLE_TOOLBAR_TRIGGER: string;
+    DATA_TABLE_CELL: string;
+    DATA_TABLE_DRAG_HANDLE: string;
+    DATA_TABLE_CONTENT_WRAPPER: string;
+    DATA_TABLE_TABLE: string;
+    DATA_TABLE_SCROLLABLE_CONTAINER: string;
+    DATA_TABLE_HEADER: string;
+    DATA_TABLE_ROW_HEADER_CONTENT: string;
+    DATA_TABLE_ROW_GROUP_HEADER: string;
+    DATA_TABLE_COLUMN_DRAG_OVERLAY: string;
+    DATA_TABLE_HEADER_CELL_TITLE: string;
+    DATA_TABLE_FILTER_BAR_DD_MENU_BUTTON: string;
+    DATA_TABLE_SORT_BUTTON: string;
+    PAGINATION_WRAPPER: "ds-datatable-pagination-wrapper";
+    TABLE_CONTENT_WRAPPER: "ds-datatable-table-content-wrapper";
+    HEAD_WRAPPER: "ds-datatable-head-wrapper";
+    HEAD_TR: "ds-datatable-head-tr";
+    HEAD_RIGHT_ICONS_WRAPPER: "ds-datatable-head-right-icons-wrapper";
+    HEADER_CELL_WRAPPER: "ds-datatable-header-cell-wrapper";
+    EMPTY_HEADER: "ds-datatable-empty-header";
+    RESIZER: "ds-datatable-resizer";
+    ACTION_CELL: "ds-datatable-action-cell";
+    SINGLE_CELL_CONTAINER: "ds-datatable-single-cell-container";
+    TEXT_EDITABLE_CELL_INPUT: "ds-datatable-text-editable-cell-input";
+    FILTER_POPOVER_CONTENT: "ds-datatable-filter-popover-content";
+    DROP_INDICATOR: "ds-datatable-drop-indicator";
+    CELL_CONTENT: "ds-datatable-cell-content";
+    PENCIL_ICON: "ds-datatable-pencil-icon";
+    EDITABLE_CONTAINER: "ds-datatable-editable-container";
+    ROW: "ds-datatable-row";
+    GROUP_HEADER_TITLE: "ds-datatable-header-title";
+    TOOLBAR_WRAPPER: "ds-datatable-toolbar-wrapper";
+    TOOLBAR_BUTTONS_WRAPPER: "ds-datatable-toolbar-buttons-wrapper";
+    TOOLBAR_BUTTON: "ds-datatable-toolbar-button";
+    TOOLBAR_POSITION: "ds-datatable-toolbar-position";
+    EMPTY_STATE_WRAPPER: "ds-datatable-empty-state-wrapper";
+    WARNING_ICON: "ds-datatable-warning-icon";
+    EMPTY_PRIMARY_MESSAGE: "ds-datatable-empty-primary-message";
+    EMPTY_SECONDARY_MESSAGE: "ds-datatable-empty-secondary-message";
+    EMPTY_BUTTON: "ds-datatable-empty-button";
+    CENTER_CONTENT_FLEX_WRAPPER: "ds-datatable-center-content-flex-wrapper";
+    LOADER_WRAPPER: "ds-datatable-loader-wrapper";
+    FILTER_BAR_WRAPPER: "ds-datatable-filter-bar-wrapper";
+};
+export declare const DSDataTableSlots: {
+    readonly ROOT: "root";
+    readonly CONTENT_WRAPPER: "content-wrapper";
+    readonly TABLE_WRAPPER: "table-wrapper";
+    readonly PAGINATION_WRAPPER: "pagination-wrapper";
+    readonly TABLE_CONTENT_WRAPPER: "table-content-wrapper";
+    readonly VIRTUAL_LIST_WRAPPER: "virtual-list-wrapper";
+    readonly HEAD_WRAPPER: "head-wrapper";
+    readonly HEAD_TR: "head-tr";
+    readonly HEAD_TH: "head-th";
+    readonly HEAD_RIGHT_ICONS_WRAPPER: "head-right-icons-wrapper";
+    readonly HEADER_CELL_WRAPPER: "header-cell-wrapper";
+    readonly EMPTY_HEADER: "empty-header";
+    readonly RESIZER: "resizer";
+    readonly ACTION_CELL: "action-cell";
+    readonly EXPAND_CELL_CONTAINER: "expand-cell-container";
+    readonly SINGLE_CELL_CONTAINER: "single-cell-container";
+    readonly DRAG_AND_DROP_GRIPPER: "drag-and-drop-gripper";
+    readonly TEXT_EDITABLE_CELL_INPUT: "text-editable-cell-input";
+    readonly FILTER_POPOVER_BUTTON: "filter-popover-button";
+    readonly FILTER_POPOVER_CONTENT: "filter-popover-content";
+    readonly DROP_INDICATOR: "drop-indicator";
+    readonly CELL: "cell";
+    readonly CELL_CONTENT: "cell-content";
+    readonly PENCIL_ICON: "pencil-icon";
+    readonly EDITABLE_CONTAINER: "editable-container";
+    readonly FULLSIZE_GRID: "fullsize-grid";
+    readonly ROW: "row";
+    readonly GROUP_HEADER_CONTAINER: "group-header-container";
+    readonly GROUP_HEADER_TITLE: "header-title";
+    readonly CELL_CONTAINER: "cells-container";
+    readonly TOOLBAR_WRAPPER: "toolbar-wrapper";
+    readonly TOOLBAR_BUTTONS_WRAPPER: "toolbar-buttons-wrapper";
+    readonly TOOLBAR_BUTTON: "toolbar-button";
+    readonly TOOLBAR_POSITION: "toolbar-position";
+    readonly EMPTY_STATE_WRAPPER: "empty-state-wrapper";
+    readonly WARNING_ICON: "warning-icon";
+    readonly EMPTY_PRIMARY_MESSAGE: "empty-primary-message";
+    readonly EMPTY_SECONDARY_MESSAGE: "empty-secondary-message";
+    readonly EMPTY_BUTTON: "empty-button";
+    readonly CENTER_CONTENT_FLEX_WRAPPER: "center-content-flex-wrapper";
+    readonly LOADER_WRAPPER: "loader-wrapper";
+    readonly FILTER_BAR_WRAPPER: "filter-bar-wrapper";
+    readonly FREE_TEXT_SEARCH_FILTER: "free-text-search-filter";
+};
+export declare const DSDataTableDataTestIds: {
+    /**
+     * As there is a mix of hardcoded data-testid and the ones auto generated by slot definitions
+     * we are overriding the auto generated ones with the hardcoded values for consistency.
+     */
+    CONTENT_WRAPPER: string;
+    TABLE_WRAPPER: string;
+    CELL_CONTAINER: string;
+    DRAG_AND_DROP_GRIPPER: string;
+    FREE_TEXT_SEARCH_FILTER: string;
+    FILTER_POPOVER_BUTTON: string;
+    HEAD_TH: string;
+    CELL: string;
+    FULLSIZE_GRID: string;
+    ROOT: string;
+    VIRTUAL_LIST_WRAPPER: string;
+    GROUP_HEADER_CONTAINER: string;
+    EXPAND_CELL_CONTAINER: string;
+    DATA_TABLE_WRAPPER: string;
+    DATA_TABLE_GLOBAL_EXPAND_CELL: string;
+    DATA_TABLE_ICON_ARROW_DOWN: string;
+    DATA_TABLE_ICON_ARROW_RIGHT: string;
+    DATA_TABLE_ICON_ARROW_MIXED: string;
+    DATA_TABLE_ICON_CHILD: string;
+    DATA_TABLE_GLOBAL_CHECKBOX: string;
+    DATA_TABLE_CHECKBOX: string;
+    DATA_TABLE_RADIO: string;
+    DATA_TABLE_DATE_RANGE_CONTROLLER: string;
+    DATA_TABLE_DATE_RANGE_CONTROLLER_CHECKBOX_SWITCHER: string;
+    DATA_TABLE_SINGLE_DATE_CONTROLLER: string;
+    DATA_TABLE_NUMBER_RANGE_CONTROLLER: string;
+    DATA_TABLE_CURRENCY_RANGE_CONTROLLER: string;
+    DATA_TABLE_SELECT_MENU_ITEM: string;
+    DATA_TABLE_MULTISELECT_CONTROLLER: string;
+    DATA_TABLE_SINGLESELECT_CONTROLLER: string;
+    DATA_TABLE_FILTER_BUTTON: string;
+    DATA_TABLE_FILTER_BUTTON_ELEMENT: string;
+    DATA_TABLE_FILTER_MENU_CONTENT: string;
+    DATA_TABLE_FILTER_FREE_TEXT_SEARCH: string;
+    DATA_TABLE_ROW_CONTENT: string;
+    DATA_TABLE_ROW: string;
+    DATA_TABLE_TOOLBAR_TRIGGER: string;
+    DATA_TABLE_CELL: string;
+    DATA_TABLE_DRAG_HANDLE: string;
+    DATA_TABLE_CONTENT_WRAPPER: string;
+    DATA_TABLE_TABLE: string;
+    DATA_TABLE_SCROLLABLE_CONTAINER: string;
+    DATA_TABLE_HEADER: string;
+    DATA_TABLE_ROW_HEADER_CONTENT: string;
+    DATA_TABLE_ROW_GROUP_HEADER: string;
+    DATA_TABLE_COLUMN_DRAG_OVERLAY: string;
+    DATA_TABLE_HEADER_CELL_TITLE: string;
+    DATA_TABLE_FILTER_BAR_DD_MENU_BUTTON: string;
+    DATA_TABLE_SORT_BUTTON: string;
+    PAGINATION_WRAPPER: "ds-datatable-pagination-wrapper";
+    TABLE_CONTENT_WRAPPER: "ds-datatable-table-content-wrapper";
+    HEAD_WRAPPER: "ds-datatable-head-wrapper";
+    HEAD_TR: "ds-datatable-head-tr";
+    HEAD_RIGHT_ICONS_WRAPPER: "ds-datatable-head-right-icons-wrapper";
+    HEADER_CELL_WRAPPER: "ds-datatable-header-cell-wrapper";
+    EMPTY_HEADER: "ds-datatable-empty-header";
+    RESIZER: "ds-datatable-resizer";
+    ACTION_CELL: "ds-datatable-action-cell";
+    SINGLE_CELL_CONTAINER: "ds-datatable-single-cell-container";
+    TEXT_EDITABLE_CELL_INPUT: "ds-datatable-text-editable-cell-input";
+    FILTER_POPOVER_CONTENT: "ds-datatable-filter-popover-content";
+    DROP_INDICATOR: "ds-datatable-drop-indicator";
+    CELL_CONTENT: "ds-datatable-cell-content";
+    PENCIL_ICON: "ds-datatable-pencil-icon";
+    EDITABLE_CONTAINER: "ds-datatable-editable-container";
+    ROW: "ds-datatable-row";
+    GROUP_HEADER_TITLE: "ds-datatable-header-title";
+    TOOLBAR_WRAPPER: "ds-datatable-toolbar-wrapper";
+    TOOLBAR_BUTTONS_WRAPPER: "ds-datatable-toolbar-buttons-wrapper";
+    TOOLBAR_BUTTON: "ds-datatable-toolbar-button";
+    TOOLBAR_POSITION: "ds-datatable-toolbar-position";
+    EMPTY_STATE_WRAPPER: "ds-datatable-empty-state-wrapper";
+    WARNING_ICON: "ds-datatable-warning-icon";
+    EMPTY_PRIMARY_MESSAGE: "ds-datatable-empty-primary-message";
+    EMPTY_SECONDARY_MESSAGE: "ds-datatable-empty-secondary-message";
+    EMPTY_BUTTON: "ds-datatable-empty-button";
+    CENTER_CONTENT_FLEX_WRAPPER: "ds-datatable-center-content-flex-wrapper";
+    LOADER_WRAPPER: "ds-datatable-loader-wrapper";
+    FILTER_BAR_WRAPPER: "ds-datatable-filter-bar-wrapper";
+};

package/dist/types/constants/legacyToBeDeprecated.d.ts

@@ -0,0 +1,38 @@
+export declare const legacyDataTestIds: {
+    DATA_TABLE_WRAPPER: string;
+    DATA_TABLE_GLOBAL_EXPAND_CELL: string;
+    DATA_TABLE_ICON_ARROW_DOWN: string;
+    DATA_TABLE_ICON_ARROW_RIGHT: string;
+    DATA_TABLE_ICON_ARROW_MIXED: string;
+    DATA_TABLE_ICON_CHILD: string;
+    DATA_TABLE_GLOBAL_CHECKBOX: string;
+    DATA_TABLE_CHECKBOX: string;
+    DATA_TABLE_RADIO: string;
+    DATA_TABLE_DATE_RANGE_CONTROLLER: string;
+    DATA_TABLE_DATE_RANGE_CONTROLLER_CHECKBOX_SWITCHER: string;
+    DATA_TABLE_SINGLE_DATE_CONTROLLER: string;
+    DATA_TABLE_NUMBER_RANGE_CONTROLLER: string;
+    DATA_TABLE_CURRENCY_RANGE_CONTROLLER: string;
+    DATA_TABLE_SELECT_MENU_ITEM: string;
+    DATA_TABLE_MULTISELECT_CONTROLLER: string;
+    DATA_TABLE_SINGLESELECT_CONTROLLER: string;
+    DATA_TABLE_FILTER_BUTTON: string;
+    DATA_TABLE_FILTER_BUTTON_ELEMENT: string;
+    DATA_TABLE_FILTER_MENU_CONTENT: string;
+    DATA_TABLE_FILTER_FREE_TEXT_SEARCH: string;
+    DATA_TABLE_ROW_CONTENT: string;
+    DATA_TABLE_ROW: string;
+    DATA_TABLE_TOOLBAR_TRIGGER: string;
+    DATA_TABLE_CELL: string;
+    DATA_TABLE_DRAG_HANDLE: string;
+    DATA_TABLE_CONTENT_WRAPPER: string;
+    DATA_TABLE_TABLE: string;
+    DATA_TABLE_SCROLLABLE_CONTAINER: string;
+    DATA_TABLE_HEADER: string;
+    DATA_TABLE_ROW_HEADER_CONTENT: string;
+    DATA_TABLE_ROW_GROUP_HEADER: string;
+    DATA_TABLE_COLUMN_DRAG_OVERLAY: string;
+    DATA_TABLE_HEADER_CELL_TITLE: string;
+    DATA_TABLE_FILTER_BAR_DD_MENU_BUTTON: string;
+    DATA_TABLE_SORT_BUTTON: string;
+};

package/dist/types/index.d.ts

@@ -3,4 +3,4 @@ export { FilterPopover, EditableCell, Toolbar, groupBy, FILTER_TYPES, ROW_VARIAN
 export { actionColumn, expandRowColumn, multiSelectColumn, singleSelectColumn, dragHandleColumn, INTERNAL_COLUMNS, } from './addons/Columns/index.js';
 export type { DSDataTableT } from './react-desc-prop-types.js';
 export { useWholeStore } from './configs/useStore/useStore.js';
-export * from './DSDataTableDefinitions.js';
+export { DATA_TABLE_DATA_TESTID, DATA_TABLE_SLOTS, DSDataTableDataTestIds, DSDataTableName, DSDataTableSlots, } from './constants/index.js';

package/dist/types/react-desc-prop-types.d.ts

@@ -1,4 +1,3 @@
-import type { WeakValidationMap } from 'react';
 import type { Range, useVirtual } from 'react-virtual/types';
 import type { ZustandT } from '@elliemae/ds-zustand-helpers';
 import type { DSPaginationT } from '@elliemae/ds-pagination';
@@ -6,8 +5,9 @@ import { type TypescriptHelpersT } from '@elliemae/ds-typescript-helpers';
 import type { DnDKitTree, useSortable } from '@elliemae/ds-drag-and-drop';
 import type { DSControlledCheckboxT } from '@elliemae/ds-form-checkbox';
 import type { DSComboboxT } from '@elliemae/ds-form-combobox';
+import { type DSPropTypesSchema, type ValidationMap } from '@elliemae/ds-props-helpers';
 import { type DropIndicatorPosition, ColsLayoutStyle } from './configs/constants.js';
-import { DSDataTableName, DSDataTableSlots } from './DSDataTableDefinitions.js';
+import { DSDataTableName, DSDataTableSlots } from './constants/index.js';
 export declare namespace DSDataTableT {
     type PropsT<D, R, O> = Partial<D> & R & O;
     type InternalPropsT<D, R, O> = D & R & O;
@@ -214,7 +214,7 @@ export declare namespace DSDataTableT {
         cells: Cell[];
     }
     export interface InternalColumn extends Column {
-        index: number;
+        index?: number;
         id: string;
         parentId: string | null;
         depth: number;
@@ -406,59 +406,5 @@ export declare namespace DSDataTableT {
     export {};
 }
 export declare const defaultProps: () => DSDataTableT.DefaultProps;
-export declare const DSDataTablePropTypes: {
-    columns: import("@elliemae/ds-props-helpers/dist/types/propTypes/types.js").ReactDescT;
-    data: import("@elliemae/ds-props-helpers/dist/types/propTypes/types.js").ReactDescT;
-    height: import("@elliemae/ds-props-helpers/dist/types/propTypes/types.js").ReactDescT;
-    width: import("@elliemae/ds-props-helpers/dist/types/propTypes/types.js").ReactDescT;
-    renderRowActions: import("@elliemae/ds-props-helpers/dist/types/propTypes/types.js").ReactDescT;
-    isExpandable: import("@elliemae/ds-props-helpers/dist/types/propTypes/types.js").ReactDescT;
-    uniqueRowAccessor: import("@elliemae/ds-props-helpers/dist/types/propTypes/types.js").ReactDescT;
-    disabledRows: import("@elliemae/ds-props-helpers/dist/types/propTypes/types.js").ReactDescT;
-    expandedRows: import("@elliemae/ds-props-helpers/dist/types/propTypes/types.js").ReactDescT;
-    onRowExpand: import("@elliemae/ds-props-helpers/dist/types/propTypes/types.js").ReactDescT;
-    cellRendererProps: import("@elliemae/ds-props-helpers/dist/types/propTypes/types.js").ReactDescT;
-    selectSingle: import("@elliemae/ds-props-helpers/dist/types/propTypes/types.js").ReactDescT;
-    selection: import("@elliemae/ds-props-helpers/dist/types/propTypes/types.js").ReactDescT;
-    onSelectionChange: import("@elliemae/ds-props-helpers/dist/types/propTypes/types.js").ReactDescT;
-    groupedRowsRenderHeader: import("@elliemae/ds-props-helpers/dist/types/propTypes/types.js").ReactDescT;
-    isResizeable: import("@elliemae/ds-props-helpers/dist/types/propTypes/types.js").ReactDescT;
-    filters: import("@elliemae/ds-props-helpers/dist/types/propTypes/types.js").ReactDescT;
-    withFilterBar: import("@elliemae/ds-props-helpers/dist/types/propTypes/types.js").ReactDescT;
-    filterBarProps: import("@elliemae/ds-props-helpers/dist/types/propTypes/types.js").ReactDescT;
-    onFiltersChange: import("@elliemae/ds-props-helpers/dist/types/propTypes/types.js").ReactDescT;
-    pagination: import("@elliemae/ds-props-helpers/dist/types/propTypes/types.js").ReactDescT;
-    Pagination: import("@elliemae/ds-props-helpers/dist/types/propTypes/types.js").ReactDescT;
-    colsLayoutStyle: import("@elliemae/ds-props-helpers/dist/types/propTypes/types.js").ReactDescT;
-    hiddenColumns: import("@elliemae/ds-props-helpers/dist/types/propTypes/types.js").ReactDescT;
-    dragAndDropRows: import("@elliemae/ds-props-helpers/dist/types/propTypes/types.js").ReactDescT;
-    onRowsReorder: import("@elliemae/ds-props-helpers/dist/types/propTypes/types.js").ReactDescT;
-    maxDragAndDropLevel: import("@elliemae/ds-props-helpers/dist/types/propTypes/types.js").ReactDescT;
-    dragAndDropColumns: import("@elliemae/ds-props-helpers/dist/types/propTypes/types.js").ReactDescT;
-    onColumnsReorder: import("@elliemae/ds-props-helpers/dist/types/propTypes/types.js").ReactDescT;
-    getIsDropValid: import("@elliemae/ds-props-helpers/dist/types/propTypes/types.js").ReactDescT;
-    textWrap: import("@elliemae/ds-props-helpers/dist/types/propTypes/types.js").ReactDescT;
-    noResultsMessage: import("@elliemae/ds-props-helpers/dist/types/propTypes/types.js").ReactDescT;
-    noResultsSecondaryMessage: import("@elliemae/ds-props-helpers/dist/types/propTypes/types.js").ReactDescT;
-    noResultsButtonLabel: import("@elliemae/ds-props-helpers/dist/types/propTypes/types.js").ReactDescT;
-    noResultsPlaceholder: import("@elliemae/ds-props-helpers/dist/types/propTypes/types.js").ReactDescT;
-    isLoading: import("@elliemae/ds-props-helpers/dist/types/propTypes/types.js").ReactDescT;
-    onColumnResize: import("@elliemae/ds-props-helpers/dist/types/propTypes/types.js").ReactDescT;
-    onColumnSizeChange: import("@elliemae/ds-props-helpers/dist/types/propTypes/types.js").ReactDescT;
-    onRowClick: import("@elliemae/ds-props-helpers/dist/types/propTypes/types.js").ReactDescT;
-    onRowFocus: import("@elliemae/ds-props-helpers/dist/types/propTypes/types.js").ReactDescT;
-    onCellValueChange: import("@elliemae/ds-props-helpers/dist/types/propTypes/types.js").ReactDescT;
-    onColumnSortChange: import("@elliemae/ds-props-helpers/dist/types/propTypes/types.js").ReactDescT;
-    onColumnSort: import("@elliemae/ds-props-helpers/dist/types/propTypes/types.js").ReactDescT;
-    onTableResize: import("@elliemae/ds-props-helpers/dist/types/propTypes/types.js").ReactDescT;
-    actionRef: import("@elliemae/ds-props-helpers/dist/types/propTypes/types.js").ReactDescT;
-    getRowVariant: import("@elliemae/ds-props-helpers/dist/types/propTypes/types.js").ReactDescT;
-    noSelectionColumn: import("@elliemae/ds-props-helpers/dist/types/propTypes/types.js").ReactDescT;
-    onPageChanged: import("@elliemae/ds-props-helpers/dist/types/propTypes/types.js").ReactDescT;
-    onNoResultsButtonClick: import("@elliemae/ds-props-helpers/dist/types/propTypes/types.js").ReactDescT;
-    isSkeleton: import("@elliemae/ds-props-helpers/dist/types/propTypes/types.js").ReactDescT;
-    getAriaLabelForRow: import("@elliemae/ds-props-helpers/dist/types/propTypes/types.js").ReactDescT;
-    domIdAffix: import("@elliemae/ds-props-helpers/dist/types/propTypes/types.js").ReactDescT;
-    checkboxSelectAllProps: import("@elliemae/ds-props-helpers/dist/types/propTypes/types.js").ReactDescT;
-};
-export declare const DSDataTablePropTypesSchema: WeakValidationMap<DSDataTableT.Props>;
+export declare const DSDataTablePropTypes: DSPropTypesSchema<DSDataTableT.Props>;
+export declare const DSDataTablePropTypesSchema: ValidationMap<DSDataTableT.Props>;

package/dist/types/tests/DSDataTable.exports.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/types/tests/data-testid/DSDataTable.data-testid.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/types/tests/data-testid/Renderers.d.ts

@@ -0,0 +1,36 @@
+export function Basic({ isResizable }: {
+    isResizable?: boolean | undefined;
+}): import("react/jsx-runtime").JSX.Element;
+export function DND(): import("react/jsx-runtime").JSX.Element;
+export function EmptyState(): import("react/jsx-runtime").JSX.Element;
+export function Expandable(): import("react/jsx-runtime").JSX.Element;
+export function Paginated(): import("react/jsx-runtime").JSX.Element;
+export function WithToolbar(): import("react/jsx-runtime").JSX.Element;
+export function FilterBarDropdownMenuWithProps(props: any): import("react/jsx-runtime").JSX.Element;
+export namespace filterBarPropsConfig {
+    export { FilterBarDropdownMenuWithProps as filterBarAddonRenderer };
+}
+export const mockColumnsFiltered: ({
+    Header: string;
+    accessor: string;
+    filter: any;
+    filterOptions?: undefined;
+} | {
+    Header: string;
+    accessor: string;
+    filter: any;
+    filterOptions: {
+        dsId: string;
+        type: string;
+        value: string;
+        label: string;
+    }[];
+} | {
+    Header: string;
+    accessor: string;
+    filter?: undefined;
+    filterOptions?: undefined;
+})[];
+export function Filtered({ customAttributes }: {
+    customAttributes: any;
+}): import("react/jsx-runtime").JSX.Element;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@elliemae/ds-data-table",
-  "version": "3.57.0-next.3",
+  "version": "3.57.0-next.4",
   "license": "MIT",
   "description": "ICE MT - Dimsum - Data Table",
   "files": [
@@ -37,42 +37,42 @@
   },
   "dependencies": {
     "react-virtual": "~2.10.4",
-    "uid": "~2.0.1",
+    "uid": "^2.0.2",
     "use-onclickoutside": "0.4.1",
-    "@elliemae/ds-button": "3.57.0-next.3",
-    "@elliemae/ds-button-v2": "3.57.0-next.3",
-    "@elliemae/ds-dropdownmenu": "3.57.0-next.3",
-    "@elliemae/ds-dropdownmenu-v2": "3.57.0-next.3",
-    "@elliemae/ds-circular-progress-indicator": "3.57.0-next.3",
-    "@elliemae/ds-form-checkbox": "3.57.0-next.3",
-    "@elliemae/ds-form-combobox": "3.57.0-next.3",
-    "@elliemae/ds-form-date-range-picker": "3.57.0-next.3",
-    "@elliemae/ds-form-date-time-picker": "3.57.0-next.3",
-    "@elliemae/ds-form-helpers-mask-hooks": "3.57.0-next.3",
-    "@elliemae/ds-drag-and-drop": "3.57.0-next.3",
-    "@elliemae/ds-form-input-text": "3.57.0-next.3",
-    "@elliemae/ds-form-layout-blocks": "3.57.0-next.3",
-    "@elliemae/ds-form-radio": "3.57.0-next.3",
-    "@elliemae/ds-grid": "3.57.0-next.3",
-    "@elliemae/ds-pills-v2": "3.57.0-next.3",
-    "@elliemae/ds-pagination": "3.57.0-next.3",
-    "@elliemae/ds-popperjs": "3.57.0-next.3",
-    "@elliemae/ds-icons": "3.57.0-next.3",
-    "@elliemae/ds-skeleton": "3.57.0-next.3",
-    "@elliemae/ds-typescript-helpers": "3.57.0-next.3",
-    "@elliemae/ds-system": "3.57.0-next.3",
-    "@elliemae/ds-zustand-helpers": "3.57.0-next.3",
-    "@elliemae/ds-props-helpers": "3.57.0-next.3",
-    "@elliemae/ds-truncated-tooltip-text": "3.57.0-next.3"
+    "@elliemae/ds-button": "3.57.0-next.4",
+    "@elliemae/ds-button-v2": "3.57.0-next.4",
+    "@elliemae/ds-circular-progress-indicator": "3.57.0-next.4",
+    "@elliemae/ds-drag-and-drop": "3.57.0-next.4",
+    "@elliemae/ds-dropdownmenu-v2": "3.57.0-next.4",
+    "@elliemae/ds-form-checkbox": "3.57.0-next.4",
+    "@elliemae/ds-form-combobox": "3.57.0-next.4",
+    "@elliemae/ds-dropdownmenu": "3.57.0-next.4",
+    "@elliemae/ds-form-date-range-picker": "3.57.0-next.4",
+    "@elliemae/ds-form-date-time-picker": "3.57.0-next.4",
+    "@elliemae/ds-form-helpers-mask-hooks": "3.57.0-next.4",
+    "@elliemae/ds-form-input-text": "3.57.0-next.4",
+    "@elliemae/ds-form-radio": "3.57.0-next.4",
+    "@elliemae/ds-form-layout-blocks": "3.57.0-next.4",
+    "@elliemae/ds-grid": "3.57.0-next.4",
+    "@elliemae/ds-pagination": "3.57.0-next.4",
+    "@elliemae/ds-popperjs": "3.57.0-next.4",
+    "@elliemae/ds-props-helpers": "3.57.0-next.4",
+    "@elliemae/ds-icons": "3.57.0-next.4",
+    "@elliemae/ds-skeleton": "3.57.0-next.4",
+    "@elliemae/ds-system": "3.57.0-next.4",
+    "@elliemae/ds-truncated-tooltip-text": "3.57.0-next.4",
+    "@elliemae/ds-typescript-helpers": "3.57.0-next.4",
+    "@elliemae/ds-pills-v2": "3.57.0-next.4",
+    "@elliemae/ds-zustand-helpers": "3.57.0-next.4"
   },
   "devDependencies": {
     "@elliemae/pui-cli": "9.0.0-next.65",
     "jest": "~29.7.0",
     "styled-components": "~5.3.9",
     "styled-system": "^5.1.5",
-    "@elliemae/ds-monorepo-devops": "3.57.0-next.3",
-    "@elliemae/ds-test-utils": "3.57.0-next.3",
-    "@elliemae/ds-toolbar-v2": "3.57.0-next.3"
+    "@elliemae/ds-monorepo-devops": "3.57.0-next.4",
+    "@elliemae/ds-test-utils": "3.57.0-next.4",
+    "@elliemae/ds-toolbar-v2": "3.57.0-next.4"
   },
   "peerDependencies": {
     "lodash-es": "^4.17.21",