@elliemae/ds-data-table 3.19.0 → 3.19.1-rc.1

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 { type Theme, styled } from '@elliemae/ds-system';\nimport { Grid } from '@elliemae/ds-grid';\nimport { EditPencil } from '@elliemae/ds-icons';\nimport { sizeToCss, cellPadding, columnPadding } from './helpers/index.js';\nimport { ZIndexDataTable } from './configs/zIndexInternalConfig.js';\nimport { ColsLayoutStyle } from './configs/constants.js';\nimport type { InternalTypescriptColumn } from './types/props.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)<WidthAndHeight>`\n  width: ${(props) => sizeToCss(props.width ?? ' 100%')};\n  height: ${(props) => sizeToCss(props.height ?? ' 100%')};\n`;\n\nexport const StyledDataTableContentWrapper = styled(Grid)<{ noSelectionAllowed: boolean }>`\n  user-select: ${({ noSelectionAllowed }) => (noSelectionAllowed ? 'none' : 'auto')};\n  width: 100%;\n`;\n\nexport const StyledTableWrapper = styled.div<WidthAndHeight>`\n  display: inline-block;\n  border-spacing: 0;\n  z-index: 0;\n  position: relative;\n  width: 100%;\n  height: 100%;\n`;\nexport const StyledTableContentWrapper = styled(Grid)<WidthAndHeight>`\n  position: relative;\n  ${({ height = 'auto' }) => `\n  height: ${sizeToCss(height) as string};\n  `}\n`;\n\nexport const StyledVirtualListWrapper = styled(Grid)`\n  overflow: auto;\n  height: 100%;\n  width: 100%;\n`;\n\n/**\n * HEADER\n */\ntype GridTemplateColumnStyleProps = {\n  cols: string[];\n  isExpandable: boolean;\n  colsLayoutStyle: ColsLayoutStyle;\n};\nconst getGridTemplateColumnsStyle = ({\n  cols,\n  colsLayoutStyle = ColsLayoutStyle.Auto,\n}: GridTemplateColumnStyleProps) => {\n  if (!cols) return '';\n  if (colsLayoutStyle === 'fixed') {\n    const widthAttr = cols.map((col) => `minmax(0, ${col})`).join(' ');\n    return `grid-template-columns: ${widthAttr}`;\n  }\n\n  return `grid-template-columns: ${cols.map((col) => `minmax(0, ${col})`).join(' ')}`;\n};\n\nexport const StyledHeadWrapper = styled(Grid)<{\n  colsLayoutStyle: string;\n  totalColumnsWidth: number | string;\n}>`\n  position: relative; /* ie11 fallback */\n  position: sticky;\n  top: 0;\n  z-index: 4;\n  background: white;\n  width: ${(props) => (props.colsLayoutStyle === ColsLayoutStyle.Fixed ? sizeToCss(props.totalColumnsWidth) : '100%')};\n`;\n\nexport const StyledHeadTr = styled(Grid)<{ isExpandable: boolean; colsLayoutStyle: ColsLayoutStyle; cols: string[] }>`\n  ${(props) => (props.colsLayoutStyle === ColsLayoutStyle.Auto ? 'width:100%' : '')};\n  ${(props) => getGridTemplateColumnsStyle(props)};\n  border-right: 1px solid ${(props) => props.theme.colors.neutral['080']};\n  border-bottom: 1px solid ${(props) => props.theme.colors.neutral['080']};\n  grid-auto-flow: column;\n`;\n\nexport const StyledHeadTh = styled.div<{ isDraggingActive?: boolean; column: InternalTypescriptColumn }>`\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  height: 100%;\n  display: flex;\n  align-items: center;\n  max-height: 24px;\n`;\n\nexport const StyledResizer = styled.div<{ isResizing: boolean }>`\n  display: inline-block;\n  background: transparent;\n  width: 4px;\n  height: 100%;\n  position: absolute;\n  right: 0;\n  top: 0;\n  z-index: 1;\n\n  // prevents from scrolling while dragging on touch devices\n  touch-action: none;\n\n  cursor: col-resize;\n`;\n\n// CELL ***********************************************************************/\nexport const StyledActionCell = styled.div`\n  position: relative; /* ie11 fallback */\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  ${cellPadding}\n  display: flex;\n  align-items: center;\n  width: 100%;\n  position: relative;\n`;\n\nexport const StyledCellContent = styled.div`\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\nexport const StyledEditableContainer = styled(Grid)<{ shouldDisplayEditIcon: string }>`\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)<{ 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)<{ 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  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  backgroundColor?: string;\n  isDragOverlay?: boolean;\n  isDragging?: boolean;\n  isDisabled?: boolean;\n  isExpandable?: boolean;\n  colsLayoutStyle?: ColsLayoutStyle;\n  cols?: string[];\n  isDropValid?: boolean;\n  shouldDisplayHover?: boolean;\n  isDropIndicatorPositionInside?: boolean;\n  minHeight?: 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  ${(props) => getGridTemplateColumnsStyle(props)};\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"],
-  "mappings": "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",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable max-lines */\nimport { type Theme, styled } from '@elliemae/ds-system';\nimport { Grid } from '@elliemae/ds-grid';\nimport { EditPencil } from '@elliemae/ds-icons';\nimport { sizeToCss, cellPadding, columnPadding } from './helpers/index.js';\nimport { ZIndexDataTable } from './configs/zIndexInternalConfig.js';\nimport { ColsLayoutStyle } from './configs/constants.js';\nimport type { DSDataTableT } from './react-desc-prop-types.js';\nimport { DSInputText } from '@elliemae/ds-form-input-text';\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)<WidthAndHeight>`\n  width: ${(props) => sizeToCss(props.width ?? ' 100%')};\n  height: ${(props) => sizeToCss(props.height ?? ' 100%')};\n`;\n\nexport const StyledDataTableContentWrapper = styled(Grid)<{ noSelectionAllowed: boolean }>`\n  user-select: ${({ noSelectionAllowed }) => (noSelectionAllowed ? 'none' : 'auto')};\n  width: 100%;\n`;\n\nexport const StyledTableWrapper = styled.div<WidthAndHeight>`\n  display: inline-block;\n  border-spacing: 0;\n  z-index: 0;\n  position: relative;\n  width: 100%;\n  height: 100%;\n`;\nexport const StyledTableContentWrapper = styled(Grid)<{ height?: string | number; totalColumnsWidth: string | number }>`\n  position: relative;\n  ${({ height = 'auto' }) => `\n  height: ${sizeToCss(height) as string};\n  `}\n  width: ${(props) => sizeToCss(props.totalColumnsWidth)};\n`;\n\nexport const StyledVirtualListWrapper = styled(Grid)<{ gridLayout: string[] }>`\n  overflow: auto;\n  height: 100%;\n  --grid-layout: ${(props) => props.gridLayout.map((col) => `minmax(0, ${col})`).join(' ')};\n`;\n\nexport const StyledHeadWrapper = styled(Grid)<{\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  isExpandable: boolean;\n  colsLayoutStyle: DSDataTableT.ColsLayoutStyleValues;\n}>`\n  ${(props) => (props.colsLayoutStyle === ColsLayoutStyle.Auto ? 'width:100%' : '')};\n  grid-template-columns: var(--grid-layout);\n  border-right: 1px solid ${(props) => props.theme.colors.neutral['080']};\n  border-bottom: 1px solid ${(props) => props.theme.colors.neutral['080']};\n  grid-auto-flow: column;\n`;\n\nexport const StyledHeadTh = styled.div<{ isDraggingActive?: boolean; column: DSDataTableT.InternalColumn }>`\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  height: 100%;\n  display: flex;\n  align-items: center;\n  max-height: 24px;\n`;\n\nexport const StyledResizer = styled(DSInputText)`\n  width: 4px;\n  height: 100%;\n  position: absolute;\n  right: 0;\n  top: 0;\n  z-index: 1;\n\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\n    &:focus::-webkit-slider-runnable-track {\n      background: transparent;\n    }\n\n    &:focus-visible {\n      :after {\n        position: absolute;\n        content: ' ';\n        z-index: 2;\n        top: 0;\n        right: 0;\n        width: 8px;\n        height: 100%;\n        border: 2px solid brand-700;\n      }\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`;\n\n// CELL ***********************************************************************/\nexport const StyledActionCell = styled.div`\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  ${cellPadding}\n  display: flex;\n  align-items: center;\n  width: 100%;\n  position: relative;\n`;\n\nexport const StyledCellContent = styled.div`\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\nexport const StyledEditableContainer = styled(Grid)<{ 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)<{ 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)<{ 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  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  backgroundColor?: string;\n  isDragOverlay?: boolean;\n  isDragging?: boolean;\n  isDisabled?: boolean;\n  isDropValid?: boolean;\n  shouldDisplayHover?: boolean;\n  isDropIndicatorPositionInside?: boolean;\n  minHeight?: 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) => (props.isDragOverlay ? `minmax(0, 24px) minmax(0, auto)` : `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"],
+  "mappings": "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",
   "names": []
 }

