@elliemae/ds-data-table 3.8.2-rc.4 → 3.9.0-next.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -54,7 +54,6 @@ const defaultProps = {
54
54
  onRowsReorder: () => null,
55
55
  dragAndDropColumns: false,
56
56
  onColumnsReorder: () => null,
57
- onColumnResize: () => null,
58
57
  onColumnSizeChange: () => null,
59
58
  onRowClick: () => null,
60
59
  onRowFocus: () => null,
@@ -67,7 +66,6 @@ const defaultProps = {
67
66
  onFiltersChange: () => null,
68
67
  onPageChanged: () => null,
69
68
  onRowExpand: () => null,
70
- onColumnSortChange: () => null,
71
69
  onColumnSort: () => null
72
70
  };
73
71
  const DataTableContext = (0, import_react.createContext)();
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../src/DataTableContext.tsx", "../../../../scripts/build/transpile/react-shim.js"],
4
- "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"],
5
- "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;",
4
+ "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 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 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"],
5
+ "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,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,cAAc,MAAM;AACtB;AAGA,MAAM,uBAAmB,4BAAiC;AAG1D,IAAO,2BAAQ;",
6
6
  "names": []
7
7
  }
@@ -86,7 +86,7 @@ const HeaderResizer = ({ column }) => {
86
86
  const onResizeEnd = (0, import_react.useCallback)(() => {
87
87
  setGridLayout((0, import_helpers.columnsToGrid)(visibleColumns, import_constants.ColsLayoutStyle.Fixed));
88
88
  setIsResizing(false);
89
- onColumnResize(column.id, nextWidth);
89
+ onColumnResize?.(column.id, nextWidth);
90
90
  onColumnSizeChange(visibleColumnsCopy, column.id, nextWidth);
91
91
  }, [setGridLayout, visibleColumns, onColumnResize, column.id, nextWidth, onColumnSizeChange, visibleColumnsCopy]);
92
92
  (0, import_react.useEffect)(() => {
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../../../src/parts/Headers/HeaderResizer.tsx", "../../../../../../scripts/build/transpile/react-shim.js"],
4
- "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"],
5
- "mappings": "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",
4
+ "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"],
5
+ "mappings": "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",
6
6
  "names": []
7
7
  }
@@ -79,7 +79,7 @@ const useHeaderCellHandlers = ({
79
79
  }, [column.id, hasDnD, hasFilter, headerRef, patchHeader, reduxHeader]);
