@elliemae/ds-data-table 3.0.0-next.53 → 3.0.0-next.56

package/dist/cjs/parts/VirtualRowsList.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/parts/VirtualRowsList.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["import React, { useContext, useMemo, useCallback } from 'react';\nimport { connect } from 'react-redux';\nimport { RowLoading } from './RowLoading'; // imported this way to avoid circular dependencies\nimport { EmptyContent } from './EmptyContent'; // imported this way to avoid circular dependencies\nimport { RowsWithContext as Rows } from './Rows'; // imported this way to avoid circular dependencies\nimport { Headers } from './Headers'; // imported this way to avoid circular dependencies\nimport { Footer } from './Footer'; // imported this way to avoid circular dependencies\nimport { DataTableContext } from '../DataTableContext';\nimport { FIXED_SIZES } from '../configs/fixedSizes';\nimport { StyledVirtualListWrapper, StyledTableContentWrapper } from '../styled';\nimport { MemoizedLoader as Loader } from './Loader';\nimport { useDispatchRowsActions } from '../redux/reducers';\nimport { DATA_TESTID } from '../configs/constants';\n\nfunction mapStateToProps(state) {\n  return {\n    relativeRowMouseCord: state.rows.relativeRowMouseCord,\n  };\n}\n\nconst VirtualRowsListComponent = () => {\n  const {\n    virtualListRef,\n    tableProps: { height, width, isLoading, isLoadingAppended },\n    virtualListHelpers,\n    layoutHelpers: { totalColumnsWidth },\n    flattenedData,\n  } = useContext(DataTableContext);\n  const { totalSize, scrollToIndex } = virtualListHelpers;\n  const { setFocusedRowId } = useDispatchRowsActions();\n\n  const isEmptyContent = useMemo(() => !isLoading && flattenedData.length === 0, [isLoading, flattenedData.length]);\n\n  const tableHeight = useMemo(() => {\n    if (typeof height === 'string')\n      return height.includes('%') ? height : Number.parseInt(height, 10) - FIXED_SIZES.PAGINATION_HEIGHT;\n    return height;\n  }, [height]);\n\n  const onKeyDown = useCallback(\n    (e: React.KeyboardEvent) => {\n      if (e.ctrlKey && e.code === 'End') {\n        scrollToIndex(flattenedData.length - 1);\n        setFocusedRowId(flattenedData[flattenedData.length - 1].uid);\n      } else if (e.ctrlKey && e.code === 'Home') {\n        scrollToIndex(0, { align: 'center' });\n        setFocusedRowId(flattenedData[0].uid);\n      }\n    },\n    [scrollToIndex, setFocusedRowId, flattenedData],\n  );\n\n  return (\n    <StyledVirtualListWrapper\n      ref={virtualListRef}\n      height={tableHeight}\n      width={width}\n      data-testid={DATA_TESTID.DATA_TABLE_SCROLLABLE_CONTAINER}\n      onKeyDown={onKeyDown}\n      tabIndex={-1}\n    >\n      <StyledTableContentWrapper role=\"rowgroup\" height={totalSize || '100%'}>\n        <Headers />\n        {isEmptyContent && <EmptyContent width={totalColumnsWidth} />}\n        {isLoading ? <Loader /> : null}\n        {!isLoading && !isEmptyContent && (\n          <>\n            <Rows />\n            <Footer />\n            {isLoadingAppended && <RowLoading />}\n          </>\n        )}\n      </StyledTableContentWrapper>\n    </StyledVirtualListWrapper>\n  );\n};\n\nexport const VirtualRowsList = connect(mapStateToProps)(VirtualRowsListComponent);\n\nexport default VirtualRowsList;\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,mBAAwD;AACxD,yBAAwB;AACxB,wBAA2B;AAC3B,0BAA6B;AAC7B,kBAAwC;AACxC,qBAAwB;AACxB,oBAAuB;AACvB,8BAAiC;AACjC,wBAA4B;AAC5B,oBAAoE;AACpE,oBAAyC;AACzC,sBAAuC;AACvC,uBAA4B;AAE5B,yBAAyB,OAAO;AAC9B,SAAO;AAAA,IACL,sBAAsB,MAAM,KAAK;AAAA,EACnC;AACF;AAEA,MAAM,2BAA2B,MAAM;AACrC,QAAM;AAAA,IACJ;AAAA,IACA,YAAY,EAAE,QAAQ,OAAO,WAAW;AAAA,IACxC;AAAA,IACA,eAAe,EAAE;AAAA,IACjB;AAAA,MACE,6BAAW,wCAAgB;AAC/B,QAAM,EAAE,WAAW,kBAAkB;AACrC,QAAM,EAAE,oBAAoB,4CAAuB;AAEnD,QAAM,iBAAiB,0BAAQ,MAAM,CAAC,aAAa,cAAc,WAAW,GAAG,CAAC,WAAW,cAAc,MAAM,CAAC;AAEhH,QAAM,cAAc,0BAAQ,MAAM;AAChC,QAAI,OAAO,WAAW;AACpB,aAAO,OAAO,SAAS,GAAG,IAAI,SAAS,OAAO,SAAS,QAAQ,EAAE,IAAI,8BAAY;AACnF,WAAO;AAAA,EACT,GAAG,CAAC,MAAM,CAAC;AAEX,QAAM,YAAY,8BAChB,CAAC,MAA2B;AAC1B,QAAI,EAAE,WAAW,EAAE,SAAS,OAAO;AACjC,oBAAc,cAAc,SAAS,CAAC;AACtC,sBAAgB,cAAc,cAAc,SAAS,GAAG,GAAG;AAAA,IAC7D,WAAW,EAAE,WAAW,EAAE,SAAS,QAAQ;AACzC,oBAAc,GAAG,EAAE,OAAO,SAAS,CAAC;AACpC,sBAAgB,cAAc,GAAG,GAAG;AAAA,IACtC;AAAA,EACF,GACA,CAAC,eAAe,iBAAiB,aAAa,CAChD;AAEA,SACE,mDAAC;AAAA,IACC,KAAK;AAAA,IACL,QAAQ;AAAA,IACR;AAAA,IACA,eAAa,6BAAY;AAAA,IACzB;AAAA,IACA,UAAU;AAAA,KAEV,mDAAC;AAAA,IAA0B,MAAK;AAAA,IAAW,QAAQ,aAAa;AAAA,KAC9D,mDAAC,4BAAQ,GACR,kBAAkB,mDAAC;AAAA,IAAa,OAAO;AAAA,GAAmB,GAC1D,YAAY,mDAAC,kCAAO,IAAK,MACzB,CAAC,aAAa,CAAC,kBACd,wFACE,mDAAC,iCAAK,GACN,mDAAC,0BAAO,GACP,qBAAqB,mDAAC,kCAAW,CACpC,CAEJ,CACF;AAEJ;AAEO,MAAM,kBAAkB,gCAAQ,eAAe,EAAE,wBAAwB;AAEhF,IAAO,0BAAQ;",
+  "sourcesContent": ["import React, { useContext, useMemo, useCallback } from 'react';\nimport { RowLoading } from './RowLoading'; // imported this way to avoid circular dependencies\nimport { EmptyContent } from './EmptyContent'; // imported this way to avoid circular dependencies\nimport { RowsWithContext as Rows } from './Rows'; // imported this way to avoid circular dependencies\nimport { Headers } from './Headers'; // imported this way to avoid circular dependencies\nimport { Footer } from './Footer'; // imported this way to avoid circular dependencies\nimport { DataTableContext } from '../DataTableContext';\nimport { FIXED_SIZES } from '../configs/fixedSizes';\nimport { StyledVirtualListWrapper, StyledTableContentWrapper } from '../styled';\nimport { MemoizedLoader as Loader } from './Loader';\nimport { DATA_TESTID } from '../configs/constants';\n\nexport const VirtualRowsList = () => {\n  const {\n    virtualListRef,\n    tableProps: { height, width, isLoading, isLoadingAppended },\n    virtualListHelpers,\n    layoutHelpers: { totalColumnsWidth },\n    flattenedData,\n    setFocusedRowId,\n  } = useContext(DataTableContext);\n  const { totalSize, scrollToIndex } = virtualListHelpers;\n\n  const isEmptyContent = useMemo(() => !isLoading && flattenedData.length === 0, [isLoading, flattenedData.length]);\n\n  const tableHeight = useMemo(() => {\n    if (typeof height === 'string')\n      return height.includes('%') ? height : Number.parseInt(height, 10) - FIXED_SIZES.PAGINATION_HEIGHT;\n    return height;\n  }, [height]);\n\n  const onKeyDown = useCallback(\n    (e: React.KeyboardEvent) => {\n      if (e.ctrlKey && e.code === 'End') {\n        scrollToIndex(flattenedData.length - 1);\n        setFocusedRowId(flattenedData[flattenedData.length - 1].uid);\n      } else if (e.ctrlKey && e.code === 'Home') {\n        scrollToIndex(0, { align: 'center' });\n        setFocusedRowId(flattenedData[0].uid);\n      }\n    },\n    [scrollToIndex, setFocusedRowId, flattenedData],\n  );\n\n  return (\n    <StyledVirtualListWrapper\n      ref={virtualListRef}\n      height={tableHeight}\n      width={width}\n      data-testid={DATA_TESTID.DATA_TABLE_SCROLLABLE_CONTAINER}\n      onKeyDown={onKeyDown}\n      tabIndex={-1}\n    >\n      <StyledTableContentWrapper role=\"rowgroup\" height={totalSize || '100%'}>\n        <Headers />\n        {isEmptyContent && <EmptyContent width={totalColumnsWidth} />}\n        {isLoading ? <Loader /> : null}\n        {!isLoading && !isEmptyContent && (\n          <>\n            <Rows />\n            <Footer />\n            {isLoadingAppended && <RowLoading />}\n          </>\n        )}\n      </StyledTableContentWrapper>\n    </StyledVirtualListWrapper>\n  );\n};\n\nexport default VirtualRowsList;\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,mBAAwD;AACxD,wBAA2B;AAC3B,0BAA6B;AAC7B,kBAAwC;AACxC,qBAAwB;AACxB,oBAAuB;AACvB,8BAAiC;AACjC,wBAA4B;AAC5B,oBAAoE;AACpE,oBAAyC;AACzC,uBAA4B;AAErB,MAAM,kBAAkB,MAAM;AACnC,QAAM;AAAA,IACJ;AAAA,IACA,YAAY,EAAE,QAAQ,OAAO,WAAW;AAAA,IACxC;AAAA,IACA,eAAe,EAAE;AAAA,IACjB;AAAA,IACA;AAAA,MACE,6BAAW,wCAAgB;AAC/B,QAAM,EAAE,WAAW,kBAAkB;AAErC,QAAM,iBAAiB,0BAAQ,MAAM,CAAC,aAAa,cAAc,WAAW,GAAG,CAAC,WAAW,cAAc,MAAM,CAAC;AAEhH,QAAM,cAAc,0BAAQ,MAAM;AAChC,QAAI,OAAO,WAAW;AACpB,aAAO,OAAO,SAAS,GAAG,IAAI,SAAS,OAAO,SAAS,QAAQ,EAAE,IAAI,8BAAY;AACnF,WAAO;AAAA,EACT,GAAG,CAAC,MAAM,CAAC;AAEX,QAAM,YAAY,8BAChB,CAAC,MAA2B;AAC1B,QAAI,EAAE,WAAW,EAAE,SAAS,OAAO;AACjC,oBAAc,cAAc,SAAS,CAAC;AACtC,sBAAgB,cAAc,cAAc,SAAS,GAAG,GAAG;AAAA,IAC7D,WAAW,EAAE,WAAW,EAAE,SAAS,QAAQ;AACzC,oBAAc,GAAG,EAAE,OAAO,SAAS,CAAC;AACpC,sBAAgB,cAAc,GAAG,GAAG;AAAA,IACtC;AAAA,EACF,GACA,CAAC,eAAe,iBAAiB,aAAa,CAChD;AAEA,SACE,mDAAC;AAAA,IACC,KAAK;AAAA,IACL,QAAQ;AAAA,IACR;AAAA,IACA,eAAa,6BAAY;AAAA,IACzB;AAAA,IACA,UAAU;AAAA,KAEV,mDAAC;AAAA,IAA0B,MAAK;AAAA,IAAW,QAAQ,aAAa;AAAA,KAC9D,mDAAC,4BAAQ,GACR,kBAAkB,mDAAC;AAAA,IAAa,OAAO;AAAA,GAAmB,GAC1D,YAAY,mDAAC,kCAAO,IAAK,MACzB,CAAC,aAAa,CAAC,kBACd,wFACE,mDAAC,iCAAK,GACN,mDAAC,0BAAO,GACP,qBAAqB,mDAAC,kCAAW,CACpC,CAEJ,CACF;AAEJ;AAEA,IAAO,0BAAQ;",
   "names": []
 }

package/dist/cjs/types/props.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/types/props.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["/* eslint-disable max-lines */\nimport React, { MutableRefObject } from 'react';\nimport { useVirtual } from 'react-virtual/types';\nimport { ColsLayoutStyle } from '../configs/constants';\n\nexport type TypescriptGenericFunc = (...args: unknown[]) => unknown;\ninterface FilterOptionT {\n  dsId: string;\n  type: string;\n  value: string;\n  label: string;\n}\n\nexport type TypescriptColumn = {\n  id?: string;\n  Header: string | React.ComponentType<any>;\n  accessor?: string;\n  filter?: string;\n  filterOptions?: FilterOptionT[] | (() => FilterOptionT[]);\n  filterMinWidth?: number | string;\n  Filter?: React.ComponentType<FilterProps>;\n  Cell?: React.ComponentType<any>;\n  editable?: string | TypescriptGenericFunc;\n  disableDnD?: boolean;\n  width?: number;\n  minWidth?: number;\n  maxWidth?: number;\n  padding?: number;\n  columns?: TypescriptColumn[];\n  canSort?: boolean;\n  isSortedDesc?: boolean;\n  canResize?: boolean;\n  isFocuseable?: boolean;\n  textWrap?: 'wrap' | 'wrap-all' | 'truncate';\n  ref?: React.MutableRefObject<HTMLTableColElement>;\n  required?: boolean;\n  alwaysDisplayEditIcon?: boolean;\n};\n\nexport type TypescriptRow = {\n  [key: string]: any;\n  subRows: TypescriptRow[];\n  tableRowDetails: React.ComponentType<any>;\n  dimsumHeaderValue: string;\n};\n\nexport type RowVariant = 'ds-header-group-row' | 'ds-primary-row' | 'ds-secondary-row';\n\nexport type TypescriptRenderRowActionsConfig = {\n  columnWidth: number;\n  renderer: (...args: any[]) => JSX.Element;\n};\n\nexport type TypescriptRenderRowActions = false | TypescriptRenderRowActionsConfig;\n\nexport type TypescriptAppliedFilter = {\n  id: string;\n  type: string;\n  value: any;\n};\n\nexport type TypescriptPagination = {\n  page?: any[];\n  pageIndex?: number;\n  canPreviousPage?: boolean;\n  canNextPage?: boolean;\n  pageSize?: number;\n  showPerPageSelector?: boolean;\n  perPageOptions?: number[];\n  perPageStep?: number;\n  minPerPage?: number;\n  maxPerPage?: number;\n  onPageSizeChange?: (pageSize: number) => void;\n  onPreviousPage?: () => void;\n  onNextPage?: () => void;\n  onPageChange?: (page: number) => void;\n  pageCount?: number;\n  pageDetails?: string[];\n  pageDetailsTitle?: string;\n};\n\nexport type TypescriptSortBy = {\n  id: string;\n  desc: boolean;\n};\n\nexport type TypescriptSelectionItem = true | 'mixed' | false;\n\nexport type TypescriptSelection = Record<string | number, TypescriptSelectionItem>;\n\nexport type UniqueRowAccessorType = string | string[] | ((row: TypescriptRow) => string);\n\nexport type TypescriptProps = {\n  columns: TypescriptColumn[];\n  data: TypescriptRow[];\n  height?: string;\n  width?: string;\n  renderRowActions?: TypescriptRenderRowActions;\n  getRowVariant?: (\n    row: TypescriptRow,\n    defaultCellsRenderer: React.ComponentType<any>,\n  ) => RowVariant | React.ComponentType<any>;\n  isExpandable?: boolean;\n  uniqueRowAccessor?: UniqueRowAccessorType;\n  disabledRows?: Record<string, boolean>;\n  expandedRows?: Record<string, boolean>;\n  cellRendererProps?: Record<string, any>;\n  noSelectionColumn?: boolean;\n  selectSingle?: boolean;\n  selection?: TypescriptSelection;\n  groupedRowsRenderHeader?: TypescriptGenericFunc | string;\n  isResizeable?: boolean;\n  withFilterBar?: boolean;\n  filters?: { id: string; type: string; value: any }[];\n  filterBarProps?: {\n    customPillRenderer?: React.ComponentType<any>;\n    extraOptions?: { type: string; id: string; label: string; onClick?: TypescriptGenericFunc }[];\n  };\n  actionRef: React.RefObject<any>;\n  pagination?: false | TypescriptPagination;\n  colsLayoutStyle: ColsLayoutStyle;\n  hiddenColumns: string[];\n  dragAndDropRows?: boolean;\n  maxDragAndDropLevel?: number;\n  textWrap?: 'wrap' | 'wrap-all' | 'truncate';\n  customSortLogic?: boolean;\n  noResultsMessage?: string;\n  noResultsSecondaryMessage?: string;\n  noResultsButtonLabel?: string;\n  isLoading?: boolean;\n  isLoadingAppended?: boolean;\n  dragAndDropColumns?: boolean;\n  onColumnsReorder?: (newData: any[], indexes: { targetIndex: number; fromIndex: number }) => void;\n  onColumnResize?: (headerId: string, width: number) => void;\n  isNoMoreDataAppended?: boolean;\n  noMoreDataMessage?: string;\n  noResultsPlaceholder?: TypescriptGenericFunc;\n  onRowExpand?: (expandedRows: Record<string, boolean>, toggledRow: string) => void;\n  onRowsReorder?: (\n    newData: any[],\n    indexes: { targetIndex: number; fromIndex: number },\n    considerExpanding: string,\n  ) => void;\n  onRowClick?: TypescriptGenericFunc;\n  onRowFocus?: TypescriptGenericFunc;\n  onCellValueChange: (cellChange: { value: any; property: any; rowIndex: number }) => void;\n  onSelectionChange?: (newSelection: TypescriptSelection) => void;\n  onFiltersChange?: TypescriptGenericFunc;\n  onFilteredDataChange?: TypescriptGenericFunc;\n  onPageChanged?: TypescriptGenericFunc;\n  onNoResultsButtonClick?: TypescriptGenericFunc;\n  onColumnSortChange: (newSortRequest: { column: any; direction: any }) => void;\n};\n\nexport interface FilterProps {\n  column: TypescriptColumn;\n  ctx: TypescriptContext;\n  onFiltersChange?: (filters: { id: string; type: string; value: any }[]) => void;\n  onValueChange: (type: string, value: any) => void;\n  patchHeaderFilterButtonAndMenu: (headerId: string, newState: any) => void;\n  patchHeader: (headerId: string, newHeader: any) => void;\n  filterValue?: any;\n  reduxHeader?: any;\n  innerRef: MutableRefObject<HTMLDivElement>;\n}\n\nexport type TypescriptContext = {\n  tableProps: Partial<TypescriptProps>;\n  virtualListRef: React.RefObject<HTMLDivElement>;\n  columnHeaderRef: React.RefObject<HTMLDivElement>;\n  flattenedData: TypescriptRow[];\n  allDataFlattened: TypescriptRow[];\n  visibleColumns: TypescriptColumn[];\n  virtualListHelpers?: ReturnType<typeof useVirtual>;\n  layoutHelpers: {\n    totalColumnsWidth?: number | string;\n    gridLayout?: string[];\n    setGridLayout?: React.Dispatch<React.SetStateAction<string[]>>;\n  };\n  paginationHelpers: TypescriptPagination;\n};\n", "import * as React from 'react';\nexport { React };\n"],
+  "sourcesContent": ["/* eslint-disable max-lines */\nimport React, { MutableRefObject } from 'react';\nimport { useVirtual } from 'react-virtual/types';\nimport { ColsLayoutStyle } from '../configs/constants';\n\nexport type TypescriptGenericFunc = (...args: unknown[]) => unknown;\ninterface FilterOptionT {\n  dsId: string;\n  type: string;\n  value: string;\n  label: string;\n}\n\nexport type TypescriptColumn = {\n  id?: string;\n  Header: string | React.ComponentType<any>;\n  accessor?: string;\n  filter?: string;\n  filterOptions?: FilterOptionT[] | (() => FilterOptionT[]);\n  filterMinWidth?: number | string;\n  Filter?: React.ComponentType<FilterProps>;\n  Cell?: React.ComponentType<any>;\n  editable?: string | TypescriptGenericFunc;\n  disableDnD?: boolean;\n  width?: number;\n  minWidth?: number;\n  maxWidth?: number;\n  padding?: number;\n  columns?: TypescriptColumn[];\n  canSort?: boolean;\n  isSortedDesc?: boolean;\n  canResize?: boolean;\n  isFocuseable?: boolean;\n  textWrap?: 'wrap' | 'wrap-all' | 'truncate';\n  ref?: React.MutableRefObject<HTMLTableColElement>;\n  required?: boolean;\n  alwaysDisplayEditIcon?: boolean;\n};\n\nexport type TypescriptRow = {\n  [key: string]: any;\n  subRows: TypescriptRow[];\n  tableRowDetails: React.ComponentType<any>;\n  dimsumHeaderValue: string;\n};\n\nexport type RowVariant = 'ds-header-group-row' | 'ds-primary-row' | 'ds-secondary-row';\n\nexport type TypescriptRenderRowActionsConfig = {\n  columnWidth: number;\n  renderer: (...args: any[]) => JSX.Element;\n};\n\nexport type TypescriptRenderRowActions = false | TypescriptRenderRowActionsConfig;\n\nexport type TypescriptAppliedFilter = {\n  id: string;\n  type: string;\n  value: any;\n};\n\nexport type TypescriptPagination = {\n  page?: any[];\n  pageIndex?: number;\n  canPreviousPage?: boolean;\n  canNextPage?: boolean;\n  pageSize?: number;\n  showPerPageSelector?: boolean;\n  perPageOptions?: number[];\n  perPageStep?: number;\n  minPerPage?: number;\n  maxPerPage?: number;\n  onPageSizeChange?: (pageSize: number) => void;\n  onPreviousPage?: () => void;\n  onNextPage?: () => void;\n  onPageChange?: (page: number) => void;\n  pageCount?: number;\n  pageDetails?: string[];\n  pageDetailsTitle?: string;\n};\n\nexport type TypescriptSortBy = {\n  id: string;\n  desc: boolean;\n};\n\nexport type TypescriptSelectionItem = true | 'mixed' | false;\n\nexport type TypescriptSelection = Record<string | number, TypescriptSelectionItem>;\n\nexport type UniqueRowAccessorType = string | string[] | ((row: TypescriptRow) => string);\n\nexport interface ReduxHeader {\n  hideFilterMenu: boolean;\n  hideFilterButton: boolean;\n  showDnDHandle: boolean;\n  withTabStops: boolean;\n}\n\nexport type TypescriptProps = {\n  columns: TypescriptColumn[];\n  data: TypescriptRow[];\n  height?: string;\n  width?: string;\n  renderRowActions?: TypescriptRenderRowActions;\n  getRowVariant?: (\n    row: TypescriptRow,\n    defaultCellsRenderer: React.ComponentType<any>,\n  ) => RowVariant | React.ComponentType<any>;\n  isExpandable?: boolean;\n  uniqueRowAccessor?: UniqueRowAccessorType;\n  disabledRows?: Record<string, boolean>;\n  expandedRows?: Record<string, boolean>;\n  cellRendererProps?: Record<string, any>;\n  noSelectionColumn?: boolean;\n  selectSingle?: boolean;\n  selection?: TypescriptSelection;\n  groupedRowsRenderHeader?: TypescriptGenericFunc | string;\n  isResizeable?: boolean;\n  withFilterBar?: boolean;\n  filters?: { id: string; type: string; value: any }[];\n  filterBarProps?: {\n    customPillRenderer?: React.ComponentType<any>;\n    extraOptions?: { type: string; id: string; label: string; onClick?: TypescriptGenericFunc }[];\n  };\n  actionRef: React.RefObject<any>;\n  pagination?: false | TypescriptPagination;\n  colsLayoutStyle: ColsLayoutStyle;\n  hiddenColumns: string[];\n  dragAndDropRows?: boolean;\n  maxDragAndDropLevel?: number;\n  textWrap?: 'wrap' | 'wrap-all' | 'truncate';\n  customSortLogic?: boolean;\n  noResultsMessage?: string;\n  noResultsSecondaryMessage?: string;\n  noResultsButtonLabel?: string;\n  isLoading?: boolean;\n  isLoadingAppended?: boolean;\n  dragAndDropColumns?: boolean;\n  onColumnsReorder?: (newData: any[], indexes: { targetIndex: number; fromIndex: number }) => void;\n  onColumnResize?: (headerId: string, width: number) => void;\n  isNoMoreDataAppended?: boolean;\n  noMoreDataMessage?: string;\n  noResultsPlaceholder?: TypescriptGenericFunc;\n  onRowExpand?: (expandedRows: Record<string, boolean>, toggledRow: string) => void;\n  onRowsReorder?: (\n    newData: any[],\n    indexes: { targetIndex: number; fromIndex: number },\n    considerExpanding: string,\n  ) => void;\n  onRowClick?: TypescriptGenericFunc;\n  onRowFocus?: TypescriptGenericFunc;\n  onCellValueChange: (cellChange: { value: any; property: any; rowIndex: number }) => void;\n  onSelectionChange?: (newSelection: TypescriptSelection) => void;\n  onFiltersChange?: TypescriptGenericFunc;\n  onFilteredDataChange?: TypescriptGenericFunc;\n  onPageChanged?: TypescriptGenericFunc;\n  onNoResultsButtonClick?: TypescriptGenericFunc;\n  onColumnSortChange: (newSortRequest: { column: any; direction: any }) => void;\n};\n\nexport interface FilterProps {\n  column: TypescriptColumn;\n  ctx: TypescriptContext;\n  onFiltersChange?: (filters: { id: string; type: string; value: any }[]) => void;\n  onValueChange: (type: string, value: any) => void;\n  patchHeaderFilterButtonAndMenu: (headerId: string, newState: any) => void;\n  patchHeader: (headerId: string, newHeader: any) => void;\n  filterValue?: any;\n  reduxHeader?: any;\n  innerRef: MutableRefObject<HTMLDivElement>;\n}\n\nexport type TypescriptContext = {\n  tableProps: Partial<TypescriptProps>;\n  virtualListRef: React.RefObject<HTMLDivElement>;\n  columnHeaderRef: React.RefObject<HTMLDivElement>;\n  flattenedData: TypescriptRow[];\n  allDataFlattened: TypescriptRow[];\n  visibleColumns: TypescriptColumn[];\n  virtualListHelpers?: ReturnType<typeof useVirtual>;\n  layoutHelpers: {\n    totalColumnsWidth?: number | string;\n    gridLayout?: string[];\n    setGridLayout?: React.Dispatch<React.SetStateAction<string[]>>;\n  };\n  paginationHelpers: TypescriptPagination;\n  drilldownRowId: string | null;\n  setDrilldownRowId: React.Dispatch<React.SetStateAction<string | null>>;\n  focusedRowId: string | null;\n  setFocusedRowId: React.Dispatch<React.SetStateAction<string | null>>;\n  reduxHeaders: Record<string, ReduxHeader>;\n  patchHeader: (headerId: string, newHeader: ReduxHeader) => void;\n  patchHeaderFilterButtonAndMenu: (headerId: string, value: boolean) => void;\n};\n", "import * as React from 'react';\nexport { React };\n"],
   "mappings": ";;;;;;;;;;;;;;;;AAAA;AAAA;ACAA,YAAuB;",
   "names": []
 }

