{"version":3,"file":"ColumnResizer.cjs","sources":["../../../../src/components/Grid/ColumnResizer.tsx"],"sourcesContent":["import {\n CSSProperties,\n PointerEventHandler,\n useCallback,\n useEffect,\n useRef,\n} from 'react';\nimport { cva } from '@/lib/cva';\nimport styles from './ColumnResizer.module.css';\nimport { ColumnResizeFn, GetResizerPositionFn } from './types';\nimport { throttle } from 'lodash-es';\nimport { initialPosition, ResizingState } from './useResizingState';\n\nconst DOUBLE_CLICK_THRESHOLD_MSEC = 300;\n\nconst resizerVariants = cva(styles['column-resizer'], {\n variants: {\n pressed: { true: styles['column-resizer_pressed'] },\n },\n});\n\ninterface Props {\n height: number;\n onColumnResize: ColumnResizeFn;\n columnIndex: number;\n getResizerPosition: GetResizerPositionFn;\n columnWidth: number;\n resizingState: ResizingState;\n}\n\nconst ColumnResizer = ({\n height,\n onColumnResize: onColumnResizeProp,\n columnIndex,\n getResizerPosition,\n columnWidth,\n resizingState,\n}: Props) => {\n const resizeRef = useRef(null);\n const {\n pointer,\n setPointer,\n getIsPressed,\n setIsPressed,\n getPosition,\n setPosition,\n lastPressedTimestamp,\n } = resizingState;\n const isPressed = getIsPressed(columnIndex);\n const position = getPosition(columnIndex);\n const onColumnResize = throttle(onColumnResizeProp, 1000);\n\n useEffect(() => {\n // Capture the pointer when pressed to ensure we receive move events outside the element.\n // Capturing must be properly handled when the component unmounts and mounts again,\n // based on its pressed state.\n const control = resizeRef.current;\n if (!isPressed || !control || !pointer) {\n return;\n }\n const pointerId = pointer.pointerId;\n try {\n control.setPointerCapture(pointerId);\n return () => {\n if (control.hasPointerCapture(pointerId)) {\n control.releasePointerCapture(pointerId);\n }\n };\n } catch (e) {\n console.error(e);\n }\n }, [pointer, isPressed, columnIndex]);\n\n /**\n * Handler for pointer down events to initiate resizing or auto-sizing on double-click.\n * @type {PointerEventHandler}\n */\n const onPointerDown: PointerEventHandler = useCallback(\n e => {\n e.stopPropagation();\n e.preventDefault();\n if (resizeRef.current) {\n // We cannot detect double-click with onDoubleClick event,\n // because this component might be unmounted before the second click and mounted again.\n // We keep track of the last click timestamp and check if it was a double-click.\n if (lastPressedTimestamp > Date.now() - DOUBLE_CLICK_THRESHOLD_MSEC) {\n // Auto-size the column on double click.\n onColumnResize(columnIndex, 0, 'auto');\n }\n setPointer({\n pointerId: e.pointerId,\n initialClientX: e.clientX,\n width: columnWidth,\n });\n setIsPressed(columnIndex, true);\n const pos = getResizerPosition(e.clientX, columnWidth, columnIndex);\n setPosition(pos);\n }\n },\n [\n lastPressedTimestamp,\n setPointer,\n columnWidth,\n setIsPressed,\n columnIndex,\n getResizerPosition,\n setPosition,\n onColumnResize,\n ]\n );\n\n /**\n * Handler for pointer move events to update the column width as the user drags.\n * @type {PointerEventHandler}\n */\n const onPointerMove: PointerEventHandler = useCallback(\n e => {\n e.stopPropagation();\n e.preventDefault();\n if (isPressed && pointer) {\n const width = columnWidth + (e.clientX - pointer.initialClientX);\n const pos = getResizerPosition(e.clientX, width, columnIndex);\n setPosition(pos);\n // Ensure minimum width of 50px\n pointer.width = Math.max(width, 50);\n }\n },\n [pointer, isPressed, columnWidth, getResizerPosition, columnIndex, setPosition]\n );\n\n return (\n // eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions -- onClick only stops the click reaching the grid\n {\n e.preventDefault();\n e.stopPropagation();\n if (\n resizeRef.current &&\n // 0 is a valid pointerId in Firefox\n (pointer?.pointerId || pointer?.pointerId === 0)\n ) {\n const shouldCallResize = e.clientX !== pointer.initialClientX;\n if (shouldCallResize) {\n onColumnResize(columnIndex, pointer.width, 'manual');\n }\n setPosition(initialPosition);\n setPointer(null);\n setIsPressed(columnIndex, false);\n }\n }}\n onPointerMove={onPointerMove}\n onPointerCancel={e => {\n e.preventDefault();\n e.stopPropagation();\n setPosition(initialPosition);\n setPointer(null);\n setIsPressed(columnIndex, false);\n }}\n onClick={e => e.stopPropagation()}\n data-resize\n style={\n {\n '--column-resizer-height': `${height}px`,\n ...position,\n } as CSSProperties\n }\n />\n );\n};\n\nexport default ColumnResizer;\n"],"names":["cva","styles","useRef","throttle","useEffect","useCallback","jsx","initialPosition"],"mappings":"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"}