package/dist/types/DataTable.d.ts

@@ -1,89 +1,6 @@
-import React from 'react';
-import type { TypescriptProps } from './types/props.js';
+import type { DSDataTableT } from './react-desc-prop-types.js';
 export declare const DataTable: {
-    (props: TypescriptProps): JSX.Element;
-    propTypes: React.WeakValidationMap<unknown>;
-    defaultProps: {
-        height?: string | undefined;
-        width?: string | undefined;
-        renderRowActions?: boolean | undefined;
-        getRowVariant?: ((row: import("./types/props.js").TypescriptRow, defaultCellRenderer: React.ComponentType<any>) => React.ComponentType<any> | import("./types/props.js").RowVariant) | undefined;
-        withFilterBar?: boolean | undefined;
-        isExpandable?: boolean | undefined;
-        expandedRows?: Record<string, boolean> | undefined;
-        disabledRows?: Record<string, boolean> | undefined;
-        isResizeable?: boolean | undefined;
-        isLoading?: boolean | undefined;
-        pagination?: false | import("./types/props.js").TypescriptPagination | undefined;
-        filters?: import("./types/props.js").DataTableFilter[] | undefined;
-        colsLayoutStyle?: import("./configs/constants.js").ColsLayoutStyle | undefined;
-        hiddenColumns?: string[] | undefined;
-        noResultsMessage?: string | undefined;
-        dragAndDropRows?: boolean | undefined;
-        maxDragAndDropLevel?: number | undefined;
-        onRowsReorder?: ((newData: import("./types/props.js").TypescriptRow[], indexes: {
-            targetIndex: number;
-            fromIndex: number;
-        }, considerExpanding: string | null, extraData: {
-            flattenedData: import("./types/props.js").InternalTypescriptRow[];
-            allDataFlattened: import("./types/props.js").InternalTypescriptRow[];
-        }) => void) | undefined;
-        dragAndDropColumns?: boolean | undefined;
-        onColumnsReorder?: ((newData: import("./types/props.js").TypescriptColumn<HTMLElement>[], indexes: {
-            targetIndex: number;
-            fromIndex: number;
-        }) => void) | undefined;
-        getIsDropValid?: ((active: import("./types/props.js").InternalTypescriptRow, over: import("./types/props.js").InternalTypescriptRow, dropIndicatorPosition: import("./types/props.js").DropIndicatorPosition) => boolean) | undefined;
-        onColumnResize?: ((headerId: string, width: number) => void) | undefined;
-        onColumnSizeChange?: ((newColumns: import("./types/props.js").TypescriptColumn<HTMLElement>[], headerId: string, width: number) => void) | undefined;
-        onRowClick?: import("./types/props.js").TypescriptGenericFunc | undefined;
-        onRowFocus?: import("./types/props.js").TypescriptGenericFunc | undefined;
-        noSelectionColumn?: boolean | undefined;
-        selectSingle?: boolean | undefined;
-        onSelectionChange?: ((newSelection: import("./types/props.js").TypescriptSelection, selectedControl: string, event: React.ChangeEvent<Element> | React.MouseEvent<Element, MouseEvent> | React.KeyboardEvent<Element>) => void) | undefined;
-        textWrap?: "wrap" | "wrap-all" | "truncate" | undefined;
-        onCellValueChange?: ((cellChange: {
-            value: any;
-            property: any;
-            rowIndex: number;
-        }) => void) | undefined;
-        onFiltersChange?: import("./types/props.js").TypescriptGenericFunc | undefined;
-        onPageChanged?: import("./types/props.js").TypescriptGenericFunc | undefined;
-        onRowExpand?: ((expandedRows: Record<string, boolean>, toggledRow: string) => void) | undefined;
-        onColumnSortChange?: ((newSortRequest: {
-            column: any;
-            direction: any;
-        }) => void) | undefined;
-        onColumnSort?: ((newColumns: import("./types/props.js").TypescriptColumn<HTMLElement>[], headerId: string, direction: "ASC" | "DESC") => void) | undefined;
-        columns?: import("./types/props.js").TypescriptColumn<HTMLElement>[] | undefined;
-        data?: import("./types/props.js").TypescriptRow[] | undefined;
-        uniqueRowAccessor?: import("./types/props.js").UniqueRowAccessorType;
-        cellRendererProps?: Record<string, any> | undefined;
-        selection?: import("./types/props.js").TypescriptSelection | undefined;
-        groupedRowsRenderHeader?: string | import("./types/props.js").TypescriptGenericFunc | undefined;
-        filterBarProps?: {
-            filterBarAddonRenderer?: React.ComponentType<any> | undefined;
-            customPillRenderer?: React.ComponentType<any> | undefined;
-            onClearAllFiltersClick?: (() => void) | undefined;
-            onDropdownMenuToggle?: ((isOpen: boolean, eventType: string) => void) | undefined;
-            onDropdownMenuClickOutside?: (() => void) | undefined;
-            onDropdownMenuTriggerClick?: (() => void) | undefined;
-            isDropdownMenuOpen?: boolean | undefined;
-            extraOptions?: {
-                type: string;
-                id: string;
-                label: string;
-                onClick?: import("./types/props.js").TypescriptGenericFunc | undefined;
-            }[] | undefined;
-        } | undefined;
-        actionRef?: React.RefObject<any> | undefined;
-        noResultsSecondaryMessage?: string | undefined;
-        noResultsButtonLabel?: string | undefined;
-        noResultsPlaceholder?: import("./types/props.js").TypescriptGenericFunc | undefined;
-        onNoResultsButtonClick?: import("./types/props.js").TypescriptGenericFunc | undefined;
-        onTableResize?: import("./types/props.js").TypescriptGenericFunc | undefined;
-        Pagination?: React.ComponentType<Record<string, never>> | undefined;
-    };
+    (props: DSDataTableT.Props): JSX.Element;
     displayName: string;
 };
