@elliemae/ds-data-table 3.70.0-next.6 → 3.70.0-next.60

package/dist/esm/parts/Headers/useHeaderResizer.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/parts/Headers/useHeaderResizer.ts"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { cloneDeep } from 'lodash-es';\nimport React, { useCallback, useMemo, useState } from 'react';\nimport { usePropsStore } from '../../configs/useStore/createInternalAndPropsContext.js';\nimport {\n  changeGridLayout,\n  getGridLayout,\n  removeGridLayout,\n  setSubColumnsGridLayout,\n} from '../../helpers/gridLayoutHelpers.js';\nimport type { DSDataTableT } from '../../react-desc-prop-types.js';\n\n// if number > max => max\n// if number < min => min\n// else => number\nconst narrow = (value: number, min: number | undefined, max: number | undefined): number =>\n  Math.min(Math.max(value, min ?? 30), max ?? Infinity);\n\n// Returns the delta of the keyboard event\nconst getCorrectDelta = (e: React.KeyboardEvent) => {\n  let multiplier = 1;\n\n  if (e.shiftKey) multiplier *= 5;\n  if (e.altKey) multiplier *= 10;\n\n  if (e.code === 'ArrowLeft') {\n    return -multiplier;\n  }\n  if (e.code === 'ArrowRight') {\n    return multiplier;\n  }\n  return 0;\n};\n\nexport const useHeaderResizer = ({\n  columnId,\n  innerRef,\n}: {\n  columnId: string;\n  innerRef: React.MutableRefObject<HTMLInputElement | null>;\n}) => {\n  const visibleColumns = usePropsStore((state) => state.visibleColumns);\n  const onColumnResize = usePropsStore((state) => state.onColumnResize);\n  const onColumnSizeChange = usePropsStore((state) => state.onColumnSizeChange);\n  const virtualListRef = usePropsStore((state) => state.virtualListRef);\n\n  const [isResizing, setIsResizing] = useState(false);\n\n  const visibleColumnsCopy = useMemo(() => cloneDeep(visibleColumns), [visibleColumns]);\n\n  const visibleColumnsOnGridLayout = useMemo(\n    () =>\n      visibleColumnsCopy.reduce((acc, cur) => {\n        if (cur.columns) {\n          return acc.concat(cur.columns);\n        }\n        return acc.concat(cur);\n      }, [] as DSDataTableT.InternalColumn[]),\n    [visibleColumnsCopy],\n  );\n\n  const realColumnIndex = useMemo(\n    () => visibleColumnsOnGridLayout.findIndex((col) => col.id === columnId),\n    [columnId, visibleColumnsOnGridLayout],\n  );\n\n  const realColumnIndexRef = React.useRef(realColumnIndex);\n  realColumnIndexRef.current = realColumnIndex;\n\n  // Notifies the user of the change in the column size\n  const pushColumnSizeChange = useCallback(\n    (nextWidth: number) => {\n      // PUI-12695: Avoid unnecessary calls to onColumnResize\n      // Avoid calling onColumnResize if the width of the column has not changed\n      // unnecessary calls to onColumnResize can cause performance issues (next resizes were not working)\n      if (nextWidth === visibleColumnsOnGridLayout[realColumnIndexRef.current].width) return;\n      onColumnResize?.(columnId, nextWidth);\n      // this next line is updating also the visibleColumnsCopy via mutable changes\n      //   the mutable changes here works because what we mutate is a cloneDeep of the columns\n      visibleColumnsOnGridLayout[realColumnIndexRef.current].width = nextWidth;\n      onColumnSizeChange(visibleColumnsCopy, columnId, nextWidth);\n    },\n    [columnId, onColumnResize, onColumnSizeChange, realColumnIndexRef, visibleColumnsCopy, visibleColumnsOnGridLayout],\n  );\n\n  const onResizeStart = useCallback(() => {\n    setIsResizing(true);\n  }, []);\n\n  const onResizeEnd = useCallback(() => {\n    setIsResizing(false);\n    pushColumnSizeChange(getGridLayout(virtualListRef.current)[realColumnIndexRef.current]);\n    removeGridLayout(virtualListRef.current);\n  }, [pushColumnSizeChange, virtualListRef, realColumnIndexRef]);\n\n  // Mouse resize\n  const onResizeHandler = useCallback(\n    (e: MouseEvent | TouchEvent) => {\n      if (realColumnIndexRef.current === -1) return;\n\n      const delta =\n        ('clientX' in e ? e.clientX : e.touches[0].clientX) - (innerRef.current?.getBoundingClientRect().x ?? 0); // delta in pixels\n\n      const originalWidth = getGridLayout(virtualListRef.current)[realColumnIndexRef.current];\n\n      const widthWithDelta = narrow(\n        originalWidth + delta,\n        visibleColumnsOnGridLayout[realColumnIndexRef.current].minWidth,\n        visibleColumnsOnGridLayout[realColumnIndexRef.current].maxWidth,\n      );\n\n      changeGridLayout(virtualListRef.current, realColumnIndexRef.current, widthWithDelta);\n      setSubColumnsGridLayout(virtualListRef.current, visibleColumnsCopy);\n\n      // We will notify the user of the change in the column size only when the user releases the mouse button\n\n      // To prevent text selection\n      e.preventDefault();\n      e.stopPropagation();\n    },\n    [innerRef, virtualListRef, visibleColumnsCopy, visibleColumnsOnGridLayout],\n  );\n\n  // Keyboard resize\n  const handleKeyboardResize = useCallback(\n    (e: React.KeyboardEvent) => {\n      if (realColumnIndexRef.current === -1) return;\n\n      if (e.key === 'Enter') {\n        e.stopPropagation();\n      }\n\n      if (e.code === 'ArrowLeft' || e.code === 'ArrowRight') {\n        e.preventDefault();\n      }\n\n      const delta = getCorrectDelta(e);\n\n      if (delta === 0) return;\n\n      const originalWidth = getGridLayout(virtualListRef.current)[realColumnIndexRef.current];\n\n      const widthWithDelta = narrow(\n        originalWidth + delta,\n        visibleColumnsOnGridLayout[realColumnIndexRef.current].minWidth,\n        visibleColumnsOnGridLayout[realColumnIndexRef.current].maxWidth,\n      );\n\n      changeGridLayout(virtualListRef.current, realColumnIndexRef.current, widthWithDelta);\n      setSubColumnsGridLayout(virtualListRef.current, visibleColumnsCopy);\n\n      pushColumnSizeChange(getGridLayout(virtualListRef.current)[realColumnIndexRef.current] + delta);\n      removeGridLayout(virtualListRef.current);\n    },\n    [pushColumnSizeChange, virtualListRef, visibleColumnsCopy, visibleColumnsOnGridLayout],\n  );\n\n  return {\n    isResizing,\n    onResizeStart,\n    onResizeEnd,\n    onResizeHandler,\n    handleKeyboardResize,\n  };\n};\n"],
-  "mappings": "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",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { cloneDeep } from 'lodash-es';\nimport React, { useCallback, useMemo, useState } from 'react';\nimport { useInternalStore, usePropsStore } from '../../configs/useStore/createInternalAndPropsContext.js';\nimport { ColsLayoutStyle, DEFAULT_MAX_COLUMN_WIDTH, DEFAULT_MIN_COLUMN_WIDTH } from '../../configs/constants.js';\nimport {\n  changeGridLayout,\n  getGridLayout,\n  removeGridLayout,\n  setSubColumnsGridLayout,\n} from '../../helpers/gridLayoutHelpers.js';\nimport type { DSDataTableT } from '../../react-desc-prop-types.js';\n\n// if number > max => max\n// if number < min => min\n// else => number\nconst narrow = (value: number, min: number | undefined, max: number | undefined): number =>\n  Math.min(Math.max(value, min ?? DEFAULT_MIN_COLUMN_WIDTH), max ?? DEFAULT_MAX_COLUMN_WIDTH);\n\n// Returns the delta of the keyboard event\nconst getCorrectDelta = (e: React.KeyboardEvent) => {\n  let multiplier = 1;\n\n  if (e.shiftKey) multiplier *= 5;\n  if (e.altKey) multiplier *= 10;\n\n  if (e.code === 'ArrowLeft') {\n    return -multiplier;\n  }\n  if (e.code === 'ArrowRight') {\n    return multiplier;\n  }\n  return 0;\n};\n\nexport const useHeaderResizer = ({\n  columnId,\n  innerRef,\n}: {\n  columnId: string;\n  innerRef: React.MutableRefObject<HTMLInputElement | null>;\n}) => {\n  const visibleColumns = usePropsStore((state) => state.visibleColumns);\n  const onColumnResize = usePropsStore((state) => state.onColumnResize);\n  const onColumnSizeChange = usePropsStore((state) => state.onColumnSizeChange);\n  const virtualListRef = usePropsStore((state) => state.virtualListRef);\n  const colsLayoutStyle = usePropsStore((state) => state.colsLayoutStyle);\n  const closeFilterMenuIfOpen = useInternalStore((state) => state.closeFilterMenuIfOpen);\n\n  const [isResizing, setIsResizing] = useState(false);\n\n  const visibleColumnsCopy = useMemo(() => cloneDeep(visibleColumns), [visibleColumns]);\n\n  const visibleColumnsOnGridLayout = useMemo(\n    () =>\n      visibleColumnsCopy.reduce((acc, cur) => {\n        if (cur.columns) {\n          return acc.concat(cur.columns);\n        }\n        return acc.concat(cur);\n      }, [] as DSDataTableT.InternalColumn[]),\n    [visibleColumnsCopy],\n  );\n\n  const realColumnIndex = useMemo(\n    () => visibleColumnsOnGridLayout.findIndex((col) => col.id === columnId),\n    [columnId, visibleColumnsOnGridLayout],\n  );\n\n  const realColumnIndexRef = React.useRef(realColumnIndex);\n  realColumnIndexRef.current = realColumnIndex;\n\n  // PUI-17784: real width in pixels, fed to aria-valuenow/valuetext. Initialized synchronously from\n  // props \u2014 no effect needed. Mirrors columnsToGridImpl's own default (helpers/columnsToGrid.tsx,\n  // keep both in sync if that default ever changes): an explicit column.width wins; otherwise Fixed\n  // layout resolves to a known 150px; Auto layout with no explicit width has no synchronous numeric\n  // value (it's a flexible '1fr' the browser resolves at layout time) \u2014 aria-valuenow is legitimately\n  // absent until the user's first resize populates it via the handlers below, which already call\n  // setColumnWidth on every mouse/keyboard resize using the real applied width.\n  const [columnWidth, setColumnWidth] = useState<number | undefined>(\n    visibleColumnsOnGridLayout[realColumnIndex]?.width ?? (colsLayoutStyle === ColsLayoutStyle.Auto ? undefined : 150),\n  );\n\n  // Notifies the user of the change in the column size\n  const pushColumnSizeChange = useCallback(\n    (nextWidth: number) => {\n      // PUI-12695: Avoid unnecessary calls to onColumnResize\n      // Avoid calling onColumnResize if the width of the column has not changed\n      // unnecessary calls to onColumnResize can cause performance issues (next resizes were not working)\n      if (nextWidth === visibleColumnsOnGridLayout[realColumnIndexRef.current].width) return;\n      onColumnResize?.(columnId, nextWidth);\n      // this next line is updating also the visibleColumnsCopy via mutable changes\n      //   the mutable changes here works because what we mutate is a cloneDeep of the columns\n      visibleColumnsOnGridLayout[realColumnIndexRef.current].width = nextWidth;\n      onColumnSizeChange(visibleColumnsCopy, columnId, nextWidth);\n    },\n    [columnId, onColumnResize, onColumnSizeChange, realColumnIndexRef, visibleColumnsCopy, visibleColumnsOnGridLayout],\n  );\n\n  const onResizeStart = useCallback(() => {\n    setIsResizing(true);\n    /**\n     * PUI-18785: the resize handle shares the same containment root cause as the header click and\n     * drag handle \u2014 see closeFilterMenuIfOpen in useStore.tsx.\n     */\n    closeFilterMenuIfOpen(columnId);\n  }, [closeFilterMenuIfOpen, columnId]);\n\n  const onResizeEnd = useCallback(() => {\n    setIsResizing(false);\n    pushColumnSizeChange(getGridLayout(virtualListRef.current)[realColumnIndexRef.current]);\n    removeGridLayout(virtualListRef.current);\n  }, [pushColumnSizeChange, virtualListRef, realColumnIndexRef]);\n\n  // Mouse resize\n  const onResizeHandler = useCallback(\n    (e: MouseEvent | TouchEvent) => {\n      if (realColumnIndexRef.current === -1) return;\n\n      const delta =\n        ('clientX' in e ? e.clientX : e.touches[0].clientX) - (innerRef.current?.getBoundingClientRect().x ?? 0); // delta in pixels\n\n      const originalWidth = getGridLayout(virtualListRef.current)[realColumnIndexRef.current];\n\n      const widthWithDelta = narrow(\n        originalWidth + delta,\n        visibleColumnsOnGridLayout[realColumnIndexRef.current].minWidth,\n        visibleColumnsOnGridLayout[realColumnIndexRef.current].maxWidth,\n      );\n\n      changeGridLayout(virtualListRef.current, realColumnIndexRef.current, widthWithDelta);\n      setSubColumnsGridLayout(virtualListRef.current, visibleColumnsCopy);\n      setColumnWidth(widthWithDelta);\n\n      // We will notify the user of the change in the column size only when the user releases the mouse button\n\n      // To prevent text selection\n      e.preventDefault();\n      e.stopPropagation();\n    },\n    [innerRef, virtualListRef, visibleColumnsCopy, visibleColumnsOnGridLayout],\n  );\n\n  // Keyboard resize\n  const handleKeyboardResize = useCallback(\n    (e: React.KeyboardEvent) => {\n      if (realColumnIndexRef.current === -1) return;\n\n      if (e.key === 'Enter') {\n        e.stopPropagation();\n      }\n\n      if (e.code === 'ArrowLeft' || e.code === 'ArrowRight') {\n        e.preventDefault();\n      }\n\n      const delta = getCorrectDelta(e);\n\n      if (delta === 0) return;\n\n      const originalWidth = getGridLayout(virtualListRef.current)[realColumnIndexRef.current];\n\n      const widthWithDelta = narrow(\n        originalWidth + delta,\n        visibleColumnsOnGridLayout[realColumnIndexRef.current].minWidth,\n        visibleColumnsOnGridLayout[realColumnIndexRef.current].maxWidth,\n      );\n\n      changeGridLayout(virtualListRef.current, realColumnIndexRef.current, widthWithDelta);\n      setSubColumnsGridLayout(virtualListRef.current, visibleColumnsCopy);\n      setColumnWidth(widthWithDelta);\n\n      /**\n       * Commit the already-clamped width. getGridLayout() here would just re-read what\n       * changeGridLayout() set above (widthWithDelta) \u2014 adding delta again double-counted it and\n       * committed a width past minWidth/maxWidth (PUI-12696).\n       */\n      pushColumnSizeChange(widthWithDelta);\n      removeGridLayout(virtualListRef.current);\n    },\n    [pushColumnSizeChange, virtualListRef, visibleColumnsCopy, visibleColumnsOnGridLayout],\n  );\n\n  return {\n    isResizing,\n    columnWidth,\n    onResizeStart,\n    onResizeEnd,\n    onResizeHandler,\n    handleKeyboardResize,\n  };\n};\n"],
+  "mappings": "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",
   "names": ["React"]
 }

package/dist/esm/parts/HoC/withDnDSortableColumnContext.js

