npm - @elliemae/ds-data-table - Versions diffs - 3.52.1 → 3.53.0-alpha.2 - Mend

@elliemae/ds-data-table 3.52.1 → 3.53.0-alpha.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (302) hide show

package/dist/esm/parts/Headers/HeaderCellTitle.js.map CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/parts/Headers/HeaderCellTitle.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React from 'react';\nimport { SimpleTruncatedTooltipText } from '@elliemae/ds-truncated-tooltip-text';\nimport type { DSDataTableT } from '../../react-desc-prop-types.js';\nimport type { SortableItemContextType } from '../HoC/SortableItemContext.js';\nimport { RequiredDot } from './RequiredDot.js';\nimport { DATA_TESTID } from '../../configs/constants.js';\n\ninterface HeaderCellTitleProps {\n  column: DSDataTableT.InternalColumn;\n  draggableProps: SortableItemContextType['draggableProps'];\n  textWrap: 'wrap' | 'wrap-all' | 'truncate';\n}\n\nconst StringTitle = ({ column, textWrap }: Pick<HeaderCellTitleProps, 'column' | 'textWrap'>) =>\n  (column.textWrap || textWrap) === 'truncate' ? (\n    // TODO @carusox: remove this cast when we have proper TS for SimpleTruncatedTooltipText\n    // TODO or even better, remove this component in favor of the future approved one\n    <SimpleTruncatedTooltipText value={column.Header as string} />\n  ) : (\n    <>{column.Header}</>\n  );\n\nexport const HeaderCellTitle: React.ComponentType<HeaderCellTitleProps> = ({ column, draggableProps, textWrap }) => (\n  <div style={{ display: 'flex', alignItems: 'center' }} data-testid={DATA_TESTID.DATA_TABLE_HEADER_CELL_TITLE}>\n    {typeof column.Header === 'string' ? (\n      <StringTitle column={column} textWrap={textWrap} />\n    ) : (\n      <column.Header column={column} draggableProps={draggableProps} />\n    )}\n    {column.required && <RequiredDot />}\n  </div>\n);\n"],
-  "mappings": "AAAA,YAAY,WAAW;ACiBnB,SAEA,UAFA,KAMF,YANE;AAhBJ,SAAS,kCAAkC;AAG3C,SAAS,mBAAmB;AAC5B,SAAS,mBAAmB;AAQ5B,MAAM,cAAc,CAAC,EAAE,QAAQ,SAAS,OACrC,OAAO,YAAY,cAAc;AAAA;AAAA;AAAA,EAGhC,oBAAC,8BAA2B,OAAO,OAAO,QAAkB;AAAA,IAE5D,gCAAG,iBAAO,QAAO;AAGd,MAAM,kBAA6D,CAAC,EAAE,QAAQ,gBAAgB,SAAS,MAC5G,qBAAC,SAAI,OAAO,EAAE,SAAS,QAAQ,YAAY,SAAS,GAAG,eAAa,YAAY,8BAC7E;AAAA,SAAO,OAAO,WAAW,WACxB,oBAAC,eAAY,QAAgB,UAAoB,IAEjD,oBAAC,OAAO,QAAP,EAAc,QAAgB,gBAAgC;AAAA,EAEhE,OAAO,YAAY,oBAAC,eAAY;AAAA,GACnC;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React from 'react';\nimport { SimpleTruncatedTooltipText } from '@elliemae/ds-truncated-tooltip-text';\nimport type { DSDataTableT } from '../../react-desc-prop-types.js';\nimport type { SortableItemContextType } from '../HoC/SortableItemContext.js';\nimport { RequiredDot } from './RequiredDot.js';\nimport { DATA_TESTID } from '../../configs/constants.js';\n\ninterface HeaderCellTitleProps {\n  column: DSDataTableT.InternalColumn;\n  draggableProps: SortableItemContextType['draggableProps'];\n  textWrap: 'wrap' | 'wrap-all' | 'truncate';\n}\n\nconst StringTitle = ({ text, textWrap }: { textWrap: HeaderCellTitleProps['textWrap']; text: string }) =>\n  textWrap === 'truncate' ? <SimpleTruncatedTooltipText value={text} /> : text;\n\nexport const HeaderCellTitle: React.ComponentType<HeaderCellTitleProps> = ({ column, draggableProps, textWrap }) => (\n  <div style={{ display: 'flex', alignItems: 'center' }} data-testid={DATA_TESTID.DATA_TABLE_HEADER_CELL_TITLE}>\n    {typeof column.Header === 'string' ? (\n      <StringTitle text={column.Header} textWrap={column.textWrap || textWrap} />\n    ) : (\n      <column.Header column={column} draggableProps={draggableProps} />\n    )}\n    {column.required && <RequiredDot />}\n  </div>\n);\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACcK,cAG1B,YAH0B;AAb5B,SAAS,kCAAkC;AAG3C,SAAS,mBAAmB;AAC5B,SAAS,mBAAmB;AAQ5B,MAAM,cAAc,CAAC,EAAE,MAAM,SAAS,MACpC,aAAa,aAAa,oBAAC,8BAA2B,OAAO,MAAM,IAAK;AAEnE,MAAM,kBAA6D,CAAC,EAAE,QAAQ,gBAAgB,SAAS,MAC5G,qBAAC,SAAI,OAAO,EAAE,SAAS,QAAQ,YAAY,SAAS,GAAG,eAAa,YAAY,8BAC7E;AAAA,SAAO,OAAO,WAAW,WACxB,oBAAC,eAAY,MAAM,OAAO,QAAQ,UAAU,OAAO,YAAY,UAAU,IAEzE,oBAAC,OAAO,QAAP,EAAc,QAAgB,gBAAgC;AAAA,EAEhE,OAAO,YAAY,oBAAC,eAAY;AAAA,GACnC;",
   "names": []
 }

package/dist/esm/parts/Headers/useHeaderCellHandlers.js CHANGED Viewed

