@elliemae/ds-data-table 3.14.0-next.1 → 3.14.0-next.11

package/dist/cjs/configs/useDatatableConfig.js

@@ -36,6 +36,7 @@ var import_usePaginationConfig = require("./usePaginationConfig");
 var import_useTableColsWithAddons = require("./useTableColsWithAddons");
 var import_constants = require("./constants");
 var import_useInternalStateConfig = require("./useInternalStateConfig");
+const estimateSize = () => 36;
 const useDatatableConfig = (props) => {
   const virtualListRef = (0, import_react.useRef)(null);
   const columnHeaderRef = (0, import_react.useRef)(null);
@@ -58,7 +59,8 @@ const useDatatableConfig = (props) => {
     size: dataLength,
     parentRef: virtualListRef,
     overscan: 15,
-    paddingStart: columnHeaderRef.current?.getBoundingClientRect()?.height ?? 24
+    paddingStart: columnHeaderRef.current?.getBoundingClientRect()?.height ?? 24,
+    estimateSize
   });
   (0, import_react.useEffect)(() => {
     if (props.actionRef) {

package/dist/cjs/configs/useDatatableConfig.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/configs/useDatatableConfig.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["import { useEffect, useMemo, useRef, useState } from 'react';\nimport { useVirtual } from 'react-virtual';\nimport { columnsToGrid } from '../helpers/columnsToGrid';\nimport type { TypescriptColumn, TypescriptContext, TypescriptProps } from '../types/props';\nimport { useRowFlattenization } from './useRowFlattenization';\nimport { usePaginationConfig } from './usePaginationConfig';\nimport { useTableColsWithAddons } from './useTableColsWithAddons';\nimport { ColsLayoutStyle } from './constants';\nimport { useInternalStateConfig } from './useInternalStateConfig';\n\nexport const useDatatableConfig = (props: TypescriptProps): TypescriptContext => {\n  const virtualListRef = useRef<HTMLDivElement>(null);\n  const columnHeaderRef = useRef<HTMLDivElement>(null);\n  const [isShiftPressed, setIsShiftPressed] = useState(false);\n  const lastSelected = useRef<number>(-1);\n\n  // ===========================================================================\n  // Column config\n  // ===========================================================================\n  const tableColsWithAddons = useTableColsWithAddons(props);\n  const visibleColumns = useMemo(\n    () =>\n      tableColsWithAddons\n        .filter((col: TypescriptColumn) => !props.hiddenColumns?.includes(col.accessor))\n        .map((col: TypescriptColumn) => {\n          if (col.columns) {\n            col.columns = col.columns.filter(\n              (subCol: TypescriptColumn) => !props.hiddenColumns?.includes(subCol.accessor),\n            );\n          }\n          return col;\n        }),\n    [props.hiddenColumns, tableColsWithAddons],\n  );\n\n  // ===========================================================================\n  // Virtualization\n  // ===========================================================================\n\n  const [dataLength, setDataLength] = useState(1);\n\n  // estimateSize should not be really required given what was stated on\n  // https://github.com/tannerlinsley/react-virtual/issues/23\n  const virtualListHelpers = useVirtual({\n    size: dataLength,\n    parentRef: virtualListRef,\n    overscan: 15,\n    paddingStart: columnHeaderRef.current?.getBoundingClientRect()?.height ?? 24,\n  });\n\n  // ===========================================================================\n  // Action ref setup\n  // ===========================================================================\n  useEffect(() => {\n    if (props.actionRef) {\n      props.actionRef.current.scrollToIndex = virtualListHelpers.scrollToIndex;\n      props.actionRef.current.scrollToOffset = virtualListHelpers.scrollToOffset;\n    }\n  }, [props.actionRef, virtualListHelpers.scrollToIndex, virtualListHelpers.scrollToOffset]);\n\n  // ===========================================================================\n  // Data flattenization and pagination\n  // ===========================================================================\n\n  const [flattenedData, allDataFlattened] = useRowFlattenization(props);\n\n  const [paginatedData, paginationHelpers] = usePaginationConfig(props, flattenedData);\n\n  // Redo virtualization until we match the lengths\n  if (dataLength !== (paginatedData || flattenedData).length) setDataLength((paginatedData || flattenedData).length);\n\n  // ===========================================================================\n  // Layout config\n  // ===========================================================================\n\n  const [gridLayout, setGridLayout] = useState(columnsToGrid(visibleColumns, props.colsLayoutStyle));\n\n  // We need to listen and update the state based on this props\n  useEffect(() => {\n    setGridLayout(columnsToGrid(visibleColumns, props.colsLayoutStyle));\n  }, [visibleColumns, props.colsLayoutStyle]);\n\n  const totalColumnsWidth = useMemo(\n    () =>\n      props.colsLayoutStyle === ColsLayoutStyle.Fixed\n        ? gridLayout.reduce((acc: number, cur: string) => acc + Number.parseInt(cur, 10), 0)\n        : '100%',\n    [props.colsLayoutStyle, gridLayout],\n  );\n\n  const layoutHelpers = useMemo(\n    () => ({\n      gridLayout,\n      setGridLayout,\n      totalColumnsWidth,\n    }),\n    [gridLayout, setGridLayout, totalColumnsWidth],\n  );\n\n  // ===========================================================================\n  // Internal state config\n  // ===========================================================================\n\n  const internalState = useInternalStateConfig();\n\n  const ctx = useMemo(\n    () => ({\n      tableProps: props,\n      layoutHelpers,\n      paginationHelpers,\n      visibleColumns,\n      virtualListHelpers,\n      flattenedData: paginatedData || flattenedData,\n      allDataFlattened,\n      virtualListRef,\n      columnHeaderRef,\n      ...internalState,\n      isShiftPressed,\n      setIsShiftPressed,\n      lastSelected,\n    }),\n    [\n      props,\n      layoutHelpers,\n      paginationHelpers,\n      visibleColumns,\n      virtualListHelpers,\n      paginatedData,\n      flattenedData,\n      allDataFlattened,\n      virtualListRef,\n      columnHeaderRef,\n      internalState,\n      isShiftPressed,\n      setIsShiftPressed,\n      lastSelected,\n    ],\n  );\n\n  return ctx;\n};\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": "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",
+  "sourcesContent": ["import { useEffect, useMemo, useRef, useState } from 'react';\nimport { useVirtual } from 'react-virtual';\nimport { columnsToGrid } from '../helpers/columnsToGrid';\nimport type { TypescriptColumn, TypescriptContext, TypescriptProps } from '../types/props';\nimport { useRowFlattenization } from './useRowFlattenization';\nimport { usePaginationConfig } from './usePaginationConfig';\nimport { useTableColsWithAddons } from './useTableColsWithAddons';\nimport { ColsLayoutStyle } from './constants';\nimport { useInternalStateConfig } from './useInternalStateConfig';\n\nconst estimateSize = () => 36;\n\nexport const useDatatableConfig = (props: TypescriptProps): TypescriptContext => {\n  const virtualListRef = useRef<HTMLDivElement>(null);\n  const columnHeaderRef = useRef<HTMLDivElement>(null);\n  const [isShiftPressed, setIsShiftPressed] = useState(false);\n  const lastSelected = useRef<number>(-1);\n\n  // ===========================================================================\n  // Column config\n  // ===========================================================================\n  const tableColsWithAddons = useTableColsWithAddons(props);\n  const visibleColumns = useMemo(\n    () =>\n      tableColsWithAddons\n        .filter((col: TypescriptColumn) => !props.hiddenColumns?.includes(col.accessor))\n        .map((col: TypescriptColumn) => {\n          if (col.columns) {\n            col.columns = col.columns.filter(\n              (subCol: TypescriptColumn) => !props.hiddenColumns?.includes(subCol.accessor),\n            );\n          }\n          return col;\n        }),\n    [props.hiddenColumns, tableColsWithAddons],\n  );\n\n  // ===========================================================================\n  // Virtualization\n  // ===========================================================================\n\n  const [dataLength, setDataLength] = useState(1);\n\n  // estimateSize should not be really required given what was stated on\n  // https://github.com/tannerlinsley/react-virtual/issues/23\n  const virtualListHelpers = useVirtual({\n    size: dataLength,\n    parentRef: virtualListRef,\n    overscan: 15,\n    paddingStart: columnHeaderRef.current?.getBoundingClientRect()?.height ?? 24,\n    estimateSize,\n  });\n\n  // ===========================================================================\n  // Action ref setup\n  // ===========================================================================\n  useEffect(() => {\n    if (props.actionRef) {\n      props.actionRef.current.scrollToIndex = virtualListHelpers.scrollToIndex;\n      props.actionRef.current.scrollToOffset = virtualListHelpers.scrollToOffset;\n    }\n  }, [props.actionRef, virtualListHelpers.scrollToIndex, virtualListHelpers.scrollToOffset]);\n\n  // ===========================================================================\n  // Data flattenization and pagination\n  // ===========================================================================\n\n  const [flattenedData, allDataFlattened] = useRowFlattenization(props);\n\n  const [paginatedData, paginationHelpers] = usePaginationConfig(props, flattenedData);\n\n  // Redo virtualization until we match the lengths\n  if (dataLength !== (paginatedData || flattenedData).length) setDataLength((paginatedData || flattenedData).length);\n\n  // ===========================================================================\n  // Layout config\n  // ===========================================================================\n\n  const [gridLayout, setGridLayout] = useState(columnsToGrid(visibleColumns, props.colsLayoutStyle));\n\n  // We need to listen and update the state based on this props\n  useEffect(() => {\n    setGridLayout(columnsToGrid(visibleColumns, props.colsLayoutStyle));\n  }, [visibleColumns, props.colsLayoutStyle]);\n\n  const totalColumnsWidth = useMemo(\n    () =>\n      props.colsLayoutStyle === ColsLayoutStyle.Fixed\n        ? gridLayout.reduce((acc: number, cur: string) => acc + Number.parseInt(cur, 10), 0)\n        : '100%',\n    [props.colsLayoutStyle, gridLayout],\n  );\n\n  const layoutHelpers = useMemo(\n    () => ({\n      gridLayout,\n      setGridLayout,\n      totalColumnsWidth,\n    }),\n    [gridLayout, setGridLayout, totalColumnsWidth],\n  );\n\n  // ===========================================================================\n  // Internal state config\n  // ===========================================================================\n\n  const internalState = useInternalStateConfig();\n\n  const ctx = useMemo(\n    () => ({\n      tableProps: props,\n      layoutHelpers,\n      paginationHelpers,\n      visibleColumns,\n      virtualListHelpers,\n      flattenedData: paginatedData || flattenedData,\n      allDataFlattened,\n      virtualListRef,\n      columnHeaderRef,\n      ...internalState,\n      isShiftPressed,\n      setIsShiftPressed,\n      lastSelected,\n    }),\n    [\n      props,\n      layoutHelpers,\n      paginationHelpers,\n      visibleColumns,\n      virtualListHelpers,\n      paginatedData,\n      flattenedData,\n      allDataFlattened,\n      virtualListRef,\n      columnHeaderRef,\n      internalState,\n      isShiftPressed,\n      setIsShiftPressed,\n      lastSelected,\n    ],\n  );\n\n  return ctx;\n};\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": "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",
   "names": []
 }

package/dist/cjs/exported-related/RowRenderer/DefaultRowContentRenderer.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/exported-related/RowRenderer/DefaultRowContentRenderer.tsx", "../../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["/* eslint-disable complexity */\n/* eslint-disable max-lines */\nimport React, { useMemo, useCallback, useLayoutEffect, useRef } from 'react';\nimport { INTERNAL_COLUMNS } from '../../addons/Columns';\nimport { DATA_TESTID } from '../../configs/constants';\nimport { Cells } from '../../parts/Cells';\nimport type { RowVariantProps } from '../../parts/RowVariants/types';\nimport { StyledCellContainer } from '../../styled';\nimport type { TypescriptRow } from '../../types/props';\nimport { DropIndicatorPosition } from '../../types/props';\n\nconst DetailsWrapper = (props) => (\n  // This can be further customized\n  // eslint-disable-next-line jsx-a11y/no-static-element-interactions\n  <div\n    data-role=\"detail-view\"\n    style={{\n      borderTop: '1px solid #EBEDF0',\n      borderBottom: '1px solid #EBEDF0',\n    }}\n    onClick={(e) => e.stopPropagation()}\n    onKeyDown={(e) => e.stopPropagation()}\n  >\n    {props.children}\n  </div>\n);\n\nconst ariaLabelMessage = (row: TypescriptRow, selected: boolean) =>\n  `Row number ${row.realIndex + 1}${row.parentIndex !== null ? `, child of row number ${row.parentIndex + 1}` : ''}. ${\n    selected ? 'Selected. ' : ''\n  }To interact with the cells press enter`;\n\nexport const DefaultRowContentRenderer: React.ComponentType<RowVariantProps> = (props) => {\n  const {\n    row,\n    ctx: {\n      tableProps: { isExpandable, colsLayoutStyle, selection, noSelectionColumn, expandedRows, disabledRows },\n      layoutHelpers: { gridLayout },\n      visibleColumns,\n    },\n    draggableProps,\n    isDragOverlay,\n    backgroundColor = 'white',\n    dropIndicatorPosition,\n    isDropValid,\n    focusedRowId,\n    drilldownRowId,\n    compact,\n  } = props;\n\n  const rowRef = useRef<HTMLDivElement>(null);\n  const isDndActive = draggableProps && draggableProps.active;\n  const isDragging = draggableProps && draggableProps.isDragging;\n\n  useLayoutEffect(() => {\n    if (row.uid === focusedRowId) {\n      rowRef.current?.focus();\n    }\n  }, [focusedRowId, row.uid]);\n\n  const gridTemplateColProps = useMemo(\n    () => ({\n      cols: isDragOverlay ? ['24px', 'auto'] : gridLayout,\n      isExpandable,\n      colLayoutStyle: colsLayoutStyle,\n    }),\n    [isDragOverlay, gridLayout, colsLayoutStyle, isExpandable],\n  );\n\n  const detailsIndent = useMemo(() => {\n    let padding = 0;\n    for (let i = 0; i < visibleColumns.length; i += 1) {\n      if (INTERNAL_COLUMNS.includes(visibleColumns[i].id)) {\n        padding += visibleColumns[i].width;\n      } else {\n        padding += row.depth * 32 + 15;\n        break;\n      }\n    }\n    return padding;\n  }, [row.depth, visibleColumns]);\n\n  const DetailsView = row.original.tableRowDetails;\n\n  return (\n    <>\n      <StyledCellContainer\n        ref={rowRef}\n        key={row.uid}\n        tabIndex={0}\n        role=\"row\"\n        aria-rowindex={row.realIndex + 1}\n        aria-label={ariaLabelMessage(row, selection?.[row.uid] === true)}\n        aria-selected={selection?.[row.uid] === true}\n        aria-expanded={isExpandable ? expandedRows[row.uid] === true : undefined}\n        aria-disabled={disabledRows[row.uid]}\n        {...gridTemplateColProps}\n        backgroundColor={backgroundColor}\n        height={compact ? '24px' : 'auto'}\n        minHeight={compact ? '24px' : '36px'}\n        isDropIndicatorPositionInside={dropIndicatorPosition === DropIndicatorPosition.Inside}\n        isDropValid={isDropValid}\n        shouldDisplayHover={!isDndActive && !isDragging && !isDragOverlay}\n        isDragOverlay={isDragOverlay}\n        isDragging={isDragging}\n        selected={noSelectionColumn && selection?.[row.uid] === true}\n        isDisabled={disabledRows[row.uid]}\n        data-testid={DATA_TESTID.DATA_TABLE_ROW_CONTENT}\n      >\n        <Cells row={row} isRowSelected={drilldownRowId === row.uid} isDragOverlay={isDragOverlay} key={row.uid} />\n      </StyledCellContainer>\n      {!isDragOverlay && isExpandable && row.isExpanded && DetailsView && (\n        <DetailsWrapper>\n          <DetailsView row={row} detailsIndent={detailsIndent} />\n        </DetailsWrapper>\n      )}\n    </>\n  );\n};\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": "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",
+  "sourcesContent": ["/* eslint-disable complexity */\n/* eslint-disable max-lines */\nimport React, { useMemo, useLayoutEffect, useRef } from 'react';\nimport { INTERNAL_COLUMNS } from '../../addons/Columns';\nimport { DATA_TESTID } from '../../configs/constants';\nimport { Cells } from '../../parts/Cells';\nimport type { RowVariantProps } from '../../parts/RowVariants/types';\nimport { StyledCellContainer } from '../../styled';\nimport type { TypescriptRow } from '../../types/props';\nimport { DropIndicatorPosition } from '../../types/props';\n\nconst DetailsWrapper = (props) => (\n  // This can be further customized\n  // eslint-disable-next-line jsx-a11y/no-static-element-interactions\n  <div\n    data-role=\"detail-view\"\n    style={{\n      borderTop: '1px solid #EBEDF0',\n      borderBottom: '1px solid #EBEDF0',\n    }}\n    onClick={(e) => e.stopPropagation()}\n    onKeyDown={(e) => e.stopPropagation()}\n  >\n    {props.children}\n  </div>\n);\n\nconst ariaLabelMessage = (row: TypescriptRow, selected: boolean) =>\n  `Row number ${row.realIndex + 1}${row.parentIndex !== null ? `, child of row number ${row.parentIndex + 1}` : ''}. ${\n    selected ? 'Selected. ' : ''\n  }To interact with the cells press enter`;\n\nexport const DefaultRowContentRenderer: React.ComponentType<RowVariantProps> = (props) => {\n  const {\n    row,\n    ctx: {\n      tableProps: { isExpandable, colsLayoutStyle, selection, noSelectionColumn, expandedRows, disabledRows },\n      layoutHelpers: { gridLayout },\n      visibleColumns,\n    },\n    draggableProps,\n    isDragOverlay,\n    backgroundColor = 'white',\n    dropIndicatorPosition,\n    isDropValid,\n    focusedRowId,\n    drilldownRowId,\n    compact,\n  } = props;\n\n  const rowRef = useRef<HTMLDivElement>(null);\n  const isDndActive = draggableProps && draggableProps.active;\n  const isDragging = draggableProps && draggableProps.isDragging;\n\n  useLayoutEffect(() => {\n    if (row.uid === focusedRowId) {\n      rowRef.current?.focus();\n    }\n  }, [focusedRowId, row.uid]);\n\n  const gridTemplateColProps = useMemo(\n    () => ({\n      cols: isDragOverlay ? ['24px', 'auto'] : gridLayout,\n      isExpandable,\n      colLayoutStyle: colsLayoutStyle,\n    }),\n    [isDragOverlay, gridLayout, colsLayoutStyle, isExpandable],\n  );\n\n  const detailsIndent = useMemo(() => {\n    let padding = 0;\n    for (let i = 0; i < visibleColumns.length; i += 1) {\n      if (INTERNAL_COLUMNS.includes(visibleColumns[i].id)) {\n        padding += visibleColumns[i].width;\n      } else {\n        padding += row.depth * 32 + 15;\n        break;\n      }\n    }\n    return padding;\n  }, [row.depth, visibleColumns]);\n\n  const DetailsView = row.original.tableRowDetails;\n\n  return (\n    <>\n      <StyledCellContainer\n        ref={rowRef}\n        key={row.uid}\n        tabIndex={0}\n        role=\"row\"\n        aria-rowindex={row.realIndex + 1}\n        aria-label={ariaLabelMessage(row, selection?.[row.uid] === true)}\n        aria-selected={selection?.[row.uid] === true}\n        aria-expanded={isExpandable ? expandedRows[row.uid] === true : undefined}\n        aria-disabled={disabledRows[row.uid]}\n        {...gridTemplateColProps}\n        backgroundColor={backgroundColor}\n        height={compact ? '24px' : 'auto'}\n        minHeight={compact ? '24px' : '36px'}\n        isDropIndicatorPositionInside={dropIndicatorPosition === DropIndicatorPosition.Inside}\n        isDropValid={isDropValid}\n        shouldDisplayHover={!isDndActive && !isDragging && !isDragOverlay}\n        isDragOverlay={isDragOverlay}\n        isDragging={isDragging}\n        selected={noSelectionColumn && selection?.[row.uid] === true}\n        isDisabled={disabledRows[row.uid]}\n        data-testid={DATA_TESTID.DATA_TABLE_ROW_CONTENT}\n      >\n        <Cells row={row} isRowSelected={drilldownRowId === row.uid} isDragOverlay={isDragOverlay} key={row.uid} />\n      </StyledCellContainer>\n      {!isDragOverlay && isExpandable && row.isExpanded && DetailsView && (\n        <DetailsWrapper>\n          <DetailsView row={row} detailsIndent={detailsIndent} />\n        </DetailsWrapper>\n      )}\n    </>\n  );\n};\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADcrB;AAZF,mBAAwD;AACxD,qBAAiC;AACjC,uBAA4B;AAC5B,mBAAsB;AAEtB,oBAAoC;AAEpC,mBAAsC;AAEtC,MAAM,iBAAiB,CAAC,UAGtB;AAAA,EAAC;AAAA;AAAA,IACC,aAAU;AAAA,IACV,OAAO;AAAA,MACL,WAAW;AAAA,MACX,cAAc;AAAA,IAChB;AAAA,IACA,SAAS,CAAC,MAAM,EAAE,gBAAgB;AAAA,IAClC,WAAW,CAAC,MAAM,EAAE,gBAAgB;AAAA,IAEnC,gBAAM;AAAA;AACT;AAGF,MAAM,mBAAmB,CAAC,KAAoB,aAC5C,cAAc,IAAI,YAAY,IAAI,IAAI,gBAAgB,OAAO,yBAAyB,IAAI,cAAc,MAAM,OAC5G,WAAW,eAAe;AAGvB,MAAM,4BAAkE,CAAC,UAAU;AACxF,QAAM;AAAA,IACJ;AAAA,IACA,KAAK;AAAA,MACH,YAAY,EAAE,cAAc,iBAAiB,WAAW,mBAAmB,cAAc,aAAa;AAAA,MACtG,eAAe,EAAE,WAAW;AAAA,MAC5B;AAAA,IACF;AAAA,IACA;AAAA,IACA;AAAA,IACA,kBAAkB;AAAA,IAClB;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,IAAI;AAEJ,QAAM,aAAS,qBAAuB,IAAI;AAC1C,QAAM,cAAc,kBAAkB,eAAe;AACrD,QAAM,aAAa,kBAAkB,eAAe;AAEpD,oCAAgB,MAAM;AACpB,QAAI,IAAI,QAAQ,cAAc;AAC5B,aAAO,SAAS,MAAM;AAAA,IACxB;AAAA,EACF,GAAG,CAAC,cAAc,IAAI,GAAG,CAAC;AAE1B,QAAM,2BAAuB;AAAA,IAC3B,OAAO;AAAA,MACL,MAAM,gBAAgB,CAAC,QAAQ,MAAM,IAAI;AAAA,MACzC;AAAA,MACA,gBAAgB;AAAA,IAClB;AAAA,IACA,CAAC,eAAe,YAAY,iBAAiB,YAAY;AAAA,EAC3D;AAEA,QAAM,oBAAgB,sBAAQ,MAAM;AAClC,QAAI,UAAU;AACd,aAAS,IAAI,GAAG,IAAI,eAAe,QAAQ,KAAK,GAAG;AACjD,UAAI,gCAAiB,SAAS,eAAe,GAAG,EAAE,GAAG;AACnD,mBAAW,eAAe,GAAG;AAAA,MAC/B,OAAO;AACL,mBAAW,IAAI,QAAQ,KAAK;AAC5B;AAAA,MACF;AAAA,IACF;AACA,WAAO;AAAA,EACT,GAAG,CAAC,IAAI,OAAO,cAAc,CAAC;AAE9B,QAAM,cAAc,IAAI,SAAS;AAEjC,SACE,4EACE;AAAA;AAAA,MAAC;AAAA;AAAA,QACC,KAAK;AAAA,QAEL,UAAU;AAAA,QACV,MAAK;AAAA,QACL,iBAAe,IAAI,YAAY;AAAA,QAC/B,cAAY,iBAAiB,KAAK,YAAY,IAAI,SAAS,IAAI;AAAA,QAC/D,iBAAe,YAAY,IAAI,SAAS;AAAA,QACxC,iBAAe,eAAe,aAAa,IAAI,SAAS,OAAO;AAAA,QAC/D,iBAAe,aAAa,IAAI;AAAA,QAC/B,GAAG;AAAA,QACJ;AAAA,QACA,QAAQ,UAAU,SAAS;AAAA,QAC3B,WAAW,UAAU,SAAS;AAAA,QAC9B,+BAA+B,0BAA0B,mCAAsB;AAAA,QAC/E;AAAA,QACA,oBAAoB,CAAC,eAAe,CAAC,cAAc,CAAC;AAAA,QACpD;AAAA,QACA;AAAA,QACA,UAAU,qBAAqB,YAAY,IAAI,SAAS;AAAA,QACxD,YAAY,aAAa,IAAI;AAAA,QAC7B,eAAa,6BAAY;AAAA,QAEzB,sDAAC,sBAAM,KAAU,eAAe,mBAAmB,IAAI,KAAK,iBAAmC,IAAI,GAAK;AAAA;AAAA,MArBnG,IAAI;AAAA,IAsBX;AAAA,IACC,CAAC,iBAAiB,gBAAgB,IAAI,cAAc,eACnD,4CAAC,kBACC,sDAAC,eAAY,KAAU,eAA8B,GACvD;AAAA,KAEJ;AAEJ;",
   "names": []
 }

package/dist/cjs/exported-related/RowRenderer/useRowStyle.js

@@ -51,7 +51,6 @@ const useRowStyle = (row) => {
   }, [row, flattenedData]);
   const rowStyle = (0, import_react.useMemo)(() => ({ borderTop, borderBottom }), [borderTop, borderBottom]);
   const dropIndicatorPosition = draggableProps && draggableProps.shouldShowDropIndicatorPosition && draggableProps.dropIndicatorPosition;
-  console.log(draggableProps, "draggableProps");
   const isDropValid = draggableProps && draggableProps.isDropValid;
   return {
     rowStyle,

package/dist/cjs/exported-related/RowRenderer/useRowStyle.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/exported-related/RowRenderer/useRowStyle.tsx", "../../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["import { useContext, useMemo } from 'react';\nimport DataTableContext from '../../DataTableContext';\nimport { SortableItemContext } from '../../parts/HoC/SortableItemContext';\nimport type { InternalTypescriptRow, DropIndicatorPosition } from '../../types/props';\n\nexport const useRowStyle = (\n  row: InternalTypescriptRow,\n): {\n  rowStyle: Record<string, unknown>;\n  shouldAppendDottedBorder: boolean;\n  dropIndicatorPosition: false | DropIndicatorPosition;\n  isDropValid: boolean;\n} => {\n  const { flattenedData } = useContext(DataTableContext);\n\n  const { draggableProps } = useContext(SortableItemContext);\n\n  // ---------------------------------------------------------------------------\n  // Border calculation\n  // ---------------------------------------------------------------------------\n  const [borderTop, borderBottom, shouldAppendDottedBorder]: [string, string, boolean] = useMemo(() => {\n    if (row.original.dimsumHeaderValue) {\n      return ['none', 'none', false];\n    }\n    if (row.isExpanded && row.original.subRows && row.depth === 0) {\n      return ['1px solid #EBEDF0', 'none', true];\n    }\n\n    if (row.depth >= 1) {\n      if (row.realIndex < flattenedData.length - 1 && flattenedData[row.realIndex + 1].depth === 0) {\n        return ['none', '2px solid #EBEDF0', false];\n      }\n      return ['none', 'none', true];\n    }\n\n    return ['none', '1px solid #EBEDF0', false];\n  }, [row, flattenedData]);\n\n  const rowStyle = useMemo(() => ({ borderTop, borderBottom }), [borderTop, borderBottom]);\n\n  const dropIndicatorPosition =\n    draggableProps && draggableProps.shouldShowDropIndicatorPosition && draggableProps.dropIndicatorPosition;\n  console.log(draggableProps, 'draggableProps');\n  const isDropValid = draggableProps && draggableProps.isDropValid;\n\n  return {\n    rowStyle,\n    shouldAppendDottedBorder,\n    dropIndicatorPosition,\n    isDropValid,\n  };\n};\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,mBAAoC;AACpC,8BAA6B;AAC7B,iCAAoC;AAG7B,MAAM,cAAc,CACzB,QAMG;AACH,QAAM,EAAE,cAAc,QAAI,yBAAW,wBAAAA,OAAgB;AAErD,QAAM,EAAE,eAAe,QAAI,yBAAW,8CAAmB;AAKzD,QAAM,CAAC,WAAW,cAAc,wBAAwB,QAA+B,sBAAQ,MAAM;AACnG,QAAI,IAAI,SAAS,mBAAmB;AAClC,aAAO,CAAC,QAAQ,QAAQ,KAAK;AAAA,IAC/B;AACA,QAAI,IAAI,cAAc,IAAI,SAAS,WAAW,IAAI,UAAU,GAAG;AAC7D,aAAO,CAAC,qBAAqB,QAAQ,IAAI;AAAA,IAC3C;AAEA,QAAI,IAAI,SAAS,GAAG;AAClB,UAAI,IAAI,YAAY,cAAc,SAAS,KAAK,cAAc,IAAI,YAAY,GAAG,UAAU,GAAG;AAC5F,eAAO,CAAC,QAAQ,qBAAqB,KAAK;AAAA,MAC5C;AACA,aAAO,CAAC,QAAQ,QAAQ,IAAI;AAAA,IAC9B;AAEA,WAAO,CAAC,QAAQ,qBAAqB,KAAK;AAAA,EAC5C,GAAG,CAAC,KAAK,aAAa,CAAC;AAEvB,QAAM,eAAW,sBAAQ,OAAO,EAAE,WAAW,aAAa,IAAI,CAAC,WAAW,YAAY,CAAC;AAEvF,QAAM,wBACJ,kBAAkB,eAAe,mCAAmC,eAAe;AACrF,UAAQ,IAAI,gBAAgB,gBAAgB;AAC5C,QAAM,cAAc,kBAAkB,eAAe;AAErD,SAAO;AAAA,IACL;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF;AACF;",
+  "sourcesContent": ["import { useContext, useMemo } from 'react';\nimport DataTableContext from '../../DataTableContext';\nimport { SortableItemContext } from '../../parts/HoC/SortableItemContext';\nimport type { InternalTypescriptRow, DropIndicatorPosition } from '../../types/props';\n\nexport const useRowStyle = (\n  row: InternalTypescriptRow,\n): {\n  rowStyle: Record<string, unknown>;\n  shouldAppendDottedBorder: boolean;\n  dropIndicatorPosition: false | DropIndicatorPosition;\n  isDropValid: boolean;\n} => {\n  const { flattenedData } = useContext(DataTableContext);\n\n  const { draggableProps } = useContext(SortableItemContext);\n\n  // ---------------------------------------------------------------------------\n  // Border calculation\n  // ---------------------------------------------------------------------------\n  const [borderTop, borderBottom, shouldAppendDottedBorder]: [string, string, boolean] = useMemo(() => {\n    if (row.original.dimsumHeaderValue) {\n      return ['none', 'none', false];\n    }\n    if (row.isExpanded && row.original.subRows && row.depth === 0) {\n      return ['1px solid #EBEDF0', 'none', true];\n    }\n\n    if (row.depth >= 1) {\n      if (row.realIndex < flattenedData.length - 1 && flattenedData[row.realIndex + 1].depth === 0) {\n        return ['none', '2px solid #EBEDF0', false];\n      }\n      return ['none', 'none', true];\n    }\n\n    return ['none', '1px solid #EBEDF0', false];\n  }, [row, flattenedData]);\n\n  const rowStyle = useMemo(() => ({ borderTop, borderBottom }), [borderTop, borderBottom]);\n\n  const dropIndicatorPosition =\n    draggableProps && draggableProps.shouldShowDropIndicatorPosition && draggableProps.dropIndicatorPosition;\n  const isDropValid = draggableProps && draggableProps.isDropValid;\n\n  return {\n    rowStyle,\n    shouldAppendDottedBorder,\n    dropIndicatorPosition,\n    isDropValid,\n  };\n};\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,mBAAoC;AACpC,8BAA6B;AAC7B,iCAAoC;AAG7B,MAAM,cAAc,CACzB,QAMG;AACH,QAAM,EAAE,cAAc,QAAI,yBAAW,wBAAAA,OAAgB;AAErD,QAAM,EAAE,eAAe,QAAI,yBAAW,8CAAmB;AAKzD,QAAM,CAAC,WAAW,cAAc,wBAAwB,QAA+B,sBAAQ,MAAM;AACnG,QAAI,IAAI,SAAS,mBAAmB;AAClC,aAAO,CAAC,QAAQ,QAAQ,KAAK;AAAA,IAC/B;AACA,QAAI,IAAI,cAAc,IAAI,SAAS,WAAW,IAAI,UAAU,GAAG;AAC7D,aAAO,CAAC,qBAAqB,QAAQ,IAAI;AAAA,IAC3C;AAEA,QAAI,IAAI,SAAS,GAAG;AAClB,UAAI,IAAI,YAAY,cAAc,SAAS,KAAK,cAAc,IAAI,YAAY,GAAG,UAAU,GAAG;AAC5F,eAAO,CAAC,QAAQ,qBAAqB,KAAK;AAAA,MAC5C;AACA,aAAO,CAAC,QAAQ,QAAQ,IAAI;AAAA,IAC9B;AAEA,WAAO,CAAC,QAAQ,qBAAqB,KAAK;AAAA,EAC5C,GAAG,CAAC,KAAK,aAAa,CAAC;AAEvB,QAAM,eAAW,sBAAQ,OAAO,EAAE,WAAW,aAAa,IAAI,CAAC,WAAW,YAAY,CAAC;AAEvF,QAAM,wBACJ,kBAAkB,eAAe,mCAAmC,eAAe;AACrF,QAAM,cAAc,kBAAkB,eAAe;AAErD,SAAO;AAAA,IACL;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF;AACF;",
   "names": ["DataTableContext"]
 }

package/dist/cjs/exported-related/Toolbar/Toolbar.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/exported-related/Toolbar/Toolbar.tsx", "../../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["import React, { useCallback, useRef, useState } from 'react';\nimport { styled, css } from '@elliemae/ds-system';\nimport { DSButtonV2 } from '@elliemae/ds-button';\nimport { MoreOptionsVert } from '@elliemae/ds-icons';\nimport { useOnClickOutside, mergeRefs } from '@elliemae/ds-utilities';\nimport { DATA_TESTID } from '../../configs/constants';\nimport type { TypescriptCell } from '../../types/props';\n\nconst ToolbarBtns = styled.div`\n  & > .em-ds-toolbar {\n    box-shadow: none;\n  }\n`;\n\nconst boxShadow = css`\n  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.13), 0 1px 2px 0 rgba(0, 0, 0, 0.2);\n  & > .toolbar-trigger {\n    border: none;\n  }\n`;\nconst ToolbarWrapper = styled.div<{ isOpen: boolean }>`\n  display: flex;\n  align-items: center;\n  height: 36px;\n  margin-right: 1px;\n  pointer-events: all;\n\n  ${({ isOpen }) => isOpen && boxShadow}\n\n  & .toolbar-trigger:focus {\n    z-index: 8;\n  }\n`;\n\nconst StyledButton = styled(DSButtonV2)`\n  background-color: transparent;\n`;\n\nconst ToolbarPosition = styled.div`\n  display: flex;\n  justify-content: flex-end;\n  align-items: center;\n  pointer-events: none;\n  background: transparent;\n  height: 28px;\n  margin-top: 4px;\n  width: 100%;\n  padding-left: 4px;\n  outline: none;\n  &:hover {\n    z-index: 1;\n  }\n  :after {\n    content: '';\n    position: absolute;\n    left: 0px;\n    top: 4px;\n    bottom: 4px;\n    width: 1px;\n    background-color: neutral-080;\n    z-index: 7;\n  }\n`;\n\ninterface ToolbarProps {\n  isRowSelected?: boolean;\n  cell: TypescriptCell;\n  children: React.ReactNode;\n}\n\nexport const Toolbar: React.ComponentType<ToolbarProps> = ({ isRowSelected, cell, children }) => {\n  const [show, setShow] = useState(false);\n\n  const toolbarRef = useRef<HTMLButtonElement>(null);\n  const toolbarTriggerRef = useRef<HTMLButtonElement | null>(null);\n\n  const handleOnClickOutside = useCallback(() => setShow(false), []);\n\n  const handleOnClick: React.MouseEventHandler = useCallback(() => setShow((prev) => !prev), []);\n\n  const stopPropagation: React.MouseEventHandler = useCallback((e) => e.stopPropagation(), [])\n\n  useOnClickOutside(toolbarRef, handleOnClickOutside);\n\n  const onToolbarKeyDown = useCallback((e: React.KeyboardEvent) => {\n    if (e.code === 'Escape') {\n      setShow(false);\n      toolbarTriggerRef.current?.focus();\n    }\n    e.stopPropagation();\n  }, []);\n\n  const handleOnBlurToolBar = useCallback(() => {\n    setTimeout(() => {\n      if (!toolbarRef?.current?.contains?.(document.activeElement)) {\n        setShow(false);\n      }\n    });\n  }, []);\n\n  return (\n    <ToolbarPosition onBlur={handleOnBlurToolBar} ref={toolbarRef} tabIndex={-1}>\n      <ToolbarWrapper onKeyDown={onToolbarKeyDown} onClick={stopPropagation} isOpen={show}>\n        {show && <ToolbarBtns>{children}</ToolbarBtns>}\n        <StyledButton\n          buttonType=\"icon\"\n          className=\"toolbar-trigger\"\n          data-testid={DATA_TESTID.DATA_TABLE_TOOLBAR_TRIGGER}\n          innerRef={mergeRefs(toolbarTriggerRef, cell?.ref)}\n          onClick={handleOnClick}\n          tabIndex={isRowSelected === false ? -1 : 0}\n          aria-label=\"Row actions\"\n        >\n          <MoreOptionsVert />\n        </StyledButton>\n      </ToolbarWrapper>\n    </ToolbarPosition>\n  );\n};\n", "import * as React from 'react';\nexport { React };\n"],
+  "sourcesContent": ["import React, { useCallback, useRef, useState } from 'react';\nimport { styled, css } from '@elliemae/ds-system';\nimport { DSButtonV2 } from '@elliemae/ds-button';\nimport { MoreOptionsVert } from '@elliemae/ds-icons';\nimport { useOnClickOutside, mergeRefs } from '@elliemae/ds-utilities';\nimport { DATA_TESTID } from '../../configs/constants';\nimport type { TypescriptCell } from '../../types/props';\n\nconst ToolbarBtns = styled.div`\n  & > .em-ds-toolbar {\n    box-shadow: none;\n  }\n`;\n\nconst boxShadow = css`\n  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.13), 0 1px 2px 0 rgba(0, 0, 0, 0.2);\n  & > .toolbar-trigger {\n    border: none;\n  }\n`;\nconst ToolbarWrapper = styled.div<{ isOpen: boolean }>`\n  display: flex;\n  align-items: center;\n  height: 36px;\n  margin-right: 1px;\n  pointer-events: all;\n\n  ${({ isOpen }) => isOpen && boxShadow}\n\n  & .toolbar-trigger:focus {\n    z-index: 8;\n  }\n`;\n\nconst StyledButton = styled(DSButtonV2)`\n  background-color: transparent;\n`;\n\nconst ToolbarPosition = styled.div`\n  display: flex;\n  justify-content: flex-end;\n  align-items: center;\n  pointer-events: none;\n  background: transparent;\n  height: 28px;\n  margin-top: 4px;\n  width: 100%;\n  padding-left: 4px;\n  outline: none;\n  &:hover {\n    z-index: 1;\n  }\n  :after {\n    content: '';\n    position: absolute;\n    left: 0px;\n    top: 4px;\n    bottom: 4px;\n    width: 1px;\n    background-color: neutral-080;\n    z-index: 7;\n  }\n`;\n\ninterface ToolbarProps {\n  isRowSelected?: boolean;\n  cell: TypescriptCell;\n  children: React.ReactNode;\n}\n\nexport const Toolbar: React.ComponentType<ToolbarProps> = ({ isRowSelected, cell, children }) => {\n  const [show, setShow] = useState(false);\n\n  const toolbarRef = useRef<HTMLButtonElement>(null);\n  const toolbarTriggerRef = useRef<HTMLButtonElement | null>(null);\n\n  const handleOnClickOutside = useCallback(() => setShow(false), []);\n\n  const handleOnClick: React.MouseEventHandler = useCallback(() => setShow((prev) => !prev), []);\n\n  const stopPropagation: React.MouseEventHandler = useCallback((e) => e.stopPropagation(), []);\n\n  useOnClickOutside(toolbarRef, handleOnClickOutside);\n\n  const onToolbarKeyDown = useCallback((e: React.KeyboardEvent) => {\n    if (e.code === 'Escape') {\n      setShow(false);\n      toolbarTriggerRef.current?.focus();\n    }\n    e.stopPropagation();\n  }, []);\n\n  const handleOnBlurToolBar = useCallback(() => {\n    setTimeout(() => {\n      if (!toolbarRef?.current?.contains?.(document.activeElement)) {\n        setShow(false);\n      }\n    });\n  }, []);\n\n  return (\n    <ToolbarPosition onBlur={handleOnBlurToolBar} ref={toolbarRef} tabIndex={-1}>\n      <ToolbarWrapper onKeyDown={onToolbarKeyDown} onClick={stopPropagation} isOpen={show}>\n        {show && <ToolbarBtns>{children}</ToolbarBtns>}\n        <StyledButton\n          buttonType=\"icon\"\n          className=\"toolbar-trigger\"\n          data-testid={DATA_TESTID.DATA_TABLE_TOOLBAR_TRIGGER}\n          innerRef={mergeRefs(toolbarTriggerRef, cell?.ref)}\n          onClick={handleOnClick}\n          tabIndex={isRowSelected === false ? -1 : 0}\n          aria-label=\"Row actions\"\n        >\n          <MoreOptionsVert />\n        </StyledButton>\n      </ToolbarWrapper>\n    </ToolbarPosition>\n  );\n};\n", "import * as React from 'react';\nexport { React };\n"],
   "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADsGjB;AAtGN,mBAAqD;AACrD,uBAA4B;AAC5B,uBAA2B;AAC3B,sBAAgC;AAChC,0BAA6C;AAC7C,uBAA4B;AAG5B,MAAM,cAAc,wBAAO;AAAA;AAAA;AAAA;AAAA;AAM3B,MAAM,YAAY;AAAA;AAAA;AAAA;AAAA;AAAA;AAMlB,MAAM,iBAAiB,wBAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAO1B,CAAC,EAAE,OAAO,MAAM,UAAU;AAAA;AAAA;AAAA;AAAA;AAAA;AAO9B,MAAM,mBAAe,yBAAO,2BAAU;AAAA;AAAA;AAItC,MAAM,kBAAkB,wBAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAgCxB,MAAM,UAA6C,CAAC,EAAE,eAAe,MAAM,SAAS,MAAM;AAC/F,QAAM,CAAC,MAAM,OAAO,QAAI,uBAAS,KAAK;AAEtC,QAAM,iBAAa,qBAA0B,IAAI;AACjD,QAAM,wBAAoB,qBAAiC,IAAI;AAE/D,QAAM,2BAAuB,0BAAY,MAAM,QAAQ,KAAK,GAAG,CAAC,CAAC;AAEjE,QAAM,oBAAyC,0BAAY,MAAM,QAAQ,CAAC,SAAS,CAAC,IAAI,GAAG,CAAC,CAAC;AAE7F,QAAM,sBAA2C,0BAAY,CAAC,MAAM,EAAE,gBAAgB,GAAG,CAAC,CAAC;AAE3F,6CAAkB,YAAY,oBAAoB;AAElD,QAAM,uBAAmB,0BAAY,CAAC,MAA2B;AAC/D,QAAI,EAAE,SAAS,UAAU;AACvB,cAAQ,KAAK;AACb,wBAAkB,SAAS,MAAM;AAAA,IACnC;AACA,MAAE,gBAAgB;AAAA,EACpB,GAAG,CAAC,CAAC;AAEL,QAAM,0BAAsB,0BAAY,MAAM;AAC5C,eAAW,MAAM;AACf,UAAI,CAAC,YAAY,SAAS,WAAW,SAAS,aAAa,GAAG;AAC5D,gBAAQ,KAAK;AAAA,MACf;AAAA,IACF,CAAC;AAAA,EACH,GAAG,CAAC,CAAC;AAEL,SACE,4CAAC,mBAAgB,QAAQ,qBAAqB,KAAK,YAAY,UAAU,IACvE,uDAAC,kBAAe,WAAW,kBAAkB,SAAS,iBAAiB,QAAQ,MAC5E;AAAA,YAAQ,4CAAC,eAAa,UAAS;AAAA,IAChC;AAAA,MAAC;AAAA;AAAA,QACC,YAAW;AAAA,QACX,WAAU;AAAA,QACV,eAAa,6BAAY;AAAA,QACzB,cAAU,+BAAU,mBAAmB,MAAM,GAAG;AAAA,QAChD,SAAS;AAAA,QACT,UAAU,kBAAkB,QAAQ,KAAK;AAAA,QACzC,cAAW;AAAA,QAEX,sDAAC,mCAAgB;AAAA;AAAA,IACnB;AAAA,KACF,GACF;AAEJ;",
   "names": []
 }

package/dist/cjs/parts/Row.js

@@ -32,20 +32,12 @@ module.exports = __toCommonJS(Row_exports);
 var React = __toESM(require("react"));
 var import_jsx_runtime = require("react/jsx-runtime");
 var import_react = require("react");
+var import_ds_utilities = require("@elliemae/ds-utilities");
 var import_ds_system = require("@elliemae/ds-system");
 var import_DataTableContext = __toESM(require("../DataTableContext"));
-var import_helpers = require("../helpers");
 var import_SortableItemContext = require("./HoC/SortableItemContext");
 var import_withDnDSortableRowContext = require("./HoC/withDnDSortableRowContext");
 var import_RowVariants = require("./RowVariants");
-const setItemRefs = (measureRef, draggableRef, ref) => {
-  const refsToSet = [];
-  if (measureRef)
-    refsToSet.push(measureRef);
-  if (draggableRef)
-    refsToSet.push(draggableRef);
-  (0, import_helpers.setMultipleRefs)(...refsToSet)(ref);
-};
 const StyledRow = (0, import_ds_system.styled)("div")`
   cursor: ${({ isDisabled }) => isDisabled ? "not-allowed" : "normal"};
 `;
@@ -64,7 +56,7 @@ const Row = (props) => {
     {
       isDisabled: disabledRows[row.uid],
       style: !isDragOverlay ? itemWrapperStyle : {},
-      ref: (ref) => setItemRefs(measureRef, draggableRef, ref),
+      ref: (0, import_ds_utilities.mergeRefs)(measureRef, draggableRef),
       children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
         import_RowVariants.RowVariantMapItem,
         {

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/parts/Row.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["import React, { useContext } from 'react';\nimport { styled } from '@elliemae/ds-system';\nimport DataTableContext from '../DataTableContext';\nimport { setMultipleRefs } from '../helpers';\nimport { SortableItemContext } from './HoC/SortableItemContext';\nimport { withDnDSortableRowContext } from './HoC/withDnDSortableRowContext';\nimport { RowVariantMapItem } from './RowVariants';\n\n// Sortable Items needs to update\n//   - the virtual list ref (for react-virtual requirement)\n//   - (conditionally) draggableProps.setNodeRef for drag and drop of rows\nconst setItemRefs = (measureRef, draggableRef, ref) => {\n  const refsToSet = [];\n  if (measureRef) refsToSet.push(measureRef);\n  if (draggableRef) refsToSet.push(draggableRef);\n  setMultipleRefs(...refsToSet)(ref);\n};\n\nconst StyledRow = styled('div')`\n  cursor: ${({ isDisabled }) => (isDisabled ? 'not-allowed' : 'normal')};\n`;\n\nexport const Row = (props) => {\n  const { row, measureRef, itemWrapperStyle, isDragOverlay } = props;\n  const ctx = useContext(DataTableContext);\n  const {\n    tableProps: { disabledRows },\n    focusedRowId,\n    drilldownRowId,\n  } = ctx;\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      ref={(ref) => setItemRefs(measureRef, draggableRef, ref)}\n    >\n      <RowVariantMapItem\n        row={row}\n        itemIndex={row.realIndex}\n        isDragOverlay={isDragOverlay}\n        ctx={ctx}\n        focusedRowId={focusedRowId}\n        drilldownRowId={drilldownRowId}\n      />\n    </StyledRow>\n  );\n};\n\nconst RowWithContext = withDnDSortableRowContext(Row);\nexport { RowWithContext };\nexport default RowWithContext;\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADuCjB;AAvCN,mBAAkC;AAClC,uBAAuB;AACvB,8BAA6B;AAC7B,qBAAgC;AAChC,iCAAoC;AACpC,uCAA0C;AAC1C,yBAAkC;AAKlC,MAAM,cAAc,CAAC,YAAY,cAAc,QAAQ;AACrD,QAAM,YAAY,CAAC;AACnB,MAAI;AAAY,cAAU,KAAK,UAAU;AACzC,MAAI;AAAc,cAAU,KAAK,YAAY;AAC7C,sCAAgB,GAAG,SAAS,EAAE,GAAG;AACnC;AAEA,MAAM,gBAAY,yBAAO,KAAK;AAAA,YAClB,CAAC,EAAE,WAAW,MAAO,aAAa,gBAAgB;AAAA;AAGvD,MAAM,MAAM,CAAC,UAAU;AAC5B,QAAM,EAAE,KAAK,YAAY,kBAAkB,cAAc,IAAI;AAC7D,QAAM,UAAM,yBAAW,wBAAAA,OAAgB;AACvC,QAAM;AAAA,IACJ,YAAY,EAAE,aAAa;AAAA,IAC3B;AAAA,IACA;AAAA,EACF,IAAI;AAEJ,QAAM,EAAE,eAAe,QAAI,yBAAW,8CAAmB;AACzD,QAAM,eAAe,kBAAkB,eAAe;AACtD,SACE;AAAA,IAAC;AAAA;AAAA,MACC,YAAY,aAAa,IAAI;AAAA,MAC7B,OAAO,CAAC,gBAAgB,mBAAmB,CAAC;AAAA,MAC5C,KAAK,CAAC,QAAQ,YAAY,YAAY,cAAc,GAAG;AAAA,MAEvD;AAAA,QAAC;AAAA;AAAA,UACC;AAAA,UACA,WAAW,IAAI;AAAA,UACf;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA;AAAA,MACF;AAAA;AAAA,EACF;AAEJ;AAEA,MAAM,qBAAiB,4DAA0B,GAAG;AAEpD,IAAO,cAAQ;",
+  "sourcesContent": ["import React, { useContext } from 'react';\nimport { mergeRefs } from '@elliemae/ds-utilities';\nimport { styled } from '@elliemae/ds-system';\nimport DataTableContext from '../DataTableContext';\nimport { SortableItemContext } from './HoC/SortableItemContext';\nimport { withDnDSortableRowContext } from './HoC/withDnDSortableRowContext';\nimport { RowVariantMapItem } from './RowVariants';\n\nconst StyledRow = styled('div')`\n  cursor: ${({ isDisabled }) => (isDisabled ? 'not-allowed' : 'normal')};\n`;\n\nexport const Row = (props) => {\n  const { row, measureRef, itemWrapperStyle, isDragOverlay } = props;\n  const ctx = useContext(DataTableContext);\n  const {\n    tableProps: { disabledRows },\n    focusedRowId,\n    drilldownRowId,\n  } = ctx;\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      ref={mergeRefs(measureRef, draggableRef)}\n    >\n      <RowVariantMapItem\n        row={row}\n        itemIndex={row.realIndex}\n        isDragOverlay={isDragOverlay}\n        ctx={ctx}\n        focusedRowId={focusedRowId}\n        drilldownRowId={drilldownRowId}\n      />\n    </StyledRow>\n  );\n};\n\nconst RowWithContext = withDnDSortableRowContext(Row);\nexport { RowWithContext };\nexport default RowWithContext;\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;AD6BjB;AA7BN,mBAAkC;AAClC,0BAA0B;AAC1B,uBAAuB;AACvB,8BAA6B;AAC7B,iCAAoC;AACpC,uCAA0C;AAC1C,yBAAkC;AAElC,MAAM,gBAAY,yBAAO,KAAK;AAAA,YAClB,CAAC,EAAE,WAAW,MAAO,aAAa,gBAAgB;AAAA;AAGvD,MAAM,MAAM,CAAC,UAAU;AAC5B,QAAM,EAAE,KAAK,YAAY,kBAAkB,cAAc,IAAI;AAC7D,QAAM,UAAM,yBAAW,wBAAAA,OAAgB;AACvC,QAAM;AAAA,IACJ,YAAY,EAAE,aAAa;AAAA,IAC3B;AAAA,IACA;AAAA,EACF,IAAI;AAEJ,QAAM,EAAE,eAAe,QAAI,yBAAW,8CAAmB;AACzD,QAAM,eAAe,kBAAkB,eAAe;AACtD,SACE;AAAA,IAAC;AAAA;AAAA,MACC,YAAY,aAAa,IAAI;AAAA,MAC7B,OAAO,CAAC,gBAAgB,mBAAmB,CAAC;AAAA,MAC5C,SAAK,+BAAU,YAAY,YAAY;AAAA,MAEvC;AAAA,QAAC;AAAA;AAAA,UACC;AAAA,UACA,WAAW,IAAI;AAAA,UACf;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA;AAAA,MACF;AAAA;AAAA,EACF;AAEJ;AAEA,MAAM,qBAAiB,4DAA0B,GAAG;AAEpD,IAAO,cAAQ;",
   "names": ["DataTableContext"]
 }

package/dist/cjs/parts/Rows.js

@@ -45,32 +45,28 @@ const Rows = () => {
   } = (0, import_react.useContext)(import_DataTableContext.DataTableContext);
   const ctx = (0, import_react.useContext)(import_DnDTreeContext.DnDTreeContext);
   const items = ctx?.visibleItems || flattenedData;
-  const PureVirtualizedRows = (0, import_react.useMemo)(
-    () => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_jsx_runtime.Fragment, { children: virtualItems.map((virtualItem) => {
-      const { index, measureRef, start } = virtualItem;
-      const row = items[index];
-      if (!row)
-        return null;
-      (0, import_helpers.addCellData)(row, visibleColumns);
-      const style = {
-        position: "absolute",
-        top: `${start}px`,
-        left: 0,
-        width: totalColumnsWidth
-      };
-      const rowProps = {
-        key: `ds-table-row-${row.uid}`,
-        row,
-        measureRef,
-        index,
-        itemIndex: index,
-        itemWrapperStyle: style
-      };
-      return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Row.RowWithContext, { ...rowProps });
-    }) }),
-    [virtualItems, items, visibleColumns, totalColumnsWidth]
-  );
-  return PureVirtualizedRows;
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_jsx_runtime.Fragment, { children: virtualItems.map((virtualItem) => {
+    const { index, measureRef, start } = virtualItem;
+    const row = items[index];
+    if (!row)
+      return null;
+    (0, import_helpers.addCellData)(row, visibleColumns);
+    const style = {
+      position: "absolute",
+      top: `${start}px`,
+      left: 0,
+      width: totalColumnsWidth
+    };
+    const rowProps = {
+      key: `ds-table-row-${row.uid}`,
+      row,
+      measureRef,
+      index,
+      itemIndex: index,
+      itemWrapperStyle: style
+    };
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Row.RowWithContext, { ...rowProps });
+  }) });
 };
 Rows.propTypes = {};
 const RowsWithContext = (0, import_withConditionalDnDRowContext.withConditionalDnDRowContext)(Rows);

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/parts/Rows.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["/* eslint-disable no-underscore-dangle */\nimport React, { useContext, useMemo } from 'react';\n\nimport { RowWithContext as Row } from './Row';\nimport { DataTableContext } from '../DataTableContext';\nimport { withConditionalDnDRowContext } from './HoC/withConditionalDnDRowContext';\nimport { DnDTreeContext } from './HoC/DnDTreeContext';\nimport { addCellData } from '../helpers';\n\nconst Rows = (): JSX.Element => {\n  const {\n    virtualListHelpers: { virtualItems },\n    layoutHelpers: { totalColumnsWidth },\n    flattenedData,\n    visibleColumns,\n  } = useContext(DataTableContext);\n\n  const ctx = useContext(DnDTreeContext);\n\n  const items = ctx?.visibleItems || flattenedData;\n\n  const PureVirtualizedRows = useMemo(\n    () => (\n      <>\n        {virtualItems.map((virtualItem) => {\n          const { index, measureRef, start } = virtualItem;\n          const row = items[index];\n          if (!row) return null;\n          addCellData(row, visibleColumns);\n          const style = {\n            position: 'absolute',\n            top: `${start}px`,\n            left: 0,\n            width: totalColumnsWidth,\n          };\n          const rowProps = {\n            key: `ds-table-row-${row.uid}`,\n            row,\n            measureRef,\n            index, // this is consumed by the DnD HOC\n            itemIndex: index,\n            itemWrapperStyle: style,\n          };\n          return <Row {...rowProps} />;\n        })}\n      </>\n    ),\n    [virtualItems, items, visibleColumns, totalColumnsWidth],\n  );\n\n  return PureVirtualizedRows;\n};\n\nRows.propTypes = {};\n\nexport const RowsWithContext = withConditionalDnDRowContext(Rows);\nexport default RowsWithContext;\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADuBjB;AAtBN,mBAA2C;AAE3C,iBAAsC;AACtC,8BAAiC;AACjC,0CAA6C;AAC7C,4BAA+B;AAC/B,qBAA4B;AAE5B,MAAM,OAAO,MAAmB;AAC9B,QAAM;AAAA,IACJ,oBAAoB,EAAE,aAAa;AAAA,IACnC,eAAe,EAAE,kBAAkB;AAAA,IACnC;AAAA,IACA;AAAA,EACF,QAAI,yBAAW,wCAAgB;AAE/B,QAAM,UAAM,yBAAW,oCAAc;AAErC,QAAM,QAAQ,KAAK,gBAAgB;AAEnC,QAAM,0BAAsB;AAAA,IAC1B,MACE,2EACG,uBAAa,IAAI,CAAC,gBAAgB;AACjC,YAAM,EAAE,OAAO,YAAY,MAAM,IAAI;AACrC,YAAM,MAAM,MAAM;AAClB,UAAI,CAAC;AAAK,eAAO;AACjB,sCAAY,KAAK,cAAc;AAC/B,YAAM,QAAQ;AAAA,QACZ,UAAU;AAAA,QACV,KAAK,GAAG;AAAA,QACR,MAAM;AAAA,QACN,OAAO;AAAA,MACT;AACA,YAAM,WAAW;AAAA,QACf,KAAK,gBAAgB,IAAI;AAAA,QACzB;AAAA,QACA;AAAA,QACA;AAAA,QACA,WAAW;AAAA,QACX,kBAAkB;AAAA,MACpB;AACA,aAAO,4CAAC,WAAAA,gBAAA,EAAK,GAAG,UAAU;AAAA,IAC5B,CAAC,GACH;AAAA,IAEF,CAAC,cAAc,OAAO,gBAAgB,iBAAiB;AAAA,EACzD;AAEA,SAAO;AACT;AAEA,KAAK,YAAY,CAAC;AAEX,MAAM,sBAAkB,kEAA6B,IAAI;AAChE,IAAO,eAAQ;",
+  "sourcesContent": ["/* eslint-disable no-underscore-dangle */\nimport React, { useContext, useMemo } from 'react';\n\nimport { RowWithContext as Row } from './Row';\nimport { DataTableContext } from '../DataTableContext';\nimport { withConditionalDnDRowContext } from './HoC/withConditionalDnDRowContext';\nimport { DnDTreeContext } from './HoC/DnDTreeContext';\nimport { addCellData } from '../helpers';\n\nconst Rows = (): JSX.Element => {\n  const {\n    virtualListHelpers: { virtualItems },\n    layoutHelpers: { totalColumnsWidth },\n    flattenedData,\n    visibleColumns,\n  } = useContext(DataTableContext);\n\n  const ctx = useContext(DnDTreeContext);\n\n  const items = ctx?.visibleItems || flattenedData;\n\n  return (\n    <>\n      {virtualItems.map((virtualItem) => {\n        const { index, measureRef, start } = virtualItem;\n        const row = items[index];\n        if (!row) return null;\n        addCellData(row, visibleColumns);\n        const style = {\n          position: 'absolute',\n          top: `${start}px`,\n          left: 0,\n          width: totalColumnsWidth,\n        };\n        const rowProps = {\n          key: `ds-table-row-${row.uid}`,\n          row,\n          measureRef,\n          index, // this is consumed by the DnD HOC\n          itemIndex: index,\n          itemWrapperStyle: style,\n        };\n        return <Row {...rowProps} />;\n      })}\n    </>\n  );\n};\n\nRows.propTypes = {};\n\nexport const RowsWithContext = withConditionalDnDRowContext(Rows);\nexport default RowsWithContext;\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADsBnB;AArBJ,mBAA2C;AAE3C,iBAAsC;AACtC,8BAAiC;AACjC,0CAA6C;AAC7C,4BAA+B;AAC/B,qBAA4B;AAE5B,MAAM,OAAO,MAAmB;AAC9B,QAAM;AAAA,IACJ,oBAAoB,EAAE,aAAa;AAAA,IACnC,eAAe,EAAE,kBAAkB;AAAA,IACnC;AAAA,IACA;AAAA,EACF,QAAI,yBAAW,wCAAgB;AAE/B,QAAM,UAAM,yBAAW,oCAAc;AAErC,QAAM,QAAQ,KAAK,gBAAgB;AAEnC,SACE,2EACG,uBAAa,IAAI,CAAC,gBAAgB;AACjC,UAAM,EAAE,OAAO,YAAY,MAAM,IAAI;AACrC,UAAM,MAAM,MAAM;AAClB,QAAI,CAAC;AAAK,aAAO;AACjB,oCAAY,KAAK,cAAc;AAC/B,UAAM,QAAQ;AAAA,MACZ,UAAU;AAAA,MACV,KAAK,GAAG;AAAA,MACR,MAAM;AAAA,MACN,OAAO;AAAA,IACT;AACA,UAAM,WAAW;AAAA,MACf,KAAK,gBAAgB,IAAI;AAAA,MACzB;AAAA,MACA;AAAA,MACA;AAAA,MACA,WAAW;AAAA,MACX,kBAAkB;AAAA,IACpB;AACA,WAAO,4CAAC,WAAAA,gBAAA,EAAK,GAAG,UAAU;AAAA,EAC5B,CAAC,GACH;AAEJ;AAEA,KAAK,YAAY,CAAC;AAEX,MAAM,sBAAkB,kEAA6B,IAAI;AAChE,IAAO,eAAQ;",
   "names": ["Row"]
 }

package/dist/cjs/parts/TableContent.js

@@ -51,34 +51,30 @@ const TableContent = () => {
     [setIsShiftPressed]
   );
   const handleOnKeyUp = (0, import_react.useCallback)(() => setIsShiftPressed(false), [setIsShiftPressed]);
-  const PureTableContent = (0, import_react.useMemo)(
-    () => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
-      import_styled.StyledDataTableContentWrapper,
-      {
-        "data-testid": import_constants.DATA_TESTID.DATA_TABLE_CONTENT_WRAPPER,
-        noSelectionAllowed: isShiftPressed,
-        onKeyDown: handleOnKeyDown,
-        onKeyUp: handleOnKeyUp,
-        rows: pagination ? ["1fr", "auto"] : ["auto"],
-        cols: ["100%"],
-        children: [
-          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-            import_styled.StyledTableWrapper,
-            {
-              role: "table",
-              "aria-rowcount": allDataFlattened.length,
-              "aria-colcount": visibleColumns.length,
-              "data-testid": import_constants.DATA_TESTID.DATA_TABLE_TABLE,
-              children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_VirtualRowsList.VirtualRowsList, {})
-            }
-          ),
-          pagination ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Pagination.Pagination, {}) : null
-        ]
-      }
-    ),
-    [isShiftPressed, handleOnKeyDown, handleOnKeyUp, pagination, allDataFlattened.length, visibleColumns.length]
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+    import_styled.StyledDataTableContentWrapper,
+    {
+      "data-testid": import_constants.DATA_TESTID.DATA_TABLE_CONTENT_WRAPPER,
+      noSelectionAllowed: isShiftPressed,
+      onKeyDown: handleOnKeyDown,
+      onKeyUp: handleOnKeyUp,
+      rows: pagination ? ["1fr", "auto"] : ["auto"],
+      cols: ["100%"],
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          import_styled.StyledTableWrapper,
+          {
+            role: "table",
+            "aria-rowcount": allDataFlattened.length,
+            "aria-colcount": visibleColumns.length,
+            "data-testid": import_constants.DATA_TESTID.DATA_TABLE_TABLE,
+            children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_VirtualRowsList.VirtualRowsList, {})
+          }
+        ),
+        pagination ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Pagination.Pagination, {}) : null
+      ]
+    }
   );