package/dist/esm/DataTable.js

@@ -15,12 +15,9 @@ var __spreadValues = (a, b) => {
   return a;
 };
 import * as React from "react";
-import React2, { useRef, useMemo } from "react";
-import { Provider } from "react-redux";
-import { configureStore } from "@reduxjs/toolkit";
+import React2, { useRef } from "react";
 import { describe } from "@elliemae/ds-utilities";
 import { TableContent } from "./parts/TableContent";
-import { storeConfig } from "./redux/storeConfig";
 import { DataTableContext, defaultProps } from "./DataTableContext";
 import { DATA_TESTID } from "./configs/constants";
 import { useDatatableConfig } from "./configs/useDatatableConfig";
@@ -29,16 +26,13 @@ import { DataTableSchema } from "./DataTableSchema";
 import { StyledDataTableWrapper } from "./styled";
 const DataTable = (props) => {
   const { withFilterBar } = props;
-  const reduxStore = useMemo(() => configureStore(storeConfig), []);
   const tableWrapperRef = useRef();
   const tableContentWrapperRef = useRef();
   const ctx = useDatatableConfig(props);
   const {
     tableProps: { height, width }
   } = ctx;
-  return /* @__PURE__ */ React2.createElement(Provider, {
-    store: reduxStore
-  }, /* @__PURE__ */ React2.createElement(DataTableContext.Provider, {
+  return /* @__PURE__ */ React2.createElement(DataTableContext.Provider, {
     value: ctx
   }, /* @__PURE__ */ React2.createElement(StyledDataTableWrapper, {
     ref: tableWrapperRef,
@@ -47,7 +41,7 @@ const DataTable = (props) => {
     width
   }, withFilterBar ? /* @__PURE__ */ React2.createElement(FiltersBar, null) : null, /* @__PURE__ */ React2.createElement(TableContent, {
     ref: tableContentWrapperRef
-  }))));
+  })));
 };
 DataTable.propTypes = DataTableSchema;
 DataTable.defaultProps = __spreadValues({}, defaultProps);