@@ -34,7 +34,8 @@ const useHeaderCellHandlers = ({
   resizeHandlerRef,
   hasSortingCaret,
   isDragOverlay,
-  draggableProps
+  draggableProps,
+  referenceColumn
 }) => {
   const onColumnSortChange = usePropsStore((state) => state.onColumnSortChange);
   const onColumnSort = usePropsStore((state) => state.onColumnSort);
@@ -43,12 +44,12 @@ const useHeaderCellHandlers = ({
   const patchHeader = useInternalStore((state) => state.patchHeader);
   const reduxHeaders = useInternalStore((state) => state.reduxHeaders);
   const reduxHeader = useMemo(() => reduxHeaders[column.id], [reduxHeaders, column]);
-  const headerRef = column.ref;
+  const headerRef = referenceColumn.current;
   const onMouseEnter = useCallback(() => {
     patchHeader(column.id, buildNextHeader(reduxHeader, true, hasFilter, hasDnD, hasSortingCaret));
   }, [column.id, hasDnD, hasFilter, patchHeader, reduxHeader, hasSortingCaret]);
   const onMouseLeave = useCallback(() => {
-    if (!headerRef?.current?.contains(document.activeElement)) {
+    if (!headerRef?.contains(document.activeElement)) {
       patchHeader(column.id, buildNextHeader(reduxHeader, false, hasFilter, hasDnD, false));
     }
   }, [column.id, hasDnD, hasFilter, headerRef, patchHeader, reduxHeader]);
@@ -122,7 +123,7 @@ const useHeaderCellHandlers = ({
         filterIconRef.current,
         resizeHandlerRef.current
       ];
-      if (e.target === headerRef?.current) {
+      if (e.target === headerRef) {
         patchHeader(column.id, buildNextHeader(reduxHeader, true, hasFilter, hasDnD, hasSortingCaret));
         setFocusedRowId(null);
       }

package/dist/esm/parts/Headers/useHeaderCellHandlers.js.map CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/parts/Headers/useHeaderCellHandlers.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable max-lines */\n/* eslint-disable max-params */\nimport { useCallback, useMemo } from 'react';\nimport type { DSDataTableT } from '../../react-desc-prop-types.js';\nimport { useInternalStore, usePropsStore } from '../../configs/useStore/createInternalAndPropsContext.js';\ntype UseHeaderCellHandlersType = (args: {\n  hasFilter: boolean;\n  column: DSDataTableT.InternalColumn;\n  hasDnD: boolean;\n  dragHandleRef: React.MutableRefObject<HTMLDivElement | null>;\n  sortRef: React.MutableRefObject<HTMLButtonElement | null>;\n  filterIconRef: React.MutableRefObject<HTMLButtonElement | null>;\n  resizeHandlerRef: React.MutableRefObject<HTMLInputElement | null>;\n  hasSortingCaret: boolean;\n  isDragOverlay?: boolean;\n  draggableProps: DSDataTableT.DraggablePropsT;\n}) => {\n  onMouseEnter: React.MouseEventHandler;\n  onMouseLeave: React.MouseEventHandler;\n  handleSort: React.MouseEventHandler;\n  onKeyDown: React.KeyboardEventHandler;\n  onFocus: React.FocusEventHandler;\n  onBlur: React.FocusEventHandler;\n};\n\n// TODO: reduxHeader was a mistake from the start.\n// Please remove this and make this logic more simple and\n// easy to follow.\nconst buildNextHeader = (\n  reduxHeader: DSDataTableT.ReduxHeader,\n  value: boolean,\n  hasFilter: boolean,\n  hasDnD: boolean,\n  hasSortingCaret: boolean,\n  withTabStops = false,\n) => ({\n  hideFilterMenu: true, // Do this to overwrite it if it exists\n  ...reduxHeader,\n  hideFilterButton: !(hasFilter && value),\n  showDnDHandle: hasDnD && value,\n  showSortCaret: hasSortingCaret,\n  withTabStops,\n});\n\nconst getNextSortedVisibleColumns = (\n  visibleColumns: DSDataTableT.InternalColumn[],\n  columnId: string,\n  isSortedDesc: boolean,\n) => {\n  const doit = (columns: DSDataTableT.InternalColumn[]) =>\n    columns.map((col) => {\n      const newCol = { ...col };\n      delete newCol.isSortedDesc;\n      if (col.id === columnId) {\n        newCol.isSortedDesc = isSortedDesc;\n      }\n      if (newCol.columns) {\n        newCol.columns = doit(newCol.columns);\n      }\n      return newCol;\n    });\n  return doit(visibleColumns);\n};\n\nexport const useHeaderCellHandlers: UseHeaderCellHandlersType = ({\n  hasFilter,\n  column,\n  hasDnD,\n  dragHandleRef,\n  filterIconRef,\n  sortRef,\n  resizeHandlerRef,\n  hasSortingCaret,\n  isDragOverlay,\n  draggableProps,\n}) => {\n  const onColumnSortChange = usePropsStore((state) => state.onColumnSortChange);\n  const onColumnSort = usePropsStore((state) => state.onColumnSort);\n  const visibleColumns = usePropsStore((state) => state.visibleColumns);\n  const setFocusedRowId = useInternalStore((state) => state.setFocusedRowId);\n  const patchHeader = useInternalStore((state) => state.patchHeader);\n  const reduxHeaders = useInternalStore((state) => state.reduxHeaders);\n\n  const reduxHeader = useMemo(() => reduxHeaders[column.id], [reduxHeaders, column]);\n\n  const headerRef = column.ref;\n\n  const onMouseEnter: React.MouseEventHandler = useCallback(() => {\n    patchHeader(column.id, buildNextHeader(reduxHeader, true, hasFilter, hasDnD, hasSortingCaret));\n  }, [column.id, hasDnD, hasFilter, patchHeader, reduxHeader, hasSortingCaret]);\n\n  const onMouseLeave: React.MouseEventHandler = useCallback(() => {\n    if (!headerRef?.current?.contains(document.activeElement)) {\n      patchHeader(column.id, buildNextHeader(reduxHeader, false, hasFilter, hasDnD, false));\n    }\n  }, [column.id, hasDnD, hasFilter, headerRef, patchHeader, reduxHeader]);\n\n  const handleSort: React.MouseEventHandler = useCallback(() => {\n    if (column.canSort) {\n      onColumnSortChange?.({\n        column: column.id,\n        direction: column.isSortedDesc ? 'ASC' : 'DESC',\n      });\n      onColumnSort(\n        getNextSortedVisibleColumns(visibleColumns, column.id, !column.isSortedDesc),\n        column.id,\n        column.isSortedDesc ? 'ASC' : 'DESC',\n      );\n    }\n  }, [column.canSort, column.id, column.isSortedDesc, onColumnSort, onColumnSortChange, visibleColumns]);\n\n  const isActive = draggableProps && draggableProps.active;\n\n  const onKeyDown: React.KeyboardEventHandler = useCallback(\n    (e) => {\n      // we do the same as the draggable rows.\n      // we stop the event if the overlay is active\n      // main reason is the tab key\n      if (isDragOverlay || isActive) {\n        e.preventDefault();\n      }\n\n      if (e.currentTarget !== e.target) return;\n      if (e.code === 'ArrowDown' && column.canSort) {\n        e.preventDefault();\n        onColumnSortChange?.({\n          column: column.id,\n          direction: 'DESC',\n        });\n        onColumnSort(getNextSortedVisibleColumns(visibleColumns, column.id, true), column.id, 'DESC');\n      } else if (e.code === 'ArrowUp' && column.canSort) {\n        e.preventDefault();\n        onColumnSortChange?.({\n          column: column.id,\n          direction: 'ASC',\n        });\n        onColumnSort(getNextSortedVisibleColumns(visibleColumns, column.id, false), column.id, 'ASC');\n      } else if (['Enter', 'Space'].includes(e.code)) {\n        patchHeader(column.id, buildNextHeader(reduxHeader, true, hasFilter, hasDnD, hasSortingCaret, true));\n        // Elements don't not yet exist\n        setTimeout(() => {\n          if (dragHandleRef.current) dragHandleRef.current.focus();\n          else if (filterIconRef.current) filterIconRef.current.focus();\n          else if (resizeHandlerRef.current) resizeHandlerRef.current.focus();\n          else if (sortRef?.current) sortRef.current.focus();\n        });\n      }\n    },\n    [\n      isDragOverlay,\n      isActive,\n      column.canSort,\n      column.id,\n      onColumnSortChange,\n      onColumnSort,\n      visibleColumns,\n      patchHeader,\n      reduxHeader,\n      hasFilter,\n      hasDnD,\n      hasSortingCaret,\n      dragHandleRef,\n      filterIconRef,\n      resizeHandlerRef,\n      sortRef,\n    ],\n  );\n\n  const onFocus: React.FocusEventHandler = useCallback(\n    (e) => {\n      // Don't do anything if focus wasn't placed in the element (bubling issues)\n      const possibleTargets: (HTMLElement | null)[] = [\n        dragHandleRef.current,\n        filterIconRef.current,\n        resizeHandlerRef.current,\n      ];\n      if (e.target === headerRef?.current) {\n        patchHeader(column.id, buildNextHeader(reduxHeader, true, hasFilter, hasDnD, hasSortingCaret));\n        setFocusedRowId(null);\n      }\n\n      if (possibleTargets.includes(e.target as HTMLElement | null)) {\n        patchHeader(column.id, {\n          hideFilterButton: !hasFilter,\n          showDnDHandle: hasDnD,\n          withTabStops: true,\n        });\n        setFocusedRowId(null);\n      }\n    },\n    [\n      column.id,\n      dragHandleRef,\n      filterIconRef,\n      hasDnD,\n      hasFilter,\n      headerRef,\n      patchHeader,\n      reduxHeader,\n      resizeHandlerRef,\n      setFocusedRowId,\n      hasSortingCaret,\n    ],\n  );\n\n  const onBlur: React.FocusEventHandler = useCallback(\n    (e) => {\n      // Don't do anything if blur was caused by going to a child\n      if (e.relatedTarget === dragHandleRef.current) return;\n      if (e.relatedTarget === filterIconRef.current) return;\n      if (e.relatedTarget === resizeHandlerRef.current) return;\n      if (e.relatedTarget === sortRef?.current) return;\n      patchHeader(column.id, buildNextHeader(reduxHeader, false, hasFilter, hasDnD, false));\n    },\n    [dragHandleRef, filterIconRef, resizeHandlerRef, sortRef, patchHeader, column.id, reduxHeader, hasFilter, hasDnD],\n  );\n\n  return { onMouseEnter, onMouseLeave, handleSort, onKeyDown, onBlur, onFocus };\n};\n"],
-  "mappings": "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",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable max-lines */\n/* eslint-disable max-params */\nimport { useCallback, useMemo } from 'react';\nimport type { DSDataTableT } from '../../react-desc-prop-types.js';\nimport { useInternalStore, usePropsStore } from '../../configs/useStore/createInternalAndPropsContext.js';\ntype UseHeaderCellHandlersType = (args: {\n  hasFilter: boolean;\n  column: DSDataTableT.InternalColumn;\n  hasDnD: boolean;\n  dragHandleRef: React.MutableRefObject<HTMLDivElement | null>;\n  sortRef: React.MutableRefObject<HTMLButtonElement | null>;\n  filterIconRef: React.MutableRefObject<HTMLButtonElement | null>;\n  resizeHandlerRef: React.MutableRefObject<HTMLInputElement | null>;\n  hasSortingCaret: boolean;\n  isDragOverlay?: boolean;\n  draggableProps: DSDataTableT.DraggablePropsT;\n  referenceColumn: React.MutableRefObject<HTMLDivElement | null>;\n}) => {\n  onMouseEnter: React.MouseEventHandler;\n  onMouseLeave: React.MouseEventHandler;\n  handleSort: React.MouseEventHandler;\n  onKeyDown: React.KeyboardEventHandler;\n  onFocus: React.FocusEventHandler;\n  onBlur: React.FocusEventHandler;\n};\n\n// TODO: reduxHeader was a mistake from the start.\n// Please remove this and make this logic more simple and\n// easy to follow.\nconst buildNextHeader = (\n  reduxHeader: DSDataTableT.ReduxHeader,\n  value: boolean,\n  hasFilter: boolean,\n  hasDnD: boolean,\n  hasSortingCaret: boolean,\n  withTabStops = false,\n) => ({\n  hideFilterMenu: true, // Do this to overwrite it if it exists\n  ...reduxHeader,\n  hideFilterButton: !(hasFilter && value),\n  showDnDHandle: hasDnD && value,\n  showSortCaret: hasSortingCaret,\n  withTabStops,\n});\n\nconst getNextSortedVisibleColumns = (\n  visibleColumns: DSDataTableT.InternalColumn[],\n  columnId: string,\n  isSortedDesc: boolean,\n) => {\n  const doit = (columns: DSDataTableT.InternalColumn[]) =>\n    columns.map((col) => {\n      const newCol = { ...col };\n      delete newCol.isSortedDesc;\n      if (col.id === columnId) {\n        newCol.isSortedDesc = isSortedDesc;\n      }\n      if (newCol.columns) {\n        newCol.columns = doit(newCol.columns);\n      }\n      return newCol;\n    });\n  return doit(visibleColumns);\n};\n\nexport const useHeaderCellHandlers: UseHeaderCellHandlersType = ({\n  hasFilter,\n  column,\n  hasDnD,\n  dragHandleRef,\n  filterIconRef,\n  sortRef,\n  resizeHandlerRef,\n  hasSortingCaret,\n  isDragOverlay,\n  draggableProps,\n  referenceColumn,\n}) => {\n  const onColumnSortChange = usePropsStore((state) => state.onColumnSortChange);\n  const onColumnSort = usePropsStore((state) => state.onColumnSort);\n  const visibleColumns = usePropsStore((state) => state.visibleColumns);\n  const setFocusedRowId = useInternalStore((state) => state.setFocusedRowId);\n  const patchHeader = useInternalStore((state) => state.patchHeader);\n  const reduxHeaders = useInternalStore((state) => state.reduxHeaders);\n\n  const reduxHeader = useMemo(() => reduxHeaders[column.id], [reduxHeaders, column]);\n\n  const headerRef = referenceColumn.current;\n\n  const onMouseEnter: React.MouseEventHandler = useCallback(() => {\n    patchHeader(column.id, buildNextHeader(reduxHeader, true, hasFilter, hasDnD, hasSortingCaret));\n  }, [column.id, hasDnD, hasFilter, patchHeader, reduxHeader, hasSortingCaret]);\n\n  const onMouseLeave: React.MouseEventHandler = useCallback(() => {\n    if (!headerRef?.contains(document.activeElement)) {\n      patchHeader(column.id, buildNextHeader(reduxHeader, false, hasFilter, hasDnD, false));\n    }\n  }, [column.id, hasDnD, hasFilter, headerRef, patchHeader, reduxHeader]);\n\n  const handleSort: React.MouseEventHandler = useCallback(() => {\n    if (column.canSort) {\n      onColumnSortChange?.({\n        column: column.id,\n        direction: column.isSortedDesc ? 'ASC' : 'DESC',\n      });\n      onColumnSort(\n        getNextSortedVisibleColumns(visibleColumns, column.id, !column.isSortedDesc),\n        column.id,\n        column.isSortedDesc ? 'ASC' : 'DESC',\n      );\n    }\n  }, [column.canSort, column.id, column.isSortedDesc, onColumnSort, onColumnSortChange, visibleColumns]);\n\n  const isActive = draggableProps && draggableProps.active;\n\n  const onKeyDown: React.KeyboardEventHandler = useCallback(\n    (e) => {\n      // we do the same as the draggable rows.\n      // we stop the event if the overlay is active\n      // main reason is the tab key\n      if (isDragOverlay || isActive) {\n        e.preventDefault();\n      }\n\n      if (e.currentTarget !== e.target) return;\n      if (e.code === 'ArrowDown' && column.canSort) {\n        e.preventDefault();\n        onColumnSortChange?.({\n          column: column.id,\n          direction: 'DESC',\n        });\n        onColumnSort(getNextSortedVisibleColumns(visibleColumns, column.id, true), column.id, 'DESC');\n      } else if (e.code === 'ArrowUp' && column.canSort) {\n        e.preventDefault();\n        onColumnSortChange?.({\n          column: column.id,\n          direction: 'ASC',\n        });\n        onColumnSort(getNextSortedVisibleColumns(visibleColumns, column.id, false), column.id, 'ASC');\n      } else if (['Enter', 'Space'].includes(e.code)) {\n        patchHeader(column.id, buildNextHeader(reduxHeader, true, hasFilter, hasDnD, hasSortingCaret, true));\n        // Elements don't not yet exist\n        setTimeout(() => {\n          if (dragHandleRef.current) dragHandleRef.current.focus();\n          else if (filterIconRef.current) filterIconRef.current.focus();\n          else if (resizeHandlerRef.current) resizeHandlerRef.current.focus();\n          else if (sortRef?.current) sortRef.current.focus();\n        });\n      }\n    },\n    [\n      isDragOverlay,\n      isActive,\n      column.canSort,\n      column.id,\n      onColumnSortChange,\n      onColumnSort,\n      visibleColumns,\n      patchHeader,\n      reduxHeader,\n      hasFilter,\n      hasDnD,\n      hasSortingCaret,\n      dragHandleRef,\n      filterIconRef,\n      resizeHandlerRef,\n      sortRef,\n    ],\n  );\n\n  const onFocus: React.FocusEventHandler = useCallback(\n    (e) => {\n      // Don't do anything if focus wasn't placed in the element (bubling issues)\n      const possibleTargets: (HTMLElement | null)[] = [\n        dragHandleRef.current,\n        filterIconRef.current,\n        resizeHandlerRef.current,\n      ];\n      if (e.target === headerRef) {\n        patchHeader(column.id, buildNextHeader(reduxHeader, true, hasFilter, hasDnD, hasSortingCaret));\n        setFocusedRowId(null);\n      }\n\n      if (possibleTargets.includes(e.target as HTMLElement | null)) {\n        patchHeader(column.id, {\n          hideFilterButton: !hasFilter,\n          showDnDHandle: hasDnD,\n          withTabStops: true,\n        });\n        setFocusedRowId(null);\n      }\n    },\n    [\n      column.id,\n      dragHandleRef,\n      filterIconRef,\n      hasDnD,\n      hasFilter,\n      headerRef,\n      patchHeader,\n      reduxHeader,\n      resizeHandlerRef,\n      setFocusedRowId,\n      hasSortingCaret,\n    ],\n  );\n\n  const onBlur: React.FocusEventHandler = useCallback(\n    (e) => {\n      // Don't do anything if blur was caused by going to a child\n      if (e.relatedTarget === dragHandleRef.current) return;\n      if (e.relatedTarget === filterIconRef.current) return;\n      if (e.relatedTarget === resizeHandlerRef.current) return;\n      if (e.relatedTarget === sortRef?.current) return;\n      patchHeader(column.id, buildNextHeader(reduxHeader, false, hasFilter, hasDnD, false));\n    },\n    [dragHandleRef, filterIconRef, resizeHandlerRef, sortRef, patchHeader, column.id, reduxHeader, hasFilter, hasDnD],\n  );\n\n  return { onMouseEnter, onMouseLeave, handleSort, onKeyDown, onBlur, onFocus };\n};\n"],
+  "mappings": "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",
   "names": []
 }

package/dist/esm/parts/Headers/useHeaderResizer.js CHANGED Viewed

@@ -1,6 +1,6 @@
 import * as React from "react";
 import { cloneDeep } from "lodash-es";
-import { useCallback, useMemo, useState } from "react";
+import React2, { useCallback, useMemo, useState } from "react";
 import { usePropsStore } from "../../configs/useStore/createInternalAndPropsContext.js";
 import {
   changeGridLayout,
@@ -44,43 +44,45 @@ const useHeaderResizer = ({
     () => visibleColumnsOnGridLayout.findIndex((col) => col.id === columnId),
     [columnId, visibleColumnsOnGridLayout]
   );
+  const realColumnIndexRef = React2.useRef(realColumnIndex);
+  realColumnIndexRef.current = realColumnIndex;
   const pushColumnSizeChange = useCallback(
     (nextWidth) => {
-      if (nextWidth === visibleColumnsCopy[realColumnIndex].width) return;
+      if (nextWidth === visibleColumnsOnGridLayout[realColumnIndexRef.current].width) return;
       onColumnResize?.(columnId, nextWidth);
-      visibleColumnsOnGridLayout[realColumnIndex].width = nextWidth;
+      visibleColumnsOnGridLayout[realColumnIndexRef.current].width = nextWidth;
       onColumnSizeChange(visibleColumnsCopy, columnId, nextWidth);
     },
-    [columnId, onColumnResize, onColumnSizeChange, realColumnIndex, visibleColumnsCopy, visibleColumnsOnGridLayout]
+    [columnId, onColumnResize, onColumnSizeChange, realColumnIndexRef, visibleColumnsCopy, visibleColumnsOnGridLayout]
   );
   const onResizeStart = useCallback(() => {
     setIsResizing(true);
   }, []);
   const onResizeEnd = useCallback(() => {
     setIsResizing(false);
-    pushColumnSizeChange(getGridLayout(virtualListRef.current)[realColumnIndex]);
+    pushColumnSizeChange(getGridLayout(virtualListRef.current)[realColumnIndexRef.current]);
     removeGridLayout(virtualListRef.current);
-  }, [pushColumnSizeChange, virtualListRef, realColumnIndex]);
+  }, [pushColumnSizeChange, virtualListRef, realColumnIndexRef]);
   const onResizeHandler = useCallback(
     (e) => {
-      if (realColumnIndex === -1) return;
+      if (realColumnIndexRef.current === -1) return;
       const delta = ("clientX" in e ? e.clientX : e.touches[0].clientX) - (innerRef.current?.getBoundingClientRect().x ?? 0);
-      const originalWidth = getGridLayout(virtualListRef.current)[realColumnIndex];
+      const originalWidth = getGridLayout(virtualListRef.current)[realColumnIndexRef.current];
       const widthWithDelta = narrow(
         originalWidth + delta,
-        visibleColumnsOnGridLayout[realColumnIndex].minWidth,
-        visibleColumnsOnGridLayout[realColumnIndex].maxWidth
+        visibleColumnsOnGridLayout[realColumnIndexRef.current].minWidth,
+        visibleColumnsOnGridLayout[realColumnIndexRef.current].maxWidth
       );
-      changeGridLayout(virtualListRef.current, realColumnIndex, widthWithDelta);
+      changeGridLayout(virtualListRef.current, realColumnIndexRef.current, widthWithDelta);
       setSubColumnsGridLayout(virtualListRef.current, visibleColumnsCopy);
       e.preventDefault();
       e.stopPropagation();
     },
-    [realColumnIndex, innerRef, virtualListRef, visibleColumnsCopy, visibleColumnsOnGridLayout]
+    [innerRef, virtualListRef, visibleColumnsCopy, visibleColumnsOnGridLayout]
   );
   const handleKeyboardResize = useCallback(
     (e) => {
-      if (realColumnIndex === -1) return;
+      if (realColumnIndexRef.current === -1) return;
       if (e.key === "Enter") {
         e.stopPropagation();
       }
@@ -89,18 +91,18 @@ const useHeaderResizer = ({
       }
       const delta = getCorrectDelta(e);
       if (delta === 0) return;
-      const originalWidth = getGridLayout(virtualListRef.current)[realColumnIndex];
+      const originalWidth = getGridLayout(virtualListRef.current)[realColumnIndexRef.current];
       const widthWithDelta = narrow(
         originalWidth + delta,
-        visibleColumnsOnGridLayout[realColumnIndex].minWidth,
-        visibleColumnsOnGridLayout[realColumnIndex].maxWidth
+        visibleColumnsOnGridLayout[realColumnIndexRef.current].minWidth,
+        visibleColumnsOnGridLayout[realColumnIndexRef.current].maxWidth
       );
-      changeGridLayout(virtualListRef.current, realColumnIndex, widthWithDelta);
+      changeGridLayout(virtualListRef.current, realColumnIndexRef.current, widthWithDelta);
       setSubColumnsGridLayout(virtualListRef.current, visibleColumnsCopy);
-      pushColumnSizeChange(getGridLayout(virtualListRef.current)[realColumnIndex] + delta);
+      pushColumnSizeChange(getGridLayout(virtualListRef.current)[realColumnIndexRef.current] + delta);
       removeGridLayout(virtualListRef.current);
     },
-    [pushColumnSizeChange, realColumnIndex, virtualListRef, visibleColumnsCopy, visibleColumnsOnGridLayout]
+    [pushColumnSizeChange, virtualListRef, visibleColumnsCopy, visibleColumnsOnGridLayout]
   );
   return {
     isResizing,

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

@@ -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 { 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  // 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 === visibleColumnsCopy[realColumnIndex].width) return;\n      onColumnResize?.(columnId, nextWidth);\n      // this next line is updating also the visibleColumnsCopy\n      visibleColumnsOnGridLayout[realColumnIndex].width = nextWidth;\n      onColumnSizeChange(visibleColumnsCopy, columnId, nextWidth);\n    },\n    [columnId, onColumnResize, onColumnSizeChange, realColumnIndex, 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)[realColumnIndex]);\n    removeGridLayout(virtualListRef.current);\n  }, [pushColumnSizeChange, virtualListRef, realColumnIndex]);\n\n  // Mouse resize\n  const onResizeHandler = useCallback(\n    (e: MouseEvent | TouchEvent) => {\n      if (realColumnIndex === -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)[realColumnIndex];\n\n      const widthWithDelta = narrow(\n        originalWidth + delta,\n        visibleColumnsOnGridLayout[realColumnIndex].minWidth,\n        visibleColumnsOnGridLayout[realColumnIndex].maxWidth,\n      );\n\n      changeGridLayout(virtualListRef.current, realColumnIndex, 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    [realColumnIndex, innerRef, virtualListRef, visibleColumnsCopy, visibleColumnsOnGridLayout],\n  );\n\n  // Keyboard resize\n  const handleKeyboardResize = useCallback(\n    (e: React.KeyboardEvent) => {\n      if (realColumnIndex === -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)[realColumnIndex];\n\n      const widthWithDelta = narrow(\n        originalWidth + delta,\n        visibleColumnsOnGridLayout[realColumnIndex].minWidth,\n        visibleColumnsOnGridLayout[realColumnIndex].maxWidth,\n      );\n\n      changeGridLayout(virtualListRef.current, realColumnIndex, widthWithDelta);\n      setSubColumnsGridLayout(virtualListRef.current, visibleColumnsCopy);\n\n      pushColumnSizeChange(getGridLayout(virtualListRef.current)[realColumnIndex] + delta);\n      removeGridLayout(virtualListRef.current);\n    },\n    [pushColumnSizeChange, realColumnIndex, 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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",
-  "names": []
+  "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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",
+  "names": ["React"]
 }

package/dist/esm/parts/HoC/withConditionalDnDColumnContext.js CHANGED Viewed

@@ -64,10 +64,14 @@ const withConditionalDnDColumnContext = (Component) => function(props) {
   );
   const DnDGroupContextVal = useMemo(() => ({ activeIndex }), [activeIndex]);
   if (dragAndDropColumns)
-    return /* @__PURE__ */ jsxs(DndContext, { ...dndContextProps, children: [
-      /* @__PURE__ */ jsx(DnDGroupContext.Provider, { value: DnDGroupContextVal, children: /* @__PURE__ */ jsx(Component, { ...props }) }),
-      /* @__PURE__ */ jsx(DragOverlay, { modifiers: [restrictToFirstScrollableAncestor], children: activeId ? /* @__PURE__ */ jsx(HeaderCellGroup, { header: dragOverlayCol, isDragOverlay: true }) : null })
-    ] });
+    return (
+      // For some reason we need to limit the autoScroll threshold to avoid the row container to scroll when the user
+      // drags the column header to the left or right
+      /* @__PURE__ */ jsxs(DndContext, { ...dndContextProps, autoScroll: { threshold: { y: 0, x: 0.2 } }, children: [
+        /* @__PURE__ */ jsx(DnDGroupContext.Provider, { value: DnDGroupContextVal, children: /* @__PURE__ */ jsx(Component, { ...props }) }),
+        /* @__PURE__ */ jsx(DragOverlay, { modifiers: [restrictToFirstScrollableAncestor], children: activeId ? /* @__PURE__ */ jsx(HeaderCellGroup, { header: dragOverlayCol, isDragOverlay: true }) : null })
+      ] })
+    );
   return /* @__PURE__ */ jsx(Component, { ...props });
 };
 export {

package/dist/esm/parts/HoC/withConditionalDnDColumnContext.js.map CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/parts/HoC/withConditionalDnDColumnContext.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable func-names */\n/* eslint-disable no-underscore-dangle */\n/* eslint-disable max-params */\nimport {\n  DndContext,\n  DragOverlay,\n  arrayMove,\n  restrictToFirstScrollableAncestor,\n  useHierarchyDndkitConfig,\n  type DnDKitHierarchy,\n} from '@elliemae/ds-drag-and-drop';\nimport { useCallback, useMemo } from 'react';\nimport { INTERNAL_COLUMNS } from '../../addons/Columns/index.js';\nimport { usePropsStore } from '../../configs/useStore/createInternalAndPropsContext.js';\nimport type { DSDataTableT } from '../../react-desc-prop-types.js';\nimport type { FunctionalHOC } from '../../types/FunctionalHoC.js';\nimport { HeaderCellGroup } from '../Headers/HeaderCellGroup.js';\nimport { DnDGroupContext } from './DnDGroupContext.js';\n\nexport type DnDGroupContextType = {\n  activeIndex: number | null;\n};\n\nconst flattenColumns = (cols: DSDataTableT.InternalColumn[]): DnDKitHierarchy.Item<DSDataTableT.InternalColumn>[] => {\n  const augmentedColumns = [] as DnDKitHierarchy.Item<DSDataTableT.InternalColumn>[];\n  const flatten = (col: DSDataTableT.InternalColumn, index: number, parentId: string | null = null) => {\n    const { id } = col;\n    augmentedColumns.push({ uid: id, parentId, realIndex: index, original: col });\n    if (col.columns)\n      col.columns.forEach((subColumn: DSDataTableT.InternalColumn, childIndex: number) =>\n        flatten(subColumn, childIndex, id),\n      );\n  };\n  cols.forEach((col, index) => flatten(col, index));\n  return augmentedColumns;\n};\n\n// only wraps in \"DnDContext\" and \"DnDGroupContext\" if any Drag and Drop functionality is requested\nexport const withConditionalDnDColumnContext: FunctionalHOC = (Component) =>\n  function (props) {\n    const dragAndDropColumns = usePropsStore((state) => state.dragAndDropColumns);\n    const onColumnsReorder = usePropsStore((state) => state.onColumnsReorder);\n    const visibleColumns = usePropsStore((state) => state.visibleColumns);\n\n    const flattenedItems = useMemo(() => flattenColumns(visibleColumns), [visibleColumns]);\n\n    const onReorder: DnDKitHierarchy.OnReorder<DSDataTableT.InternalColumn> = useCallback(\n      (movedItem, indexes) => {\n        // Send from index to target index\n        const newFlattenedData = arrayMove(flattenedItems, indexes.fromIndex, indexes.targetIndex);\n        // Pull the cols's data into an object\n        const nodes: Record<string, DSDataTableT.InternalColumn> = {};\n        newFlattenedData.forEach(({ original: colData, ...dndData }) => {\n          delete colData.columns;\n          nodes[dndData.uid] = colData;\n        });\n        const newData = [] as DSDataTableT.Column[];\n        newFlattenedData.forEach(({ original: colData, ...dndData }) => {\n          // Don't send internal columns to the user\n          if (INTERNAL_COLUMNS.includes(dndData.uid as string)) {\n            return;\n          }\n          // If row has parent, insert it to it's subrows\n          // otherwise append it to the new user data\n          if (dndData.parentId) {\n            const parentNode = nodes[dndData.parentId];\n            if (parentNode.columns) parentNode.columns.push(colData);\n            else parentNode.columns = [colData];\n          } else newData.push(colData);\n        });\n        onColumnsReorder(newData, indexes);\n      },\n      [flattenedItems, onColumnsReorder],\n    );\n\n    const { dndContextProps, activeId, activeIndex } = useHierarchyDndkitConfig({\n      flattenedItems,\n      isHorizontalDnD: true,\n      onReorder,\n    });\n\n    const dragOverlayCol = useMemo(\n      () => (activeId ? flattenedItems.find((item) => item.uid === activeId)?.original : null),\n      [activeId, flattenedItems],\n    );\n    const DnDGroupContextVal = useMemo(() => ({ activeIndex }), [activeIndex]);\n\n    if (dragAndDropColumns)\n      return (\n        <DndContext {...dndContextProps}>\n          <DnDGroupContext.Provider value={DnDGroupContextVal}>\n            <Component {...props} />\n          </DnDGroupContext.Provider>\n          <DragOverlay modifiers={[restrictToFirstScrollableAncestor]}>\n            {activeId ? <HeaderCellGroup header={dragOverlayCol as DSDataTableT.InternalColumn} isDragOverlay /> : null}\n          </DragOverlay>\n        </DndContext>\n      );\n    return <Component {...props} />;\n  };\n"],
-  "mappings": "AAAA,YAAY,WAAW;ACyFf,SAEI,KAFJ;AAtFR;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OAEK;AACP,SAAS,aAAa,eAAe;AACrC,SAAS,wBAAwB;AACjC,SAAS,qBAAqB;AAG9B,SAAS,uBAAuB;AAChC,SAAS,uBAAuB;AAMhC,MAAM,iBAAiB,CAAC,SAA6F;AACnH,QAAM,mBAAmB,CAAC;AAC1B,QAAM,UAAU,CAAC,KAAkC,OAAe,WAA0B,SAAS;AACnG,UAAM,EAAE,GAAG,IAAI;AACf,qBAAiB,KAAK,EAAE,KAAK,IAAI,UAAU,WAAW,OAAO,UAAU,IAAI,CAAC;AAC5E,QAAI,IAAI;AACN,UAAI,QAAQ;AAAA,QAAQ,CAAC,WAAwC,eAC3D,QAAQ,WAAW,YAAY,EAAE;AAAA,MACnC;AAAA,EACJ;AACA,OAAK,QAAQ,CAAC,KAAK,UAAU,QAAQ,KAAK,KAAK,CAAC;AAChD,SAAO;AACT;AAGO,MAAM,kCAAiD,CAAC,cAC7D,SAAU,OAAO;AACf,QAAM,qBAAqB,cAAc,CAAC,UAAU,MAAM,kBAAkB;AAC5E,QAAM,mBAAmB,cAAc,CAAC,UAAU,MAAM,gBAAgB;AACxE,QAAM,iBAAiB,cAAc,CAAC,UAAU,MAAM,cAAc;AAEpE,QAAM,iBAAiB,QAAQ,MAAM,eAAe,cAAc,GAAG,CAAC,cAAc,CAAC;AAErF,QAAM,YAAoE;AAAA,IACxE,CAAC,WAAW,YAAY;AAEtB,YAAM,mBAAmB,UAAU,gBAAgB,QAAQ,WAAW,QAAQ,WAAW;AAEzF,YAAM,QAAqD,CAAC;AAC5D,uBAAiB,QAAQ,CAAC,EAAE,UAAU,SAAS,GAAG,QAAQ,MAAM;AAC9D,eAAO,QAAQ;AACf,cAAM,QAAQ,GAAG,IAAI;AAAA,MACvB,CAAC;AACD,YAAM,UAAU,CAAC;AACjB,uBAAiB,QAAQ,CAAC,EAAE,UAAU,SAAS,GAAG,QAAQ,MAAM;AAE9D,YAAI,iBAAiB,SAAS,QAAQ,GAAa,GAAG;AACpD;AAAA,QACF;AAGA,YAAI,QAAQ,UAAU;AACpB,gBAAM,aAAa,MAAM,QAAQ,QAAQ;AACzC,cAAI,WAAW,QAAS,YAAW,QAAQ,KAAK,OAAO;AAAA,cAClD,YAAW,UAAU,CAAC,OAAO;AAAA,QACpC,MAAO,SAAQ,KAAK,OAAO;AAAA,MAC7B,CAAC;AACD,uBAAiB,SAAS,OAAO;AAAA,IACnC;AAAA,IACA,CAAC,gBAAgB,gBAAgB;AAAA,EACnC;AAEA,QAAM,EAAE,iBAAiB,UAAU,YAAY,IAAI,yBAAyB;AAAA,IAC1E;AAAA,IACA,iBAAiB;AAAA,IACjB;AAAA,EACF,CAAC;AAED,QAAM,iBAAiB;AAAA,IACrB,MAAO,WAAW,eAAe,KAAK,CAAC,SAAS,KAAK,QAAQ,QAAQ,GAAG,WAAW;AAAA,IACnF,CAAC,UAAU,cAAc;AAAA,EAC3B;AACA,QAAM,qBAAqB,QAAQ,OAAO,EAAE,YAAY,IAAI,CAAC,WAAW,CAAC;AAEzE,MAAI;AACF,WACE,qBAAC,cAAY,GAAG,iBACd;AAAA,0BAAC,gBAAgB,UAAhB,EAAyB,OAAO,oBAC/B,8BAAC,aAAW,GAAG,OAAO,GACxB;AAAA,MACA,oBAAC,eAAY,WAAW,CAAC,iCAAiC,GACvD,qBAAW,oBAAC,mBAAgB,QAAQ,gBAA+C,eAAa,MAAC,IAAK,MACzG;AAAA,OACF;AAEJ,SAAO,oBAAC,aAAW,GAAG,OAAO;AAC/B;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable func-names */\n/* eslint-disable no-underscore-dangle */\n/* eslint-disable max-params */\nimport {\n  DndContext,\n  DragOverlay,\n  arrayMove,\n  restrictToFirstScrollableAncestor,\n  useHierarchyDndkitConfig,\n  type DnDKitHierarchy,\n} from '@elliemae/ds-drag-and-drop';\nimport { useCallback, useMemo } from 'react';\nimport { INTERNAL_COLUMNS } from '../../addons/Columns/index.js';\nimport { usePropsStore } from '../../configs/useStore/createInternalAndPropsContext.js';\nimport type { DSDataTableT } from '../../react-desc-prop-types.js';\nimport type { FunctionalHOC } from '../../types/FunctionalHoC.js';\nimport { HeaderCellGroup } from '../Headers/HeaderCellGroup.js';\nimport { DnDGroupContext } from './DnDGroupContext.js';\n\nexport type DnDGroupContextType = {\n  activeIndex: number | null;\n};\n\nconst flattenColumns = (cols: DSDataTableT.InternalColumn[]): DnDKitHierarchy.Item<DSDataTableT.InternalColumn>[] => {\n  const augmentedColumns = [] as DnDKitHierarchy.Item<DSDataTableT.InternalColumn>[];\n  const flatten = (col: DSDataTableT.InternalColumn, index: number, parentId: string | null = null) => {\n    const { id } = col;\n    augmentedColumns.push({ uid: id, parentId, realIndex: index, original: col });\n    if (col.columns)\n      col.columns.forEach((subColumn: DSDataTableT.InternalColumn, childIndex: number) =>\n        flatten(subColumn, childIndex, id),\n      );\n  };\n  cols.forEach((col, index) => flatten(col, index));\n  return augmentedColumns;\n};\n\n// only wraps in \"DnDContext\" and \"DnDGroupContext\" if any Drag and Drop functionality is requested\nexport const withConditionalDnDColumnContext: FunctionalHOC = (Component) =>\n  function (props) {\n    const dragAndDropColumns = usePropsStore((state) => state.dragAndDropColumns);\n    const onColumnsReorder = usePropsStore((state) => state.onColumnsReorder);\n    const visibleColumns = usePropsStore((state) => state.visibleColumns);\n\n    const flattenedItems = useMemo(() => flattenColumns(visibleColumns), [visibleColumns]);\n\n    const onReorder: DnDKitHierarchy.OnReorder<DSDataTableT.InternalColumn> = useCallback(\n      (movedItem, indexes) => {\n        // Send from index to target index\n        const newFlattenedData = arrayMove(flattenedItems, indexes.fromIndex, indexes.targetIndex);\n        // Pull the cols's data into an object\n        const nodes: Record<string, DSDataTableT.InternalColumn> = {};\n        newFlattenedData.forEach(({ original: colData, ...dndData }) => {\n          delete colData.columns;\n          nodes[dndData.uid] = colData;\n        });\n        const newData = [] as DSDataTableT.Column[];\n        newFlattenedData.forEach(({ original: colData, ...dndData }) => {\n          // Don't send internal columns to the user\n          if (INTERNAL_COLUMNS.includes(dndData.uid as string)) {\n            return;\n          }\n          // If row has parent, insert it to it's subrows\n          // otherwise append it to the new user data\n          if (dndData.parentId) {\n            const parentNode = nodes[dndData.parentId];\n            if (parentNode.columns) parentNode.columns.push(colData);\n            else parentNode.columns = [colData];\n          } else newData.push(colData);\n        });\n        onColumnsReorder(newData, indexes);\n      },\n      [flattenedItems, onColumnsReorder],\n    );\n\n    const { dndContextProps, activeId, activeIndex } = useHierarchyDndkitConfig({\n      flattenedItems,\n      isHorizontalDnD: true,\n      onReorder,\n    });\n\n    const dragOverlayCol = useMemo(\n      () => (activeId ? flattenedItems.find((item) => item.uid === activeId)?.original : null),\n      [activeId, flattenedItems],\n    );\n    const DnDGroupContextVal = useMemo(() => ({ activeIndex }), [activeIndex]);\n\n    if (dragAndDropColumns)\n      return (\n        // For some reason we need to limit the autoScroll threshold to avoid the row container to scroll when the user\n        // drags the column header to the left or right\n        <DndContext {...dndContextProps} autoScroll={{ threshold: { y: 0, x: 0.2 } }}>\n          <DnDGroupContext.Provider value={DnDGroupContextVal}>\n            <Component {...props} />\n          </DnDGroupContext.Provider>\n          <DragOverlay modifiers={[restrictToFirstScrollableAncestor]}>\n            {activeId ? <HeaderCellGroup header={dragOverlayCol as DSDataTableT.InternalColumn} isDragOverlay /> : null}\n          </DragOverlay>\n        </DndContext>\n      );\n    return <Component {...props} />;\n  };\n"],
+  "mappings": "AAAA,YAAY,WAAW;AC2Ff,SAEI,KAFJ;AAxFR;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OAEK;AACP,SAAS,aAAa,eAAe;AACrC,SAAS,wBAAwB;AACjC,SAAS,qBAAqB;AAG9B,SAAS,uBAAuB;AAChC,SAAS,uBAAuB;AAMhC,MAAM,iBAAiB,CAAC,SAA6F;AACnH,QAAM,mBAAmB,CAAC;AAC1B,QAAM,UAAU,CAAC,KAAkC,OAAe,WAA0B,SAAS;AACnG,UAAM,EAAE,GAAG,IAAI;AACf,qBAAiB,KAAK,EAAE,KAAK,IAAI,UAAU,WAAW,OAAO,UAAU,IAAI,CAAC;AAC5E,QAAI,IAAI;AACN,UAAI,QAAQ;AAAA,QAAQ,CAAC,WAAwC,eAC3D,QAAQ,WAAW,YAAY,EAAE;AAAA,MACnC;AAAA,EACJ;AACA,OAAK,QAAQ,CAAC,KAAK,UAAU,QAAQ,KAAK,KAAK,CAAC;AAChD,SAAO;AACT;AAGO,MAAM,kCAAiD,CAAC,cAC7D,SAAU,OAAO;AACf,QAAM,qBAAqB,cAAc,CAAC,UAAU,MAAM,kBAAkB;AAC5E,QAAM,mBAAmB,cAAc,CAAC,UAAU,MAAM,gBAAgB;AACxE,QAAM,iBAAiB,cAAc,CAAC,UAAU,MAAM,cAAc;AAEpE,QAAM,iBAAiB,QAAQ,MAAM,eAAe,cAAc,GAAG,CAAC,cAAc,CAAC;AAErF,QAAM,YAAoE;AAAA,IACxE,CAAC,WAAW,YAAY;AAEtB,YAAM,mBAAmB,UAAU,gBAAgB,QAAQ,WAAW,QAAQ,WAAW;AAEzF,YAAM,QAAqD,CAAC;AAC5D,uBAAiB,QAAQ,CAAC,EAAE,UAAU,SAAS,GAAG,QAAQ,MAAM;AAC9D,eAAO,QAAQ;AACf,cAAM,QAAQ,GAAG,IAAI;AAAA,MACvB,CAAC;AACD,YAAM,UAAU,CAAC;AACjB,uBAAiB,QAAQ,CAAC,EAAE,UAAU,SAAS,GAAG,QAAQ,MAAM;AAE9D,YAAI,iBAAiB,SAAS,QAAQ,GAAa,GAAG;AACpD;AAAA,QACF;AAGA,YAAI,QAAQ,UAAU;AACpB,gBAAM,aAAa,MAAM,QAAQ,QAAQ;AACzC,cAAI,WAAW,QAAS,YAAW,QAAQ,KAAK,OAAO;AAAA,cAClD,YAAW,UAAU,CAAC,OAAO;AAAA,QACpC,MAAO,SAAQ,KAAK,OAAO;AAAA,MAC7B,CAAC;AACD,uBAAiB,SAAS,OAAO;AAAA,IACnC;AAAA,IACA,CAAC,gBAAgB,gBAAgB;AAAA,EACnC;AAEA,QAAM,EAAE,iBAAiB,UAAU,YAAY,IAAI,yBAAyB;AAAA,IAC1E;AAAA,IACA,iBAAiB;AAAA,IACjB;AAAA,EACF,CAAC;AAED,QAAM,iBAAiB;AAAA,IACrB,MAAO,WAAW,eAAe,KAAK,CAAC,SAAS,KAAK,QAAQ,QAAQ,GAAG,WAAW;AAAA,IACnF,CAAC,UAAU,cAAc;AAAA,EAC3B;AACA,QAAM,qBAAqB,QAAQ,OAAO,EAAE,YAAY,IAAI,CAAC,WAAW,CAAC;AAEzE,MAAI;AACF;AAAA;AAAA;AAAA,MAGE,qBAAC,cAAY,GAAG,iBAAiB,YAAY,EAAE,WAAW,EAAE,GAAG,GAAG,GAAG,IAAI,EAAE,GACzE;AAAA,4BAAC,gBAAgB,UAAhB,EAAyB,OAAO,oBAC/B,8BAAC,aAAW,GAAG,OAAO,GACxB;AAAA,QACA,oBAAC,eAAY,WAAW,CAAC,iCAAiC,GACvD,qBAAW,oBAAC,mBAAgB,QAAQ,gBAA+C,eAAa,MAAC,IAAK,MACzG;AAAA,SACF;AAAA;AAEJ,SAAO,oBAAC,aAAW,GAAG,OAAO;AAC/B;",
   "names": []
 }

package/dist/esm/parts/HoC/withConditionalDnDRowContext.js CHANGED Viewed

@@ -84,7 +84,7 @@ const withConditionalDnDRowContext = (Component) => (props) => {
     [active, flattenedData]
   );
   if (dragAndDropRows)
-    return /* @__PURE__ */ jsxs(DndContext, { ...dndContextProps, children: [
+    return /* @__PURE__ */ jsxs(DndContext, { ...dndContextProps, autoScroll: { layoutShiftCompensation: false }, children: [
       /* @__PURE__ */ jsx(SortableContext, { ...containerSortableContextProps, children: /* @__PURE__ */ jsx(DnDTreeContext.Provider, { value: ctx, children: /* @__PURE__ */ jsx(Component, { ...props }) }) }),
       createPortal(
         /* @__PURE__ */ jsx(DragOverlay, { style: { width: "auto" }, modifiers: [restrictToFirstScrollableAncestor], children: active ? /* @__PURE__ */ jsx(Row, { row: dragOverlayRow, isDragOverlay: true }) : null }),

package/dist/esm/parts/HoC/withConditionalDnDRowContext.js.map CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/parts/HoC/withConditionalDnDRowContext.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable react/function-component-definition */\nimport {\n  DndContext,\n  DragOverlay,\n  SortableContext,\n  restrictToFirstScrollableAncestor,\n  useTreeDndkitConfig,\n  type DnDKitTree,\n} from '@elliemae/ds-drag-and-drop';\nimport { useCallback, useMemo } from 'react';\nimport { createPortal } from 'react-dom';\nimport { useInternalStore, usePropsStore } from '../../configs/useStore/createInternalAndPropsContext.js';\nimport type { DSDataTableT } from '../../react-desc-prop-types.js';\nimport type { FunctionalHOC } from '../../types/FunctionalHoC.js';\nimport { Row } from '../Row.js';\nimport { DnDTreeContext } from './DnDTreeContext.js';\n\n// only wraps in \"DnDContext\" and \"DnDTreeContext\" if any Drag and Drop functionality is requested\nexport const withConditionalDnDRowContext: FunctionalHOC = (Component) => (props) => {\n  const dragAndDropRows = usePropsStore((state) => state.dragAndDropRows);\n  const isExpandable = usePropsStore((state) => state.isExpandable);\n  const onRowsReorder = usePropsStore((state) => state.onRowsReorder);\n  const maxDragAndDropLevel = usePropsStore((state) => state.maxDragAndDropLevel);\n  const getIsDropValid = usePropsStore((state) => state.getIsDropValid);\n  const flattenedData = usePropsStore((state) => state.flattenedData);\n  const allDataFlattened = usePropsStore((state) => state.allDataFlattened);\n  const setDrilldownRowId = useInternalStore((state) => state.setDrilldownRowId);\n\n  const onReorder: DnDKitTree.OnReorder<DSDataTableT.Row> = useCallback(\n    (_active, targetIndex, { movedData, fromIndex, considerExpanding }) => {\n      const rootMovedData = movedData.root;\n      // Pull the row's original data into an object\n      const nodes: Record<string, DSDataTableT.Row> = {};\n      rootMovedData.forEach((row) => {\n        if (row.original.subRows) delete row.original.subRows;\n        delete row.original.subRows;\n        nodes[row.uid] = row.original;\n      });\n      const newUserData = [] as DSDataTableT.Row[];\n      rootMovedData.forEach((row) => {\n        // If row has parent, insert it to it's subrows\n        // otherwise append it to the new user data\n        if (row.parentId) {\n          const parentNode = nodes[row.parentId];\n          if (parentNode?.subRows) parentNode.subRows.push(row.original);\n          else parentNode.subRows = [row.original];\n        } else newUserData.push(row.original);\n      });\n      // Tell the user that the order has change, he can chose to commit it or not\n      onRowsReorder(newUserData, { targetIndex, fromIndex }, considerExpanding as string | null, {\n        flattenedData,\n        allDataFlattened,\n      });\n      setDrilldownRowId(_active.uid.toString()); // we restore the drilldown row id which was set null during the blur event on dragging\n    },\n    [allDataFlattened, flattenedData, onRowsReorder, setDrilldownRowId],\n  );\n\n  const theFlattenedItems = useMemo(\n    () => allDataFlattened.map((datum) => ({ ...datum, collapsed: !datum.isExpanded, subitems: [] })),\n    [allDataFlattened],\n  );\n\n  const { dndContextProps, sortableContextProps, active, dropIndicatorPosition, isDropValid } = useTreeDndkitConfig({\n    flattenedItems: theFlattenedItems,\n    isHorizontalDnD: false,\n    isExpandable,\n    onReorder,\n    maxDragAndDropLevel,\n    getIsDropValid,\n  });\n\n  const containerSortableContextProps = sortableContextProps.root;\n\n  const visibleItems = useMemo(() => {\n    // active in this case is the row that is being dragged\n    // if no drag is happening, return the flattened data as is\n    if (!active) return flattenedData;\n    // if a drag is happening, exclude the children of the dragged row\n    //  this is a design choice, this way the user can't drag a parent row into one of it's children.\n    const excludeParentIds = [active.id];\n    return flattenedData.filter((datum) => {\n      const isParentExcluded = datum.parentId !== null && excludeParentIds.includes(datum.parentId);\n      if (isParentExcluded) {\n        excludeParentIds.push(datum.uid);\n        return false;\n      }\n      return true;\n    });\n  }, [active, flattenedData]);\n\n  const ctx = useMemo(\n    () => ({\n      visibleItems,\n      dropIndicatorPosition,\n      isDropValid,\n    }),\n    [visibleItems, dropIndicatorPosition, isDropValid],\n  );\n\n  const dragOverlayRow = useMemo(\n    () => (active ? flattenedData.find((row) => row.uid === active.id) : null),\n    [active, flattenedData],\n  );\n\n  if (dragAndDropRows)\n    return (\n      <DndContext {...dndContextProps}>\n        <SortableContext {...containerSortableContextProps}>\n          <DnDTreeContext.Provider value={ctx}>\n            <Component {...props} />\n          </DnDTreeContext.Provider>\n        </SortableContext>\n        {createPortal(\n          <DragOverlay style={{ width: 'auto' }} modifiers={[restrictToFirstScrollableAncestor]}>\n            {active ? <Row row={dragOverlayRow as DSDataTableT.InternalRow} isDragOverlay /> : null}\n          </DragOverlay>,\n          document.body,\n        )}\n      </DndContext>\n    );\n  return <Component {...props} />;\n};\n"],
-  "mappings": "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",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable react/function-component-definition */\nimport {\n  DndContext,\n  DragOverlay,\n  SortableContext,\n  restrictToFirstScrollableAncestor,\n  useTreeDndkitConfig,\n  type DnDKitTree,\n} from '@elliemae/ds-drag-and-drop';\nimport { useCallback, useMemo } from 'react';\nimport { createPortal } from 'react-dom';\nimport { useInternalStore, usePropsStore } from '../../configs/useStore/createInternalAndPropsContext.js';\nimport type { DSDataTableT } from '../../react-desc-prop-types.js';\nimport type { FunctionalHOC } from '../../types/FunctionalHoC.js';\nimport { Row } from '../Row.js';\nimport { DnDTreeContext } from './DnDTreeContext.js';\n\n// only wraps in \"DnDContext\" and \"DnDTreeContext\" if any Drag and Drop functionality is requested\nexport const withConditionalDnDRowContext: FunctionalHOC = (Component) => (props) => {\n  const dragAndDropRows = usePropsStore((state) => state.dragAndDropRows);\n  const isExpandable = usePropsStore((state) => state.isExpandable);\n  const onRowsReorder = usePropsStore((state) => state.onRowsReorder);\n  const maxDragAndDropLevel = usePropsStore((state) => state.maxDragAndDropLevel);\n  const getIsDropValid = usePropsStore((state) => state.getIsDropValid);\n  const flattenedData = usePropsStore((state) => state.flattenedData);\n  const allDataFlattened = usePropsStore((state) => state.allDataFlattened);\n  const setDrilldownRowId = useInternalStore((state) => state.setDrilldownRowId);\n\n  const onReorder: DnDKitTree.OnReorder<DSDataTableT.Row> = useCallback(\n    (_active, targetIndex, { movedData, fromIndex, considerExpanding }) => {\n      const rootMovedData = movedData.root;\n      // Pull the row's original data into an object\n      const nodes: Record<string, DSDataTableT.Row> = {};\n      rootMovedData.forEach((row) => {\n        if (row.original.subRows) delete row.original.subRows;\n        delete row.original.subRows;\n        nodes[row.uid] = row.original;\n      });\n      const newUserData = [] as DSDataTableT.Row[];\n      rootMovedData.forEach((row) => {\n        // If row has parent, insert it to it's subrows\n        // otherwise append it to the new user data\n        if (row.parentId) {\n          const parentNode = nodes[row.parentId];\n          if (parentNode?.subRows) parentNode.subRows.push(row.original);\n          else parentNode.subRows = [row.original];\n        } else newUserData.push(row.original);\n      });\n      // Tell the user that the order has change, he can chose to commit it or not\n      onRowsReorder(newUserData, { targetIndex, fromIndex }, considerExpanding as string | null, {\n        flattenedData,\n        allDataFlattened,\n      });\n      setDrilldownRowId(_active.uid.toString()); // we restore the drilldown row id which was set null during the blur event on dragging\n    },\n    [allDataFlattened, flattenedData, onRowsReorder, setDrilldownRowId],\n  );\n\n  const theFlattenedItems = useMemo(\n    () => allDataFlattened.map((datum) => ({ ...datum, collapsed: !datum.isExpanded, subitems: [] })),\n    [allDataFlattened],\n  );\n\n  const { dndContextProps, sortableContextProps, active, dropIndicatorPosition, isDropValid } = useTreeDndkitConfig({\n    flattenedItems: theFlattenedItems,\n    isHorizontalDnD: false,\n    isExpandable,\n    onReorder,\n    maxDragAndDropLevel,\n    getIsDropValid,\n  });\n\n  const containerSortableContextProps = sortableContextProps.root;\n\n  const visibleItems = useMemo(() => {\n    // active in this case is the row that is being dragged\n    // if no drag is happening, return the flattened data as is\n    if (!active) return flattenedData;\n    // if a drag is happening, exclude the children of the dragged row\n    //  this is a design choice, this way the user can't drag a parent row into one of it's children.\n    const excludeParentIds = [active.id];\n    return flattenedData.filter((datum) => {\n      const isParentExcluded = datum.parentId !== null && excludeParentIds.includes(datum.parentId);\n      if (isParentExcluded) {\n        excludeParentIds.push(datum.uid);\n        return false;\n      }\n      return true;\n    });\n  }, [active, flattenedData]);\n\n  const ctx = useMemo(\n    () => ({\n      visibleItems,\n      dropIndicatorPosition,\n      isDropValid,\n    }),\n    [visibleItems, dropIndicatorPosition, isDropValid],\n  );\n\n  const dragOverlayRow = useMemo(\n    () => (active ? flattenedData.find((row) => row.uid === active.id) : null),\n    [active, flattenedData],\n  );\n\n  if (dragAndDropRows)\n    return (\n      <DndContext {...dndContextProps} autoScroll={{ layoutShiftCompensation: false }}>\n        <SortableContext {...containerSortableContextProps}>\n          <DnDTreeContext.Provider value={ctx}>\n            <Component {...props} />\n          </DnDTreeContext.Provider>\n        </SortableContext>\n        {createPortal(\n          <DragOverlay style={{ width: 'auto' }} modifiers={[restrictToFirstScrollableAncestor]}>\n            {active ? <Row row={dragOverlayRow as DSDataTableT.InternalRow} isDragOverlay /> : null}\n          </DragOverlay>,\n          document.body,\n        )}\n      </DndContext>\n    );\n  return <Component {...props} />;\n};\n"],
+  "mappings": "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",
   "names": []
 }

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

@@ -1,13 +1,14 @@
 import * as React from "react";
 import { jsx } from "react/jsx-runtime";
 import { useSortable } from "@elliemae/ds-drag-and-drop";
-import { useContext, useMemo } from "react";
+import { useContext, useEffect, useMemo } from "react";
 import { DropIndicatorPosition } from "../../configs/constants.js";
-import { usePropsStore } from "../../configs/useStore/createInternalAndPropsContext.js";
+import { useInternalStore, usePropsStore } from "../../configs/useStore/createInternalAndPropsContext.js";
 import { SortableItemContext } from "./SortableItemContext.js";
 import { DnDGroupContext } from "./DnDGroupContext.js";
 const withDnDSortableColumnContext = (Component) => (props) => {
   const dragAndDropColumns = usePropsStore((state) => state.dragAndDropColumns);
+  const setIsHeaderCellDragging = useInternalStore((state) => state.setIsHeaderCellDragging);
   const { activeIndex } = useContext(DnDGroupContext);
   const draggableOptions = useMemo(
     () => ({
@@ -16,6 +17,13 @@ const withDnDSortableColumnContext = (Component) => (props) => {
     [props.header.id]
   );
   const useSortableHelpers = useSortable(draggableOptions);
+  useEffect(() => {
+    if (useSortableHelpers.isDragging) {
+      setIsHeaderCellDragging(true);
+    } else {
+      setIsHeaderCellDragging(false);
+    }
+  }, [useSortableHelpers.isDragging, setIsHeaderCellDragging]);
   const draggableProps = useMemo(() => {
     if (!dragAndDropColumns) return false;
     const { index, overIndex } = useSortableHelpers;

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

@@ -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, useMemo } from 'react';\nimport { DropIndicatorPosition } from '../../configs/constants.js';\nimport { 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 { 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    // 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;ACoDf;AAnDR,SAAS,mBAAmB;AAC5B,SAAgB,YAAY,eAAe;AAC3C,SAAS,6BAA6B;AACtC,SAAS,qBAAqB;AAG9B,SAAS,2BAA2B;AACpC,SAAS,uBAAuB;AAEzB,MAAM,+BACX,CAAoD,cACpD,CAAC,UAAa;AACZ,QAAM,qBAAqB,cAAc,CAAC,UAAU,MAAM,kBAAkB;AAC5E,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;AAGvD,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\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;",
   "names": []
 }

package/dist/esm/parts/Loader.js CHANGED Viewed

@@ -4,7 +4,7 @@ import { DSCircularProgressIndicator } from "@elliemae/ds-circular-progress-indi
 import { Grid } from "@elliemae/ds-grid";
 import { styled } from "@elliemae/ds-system";
 import { memo } from "react";
-import { DSDataTableName, DSDataTableSlots } from "../DSDataTableDefinitions.js";
+import { DSDataTableName, DSDataTableSlots } from "../constants/index.js";
 import { usePropsStore } from "../configs/useStore/createInternalAndPropsContext.js";
 const StyledLoaderWrapper = styled(Grid, { name: DSDataTableName, slot: DSDataTableSlots.LOADER_WRAPPER })`
   place-items: center;

package/dist/esm/parts/Loader.js.map CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../src/parts/Loader.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { DSCircularProgressIndicator } from '@elliemae/ds-circular-progress-indicator';\nimport { Grid } from '@elliemae/ds-grid';\nimport { styled } from '@elliemae/ds-system';\nimport { memo } from 'react';\nimport { DSDataTableName, DSDataTableSlots } from '../DSDataTableDefinitions.js';\nimport { usePropsStore } from '../configs/useStore/createInternalAndPropsContext.js';\n\nconst StyledLoaderWrapper = styled(Grid, { name: DSDataTableName, slot: DSDataTableSlots.LOADER_WRAPPER })`\n  place-items: center;\n  z-index: 0;\n  background-color: white;\n`;\n\n/**\n * we need to keep the semantic table structure\n * @returns Loader\n */\nconst Loader = () => {\n  const getOwnerProps = usePropsStore((store) => store.get);\n  return (\n    <StyledLoaderWrapper role=\"row\" aria-live=\"polite\" getOwnerProps={getOwnerProps}>\n      <div role=\"cell\">\n        <DSCircularProgressIndicator size=\"xl\" loading showLabel waiting={false} showTooltip={false} />\n      </div>\n    </StyledLoaderWrapper>\n  );\n};\nexport const MemoizedLoader = memo(Loader);\n"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { DSCircularProgressIndicator } from '@elliemae/ds-circular-progress-indicator';\nimport { Grid } from '@elliemae/ds-grid';\nimport { styled } from '@elliemae/ds-system';\nimport { memo } from 'react';\nimport { DSDataTableName, DSDataTableSlots } from '../constants/index.js';\nimport { usePropsStore } from '../configs/useStore/createInternalAndPropsContext.js';\n\nconst StyledLoaderWrapper = styled(Grid, { name: DSDataTableName, slot: DSDataTableSlots.LOADER_WRAPPER })`\n  place-items: center;\n  z-index: 0;\n  background-color: white;\n`;\n\n/**\n * we need to keep the semantic table structure\n * @returns Loader\n */\nconst Loader = () => {\n  const getOwnerProps = usePropsStore((store) => store.get);\n  return (\n    <StyledLoaderWrapper role=\"row\" aria-live=\"polite\" getOwnerProps={getOwnerProps}>\n      <div role=\"cell\">\n        <DSCircularProgressIndicator size=\"xl\" loading showLabel waiting={false} showTooltip={false} />\n      </div>\n    </StyledLoaderWrapper>\n  );\n};\nexport const MemoizedLoader = memo(Loader);\n"],
   "mappings": "AAAA,YAAY,WAAW;ACsBf;AAtBR,SAAS,mCAAmC;AAC5C,SAAS,YAAY;AACrB,SAAS,cAAc;AACvB,SAAS,YAAY;AACrB,SAAS,iBAAiB,wBAAwB;AAClD,SAAS,qBAAqB;AAE9B,MAAM,sBAAsB,OAAO,MAAM,EAAE,MAAM,iBAAiB,MAAM,iBAAiB,eAAe,CAAC;AAAA;AAAA;AAAA;AAAA;AAUzG,MAAM,SAAS,MAAM;AACnB,QAAM,gBAAgB,cAAc,CAAC,UAAU,MAAM,GAAG;AACxD,SACE,oBAAC,uBAAoB,MAAK,OAAM,aAAU,UAAS,eACjD,8BAAC,SAAI,MAAK,QACR,8BAAC,+BAA4B,MAAK,MAAK,SAAO,MAAC,WAAS,MAAC,SAAS,OAAO,aAAa,OAAO,GAC/F,GACF;AAEJ;AACO,MAAM,iBAAiB,KAAK,MAAM;",
   "names": []
 }

package/dist/esm/parts/Row.js CHANGED Viewed

@@ -3,7 +3,7 @@ import { jsx } from "react/jsx-runtime";
 import { mergeRefs, styled } from "@elliemae/ds-system";
 import { useCallback, useContext } from "react";
 import { useInternalStore, usePropsStore } from "../configs/useStore/createInternalAndPropsContext.js";
-import { DSDataTableName, DSDataTableSlots } from "../DSDataTableDefinitions.js";
+import { DSDataTableName, DSDataTableSlots } from "../constants/index.js";
 import { SortableItemContext } from "./HoC/SortableItemContext.js";
 import { withDnDSortableRowContext } from "./HoC/withDnDSortableRowContext.js";
 import { RowVariantMapItem } from "./RowVariants/index.js";

package/dist/esm/parts/Row.js.map CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../src/parts/Row.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { mergeRefs, styled } from '@elliemae/ds-system';\nimport React, { useCallback, useContext } from 'react';\nimport { useInternalStore, usePropsStore } from '../configs/useStore/createInternalAndPropsContext.js';\nimport { DSDataTableName, DSDataTableSlots } from '../DSDataTableDefinitions.js';\nimport type { DSDataTableT } from '../react-desc-prop-types.js';\nimport { SortableItemContext } from './HoC/SortableItemContext.js';\nimport { withDnDSortableRowContext } from './HoC/withDnDSortableRowContext.js';\nimport { RowVariantMapItem } from './RowVariants/index.js';\n\nconst StyledRow = styled('div', { name: DSDataTableName, slot: DSDataTableSlots.ROW })<{ isDisabled: boolean }>`\n  cursor: ${({ isDisabled }) => (isDisabled ? 'not-allowed' : 'normal')};\n`;\n\nexport const Row: React.ComponentType<{\n  row: DSDataTableT.InternalRow;\n  measureRef?: (el: HTMLElement | null) => void;\n  itemWrapperStyle?: React.CSSProperties;\n  isDragOverlay: boolean;\n}> = (props) => {\n  const { row, measureRef, itemWrapperStyle, isDragOverlay } = props;\n  const disabledRows = usePropsStore((state) => state.disabledRows);\n  const getOwnerProps = usePropsStore((store) => store.get);\n  const getOwnerPropsArguments = useCallback(() => row, [row]);\n  const focusedRowId = useInternalStore((state) => state.focusedRowId);\n  const drilldownRowId = useInternalStore((state) => state.drilldownRowId);\n\n  const { draggableProps } = useContext(SortableItemContext);\n  const draggableRef = draggableProps && draggableProps.setNodeRef;\n  return (\n    <StyledRow\n      isDisabled={disabledRows[row.uid]}\n      style={!isDragOverlay ? itemWrapperStyle : {}}\n      innerRef={mergeRefs(measureRef, draggableRef)}\n      getOwnerProps={getOwnerProps}\n      getOwnerPropsArguments={getOwnerPropsArguments}\n    >\n      <RowVariantMapItem\n        row={row}\n        itemIndex={row.realIndex}\n        isDragOverlay={isDragOverlay}\n        focusedRowId={focusedRowId}\n        drilldownRowId={drilldownRowId}\n      />\n    </StyledRow>\n  );\n};\n\nconst RowWithContext = withDnDSortableRowContext(Row);\nexport { RowWithContext };\n"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { mergeRefs, styled } from '@elliemae/ds-system';\nimport React, { useCallback, useContext } from 'react';\nimport { useInternalStore, usePropsStore } from '../configs/useStore/createInternalAndPropsContext.js';\nimport { DSDataTableName, DSDataTableSlots } from '../constants/index.js';\nimport type { DSDataTableT } from '../react-desc-prop-types.js';\nimport { SortableItemContext } from './HoC/SortableItemContext.js';\nimport { withDnDSortableRowContext } from './HoC/withDnDSortableRowContext.js';\nimport { RowVariantMapItem } from './RowVariants/index.js';\n\nconst StyledRow = styled('div', { name: DSDataTableName, slot: DSDataTableSlots.ROW })<{ isDisabled: boolean }>`\n  cursor: ${({ isDisabled }) => (isDisabled ? 'not-allowed' : 'normal')};\n`;\n\nexport const Row: React.ComponentType<{\n  row: DSDataTableT.InternalRow;\n  measureRef?: (el: HTMLElement | null) => void;\n  itemWrapperStyle?: React.CSSProperties;\n  isDragOverlay: boolean;\n}> = (props) => {\n  const { row, measureRef, itemWrapperStyle, isDragOverlay } = props;\n  const disabledRows = usePropsStore((state) => state.disabledRows);\n  const getOwnerProps = usePropsStore((store) => store.get);\n  const getOwnerPropsArguments = useCallback(() => row, [row]);\n  const focusedRowId = useInternalStore((state) => state.focusedRowId);\n  const drilldownRowId = useInternalStore((state) => state.drilldownRowId);\n\n  const { draggableProps } = useContext(SortableItemContext);\n  const draggableRef = draggableProps && draggableProps.setNodeRef;\n  return (\n    <StyledRow\n      isDisabled={disabledRows[row.uid]}\n      style={!isDragOverlay ? itemWrapperStyle : {}}\n      innerRef={mergeRefs(measureRef, draggableRef)}\n      getOwnerProps={getOwnerProps}\n      getOwnerPropsArguments={getOwnerPropsArguments}\n    >\n      <RowVariantMapItem\n        row={row}\n        itemIndex={row.realIndex}\n        isDragOverlay={isDragOverlay}\n        focusedRowId={focusedRowId}\n        drilldownRowId={drilldownRowId}\n      />\n    </StyledRow>\n  );\n};\n\nconst RowWithContext = withDnDSortableRowContext(Row);\nexport { RowWithContext };\n"],
   "mappings": "AAAA,YAAY,WAAW;ACoCjB;AApCN,SAAS,WAAW,cAAc;AAClC,SAAgB,aAAa,kBAAkB;AAC/C,SAAS,kBAAkB,qBAAqB;AAChD,SAAS,iBAAiB,wBAAwB;AAElD,SAAS,2BAA2B;AACpC,SAAS,iCAAiC;AAC1C,SAAS,yBAAyB;AAElC,MAAM,YAAY,OAAO,OAAO,EAAE,MAAM,iBAAiB,MAAM,iBAAiB,IAAI,CAAC;AAAA,YACzE,CAAC,EAAE,WAAW,MAAO,aAAa,gBAAgB,QAAS;AAAA;AAGhE,MAAM,MAKR,CAAC,UAAU;AACd,QAAM,EAAE,KAAK,YAAY,kBAAkB,cAAc,IAAI;AAC7D,QAAM,eAAe,cAAc,CAAC,UAAU,MAAM,YAAY;AAChE,QAAM,gBAAgB,cAAc,CAAC,UAAU,MAAM,GAAG;AACxD,QAAM,yBAAyB,YAAY,MAAM,KAAK,CAAC,GAAG,CAAC;AAC3D,QAAM,eAAe,iBAAiB,CAAC,UAAU,MAAM,YAAY;AACnE,QAAM,iBAAiB,iBAAiB,CAAC,UAAU,MAAM,cAAc;AAEvE,QAAM,EAAE,eAAe,IAAI,WAAW,mBAAmB;AACzD,QAAM,eAAe,kBAAkB,eAAe;AACtD,SACE;AAAA,IAAC;AAAA;AAAA,MACC,YAAY,aAAa,IAAI,GAAG;AAAA,MAChC,OAAO,CAAC,gBAAgB,mBAAmB,CAAC;AAAA,MAC5C,UAAU,UAAU,YAAY,YAAY;AAAA,MAC5C;AAAA,MACA;AAAA,MAEA;AAAA,QAAC;AAAA;AAAA,UACC;AAAA,UACA,WAAW,IAAI;AAAA,UACf;AAAA,UACA;AAAA,UACA;AAAA;AAAA,MACF;AAAA;AAAA,EACF;AAEJ;AAEA,MAAM,iBAAiB,0BAA0B,GAAG;",
   "names": []
 }

package/dist/esm/parts/SkeletonTable.js CHANGED Viewed

@@ -10,7 +10,10 @@ const SkeletonTable = React2.memo(({ height = "100" }) => {
   const rows = Math.floor((parseInt(height, 10) - headerHeight) / (rowHeight + gap));
   return /* @__PURE__ */ jsxs(Grid, { gutter: "xs", children: [
     /* @__PURE__ */ jsx(DSSkeleton, { height: "25px", variant: "rectangular" }),
-    Array.from({ length: rows }).map((_, i) => /* @__PURE__ */ jsx(DSSkeleton, { height: "36px", variant: "rectangular" }, i))
+    Array.from({ length: rows }).map((_, i) => (
+      // eslint-disable-next-line react/no-array-index-key -- skeletons are not dynamic
+      /* @__PURE__ */ jsx(DSSkeleton, { height: "36px", variant: "rectangular" }, i)
+    ))
   ] });
 });
 export {

package/dist/esm/parts/SkeletonTable.js.map CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../src/parts/SkeletonTable.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React from 'react';\nimport { Grid } from '@elliemae/ds-grid';\nimport { DSSkeleton } from '@elliemae/ds-skeleton';\n\nexport const SkeletonTable = React.memo(({ height = '100' }: { height: string }) => {\n  const gap = 16;\n  const rowHeight = 36;\n  const headerHeight = 25;\n  const rows = Math.floor((parseInt(height, 10) - headerHeight) / (rowHeight + gap));\n  return (\n    <Grid gutter=\"xs\">\n      <DSSkeleton height=\"25px\" variant=\"rectangular\" />\n      {Array.from({ length: rows }).map((_, i) => (\n        <DSSkeleton height=\"36px\" key={i} variant=\"rectangular\" />\n      ))}\n    </Grid>\n  );\n});\n"],
-  "mappings": "AAAA,YAAY,WAAW;ACUnB,SACE,KADF;AAVJ,OAAOA,YAAW;AAClB,SAAS,YAAY;AACrB,SAAS,kBAAkB;AAEpB,MAAM,gBAAgBA,OAAM,KAAK,CAAC,EAAE,SAAS,MAAM,MAA0B;AAClF,QAAM,MAAM;AACZ,QAAM,YAAY;AAClB,QAAM,eAAe;AACrB,QAAM,OAAO,KAAK,OAAO,SAAS,QAAQ,EAAE,IAAI,iBAAiB,YAAY,IAAI;AACjF,SACE,qBAAC,QAAK,QAAO,MACX;AAAA,wBAAC,cAAW,QAAO,QAAO,SAAQ,eAAc;AAAA,IAC/C,MAAM,KAAK,EAAE,QAAQ,KAAK,CAAC,EAAE,IAAI,CAAC,GAAG,MACpC,oBAAC,cAAW,QAAO,QAAe,SAAQ,iBAAX,CAAyB,CACzD;AAAA,KACH;AAEJ,CAAC;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React from 'react';\nimport { Grid } from '@elliemae/ds-grid';\nimport { DSSkeleton } from '@elliemae/ds-skeleton';\n\nexport const SkeletonTable = React.memo(({ height = '100' }: { height: string }) => {\n  const gap = 16;\n  const rowHeight = 36;\n  const headerHeight = 25;\n  const rows = Math.floor((parseInt(height, 10) - headerHeight) / (rowHeight + gap));\n  return (\n    <Grid gutter=\"xs\">\n      <DSSkeleton height=\"25px\" variant=\"rectangular\" />\n      {Array.from({ length: rows }).map((_, i) => (\n        // eslint-disable-next-line react/no-array-index-key -- skeletons are not dynamic\n        <DSSkeleton height=\"36px\" key={i} variant=\"rectangular\" />\n      ))}\n    </Grid>\n  );\n});\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACUnB,SACE,KADF;AAVJ,OAAOA,YAAW;AAClB,SAAS,YAAY;AACrB,SAAS,kBAAkB;AAEpB,MAAM,gBAAgBA,OAAM,KAAK,CAAC,EAAE,SAAS,MAAM,MAA0B;AAClF,QAAM,MAAM;AACZ,QAAM,YAAY;AAClB,QAAM,eAAe;AACrB,QAAM,OAAO,KAAK,OAAO,SAAS,QAAQ,EAAE,IAAI,iBAAiB,YAAY,IAAI;AACjF,SACE,qBAAC,QAAK,QAAO,MACX;AAAA,wBAAC,cAAW,QAAO,QAAO,SAAQ,eAAc;AAAA,IAC/C,MAAM,KAAK,EAAE,QAAQ,KAAK,CAAC,EAAE,IAAI,CAAC,GAAG;AAAA;AAAA,MAEpC,oBAAC,cAAW,QAAO,QAAe,SAAQ,iBAAX,CAAyB;AAAA,KACzD;AAAA,KACH;AAEJ,CAAC;",
   "names": ["React"]
 }

package/dist/esm/parts/SortByCaret.js CHANGED Viewed

@@ -23,14 +23,14 @@ const SortByCaret = React2.memo(({ isSortedDesc, isReachable, reduxHeader, inner
     }
     return /* @__PURE__ */ jsx(ArrowheadUp, { color: iconColor });
   }, [isSortedDesc]);
-  if (!showSortCaret && !isMenuOpen && !isIconVisible && isSortedDesc === void 0) return null;
+  const shouldHideButton = !showSortCaret && !isMenuOpen && !isIconVisible && isSortedDesc === void 0;
   return /* @__PURE__ */ jsx(
     DSButtonV2,
     {
       onClick,
       tabIndex: isReachable ? 0 : -1,
       buttonType: "icon",
-      style: { marginLeft: "4px" },
+      style: { marginLeft: "4px", display: shouldHideButton ? "none" : "revert" },
       "aria-label": `Sort ${column.id} ${isSortedDesc ? "ascending" : "descending"}`,
       size: "s",
       innerRef,

package/dist/esm/parts/SortByCaret.js.map CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../src/parts/SortByCaret.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { useMemo } from 'react';\nimport type { SvgIconT } from '@elliemae/ds-icons';\nimport { ArrowheadDown, ArrowheadUp, SortNeutral } from '@elliemae/ds-icons';\nimport { DSButtonV2 } from '@elliemae/ds-button-v2';\nimport type { DSDataTableT } from '../react-desc-prop-types.js';\nimport { DATA_TESTID } from '../configs/constants.js';\nimport { useGetFilterVisibility } from '../exported-related/FilterPopover/useGetFilterVisibility.js';\nconst iconColor: SvgIconT.ColorType = ['brand-primary', '800'];\n\nexport const SortByCaret: React.ComponentType<{\n  isSortedDesc: boolean | undefined;\n  onClick: (e: React.KeyboardEvent<HTMLButtonElement> | React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;\n  isReachable: boolean;\n  column: DSDataTableT.InternalColumn;\n  reduxHeader: DSDataTableT.ReduxHeader;\n  innerRef: React.RefObject<HTMLButtonElement>;\n}> = React.memo(({ isSortedDesc, isReachable, reduxHeader, innerRef, column, onClick }) => {\n  const { isMenuOpen, isIconVisible } = useGetFilterVisibility(reduxHeader);\n\n  const { showSortCaret } = useMemo(\n    () =>\n      reduxHeader || {\n        showSortCaret: false,\n      },\n    [reduxHeader],\n  );\n\n  const icon = useMemo(() => {\n    if (isSortedDesc === undefined) {\n      return <SortNeutral color={iconColor} />;\n    }\n\n    if (isSortedDesc) {\n      return <ArrowheadDown size=\"s\" color={iconColor} />;\n    }\n\n    return <ArrowheadUp color={iconColor} />;\n  }, [isSortedDesc]);\n\n  if (!showSortCaret && !isMenuOpen && !isIconVisible && isSortedDesc === undefined) return null;\n\n  return (\n    <DSButtonV2\n      onClick={onClick}\n      tabIndex={isReachable ? 0 : -1}\n      buttonType=\"icon\"\n      style={{ marginLeft: '4px' }}\n      aria-label={`Sort ${column.id} ${isSortedDesc ? 'ascending' : 'descending'}`}\n      size=\"s\"\n      innerRef={innerRef}\n      data-testid={DATA_TESTID.DATA_TABLE_SORT_BUTTON}\n    >\n      {icon}\n    </DSButtonV2>\n  );\n});\n"],
-  "mappings": "AAAA,YAAY,WAAW;AC6BV;AA7Bb,OAAOA,UAAS,eAAe;AAE/B,SAAS,eAAe,aAAa,mBAAmB;AACxD,SAAS,kBAAkB;AAE3B,SAAS,mBAAmB;AAC5B,SAAS,8BAA8B;AACvC,MAAM,YAAgC,CAAC,iBAAiB,KAAK;AAEtD,MAAM,cAORA,OAAM,KAAK,CAAC,EAAE,cAAc,aAAa,aAAa,UAAU,QAAQ,QAAQ,MAAM;AACzF,QAAM,EAAE,YAAY,cAAc,IAAI,uBAAuB,WAAW;AAExE,QAAM,EAAE,cAAc,IAAI;AAAA,IACxB,MACE,eAAe;AAAA,MACb,eAAe;AAAA,IACjB;AAAA,IACF,CAAC,WAAW;AAAA,EACd;AAEA,QAAM,OAAO,QAAQ,MAAM;AACzB,QAAI,iBAAiB,QAAW;AAC9B,aAAO,oBAAC,eAAY,OAAO,WAAW;AAAA,IACxC;AAEA,QAAI,cAAc;AAChB,aAAO,oBAAC,iBAAc,MAAK,KAAI,OAAO,WAAW;AAAA,IACnD;AAEA,WAAO,oBAAC,eAAY,OAAO,WAAW;AAAA,EACxC,GAAG,CAAC,YAAY,CAAC;AAEjB,MAAI,CAAC,iBAAiB,CAAC,cAAc,CAAC,iBAAiB,iBAAiB,OAAW,QAAO;AAE1F,SACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA,UAAU,cAAc,IAAI;AAAA,MAC5B,YAAW;AAAA,MACX,OAAO,EAAE,YAAY,MAAM;AAAA,MAC3B,cAAY,QAAQ,OAAO,EAAE,IAAI,eAAe,cAAc,YAAY;AAAA,MAC1E,MAAK;AAAA,MACL;AAAA,MACA,eAAa,YAAY;AAAA,MAExB;AAAA;AAAA,EACH;AAEJ,CAAC;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { useMemo } from 'react';\nimport type { SvgIconT } from '@elliemae/ds-icons';\nimport { ArrowheadDown, ArrowheadUp, SortNeutral } from '@elliemae/ds-icons';\nimport { DSButtonV2 } from '@elliemae/ds-button-v2';\nimport type { DSDataTableT } from '../react-desc-prop-types.js';\nimport { DATA_TESTID } from '../configs/constants.js';\nimport { useGetFilterVisibility } from '../exported-related/FilterPopover/useGetFilterVisibility.js';\nconst iconColor: SvgIconT.ColorType = ['brand-primary', '800'];\n\nexport const SortByCaret: React.ComponentType<{\n  isSortedDesc: boolean | undefined;\n  onClick: (e: React.KeyboardEvent<HTMLButtonElement> | React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;\n  isReachable: boolean;\n  column: DSDataTableT.InternalColumn;\n  reduxHeader: DSDataTableT.ReduxHeader;\n  innerRef: React.RefObject<HTMLButtonElement>;\n}> = React.memo(({ isSortedDesc, isReachable, reduxHeader, innerRef, column, onClick }) => {\n  const { isMenuOpen, isIconVisible } = useGetFilterVisibility(reduxHeader);\n\n  const { showSortCaret } = useMemo(\n    () =>\n      reduxHeader || {\n        showSortCaret: false,\n      },\n    [reduxHeader],\n  );\n\n  const icon = useMemo(() => {\n    if (isSortedDesc === undefined) {\n      return <SortNeutral color={iconColor} />;\n    }\n\n    if (isSortedDesc) {\n      return <ArrowheadDown size=\"s\" color={iconColor} />;\n    }\n\n    return <ArrowheadUp color={iconColor} />;\n  }, [isSortedDesc]);\n\n  /**\n   * PUI - 15155 (https://jira.elliemae.io/browse/PUI-15155)\n   * Instead of conditionally rendering null, we use CSS to hide the button.\n   * This prevents the button from unmounting when the filter menu opens or closes,\n   * ensuring that event handlers (e.g., sorting clicks) remain attached.\n   * */\n  const shouldHideButton = !showSortCaret && !isMenuOpen && !isIconVisible && isSortedDesc === undefined;\n\n  return (\n    <DSButtonV2\n      onClick={onClick}\n      tabIndex={isReachable ? 0 : -1}\n      buttonType=\"icon\"\n      style={{ marginLeft: '4px', display: shouldHideButton ? 'none' : 'revert' }}\n      aria-label={`Sort ${column.id} ${isSortedDesc ? 'ascending' : 'descending'}`}\n      size=\"s\"\n      innerRef={innerRef}\n      data-testid={DATA_TESTID.DATA_TABLE_SORT_BUTTON}\n    >\n      {icon}\n    </DSButtonV2>\n  );\n});\n"],
+  "mappings": "AAAA,YAAY,WAAW;AC6BV;AA7Bb,OAAOA,UAAS,eAAe;AAE/B,SAAS,eAAe,aAAa,mBAAmB;AACxD,SAAS,kBAAkB;AAE3B,SAAS,mBAAmB;AAC5B,SAAS,8BAA8B;AACvC,MAAM,YAAgC,CAAC,iBAAiB,KAAK;AAEtD,MAAM,cAORA,OAAM,KAAK,CAAC,EAAE,cAAc,aAAa,aAAa,UAAU,QAAQ,QAAQ,MAAM;AACzF,QAAM,EAAE,YAAY,cAAc,IAAI,uBAAuB,WAAW;AAExE,QAAM,EAAE,cAAc,IAAI;AAAA,IACxB,MACE,eAAe;AAAA,MACb,eAAe;AAAA,IACjB;AAAA,IACF,CAAC,WAAW;AAAA,EACd;AAEA,QAAM,OAAO,QAAQ,MAAM;AACzB,QAAI,iBAAiB,QAAW;AAC9B,aAAO,oBAAC,eAAY,OAAO,WAAW;AAAA,IACxC;AAEA,QAAI,cAAc;AAChB,aAAO,oBAAC,iBAAc,MAAK,KAAI,OAAO,WAAW;AAAA,IACnD;AAEA,WAAO,oBAAC,eAAY,OAAO,WAAW;AAAA,EACxC,GAAG,CAAC,YAAY,CAAC;AAQjB,QAAM,mBAAmB,CAAC,iBAAiB,CAAC,cAAc,CAAC,iBAAiB,iBAAiB;AAE7F,SACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA,UAAU,cAAc,IAAI;AAAA,MAC5B,YAAW;AAAA,MACX,OAAO,EAAE,YAAY,OAAO,SAAS,mBAAmB,SAAS,SAAS;AAAA,MAC1E,cAAY,QAAQ,OAAO,EAAE,IAAI,eAAe,cAAc,YAAY;AAAA,MAC1E,MAAK;AAAA,MACL;AAAA,MACA,eAAa,YAAY;AAAA,MAExB;AAAA;AAAA,EACH;AAEJ,CAAC;",
   "names": ["React"]
 }

package/dist/esm/parts/SortableHeaderCell.js CHANGED Viewed

@@ -1,15 +1,11 @@
 import * as React from "react";
 import { jsx } from "react/jsx-runtime";
-import { useMemo } from "react";
 import { Grid } from "@elliemae/ds-grid";
-import { withConditionalDnDSortableContext } from "./HoC/withConditionalDnDSortableContext.js";
 import { styled } from "@elliemae/ds-system";
+import { useMemo } from "react";
+import { withConditionalDnDSortableContext } from "./HoC/withConditionalDnDSortableContext.js";
 const GridWithCssVariable = styled(Grid)`
-  ${(props) => {
-  if (props.colId) {
-    return `grid-template-columns: var(--grid-layout-${CSS.escape(props.colId)});`;
-  }
-}}
+  ${(props) => props.colId ? `grid-template-columns: var(--grid-layout-${CSS.escape(props.colId)});` : ""}
 `;
 const SortableGrid = withConditionalDnDSortableContext(GridWithCssVariable);
 const SortableHeaderCell = ({