-export declare const DataTableWithSchema: import("@elliemae/ds-props-helpers/dist/types/propTypes/types.js").DocumentedReactComponent<TypescriptProps>;
+export declare const DataTableWithSchema: import("@elliemae/ds-props-helpers/dist/types/propTypes/types.js").DocumentedReactComponent<DSDataTableT.Props>;

package/dist/types/DataTableContext.d.ts

@@ -1,6 +1,5 @@
 /// <reference types="react" />
-import type { TypescriptContext, TypescriptProps } from './types/props.js';
-export declare const defaultProps: Partial<TypescriptProps>;
+import type { DSDataTableT } from './react-desc-prop-types.js';
 /** Context for cross component communication */
-declare const DataTableContext: import("react").Context<TypescriptContext>;
+declare const DataTableContext: import("react").Context<DSDataTableT.Context>;
 export { DataTableContext };

package/dist/types/addons/Columns/ColumnAction/ColumnAction.d.ts

@@ -1,4 +1,4 @@
-import type { TypescriptColumn, TypescriptRenderRowActionsConfig } from '../../../types/props.js';
-type ConfigurableColumn = (renderRowActions: TypescriptRenderRowActionsConfig) => TypescriptColumn;
+import type { DSDataTableT } from '../../../react-desc-prop-types.js';
+type ConfigurableColumn = (renderRowActions: DSDataTableT.RenderRowActionsConfig) => DSDataTableT.InternalColumn;
 export declare const actionColumn: ConfigurableColumn;
 export {};

