@elliemae/ds-data-table 3.5.1-rc.1 → 3.6.0-next.2

package/dist/cjs/DataTableContext.js

@@ -55,6 +55,7 @@ const defaultProps = {
   dragAndDropColumns: false,
   onColumnsReorder: () => null,
   onColumnResize: () => null,
+  onColumnSizeChange: () => null,
   onRowClick: () => null,
   onRowFocus: () => null,
   noSelectionColumn: false,
@@ -66,17 +67,9 @@ const defaultProps = {
   onFiltersChange: () => null,
   onPageChanged: () => null,
   onRowExpand: () => null,
-  onColumnSortChange: () => null
+  onColumnSortChange: () => null,
+  onColumnSort: () => null
 };
-const DataTableContext = (0, import_react.createContext)({
-  tableProps: defaultProps,
-  layoutHelpers: {},
-  flattenedData: [],
-  allDataFlattened: [],
-  visibleColumns: [],
-  paginationHelpers: {},
-  virtualListRef: (0, import_react.createRef)(),
-  columnHeaderRef: (0, import_react.createRef)()
-});
+const DataTableContext = (0, import_react.createContext)();
 var DataTableContext_default = DataTableContext;
 //# sourceMappingURL=DataTableContext.js.map

package/dist/cjs/DataTableContext.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/DataTableContext.tsx", "../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["import { createContext, createRef } from 'react';\nimport { ColsLayoutStyle } from './configs/constants';\nimport { TypescriptContext, TypescriptProps } from './types/props';\n\nexport const defaultProps: Partial<TypescriptProps> = {\n  height: '100%',\n  width: '100%',\n  renderRowActions: false,\n  getRowVariant: () => 'ds-primary-row',\n  isExpandable: false,\n  uniqueRowAccessor: undefined,\n  expandedRows: {},\n  disabledRows: {},\n  isResizeable: false,\n  isLoading: false,\n  pagination: false,\n  withFilterBar: false,\n  filters: [],\n\n  colsLayoutStyle: ColsLayoutStyle.Fixed,\n  hiddenColumns: [],\n  noResultsMessage: 'No Results Found',\n\n  dragAndDropRows: false,\n  maxDragAndDropLevel: 1,\n  onRowsReorder: () => null,\n\n  dragAndDropColumns: false,\n  onColumnsReorder: () => null,\n  onColumnResize: () => null,\n\n  onRowClick: () => null,\n  onRowFocus: () => null,\n\n  noSelectionColumn: false,\n  selectSingle: false,\n  selection: undefined,\n  onSelectionChange: () => null, // selectionHashMap -> { ...[id]: enum(true/'mixed'/false) }\n\n  textWrap: 'wrap',\n\n  onCellValueChange: () => null,\n\n  onFiltersChange: () => null,\n\n  onPageChanged: () => null,\n\n  onRowExpand: () => null,\n\n  onColumnSortChange: () => null,\n};\n\n/** Context for cross component communication */\nconst DataTableContext = createContext<TypescriptContext>({\n  tableProps: defaultProps,\n  layoutHelpers: {},\n  flattenedData: [],\n  allDataFlattened: [],\n  visibleColumns: [],\n  paginationHelpers: {},\n  virtualListRef: createRef<HTMLDivElement>(),\n  columnHeaderRef: createRef<HTMLDivElement>(),\n});\n\nexport { DataTableContext };\nexport default DataTableContext;\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,mBAAyC;AACzC,uBAAgC;AAGzB,MAAM,eAAyC;AAAA,EACpD,QAAQ;AAAA,EACR,OAAO;AAAA,EACP,kBAAkB;AAAA,EAClB,eAAe,MAAM;AAAA,EACrB,cAAc;AAAA,EACd,mBAAmB;AAAA,EACnB,cAAc,CAAC;AAAA,EACf,cAAc,CAAC;AAAA,EACf,cAAc;AAAA,EACd,WAAW;AAAA,EACX,YAAY;AAAA,EACZ,eAAe;AAAA,EACf,SAAS,CAAC;AAAA,EAEV,iBAAiB,iCAAgB;AAAA,EACjC,eAAe,CAAC;AAAA,EAChB,kBAAkB;AAAA,EAElB,iBAAiB;AAAA,EACjB,qBAAqB;AAAA,EACrB,eAAe,MAAM;AAAA,EAErB,oBAAoB;AAAA,EACpB,kBAAkB,MAAM;AAAA,EACxB,gBAAgB,MAAM;AAAA,EAEtB,YAAY,MAAM;AAAA,EAClB,YAAY,MAAM;AAAA,EAElB,mBAAmB;AAAA,EACnB,cAAc;AAAA,EACd,WAAW;AAAA,EACX,mBAAmB,MAAM;AAAA,EAEzB,UAAU;AAAA,EAEV,mBAAmB,MAAM;AAAA,EAEzB,iBAAiB,MAAM;AAAA,EAEvB,eAAe,MAAM;AAAA,EAErB,aAAa,MAAM;AAAA,EAEnB,oBAAoB,MAAM;AAC5B;AAGA,MAAM,uBAAmB,4BAAiC;AAAA,EACxD,YAAY;AAAA,EACZ,eAAe,CAAC;AAAA,EAChB,eAAe,CAAC;AAAA,EAChB,kBAAkB,CAAC;AAAA,EACnB,gBAAgB,CAAC;AAAA,EACjB,mBAAmB,CAAC;AAAA,EACpB,oBAAgB,wBAA0B;AAAA,EAC1C,qBAAiB,wBAA0B;AAC7C,CAAC;AAGD,IAAO,2BAAQ;",
+  "sourcesContent": ["import { createContext } from 'react';\nimport { ColsLayoutStyle } from './configs/constants';\nimport { TypescriptContext, TypescriptProps } from './types/props';\n\nexport const defaultProps: Partial<TypescriptProps> = {\n  height: '100%',\n  width: '100%',\n  renderRowActions: false,\n  getRowVariant: () => 'ds-primary-row',\n  isExpandable: false,\n  uniqueRowAccessor: undefined,\n  expandedRows: {},\n  disabledRows: {},\n  isResizeable: false,\n  isLoading: false,\n  pagination: false,\n  withFilterBar: false,\n  filters: [],\n\n  colsLayoutStyle: ColsLayoutStyle.Fixed,\n  hiddenColumns: [],\n  noResultsMessage: 'No Results Found',\n\n  dragAndDropRows: false,\n  maxDragAndDropLevel: 1,\n  onRowsReorder: () => null,\n\n  dragAndDropColumns: false,\n  onColumnsReorder: () => null,\n  onColumnResize: () => null,\n  onColumnSizeChange: () => null,\n\n  onRowClick: () => null,\n  onRowFocus: () => null,\n\n  noSelectionColumn: false,\n  selectSingle: false,\n  selection: undefined,\n  onSelectionChange: () => null, // selectionHashMap -> { ...[id]: enum(true/'mixed'/false) }\n\n  textWrap: 'wrap',\n\n  onCellValueChange: () => null,\n\n  onFiltersChange: () => null,\n\n  onPageChanged: () => null,\n\n  onRowExpand: () => null,\n\n  onColumnSortChange: () => null,\n  onColumnSort: () => null,\n};\n\n/** Context for cross component communication */\nconst DataTableContext = createContext<TypescriptContext>();\n\nexport { DataTableContext };\nexport default DataTableContext;\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,mBAA8B;AAC9B,uBAAgC;AAGzB,MAAM,eAAyC;AAAA,EACpD,QAAQ;AAAA,EACR,OAAO;AAAA,EACP,kBAAkB;AAAA,EAClB,eAAe,MAAM;AAAA,EACrB,cAAc;AAAA,EACd,mBAAmB;AAAA,EACnB,cAAc,CAAC;AAAA,EACf,cAAc,CAAC;AAAA,EACf,cAAc;AAAA,EACd,WAAW;AAAA,EACX,YAAY;AAAA,EACZ,eAAe;AAAA,EACf,SAAS,CAAC;AAAA,EAEV,iBAAiB,iCAAgB;AAAA,EACjC,eAAe,CAAC;AAAA,EAChB,kBAAkB;AAAA,EAElB,iBAAiB;AAAA,EACjB,qBAAqB;AAAA,EACrB,eAAe,MAAM;AAAA,EAErB,oBAAoB;AAAA,EACpB,kBAAkB,MAAM;AAAA,EACxB,gBAAgB,MAAM;AAAA,EACtB,oBAAoB,MAAM;AAAA,EAE1B,YAAY,MAAM;AAAA,EAClB,YAAY,MAAM;AAAA,EAElB,mBAAmB;AAAA,EACnB,cAAc;AAAA,EACd,WAAW;AAAA,EACX,mBAAmB,MAAM;AAAA,EAEzB,UAAU;AAAA,EAEV,mBAAmB,MAAM;AAAA,EAEzB,iBAAiB,MAAM;AAAA,EAEvB,eAAe,MAAM;AAAA,EAErB,aAAa,MAAM;AAAA,EAEnB,oBAAoB,MAAM;AAAA,EAC1B,cAAc,MAAM;AACtB;AAGA,MAAM,uBAAmB,4BAAiC;AAG1D,IAAO,2BAAQ;",
   "names": []
 }

package/dist/cjs/DataTableSchema.js

@@ -180,11 +180,13 @@ const DataTableSchema = {
     "Custom content to show when dataset is empty"
   ),
   isLoading: import_ds_utilities.PropTypes.bool.description("Whether to show a global loader in the datatable"),
-  onColumnResize: import_ds_utilities.PropTypes.func.description("Function invoked when a column is resized"),
+  onColumnResize: import_ds_utilities.PropTypes.func.description("Function invoked when a column is resized").deprecated({ version: "4.x", message: "Use onColumnSizeChange" }),
+  onColumnSizeChange: import_ds_utilities.PropTypes.func.description("Function invoked when a column is resized"),
   onRowClick: import_ds_utilities.PropTypes.func.description("Function invoked when clicking a row"),
   onRowFocus: import_ds_utilities.PropTypes.func.description("Function invoked when focusing a row"),
   onCellValueChange: import_ds_utilities.PropTypes.func.description("Function invoked when an editable cell's content is changed"),
-  onColumnSortChange: import_ds_utilities.PropTypes.func.description("Function invoked when a column is sorted"),
+  onColumnSortChange: import_ds_utilities.PropTypes.func.description("Function invoked when a column is sorted").deprecated({ version: "4.x", message: "Use onColumnSort" }),
+  onColumnSort: import_ds_utilities.PropTypes.func.description("Function invoked when a column is sorted"),
   actionRef: import_ds_utilities.PropTypes.object.description("Reference where all the exposed action callbacks will be exposed")
 };
 //# sourceMappingURL=DataTableSchema.js.map

package/dist/cjs/DataTableSchema.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/DataTableSchema.tsx", "../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["/* eslint-disable max-lines */\nimport { PropTypes } from '@elliemae/ds-utilities';\nimport { WeakValidationMap } from 'react';\n\nconst outOfTheBoxFilterType = PropTypes.oneOf([\n  'ds-filter-select',\n  'ds-filter-multi-select',\n  'ds-filter-single-date',\n  'ds-filter-date-range',\n  'ds-filter-number-range',\n]);\n\nconst textWrappingType = PropTypes.oneOf(['wrap', 'wrap-all', 'truncate']);\n\nconst columnPropTypes = {\n  Header: PropTypes.oneOfType([PropTypes.string, PropTypes.func, PropTypes.element]).description(\n    'Header name or component',\n  ).isRequired,\n  accessor: PropTypes.string.description('The entry of the data that this column will display'),\n  id: PropTypes.string.description('The id of the column, will default to the Header or accessor if not present'),\n  filter: outOfTheBoxFilterType.description('out-of-the-box filters'),\n  Filter: PropTypes.oneOfType([PropTypes.func, PropTypes.element]).description(\n    'The custom component to render as a filter',\n  ),\n  Cell: PropTypes.oneOfType([PropTypes.object, PropTypes.func]).description('The custom cell renderer component'),\n  editable: PropTypes.oneOfType([PropTypes.string, PropTypes.func, PropTypes.element]).description(\n    'The editable out-of-the-box or component to render',\n  ),\n  disableDnD: PropTypes.bool.description('Whereas this column should be draggable'),\n  canResize: PropTypes.bool.description('Whereas this column should be resizable'),\n  width: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).description('Width of this column'),\n  minWidth: PropTypes.number.description('Minimum width of this column, useful when resizing'),\n  maxWidth: PropTypes.number.description('Maximum width of this column, useful when resizing'),\n  canSort: PropTypes.bool.description('Whereas this column is sortable'),\n  isSortedDesc: PropTypes.bool.description('Whereas this column is sorted descendingly'),\n  required: PropTypes.bool.description('Whereas this column is required'),\n  alwaysDisplayEditIcon: PropTypes.bool.description(\n    'Whereas to always show the edit icon on this column if it is editable',\n  ),\n  textWrap: textWrappingType.description('How to wrap the text in the column'),\n};\n\nconst columnsPropTypes = PropTypes.shape(columnPropTypes).description('Columns props');\n\nconst rowPropTypes = {\n  tableRowDetails: PropTypes.oneOfType([PropTypes.func, PropTypes.element]).description('Component for row details'),\n  dimsumHeaderValue: PropTypes.string.description('Header displayed on the header variant of the row'),\n};\n\nconst rowsPropTypes = PropTypes.shape(rowPropTypes).description('Rows props');\n\nexport const DataTableSchema = {\n  columns: PropTypes.arrayOf(columnsPropTypes).description('Array of columns').isRequired,\n  data: PropTypes.arrayOf(rowsPropTypes).description('Array of rows'),\n  height: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).description('Height of the datatable component'),\n  width: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).description('Width of the datatable component'),\n  renderRowActions: PropTypes.oneOfType([PropTypes.object, PropTypes.bool]).description(\n    'The renderer to use for the action toolbar',\n  ),\n  isExpandable: PropTypes.bool.description('Whether the datatable is expandable').defaultValue(false),\n  uniqueRowAccessor: PropTypes.oneOfType([\n    PropTypes.string,\n    PropTypes.arrayOf(PropTypes.string),\n    PropTypes.func,\n  ]).description(\n    'Column / Combination of columns / Function to call to produce a unique identifier for each row.' +\n      ' This is necessary for the selectable and drag and drop features',\n  ),\n  disabledRows: PropTypes.object.description(\n    'Object with the identifiers of the rows as keys, and booleans as values. Specifies if a row is disabled or not',\n  ),\n  expandedRows: PropTypes.object.description(\n    'Object with the identifiers of the rows as keys, and booleans as values. Specifies if a row is expanded or not',\n  ),\n  onRowExpand: PropTypes.func.description('Function invoked when a row is (un)expanded'),\n  cellRendererProps: PropTypes.object.description(\n    'Object with all the props you want the cells to have available when rendering',\n  ),\n  selectSingle: PropTypes.bool.description('Whether the selectable feature is single').defaultValue(false),\n  selection: PropTypes.object.description(\n    'Object with the identifiers of the rows as keys, and booleans as values. Specifies if a row is selected or not',\n  ),\n  onSelectionChange: PropTypes.func.description('Function invoked when a row is selected'),\n  groupedRowsRenderHeader: PropTypes.oneOfType([PropTypes.string, PropTypes.func]).description(\n    'String | Function to call which will display in the row headers',\n  ),\n  isResizeable: PropTypes.bool.description(\"Whether the datatable's columns are resizeable\"),\n  filters: PropTypes.arrayOf(\n    PropTypes.shape({\n      id: PropTypes.string,\n      type: PropTypes.string,\n      value: PropTypes.any,\n    }),\n  ).description('Array of filter keys and values'),\n  withFilterBar: PropTypes.bool.description('Whether to display the filter bar'),\n  filterBarProps: PropTypes.shape({\n    filterBarAddonRenderer: PropTypes.func.description('Render filterbar right addon component'),\n    customPillRenderer: PropTypes.oneOfType([PropTypes.func, PropTypes.element]).description(\n      'If you specify custom filters, you will need to render their pills here',\n    ),\n    isDropdownMenuOpen: PropTypes.bool.description('Wether the DropdownMenu is Open or not.'),\n    onDropdownMenuToggle: PropTypes.func.description('Callback to toggle the DropdownMenu.'),\n    onClearAllFiltersClick: PropTypes.func.description('Callback for Clear Al Filters option.'),\n    onDropdownMenuClickOutside: PropTypes.func.description('Callback triggered when clicking outside DropdownMenu.'),\n    onDropdownMenuTriggerClick: PropTypes.func.description('Callback triggered when clicking DropdownMenu ellipsis.'),\n    extraOptions: PropTypes.arrayOf(\n      PropTypes.shape({\n        type: PropTypes.string,\n        id: PropTypes.string,\n        label: PropTypes.string,\n        onClick: PropTypes.func,\n      }),\n    ).description('Any extra option you want in the dropdownmenu of the filter bar'),\n  }).description('Props for the filter bar'),\n  onFiltersChange: PropTypes.func.description('Function invoked when filters change'),\n  pagination: PropTypes.oneOfType([\n    PropTypes.oneOf([false]),\n    PropTypes.shape({\n      pageCount: PropTypes.number.description('How many pages are there'),\n      pageIndex: PropTypes.number.description('Index of the current page, starting from 1').defaultValue(1),\n      canPreviousPage: PropTypes.bool.description('Whether the previous button is disabled or not').defaultValue(true),\n      canNextPage: PropTypes.bool.description('Whether the next button is disabled or not').defaultValue(true),\n      pageSize: PropTypes.number.description('The current page size').defaultValue(10),\n      showPerPageSelector: PropTypes.bool.description('Whether to show the page selector').defaultValue(true),\n      perPageOptions: PropTypes.arrayOf(\n        PropTypes.oneOfType([\n          PropTypes.number,\n          PropTypes.shape({\n            dsId: PropTypes.string,\n            value: PropTypes.number,\n            label: PropTypes.string,\n            type: PropTypes.oneOf(['single']),\n          }),\n        ]),\n      )\n        .description('The available options for page size')\n        .defaultValue([10]),\n      perPageStep: PropTypes.number.description('Step for the per page options').defaultValue(5),\n      minPerPage: PropTypes.number.description('Step for the per page options').defaultValue(0),\n      maxPerPage: PropTypes.number.description('Step for the per page options').defaultValue(100),\n      onPageSizeChange: PropTypes.func\n        .description('Function invoked when the page size changes')\n        .defaultValue(() => null),\n      onPreviousPage: PropTypes.func\n        .description('Function invoked when the previous button is pressed')\n        .defaultValue(() => null),\n      onPageChange: PropTypes.func.description('Function invoked when the page changes').defaultValue(() => null),\n      onNextPage: PropTypes.func.description('Function invoked when next button is pressed').defaultValue(() => null),\n      pageDetails: PropTypes.arrayOf(PropTypes.string).description('Details to provide for each page').defaultValue([]),\n      dataIsPage: PropTypes.bool.description('Whether to treat data as a page').defaultValue(false),\n      pageDetailsTitle: PropTypes.string\n        .description('The title of the details (usually a column of your dataset)')\n        .defaultValue(''),\n    }),\n  ]).description('Object containing the data for the pagination'),\n  colsLayoutStyle: PropTypes.oneOf(['auto', 'fixed']).description('Whether the datatable fills its container or not'),\n  hiddenColumns: PropTypes.arrayOf(PropTypes.string).description('IDs of columns not to render'),\n  dragAndDropRows: PropTypes.bool.description('Whether to turn on the d&d feature for the rows').defaultValue(false),\n  onRowsReorder: PropTypes.func.description('Function invoked when a row is reordered'),\n  maxDragAndDropLevel: PropTypes.number.description('Which level is the maximum allowed to drop into'),\n  dragAndDropColumns: PropTypes.bool.description('Whether to turn on the d&d feature for the columns'),\n  onColumnsReorder: PropTypes.func.description('Function invoked when a column is reordered'),\n  textWrap: textWrappingType.description('Global wrapping rule'),\n  noResultsMessage: PropTypes.string.description('Message to show when no more data is available'),\n  noResultsSecondaryMessage: PropTypes.string.description('Secondary message to show when no more data is available'),\n  noResultsButtonLabel: PropTypes.string.description('Label of the button when no more data is available'),\n  noResultsPlaceholder: PropTypes.oneOfType([PropTypes.func, PropTypes.element]).description(\n    'Custom content to show when dataset is empty',\n  ),\n  isLoading: PropTypes.bool.description('Whether to show a global loader in the datatable'),\n  onColumnResize: PropTypes.func.description('Function invoked when a column is resized'),\n  onRowClick: PropTypes.func.description('Function invoked when clicking a row'),\n  onRowFocus: PropTypes.func.description('Function invoked when focusing a row'),\n  onCellValueChange: PropTypes.func.description(\"Function invoked when an editable cell's content is changed\"),\n  onColumnSortChange: PropTypes.func.description('Function invoked when a column is sorted'),\n  actionRef: PropTypes.object.description('Reference where all the exposed action callbacks will be exposed'),\n} as WeakValidationMap<unknown>;\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": "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",
+  "sourcesContent": ["/* eslint-disable max-lines */\nimport { PropTypes } from '@elliemae/ds-utilities';\nimport { WeakValidationMap } from 'react';\n\nconst outOfTheBoxFilterType = PropTypes.oneOf([\n  'ds-filter-select',\n  'ds-filter-multi-select',\n  'ds-filter-single-date',\n  'ds-filter-date-range',\n  'ds-filter-number-range',\n]);\n\nconst textWrappingType = PropTypes.oneOf(['wrap', 'wrap-all', 'truncate']);\n\nconst columnPropTypes = {\n  Header: PropTypes.oneOfType([PropTypes.string, PropTypes.func, PropTypes.element]).description(\n    'Header name or component',\n  ).isRequired,\n  accessor: PropTypes.string.description('The entry of the data that this column will display'),\n  id: PropTypes.string.description('The id of the column, will default to the Header or accessor if not present'),\n  filter: outOfTheBoxFilterType.description('out-of-the-box filters'),\n  Filter: PropTypes.oneOfType([PropTypes.func, PropTypes.element]).description(\n    'The custom component to render as a filter',\n  ),\n  Cell: PropTypes.oneOfType([PropTypes.object, PropTypes.func]).description('The custom cell renderer component'),\n  editable: PropTypes.oneOfType([PropTypes.string, PropTypes.func, PropTypes.element]).description(\n    'The editable out-of-the-box or component to render',\n  ),\n  disableDnD: PropTypes.bool.description('Whereas this column should be draggable'),\n  canResize: PropTypes.bool.description('Whereas this column should be resizable'),\n  width: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).description('Width of this column'),\n  minWidth: PropTypes.number.description('Minimum width of this column, useful when resizing'),\n  maxWidth: PropTypes.number.description('Maximum width of this column, useful when resizing'),\n  canSort: PropTypes.bool.description('Whereas this column is sortable'),\n  isSortedDesc: PropTypes.bool.description('Whereas this column is sorted descendingly'),\n  required: PropTypes.bool.description('Whereas this column is required'),\n  alwaysDisplayEditIcon: PropTypes.bool.description(\n    'Whereas to always show the edit icon on this column if it is editable',\n  ),\n  textWrap: textWrappingType.description('How to wrap the text in the column'),\n};\n\nconst columnsPropTypes = PropTypes.shape(columnPropTypes).description('Columns props');\n\nconst rowPropTypes = {\n  tableRowDetails: PropTypes.oneOfType([PropTypes.func, PropTypes.element]).description('Component for row details'),\n  dimsumHeaderValue: PropTypes.string.description('Header displayed on the header variant of the row'),\n};\n\nconst rowsPropTypes = PropTypes.shape(rowPropTypes).description('Rows props');\n\nexport const DataTableSchema = {\n  columns: PropTypes.arrayOf(columnsPropTypes).description('Array of columns').isRequired,\n  data: PropTypes.arrayOf(rowsPropTypes).description('Array of rows'),\n  height: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).description('Height of the datatable component'),\n  width: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).description('Width of the datatable component'),\n  renderRowActions: PropTypes.oneOfType([PropTypes.object, PropTypes.bool]).description(\n    'The renderer to use for the action toolbar',\n  ),\n  isExpandable: PropTypes.bool.description('Whether the datatable is expandable').defaultValue(false),\n  uniqueRowAccessor: PropTypes.oneOfType([\n    PropTypes.string,\n    PropTypes.arrayOf(PropTypes.string),\n    PropTypes.func,\n  ]).description(\n    'Column / Combination of columns / Function to call to produce a unique identifier for each row.' +\n      ' This is necessary for the selectable and drag and drop features',\n  ),\n  disabledRows: PropTypes.object.description(\n    'Object with the identifiers of the rows as keys, and booleans as values. Specifies if a row is disabled or not',\n  ),\n  expandedRows: PropTypes.object.description(\n    'Object with the identifiers of the rows as keys, and booleans as values. Specifies if a row is expanded or not',\n  ),\n  onRowExpand: PropTypes.func.description('Function invoked when a row is (un)expanded'),\n  cellRendererProps: PropTypes.object.description(\n    'Object with all the props you want the cells to have available when rendering',\n  ),\n  selectSingle: PropTypes.bool.description('Whether the selectable feature is single').defaultValue(false),\n  selection: PropTypes.object.description(\n    'Object with the identifiers of the rows as keys, and booleans as values. Specifies if a row is selected or not',\n  ),\n  onSelectionChange: PropTypes.func.description('Function invoked when a row is selected'),\n  groupedRowsRenderHeader: PropTypes.oneOfType([PropTypes.string, PropTypes.func]).description(\n    'String | Function to call which will display in the row headers',\n  ),\n  isResizeable: PropTypes.bool.description(\"Whether the datatable's columns are resizeable\"),\n  filters: PropTypes.arrayOf(\n    PropTypes.shape({\n      id: PropTypes.string,\n      type: PropTypes.string,\n      value: PropTypes.any,\n    }),\n  ).description('Array of filter keys and values'),\n  withFilterBar: PropTypes.bool.description('Whether to display the filter bar'),\n  filterBarProps: PropTypes.shape({\n    filterBarAddonRenderer: PropTypes.func.description('Render filterbar right addon component'),\n    customPillRenderer: PropTypes.oneOfType([PropTypes.func, PropTypes.element]).description(\n      'If you specify custom filters, you will need to render their pills here',\n    ),\n    isDropdownMenuOpen: PropTypes.bool.description('Wether the DropdownMenu is Open or not.'),\n    onDropdownMenuToggle: PropTypes.func.description('Callback to toggle the DropdownMenu.'),\n    onClearAllFiltersClick: PropTypes.func.description('Callback for Clear Al Filters option.'),\n    onDropdownMenuClickOutside: PropTypes.func.description('Callback triggered when clicking outside DropdownMenu.'),\n    onDropdownMenuTriggerClick: PropTypes.func.description('Callback triggered when clicking DropdownMenu ellipsis.'),\n    extraOptions: PropTypes.arrayOf(\n      PropTypes.shape({\n        type: PropTypes.string,\n        id: PropTypes.string,\n        label: PropTypes.string,\n        onClick: PropTypes.func,\n      }),\n    ).description('Any extra option you want in the dropdownmenu of the filter bar'),\n  }).description('Props for the filter bar'),\n  onFiltersChange: PropTypes.func.description('Function invoked when filters change'),\n  pagination: PropTypes.oneOfType([\n    PropTypes.oneOf([false]),\n    PropTypes.shape({\n      pageCount: PropTypes.number.description('How many pages are there'),\n      pageIndex: PropTypes.number.description('Index of the current page, starting from 1').defaultValue(1),\n      canPreviousPage: PropTypes.bool.description('Whether the previous button is disabled or not').defaultValue(true),\n      canNextPage: PropTypes.bool.description('Whether the next button is disabled or not').defaultValue(true),\n      pageSize: PropTypes.number.description('The current page size').defaultValue(10),\n      showPerPageSelector: PropTypes.bool.description('Whether to show the page selector').defaultValue(true),\n      perPageOptions: PropTypes.arrayOf(\n        PropTypes.oneOfType([\n          PropTypes.number,\n          PropTypes.shape({\n            dsId: PropTypes.string,\n            value: PropTypes.number,\n            label: PropTypes.string,\n            type: PropTypes.oneOf(['single']),\n          }),\n        ]),\n      )\n        .description('The available options for page size')\n        .defaultValue([10]),\n      perPageStep: PropTypes.number.description('Step for the per page options').defaultValue(5),\n      minPerPage: PropTypes.number.description('Step for the per page options').defaultValue(0),\n      maxPerPage: PropTypes.number.description('Step for the per page options').defaultValue(100),\n      onPageSizeChange: PropTypes.func\n        .description('Function invoked when the page size changes')\n        .defaultValue(() => null),\n      onPreviousPage: PropTypes.func\n        .description('Function invoked when the previous button is pressed')\n        .defaultValue(() => null),\n      onPageChange: PropTypes.func.description('Function invoked when the page changes').defaultValue(() => null),\n      onNextPage: PropTypes.func.description('Function invoked when next button is pressed').defaultValue(() => null),\n      pageDetails: PropTypes.arrayOf(PropTypes.string).description('Details to provide for each page').defaultValue([]),\n      dataIsPage: PropTypes.bool.description('Whether to treat data as a page').defaultValue(false),\n      pageDetailsTitle: PropTypes.string\n        .description('The title of the details (usually a column of your dataset)')\n        .defaultValue(''),\n    }),\n  ]).description('Object containing the data for the pagination'),\n  colsLayoutStyle: PropTypes.oneOf(['auto', 'fixed']).description('Whether the datatable fills its container or not'),\n  hiddenColumns: PropTypes.arrayOf(PropTypes.string).description('IDs of columns not to render'),\n  dragAndDropRows: PropTypes.bool.description('Whether to turn on the d&d feature for the rows').defaultValue(false),\n  onRowsReorder: PropTypes.func.description('Function invoked when a row is reordered'),\n  maxDragAndDropLevel: PropTypes.number.description('Which level is the maximum allowed to drop into'),\n  dragAndDropColumns: PropTypes.bool.description('Whether to turn on the d&d feature for the columns'),\n  onColumnsReorder: PropTypes.func.description('Function invoked when a column is reordered'),\n  textWrap: textWrappingType.description('Global wrapping rule'),\n  noResultsMessage: PropTypes.string.description('Message to show when no more data is available'),\n  noResultsSecondaryMessage: PropTypes.string.description('Secondary message to show when no more data is available'),\n  noResultsButtonLabel: PropTypes.string.description('Label of the button when no more data is available'),\n  noResultsPlaceholder: PropTypes.oneOfType([PropTypes.func, PropTypes.element]).description(\n    'Custom content to show when dataset is empty',\n  ),\n  isLoading: PropTypes.bool.description('Whether to show a global loader in the datatable'),\n  onColumnResize: PropTypes.func\n    .description('Function invoked when a column is resized')\n    .deprecated({ version: '4.x', message: 'Use onColumnSizeChange' }),\n  onColumnSizeChange: PropTypes.func.description('Function invoked when a column is resized'),\n  onRowClick: PropTypes.func.description('Function invoked when clicking a row'),\n  onRowFocus: PropTypes.func.description('Function invoked when focusing a row'),\n  onCellValueChange: PropTypes.func.description(\"Function invoked when an editable cell's content is changed\"),\n  onColumnSortChange: PropTypes.func\n    .description('Function invoked when a column is sorted')\n    .deprecated({ version: '4.x', message: 'Use onColumnSort' }),\n  onColumnSort: PropTypes.func.description('Function invoked when a column is sorted'),\n  actionRef: PropTypes.object.description('Reference where all the exposed action callbacks will be exposed'),\n} as WeakValidationMap<unknown>;\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": "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",
   "names": []
 }

package/dist/cjs/addons/Columns/ColumnSelectMultiple/ColumnSelectMultiple.js

@@ -102,7 +102,7 @@ const multiSelectColumn = {
         "aria-disabled": false,
         checked: selectedState,
         onClick: onChangeHandler,
-        onChange: stopThePropagation,
+        onChange: (_, e) => e.stopPropagation(),
         disabled: disabledRows[row.uid],
         innerRef: cell.ref,
         tabIndex: isRowSelected ? 0 : -1,

package/dist/cjs/addons/Columns/ColumnSelectMultiple/ColumnSelectMultiple.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/addons/Columns/ColumnSelectMultiple/ColumnSelectMultiple.tsx", "../../../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["import React, { useMemo, useCallback } from 'react';\nimport { DSControlledCheckbox } from '@elliemae/ds-controlled-form';\nimport { TypescriptColumn, TypescriptSelection } from '../../../types/props';\nimport { DATA_TESTID } from '../../../configs/constants';\n\nconst stopThePropagation = (e: React.MouseEvent | React.KeyboardEvent) => e.stopPropagation();\n\nexport const multiSelectColumn: TypescriptColumn<HTMLInputElement> = {\n  // Build our multiSelecter column\n  id: 'multiSelecter', // Make sure it has an ID\n  Header: ({ ctx }) => {\n    const {\n      tableProps: { onSelectionChange, selection, data, disabledRows },\n      allDataFlattened,\n    } = ctx;\n\n    // We for sure have selection, so we just typecast it for TS reasons\n    const dtSelection = selection ?? {};\n\n    const selectionKeyCount = Object.keys(dtSelection).length;\n\n    const currentGlobalState = useMemo(\n      () => (selectionKeyCount > 0 && selectionKeyCount < data.length ? 'mixed' : selectionKeyCount > 0),\n      [selectionKeyCount, data],\n    );\n\n    // global state toggling: false to true, mixed to true, true to false\n    const newGlobalStateAfterToggle = useMemo(() => currentGlobalState !== true, [currentGlobalState]);\n\n    const newSelection: TypescriptSelection = useMemo(() => {\n      if (!newGlobalStateAfterToggle) return {};\n\n      return allDataFlattened.reduce<TypescriptSelection>((newSelectionObject, datum) => {\n        newSelectionObject[datum.uid] = !disabledRows[datum.uid];\n        return newSelectionObject;\n      }, {});\n    }, [newGlobalStateAfterToggle, allDataFlattened, disabledRows]);\n\n    const onChangeHandler = useCallback(\n      (e: React.ChangeEvent) => {\n        onSelectionChange(newSelection, 'All', e);\n      },\n      [newSelection, onSelectionChange],\n    );\n\n    const ariaControls = useMemo(\n      () => allDataFlattened.map((datum) => `data-table-checkbox-${datum.uid}`).join(' '),\n      [allDataFlattened],\n    );\n\n    return (\n      <DSControlledCheckbox\n        aria-controls={ariaControls}\n        data-testid={DATA_TESTID.DATA_TABLE_GLOBAL_CHECKBOX}\n        aria-label=\"Toggle all rows selected\"\n        checked={currentGlobalState}\n        onChange={onChangeHandler}\n        style={{ cursor: 'pointer' }}\n      />\n    );\n  },\n  Cell: ({ cell, row, isRowSelected, ctx }) => {\n    const {\n      tableProps: { onSelectionChange, selection, disabledRows },\n    } = ctx;\n    const { uid } = row;\n    const selectedState = selection?.[uid] ?? false;\n\n    const onChangeHandler = useCallback(\n      (e: React.ChangeEvent) => {\n        const newState = !selectedState;\n        const newSelection = { ...selection, [uid]: newState }; // we only want true and mixed values\n        if (!newState) delete newSelection[uid]; // if newState is false, remove from the new selection\n        onSelectionChange(newSelection, uid, e);\n      },\n      [onSelectionChange, selectedState, selection, uid],\n    );\n\n    return (\n      <div role=\"presentation\" onClick={stopThePropagation} onKeyDown={stopThePropagation}>\n        <DSControlledCheckbox\n          id={`data-table-checkbox-${uid}`}\n          data-testid={DATA_TESTID.DATA_TABLE_CHECKBOX}\n          aria-label=\"Toggle row selected\"\n          aria-checked={selectedState}\n          aria-disabled={false}\n          checked={selectedState}\n          onClick={onChangeHandler}\n          onChange={stopThePropagation}\n          disabled={disabledRows[row.uid]}\n          innerRef={cell.ref}\n          tabIndex={isRowSelected ? 0 : -1}\n          style={{ cursor: 'pointer' }}\n        />\n      </div>\n    );\n  },\n  textWrap: 'wrap',\n  width: 32,\n  padding: 7,\n  canResize: false,\n  isFocuseable: false,\n  disableDnD: true,\n};\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB;AAAA,mBAA4C;AAC5C,gCAAqC;AAErC,uBAA4B;AAE5B,MAAM,qBAAqB,CAAC,MAA8C,EAAE,gBAAgB;AAErF,MAAM,oBAAwD;AAAA,EAEnE,IAAI;AAAA,EACJ,QAAQ,CAAC,EAAE,IAAI,MAAM;AACnB,UAAM;AAAA,MACJ,YAAY,EAAE,mBAAmB,WAAW,MAAM,aAAa;AAAA,MAC/D;AAAA,IACF,IAAI;AAGJ,UAAM,cAAc,aAAa,CAAC;AAElC,UAAM,oBAAoB,OAAO,KAAK,WAAW,EAAE;AAEnD,UAAM,yBAAqB;AAAA,MACzB,MAAO,oBAAoB,KAAK,oBAAoB,KAAK,SAAS,UAAU,oBAAoB;AAAA,MAChG,CAAC,mBAAmB,IAAI;AAAA,IAC1B;AAGA,UAAM,gCAA4B,sBAAQ,MAAM,uBAAuB,MAAM,CAAC,kBAAkB,CAAC;AAEjG,UAAM,mBAAoC,sBAAQ,MAAM;AACtD,UAAI,CAAC;AAA2B,eAAO,CAAC;AAExC,aAAO,iBAAiB,OAA4B,CAAC,oBAAoB,UAAU;AACjF,2BAAmB,MAAM,OAAO,CAAC,aAAa,MAAM;AACpD,eAAO;AAAA,MACT,GAAG,CAAC,CAAC;AAAA,IACP,GAAG,CAAC,2BAA2B,kBAAkB,YAAY,CAAC;AAE9D,UAAM,sBAAkB;AAAA,MACtB,CAAC,MAAyB;AACxB,0BAAkB,cAAc,OAAO,CAAC;AAAA,MAC1C;AAAA,MACA,CAAC,cAAc,iBAAiB;AAAA,IAClC;AAEA,UAAM,mBAAe;AAAA,MACnB,MAAM,iBAAiB,IAAI,CAAC,UAAU,uBAAuB,MAAM,KAAK,EAAE,KAAK,GAAG;AAAA,MAClF,CAAC,gBAAgB;AAAA,IACnB;AAEA,WACE,4CAAC;AAAA,MACC,iBAAe;AAAA,MACf,eAAa,6BAAY;AAAA,MACzB,cAAW;AAAA,MACX,SAAS;AAAA,MACT,UAAU;AAAA,MACV,OAAO,EAAE,QAAQ,UAAU;AAAA,KAC7B;AAAA,EAEJ;AAAA,EACA,MAAM,CAAC,EAAE,MAAM,KAAK,eAAe,IAAI,MAAM;AAC3C,UAAM;AAAA,MACJ,YAAY,EAAE,mBAAmB,WAAW,aAAa;AAAA,IAC3D,IAAI;AACJ,UAAM,EAAE,IAAI,IAAI;AAChB,UAAM,gBAAgB,YAAY,QAAQ;AAE1C,UAAM,sBAAkB;AAAA,MACtB,CAAC,MAAyB;AACxB,cAAM,WAAW,CAAC;AAClB,cAAM,eAAe,EAAE,GAAG,WAAW,CAAC,MAAM,SAAS;AACrD,YAAI,CAAC;AAAU,iBAAO,aAAa;AACnC,0BAAkB,cAAc,KAAK,CAAC;AAAA,MACxC;AAAA,MACA,CAAC,mBAAmB,eAAe,WAAW,GAAG;AAAA,IACnD;AAEA,WACE,4CAAC;AAAA,MAAI,MAAK;AAAA,MAAe,SAAS;AAAA,MAAoB,WAAW;AAAA,MAC/D,sDAAC;AAAA,QACC,IAAI,uBAAuB;AAAA,QAC3B,eAAa,6BAAY;AAAA,QACzB,cAAW;AAAA,QACX,gBAAc;AAAA,QACd,iBAAe;AAAA,QACf,SAAS;AAAA,QACT,SAAS;AAAA,QACT,UAAU;AAAA,QACV,UAAU,aAAa,IAAI;AAAA,QAC3B,UAAU,KAAK;AAAA,QACf,UAAU,gBAAgB,IAAI;AAAA,QAC9B,OAAO,EAAE,QAAQ,UAAU;AAAA,OAC7B;AAAA,KACF;AAAA,EAEJ;AAAA,EACA,UAAU;AAAA,EACV,OAAO;AAAA,EACP,SAAS;AAAA,EACT,WAAW;AAAA,EACX,cAAc;AAAA,EACd,YAAY;AACd;",
+  "sourcesContent": ["import React, { useMemo, useCallback } from 'react';\nimport { DSControlledCheckbox } from '@elliemae/ds-controlled-form';\nimport { TypescriptColumn, TypescriptSelection } from '../../../types/props';\nimport { DATA_TESTID } from '../../../configs/constants';\n\nconst stopThePropagation = (e: React.MouseEvent | React.KeyboardEvent) => e.stopPropagation();\n\nexport const multiSelectColumn: TypescriptColumn<HTMLInputElement> = {\n  // Build our multiSelecter column\n  id: 'multiSelecter', // Make sure it has an ID\n  Header: ({ ctx }) => {\n    const {\n      tableProps: { onSelectionChange, selection, data, disabledRows },\n      allDataFlattened,\n    } = ctx;\n\n    // We for sure have selection, so we just typecast it for TS reasons\n    const dtSelection = selection ?? {};\n\n    const selectionKeyCount = Object.keys(dtSelection).length;\n\n    const currentGlobalState = useMemo(\n      () => (selectionKeyCount > 0 && selectionKeyCount < data.length ? 'mixed' : selectionKeyCount > 0),\n      [selectionKeyCount, data],\n    );\n\n    // global state toggling: false to true, mixed to true, true to false\n    const newGlobalStateAfterToggle = useMemo(() => currentGlobalState !== true, [currentGlobalState]);\n\n    const newSelection: TypescriptSelection = useMemo(() => {\n      if (!newGlobalStateAfterToggle) return {};\n\n      return allDataFlattened.reduce<TypescriptSelection>((newSelectionObject, datum) => {\n        newSelectionObject[datum.uid] = !disabledRows[datum.uid];\n        return newSelectionObject;\n      }, {});\n    }, [newGlobalStateAfterToggle, allDataFlattened, disabledRows]);\n\n    const onChangeHandler = useCallback(\n      (e: React.ChangeEvent) => {\n        onSelectionChange(newSelection, 'All', e);\n      },\n      [newSelection, onSelectionChange],\n    );\n\n    const ariaControls = useMemo(\n      () => allDataFlattened.map((datum) => `data-table-checkbox-${datum.uid}`).join(' '),\n      [allDataFlattened],\n    );\n\n    return (\n      <DSControlledCheckbox\n        aria-controls={ariaControls}\n        data-testid={DATA_TESTID.DATA_TABLE_GLOBAL_CHECKBOX}\n        aria-label=\"Toggle all rows selected\"\n        checked={currentGlobalState}\n        onChange={onChangeHandler}\n        style={{ cursor: 'pointer' }}\n      />\n    );\n  },\n  Cell: ({ cell, row, isRowSelected, ctx }) => {\n    const {\n      tableProps: { onSelectionChange, selection, disabledRows },\n    } = ctx;\n    const { uid } = row;\n    const selectedState = selection?.[uid] ?? false;\n\n    const onChangeHandler = useCallback(\n      (e: React.ChangeEvent) => {\n        const newState = !selectedState;\n        const newSelection = { ...selection, [uid]: newState }; // we only want true and mixed values\n        if (!newState) delete newSelection[uid]; // if newState is false, remove from the new selection\n        onSelectionChange(newSelection, uid, e);\n      },\n      [onSelectionChange, selectedState, selection, uid],\n    );\n\n    return (\n      <div role=\"presentation\" onClick={stopThePropagation} onKeyDown={stopThePropagation}>\n        <DSControlledCheckbox\n          id={`data-table-checkbox-${uid}`}\n          data-testid={DATA_TESTID.DATA_TABLE_CHECKBOX}\n          aria-label=\"Toggle row selected\"\n          aria-checked={selectedState}\n          aria-disabled={false}\n          checked={selectedState}\n          onClick={onChangeHandler}\n          onChange={(_, e) => e.stopPropagation()}\n          disabled={disabledRows[row.uid]}\n          innerRef={cell.ref}\n          tabIndex={isRowSelected ? 0 : -1}\n          style={{ cursor: 'pointer' }}\n        />\n      </div>\n    );\n  },\n  textWrap: 'wrap',\n  width: 32,\n  padding: 7,\n  canResize: false,\n  isFocuseable: false,\n  disableDnD: true,\n};\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": "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",
   "names": []
 }

package/dist/cjs/parts/Headers/HeaderCell.js

@@ -58,22 +58,15 @@ const HeaderCell = (props) => {
   const { column, isDragOverlay, colSpan } = props;
   const ctx = (0, import_react.useContext)(import_DataTableContext.DataTableContext);
   const {
-    tableProps: { isResizeable, onColumnSortChange, dragAndDropColumns, onFiltersChange, filters, textWrap },
+    tableProps: { isResizeable, dragAndDropColumns, onFiltersChange, filters, textWrap },
     flattenedData,
-    reduxHeaders,
-    patchHeader
+    reduxHeaders
   } = ctx;
   const reduxHeader = (0, import_react.useMemo)(() => reduxHeaders[column.id], [reduxHeaders, column]);
   const dragHandleRef = (0, import_react.useRef)(null);
   const filterIconRef = (0, import_react.useRef)(null);
   const { draggableProps } = (0, import_react.useContext)(import_SortableItemContext.SortableItemContext);
-  const { hasFilter, hasDnD, hasSortingCaret, hasRightIcons, shouldShowDnD, hCols, isDragging } = (0, import_useHeaderCellConfig.useHeaderCellConfig)({
-    column,
-    dragAndDropColumns,
-    draggableProps,
-    reduxHeader,
-    isDragOverlay
-  });
+  const { hasFilter, hasDnD, hasSortingCaret, hasRightIcons, shouldShowDnD, hCols, isDragging } = (0, import_useHeaderCellConfig.useHeaderCellConfig)(props);
   const rightIcons = (0, import_react.useMemo)(() => {
     if (!hasRightIcons)
       return null;
@@ -112,14 +105,10 @@ const HeaderCell = (props) => {
   );
   const handlers = (0, import_useHeaderCellHandlers.useHeaderCellHandlers)({
     hasFilter,
-    patchHeader,
     column,
-    reduxHeader,
     hasDnD,
-    onColumnSortChange,
     dragHandleRef,
-    filterIconRef,
-    headerRef: column.ref
+    filterIconRef
   });
   return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_styled.StyledHeadTh, {
     column,

package/dist/cjs/parts/Headers/HeaderCell.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/parts/Headers/HeaderCell.tsx", "../../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["/* eslint-disable max-params */\n/* eslint-disable max-lines */\n/* eslint-disable complexity */\nimport React, { useContext, useMemo, useRef } from 'react';\nimport { Grid } from '@elliemae/ds-grid';\nimport { StyledHeadTh, StyledHeaderRightIconsWrapper, StyledFocusWithin } from '../../styled';\nimport { DataTableContext } from '../../DataTableContext';\nimport { SortByCaret } from '../SortByCaret';\nimport { DnDHandle } from '..';\nimport { SortableItemContext } from '../HoC/SortableItemContext';\nimport { FilterMapItem } from '../Filters';\nimport { HeaderResizer } from './HeaderResizer';\nimport { TypescriptColumn } from '../../types/props';\nimport { useHeaderCellHandlers } from './useHeaderCellHandlers';\nimport { useHeaderCellConfig } from './useHeaderCellConfig';\nimport { DATA_TESTID } from '../../configs/constants';\nimport { HeaderCellTitle } from './HeaderCellTitle';\n\nconst buildScreenReaderInstructions = (colSpan: number, draggable: boolean, filterable: boolean, sortable: boolean) => {\n  const preffix = colSpan === 1 ? '' : 'Column Group. ';\n  if (!draggable && !filterable && !sortable) return preffix;\n\n  let message = sortable\n    ? 'You can sort the data ascendingly/descendingly by this column. Use the up / down arrows keys to do so'\n    : '';\n  if (draggable && filterable) {\n    message = `This column is draggable and filterable. To enable these interactions press the enter key. ${message}`;\n  } else if (draggable || filterable) {\n    message = `This column is ${\n      draggable ? 'draggable' : 'filterable'\n    }. To enable this interaction press the enter key. ${message}`;\n  }\n  return `${preffix}${message}`;\n};\n\ninterface HeaderCellCompProps {\n  column: TypescriptColumn;\n  isDragOverlay: boolean;\n  colSpan: number;\n}\n\nexport const HeaderCell: React.ComponentType<HeaderCellCompProps> = (props) => {\n  const { column, isDragOverlay, colSpan } = props;\n  const ctx = useContext(DataTableContext);\n  const {\n    tableProps: { isResizeable, onColumnSortChange, dragAndDropColumns, onFiltersChange, filters, textWrap },\n    flattenedData,\n    reduxHeaders,\n    patchHeader,\n  } = ctx;\n  const reduxHeader = useMemo(() => reduxHeaders[column.id], [reduxHeaders, column]);\n  const dragHandleRef = useRef<HTMLDivElement>(null);\n  const filterIconRef = useRef<HTMLDivElement>(null);\n\n  const { draggableProps } = useContext(SortableItemContext);\n\n  const { hasFilter, hasDnD, hasSortingCaret, hasRightIcons, shouldShowDnD, hCols, isDragging } = useHeaderCellConfig({\n    column,\n    dragAndDropColumns,\n    draggableProps,\n    reduxHeader,\n    isDragOverlay,\n  });\n\n  const rightIcons = useMemo(() => {\n    if (!hasRightIcons) return null;\n    return (\n      <StyledHeaderRightIconsWrapper>\n        <FilterMapItem\n          column={column}\n          ctx={ctx}\n          onFiltersChange={onFiltersChange}\n          reduxHeader={reduxHeader}\n          filterValue={filters}\n          innerRef={filterIconRef}\n        />\n        {hasSortingCaret && <SortByCaret isSortedDesc={column.isSortedDesc} />}\n      </StyledHeaderRightIconsWrapper>\n    );\n  }, [hasRightIcons, column, ctx, onFiltersChange, reduxHeader, filters, hasSortingCaret]);\n\n  const DnDHandleComponent = useMemo(\n    () => (\n      <Grid mr=\"2px\" alignItems=\"center\" style={{ position: 'relative' }}>\n        <StyledFocusWithin hideFocus={isDragging}>\n          <DnDHandle\n            key={column.id}\n            innerRef={dragHandleRef}\n            isReachable={reduxHeader?.withTabStops}\n            id={column.id}\n            isDragOverlay={isDragOverlay}\n          />\n        </StyledFocusWithin>\n      </Grid>\n    ),\n    [column.id, isDragOverlay, isDragging, reduxHeader?.withTabStops],\n  );\n\n  const handlers = useHeaderCellHandlers({\n    hasFilter,\n    patchHeader,\n    column,\n    reduxHeader,\n    hasDnD,\n    onColumnSortChange,\n    dragHandleRef,\n    filterIconRef,\n    headerRef: column.ref,\n  });\n\n  return (\n    <StyledHeadTh\n      column={column}\n      {...handlers}\n      role={colSpan === 1 ? 'columnheader' : 'group'}\n      colSpan={colSpan}\n      aria-describedby={`${column.id}-instructions`}\n      // eslint-disable-next-line no-nested-ternary\n      aria-sort={hasSortingCaret ? (column.isSortedDesc ? 'descending' : 'ascending') : 'none'}\n      data-testid={DATA_TESTID.DATA_TABLE_HEADER}\n      isFirstRowGroup={!!flattenedData[0]?.original?.dimsumHeaderValue}\n      tabIndex={column.isFocuseable === false ? -1 : 0}\n      isDragOverlay={isDragOverlay}\n      isDraggingActive={draggableProps && draggableProps.active}\n      shouldShowDnD={shouldShowDnD}\n      ref={column.ref}\n    >\n      <Grid width=\"100%\" cols={hCols}>\n        {shouldShowDnD && DnDHandleComponent}\n        <HeaderCellTitle column={column} ctx={ctx} draggableProps={draggableProps} textWrap={textWrap} />\n        {rightIcons}\n        {isResizeable && column.canResize !== false && !column.columns && <HeaderResizer column={column} />}\n      </Grid>\n      <span id={`${column.id}-instructions`} style={{ display: 'none' }} aria-hidden=\"false\">\n        {buildScreenReaderInstructions(\n          colSpan,\n          dragAndDropColumns && column.disableDnD !== true,\n          hasFilter,\n          column.canSort,\n        )}\n      </span>\n    </StyledHeadTh>\n  );\n};\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": "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",
+  "sourcesContent": ["/* eslint-disable max-params */\n/* eslint-disable max-lines */\n/* eslint-disable complexity */\nimport React, { useContext, useMemo, useRef } from 'react';\nimport { Grid } from '@elliemae/ds-grid';\nimport { StyledHeadTh, StyledHeaderRightIconsWrapper, StyledFocusWithin } from '../../styled';\nimport { DataTableContext } from '../../DataTableContext';\nimport { SortByCaret } from '../SortByCaret';\nimport { DnDHandle } from '..';\nimport { SortableItemContext } from '../HoC/SortableItemContext';\nimport { FilterMapItem } from '../Filters';\nimport { HeaderResizer } from './HeaderResizer';\nimport { InternalTypescriptColumn } from '../../types/props';\nimport { useHeaderCellHandlers } from './useHeaderCellHandlers';\nimport { useHeaderCellConfig } from './useHeaderCellConfig';\nimport { DATA_TESTID } from '../../configs/constants';\nimport { HeaderCellTitle } from './HeaderCellTitle';\n\nconst buildScreenReaderInstructions = (colSpan: number, draggable: boolean, filterable: boolean, sortable: boolean) => {\n  const preffix = colSpan === 1 ? '' : 'Column Group. ';\n  if (!draggable && !filterable && !sortable) return preffix;\n\n  let message = sortable\n    ? 'You can sort the data ascendingly/descendingly by this column. Use the up / down arrows keys to do so'\n    : '';\n  if (draggable && filterable) {\n    message = `This column is draggable and filterable. To enable these interactions press the enter key. ${message}`;\n  } else if (draggable || filterable) {\n    message = `This column is ${\n      draggable ? 'draggable' : 'filterable'\n    }. To enable this interaction press the enter key. ${message}`;\n  }\n  return `${preffix}${message}`;\n};\n\ninterface HeaderCellCompProps {\n  column: InternalTypescriptColumn;\n  isDragOverlay: boolean;\n  colSpan: number;\n}\n\nexport const HeaderCell: React.ComponentType<HeaderCellCompProps> = (props) => {\n  const { column, isDragOverlay, colSpan } = props;\n  const ctx = useContext(DataTableContext);\n  const {\n    tableProps: { isResizeable, dragAndDropColumns, onFiltersChange, filters, textWrap },\n    flattenedData,\n    reduxHeaders,\n  } = ctx;\n  const reduxHeader = useMemo(() => reduxHeaders[column.id], [reduxHeaders, column]);\n  const dragHandleRef = useRef<HTMLDivElement | null>(null);\n  const filterIconRef = useRef<HTMLDivElement | null>(null);\n\n  const { draggableProps } = useContext(SortableItemContext);\n\n  const { hasFilter, hasDnD, hasSortingCaret, hasRightIcons, shouldShowDnD, hCols, isDragging } =\n    useHeaderCellConfig(props);\n\n  const rightIcons = useMemo(() => {\n    if (!hasRightIcons) return null;\n    return (\n      <StyledHeaderRightIconsWrapper>\n        <FilterMapItem\n          column={column}\n          ctx={ctx}\n          onFiltersChange={onFiltersChange}\n          reduxHeader={reduxHeader}\n          filterValue={filters}\n          innerRef={filterIconRef}\n        />\n        {hasSortingCaret && <SortByCaret isSortedDesc={column.isSortedDesc} />}\n      </StyledHeaderRightIconsWrapper>\n    );\n  }, [hasRightIcons, column, ctx, onFiltersChange, reduxHeader, filters, hasSortingCaret]);\n\n  const DnDHandleComponent = useMemo(\n    () => (\n      <Grid mr=\"2px\" alignItems=\"center\" style={{ position: 'relative' }}>\n        <StyledFocusWithin hideFocus={isDragging}>\n          <DnDHandle\n            key={column.id}\n            innerRef={dragHandleRef}\n            isReachable={reduxHeader?.withTabStops}\n            id={column.id}\n            isDragOverlay={isDragOverlay}\n          />\n        </StyledFocusWithin>\n      </Grid>\n    ),\n    [column.id, isDragOverlay, isDragging, reduxHeader?.withTabStops],\n  );\n\n  const handlers = useHeaderCellHandlers({\n    hasFilter,\n    column,\n    hasDnD,\n    dragHandleRef,\n    filterIconRef,\n  });\n\n  return (\n    <StyledHeadTh\n      column={column}\n      {...handlers}\n      role={colSpan === 1 ? 'columnheader' : 'group'}\n      colSpan={colSpan}\n      aria-describedby={`${column.id}-instructions`}\n      // eslint-disable-next-line no-nested-ternary\n      aria-sort={hasSortingCaret ? (column.isSortedDesc ? 'descending' : 'ascending') : 'none'}\n      data-testid={DATA_TESTID.DATA_TABLE_HEADER}\n      isFirstRowGroup={!!flattenedData[0]?.original?.dimsumHeaderValue}\n      tabIndex={column.isFocuseable === false ? -1 : 0}\n      isDragOverlay={isDragOverlay}\n      isDraggingActive={draggableProps && draggableProps.active}\n      shouldShowDnD={shouldShowDnD}\n      ref={column.ref}\n    >\n      <Grid width=\"100%\" cols={hCols}>\n        {shouldShowDnD && DnDHandleComponent}\n        <HeaderCellTitle column={column} ctx={ctx} draggableProps={draggableProps} textWrap={textWrap} />\n        {rightIcons}\n        {isResizeable && column.canResize !== false && !column.columns && <HeaderResizer column={column} />}\n      </Grid>\n      <span id={`${column.id}-instructions`} style={{ display: 'none' }} aria-hidden=\"false\">\n        {buildScreenReaderInstructions(\n          colSpan,\n          dragAndDropColumns && column.disableDnD !== true,\n          hasFilter,\n          column.canSort,\n        )}\n      </span>\n    </StyledHeadTh>\n  );\n};\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": "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",
   "names": []
 }

package/dist/cjs/parts/Headers/HeaderResizer.js

@@ -35,11 +35,12 @@ var import_DataTableContext = require("../../DataTableContext");
 var import_helpers = require("../../helpers");
 var import_styled = require("../../styled");
 const narrow = (value, min, max) => Math.min(Math.max(value, min ?? 30), max ?? Infinity);
+const stopPropagation = (e) => e.stopPropagation();
 const HeaderResizer = ({ column }) => {
   const {
     layoutHelpers: { setGridLayout },
     visibleColumns,
-    tableProps: { onColumnResize }
+    tableProps: { onColumnResize, onColumnSizeChange }
   } = (0, import_react.useContext)(import_DataTableContext.DataTableContext);
   const [isResizing, setIsResizing] = (0, import_react.useState)(false);
   const [nextWidth, setNextWidth] = (0, import_react.useState)(column.width ?? 150);
@@ -52,13 +53,16 @@ const HeaderResizer = ({ column }) => {
     }, []),
     [visibleColumns]
   );
+  const realColumnIndex = (0, import_react.useMemo)(
+    () => visibleColumnsCopy.findIndex((visibleColumn) => visibleColumn.id === column.id),
+    [column.id, visibleColumnsCopy]
+  );
   (0, import_react.useEffect)(() => {
-    const realColumnIndex = visibleColumnsCopy.findIndex((visibleColumn) => visibleColumn.id === column.id);
     if (realColumnIndex > -1) {
       visibleColumnsCopy[realColumnIndex].width = nextWidth;
       setGridLayout((0, import_helpers.columnsToGrid)(visibleColumnsCopy, import_constants.ColsLayoutStyle.Fixed));
     }
-  }, [column.id, nextWidth, setGridLayout, visibleColumnsCopy]);
+  }, [realColumnIndex, column.id, nextWidth, setGridLayout, visibleColumnsCopy]);
   const ref = (0, import_react.useRef)(null);
   const onResizeStart = (0, import_react.useCallback)(() => {
     setIsResizing(true);
@@ -66,7 +70,6 @@ const HeaderResizer = ({ column }) => {
   const onResizeHandler = (0, import_react.useCallback)(
     (e) => {
       const delta = ("clientX" in e ? e.clientX : e.touches[0].clientX) - (ref.current?.getBoundingClientRect().x ?? 0);
-      const realColumnIndex = visibleColumnsCopy.findIndex((visibleColumn) => visibleColumn.id === column.id);
       if (realColumnIndex > -1) {
         const widthWithDelta = narrow(
           nextWidth + delta,
@@ -78,13 +81,14 @@ const HeaderResizer = ({ column }) => {
       e.preventDefault();
       e.stopPropagation();
     },
-    [column.id, nextWidth, visibleColumnsCopy]
+    [realColumnIndex, nextWidth, visibleColumnsCopy]
   );
   const onResizeEnd = (0, import_react.useCallback)(() => {
     setGridLayout((0, import_helpers.columnsToGrid)(visibleColumns, import_constants.ColsLayoutStyle.Fixed));
     setIsResizing(false);
     onColumnResize(column.id, nextWidth);
-  }, [onColumnResize, column.id, nextWidth, setGridLayout, visibleColumns]);
+    onColumnSizeChange(visibleColumnsCopy, column.id, nextWidth);
+  }, [setGridLayout, visibleColumns, onColumnResize, column.id, nextWidth, onColumnSizeChange, visibleColumnsCopy]);
   (0, import_react.useEffect)(() => {
     const debouncedResizeHandler = onResizeHandler;
     const debouncedResizeEnd = onResizeEnd;
@@ -115,7 +119,7 @@ const HeaderResizer = ({ column }) => {
     onTouchStart: onResizeStart,
     onMouseUp: onResizeEnd,
     onTouchEnd: onResizeEnd,
-    onClick: (e) => e.stopPropagation()
+    onClick: stopPropagation
   });
 };
 //# sourceMappingURL=HeaderResizer.js.map

package/dist/cjs/parts/Headers/HeaderResizer.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/parts/Headers/HeaderResizer.tsx", "../../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["import React, { useState, useCallback, useContext, useRef, useEffect, useMemo } from 'react';\nimport { ColsLayoutStyle } from '../../configs/constants';\nimport { DataTableContext } from '../../DataTableContext';\nimport { columnsToGrid } from '../../helpers';\nimport { StyledResizer } from '../../styled';\nimport { TypescriptColumn } from '../../types/props';\n\nconst narrow = (value: number, min: number | undefined, max: number | undefined): number =>\n  Math.min(Math.max(value, min ?? 30), max ?? Infinity);\n\nexport const HeaderResizer: React.ComponentType<{\n  column: TypescriptColumn;\n}> = ({ column }) => {\n  const {\n    layoutHelpers: { setGridLayout },\n    visibleColumns,\n    tableProps: { onColumnResize },\n  } = useContext(DataTableContext);\n\n  const [isResizing, setIsResizing] = useState(false);\n  const [nextWidth, setNextWidth] = useState(column.width ?? 150);\n  const visibleColumnsCopy = useMemo(\n    () =>\n      visibleColumns.reduce((acc, col) => {\n        if (col.columns) {\n          return [...acc, ...col.columns];\n        }\n        return [...acc, { ...col }];\n      }, [] as TypescriptColumn[]),\n    [visibleColumns],\n  );\n\n  useEffect(() => {\n    const realColumnIndex = visibleColumnsCopy.findIndex((visibleColumn) => visibleColumn.id === column.id);\n    if (realColumnIndex > -1) {\n      visibleColumnsCopy[realColumnIndex].width = nextWidth;\n      setGridLayout(columnsToGrid(visibleColumnsCopy, ColsLayoutStyle.Fixed));\n    }\n  }, [column.id, nextWidth, setGridLayout, visibleColumnsCopy]);\n\n  const ref = useRef<HTMLDivElement>(null);\n\n  const onResizeStart = useCallback(() => {\n    setIsResizing(true);\n  }, []);\n\n  const onResizeHandler = useCallback(\n    (e: MouseEvent | TouchEvent) => {\n      const delta = ('clientX' in e ? e.clientX : e.touches[0].clientX) - (ref.current?.getBoundingClientRect().x ?? 0); // delta in pixels\n\n      const realColumnIndex = visibleColumnsCopy.findIndex((visibleColumn) => visibleColumn.id === column.id);\n      if (realColumnIndex > -1) {\n        const widthWithDelta = narrow(\n          nextWidth + delta,\n          visibleColumnsCopy[realColumnIndex].minWidth,\n          visibleColumnsCopy[realColumnIndex].maxWidth,\n        );\n        setNextWidth(widthWithDelta);\n      }\n      // To prevent text selection\n      e.preventDefault();\n      e.stopPropagation();\n    },\n    [column.id, nextWidth, visibleColumnsCopy],\n  );\n\n  const onResizeEnd = useCallback(() => {\n    setGridLayout(columnsToGrid(visibleColumns, ColsLayoutStyle.Fixed));\n    setIsResizing(false);\n    onColumnResize(column.id, nextWidth);\n  }, [onColumnResize, column.id, nextWidth, setGridLayout, visibleColumns]);\n\n  useEffect(() => {\n    const debouncedResizeHandler = onResizeHandler;\n    const debouncedResizeEnd = onResizeEnd;\n    const addEvents = () => {\n      document.addEventListener('mousemove', debouncedResizeHandler);\n      document.addEventListener('touchmove', debouncedResizeHandler);\n      document.addEventListener('mouseup', debouncedResizeEnd);\n      document.addEventListener('touchend', debouncedResizeEnd);\n    };\n    const removeEvents = () => {\n      document.removeEventListener('mousemove', debouncedResizeHandler);\n      document.removeEventListener('touchmove', debouncedResizeHandler);\n      document.removeEventListener('mouseup', debouncedResizeEnd);\n      document.removeEventListener('touchend', debouncedResizeEnd);\n    };\n\n    if (isResizing) addEvents();\n    else removeEvents();\n\n    // just in case the component is unmounted\n    return removeEvents;\n  }, [isResizing, onResizeHandler, onResizeEnd]);\n\n  return (\n    <StyledResizer\n      ref={ref}\n      role=\"separator\"\n      draggable={false}\n      isResizing={isResizing}\n      onMouseDown={onResizeStart}\n      onTouchStart={onResizeStart}\n      onMouseUp={onResizeEnd}\n      onTouchEnd={onResizeEnd}\n      onClick={(e) => e.stopPropagation()}\n    />\n  );\n};\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": "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",
+  "sourcesContent": ["import React, { useState, useCallback, useContext, useRef, useEffect, useMemo } from 'react';\nimport { ColsLayoutStyle } from '../../configs/constants';\nimport { DataTableContext } from '../../DataTableContext';\nimport { columnsToGrid } from '../../helpers';\nimport { StyledResizer } from '../../styled';\nimport { TypescriptColumn } from '../../types/props';\n\nconst narrow = (value: number, min: number | undefined, max: number | undefined): number =>\n  Math.min(Math.max(value, min ?? 30), max ?? Infinity);\n\nconst stopPropagation = (e: React.MouseEvent) => e.stopPropagation();\n\nexport const HeaderResizer: React.ComponentType<{\n  column: TypescriptColumn;\n}> = ({ column }) => {\n  const {\n    layoutHelpers: { setGridLayout },\n    visibleColumns,\n    tableProps: { onColumnResize, onColumnSizeChange },\n  } = useContext(DataTableContext);\n\n  const [isResizing, setIsResizing] = useState(false);\n  const [nextWidth, setNextWidth] = useState(column.width ?? 150);\n  const visibleColumnsCopy = useMemo(\n    () =>\n      visibleColumns.reduce((acc, col) => {\n        if (col.columns) {\n          return [...acc, ...col.columns];\n        }\n        return [...acc, { ...col }];\n      }, [] as TypescriptColumn[]),\n    [visibleColumns],\n  );\n  const realColumnIndex = useMemo(\n    () => visibleColumnsCopy.findIndex((visibleColumn) => visibleColumn.id === column.id),\n    [column.id, visibleColumnsCopy],\n  );\n\n  useEffect(() => {\n    if (realColumnIndex > -1) {\n      visibleColumnsCopy[realColumnIndex].width = nextWidth;\n      setGridLayout(columnsToGrid(visibleColumnsCopy, ColsLayoutStyle.Fixed));\n    }\n  }, [realColumnIndex, column.id, nextWidth, setGridLayout, visibleColumnsCopy]);\n\n  const ref = useRef<HTMLDivElement>(null);\n\n  const onResizeStart = useCallback(() => {\n    setIsResizing(true);\n  }, []);\n\n  const onResizeHandler = useCallback(\n    (e: MouseEvent | TouchEvent) => {\n      const delta = ('clientX' in e ? e.clientX : e.touches[0].clientX) - (ref.current?.getBoundingClientRect().x ?? 0); // delta in pixels\n\n      if (realColumnIndex > -1) {\n        const widthWithDelta = narrow(\n          nextWidth + delta,\n          visibleColumnsCopy[realColumnIndex].minWidth,\n          visibleColumnsCopy[realColumnIndex].maxWidth,\n        );\n        setNextWidth(widthWithDelta);\n      }\n      // To prevent text selection\n      e.preventDefault();\n      e.stopPropagation();\n    },\n    [realColumnIndex, nextWidth, visibleColumnsCopy],\n  );\n\n  const onResizeEnd = useCallback(() => {\n    setGridLayout(columnsToGrid(visibleColumns, ColsLayoutStyle.Fixed));\n    setIsResizing(false);\n    onColumnResize(column.id, nextWidth);\n    onColumnSizeChange(visibleColumnsCopy, column.id, nextWidth);\n  }, [setGridLayout, visibleColumns, onColumnResize, column.id, nextWidth, onColumnSizeChange, visibleColumnsCopy]);\n\n  useEffect(() => {\n    const debouncedResizeHandler = onResizeHandler;\n    const debouncedResizeEnd = onResizeEnd;\n    const addEvents = () => {\n      document.addEventListener('mousemove', debouncedResizeHandler);\n      document.addEventListener('touchmove', debouncedResizeHandler);\n      document.addEventListener('mouseup', debouncedResizeEnd);\n      document.addEventListener('touchend', debouncedResizeEnd);\n    };\n    const removeEvents = () => {\n      document.removeEventListener('mousemove', debouncedResizeHandler);\n      document.removeEventListener('touchmove', debouncedResizeHandler);\n      document.removeEventListener('mouseup', debouncedResizeEnd);\n      document.removeEventListener('touchend', debouncedResizeEnd);\n    };\n\n    if (isResizing) addEvents();\n    else removeEvents();\n\n    // just in case the component is unmounted\n    return removeEvents;\n  }, [isResizing, onResizeHandler, onResizeEnd]);\n\n  return (\n    <StyledResizer\n      ref={ref}\n      role=\"separator\"\n      draggable={false}\n      isResizing={isResizing}\n      onMouseDown={onResizeStart}\n      onTouchStart={onResizeStart}\n      onMouseUp={onResizeEnd}\n      onTouchEnd={onResizeEnd}\n      onClick={stopPropagation}\n    />\n  );\n};\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": "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",
   "names": []
 }

package/dist/cjs/parts/Headers/useHeaderCellConfig.js

@@ -28,13 +28,16 @@ __export(useHeaderCellConfig_exports, {
 });
 module.exports = __toCommonJS(useHeaderCellConfig_exports);
 var React = __toESM(require("react"));
-const useHeaderCellConfig = ({
-  column,
-  dragAndDropColumns,
-  draggableProps,
-  reduxHeader,
-  isDragOverlay
-}) => {
+var import_react = require("react");
+var import_DataTableContext = __toESM(require("../../DataTableContext"));
+var import_SortableItemContext = require("../HoC/SortableItemContext");
+const useHeaderCellConfig = ({ column, isDragOverlay }) => {
+  const {
+    tableProps: { dragAndDropColumns },
+    reduxHeaders
+  } = (0, import_react.useContext)(import_DataTableContext.default);
+  const { draggableProps } = (0, import_react.useContext)(import_SortableItemContext.SortableItemContext);
+  const reduxHeader = (0, import_react.useMemo)(() => reduxHeaders[column.id], [reduxHeaders, column]);
   const hasFilter = !!(column.filter || column.Filter);
   const hasDnD = dragAndDropColumns && !column.disableDnD;
   const hasSortingCaret = column.canSort && typeof column.isSortedDesc === "boolean";

package/dist/cjs/parts/Headers/useHeaderCellConfig.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/parts/Headers/useHeaderCellConfig.tsx", "../../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["/* eslint-disable complexity */\nimport { TypescriptColumn } from '../../types/props';\nimport { SortableItemContextType } from '../HoC/SortableItemContext';\n\ntype useHeaderCellConfigType = (\n  args: {\n    column: TypescriptColumn;\n    dragAndDropColumns: boolean;\n    reduxHeader: { showDnDHandle: boolean };\n    isDragOverlay: boolean;\n  } & SortableItemContextType,\n) => {\n  hasFilter: boolean;\n  hasDnD: boolean;\n  hasSortingCaret: boolean;\n  hasRightIcons: boolean;\n  isDragging: boolean;\n  shouldShowDnD: boolean;\n  hCols: string[];\n};\n\nexport const useHeaderCellConfig: useHeaderCellConfigType = ({\n  column,\n  dragAndDropColumns,\n  draggableProps,\n  reduxHeader,\n  isDragOverlay,\n}) => {\n  const hasFilter = !!(column.filter || column.Filter);\n\n  const hasDnD = dragAndDropColumns && !column.disableDnD;\n\n  const hasSortingCaret = column.canSort && typeof column.isSortedDesc === 'boolean';\n\n  const hasRightIcons = !isDragOverlay && (hasSortingCaret || hasFilter);\n\n  const isDragging = draggableProps && draggableProps.isDragging;\n\n  const shouldShowDnD =\n    hasDnD &&\n    ((reduxHeader?.showDnDHandle && draggableProps && !draggableProps.active) ||\n      (draggableProps && draggableProps.isDragging) ||\n      isDragOverlay);\n\n  // Column definition\n  const hCols = ['auto'];\n  if (hasRightIcons) hCols.push('min-content');\n  if (shouldShowDnD) hCols.unshift('min-content');\n\n  return {\n    hasFilter,\n    hasDnD,\n    hasSortingCaret,\n    hasRightIcons,\n    isDragging,\n    hCols,\n    shouldShowDnD,\n  };\n};\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADqBhB,MAAM,sBAA+C,CAAC;AAAA,EAC3D;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,MAAM;AACJ,QAAM,YAAY,CAAC,EAAE,OAAO,UAAU,OAAO;AAE7C,QAAM,SAAS,sBAAsB,CAAC,OAAO;AAE7C,QAAM,kBAAkB,OAAO,WAAW,OAAO,OAAO,iBAAiB;AAEzE,QAAM,gBAAgB,CAAC,kBAAkB,mBAAmB;AAE5D,QAAM,aAAa,kBAAkB,eAAe;AAEpD,QAAM,gBACJ,WACE,aAAa,iBAAiB,kBAAkB,CAAC,eAAe,UAC/D,kBAAkB,eAAe,cAClC;AAGJ,QAAM,QAAQ,CAAC,MAAM;AACrB,MAAI;AAAe,UAAM,KAAK,aAAa;AAC3C,MAAI;AAAe,UAAM,QAAQ,aAAa;AAE9C,SAAO;AAAA,IACL;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF;AACF;",
-  "names": []
+  "sourcesContent": ["/* eslint-disable complexity */\nimport { useContext, useMemo } from 'react';\nimport DataTableContext from '../../DataTableContext';\nimport { SortableItemContext } from '../HoC/SortableItemContext';\nimport { InternalTypescriptColumn } from '../../types/props';\n\ntype UseHeaderCellConfigType = (args: { column: InternalTypescriptColumn; isDragOverlay: boolean }) => {\n  hasFilter: boolean;\n  hasDnD: boolean;\n  hasSortingCaret: boolean;\n  hasRightIcons: boolean;\n  isDragging: boolean;\n  shouldShowDnD: boolean;\n  hCols: string[];\n};\n\nexport const useHeaderCellConfig: UseHeaderCellConfigType = ({ column, isDragOverlay }) => {\n  const {\n    tableProps: { dragAndDropColumns },\n    reduxHeaders,\n  } = useContext(DataTableContext);\n\n  const { draggableProps } = useContext(SortableItemContext);\n\n  const reduxHeader = useMemo(() => reduxHeaders[column.id], [reduxHeaders, column]);\n\n  const hasFilter = !!(column.filter || column.Filter);\n\n  const hasDnD = dragAndDropColumns && !column.disableDnD;\n\n  const hasSortingCaret = column.canSort && typeof column.isSortedDesc === 'boolean';\n\n  const hasRightIcons = !isDragOverlay && (hasSortingCaret || hasFilter);\n\n  const isDragging = draggableProps && draggableProps.isDragging;\n\n  const shouldShowDnD =\n    hasDnD &&\n    ((reduxHeader?.showDnDHandle && draggableProps && !draggableProps.active) ||\n      (draggableProps && draggableProps.isDragging) ||\n      isDragOverlay);\n\n  // Column definition\n  const hCols = ['auto'];\n  if (hasRightIcons) hCols.push('min-content');\n  if (shouldShowDnD) hCols.unshift('min-content');\n\n  return {\n    hasFilter,\n    hasDnD,\n    hasSortingCaret,\n    hasRightIcons,\n    isDragging,\n    hCols,\n    shouldShowDnD,\n  };\n};\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADCvB,mBAAoC;AACpC,8BAA6B;AAC7B,iCAAoC;AAa7B,MAAM,sBAA+C,CAAC,EAAE,QAAQ,cAAc,MAAM;AACzF,QAAM;AAAA,IACJ,YAAY,EAAE,mBAAmB;AAAA,IACjC;AAAA,EACF,QAAI,yBAAW,wBAAAA,OAAgB;AAE/B,QAAM,EAAE,eAAe,QAAI,yBAAW,8CAAmB;AAEzD,QAAM,kBAAc,sBAAQ,MAAM,aAAa,OAAO,KAAK,CAAC,cAAc,MAAM,CAAC;AAEjF,QAAM,YAAY,CAAC,EAAE,OAAO,UAAU,OAAO;AAE7C,QAAM,SAAS,sBAAsB,CAAC,OAAO;AAE7C,QAAM,kBAAkB,OAAO,WAAW,OAAO,OAAO,iBAAiB;AAEzE,QAAM,gBAAgB,CAAC,kBAAkB,mBAAmB;AAE5D,QAAM,aAAa,kBAAkB,eAAe;AAEpD,QAAM,gBACJ,WACE,aAAa,iBAAiB,kBAAkB,CAAC,eAAe,UAC/D,kBAAkB,eAAe,cAClC;AAGJ,QAAM,QAAQ,CAAC,MAAM;AACrB,MAAI;AAAe,UAAM,KAAK,aAAa;AAC3C,MAAI;AAAe,UAAM,QAAQ,aAAa;AAE9C,SAAO;AAAA,IACL;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF;AACF;",
+  "names": ["DataTableContext"]
 }

package/dist/cjs/parts/Headers/useHeaderCellHandlers.js

@@ -29,6 +29,7 @@ __export(useHeaderCellHandlers_exports, {
 module.exports = __toCommonJS(useHeaderCellHandlers_exports);
 var React = __toESM(require("react"));
 var import_react = require("react");
+var import_DataTableContext = __toESM(require("../../DataTableContext"));
 const buildNextHeader = (reduxHeader, value, hasFilter, hasDnD, withTabStops = false) => ({
   hideFilterMenu: true,
   ...reduxHeader,
@@ -38,15 +39,36 @@ const buildNextHeader = (reduxHeader, value, hasFilter, hasDnD, withTabStops = f
 });
 const useHeaderCellHandlers = ({
   hasFilter,
-  patchHeader,
   column,
-  reduxHeader,
   hasDnD,
-  onColumnSortChange,
   dragHandleRef,
-  filterIconRef,
-  headerRef
+  filterIconRef
 }) => {
+  const {
+    tableProps: { onColumnSortChange, onColumnSort },
+    patchHeader,
+    reduxHeaders,
+    visibleColumns
+  } = (0, import_react.useContext)(import_DataTableContext.default);
+  const reduxHeader = (0, import_react.useMemo)(() => reduxHeaders[column.id], [reduxHeaders, column]);
+  const headerRef = column.ref;
+  const realColumnIndex = (0, import_react.useMemo)(
+    () => visibleColumns.findIndex((visibleColumn) => visibleColumn.id === column.id),
+    [column.id, visibleColumns]
+  );
+  const getNextSortedVisibleColumns = (0, import_react.useCallback)(
+    (isSortedDesc) => {
+      const visibleColumnsCopy = visibleColumns.reduce((acc, col) => {
+        if (col.columns) {
+          return [...acc, ...col.columns];
+        }
+        return [...acc, { ...col }];
+      }, []);
+      visibleColumnsCopy[realColumnIndex].isSortedDesc = isSortedDesc;
+      return visibleColumnsCopy;
+    },
+    [realColumnIndex, visibleColumns]
+  );
   const onMouseEnter = (0, import_react.useCallback)(() => {
     patchHeader(column.id, buildNextHeader(reduxHeader, true, hasFilter, hasDnD));
   }, [column.id, hasDnD, hasFilter, patchHeader, reduxHeader]);
@@ -61,8 +83,9 @@ const useHeaderCellHandlers = ({
         column: column.id,
         direction: column.isSortedDesc ? "ASC" : "DESC"
       });
+      onColumnSort(getNextSortedVisibleColumns(!column.isSortedDesc), column.id, column.isSortedDesc ? "ASC" : "DESC");
     }
-  }, [column.canSort, column.id, column.isSortedDesc, onColumnSortChange]);
+  }, [column.canSort, column.id, column.isSortedDesc, getNextSortedVisibleColumns, onColumnSort, onColumnSortChange]);
   const onKeyDown = (0, import_react.useCallback)(
     (e) => {
       if (e.code === "ArrowDown" && column.canSort) {
@@ -71,12 +94,14 @@ const useHeaderCellHandlers = ({
           column: column.id,
           direction: "DESC"
         });
+        onColumnSort(getNextSortedVisibleColumns(true), column.id, "DESC");
       } else if (e.code === "ArrowUp" && column.canSort) {
         e.preventDefault();
         onColumnSortChange({
           column: column.id,
           direction: "ASC"
         });
+        onColumnSort(getNextSortedVisibleColumns(false), column.id, "ASC");
       } else if (["Enter", "Space"].includes(e.code)) {
         patchHeader(column.id, buildNextHeader(reduxHeader, true, hasFilter, hasDnD, true));
         setTimeout(() => {
@@ -91,6 +116,8 @@ const useHeaderCellHandlers = ({
       column.canSort,
       column.id,
       onColumnSortChange,
+      onColumnSort,
+      getNextSortedVisibleColumns,
       patchHeader,
       reduxHeader,
       hasFilter,

package/dist/cjs/parts/Headers/useHeaderCellHandlers.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/parts/Headers/useHeaderCellHandlers.tsx", "../../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["/* eslint-disable max-params */\nimport { useCallback } from 'react';\nimport { TypescriptColumn } from '../../types/props';\n\ntype useHeaderCellHandlersType = (args: {\n  hasFilter: boolean;\n  patchHeader: (headerId: string, newHeader: Record<string, unknown>) => void;\n  column: TypescriptColumn;\n  reduxHeader: Record<string, unknown>;\n  hasDnD: boolean;\n  onColumnSortChange: (newSort: { column: string; direction: 'ASC' | 'DESC' }) => void;\n  dragHandleRef: React.MutableRefObject<HTMLDivElement>;\n  filterIconRef: React.MutableRefObject<HTMLDivElement>;\n  headerRef: React.MutableRefObject<HTMLTableColElement>;\n}) => {\n  onMouseEnter: React.MouseEventHandler;\n  onMouseLeave: React.MouseEventHandler;\n  onClick: React.MouseEventHandler;\n  onKeyDown: React.KeyboardEventHandler;\n  onFocus: React.FocusEventHandler;\n  onBlur: React.FocusEventHandler;\n};\n\nconst buildNextHeader = (\n  reduxHeader: Record<string, unknown>,\n  value: boolean,\n  hasFilter: boolean,\n  hasDnD: boolean,\n  withTabStops = false,\n) => ({\n  hideFilterMenu: true, // Do this to overwrite it if it exists\n  ...reduxHeader,\n  hideFilterButton: !(hasFilter && value),\n  showDnDHandle: hasDnD && value,\n  withTabStops,\n});\n\nexport const useHeaderCellHandlers: useHeaderCellHandlersType = ({\n  hasFilter,\n  patchHeader,\n  column,\n  reduxHeader,\n  hasDnD,\n  onColumnSortChange,\n  dragHandleRef,\n  filterIconRef,\n  headerRef,\n}) => {\n  const onMouseEnter: React.MouseEventHandler = useCallback(() => {\n    patchHeader(column.id, buildNextHeader(reduxHeader, true, hasFilter, hasDnD));\n  }, [column.id, hasDnD, hasFilter, patchHeader, reduxHeader]);\n\n  const onMouseLeave: React.MouseEventHandler = useCallback(() => {\n    if (!headerRef?.current?.contains(document.activeElement)) {\n      patchHeader(column.id, buildNextHeader(reduxHeader, false, hasFilter, hasDnD));\n    }\n  }, [column.id, hasDnD, hasFilter, headerRef, patchHeader, reduxHeader]);\n\n  const onClick: React.MouseEventHandler = useCallback(() => {\n    if (column.canSort) {\n      onColumnSortChange({\n        column: column.id,\n        direction: column.isSortedDesc ? 'ASC' : 'DESC',\n      });\n    }\n  }, [column.canSort, column.id, column.isSortedDesc, onColumnSortChange]);\n\n  const onKeyDown: React.KeyboardEventHandler = useCallback(\n    (e) => {\n      if (e.code === 'ArrowDown' && column.canSort) {\n        e.preventDefault();\n        onColumnSortChange({\n          column: column.id,\n          direction: 'DESC',\n        });\n      } else if (e.code === 'ArrowUp' && column.canSort) {\n        e.preventDefault();\n        onColumnSortChange({\n          column: column.id,\n          direction: 'ASC',\n        });\n      } else if (['Enter', 'Space'].includes(e.code)) {\n        patchHeader(column.id, buildNextHeader(reduxHeader, true, hasFilter, hasDnD, true));\n        // Elements don't not yet exist\n        setTimeout(() => {\n          if (dragHandleRef.current) dragHandleRef.current.focus();\n          else if (filterIconRef.current) filterIconRef.current.focus();\n        });\n      }\n    },\n    [\n      column.canSort,\n      column.id,\n      onColumnSortChange,\n      patchHeader,\n      reduxHeader,\n      hasFilter,\n      hasDnD,\n      dragHandleRef,\n      filterIconRef,\n    ],\n  );\n\n  const onFocus: React.FocusEventHandler = useCallback(\n    (e) => {\n      // Don't do anything if focus wasn't placed in the element (bubling issues)\n      if (e.target === headerRef?.current) {\n        patchHeader(column.id, buildNextHeader(reduxHeader, true, hasFilter, hasDnD));\n      }\n    },\n    [column.id, hasDnD, hasFilter, headerRef, patchHeader, reduxHeader],\n  );\n\n  const onBlur: React.FocusEventHandler = useCallback(\n    (e) => {\n      // Don't do anything if blur was caused by going to a child\n      if (e.relatedTarget === dragHandleRef.current) return;\n      if (e.relatedTarget === filterIconRef.current) return;\n      patchHeader(column.id, buildNextHeader(reduxHeader, false, hasFilter, hasDnD));\n    },\n    [dragHandleRef, filterIconRef, patchHeader, column.id, reduxHeader, hasFilter, hasDnD],\n  );\n\n  return { onMouseEnter, onMouseLeave, onClick, onKeyDown, onBlur, onFocus };\n};\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": "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",
-  "names": []
+  "sourcesContent": ["/* eslint-disable max-params */\nimport { useCallback, useContext, useMemo } from 'react';\nimport DataTableContext from '../../DataTableContext';\nimport { InternalTypescriptColumn, ReduxHeader, TypescriptColumn } from '../../types/props';\n\ntype UseHeaderCellHandlersType = (args: {\n  hasFilter: boolean;\n  column: InternalTypescriptColumn;\n  hasDnD: boolean;\n  dragHandleRef: React.MutableRefObject<HTMLDivElement | null>;\n  filterIconRef: React.MutableRefObject<HTMLDivElement | null>;\n}) => {\n  onMouseEnter: React.MouseEventHandler;\n  onMouseLeave: React.MouseEventHandler;\n  onClick: React.MouseEventHandler;\n  onKeyDown: React.KeyboardEventHandler;\n  onFocus: React.FocusEventHandler;\n  onBlur: React.FocusEventHandler;\n};\n\nconst buildNextHeader = (\n  reduxHeader: ReduxHeader,\n  value: boolean,\n  hasFilter: boolean,\n  hasDnD: boolean,\n  withTabStops = false,\n) => ({\n  hideFilterMenu: true, // Do this to overwrite it if it exists\n  ...reduxHeader,\n  hideFilterButton: !(hasFilter && value),\n  showDnDHandle: hasDnD && value,\n  withTabStops,\n});\n\nexport const useHeaderCellHandlers: UseHeaderCellHandlersType = ({\n  hasFilter,\n  column,\n  hasDnD,\n  dragHandleRef,\n  filterIconRef,\n}) => {\n  const {\n    tableProps: { onColumnSortChange, onColumnSort },\n    patchHeader,\n    reduxHeaders,\n    visibleColumns,\n  } = useContext(DataTableContext);\n\n  const reduxHeader = useMemo(() => reduxHeaders[column.id], [reduxHeaders, column]);\n\n  const headerRef = column.ref;\n\n  const realColumnIndex = useMemo(\n    () => visibleColumns.findIndex((visibleColumn) => visibleColumn.id === column.id),\n    [column.id, visibleColumns],\n  );\n\n  const getNextSortedVisibleColumns = useCallback(\n    (isSortedDesc: boolean) => {\n      const visibleColumnsCopy = visibleColumns.reduce((acc, col) => {\n        if (col.columns) {\n          return [...acc, ...col.columns];\n        }\n        return [...acc, { ...col }];\n      }, [] as TypescriptColumn[]);\n      visibleColumnsCopy[realColumnIndex].isSortedDesc = isSortedDesc;\n      return visibleColumnsCopy;\n    },\n    [realColumnIndex, visibleColumns],\n  );\n\n  const onMouseEnter: React.MouseEventHandler = useCallback(() => {\n    patchHeader(column.id, buildNextHeader(reduxHeader, true, hasFilter, hasDnD));\n  }, [column.id, hasDnD, hasFilter, patchHeader, reduxHeader]);\n\n  const onMouseLeave: React.MouseEventHandler = useCallback(() => {\n    if (!headerRef?.current?.contains(document.activeElement)) {\n      patchHeader(column.id, buildNextHeader(reduxHeader, false, hasFilter, hasDnD));\n    }\n  }, [column.id, hasDnD, hasFilter, headerRef, patchHeader, reduxHeader]);\n\n  const onClick: React.MouseEventHandler = useCallback(() => {\n    if (column.canSort) {\n      onColumnSortChange({\n        column: column.id,\n        direction: column.isSortedDesc ? 'ASC' : 'DESC',\n      });\n      onColumnSort(getNextSortedVisibleColumns(!column.isSortedDesc), column.id, column.isSortedDesc ? 'ASC' : 'DESC');\n    }\n  }, [column.canSort, column.id, column.isSortedDesc, getNextSortedVisibleColumns, onColumnSort, onColumnSortChange]);\n\n  const onKeyDown: React.KeyboardEventHandler = useCallback(\n    (e) => {\n      if (e.code === 'ArrowDown' && column.canSort) {\n        e.preventDefault();\n        onColumnSortChange({\n          column: column.id,\n          direction: 'DESC',\n        });\n        onColumnSort(getNextSortedVisibleColumns(true), column.id, 'DESC');\n      } else if (e.code === 'ArrowUp' && column.canSort) {\n        e.preventDefault();\n        onColumnSortChange({\n          column: column.id,\n          direction: 'ASC',\n        });\n        onColumnSort(getNextSortedVisibleColumns(false), column.id, 'ASC');\n      } else if (['Enter', 'Space'].includes(e.code)) {\n        patchHeader(column.id, buildNextHeader(reduxHeader, true, hasFilter, hasDnD, true));\n        // Elements don't not yet exist\n        setTimeout(() => {\n          if (dragHandleRef.current) dragHandleRef.current.focus();\n          else if (filterIconRef.current) filterIconRef.current.focus();\n        });\n      }\n    },\n    [\n      column.canSort,\n      column.id,\n      onColumnSortChange,\n      onColumnSort,\n      getNextSortedVisibleColumns,\n      patchHeader,\n      reduxHeader,\n      hasFilter,\n      hasDnD,\n      dragHandleRef,\n      filterIconRef,\n    ],\n  );\n\n  const onFocus: React.FocusEventHandler = useCallback(\n    (e) => {\n      // Don't do anything if focus wasn't placed in the element (bubling issues)\n      if (e.target === headerRef?.current) {\n        patchHeader(column.id, buildNextHeader(reduxHeader, true, hasFilter, hasDnD));\n      }\n    },\n    [column.id, hasDnD, hasFilter, headerRef, patchHeader, reduxHeader],\n  );\n\n  const onBlur: React.FocusEventHandler = useCallback(\n    (e) => {\n      // Don't do anything if blur was caused by going to a child\n      if (e.relatedTarget === dragHandleRef.current) return;\n      if (e.relatedTarget === filterIconRef.current) return;\n      patchHeader(column.id, buildNextHeader(reduxHeader, false, hasFilter, hasDnD));\n    },\n    [dragHandleRef, filterIconRef, patchHeader, column.id, reduxHeader, hasFilter, hasDnD],\n  );\n\n  return { onMouseEnter, onMouseLeave, onClick, onKeyDown, onBlur, onFocus };\n};\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": "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",
+  "names": ["DataTableContext"]
 }

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/parts/SortByCaret.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["import React, { useMemo } from 'react';\nimport { ArrowheadDown, ArrowheadUp } from '@elliemae/ds-icons';\n\nconst iconColor = ['brand-primary', 800];\n\nexport const SortByCaret: React.ComponentType<{ isSortedDesc: boolean }> = ({ isSortedDesc }) =>\n  useMemo(\n    () => (\n      <span style={{ marginLeft: '4px' }}>\n        {isSortedDesc && <ArrowheadDown size=\"s\" color={iconColor} />}\n        {!isSortedDesc && <ArrowheadUp color={iconColor} />}\n      </span>\n    ),\n    [isSortedDesc],\n  );\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB;AAAA,mBAA+B;AAC/B,sBAA2C;AAE3C,MAAM,YAAY,CAAC,iBAAiB,GAAG;AAEhC,MAAM,cAA8D,CAAC,EAAE,aAAa,UACzF;AAAA,EACE,MACE,6CAAC;AAAA,IAAK,OAAO,EAAE,YAAY,MAAM;AAAA,IAC9B;AAAA,sBAAgB,4CAAC;AAAA,QAAc,MAAK;AAAA,QAAI,OAAO;AAAA,OAAW;AAAA,MAC1D,CAAC,gBAAgB,4CAAC;AAAA,QAAY,OAAO;AAAA,OAAW;AAAA;AAAA,GACnD;AAAA,EAEF,CAAC,YAAY;AACf;",
+  "sourcesContent": ["import React, { useMemo } from 'react';\nimport { ArrowheadDown, ArrowheadUp } from '@elliemae/ds-icons';\n\nconst iconColor = ['brand-primary', 800];\n\nexport const SortByCaret: React.ComponentType<{ isSortedDesc: boolean | undefined }> = ({ isSortedDesc }) =>\n  useMemo(\n    () => (\n      <span style={{ marginLeft: '4px' }}>\n        {isSortedDesc && <ArrowheadDown size=\"s\" color={iconColor} />}\n        {!isSortedDesc && <ArrowheadUp color={iconColor} />}\n      </span>\n    ),\n    [isSortedDesc],\n  );\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB;AAAA,mBAA+B;AAC/B,sBAA2C;AAE3C,MAAM,YAAY,CAAC,iBAAiB,GAAG;AAEhC,MAAM,cAA0E,CAAC,EAAE,aAAa,UACrG;AAAA,EACE,MACE,6CAAC;AAAA,IAAK,OAAO,EAAE,YAAY,MAAM;AAAA,IAC9B;AAAA,sBAAgB,4CAAC;AAAA,QAAc,MAAK;AAAA,QAAI,OAAO;AAAA,OAAW;AAAA,MAC1D,CAAC,gBAAgB,4CAAC;AAAA,QAAY,OAAO;AAAA,OAAW;AAAA;AAAA,GACnD;AAAA,EAEF,CAAC,YAAY;AACf;",
   "names": []
 }