-  return PureTableContent;
 };
 var TableContent_default = TableContent;
 //# sourceMappingURL=TableContent.js.map

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/parts/TableContent.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["import React, { useContext, useMemo, useCallback } from 'react';\n\nimport { StyledTableWrapper, StyledDataTableContentWrapper } from '../styled';\nimport DataTableContext from '../DataTableContext';\nimport { Pagination } from '../addons/Pagination';\nimport { VirtualRowsList } from './VirtualRowsList';\nimport { DATA_TESTID } from '../configs/constants';\n\nexport const TableContent = () => {\n  const {\n    tableProps: { pagination },\n    allDataFlattened,\n    visibleColumns,\n    isShiftPressed,\n    setIsShiftPressed,\n  } = useContext(DataTableContext);\n\n  const handleOnKeyDown: React.KeyboardEventHandler = useCallback(\n    (e) => {\n      setIsShiftPressed(e.shiftKey);\n    },\n    [setIsShiftPressed],\n  );\n\n  const handleOnKeyUp = useCallback(() => setIsShiftPressed(false), [setIsShiftPressed]);\n\n  const PureTableContent = useMemo(\n    () => (\n      <StyledDataTableContentWrapper\n        data-testid={DATA_TESTID.DATA_TABLE_CONTENT_WRAPPER}\n        noSelectionAllowed={isShiftPressed}\n        onKeyDown={handleOnKeyDown}\n        onKeyUp={handleOnKeyUp}\n        rows={pagination ? ['1fr', 'auto'] : ['auto']}\n        cols={['100%']}\n      >\n        <StyledTableWrapper\n          role=\"table\"\n          aria-rowcount={allDataFlattened.length}\n          aria-colcount={visibleColumns.length}\n          data-testid={DATA_TESTID.DATA_TABLE_TABLE}\n        >\n          <VirtualRowsList />\n        </StyledTableWrapper>\n        {pagination ? <Pagination /> : null}\n      </StyledDataTableContentWrapper>\n    ),\n    [isShiftPressed, handleOnKeyDown, handleOnKeyUp, pagination, allDataFlattened.length, visibleColumns.length],\n  );\n\n  return PureTableContent;\n};\nexport default TableContent;\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;AD4BjB;AA5BN,mBAAwD;AAExD,oBAAkE;AAClE,8BAA6B;AAC7B,wBAA2B;AAC3B,6BAAgC;AAChC,uBAA4B;AAErB,MAAM,eAAe,MAAM;AAChC,QAAM;AAAA,IACJ,YAAY,EAAE,WAAW;AAAA,IACzB;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,QAAI,yBAAW,wBAAAA,OAAgB;AAE/B,QAAM,sBAA8C;AAAA,IAClD,CAAC,MAAM;AACL,wBAAkB,EAAE,QAAQ;AAAA,IAC9B;AAAA,IACA,CAAC,iBAAiB;AAAA,EACpB;AAEA,QAAM,oBAAgB,0BAAY,MAAM,kBAAkB,KAAK,GAAG,CAAC,iBAAiB,CAAC;AAErF,QAAM,uBAAmB;AAAA,IACvB,MACE;AAAA,MAAC;AAAA;AAAA,QACC,eAAa,6BAAY;AAAA,QACzB,oBAAoB;AAAA,QACpB,WAAW;AAAA,QACX,SAAS;AAAA,QACT,MAAM,aAAa,CAAC,OAAO,MAAM,IAAI,CAAC,MAAM;AAAA,QAC5C,MAAM,CAAC,MAAM;AAAA,QAEb;AAAA;AAAA,YAAC;AAAA;AAAA,cACC,MAAK;AAAA,cACL,iBAAe,iBAAiB;AAAA,cAChC,iBAAe,eAAe;AAAA,cAC9B,eAAa,6BAAY;AAAA,cAEzB,sDAAC,0CAAgB;AAAA;AAAA,UACnB;AAAA,UACC,aAAa,4CAAC,gCAAW,IAAK;AAAA;AAAA;AAAA,IACjC;AAAA,IAEF,CAAC,gBAAgB,iBAAiB,eAAe,YAAY,iBAAiB,QAAQ,eAAe,MAAM;AAAA,EAC7G;AAEA,SAAO;AACT;AACA,IAAO,uBAAQ;",
+  "sourcesContent": ["import React, { useContext, useCallback } from 'react';\n\nimport { StyledTableWrapper, StyledDataTableContentWrapper } from '../styled';\nimport DataTableContext from '../DataTableContext';\nimport { Pagination } from '../addons/Pagination';\nimport { VirtualRowsList } from './VirtualRowsList';\nimport { DATA_TESTID } from '../configs/constants';\n\nexport const TableContent = () => {\n  const {\n    tableProps: { pagination },\n    allDataFlattened,\n    visibleColumns,\n    isShiftPressed,\n    setIsShiftPressed,\n  } = useContext(DataTableContext);\n\n  const handleOnKeyDown: React.KeyboardEventHandler = useCallback(\n    (e) => {\n      setIsShiftPressed(e.shiftKey);\n    },\n    [setIsShiftPressed],\n  );\n\n  const handleOnKeyUp = useCallback(() => setIsShiftPressed(false), [setIsShiftPressed]);\n\n  return (\n    <StyledDataTableContentWrapper\n      data-testid={DATA_TESTID.DATA_TABLE_CONTENT_WRAPPER}\n      noSelectionAllowed={isShiftPressed}\n      onKeyDown={handleOnKeyDown}\n      onKeyUp={handleOnKeyUp}\n      rows={pagination ? ['1fr', 'auto'] : ['auto']}\n      cols={['100%']}\n    >\n      <StyledTableWrapper\n        role=\"table\"\n        aria-rowcount={allDataFlattened.length}\n        aria-colcount={visibleColumns.length}\n        data-testid={DATA_TESTID.DATA_TABLE_TABLE}\n      >\n        <VirtualRowsList />\n      </StyledTableWrapper>\n      {pagination ? <Pagination /> : null}\n    </StyledDataTableContentWrapper>\n  );\n};\nexport default TableContent;\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;AD2BnB;AA3BJ,mBAA+C;AAE/C,oBAAkE;AAClE,8BAA6B;AAC7B,wBAA2B;AAC3B,6BAAgC;AAChC,uBAA4B;AAErB,MAAM,eAAe,MAAM;AAChC,QAAM;AAAA,IACJ,YAAY,EAAE,WAAW;AAAA,IACzB;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,QAAI,yBAAW,wBAAAA,OAAgB;AAE/B,QAAM,sBAA8C;AAAA,IAClD,CAAC,MAAM;AACL,wBAAkB,EAAE,QAAQ;AAAA,IAC9B;AAAA,IACA,CAAC,iBAAiB;AAAA,EACpB;AAEA,QAAM,oBAAgB,0BAAY,MAAM,kBAAkB,KAAK,GAAG,CAAC,iBAAiB,CAAC;AAErF,SACE;AAAA,IAAC;AAAA;AAAA,MACC,eAAa,6BAAY;AAAA,MACzB,oBAAoB;AAAA,MACpB,WAAW;AAAA,MACX,SAAS;AAAA,MACT,MAAM,aAAa,CAAC,OAAO,MAAM,IAAI,CAAC,MAAM;AAAA,MAC5C,MAAM,CAAC,MAAM;AAAA,MAEb;AAAA;AAAA,UAAC;AAAA;AAAA,YACC,MAAK;AAAA,YACL,iBAAe,iBAAiB;AAAA,YAChC,iBAAe,eAAe;AAAA,YAC9B,eAAa,6BAAY;AAAA,YAEzB,sDAAC,0CAAgB;AAAA;AAAA,QACnB;AAAA,QACC,aAAa,4CAAC,gCAAW,IAAK;AAAA;AAAA;AAAA,EACjC;AAEJ;AACA,IAAO,uBAAQ;",
   "names": ["DataTableContext"]
 }

package/dist/cjs/styled.js

@@ -70,6 +70,9 @@ const StyledFocusWithin = (0, import_ds_system.styled)(import_ds_grid.Grid)`
   :focus-within {
     ${(props) => props.hideFocus ? "" : styledFocusCss(props)}
   }
+  svg {
+    fill: ${(props) => props.theme.colors.brand["800"]};
+  }
 `;
 const StyledDataTableWrapper = (0, import_ds_system.styled)(import_ds_grid.Grid)`
   width: ${(props) => (0, import_helpers.sizeToCss)(props.width ?? " 100%")};

package/dist/cjs/styled.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/styled.tsx", "../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["/* eslint-disable max-lines */\nimport { styled } from '@elliemae/ds-system';\nimport { Grid } from '@elliemae/ds-grid';\nimport { EditPencil } from '@elliemae/ds-icons';\nimport { sizeToCss, cellPadding, columnPadding } from './helpers';\nimport { ZIndexDataTable } from './configs/zIndexInternalConfig';\nimport { ColsLayoutStyle } from './configs/constants';\n\ninterface WidthAndHeight {\n  width?: string | number;\n  height?: string | number;\n}\n\nconst styledFocusCss = ({ theme }, color?: string) => `\n&:after {\n  display: block;\n  content: ' ';\n  position: absolute;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  border: 2px solid ${color ?? theme.colors.brand[700]};\n  pointer-events: none;\n  z-index: ${ZIndexDataTable.FOCUS_BORDER};\n}`;\n\nexport const StyledFocusWithin = styled(Grid)`\n  :focus-within {\n    ${(props) => (props.hideFocus ? '' : styledFocusCss(props))}\n  }\n`;\n\nexport const StyledDataTableWrapper = styled(Grid)<WidthAndHeight>`\n  width: ${(props) => sizeToCss(props.width ?? ' 100%')};\n  height: ${(props) => sizeToCss(props.height ?? ' 100%')};\n`;\n\nexport const StyledDataTableContentWrapper = styled(Grid)<WidthAndHeight & { noSelectionAllowed: boolean }>`\n  user-select: ${({ noSelectionAllowed }) => (noSelectionAllowed ? 'none' : 'auto')};\n  width: 100%;\n`;\n\nexport const StyledTableWrapper = styled.div<WidthAndHeight>`\n  display: inline-block;\n  border-spacing: 0;\n  z-index: 0;\n  position: relative;\n  width: 100%;\n  height: 100%;\n`;\nexport const StyledTableContentWrapper = styled(Grid)<WidthAndHeight>`\n  position: relative;\n  ${({ height = 'auto' }) => `\n  height: ${sizeToCss(height)};\n  `}\n`;\nexport const StyledVirtualListWrapper = styled.div<WidthAndHeight>`\n  overflow: auto;\n  height: 100%;\n  width: 100%;\n`;\n\n/**\n * HEADER\n */\ntype gridTemplateColumnStyleProps = {\n  cols: string[];\n  isExpandable: boolean;\n  colsLayoutStyle: ColsLayoutStyle;\n};\nconst getGridTemplateColumnsStyle = ({\n  cols,\n  colsLayoutStyle = ColsLayoutStyle.Auto,\n}: gridTemplateColumnStyleProps) => {\n  if (!cols) return '';\n  if (colsLayoutStyle === 'fixed') {\n    const widthAttr = cols.map((col) => `minmax(0, ${col})`).join(' ');\n    return `grid-template-columns: ${widthAttr}`;\n  }\n\n  return `grid-template-columns: ${cols.map((col) => `minmax(0, ${col})`).join(' ')}`;\n};\n\nexport const StyledHeadWrapper = styled.div<{\n  colsLayoutStyle: string;\n  totalColumnsWidth: number | string;\n}>`\n  position: relative; /* ie11 fallback */\n  position: sticky;\n  top: 0;\n  z-index: 4;\n  background: white;\n  width: ${(props) => (props.colsLayoutStyle === ColsLayoutStyle.Fixed ? sizeToCss(props.totalColumnsWidth) : '100%')};\n`;\n\nexport const StyledHeadTr = styled(Grid)<{ isExpandable: boolean; colsLayoutStyle: ColsLayoutStyle }>`\n  ${(props) => (props.colsLayoutStyle === ColsLayoutStyle.Auto ? 'width:100%' : '')};\n  ${(props) =>\n    getGridTemplateColumnsStyle({\n      cols: props.cols,\n      isExpandable: props.isExpandable,\n      colsLayoutStyle: props.colsLayoutStyle,\n    })};\n  border-right: 1px solid ${(props) => props.theme.colors.neutral['080']};\n  border-bottom: 1px solid ${(props) => props.theme.colors.neutral['080']};\n  grid-auto-flow: column;\n`;\n\nexport const StyledHeadTh = styled.div<any>`\n  min-height: 24px;\n  line-height: normal;\n  font-weight: 600;\n  text-transform: uppercase;\n  font-size: 0.923rem;\n  text-align: left;\n  ${columnPadding}\n  color: #353c46;\n  min-height: 1.84615rem;\n  position: sticky;\n  z-index: ${ZIndexDataTable.HEADER_ROW};\n  display: flex;\n  justify-content: space-between;\n  box-sizing: border-box;\n  outline: none;\n  ${(props) =>\n    props.isDraggingActive\n      ? ''\n      : `:hover {\n          &:after {\n            display: block;\n            content: ' ';\n            position: absolute;\n            top: 0;\n            left: 0;\n            right: 0;\n            bottom: 0;\n            border-bottom: 1px solid ${props.theme.colors.brand[700]};\n            pointer-events: none;\n            z-index: ${ZIndexDataTable.FOCUS_BORDER};\n          }\n          cursor: pointer;\n        }`}\n\n  :focus {\n    &:after {\n      display: block;\n      content: ' ';\n      position: absolute;\n      top: 0;\n      left: 0;\n      right: 0;\n      bottom: 0;\n      border: 2px solid ${(props) => props.theme.colors.brand[700]};\n      pointer-events: none;\n      z-index: ${ZIndexDataTable.FOCUS_BORDER};\n    }\n  }\n`;\n\nexport const StyledHeaderRightIconsWrapper = styled.div`\n  height: 100%;\n  display: flex;\n  align-items: center;\n  max-height: 24px;\n`;\n\nexport const StyledResizer = styled.div<{ isResizing: boolean }>`\n  display: inline-block;\n  background: transparent;\n  width: 4px;\n  height: 100%;\n  position: absolute;\n  right: 0;\n  top: 0;\n  z-index: 1;\n\n  // prevents from scrolling while dragging on touch devices\n  touch-action: none;\n\n  cursor: col-resize;\n`;\n\n// CELL ***********************************************************************/\nexport const StyledActionCell = styled.div`\n  position: relative; /* ie11 fallback */\n  position: sticky;\n  display: inline-block;\n  right: 0;\n  /* border-bottom: 1px solid #ebedf0; */\n  background: white;\n`;\n\nexport const StyledCell = styled.div`\n  ${cellPadding}\n  display: flex;\n  align-items: center;\n  width: 100%;\n  position: relative;\n`;\n\nexport const StyledCellContent = styled.div`\n  display: grid;\n  justify-self: flex-end;\n  flex: 1 1 auto;\n  width: 100%;\n  height: 100%;\n  align-items: center;\n`;\n\nexport const StyledPencilIcon = styled(EditPencil)``;\n\nexport const StyledEditableContainer = styled(Grid)<{ shouldDisplayEditIcon: string }>`\n  width: 100%;\n  height: 100%;\n  align-items: center;\n  & ${StyledPencilIcon} {\n    display: ${({ shouldDisplayEditIcon }) => (shouldDisplayEditIcon ? 'block' : 'none')};\n  }\n  &:hover {\n    ${StyledPencilIcon} {\n      display: block;\n    }\n  }\n  &:focus {\n    ${styledFocusCss}\n    ${StyledPencilIcon} {\n      display: block;\n    }\n  }\n  outline: none;\n`;\n\n// ROW ************************************************************************/\nexport const StyledFullsizeGrid = styled(Grid)`\n  position: relative;\n  z-index: ${ZIndexDataTable.ROW};\n\n  min-height: ${(props) => props.minHeight || '36px'};\n  height: ${(props) => props.height || 'auto'};\n`;\n\nexport const GroupHeaderContainer = styled(Grid)<{ paddingLeft: string }>`\n  position: relative;\n  background-color: ${({ theme }) => theme.colors.brand[200]};\n  align-items: center;\n  padding-left: ${(props) => props.paddingLeft};\n  border-top: 1px solid ${({ theme }) => theme.colors.brand[300]};\n`;\n\nexport const GroupHeaderTitle = styled.span`\n  font-weight: ${(props) => props.theme.fontWeights.semibold};\n  font-size: 12px;\n  color: ${(props) => props.theme.colors.neutral[700]};\n`;\n\nexport const StyledCellContainer = styled(Grid)<{ backgroundColor?: string }>`\n  position: relative;\n  z-index: 2;\n\n  min-height: ${(props) => props.minHeight || '36px'};\n  height: ${(props) => props.height || 'auto'};\n\n  width: ${(props) => (props.colLayoutStyle === ColsLayoutStyle.Fixed ? sizeToCss(props.totalColumnsWidth) : '100%')};\n  ${(props) => (props.isDragOverlay ? 'width: fit-content;' : '')};\n  ${(props) =>\n    getGridTemplateColumnsStyle({\n      cols: props.cols,\n      colsLayoutStyle: props.colLayoutStyle,\n      isExpandable: props.isExpandable,\n    })};\n  background-color: ${({ backgroundColor, isDragging, theme }) =>\n    isDragging ? theme.colors.neutral[100] : backgroundColor || 'white'};\n\n  outline: none;\n\n  :focus {\n    ${(props) => (props.isDragOverlay ? '' : styledFocusCss(props))}\n  }\n\n  ${({ isDropIndicatorPositionInside, isDropValid, theme }) => {\n    if (!isDropIndicatorPositionInside) return '';\n    return styledFocusCss({ theme }, isDropValid ? theme.colors.brand[700] : theme.colors.danger[900]);\n  }}\n\n  ${({ shouldDisplayHover, theme, isDisabled }) =>\n    shouldDisplayHover && !isDisabled\n      ? `:hover {\n            background-color: ${theme.colors.brand[200]};\n          }`\n      : ''}\n\n  box-shadow: 0 2px 4px 0 ${(props) => (props.isDragOverlay ? 'rgba(0,0,0,0.5)' : 'transparent')};\n\n  opacity: ${(props) => (props.isDragging ? 0.8 : 1)};\n\n  ${(props) =>\n    !props.selected\n      ? ''\n      : `\n    background-color: ${props.theme.colors.brand[200]};\n    border: 1px solid ${props.theme.colors.brand[500]};\n    `}\n\n  ${GroupHeaderTitle} {\n    color: ${(props) => (props.isDisabled ? props.theme.colors.neutral['200'] : props.theme.colors.neutral['700'])};\n  }\n  color: ${(props) => (props.isDisabled ? props.theme.colors.neutral['200'] : '#333333')};\n\n  svg {\n    fill: ${(props) => (props.isDisabled ? props.theme.colors.neutral['200'] : props.theme.colors.brand['800'])};\n  }\n`;\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": "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",
+  "sourcesContent": ["/* eslint-disable max-lines */\nimport { styled } from '@elliemae/ds-system';\nimport { Grid } from '@elliemae/ds-grid';\nimport { EditPencil } from '@elliemae/ds-icons';\nimport { sizeToCss, cellPadding, columnPadding } from './helpers';\nimport { ZIndexDataTable } from './configs/zIndexInternalConfig';\nimport { ColsLayoutStyle } from './configs/constants';\n\ninterface WidthAndHeight {\n  width?: string | number;\n  height?: string | number;\n}\n\nconst styledFocusCss = ({ theme }, color?: string) => `\n&:after {\n  display: block;\n  content: ' ';\n  position: absolute;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  border: 2px solid ${color ?? theme.colors.brand[700]};\n  pointer-events: none;\n  z-index: ${ZIndexDataTable.FOCUS_BORDER};\n}`;\n\nexport const StyledFocusWithin = styled(Grid)`\n  :focus-within {\n    ${(props) => (props.hideFocus ? '' : styledFocusCss(props))}\n  }\n  svg {\n    fill: ${(props) => props.theme.colors.brand['800']};\n  }\n`;\n\nexport const StyledDataTableWrapper = styled(Grid)<WidthAndHeight>`\n  width: ${(props) => sizeToCss(props.width ?? ' 100%')};\n  height: ${(props) => sizeToCss(props.height ?? ' 100%')};\n`;\n\nexport const StyledDataTableContentWrapper = styled(Grid)<WidthAndHeight & { noSelectionAllowed: boolean }>`\n  user-select: ${({ noSelectionAllowed }) => (noSelectionAllowed ? 'none' : 'auto')};\n  width: 100%;\n`;\n\nexport const StyledTableWrapper = styled.div<WidthAndHeight>`\n  display: inline-block;\n  border-spacing: 0;\n  z-index: 0;\n  position: relative;\n  width: 100%;\n  height: 100%;\n`;\nexport const StyledTableContentWrapper = styled(Grid)<WidthAndHeight>`\n  position: relative;\n  ${({ height = 'auto' }) => `\n  height: ${sizeToCss(height)};\n  `}\n`;\nexport const StyledVirtualListWrapper = styled.div<WidthAndHeight>`\n  overflow: auto;\n  height: 100%;\n  width: 100%;\n`;\n\n/**\n * HEADER\n */\ntype gridTemplateColumnStyleProps = {\n  cols: string[];\n  isExpandable: boolean;\n  colsLayoutStyle: ColsLayoutStyle;\n};\nconst getGridTemplateColumnsStyle = ({\n  cols,\n  colsLayoutStyle = ColsLayoutStyle.Auto,\n}: gridTemplateColumnStyleProps) => {\n  if (!cols) return '';\n  if (colsLayoutStyle === 'fixed') {\n    const widthAttr = cols.map((col) => `minmax(0, ${col})`).join(' ');\n    return `grid-template-columns: ${widthAttr}`;\n  }\n\n  return `grid-template-columns: ${cols.map((col) => `minmax(0, ${col})`).join(' ')}`;\n};\n\nexport const StyledHeadWrapper = styled.div<{\n  colsLayoutStyle: string;\n  totalColumnsWidth: number | string;\n}>`\n  position: relative; /* ie11 fallback */\n  position: sticky;\n  top: 0;\n  z-index: 4;\n  background: white;\n  width: ${(props) => (props.colsLayoutStyle === ColsLayoutStyle.Fixed ? sizeToCss(props.totalColumnsWidth) : '100%')};\n`;\n\nexport const StyledHeadTr = styled(Grid)<{ isExpandable: boolean; colsLayoutStyle: ColsLayoutStyle }>`\n  ${(props) => (props.colsLayoutStyle === ColsLayoutStyle.Auto ? 'width:100%' : '')};\n  ${(props) =>\n    getGridTemplateColumnsStyle({\n      cols: props.cols,\n      isExpandable: props.isExpandable,\n      colsLayoutStyle: props.colsLayoutStyle,\n    })};\n  border-right: 1px solid ${(props) => props.theme.colors.neutral['080']};\n  border-bottom: 1px solid ${(props) => props.theme.colors.neutral['080']};\n  grid-auto-flow: column;\n`;\n\nexport const StyledHeadTh = styled.div<any>`\n  min-height: 24px;\n  line-height: normal;\n  font-weight: 600;\n  text-transform: uppercase;\n  font-size: 0.923rem;\n  text-align: left;\n  ${columnPadding}\n  color: #353c46;\n  min-height: 1.84615rem;\n  position: sticky;\n  z-index: ${ZIndexDataTable.HEADER_ROW};\n  display: flex;\n  justify-content: space-between;\n  box-sizing: border-box;\n  outline: none;\n  ${(props) =>\n    props.isDraggingActive\n      ? ''\n      : `:hover {\n          &:after {\n            display: block;\n            content: ' ';\n            position: absolute;\n            top: 0;\n            left: 0;\n            right: 0;\n            bottom: 0;\n            border-bottom: 1px solid ${props.theme.colors.brand[700]};\n            pointer-events: none;\n            z-index: ${ZIndexDataTable.FOCUS_BORDER};\n          }\n          cursor: pointer;\n        }`}\n\n  :focus {\n    &:after {\n      display: block;\n      content: ' ';\n      position: absolute;\n      top: 0;\n      left: 0;\n      right: 0;\n      bottom: 0;\n      border: 2px solid ${(props) => props.theme.colors.brand[700]};\n      pointer-events: none;\n      z-index: ${ZIndexDataTable.FOCUS_BORDER};\n    }\n  }\n`;\n\nexport const StyledHeaderRightIconsWrapper = styled.div`\n  height: 100%;\n  display: flex;\n  align-items: center;\n  max-height: 24px;\n`;\n\nexport const StyledResizer = styled.div<{ isResizing: boolean }>`\n  display: inline-block;\n  background: transparent;\n  width: 4px;\n  height: 100%;\n  position: absolute;\n  right: 0;\n  top: 0;\n  z-index: 1;\n\n  // prevents from scrolling while dragging on touch devices\n  touch-action: none;\n\n  cursor: col-resize;\n`;\n\n// CELL ***********************************************************************/\nexport const StyledActionCell = styled.div`\n  position: relative; /* ie11 fallback */\n  position: sticky;\n  display: inline-block;\n  right: 0;\n  /* border-bottom: 1px solid #ebedf0; */\n  background: white;\n`;\n\nexport const StyledCell = styled.div`\n  ${cellPadding}\n  display: flex;\n  align-items: center;\n  width: 100%;\n  position: relative;\n`;\n\nexport const StyledCellContent = styled.div`\n  display: grid;\n  justify-self: flex-end;\n  flex: 1 1 auto;\n  width: 100%;\n  height: 100%;\n  align-items: center;\n`;\n\nexport const StyledPencilIcon = styled(EditPencil)``;\n\nexport const StyledEditableContainer = styled(Grid)<{ shouldDisplayEditIcon: string }>`\n  width: 100%;\n  height: 100%;\n  align-items: center;\n  & ${StyledPencilIcon} {\n    display: ${({ shouldDisplayEditIcon }) => (shouldDisplayEditIcon ? 'block' : 'none')};\n  }\n  &:hover {\n    ${StyledPencilIcon} {\n      display: block;\n    }\n  }\n  &:focus {\n    ${styledFocusCss}\n    ${StyledPencilIcon} {\n      display: block;\n    }\n  }\n  outline: none;\n`;\n\n// ROW ************************************************************************/\nexport const StyledFullsizeGrid = styled(Grid)`\n  position: relative;\n  z-index: ${ZIndexDataTable.ROW};\n\n  min-height: ${(props) => props.minHeight || '36px'};\n  height: ${(props) => props.height || 'auto'};\n`;\n\nexport const GroupHeaderContainer = styled(Grid)<{ paddingLeft: string }>`\n  position: relative;\n  background-color: ${({ theme }) => theme.colors.brand[200]};\n  align-items: center;\n  padding-left: ${(props) => props.paddingLeft};\n  border-top: 1px solid ${({ theme }) => theme.colors.brand[300]};\n`;\n\nexport const GroupHeaderTitle = styled.span`\n  font-weight: ${(props) => props.theme.fontWeights.semibold};\n  font-size: 12px;\n  color: ${(props) => props.theme.colors.neutral[700]};\n`;\n\nexport const StyledCellContainer = styled(Grid)<{ backgroundColor?: string }>`\n  position: relative;\n  z-index: 2;\n\n  min-height: ${(props) => props.minHeight || '36px'};\n  height: ${(props) => props.height || 'auto'};\n\n  width: ${(props) => (props.colLayoutStyle === ColsLayoutStyle.Fixed ? sizeToCss(props.totalColumnsWidth) : '100%')};\n  ${(props) => (props.isDragOverlay ? 'width: fit-content;' : '')};\n  ${(props) =>\n    getGridTemplateColumnsStyle({\n      cols: props.cols,\n      colsLayoutStyle: props.colLayoutStyle,\n      isExpandable: props.isExpandable,\n    })};\n  background-color: ${({ backgroundColor, isDragging, theme }) =>\n    isDragging ? theme.colors.neutral[100] : backgroundColor || 'white'};\n\n  outline: none;\n\n  :focus {\n    ${(props) => (props.isDragOverlay ? '' : styledFocusCss(props))}\n  }\n\n  ${({ isDropIndicatorPositionInside, isDropValid, theme }) => {\n    if (!isDropIndicatorPositionInside) return '';\n    return styledFocusCss({ theme }, isDropValid ? theme.colors.brand[700] : theme.colors.danger[900]);\n  }}\n\n  ${({ shouldDisplayHover, theme, isDisabled }) =>\n    shouldDisplayHover && !isDisabled\n      ? `:hover {\n            background-color: ${theme.colors.brand[200]};\n          }`\n      : ''}\n\n  box-shadow: 0 2px 4px 0 ${(props) => (props.isDragOverlay ? 'rgba(0,0,0,0.5)' : 'transparent')};\n\n  opacity: ${(props) => (props.isDragging ? 0.8 : 1)};\n\n  ${(props) =>\n    !props.selected\n      ? ''\n      : `\n    background-color: ${props.theme.colors.brand[200]};\n    border: 1px solid ${props.theme.colors.brand[500]};\n    `}\n\n  ${GroupHeaderTitle} {\n    color: ${(props) => (props.isDisabled ? props.theme.colors.neutral['200'] : props.theme.colors.neutral['700'])};\n  }\n  color: ${(props) => (props.isDisabled ? props.theme.colors.neutral['200'] : '#333333')};\n\n  svg {\n    fill: ${(props) => (props.isDisabled ? props.theme.colors.neutral['200'] : props.theme.colors.brand['800'])};\n  }\n`;\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": "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",
   "names": []
 }

package/dist/esm/configs/useDatatableConfig.js

@@ -7,6 +7,7 @@ import { usePaginationConfig } from "./usePaginationConfig";
 import { useTableColsWithAddons } from "./useTableColsWithAddons";
 import { ColsLayoutStyle } from "./constants";
 import { useInternalStateConfig } from "./useInternalStateConfig";
+const estimateSize = () => 36;
 const useDatatableConfig = (props) => {
   const virtualListRef = useRef(null);
   const columnHeaderRef = useRef(null);
@@ -29,7 +30,8 @@ const useDatatableConfig = (props) => {
     size: dataLength,
     parentRef: virtualListRef,
     overscan: 15,
-    paddingStart: columnHeaderRef.current?.getBoundingClientRect()?.height ?? 24
+    paddingStart: columnHeaderRef.current?.getBoundingClientRect()?.height ?? 24,
+    estimateSize
   });
   useEffect(() => {
     if (props.actionRef) {

package/dist/esm/configs/useDatatableConfig.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/configs/useDatatableConfig.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { useEffect, useMemo, useRef, useState } from 'react';\nimport { useVirtual } from 'react-virtual';\nimport { columnsToGrid } from '../helpers/columnsToGrid';\nimport type { TypescriptColumn, TypescriptContext, TypescriptProps } from '../types/props';\nimport { useRowFlattenization } from './useRowFlattenization';\nimport { usePaginationConfig } from './usePaginationConfig';\nimport { useTableColsWithAddons } from './useTableColsWithAddons';\nimport { ColsLayoutStyle } from './constants';\nimport { useInternalStateConfig } from './useInternalStateConfig';\n\nexport const useDatatableConfig = (props: TypescriptProps): TypescriptContext => {\n  const virtualListRef = useRef<HTMLDivElement>(null);\n  const columnHeaderRef = useRef<HTMLDivElement>(null);\n  const [isShiftPressed, setIsShiftPressed] = useState(false);\n  const lastSelected = useRef<number>(-1);\n\n  // ===========================================================================\n  // Column config\n  // ===========================================================================\n  const tableColsWithAddons = useTableColsWithAddons(props);\n  const visibleColumns = useMemo(\n    () =>\n      tableColsWithAddons\n        .filter((col: TypescriptColumn) => !props.hiddenColumns?.includes(col.accessor))\n        .map((col: TypescriptColumn) => {\n          if (col.columns) {\n            col.columns = col.columns.filter(\n              (subCol: TypescriptColumn) => !props.hiddenColumns?.includes(subCol.accessor),\n            );\n          }\n          return col;\n        }),\n    [props.hiddenColumns, tableColsWithAddons],\n  );\n\n  // ===========================================================================\n  // Virtualization\n  // ===========================================================================\n\n  const [dataLength, setDataLength] = useState(1);\n\n  // estimateSize should not be really required given what was stated on\n  // https://github.com/tannerlinsley/react-virtual/issues/23\n  const virtualListHelpers = useVirtual({\n    size: dataLength,\n    parentRef: virtualListRef,\n    overscan: 15,\n    paddingStart: columnHeaderRef.current?.getBoundingClientRect()?.height ?? 24,\n  });\n\n  // ===========================================================================\n  // Action ref setup\n  // ===========================================================================\n  useEffect(() => {\n    if (props.actionRef) {\n      props.actionRef.current.scrollToIndex = virtualListHelpers.scrollToIndex;\n      props.actionRef.current.scrollToOffset = virtualListHelpers.scrollToOffset;\n    }\n  }, [props.actionRef, virtualListHelpers.scrollToIndex, virtualListHelpers.scrollToOffset]);\n\n  // ===========================================================================\n  // Data flattenization and pagination\n  // ===========================================================================\n\n  const [flattenedData, allDataFlattened] = useRowFlattenization(props);\n\n  const [paginatedData, paginationHelpers] = usePaginationConfig(props, flattenedData);\n\n  // Redo virtualization until we match the lengths\n  if (dataLength !== (paginatedData || flattenedData).length) setDataLength((paginatedData || flattenedData).length);\n\n  // ===========================================================================\n  // Layout config\n  // ===========================================================================\n\n  const [gridLayout, setGridLayout] = useState(columnsToGrid(visibleColumns, props.colsLayoutStyle));\n\n  // We need to listen and update the state based on this props\n  useEffect(() => {\n    setGridLayout(columnsToGrid(visibleColumns, props.colsLayoutStyle));\n  }, [visibleColumns, props.colsLayoutStyle]);\n\n  const totalColumnsWidth = useMemo(\n    () =>\n      props.colsLayoutStyle === ColsLayoutStyle.Fixed\n        ? gridLayout.reduce((acc: number, cur: string) => acc + Number.parseInt(cur, 10), 0)\n        : '100%',\n    [props.colsLayoutStyle, gridLayout],\n  );\n\n  const layoutHelpers = useMemo(\n    () => ({\n      gridLayout,\n      setGridLayout,\n      totalColumnsWidth,\n    }),\n    [gridLayout, setGridLayout, totalColumnsWidth],\n  );\n\n  // ===========================================================================\n  // Internal state config\n  // ===========================================================================\n\n  const internalState = useInternalStateConfig();\n\n  const ctx = useMemo(\n    () => ({\n      tableProps: props,\n      layoutHelpers,\n      paginationHelpers,\n      visibleColumns,\n      virtualListHelpers,\n      flattenedData: paginatedData || flattenedData,\n      allDataFlattened,\n      virtualListRef,\n      columnHeaderRef,\n      ...internalState,\n      isShiftPressed,\n      setIsShiftPressed,\n      lastSelected,\n    }),\n    [\n      props,\n      layoutHelpers,\n      paginationHelpers,\n      visibleColumns,\n      virtualListHelpers,\n      paginatedData,\n      flattenedData,\n      allDataFlattened,\n      virtualListRef,\n      columnHeaderRef,\n      internalState,\n      isShiftPressed,\n      setIsShiftPressed,\n      lastSelected,\n    ],\n  );\n\n  return ctx;\n};\n"],
-  "mappings": "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",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { useEffect, useMemo, useRef, useState } from 'react';\nimport { useVirtual } from 'react-virtual';\nimport { columnsToGrid } from '../helpers/columnsToGrid';\nimport type { TypescriptColumn, TypescriptContext, TypescriptProps } from '../types/props';\nimport { useRowFlattenization } from './useRowFlattenization';\nimport { usePaginationConfig } from './usePaginationConfig';\nimport { useTableColsWithAddons } from './useTableColsWithAddons';\nimport { ColsLayoutStyle } from './constants';\nimport { useInternalStateConfig } from './useInternalStateConfig';\n\nconst estimateSize = () => 36;\n\nexport const useDatatableConfig = (props: TypescriptProps): TypescriptContext => {\n  const virtualListRef = useRef<HTMLDivElement>(null);\n  const columnHeaderRef = useRef<HTMLDivElement>(null);\n  const [isShiftPressed, setIsShiftPressed] = useState(false);\n  const lastSelected = useRef<number>(-1);\n\n  // ===========================================================================\n  // Column config\n  // ===========================================================================\n  const tableColsWithAddons = useTableColsWithAddons(props);\n  const visibleColumns = useMemo(\n    () =>\n      tableColsWithAddons\n        .filter((col: TypescriptColumn) => !props.hiddenColumns?.includes(col.accessor))\n        .map((col: TypescriptColumn) => {\n          if (col.columns) {\n            col.columns = col.columns.filter(\n              (subCol: TypescriptColumn) => !props.hiddenColumns?.includes(subCol.accessor),\n            );\n          }\n          return col;\n        }),\n    [props.hiddenColumns, tableColsWithAddons],\n  );\n\n  // ===========================================================================\n  // Virtualization\n  // ===========================================================================\n\n  const [dataLength, setDataLength] = useState(1);\n\n  // estimateSize should not be really required given what was stated on\n  // https://github.com/tannerlinsley/react-virtual/issues/23\n  const virtualListHelpers = useVirtual({\n    size: dataLength,\n    parentRef: virtualListRef,\n    overscan: 15,\n    paddingStart: columnHeaderRef.current?.getBoundingClientRect()?.height ?? 24,\n    estimateSize,\n  });\n\n  // ===========================================================================\n  // Action ref setup\n  // ===========================================================================\n  useEffect(() => {\n    if (props.actionRef) {\n      props.actionRef.current.scrollToIndex = virtualListHelpers.scrollToIndex;\n      props.actionRef.current.scrollToOffset = virtualListHelpers.scrollToOffset;\n    }\n  }, [props.actionRef, virtualListHelpers.scrollToIndex, virtualListHelpers.scrollToOffset]);\n\n  // ===========================================================================\n  // Data flattenization and pagination\n  // ===========================================================================\n\n  const [flattenedData, allDataFlattened] = useRowFlattenization(props);\n\n  const [paginatedData, paginationHelpers] = usePaginationConfig(props, flattenedData);\n\n  // Redo virtualization until we match the lengths\n  if (dataLength !== (paginatedData || flattenedData).length) setDataLength((paginatedData || flattenedData).length);\n\n  // ===========================================================================\n  // Layout config\n  // ===========================================================================\n\n  const [gridLayout, setGridLayout] = useState(columnsToGrid(visibleColumns, props.colsLayoutStyle));\n\n  // We need to listen and update the state based on this props\n  useEffect(() => {\n    setGridLayout(columnsToGrid(visibleColumns, props.colsLayoutStyle));\n  }, [visibleColumns, props.colsLayoutStyle]);\n\n  const totalColumnsWidth = useMemo(\n    () =>\n      props.colsLayoutStyle === ColsLayoutStyle.Fixed\n        ? gridLayout.reduce((acc: number, cur: string) => acc + Number.parseInt(cur, 10), 0)\n        : '100%',\n    [props.colsLayoutStyle, gridLayout],\n  );\n\n  const layoutHelpers = useMemo(\n    () => ({\n      gridLayout,\n      setGridLayout,\n      totalColumnsWidth,\n    }),\n    [gridLayout, setGridLayout, totalColumnsWidth],\n  );\n\n  // ===========================================================================\n  // Internal state config\n  // ===========================================================================\n\n  const internalState = useInternalStateConfig();\n\n  const ctx = useMemo(\n    () => ({\n      tableProps: props,\n      layoutHelpers,\n      paginationHelpers,\n      visibleColumns,\n      virtualListHelpers,\n      flattenedData: paginatedData || flattenedData,\n      allDataFlattened,\n      virtualListRef,\n      columnHeaderRef,\n      ...internalState,\n      isShiftPressed,\n      setIsShiftPressed,\n      lastSelected,\n    }),\n    [\n      props,\n      layoutHelpers,\n      paginationHelpers,\n      visibleColumns,\n      virtualListHelpers,\n      paginatedData,\n      flattenedData,\n      allDataFlattened,\n      virtualListRef,\n      columnHeaderRef,\n      internalState,\n      isShiftPressed,\n      setIsShiftPressed,\n      lastSelected,\n    ],\n  );\n\n  return ctx;\n};\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,WAAW,SAAS,QAAQ,gBAAgB;AACrD,SAAS,kBAAkB;AAC3B,SAAS,qBAAqB;AAE9B,SAAS,4BAA4B;AACrC,SAAS,2BAA2B;AACpC,SAAS,8BAA8B;AACvC,SAAS,uBAAuB;AAChC,SAAS,8BAA8B;AAEvC,MAAM,eAAe,MAAM;AAEpB,MAAM,qBAAqB,CAAC,UAA8C;AAC/E,QAAM,iBAAiB,OAAuB,IAAI;AAClD,QAAM,kBAAkB,OAAuB,IAAI;AACnD,QAAM,CAAC,gBAAgB,iBAAiB,IAAI,SAAS,KAAK;AAC1D,QAAM,eAAe,OAAe,EAAE;AAKtC,QAAM,sBAAsB,uBAAuB,KAAK;AACxD,QAAM,iBAAiB;AAAA,IACrB,MACE,oBACG,OAAO,CAAC,QAA0B,CAAC,MAAM,eAAe,SAAS,IAAI,QAAQ,CAAC,EAC9E,IAAI,CAAC,QAA0B;AAC9B,UAAI,IAAI,SAAS;AACf,YAAI,UAAU,IAAI,QAAQ;AAAA,UACxB,CAAC,WAA6B,CAAC,MAAM,eAAe,SAAS,OAAO,QAAQ;AAAA,QAC9E;AAAA,MACF;AACA,aAAO;AAAA,IACT,CAAC;AAAA,IACL,CAAC,MAAM,eAAe,mBAAmB;AAAA,EAC3C;AAMA,QAAM,CAAC,YAAY,aAAa,IAAI,SAAS,CAAC;AAI9C,QAAM,qBAAqB,WAAW;AAAA,IACpC,MAAM;AAAA,IACN,WAAW;AAAA,IACX,UAAU;AAAA,IACV,cAAc,gBAAgB,SAAS,sBAAsB,GAAG,UAAU;AAAA,IAC1E;AAAA,EACF,CAAC;AAKD,YAAU,MAAM;AACd,QAAI,MAAM,WAAW;AACnB,YAAM,UAAU,QAAQ,gBAAgB,mBAAmB;AAC3D,YAAM,UAAU,QAAQ,iBAAiB,mBAAmB;AAAA,IAC9D;AAAA,EACF,GAAG,CAAC,MAAM,WAAW,mBAAmB,eAAe,mBAAmB,cAAc,CAAC;AAMzF,QAAM,CAAC,eAAe,gBAAgB,IAAI,qBAAqB,KAAK;AAEpE,QAAM,CAAC,eAAe,iBAAiB,IAAI,oBAAoB,OAAO,aAAa;AAGnF,MAAI,gBAAgB,iBAAiB,eAAe;AAAQ,mBAAe,iBAAiB,eAAe,MAAM;AAMjH,QAAM,CAAC,YAAY,aAAa,IAAI,SAAS,cAAc,gBAAgB,MAAM,eAAe,CAAC;AAGjG,YAAU,MAAM;AACd,kBAAc,cAAc,gBAAgB,MAAM,eAAe,CAAC;AAAA,EACpE,GAAG,CAAC,gBAAgB,MAAM,eAAe,CAAC;AAE1C,QAAM,oBAAoB;AAAA,IACxB,MACE,MAAM,oBAAoB,gBAAgB,QACtC,WAAW,OAAO,CAAC,KAAa,QAAgB,MAAM,OAAO,SAAS,KAAK,EAAE,GAAG,CAAC,IACjF;AAAA,IACN,CAAC,MAAM,iBAAiB,UAAU;AAAA,EACpC;AAEA,QAAM,gBAAgB;AAAA,IACpB,OAAO;AAAA,MACL;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,IACA,CAAC,YAAY,eAAe,iBAAiB;AAAA,EAC/C;AAMA,QAAM,gBAAgB,uBAAuB;AAE7C,QAAM,MAAM;AAAA,IACV,OAAO;AAAA,MACL,YAAY;AAAA,MACZ;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA,eAAe,iBAAiB;AAAA,MAChC;AAAA,MACA;AAAA,MACA;AAAA,MACA,GAAG;AAAA,MACH;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,IACA;AAAA,MACE;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,EACF;AAEA,SAAO;AACT;",
   "names": []
 }

package/dist/esm/exported-related/RowRenderer/DefaultRowContentRenderer.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/exported-related/RowRenderer/DefaultRowContentRenderer.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable complexity */\n/* eslint-disable max-lines */\nimport React, { useMemo, useCallback, useLayoutEffect, useRef } from 'react';\nimport { INTERNAL_COLUMNS } from '../../addons/Columns';\nimport { DATA_TESTID } from '../../configs/constants';\nimport { Cells } from '../../parts/Cells';\nimport type { RowVariantProps } from '../../parts/RowVariants/types';\nimport { StyledCellContainer } from '../../styled';\nimport type { TypescriptRow } from '../../types/props';\nimport { DropIndicatorPosition } from '../../types/props';\n\nconst DetailsWrapper = (props) => (\n  // This can be further customized\n  // eslint-disable-next-line jsx-a11y/no-static-element-interactions\n  <div\n    data-role=\"detail-view\"\n    style={{\n      borderTop: '1px solid #EBEDF0',\n      borderBottom: '1px solid #EBEDF0',\n    }}\n    onClick={(e) => e.stopPropagation()}\n    onKeyDown={(e) => e.stopPropagation()}\n  >\n    {props.children}\n  </div>\n);\n\nconst ariaLabelMessage = (row: TypescriptRow, selected: boolean) =>\n  `Row number ${row.realIndex + 1}${row.parentIndex !== null ? `, child of row number ${row.parentIndex + 1}` : ''}. ${\n    selected ? 'Selected. ' : ''\n  }To interact with the cells press enter`;\n\nexport const DefaultRowContentRenderer: React.ComponentType<RowVariantProps> = (props) => {\n  const {\n    row,\n    ctx: {\n      tableProps: { isExpandable, colsLayoutStyle, selection, noSelectionColumn, expandedRows, disabledRows },\n      layoutHelpers: { gridLayout },\n      visibleColumns,\n    },\n    draggableProps,\n    isDragOverlay,\n    backgroundColor = 'white',\n    dropIndicatorPosition,\n    isDropValid,\n    focusedRowId,\n    drilldownRowId,\n    compact,\n  } = props;\n\n  const rowRef = useRef<HTMLDivElement>(null);\n  const isDndActive = draggableProps && draggableProps.active;\n  const isDragging = draggableProps && draggableProps.isDragging;\n\n  useLayoutEffect(() => {\n    if (row.uid === focusedRowId) {\n      rowRef.current?.focus();\n    }\n  }, [focusedRowId, row.uid]);\n\n  const gridTemplateColProps = useMemo(\n    () => ({\n      cols: isDragOverlay ? ['24px', 'auto'] : gridLayout,\n      isExpandable,\n      colLayoutStyle: colsLayoutStyle,\n    }),\n    [isDragOverlay, gridLayout, colsLayoutStyle, isExpandable],\n  );\n\n  const detailsIndent = useMemo(() => {\n    let padding = 0;\n    for (let i = 0; i < visibleColumns.length; i += 1) {\n      if (INTERNAL_COLUMNS.includes(visibleColumns[i].id)) {\n        padding += visibleColumns[i].width;\n      } else {\n        padding += row.depth * 32 + 15;\n        break;\n      }\n    }\n    return padding;\n  }, [row.depth, visibleColumns]);\n\n  const DetailsView = row.original.tableRowDetails;\n\n  return (\n    <>\n      <StyledCellContainer\n        ref={rowRef}\n        key={row.uid}\n        tabIndex={0}\n        role=\"row\"\n        aria-rowindex={row.realIndex + 1}\n        aria-label={ariaLabelMessage(row, selection?.[row.uid] === true)}\n        aria-selected={selection?.[row.uid] === true}\n        aria-expanded={isExpandable ? expandedRows[row.uid] === true : undefined}\n        aria-disabled={disabledRows[row.uid]}\n        {...gridTemplateColProps}\n        backgroundColor={backgroundColor}\n        height={compact ? '24px' : 'auto'}\n        minHeight={compact ? '24px' : '36px'}\n        isDropIndicatorPositionInside={dropIndicatorPosition === DropIndicatorPosition.Inside}\n        isDropValid={isDropValid}\n        shouldDisplayHover={!isDndActive && !isDragging && !isDragOverlay}\n        isDragOverlay={isDragOverlay}\n        isDragging={isDragging}\n        selected={noSelectionColumn && selection?.[row.uid] === true}\n        isDisabled={disabledRows[row.uid]}\n        data-testid={DATA_TESTID.DATA_TABLE_ROW_CONTENT}\n      >\n        <Cells row={row} isRowSelected={drilldownRowId === row.uid} isDragOverlay={isDragOverlay} key={row.uid} />\n      </StyledCellContainer>\n      {!isDragOverlay && isExpandable && row.isExpanded && DetailsView && (\n        <DetailsWrapper>\n          <DetailsView row={row} detailsIndent={detailsIndent} />\n        </DetailsWrapper>\n      )}\n    </>\n  );\n};\n"],
-  "mappings": "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",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable complexity */\n/* eslint-disable max-lines */\nimport React, { useMemo, useLayoutEffect, useRef } from 'react';\nimport { INTERNAL_COLUMNS } from '../../addons/Columns';\nimport { DATA_TESTID } from '../../configs/constants';\nimport { Cells } from '../../parts/Cells';\nimport type { RowVariantProps } from '../../parts/RowVariants/types';\nimport { StyledCellContainer } from '../../styled';\nimport type { TypescriptRow } from '../../types/props';\nimport { DropIndicatorPosition } from '../../types/props';\n\nconst DetailsWrapper = (props) => (\n  // This can be further customized\n  // eslint-disable-next-line jsx-a11y/no-static-element-interactions\n  <div\n    data-role=\"detail-view\"\n    style={{\n      borderTop: '1px solid #EBEDF0',\n      borderBottom: '1px solid #EBEDF0',\n    }}\n    onClick={(e) => e.stopPropagation()}\n    onKeyDown={(e) => e.stopPropagation()}\n  >\n    {props.children}\n  </div>\n);\n\nconst ariaLabelMessage = (row: TypescriptRow, selected: boolean) =>\n  `Row number ${row.realIndex + 1}${row.parentIndex !== null ? `, child of row number ${row.parentIndex + 1}` : ''}. ${\n    selected ? 'Selected. ' : ''\n  }To interact with the cells press enter`;\n\nexport const DefaultRowContentRenderer: React.ComponentType<RowVariantProps> = (props) => {\n  const {\n    row,\n    ctx: {\n      tableProps: { isExpandable, colsLayoutStyle, selection, noSelectionColumn, expandedRows, disabledRows },\n      layoutHelpers: { gridLayout },\n      visibleColumns,\n    },\n    draggableProps,\n    isDragOverlay,\n    backgroundColor = 'white',\n    dropIndicatorPosition,\n    isDropValid,\n    focusedRowId,\n    drilldownRowId,\n    compact,\n  } = props;\n\n  const rowRef = useRef<HTMLDivElement>(null);\n  const isDndActive = draggableProps && draggableProps.active;\n  const isDragging = draggableProps && draggableProps.isDragging;\n\n  useLayoutEffect(() => {\n    if (row.uid === focusedRowId) {\n      rowRef.current?.focus();\n    }\n  }, [focusedRowId, row.uid]);\n\n  const gridTemplateColProps = useMemo(\n    () => ({\n      cols: isDragOverlay ? ['24px', 'auto'] : gridLayout,\n      isExpandable,\n      colLayoutStyle: colsLayoutStyle,\n    }),\n    [isDragOverlay, gridLayout, colsLayoutStyle, isExpandable],\n  );\n\n  const detailsIndent = useMemo(() => {\n    let padding = 0;\n    for (let i = 0; i < visibleColumns.length; i += 1) {\n      if (INTERNAL_COLUMNS.includes(visibleColumns[i].id)) {\n        padding += visibleColumns[i].width;\n      } else {\n        padding += row.depth * 32 + 15;\n        break;\n      }\n    }\n    return padding;\n  }, [row.depth, visibleColumns]);\n\n  const DetailsView = row.original.tableRowDetails;\n\n  return (\n    <>\n      <StyledCellContainer\n        ref={rowRef}\n        key={row.uid}\n        tabIndex={0}\n        role=\"row\"\n        aria-rowindex={row.realIndex + 1}\n        aria-label={ariaLabelMessage(row, selection?.[row.uid] === true)}\n        aria-selected={selection?.[row.uid] === true}\n        aria-expanded={isExpandable ? expandedRows[row.uid] === true : undefined}\n        aria-disabled={disabledRows[row.uid]}\n        {...gridTemplateColProps}\n        backgroundColor={backgroundColor}\n        height={compact ? '24px' : 'auto'}\n        minHeight={compact ? '24px' : '36px'}\n        isDropIndicatorPositionInside={dropIndicatorPosition === DropIndicatorPosition.Inside}\n        isDropValid={isDropValid}\n        shouldDisplayHover={!isDndActive && !isDragging && !isDragOverlay}\n        isDragOverlay={isDragOverlay}\n        isDragging={isDragging}\n        selected={noSelectionColumn && selection?.[row.uid] === true}\n        isDisabled={disabledRows[row.uid]}\n        data-testid={DATA_TESTID.DATA_TABLE_ROW_CONTENT}\n      >\n        <Cells row={row} isRowSelected={drilldownRowId === row.uid} isDragOverlay={isDragOverlay} key={row.uid} />\n      </StyledCellContainer>\n      {!isDragOverlay && isExpandable && row.isExpanded && DetailsView && (\n        <DetailsWrapper>\n          <DetailsView row={row} detailsIndent={detailsIndent} />\n        </DetailsWrapper>\n      )}\n    </>\n  );\n};\n"],
+  "mappings": "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",
   "names": []
 }

package/dist/esm/exported-related/RowRenderer/useRowStyle.js

@@ -22,7 +22,6 @@ const useRowStyle = (row) => {
   }, [row, flattenedData]);
   const rowStyle = useMemo(() => ({ borderTop, borderBottom }), [borderTop, borderBottom]);
   const dropIndicatorPosition = draggableProps && draggableProps.shouldShowDropIndicatorPosition && draggableProps.dropIndicatorPosition;
-  console.log(draggableProps, "draggableProps");
   const isDropValid = draggableProps && draggableProps.isDropValid;
   return {
     rowStyle,

package/dist/esm/exported-related/RowRenderer/useRowStyle.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/exported-related/RowRenderer/useRowStyle.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { useContext, useMemo } from 'react';\nimport DataTableContext from '../../DataTableContext';\nimport { SortableItemContext } from '../../parts/HoC/SortableItemContext';\nimport type { InternalTypescriptRow, DropIndicatorPosition } from '../../types/props';\n\nexport const useRowStyle = (\n  row: InternalTypescriptRow,\n): {\n  rowStyle: Record<string, unknown>;\n  shouldAppendDottedBorder: boolean;\n  dropIndicatorPosition: false | DropIndicatorPosition;\n  isDropValid: boolean;\n} => {\n  const { flattenedData } = useContext(DataTableContext);\n\n  const { draggableProps } = useContext(SortableItemContext);\n\n  // ---------------------------------------------------------------------------\n  // Border calculation\n  // ---------------------------------------------------------------------------\n  const [borderTop, borderBottom, shouldAppendDottedBorder]: [string, string, boolean] = useMemo(() => {\n    if (row.original.dimsumHeaderValue) {\n      return ['none', 'none', false];\n    }\n    if (row.isExpanded && row.original.subRows && row.depth === 0) {\n      return ['1px solid #EBEDF0', 'none', true];\n    }\n\n    if (row.depth >= 1) {\n      if (row.realIndex < flattenedData.length - 1 && flattenedData[row.realIndex + 1].depth === 0) {\n        return ['none', '2px solid #EBEDF0', false];\n      }\n      return ['none', 'none', true];\n    }\n\n    return ['none', '1px solid #EBEDF0', false];\n  }, [row, flattenedData]);\n\n  const rowStyle = useMemo(() => ({ borderTop, borderBottom }), [borderTop, borderBottom]);\n\n  const dropIndicatorPosition =\n    draggableProps && draggableProps.shouldShowDropIndicatorPosition && draggableProps.dropIndicatorPosition;\n  console.log(draggableProps, 'draggableProps');\n  const isDropValid = draggableProps && draggableProps.isDropValid;\n\n  return {\n    rowStyle,\n    shouldAppendDottedBorder,\n    dropIndicatorPosition,\n    isDropValid,\n  };\n};\n"],
-  "mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,YAAY,eAAe;AACpC,OAAO,sBAAsB;AAC7B,SAAS,2BAA2B;AAG7B,MAAM,cAAc,CACzB,QAMG;AACH,QAAM,EAAE,cAAc,IAAI,WAAW,gBAAgB;AAErD,QAAM,EAAE,eAAe,IAAI,WAAW,mBAAmB;AAKzD,QAAM,CAAC,WAAW,cAAc,wBAAwB,IAA+B,QAAQ,MAAM;AACnG,QAAI,IAAI,SAAS,mBAAmB;AAClC,aAAO,CAAC,QAAQ,QAAQ,KAAK;AAAA,IAC/B;AACA,QAAI,IAAI,cAAc,IAAI,SAAS,WAAW,IAAI,UAAU,GAAG;AAC7D,aAAO,CAAC,qBAAqB,QAAQ,IAAI;AAAA,IAC3C;AAEA,QAAI,IAAI,SAAS,GAAG;AAClB,UAAI,IAAI,YAAY,cAAc,SAAS,KAAK,cAAc,IAAI,YAAY,GAAG,UAAU,GAAG;AAC5F,eAAO,CAAC,QAAQ,qBAAqB,KAAK;AAAA,MAC5C;AACA,aAAO,CAAC,QAAQ,QAAQ,IAAI;AAAA,IAC9B;AAEA,WAAO,CAAC,QAAQ,qBAAqB,KAAK;AAAA,EAC5C,GAAG,CAAC,KAAK,aAAa,CAAC;AAEvB,QAAM,WAAW,QAAQ,OAAO,EAAE,WAAW,aAAa,IAAI,CAAC,WAAW,YAAY,CAAC;AAEvF,QAAM,wBACJ,kBAAkB,eAAe,mCAAmC,eAAe;AACrF,UAAQ,IAAI,gBAAgB,gBAAgB;AAC5C,QAAM,cAAc,kBAAkB,eAAe;AAErD,SAAO;AAAA,IACL;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF;AACF;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { useContext, useMemo } from 'react';\nimport DataTableContext from '../../DataTableContext';\nimport { SortableItemContext } from '../../parts/HoC/SortableItemContext';\nimport type { InternalTypescriptRow, DropIndicatorPosition } from '../../types/props';\n\nexport const useRowStyle = (\n  row: InternalTypescriptRow,\n): {\n  rowStyle: Record<string, unknown>;\n  shouldAppendDottedBorder: boolean;\n  dropIndicatorPosition: false | DropIndicatorPosition;\n  isDropValid: boolean;\n} => {\n  const { flattenedData } = useContext(DataTableContext);\n\n  const { draggableProps } = useContext(SortableItemContext);\n\n  // ---------------------------------------------------------------------------\n  // Border calculation\n  // ---------------------------------------------------------------------------\n  const [borderTop, borderBottom, shouldAppendDottedBorder]: [string, string, boolean] = useMemo(() => {\n    if (row.original.dimsumHeaderValue) {\n      return ['none', 'none', false];\n    }\n    if (row.isExpanded && row.original.subRows && row.depth === 0) {\n      return ['1px solid #EBEDF0', 'none', true];\n    }\n\n    if (row.depth >= 1) {\n      if (row.realIndex < flattenedData.length - 1 && flattenedData[row.realIndex + 1].depth === 0) {\n        return ['none', '2px solid #EBEDF0', false];\n      }\n      return ['none', 'none', true];\n    }\n\n    return ['none', '1px solid #EBEDF0', false];\n  }, [row, flattenedData]);\n\n  const rowStyle = useMemo(() => ({ borderTop, borderBottom }), [borderTop, borderBottom]);\n\n  const dropIndicatorPosition =\n    draggableProps && draggableProps.shouldShowDropIndicatorPosition && draggableProps.dropIndicatorPosition;\n  const isDropValid = draggableProps && draggableProps.isDropValid;\n\n  return {\n    rowStyle,\n    shouldAppendDottedBorder,\n    dropIndicatorPosition,\n    isDropValid,\n  };\n};\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,YAAY,eAAe;AACpC,OAAO,sBAAsB;AAC7B,SAAS,2BAA2B;AAG7B,MAAM,cAAc,CACzB,QAMG;AACH,QAAM,EAAE,cAAc,IAAI,WAAW,gBAAgB;AAErD,QAAM,EAAE,eAAe,IAAI,WAAW,mBAAmB;AAKzD,QAAM,CAAC,WAAW,cAAc,wBAAwB,IAA+B,QAAQ,MAAM;AACnG,QAAI,IAAI,SAAS,mBAAmB;AAClC,aAAO,CAAC,QAAQ,QAAQ,KAAK;AAAA,IAC/B;AACA,QAAI,IAAI,cAAc,IAAI,SAAS,WAAW,IAAI,UAAU,GAAG;AAC7D,aAAO,CAAC,qBAAqB,QAAQ,IAAI;AAAA,IAC3C;AAEA,QAAI,IAAI,SAAS,GAAG;AAClB,UAAI,IAAI,YAAY,cAAc,SAAS,KAAK,cAAc,IAAI,YAAY,GAAG,UAAU,GAAG;AAC5F,eAAO,CAAC,QAAQ,qBAAqB,KAAK;AAAA,MAC5C;AACA,aAAO,CAAC,QAAQ,QAAQ,IAAI;AAAA,IAC9B;AAEA,WAAO,CAAC,QAAQ,qBAAqB,KAAK;AAAA,EAC5C,GAAG,CAAC,KAAK,aAAa,CAAC;AAEvB,QAAM,WAAW,QAAQ,OAAO,EAAE,WAAW,aAAa,IAAI,CAAC,WAAW,YAAY,CAAC;AAEvF,QAAM,wBACJ,kBAAkB,eAAe,mCAAmC,eAAe;AACrF,QAAM,cAAc,kBAAkB,eAAe;AAErD,SAAO;AAAA,IACL;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF;AACF;",
   "names": []
 }

package/dist/esm/exported-related/Toolbar/Toolbar.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/exported-related/Toolbar/Toolbar.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { useCallback, useRef, useState } from 'react';\nimport { styled, css } from '@elliemae/ds-system';\nimport { DSButtonV2 } from '@elliemae/ds-button';\nimport { MoreOptionsVert } from '@elliemae/ds-icons';\nimport { useOnClickOutside, mergeRefs } from '@elliemae/ds-utilities';\nimport { DATA_TESTID } from '../../configs/constants';\nimport type { TypescriptCell } from '../../types/props';\n\nconst ToolbarBtns = styled.div`\n  & > .em-ds-toolbar {\n    box-shadow: none;\n  }\n`;\n\nconst boxShadow = css`\n  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.13), 0 1px 2px 0 rgba(0, 0, 0, 0.2);\n  & > .toolbar-trigger {\n    border: none;\n  }\n`;\nconst ToolbarWrapper = styled.div<{ isOpen: boolean }>`\n  display: flex;\n  align-items: center;\n  height: 36px;\n  margin-right: 1px;\n  pointer-events: all;\n\n  ${({ isOpen }) => isOpen && boxShadow}\n\n  & .toolbar-trigger:focus {\n    z-index: 8;\n  }\n`;\n\nconst StyledButton = styled(DSButtonV2)`\n  background-color: transparent;\n`;\n\nconst ToolbarPosition = styled.div`\n  display: flex;\n  justify-content: flex-end;\n  align-items: center;\n  pointer-events: none;\n  background: transparent;\n  height: 28px;\n  margin-top: 4px;\n  width: 100%;\n  padding-left: 4px;\n  outline: none;\n  &:hover {\n    z-index: 1;\n  }\n  :after {\n    content: '';\n    position: absolute;\n    left: 0px;\n    top: 4px;\n    bottom: 4px;\n    width: 1px;\n    background-color: neutral-080;\n    z-index: 7;\n  }\n`;\n\ninterface ToolbarProps {\n  isRowSelected?: boolean;\n  cell: TypescriptCell;\n  children: React.ReactNode;\n}\n\nexport const Toolbar: React.ComponentType<ToolbarProps> = ({ isRowSelected, cell, children }) => {\n  const [show, setShow] = useState(false);\n\n  const toolbarRef = useRef<HTMLButtonElement>(null);\n  const toolbarTriggerRef = useRef<HTMLButtonElement | null>(null);\n\n  const handleOnClickOutside = useCallback(() => setShow(false), []);\n\n  const handleOnClick: React.MouseEventHandler = useCallback(() => setShow((prev) => !prev), []);\n\n  const stopPropagation: React.MouseEventHandler = useCallback((e) => e.stopPropagation(), [])\n\n  useOnClickOutside(toolbarRef, handleOnClickOutside);\n\n  const onToolbarKeyDown = useCallback((e: React.KeyboardEvent) => {\n    if (e.code === 'Escape') {\n      setShow(false);\n      toolbarTriggerRef.current?.focus();\n    }\n    e.stopPropagation();\n  }, []);\n\n  const handleOnBlurToolBar = useCallback(() => {\n    setTimeout(() => {\n      if (!toolbarRef?.current?.contains?.(document.activeElement)) {\n        setShow(false);\n      }\n    });\n  }, []);\n\n  return (\n    <ToolbarPosition onBlur={handleOnBlurToolBar} ref={toolbarRef} tabIndex={-1}>\n      <ToolbarWrapper onKeyDown={onToolbarKeyDown} onClick={stopPropagation} isOpen={show}>\n        {show && <ToolbarBtns>{children}</ToolbarBtns>}\n        <StyledButton\n          buttonType=\"icon\"\n          className=\"toolbar-trigger\"\n          data-testid={DATA_TESTID.DATA_TABLE_TOOLBAR_TRIGGER}\n          innerRef={mergeRefs(toolbarTriggerRef, cell?.ref)}\n          onClick={handleOnClick}\n          tabIndex={isRowSelected === false ? -1 : 0}\n          aria-label=\"Row actions\"\n        >\n          <MoreOptionsVert />\n        </StyledButton>\n      </ToolbarWrapper>\n    </ToolbarPosition>\n  );\n};\n"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { useCallback, useRef, useState } from 'react';\nimport { styled, css } from '@elliemae/ds-system';\nimport { DSButtonV2 } from '@elliemae/ds-button';\nimport { MoreOptionsVert } from '@elliemae/ds-icons';\nimport { useOnClickOutside, mergeRefs } from '@elliemae/ds-utilities';\nimport { DATA_TESTID } from '../../configs/constants';\nimport type { TypescriptCell } from '../../types/props';\n\nconst ToolbarBtns = styled.div`\n  & > .em-ds-toolbar {\n    box-shadow: none;\n  }\n`;\n\nconst boxShadow = css`\n  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.13), 0 1px 2px 0 rgba(0, 0, 0, 0.2);\n  & > .toolbar-trigger {\n    border: none;\n  }\n`;\nconst ToolbarWrapper = styled.div<{ isOpen: boolean }>`\n  display: flex;\n  align-items: center;\n  height: 36px;\n  margin-right: 1px;\n  pointer-events: all;\n\n  ${({ isOpen }) => isOpen && boxShadow}\n\n  & .toolbar-trigger:focus {\n    z-index: 8;\n  }\n`;\n\nconst StyledButton = styled(DSButtonV2)`\n  background-color: transparent;\n`;\n\nconst ToolbarPosition = styled.div`\n  display: flex;\n  justify-content: flex-end;\n  align-items: center;\n  pointer-events: none;\n  background: transparent;\n  height: 28px;\n  margin-top: 4px;\n  width: 100%;\n  padding-left: 4px;\n  outline: none;\n  &:hover {\n    z-index: 1;\n  }\n  :after {\n    content: '';\n    position: absolute;\n    left: 0px;\n    top: 4px;\n    bottom: 4px;\n    width: 1px;\n    background-color: neutral-080;\n    z-index: 7;\n  }\n`;\n\ninterface ToolbarProps {\n  isRowSelected?: boolean;\n  cell: TypescriptCell;\n  children: React.ReactNode;\n}\n\nexport const Toolbar: React.ComponentType<ToolbarProps> = ({ isRowSelected, cell, children }) => {\n  const [show, setShow] = useState(false);\n\n  const toolbarRef = useRef<HTMLButtonElement>(null);\n  const toolbarTriggerRef = useRef<HTMLButtonElement | null>(null);\n\n  const handleOnClickOutside = useCallback(() => setShow(false), []);\n\n  const handleOnClick: React.MouseEventHandler = useCallback(() => setShow((prev) => !prev), []);\n\n  const stopPropagation: React.MouseEventHandler = useCallback((e) => e.stopPropagation(), []);\n\n  useOnClickOutside(toolbarRef, handleOnClickOutside);\n\n  const onToolbarKeyDown = useCallback((e: React.KeyboardEvent) => {\n    if (e.code === 'Escape') {\n      setShow(false);\n      toolbarTriggerRef.current?.focus();\n    }\n    e.stopPropagation();\n  }, []);\n\n  const handleOnBlurToolBar = useCallback(() => {\n    setTimeout(() => {\n      if (!toolbarRef?.current?.contains?.(document.activeElement)) {\n        setShow(false);\n      }\n    });\n  }, []);\n\n  return (\n    <ToolbarPosition onBlur={handleOnBlurToolBar} ref={toolbarRef} tabIndex={-1}>\n      <ToolbarWrapper onKeyDown={onToolbarKeyDown} onClick={stopPropagation} isOpen={show}>\n        {show && <ToolbarBtns>{children}</ToolbarBtns>}\n        <StyledButton\n          buttonType=\"icon\"\n          className=\"toolbar-trigger\"\n          data-testid={DATA_TESTID.DATA_TABLE_TOOLBAR_TRIGGER}\n          innerRef={mergeRefs(toolbarTriggerRef, cell?.ref)}\n          onClick={handleOnClick}\n          tabIndex={isRowSelected === false ? -1 : 0}\n          aria-label=\"Row actions\"\n        >\n          <MoreOptionsVert />\n        </StyledButton>\n      </ToolbarWrapper>\n    </ToolbarPosition>\n  );\n};\n"],
   "mappings": "AAAA,YAAY,WAAW;ACsGjB,SACW,KADX;AAtGN,SAAgB,aAAa,QAAQ,gBAAgB;AACrD,SAAS,QAAQ,WAAW;AAC5B,SAAS,kBAAkB;AAC3B,SAAS,uBAAuB;AAChC,SAAS,mBAAmB,iBAAiB;AAC7C,SAAS,mBAAmB;AAG5B,MAAM,cAAc,OAAO;AAAA;AAAA;AAAA;AAAA;AAM3B,MAAM,YAAY;AAAA;AAAA;AAAA;AAAA;AAAA;AAMlB,MAAM,iBAAiB,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAO1B,CAAC,EAAE,OAAO,MAAM,UAAU;AAAA;AAAA;AAAA;AAAA;AAAA;AAO9B,MAAM,eAAe,OAAO,UAAU;AAAA;AAAA;AAItC,MAAM,kBAAkB,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAgCxB,MAAM,UAA6C,CAAC,EAAE,eAAe,MAAM,SAAS,MAAM;AAC/F,QAAM,CAAC,MAAM,OAAO,IAAI,SAAS,KAAK;AAEtC,QAAM,aAAa,OAA0B,IAAI;AACjD,QAAM,oBAAoB,OAAiC,IAAI;AAE/D,QAAM,uBAAuB,YAAY,MAAM,QAAQ,KAAK,GAAG,CAAC,CAAC;AAEjE,QAAM,gBAAyC,YAAY,MAAM,QAAQ,CAAC,SAAS,CAAC,IAAI,GAAG,CAAC,CAAC;AAE7F,QAAM,kBAA2C,YAAY,CAAC,MAAM,EAAE,gBAAgB,GAAG,CAAC,CAAC;AAE3F,oBAAkB,YAAY,oBAAoB;AAElD,QAAM,mBAAmB,YAAY,CAAC,MAA2B;AAC/D,QAAI,EAAE,SAAS,UAAU;AACvB,cAAQ,KAAK;AACb,wBAAkB,SAAS,MAAM;AAAA,IACnC;AACA,MAAE,gBAAgB;AAAA,EACpB,GAAG,CAAC,CAAC;AAEL,QAAM,sBAAsB,YAAY,MAAM;AAC5C,eAAW,MAAM;AACf,UAAI,CAAC,YAAY,SAAS,WAAW,SAAS,aAAa,GAAG;AAC5D,gBAAQ,KAAK;AAAA,MACf;AAAA,IACF,CAAC;AAAA,EACH,GAAG,CAAC,CAAC;AAEL,SACE,oBAAC,mBAAgB,QAAQ,qBAAqB,KAAK,YAAY,UAAU,IACvE,+BAAC,kBAAe,WAAW,kBAAkB,SAAS,iBAAiB,QAAQ,MAC5E;AAAA,YAAQ,oBAAC,eAAa,UAAS;AAAA,IAChC;AAAA,MAAC;AAAA;AAAA,QACC,YAAW;AAAA,QACX,WAAU;AAAA,QACV,eAAa,YAAY;AAAA,QACzB,UAAU,UAAU,mBAAmB,MAAM,GAAG;AAAA,QAChD,SAAS;AAAA,QACT,UAAU,kBAAkB,QAAQ,KAAK;AAAA,QACzC,cAAW;AAAA,QAEX,8BAAC,mBAAgB;AAAA;AAAA,IACnB;AAAA,KACF,GACF;AAEJ;",
   "names": []
 }

package/dist/esm/parts/Row.js

@@ -1,20 +1,12 @@
 import * as React from "react";
 import { jsx } from "react/jsx-runtime";
 import { useContext } from "react";
+import { mergeRefs } from "@elliemae/ds-utilities";
 import { styled } from "@elliemae/ds-system";
 import DataTableContext from "../DataTableContext";
-import { setMultipleRefs } from "../helpers";
 import { SortableItemContext } from "./HoC/SortableItemContext";
 import { withDnDSortableRowContext } from "./HoC/withDnDSortableRowContext";
 import { RowVariantMapItem } from "./RowVariants";
-const setItemRefs = (measureRef, draggableRef, ref) => {
-  const refsToSet = [];
-  if (measureRef)
-    refsToSet.push(measureRef);
-  if (draggableRef)
-    refsToSet.push(draggableRef);
-  setMultipleRefs(...refsToSet)(ref);
-};
 const StyledRow = styled("div")`
   cursor: ${({ isDisabled }) => isDisabled ? "not-allowed" : "normal"};
 `;
@@ -33,7 +25,7 @@ const Row = (props) => {
     {
       isDisabled: disabledRows[row.uid],
       style: !isDragOverlay ? itemWrapperStyle : {},
-      ref: (ref) => setItemRefs(measureRef, draggableRef, ref),
+      ref: mergeRefs(measureRef, draggableRef),
       children: /* @__PURE__ */ jsx(
         RowVariantMapItem,
         {

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

@@ -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 React, { useContext } from 'react';\nimport { styled } from '@elliemae/ds-system';\nimport DataTableContext from '../DataTableContext';\nimport { setMultipleRefs } from '../helpers';\nimport { SortableItemContext } from './HoC/SortableItemContext';\nimport { withDnDSortableRowContext } from './HoC/withDnDSortableRowContext';\nimport { RowVariantMapItem } from './RowVariants';\n\n// Sortable Items needs to update\n//   - the virtual list ref (for react-virtual requirement)\n//   - (conditionally) draggableProps.setNodeRef for drag and drop of rows\nconst setItemRefs = (measureRef, draggableRef, ref) => {\n  const refsToSet = [];\n  if (measureRef) refsToSet.push(measureRef);\n  if (draggableRef) refsToSet.push(draggableRef);\n  setMultipleRefs(...refsToSet)(ref);\n};\n\nconst StyledRow = styled('div')`\n  cursor: ${({ isDisabled }) => (isDisabled ? 'not-allowed' : 'normal')};\n`;\n\nexport const Row = (props) => {\n  const { row, measureRef, itemWrapperStyle, isDragOverlay } = props;\n  const ctx = useContext(DataTableContext);\n  const {\n    tableProps: { disabledRows },\n    focusedRowId,\n    drilldownRowId,\n  } = ctx;\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      ref={(ref) => setItemRefs(measureRef, draggableRef, ref)}\n    >\n      <RowVariantMapItem\n        row={row}\n        itemIndex={row.realIndex}\n        isDragOverlay={isDragOverlay}\n        ctx={ctx}\n        focusedRowId={focusedRowId}\n        drilldownRowId={drilldownRowId}\n      />\n    </StyledRow>\n  );\n};\n\nconst RowWithContext = withDnDSortableRowContext(Row);\nexport { RowWithContext };\nexport default RowWithContext;\n"],
-  "mappings": "AAAA,YAAY,WAAW;ACuCjB;AAvCN,SAAgB,kBAAkB;AAClC,SAAS,cAAc;AACvB,OAAO,sBAAsB;AAC7B,SAAS,uBAAuB;AAChC,SAAS,2BAA2B;AACpC,SAAS,iCAAiC;AAC1C,SAAS,yBAAyB;AAKlC,MAAM,cAAc,CAAC,YAAY,cAAc,QAAQ;AACrD,QAAM,YAAY,CAAC;AACnB,MAAI;AAAY,cAAU,KAAK,UAAU;AACzC,MAAI;AAAc,cAAU,KAAK,YAAY;AAC7C,kBAAgB,GAAG,SAAS,EAAE,GAAG;AACnC;AAEA,MAAM,YAAY,OAAO,KAAK;AAAA,YAClB,CAAC,EAAE,WAAW,MAAO,aAAa,gBAAgB;AAAA;AAGvD,MAAM,MAAM,CAAC,UAAU;AAC5B,QAAM,EAAE,KAAK,YAAY,kBAAkB,cAAc,IAAI;AAC7D,QAAM,MAAM,WAAW,gBAAgB;AACvC,QAAM;AAAA,IACJ,YAAY,EAAE,aAAa;AAAA,IAC3B;AAAA,IACA;AAAA,EACF,IAAI;AAEJ,QAAM,EAAE,eAAe,IAAI,WAAW,mBAAmB;AACzD,QAAM,eAAe,kBAAkB,eAAe;AACtD,SACE;AAAA,IAAC;AAAA;AAAA,MACC,YAAY,aAAa,IAAI;AAAA,MAC7B,OAAO,CAAC,gBAAgB,mBAAmB,CAAC;AAAA,MAC5C,KAAK,CAAC,QAAQ,YAAY,YAAY,cAAc,GAAG;AAAA,MAEvD;AAAA,QAAC;AAAA;AAAA,UACC;AAAA,UACA,WAAW,IAAI;AAAA,UACf;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA;AAAA,MACF;AAAA;AAAA,EACF;AAEJ;AAEA,MAAM,iBAAiB,0BAA0B,GAAG;AAEpD,IAAO,cAAQ;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { useContext } from 'react';\nimport { mergeRefs } from '@elliemae/ds-utilities';\nimport { styled } from '@elliemae/ds-system';\nimport DataTableContext from '../DataTableContext';\nimport { SortableItemContext } from './HoC/SortableItemContext';\nimport { withDnDSortableRowContext } from './HoC/withDnDSortableRowContext';\nimport { RowVariantMapItem } from './RowVariants';\n\nconst StyledRow = styled('div')`\n  cursor: ${({ isDisabled }) => (isDisabled ? 'not-allowed' : 'normal')};\n`;\n\nexport const Row = (props) => {\n  const { row, measureRef, itemWrapperStyle, isDragOverlay } = props;\n  const ctx = useContext(DataTableContext);\n  const {\n    tableProps: { disabledRows },\n    focusedRowId,\n    drilldownRowId,\n  } = ctx;\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      ref={mergeRefs(measureRef, draggableRef)}\n    >\n      <RowVariantMapItem\n        row={row}\n        itemIndex={row.realIndex}\n        isDragOverlay={isDragOverlay}\n        ctx={ctx}\n        focusedRowId={focusedRowId}\n        drilldownRowId={drilldownRowId}\n      />\n    </StyledRow>\n  );\n};\n\nconst RowWithContext = withDnDSortableRowContext(Row);\nexport { RowWithContext };\nexport default RowWithContext;\n"],
+  "mappings": "AAAA,YAAY,WAAW;AC6BjB;AA7BN,SAAgB,kBAAkB;AAClC,SAAS,iBAAiB;AAC1B,SAAS,cAAc;AACvB,OAAO,sBAAsB;AAC7B,SAAS,2BAA2B;AACpC,SAAS,iCAAiC;AAC1C,SAAS,yBAAyB;AAElC,MAAM,YAAY,OAAO,KAAK;AAAA,YAClB,CAAC,EAAE,WAAW,MAAO,aAAa,gBAAgB;AAAA;AAGvD,MAAM,MAAM,CAAC,UAAU;AAC5B,QAAM,EAAE,KAAK,YAAY,kBAAkB,cAAc,IAAI;AAC7D,QAAM,MAAM,WAAW,gBAAgB;AACvC,QAAM;AAAA,IACJ,YAAY,EAAE,aAAa;AAAA,IAC3B;AAAA,IACA;AAAA,EACF,IAAI;AAEJ,QAAM,EAAE,eAAe,IAAI,WAAW,mBAAmB;AACzD,QAAM,eAAe,kBAAkB,eAAe;AACtD,SACE;AAAA,IAAC;AAAA;AAAA,MACC,YAAY,aAAa,IAAI;AAAA,MAC7B,OAAO,CAAC,gBAAgB,mBAAmB,CAAC;AAAA,MAC5C,KAAK,UAAU,YAAY,YAAY;AAAA,MAEvC;AAAA,QAAC;AAAA;AAAA,UACC;AAAA,UACA,WAAW,IAAI;AAAA,UACf;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA;AAAA,MACF;AAAA;AAAA,EACF;AAEJ;AAEA,MAAM,iBAAiB,0BAA0B,GAAG;AAEpD,IAAO,cAAQ;",
   "names": []
 }

package/dist/esm/parts/Rows.js

@@ -1,6 +1,6 @@
 import * as React from "react";
 import { Fragment, jsx } from "react/jsx-runtime";
-import { useContext, useMemo } from "react";
+import { useContext } from "react";
 import { RowWithContext as Row } from "./Row";
 import { DataTableContext } from "../DataTableContext";
 import { withConditionalDnDRowContext } from "./HoC/withConditionalDnDRowContext";
@@ -15,32 +15,28 @@ const Rows = () => {
   } = useContext(DataTableContext);
   const ctx = useContext(DnDTreeContext);
   const items = ctx?.visibleItems || flattenedData;
-  const PureVirtualizedRows = useMemo(
-    () => /* @__PURE__ */ jsx(Fragment, { children: virtualItems.map((virtualItem) => {
-      const { index, measureRef, start } = virtualItem;
-      const row = items[index];
-      if (!row)
-        return null;
-      addCellData(row, visibleColumns);
-      const style = {
-        position: "absolute",
-        top: `${start}px`,
-        left: 0,
-        width: totalColumnsWidth
-      };
-      const rowProps = {
-        key: `ds-table-row-${row.uid}`,
-        row,
-        measureRef,
-        index,
-        itemIndex: index,
-        itemWrapperStyle: style
-      };
-      return /* @__PURE__ */ jsx(Row, { ...rowProps });
-    }) }),
-    [virtualItems, items, visibleColumns, totalColumnsWidth]
-  );
-  return PureVirtualizedRows;
+  return /* @__PURE__ */ jsx(Fragment, { children: virtualItems.map((virtualItem) => {
+    const { index, measureRef, start } = virtualItem;
+    const row = items[index];
+    if (!row)
+      return null;
+    addCellData(row, visibleColumns);
+    const style = {
+      position: "absolute",
+      top: `${start}px`,
+      left: 0,
+      width: totalColumnsWidth
+    };
+    const rowProps = {
+      key: `ds-table-row-${row.uid}`,
+      row,
+      measureRef,
+      index,
+      itemIndex: index,
+      itemWrapperStyle: style
+    };
+    return /* @__PURE__ */ jsx(Row, { ...rowProps });
+  }) });
 };
 Rows.propTypes = {};
 const RowsWithContext = withConditionalDnDRowContext(Rows);

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/parts/Rows.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable no-underscore-dangle */\nimport React, { useContext, useMemo } from 'react';\n\nimport { RowWithContext as Row } from './Row';\nimport { DataTableContext } from '../DataTableContext';\nimport { withConditionalDnDRowContext } from './HoC/withConditionalDnDRowContext';\nimport { DnDTreeContext } from './HoC/DnDTreeContext';\nimport { addCellData } from '../helpers';\n\nconst Rows = (): JSX.Element => {\n  const {\n    virtualListHelpers: { virtualItems },\n    layoutHelpers: { totalColumnsWidth },\n    flattenedData,\n    visibleColumns,\n  } = useContext(DataTableContext);\n\n  const ctx = useContext(DnDTreeContext);\n\n  const items = ctx?.visibleItems || flattenedData;\n\n  const PureVirtualizedRows = useMemo(\n    () => (\n      <>\n        {virtualItems.map((virtualItem) => {\n          const { index, measureRef, start } = virtualItem;\n          const row = items[index];\n          if (!row) return null;\n          addCellData(row, visibleColumns);\n          const style = {\n            position: 'absolute',\n            top: `${start}px`,\n            left: 0,\n            width: totalColumnsWidth,\n          };\n          const rowProps = {\n            key: `ds-table-row-${row.uid}`,\n            row,\n            measureRef,\n            index, // this is consumed by the DnD HOC\n            itemIndex: index,\n            itemWrapperStyle: style,\n          };\n          return <Row {...rowProps} />;\n        })}\n      </>\n    ),\n    [virtualItems, items, visibleColumns, totalColumnsWidth],\n  );\n\n  return PureVirtualizedRows;\n};\n\nRows.propTypes = {};\n\nexport const RowsWithContext = withConditionalDnDRowContext(Rows);\nexport default RowsWithContext;\n"],
-  "mappings": "AAAA,YAAY,WAAW;ACuBjB,mBAoBW,WApBX;AAtBN,SAAgB,YAAY,eAAe;AAE3C,SAAS,kBAAkB,WAAW;AACtC,SAAS,wBAAwB;AACjC,SAAS,oCAAoC;AAC7C,SAAS,sBAAsB;AAC/B,SAAS,mBAAmB;AAE5B,MAAM,OAAO,MAAmB;AAC9B,QAAM;AAAA,IACJ,oBAAoB,EAAE,aAAa;AAAA,IACnC,eAAe,EAAE,kBAAkB;AAAA,IACnC;AAAA,IACA;AAAA,EACF,IAAI,WAAW,gBAAgB;AAE/B,QAAM,MAAM,WAAW,cAAc;AAErC,QAAM,QAAQ,KAAK,gBAAgB;AAEnC,QAAM,sBAAsB;AAAA,IAC1B,MACE,gCACG,uBAAa,IAAI,CAAC,gBAAgB;AACjC,YAAM,EAAE,OAAO,YAAY,MAAM,IAAI;AACrC,YAAM,MAAM,MAAM;AAClB,UAAI,CAAC;AAAK,eAAO;AACjB,kBAAY,KAAK,cAAc;AAC/B,YAAM,QAAQ;AAAA,QACZ,UAAU;AAAA,QACV,KAAK,GAAG;AAAA,QACR,MAAM;AAAA,QACN,OAAO;AAAA,MACT;AACA,YAAM,WAAW;AAAA,QACf,KAAK,gBAAgB,IAAI;AAAA,QACzB;AAAA,QACA;AAAA,QACA;AAAA,QACA,WAAW;AAAA,QACX,kBAAkB;AAAA,MACpB;AACA,aAAO,oBAAC,OAAK,GAAG,UAAU;AAAA,IAC5B,CAAC,GACH;AAAA,IAEF,CAAC,cAAc,OAAO,gBAAgB,iBAAiB;AAAA,EACzD;AAEA,SAAO;AACT;AAEA,KAAK,YAAY,CAAC;AAEX,MAAM,kBAAkB,6BAA6B,IAAI;AAChE,IAAO,eAAQ;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable no-underscore-dangle */\nimport React, { useContext, useMemo } from 'react';\n\nimport { RowWithContext as Row } from './Row';\nimport { DataTableContext } from '../DataTableContext';\nimport { withConditionalDnDRowContext } from './HoC/withConditionalDnDRowContext';\nimport { DnDTreeContext } from './HoC/DnDTreeContext';\nimport { addCellData } from '../helpers';\n\nconst Rows = (): JSX.Element => {\n  const {\n    virtualListHelpers: { virtualItems },\n    layoutHelpers: { totalColumnsWidth },\n    flattenedData,\n    visibleColumns,\n  } = useContext(DataTableContext);\n\n  const ctx = useContext(DnDTreeContext);\n\n  const items = ctx?.visibleItems || flattenedData;\n\n  return (\n    <>\n      {virtualItems.map((virtualItem) => {\n        const { index, measureRef, start } = virtualItem;\n        const row = items[index];\n        if (!row) return null;\n        addCellData(row, visibleColumns);\n        const style = {\n          position: 'absolute',\n          top: `${start}px`,\n          left: 0,\n          width: totalColumnsWidth,\n        };\n        const rowProps = {\n          key: `ds-table-row-${row.uid}`,\n          row,\n          measureRef,\n          index, // this is consumed by the DnD HOC\n          itemIndex: index,\n          itemWrapperStyle: style,\n        };\n        return <Row {...rowProps} />;\n      })}\n    </>\n  );\n};\n\nRows.propTypes = {};\n\nexport const RowsWithContext = withConditionalDnDRowContext(Rows);\nexport default RowsWithContext;\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACsBnB,mBAoBW,WApBX;AArBJ,SAAgB,kBAA2B;AAE3C,SAAS,kBAAkB,WAAW;AACtC,SAAS,wBAAwB;AACjC,SAAS,oCAAoC;AAC7C,SAAS,sBAAsB;AAC/B,SAAS,mBAAmB;AAE5B,MAAM,OAAO,MAAmB;AAC9B,QAAM;AAAA,IACJ,oBAAoB,EAAE,aAAa;AAAA,IACnC,eAAe,EAAE,kBAAkB;AAAA,IACnC;AAAA,IACA;AAAA,EACF,IAAI,WAAW,gBAAgB;AAE/B,QAAM,MAAM,WAAW,cAAc;AAErC,QAAM,QAAQ,KAAK,gBAAgB;AAEnC,SACE,gCACG,uBAAa,IAAI,CAAC,gBAAgB;AACjC,UAAM,EAAE,OAAO,YAAY,MAAM,IAAI;AACrC,UAAM,MAAM,MAAM;AAClB,QAAI,CAAC;AAAK,aAAO;AACjB,gBAAY,KAAK,cAAc;AAC/B,UAAM,QAAQ;AAAA,MACZ,UAAU;AAAA,MACV,KAAK,GAAG;AAAA,MACR,MAAM;AAAA,MACN,OAAO;AAAA,IACT;AACA,UAAM,WAAW;AAAA,MACf,KAAK,gBAAgB,IAAI;AAAA,MACzB;AAAA,MACA;AAAA,MACA;AAAA,MACA,WAAW;AAAA,MACX,kBAAkB;AAAA,IACpB;AACA,WAAO,oBAAC,OAAK,GAAG,UAAU;AAAA,EAC5B,CAAC,GACH;AAEJ;AAEA,KAAK,YAAY,CAAC;AAEX,MAAM,kBAAkB,6BAA6B,IAAI;AAChE,IAAO,eAAQ;",
   "names": []
 }

package/dist/esm/parts/TableContent.js

@@ -1,6 +1,6 @@
 import * as React from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
-import { useContext, useMemo, useCallback } from "react";
+import { useContext, useCallback } from "react";
 import { StyledTableWrapper, StyledDataTableContentWrapper } from "../styled";
 import DataTableContext from "../DataTableContext";
 import { Pagination } from "../addons/Pagination";
@@ -21,34 +21,30 @@ const TableContent = () => {
     [setIsShiftPressed]
   );
   const handleOnKeyUp = useCallback(() => setIsShiftPressed(false), [setIsShiftPressed]);
-  const PureTableContent = useMemo(
-    () => /* @__PURE__ */ jsxs(
-      StyledDataTableContentWrapper,
-      {
-        "data-testid": DATA_TESTID.DATA_TABLE_CONTENT_WRAPPER,
-        noSelectionAllowed: isShiftPressed,
-        onKeyDown: handleOnKeyDown,
-        onKeyUp: handleOnKeyUp,
-        rows: pagination ? ["1fr", "auto"] : ["auto"],
-        cols: ["100%"],
-        children: [
-          /* @__PURE__ */ jsx(
-            StyledTableWrapper,
-            {
-              role: "table",
-              "aria-rowcount": allDataFlattened.length,
-              "aria-colcount": visibleColumns.length,
-              "data-testid": DATA_TESTID.DATA_TABLE_TABLE,
-              children: /* @__PURE__ */ jsx(VirtualRowsList, {})
-            }
-          ),
-          pagination ? /* @__PURE__ */ jsx(Pagination, {}) : null
-        ]
-      }
-    ),
-    [isShiftPressed, handleOnKeyDown, handleOnKeyUp, pagination, allDataFlattened.length, visibleColumns.length]
+  return /* @__PURE__ */ jsxs(
+    StyledDataTableContentWrapper,
+    {
+      "data-testid": DATA_TESTID.DATA_TABLE_CONTENT_WRAPPER,
+      noSelectionAllowed: isShiftPressed,
+      onKeyDown: handleOnKeyDown,
+      onKeyUp: handleOnKeyUp,
+      rows: pagination ? ["1fr", "auto"] : ["auto"],
+      cols: ["100%"],
+      children: [
+        /* @__PURE__ */ jsx(
+          StyledTableWrapper,
+          {
+            role: "table",
+            "aria-rowcount": allDataFlattened.length,
+            "aria-colcount": visibleColumns.length,
+            "data-testid": DATA_TESTID.DATA_TABLE_TABLE,
+            children: /* @__PURE__ */ jsx(VirtualRowsList, {})
+          }
+        ),
+        pagination ? /* @__PURE__ */ jsx(Pagination, {}) : null
+      ]
+    }
   );
-  return PureTableContent;
 };
 var TableContent_default = TableContent;
 export {

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/parts/TableContent.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { useContext, useMemo, useCallback } from 'react';\n\nimport { StyledTableWrapper, StyledDataTableContentWrapper } from '../styled';\nimport DataTableContext from '../DataTableContext';\nimport { Pagination } from '../addons/Pagination';\nimport { VirtualRowsList } from './VirtualRowsList';\nimport { DATA_TESTID } from '../configs/constants';\n\nexport const TableContent = () => {\n  const {\n    tableProps: { pagination },\n    allDataFlattened,\n    visibleColumns,\n    isShiftPressed,\n    setIsShiftPressed,\n  } = useContext(DataTableContext);\n\n  const handleOnKeyDown: React.KeyboardEventHandler = useCallback(\n    (e) => {\n      setIsShiftPressed(e.shiftKey);\n    },\n    [setIsShiftPressed],\n  );\n\n  const handleOnKeyUp = useCallback(() => setIsShiftPressed(false), [setIsShiftPressed]);\n\n  const PureTableContent = useMemo(\n    () => (\n      <StyledDataTableContentWrapper\n        data-testid={DATA_TESTID.DATA_TABLE_CONTENT_WRAPPER}\n        noSelectionAllowed={isShiftPressed}\n        onKeyDown={handleOnKeyDown}\n        onKeyUp={handleOnKeyUp}\n        rows={pagination ? ['1fr', 'auto'] : ['auto']}\n        cols={['100%']}\n      >\n        <StyledTableWrapper\n          role=\"table\"\n          aria-rowcount={allDataFlattened.length}\n          aria-colcount={visibleColumns.length}\n          data-testid={DATA_TESTID.DATA_TABLE_TABLE}\n        >\n          <VirtualRowsList />\n        </StyledTableWrapper>\n        {pagination ? <Pagination /> : null}\n      </StyledDataTableContentWrapper>\n    ),\n    [isShiftPressed, handleOnKeyDown, handleOnKeyUp, pagination, allDataFlattened.length, visibleColumns.length],\n  );\n\n  return PureTableContent;\n};\nexport default TableContent;\n"],
-  "mappings": "AAAA,YAAY,WAAW;AC4BjB,SAcI,KAdJ;AA5BN,SAAgB,YAAY,SAAS,mBAAmB;AAExD,SAAS,oBAAoB,qCAAqC;AAClE,OAAO,sBAAsB;AAC7B,SAAS,kBAAkB;AAC3B,SAAS,uBAAuB;AAChC,SAAS,mBAAmB;AAErB,MAAM,eAAe,MAAM;AAChC,QAAM;AAAA,IACJ,YAAY,EAAE,WAAW;AAAA,IACzB;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,IAAI,WAAW,gBAAgB;AAE/B,QAAM,kBAA8C;AAAA,IAClD,CAAC,MAAM;AACL,wBAAkB,EAAE,QAAQ;AAAA,IAC9B;AAAA,IACA,CAAC,iBAAiB;AAAA,EACpB;AAEA,QAAM,gBAAgB,YAAY,MAAM,kBAAkB,KAAK,GAAG,CAAC,iBAAiB,CAAC;AAErF,QAAM,mBAAmB;AAAA,IACvB,MACE;AAAA,MAAC;AAAA;AAAA,QACC,eAAa,YAAY;AAAA,QACzB,oBAAoB;AAAA,QACpB,WAAW;AAAA,QACX,SAAS;AAAA,QACT,MAAM,aAAa,CAAC,OAAO,MAAM,IAAI,CAAC,MAAM;AAAA,QAC5C,MAAM,CAAC,MAAM;AAAA,QAEb;AAAA;AAAA,YAAC;AAAA;AAAA,cACC,MAAK;AAAA,cACL,iBAAe,iBAAiB;AAAA,cAChC,iBAAe,eAAe;AAAA,cAC9B,eAAa,YAAY;AAAA,cAEzB,8BAAC,mBAAgB;AAAA;AAAA,UACnB;AAAA,UACC,aAAa,oBAAC,cAAW,IAAK;AAAA;AAAA;AAAA,IACjC;AAAA,IAEF,CAAC,gBAAgB,iBAAiB,eAAe,YAAY,iBAAiB,QAAQ,eAAe,MAAM;AAAA,EAC7G;AAEA,SAAO;AACT;AACA,IAAO,uBAAQ;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { useContext, useCallback } from 'react';\n\nimport { StyledTableWrapper, StyledDataTableContentWrapper } from '../styled';\nimport DataTableContext from '../DataTableContext';\nimport { Pagination } from '../addons/Pagination';\nimport { VirtualRowsList } from './VirtualRowsList';\nimport { DATA_TESTID } from '../configs/constants';\n\nexport const TableContent = () => {\n  const {\n    tableProps: { pagination },\n    allDataFlattened,\n    visibleColumns,\n    isShiftPressed,\n    setIsShiftPressed,\n  } = useContext(DataTableContext);\n\n  const handleOnKeyDown: React.KeyboardEventHandler = useCallback(\n    (e) => {\n      setIsShiftPressed(e.shiftKey);\n    },\n    [setIsShiftPressed],\n  );\n\n  const handleOnKeyUp = useCallback(() => setIsShiftPressed(false), [setIsShiftPressed]);\n\n  return (\n    <StyledDataTableContentWrapper\n      data-testid={DATA_TESTID.DATA_TABLE_CONTENT_WRAPPER}\n      noSelectionAllowed={isShiftPressed}\n      onKeyDown={handleOnKeyDown}\n      onKeyUp={handleOnKeyUp}\n      rows={pagination ? ['1fr', 'auto'] : ['auto']}\n      cols={['100%']}\n    >\n      <StyledTableWrapper\n        role=\"table\"\n        aria-rowcount={allDataFlattened.length}\n        aria-colcount={visibleColumns.length}\n        data-testid={DATA_TESTID.DATA_TABLE_TABLE}\n      >\n        <VirtualRowsList />\n      </StyledTableWrapper>\n      {pagination ? <Pagination /> : null}\n    </StyledDataTableContentWrapper>\n  );\n};\nexport default TableContent;\n"],
+  "mappings": "AAAA,YAAY,WAAW;AC2BnB,SAcI,KAdJ;AA3BJ,SAAgB,YAAY,mBAAmB;AAE/C,SAAS,oBAAoB,qCAAqC;AAClE,OAAO,sBAAsB;AAC7B,SAAS,kBAAkB;AAC3B,SAAS,uBAAuB;AAChC,SAAS,mBAAmB;AAErB,MAAM,eAAe,MAAM;AAChC,QAAM;AAAA,IACJ,YAAY,EAAE,WAAW;AAAA,IACzB;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,IAAI,WAAW,gBAAgB;AAE/B,QAAM,kBAA8C;AAAA,IAClD,CAAC,MAAM;AACL,wBAAkB,EAAE,QAAQ;AAAA,IAC9B;AAAA,IACA,CAAC,iBAAiB;AAAA,EACpB;AAEA,QAAM,gBAAgB,YAAY,MAAM,kBAAkB,KAAK,GAAG,CAAC,iBAAiB,CAAC;AAErF,SACE;AAAA,IAAC;AAAA;AAAA,MACC,eAAa,YAAY;AAAA,MACzB,oBAAoB;AAAA,MACpB,WAAW;AAAA,MACX,SAAS;AAAA,MACT,MAAM,aAAa,CAAC,OAAO,MAAM,IAAI,CAAC,MAAM;AAAA,MAC5C,MAAM,CAAC,MAAM;AAAA,MAEb;AAAA;AAAA,UAAC;AAAA;AAAA,YACC,MAAK;AAAA,YACL,iBAAe,iBAAiB;AAAA,YAChC,iBAAe,eAAe;AAAA,YAC9B,eAAa,YAAY;AAAA,YAEzB,8BAAC,mBAAgB;AAAA;AAAA,QACnB;AAAA,QACC,aAAa,oBAAC,cAAW,IAAK;AAAA;AAAA;AAAA,EACjC;AAEJ;AACA,IAAO,uBAAQ;",
   "names": []
 }

package/dist/esm/styled.js

@@ -22,6 +22,9 @@ const StyledFocusWithin = styled(Grid)`
   :focus-within {
     ${(props) => props.hideFocus ? "" : styledFocusCss(props)}
   }
+  svg {
+    fill: ${(props) => props.theme.colors.brand["800"]};
+  }
 `;
 const StyledDataTableWrapper = styled(Grid)`
   width: ${(props) => sizeToCss(props.width ?? " 100%")};

package/dist/esm/styled.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../scripts/build/transpile/react-shim.js", "../../src/styled.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable max-lines */\nimport { styled } from '@elliemae/ds-system';\nimport { Grid } from '@elliemae/ds-grid';\nimport { EditPencil } from '@elliemae/ds-icons';\nimport { sizeToCss, cellPadding, columnPadding } from './helpers';\nimport { ZIndexDataTable } from './configs/zIndexInternalConfig';\nimport { ColsLayoutStyle } from './configs/constants';\n\ninterface WidthAndHeight {\n  width?: string | number;\n  height?: string | number;\n}\n\nconst styledFocusCss = ({ theme }, color?: string) => `\n&:after {\n  display: block;\n  content: ' ';\n  position: absolute;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  border: 2px solid ${color ?? theme.colors.brand[700]};\n  pointer-events: none;\n  z-index: ${ZIndexDataTable.FOCUS_BORDER};\n}`;\n\nexport const StyledFocusWithin = styled(Grid)`\n  :focus-within {\n    ${(props) => (props.hideFocus ? '' : styledFocusCss(props))}\n  }\n`;\n\nexport const StyledDataTableWrapper = styled(Grid)<WidthAndHeight>`\n  width: ${(props) => sizeToCss(props.width ?? ' 100%')};\n  height: ${(props) => sizeToCss(props.height ?? ' 100%')};\n`;\n\nexport const StyledDataTableContentWrapper = styled(Grid)<WidthAndHeight & { noSelectionAllowed: boolean }>`\n  user-select: ${({ noSelectionAllowed }) => (noSelectionAllowed ? 'none' : 'auto')};\n  width: 100%;\n`;\n\nexport const StyledTableWrapper = styled.div<WidthAndHeight>`\n  display: inline-block;\n  border-spacing: 0;\n  z-index: 0;\n  position: relative;\n  width: 100%;\n  height: 100%;\n`;\nexport const StyledTableContentWrapper = styled(Grid)<WidthAndHeight>`\n  position: relative;\n  ${({ height = 'auto' }) => `\n  height: ${sizeToCss(height)};\n  `}\n`;\nexport const StyledVirtualListWrapper = styled.div<WidthAndHeight>`\n  overflow: auto;\n  height: 100%;\n  width: 100%;\n`;\n\n/**\n * HEADER\n */\ntype gridTemplateColumnStyleProps = {\n  cols: string[];\n  isExpandable: boolean;\n  colsLayoutStyle: ColsLayoutStyle;\n};\nconst getGridTemplateColumnsStyle = ({\n  cols,\n  colsLayoutStyle = ColsLayoutStyle.Auto,\n}: gridTemplateColumnStyleProps) => {\n  if (!cols) return '';\n  if (colsLayoutStyle === 'fixed') {\n    const widthAttr = cols.map((col) => `minmax(0, ${col})`).join(' ');\n    return `grid-template-columns: ${widthAttr}`;\n  }\n\n  return `grid-template-columns: ${cols.map((col) => `minmax(0, ${col})`).join(' ')}`;\n};\n\nexport const StyledHeadWrapper = styled.div<{\n  colsLayoutStyle: string;\n  totalColumnsWidth: number | string;\n}>`\n  position: relative; /* ie11 fallback */\n  position: sticky;\n  top: 0;\n  z-index: 4;\n  background: white;\n  width: ${(props) => (props.colsLayoutStyle === ColsLayoutStyle.Fixed ? sizeToCss(props.totalColumnsWidth) : '100%')};\n`;\n\nexport const StyledHeadTr = styled(Grid)<{ isExpandable: boolean; colsLayoutStyle: ColsLayoutStyle }>`\n  ${(props) => (props.colsLayoutStyle === ColsLayoutStyle.Auto ? 'width:100%' : '')};\n  ${(props) =>\n    getGridTemplateColumnsStyle({\n      cols: props.cols,\n      isExpandable: props.isExpandable,\n      colsLayoutStyle: props.colsLayoutStyle,\n    })};\n  border-right: 1px solid ${(props) => props.theme.colors.neutral['080']};\n  border-bottom: 1px solid ${(props) => props.theme.colors.neutral['080']};\n  grid-auto-flow: column;\n`;\n\nexport const StyledHeadTh = styled.div<any>`\n  min-height: 24px;\n  line-height: normal;\n  font-weight: 600;\n  text-transform: uppercase;\n  font-size: 0.923rem;\n  text-align: left;\n  ${columnPadding}\n  color: #353c46;\n  min-height: 1.84615rem;\n  position: sticky;\n  z-index: ${ZIndexDataTable.HEADER_ROW};\n  display: flex;\n  justify-content: space-between;\n  box-sizing: border-box;\n  outline: none;\n  ${(props) =>\n    props.isDraggingActive\n      ? ''\n      : `:hover {\n          &:after {\n            display: block;\n            content: ' ';\n            position: absolute;\n            top: 0;\n            left: 0;\n            right: 0;\n            bottom: 0;\n            border-bottom: 1px solid ${props.theme.colors.brand[700]};\n            pointer-events: none;\n            z-index: ${ZIndexDataTable.FOCUS_BORDER};\n          }\n          cursor: pointer;\n        }`}\n\n  :focus {\n    &:after {\n      display: block;\n      content: ' ';\n      position: absolute;\n      top: 0;\n      left: 0;\n      right: 0;\n      bottom: 0;\n      border: 2px solid ${(props) => props.theme.colors.brand[700]};\n      pointer-events: none;\n      z-index: ${ZIndexDataTable.FOCUS_BORDER};\n    }\n  }\n`;\n\nexport const StyledHeaderRightIconsWrapper = styled.div`\n  height: 100%;\n  display: flex;\n  align-items: center;\n  max-height: 24px;\n`;\n\nexport const StyledResizer = styled.div<{ isResizing: boolean }>`\n  display: inline-block;\n  background: transparent;\n  width: 4px;\n  height: 100%;\n  position: absolute;\n  right: 0;\n  top: 0;\n  z-index: 1;\n\n  // prevents from scrolling while dragging on touch devices\n  touch-action: none;\n\n  cursor: col-resize;\n`;\n\n// CELL ***********************************************************************/\nexport const StyledActionCell = styled.div`\n  position: relative; /* ie11 fallback */\n  position: sticky;\n  display: inline-block;\n  right: 0;\n  /* border-bottom: 1px solid #ebedf0; */\n  background: white;\n`;\n\nexport const StyledCell = styled.div`\n  ${cellPadding}\n  display: flex;\n  align-items: center;\n  width: 100%;\n  position: relative;\n`;\n\nexport const StyledCellContent = styled.div`\n  display: grid;\n  justify-self: flex-end;\n  flex: 1 1 auto;\n  width: 100%;\n  height: 100%;\n  align-items: center;\n`;\n\nexport const StyledPencilIcon = styled(EditPencil)``;\n\nexport const StyledEditableContainer = styled(Grid)<{ shouldDisplayEditIcon: string }>`\n  width: 100%;\n  height: 100%;\n  align-items: center;\n  & ${StyledPencilIcon} {\n    display: ${({ shouldDisplayEditIcon }) => (shouldDisplayEditIcon ? 'block' : 'none')};\n  }\n  &:hover {\n    ${StyledPencilIcon} {\n      display: block;\n    }\n  }\n  &:focus {\n    ${styledFocusCss}\n    ${StyledPencilIcon} {\n      display: block;\n    }\n  }\n  outline: none;\n`;\n\n// ROW ************************************************************************/\nexport const StyledFullsizeGrid = styled(Grid)`\n  position: relative;\n  z-index: ${ZIndexDataTable.ROW};\n\n  min-height: ${(props) => props.minHeight || '36px'};\n  height: ${(props) => props.height || 'auto'};\n`;\n\nexport const GroupHeaderContainer = styled(Grid)<{ paddingLeft: string }>`\n  position: relative;\n  background-color: ${({ theme }) => theme.colors.brand[200]};\n  align-items: center;\n  padding-left: ${(props) => props.paddingLeft};\n  border-top: 1px solid ${({ theme }) => theme.colors.brand[300]};\n`;\n\nexport const GroupHeaderTitle = styled.span`\n  font-weight: ${(props) => props.theme.fontWeights.semibold};\n  font-size: 12px;\n  color: ${(props) => props.theme.colors.neutral[700]};\n`;\n\nexport const StyledCellContainer = styled(Grid)<{ backgroundColor?: string }>`\n  position: relative;\n  z-index: 2;\n\n  min-height: ${(props) => props.minHeight || '36px'};\n  height: ${(props) => props.height || 'auto'};\n\n  width: ${(props) => (props.colLayoutStyle === ColsLayoutStyle.Fixed ? sizeToCss(props.totalColumnsWidth) : '100%')};\n  ${(props) => (props.isDragOverlay ? 'width: fit-content;' : '')};\n  ${(props) =>\n    getGridTemplateColumnsStyle({\n      cols: props.cols,\n      colsLayoutStyle: props.colLayoutStyle,\n      isExpandable: props.isExpandable,\n    })};\n  background-color: ${({ backgroundColor, isDragging, theme }) =>\n    isDragging ? theme.colors.neutral[100] : backgroundColor || 'white'};\n\n  outline: none;\n\n  :focus {\n    ${(props) => (props.isDragOverlay ? '' : styledFocusCss(props))}\n  }\n\n  ${({ isDropIndicatorPositionInside, isDropValid, theme }) => {\n    if (!isDropIndicatorPositionInside) return '';\n    return styledFocusCss({ theme }, isDropValid ? theme.colors.brand[700] : theme.colors.danger[900]);\n  }}\n\n  ${({ shouldDisplayHover, theme, isDisabled }) =>\n    shouldDisplayHover && !isDisabled\n      ? `:hover {\n            background-color: ${theme.colors.brand[200]};\n          }`\n      : ''}\n\n  box-shadow: 0 2px 4px 0 ${(props) => (props.isDragOverlay ? 'rgba(0,0,0,0.5)' : 'transparent')};\n\n  opacity: ${(props) => (props.isDragging ? 0.8 : 1)};\n\n  ${(props) =>\n    !props.selected\n      ? ''\n      : `\n    background-color: ${props.theme.colors.brand[200]};\n    border: 1px solid ${props.theme.colors.brand[500]};\n    `}\n\n  ${GroupHeaderTitle} {\n    color: ${(props) => (props.isDisabled ? props.theme.colors.neutral['200'] : props.theme.colors.neutral['700'])};\n  }\n  color: ${(props) => (props.isDisabled ? props.theme.colors.neutral['200'] : '#333333')};\n\n  svg {\n    fill: ${(props) => (props.isDisabled ? props.theme.colors.neutral['200'] : props.theme.colors.brand['800'])};\n  }\n`;\n"],
-  "mappings": "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",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable max-lines */\nimport { styled } from '@elliemae/ds-system';\nimport { Grid } from '@elliemae/ds-grid';\nimport { EditPencil } from '@elliemae/ds-icons';\nimport { sizeToCss, cellPadding, columnPadding } from './helpers';\nimport { ZIndexDataTable } from './configs/zIndexInternalConfig';\nimport { ColsLayoutStyle } from './configs/constants';\n\ninterface WidthAndHeight {\n  width?: string | number;\n  height?: string | number;\n}\n\nconst styledFocusCss = ({ theme }, color?: string) => `\n&:after {\n  display: block;\n  content: ' ';\n  position: absolute;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  border: 2px solid ${color ?? theme.colors.brand[700]};\n  pointer-events: none;\n  z-index: ${ZIndexDataTable.FOCUS_BORDER};\n}`;\n\nexport const StyledFocusWithin = styled(Grid)`\n  :focus-within {\n    ${(props) => (props.hideFocus ? '' : styledFocusCss(props))}\n  }\n  svg {\n    fill: ${(props) => props.theme.colors.brand['800']};\n  }\n`;\n\nexport const StyledDataTableWrapper = styled(Grid)<WidthAndHeight>`\n  width: ${(props) => sizeToCss(props.width ?? ' 100%')};\n  height: ${(props) => sizeToCss(props.height ?? ' 100%')};\n`;\n\nexport const StyledDataTableContentWrapper = styled(Grid)<WidthAndHeight & { noSelectionAllowed: boolean }>`\n  user-select: ${({ noSelectionAllowed }) => (noSelectionAllowed ? 'none' : 'auto')};\n  width: 100%;\n`;\n\nexport const StyledTableWrapper = styled.div<WidthAndHeight>`\n  display: inline-block;\n  border-spacing: 0;\n  z-index: 0;\n  position: relative;\n  width: 100%;\n  height: 100%;\n`;\nexport const StyledTableContentWrapper = styled(Grid)<WidthAndHeight>`\n  position: relative;\n  ${({ height = 'auto' }) => `\n  height: ${sizeToCss(height)};\n  `}\n`;\nexport const StyledVirtualListWrapper = styled.div<WidthAndHeight>`\n  overflow: auto;\n  height: 100%;\n  width: 100%;\n`;\n\n/**\n * HEADER\n */\ntype gridTemplateColumnStyleProps = {\n  cols: string[];\n  isExpandable: boolean;\n  colsLayoutStyle: ColsLayoutStyle;\n};\nconst getGridTemplateColumnsStyle = ({\n  cols,\n  colsLayoutStyle = ColsLayoutStyle.Auto,\n}: gridTemplateColumnStyleProps) => {\n  if (!cols) return '';\n  if (colsLayoutStyle === 'fixed') {\n    const widthAttr = cols.map((col) => `minmax(0, ${col})`).join(' ');\n    return `grid-template-columns: ${widthAttr}`;\n  }\n\n  return `grid-template-columns: ${cols.map((col) => `minmax(0, ${col})`).join(' ')}`;\n};\n\nexport const StyledHeadWrapper = styled.div<{\n  colsLayoutStyle: string;\n  totalColumnsWidth: number | string;\n}>`\n  position: relative; /* ie11 fallback */\n  position: sticky;\n  top: 0;\n  z-index: 4;\n  background: white;\n  width: ${(props) => (props.colsLayoutStyle === ColsLayoutStyle.Fixed ? sizeToCss(props.totalColumnsWidth) : '100%')};\n`;\n\nexport const StyledHeadTr = styled(Grid)<{ isExpandable: boolean; colsLayoutStyle: ColsLayoutStyle }>`\n  ${(props) => (props.colsLayoutStyle === ColsLayoutStyle.Auto ? 'width:100%' : '')};\n  ${(props) =>\n    getGridTemplateColumnsStyle({\n      cols: props.cols,\n      isExpandable: props.isExpandable,\n      colsLayoutStyle: props.colsLayoutStyle,\n    })};\n  border-right: 1px solid ${(props) => props.theme.colors.neutral['080']};\n  border-bottom: 1px solid ${(props) => props.theme.colors.neutral['080']};\n  grid-auto-flow: column;\n`;\n\nexport const StyledHeadTh = styled.div<any>`\n  min-height: 24px;\n  line-height: normal;\n  font-weight: 600;\n  text-transform: uppercase;\n  font-size: 0.923rem;\n  text-align: left;\n  ${columnPadding}\n  color: #353c46;\n  min-height: 1.84615rem;\n  position: sticky;\n  z-index: ${ZIndexDataTable.HEADER_ROW};\n  display: flex;\n  justify-content: space-between;\n  box-sizing: border-box;\n  outline: none;\n  ${(props) =>\n    props.isDraggingActive\n      ? ''\n      : `:hover {\n          &:after {\n            display: block;\n            content: ' ';\n            position: absolute;\n            top: 0;\n            left: 0;\n            right: 0;\n            bottom: 0;\n            border-bottom: 1px solid ${props.theme.colors.brand[700]};\n            pointer-events: none;\n            z-index: ${ZIndexDataTable.FOCUS_BORDER};\n          }\n          cursor: pointer;\n        }`}\n\n  :focus {\n    &:after {\n      display: block;\n      content: ' ';\n      position: absolute;\n      top: 0;\n      left: 0;\n      right: 0;\n      bottom: 0;\n      border: 2px solid ${(props) => props.theme.colors.brand[700]};\n      pointer-events: none;\n      z-index: ${ZIndexDataTable.FOCUS_BORDER};\n    }\n  }\n`;\n\nexport const StyledHeaderRightIconsWrapper = styled.div`\n  height: 100%;\n  display: flex;\n  align-items: center;\n  max-height: 24px;\n`;\n\nexport const StyledResizer = styled.div<{ isResizing: boolean }>`\n  display: inline-block;\n  background: transparent;\n  width: 4px;\n  height: 100%;\n  position: absolute;\n  right: 0;\n  top: 0;\n  z-index: 1;\n\n  // prevents from scrolling while dragging on touch devices\n  touch-action: none;\n\n  cursor: col-resize;\n`;\n\n// CELL ***********************************************************************/\nexport const StyledActionCell = styled.div`\n  position: relative; /* ie11 fallback */\n  position: sticky;\n  display: inline-block;\n  right: 0;\n  /* border-bottom: 1px solid #ebedf0; */\n  background: white;\n`;\n\nexport const StyledCell = styled.div`\n  ${cellPadding}\n  display: flex;\n  align-items: center;\n  width: 100%;\n  position: relative;\n`;\n\nexport const StyledCellContent = styled.div`\n  display: grid;\n  justify-self: flex-end;\n  flex: 1 1 auto;\n  width: 100%;\n  height: 100%;\n  align-items: center;\n`;\n\nexport const StyledPencilIcon = styled(EditPencil)``;\n\nexport const StyledEditableContainer = styled(Grid)<{ shouldDisplayEditIcon: string }>`\n  width: 100%;\n  height: 100%;\n  align-items: center;\n  & ${StyledPencilIcon} {\n    display: ${({ shouldDisplayEditIcon }) => (shouldDisplayEditIcon ? 'block' : 'none')};\n  }\n  &:hover {\n    ${StyledPencilIcon} {\n      display: block;\n    }\n  }\n  &:focus {\n    ${styledFocusCss}\n    ${StyledPencilIcon} {\n      display: block;\n    }\n  }\n  outline: none;\n`;\n\n// ROW ************************************************************************/\nexport const StyledFullsizeGrid = styled(Grid)`\n  position: relative;\n  z-index: ${ZIndexDataTable.ROW};\n\n  min-height: ${(props) => props.minHeight || '36px'};\n  height: ${(props) => props.height || 'auto'};\n`;\n\nexport const GroupHeaderContainer = styled(Grid)<{ paddingLeft: string }>`\n  position: relative;\n  background-color: ${({ theme }) => theme.colors.brand[200]};\n  align-items: center;\n  padding-left: ${(props) => props.paddingLeft};\n  border-top: 1px solid ${({ theme }) => theme.colors.brand[300]};\n`;\n\nexport const GroupHeaderTitle = styled.span`\n  font-weight: ${(props) => props.theme.fontWeights.semibold};\n  font-size: 12px;\n  color: ${(props) => props.theme.colors.neutral[700]};\n`;\n\nexport const StyledCellContainer = styled(Grid)<{ backgroundColor?: string }>`\n  position: relative;\n  z-index: 2;\n\n  min-height: ${(props) => props.minHeight || '36px'};\n  height: ${(props) => props.height || 'auto'};\n\n  width: ${(props) => (props.colLayoutStyle === ColsLayoutStyle.Fixed ? sizeToCss(props.totalColumnsWidth) : '100%')};\n  ${(props) => (props.isDragOverlay ? 'width: fit-content;' : '')};\n  ${(props) =>\n    getGridTemplateColumnsStyle({\n      cols: props.cols,\n      colsLayoutStyle: props.colLayoutStyle,\n      isExpandable: props.isExpandable,\n    })};\n  background-color: ${({ backgroundColor, isDragging, theme }) =>\n    isDragging ? theme.colors.neutral[100] : backgroundColor || 'white'};\n\n  outline: none;\n\n  :focus {\n    ${(props) => (props.isDragOverlay ? '' : styledFocusCss(props))}\n  }\n\n  ${({ isDropIndicatorPositionInside, isDropValid, theme }) => {\n    if (!isDropIndicatorPositionInside) return '';\n    return styledFocusCss({ theme }, isDropValid ? theme.colors.brand[700] : theme.colors.danger[900]);\n  }}\n\n  ${({ shouldDisplayHover, theme, isDisabled }) =>\n    shouldDisplayHover && !isDisabled\n      ? `:hover {\n            background-color: ${theme.colors.brand[200]};\n          }`\n      : ''}\n\n  box-shadow: 0 2px 4px 0 ${(props) => (props.isDragOverlay ? 'rgba(0,0,0,0.5)' : 'transparent')};\n\n  opacity: ${(props) => (props.isDragging ? 0.8 : 1)};\n\n  ${(props) =>\n    !props.selected\n      ? ''\n      : `\n    background-color: ${props.theme.colors.brand[200]};\n    border: 1px solid ${props.theme.colors.brand[500]};\n    `}\n\n  ${GroupHeaderTitle} {\n    color: ${(props) => (props.isDisabled ? props.theme.colors.neutral['200'] : props.theme.colors.neutral['700'])};\n  }\n  color: ${(props) => (props.isDisabled ? props.theme.colors.neutral['200'] : '#333333')};\n\n  svg {\n    fill: ${(props) => (props.isDisabled ? props.theme.colors.neutral['200'] : props.theme.colors.brand['800'])};\n  }\n`;\n"],
+  "mappings": "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",
   "names": []
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@elliemae/ds-data-table",
-  "version": "3.14.0-next.1",
+  "version": "3.14.0-next.11",
   "license": "MIT",
   "description": "ICE MT - Dimsum - Data Table",
   "files": [
@@ -573,23 +573,23 @@
   "dependencies": {
     "react-virtual": "~2.10.4",
     "uid": "~2.0.0",
-    "@elliemae/ds-button": "3.14.0-next.1",
-    "@elliemae/ds-dropdownmenu": "3.14.0-next.1",
-    "@elliemae/ds-circular-progress-indicator": "3.14.0-next.1",
-    "@elliemae/ds-form": "3.14.0-next.1",
-    "@elliemae/ds-grid": "3.14.0-next.1",
-    "@elliemae/ds-icons": "3.14.0-next.1",
-    "@elliemae/ds-controlled-form": "3.14.0-next.1",
-    "@elliemae/ds-pagination": "3.14.0-next.1",
-    "@elliemae/ds-pills": "3.14.0-next.1",
-    "@elliemae/ds-drag-and-drop": "3.14.0-next.1",
-    "@elliemae/ds-popperjs": "3.14.0-next.1",
-    "@elliemae/ds-system": "3.14.0-next.1",
-    "@elliemae/ds-truncated-tooltip-text": "3.14.0-next.1",
-    "@elliemae/ds-utilities": "3.14.0-next.1",
-    "@elliemae/ds-form-layout-blocks": "3.14.0-next.1",
-    "@elliemae/ds-toolbar": "3.14.0-next.1",
-    "@elliemae/ds-skeleton": "3.14.0-next.1"
+    "@elliemae/ds-button": "3.14.0-next.11",
+    "@elliemae/ds-circular-progress-indicator": "3.14.0-next.11",
+    "@elliemae/ds-controlled-form": "3.14.0-next.11",
+    "@elliemae/ds-drag-and-drop": "3.14.0-next.11",
+    "@elliemae/ds-dropdownmenu": "3.14.0-next.11",
+    "@elliemae/ds-form-layout-blocks": "3.14.0-next.11",
+    "@elliemae/ds-form": "3.14.0-next.11",
+    "@elliemae/ds-grid": "3.14.0-next.11",
+    "@elliemae/ds-pagination": "3.14.0-next.11",
+    "@elliemae/ds-icons": "3.14.0-next.11",
+    "@elliemae/ds-pills": "3.14.0-next.11",
+    "@elliemae/ds-popperjs": "3.14.0-next.11",
+    "@elliemae/ds-skeleton": "3.14.0-next.11",
+    "@elliemae/ds-system": "3.14.0-next.11",
+    "@elliemae/ds-toolbar": "3.14.0-next.11",
+    "@elliemae/ds-truncated-tooltip-text": "3.14.0-next.11",
+    "@elliemae/ds-utilities": "3.14.0-next.11"
   },
   "devDependencies": {
     "@testing-library/react": "~12.1.3",