package/dist/types/addons/Columns/ColumnDragHandle/ColumnDragHandle.d.ts

@@ -1,2 +1,2 @@
-import type { TypescriptColumn } from '../../../types/props.js';
-export declare const dragHandleColumn: TypescriptColumn<HTMLDivElement>;
+import type { DSDataTableT } from '../../../react-desc-prop-types.js';
+export declare const dragHandleColumn: DSDataTableT.InternalColumn<HTMLDivElement>;

package/dist/types/addons/Columns/ColumnExpand/ColumnExpand.d.ts

@@ -1,2 +1,2 @@
-import type { TypescriptColumn } from '../../../types/props.js';
-export declare const expandRowColumn: TypescriptColumn<HTMLSpanElement>;
+import type { DSDataTableT } from '../../../react-desc-prop-types.js';
+export declare const expandRowColumn: DSDataTableT.InternalColumn<HTMLSpanElement>;

package/dist/types/addons/Columns/ColumnSelectMultiple/ColumnSelectMultiple.d.ts

@@ -1,2 +1,2 @@
-import type { TypescriptColumn } from '../../../types/props.js';
-export declare const multiSelectColumn: TypescriptColumn<HTMLInputElement>;
+import type { DSDataTableT } from '../../../react-desc-prop-types.js';
+export declare const multiSelectColumn: DSDataTableT.InternalColumn<HTMLInputElement>;

package/dist/types/addons/Columns/ColumnSelectSingle/ColumnSelectSingle.d.ts

@@ -1,2 +1,2 @@
-import type { TypescriptColumn } from '../../../types/props.js';
-export declare const singleSelectColumn: TypescriptColumn<HTMLInputElement>;
+import type { DSDataTableT } from '../../../react-desc-prop-types.js';
+export declare const singleSelectColumn: DSDataTableT.InternalColumn<HTMLInputElement>;

package/dist/types/addons/Editables/ComboboxEditableCell/ComboboxEditableCell.d.ts

@@ -1,2 +1,7 @@
 import React from 'react';
-export declare const ComboboxEditableCell: React.ComponentType<any>;
+import type { DSDataTableT } from '../../../react-desc-prop-types.js';
+export declare const ComboboxEditableCell: React.ComponentType<{
+    cell: DSDataTableT.Cell<HTMLDivElement>;
+    DefaultCellRender: JSX.Element;
+    isRowSelected: boolean;
+}>;

package/dist/types/addons/Editables/DateEditableCell/DateEditableCell.d.ts

@@ -1 +1,7 @@
-export declare const DateEditableCell: (props: any) => import("react/jsx-runtime.js").JSX.Element;
+import React from 'react';
+import type { DSDataTableT } from '../../../react-desc-prop-types.js';
+export declare const DateEditableCell: React.ComponentType<{
+    cell: DSDataTableT.Cell<HTMLDivElement>;
+    DefaultCellRender: JSX.Element;
+    isRowSelected: boolean;
+}>;

package/dist/types/addons/Editables/TextEditableCell/TextEditableCell.d.ts

@@ -1,2 +1,7 @@
 import React from 'react';
-export declare const TextEditableCell: React.ComponentType<any>;
+import type { DSDataTableT } from '../../../react-desc-prop-types.js';
+export declare const TextEditableCell: React.ComponentType<{
+    cell: DSDataTableT.Cell<HTMLDivElement>;
+    DefaultCellRender: JSX.Element;
+    isRowSelected: boolean;
+}>;

package/dist/types/addons/Filters/Components/CurrencyRangeFilter/index.d.ts