@@ -9,6 +9,7 @@ import { DnDGroupContext } from "./DnDGroupContext.js";
 const withDnDSortableColumnContext = (Component) => (props) => {
   const dragAndDropColumns = usePropsStore((state) => state.dragAndDropColumns);
   const setIsHeaderCellDragging = useInternalStore((state) => state.setIsHeaderCellDragging);
+  const closeFilterMenuIfOpen = useInternalStore((state) => state.closeFilterMenuIfOpen);
   const { activeIndex } = useContext(DnDGroupContext);
   const draggableOptions = useMemo(
     () => ({
@@ -20,10 +21,11 @@ const withDnDSortableColumnContext = (Component) => (props) => {
   useEffect(() => {
     if (useSortableHelpers.isDragging) {
       setIsHeaderCellDragging(true);
+      closeFilterMenuIfOpen(props.header.id);
     } else {
       setIsHeaderCellDragging(false);
     }
-  }, [useSortableHelpers.isDragging, setIsHeaderCellDragging]);
+  }, [useSortableHelpers.isDragging, setIsHeaderCellDragging, closeFilterMenuIfOpen, props.header.id]);
   const draggableProps = useMemo(() => {
     if (!dragAndDropColumns) return false;
     const { index, overIndex } = useSortableHelpers;

package/dist/esm/parts/HoC/withDnDSortableColumnContext.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/parts/HoC/withDnDSortableColumnContext.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable react/function-component-definition */\nimport { useSortable } from '@elliemae/ds-drag-and-drop';\nimport React, { useContext, useEffect, useMemo } from 'react';\nimport { DropIndicatorPosition } from '../../configs/constants.js';\nimport { useInternalStore, usePropsStore } from '../../configs/useStore/createInternalAndPropsContext.js';\nimport type { DSDataTableT } from '../../react-desc-prop-types.js';\nimport type { SortableItemContextType } from './SortableItemContext.js';\nimport { SortableItemContext } from './SortableItemContext.js';\nimport { DnDGroupContext } from './DnDGroupContext.js';\n\nexport const withDnDSortableColumnContext =\n  <T extends { header: DSDataTableT.InternalColumn }>(Component: React.ComponentType<T>) =>\n  (props: T) => {\n    const dragAndDropColumns = usePropsStore((state) => state.dragAndDropColumns);\n    const setIsHeaderCellDragging = useInternalStore((state) => state.setIsHeaderCellDragging);\n\n    const { activeIndex } = useContext(DnDGroupContext);\n\n    // onMount generate unique options, so everyting is only ran once\n    const draggableOptions = useMemo(\n      () => ({\n        id: props.header.id,\n      }),\n      [props.header.id],\n    );\n\n    const useSortableHelpers = useSortable(draggableOptions);\n\n    // Since Header component for some reason is being render inside the virtual scrollable list,\n    // we need to bubble this prop up to avoid the row list being scrolled when dragging a header cell.\n    useEffect(() => {\n      if (useSortableHelpers.isDragging) {\n        setIsHeaderCellDragging(true);\n      } else {\n        setIsHeaderCellDragging(false);\n      }\n    }, [useSortableHelpers.isDragging, setIsHeaderCellDragging]);\n    // calculate all the \"useSortable\" values as per required\n    const draggableProps: DSDataTableT.DraggablePropsT = useMemo(() => {\n      if (!dragAndDropColumns) return false;\n\n      const { index, overIndex } = useSortableHelpers;\n\n      return {\n        ...useSortableHelpers,\n        shouldShowDropIndicatorPosition: overIndex === index && overIndex !== -1,\n        dropIndicatorPosition:\n          activeIndex && index > activeIndex ? DropIndicatorPosition.After : DropIndicatorPosition.Before,\n        isDropValid: true,\n      };\n    }, [useSortableHelpers, dragAndDropColumns, activeIndex]);\n    // we use a context so we can easly access information wherever without bubbling down\n    // this context is all Memoized so as long as component is not re-mounted,\n    // the context won't trigger un-required renders per-se...\n    const ctx: SortableItemContextType = useMemo(\n      () => ({\n        draggableProps,\n      }),\n      [draggableProps],\n    );\n    // we always add the context, if draggableProps===false we don't have the DnD enabled.\n    return (\n      <SortableItemContext.Provider value={ctx}>\n        <Component {...props} />\n      </SortableItemContext.Provider>\n    );\n  };\n"],
-  "mappings": "AAAA,YAAY,WAAW;AC+Df;AA9DR,SAAS,mBAAmB;AAC5B,SAAgB,YAAY,WAAW,eAAe;AACtD,SAAS,6BAA6B;AACtC,SAAS,kBAAkB,qBAAqB;AAGhD,SAAS,2BAA2B;AACpC,SAAS,uBAAuB;AAEzB,MAAM,+BACX,CAAoD,cACpD,CAAC,UAAa;AACZ,QAAM,qBAAqB,cAAc,CAAC,UAAU,MAAM,kBAAkB;AAC5E,QAAM,0BAA0B,iBAAiB,CAAC,UAAU,MAAM,uBAAuB;AAEzF,QAAM,EAAE,YAAY,IAAI,WAAW,eAAe;AAGlD,QAAM,mBAAmB;AAAA,IACvB,OAAO;AAAA,MACL,IAAI,MAAM,OAAO;AAAA,IACnB;AAAA,IACA,CAAC,MAAM,OAAO,EAAE;AAAA,EAClB;AAEA,QAAM,qBAAqB,YAAY,gBAAgB;AAIvD,YAAU,MAAM;AACd,QAAI,mBAAmB,YAAY;AACjC,8BAAwB,IAAI;AAAA,IAC9B,OAAO;AACL,8BAAwB,KAAK;AAAA,IAC/B;AAAA,EACF,GAAG,CAAC,mBAAmB,YAAY,uBAAuB,CAAC;AAE3D,QAAM,iBAA+C,QAAQ,MAAM;AACjE,QAAI,CAAC,mBAAoB,QAAO;AAEhC,UAAM,EAAE,OAAO,UAAU,IAAI;AAE7B,WAAO;AAAA,MACL,GAAG;AAAA,MACH,iCAAiC,cAAc,SAAS,cAAc;AAAA,MACtE,uBACE,eAAe,QAAQ,cAAc,sBAAsB,QAAQ,sBAAsB;AAAA,MAC3F,aAAa;AAAA,IACf;AAAA,EACF,GAAG,CAAC,oBAAoB,oBAAoB,WAAW,CAAC;AAIxD,QAAM,MAA+B;AAAA,IACnC,OAAO;AAAA,MACL;AAAA,IACF;AAAA,IACA,CAAC,cAAc;AAAA,EACjB;AAEA,SACE,oBAAC,oBAAoB,UAApB,EAA6B,OAAO,KACnC,8BAAC,aAAW,GAAG,OAAO,GACxB;AAEJ;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable react/function-component-definition */\nimport { useSortable } from '@elliemae/ds-drag-and-drop';\nimport React, { useContext, useEffect, useMemo } from 'react';\nimport { DropIndicatorPosition } from '../../configs/constants.js';\nimport { useInternalStore, usePropsStore } from '../../configs/useStore/createInternalAndPropsContext.js';\nimport type { DSDataTableT } from '../../react-desc-prop-types.js';\nimport type { SortableItemContextType } from './SortableItemContext.js';\nimport { SortableItemContext } from './SortableItemContext.js';\nimport { DnDGroupContext } from './DnDGroupContext.js';\n\nexport const withDnDSortableColumnContext =\n  <T extends { header: DSDataTableT.InternalColumn }>(Component: React.ComponentType<T>) =>\n  (props: T) => {\n    const dragAndDropColumns = usePropsStore((state) => state.dragAndDropColumns);\n    const setIsHeaderCellDragging = useInternalStore((state) => state.setIsHeaderCellDragging);\n    const closeFilterMenuIfOpen = useInternalStore((state) => state.closeFilterMenuIfOpen);\n\n    const { activeIndex } = useContext(DnDGroupContext);\n\n    // onMount generate unique options, so everyting is only ran once\n    const draggableOptions = useMemo(\n      () => ({\n        id: props.header.id,\n      }),\n      [props.header.id],\n    );\n\n    const useSortableHelpers = useSortable(draggableOptions);\n\n    // Since Header component for some reason is being render inside the virtual scrollable list,\n    // we need to bubble this prop up to avoid the row list being scrolled when dragging a header cell.\n    useEffect(() => {\n      if (useSortableHelpers.isDragging) {\n        setIsHeaderCellDragging(true);\n        /**\n         * PUI-18785: close this column's own filter menu as soon as its drag actually starts,\n         * rather than disabling the drag while the menu is open \u2014 disabling made dnd-kit drop its\n         * pointer listeners entirely, so the same press that should close-and-drag only closed the\n         * menu, forcing the user into a second press to actually drag. Reacting to isDragging keeps\n         * it a single gesture: the PointerSensor has no activation constraint, so this fires on the\n         * first pointer move, before the popover (anchored to the header) visibly follows it.\n         */\n        closeFilterMenuIfOpen(props.header.id);\n      } else {\n        setIsHeaderCellDragging(false);\n      }\n    }, [useSortableHelpers.isDragging, setIsHeaderCellDragging, closeFilterMenuIfOpen, props.header.id]);\n    // calculate all the \"useSortable\" values as per required\n    const draggableProps: DSDataTableT.DraggablePropsT = useMemo(() => {\n      if (!dragAndDropColumns) return false;\n\n      const { index, overIndex } = useSortableHelpers;\n\n      return {\n        ...useSortableHelpers,\n        shouldShowDropIndicatorPosition: overIndex === index && overIndex !== -1,\n        dropIndicatorPosition:\n          activeIndex && index > activeIndex ? DropIndicatorPosition.After : DropIndicatorPosition.Before,\n        isDropValid: true,\n      };\n    }, [useSortableHelpers, dragAndDropColumns, activeIndex]);\n    // we use a context so we can easly access information wherever without bubbling down\n    // this context is all Memoized so as long as component is not re-mounted,\n    // the context won't trigger un-required renders per-se...\n    const ctx: SortableItemContextType = useMemo(\n      () => ({\n        draggableProps,\n      }),\n      [draggableProps],\n    );\n    // we always add the context, if draggableProps===false we don't have the DnD enabled.\n    return (\n      <SortableItemContext.Provider value={ctx}>\n        <Component {...props} />\n      </SortableItemContext.Provider>\n    );\n  };\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACyEf;AAxER,SAAS,mBAAmB;AAC5B,SAAgB,YAAY,WAAW,eAAe;AACtD,SAAS,6BAA6B;AACtC,SAAS,kBAAkB,qBAAqB;AAGhD,SAAS,2BAA2B;AACpC,SAAS,uBAAuB;AAEzB,MAAM,+BACX,CAAoD,cACpD,CAAC,UAAa;AACZ,QAAM,qBAAqB,cAAc,CAAC,UAAU,MAAM,kBAAkB;AAC5E,QAAM,0BAA0B,iBAAiB,CAAC,UAAU,MAAM,uBAAuB;AACzF,QAAM,wBAAwB,iBAAiB,CAAC,UAAU,MAAM,qBAAqB;AAErF,QAAM,EAAE,YAAY,IAAI,WAAW,eAAe;AAGlD,QAAM,mBAAmB;AAAA,IACvB,OAAO;AAAA,MACL,IAAI,MAAM,OAAO;AAAA,IACnB;AAAA,IACA,CAAC,MAAM,OAAO,EAAE;AAAA,EAClB;AAEA,QAAM,qBAAqB,YAAY,gBAAgB;AAIvD,YAAU,MAAM;AACd,QAAI,mBAAmB,YAAY;AACjC,8BAAwB,IAAI;AAS5B,4BAAsB,MAAM,OAAO,EAAE;AAAA,IACvC,OAAO;AACL,8BAAwB,KAAK;AAAA,IAC/B;AAAA,EACF,GAAG,CAAC,mBAAmB,YAAY,yBAAyB,uBAAuB,MAAM,OAAO,EAAE,CAAC;AAEnG,QAAM,iBAA+C,QAAQ,MAAM;AACjE,QAAI,CAAC,mBAAoB,QAAO;AAEhC,UAAM,EAAE,OAAO,UAAU,IAAI;AAE7B,WAAO;AAAA,MACL,GAAG;AAAA,MACH,iCAAiC,cAAc,SAAS,cAAc;AAAA,MACtE,uBACE,eAAe,QAAQ,cAAc,sBAAsB,QAAQ,sBAAsB;AAAA,MAC3F,aAAa;AAAA,IACf;AAAA,EACF,GAAG,CAAC,oBAAoB,oBAAoB,WAAW,CAAC;AAIxD,QAAM,MAA+B;AAAA,IACnC,OAAO;AAAA,MACL;AAAA,IACF;AAAA,IACA,CAAC,cAAc;AAAA,EACjB;AAEA,SACE,oBAAC,oBAAoB,UAApB,EAA6B,OAAO,KACnC,8BAAC,aAAW,GAAG,OAAO,GACxB;AAEJ;",
   "names": []
 }

package/dist/esm/parts/VirtualRowsList.js

@@ -12,6 +12,7 @@ import { useFreezeVirtualScrollOnDrag } from "../configs/useFreezeVirtualScrollO
 const VirtualRowsList = () => {
   const isLoading = usePropsStore((state) => state.isLoading);
   const virtualListRef = usePropsStore((state) => state.virtualListRef);
+  const headerHeightPx = usePropsStore((state) => state.headerHeightPx);
   const setBodyClientWidth = usePropsStore((state) => state.setBodyClientWidth);
   const flattenedData = usePropsStore((state) => state.flattenedData);
   const isEmptyContent = usePropsStore((state) => state.isEmptyContent);
@@ -57,6 +58,7 @@ const VirtualRowsList = () => {
       role: "rowgroup",
       gridLayout,
       totalColumnsWidth,
+      headerHeightPx,
       "aria-busy": isLoading,
       getOwnerProps,
       children: /* @__PURE__ */ jsxs(

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../src/parts/VirtualRowsList.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable consistent-return */\nimport React, { useCallback, useMemo } from 'react';\nimport { useInternalStore, usePropsStore } from '../configs/useStore/createInternalAndPropsContext.js';\nimport { DATA_TESTID } from '../configs/constants.js';\nimport { StyledTableContentWrapper, StyledVirtualListWrapper } from '../styled.js';\nimport { EmptyContent } from './EmptyContent.js'; // imported this way to avoid circular dependencies\nimport { Headers } from './Headers/index.js'; // imported this way to avoid circular dependencies\nimport { MemoizedLoader as Loader } from './Loader.js';\nimport { RowsWithContext as Rows } from './Rows.js'; // imported this way to avoid circular dependencies\nimport { useFreezeVirtualScrollOnDrag } from '../configs/useFreezeVirtualScrollOnDrag.js';\nexport const VirtualRowsList = () => {\n  const isLoading = usePropsStore((state) => state.isLoading);\n\n  const virtualListRef = usePropsStore((state) => state.virtualListRef);\n  const setBodyClientWidth = usePropsStore((state) => state.setBodyClientWidth);\n  const flattenedData = usePropsStore((state) => state.flattenedData);\n  const isEmptyContent = usePropsStore((state) => state.isEmptyContent);\n  const { totalColumnsWidth, gridLayout } = usePropsStore((state) => state.layoutHelpers);\n  const { totalSize, scrollToIndex } = usePropsStore((state) => state.virtualListHelpers);\n  const getOwnerProps = usePropsStore((store) => store.get);\n  const isHeaderCellDragging = useInternalStore((state) => state.isHeaderCellDragging);\n  const setFocusedRowId = useInternalStore((state) => state.setFocusedRowId);\n\n  const onKeyDown = useCallback(\n    (e: React.KeyboardEvent) => {\n      if (e.ctrlKey && e.code === 'End') {\n        scrollToIndex(flattenedData.length - 1);\n        setFocusedRowId(flattenedData[flattenedData.length - 1].uid);\n      } else if (e.ctrlKey && e.code === 'Home') {\n        scrollToIndex(0, { align: 'center' });\n        setFocusedRowId(flattenedData[0].uid);\n      }\n    },\n    [scrollToIndex, setFocusedRowId, flattenedData],\n  );\n\n  const tableContentWrapperHeight = useMemo(\n    () => (isEmptyContent || isLoading ? '100%' : totalSize),\n    [isEmptyContent, isLoading, totalSize],\n  );\n\n  useFreezeVirtualScrollOnDrag(virtualListRef, isHeaderCellDragging);\n\n  const trackVirtualListRefAndClientWidth = useCallback(\n    (node: HTMLDivElement | null) => {\n      virtualListRef.current = node;\n      if (node) {\n        const { clientWidth } = node;\n        // if we don't track this with a non-ref, react will not know some component needs to be re-rendered to apply the new width\n        setBodyClientWidth(clientWidth);\n      }\n    },\n    [virtualListRef, setBodyClientWidth],\n  );\n\n  return (\n    <StyledVirtualListWrapper\n      innerRef={trackVirtualListRefAndClientWidth}\n      data-testid={DATA_TESTID.DATA_TABLE_SCROLLABLE_CONTAINER}\n      onKeyDown={onKeyDown}\n      tabIndex={-1}\n      role=\"rowgroup\"\n      gridLayout={gridLayout}\n      totalColumnsWidth={totalColumnsWidth}\n      aria-busy={isLoading}\n      getOwnerProps={getOwnerProps}\n    >\n      <StyledTableContentWrapper\n        height={tableContentWrapperHeight}\n        rows={['min-content', 'auto']}\n        cols={['100%']}\n        getOwnerProps={getOwnerProps}\n      >\n        <Headers />\n        {isEmptyContent && <EmptyContent />}\n        {isLoading ? <Loader /> : null}\n        {!isLoading && !isEmptyContent && <Rows />}\n      </StyledTableContentWrapper>\n    </StyledVirtualListWrapper>\n  );\n};\n"],
-  "mappings": "AAAA,YAAY,WAAW;ACmEjB,SAME,KANF;AAlEN,SAAgB,aAAa,eAAe;AAC5C,SAAS,kBAAkB,qBAAqB;AAChD,SAAS,mBAAmB;AAC5B,SAAS,2BAA2B,gCAAgC;AACpE,SAAS,oBAAoB;AAC7B,SAAS,eAAe;AACxB,SAAS,kBAAkB,cAAc;AACzC,SAAS,mBAAmB,YAAY;AACxC,SAAS,oCAAoC;AACtC,MAAM,kBAAkB,MAAM;AACnC,QAAM,YAAY,cAAc,CAAC,UAAU,MAAM,SAAS;AAE1D,QAAM,iBAAiB,cAAc,CAAC,UAAU,MAAM,cAAc;AACpE,QAAM,qBAAqB,cAAc,CAAC,UAAU,MAAM,kBAAkB;AAC5E,QAAM,gBAAgB,cAAc,CAAC,UAAU,MAAM,aAAa;AAClE,QAAM,iBAAiB,cAAc,CAAC,UAAU,MAAM,cAAc;AACpE,QAAM,EAAE,mBAAmB,WAAW,IAAI,cAAc,CAAC,UAAU,MAAM,aAAa;AACtF,QAAM,EAAE,WAAW,cAAc,IAAI,cAAc,CAAC,UAAU,MAAM,kBAAkB;AACtF,QAAM,gBAAgB,cAAc,CAAC,UAAU,MAAM,GAAG;AACxD,QAAM,uBAAuB,iBAAiB,CAAC,UAAU,MAAM,oBAAoB;AACnF,QAAM,kBAAkB,iBAAiB,CAAC,UAAU,MAAM,eAAe;AAEzE,QAAM,YAAY;AAAA,IAChB,CAAC,MAA2B;AAC1B,UAAI,EAAE,WAAW,EAAE,SAAS,OAAO;AACjC,sBAAc,cAAc,SAAS,CAAC;AACtC,wBAAgB,cAAc,cAAc,SAAS,CAAC,EAAE,GAAG;AAAA,MAC7D,WAAW,EAAE,WAAW,EAAE,SAAS,QAAQ;AACzC,sBAAc,GAAG,EAAE,OAAO,SAAS,CAAC;AACpC,wBAAgB,cAAc,CAAC,EAAE,GAAG;AAAA,MACtC;AAAA,IACF;AAAA,IACA,CAAC,eAAe,iBAAiB,aAAa;AAAA,EAChD;AAEA,QAAM,4BAA4B;AAAA,IAChC,MAAO,kBAAkB,YAAY,SAAS;AAAA,IAC9C,CAAC,gBAAgB,WAAW,SAAS;AAAA,EACvC;AAEA,+BAA6B,gBAAgB,oBAAoB;AAEjE,QAAM,oCAAoC;AAAA,IACxC,CAAC,SAAgC;AAC/B,qBAAe,UAAU;AACzB,UAAI,MAAM;AACR,cAAM,EAAE,YAAY,IAAI;AAExB,2BAAmB,WAAW;AAAA,MAChC;AAAA,IACF;AAAA,IACA,CAAC,gBAAgB,kBAAkB;AAAA,EACrC;AAEA,SACE;AAAA,IAAC;AAAA;AAAA,MACC,UAAU;AAAA,MACV,eAAa,YAAY;AAAA,MACzB;AAAA,MACA,UAAU;AAAA,MACV,MAAK;AAAA,MACL;AAAA,MACA;AAAA,MACA,aAAW;AAAA,MACX;AAAA,MAEA;AAAA,QAAC;AAAA;AAAA,UACC,QAAQ;AAAA,UACR,MAAM,CAAC,eAAe,MAAM;AAAA,UAC5B,MAAM,CAAC,MAAM;AAAA,UACb;AAAA,UAEA;AAAA,gCAAC,WAAQ;AAAA,YACR,kBAAkB,oBAAC,gBAAa;AAAA,YAChC,YAAY,oBAAC,UAAO,IAAK;AAAA,YACzB,CAAC,aAAa,CAAC,kBAAkB,oBAAC,QAAK;AAAA;AAAA;AAAA,MAC1C;AAAA;AAAA,EACF;AAEJ;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable consistent-return */\nimport React, { useCallback, useMemo } from 'react';\nimport { useInternalStore, usePropsStore } from '../configs/useStore/createInternalAndPropsContext.js';\nimport { DATA_TESTID } from '../configs/constants.js';\nimport { StyledTableContentWrapper, StyledVirtualListWrapper } from '../styled.js';\nimport { EmptyContent } from './EmptyContent.js'; // imported this way to avoid circular dependencies\nimport { Headers } from './Headers/index.js'; // imported this way to avoid circular dependencies\nimport { MemoizedLoader as Loader } from './Loader.js';\nimport { RowsWithContext as Rows } from './Rows.js'; // imported this way to avoid circular dependencies\nimport { useFreezeVirtualScrollOnDrag } from '../configs/useFreezeVirtualScrollOnDrag.js';\nexport const VirtualRowsList = () => {\n  const isLoading = usePropsStore((state) => state.isLoading);\n\n  const virtualListRef = usePropsStore((state) => state.virtualListRef);\n  const headerHeightPx = usePropsStore((state) => state.headerHeightPx);\n  const setBodyClientWidth = usePropsStore((state) => state.setBodyClientWidth);\n  const flattenedData = usePropsStore((state) => state.flattenedData);\n  const isEmptyContent = usePropsStore((state) => state.isEmptyContent);\n  const { totalColumnsWidth, gridLayout } = usePropsStore((state) => state.layoutHelpers);\n  const { totalSize, scrollToIndex } = usePropsStore((state) => state.virtualListHelpers);\n  const getOwnerProps = usePropsStore((store) => store.get);\n  const isHeaderCellDragging = useInternalStore((state) => state.isHeaderCellDragging);\n  const setFocusedRowId = useInternalStore((state) => state.setFocusedRowId);\n\n  const onKeyDown = useCallback(\n    (e: React.KeyboardEvent) => {\n      if (e.ctrlKey && e.code === 'End') {\n        scrollToIndex(flattenedData.length - 1);\n        setFocusedRowId(flattenedData[flattenedData.length - 1].uid);\n      } else if (e.ctrlKey && e.code === 'Home') {\n        scrollToIndex(0, { align: 'center' });\n        setFocusedRowId(flattenedData[0].uid);\n      }\n    },\n    [scrollToIndex, setFocusedRowId, flattenedData],\n  );\n\n  const tableContentWrapperHeight = useMemo(\n    () => (isEmptyContent || isLoading ? '100%' : totalSize),\n    [isEmptyContent, isLoading, totalSize],\n  );\n\n  useFreezeVirtualScrollOnDrag(virtualListRef, isHeaderCellDragging);\n\n  const trackVirtualListRefAndClientWidth = useCallback(\n    (node: HTMLDivElement | null) => {\n      virtualListRef.current = node;\n      if (node) {\n        const { clientWidth } = node;\n        // if we don't track this with a non-ref, react will not know some component needs to be re-rendered to apply the new width\n        setBodyClientWidth(clientWidth);\n      }\n    },\n    [virtualListRef, setBodyClientWidth],\n  );\n\n  return (\n    <StyledVirtualListWrapper\n      innerRef={trackVirtualListRefAndClientWidth}\n      data-testid={DATA_TESTID.DATA_TABLE_SCROLLABLE_CONTAINER}\n      onKeyDown={onKeyDown}\n      tabIndex={-1}\n      role=\"rowgroup\"\n      gridLayout={gridLayout}\n      totalColumnsWidth={totalColumnsWidth}\n      headerHeightPx={headerHeightPx}\n      aria-busy={isLoading}\n      getOwnerProps={getOwnerProps}\n    >\n      <StyledTableContentWrapper\n        height={tableContentWrapperHeight}\n        rows={['min-content', 'auto']}\n        cols={['100%']}\n        getOwnerProps={getOwnerProps}\n      >\n        <Headers />\n        {isEmptyContent && <EmptyContent />}\n        {isLoading ? <Loader /> : null}\n        {!isLoading && !isEmptyContent && <Rows />}\n      </StyledTableContentWrapper>\n    </StyledVirtualListWrapper>\n  );\n};\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACqEjB,SAME,KANF;AApEN,SAAgB,aAAa,eAAe;AAC5C,SAAS,kBAAkB,qBAAqB;AAChD,SAAS,mBAAmB;AAC5B,SAAS,2BAA2B,gCAAgC;AACpE,SAAS,oBAAoB;AAC7B,SAAS,eAAe;AACxB,SAAS,kBAAkB,cAAc;AACzC,SAAS,mBAAmB,YAAY;AACxC,SAAS,oCAAoC;AACtC,MAAM,kBAAkB,MAAM;AACnC,QAAM,YAAY,cAAc,CAAC,UAAU,MAAM,SAAS;AAE1D,QAAM,iBAAiB,cAAc,CAAC,UAAU,MAAM,cAAc;AACpE,QAAM,iBAAiB,cAAc,CAAC,UAAU,MAAM,cAAc;AACpE,QAAM,qBAAqB,cAAc,CAAC,UAAU,MAAM,kBAAkB;AAC5E,QAAM,gBAAgB,cAAc,CAAC,UAAU,MAAM,aAAa;AAClE,QAAM,iBAAiB,cAAc,CAAC,UAAU,MAAM,cAAc;AACpE,QAAM,EAAE,mBAAmB,WAAW,IAAI,cAAc,CAAC,UAAU,MAAM,aAAa;AACtF,QAAM,EAAE,WAAW,cAAc,IAAI,cAAc,CAAC,UAAU,MAAM,kBAAkB;AACtF,QAAM,gBAAgB,cAAc,CAAC,UAAU,MAAM,GAAG;AACxD,QAAM,uBAAuB,iBAAiB,CAAC,UAAU,MAAM,oBAAoB;AACnF,QAAM,kBAAkB,iBAAiB,CAAC,UAAU,MAAM,eAAe;AAEzE,QAAM,YAAY;AAAA,IAChB,CAAC,MAA2B;AAC1B,UAAI,EAAE,WAAW,EAAE,SAAS,OAAO;AACjC,sBAAc,cAAc,SAAS,CAAC;AACtC,wBAAgB,cAAc,cAAc,SAAS,CAAC,EAAE,GAAG;AAAA,MAC7D,WAAW,EAAE,WAAW,EAAE,SAAS,QAAQ;AACzC,sBAAc,GAAG,EAAE,OAAO,SAAS,CAAC;AACpC,wBAAgB,cAAc,CAAC,EAAE,GAAG;AAAA,MACtC;AAAA,IACF;AAAA,IACA,CAAC,eAAe,iBAAiB,aAAa;AAAA,EAChD;AAEA,QAAM,4BAA4B;AAAA,IAChC,MAAO,kBAAkB,YAAY,SAAS;AAAA,IAC9C,CAAC,gBAAgB,WAAW,SAAS;AAAA,EACvC;AAEA,+BAA6B,gBAAgB,oBAAoB;AAEjE,QAAM,oCAAoC;AAAA,IACxC,CAAC,SAAgC;AAC/B,qBAAe,UAAU;AACzB,UAAI,MAAM;AACR,cAAM,EAAE,YAAY,IAAI;AAExB,2BAAmB,WAAW;AAAA,MAChC;AAAA,IACF;AAAA,IACA,CAAC,gBAAgB,kBAAkB;AAAA,EACrC;AAEA,SACE;AAAA,IAAC;AAAA;AAAA,MACC,UAAU;AAAA,MACV,eAAa,YAAY;AAAA,MACzB;AAAA,MACA,UAAU;AAAA,MACV,MAAK;AAAA,MACL;AAAA,MACA;AAAA,MACA;AAAA,MACA,aAAW;AAAA,MACX;AAAA,MAEA;AAAA,QAAC;AAAA;AAAA,UACC,QAAQ;AAAA,UACR,MAAM,CAAC,eAAe,MAAM;AAAA,UAC5B,MAAM,CAAC,MAAM;AAAA,UACb;AAAA,UAEA;AAAA,gCAAC,WAAQ;AAAA,YACR,kBAAkB,oBAAC,gBAAa;AAAA,YAChC,YAAY,oBAAC,UAAO,IAAK;AAAA,YACzB,CAAC,aAAa,CAAC,kBAAkB,oBAAC,QAAK;AAAA;AAAA;AAAA,MAC1C;AAAA;AAAA,EACF;AAEJ;",
   "names": []
 }

package/dist/esm/react-desc-prop-types.js

@@ -66,8 +66,12 @@ const DSDataTablePropTypes = {
       disableDnD: PropTypes.bool.description("Whereas this column should be draggable"),
       canResize: PropTypes.bool.description("Whereas this column should be resizable"),
       width: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).description("Width of this column"),
-      minWidth: PropTypes.number.description("Minimum width of this column, useful when resizing"),
-      maxWidth: PropTypes.number.description("Maximum width of this column, useful when resizing"),
+      minWidth: PropTypes.number.description(
+        "Minimum width this column can be resized down to. Defaults to 30px, which is NOT guaranteed to fit the header title and icon affordances (drag handle / filter / sort) enabled on this column. When isResizeable is used, pass an explicit minWidth sized to the actual header content \u2014 otherwise the resize handle can overlap the header title."
+      ),
+      maxWidth: PropTypes.number.description(
+        "Maximum width this column can be resized up to, useful when resizing. Defaults to 600px."
+      ),
       canSort: PropTypes.bool.description("Whereas this column is sortable"),
       disableFirstOptionFocusOnFilter: PropTypes.bool.description(
         "Whereas the first option should not be focused on filter"
@@ -87,7 +91,10 @@ const DSDataTablePropTypes = {
       alwaysDisplayEditIcon: PropTypes.bool.description(
         "Whereas to always show the edit icon on this column if it is editable"
       ),
-      textWrap: PropTypes.oneOf(["wrap", "wrap-all", "truncate"]).description("How to wrap the text in the column")
+      textWrap: PropTypes.oneOf(["wrap", "wrap-all", "truncate"]).description("How to wrap the text in the column"),
+      pillLabel: PropTypes.string.description(
+        "Overrides the filter pill label text for this column when non-empty; defaults to the column Header"
+      )
     })
   ).description("Array of columns").isRequired,
   data: PropTypes.arrayOf(

package/dist/esm/react-desc-prop-types.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../src/react-desc-prop-types.ts"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable max-lines */\n/* eslint-disable @typescript-eslint/no-empty-interface */\nimport { uid } from 'uid';\nimport type { Range, useVirtual } from 'react-virtual/types';\nimport type { ZustandT } from '@elliemae/ds-zustand-helpers';\nimport type { DSPaginationT } from '@elliemae/ds-pagination';\nimport { type TypescriptHelpersT } from '@elliemae/ds-typescript-helpers';\nimport type { DnDKitTree, useSortable } from '@elliemae/ds-drag-and-drop';\nimport type { DSControlledCheckboxT } from '@elliemae/ds-form-checkbox';\nimport type { DSComboboxT } from '@elliemae/ds-form-combobox';\nimport {\n  PropTypes,\n  getPropsPerSlotPropTypes,\n  type DSPropTypesSchema,\n  type ValidationMap,\n} from '@elliemae/ds-props-helpers';\nimport { FILTER_TYPES } from './exported-related/index.js';\nimport { type DropIndicatorPosition, ColsLayoutStyle } from './configs/constants.js';\nimport { DSDataTableName, DSDataTableSlots } from './constants/index.js';\nexport namespace DSDataTableT {\n  // ===========================================================================\n  // Typescript definition for auxiliary types\n  // ===========================================================================\n  type PropsT<D, R, O> = Partial<D> & R & O;\n\n  type InternalPropsT<D, R, O> = D & R & O;\n\n  // ===========================================================================\n  // Typescript definition for zustand store\n  // ===========================================================================\n\n  export type InternalAtoms = {\n    drilldownRowId: string | null;\n    focusedRowId: string | null;\n    isShiftPressed: boolean;\n    reduxHeaders: Record<string, ReduxHeader>;\n    isHeaderCellDragging: boolean;\n  };\n  export type UseAutoCalculatedT = {\n    /**\n     * visibleRangeRef: React.MutableRefObject<Range>\n     * We can use this ref to get the visible range of the virtual list\n     * taking in consideration the end-start and overscan.\n     */\n    visibleRangeRef: React.MutableRefObject<Range>;\n    columnHeaderRef: React.MutableRefObject<HTMLDivElement | null>;\n    virtualListRef: React.MutableRefObject<HTMLDivElement | null>;\n    flattenedData: InternalRow[];\n    allDataFlattened: InternalRow[];\n    isEmptyContent: boolean;\n    firstFocuseableColumnHeaderId: string | undefined;\n    visibleColumns: InternalColumn[];\n    virtualListHelpers: ReturnType<typeof useVirtual>;\n    layoutHelpers: {\n      totalColumnsWidth: number | string;\n      gridLayout: string[];\n    };\n    paginationHelpers: Pagination;\n    lastSelected: React.MutableRefObject<number>;\n    bodyClientWidth: number | string;\n    setBodyClientWidth: React.Dispatch<React.SetStateAction<number | string>>;\n  };\n  export type Selectors = Record<string, never>;\n  export type Reducers = {\n    patchHeader: (headerId: string, newHeader: Partial<ReduxHeader>) => void;\n    patchHeaderFilterButtonAndMenu: (headerId: string, value: boolean) => void;\n  };\n  export type ShuttleInternalStore = ZustandT.InternalStore<InternalAtoms, Selectors, Reducers>;\n\n  // ===========================================================================\n  // Typescript definition for data table related things\n  // ===========================================================================\n\n  export interface Filter {\n    id: string;\n    type: string;\n    value: unknown;\n  }\n\n  export type FilterFn<T> = (unfilteredData: Row[], filterKey: string, filterValue: T) => Row[];\n  export type FilterFnOutOfTheBoxCurrencyRange = DSDataTableT.FilterFn<{ from: string; to: string }>;\n  export type FilterFnOutOfTheBoxDateRange = DSDataTableT.FilterFn<{ startDate: string; endDate: string }>;\n  export type FilterFnOutOfTheBoxDateSwitcher = DSDataTableT.FilterFn<{\n    startDate: string;\n    endDate: string;\n    isDateRange: boolean;\n  }>;\n  export type FilterFnOutOfTheBoxMultiSelect = DSDataTableT.FilterFn<{ label: string; value: string }[]>;\n  export type FilterFnOutOfTheBoxNumberRange = DSDataTableT.FilterFn<{ from?: number; to?: number }>;\n  export type FilterFnOutOfTheBoxSingleDate = DSDataTableT.FilterFn<string>;\n  export type FilterFnOutOfTheBoxSingleSelect = DSDataTableT.FilterFn<{ label: string; value: string }>;\n  export type FilterFnOutOfTheBoxFreeTextSearch = DSDataTableT.FilterFn<string>;\n  export interface FilterItemProps {\n    column: InternalColumn;\n    filters: Filter[];\n    onFiltersChange: (filters: Filter[]) => void;\n    reduxHeader: ReduxHeader;\n    innerRef: React.MutableRefObject<HTMLButtonElement | null>;\n    referenceColumn?: HTMLDivElement | null;\n  }\n\n  export interface FilterProps<T> {\n    column: InternalColumn;\n    referenceColumn?: HTMLDivElement | null;\n    onValueChange: (type: string, value: T | undefined) => void;\n    patchHeaderFilterButtonAndMenu: (headerId: string, newState: boolean) => void;\n    patchHeader: (headerId: string, newHeader: ReduxHeader) => void;\n    filterValue: T;\n    reduxHeader: ReduxHeader;\n    innerRef: React.MutableRefObject<HTMLButtonElement | null>;\n    domIdAffix?: string;\n  }\n\n  export interface FilterPillProps<T> {\n    columnHeader: string;\n    column: string;\n    value: T;\n    filters: Filter[];\n    onFiltersChange: (filters: Filter[]) => void;\n    prevRef?: React.RefObject<HTMLElement>;\n    innerRef: React.RefObject<HTMLElement>;\n    nextRef?: React.RefObject<HTMLElement>;\n    onPillRemove?: (remove: () => void) => void;\n  }\n\n  export interface ReduxHeader {\n    hideFilterMenu?: boolean;\n    hideFilterButton?: boolean;\n    showDnDHandle?: boolean;\n    withTabStops?: boolean;\n    showSortCaret?: boolean;\n  }\n\n  export type SelectionItem = boolean | 'mixed';\n\n  export type Selection = Record<string | number, SelectionItem>;\n\n  export type UniqueRowAccessorType = string | string[] | ((row: Row) => string) | undefined;\n\n  export interface SortBy {\n    id: string;\n    desc: boolean;\n  }\n\n  export interface Pagination extends DSPaginationT.Props {\n    hasPagination: boolean;\n    pageIndex?: number;\n    canPreviousPage?: boolean;\n    canNextPage?: boolean;\n    pageSize?: number;\n    dataIsPage?: boolean;\n    showPerPageSelector?: boolean;\n    perPageOptions?: number[];\n    perPageStep?: number;\n    minPerPage?: number;\n    maxPerPage?: number;\n    onPageSizeChange?: (pageSize: number) => void;\n    onPreviousPage?: () => void;\n    onNextPage?: () => void;\n    onPageChange?: (page: number) => void;\n    pageCount?: number | string;\n    isLoadingPageCount?: boolean;\n    pageDetails?: string[];\n    pageDetailsTitle?: string;\n  }\n\n  export type RowVariant = 'ds-header-group-row' | 'ds-primary-row' | 'ds-secondary-row';\n\n  export interface RenderRowActionsConfig {\n    columnWidth: number;\n    renderer: React.ComponentType<CellProps>;\n  }\n\n  export type RenderRowActions = false | RenderRowActionsConfig;\n\n  export type DropIndicatorPositionValues = TypescriptHelpersT.ObjectValues<typeof DropIndicatorPosition>;\n\n  export type ColsLayoutStyleValues = TypescriptHelpersT.ObjectValues<typeof ColsLayoutStyle>;\n\n  export type DraggablePropsT =\n    | false\n    | (ReturnType<typeof useSortable> & {\n        dropIndicatorPosition: DropIndicatorPositionValues;\n        shouldShowDropIndicatorPosition: boolean;\n        isDropValid: boolean;\n      });\n\n  export type FilterOptionT = DSComboboxT.Props['allOptions'][number];\n  export type EditOptionT = DSComboboxT.Props['allOptions'][number];\n\n  // ===========================================================================\n  // Typescript definition for the row and columns\n  // ===========================================================================\n\n  export interface Row {\n    [key: string]: unknown;\n    id: string;\n    subRows?: Row[];\n    tableRowDetails?: React.ComponentType<DetailsProps>;\n    dimsumHeaderValue?: string;\n  }\n  export interface EditableCellProps<T extends HTMLElement = HTMLElement> extends CellProps<T> {\n    DefaultCellRender: JSX.Element;\n  }\n\n  export interface Column {\n    id?: string;\n    Header: string | React.ComponentType<HeaderProps>;\n    accessor?: string;\n    filter?: string;\n    filterOptions?: FilterOptionT[] | (() => FilterOptionT[]);\n    disableFirstOptionFocusOnFilter?: boolean;\n    editOptions?: EditOptionT[] | (() => EditOptionT[]);\n    filterMinWidth?: number | string;\n    Filter?: React.ComponentType<FilterProps<unknown>>;\n    Cell?: React.ComponentType<CellRendererProps>;\n    editable?: string | React.ComponentType<EditableCellProps>;\n    disableDnD?: boolean;\n    width?: number;\n    minWidth?: number;\n    maxWidth?: number;\n    padding?: number;\n    columns?: Column[];\n    canSort?: boolean;\n    isSortedDesc?: boolean;\n    canResize?: boolean;\n    isFocuseable?: boolean;\n    textWrap?: 'wrap' | 'wrap-all' | 'truncate';\n    ref?: React.MutableRefObject<HTMLTableColElement | null>;\n    required?: boolean;\n    cellStyle?: React.CSSProperties;\n    alwaysDisplayEditIcon?: boolean;\n  }\n\n  // ===========================================================================\n  // Typescript definition for the internal representation of the row and columns\n  // ===========================================================================\n\n  export interface InternalRow {\n    id: string;\n    uid: string;\n    index: number;\n    realIndex: number;\n    parent: InternalRow | null;\n    parentId: string | null;\n    parentIndex: number | null;\n    depth: number;\n    isExpanded: boolean;\n    subRows: Row[];\n    childrenCount: number;\n    original: Row;\n    cells: Cell[];\n  }\n\n  export interface InternalColumn extends Column {\n    index?: number;\n    id: string;\n    parentId: string | null;\n    depth: number;\n    ref: React.MutableRefObject<HTMLTableColElement | null>;\n    columns?: InternalColumn[];\n    persistFilterInputAfterSubmit?: boolean;\n  }\n\n  // ===========================================================================\n  // Typescript definition for the internal representation of the cell\n  // ===========================================================================\n\n  export interface CellRendererProps {\n    row: InternalRow;\n    column: InternalColumn;\n    cell: Cell;\n    isRowSelected: boolean;\n    isDragOverlay: boolean;\n    shouldAddExpandCell: boolean;\n    // cellIsNextToExpander: boolean;\n    isDisabledRow?: boolean;\n    draggableProps?: DraggablePropsT;\n    domIdAffix?: string;\n  }\n\n  export interface Cell<T extends HTMLElement = HTMLElement> {\n    column: InternalColumn;\n    value: unknown;\n    render: React.ComponentType<CellRendererProps>;\n    row: InternalRow;\n    ref: React.MutableRefObject<T | null>;\n    id: string;\n  }\n\n  // ===========================================================================\n  // Typescript definition for all component props\n  // ===========================================================================\n\n  export interface HeaderProps {\n    column: InternalColumn;\n    draggableProps: DraggablePropsT;\n  }\n\n  export interface CellProps<T extends HTMLElement = HTMLElement> {\n    row: InternalRow;\n    column: InternalColumn;\n    cell: Cell<T>;\n    domIdAffix?: string;\n    isRowSelected: boolean;\n    isDragOverlay: boolean;\n    shouldAddExpandCell: boolean;\n    cellIsNextToExpander: boolean;\n    isDisabledRow?: boolean;\n    draggableProps?: DraggablePropsT;\n  }\n\n  export interface DetailsProps {\n    detailsIndent: number;\n    row: InternalRow;\n  }\n  export interface RowVariantProps {\n    row: DSDataTableT.InternalRow;\n    itemIndex: number;\n    isDragOverlay: boolean;\n    focusedRowId: string | null;\n    drilldownRowId: string | null;\n  }\n\n  // ===========================================================================\n  // Typescript definition for the React Context\n  // ===========================================================================\n\n  export interface Context {\n    tableProps: InternalProps;\n    columnHeaderRef: React.MutableRefObject<HTMLDivElement | null>;\n    virtualListRef: React.MutableRefObject<HTMLDivElement | null>;\n    flattenedData: InternalRow[];\n    allDataFlattened: InternalRow[];\n    isEmptyContent: boolean;\n    firstFocuseableColumnHeaderId: string | undefined;\n    visibleColumns: InternalColumn[];\n    virtualListHelpers: ReturnType<typeof useVirtual>;\n    layoutHelpers: {\n      totalColumnsWidth: number | string;\n      gridLayout: string[];\n    };\n    paginationHelpers: Pagination;\n    drilldownRowId: string | null;\n    setDrilldownRowId: React.Dispatch<React.SetStateAction<string | null>>;\n    focusedRowId: string | null;\n    setFocusedRowId: React.Dispatch<React.SetStateAction<string | null>>;\n    reduxHeaders: Record<string, ReduxHeader>;\n    patchHeader: (headerId: string, newHeader: ReduxHeader) => void;\n    patchHeaderFilterButtonAndMenu: (headerId: string, value: boolean) => void;\n    isShiftPressed: boolean;\n    setIsShiftPressed: React.Dispatch<React.SetStateAction<boolean>>;\n    lastSelected: React.MutableRefObject<number>;\n    isHeaderCellDragging: boolean;\n    setIsHeaderCellDragging: React.Dispatch<React.SetStateAction<boolean>>;\n  }\n\n  export interface DefaultProps {\n    height: string;\n    width: string;\n    renderRowActions: false | RenderRowActionsConfig;\n    getRowVariant: (\n      row: InternalRow,\n      defaultCellRenderer: React.ComponentType<{\n        row: DSDataTableT.InternalRow;\n        isRowSelected: boolean;\n        isDragOverlay: boolean;\n      }>,\n    ) => RowVariant | React.ComponentType<RowVariantProps>;\n    withFilterBar: boolean;\n    isExpandable: boolean;\n    expandedRows: Record<string, boolean>;\n    disabledRows: Record<string, boolean>;\n    isResizeable: boolean;\n    isLoading: boolean;\n    pagination: false | Pagination;\n    filters: Filter[];\n    colsLayoutStyle: ColsLayoutStyleValues;\n    hiddenColumns: string[];\n    noResultsMessage: string;\n    dragAndDropRows: boolean;\n    maxDragAndDropLevel: number;\n    onRowsReorder: (\n      newData: Row[],\n      indexes: { targetIndex: number; fromIndex: number },\n      considerExpanding: string | null,\n      extraData: { flattenedData: InternalRow[]; allDataFlattened: InternalRow[] },\n    ) => void;\n    dragAndDropColumns: boolean;\n    onColumnsReorder: (newData: Column[], indexes: { targetIndex: number; fromIndex: number }) => void;\n    getIsDropValid: (\n      active: DnDKitTree.Item<Row>,\n      over: DnDKitTree.Item<Row>,\n      dropIndicatorPosition: DropIndicatorPositionValues,\n    ) => boolean;\n    onColumnResize: (headerId: string, width: number) => void;\n    onColumnSizeChange: (newColumns: Column[], headerId: string, width: number) => void;\n    onRowClick: TypescriptHelpersT.GenericFunc;\n    onRowFocus: TypescriptHelpersT.GenericFunc;\n    noSelectionColumn: boolean;\n    selectSingle: boolean;\n    onSelectionChange: (\n      newSelection: Selection,\n      selectedControl: string,\n      event: React.ChangeEvent | React.MouseEvent | React.KeyboardEvent,\n    ) => void;\n    textWrap: 'wrap' | 'wrap-all' | 'truncate';\n    onCellValueChange: (cellChange: { value: unknown; property: unknown; rowIndex: number }) => void;\n    onFiltersChange: TypescriptHelpersT.GenericFunc;\n    onPageChanged: TypescriptHelpersT.GenericFunc;\n    onRowExpand: (expandedRows: Record<string, boolean>, toggledRow: string) => void;\n    onColumnSortChange: (newSortRequest: { column: unknown; direction: unknown }) => void;\n    onColumnSort: (newColumns: Column[], headerId: string, direction: 'ASC' | 'DESC') => void;\n    isSkeleton: boolean;\n    domIdAffix?: string;\n  }\n  export interface OptionalProps\n    extends TypescriptHelpersT.PropsForGlobalOnSlots<typeof DSDataTableName, typeof DSDataTableSlots> {\n    uniqueRowAccessor?: UniqueRowAccessorType;\n    cellRendererProps?: Record<string, unknown>;\n    selection?: Selection;\n    groupedRowsRenderHeader?:\n      | ((dimsumHeaderValue: string | undefined, subRows: Row[] | undefined) => JSX.Element)\n      | string;\n    filterBarProps?: {\n      filterBarAddonRenderer?: React.ComponentType<{ innerRef: React.MutableRefObject<HTMLButtonElement | null> }>;\n      customPillRenderer?: React.ComponentType<FilterPillProps<unknown>>;\n      onClearAllFiltersClick?: () => void;\n      onDropdownMenuToggle?: (isOpen: boolean, eventType: string) => void;\n      onDropdownMenuClickOutside?: () => void;\n      onDropdownMenuTriggerClick?: () => void;\n      isDropdownMenuOpen?: boolean;\n      extraOptions?: { type: string; id: string; label: string; onClick?: TypescriptHelpersT.GenericFunc }[];\n    };\n    actionRef?: React.MutableRefObject<{\n      scrollToIndex: ReturnType<typeof useVirtual>['scrollToIndex'];\n      scrollToOffset: ReturnType<typeof useVirtual>['scrollToOffset'];\n    }>;\n    noResultsSecondaryMessage?: string;\n    noResultsButtonLabel?: string;\n    noResultsPlaceholder?: React.ReactElement;\n    onNoResultsButtonClick?: TypescriptHelpersT.GenericFunc;\n    onTableResize?: TypescriptHelpersT.GenericFunc;\n    Pagination?: React.ComponentType<Record<string, never>>;\n    getAriaLabelForRow?: (args: {\n      row: InternalRow;\n      selected: boolean;\n      disabled: boolean;\n      expandable: boolean;\n      expanded: boolean;\n    }) => string;\n    checkboxSelectAllProps?: DSControlledCheckboxT.Props;\n  }\n  export interface RequiredProps {\n    columns: Column[];\n    data: Row[];\n  }\n\n  export type Props = PropsT<DefaultProps, RequiredProps, OptionalProps>;\n\n  export type InternalProps = InternalPropsT<DefaultProps, RequiredProps, OptionalProps>;\n\n  export type GetOwnerPropsT = () => ZustandT.PropsStore<\n    DefaultProps & RequiredProps & OptionalProps & UseAutoCalculatedT\n  >;\n}\n\n// default props is a function to ensure that the uid is unique for each instance of the component\n// this is supported by the useMemoMergePropsWithDefault function.\nexport const defaultProps: () => DSDataTableT.DefaultProps = () => ({\n  height: '100%',\n  width: '100%',\n  renderRowActions: false,\n  getRowVariant: () => 'ds-primary-row',\n  isExpandable: false,\n  expandedRows: {},\n  disabledRows: {},\n  isResizeable: false,\n  isLoading: false,\n  pagination: false,\n  withFilterBar: false,\n  filters: [],\n  getIsDropValid: () => true,\n  onColumnResize: () => null,\n  onColumnSortChange: () => null,\n  colsLayoutStyle: ColsLayoutStyle.Fixed,\n  hiddenColumns: [],\n  noResultsMessage: 'No Results Found',\n  dragAndDropRows: false,\n  maxDragAndDropLevel: 1,\n  onRowsReorder: () => null,\n  dragAndDropColumns: false,\n  onColumnsReorder: () => null,\n  onColumnSizeChange: () => null,\n  onRowClick: () => null,\n  onRowFocus: () => null,\n  noSelectionColumn: false,\n  selectSingle: false,\n  onSelectionChange: () => null,\n  textWrap: 'wrap',\n  onCellValueChange: () => null,\n  onFiltersChange: () => null,\n  onPageChanged: () => null,\n  onRowExpand: () => null,\n  onColumnSort: () => null,\n  isSkeleton: false,\n  domIdAffix: uid(8),\n});\n\nexport const DSDataTablePropTypes: DSPropTypesSchema<DSDataTableT.Props> = {\n  ...getPropsPerSlotPropTypes(DSDataTableName, DSDataTableSlots),\n  columns: PropTypes.arrayOf(\n    PropTypes.shape({\n      Header: PropTypes.oneOfType([PropTypes.string, PropTypes.func, PropTypes.node]).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: PropTypes.oneOf(Object.values(FILTER_TYPES)).description('out-of-the-box filters'),\n      Filter: PropTypes.oneOfType([PropTypes.func, PropTypes.node]).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.node]).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      disableFirstOptionFocusOnFilter: PropTypes.bool.description(\n        'Whereas the first option should not be focused on filter',\n      ),\n      filterMinWidth: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).description(\n        'Minimum width of the filter',\n      ),\n      filterOptions: PropTypes.arrayOf(\n        PropTypes.shape({\n          dsId: PropTypes.string,\n          value: PropTypes.string,\n          label: PropTypes.string,\n        }),\n      ).description('Filter options'),\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: PropTypes.oneOf(['wrap', 'wrap-all', 'truncate']).description('How to wrap the text in the column'),\n    }),\n  ).description('Array of columns').isRequired,\n  data: PropTypes.arrayOf(\n    PropTypes.shape({\n      tableRowDetails: PropTypes.oneOfType([PropTypes.func, PropTypes.node]).description('Component for row details'),\n      dimsumHeaderValue: PropTypes.string.description('Header displayed on the header variant of the row'),\n    }),\n  ).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.node]).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.oneOfType([PropTypes.string, PropTypes.number]).description('How many pages are there'),\n      isLoadingPageCount: PropTypes.bool.description('Whether the page count is loading'),\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  Pagination: PropTypes.func.description('Custom component to show in place of 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  getIsDropValid: PropTypes.func.description('Function to determine if a drop is valid'),\n  textWrap: PropTypes.oneOf(['wrap', 'wrap-all', 'truncate']).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.node]).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  onTableResize: PropTypes.func.description(\n    'Function invoked when the size of the internal table changes, e.g. when a the browser window is resized',\n  ),\n  actionRef: PropTypes.object.description('Reference where all the exposed action callbacks will be exposed'),\n  getRowVariant: PropTypes.func\n    .description(\"Function invoked to determine a row's variant\")\n    .defaultValue(`() => 'ds-primary-row'`),\n  noSelectionColumn: PropTypes.bool.description('Whether to show the selection column or not').defaultValue(false),\n  onPageChanged: PropTypes.func.description('Function invoked when the page changes').defaultValue(() => null),\n  onNoResultsButtonClick: PropTypes.func\n    .description('Function invoked when the no results button is clicked')\n    .defaultValue(() => null),\n  isSkeleton: PropTypes.bool.description('Whether to show a skeleton loader in the datatable'),\n  getAriaLabelForRow: PropTypes.func.description('Function invoked to determine a row aria-label'),\n  domIdAffix: PropTypes.string\n    .description('Affix to avoid duplicate ids')\n    .defaultValue('8 randomly generated characters'),\n  checkboxSelectAllProps: PropTypes.object.description('Props for the select all checkbox'),\n};\n\nexport const DSDataTablePropTypesSchema = DSDataTablePropTypes as unknown as ValidationMap<DSDataTableT.Props>;\n"],
-  "mappings": "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",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable max-lines */\n/* eslint-disable @typescript-eslint/no-empty-interface */\nimport { uid } from 'uid';\nimport type { Range, useVirtual } from 'react-virtual/types';\nimport type { ZustandT } from '@elliemae/ds-zustand-helpers';\nimport type { DSPaginationT } from '@elliemae/ds-pagination';\nimport { type TypescriptHelpersT } from '@elliemae/ds-typescript-helpers';\nimport type { DnDKitTree, useSortable } from '@elliemae/ds-drag-and-drop';\nimport type { DSControlledCheckboxT } from '@elliemae/ds-form-checkbox';\nimport type { DSComboboxT } from '@elliemae/ds-form-combobox';\nimport {\n  PropTypes,\n  getPropsPerSlotPropTypes,\n  type DSPropTypesSchema,\n  type ValidationMap,\n} from '@elliemae/ds-props-helpers';\nimport { FILTER_TYPES } from './exported-related/index.js';\nimport { type DropIndicatorPosition, ColsLayoutStyle } from './configs/constants.js';\nimport { DSDataTableName, DSDataTableSlots } from './constants/index.js';\nexport namespace DSDataTableT {\n  // ===========================================================================\n  // Typescript definition for auxiliary types\n  // ===========================================================================\n  type PropsT<D, R, O> = Partial<D> & R & O;\n\n  type InternalPropsT<D, R, O> = D & R & O;\n\n  // ===========================================================================\n  // Typescript definition for zustand store\n  // ===========================================================================\n\n  export type InternalAtoms = {\n    drilldownRowId: string | null;\n    focusedRowId: string | null;\n    isShiftPressed: boolean;\n    reduxHeaders: Record<string, ReduxHeader>;\n    // PUI-15154: which column (if any) the mouse is currently over \u2014 tracked independently of\n    // reduxHeaders' hover/focus-derived fields so resetAllHeadersExcept can tell \"this other\n    // column is legitimately still hovered\" apart from \"this other column has the stuck-focus\n    // bug\" (hover and focus are independent axes: a column can be hovered while a different one\n    // has keyboard/click focus, and both should stay visible).\n    hoveredColumnId: string | null;\n    isHeaderCellDragging: boolean;\n  };\n  export type UseAutoCalculatedT = {\n    /**\n     * visibleRangeRef: React.MutableRefObject<Range>\n     * We can use this ref to get the visible range of the virtual list\n     * taking in consideration the end-start and overscan.\n     */\n    visibleRangeRef: React.MutableRefObject<Range>;\n    columnHeaderRef: React.MutableRefObject<HTMLDivElement | null>;\n    columnHeaderCallbackRef: (node: HTMLDivElement | null) => void;\n    /** Sticky header height (px) \u2014 drives both useVirtual paddingStart and the scroll container's scroll-padding-top (PUI-18626). */\n    headerHeightPx: number;\n    virtualListRef: React.MutableRefObject<HTMLDivElement | null>;\n    flattenedData: InternalRow[];\n    allDataFlattened: InternalRow[];\n    isEmptyContent: boolean;\n    firstFocuseableColumnHeaderId: string | undefined;\n    visibleColumns: InternalColumn[];\n    virtualListHelpers: ReturnType<typeof useVirtual>;\n    layoutHelpers: {\n      totalColumnsWidth: number | string;\n      gridLayout: string[];\n    };\n    paginationHelpers: Pagination;\n    lastSelected: React.MutableRefObject<number>;\n    bodyClientWidth: number | string;\n    setBodyClientWidth: React.Dispatch<React.SetStateAction<number | string>>;\n  };\n  export type Selectors = Record<string, never>;\n  export type Reducers = {\n    patchHeader: (headerId: string, newHeader: Partial<ReduxHeader>) => void;\n    patchHeaderFilterButtonAndMenu: (headerId: string, value: boolean) => void;\n    resetAllHeadersExcept: (exceptHeaderId: string) => void;\n    closeFilterMenuIfOpen: (headerId: string) => void;\n  };\n  export type ShuttleInternalStore = ZustandT.InternalStore<InternalAtoms, Selectors, Reducers>;\n\n  // ===========================================================================\n  // Typescript definition for data table related things\n  // ===========================================================================\n\n  export interface Filter {\n    id: string;\n    type: string;\n    value: unknown;\n  }\n\n  export type FilterFn<T> = (unfilteredData: Row[], filterKey: string, filterValue: T) => Row[];\n  export type FilterFnOutOfTheBoxCurrencyRange = DSDataTableT.FilterFn<{ from: string; to: string }>;\n  export type FilterFnOutOfTheBoxDateRange = DSDataTableT.FilterFn<{ startDate: string; endDate: string }>;\n  export type FilterFnOutOfTheBoxDateSwitcher = DSDataTableT.FilterFn<{\n    startDate: string;\n    endDate: string;\n    isDateRange: boolean;\n  }>;\n  export type FilterFnOutOfTheBoxMultiSelect = DSDataTableT.FilterFn<{ label: string; value: string }[]>;\n  export type FilterFnOutOfTheBoxNumberRange = DSDataTableT.FilterFn<{ from?: number; to?: number }>;\n  export type FilterFnOutOfTheBoxSingleDate = DSDataTableT.FilterFn<string>;\n  export type FilterFnOutOfTheBoxSingleSelect = DSDataTableT.FilterFn<{ label: string; value: string }>;\n  export type FilterFnOutOfTheBoxFreeTextSearch = DSDataTableT.FilterFn<string>;\n  export interface FilterItemProps {\n    column: InternalColumn;\n    filters: Filter[];\n    onFiltersChange: (filters: Filter[]) => void;\n    reduxHeader: ReduxHeader;\n    innerRef: React.MutableRefObject<HTMLButtonElement | null>;\n    referenceColumn?: HTMLDivElement | null;\n  }\n\n  export interface FilterProps<T> {\n    column: InternalColumn;\n    referenceColumn?: HTMLDivElement | null;\n    onValueChange: (type: string, value: T | undefined) => void;\n    patchHeaderFilterButtonAndMenu: (headerId: string, newState: boolean) => void;\n    patchHeader: (headerId: string, newHeader: ReduxHeader) => void;\n    filterValue: T;\n    reduxHeader: ReduxHeader;\n    innerRef: React.MutableRefObject<HTMLButtonElement | null>;\n    domIdAffix?: string;\n  }\n\n  export interface FilterPillProps<T> {\n    columnHeader: string;\n    column: string;\n    value: T;\n    filters: Filter[];\n    onFiltersChange: (filters: Filter[]) => void;\n    prevRef?: React.RefObject<HTMLElement>;\n    innerRef: React.RefObject<HTMLElement>;\n    nextRef?: React.RefObject<HTMLElement>;\n    onPillRemove?: (remove: () => void) => void;\n  }\n\n  export interface ReduxHeader {\n    hideFilterMenu?: boolean;\n    hideFilterButton?: boolean;\n    showDnDHandle?: boolean;\n    withTabStops?: boolean;\n    showSortCaret?: boolean;\n  }\n\n  export type SelectionItem = boolean | 'mixed';\n\n  export type Selection = Record<string | number, SelectionItem>;\n\n  export type UniqueRowAccessorType = string | string[] | ((row: Row) => string) | undefined;\n\n  export interface SortBy {\n    id: string;\n    desc: boolean;\n  }\n\n  export interface Pagination extends DSPaginationT.Props {\n    hasPagination: boolean;\n    pageIndex?: number;\n    canPreviousPage?: boolean;\n    canNextPage?: boolean;\n    pageSize?: number;\n    dataIsPage?: boolean;\n    showPerPageSelector?: boolean;\n    perPageOptions?: number[];\n    perPageStep?: number;\n    minPerPage?: number;\n    maxPerPage?: number;\n    onPageSizeChange?: (pageSize: number) => void;\n    onPreviousPage?: () => void;\n    onNextPage?: () => void;\n    onPageChange?: (page: number) => void;\n    pageCount?: number | string;\n    isLoadingPageCount?: boolean;\n    pageDetails?: string[];\n    pageDetailsTitle?: string;\n  }\n\n  export type RowVariant = 'ds-header-group-row' | 'ds-primary-row' | 'ds-secondary-row';\n\n  export interface RenderRowActionsConfig {\n    columnWidth: number;\n    renderer: React.ComponentType<CellProps>;\n  }\n\n  export type RenderRowActions = false | RenderRowActionsConfig;\n\n  export type DropIndicatorPositionValues = TypescriptHelpersT.ObjectValues<typeof DropIndicatorPosition>;\n\n  export type ColsLayoutStyleValues = TypescriptHelpersT.ObjectValues<typeof ColsLayoutStyle>;\n\n  export type DraggablePropsT =\n    | false\n    | (ReturnType<typeof useSortable> & {\n        dropIndicatorPosition: DropIndicatorPositionValues;\n        shouldShowDropIndicatorPosition: boolean;\n        isDropValid: boolean;\n      });\n\n  export type FilterOptionT = DSComboboxT.Props['allOptions'][number];\n  export type EditOptionT = DSComboboxT.Props['allOptions'][number];\n\n  // ===========================================================================\n  // Typescript definition for the row and columns\n  // ===========================================================================\n\n  export interface Row {\n    [key: string]: unknown;\n    id: string;\n    subRows?: Row[];\n    tableRowDetails?: React.ComponentType<DetailsProps>;\n    dimsumHeaderValue?: string;\n  }\n  export interface EditableCellProps<T extends HTMLElement = HTMLElement> extends CellProps<T> {\n    DefaultCellRender: JSX.Element;\n  }\n\n  export interface Column {\n    id?: string;\n    Header: string | React.ComponentType<HeaderProps>;\n    accessor?: string;\n    filter?: string;\n    filterOptions?: FilterOptionT[] | (() => FilterOptionT[]);\n    disableFirstOptionFocusOnFilter?: boolean;\n    editOptions?: EditOptionT[] | (() => EditOptionT[]);\n    filterMinWidth?: number | string;\n    Filter?: React.ComponentType<FilterProps<unknown>>;\n    Cell?: React.ComponentType<CellRendererProps>;\n    editable?: string | React.ComponentType<EditableCellProps>;\n    disableDnD?: boolean;\n    width?: number;\n    minWidth?: number;\n    maxWidth?: number;\n    padding?: number;\n    columns?: Column[];\n    canSort?: boolean;\n    isSortedDesc?: boolean;\n    canResize?: boolean;\n    isFocuseable?: boolean;\n    textWrap?: 'wrap' | 'wrap-all' | 'truncate';\n    pillLabel?: string;\n    ref?: React.MutableRefObject<HTMLTableColElement | null>;\n    required?: boolean;\n    cellStyle?: React.CSSProperties;\n    alwaysDisplayEditIcon?: boolean;\n  }\n\n  // ===========================================================================\n  // Typescript definition for the internal representation of the row and columns\n  // ===========================================================================\n\n  export interface InternalRow {\n    id: string;\n    uid: string;\n    index: number;\n    realIndex: number;\n    parent: InternalRow | null;\n    parentId: string | null;\n    parentIndex: number | null;\n    depth: number;\n    isExpanded: boolean;\n    subRows: Row[];\n    childrenCount: number;\n    original: Row;\n    cells: Cell[];\n  }\n\n  export interface InternalColumn extends Column {\n    index?: number;\n    id: string;\n    parentId: string | null;\n    depth: number;\n    ref: React.MutableRefObject<HTMLTableColElement | null>;\n    columns?: InternalColumn[];\n    persistFilterInputAfterSubmit?: boolean;\n  }\n\n  // ===========================================================================\n  // Typescript definition for the internal representation of the cell\n  // ===========================================================================\n\n  export interface CellRendererProps {\n    row: InternalRow;\n    column: InternalColumn;\n    cell: Cell;\n    isRowSelected: boolean;\n    isDragOverlay: boolean;\n    shouldAddExpandCell: boolean;\n    // cellIsNextToExpander: boolean;\n    isDisabledRow?: boolean;\n    draggableProps?: DraggablePropsT;\n    domIdAffix?: string;\n  }\n\n  export interface Cell<T extends HTMLElement = HTMLElement> {\n    column: InternalColumn;\n    value: unknown;\n    render: React.ComponentType<CellRendererProps>;\n    row: InternalRow;\n    ref: React.MutableRefObject<T | null>;\n    id: string;\n  }\n\n  // ===========================================================================\n  // Typescript definition for all component props\n  // ===========================================================================\n\n  export interface HeaderProps {\n    column: InternalColumn;\n    draggableProps: DraggablePropsT;\n  }\n\n  export interface CellProps<T extends HTMLElement = HTMLElement> {\n    row: InternalRow;\n    column: InternalColumn;\n    cell: Cell<T>;\n    domIdAffix?: string;\n    isRowSelected: boolean;\n    isDragOverlay: boolean;\n    shouldAddExpandCell: boolean;\n    cellIsNextToExpander: boolean;\n    isDisabledRow?: boolean;\n    draggableProps?: DraggablePropsT;\n  }\n\n  export interface DetailsProps {\n    detailsIndent: number;\n    row: InternalRow;\n  }\n  export interface RowVariantProps {\n    row: DSDataTableT.InternalRow;\n    itemIndex: number;\n    isDragOverlay: boolean;\n    focusedRowId: string | null;\n    drilldownRowId: string | null;\n  }\n\n  // ===========================================================================\n  // Typescript definition for the React Context\n  // ===========================================================================\n\n  export interface Context {\n    tableProps: InternalProps;\n    columnHeaderRef: React.MutableRefObject<HTMLDivElement | null>;\n    virtualListRef: React.MutableRefObject<HTMLDivElement | null>;\n    flattenedData: InternalRow[];\n    allDataFlattened: InternalRow[];\n    isEmptyContent: boolean;\n    firstFocuseableColumnHeaderId: string | undefined;\n    visibleColumns: InternalColumn[];\n    virtualListHelpers: ReturnType<typeof useVirtual>;\n    layoutHelpers: {\n      totalColumnsWidth: number | string;\n      gridLayout: string[];\n    };\n    paginationHelpers: Pagination;\n    drilldownRowId: string | null;\n    setDrilldownRowId: React.Dispatch<React.SetStateAction<string | null>>;\n    focusedRowId: string | null;\n    setFocusedRowId: React.Dispatch<React.SetStateAction<string | null>>;\n    hoveredColumnId: string | null;\n    setHoveredColumnId: React.Dispatch<React.SetStateAction<string | null>>;\n    reduxHeaders: Record<string, ReduxHeader>;\n    patchHeader: (headerId: string, newHeader: ReduxHeader) => void;\n    patchHeaderFilterButtonAndMenu: (headerId: string, value: boolean) => void;\n    resetAllHeadersExcept: (exceptHeaderId: string) => void;\n    closeFilterMenuIfOpen: (headerId: string) => void;\n    isShiftPressed: boolean;\n    setIsShiftPressed: React.Dispatch<React.SetStateAction<boolean>>;\n    lastSelected: React.MutableRefObject<number>;\n    isHeaderCellDragging: boolean;\n    setIsHeaderCellDragging: React.Dispatch<React.SetStateAction<boolean>>;\n  }\n\n  export interface DefaultProps {\n    height: string;\n    width: string;\n    renderRowActions: false | RenderRowActionsConfig;\n    getRowVariant: (\n      row: InternalRow,\n      defaultCellRenderer: React.ComponentType<{\n        row: DSDataTableT.InternalRow;\n        isRowSelected: boolean;\n        isDragOverlay: boolean;\n      }>,\n    ) => RowVariant | React.ComponentType<RowVariantProps>;\n    withFilterBar: boolean;\n    isExpandable: boolean;\n    expandedRows: Record<string, boolean>;\n    disabledRows: Record<string, boolean>;\n    isResizeable: boolean;\n    isLoading: boolean;\n    pagination: false | Pagination;\n    filters: Filter[];\n    colsLayoutStyle: ColsLayoutStyleValues;\n    hiddenColumns: string[];\n    noResultsMessage: string;\n    dragAndDropRows: boolean;\n    maxDragAndDropLevel: number;\n    onRowsReorder: (\n      newData: Row[],\n      indexes: { targetIndex: number; fromIndex: number },\n      considerExpanding: string | null,\n      extraData: { flattenedData: InternalRow[]; allDataFlattened: InternalRow[] },\n    ) => void;\n    dragAndDropColumns: boolean;\n    onColumnsReorder: (newData: Column[], indexes: { targetIndex: number; fromIndex: number }) => void;\n    getIsDropValid: (\n      active: DnDKitTree.Item<Row>,\n      over: DnDKitTree.Item<Row>,\n      dropIndicatorPosition: DropIndicatorPositionValues,\n    ) => boolean;\n    onColumnResize: (headerId: string, width: number) => void;\n    onColumnSizeChange: (newColumns: Column[], headerId: string, width: number) => void;\n    onRowClick: TypescriptHelpersT.GenericFunc;\n    onRowFocus: TypescriptHelpersT.GenericFunc;\n    noSelectionColumn: boolean;\n    selectSingle: boolean;\n    onSelectionChange: (\n      newSelection: Selection,\n      selectedControl: string,\n      event: React.ChangeEvent | React.MouseEvent | React.KeyboardEvent,\n    ) => void;\n    textWrap: 'wrap' | 'wrap-all' | 'truncate';\n    onCellValueChange: (cellChange: { value: unknown; property: unknown; rowIndex: number }) => void;\n    onFiltersChange: TypescriptHelpersT.GenericFunc;\n    onPageChanged: TypescriptHelpersT.GenericFunc;\n    onRowExpand: (expandedRows: Record<string, boolean>, toggledRow: string) => void;\n    onColumnSortChange: (newSortRequest: { column: unknown; direction: unknown }) => void;\n    onColumnSort: (newColumns: Column[], headerId: string, direction: 'ASC' | 'DESC') => void;\n    isSkeleton: boolean;\n    domIdAffix?: string;\n  }\n  export interface OptionalProps extends TypescriptHelpersT.PropsForGlobalOnSlots<\n    typeof DSDataTableName,\n    typeof DSDataTableSlots\n  > {\n    uniqueRowAccessor?: UniqueRowAccessorType;\n    cellRendererProps?: Record<string, unknown>;\n    selection?: Selection;\n    groupedRowsRenderHeader?:\n      ((dimsumHeaderValue: string | undefined, subRows: Row[] | undefined) => JSX.Element) | string;\n    filterBarProps?: {\n      filterBarAddonRenderer?: React.ComponentType<{ innerRef: React.MutableRefObject<HTMLButtonElement | null> }>;\n      customPillRenderer?: React.ComponentType<FilterPillProps<unknown>>;\n      onClearAllFiltersClick?: () => void;\n      onDropdownMenuToggle?: (isOpen: boolean, eventType: string) => void;\n      onDropdownMenuClickOutside?: () => void;\n      onDropdownMenuTriggerClick?: () => void;\n      isDropdownMenuOpen?: boolean;\n      extraOptions?: { type: string; id: string; label: string; onClick?: TypescriptHelpersT.GenericFunc }[];\n    };\n    actionRef?: React.MutableRefObject<{\n      scrollToIndex: ReturnType<typeof useVirtual>['scrollToIndex'];\n      scrollToOffset: ReturnType<typeof useVirtual>['scrollToOffset'];\n    }>;\n    noResultsSecondaryMessage?: string;\n    noResultsButtonLabel?: string;\n    noResultsPlaceholder?: React.ReactElement;\n    onNoResultsButtonClick?: TypescriptHelpersT.GenericFunc;\n    onTableResize?: TypescriptHelpersT.GenericFunc;\n    Pagination?: React.ComponentType<Record<string, never>>;\n    getAriaLabelForRow?: (args: {\n      row: InternalRow;\n      selected: boolean;\n      disabled: boolean;\n      expandable: boolean;\n      expanded: boolean;\n    }) => string;\n    checkboxSelectAllProps?: DSControlledCheckboxT.Props;\n  }\n  export interface RequiredProps {\n    columns: Column[];\n    data: Row[];\n  }\n\n  export type Props = PropsT<DefaultProps, RequiredProps, OptionalProps>;\n\n  export type InternalProps = InternalPropsT<DefaultProps, RequiredProps, OptionalProps>;\n\n  export type GetOwnerPropsT = () => ZustandT.PropsStore<\n    DefaultProps & RequiredProps & OptionalProps & UseAutoCalculatedT\n  >;\n}\n\n// default props is a function to ensure that the uid is unique for each instance of the component\n// this is supported by the useMemoMergePropsWithDefault function.\nexport const defaultProps: () => DSDataTableT.DefaultProps = () => ({\n  height: '100%',\n  width: '100%',\n  renderRowActions: false,\n  getRowVariant: () => 'ds-primary-row',\n  isExpandable: false,\n  expandedRows: {},\n  disabledRows: {},\n  isResizeable: false,\n  isLoading: false,\n  pagination: false,\n  withFilterBar: false,\n  filters: [],\n  getIsDropValid: () => true,\n  onColumnResize: () => null,\n  onColumnSortChange: () => null,\n  colsLayoutStyle: ColsLayoutStyle.Fixed,\n  hiddenColumns: [],\n  noResultsMessage: 'No Results Found',\n  dragAndDropRows: false,\n  maxDragAndDropLevel: 1,\n  onRowsReorder: () => null,\n  dragAndDropColumns: false,\n  onColumnsReorder: () => null,\n  onColumnSizeChange: () => null,\n  onRowClick: () => null,\n  onRowFocus: () => null,\n  noSelectionColumn: false,\n  selectSingle: false,\n  onSelectionChange: () => null,\n  textWrap: 'wrap',\n  onCellValueChange: () => null,\n  onFiltersChange: () => null,\n  onPageChanged: () => null,\n  onRowExpand: () => null,\n  onColumnSort: () => null,\n  isSkeleton: false,\n  domIdAffix: uid(8),\n});\n\nexport const DSDataTablePropTypes: DSPropTypesSchema<DSDataTableT.Props> = {\n  ...getPropsPerSlotPropTypes(DSDataTableName, DSDataTableSlots),\n  columns: PropTypes.arrayOf(\n    PropTypes.shape({\n      Header: PropTypes.oneOfType([PropTypes.string, PropTypes.func, PropTypes.node]).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: PropTypes.oneOf(Object.values(FILTER_TYPES)).description('out-of-the-box filters'),\n      Filter: PropTypes.oneOfType([PropTypes.func, PropTypes.node]).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.node]).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(\n        'Minimum width this column can be resized down to. Defaults to 30px, which is NOT guaranteed to fit the header title and icon affordances (drag handle / filter / sort) enabled on this column. When isResizeable is used, pass an explicit minWidth sized to the actual header content \u2014 otherwise the resize handle can overlap the header title.',\n      ),\n      maxWidth: PropTypes.number.description(\n        'Maximum width this column can be resized up to, useful when resizing. Defaults to 600px.',\n      ),\n      canSort: PropTypes.bool.description('Whereas this column is sortable'),\n      disableFirstOptionFocusOnFilter: PropTypes.bool.description(\n        'Whereas the first option should not be focused on filter',\n      ),\n      filterMinWidth: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).description(\n        'Minimum width of the filter',\n      ),\n      filterOptions: PropTypes.arrayOf(\n        PropTypes.shape({\n          dsId: PropTypes.string,\n          value: PropTypes.string,\n          label: PropTypes.string,\n        }),\n      ).description('Filter options'),\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: PropTypes.oneOf(['wrap', 'wrap-all', 'truncate']).description('How to wrap the text in the column'),\n      pillLabel: PropTypes.string.description(\n        'Overrides the filter pill label text for this column when non-empty; defaults to the column Header',\n      ),\n    }),\n  ).description('Array of columns').isRequired,\n  data: PropTypes.arrayOf(\n    PropTypes.shape({\n      tableRowDetails: PropTypes.oneOfType([PropTypes.func, PropTypes.node]).description('Component for row details'),\n      dimsumHeaderValue: PropTypes.string.description('Header displayed on the header variant of the row'),\n    }),\n  ).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.node]).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.oneOfType([PropTypes.string, PropTypes.number]).description('How many pages are there'),\n      isLoadingPageCount: PropTypes.bool.description('Whether the page count is loading'),\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  Pagination: PropTypes.func.description('Custom component to show in place of 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  getIsDropValid: PropTypes.func.description('Function to determine if a drop is valid'),\n  textWrap: PropTypes.oneOf(['wrap', 'wrap-all', 'truncate']).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.node]).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  onTableResize: PropTypes.func.description(\n    'Function invoked when the size of the internal table changes, e.g. when a the browser window is resized',\n  ),\n  actionRef: PropTypes.object.description('Reference where all the exposed action callbacks will be exposed'),\n  getRowVariant: PropTypes.func\n    .description(\"Function invoked to determine a row's variant\")\n    .defaultValue(`() => 'ds-primary-row'`),\n  noSelectionColumn: PropTypes.bool.description('Whether to show the selection column or not').defaultValue(false),\n  onPageChanged: PropTypes.func.description('Function invoked when the page changes').defaultValue(() => null),\n  onNoResultsButtonClick: PropTypes.func\n    .description('Function invoked when the no results button is clicked')\n    .defaultValue(() => null),\n  isSkeleton: PropTypes.bool.description('Whether to show a skeleton loader in the datatable'),\n  getAriaLabelForRow: PropTypes.func.description('Function invoked to determine a row aria-label'),\n  domIdAffix: PropTypes.string\n    .description('Affix to avoid duplicate ids')\n    .defaultValue('8 randomly generated characters'),\n  checkboxSelectAllProps: PropTypes.object.description('Props for the select all checkbox'),\n};\n\nexport const DSDataTablePropTypesSchema = DSDataTablePropTypes as unknown as ValidationMap<DSDataTableT.Props>;\n"],
+  "mappings": "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",
   "names": []
 }

package/dist/esm/styled.js

@@ -3,9 +3,9 @@ import { DSInputText } from "@elliemae/ds-form-input-text";
 import { Grid } from "@elliemae/ds-grid";
 import { EditPencil } from "@elliemae/ds-icons";
 import { styled } from "@elliemae/ds-system";
-import { DSDataTableName, DSDataTableSlots } from "./constants/index.js";
 import { ColsLayoutStyle } from "./configs/constants.js";
 import { ZIndexDataTable } from "./configs/zIndexInternalConfig.js";
+import { DSDataTableName, DSDataTableSlots } from "./constants/index.js";
 import { cellPadding, columnPadding, sizeToCss } from "./helpers/index.js";
 const styledFocusCss = ({ theme }, color) => `
 &:after {
@@ -75,6 +75,13 @@ const StyledVirtualListWrapper = styled(Grid, {
 })`
   overflow: auto;
   height: 100%;
+  /**
+   * PUI-18626: reserve the sticky header's height as scroll-padding so the browser-native
+   * focus scroll (fired when keyboard navigation focuses a row) lands the focused row below
+   * the sticky header instead of behind it. Honored by scrollIntoView / native focus scroll;
+   * orthogonal to react-virtual's paddingStart, which only affects scrollToIndex offsets.
+   */
+  scroll-padding-top: ${(props) => props.headerHeightPx}px;
   --grid-layout: ${(props) => props.gridLayout.map((col) => `minmax(0, ${col})`).join(" ")};
   --total-width: ${(props) => sizeToCss(props.totalColumnsWidth)};
 `;
@@ -151,10 +158,10 @@ const StyledHeaderRightIconsWrapper = styled("div", {
   name: DSDataTableName,
   slot: DSDataTableSlots.HEAD_RIGHT_ICONS_WRAPPER
 })`
-  height: 100%;
   display: flex;
   align-items: center;
-  max-height: 24px;
+  align-self: flex-start;
+  padding-top: 2px;
 `;
 const StyledResizer = styled(DSInputText, {
   name: DSDataTableName,
@@ -162,6 +169,7 @@ const StyledResizer = styled(DSInputText, {
 })`
   width: 4px;
   height: 100%;
+
   position: absolute;
   right: 0;
   top: 0;
@@ -173,6 +181,7 @@ const StyledResizer = styled(DSInputText, {
   border: none;
   outline: none;
 
+
   &:hover,
   &:focus,
   &:focus-visible {
@@ -180,39 +189,33 @@ const StyledResizer = styled(DSInputText, {
     outline: none;
   }
 
-  input {
+ input {
     appearance: none;
     cursor: col-resize;
     background-image: transparent;
     padding: 0;
     border-radius: 0;
-
     &:focus::-webkit-slider-runnable-track {
       background: transparent;
     }
-
     &:focus-visible {
       background: brand-700;
       ::-webkit-slider-runnable-track {
         background: transparent;
       }
     }
-
     &::-webkit-slider-runnable-track {
       background: transparent;
     }
-
     &::-webkit-slider-thumb {
       appearance: none;
       background: transparent;
     }
-
     &::-moz-range-thumb {
       appearance: none;
       background: transparent;
       border: none;
     }
-  }
 `;
 const StyledActionCell = styled("div", {
   name: DSDataTableName,

package/dist/esm/styled.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../src/styled.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable max-lines */\nimport { DSInputText } from '@elliemae/ds-form-input-text';\nimport { Grid } from '@elliemae/ds-grid';\nimport { EditPencil } from '@elliemae/ds-icons';\nimport { styled, type Theme } from '@elliemae/ds-system';\nimport { DSDataTableName, DSDataTableSlots } from './constants/index.js';\nimport { ColsLayoutStyle } from './configs/constants.js';\nimport { ZIndexDataTable } from './configs/zIndexInternalConfig.js';\nimport { cellPadding, columnPadding, sizeToCss } from './helpers/index.js';\nimport type { DSDataTableT } from './react-desc-prop-types.js';\n\ninterface WidthAndHeight {\n  width?: string | number;\n  height?: string | number;\n}\n\nconst styledFocusCss = ({ theme }: { theme: Theme }, color?: string) => `\n&:after {\n  display: block;\n  content: ' ';\n  position: absolute;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  border: 2px solid ${color ?? theme.colors.brand[700]};\n  pointer-events: none;\n  z-index: ${ZIndexDataTable.FOCUS_BORDER};\n}`;\n\nexport const StyledFocusWithin = styled(Grid)<{ hideFocus?: boolean }>`\n  :focus-within {\n    ${(props) => (props.hideFocus ? '' : styledFocusCss(props))}\n  }\n  svg {\n    fill: ${(props) => props.theme.colors.brand['800']};\n  }\n`;\n\nexport const StyledDataTableWrapper = styled(Grid, {\n  name: DSDataTableName,\n  slot: DSDataTableSlots.ROOT,\n})<WidthAndHeight>`\n  width: ${(props) => sizeToCss(props.width ?? ' 100%')};\n  height: ${(props) => sizeToCss(props.height ?? ' 100%')};\n`;\n\nexport const StyledDataTableContentWrapper = styled(Grid, {\n  name: DSDataTableName,\n  slot: DSDataTableSlots.CONTENT_WRAPPER,\n})<{ noSelectionAllowed: boolean }>`\n  user-select: ${({ noSelectionAllowed }) => (noSelectionAllowed ? 'none' : 'auto')};\n  width: 100%;\n`;\n\nexport const StyledTableWrapper = styled('div', {\n  name: DSDataTableName,\n  slot: DSDataTableSlots.TABLE_WRAPPER,\n})<WidthAndHeight>`\n  display: inline-block;\n  border-spacing: 0;\n  z-index: 0;\n  position: relative;\n  width: 100%;\n  height: 100%;\n`;\n\nexport const StyledPaginationWrapper = styled('div', {\n  name: DSDataTableName,\n  slot: DSDataTableSlots.PAGINATION_WRAPPER,\n})`\n  width: 100%;\n`;\n\nexport const StyledTableContentWrapper = styled(Grid, {\n  name: DSDataTableName,\n  slot: DSDataTableSlots.TABLE_CONTENT_WRAPPER,\n})<{ height?: string | number }>`\n  position: relative;\n  ${({ height = 'auto' }) => `\n  height: ${sizeToCss(height) as string};\n  `}\n  width: var(--total-width);\n`;\n\nexport const StyledVirtualListWrapper = styled(Grid, {\n  name: DSDataTableName,\n  slot: DSDataTableSlots.VIRTUAL_LIST_WRAPPER,\n})<{ gridLayout: string[]; totalColumnsWidth: string | number }>`\n  overflow: auto;\n  height: 100%;\n  --grid-layout: ${(props) => props.gridLayout.map((col) => `minmax(0, ${col})`).join(' ')};\n  --total-width: ${(props) => sizeToCss(props.totalColumnsWidth)};\n`;\n\nexport const StyledHeadWrapper = styled(Grid, {\n  name: DSDataTableName,\n  slot: DSDataTableSlots.HEAD_WRAPPER,\n})<{\n  colsLayoutStyle: string;\n}>`\n  position: sticky;\n  top: 0;\n  z-index: 4;\n  background: white;\n  width: 100%;\n`;\n\nexport const StyledHeadTr = styled(Grid, {\n  name: DSDataTableName,\n  slot: DSDataTableSlots.HEAD_TR,\n})<{\n  isExpandable: boolean;\n  colsLayoutStyle: DSDataTableT.ColsLayoutStyleValues;\n}>`\n  ${(props) => (props.colsLayoutStyle === ColsLayoutStyle.Auto ? 'width:100%' : '')};\n  grid-template-columns: var(--grid-layout);\n  border-bottom: 1px solid ${(props) => props.theme.colors.neutral['080']};\n  grid-auto-flow: column;\n`;\n\nexport const StyledHeadTh = styled('div', {\n  name: DSDataTableName,\n  slot: DSDataTableSlots.HEAD_TH,\n})<{\n  isDraggingActive?: boolean;\n  column: DSDataTableT.InternalColumn;\n  shouldShowDnD?: boolean;\n}>`\n  min-height: 24px;\n  line-height: normal;\n  font-weight: 600;\n  text-transform: uppercase;\n  font-size: 0.923rem;\n  text-align: left;\n  ${columnPadding}\n  color: #353c46;\n  min-height: 1.84615rem;\n  position: sticky;\n  z-index: ${ZIndexDataTable.HEADER_ROW};\n  display: flex;\n  justify-content: space-between;\n  box-sizing: border-box;\n  outline: none;\n  ${(props) =>\n    props.isDraggingActive\n      ? ''\n      : `:hover {\n          &:after {\n            display: block;\n            content: ' ';\n            position: absolute;\n            top: 0;\n            left: 0;\n            right: 0;\n            bottom: 0;\n            border-bottom: 1px solid ${props.theme.colors.brand[700]};\n            pointer-events: none;\n            z-index: ${ZIndexDataTable.FOCUS_BORDER};\n          }\n          cursor: pointer;\n        }`}\n\n  :focus {\n    &:after {\n      display: block;\n      content: ' ';\n      position: absolute;\n      top: 0;\n      left: 0;\n      right: 0;\n      bottom: 0;\n      border: 2px solid ${(props) => props.theme.colors.brand[700]};\n      pointer-events: none;\n      z-index: ${ZIndexDataTable.FOCUS_BORDER};\n    }\n  }\n`;\n\nexport const StyledHeaderRightIconsWrapper = styled('div', {\n  name: DSDataTableName,\n  slot: DSDataTableSlots.HEAD_RIGHT_ICONS_WRAPPER,\n})`\n  height: 100%;\n  display: flex;\n  align-items: center;\n  max-height: 24px;\n`;\n\nexport const StyledResizer = styled(DSInputText, {\n  name: DSDataTableName,\n  slot: DSDataTableSlots.RESIZER,\n})`\n  width: 4px;\n  height: 100%;\n  position: absolute;\n  right: 0;\n  top: 0;\n  z-index: 0;\n  min-height: unset;\n  // prevents from scrolling while dragging on touch devices\n  touch-action: none;\n\n  border: none;\n  outline: none;\n\n  &:hover,\n  &:focus,\n  &:focus-visible {\n    border: none;\n    outline: none;\n  }\n\n  input {\n    appearance: none;\n    cursor: col-resize;\n    background-image: transparent;\n    padding: 0;\n    border-radius: 0;\n\n    &:focus::-webkit-slider-runnable-track {\n      background: transparent;\n    }\n\n    &:focus-visible {\n      background: brand-700;\n      ::-webkit-slider-runnable-track {\n        background: transparent;\n      }\n    }\n\n    &::-webkit-slider-runnable-track {\n      background: transparent;\n    }\n\n    &::-webkit-slider-thumb {\n      appearance: none;\n      background: transparent;\n    }\n\n    &::-moz-range-thumb {\n      appearance: none;\n      background: transparent;\n      border: none;\n    }\n  }\n`;\n\n// CELL ***********************************************************************/\nexport const StyledActionCell = styled('div', {\n  name: DSDataTableName,\n  slot: DSDataTableSlots.ACTION_CELL,\n})`\n  position: sticky;\n  display: inline-block;\n  right: 0;\n  /* border-bottom: 1px solid #ebedf0; */\n  background: white;\n`;\n\nexport const StyledCell = styled('div', {\n  name: DSDataTableName,\n  slot: DSDataTableSlots.CELL,\n})`\n  ${cellPadding}\n  display: flex;\n  align-items: center;\n  width: 100%;\n  position: relative;\n`;\n\nexport const StyledCellContent = styled('div', {\n  name: DSDataTableName,\n  slot: DSDataTableSlots.CELL_CONTENT,\n})`\n  display: grid;\n  justify-self: flex-end;\n  flex: 1 1 auto;\n  width: 100%;\n  height: 100%;\n  align-items: center;\n`;\n\nexport const StyledPencilIcon = styled(EditPencil, {\n  name: DSDataTableName,\n  slot: DSDataTableSlots.PENCIL_ICON,\n})``;\n\nexport const StyledEditableContainer = styled(Grid, {\n  name: DSDataTableName,\n  slot: DSDataTableSlots.EDITABLE_CONTAINER,\n})<{ shouldDisplayEditIcon?: boolean }>`\n  width: 100%;\n  height: 100%;\n  align-items: center;\n  & ${StyledPencilIcon} {\n    display: ${({ shouldDisplayEditIcon }) => (shouldDisplayEditIcon ? 'block' : 'none')};\n  }\n  &:hover {\n    ${StyledPencilIcon} {\n      display: block;\n    }\n  }\n  &:focus {\n    ${styledFocusCss}\n    ${StyledPencilIcon} {\n      display: block;\n    }\n  }\n  outline: none;\n`;\n\n// ROW ************************************************************************/\nexport const StyledFullsizeGrid = styled(Grid, {\n  name: DSDataTableName,\n  slot: DSDataTableSlots.FULLSIZE_GRID,\n})<{ minHeight: string }>`\n  position: relative;\n  z-index: ${ZIndexDataTable.ROW};\n\n  min-height: ${(props) => props.minHeight || '36px'};\n  height: ${(props) => props.height || 'auto'};\n`;\n\nexport const GroupHeaderContainer = styled(Grid, {\n  name: DSDataTableName,\n  slot: DSDataTableSlots.GROUP_HEADER_CONTAINER,\n})<{ paddingLeft: string }>`\n  position: relative;\n  background-color: ${({ theme }) => theme.colors.brand[200]};\n  align-items: center;\n  padding-left: ${(props) => props.paddingLeft};\n  border-top: 1px solid ${({ theme }) => theme.colors.brand[300]};\n`;\n\nexport const GroupHeaderTitle = styled('span', {\n  name: DSDataTableName,\n  slot: DSDataTableSlots.GROUP_HEADER_TITLE,\n})`\n  font-weight: ${(props) => props.theme.fontWeights.semibold};\n  font-size: 12px;\n  color: ${(props) => props.theme.colors.neutral[700]};\n`;\n\nexport const StyledCellContainer = styled(Grid, {\n  name: DSDataTableName,\n  slot: DSDataTableSlots.CELL_CONTAINER,\n})<{\n  backgroundColor?: string;\n  isDragOverlay?: boolean;\n  isDragging?: boolean;\n  isDisabled?: boolean;\n  isDropValid?: boolean;\n  shouldDisplayHover?: boolean;\n  isDropIndicatorPositionInside?: boolean;\n  minHeight?: string;\n  gridTemplateColumns?: string;\n}>`\n  position: relative;\n  z-index: 2;\n\n  min-height: ${(props) => props.minHeight || '36px'};\n  height: ${(props) => props.height || 'auto'};\n\n  width: 100%;\n  ${(props) => (props.isDragOverlay ? 'width: fit-content;' : '')};\n\n  grid-template-columns: ${(props) =>\n    props.isDragOverlay ? `minmax(0, 24px) minmax(0, auto)` : (props.gridTemplateColumns ?? `var(--grid-layout)`)};\n\n  background-color: ${({ backgroundColor, isDragging, theme }) =>\n    isDragging ? theme.colors.neutral[100] : backgroundColor || 'white'};\n\n  outline: none;\n\n  :focus {\n    ${(props) => (props.isDragOverlay ? '' : styledFocusCss(props))}\n  }\n\n  ${({ isDropIndicatorPositionInside, isDropValid, theme }) => {\n    if (!isDropIndicatorPositionInside) return '';\n    return styledFocusCss({ theme }, isDropValid ? theme.colors.brand[700] : theme.colors.danger[900]);\n  }}\n\n  ${({ shouldDisplayHover, theme, isDisabled }) =>\n    shouldDisplayHover && !isDisabled\n      ? `:hover {\n            background-color: ${theme.colors.brand[200]};\n          }`\n      : ''}\n\n  box-shadow: 0 2px 4px 0 ${(props) => (props.isDragOverlay ? 'rgba(0,0,0,0.5)' : 'transparent')};\n\n  opacity: ${(props) => (props.isDragging ? 0.8 : 1)};\n\n  ${(props) =>\n    !props.selected\n      ? ''\n      : `\n    background-color: ${props.theme.colors.brand[200]};\n    border: 1px solid ${props.theme.colors.brand[500]};\n    `}\n\n  ${GroupHeaderTitle} {\n    color: ${(props) => (props.isDisabled ? props.theme.colors.neutral['200'] : props.theme.colors.neutral['700'])};\n  }\n  color: ${(props) => (props.isDisabled ? props.theme.colors.neutral['200'] : '#333333')};\n\n  svg {\n    fill: ${(props) => (props.isDisabled ? props.theme.colors.neutral['200'] : props.theme.colors.brand['800'])};\n  }\n`;\n\nexport const ScreenReaderOnly = styled.div`\n  clip: rect(0 0 0 0);\n  clip-path: inset(50%);\n  height: 1px;\n  overflow: hidden;\n  position: absolute;\n  white-space: nowrap;\n  width: 1px;\n`;\n"],
-  "mappings": "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",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable max-lines */\nimport { DSInputText } from '@elliemae/ds-form-input-text';\nimport { Grid } from '@elliemae/ds-grid';\nimport { EditPencil } from '@elliemae/ds-icons';\nimport { styled, type Theme } from '@elliemae/ds-system';\nimport { ColsLayoutStyle } from './configs/constants.js';\nimport { ZIndexDataTable } from './configs/zIndexInternalConfig.js';\nimport { DSDataTableName, DSDataTableSlots } from './constants/index.js';\nimport { cellPadding, columnPadding, sizeToCss } from './helpers/index.js';\nimport type { DSDataTableT } from './react-desc-prop-types.js';\n\ninterface WidthAndHeight {\n  width?: string | number;\n  height?: string | number;\n}\n\nconst styledFocusCss = ({ theme }: { theme: Theme }, color?: string) => `\n&:after {\n  display: block;\n  content: ' ';\n  position: absolute;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  border: 2px solid ${color ?? theme.colors.brand[700]};\n  pointer-events: none;\n  z-index: ${ZIndexDataTable.FOCUS_BORDER};\n}`;\n\nexport const StyledFocusWithin = styled(Grid)<{ hideFocus?: boolean }>`\n  :focus-within {\n    ${(props) => (props.hideFocus ? '' : styledFocusCss(props))}\n  }\n  svg {\n    fill: ${(props) => props.theme.colors.brand['800']};\n  }\n`;\n\nexport const StyledDataTableWrapper = styled(Grid, {\n  name: DSDataTableName,\n  slot: DSDataTableSlots.ROOT,\n})<WidthAndHeight>`\n  width: ${(props) => sizeToCss(props.width ?? ' 100%')};\n  height: ${(props) => sizeToCss(props.height ?? ' 100%')};\n`;\n\nexport const StyledDataTableContentWrapper = styled(Grid, {\n  name: DSDataTableName,\n  slot: DSDataTableSlots.CONTENT_WRAPPER,\n})<{ noSelectionAllowed: boolean }>`\n  user-select: ${({ noSelectionAllowed }) => (noSelectionAllowed ? 'none' : 'auto')};\n  width: 100%;\n`;\n\nexport const StyledTableWrapper = styled('div', {\n  name: DSDataTableName,\n  slot: DSDataTableSlots.TABLE_WRAPPER,\n})<WidthAndHeight>`\n  display: inline-block;\n  border-spacing: 0;\n  z-index: 0;\n  position: relative;\n  width: 100%;\n  height: 100%;\n`;\n\nexport const StyledPaginationWrapper = styled('div', {\n  name: DSDataTableName,\n  slot: DSDataTableSlots.PAGINATION_WRAPPER,\n})`\n  width: 100%;\n`;\n\nexport const StyledTableContentWrapper = styled(Grid, {\n  name: DSDataTableName,\n  slot: DSDataTableSlots.TABLE_CONTENT_WRAPPER,\n})<{ height?: string | number }>`\n  position: relative;\n  ${({ height = 'auto' }) => `\n  height: ${sizeToCss(height) as string};\n  `}\n  width: var(--total-width);\n`;\n\nexport const StyledVirtualListWrapper = styled(Grid, {\n  name: DSDataTableName,\n  slot: DSDataTableSlots.VIRTUAL_LIST_WRAPPER,\n})<{ gridLayout: string[]; totalColumnsWidth: string | number; headerHeightPx: number }>`\n  overflow: auto;\n  height: 100%;\n  /**\n   * PUI-18626: reserve the sticky header's height as scroll-padding so the browser-native\n   * focus scroll (fired when keyboard navigation focuses a row) lands the focused row below\n   * the sticky header instead of behind it. Honored by scrollIntoView / native focus scroll;\n   * orthogonal to react-virtual's paddingStart, which only affects scrollToIndex offsets.\n   */\n  scroll-padding-top: ${(props) => props.headerHeightPx}px;\n  --grid-layout: ${(props) => props.gridLayout.map((col) => `minmax(0, ${col})`).join(' ')};\n  --total-width: ${(props) => sizeToCss(props.totalColumnsWidth)};\n`;\n\nexport const StyledHeadWrapper = styled(Grid, {\n  name: DSDataTableName,\n  slot: DSDataTableSlots.HEAD_WRAPPER,\n})<{\n  colsLayoutStyle: string;\n}>`\n  position: sticky;\n  top: 0;\n  z-index: 4;\n  background: white;\n  width: 100%;\n`;\n\nexport const StyledHeadTr = styled(Grid, {\n  name: DSDataTableName,\n  slot: DSDataTableSlots.HEAD_TR,\n})<{\n  isExpandable: boolean;\n  colsLayoutStyle: DSDataTableT.ColsLayoutStyleValues;\n}>`\n  ${(props) => (props.colsLayoutStyle === ColsLayoutStyle.Auto ? 'width:100%' : '')};\n  grid-template-columns: var(--grid-layout);\n  border-bottom: 1px solid ${(props) => props.theme.colors.neutral['080']};\n  grid-auto-flow: column;\n`;\n\nexport const StyledHeadTh = styled('div', {\n  name: DSDataTableName,\n  slot: DSDataTableSlots.HEAD_TH,\n})<{\n  isDraggingActive?: boolean;\n  column: DSDataTableT.InternalColumn;\n  shouldShowDnD?: boolean;\n}>`\n  min-height: 24px;\n  line-height: normal;\n  font-weight: 600;\n  text-transform: uppercase;\n  font-size: 0.923rem;\n  text-align: left;\n  ${columnPadding}\n  color: #353c46;\n  min-height: 1.84615rem;\n  position: sticky;\n  z-index: ${ZIndexDataTable.HEADER_ROW};\n  display: flex;\n  justify-content: space-between;\n  box-sizing: border-box;\n  outline: none;\n  ${(props) =>\n    props.isDraggingActive\n      ? ''\n      : `:hover {\n          &:after {\n            display: block;\n            content: ' ';\n            position: absolute;\n            top: 0;\n            left: 0;\n            right: 0;\n            bottom: 0;\n            border-bottom: 1px solid ${props.theme.colors.brand[700]};\n            pointer-events: none;\n            z-index: ${ZIndexDataTable.FOCUS_BORDER};\n          }\n          cursor: pointer;\n        }`}\n\n  :focus {\n    &:after {\n      display: block;\n      content: ' ';\n      position: absolute;\n      top: 0;\n      left: 0;\n      right: 0;\n      bottom: 0;\n      border: 2px solid ${(props) => props.theme.colors.brand[700]};\n      pointer-events: none;\n      z-index: ${ZIndexDataTable.FOCUS_BORDER};\n    }\n  }\n`;\n\nexport const StyledHeaderRightIconsWrapper = styled('div', {\n  name: DSDataTableName,\n  slot: DSDataTableSlots.HEAD_RIGHT_ICONS_WRAPPER,\n})`\n  display: flex;\n  align-items: center;\n  align-self: flex-start;\n  padding-top: 2px;\n`;\n\nexport const StyledResizer = styled(DSInputText, {\n  name: DSDataTableName,\n  slot: DSDataTableSlots.RESIZER,\n})`\n  width: 4px;\n  height: 100%;\n\n  position: absolute;\n  right: 0;\n  top: 0;\n  z-index: 0;\n  min-height: unset;\n  // prevents from scrolling while dragging on touch devices\n  touch-action: none;\n\n  border: none;\n  outline: none;\n\n\n  &:hover,\n  &:focus,\n  &:focus-visible {\n    border: none;\n    outline: none;\n  }\n\n input {\n    appearance: none;\n    cursor: col-resize;\n    background-image: transparent;\n    padding: 0;\n    border-radius: 0;\n    &:focus::-webkit-slider-runnable-track {\n      background: transparent;\n    }\n    &:focus-visible {\n      background: brand-700;\n      ::-webkit-slider-runnable-track {\n        background: transparent;\n      }\n    }\n    &::-webkit-slider-runnable-track {\n      background: transparent;\n    }\n    &::-webkit-slider-thumb {\n      appearance: none;\n      background: transparent;\n    }\n    &::-moz-range-thumb {\n      appearance: none;\n      background: transparent;\n      border: none;\n    }\n`;\n\n// CELL ***********************************************************************/\nexport const StyledActionCell = styled('div', {\n  name: DSDataTableName,\n  slot: DSDataTableSlots.ACTION_CELL,\n})`\n  position: sticky;\n  display: inline-block;\n  right: 0;\n  /* border-bottom: 1px solid #ebedf0; */\n  background: white;\n`;\n\nexport const StyledCell = styled('div', {\n  name: DSDataTableName,\n  slot: DSDataTableSlots.CELL,\n})`\n  ${cellPadding}\n  display: flex;\n  align-items: center;\n  width: 100%;\n  position: relative;\n`;\n\nexport const StyledCellContent = styled('div', {\n  name: DSDataTableName,\n  slot: DSDataTableSlots.CELL_CONTENT,\n})`\n  display: grid;\n  justify-self: flex-end;\n  flex: 1 1 auto;\n  width: 100%;\n  height: 100%;\n  align-items: center;\n`;\n\nexport const StyledPencilIcon = styled(EditPencil, {\n  name: DSDataTableName,\n  slot: DSDataTableSlots.PENCIL_ICON,\n})``;\n\nexport const StyledEditableContainer = styled(Grid, {\n  name: DSDataTableName,\n  slot: DSDataTableSlots.EDITABLE_CONTAINER,\n})<{ shouldDisplayEditIcon?: boolean }>`\n  width: 100%;\n  height: 100%;\n  align-items: center;\n  & ${StyledPencilIcon} {\n    display: ${({ shouldDisplayEditIcon }) => (shouldDisplayEditIcon ? 'block' : 'none')};\n  }\n  &:hover {\n    ${StyledPencilIcon} {\n      display: block;\n    }\n  }\n  &:focus {\n    ${styledFocusCss}\n    ${StyledPencilIcon} {\n      display: block;\n    }\n  }\n  outline: none;\n`;\n\n// ROW ************************************************************************/\nexport const StyledFullsizeGrid = styled(Grid, {\n  name: DSDataTableName,\n  slot: DSDataTableSlots.FULLSIZE_GRID,\n})<{ minHeight: string }>`\n  position: relative;\n  z-index: ${ZIndexDataTable.ROW};\n\n  min-height: ${(props) => props.minHeight || '36px'};\n  height: ${(props) => props.height || 'auto'};\n`;\n\nexport const GroupHeaderContainer = styled(Grid, {\n  name: DSDataTableName,\n  slot: DSDataTableSlots.GROUP_HEADER_CONTAINER,\n})<{ paddingLeft: string }>`\n  position: relative;\n  background-color: ${({ theme }) => theme.colors.brand[200]};\n  align-items: center;\n  padding-left: ${(props) => props.paddingLeft};\n  border-top: 1px solid ${({ theme }) => theme.colors.brand[300]};\n`;\n\nexport const GroupHeaderTitle = styled('span', {\n  name: DSDataTableName,\n  slot: DSDataTableSlots.GROUP_HEADER_TITLE,\n})`\n  font-weight: ${(props) => props.theme.fontWeights.semibold};\n  font-size: 12px;\n  color: ${(props) => props.theme.colors.neutral[700]};\n`;\n\nexport const StyledCellContainer = styled(Grid, {\n  name: DSDataTableName,\n  slot: DSDataTableSlots.CELL_CONTAINER,\n})<{\n  backgroundColor?: string;\n  isDragOverlay?: boolean;\n  isDragging?: boolean;\n  isDisabled?: boolean;\n  isDropValid?: boolean;\n  shouldDisplayHover?: boolean;\n  isDropIndicatorPositionInside?: boolean;\n  minHeight?: string;\n  gridTemplateColumns?: string;\n}>`\n  position: relative;\n  z-index: 2;\n\n  min-height: ${(props) => props.minHeight || '36px'};\n  height: ${(props) => props.height || 'auto'};\n\n  width: 100%;\n  ${(props) => (props.isDragOverlay ? 'width: fit-content;' : '')};\n\n  grid-template-columns: ${(props) =>\n    props.isDragOverlay ? `minmax(0, 24px) minmax(0, auto)` : (props.gridTemplateColumns ?? `var(--grid-layout)`)};\n\n  background-color: ${({ backgroundColor, isDragging, theme }) =>\n    isDragging ? theme.colors.neutral[100] : backgroundColor || 'white'};\n\n  outline: none;\n\n  :focus {\n    ${(props) => (props.isDragOverlay ? '' : styledFocusCss(props))}\n  }\n\n  ${({ isDropIndicatorPositionInside, isDropValid, theme }) => {\n    if (!isDropIndicatorPositionInside) return '';\n    return styledFocusCss({ theme }, isDropValid ? theme.colors.brand[700] : theme.colors.danger[900]);\n  }}\n\n  ${({ shouldDisplayHover, theme, isDisabled }) =>\n    shouldDisplayHover && !isDisabled\n      ? `:hover {\n            background-color: ${theme.colors.brand[200]};\n          }`\n      : ''}\n\n  box-shadow: 0 2px 4px 0 ${(props) => (props.isDragOverlay ? 'rgba(0,0,0,0.5)' : 'transparent')};\n\n  opacity: ${(props) => (props.isDragging ? 0.8 : 1)};\n\n  ${(props) =>\n    !props.selected\n      ? ''\n      : `\n    background-color: ${props.theme.colors.brand[200]};\n    border: 1px solid ${props.theme.colors.brand[500]};\n    `}\n\n  ${GroupHeaderTitle} {\n    color: ${(props) => (props.isDisabled ? props.theme.colors.neutral['200'] : props.theme.colors.neutral['700'])};\n  }\n  color: ${(props) => (props.isDisabled ? props.theme.colors.neutral['200'] : '#333333')};\n\n  svg {\n    fill: ${(props) => (props.isDisabled ? props.theme.colors.neutral['200'] : props.theme.colors.brand['800'])};\n  }\n`;\n\nexport const ScreenReaderOnly = styled.div`\n  clip: rect(0 0 0 0);\n  clip-path: inset(50%);\n  height: 1px;\n  overflow: hidden;\n  position: absolute;\n  white-space: nowrap;\n  width: 1px;\n`;\n"],
+  "mappings": "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",
   "names": []
 }

package/dist/types/TruncatedTooltipText.d.ts

@@ -4,6 +4,6 @@ interface TruncatedTooltipTextProps {
     value?: React.ReactNode;
     placement?: DSHookFloatingContextT.PopperPlacementsT;
 }
-declare const TruncatedTooltipText: ({ value, placement }: TruncatedTooltipTextProps) => import("react/jsx-runtime").JSX.Element;
+declare const TruncatedTooltipText: ({ value, placement }: TruncatedTooltipTextProps) => React.JSX.Element;
 export { TruncatedTooltipText };
 export default TruncatedTooltipText;

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

@@ -1,5 +1,5 @@
 import type React from 'react';
-import type { DSDataTableT } from 'react-desc-prop-types.js';
+import type { DSDataTableT } from '../../react-desc-prop-types.js';
 export declare const outOfTheBoxEditables: Record<string, {
     EditableComponent: React.ComponentType<DSDataTableT.EditableCellProps<HTMLDivElement>>;
 }>;