80
80
  const onClick = (0, import_react.useCallback)(() => {
81
81
  if (column.canSort) {
82
- onColumnSortChange({
82
+ onColumnSortChange?.({
83
83
  column: column.id,
84
84
  direction: column.isSortedDesc ? "ASC" : "DESC"
85
85
  });
@@ -90,14 +90,14 @@ const useHeaderCellHandlers = ({
90
90
  (e) => {
91
91
  if (e.code === "ArrowDown" && column.canSort) {
92
92
  e.preventDefault();
93
- onColumnSortChange({
93
+ onColumnSortChange?.({
94
94
  column: column.id,
95
95
  direction: "DESC"
96
96
  });
97
97
  onColumnSort(getNextSortedVisibleColumns(true), column.id, "DESC");
98
98
  } else if (e.code === "ArrowUp" && column.canSort) {
99
99
  e.preventDefault();
100
- onColumnSortChange({
100
+ onColumnSortChange?.({
101
101
  column: column.id,
102
102
  direction: "ASC"
103
103
  });
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../../../src/parts/Headers/useHeaderCellHandlers.tsx", "../../../../../../scripts/build/transpile/react-shim.js"],
4
- "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"],
5
- "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADCvB,mBAAiD;AACjD,8BAA6B;AAkB7B,MAAM,kBAAkB,CACtB,aACA,OACA,WACA,QACA,eAAe,WACX;AAAA,EACJ,gBAAgB;AAAA,EAChB,GAAG;AAAA,EACH,kBAAkB,EAAE,aAAa;AAAA,EACjC,eAAe,UAAU;AAAA,EACzB;AACF;AAEO,MAAM,wBAAmD,CAAC;AAAA,EAC/D;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,MAAM;AACJ,QAAM;AAAA,IACJ,YAAY,EAAE,oBAAoB,aAAa;AAAA,IAC/C;AAAA,IACA;AAAA,IACA;AAAA,EACF,QAAI,yBAAW,wBAAAA,OAAgB;AAE/B,QAAM,kBAAc,sBAAQ,MAAM,aAAa,OAAO,KAAK,CAAC,cAAc,MAAM,CAAC;AAEjF,QAAM,YAAY,OAAO;AAEzB,QAAM,sBAAkB;AAAA,IACtB,MAAM,eAAe,UAAU,CAAC,kBAAkB,cAAc,OAAO,OAAO,EAAE;AAAA,IAChF,CAAC,OAAO,IAAI,cAAc;AAAA,EAC5B;AAEA,QAAM,kCAA8B;AAAA,IAClC,CAAC,iBAA0B;AACzB,YAAM,qBAAqB,eAAe,OAAO,CAAC,KAAK,QAAQ;AAC7D,YAAI,IAAI,SAAS;AACf,iBAAO,CAAC,GAAG,KAAK,GAAG,IAAI,OAAO;AAAA,QAChC;AACA,eAAO,CAAC,GAAG,KAAK,EAAE,GAAG,IAAI,CAAC;AAAA,MAC5B,GAAG,CAAC,CAAuB;AAC3B,yBAAmB,iBAAiB,eAAe;AACnD,aAAO;AAAA,IACT;AAAA,IACA,CAAC,iBAAiB,cAAc;AAAA,EAClC;AAEA,QAAM,mBAAwC,0BAAY,MAAM;AAC9D,gBAAY,OAAO,IAAI,gBAAgB,aAAa,MAAM,WAAW,MAAM,CAAC;AAAA,EAC9E,GAAG,CAAC,OAAO,IAAI,QAAQ,WAAW,aAAa,WAAW,CAAC;AAE3D,QAAM,mBAAwC,0BAAY,MAAM;AAC9D,QAAI,CAAC,WAAW,SAAS,SAAS,SAAS,aAAa,GAAG;AACzD,kBAAY,OAAO,IAAI,gBAAgB,aAAa,OAAO,WAAW,MAAM,CAAC;AAAA,IAC/E;AAAA,EACF,GAAG,CAAC,OAAO,IAAI,QAAQ,WAAW,WAAW,aAAa,WAAW,CAAC;AAEtE,QAAM,cAAmC,0BAAY,MAAM;AACzD,QAAI,OAAO,SAAS;AAClB,yBAAmB;AAAA,QACjB,QAAQ,OAAO;AAAA,QACf,WAAW,OAAO,eAAe,QAAQ;AAAA,MAC3C,CAAC;AACD,mBAAa,4BAA4B,CAAC,OAAO,YAAY,GAAG,OAAO,IAAI,OAAO,eAAe,QAAQ,MAAM;AAAA,IACjH;AAAA,EACF,GAAG,CAAC,OAAO,SAAS,OAAO,IAAI,OAAO,cAAc,6BAA6B,cAAc,kBAAkB,CAAC;AAElH,QAAM,gBAAwC;AAAA,IAC5C,CAAC,MAAM;AACL,UAAI,EAAE,SAAS,eAAe,OAAO,SAAS;AAC5C,UAAE,eAAe;AACjB,2BAAmB;AAAA,UACjB,QAAQ,OAAO;AAAA,UACf,WAAW;AAAA,QACb,CAAC;AACD,qBAAa,4BAA4B,IAAI,GAAG,OAAO,IAAI,MAAM;AAAA,MACnE,WAAW,EAAE,SAAS,aAAa,OAAO,SAAS;AACjD,UAAE,eAAe;AACjB,2BAAmB;AAAA,UACjB,QAAQ,OAAO;AAAA,UACf,WAAW;AAAA,QACb,CAAC;AACD,qBAAa,4BAA4B,KAAK,GAAG,OAAO,IAAI,KAAK;AAAA,MACnE,WAAW,CAAC,SAAS,OAAO,EAAE,SAAS,EAAE,IAAI,GAAG;AAC9C,oBAAY,OAAO,IAAI,gBAAgB,aAAa,MAAM,WAAW,QAAQ,IAAI,CAAC;AAElF,mBAAW,MAAM;AACf,cAAI,cAAc;AAAS,0BAAc,QAAQ,MAAM;AAAA,mBAC9C,cAAc;AAAS,0BAAc,QAAQ,MAAM;AAAA,QAC9D,CAAC;AAAA,MACH;AAAA,IACF;AAAA,IACA;AAAA,MACE,OAAO;AAAA,MACP,OAAO;AAAA,MACP;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,EACF;AAEA,QAAM,cAAmC;AAAA,IACvC,CAAC,MAAM;AAEL,UAAI,EAAE,WAAW,WAAW,SAAS;AACnC,oBAAY,OAAO,IAAI,gBAAgB,aAAa,MAAM,WAAW,MAAM,CAAC;AAAA,MAC9E;AAAA,IACF;AAAA,IACA,CAAC,OAAO,IAAI,QAAQ,WAAW,WAAW,aAAa,WAAW;AAAA,EACpE;AAEA,QAAM,aAAkC;AAAA,IACtC,CAAC,MAAM;AAEL,UAAI,EAAE,kBAAkB,cAAc;AAAS;AAC/C,UAAI,EAAE,kBAAkB,cAAc;AAAS;AAC/C,kBAAY,OAAO,IAAI,gBAAgB,aAAa,OAAO,WAAW,MAAM,CAAC;AAAA,IAC/E;AAAA,IACA,CAAC,eAAe,eAAe,aAAa,OAAO,IAAI,aAAa,WAAW,MAAM;AAAA,EACvF;AAEA,SAAO,EAAE,cAAc,cAAc,SAAS,WAAW,QAAQ,QAAQ;AAC3E;",
4
+ "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"],
5
+ "mappings": "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",
6
6
  "names": ["DataTableContext"]
7
7
  }
@@ -23,7 +23,6 @@ const defaultProps = {
23
23
  onRowsReorder: () => null,
24
24
  dragAndDropColumns: false,
25
25
  onColumnsReorder: () => null,
26
- onColumnResize: () => null,
27
26
  onColumnSizeChange: () => null,
28
27
  onRowClick: () => null,
29
28
  onRowFocus: () => null,
@@ -36,7 +35,6 @@ const defaultProps = {
36
35
  onFiltersChange: () => null,
37
36
  onPageChanged: () => null,
38
37
  onRowExpand: () => null,
39
- onColumnSortChange: () => null,
40
38
  onColumnSort: () => null
41
39
  };
42
40
  const DataTableContext = createContext();
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../../../scripts/build/transpile/react-shim.js", "../../src/DataTableContext.tsx"],
4
- "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "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"],
5
- "mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,qBAAqB;AAC9B,SAAS,uBAAuB;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,gBAAgB;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,mBAAmB,cAAiC;AAG1D,IAAO,2BAAQ;",
4
+ "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "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 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 onColumnSort: () => null,\n};\n\n/** Context for cross component communication */\nconst DataTableContext = createContext<TypescriptContext>();\n\nexport { DataTableContext };\nexport default DataTableContext;\n"],
5
+ "mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,qBAAqB;AAC9B,SAAS,uBAAuB;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,gBAAgB;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,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,cAAc,MAAM;AACtB;AAGA,MAAM,mBAAmB,cAAiC;AAG1D,IAAO,2BAAQ;",
6
6
  "names": []
7
7
  }
@@ -57,7 +57,7 @@ const HeaderResizer = ({ column }) => {
57
57
  const onResizeEnd = useCallback(() => {
58
58
  setGridLayout(columnsToGrid(visibleColumns, ColsLayoutStyle.Fixed));
59
59
  setIsResizing(false);
60
- onColumnResize(column.id, nextWidth);
60
+ onColumnResize?.(column.id, nextWidth);
61
61
  onColumnSizeChange(visibleColumnsCopy, column.id, nextWidth);
62
62
  }, [setGridLayout, visibleColumns, onColumnResize, column.id, nextWidth, onColumnSizeChange, visibleColumnsCopy]);
63
63
  useEffect(() => {
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/parts/Headers/HeaderResizer.tsx"],
4
- "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "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"],
5
- "mappings": "AAAA,YAAY,WAAW;ACAvB;AAAA,SAAgB,UAAU,aAAa,YAAY,QAAQ,WAAW,eAAe;AACrF,SAAS,uBAAuB;AAChC,SAAS,wBAAwB;AACjC,SAAS,qBAAqB;AAC9B,SAAS,qBAAqB;AAG9B,MAAM,SAAS,CAAC,OAAe,KAAyB,QACtD,KAAK,IAAI,KAAK,IAAI,OAAO,OAAO,EAAE,GAAG,OAAO,QAAQ;AAEtD,MAAM,kBAAkB,CAAC,MAAwB,EAAE,gBAAgB;AAE5D,MAAM,gBAER,CAAC,EAAE,OAAO,MAAM;AACnB,QAAM;AAAA,IACJ,eAAe,EAAE,cAAc;AAAA,IAC/B;AAAA,IACA,YAAY,EAAE,gBAAgB,mBAAmB;AAAA,EACnD,IAAI,WAAW,gBAAgB;AAE/B,QAAM,CAAC,YAAY,aAAa,IAAI,SAAS,KAAK;AAClD,QAAM,CAAC,WAAW,YAAY,IAAI,SAAS,OAAO,SAAS,GAAG;AAC9D,QAAM,qBAAqB;AAAA,IACzB,MACE,eAAe,OAAO,CAAC,KAAK,QAAQ;AAClC,UAAI,IAAI,SAAS;AACf,eAAO,CAAC,GAAG,KAAK,GAAG,IAAI,OAAO;AAAA,MAChC;AACA,aAAO,CAAC,GAAG,KAAK,EAAE,GAAG,IAAI,CAAC;AAAA,IAC5B,GAAG,CAAC,CAAuB;AAAA,IAC7B,CAAC,cAAc;AAAA,EACjB;AACA,QAAM,kBAAkB;AAAA,IACtB,MAAM,mBAAmB,UAAU,CAAC,kBAAkB,cAAc,OAAO,OAAO,EAAE;AAAA,IACpF,CAAC,OAAO,IAAI,kBAAkB;AAAA,EAChC;AAEA,YAAU,MAAM;AACd,QAAI,kBAAkB,IAAI;AACxB,yBAAmB,iBAAiB,QAAQ;AAC5C,oBAAc,cAAc,oBAAoB,gBAAgB,KAAK,CAAC;AAAA,IACxE;AAAA,EACF,GAAG,CAAC,iBAAiB,OAAO,IAAI,WAAW,eAAe,kBAAkB,CAAC;AAE7E,QAAM,MAAM,OAAuB,IAAI;AAEvC,QAAM,gBAAgB,YAAY,MAAM;AACtC,kBAAc,IAAI;AAAA,EACpB,GAAG,CAAC,CAAC;AAEL,QAAM,kBAAkB;AAAA,IACtB,CAAC,MAA+B;AAC9B,YAAM,SAAS,aAAa,IAAI,EAAE,UAAU,EAAE,QAAQ,GAAG,YAAY,IAAI,SAAS,sBAAsB,EAAE,KAAK;AAE/G,UAAI,kBAAkB,IAAI;AACxB,cAAM,iBAAiB;AAAA,UACrB,YAAY;AAAA,UACZ,mBAAmB,iBAAiB;AAAA,UACpC,mBAAmB,iBAAiB;AAAA,QACtC;AACA,qBAAa,cAAc;AAAA,MAC7B;AAEA,QAAE,eAAe;AACjB,QAAE,gBAAgB;AAAA,IACpB;AAAA,IACA,CAAC,iBAAiB,WAAW,kBAAkB;AAAA,EACjD;AAEA,QAAM,cAAc,YAAY,MAAM;AACpC,kBAAc,cAAc,gBAAgB,gBAAgB,KAAK,CAAC;AAClE,kBAAc,KAAK;AACnB,mBAAe,OAAO,IAAI,SAAS;AACnC,uBAAmB,oBAAoB,OAAO,IAAI,SAAS;AAAA,EAC7D,GAAG,CAAC,eAAe,gBAAgB,gBAAgB,OAAO,IAAI,WAAW,oBAAoB,kBAAkB,CAAC;AAEhH,YAAU,MAAM;AACd,UAAM,yBAAyB;AAC/B,UAAM,qBAAqB;AAC3B,UAAM,YAAY,MAAM;AACtB,eAAS,iBAAiB,aAAa,sBAAsB;AAC7D,eAAS,iBAAiB,aAAa,sBAAsB;AAC7D,eAAS,iBAAiB,WAAW,kBAAkB;AACvD,eAAS,iBAAiB,YAAY,kBAAkB;AAAA,IAC1D;AACA,UAAM,eAAe,MAAM;AACzB,eAAS,oBAAoB,aAAa,sBAAsB;AAChE,eAAS,oBAAoB,aAAa,sBAAsB;AAChE,eAAS,oBAAoB,WAAW,kBAAkB;AAC1D,eAAS,oBAAoB,YAAY,kBAAkB;AAAA,IAC7D;AAEA,QAAI;AAAY,gBAAU;AAAA;AACrB,mBAAa;AAGlB,WAAO;AAAA,EACT,GAAG,CAAC,YAAY,iBAAiB,WAAW,CAAC;AAE7C,SACE,oBAAC;AAAA,IACC;AAAA,IACA,MAAK;AAAA,IACL,WAAW;AAAA,IACX;AAAA,IACA,aAAa;AAAA,IACb,cAAc;AAAA,IACd,WAAW;AAAA,IACX,YAAY;AAAA,IACZ,SAAS;AAAA,GACX;AAEJ;",
4
+ "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "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"],
5
+ "mappings": "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",
6
6
  "names": []
7
7
  }
@@ -50,7 +50,7 @@ const useHeaderCellHandlers = ({
50
50
  }, [column.id, hasDnD, hasFilter, headerRef, patchHeader, reduxHeader]);
51
51
  const onClick = useCallback(() => {
52
52
  if (column.canSort) {
53
- onColumnSortChange({
53
+ onColumnSortChange?.({
54
54
  column: column.id,
55
55
  direction: column.isSortedDesc ? "ASC" : "DESC"
56
56
  });
@@ -61,14 +61,14 @@ const useHeaderCellHandlers = ({
61
61
  (e) => {
62
62
  if (e.code === "ArrowDown" && column.canSort) {
63
63
  e.preventDefault();
64
- onColumnSortChange({
64
+ onColumnSortChange?.({
65
65
  column: column.id,
66
66
  direction: "DESC"
67
67
  });
68
68
  onColumnSort(getNextSortedVisibleColumns(true), column.id, "DESC");
69
69
  } else if (e.code === "ArrowUp" && column.canSort) {
70
70
  e.preventDefault();
71
- onColumnSortChange({
71
+ onColumnSortChange?.({
72
72
  column: column.id,
73
73
  direction: "ASC"
74
74
  });
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/parts/Headers/useHeaderCellHandlers.tsx"],
4
- "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* 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"],
5
- "mappings": "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",
4
+ "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* 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"],
5
+ "mappings": "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",
6
6
  "names": []
7
7
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@elliemae/ds-data-table",
3
- "version": "3.8.2-rc.4",
3
+ "version": "3.9.0-next.2",
4
4
  "license": "MIT",
5
5
  "description": "ICE MT - Dimsum - Data Table",
6
6
  "files": [
@@ -571,23 +571,23 @@
571
571
  "indent": 4
572
572
  },
573
573
  "dependencies": {
574
- "@elliemae/ds-button": "3.8.2-rc.4",
575
- "@elliemae/ds-circular-progress-indicator": "3.8.2-rc.4",
576
- "@elliemae/ds-controlled-form": "3.8.2-rc.4",
577
- "@elliemae/ds-drag-and-drop": "3.8.2-rc.4",
578
- "@elliemae/ds-dropdownmenu": "3.8.2-rc.4",
579
- "@elliemae/ds-form": "3.8.2-rc.4",
580
- "@elliemae/ds-form-layout-blocks": "3.8.2-rc.4",
581
- "@elliemae/ds-grid": "3.8.2-rc.4",
582
- "@elliemae/ds-icons": "3.8.2-rc.4",
583
- "@elliemae/ds-pagination": "3.8.2-rc.4",
584
- "@elliemae/ds-pills": "3.8.2-rc.4",
585
- "@elliemae/ds-popperjs": "3.8.2-rc.4",
586
- "@elliemae/ds-skeleton": "3.8.2-rc.4",
587
- "@elliemae/ds-system": "3.8.2-rc.4",
588
- "@elliemae/ds-toolbar": "3.8.2-rc.4",
589
- "@elliemae/ds-truncated-tooltip-text": "3.8.2-rc.4",
590
- "@elliemae/ds-utilities": "3.8.2-rc.4",
574
+ "@elliemae/ds-button": "3.9.0-next.2",
575
+ "@elliemae/ds-circular-progress-indicator": "3.9.0-next.2",
576
+ "@elliemae/ds-controlled-form": "3.9.0-next.2",
577
+ "@elliemae/ds-drag-and-drop": "3.9.0-next.2",
578
+ "@elliemae/ds-dropdownmenu": "3.9.0-next.2",
579
+ "@elliemae/ds-form": "3.9.0-next.2",
580
+ "@elliemae/ds-form-layout-blocks": "3.9.0-next.2",
581
+ "@elliemae/ds-grid": "3.9.0-next.2",
582
+ "@elliemae/ds-icons": "3.9.0-next.2",
583
+ "@elliemae/ds-pagination": "3.9.0-next.2",
584
+ "@elliemae/ds-pills": "3.9.0-next.2",
585
+ "@elliemae/ds-popperjs": "3.9.0-next.2",
586
+ "@elliemae/ds-skeleton": "3.9.0-next.2",
587
+ "@elliemae/ds-system": "3.9.0-next.2",
588
+ "@elliemae/ds-toolbar": "3.9.0-next.2",
589
+ "@elliemae/ds-truncated-tooltip-text": "3.9.0-next.2",
590
+ "@elliemae/ds-utilities": "3.9.0-next.2",
591
591
  "react-virtual": "~2.10.4",
592
592
  "uid": "~2.0.0"
593
593
  },