@@ -1,8 +1,8 @@
 import React from 'react';
-import type { FilterProps } from '../../../../types/props.js';
+import type { DSDataTableT } from '../../../../react-desc-prop-types.js';
 interface CurrentRangeFilterValue {
     from: string | null;
     to: string | null;
 }
-export declare const CurrencyRangeFilter: React.ComponentType<FilterProps<CurrentRangeFilterValue>>;
+export declare const CurrencyRangeFilter: React.ComponentType<DSDataTableT.FilterProps<CurrentRangeFilterValue>>;
 export {};

package/dist/types/addons/Filters/Components/DateRangeFilter/index.d.ts

@@ -1,8 +1,8 @@
 import React from 'react';
-import type { FilterProps } from '../../../../types/props.js';
+import type { DSDataTableT } from '../../../../react-desc-prop-types.js';
 interface DateRangeFilterValue {
     startDate: string | null;
     endDate: string | null;
 }
-export declare const DateRangeFilter: React.ComponentType<FilterProps<DateRangeFilterValue>>;
+export declare const DateRangeFilter: React.ComponentType<DSDataTableT.FilterProps<DateRangeFilterValue>>;
 export {};

package/dist/types/addons/Filters/Components/DateSwitcherFilter/index.d.ts

@@ -1,9 +1,9 @@
 import React from 'react';
-import type { FilterProps } from '../../../../types/props.js';
+import type { DSDataTableT } from '../../../../react-desc-prop-types.js';
 interface DateSwitcherFilterValue {
     startDate: string | null;
     endDate: string | null;
     isDateRange: boolean;
 }
-export declare const DateSwitcherFilter: React.ComponentType<FilterProps<DateSwitcherFilterValue>>;
+export declare const DateSwitcherFilter: React.ComponentType<DSDataTableT.FilterProps<DateSwitcherFilterValue>>;
 export {};

package/dist/types/addons/Filters/Components/NumberRangeFilter/index.d.ts

@@ -1,8 +1,8 @@
 import React from 'react';
-import type { FilterProps } from '../../../../types/props.js';
+import type { DSDataTableT } from '../../../../react-desc-prop-types.js';
 interface NumberRangeFilterValue {
     from: number | '' | null;
     to: number | '' | null;
 }
-export declare const NumberRangeFilter: React.ComponentType<FilterProps<NumberRangeFilterValue>>;
+export declare const NumberRangeFilter: React.ComponentType<DSDataTableT.FilterProps<NumberRangeFilterValue>>;
 export {};

package/dist/types/addons/Filters/Components/SelectFilter/BaseSelectFilter.d.ts

@@ -1,11 +1,11 @@
 import React from 'react';
 import type { DSComboboxT } from '@elliemae/ds-form-combobox';
-import type { FilterProps } from '../../../../types/props.js';
+import type { DSDataTableT } from '../../../../react-desc-prop-types.js';
 interface BaseSelectProps {
     isMulti?: boolean;
     creatable?: boolean;
     type: string;
 }
 type BaseSelectFilterValue = DSComboboxT.SelectedOptionsT;
-export declare const BaseSelectFilter: React.ComponentType<FilterProps<BaseSelectFilterValue> & BaseSelectProps>;
+export declare const BaseSelectFilter: React.ComponentType<DSDataTableT.FilterProps<BaseSelectFilterValue> & BaseSelectProps>;
 export {};

package/dist/types/addons/Filters/Components/SelectFilter/MultiCreatableFilter.d.ts

@@ -1,6 +1,6 @@
 import React from 'react';
 import type { DSComboboxT } from '@elliemae/ds-form-combobox';
-import type { FilterProps } from '../../../../types/props.js';
+import type { DSDataTableT } from '../../../../react-desc-prop-types.js';
 type MultiCreatableFilterValue = DSComboboxT.SelectedOptionsT;
-export declare const MultiCreatableFilter: React.ComponentType<FilterProps<MultiCreatableFilterValue>>;
+export declare const MultiCreatableFilter: React.ComponentType<DSDataTableT.FilterProps<MultiCreatableFilterValue>>;
 export {};

package/dist/types/addons/Filters/Components/SelectFilter/MultiSelectFilter.d.ts

@@ -1,6 +1,6 @@
 import React from 'react';
 import type { DSComboboxT } from '@elliemae/ds-form-combobox';
-import type { FilterProps } from '../../../../types/props.js';
+import type { DSDataTableT } from '../../../../react-desc-prop-types.js';
 type MultiSelectFilterValue = DSComboboxT.SelectedOptionsT;
-export declare const MultiSelectFilter: React.ComponentType<FilterProps<MultiSelectFilterValue>>;
+export declare const MultiSelectFilter: React.ComponentType<DSDataTableT.FilterProps<MultiSelectFilterValue>>;
 export {};

package/dist/types/addons/Filters/Components/SelectFilter/SingleCreatableFilter.d.ts

@@ -1,6 +1,6 @@
 import React from 'react';
 import type { DSComboboxT } from '@elliemae/ds-form-combobox';