package/dist/esm/DataTable.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../scripts/build/transpile/react-shim.js", "../../src/DataTable.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { useRef, useMemo } from 'react';\nimport { Provider } from 'react-redux';\nimport { configureStore } from '@reduxjs/toolkit';\nimport { describe } from '@elliemae/ds-utilities';\n\nimport { TableContent } from './parts/TableContent';\n\nimport { TypescriptProps } from './types/props';\nimport { storeConfig } from './redux/storeConfig';\n\nimport { DataTableContext, defaultProps } from './DataTableContext';\nimport { DATA_TESTID } from './configs/constants';\nimport { useDatatableConfig } from './configs/useDatatableConfig';\nimport { FiltersBar } from './parts/FilterBar/FiltersBar';\nimport { DataTableSchema } from './DataTableSchema';\nimport { StyledDataTableWrapper } from './styled';\n\nexport const DataTable = (props: TypescriptProps): JSX.Element => {\n  const { withFilterBar } = props;\n  const reduxStore = useMemo(() => configureStore(storeConfig), []);\n\n  const tableWrapperRef = useRef();\n  const tableContentWrapperRef = useRef();\n\n  const ctx = useDatatableConfig(props);\n\n  const {\n    tableProps: { height, width },\n  } = ctx;\n\n  return (\n    <Provider store={reduxStore}>\n      <DataTableContext.Provider value={ctx}>\n        <StyledDataTableWrapper\n          ref={tableWrapperRef}\n          data-testid={DATA_TESTID.DATA_TABLE_WRAPPER}\n          height={height}\n          width={width}\n        >\n          {withFilterBar ? <FiltersBar /> : null}\n          <TableContent ref={tableContentWrapperRef} />\n        </StyledDataTableWrapper>\n      </DataTableContext.Provider>\n    </Provider>\n  );\n};\n\nDataTable.propTypes = DataTableSchema;\nDataTable.defaultProps = { ...defaultProps };\n\nexport const DataTableWithSchema = describe(DataTable).description('Data Table');\nDataTableWithSchema.propTypes = DataTableSchema;\n"],
-  "mappings": ";;;;;;;;;;;;;;;;AAAA;ACAA;AACA;AACA;AACA;AAEA;AAGA;AAEA;AACA;AACA;AACA;AACA;AACA;AAEO,MAAM,YAAY,CAAC,UAAwC;AAChE,QAAM,EAAE,kBAAkB;AAC1B,QAAM,aAAa,QAAQ,MAAM,eAAe,WAAW,GAAG,CAAC,CAAC;AAEhE,QAAM,kBAAkB,OAAO;AAC/B,QAAM,yBAAyB,OAAO;AAEtC,QAAM,MAAM,mBAAmB,KAAK;AAEpC,QAAM;AAAA,IACJ,YAAY,EAAE,QAAQ;AAAA,MACpB;AAEJ,SACE,qCAAC;AAAA,IAAS,OAAO;AAAA,KACf,qCAAC,iBAAiB,UAAjB;AAAA,IAA0B,OAAO;AAAA,KAChC,qCAAC;AAAA,IACC,KAAK;AAAA,IACL,eAAa,YAAY;AAAA,IACzB;AAAA,IACA;AAAA,KAEC,gBAAgB,qCAAC,gBAAW,IAAK,MAClC,qCAAC;AAAA,IAAa,KAAK;AAAA,GAAwB,CAC7C,CACF,CACF;AAEJ;AAEA,UAAU,YAAY;AACtB,UAAU,eAAe,mBAAK;AAEvB,MAAM,sBAAsB,SAAS,SAAS,EAAE,YAAY,YAAY;AAC/E,oBAAoB,YAAY;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { useRef } from 'react';\nimport { describe } from '@elliemae/ds-utilities';\nimport { TableContent } from './parts/TableContent';\nimport { TypescriptProps } from './types/props';\nimport { DataTableContext, defaultProps } from './DataTableContext';\nimport { DATA_TESTID } from './configs/constants';\nimport { useDatatableConfig } from './configs/useDatatableConfig';\nimport { FiltersBar } from './parts/FilterBar/FiltersBar';\nimport { DataTableSchema } from './DataTableSchema';\nimport { StyledDataTableWrapper } from './styled';\n\nexport const DataTable = (props: TypescriptProps): JSX.Element => {\n  const { withFilterBar } = props;\n\n  const tableWrapperRef = useRef();\n  const tableContentWrapperRef = useRef();\n\n  const ctx = useDatatableConfig(props);\n\n  const {\n    tableProps: { height, width },\n  } = ctx;\n\n  return (\n    <DataTableContext.Provider value={ctx}>\n      <StyledDataTableWrapper\n        ref={tableWrapperRef}\n        data-testid={DATA_TESTID.DATA_TABLE_WRAPPER}\n        height={height}\n        width={width}\n      >\n        {withFilterBar ? <FiltersBar /> : null}\n        <TableContent ref={tableContentWrapperRef} />\n      </StyledDataTableWrapper>\n    </DataTableContext.Provider>\n  );\n};\n\nDataTable.propTypes = DataTableSchema;\nDataTable.defaultProps = { ...defaultProps };\n\nexport const DataTableWithSchema = describe(DataTable).description('Data Table');\nDataTableWithSchema.propTypes = DataTableSchema;\n"],
+  "mappings": ";;;;;;;;;;;;;;;;AAAA;ACAA;AACA;AACA;AAEA;AACA;AACA;AACA;AACA;AACA;AAEO,MAAM,YAAY,CAAC,UAAwC;AAChE,QAAM,EAAE,kBAAkB;AAE1B,QAAM,kBAAkB,OAAO;AAC/B,QAAM,yBAAyB,OAAO;AAEtC,QAAM,MAAM,mBAAmB,KAAK;AAEpC,QAAM;AAAA,IACJ,YAAY,EAAE,QAAQ;AAAA,MACpB;AAEJ,SACE,qCAAC,iBAAiB,UAAjB;AAAA,IAA0B,OAAO;AAAA,KAChC,qCAAC;AAAA,IACC,KAAK;AAAA,IACL,eAAa,YAAY;AAAA,IACzB;AAAA,IACA;AAAA,KAEC,gBAAgB,qCAAC,gBAAW,IAAK,MAClC,qCAAC;AAAA,IAAa,KAAK;AAAA,GAAwB,CAC7C,CACF;AAEJ;AAEA,UAAU,YAAY;AACtB,UAAU,eAAe,mBAAK;AAEvB,MAAM,sBAAsB,SAAS,SAAS,EAAE,YAAY,YAAY;AAC/E,oBAAoB,YAAY;",
   "names": []
 }

package/dist/esm/addons/Filters/Components/CurrencyRangeFilter/index.js

@@ -18,14 +18,14 @@ var __spreadValues = (a, b) => {
 };
 var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
 import * as React from "react";
-import React2 from "react";
+import React2, { useContext } from "react";
 import { Grid } from "@elliemae/ds-grid";
 import { DSInputMask, MASK_TYPES } from "@elliemae/ds-form";
 import { DSFormLayoutBlockItem } from "@elliemae/ds-form-layout-blocks";
 import { SearchXsmall } from "@elliemae/ds-icons";
 import { FilterPopover, FILTER_TYPES } from "../../../../exported-related";
 import { DATA_TESTID } from "../../../../configs/constants";