-import type { FilterProps } from '../../../../types/props.js';
+import type { DSDataTableT } from '../../../../react-desc-prop-types.js';
 type SingleCreatableFilterValue = DSComboboxT.SelectedOptionsT;
-export declare const SingleCreatableFilter: React.ComponentType<FilterProps<SingleCreatableFilterValue>>;
+export declare const SingleCreatableFilter: React.ComponentType<DSDataTableT.FilterProps<SingleCreatableFilterValue>>;
 export {};

package/dist/types/addons/Filters/Components/SelectFilter/SingleSelectFilter.d.ts

@@ -1,6 +1,6 @@
 import React from 'react';
 import type { DSComboboxT } from '@elliemae/ds-form-combobox';
-import type { FilterProps } from '../../../../types/props.js';
+import type { DSDataTableT } from '../../../../react-desc-prop-types.js';
 type SingleSelectFilterValue = DSComboboxT.SelectedOptionsT;
-export declare const SingleSelectFilter: React.ComponentType<FilterProps<SingleSelectFilterValue>>;
+export declare const SingleSelectFilter: React.ComponentType<DSDataTableT.FilterProps<SingleSelectFilterValue>>;
 export {};

package/dist/types/addons/Filters/Components/SingleDateFilter/index.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import type { FilterProps } from '../../../../types/props.js';
+import type { DSDataTableT } from '../../../../react-desc-prop-types.js';
 type SingleDataFilterValue = string | null;
-export declare const SingleDateFilter: React.ComponentType<FilterProps<SingleDataFilterValue>>;
+export declare const SingleDateFilter: React.ComponentType<DSDataTableT.FilterProps<SingleDataFilterValue>>;
 export {};

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

@@ -1,8 +1,14 @@
 export declare const momentFormat = "MM/DD/YYYY";
-export declare enum ColsLayoutStyle {
-    Fixed = "fixed",
-    Auto = "auto"
-}
+export declare const ColsLayoutStyle: {
+    readonly Fixed: "fixed";
+    readonly Auto: "auto";
+};
+export declare const DropIndicatorPosition: {
+    readonly None: "none";
+    readonly Before: "before";
+    readonly After: "after";
+    readonly Inside: "inside";
+};
 export declare const DATA_TESTID: {
     DATA_TABLE_WRAPPER: string;
     DATA_TABLE_GLOBAL_EXPAND_CELL: string;

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

@@ -1,2 +1,2 @@
-import type { TypescriptContext, TypescriptProps } from '../types/props.js';
-export declare const useDatatableConfig: (props: TypescriptProps) => TypescriptContext;
+import type { DSDataTableT } from '../react-desc-prop-types.js';
+export declare const useDatatableConfig: (props: DSDataTableT.Props) => DSDataTableT.Context;

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

@@ -1,11 +1,11 @@
 /// <reference types="react" />
-import type { ReduxHeader } from '../types/props.js';
+import type { DSDataTableT } from '../react-desc-prop-types.js';
 export declare const useInternalStateConfig: () => {
     drilldownRowId: string | null;
     setDrilldownRowId: import("react").Dispatch<import("react").SetStateAction<string | null>>;
     focusedRowId: string | null;
     setFocusedRowId: import("react").Dispatch<import("react").SetStateAction<string | null>>;
-    reduxHeaders: Record<string, ReduxHeader>;
-    patchHeader: (headerId: string, newHeader: Partial<ReduxHeader>) => void;
+    reduxHeaders: Record<string, DSDataTableT.ReduxHeader>;
+    patchHeader: (headerId: string, newHeader: Partial<DSDataTableT.ReduxHeader>) => void;
     patchHeaderFilterButtonAndMenu: (headerId: string, value: boolean) => void;
 };

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

@@ -1,2 +1,2 @@
-import type { TypescriptPagination, TypescriptProps, TypescriptRow } from '../types/props.js';
-export declare const usePaginationConfig: (props: TypescriptProps, flattenedData: TypescriptRow[]) => [TypescriptRow[] | null, TypescriptPagination];
+import type { DSDataTableT } from '../react-desc-prop-types.js';
+export declare const usePaginationConfig: (props: DSDataTableT.InternalProps, flattenedData: DSDataTableT.InternalRow[]) => [DSDataTableT.InternalRow[] | null, DSDataTableT.Pagination];

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

@@ -1,2 +1,2 @@
-import type { InternalTypescriptRow, TypescriptProps } from '../types/props.js';
-export declare const useRowFlattenization: (props: TypescriptProps) => [InternalTypescriptRow[], InternalTypescriptRow[]];
+import type { DSDataTableT } from '../react-desc-prop-types.js';
+export declare const useRowFlattenization: (props: DSDataTableT.InternalProps) => [DSDataTableT.InternalRow[], DSDataTableT.InternalRow[]];

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

@@ -1,4 +1,4 @@
-import type { InternalTypescriptColumn, TypescriptProps } from '../types/props.js';
-type UseTableColsWithAddonsType = (config: TypescriptProps) => InternalTypescriptColumn[];
+import type { DSDataTableT } from '../react-desc-prop-types.js';
+type UseTableColsWithAddonsType = (config: DSDataTableT.InternalProps) => DSDataTableT.InternalColumn[];
 declare const useTableColsWithAddons: UseTableColsWithAddonsType;
 export { useTableColsWithAddons };

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

@@ -1,7 +1,7 @@
 import React from 'react';
-import type { InternalTypescriptProps } from '../types/props.js';
+import type { DSDataTableT } from '../react-desc-prop-types.js';
 export type UseTableResizeCb = (config: {
     virtualListRef: React.RefObject<HTMLElement>;
-    internalProps: InternalTypescriptProps;
+    propsWithDefault: DSDataTableT.InternalProps;
 }) => void;
 export declare const useTableResizeCb: UseTableResizeCb;

package/dist/types/exported-related/EditableCell.d.ts

@@ -1,2 +1,8 @@
 import React from 'react';
-export declare const EditableCell: React.ComponentType<any>;
+import type { DSDataTableT } from '../react-desc-prop-types.js';
+export declare const EditableCell: React.ComponentType<{
+    StandardRender: JSX.Element;
+    EditableRenderer: JSX.Element;
+    cell: DSDataTableT.Cell<HTMLDivElement>;
+    isRowSelected?: boolean;
+}>;

package/dist/types/exported-related/FilterBar/FilterBarDropdownMenu.d.ts

@@ -1,6 +1,7 @@
 import React from 'react';
+import { type DSDropdownMenuT } from '@elliemae/ds-dropdownmenu';
 interface FilterBarDropdownMenuProps {
-    options?: unknown[];
+    options?: DSDropdownMenuT.Props['options'];
     innerRef?: React.RefObject<HTMLButtonElement>;
 }
 export declare const FilterBarDropdownMenu: React.ComponentType<FilterBarDropdownMenuProps>;

package/dist/types/exported-related/FilterPopover/types.d.ts

@@ -1,13 +1,13 @@
-/// <reference types="react" />
-import type { InternalTypescriptColumn, ReduxHeader } from '../../types/props.js';
+import type React from 'react';
+import type { DSDataTableT } from '../../react-desc-prop-types.js';
 export interface FilterPopoverProps {
-    column: InternalTypescriptColumn;
+    column: DSDataTableT.InternalColumn;
     columnId: string;
     triggerIcon: JSX.Element;
     menuContent: JSX.Element;
-    onTriggerClick?: (id: string, e: React.MouseEvent) => void;
+    onTriggerClick?: (id: string, e: React.MouseEvent | React.KeyboardEvent) => void;
     onClickOutsideMenu?: (id: string) => void;
-    reduxHeader: ReduxHeader;
+    reduxHeader: DSDataTableT.ReduxHeader;
     innerRef: React.MutableRefObject<HTMLButtonElement | null>;
     ariaLabel: string;
     customStyles?: React.CSSProperties;

package/dist/types/exported-related/FilterPopover/useGetFilterHandlers.d.ts

@@ -1,7 +1,7 @@
 import type React from 'react';
 import type { FilterPopoverProps } from './types.js';
 export declare const useGetFilterHandlers: (props: FilterPopoverProps, isMenuOpen: boolean, buttonReference: HTMLButtonElement | null, setIsButtonFocused: React.Dispatch<React.SetStateAction<boolean>>) => {
-    handleTriggerClick: (e: React.MouseEvent) => void;
+    handleTriggerClick: (e: React.MouseEvent | React.KeyboardEvent) => void;
     handleClickOutsideMenu: () => void;
     handleMenuOnKeyDown: (e: React.KeyboardEvent) => void;
     handleTriggerOnFocus: () => void;

package/dist/types/exported-related/FilterPopover/useGetFilterVisibility.d.ts

@@ -1,5 +1,5 @@
-import type { ReduxHeader } from '../../types/props.js';
-export declare const useGetFilterVisibility: (reduxHeader: ReduxHeader) => {
+import type { DSDataTableT } from '../../react-desc-prop-types.js';
+export declare const useGetFilterVisibility: (reduxHeader: DSDataTableT.ReduxHeader) => {
     isIconVisible: boolean;
     isMenuOpen: boolean;
 };

package/dist/types/exported-related/Filters/applyOutOfTheBoxFilters.d.ts

@@ -1,2 +1,2 @@
-import type { TypescriptAppliedFilter, TypescriptRow } from '../../types/props.js';
-export declare const applyOutOfTheBoxFilters: (data: TypescriptRow[], filters: TypescriptAppliedFilter[]) => TypescriptRow[];
+import type { DSDataTableT } from '../../react-desc-prop-types.js';
+export declare const applyOutOfTheBoxFilters: (data: DSDataTableT.Row[], filters: DSDataTableT.Filter[]) => DSDataTableT.Row[];

package/dist/types/exported-related/Filters/numberRangeFilterFn.d.ts

@@ -1,5 +1,5 @@
 import type { FilterFn } from './types.js';
 export declare const numberRangeFilterFn: FilterFn<{
-    from: number;
-    to: number;
+    from?: number;
+    to?: number;
 }>;

package/dist/types/exported-related/Filters/types.d.ts

@@ -1,2 +1,2 @@
-import type { TypescriptRow } from '../../types/props.js';
-export type FilterFn<T = unknown> = (unfilteredData: TypescriptRow[], filterKey: string, filterValue: T) => TypescriptRow[];
+import type { DSDataTableT } from '../../react-desc-prop-types.js';
+export type FilterFn<T = unknown> = (unfilteredData: DSDataTableT.Row[], filterKey: string, filterValue: T) => DSDataTableT.Row[];

package/dist/types/exported-related/RowRenderer/index.d.ts

@@ -1,19 +1,19 @@
 import React from 'react';
+import type { XstyledProps } from '@elliemae/ds-props-helpers';
 import type { RowVariantProps } from '../../parts/RowVariants/types.js';
-import type { InternalTypescriptRow } from '../../types/props.js';
+import type { DSDataTableT } from '../../react-desc-prop-types.js';
 interface RowRendererProps {
-    row: InternalTypescriptRow;
+    row: DSDataTableT.InternalRow;
     compact?: boolean;
     itemIndex: number;
     isDragOverlay: boolean;
     minHeight: string;
     height: string;
     rowsLayout?: string[] | number[];
-    colsLayout?: (string | number)[];
     CustomRowContentRenderer?: React.ComponentType<RowVariantProps>;
     focusedRowId: string | null;
     drilldownRowId: string | null;
-    backgroundColor?: string;
+    backgroundColor?: XstyledProps['backgroundColor'];
 }
 declare const RowRenderer: React.ComponentType<RowRendererProps>;
 export { RowRenderer };

package/dist/types/exported-related/RowRenderer/useRowRendererHandlers.d.ts

@@ -1,10 +1,10 @@
 import type React from 'react';
 import type { SortableItemContextType } from '../../parts/HoC/SortableItemContext.js';
-import type { InternalTypescriptRow } from '../../types/props.js';
+import type { DSDataTableT } from '../../react-desc-prop-types.js';
 export declare const useRowRendererHandlers: ({ row, itemIndex, items, draggableProps, isDragOverlay, drilldownRowId, }: {
-    row: InternalTypescriptRow;
+    row: DSDataTableT.InternalRow;
     itemIndex: number;
-    items: InternalTypescriptRow[];
+    items: DSDataTableT.InternalRow[];
     draggableProps: SortableItemContextType['draggableProps'];
     isDragOverlay: boolean;
     drilldownRowId: string | null;

package/dist/types/exported-related/RowRenderer/useRowRendererProperties.d.ts

@@ -1,14 +1,13 @@
-import type { ColsLayoutStyle } from '../../configs/constants.js';
-import type { InternalTypescriptRow } from '../../types/props.js';
+import type { DSDataTableT } from '../../react-desc-prop-types.js';
 import { useRowStyle } from './useRowStyle.js';
 export declare const useRowRendererProperties: ({ row, }: {
-    row: InternalTypescriptRow;
+    row: DSDataTableT.InternalRow;
 }) => {
     userDataProperties: Record<string, unknown>;
-    colsLayoutStyle: ColsLayoutStyle;
+    colsLayoutStyle: DSDataTableT.ColsLayoutStyleValues;
 } & {
     rowStyle: Record<string, unknown>;
     shouldAppendDottedBorder: boolean;
-    dropIndicatorPosition: false | import("../../types/props.js").DropIndicatorPosition;
+    dropIndicatorPosition: false | DSDataTableT.DropIndicatorPositionValues;
     isDropValid: boolean;
 };

package/dist/types/exported-related/RowRenderer/useRowStyle.d.ts

@@ -1,7 +1,7 @@
-import type { InternalTypescriptRow, DropIndicatorPosition } from '../../types/props.js';
-export declare const useRowStyle: (row: InternalTypescriptRow) => {
+import type { DSDataTableT } from '../../react-desc-prop-types.js';
+export declare const useRowStyle: (row: DSDataTableT.InternalRow) => {
     rowStyle: Record<string, unknown>;
     shouldAppendDottedBorder: boolean;
-    dropIndicatorPosition: false | DropIndicatorPosition;
+    dropIndicatorPosition: false | DSDataTableT.DropIndicatorPositionValues;
     isDropValid: boolean;
 };

package/dist/types/exported-related/Toolbar/Toolbar.d.ts

@@ -1,8 +1,8 @@
 import React from 'react';
-import type { TypescriptCell } from '../../types/props.js';
+import type { DSDataTableT } from '../../react-desc-prop-types.js';
 interface ToolbarProps {
     isRowSelected?: boolean;
-    cell: TypescriptCell;
+    cell: DSDataTableT.Cell;
     children: React.ReactNode;
 }
 export declare const Toolbar: React.ComponentType<ToolbarProps>;