-import { useDispatchHeadersActions } from "../../../../redux/reducers/headersReducers";
+import DataTableContext from "../../../../DataTableContext";
 const opts = {
   prefix: "",
   suffix: "",
@@ -37,6 +37,7 @@ const opts = {
 };
 const CurrencyRangeFilter = (props) => {
   const { column, filterValue = { from: null, to: null }, reduxHeader, onValueChange, innerRef } = props;
+  const { patchHeader } = useContext(DataTableContext);
   const handleFromChange = (e) => {
     const nextValue = __spreadProps(__spreadValues({}, filterValue), {
       from: e.target.value
@@ -49,7 +50,6 @@ const CurrencyRangeFilter = (props) => {
     });
     onValueChange(FILTER_TYPES.CURRENCY_RANGE, nextValue);
   };
-  const { patchHeader } = useDispatchHeadersActions();
   const closePopover = (e) => {
     if (e.code === "Escape") {
       patchHeader(column.id, { hideFilterMenu: true, hideFilterButton: false });

package/dist/esm/addons/Filters/Components/CurrencyRangeFilter/index.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../../scripts/build/transpile/react-shim.js", "../../../../../../src/addons/Filters/Components/CurrencyRangeFilter/index.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable react/prop-types */\nimport React from 'react';\nimport { Grid } from '@elliemae/ds-grid';\nimport { DSInputMask, MASK_TYPES } from '@elliemae/ds-form';\nimport { DSFormLayoutBlockItem } from '@elliemae/ds-form-layout-blocks';\nimport { SearchXsmall } from '@elliemae/ds-icons';\nimport { FilterPopover, FILTER_TYPES } from '../../../../exported-related';\nimport { FilterProps } from '../../../../types/props';\nimport { DATA_TESTID } from '../../../../configs/constants';\nimport { useDispatchHeadersActions } from '../../../../redux/reducers/headersReducers';\n\nconst opts = {\n  prefix: '',\n  suffix: '',\n  allowDecimal: true,\n  decimalLimit: 2,\n  includeThousandsSeparator: false,\n  requireDecimal: true,\n  allowNegative: true,\n};\n\nexport const CurrencyRangeFilter: React.ComponentType<FilterProps> = (props) => {\n  const { column, filterValue = { from: null, to: null }, reduxHeader, onValueChange, innerRef } = props;\n  const handleFromChange = (e) => {\n    const nextValue = {\n      ...filterValue,\n      from: e.target.value,\n    };\n    onValueChange(FILTER_TYPES.CURRENCY_RANGE, nextValue);\n  };\n  const handleToChange = (e) => {\n    const nextValue = {\n      ...filterValue,\n      to: e.target.value,\n    };\n    onValueChange(FILTER_TYPES.CURRENCY_RANGE, nextValue);\n  };\n  const { patchHeader } = useDispatchHeadersActions();\n\n  // workaround to close menu with esc key since DSInputMask has stoppropagation on key down\n  const closePopover = (e) => {\n    if (e.code === 'Escape') {\n      patchHeader(column.id, { hideFilterMenu: true, hideFilterButton: false });\n      innerRef.current.focus();\n    }\n  };\n\n  const idPreffix = 'datatable-currency-range';\n  return (\n    <FilterPopover\n      reduxHeader={reduxHeader}\n      column={column}\n      columnId={column.id}\n      menuContent={\n        <Grid\n          data-testid={DATA_TESTID.DATA_TABLE_CURRENCY_RANGE_CONTROLLER}\n          gutter=\"xxxs\"\n          padding=\"xxs\"\n          cols={['auto', 'auto']}\n          style={{ background: 'white' }}\n        >\n          <DSFormLayoutBlockItem label=\"Min\" inputID={`${idPreffix}-min-${column.id}`}>\n            <DSInputMask\n              containerProps={{ style: { textAlign: 'right' } }}\n              id={`${idPreffix}-min-${column.id}`}\n              value={`${filterValue?.from ?? ''}`}\n              onChange={handleFromChange}\n              placeholder=\"0.00\"\n              mask={(number) => MASK_TYPES.NUMBER(opts)(number)}\n              autoFocus\n              onKeyDown={(e) => {\n                closePopover(e);\n              }}\n            />\n          </DSFormLayoutBlockItem>\n          <DSFormLayoutBlockItem label=\"Max\" inputID={`${idPreffix}-max-${column.id}`}>\n            <DSInputMask\n              containerProps={{ style: { textAlign: 'right' } }}\n              id={`${idPreffix}-max-${column.id}`}\n              value={`${filterValue?.to ?? ''}`}\n              onChange={handleToChange}\n              placeholder=\"0.00\"\n              mask={(number) => MASK_TYPES.NUMBER(opts)(number)}\n              onKeyDown={(e) => {\n                closePopover(e);\n              }}\n            />\n          </DSFormLayoutBlockItem>\n        </Grid>\n      }\n      triggerIcon={<SearchXsmall />}\n      customStyles={{ width: column.ref?.current?.offsetWidth ?? '0px' }}\n      innerRef={innerRef}\n      ariaLabel=\"Open Currency Range Filter\"\n    />\n  );\n};\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;AAAA;ACCA;AACA;AACA;AACA;AACA;AACA;AAEA;AACA;AAEA,MAAM,OAAO;AAAA,EACX,QAAQ;AAAA,EACR,QAAQ;AAAA,EACR,cAAc;AAAA,EACd,cAAc;AAAA,EACd,2BAA2B;AAAA,EAC3B,gBAAgB;AAAA,EAChB,eAAe;AACjB;AAEO,MAAM,sBAAwD,CAAC,UAAU;AAC9E,QAAM,EAAE,QAAQ,cAAc,EAAE,MAAM,MAAM,IAAI,KAAK,GAAG,aAAa,eAAe,aAAa;AACjG,QAAM,mBAAmB,CAAC,MAAM;AAC9B,UAAM,YAAY,iCACb,cADa;AAAA,MAEhB,MAAM,EAAE,OAAO;AAAA,IACjB;AACA,kBAAc,aAAa,gBAAgB,SAAS;AAAA,EACtD;AACA,QAAM,iBAAiB,CAAC,MAAM;AAC5B,UAAM,YAAY,iCACb,cADa;AAAA,MAEhB,IAAI,EAAE,OAAO;AAAA,IACf;AACA,kBAAc,aAAa,gBAAgB,SAAS;AAAA,EACtD;AACA,QAAM,EAAE,gBAAgB,0BAA0B;AAGlD,QAAM,eAAe,CAAC,MAAM;AAC1B,QAAI,EAAE,SAAS,UAAU;AACvB,kBAAY,OAAO,IAAI,EAAE,gBAAgB,MAAM,kBAAkB,MAAM,CAAC;AACxE,eAAS,QAAQ,MAAM;AAAA,IACzB;AAAA,EACF;AAEA,QAAM,YAAY;AAClB,SACE,qCAAC;AAAA,IACC;AAAA,IACA;AAAA,IACA,UAAU,OAAO;AAAA,IACjB,aACE,qCAAC;AAAA,MACC,eAAa,YAAY;AAAA,MACzB,QAAO;AAAA,MACP,SAAQ;AAAA,MACR,MAAM,CAAC,QAAQ,MAAM;AAAA,MACrB,OAAO,EAAE,YAAY,QAAQ;AAAA,OAE7B,qCAAC;AAAA,MAAsB,OAAM;AAAA,MAAM,SAAS,GAAG,iBAAiB,OAAO;AAAA,OACrE,qCAAC;AAAA,MACC,gBAAgB,EAAE,OAAO,EAAE,WAAW,QAAQ,EAAE;AAAA,MAChD,IAAI,GAAG,iBAAiB,OAAO;AAAA,MAC/B,OAAO,GAAG,aAAa,QAAQ;AAAA,MAC/B,UAAU;AAAA,MACV,aAAY;AAAA,MACZ,MAAM,CAAC,WAAW,WAAW,OAAO,IAAI,EAAE,MAAM;AAAA,MAChD,WAAS;AAAA,MACT,WAAW,CAAC,MAAM;AAChB,qBAAa,CAAC;AAAA,MAChB;AAAA,KACF,CACF,GACA,qCAAC;AAAA,MAAsB,OAAM;AAAA,MAAM,SAAS,GAAG,iBAAiB,OAAO;AAAA,OACrE,qCAAC;AAAA,MACC,gBAAgB,EAAE,OAAO,EAAE,WAAW,QAAQ,EAAE;AAAA,MAChD,IAAI,GAAG,iBAAiB,OAAO;AAAA,MAC/B,OAAO,GAAG,aAAa,MAAM;AAAA,MAC7B,UAAU;AAAA,MACV,aAAY;AAAA,MACZ,MAAM,CAAC,WAAW,WAAW,OAAO,IAAI,EAAE,MAAM;AAAA,MAChD,WAAW,CAAC,MAAM;AAChB,qBAAa,CAAC;AAAA,MAChB;AAAA,KACF,CACF,CACF;AAAA,IAEF,aAAa,qCAAC,kBAAa;AAAA,IAC3B,cAAc,EAAE,OAAO,OAAO,KAAK,SAAS,eAAe,MAAM;AAAA,IACjE;AAAA,IACA,WAAU;AAAA,GACZ;AAEJ;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable react/prop-types */\nimport React, { useContext } from 'react';\nimport { Grid } from '@elliemae/ds-grid';\nimport { DSInputMask, MASK_TYPES } from '@elliemae/ds-form';\nimport { DSFormLayoutBlockItem } from '@elliemae/ds-form-layout-blocks';\nimport { SearchXsmall } from '@elliemae/ds-icons';\nimport { FilterPopover, FILTER_TYPES } from '../../../../exported-related';\nimport { FilterProps } from '../../../../types/props';\nimport { DATA_TESTID } from '../../../../configs/constants';\nimport DataTableContext from '../../../../DataTableContext';\n\nconst opts = {\n  prefix: '',\n  suffix: '',\n  allowDecimal: true,\n  decimalLimit: 2,\n  includeThousandsSeparator: false,\n  requireDecimal: true,\n  allowNegative: true,\n};\n\nexport const CurrencyRangeFilter: React.ComponentType<FilterProps> = (props) => {\n  const { column, filterValue = { from: null, to: null }, reduxHeader, onValueChange, innerRef } = props;\n\n  const { patchHeader } = useContext(DataTableContext);\n\n  const handleFromChange = (e) => {\n    const nextValue = {\n      ...filterValue,\n      from: e.target.value,\n    };\n    onValueChange(FILTER_TYPES.CURRENCY_RANGE, nextValue);\n  };\n  const handleToChange = (e) => {\n    const nextValue = {\n      ...filterValue,\n      to: e.target.value,\n    };\n    onValueChange(FILTER_TYPES.CURRENCY_RANGE, nextValue);\n  };\n\n  // workaround to close menu with esc key since DSInputMask has stoppropagation on key down\n  const closePopover = (e) => {\n    if (e.code === 'Escape') {\n      patchHeader(column.id, { hideFilterMenu: true, hideFilterButton: false });\n      innerRef.current.focus();\n    }\n  };\n\n  const idPreffix = 'datatable-currency-range';\n  return (\n    <FilterPopover\n      reduxHeader={reduxHeader}\n      column={column}\n      columnId={column.id}\n      menuContent={\n        <Grid\n          data-testid={DATA_TESTID.DATA_TABLE_CURRENCY_RANGE_CONTROLLER}\n          gutter=\"xxxs\"\n          padding=\"xxs\"\n          cols={['auto', 'auto']}\n          style={{ background: 'white' }}\n        >\n          <DSFormLayoutBlockItem label=\"Min\" inputID={`${idPreffix}-min-${column.id}`}>\n            <DSInputMask\n              containerProps={{ style: { textAlign: 'right' } }}\n              id={`${idPreffix}-min-${column.id}`}\n              value={`${filterValue?.from ?? ''}`}\n              onChange={handleFromChange}\n              placeholder=\"0.00\"\n              mask={(number) => MASK_TYPES.NUMBER(opts)(number)}\n              autoFocus\n              onKeyDown={(e) => {\n                closePopover(e);\n              }}\n            />\n          </DSFormLayoutBlockItem>\n          <DSFormLayoutBlockItem label=\"Max\" inputID={`${idPreffix}-max-${column.id}`}>\n            <DSInputMask\n              containerProps={{ style: { textAlign: 'right' } }}\n              id={`${idPreffix}-max-${column.id}`}\n              value={`${filterValue?.to ?? ''}`}\n              onChange={handleToChange}\n              placeholder=\"0.00\"\n              mask={(number) => MASK_TYPES.NUMBER(opts)(number)}\n              onKeyDown={(e) => {\n                closePopover(e);\n              }}\n            />\n          </DSFormLayoutBlockItem>\n        </Grid>\n      }\n      triggerIcon={<SearchXsmall />}\n      customStyles={{ width: column.ref?.current?.offsetWidth ?? '0px' }}\n      innerRef={innerRef}\n      ariaLabel=\"Open Currency Range Filter\"\n    />\n  );\n};\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;AAAA;ACCA;AACA;AACA;AACA;AACA;AACA;AAEA;AACA;AAEA,MAAM,OAAO;AAAA,EACX,QAAQ;AAAA,EACR,QAAQ;AAAA,EACR,cAAc;AAAA,EACd,cAAc;AAAA,EACd,2BAA2B;AAAA,EAC3B,gBAAgB;AAAA,EAChB,eAAe;AACjB;AAEO,MAAM,sBAAwD,CAAC,UAAU;AAC9E,QAAM,EAAE,QAAQ,cAAc,EAAE,MAAM,MAAM,IAAI,KAAK,GAAG,aAAa,eAAe,aAAa;AAEjG,QAAM,EAAE,gBAAgB,WAAW,gBAAgB;AAEnD,QAAM,mBAAmB,CAAC,MAAM;AAC9B,UAAM,YAAY,iCACb,cADa;AAAA,MAEhB,MAAM,EAAE,OAAO;AAAA,IACjB;AACA,kBAAc,aAAa,gBAAgB,SAAS;AAAA,EACtD;AACA,QAAM,iBAAiB,CAAC,MAAM;AAC5B,UAAM,YAAY,iCACb,cADa;AAAA,MAEhB,IAAI,EAAE,OAAO;AAAA,IACf;AACA,kBAAc,aAAa,gBAAgB,SAAS;AAAA,EACtD;AAGA,QAAM,eAAe,CAAC,MAAM;AAC1B,QAAI,EAAE,SAAS,UAAU;AACvB,kBAAY,OAAO,IAAI,EAAE,gBAAgB,MAAM,kBAAkB,MAAM,CAAC;AACxE,eAAS,QAAQ,MAAM;AAAA,IACzB;AAAA,EACF;AAEA,QAAM,YAAY;AAClB,SACE,qCAAC;AAAA,IACC;AAAA,IACA;AAAA,IACA,UAAU,OAAO;AAAA,IACjB,aACE,qCAAC;AAAA,MACC,eAAa,YAAY;AAAA,MACzB,QAAO;AAAA,MACP,SAAQ;AAAA,MACR,MAAM,CAAC,QAAQ,MAAM;AAAA,MACrB,OAAO,EAAE,YAAY,QAAQ;AAAA,OAE7B,qCAAC;AAAA,MAAsB,OAAM;AAAA,MAAM,SAAS,GAAG,iBAAiB,OAAO;AAAA,OACrE,qCAAC;AAAA,MACC,gBAAgB,EAAE,OAAO,EAAE,WAAW,QAAQ,EAAE;AAAA,MAChD,IAAI,GAAG,iBAAiB,OAAO;AAAA,MAC/B,OAAO,GAAG,aAAa,QAAQ;AAAA,MAC/B,UAAU;AAAA,MACV,aAAY;AAAA,MACZ,MAAM,CAAC,WAAW,WAAW,OAAO,IAAI,EAAE,MAAM;AAAA,MAChD,WAAS;AAAA,MACT,WAAW,CAAC,MAAM;AAChB,qBAAa,CAAC;AAAA,MAChB;AAAA,KACF,CACF,GACA,qCAAC;AAAA,MAAsB,OAAM;AAAA,MAAM,SAAS,GAAG,iBAAiB,OAAO;AAAA,OACrE,qCAAC;AAAA,MACC,gBAAgB,EAAE,OAAO,EAAE,WAAW,QAAQ,EAAE;AAAA,MAChD,IAAI,GAAG,iBAAiB,OAAO;AAAA,MAC/B,OAAO,GAAG,aAAa,MAAM;AAAA,MAC7B,UAAU;AAAA,MACV,aAAY;AAAA,MACZ,MAAM,CAAC,WAAW,WAAW,OAAO,IAAI,EAAE,MAAM;AAAA,MAChD,WAAW,CAAC,MAAM;AAChB,qBAAa,CAAC;AAAA,MAChB;AAAA,KACF,CACF,CACF;AAAA,IAEF,aAAa,qCAAC,kBAAa;AAAA,IAC3B,cAAc,EAAE,OAAO,OAAO,KAAK,SAAS,eAAe,MAAM;AAAA,IACjE;AAAA,IACA,WAAU;AAAA,GACZ;AAEJ;",
   "names": []
 }

package/dist/esm/addons/Filters/Components/NumberRangeFilter/index.js

@@ -18,14 +18,14 @@ var __spreadValues = (a, b) => {
 };
 var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
 import * as React from "react";
-import React2 from "react";
+import React2, { useContext } from "react";
 import { Grid } from "@elliemae/ds-grid";
 import { DSInputMask, MASK_TYPES } from "@elliemae/ds-form";
 import { DSFormLayoutBlockItem } from "@elliemae/ds-form-layout-blocks";
 import { SearchXsmall } from "@elliemae/ds-icons";
 import { FilterPopover, FILTER_TYPES } from "../../../../exported-related";
 import { DATA_TESTID } from "../../../../configs/constants";
-import { useDispatchHeadersActions } from "../../../../redux/reducers/headersReducers";
+import DataTableContext from "../../../../DataTableContext";
 const opts = {
   prefix: "",
   suffix: "",
@@ -36,6 +36,7 @@ const opts = {
 };
 const NumberRangeFilter = (props) => {
   const { column, filterValue = { from: null, to: null }, reduxHeader, onValueChange, innerRef } = props;
+  const { patchHeader } = useContext(DataTableContext);
   const handleFromChange = (e) => {
     const from = e.target.value !== "" ? parseInt(e.target.value, 10) : "";
     const nextValue = __spreadProps(__spreadValues({}, filterValue), {
@@ -50,7 +51,6 @@ const NumberRangeFilter = (props) => {
     });
     onValueChange(FILTER_TYPES.CURRENCY_RANGE, nextValue);
   };
-  const { patchHeader } = useDispatchHeadersActions();
   const closePopover = (e) => {
     if (e.code === "Escape") {
       patchHeader(column.id, { hideFilterMenu: true, hideFilterButton: false });

package/dist/esm/addons/Filters/Components/NumberRangeFilter/index.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../../scripts/build/transpile/react-shim.js", "../../../../../../src/addons/Filters/Components/NumberRangeFilter/index.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable react/prop-types */\nimport React from 'react';\nimport { Grid } from '@elliemae/ds-grid';\nimport { DSInputMask, MASK_TYPES } from '@elliemae/ds-form';\nimport { DSFormLayoutBlockItem } from '@elliemae/ds-form-layout-blocks';\nimport { SearchXsmall } from '@elliemae/ds-icons';\nimport { FilterPopover, FILTER_TYPES } from '../../../../exported-related';\nimport { FilterProps } from '../../../../types/props';\nimport { DATA_TESTID } from '../../../../configs/constants';\nimport { useDispatchHeadersActions } from '../../../../redux/reducers/headersReducers';\n\nconst opts = {\n  prefix: '',\n  suffix: '',\n  allowDecimal: false,\n  includeThousandsSeparator: false,\n  requireDecimal: false,\n  allowNegative: true,\n};\n\nexport const NumberRangeFilter: React.ComponentType<FilterProps> = (props) => {\n  const { column, filterValue = { from: null, to: null }, reduxHeader, onValueChange, innerRef } = props;\n  const handleFromChange = (e) => {\n    const from = e.target.value !== '' ? parseInt(e.target.value, 10) : '';\n    const nextValue = {\n      ...filterValue,\n      from,\n    };\n    onValueChange(FILTER_TYPES.CURRENCY_RANGE, nextValue);\n  };\n  const handleToChange = (e) => {\n    const to = e.target.value !== '' ? parseInt(e.target.value, 10) : '';\n    const nextValue = {\n      ...filterValue,\n      to,\n    };\n    onValueChange(FILTER_TYPES.CURRENCY_RANGE, nextValue);\n  };\n  const { patchHeader } = useDispatchHeadersActions();\n\n  // workaround to close menu with esc key since DSInputMask has stoppropagation on key down\n  const closePopover = (e) => {\n    if (e.code === 'Escape') {\n      patchHeader(column.id, { hideFilterMenu: true, hideFilterButton: false });\n      innerRef.current.focus();\n    }\n  };\n  const idPreffix = 'datatable-number-range';\n  return (\n    <FilterPopover\n      reduxHeader={reduxHeader}\n      column={column}\n      columnId={column.id}\n      menuContent={\n        <Grid\n          data-testid={DATA_TESTID.DATA_TABLE_NUMBER_RANGE_CONTROLLER}\n          gutter=\"xxxs\"\n          padding=\"xxs\"\n          cols={['auto', 'auto']}\n          style={{ background: 'white' }}\n        >\n          <DSFormLayoutBlockItem label=\"Low\" inputID={`${idPreffix}-low-${column.id}`}>\n            <DSInputMask\n              containerProps={{ style: { textAlign: 'right' } }}\n              id={`${idPreffix}-low-${column.id}`}\n              value={`${filterValue?.from ?? ''}`}\n              onChange={handleFromChange}\n              placeholder=\"0\"\n              mask={(number) => MASK_TYPES.NUMBER(opts)(number)}\n              autoFocus\n              onKeyDown={(e) => {\n                closePopover(e);\n              }}\n            />\n          </DSFormLayoutBlockItem>\n          <DSFormLayoutBlockItem label=\"High\" inputID={`${idPreffix}-high-${column.id}`}>\n            <DSInputMask\n              containerProps={{ style: { textAlign: 'right' } }}\n              id={`${idPreffix}-high-${column.id}`}\n              value={`${filterValue?.to ?? ''}`}\n              onChange={handleToChange}\n              placeholder=\"0\"\n              mask={(number) => MASK_TYPES.NUMBER(opts)(number)}\n              onKeyDown={(e) => {\n                closePopover(e);\n              }}\n            />\n          </DSFormLayoutBlockItem>\n        </Grid>\n      }\n      triggerIcon={<SearchXsmall />}\n      customStyles={{ width: column.ref?.current?.offsetWidth ?? '0px' }}\n      innerRef={innerRef}\n      ariaLabel=\"Open Number Range Filter\"\n    />\n  );\n};\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;AAAA;ACCA;AACA;AACA;AACA;AACA;AACA;AAEA;AACA;AAEA,MAAM,OAAO;AAAA,EACX,QAAQ;AAAA,EACR,QAAQ;AAAA,EACR,cAAc;AAAA,EACd,2BAA2B;AAAA,EAC3B,gBAAgB;AAAA,EAChB,eAAe;AACjB;AAEO,MAAM,oBAAsD,CAAC,UAAU;AAC5E,QAAM,EAAE,QAAQ,cAAc,EAAE,MAAM,MAAM,IAAI,KAAK,GAAG,aAAa,eAAe,aAAa;AACjG,QAAM,mBAAmB,CAAC,MAAM;AAC9B,UAAM,OAAO,EAAE,OAAO,UAAU,KAAK,SAAS,EAAE,OAAO,OAAO,EAAE,IAAI;AACpE,UAAM,YAAY,iCACb,cADa;AAAA,MAEhB;AAAA,IACF;AACA,kBAAc,aAAa,gBAAgB,SAAS;AAAA,EACtD;AACA,QAAM,iBAAiB,CAAC,MAAM;AAC5B,UAAM,KAAK,EAAE,OAAO,UAAU,KAAK,SAAS,EAAE,OAAO,OAAO,EAAE,IAAI;AAClE,UAAM,YAAY,iCACb,cADa;AAAA,MAEhB;AAAA,IACF;AACA,kBAAc,aAAa,gBAAgB,SAAS;AAAA,EACtD;AACA,QAAM,EAAE,gBAAgB,0BAA0B;AAGlD,QAAM,eAAe,CAAC,MAAM;AAC1B,QAAI,EAAE,SAAS,UAAU;AACvB,kBAAY,OAAO,IAAI,EAAE,gBAAgB,MAAM,kBAAkB,MAAM,CAAC;AACxE,eAAS,QAAQ,MAAM;AAAA,IACzB;AAAA,EACF;AACA,QAAM,YAAY;AAClB,SACE,qCAAC;AAAA,IACC;AAAA,IACA;AAAA,IACA,UAAU,OAAO;AAAA,IACjB,aACE,qCAAC;AAAA,MACC,eAAa,YAAY;AAAA,MACzB,QAAO;AAAA,MACP,SAAQ;AAAA,MACR,MAAM,CAAC,QAAQ,MAAM;AAAA,MACrB,OAAO,EAAE,YAAY,QAAQ;AAAA,OAE7B,qCAAC;AAAA,MAAsB,OAAM;AAAA,MAAM,SAAS,GAAG,iBAAiB,OAAO;AAAA,OACrE,qCAAC;AAAA,MACC,gBAAgB,EAAE,OAAO,EAAE,WAAW,QAAQ,EAAE;AAAA,MAChD,IAAI,GAAG,iBAAiB,OAAO;AAAA,MAC/B,OAAO,GAAG,aAAa,QAAQ;AAAA,MAC/B,UAAU;AAAA,MACV,aAAY;AAAA,MACZ,MAAM,CAAC,WAAW,WAAW,OAAO,IAAI,EAAE,MAAM;AAAA,MAChD,WAAS;AAAA,MACT,WAAW,CAAC,MAAM;AAChB,qBAAa,CAAC;AAAA,MAChB;AAAA,KACF,CACF,GACA,qCAAC;AAAA,MAAsB,OAAM;AAAA,MAAO,SAAS,GAAG,kBAAkB,OAAO;AAAA,OACvE,qCAAC;AAAA,MACC,gBAAgB,EAAE,OAAO,EAAE,WAAW,QAAQ,EAAE;AAAA,MAChD,IAAI,GAAG,kBAAkB,OAAO;AAAA,MAChC,OAAO,GAAG,aAAa,MAAM;AAAA,MAC7B,UAAU;AAAA,MACV,aAAY;AAAA,MACZ,MAAM,CAAC,WAAW,WAAW,OAAO,IAAI,EAAE,MAAM;AAAA,MAChD,WAAW,CAAC,MAAM;AAChB,qBAAa,CAAC;AAAA,MAChB;AAAA,KACF,CACF,CACF;AAAA,IAEF,aAAa,qCAAC,kBAAa;AAAA,IAC3B,cAAc,EAAE,OAAO,OAAO,KAAK,SAAS,eAAe,MAAM;AAAA,IACjE;AAAA,IACA,WAAU;AAAA,GACZ;AAEJ;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable react/prop-types */\nimport React, { useContext } from 'react';\nimport { Grid } from '@elliemae/ds-grid';\nimport { DSInputMask, MASK_TYPES } from '@elliemae/ds-form';\nimport { DSFormLayoutBlockItem } from '@elliemae/ds-form-layout-blocks';\nimport { SearchXsmall } from '@elliemae/ds-icons';\nimport { FilterPopover, FILTER_TYPES } from '../../../../exported-related';\nimport { FilterProps } from '../../../../types/props';\nimport { DATA_TESTID } from '../../../../configs/constants';\nimport DataTableContext from '../../../../DataTableContext';\n\nconst opts = {\n  prefix: '',\n  suffix: '',\n  allowDecimal: false,\n  includeThousandsSeparator: false,\n  requireDecimal: false,\n  allowNegative: true,\n};\n\nexport const NumberRangeFilter: React.ComponentType<FilterProps> = (props) => {\n  const { column, filterValue = { from: null, to: null }, reduxHeader, onValueChange, innerRef } = props;\n\n  const { patchHeader } = useContext(DataTableContext);\n\n  const handleFromChange = (e) => {\n    const from = e.target.value !== '' ? parseInt(e.target.value, 10) : '';\n    const nextValue = {\n      ...filterValue,\n      from,\n    };\n    onValueChange(FILTER_TYPES.CURRENCY_RANGE, nextValue);\n  };\n  const handleToChange = (e) => {\n    const to = e.target.value !== '' ? parseInt(e.target.value, 10) : '';\n    const nextValue = {\n      ...filterValue,\n      to,\n    };\n    onValueChange(FILTER_TYPES.CURRENCY_RANGE, nextValue);\n  };\n\n  // workaround to close menu with esc key since DSInputMask has stoppropagation on key down\n  const closePopover = (e) => {\n    if (e.code === 'Escape') {\n      patchHeader(column.id, { hideFilterMenu: true, hideFilterButton: false });\n      innerRef.current.focus();\n    }\n  };\n  const idPreffix = 'datatable-number-range';\n  return (\n    <FilterPopover\n      reduxHeader={reduxHeader}\n      column={column}\n      columnId={column.id}\n      menuContent={\n        <Grid\n          data-testid={DATA_TESTID.DATA_TABLE_NUMBER_RANGE_CONTROLLER}\n          gutter=\"xxxs\"\n          padding=\"xxs\"\n          cols={['auto', 'auto']}\n          style={{ background: 'white' }}\n        >\n          <DSFormLayoutBlockItem label=\"Low\" inputID={`${idPreffix}-low-${column.id}`}>\n            <DSInputMask\n              containerProps={{ style: { textAlign: 'right' } }}\n              id={`${idPreffix}-low-${column.id}`}\n              value={`${filterValue?.from ?? ''}`}\n              onChange={handleFromChange}\n              placeholder=\"0\"\n              mask={(number) => MASK_TYPES.NUMBER(opts)(number)}\n              autoFocus\n              onKeyDown={(e) => {\n                closePopover(e);\n              }}\n            />\n          </DSFormLayoutBlockItem>\n          <DSFormLayoutBlockItem label=\"High\" inputID={`${idPreffix}-high-${column.id}`}>\n            <DSInputMask\n              containerProps={{ style: { textAlign: 'right' } }}\n              id={`${idPreffix}-high-${column.id}`}\n              value={`${filterValue?.to ?? ''}`}\n              onChange={handleToChange}\n              placeholder=\"0\"\n              mask={(number) => MASK_TYPES.NUMBER(opts)(number)}\n              onKeyDown={(e) => {\n                closePopover(e);\n              }}\n            />\n          </DSFormLayoutBlockItem>\n        </Grid>\n      }\n      triggerIcon={<SearchXsmall />}\n      customStyles={{ width: column.ref?.current?.offsetWidth ?? '0px' }}\n      innerRef={innerRef}\n      ariaLabel=\"Open Number Range Filter\"\n    />\n  );\n};\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;AAAA;ACCA;AACA;AACA;AACA;AACA;AACA;AAEA;AACA;AAEA,MAAM,OAAO;AAAA,EACX,QAAQ;AAAA,EACR,QAAQ;AAAA,EACR,cAAc;AAAA,EACd,2BAA2B;AAAA,EAC3B,gBAAgB;AAAA,EAChB,eAAe;AACjB;AAEO,MAAM,oBAAsD,CAAC,UAAU;AAC5E,QAAM,EAAE,QAAQ,cAAc,EAAE,MAAM,MAAM,IAAI,KAAK,GAAG,aAAa,eAAe,aAAa;AAEjG,QAAM,EAAE,gBAAgB,WAAW,gBAAgB;AAEnD,QAAM,mBAAmB,CAAC,MAAM;AAC9B,UAAM,OAAO,EAAE,OAAO,UAAU,KAAK,SAAS,EAAE,OAAO,OAAO,EAAE,IAAI;AACpE,UAAM,YAAY,iCACb,cADa;AAAA,MAEhB;AAAA,IACF;AACA,kBAAc,aAAa,gBAAgB,SAAS;AAAA,EACtD;AACA,QAAM,iBAAiB,CAAC,MAAM;AAC5B,UAAM,KAAK,EAAE,OAAO,UAAU,KAAK,SAAS,EAAE,OAAO,OAAO,EAAE,IAAI;AAClE,UAAM,YAAY,iCACb,cADa;AAAA,MAEhB;AAAA,IACF;AACA,kBAAc,aAAa,gBAAgB,SAAS;AAAA,EACtD;AAGA,QAAM,eAAe,CAAC,MAAM;AAC1B,QAAI,EAAE,SAAS,UAAU;AACvB,kBAAY,OAAO,IAAI,EAAE,gBAAgB,MAAM,kBAAkB,MAAM,CAAC;AACxE,eAAS,QAAQ,MAAM;AAAA,IACzB;AAAA,EACF;AACA,QAAM,YAAY;AAClB,SACE,qCAAC;AAAA,IACC;AAAA,IACA;AAAA,IACA,UAAU,OAAO;AAAA,IACjB,aACE,qCAAC;AAAA,MACC,eAAa,YAAY;AAAA,MACzB,QAAO;AAAA,MACP,SAAQ;AAAA,MACR,MAAM,CAAC,QAAQ,MAAM;AAAA,MACrB,OAAO,EAAE,YAAY,QAAQ;AAAA,OAE7B,qCAAC;AAAA,MAAsB,OAAM;AAAA,MAAM,SAAS,GAAG,iBAAiB,OAAO;AAAA,OACrE,qCAAC;AAAA,MACC,gBAAgB,EAAE,OAAO,EAAE,WAAW,QAAQ,EAAE;AAAA,MAChD,IAAI,GAAG,iBAAiB,OAAO;AAAA,MAC/B,OAAO,GAAG,aAAa,QAAQ;AAAA,MAC/B,UAAU;AAAA,MACV,aAAY;AAAA,MACZ,MAAM,CAAC,WAAW,WAAW,OAAO,IAAI,EAAE,MAAM;AAAA,MAChD,WAAS;AAAA,MACT,WAAW,CAAC,MAAM;AAChB,qBAAa,CAAC;AAAA,MAChB;AAAA,KACF,CACF,GACA,qCAAC;AAAA,MAAsB,OAAM;AAAA,MAAO,SAAS,GAAG,kBAAkB,OAAO;AAAA,OACvE,qCAAC;AAAA,MACC,gBAAgB,EAAE,OAAO,EAAE,WAAW,QAAQ,EAAE;AAAA,MAChD,IAAI,GAAG,kBAAkB,OAAO;AAAA,MAChC,OAAO,GAAG,aAAa,MAAM;AAAA,MAC7B,UAAU;AAAA,MACV,aAAY;AAAA,MACZ,MAAM,CAAC,WAAW,WAAW,OAAO,IAAI,EAAE,MAAM;AAAA,MAChD,WAAW,CAAC,MAAM;AAChB,qBAAa,CAAC;AAAA,MAChB;AAAA,KACF,CACF,CACF;AAAA,IAEF,aAAa,qCAAC,kBAAa;AAAA,IAC3B,cAAc,EAAE,OAAO,OAAO,KAAK,SAAS,eAAe,MAAM;AAAA,IACjE;AAAA,IACA,WAAU;AAAA,GACZ;AAEJ;",
   "names": []
 }

package/dist/esm/addons/Filters/Components/SelectFilter/BaseSelectFilter.js

@@ -1,11 +1,11 @@
 import * as React from "react";
-import React2, { useState, useEffect, useMemo } from "react";
+import React2, { useState, useEffect, useMemo, useContext } from "react";
 import { Grid } from "@elliemae/ds-grid";
 import { DSComboBox } from "@elliemae/ds-controlled-form";
 import { SearchXsmall } from "@elliemae/ds-icons";
 import { FilterPopover } from "../../../../exported-related";
 import { DATA_TESTID } from "../../../../configs";
-import { useDispatchHeadersActions } from "../../../../redux/reducers";
+import DataTableContext from "../../../../DataTableContext";
 const BaseSelectFilter = (props) => {
   const {
     isMulti = false,
@@ -20,7 +20,7 @@ const BaseSelectFilter = (props) => {
     innerRef,
     onValueChange
   } = props;
-  const { patchHeaderFilterButtonAndMenu } = useDispatchHeadersActions();
+  const { patchHeaderFilterButtonAndMenu } = useContext(DataTableContext);
   const filterOptions = useMemo(() => {
     if (!userFilterOptions) {
       const automaticFilters = [

package/dist/esm/addons/Filters/Components/SelectFilter/BaseSelectFilter.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../../scripts/build/transpile/react-shim.js", "../../../../../../src/addons/Filters/Components/SelectFilter/BaseSelectFilter.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable react/prop-types */\nimport React, { useState, useEffect, useMemo, useCallback } from 'react';\nimport { Grid } from '@elliemae/ds-grid';\nimport { DSComboBox } from '@elliemae/ds-controlled-form';\nimport { SearchXsmall } from '@elliemae/ds-icons';\nimport { FilterPopover } from '../../../../exported-related';\nimport { FilterProps } from '../../../../types/props';\nimport { DATA_TESTID } from '../../../../configs';\nimport { useDispatchHeadersActions } from '../../../../redux/reducers';\n\ninterface FilterOptionT {\n  dsId: string;\n  type: string;\n  value: string;\n  label: string;\n}\n\ninterface BaseSelectProps {\n  isSingle?: boolean;\n  isMulti?: boolean;\n  selectedItems?: FilterOptionT[] | FilterOptionT;\n  type: string;\n}\n\nexport const BaseSelectFilter: React.ComponentType<FilterProps & BaseSelectProps> = (props) => {\n  const {\n    isMulti = false,\n    selectedItems = null,\n    column,\n    type,\n    column: { id, filterOptions: userFilterOptions, filterMinWidth },\n    ctx: {\n      tableProps: { data },\n    },\n    reduxHeader,\n    innerRef,\n    onValueChange,\n  } = props;\n\n  const { patchHeaderFilterButtonAndMenu } = useDispatchHeadersActions();\n\n  const filterOptions: FilterOptionT[] = useMemo(() => {\n    // If the user didn't provide options, use the available ones\n    if (!userFilterOptions) {\n      const automaticFilters = [\n        ...new Set(data.map((datum) => datum?.[id]?.toString()).filter((val) => val !== undefined)),\n      ].map((item) => ({\n        type: 'option',\n        dsId: item,\n        value: item,\n        label: item,\n      }));\n\n      return automaticFilters;\n    }\n\n    // If user provided the array itself, use it\n    if (Array.isArray(userFilterOptions)) return userFilterOptions;\n    // Otherwise, it is a function\n    return userFilterOptions();\n  }, [data, id, userFilterOptions]);\n\n  const handleOnChange = (value) => {\n    onValueChange(type, value);\n    if (!isMulti) patchHeaderFilterButtonAndMenu(column.id, true);\n  };\n\n  const [filters, setFilteredOptions] = useState(filterOptions);\n\n  useEffect(() => {\n    setFilteredOptions(filterOptions);\n  }, [filterOptions]);\n\n  const Select = (\n    <Grid\n      data-testid={\n        isMulti ? DATA_TESTID.DATA_TABLE_MULTISELECT_CONTROLLER : DATA_TESTID.DATA_TABLE_SINGLESELECT_CONTROLLER\n      }\n      style={{ background: '#fff', position: 'relative', width: filterMinWidth }}\n    >\n      <DSComboBox\n        inline\n        autoFocus\n        allOptions={filterOptions}\n        filteredOptions={filters}\n        onChange={handleOnChange}\n        selectedValues={selectedItems}\n        onFilter={setFilteredOptions}\n        menuMaxHeight={300}\n      />\n    </Grid>\n  );\n\n  const handleOnClickOutside = () => {\n    setFilteredOptions(filterOptions);\n  };\n  return (\n    <FilterPopover\n      reduxHeader={reduxHeader}\n      column={column}\n      columnId={column.id}\n      menuContent={Select}\n      triggerIcon={<SearchXsmall />}\n      innerRef={innerRef}\n      ariaLabel=\"Open Selection Filter\"\n      onClickOutsideMenu={handleOnClickOutside}\n    />\n  );\n};\n"],
-  "mappings": "AAAA;ACCA;AACA;AACA;AACA;AACA;AAEA;AACA;AAgBO,MAAM,mBAAuE,CAAC,UAAU;AAC7F,QAAM;AAAA,IACJ,UAAU;AAAA,IACV,gBAAgB;AAAA,IAChB;AAAA,IACA;AAAA,IACA,QAAQ,EAAE,IAAI,eAAe,mBAAmB;AAAA,IAChD,KAAK;AAAA,MACH,YAAY,EAAE;AAAA;AAAA,IAEhB;AAAA,IACA;AAAA,IACA;AAAA,MACE;AAEJ,QAAM,EAAE,mCAAmC,0BAA0B;AAErE,QAAM,gBAAiC,QAAQ,MAAM;AAEnD,QAAI,CAAC,mBAAmB;AACtB,YAAM,mBAAmB;AAAA,QACvB,GAAG,IAAI,IAAI,KAAK,IAAI,CAAC,UAAU,QAAQ,KAAK,SAAS,CAAC,EAAE,OAAO,CAAC,QAAQ,QAAQ,MAAS,CAAC;AAAA,MAC5F,EAAE,IAAI,CAAC,SAAU;AAAA,QACf,MAAM;AAAA,QACN,MAAM;AAAA,QACN,OAAO;AAAA,QACP,OAAO;AAAA,MACT,EAAE;AAEF,aAAO;AAAA,IACT;AAGA,QAAI,MAAM,QAAQ,iBAAiB;AAAG,aAAO;AAE7C,WAAO,kBAAkB;AAAA,EAC3B,GAAG,CAAC,MAAM,IAAI,iBAAiB,CAAC;AAEhC,QAAM,iBAAiB,CAAC,UAAU;AAChC,kBAAc,MAAM,KAAK;AACzB,QAAI,CAAC;AAAS,qCAA+B,OAAO,IAAI,IAAI;AAAA,EAC9D;AAEA,QAAM,CAAC,SAAS,sBAAsB,SAAS,aAAa;AAE5D,YAAU,MAAM;AACd,uBAAmB,aAAa;AAAA,EAClC,GAAG,CAAC,aAAa,CAAC;AAElB,QAAM,SACJ,qCAAC;AAAA,IACC,eACE,UAAU,YAAY,oCAAoC,YAAY;AAAA,IAExE,OAAO,EAAE,YAAY,QAAQ,UAAU,YAAY,OAAO,eAAe;AAAA,KAEzE,qCAAC;AAAA,IACC,QAAM;AAAA,IACN,WAAS;AAAA,IACT,YAAY;AAAA,IACZ,iBAAiB;AAAA,IACjB,UAAU;AAAA,IACV,gBAAgB;AAAA,IAChB,UAAU;AAAA,IACV,eAAe;AAAA,GACjB,CACF;AAGF,QAAM,uBAAuB,MAAM;AACjC,uBAAmB,aAAa;AAAA,EAClC;AACA,SACE,qCAAC;AAAA,IACC;AAAA,IACA;AAAA,IACA,UAAU,OAAO;AAAA,IACjB,aAAa;AAAA,IACb,aAAa,qCAAC,kBAAa;AAAA,IAC3B;AAAA,IACA,WAAU;AAAA,IACV,oBAAoB;AAAA,GACtB;AAEJ;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable react/prop-types */\nimport React, { useState, useEffect, useMemo, useCallback, useContext } from 'react';\nimport { Grid } from '@elliemae/ds-grid';\nimport { DSComboBox } from '@elliemae/ds-controlled-form';\nimport { SearchXsmall } from '@elliemae/ds-icons';\nimport { FilterPopover } from '../../../../exported-related';\nimport { FilterProps } from '../../../../types/props';\nimport { DATA_TESTID } from '../../../../configs';\nimport DataTableContext from '../../../../DataTableContext';\n\ninterface FilterOptionT {\n  dsId: string;\n  type: string;\n  value: string;\n  label: string;\n}\n\ninterface BaseSelectProps {\n  isSingle?: boolean;\n  isMulti?: boolean;\n  selectedItems?: FilterOptionT[] | FilterOptionT;\n  type: string;\n}\n\nexport const BaseSelectFilter: React.ComponentType<FilterProps & BaseSelectProps> = (props) => {\n  const {\n    isMulti = false,\n    selectedItems = null,\n    column,\n    type,\n    column: { id, filterOptions: userFilterOptions, filterMinWidth },\n    ctx: {\n      tableProps: { data },\n    },\n    reduxHeader,\n    innerRef,\n    onValueChange,\n  } = props;\n\n  const { patchHeaderFilterButtonAndMenu } = useContext(DataTableContext);\n\n  const filterOptions: FilterOptionT[] = useMemo(() => {\n    // If the user didn't provide options, use the available ones\n    if (!userFilterOptions) {\n      const automaticFilters = [\n        ...new Set(data.map((datum) => datum?.[id]?.toString()).filter((val) => val !== undefined)),\n      ].map((item) => ({\n        type: 'option',\n        dsId: item,\n        value: item,\n        label: item,\n      }));\n\n      return automaticFilters;\n    }\n\n    // If user provided the array itself, use it\n    if (Array.isArray(userFilterOptions)) return userFilterOptions;\n    // Otherwise, it is a function\n    return userFilterOptions();\n  }, [data, id, userFilterOptions]);\n\n  const handleOnChange = (value) => {\n    onValueChange(type, value);\n    if (!isMulti) patchHeaderFilterButtonAndMenu(column.id, true);\n  };\n\n  const [filters, setFilteredOptions] = useState(filterOptions);\n\n  useEffect(() => {\n    setFilteredOptions(filterOptions);\n  }, [filterOptions]);\n\n  const Select = (\n    <Grid\n      data-testid={\n        isMulti ? DATA_TESTID.DATA_TABLE_MULTISELECT_CONTROLLER : DATA_TESTID.DATA_TABLE_SINGLESELECT_CONTROLLER\n      }\n      style={{ background: '#fff', position: 'relative', width: filterMinWidth }}\n    >\n      <DSComboBox\n        inline\n        autoFocus\n        allOptions={filterOptions}\n        filteredOptions={filters}\n        onChange={handleOnChange}\n        selectedValues={selectedItems}\n        onFilter={setFilteredOptions}\n        menuMaxHeight={300}\n      />\n    </Grid>\n  );\n\n  const handleOnClickOutside = () => {\n    setFilteredOptions(filterOptions);\n  };\n  return (\n    <FilterPopover\n      reduxHeader={reduxHeader}\n      column={column}\n      columnId={column.id}\n      menuContent={Select}\n      triggerIcon={<SearchXsmall />}\n      innerRef={innerRef}\n      ariaLabel=\"Open Selection Filter\"\n      onClickOutsideMenu={handleOnClickOutside}\n    />\n  );\n};\n"],
+  "mappings": "AAAA;ACCA;AACA;AACA;AACA;AACA;AAEA;AACA;AAgBO,MAAM,mBAAuE,CAAC,UAAU;AAC7F,QAAM;AAAA,IACJ,UAAU;AAAA,IACV,gBAAgB;AAAA,IAChB;AAAA,IACA;AAAA,IACA,QAAQ,EAAE,IAAI,eAAe,mBAAmB;AAAA,IAChD,KAAK;AAAA,MACH,YAAY,EAAE;AAAA;AAAA,IAEhB;AAAA,IACA;AAAA,IACA;AAAA,MACE;AAEJ,QAAM,EAAE,mCAAmC,WAAW,gBAAgB;AAEtE,QAAM,gBAAiC,QAAQ,MAAM;AAEnD,QAAI,CAAC,mBAAmB;AACtB,YAAM,mBAAmB;AAAA,QACvB,GAAG,IAAI,IAAI,KAAK,IAAI,CAAC,UAAU,QAAQ,KAAK,SAAS,CAAC,EAAE,OAAO,CAAC,QAAQ,QAAQ,MAAS,CAAC;AAAA,MAC5F,EAAE,IAAI,CAAC,SAAU;AAAA,QACf,MAAM;AAAA,QACN,MAAM;AAAA,QACN,OAAO;AAAA,QACP,OAAO;AAAA,MACT,EAAE;AAEF,aAAO;AAAA,IACT;AAGA,QAAI,MAAM,QAAQ,iBAAiB;AAAG,aAAO;AAE7C,WAAO,kBAAkB;AAAA,EAC3B,GAAG,CAAC,MAAM,IAAI,iBAAiB,CAAC;AAEhC,QAAM,iBAAiB,CAAC,UAAU;AAChC,kBAAc,MAAM,KAAK;AACzB,QAAI,CAAC;AAAS,qCAA+B,OAAO,IAAI,IAAI;AAAA,EAC9D;AAEA,QAAM,CAAC,SAAS,sBAAsB,SAAS,aAAa;AAE5D,YAAU,MAAM;AACd,uBAAmB,aAAa;AAAA,EAClC,GAAG,CAAC,aAAa,CAAC;AAElB,QAAM,SACJ,qCAAC;AAAA,IACC,eACE,UAAU,YAAY,oCAAoC,YAAY;AAAA,IAExE,OAAO,EAAE,YAAY,QAAQ,UAAU,YAAY,OAAO,eAAe;AAAA,KAEzE,qCAAC;AAAA,IACC,QAAM;AAAA,IACN,WAAS;AAAA,IACT,YAAY;AAAA,IACZ,iBAAiB;AAAA,IACjB,UAAU;AAAA,IACV,gBAAgB;AAAA,IAChB,UAAU;AAAA,IACV,eAAe;AAAA,GACjB,CACF;AAGF,QAAM,uBAAuB,MAAM;AACjC,uBAAmB,aAAa;AAAA,EAClC;AACA,SACE,qCAAC;AAAA,IACC;AAAA,IACA;AAAA,IACA,UAAU,OAAO;AAAA,IACjB,aAAa;AAAA,IACb,aAAa,qCAAC,kBAAa;AAAA,IAC3B;AAAA,IACA,WAAU;AAAA,IACV,oBAAoB;AAAA,GACtB;AAEJ;",
   "names": []
 }

package/dist/esm/configs/useDatatableConfig.js

@@ -1,3 +1,19 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
 import * as React from "react";
 import { useEffect, useMemo, useRef, useState } from "react";
 import { useVirtual } from "react-virtual";
@@ -6,6 +22,7 @@ import { useRowFlattenization } from "./useRowFlattenization";
 import { usePaginationConfig } from "./usePaginationConfig";
 import { useTableColsWithAddons } from "./useTableColsWithAddons";
 import { ColsLayoutStyle } from "./constants";
+import { useInternalStateConfig } from "./useInternalStateConfig";
 const useDatatableConfig = (props) => {
   const virtualListRef = useRef(null);
   const columnHeaderRef = useRef(null);
@@ -38,7 +55,8 @@ const useDatatableConfig = (props) => {
     setGridLayout,
     totalColumnsWidth
   }), [gridLayout, setGridLayout, totalColumnsWidth]);
-  const ctx = useMemo(() => ({
+  const internalState = useInternalStateConfig();
+  const ctx = useMemo(() => __spreadValues({
     tableProps: props,
     layoutHelpers,
     paginationHelpers,
@@ -48,7 +66,7 @@ const useDatatableConfig = (props) => {
     allDataFlattened,
     virtualListRef,
     columnHeaderRef
-  }), [
+  }, internalState), [
     props,
     layoutHelpers,
     paginationHelpers,
@@ -58,7 +76,8 @@ const useDatatableConfig = (props) => {
     flattenedData,
     allDataFlattened,
     virtualListRef,
-    columnHeaderRef
+    columnHeaderRef,
+    internalState
   ]);
   return ctx;
 };

package/dist/esm/configs/useDatatableConfig.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/configs/useDatatableConfig.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { useEffect, useMemo, useRef, useState } from 'react';\nimport { useVirtual } from 'react-virtual';\nimport { columnsToGrid } from '../helpers/columnsToGrid';\nimport { TypescriptColumn, TypescriptContext, TypescriptProps } from '../types/props';\nimport { useRowFlattenization } from './useRowFlattenization';\nimport { usePaginationConfig } from './usePaginationConfig';\nimport { useTableColsWithAddons } from './useTableColsWithAddons';\nimport { ColsLayoutStyle } from './constants';\n\nexport const useDatatableConfig = (props: TypescriptProps): TypescriptContext => {\n  const virtualListRef = useRef<HTMLDivElement>(null);\n  const columnHeaderRef = useRef<HTMLDivElement>(null);\n\n  // ===========================================================================\n  // Column config\n  // ===========================================================================\n  const tableColsWithAddons = useTableColsWithAddons(props);\n\n  const visibleColumns = useMemo(\n    () => tableColsWithAddons.filter((col: TypescriptColumn) => !props.hiddenColumns.includes(col.accessor)),\n    [props.hiddenColumns, tableColsWithAddons],\n  );\n\n  // ===========================================================================\n  // Virtualization\n  // ===========================================================================\n\n  const [dataLength, setDataLength] = useState(1);\n\n  // estimateSize should not be really required given what was stated on\n  // https://github.com/tannerlinsley/react-virtual/issues/23\n  const virtualListHelpers = useVirtual({\n    size: dataLength,\n    parentRef: virtualListRef,\n    overscan: 15,\n    paddingStart: columnHeaderRef.current?.getBoundingClientRect()?.height ?? 24,\n  });\n\n  // ===========================================================================\n  // Action ref setup\n  // ===========================================================================\n  useEffect(() => {\n    if (props.actionRef) {\n      props.actionRef.current.scrollToIndex = virtualListHelpers.scrollToIndex;\n      props.actionRef.current.scrollToOffset = virtualListHelpers.scrollToOffset;\n    }\n  }, [props.actionRef, virtualListHelpers.scrollToIndex, virtualListHelpers.scrollToOffset]);\n\n  // ===========================================================================\n  // Data flattenization and pagination\n  // ===========================================================================\n\n  const [flattenedData, allDataFlattened] = useRowFlattenization(props);\n\n  const [paginatedData, paginationHelpers] = usePaginationConfig(props, flattenedData);\n\n  // Redo virtualization until we match the lengths\n  if (dataLength !== (paginatedData || flattenedData).length) setDataLength((paginatedData || flattenedData).length);\n\n  // ===========================================================================\n  // Layout config\n  // ===========================================================================\n\n  const [gridLayout, setGridLayout] = useState(columnsToGrid(visibleColumns, props.colsLayoutStyle));\n\n  // We need to listen and update the state based on this props\n  useEffect(() => {\n    setGridLayout(columnsToGrid(visibleColumns, props.colsLayoutStyle));\n  }, [visibleColumns, props.colsLayoutStyle]);\n\n  const totalColumnsWidth = useMemo(\n    () =>\n      props.colsLayoutStyle === ColsLayoutStyle.Fixed\n        ? gridLayout.reduce((acc: number, cur: string) => acc + Number.parseInt(cur, 10), 0)\n        : '100%',\n    [props.colsLayoutStyle, gridLayout],\n  );\n\n  const layoutHelpers = useMemo(\n    () => ({\n      gridLayout,\n      setGridLayout,\n      totalColumnsWidth,\n    }),\n    [gridLayout, setGridLayout, totalColumnsWidth],\n  );\n\n  const ctx = useMemo(\n    () => ({\n      tableProps: props,\n      layoutHelpers,\n      paginationHelpers,\n      visibleColumns,\n      virtualListHelpers,\n      flattenedData: paginatedData || flattenedData,\n      allDataFlattened,\n      virtualListRef,\n      columnHeaderRef,\n    }),\n    [\n      props,\n      layoutHelpers,\n      paginationHelpers,\n      visibleColumns,\n      virtualListHelpers,\n      paginatedData,\n      flattenedData,\n      allDataFlattened,\n      virtualListRef,\n      columnHeaderRef,\n    ],\n  );\n\n  return ctx;\n};\n"],
-  "mappings": "AAAA;ACAA;AACA;AACA;AAEA;AACA;AACA;AACA;AAEO,MAAM,qBAAqB,CAAC,UAA8C;AAC/E,QAAM,iBAAiB,OAAuB,IAAI;AAClD,QAAM,kBAAkB,OAAuB,IAAI;AAKnD,QAAM,sBAAsB,uBAAuB,KAAK;AAExD,QAAM,iBAAiB,QACrB,MAAM,oBAAoB,OAAO,CAAC,QAA0B,CAAC,MAAM,cAAc,SAAS,IAAI,QAAQ,CAAC,GACvG,CAAC,MAAM,eAAe,mBAAmB,CAC3C;AAMA,QAAM,CAAC,YAAY,iBAAiB,SAAS,CAAC;AAI9C,QAAM,qBAAqB,WAAW;AAAA,IACpC,MAAM;AAAA,IACN,WAAW;AAAA,IACX,UAAU;AAAA,IACV,cAAc,gBAAgB,SAAS,sBAAsB,GAAG,UAAU;AAAA,EAC5E,CAAC;AAKD,YAAU,MAAM;AACd,QAAI,MAAM,WAAW;AACnB,YAAM,UAAU,QAAQ,gBAAgB,mBAAmB;AAC3D,YAAM,UAAU,QAAQ,iBAAiB,mBAAmB;AAAA,IAC9D;AAAA,EACF,GAAG,CAAC,MAAM,WAAW,mBAAmB,eAAe,mBAAmB,cAAc,CAAC;AAMzF,QAAM,CAAC,eAAe,oBAAoB,qBAAqB,KAAK;AAEpE,QAAM,CAAC,eAAe,qBAAqB,oBAAoB,OAAO,aAAa;AAGnF,MAAI,eAAgB,kBAAiB,eAAe;AAAQ,kBAAe,kBAAiB,eAAe,MAAM;AAMjH,QAAM,CAAC,YAAY,iBAAiB,SAAS,cAAc,gBAAgB,MAAM,eAAe,CAAC;AAGjG,YAAU,MAAM;AACd,kBAAc,cAAc,gBAAgB,MAAM,eAAe,CAAC;AAAA,EACpE,GAAG,CAAC,gBAAgB,MAAM,eAAe,CAAC;AAE1C,QAAM,oBAAoB,QACxB,MACE,MAAM,oBAAoB,gBAAgB,QACtC,WAAW,OAAO,CAAC,KAAa,QAAgB,MAAM,OAAO,SAAS,KAAK,EAAE,GAAG,CAAC,IACjF,QACN,CAAC,MAAM,iBAAiB,UAAU,CACpC;AAEA,QAAM,gBAAgB,QACpB,MAAO;AAAA,IACL;AAAA,IACA;AAAA,IACA;AAAA,EACF,IACA,CAAC,YAAY,eAAe,iBAAiB,CAC/C;AAEA,QAAM,MAAM,QACV,MAAO;AAAA,IACL,YAAY;AAAA,IACZ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,eAAe,iBAAiB;AAAA,IAChC;AAAA,IACA;AAAA,IACA;AAAA,EACF,IACA;AAAA,IACE;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,CACF;AAEA,SAAO;AACT;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { useEffect, useMemo, useRef, useState } from 'react';\nimport { useVirtual } from 'react-virtual';\nimport { columnsToGrid } from '../helpers/columnsToGrid';\nimport { TypescriptColumn, TypescriptContext, TypescriptProps } from '../types/props';\nimport { useRowFlattenization } from './useRowFlattenization';\nimport { usePaginationConfig } from './usePaginationConfig';\nimport { useTableColsWithAddons } from './useTableColsWithAddons';\nimport { ColsLayoutStyle } from './constants';\nimport { useInternalStateConfig } from './useInternalStateConfig';\n\nexport const useDatatableConfig = (props: TypescriptProps): TypescriptContext => {\n  const virtualListRef = useRef<HTMLDivElement>(null);\n  const columnHeaderRef = useRef<HTMLDivElement>(null);\n\n  // ===========================================================================\n  // Column config\n  // ===========================================================================\n  const tableColsWithAddons = useTableColsWithAddons(props);\n\n  const visibleColumns = useMemo(\n    () => tableColsWithAddons.filter((col: TypescriptColumn) => !props.hiddenColumns.includes(col.accessor)),\n    [props.hiddenColumns, tableColsWithAddons],\n  );\n\n  // ===========================================================================\n  // Virtualization\n  // ===========================================================================\n\n  const [dataLength, setDataLength] = useState(1);\n\n  // estimateSize should not be really required given what was stated on\n  // https://github.com/tannerlinsley/react-virtual/issues/23\n  const virtualListHelpers = useVirtual({\n    size: dataLength,\n    parentRef: virtualListRef,\n    overscan: 15,\n    paddingStart: columnHeaderRef.current?.getBoundingClientRect()?.height ?? 24,\n  });\n\n  // ===========================================================================\n  // Action ref setup\n  // ===========================================================================\n  useEffect(() => {\n    if (props.actionRef) {\n      props.actionRef.current.scrollToIndex = virtualListHelpers.scrollToIndex;\n      props.actionRef.current.scrollToOffset = virtualListHelpers.scrollToOffset;\n    }\n  }, [props.actionRef, virtualListHelpers.scrollToIndex, virtualListHelpers.scrollToOffset]);\n\n  // ===========================================================================\n  // Data flattenization and pagination\n  // ===========================================================================\n\n  const [flattenedData, allDataFlattened] = useRowFlattenization(props);\n\n  const [paginatedData, paginationHelpers] = usePaginationConfig(props, flattenedData);\n\n  // Redo virtualization until we match the lengths\n  if (dataLength !== (paginatedData || flattenedData).length) setDataLength((paginatedData || flattenedData).length);\n\n  // ===========================================================================\n  // Layout config\n  // ===========================================================================\n\n  const [gridLayout, setGridLayout] = useState(columnsToGrid(visibleColumns, props.colsLayoutStyle));\n\n  // We need to listen and update the state based on this props\n  useEffect(() => {\n    setGridLayout(columnsToGrid(visibleColumns, props.colsLayoutStyle));\n  }, [visibleColumns, props.colsLayoutStyle]);\n\n  const totalColumnsWidth = useMemo(\n    () =>\n      props.colsLayoutStyle === ColsLayoutStyle.Fixed\n        ? gridLayout.reduce((acc: number, cur: string) => acc + Number.parseInt(cur, 10), 0)\n        : '100%',\n    [props.colsLayoutStyle, gridLayout],\n  );\n\n  const layoutHelpers = useMemo(\n    () => ({\n      gridLayout,\n      setGridLayout,\n      totalColumnsWidth,\n    }),\n    [gridLayout, setGridLayout, totalColumnsWidth],\n  );\n\n  // ===========================================================================\n  // Internal state config\n  // ===========================================================================\n\n  const internalState = useInternalStateConfig();\n\n  const ctx = useMemo(\n    () => ({\n      tableProps: props,\n      layoutHelpers,\n      paginationHelpers,\n      visibleColumns,\n      virtualListHelpers,\n      flattenedData: paginatedData || flattenedData,\n      allDataFlattened,\n      virtualListRef,\n      columnHeaderRef,\n      ...internalState,\n    }),\n    [\n      props,\n      layoutHelpers,\n      paginationHelpers,\n      visibleColumns,\n      virtualListHelpers,\n      paginatedData,\n      flattenedData,\n      allDataFlattened,\n      virtualListRef,\n      columnHeaderRef,\n      internalState,\n    ],\n  );\n\n  return ctx;\n};\n"],
+  "mappings": ";;;;;;;;;;;;;;;;AAAA;ACAA;AACA;AACA;AAEA;AACA;AACA;AACA;AACA;AAEO,MAAM,qBAAqB,CAAC,UAA8C;AAC/E,QAAM,iBAAiB,OAAuB,IAAI;AAClD,QAAM,kBAAkB,OAAuB,IAAI;AAKnD,QAAM,sBAAsB,uBAAuB,KAAK;AAExD,QAAM,iBAAiB,QACrB,MAAM,oBAAoB,OAAO,CAAC,QAA0B,CAAC,MAAM,cAAc,SAAS,IAAI,QAAQ,CAAC,GACvG,CAAC,MAAM,eAAe,mBAAmB,CAC3C;AAMA,QAAM,CAAC,YAAY,iBAAiB,SAAS,CAAC;AAI9C,QAAM,qBAAqB,WAAW;AAAA,IACpC,MAAM;AAAA,IACN,WAAW;AAAA,IACX,UAAU;AAAA,IACV,cAAc,gBAAgB,SAAS,sBAAsB,GAAG,UAAU;AAAA,EAC5E,CAAC;AAKD,YAAU,MAAM;AACd,QAAI,MAAM,WAAW;AACnB,YAAM,UAAU,QAAQ,gBAAgB,mBAAmB;AAC3D,YAAM,UAAU,QAAQ,iBAAiB,mBAAmB;AAAA,IAC9D;AAAA,EACF,GAAG,CAAC,MAAM,WAAW,mBAAmB,eAAe,mBAAmB,cAAc,CAAC;AAMzF,QAAM,CAAC,eAAe,oBAAoB,qBAAqB,KAAK;AAEpE,QAAM,CAAC,eAAe,qBAAqB,oBAAoB,OAAO,aAAa;AAGnF,MAAI,eAAgB,kBAAiB,eAAe;AAAQ,kBAAe,kBAAiB,eAAe,MAAM;AAMjH,QAAM,CAAC,YAAY,iBAAiB,SAAS,cAAc,gBAAgB,MAAM,eAAe,CAAC;AAGjG,YAAU,MAAM;AACd,kBAAc,cAAc,gBAAgB,MAAM,eAAe,CAAC;AAAA,EACpE,GAAG,CAAC,gBAAgB,MAAM,eAAe,CAAC;AAE1C,QAAM,oBAAoB,QACxB,MACE,MAAM,oBAAoB,gBAAgB,QACtC,WAAW,OAAO,CAAC,KAAa,QAAgB,MAAM,OAAO,SAAS,KAAK,EAAE,GAAG,CAAC,IACjF,QACN,CAAC,MAAM,iBAAiB,UAAU,CACpC;AAEA,QAAM,gBAAgB,QACpB,MAAO;AAAA,IACL;AAAA,IACA;AAAA,IACA;AAAA,EACF,IACA,CAAC,YAAY,eAAe,iBAAiB,CAC/C;AAMA,QAAM,gBAAgB,uBAAuB;AAE7C,QAAM,MAAM,QACV,MAAO;AAAA,IACL,YAAY;AAAA,IACZ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,eAAe,iBAAiB;AAAA,IAChC;AAAA,IACA;AAAA,IACA;AAAA,KACG,gBAEL;AAAA,IACE;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,CACF;AAEA,SAAO;AACT;",
   "names": []
 }

package/dist/esm/configs/useInternalStateConfig.js

@@ -0,0 +1,55 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+import * as React from "react";
+import { useCallback, useMemo, useState } from "react";
+const useInternalStateConfig = () => {
+  const [drilldownRowId, setDrilldownRowId] = useState(null);
+  const [focusedRowId, setFocusedRowId] = useState(null);
+  const [reduxHeaders, setReduxHeaders] = useState({});
+  const patchHeader = useCallback((headerId, newHeader) => {
+    setReduxHeaders((prevReduxHeaders) => {
+      const nextReduxHeaders = __spreadValues({}, prevReduxHeaders);
+      nextReduxHeaders[headerId] = __spreadValues(__spreadValues({}, nextReduxHeaders?.[headerId] ?? {}), newHeader);
+      return nextReduxHeaders;
+    });
+  }, []);
+  const patchHeaderFilterButtonAndMenu = useCallback((headerId, value) => {
+    const newState = { hideFilterMenu: value, hideFilterButton: value };
+    patchHeader(headerId, newState);
+  }, []);
+  return useMemo(() => ({
+    drilldownRowId,
+    setDrilldownRowId,
+    focusedRowId,
+    setFocusedRowId,
+    reduxHeaders,
+    patchHeader,
+    patchHeaderFilterButtonAndMenu
+  }), [
+    drilldownRowId,
+    setDrilldownRowId,
+    focusedRowId,
+    setFocusedRowId,
+    reduxHeaders,
+    patchHeader,
+    patchHeaderFilterButtonAndMenu
+  ]);
+};
+export {
+  useInternalStateConfig
+};
+//# sourceMappingURL=useInternalStateConfig.js.map

package/dist/esm/configs/useInternalStateConfig.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/configs/useInternalStateConfig.tsx"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { useCallback, useMemo, useState } from 'react';\nimport { ReduxHeader } from '../types/props';\n\nexport const useInternalStateConfig = () => {\n  const [drilldownRowId, setDrilldownRowId] = useState<string | null>(null);\n  const [focusedRowId, setFocusedRowId] = useState<string | null>(null);\n\n  // TODO: @uluduena partition this state better\n  const [reduxHeaders, setReduxHeaders] = useState<Record<string, ReduxHeader>>({});\n\n  const patchHeader = useCallback((headerId: string, newHeader: Partial<ReduxHeader>) => {\n    setReduxHeaders((prevReduxHeaders) => {\n      const nextReduxHeaders = { ...prevReduxHeaders };\n      nextReduxHeaders[headerId] = { ...(nextReduxHeaders?.[headerId] ?? {}), ...newHeader };\n      return nextReduxHeaders;\n    });\n  }, []);\n\n  const patchHeaderFilterButtonAndMenu = useCallback((headerId: string, value: boolean) => {\n    const newState = { hideFilterMenu: value, hideFilterButton: value };\n    patchHeader(headerId, newState);\n  }, []);\n\n  return useMemo(\n    () => ({\n      drilldownRowId,\n      setDrilldownRowId,\n      focusedRowId,\n      setFocusedRowId,\n      reduxHeaders,\n      patchHeader,\n      patchHeaderFilterButtonAndMenu,\n    }),\n    [\n      drilldownRowId,\n      setDrilldownRowId,\n      focusedRowId,\n      setFocusedRowId,\n      reduxHeaders,\n      patchHeader,\n      patchHeaderFilterButtonAndMenu,\n    ],\n  );\n};\n"],
+  "mappings": ";;;;;;;;;;;;;;;;AAAA;ACAA;AAGO,MAAM,yBAAyB,MAAM;AAC1C,QAAM,CAAC,gBAAgB,qBAAqB,SAAwB,IAAI;AACxE,QAAM,CAAC,cAAc,mBAAmB,SAAwB,IAAI;AAGpE,QAAM,CAAC,cAAc,mBAAmB,SAAsC,CAAC,CAAC;AAEhF,QAAM,cAAc,YAAY,CAAC,UAAkB,cAAoC;AACrF,oBAAgB,CAAC,qBAAqB;AACpC,YAAM,mBAAmB,mBAAK;AAC9B,uBAAiB,YAAY,kCAAM,mBAAmB,aAAa,CAAC,IAAO;AAC3E,aAAO;AAAA,IACT,CAAC;AAAA,EACH,GAAG,CAAC,CAAC;AAEL,QAAM,iCAAiC,YAAY,CAAC,UAAkB,UAAmB;AACvF,UAAM,WAAW,EAAE,gBAAgB,OAAO,kBAAkB,MAAM;AAClE,gBAAY,UAAU,QAAQ;AAAA,EAChC,GAAG,CAAC,CAAC;AAEL,SAAO,QACL,MAAO;AAAA,IACL;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,IACA;AAAA,IACE;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,CACF;AACF;",
+  "names": []
+}

package/dist/esm/exported-related/FilterPopover.js

@@ -18,11 +18,11 @@ var __spreadValues = (a, b) => {
 };
 var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
 import * as React from "react";
-import React2, { useCallback, useEffect, useState } from "react";
+import React2, { useCallback, useContext, useEffect, useState } from "react";
 import { DSButton } from "@elliemae/ds-button";
 import { DSPopperJS } from "@elliemae/ds-popperjs";
 import styled from "styled-components";
-import { useDispatchHeadersActions } from "../redux/reducers";
+import DataTableContext from "../DataTableContext";
 import { DATA_TESTID } from "../configs/constants";
 const FilterButton = styled.span`
   display: inline-grid;
@@ -59,7 +59,7 @@ const FilterPopover = ({
     hideFilterButton: true,
     hideFilterMenu: true
   };
-  const { patchHeaderFilterButtonAndMenu, patchHeader } = useDispatchHeadersActions();
+  const { patchHeaderFilterButtonAndMenu, patchHeader } = useContext(DataTableContext);
   const isIconVisible = !hideFilterButton || !hideFilterMenu;
   const isMenuOpen = !hideFilterMenu;
   const handleClickOutsideMenu = (e) => {

package/dist/esm/exported-related/FilterPopover.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/exported-related/FilterPopover.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable react/prop-types */\n/* eslint-disable jsx-a11y/no-static-element-interactions */\nimport React, { MutableRefObject, useCallback, useEffect, useState } from 'react';\nimport { DSButton } from '@elliemae/ds-button';\nimport { DSPopperJS } from '@elliemae/ds-popperjs';\nimport styled from 'styled-components';\nimport { useDispatchHeadersActions } from '../redux/reducers';\nimport { DATA_TESTID } from '../configs/constants';\nimport { TypescriptColumn } from '../types/props';\n\nconst FilterButton = styled.span<{ hide: boolean }>`\n  display: inline-grid;\n  ${(props) => (props.hide ? 'opacity: 0; display: none; width: 0;' : '')}\n`;\n\nconst Button = styled(DSButton)`\n  position: relative;\n  justify-self: flex-end;\n`;\n\nconst PopperContent = styled.div`\n  background-color: #fff;\n`;\ninterface FilterPopoverProps {\n  column: TypescriptColumn;\n  columnId: string;\n  triggerIcon: JSX.Element;\n  menuContent: JSX.Element;\n  onTriggerClick?: (id: string, e: UIEvent) => void;\n  onClickOutsideMenu?: (id: string, e: UIEvent) => void;\n  reduxHeader: { hideFilterButton: boolean; hideFilterMenu: boolean; withTabStops: boolean };\n  innerRef: MutableRefObject<HTMLDivElement>;\n  ariaLabel: string;\n  customStyles?: React.CSSProperties;\n}\n\nconst ButtonTrap = ({ cb }) => (\n  <span\n    aria-hidden=\"true\"\n    tabIndex={0}\n    onFocus={(e) => {\n      e.stopPropagation();\n      cb();\n    }}\n  />\n);\n\nexport const FilterPopover: React.ComponentType<FilterPopoverProps> = ({\n  column,\n  columnId,\n  triggerIcon,\n  menuContent,\n  onTriggerClick = () => null,\n  onClickOutsideMenu = () => null,\n  reduxHeader,\n  innerRef,\n  ariaLabel,\n  customStyles,\n}) => {\n  const { hideFilterButton, hideFilterMenu } = reduxHeader || {\n    hideFilterButton: true,\n    hideFilterMenu: true,\n  };\n  const { patchHeaderFilterButtonAndMenu, patchHeader } = useDispatchHeadersActions();\n  const isIconVisible = !hideFilterButton || !hideFilterMenu;\n  const isMenuOpen = !hideFilterMenu;\n\n  const handleClickOutsideMenu = (e) => {\n    onClickOutsideMenu(columnId, e);\n    if (isMenuOpen) patchHeaderFilterButtonAndMenu(columnId, true);\n  };\n\n  useEffect(() => {\n    const closeMenu = () => {\n      patchHeaderFilterButtonAndMenu(columnId, true);\n    };\n    window.addEventListener('blur', closeMenu);\n\n    return () => {\n      window.removeEventListener('blur', closeMenu);\n    };\n  }, [columnId, patchHeaderFilterButtonAndMenu]);\n\n  const handleTriggerClick = (e) => {\n    onTriggerClick(columnId, e);\n    patchHeaderFilterButtonAndMenu(columnId, false);\n    e.stopPropagation();\n  };\n\n  const [referenceElement, setReferenceElement] = useState(null);\n\n  const buttonTrapCallback = useCallback(() => {\n    patchHeader(columnId, { hideFilterMenu: true, hideFilterButton: false });\n    referenceElement?.focus();\n  }, [columnId, patchHeader, referenceElement]);\n  return (\n    <div\n      // This is here to prevent propagation, and not trigger the sort functionality\n      onClick={(e) => e.stopPropagation()}\n      onKeyDown={(e) => {\n        e.stopPropagation();\n        if (e.code === 'Escape') {\n          patchHeader(columnId, { hideFilterMenu: true, hideFilterButton: false });\n          referenceElement.focus();\n        }\n        // Stop propagation for some reason is not enough to prevent scrolling of the datatable\n        // so we just prevent default behaviour in this case\n        if (['ArrowUp', 'ArrowDown'].includes(e.code)) {\n          e.preventDefault();\n        }\n      }}\n      style={{ display: 'flex' }}\n    >\n      <FilterButton hide={!isIconVisible} data-testid={DATA_TESTID.DATA_TABLE_FILTER_BUTTON}>\n        <Button\n          onClick={handleTriggerClick}\n          buttonType=\"text\"\n          aria-label={ariaLabel}\n          aria-hidden=\"true\"\n          size=\"s\"\n          leftIcon={triggerIcon}\n          // implement treeview mergerefs\n          innerRef={(_ref) => {\n            if (isIconVisible) setReferenceElement(_ref);\n            innerRef.current = _ref;\n          }}\n          tabIndex={reduxHeader?.withTabStops ? 0 : -1}\n        />\n      </FilterButton>\n      {referenceElement && (\n        <DSPopperJS\n          referenceElement={referenceElement}\n          showPopover={isMenuOpen}\n          closeContextMenu={handleClickOutsideMenu}\n          data-testid={DATA_TESTID.DATA_TABLE_FILTER_MENU_CONTENT}\n          startPlacementPreference=\"bottom-end\"\n          customOffset={[5, 4]}\n          withoutArrow\n          zIndex={10}\n          withoutAnimation\n          extraPopperStyles={{\n            ...customStyles,\n            minWidth: column.ref?.current?.offsetWidth ?? '0px',\n          }}\n          placementOrderPreference={['bottom-end']}\n        >\n          <PopperContent>\n            <ButtonTrap cb={buttonTrapCallback} />\n            {menuContent}\n            <ButtonTrap cb={buttonTrapCallback} />\n          </PopperContent>\n        </DSPopperJS>\n      )}\n    </div>\n  );\n};\n"],
-  "mappings": "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",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable react/prop-types */\n/* eslint-disable jsx-a11y/no-static-element-interactions */\nimport React, { MutableRefObject, useCallback, useContext, useEffect, useState } from 'react';\nimport { DSButton } from '@elliemae/ds-button';\nimport { DSPopperJS } from '@elliemae/ds-popperjs';\nimport styled from 'styled-components';\nimport DataTableContext from '../DataTableContext';\nimport { DATA_TESTID } from '../configs/constants';\nimport { ReduxHeader, TypescriptColumn } from '../types/props';\n\nconst FilterButton = styled.span<{ hide: boolean }>`\n  display: inline-grid;\n  ${(props) => (props.hide ? 'opacity: 0; display: none; width: 0;' : '')}\n`;\n\nconst Button = styled(DSButton)`\n  position: relative;\n  justify-self: flex-end;\n`;\n\nconst PopperContent = styled.div`\n  background-color: #fff;\n`;\ninterface FilterPopoverProps {\n  column: TypescriptColumn;\n  columnId: string;\n  triggerIcon: JSX.Element;\n  menuContent: JSX.Element;\n  onTriggerClick?: (id: string, e: UIEvent) => void;\n  onClickOutsideMenu?: (id: string, e: UIEvent) => void;\n  reduxHeader: ReduxHeader;\n  innerRef: MutableRefObject<HTMLDivElement>;\n  ariaLabel: string;\n  customStyles?: React.CSSProperties;\n}\n\nconst ButtonTrap = ({ cb }) => (\n  <span\n    aria-hidden=\"true\"\n    tabIndex={0}\n    onFocus={(e) => {\n      e.stopPropagation();\n      cb();\n    }}\n  />\n);\n\nexport const FilterPopover: React.ComponentType<FilterPopoverProps> = ({\n  column,\n  columnId,\n  triggerIcon,\n  menuContent,\n  onTriggerClick = () => null,\n  onClickOutsideMenu = () => null,\n  reduxHeader,\n  innerRef,\n  ariaLabel,\n  customStyles,\n}) => {\n  const { hideFilterButton, hideFilterMenu } = reduxHeader || {\n    hideFilterButton: true,\n    hideFilterMenu: true,\n  };\n  const { patchHeaderFilterButtonAndMenu, patchHeader } = useContext(DataTableContext);\n  const isIconVisible = !hideFilterButton || !hideFilterMenu;\n  const isMenuOpen = !hideFilterMenu;\n\n  const handleClickOutsideMenu = (e) => {\n    onClickOutsideMenu(columnId, e);\n    if (isMenuOpen) patchHeaderFilterButtonAndMenu(columnId, true);\n  };\n\n  useEffect(() => {\n    const closeMenu = () => {\n      patchHeaderFilterButtonAndMenu(columnId, true);\n    };\n    window.addEventListener('blur', closeMenu);\n\n    return () => {\n      window.removeEventListener('blur', closeMenu);\n    };\n  }, [columnId, patchHeaderFilterButtonAndMenu]);\n\n  const handleTriggerClick = (e) => {\n    onTriggerClick(columnId, e);\n    patchHeaderFilterButtonAndMenu(columnId, false);\n    e.stopPropagation();\n  };\n\n  const [referenceElement, setReferenceElement] = useState(null);\n\n  const buttonTrapCallback = useCallback(() => {\n    patchHeader(columnId, { hideFilterMenu: true, hideFilterButton: false });\n    referenceElement?.focus();\n  }, [columnId, patchHeader, referenceElement]);\n  return (\n    <div\n      // This is here to prevent propagation, and not trigger the sort functionality\n      onClick={(e) => e.stopPropagation()}\n      onKeyDown={(e) => {\n        e.stopPropagation();\n        if (e.code === 'Escape') {\n          patchHeader(columnId, { hideFilterMenu: true, hideFilterButton: false });\n          referenceElement.focus();\n        }\n        // Stop propagation for some reason is not enough to prevent scrolling of the datatable\n        // so we just prevent default behaviour in this case\n        if (['ArrowUp', 'ArrowDown'].includes(e.code)) {\n          e.preventDefault();\n        }\n      }}\n      style={{ display: 'flex' }}\n    >\n      <FilterButton hide={!isIconVisible} data-testid={DATA_TESTID.DATA_TABLE_FILTER_BUTTON}>\n        <Button\n          onClick={handleTriggerClick}\n          buttonType=\"text\"\n          aria-label={ariaLabel}\n          aria-hidden=\"true\"\n          size=\"s\"\n          leftIcon={triggerIcon}\n          // implement treeview mergerefs\n          innerRef={(_ref) => {\n            if (isIconVisible) setReferenceElement(_ref);\n            innerRef.current = _ref;\n          }}\n          tabIndex={reduxHeader?.withTabStops ? 0 : -1}\n        />\n      </FilterButton>\n      {referenceElement && (\n        <DSPopperJS\n          referenceElement={referenceElement}\n          showPopover={isMenuOpen}\n          closeContextMenu={handleClickOutsideMenu}\n          data-testid={DATA_TESTID.DATA_TABLE_FILTER_MENU_CONTENT}\n          startPlacementPreference=\"bottom-end\"\n          customOffset={[5, 4]}\n          withoutArrow\n          zIndex={10}\n          withoutAnimation\n          extraPopperStyles={{\n            ...customStyles,\n            minWidth: column.ref?.current?.offsetWidth ?? '0px',\n          }}\n          placementOrderPreference={['bottom-end']}\n        >\n          <PopperContent>\n            <ButtonTrap cb={buttonTrapCallback} />\n            {menuContent}\n            <ButtonTrap cb={buttonTrapCallback} />\n          </PopperContent>\n        </DSPopperJS>\n      )}\n    </div>\n  );\n};\n"],
+  "mappings": "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",
   "names": []
 }

package/dist/esm/exported-related/RowRenderer/DefaultRowContentRenderer.js

@@ -47,7 +47,7 @@ const DefaultRowContentRenderer = (props) => {
     backgroundColor = "white",
     dropIndicatorPosition,
     focusedRowId,
-    selectedRowId,
+    drilldownRowId,
     compact
   } = props;
   const rowRef = useRef(null);
@@ -108,7 +108,7 @@ const DefaultRowContentRenderer = (props) => {
       onMouseDown: handleSelectDisableRow
     }), /* @__PURE__ */ React2.createElement(Cells, {
       row,
-      isRowSelected: selectedRowId === row.uid,
+      isRowSelected: drilldownRowId === row.uid,
       isDragOverlay,
       key: row.uid
     })), isExpandable && row.isExpanded && DetailsView && /* @__PURE__ */ React2.createElement(DetailsWrapper, null, /* @__PURE__ */ React2.createElement(DetailsView, {
@@ -130,7 +130,7 @@ const DefaultRowContentRenderer = (props) => {
     isDragOverlay,
     noSelectionColumn,
     handleSelectDisableRow,
-    selectedRowId,
+    drilldownRowId,
     detailsIndent
   ]);
   return PureRowContent;