@elliemae/ds-data-table 3.1.0-next.10 → 3.1.0-next.11

package/dist/cjs/DataTable.js

@@ -62,7 +62,9 @@ const DataTable = (props) => {
     ref: tableWrapperRef,
     "data-testid": import_constants.DATA_TESTID.DATA_TABLE_WRAPPER,
     height,
-    width
+    width,
+    cols: ["100%"],
+    rows: withFilterBar ? ["auto", "1fr"] : ["1fr"]
   }, withFilterBar ? /* @__PURE__ */ import_react.default.createElement(import_FiltersBar.FiltersBar, null) : null, /* @__PURE__ */ import_react.default.createElement(import_TableContent.TableContent, {
     ref: tableContentWrapperRef
   })));

package/dist/cjs/DataTable.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/DataTable.tsx", "../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["import React, { useRef } from 'react';\nimport { describe } from '@elliemae/ds-utilities';\nimport { TableContent } from './parts/TableContent';\nimport { TypescriptProps } from './types/props';\nimport { DataTableContext, defaultProps } from './DataTableContext';\nimport { DATA_TESTID } from './configs/constants';\nimport { useDatatableConfig } from './configs/useDatatableConfig';\nimport { FiltersBar } from './parts/FilterBar/FiltersBar';\nimport { DataTableSchema } from './DataTableSchema';\nimport { StyledDataTableWrapper } from './styled';\n\nexport const DataTable = (props: TypescriptProps): JSX.Element => {\n  const { withFilterBar } = props;\n\n  const tableWrapperRef = useRef();\n  const tableContentWrapperRef = useRef();\n\n  const ctx = useDatatableConfig(props);\n\n  const {\n    tableProps: { height, width },\n  } = ctx;\n\n  return (\n    <DataTableContext.Provider value={ctx}>\n      <StyledDataTableWrapper\n        ref={tableWrapperRef}\n        data-testid={DATA_TESTID.DATA_TABLE_WRAPPER}\n        height={height}\n        width={width}\n      >\n        {withFilterBar ? <FiltersBar /> : null}\n        <TableContent ref={tableContentWrapperRef} />\n      </StyledDataTableWrapper>\n    </DataTableContext.Provider>\n  );\n};\n\nDataTable.propTypes = DataTableSchema;\nDataTable.defaultProps = { ...defaultProps };\nDataTable.displayName = 'DataTable';\nexport const DataTableWithSchema = describe(DataTable).description('Data Table');\nDataTableWithSchema.propTypes = DataTableSchema;\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,mBAA8B;AAC9B,0BAAyB;AACzB,0BAA6B;AAE7B,8BAA+C;AAC/C,uBAA4B;AAC5B,gCAAmC;AACnC,wBAA2B;AAC3B,6BAAgC;AAChC,oBAAuC;AAEhC,MAAM,YAAY,CAAC,UAAwC;AAChE,QAAM,EAAE,kBAAkB;AAE1B,QAAM,kBAAkB,yBAAO;AAC/B,QAAM,yBAAyB,yBAAO;AAEtC,QAAM,MAAM,kDAAmB,KAAK;AAEpC,QAAM;AAAA,IACJ,YAAY,EAAE,QAAQ;AAAA,MACpB;AAEJ,SACE,mDAAC,yCAAiB,UAAjB;AAAA,IAA0B,OAAO;AAAA,KAChC,mDAAC;AAAA,IACC,KAAK;AAAA,IACL,eAAa,6BAAY;AAAA,IACzB;AAAA,IACA;AAAA,KAEC,gBAAgB,mDAAC,kCAAW,IAAK,MAClC,mDAAC;AAAA,IAAa,KAAK;AAAA,GAAwB,CAC7C,CACF;AAEJ;AAEA,UAAU,YAAY;AACtB,UAAU,eAAe,mBAAK;AAC9B,UAAU,cAAc;AACjB,MAAM,sBAAsB,kCAAS,SAAS,EAAE,YAAY,YAAY;AAC/E,oBAAoB,YAAY;",
+  "sourcesContent": ["import React, { useRef } from 'react';\nimport { describe } from '@elliemae/ds-utilities';\nimport { TableContent } from './parts/TableContent';\nimport { TypescriptProps } from './types/props';\nimport { DataTableContext, defaultProps } from './DataTableContext';\nimport { DATA_TESTID } from './configs/constants';\nimport { useDatatableConfig } from './configs/useDatatableConfig';\nimport { FiltersBar } from './parts/FilterBar/FiltersBar';\nimport { DataTableSchema } from './DataTableSchema';\nimport { StyledDataTableWrapper } from './styled';\n\nexport const DataTable = (props: TypescriptProps): JSX.Element => {\n  const { withFilterBar } = props;\n\n  const tableWrapperRef = useRef();\n  const tableContentWrapperRef = useRef();\n\n  const ctx = useDatatableConfig(props);\n\n  const {\n    tableProps: { height, width },\n  } = ctx;\n\n  return (\n    <DataTableContext.Provider value={ctx}>\n      <StyledDataTableWrapper\n        ref={tableWrapperRef}\n        data-testid={DATA_TESTID.DATA_TABLE_WRAPPER}\n        height={height}\n        width={width}\n        cols={['100%']}\n        rows={withFilterBar ? ['auto', '1fr'] : ['1fr']}\n      >\n        {withFilterBar ? <FiltersBar /> : null}\n        <TableContent ref={tableContentWrapperRef} />\n      </StyledDataTableWrapper>\n    </DataTableContext.Provider>\n  );\n};\n\nDataTable.propTypes = DataTableSchema;\nDataTable.defaultProps = { ...defaultProps };\nDataTable.displayName = 'DataTable';\nexport const DataTableWithSchema = describe(DataTable).description('Data Table');\nDataTableWithSchema.propTypes = DataTableSchema;\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,mBAA8B;AAC9B,0BAAyB;AACzB,0BAA6B;AAE7B,8BAA+C;AAC/C,uBAA4B;AAC5B,gCAAmC;AACnC,wBAA2B;AAC3B,6BAAgC;AAChC,oBAAuC;AAEhC,MAAM,YAAY,CAAC,UAAwC;AAChE,QAAM,EAAE,kBAAkB;AAE1B,QAAM,kBAAkB,yBAAO;AAC/B,QAAM,yBAAyB,yBAAO;AAEtC,QAAM,MAAM,kDAAmB,KAAK;AAEpC,QAAM;AAAA,IACJ,YAAY,EAAE,QAAQ;AAAA,MACpB;AAEJ,SACE,mDAAC,yCAAiB,UAAjB;AAAA,IAA0B,OAAO;AAAA,KAChC,mDAAC;AAAA,IACC,KAAK;AAAA,IACL,eAAa,6BAAY;AAAA,IACzB;AAAA,IACA;AAAA,IACA,MAAM,CAAC,MAAM;AAAA,IACb,MAAM,gBAAgB,CAAC,QAAQ,KAAK,IAAI,CAAC,KAAK;AAAA,KAE7C,gBAAgB,mDAAC,kCAAW,IAAK,MAClC,mDAAC;AAAA,IAAa,KAAK;AAAA,GAAwB,CAC7C,CACF;AAEJ;AAEA,UAAU,YAAY;AACtB,UAAU,eAAe,mBAAK;AAC9B,UAAU,cAAc;AACjB,MAAM,sBAAsB,kCAAS,SAAS,EAAE,YAAY,YAAY;AAC/E,oBAAoB,YAAY;",
   "names": []
 }

package/dist/cjs/configs/useDatatableConfig.js

@@ -50,7 +50,12 @@ const useDatatableConfig = (props) => {
   const virtualListRef = (0, import_react.useRef)(null);
   const columnHeaderRef = (0, import_react.useRef)(null);
   const tableColsWithAddons = (0, import_useTableColsWithAddons.useTableColsWithAddons)(props);
-  const visibleColumns = (0, import_react.useMemo)(() => tableColsWithAddons.filter((col) => !props.hiddenColumns.includes(col.accessor)), [props.hiddenColumns, tableColsWithAddons]);
+  const visibleColumns = (0, import_react.useMemo)(() => tableColsWithAddons.filter((col) => !props.hiddenColumns.includes(col.accessor)).map((col) => {
+    if (col.columns) {
+      col.columns = col.columns.filter((subCol) => !props.hiddenColumns.includes(subCol.accessor));
+    }
+    return col;
+  }), [props.hiddenColumns, tableColsWithAddons]);
   const [dataLength, setDataLength] = (0, import_react.useState)(1);
   const virtualListHelpers = (0, import_react_virtual.useVirtual)({
     size: dataLength,

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 { 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\n  // ===========================================================================\n  // Column config\n  // ===========================================================================\n  const tableColsWithAddons = useTableColsWithAddons(props);\n\n  const visibleColumns = useMemo(\n    () => tableColsWithAddons.filter((col: TypescriptColumn) => !props.hiddenColumns.includes(col.accessor)),\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    }),\n    [\n      props,\n      layoutHelpers,\n      paginationHelpers,\n      visibleColumns,\n      virtualListHelpers,\n      paginatedData,\n      flattenedData,\n      allDataFlattened,\n      virtualListRef,\n      columnHeaderRef,\n      internalState,\n    ],\n  );\n\n  return ctx;\n};\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,mBAAqD;AACrD,2BAA2B;AAC3B,2BAA8B;AAE9B,kCAAqC;AACrC,iCAAoC;AACpC,oCAAuC;AACvC,uBAAgC;AAChC,oCAAuC;AAEhC,MAAM,qBAAqB,CAAC,UAA8C;AAC/E,QAAM,iBAAiB,yBAAuB,IAAI;AAClD,QAAM,kBAAkB,yBAAuB,IAAI;AAKnD,QAAM,sBAAsB,0DAAuB,KAAK;AAExD,QAAM,iBAAiB,0BACrB,MAAM,oBAAoB,OAAO,CAAC,QAA0B,CAAC,MAAM,cAAc,SAAS,IAAI,QAAQ,CAAC,GACvG,CAAC,MAAM,eAAe,mBAAmB,CAC3C;AAMA,QAAM,CAAC,YAAY,iBAAiB,2BAAS,CAAC;AAI9C,QAAM,qBAAqB,qCAAW;AAAA,IACpC,MAAM;AAAA,IACN,WAAW;AAAA,IACX,UAAU;AAAA,IACV,cAAc,gBAAgB,SAAS,sBAAsB,GAAG,UAAU;AAAA,EAC5E,CAAC;AAKD,8BAAU,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,oBAAoB,sDAAqB,KAAK;AAEpE,QAAM,CAAC,eAAe,qBAAqB,oDAAoB,OAAO,aAAa;AAGnF,MAAI,eAAgB,kBAAiB,eAAe;AAAQ,kBAAe,kBAAiB,eAAe,MAAM;AAMjH,QAAM,CAAC,YAAY,iBAAiB,2BAAS,wCAAc,gBAAgB,MAAM,eAAe,CAAC;AAGjG,8BAAU,MAAM;AACd,kBAAc,wCAAc,gBAAgB,MAAM,eAAe,CAAC;AAAA,EACpE,GAAG,CAAC,gBAAgB,MAAM,eAAe,CAAC;AAE1C,QAAM,oBAAoB,0BACxB,MACE,MAAM,oBAAoB,iCAAgB,QACtC,WAAW,OAAO,CAAC,KAAa,QAAgB,MAAM,OAAO,SAAS,KAAK,EAAE,GAAG,CAAC,IACjF,QACN,CAAC,MAAM,iBAAiB,UAAU,CACpC;AAEA,QAAM,gBAAgB,0BACpB,MAAO;AAAA,IACL;AAAA,IACA;AAAA,IACA;AAAA,EACF,IACA,CAAC,YAAY,eAAe,iBAAiB,CAC/C;AAMA,QAAM,gBAAgB,0DAAuB;AAE7C,QAAM,MAAM,0BACV,MAAO;AAAA,IACL,YAAY;AAAA,IACZ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,eAAe,iBAAiB;AAAA,IAChC;AAAA,IACA;AAAA,IACA;AAAA,KACG,gBAEL;AAAA,IACE;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,CACF;AAEA,SAAO;AACT;",
+  "sourcesContent": ["import { useEffect, useMemo, useRef, useState } from 'react';\nimport { useVirtual } from 'react-virtual';\nimport { columnsToGrid } from '../helpers/columnsToGrid';\nimport { 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\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    }),\n    [\n      props,\n      layoutHelpers,\n      paginationHelpers,\n      visibleColumns,\n      virtualListHelpers,\n      paginatedData,\n      flattenedData,\n      allDataFlattened,\n      virtualListRef,\n      columnHeaderRef,\n      internalState,\n    ],\n  );\n\n  return ctx;\n};\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,mBAAqD;AACrD,2BAA2B;AAC3B,2BAA8B;AAE9B,kCAAqC;AACrC,iCAAoC;AACpC,oCAAuC;AACvC,uBAAgC;AAChC,oCAAuC;AAEhC,MAAM,qBAAqB,CAAC,UAA8C;AAC/E,QAAM,iBAAiB,yBAAuB,IAAI;AAClD,QAAM,kBAAkB,yBAAuB,IAAI;AAKnD,QAAM,sBAAsB,0DAAuB,KAAK;AACxD,QAAM,iBAAiB,0BACrB,MACE,oBACG,OAAO,CAAC,QAA0B,CAAC,MAAM,cAAc,SAAS,IAAI,QAAQ,CAAC,EAC7E,IAAI,CAAC,QAA0B;AAC9B,QAAI,IAAI,SAAS;AACf,UAAI,UAAU,IAAI,QAAQ,OACxB,CAAC,WAA6B,CAAC,MAAM,cAAc,SAAS,OAAO,QAAQ,CAC7E;AAAA,IACF;AACA,WAAO;AAAA,EACT,CAAC,GACL,CAAC,MAAM,eAAe,mBAAmB,CAC3C;AAMA,QAAM,CAAC,YAAY,iBAAiB,2BAAS,CAAC;AAI9C,QAAM,qBAAqB,qCAAW;AAAA,IACpC,MAAM;AAAA,IACN,WAAW;AAAA,IACX,UAAU;AAAA,IACV,cAAc,gBAAgB,SAAS,sBAAsB,GAAG,UAAU;AAAA,EAC5E,CAAC;AAKD,8BAAU,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,oBAAoB,sDAAqB,KAAK;AAEpE,QAAM,CAAC,eAAe,qBAAqB,oDAAoB,OAAO,aAAa;AAGnF,MAAI,eAAgB,kBAAiB,eAAe;AAAQ,kBAAe,kBAAiB,eAAe,MAAM;AAMjH,QAAM,CAAC,YAAY,iBAAiB,2BAAS,wCAAc,gBAAgB,MAAM,eAAe,CAAC;AAGjG,8BAAU,MAAM;AACd,kBAAc,wCAAc,gBAAgB,MAAM,eAAe,CAAC;AAAA,EACpE,GAAG,CAAC,gBAAgB,MAAM,eAAe,CAAC;AAE1C,QAAM,oBAAoB,0BACxB,MACE,MAAM,oBAAoB,iCAAgB,QACtC,WAAW,OAAO,CAAC,KAAa,QAAgB,MAAM,OAAO,SAAS,KAAK,EAAE,GAAG,CAAC,IACjF,QACN,CAAC,MAAM,iBAAiB,UAAU,CACpC;AAEA,QAAM,gBAAgB,0BACpB,MAAO;AAAA,IACL;AAAA,IACA;AAAA,IACA;AAAA,EACF,IACA,CAAC,YAAY,eAAe,iBAAiB,CAC/C;AAMA,QAAM,gBAAgB,0DAAuB;AAE7C,QAAM,MAAM,0BACV,MAAO;AAAA,IACL,YAAY;AAAA,IACZ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,eAAe,iBAAiB;AAAA,IAChC;AAAA,IACA;AAAA,IACA;AAAA,KACG,gBAEL;AAAA,IACE;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,CACF;AAEA,SAAO;AACT;",
   "names": []
 }

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

@@ -75,21 +75,35 @@ const ToolbarPosition = import_ds_system.styled.div`
 const Toolbar = ({ children }) => {
   const [show, setShow] = (0, import_react.useState)(false);
   const toolbarRef = (0, import_react.useRef)(null);
+  const toolbarTrigger = (0, import_react.useRef)(null);
   const handleOnClickOutside = (0, import_react.useCallback)(() => setShow(false), []);
   const handleOnClick = (0, import_react.useCallback)(() => setShow(true), []);
   (0, import_ds_utilities.useOnClickOutside)(toolbarRef, handleOnClickOutside);
+  const onToolbarKeyDown = (0, import_react.useCallback)((e) => {
+    if (e.code === "Escape") {
+      setShow(false);
+      toolbarTrigger.current?.focus();
+    }
+  }, []);
+  const onTriggerKeyDown = (0, import_react.useCallback)((e) => {
+    if (["Enter", "Space"].includes(e.code)) {
+      handleOnClick();
+    }
+  }, [handleOnClick]);
   return /* @__PURE__ */ import_react.default.createElement(ToolbarPosition, {
     ref: toolbarRef,
     onClick: (e) => e.stopPropagation()
   }, /* @__PURE__ */ import_react.default.createElement(ToolbarWrapper, {
     onMouseEnter: () => setShow(true),
-    onMouseLeave: () => setShow(false)
+    onMouseLeave: () => setShow(false),
+    onKeyDown: onToolbarKeyDown
   }, show && /* @__PURE__ */ import_react.default.createElement(ToolbarBtns, null, children), /* @__PURE__ */ import_react.default.createElement(import_ds_button.DSButtonV2, {
     buttonType: "icon",
     className: "toolbar-trigger",
     "data-testid": import_constants.DATA_TESTID.DATA_TABLE_TOOLBAR_TRIGGER,
+    innerRef: toolbarTrigger,
     onClick: handleOnClick,
-    onKeyDown: (e) => ["Enter", "Space"].includes(e.code) && handleOnClick(),
+    onKeyDown: onTriggerKeyDown,
     tabIndex: 0
   }, /* @__PURE__ */ import_react.default.createElement(import_ds_icons.MoreOptionsVert, null))));
 };

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 } from '@elliemae/ds-system';\nimport { DSButtonV2 } from '@elliemae/ds-button';\nimport { MoreOptionsVert } from '@elliemae/ds-icons';\nimport { useOnClickOutside } from '@elliemae/ds-utilities';\nimport { DATA_TESTID } from '../../configs/constants';\n\nconst ToolbarBtns = styled.div`\n  & > .em-ds-toolbar {\n    box-shadow: none;\n  }\n`;\n\nconst ToolbarWrapper = styled.div`\n  display: flex;\n  align-items: center;\n  height: 36px;\n  margin-right: 1px;\n  pointer-events: all;\n  &:hover {\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  }\n`;\n\nconst ToolbarPosition = styled.div`\n  display: flex;\n  justify-content: flex-end;\n  align-items: center;\n  pointer-events: none;\n  background: white;\n  height: 28px;\n  margin-top: 4px;\n  width: 100%;\n  padding-left: 4px;\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: ${(props) => props.theme.colors.neutral['080']};\n    z-index: 7;\n  }\n`;\n\n// eslint-disable-next-line react/prop-types\nexport const Toolbar: React.ComponentType = ({ children }) => {\n  const [show, setShow] = useState(false);\n\n  const toolbarRef = useRef(null);\n\n  const handleOnClickOutside = useCallback(() => setShow(false), []);\n\n  const handleOnClick = useCallback(() => setShow(true), []);\n\n  useOnClickOutside(toolbarRef, handleOnClickOutside);\n\n  return (\n    <ToolbarPosition ref={toolbarRef} onClick={(e) => e.stopPropagation()}>\n      <ToolbarWrapper onMouseEnter={() => setShow(true)} onMouseLeave={() => setShow(false)}>\n        {show && <ToolbarBtns>{children}</ToolbarBtns>}\n        <DSButtonV2\n          buttonType=\"icon\"\n          className=\"toolbar-trigger\"\n          data-testid={DATA_TESTID.DATA_TABLE_TOOLBAR_TRIGGER}\n          onClick={handleOnClick}\n          onKeyDown={(e) => ['Enter', 'Space'].includes(e.code) && handleOnClick()}\n          tabIndex={0}\n        >\n          <MoreOptionsVert />\n        </DSButtonV2>\n      </ToolbarWrapper>\n    </ToolbarPosition>\n  );\n};\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,mBAAqD;AACrD,uBAAuB;AACvB,uBAA2B;AAC3B,sBAAgC;AAChC,0BAAkC;AAClC,uBAA4B;AAE5B,MAAM,cAAc,wBAAO;AAAA;AAAA;AAAA;AAAA;AAM3B,MAAM,iBAAiB,wBAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAc9B,MAAM,kBAAkB,wBAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,wBAoBP,CAAC,UAAU,MAAM,MAAM,OAAO,QAAQ;AAAA;AAAA;AAAA;AAMvD,MAAM,UAA+B,CAAC,EAAE,eAAe;AAC5D,QAAM,CAAC,MAAM,WAAW,2BAAS,KAAK;AAEtC,QAAM,aAAa,yBAAO,IAAI;AAE9B,QAAM,uBAAuB,8BAAY,MAAM,QAAQ,KAAK,GAAG,CAAC,CAAC;AAEjE,QAAM,gBAAgB,8BAAY,MAAM,QAAQ,IAAI,GAAG,CAAC,CAAC;AAEzD,6CAAkB,YAAY,oBAAoB;AAElD,SACE,mDAAC;AAAA,IAAgB,KAAK;AAAA,IAAY,SAAS,CAAC,MAAM,EAAE,gBAAgB;AAAA,KAClE,mDAAC;AAAA,IAAe,cAAc,MAAM,QAAQ,IAAI;AAAA,IAAG,cAAc,MAAM,QAAQ,KAAK;AAAA,KACjF,QAAQ,mDAAC,mBAAa,QAAS,GAChC,mDAAC;AAAA,IACC,YAAW;AAAA,IACX,WAAU;AAAA,IACV,eAAa,6BAAY;AAAA,IACzB,SAAS;AAAA,IACT,WAAW,CAAC,MAAM,CAAC,SAAS,OAAO,EAAE,SAAS,EAAE,IAAI,KAAK,cAAc;AAAA,IACvE,UAAU;AAAA,KAEV,mDAAC,qCAAgB,CACnB,CACF,CACF;AAEJ;",
+  "sourcesContent": ["import React, { useCallback, useRef, useState } from 'react';\nimport { styled } from '@elliemae/ds-system';\nimport { DSButtonV2 } from '@elliemae/ds-button';\nimport { MoreOptionsVert } from '@elliemae/ds-icons';\nimport { useOnClickOutside } from '@elliemae/ds-utilities';\nimport { DATA_TESTID } from '../../configs/constants';\n\nconst ToolbarBtns = styled.div`\n  & > .em-ds-toolbar {\n    box-shadow: none;\n  }\n`;\n\nconst ToolbarWrapper = styled.div`\n  display: flex;\n  align-items: center;\n  height: 36px;\n  margin-right: 1px;\n  pointer-events: all;\n  &:hover {\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  }\n`;\n\nconst ToolbarPosition = styled.div`\n  display: flex;\n  justify-content: flex-end;\n  align-items: center;\n  pointer-events: none;\n  background: white;\n  height: 28px;\n  margin-top: 4px;\n  width: 100%;\n  padding-left: 4px;\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: ${(props) => props.theme.colors.neutral['080']};\n    z-index: 7;\n  }\n`;\n\nexport const Toolbar: React.ComponentType<Record<string, unknown>> = ({ children }) => {\n  const [show, setShow] = useState(false);\n\n  const toolbarRef = useRef(null);\n  const toolbarTrigger = useRef<HTMLButtonElement>(null);\n\n  const handleOnClickOutside = useCallback(() => setShow(false), []);\n\n  const handleOnClick = useCallback(() => setShow(true), []);\n\n  useOnClickOutside(toolbarRef, handleOnClickOutside);\n\n  const onToolbarKeyDown = useCallback((e: React.KeyboardEvent) => {\n    if (e.code === 'Escape') {\n      setShow(false);\n      toolbarTrigger.current?.focus();\n    }\n  }, []);\n\n  const onTriggerKeyDown = useCallback(\n    (e: React.KeyboardEvent) => {\n      if (['Enter', 'Space'].includes(e.code)) {\n        handleOnClick();\n      }\n    },\n    [handleOnClick],\n  );\n\n  return (\n    <ToolbarPosition ref={toolbarRef} onClick={(e: React.MouseEvent) => e.stopPropagation()}>\n      <ToolbarWrapper\n        onMouseEnter={() => setShow(true)}\n        onMouseLeave={() => setShow(false)}\n        onKeyDown={onToolbarKeyDown}\n      >\n        {show && <ToolbarBtns>{children}</ToolbarBtns>}\n        <DSButtonV2\n          buttonType=\"icon\"\n          className=\"toolbar-trigger\"\n          data-testid={DATA_TESTID.DATA_TABLE_TOOLBAR_TRIGGER}\n          innerRef={toolbarTrigger}\n          onClick={handleOnClick}\n          onKeyDown={onTriggerKeyDown}\n          tabIndex={0}\n        >\n          <MoreOptionsVert />\n        </DSButtonV2>\n      </ToolbarWrapper>\n    </ToolbarPosition>\n  );\n};\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,mBAAqD;AACrD,uBAAuB;AACvB,uBAA2B;AAC3B,sBAAgC;AAChC,0BAAkC;AAClC,uBAA4B;AAE5B,MAAM,cAAc,wBAAO;AAAA;AAAA;AAAA;AAAA;AAM3B,MAAM,iBAAiB,wBAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAc9B,MAAM,kBAAkB,wBAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,wBAoBP,CAAC,UAAU,MAAM,MAAM,OAAO,QAAQ;AAAA;AAAA;AAAA;AAKvD,MAAM,UAAwD,CAAC,EAAE,eAAe;AACrF,QAAM,CAAC,MAAM,WAAW,2BAAS,KAAK;AAEtC,QAAM,aAAa,yBAAO,IAAI;AAC9B,QAAM,iBAAiB,yBAA0B,IAAI;AAErD,QAAM,uBAAuB,8BAAY,MAAM,QAAQ,KAAK,GAAG,CAAC,CAAC;AAEjE,QAAM,gBAAgB,8BAAY,MAAM,QAAQ,IAAI,GAAG,CAAC,CAAC;AAEzD,6CAAkB,YAAY,oBAAoB;AAElD,QAAM,mBAAmB,8BAAY,CAAC,MAA2B;AAC/D,QAAI,EAAE,SAAS,UAAU;AACvB,cAAQ,KAAK;AACb,qBAAe,SAAS,MAAM;AAAA,IAChC;AAAA,EACF,GAAG,CAAC,CAAC;AAEL,QAAM,mBAAmB,8BACvB,CAAC,MAA2B;AAC1B,QAAI,CAAC,SAAS,OAAO,EAAE,SAAS,EAAE,IAAI,GAAG;AACvC,oBAAc;AAAA,IAChB;AAAA,EACF,GACA,CAAC,aAAa,CAChB;AAEA,SACE,mDAAC;AAAA,IAAgB,KAAK;AAAA,IAAY,SAAS,CAAC,MAAwB,EAAE,gBAAgB;AAAA,KACpF,mDAAC;AAAA,IACC,cAAc,MAAM,QAAQ,IAAI;AAAA,IAChC,cAAc,MAAM,QAAQ,KAAK;AAAA,IACjC,WAAW;AAAA,KAEV,QAAQ,mDAAC,mBAAa,QAAS,GAChC,mDAAC;AAAA,IACC,YAAW;AAAA,IACX,WAAU;AAAA,IACV,eAAa,6BAAY;AAAA,IACzB,UAAU;AAAA,IACV,SAAS;AAAA,IACT,WAAW;AAAA,IACX,UAAU;AAAA,KAEV,mDAAC,qCAAgB,CACnB,CACF,CACF;AAEJ;",
   "names": []
 }

package/dist/cjs/parts/EmptyContent.js

@@ -76,9 +76,9 @@ const EmptyContent = ({ width }) => {
       noResultsMessage,
       noResultsSecondaryMessage,
       noResultsButtonLabel,
-      onNoResultsButtonClick,
-      width: tableWidth
-    }
+      onNoResultsButtonClick
+    },
+    virtualListRef
   } = (0, import_react.useContext)(import_DataTableContext.DataTableContext);
   if (import_react.default.isValidElement(noResultsPlaceholder))
     return /* @__PURE__ */ import_react.default.createElement(CenterContentFlexWrapper, {
@@ -89,7 +89,7 @@ const EmptyContent = ({ width }) => {
     "aria-live": "assertive",
     role: "status"
   }, /* @__PURE__ */ import_react.default.createElement(EmptyStateWrapper, {
-    width: tableWidth,
+    width: virtualListRef.current?.clientWidth,
     justifyContent: "center"
   }, /* @__PURE__ */ import_react.default.createElement(Icon, {
     size: "xxl"

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/parts/EmptyContent.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["import React, { useContext } from 'react';\nimport { Grid } from '@elliemae/ds-grid';\nimport { WarningTriangle } from '@elliemae/ds-icons';\nimport { __UNSAFE_SPACE_TO_DIMSUM, toMobile } from '@elliemae/ds-system';\nimport { DSButton } from '@elliemae/ds-button';\nimport { styled } from '@elliemae/ds-system';\nimport PropTypes from 'prop-types';\n\nimport { DataTableContext } from '../DataTableContext';\n\nconst EmptyStateWrapper = styled(Grid)`\n  position: sticky;\n  height: fit-content;\n  top: 0;\n  left: 0;\n`;\nconst Icon = styled(WarningTriangle)`\n  fill: ${(props) => props.theme.colors.neutral[300]};\n  color: ${(props) => props.theme.colors.neutral[300]};\n  justify-self: center;\n`;\nconst PrimaryMessage = styled.p`\n  text-align: center;\n  font-weight: bold;\n  font-size: ${(props) => toMobile(props.theme.fontSizes.value[400])};\n  color: ${(props) => props.theme.colors.neutral[600]};\n  margin-top: ${(props) => __UNSAFE_SPACE_TO_DIMSUM(props.theme.space.s)};\n  margin-bottom: ${(props) => __UNSAFE_SPACE_TO_DIMSUM(props.theme.space.xs)};\n`;\nconst SecondaryMessage = styled.p`\n  text-align: center;\n  font-size: ${(props) => toMobile(props.theme.fontSizes.value[400])}; /* 13px */\n  color: ${(props) => props.theme.colors.neutral[500]};\n  margin: 0;\n`;\nconst Button = styled(DSButton)`\n  margin-top: ${(props) => __UNSAFE_SPACE_TO_DIMSUM(props.theme.space.m)};\n  justify-self: center;\n  width: fit-content;\n`;\nconst CenterContentFlexWrapper = styled.div<{ width: number | string }>`\n  width: ${({ width }) => width}px;\n  height: calc(100% - 48px);\n  display: flex;\n  align-items: center;\n`;\n\nconst EmptyContent: React.ComponentType<{ width: string | number }> = ({ width }) => {\n  const {\n    tableProps: {\n      noResultsPlaceholder,\n      noResultsMessage,\n      noResultsSecondaryMessage,\n      noResultsButtonLabel,\n      onNoResultsButtonClick,\n      width: tableWidth,\n    },\n  } = useContext(DataTableContext);\n\n  if (React.isValidElement(noResultsPlaceholder))\n    return <CenterContentFlexWrapper width={width}>{noResultsPlaceholder}</CenterContentFlexWrapper>;\n\n  return (\n    <CenterContentFlexWrapper width={width} aria-live=\"assertive\" role=\"status\">\n      <EmptyStateWrapper width={tableWidth} justifyContent=\"center\">\n        <Icon size=\"xxl\" />\n        <PrimaryMessage>{noResultsMessage}</PrimaryMessage>\n        {noResultsSecondaryMessage ? <SecondaryMessage>{noResultsSecondaryMessage}</SecondaryMessage> : null}\n        {noResultsButtonLabel && onNoResultsButtonClick ? (\n          <Button buttonType=\"secondary\" labelText={noResultsButtonLabel} onClick={onNoResultsButtonClick} />\n        ) : null}\n      </EmptyStateWrapper>\n    </CenterContentFlexWrapper>\n  );\n};\n\nEmptyContent.propTypes = {\n  width: PropTypes.number,\n};\n\nexport { EmptyContent };\nexport default EmptyContent;\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,mBAAkC;AAClC,qBAAqB;AACrB,sBAAgC;AAChC,uBAAmD;AACnD,uBAAyB;AACzB,wBAAuB;AACvB,wBAAsB;AAEtB,8BAAiC;AAEjC,MAAM,oBAAoB,8BAAO,mBAAI;AAAA;AAAA;AAAA;AAAA;AAAA;AAMrC,MAAM,OAAO,8BAAO,+BAAe;AAAA,UACzB,CAAC,UAAU,MAAM,MAAM,OAAO,QAAQ;AAAA,WACrC,CAAC,UAAU,MAAM,MAAM,OAAO,QAAQ;AAAA;AAAA;AAGjD,MAAM,iBAAiB,yBAAO;AAAA;AAAA;AAAA,eAGf,CAAC,UAAU,+BAAS,MAAM,MAAM,UAAU,MAAM,IAAI;AAAA,WACxD,CAAC,UAAU,MAAM,MAAM,OAAO,QAAQ;AAAA,gBACjC,CAAC,UAAU,+CAAyB,MAAM,MAAM,MAAM,CAAC;AAAA,mBACpD,CAAC,UAAU,+CAAyB,MAAM,MAAM,MAAM,EAAE;AAAA;AAE3E,MAAM,mBAAmB,yBAAO;AAAA;AAAA,eAEjB,CAAC,UAAU,+BAAS,MAAM,MAAM,UAAU,MAAM,IAAI;AAAA,WACxD,CAAC,UAAU,MAAM,MAAM,OAAO,QAAQ;AAAA;AAAA;AAGjD,MAAM,SAAS,8BAAO,yBAAQ;AAAA,gBACd,CAAC,UAAU,+CAAyB,MAAM,MAAM,MAAM,CAAC;AAAA;AAAA;AAAA;AAIvE,MAAM,2BAA2B,yBAAO;AAAA,WAC7B,CAAC,EAAE,YAAY;AAAA;AAAA;AAAA;AAAA;AAM1B,MAAM,eAAgE,CAAC,EAAE,YAAY;AACnF,QAAM;AAAA,IACJ,YAAY;AAAA,MACV;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA,OAAO;AAAA;AAAA,MAEP,6BAAW,wCAAgB;AAE/B,MAAI,qBAAM,eAAe,oBAAoB;AAC3C,WAAO,mDAAC;AAAA,MAAyB;AAAA,OAAe,oBAAqB;AAEvE,SACE,mDAAC;AAAA,IAAyB;AAAA,IAAc,aAAU;AAAA,IAAY,MAAK;AAAA,KACjE,mDAAC;AAAA,IAAkB,OAAO;AAAA,IAAY,gBAAe;AAAA,KACnD,mDAAC;AAAA,IAAK,MAAK;AAAA,GAAM,GACjB,mDAAC,sBAAgB,gBAAiB,GACjC,4BAA4B,mDAAC,wBAAkB,yBAA0B,IAAsB,MAC/F,wBAAwB,yBACvB,mDAAC;AAAA,IAAO,YAAW;AAAA,IAAY,WAAW;AAAA,IAAsB,SAAS;AAAA,GAAwB,IAC/F,IACN,CACF;AAEJ;AAEA,aAAa,YAAY;AAAA,EACvB,OAAO,0BAAU;AACnB;AAGA,IAAO,uBAAQ;",
+  "sourcesContent": ["import React, { useContext } from 'react';\nimport { Grid } from '@elliemae/ds-grid';\nimport { WarningTriangle } from '@elliemae/ds-icons';\nimport { __UNSAFE_SPACE_TO_DIMSUM, toMobile } from '@elliemae/ds-system';\nimport { DSButton } from '@elliemae/ds-button';\nimport { styled } from '@elliemae/ds-system';\nimport PropTypes from 'prop-types';\n\nimport { DataTableContext } from '../DataTableContext';\n\nconst EmptyStateWrapper = styled(Grid)`\n  position: sticky;\n  height: fit-content;\n  top: 0;\n  left: 0;\n`;\nconst Icon = styled(WarningTriangle)`\n  fill: ${(props) => props.theme.colors.neutral[300]};\n  color: ${(props) => props.theme.colors.neutral[300]};\n  justify-self: center;\n`;\nconst PrimaryMessage = styled.p`\n  text-align: center;\n  font-weight: bold;\n  font-size: ${(props) => toMobile(props.theme.fontSizes.value[400])};\n  color: ${(props) => props.theme.colors.neutral[600]};\n  margin-top: ${(props) => __UNSAFE_SPACE_TO_DIMSUM(props.theme.space.s)};\n  margin-bottom: ${(props) => __UNSAFE_SPACE_TO_DIMSUM(props.theme.space.xs)};\n`;\nconst SecondaryMessage = styled.p`\n  text-align: center;\n  font-size: ${(props) => toMobile(props.theme.fontSizes.value[400])}; /* 13px */\n  color: ${(props) => props.theme.colors.neutral[500]};\n  margin: 0;\n`;\nconst Button = styled(DSButton)`\n  margin-top: ${(props) => __UNSAFE_SPACE_TO_DIMSUM(props.theme.space.m)};\n  justify-self: center;\n  width: fit-content;\n`;\nconst CenterContentFlexWrapper = styled.div<{ width: number | string }>`\n  width: ${({ width }) => width}px;\n  height: calc(100% - 48px);\n  display: flex;\n  align-items: center;\n`;\n\nconst EmptyContent: React.ComponentType<{ width: string | number }> = ({ width }) => {\n  const {\n    tableProps: {\n      noResultsPlaceholder,\n      noResultsMessage,\n      noResultsSecondaryMessage,\n      noResultsButtonLabel,\n      onNoResultsButtonClick,\n    },\n    virtualListRef,\n  } = useContext(DataTableContext);\n\n  if (React.isValidElement(noResultsPlaceholder))\n    return <CenterContentFlexWrapper width={width}>{noResultsPlaceholder}</CenterContentFlexWrapper>;\n\n  return (\n    <CenterContentFlexWrapper width={width} aria-live=\"assertive\" role=\"status\">\n      <EmptyStateWrapper width={virtualListRef.current?.clientWidth} justifyContent=\"center\">\n        <Icon size=\"xxl\" />\n        <PrimaryMessage>{noResultsMessage}</PrimaryMessage>\n        {noResultsSecondaryMessage ? <SecondaryMessage>{noResultsSecondaryMessage}</SecondaryMessage> : null}\n        {noResultsButtonLabel && onNoResultsButtonClick ? (\n          <Button buttonType=\"secondary\" labelText={noResultsButtonLabel} onClick={onNoResultsButtonClick} />\n        ) : null}\n      </EmptyStateWrapper>\n    </CenterContentFlexWrapper>\n  );\n};\n\nEmptyContent.propTypes = {\n  width: PropTypes.number,\n};\n\nexport { EmptyContent };\nexport default EmptyContent;\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,mBAAkC;AAClC,qBAAqB;AACrB,sBAAgC;AAChC,uBAAmD;AACnD,uBAAyB;AACzB,wBAAuB;AACvB,wBAAsB;AAEtB,8BAAiC;AAEjC,MAAM,oBAAoB,8BAAO,mBAAI;AAAA;AAAA;AAAA;AAAA;AAAA;AAMrC,MAAM,OAAO,8BAAO,+BAAe;AAAA,UACzB,CAAC,UAAU,MAAM,MAAM,OAAO,QAAQ;AAAA,WACrC,CAAC,UAAU,MAAM,MAAM,OAAO,QAAQ;AAAA;AAAA;AAGjD,MAAM,iBAAiB,yBAAO;AAAA;AAAA;AAAA,eAGf,CAAC,UAAU,+BAAS,MAAM,MAAM,UAAU,MAAM,IAAI;AAAA,WACxD,CAAC,UAAU,MAAM,MAAM,OAAO,QAAQ;AAAA,gBACjC,CAAC,UAAU,+CAAyB,MAAM,MAAM,MAAM,CAAC;AAAA,mBACpD,CAAC,UAAU,+CAAyB,MAAM,MAAM,MAAM,EAAE;AAAA;AAE3E,MAAM,mBAAmB,yBAAO;AAAA;AAAA,eAEjB,CAAC,UAAU,+BAAS,MAAM,MAAM,UAAU,MAAM,IAAI;AAAA,WACxD,CAAC,UAAU,MAAM,MAAM,OAAO,QAAQ;AAAA;AAAA;AAGjD,MAAM,SAAS,8BAAO,yBAAQ;AAAA,gBACd,CAAC,UAAU,+CAAyB,MAAM,MAAM,MAAM,CAAC;AAAA;AAAA;AAAA;AAIvE,MAAM,2BAA2B,yBAAO;AAAA,WAC7B,CAAC,EAAE,YAAY;AAAA;AAAA;AAAA;AAAA;AAM1B,MAAM,eAAgE,CAAC,EAAE,YAAY;AACnF,QAAM;AAAA,IACJ,YAAY;AAAA,MACV;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA;AAAA,IAEF;AAAA,MACE,6BAAW,wCAAgB;AAE/B,MAAI,qBAAM,eAAe,oBAAoB;AAC3C,WAAO,mDAAC;AAAA,MAAyB;AAAA,OAAe,oBAAqB;AAEvE,SACE,mDAAC;AAAA,IAAyB;AAAA,IAAc,aAAU;AAAA,IAAY,MAAK;AAAA,KACjE,mDAAC;AAAA,IAAkB,OAAO,eAAe,SAAS;AAAA,IAAa,gBAAe;AAAA,KAC5E,mDAAC;AAAA,IAAK,MAAK;AAAA,GAAM,GACjB,mDAAC,sBAAgB,gBAAiB,GACjC,4BAA4B,mDAAC,wBAAkB,yBAA0B,IAAsB,MAC/F,wBAAwB,yBACvB,mDAAC;AAAA,IAAO,YAAW;AAAA,IAAY,WAAW;AAAA,IAAsB,SAAS;AAAA,GAAwB,IAC/F,IACN,CACF;AAEJ;AAEA,aAAa,YAAY;AAAA,EACvB,OAAO,0BAAU;AACnB;AAGA,IAAO,uBAAQ;",
   "names": []
 }

package/dist/cjs/parts/FilterBar/FiltersBar.js

@@ -57,9 +57,11 @@ const FiltersBar = () => {
   const removeAllFilters = (0, import_react.useCallback)(() => {
     onFiltersChange([]);
     filterBarProps?.onClearAllFiltersClick?.();
+    setIsOpen(false);
   }, [onFiltersChange, filterBarProps?.onClearAllFiltersClick]);
   const onFilterBarClose = (0, import_react.useCallback)(() => {
     filterBarProps?.onDropdownMenuToggle?.(false, "onClose");
+    dropdownMenuRef.current.focus();
     setIsOpen(false);
   }, [filterBarProps?.onDropdownMenuToggle]);
   const onFilterBarOpen = (0, import_react.useCallback)(() => {
@@ -114,7 +116,11 @@ const FiltersBar = () => {
       {
         id: "__internal__option__clear__filters",
         label: "Clear Filters",
-        onClick: removeAllFilters
+        onClick: removeAllFilters,
+        onKeyDown: (e) => {
+          if (["Enter", "Space"].includes(e.code))
+            removeAllFilters();
+        }
       },
       ...filterBarProps?.extraOptions || []
     ],

package/dist/cjs/parts/FilterBar/FiltersBar.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/parts/FilterBar/FiltersBar.tsx", "../../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["/* eslint-disable react/prop-types */\nimport React, { useCallback, useContext, useMemo, useRef, useState } from 'react';\nimport { DSButtonV2 } from '@elliemae/ds-button';\nimport { MoreOptionsVert } from '@elliemae/ds-icons';\nimport { FILTER_TYPES } from '../../exported-related';\nimport {\n  SelectPill,\n  MultiSelectPill,\n  SingleDatePill,\n  DateRangePill,\n  NumberRangePill,\n  DateSwitcherPill,\n} from './components';\nimport { DataTableContext } from '../../DataTableContext';\nimport { StyledDropdownMenu, StyledWrapper } from './styled';\nimport { FilterPillComponent } from './types';\nimport { DATA_TESTID } from '../../configs/constants';\n\nconst pillRenderMapper: Record<string, FilterPillComponent<any>> = {\n  [FILTER_TYPES.SELECT]: SelectPill,\n  [FILTER_TYPES.MULTI_SELECT]: MultiSelectPill,\n  [FILTER_TYPES.SINGLE_DATE]: SingleDatePill,\n  [FILTER_TYPES.DATE_RANGE]: DateRangePill,\n  [FILTER_TYPES.DATE_SWITCHER]: DateSwitcherPill,\n  [FILTER_TYPES.NUMBER_RANGE]: NumberRangePill,\n  [FILTER_TYPES.CURRENCY_RANGE]: NumberRangePill,\n};\n\nexport const FiltersBar: React.ComponentType = () => {\n  const {\n    tableProps: { width, filterBarProps, onFiltersChange, filters },\n    visibleColumns,\n  } = useContext(DataTableContext);\n\n  const [isOpen, setIsOpen] = useState(false);\n\n  const pillGroupRefs = useMemo(() => {\n    const refs: React.RefObject<HTMLElement>[] = [];\n    for (let i = 0; i < filters.length; i += 1) refs.push(React.createRef());\n    return refs;\n  }, [filters.length]);\n\n  const dropdownMenuRef = useRef(null);\n\n  const removeAllFilters = useCallback(() => {\n    onFiltersChange([]);\n    filterBarProps?.onClearAllFiltersClick?.();\n  }, [onFiltersChange, filterBarProps?.onClearAllFiltersClick]);\n\n  const onFilterBarClose = useCallback(() => {\n    filterBarProps?.onDropdownMenuToggle?.(false, 'onClose');\n    setIsOpen(false);\n  }, [filterBarProps?.onDropdownMenuToggle]);\n\n  const onFilterBarOpen = useCallback(() => {\n    filterBarProps?.onDropdownMenuToggle?.(true, 'onOpen');\n    setIsOpen(true);\n  }, [filterBarProps?.onDropdownMenuToggle]);\n\n  const onFilterBarOnClickOutside = useCallback(() => {\n    filterBarProps?.onDropdownMenuToggle?.(false, 'onClickOutside');\n    filterBarProps?.onDropdownMenuClickOutside?.();\n    setIsOpen(false);\n  }, [filterBarProps?.onDropdownMenuToggle, filterBarProps?.onDropdownMenuClickOutside]);\n\n  const onTriggerClick = useCallback(() => {\n    filterBarProps?.onDropdownMenuTriggerClick?.();\n    onFilterBarOpen();\n  }, [filterBarProps?.onDropdownMenuTriggerClick]);\n\n  const finalIsOpen = useMemo(() => {\n    if (typeof filterBarProps?.isDropdownMenuOpen === 'boolean') return filterBarProps.isDropdownMenuOpen;\n    return isOpen;\n  }, [filterBarProps?.isDropdownMenuOpen, isOpen]);\n\n  return (\n    <StyledWrapper width={width} aria-live=\"polite\" aria-relevant=\"additions removals\" gutter=\"xs\">\n      {filters.map(({ id: column, type, value }, index) => {\n        const columnHeader = visibleColumns.find((col) => col.accessor === column)?.Header;\n        let Component: FilterPillComponent<unknown> = () => null;\n\n        const filterType = type;\n        if (filterType in pillRenderMapper) {\n          Component = pillRenderMapper[filterType];\n        } else if (filterBarProps?.customPillRenderer) {\n          Component = filterBarProps.customPillRenderer;\n        }\n        return (\n          <Component\n            key={column}\n            columnHeader={typeof columnHeader === 'string' ? columnHeader : column}\n            column={column}\n            value={value}\n            filters={filters}\n            onFiltersChange={onFiltersChange}\n            prevRef={pillGroupRefs[index - 1]}\n            innerRef={pillGroupRefs[index]}\n            nextRef={pillGroupRefs[index + 1] ?? dropdownMenuRef}\n          />\n        );\n      })}\n      <StyledDropdownMenu\n        preventOverflow=\"scrollParent\"\n        isOpen={finalIsOpen}\n        onClose={onFilterBarClose}\n        onClickOutsideMenu={onFilterBarOnClickOutside}\n        options={[\n          {\n            id: '__internal__option__clear__filters',\n            label: 'Clear Filters',\n            onClick: removeAllFilters,\n          },\n          ...(filterBarProps?.extraOptions || []),\n        ]}\n        triggerComponent={\n          <DSButtonV2\n            data-testid={DATA_TESTID.DATA_TABLE_FILTER_BAR_DD_MENU_BUTTON}\n            buttonType=\"icon\"\n            innerRef={dropdownMenuRef}\n            onClick={onTriggerClick}\n          >\n            <MoreOptionsVert />\n          </DSButtonV2>\n        }\n      />\n    </StyledWrapper>\n  );\n};\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": "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",
+  "sourcesContent": ["/* eslint-disable react/prop-types */\nimport React, { useCallback, useContext, useMemo, useRef, useState } from 'react';\nimport { DSButtonV2 } from '@elliemae/ds-button';\nimport { MoreOptionsVert } from '@elliemae/ds-icons';\nimport { FILTER_TYPES } from '../../exported-related';\nimport {\n  SelectPill,\n  MultiSelectPill,\n  SingleDatePill,\n  DateRangePill,\n  NumberRangePill,\n  DateSwitcherPill,\n} from './components';\nimport { DataTableContext } from '../../DataTableContext';\nimport { StyledDropdownMenu, StyledWrapper } from './styled';\nimport { FilterPillComponent } from './types';\nimport { DATA_TESTID } from '../../configs/constants';\n\nconst pillRenderMapper: Record<string, FilterPillComponent<any>> = {\n  [FILTER_TYPES.SELECT]: SelectPill,\n  [FILTER_TYPES.MULTI_SELECT]: MultiSelectPill,\n  [FILTER_TYPES.SINGLE_DATE]: SingleDatePill,\n  [FILTER_TYPES.DATE_RANGE]: DateRangePill,\n  [FILTER_TYPES.DATE_SWITCHER]: DateSwitcherPill,\n  [FILTER_TYPES.NUMBER_RANGE]: NumberRangePill,\n  [FILTER_TYPES.CURRENCY_RANGE]: NumberRangePill,\n};\n\nexport const FiltersBar: React.ComponentType = () => {\n  const {\n    tableProps: { width, filterBarProps, onFiltersChange, filters },\n    visibleColumns,\n  } = useContext(DataTableContext);\n\n  const [isOpen, setIsOpen] = useState(false);\n\n  const pillGroupRefs = useMemo(() => {\n    const refs: React.RefObject<HTMLElement>[] = [];\n    for (let i = 0; i < filters.length; i += 1) refs.push(React.createRef());\n    return refs;\n  }, [filters.length]);\n\n  const dropdownMenuRef = useRef(null);\n\n  const removeAllFilters = useCallback(() => {\n    onFiltersChange([]);\n    filterBarProps?.onClearAllFiltersClick?.();\n    setIsOpen(false);\n  }, [onFiltersChange, filterBarProps?.onClearAllFiltersClick]);\n\n  const onFilterBarClose = useCallback(() => {\n    filterBarProps?.onDropdownMenuToggle?.(false, 'onClose');\n    dropdownMenuRef.current.focus();\n    setIsOpen(false);\n  }, [filterBarProps?.onDropdownMenuToggle]);\n\n  const onFilterBarOpen = useCallback(() => {\n    filterBarProps?.onDropdownMenuToggle?.(true, 'onOpen');\n    setIsOpen(true);\n  }, [filterBarProps?.onDropdownMenuToggle]);\n\n  const onFilterBarOnClickOutside = useCallback(() => {\n    filterBarProps?.onDropdownMenuToggle?.(false, 'onClickOutside');\n    filterBarProps?.onDropdownMenuClickOutside?.();\n    setIsOpen(false);\n  }, [filterBarProps?.onDropdownMenuToggle, filterBarProps?.onDropdownMenuClickOutside]);\n\n  const onTriggerClick = useCallback(() => {\n    filterBarProps?.onDropdownMenuTriggerClick?.();\n    onFilterBarOpen();\n  }, [filterBarProps?.onDropdownMenuTriggerClick]);\n\n  const finalIsOpen = useMemo(() => {\n    if (typeof filterBarProps?.isDropdownMenuOpen === 'boolean') return filterBarProps.isDropdownMenuOpen;\n    return isOpen;\n  }, [filterBarProps?.isDropdownMenuOpen, isOpen]);\n\n  return (\n    <StyledWrapper width={width} aria-live=\"polite\" aria-relevant=\"additions removals\" gutter=\"xs\">\n      {filters.map(({ id: column, type, value }, index) => {\n        const columnHeader = visibleColumns.find((col) => col.accessor === column)?.Header;\n        let Component: FilterPillComponent<unknown> = () => null;\n\n        const filterType = type;\n        if (filterType in pillRenderMapper) {\n          Component = pillRenderMapper[filterType];\n        } else if (filterBarProps?.customPillRenderer) {\n          Component = filterBarProps.customPillRenderer;\n        }\n        return (\n          <Component\n            key={column}\n            columnHeader={typeof columnHeader === 'string' ? columnHeader : column}\n            column={column}\n            value={value}\n            filters={filters}\n            onFiltersChange={onFiltersChange}\n            prevRef={pillGroupRefs[index - 1]}\n            innerRef={pillGroupRefs[index]}\n            nextRef={pillGroupRefs[index + 1] ?? dropdownMenuRef}\n          />\n        );\n      })}\n      <StyledDropdownMenu\n        preventOverflow=\"scrollParent\"\n        isOpen={finalIsOpen}\n        onClose={onFilterBarClose}\n        onClickOutsideMenu={onFilterBarOnClickOutside}\n        options={[\n          {\n            id: '__internal__option__clear__filters',\n            label: 'Clear Filters',\n            onClick: removeAllFilters,\n            onKeyDown: (e: React.KeyboardEvent) => {\n              if (['Enter', 'Space'].includes(e.code)) removeAllFilters();\n            },\n          },\n          ...(filterBarProps?.extraOptions || []),\n        ]}\n        triggerComponent={\n          <DSButtonV2\n            data-testid={DATA_TESTID.DATA_TABLE_FILTER_BAR_DD_MENU_BUTTON}\n            buttonType=\"icon\"\n            innerRef={dropdownMenuRef}\n            onClick={onTriggerClick}\n          >\n            <MoreOptionsVert />\n          </DSButtonV2>\n        }\n      />\n    </StyledWrapper>\n  );\n};\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": "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",
   "names": []
 }

package/dist/cjs/parts/Headers/HeaderCell.js

@@ -148,7 +148,7 @@ const HeaderCell = (props) => {
     ctx,
     draggableProps,
     textWrap
-  }), rightIcons, isResizeable && column.canResize !== false && /* @__PURE__ */ import_react.default.createElement(import_HeaderResizer.HeaderResizer, {
+  }), rightIcons, isResizeable && column.canResize !== false && !column.columns && /* @__PURE__ */ import_react.default.createElement(import_HeaderResizer.HeaderResizer, {
     column
   })), /* @__PURE__ */ import_react.default.createElement("span", {
     id: `${column.id}-instructions`,

package/dist/cjs/parts/Headers/HeaderCell.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/parts/Headers/HeaderCell.tsx", "../../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["/* eslint-disable max-params */\n/* eslint-disable max-lines */\n/* eslint-disable complexity */\n/* eslint-disable react/prop-types */\nimport React, { useContext, useMemo, useRef } from 'react';\nimport { Grid } from '@elliemae/ds-grid';\nimport { StyledHeadTh, StyledHeaderRightIconsWrapper, StyledFocusWithin } from '../../styled';\nimport { DataTableContext } from '../../DataTableContext';\nimport { SortByCaret } from '../SortByCaret';\nimport { DnDHandle } from '..';\nimport { SortableItemContext } from '../HoC/SortableItemContext';\nimport { FilterMapItem } from '../Filters';\nimport { HeaderResizer } from './HeaderResizer';\nimport { TypescriptColumn } from '../../types/props';\nimport { useHeaderCellHandlers } from './useHeaderCellHandlers';\nimport { useHeaderCellConfig } from './useHeaderCellConfig';\nimport { useRecoverFocusCol } from '../../hooks/useRecoverFocusCol';\nimport { DATA_TESTID } from '../../configs/constants';\nimport { HeaderCellTitle } from './HeaderCellTitle';\n\nconst buildScreenReaderInstructions = (colSpan: number, draggable: boolean, filterable: boolean, sortable: boolean) => {\n  const preffix = colSpan === 1 ? '' : 'Column Group. ';\n  if (!draggable && !filterable && !sortable) return preffix;\n\n  let message = sortable\n    ? 'You can sort the data ascendingly/descendingly by this column. Use the up / down arrows keys to do so'\n    : '';\n  if (draggable && filterable) {\n    message = `This column is draggable and filterable. To enable these interactions press the enter key. ${message}`;\n  } else if (draggable || filterable) {\n    message = `This column is ${\n      draggable ? 'draggable' : 'filterable'\n    }. To enable this interaction press the enter key. ${message}`;\n  }\n  return `${preffix}${message}`;\n};\n\ninterface HeaderCellCompProps {\n  column: TypescriptColumn;\n  isDragOverlay: boolean;\n  colSpan: number;\n}\n\nexport const HeaderCell: React.ComponentType<HeaderCellCompProps> = (props) => {\n  const { column, isDragOverlay, colSpan } = props;\n  const ctx = useContext(DataTableContext);\n  const {\n    tableProps: { isResizeable, onColumnSortChange, dragAndDropColumns, onFiltersChange, filters, textWrap },\n    flattenedData,\n    reduxHeaders,\n    patchHeader,\n  } = ctx;\n  const reduxHeader = useMemo(() => reduxHeaders[column.id], [reduxHeaders, column]);\n  const dragHandleRef = useRef<HTMLDivElement>(null);\n  const filterIconRef = useRef<HTMLDivElement>(null);\n\n  const { draggableProps } = useContext(SortableItemContext);\n\n  const { hasFilter, hasDnD, hasSortingCaret, hasRightIcons, shouldShowDnD, hCols, isDragging } = useHeaderCellConfig({\n    column,\n    dragAndDropColumns,\n    draggableProps,\n    reduxHeader,\n    isDragOverlay,\n  });\n\n  useRecoverFocusCol(isDragging, dragHandleRef);\n\n  const rightIcons = useMemo(() => {\n    if (!hasRightIcons) return null;\n    return (\n      <StyledHeaderRightIconsWrapper>\n        <FilterMapItem\n          column={column}\n          ctx={ctx}\n          onFiltersChange={onFiltersChange}\n          reduxHeader={reduxHeader}\n          filterValue={filters}\n          innerRef={filterIconRef}\n        />\n        {hasSortingCaret && <SortByCaret isSortedDesc={column.isSortedDesc} />}\n      </StyledHeaderRightIconsWrapper>\n    );\n  }, [hasRightIcons, column, ctx, onFiltersChange, reduxHeader, filters, hasSortingCaret]);\n\n  const DnDHandleComponent = useMemo(\n    () => (\n      <Grid mr=\"2px\" alignItems=\"center\" style={{ position: 'relative' }}>\n        <StyledFocusWithin hideFocus={isDragging}>\n          <DnDHandle\n            key={column.id}\n            innerRef={dragHandleRef}\n            isReachable={reduxHeader?.withTabStops}\n            id={column.id}\n            isDragOverlay={isDragOverlay}\n          />\n        </StyledFocusWithin>\n      </Grid>\n    ),\n    [column.id, isDragOverlay, isDragging, reduxHeader?.withTabStops],\n  );\n\n  const handlers = useHeaderCellHandlers({\n    hasFilter,\n    patchHeader,\n    column,\n    reduxHeader,\n    hasDnD,\n    onColumnSortChange,\n    dragHandleRef,\n    filterIconRef,\n    headerRef: column.ref,\n  });\n\n  return (\n    <StyledHeadTh\n      column={column}\n      {...handlers}\n      role={colSpan === 1 ? 'columnheader' : 'group'}\n      colSpan={colSpan}\n      aria-describedby={`${column.id}-instructions`}\n      // eslint-disable-next-line no-nested-ternary\n      aria-sort={hasSortingCaret ? (column.isSortedDesc ? 'descending' : 'ascending') : 'none'}\n      data-testid={DATA_TESTID.DATA_TABLE_HEADER}\n      isFirstRowGroup={!!flattenedData[0]?.original?.dimsumHeaderValue}\n      tabIndex={column.isFocuseable === false ? -1 : 0}\n      isDragOverlay={isDragOverlay}\n      isDraggingActive={draggableProps && draggableProps.active}\n      shouldShowDnD={shouldShowDnD}\n      ref={column.ref}\n    >\n      <Grid width=\"100%\" cols={hCols}>\n        {shouldShowDnD && DnDHandleComponent}\n        <HeaderCellTitle column={column} ctx={ctx} draggableProps={draggableProps} textWrap={textWrap} />\n        {rightIcons}\n        {isResizeable && column.canResize !== false && <HeaderResizer column={column} />}\n      </Grid>\n      <span id={`${column.id}-instructions`} style={{ display: 'none' }} aria-hidden=\"false\">\n        {buildScreenReaderInstructions(\n          colSpan,\n          dragAndDropColumns && column.disableDnD !== true,\n          hasFilter,\n          column.canSort,\n        )}\n      </span>\n    </StyledHeadTh>\n  );\n};\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": "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",
+  "sourcesContent": ["/* eslint-disable max-params */\n/* eslint-disable max-lines */\n/* eslint-disable complexity */\n/* eslint-disable react/prop-types */\nimport React, { useContext, useMemo, useRef } from 'react';\nimport { Grid } from '@elliemae/ds-grid';\nimport { StyledHeadTh, StyledHeaderRightIconsWrapper, StyledFocusWithin } from '../../styled';\nimport { DataTableContext } from '../../DataTableContext';\nimport { SortByCaret } from '../SortByCaret';\nimport { DnDHandle } from '..';\nimport { SortableItemContext } from '../HoC/SortableItemContext';\nimport { FilterMapItem } from '../Filters';\nimport { HeaderResizer } from './HeaderResizer';\nimport { TypescriptColumn } from '../../types/props';\nimport { useHeaderCellHandlers } from './useHeaderCellHandlers';\nimport { useHeaderCellConfig } from './useHeaderCellConfig';\nimport { useRecoverFocusCol } from '../../hooks/useRecoverFocusCol';\nimport { DATA_TESTID } from '../../configs/constants';\nimport { HeaderCellTitle } from './HeaderCellTitle';\n\nconst buildScreenReaderInstructions = (colSpan: number, draggable: boolean, filterable: boolean, sortable: boolean) => {\n  const preffix = colSpan === 1 ? '' : 'Column Group. ';\n  if (!draggable && !filterable && !sortable) return preffix;\n\n  let message = sortable\n    ? 'You can sort the data ascendingly/descendingly by this column. Use the up / down arrows keys to do so'\n    : '';\n  if (draggable && filterable) {\n    message = `This column is draggable and filterable. To enable these interactions press the enter key. ${message}`;\n  } else if (draggable || filterable) {\n    message = `This column is ${\n      draggable ? 'draggable' : 'filterable'\n    }. To enable this interaction press the enter key. ${message}`;\n  }\n  return `${preffix}${message}`;\n};\n\ninterface HeaderCellCompProps {\n  column: TypescriptColumn;\n  isDragOverlay: boolean;\n  colSpan: number;\n}\n\nexport const HeaderCell: React.ComponentType<HeaderCellCompProps> = (props) => {\n  const { column, isDragOverlay, colSpan } = props;\n  const ctx = useContext(DataTableContext);\n  const {\n    tableProps: { isResizeable, onColumnSortChange, dragAndDropColumns, onFiltersChange, filters, textWrap },\n    flattenedData,\n    reduxHeaders,\n    patchHeader,\n  } = ctx;\n  const reduxHeader = useMemo(() => reduxHeaders[column.id], [reduxHeaders, column]);\n  const dragHandleRef = useRef<HTMLDivElement>(null);\n  const filterIconRef = useRef<HTMLDivElement>(null);\n\n  const { draggableProps } = useContext(SortableItemContext);\n\n  const { hasFilter, hasDnD, hasSortingCaret, hasRightIcons, shouldShowDnD, hCols, isDragging } = useHeaderCellConfig({\n    column,\n    dragAndDropColumns,\n    draggableProps,\n    reduxHeader,\n    isDragOverlay,\n  });\n\n  useRecoverFocusCol(isDragging, dragHandleRef);\n\n  const rightIcons = useMemo(() => {\n    if (!hasRightIcons) return null;\n    return (\n      <StyledHeaderRightIconsWrapper>\n        <FilterMapItem\n          column={column}\n          ctx={ctx}\n          onFiltersChange={onFiltersChange}\n          reduxHeader={reduxHeader}\n          filterValue={filters}\n          innerRef={filterIconRef}\n        />\n        {hasSortingCaret && <SortByCaret isSortedDesc={column.isSortedDesc} />}\n      </StyledHeaderRightIconsWrapper>\n    );\n  }, [hasRightIcons, column, ctx, onFiltersChange, reduxHeader, filters, hasSortingCaret]);\n\n  const DnDHandleComponent = useMemo(\n    () => (\n      <Grid mr=\"2px\" alignItems=\"center\" style={{ position: 'relative' }}>\n        <StyledFocusWithin hideFocus={isDragging}>\n          <DnDHandle\n            key={column.id}\n            innerRef={dragHandleRef}\n            isReachable={reduxHeader?.withTabStops}\n            id={column.id}\n            isDragOverlay={isDragOverlay}\n          />\n        </StyledFocusWithin>\n      </Grid>\n    ),\n    [column.id, isDragOverlay, isDragging, reduxHeader?.withTabStops],\n  );\n\n  const handlers = useHeaderCellHandlers({\n    hasFilter,\n    patchHeader,\n    column,\n    reduxHeader,\n    hasDnD,\n    onColumnSortChange,\n    dragHandleRef,\n    filterIconRef,\n    headerRef: column.ref,\n  });\n\n  return (\n    <StyledHeadTh\n      column={column}\n      {...handlers}\n      role={colSpan === 1 ? 'columnheader' : 'group'}\n      colSpan={colSpan}\n      aria-describedby={`${column.id}-instructions`}\n      // eslint-disable-next-line no-nested-ternary\n      aria-sort={hasSortingCaret ? (column.isSortedDesc ? 'descending' : 'ascending') : 'none'}\n      data-testid={DATA_TESTID.DATA_TABLE_HEADER}\n      isFirstRowGroup={!!flattenedData[0]?.original?.dimsumHeaderValue}\n      tabIndex={column.isFocuseable === false ? -1 : 0}\n      isDragOverlay={isDragOverlay}\n      isDraggingActive={draggableProps && draggableProps.active}\n      shouldShowDnD={shouldShowDnD}\n      ref={column.ref}\n    >\n      <Grid width=\"100%\" cols={hCols}>\n        {shouldShowDnD && DnDHandleComponent}\n        <HeaderCellTitle column={column} ctx={ctx} draggableProps={draggableProps} textWrap={textWrap} />\n        {rightIcons}\n        {isResizeable && column.canResize !== false && !column.columns && <HeaderResizer column={column} />}\n      </Grid>\n      <span id={`${column.id}-instructions`} style={{ display: 'none' }} aria-hidden=\"false\">\n        {buildScreenReaderInstructions(\n          colSpan,\n          dragAndDropColumns && column.disableDnD !== true,\n          hasFilter,\n          column.canSort,\n        )}\n      </span>\n    </StyledHeadTh>\n  );\n};\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": "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",
   "names": []
 }

package/dist/cjs/parts/Headers/HeaderResizer.js

@@ -52,11 +52,18 @@ const HeaderResizer = ({ column }) => {
   } = (0, import_react.useContext)(import_DataTableContext.DataTableContext);
   const [isResizing, setIsResizing] = (0, import_react.useState)(false);
   const [nextWidth, setNextWidth] = (0, import_react.useState)(column.width ?? 150);
-  const visibleColumnsCopy = (0, import_react.useMemo)(() => visibleColumns.map((col) => __spreadValues({}, col)), [visibleColumns]);
+  const visibleColumnsCopy = (0, import_react.useMemo)(() => visibleColumns.reduce((acc, col) => {
+    if (col.columns) {
+      return [...acc, ...col.columns];
+    }
+    return [...acc, __spreadValues({}, col)];
+  }, []), [visibleColumns]);
   (0, import_react.useEffect)(() => {
     const realColumnIndex = visibleColumnsCopy.findIndex((visibleColumn) => visibleColumn.id === column.id);
-    visibleColumnsCopy[realColumnIndex].width = nextWidth;
-    setGridLayout((0, import_helpers.columnsToGrid)(visibleColumnsCopy, import_constants.ColsLayoutStyle.Fixed));
+    if (realColumnIndex > -1) {
+      visibleColumnsCopy[realColumnIndex].width = nextWidth;
+      setGridLayout((0, import_helpers.columnsToGrid)(visibleColumnsCopy, import_constants.ColsLayoutStyle.Fixed));
+    }
   }, [column.id, nextWidth, setGridLayout, visibleColumnsCopy]);
   const ref = (0, import_react.useRef)(null);
   const onResizeStart = (0, import_react.useCallback)(() => {
@@ -65,16 +72,18 @@ const HeaderResizer = ({ column }) => {
   const onResizeHandler = (0, import_react.useCallback)((e) => {
     const delta = ("clientX" in e ? e.clientX : e.touches[0].clientX) - (ref.current?.getBoundingClientRect().x ?? 0);
     const realColumnIndex = visibleColumnsCopy.findIndex((visibleColumn) => visibleColumn.id === column.id);
-    const widthWithDelta = narrow(nextWidth + delta, visibleColumnsCopy[realColumnIndex].minWidth, visibleColumnsCopy[realColumnIndex].maxWidth);
-    setNextWidth(widthWithDelta);
+    if (realColumnIndex > -1) {
+      const widthWithDelta = narrow(nextWidth + delta, visibleColumnsCopy[realColumnIndex].minWidth, visibleColumnsCopy[realColumnIndex].maxWidth);
+      setNextWidth(widthWithDelta);
+    }
     e.preventDefault();
     e.stopPropagation();
   }, [column.id, nextWidth, visibleColumnsCopy]);
   const onResizeEnd = (0, import_react.useCallback)(() => {
-    setGridLayout((0, import_helpers.columnsToGrid)(visibleColumns, import_constants.ColsLayoutStyle.Fixed));
+    setGridLayout((0, import_helpers.columnsToGrid)(visibleColumnsCopy, import_constants.ColsLayoutStyle.Fixed));
     setIsResizing(false);
     onColumnResize(column.id, nextWidth);
-  }, [onColumnResize, column.id, nextWidth, setGridLayout, visibleColumns]);
+  }, [onColumnResize, column.id, nextWidth, setGridLayout, visibleColumnsCopy]);
   (0, import_react.useEffect)(() => {
     const debouncedResizeHandler = onResizeHandler;
     const debouncedResizeEnd = onResizeEnd;

package/dist/cjs/parts/Headers/HeaderResizer.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/parts/Headers/HeaderResizer.tsx", "../../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["/* eslint-disable react/prop-types */\nimport React, { useState, useCallback, useContext, useRef, useEffect, useMemo } from 'react';\nimport { ColsLayoutStyle } from '../../configs/constants';\nimport { DataTableContext } from '../../DataTableContext';\nimport { columnsToGrid } from '../../helpers';\nimport { StyledResizer } from '../../styled';\nimport { TypescriptColumn } from '../../types/props';\n\nconst narrow = (value: number, min: number | undefined, max: number | undefined): number =>\n  Math.min(Math.max(value, min ?? 30), max ?? Infinity);\n\nexport const HeaderResizer: React.ComponentType<{\n  column: TypescriptColumn;\n}> = ({ column }) => {\n  const {\n    layoutHelpers: { setGridLayout },\n    visibleColumns,\n    tableProps: { onColumnResize },\n  } = useContext(DataTableContext);\n\n  const [isResizing, setIsResizing] = useState(false);\n  const [nextWidth, setNextWidth] = useState(column.width ?? 150);\n\n  const visibleColumnsCopy = useMemo(() => visibleColumns.map((col) => ({ ...col })), [visibleColumns]);\n\n  useEffect(() => {\n    const realColumnIndex = visibleColumnsCopy.findIndex((visibleColumn) => visibleColumn.id === column.id);\n\n    visibleColumnsCopy[realColumnIndex].width = nextWidth;\n    setGridLayout(columnsToGrid(visibleColumnsCopy, ColsLayoutStyle.Fixed));\n  }, [column.id, nextWidth, setGridLayout, visibleColumnsCopy]);\n\n  const ref = useRef<HTMLDivElement>(null);\n\n  const onResizeStart = useCallback(() => {\n    setIsResizing(true);\n  }, []);\n\n  const onResizeHandler = useCallback(\n    (e: MouseEvent | TouchEvent) => {\n      const delta = ('clientX' in e ? e.clientX : e.touches[0].clientX) - (ref.current?.getBoundingClientRect().x ?? 0); // delta in pixels\n\n      const realColumnIndex = visibleColumnsCopy.findIndex((visibleColumn) => visibleColumn.id === column.id);\n\n      const widthWithDelta = narrow(\n        nextWidth + delta,\n        visibleColumnsCopy[realColumnIndex].minWidth,\n        visibleColumnsCopy[realColumnIndex].maxWidth,\n      );\n\n      setNextWidth(widthWithDelta);\n\n      // To prevent text selection\n      e.preventDefault();\n      e.stopPropagation();\n    },\n    [column.id, nextWidth, visibleColumnsCopy],\n  );\n\n  const onResizeEnd = useCallback(() => {\n    setGridLayout(columnsToGrid(visibleColumns, ColsLayoutStyle.Fixed));\n    setIsResizing(false);\n    onColumnResize(column.id, nextWidth);\n  }, [onColumnResize, column.id, nextWidth, setGridLayout, visibleColumns]);\n\n  useEffect(() => {\n    const debouncedResizeHandler = onResizeHandler;\n    const debouncedResizeEnd = onResizeEnd;\n    const addEvents = () => {\n      document.addEventListener('mousemove', debouncedResizeHandler);\n      document.addEventListener('touchmove', debouncedResizeHandler);\n      document.addEventListener('mouseup', debouncedResizeEnd);\n      document.addEventListener('touchend', debouncedResizeEnd);\n    };\n    const removeEvents = () => {\n      document.removeEventListener('mousemove', debouncedResizeHandler);\n      document.removeEventListener('touchmove', debouncedResizeHandler);\n      document.removeEventListener('mouseup', debouncedResizeEnd);\n      document.removeEventListener('touchend', debouncedResizeEnd);\n    };\n\n    if (isResizing) addEvents();\n    else removeEvents();\n\n    // just in case the component is unmounted\n    return removeEvents;\n  }, [isResizing, onResizeHandler, onResizeEnd]);\n\n  return (\n    <StyledResizer\n      ref={ref}\n      role=\"separator\"\n      draggable={false}\n      isResizing={isResizing}\n      onMouseDown={onResizeStart}\n      onTouchStart={onResizeStart}\n      onMouseUp={onResizeEnd}\n      onTouchEnd={onResizeEnd}\n      onClick={(e) => e.stopPropagation()}\n    />\n  );\n};\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADCvB,mBAAqF;AACrF,uBAAgC;AAChC,8BAAiC;AACjC,qBAA8B;AAC9B,oBAA8B;AAG9B,MAAM,SAAS,CAAC,OAAe,KAAyB,QACtD,KAAK,IAAI,KAAK,IAAI,OAAO,OAAO,EAAE,GAAG,OAAO,QAAQ;AAE/C,MAAM,gBAER,CAAC,EAAE,aAAa;AACnB,QAAM;AAAA,IACJ,eAAe,EAAE;AAAA,IACjB;AAAA,IACA,YAAY,EAAE;AAAA,MACZ,6BAAW,wCAAgB;AAE/B,QAAM,CAAC,YAAY,iBAAiB,2BAAS,KAAK;AAClD,QAAM,CAAC,WAAW,gBAAgB,2BAAS,OAAO,SAAS,GAAG;AAE9D,QAAM,qBAAqB,0BAAQ,MAAM,eAAe,IAAI,CAAC,QAAS,mBAAK,IAAM,GAAG,CAAC,cAAc,CAAC;AAEpG,8BAAU,MAAM;AACd,UAAM,kBAAkB,mBAAmB,UAAU,CAAC,kBAAkB,cAAc,OAAO,OAAO,EAAE;AAEtG,uBAAmB,iBAAiB,QAAQ;AAC5C,kBAAc,kCAAc,oBAAoB,iCAAgB,KAAK,CAAC;AAAA,EACxE,GAAG,CAAC,OAAO,IAAI,WAAW,eAAe,kBAAkB,CAAC;AAE5D,QAAM,MAAM,yBAAuB,IAAI;AAEvC,QAAM,gBAAgB,8BAAY,MAAM;AACtC,kBAAc,IAAI;AAAA,EACpB,GAAG,CAAC,CAAC;AAEL,QAAM,kBAAkB,8BACtB,CAAC,MAA+B;AAC9B,UAAM,QAAS,cAAa,IAAI,EAAE,UAAU,EAAE,QAAQ,GAAG,WAAY,KAAI,SAAS,sBAAsB,EAAE,KAAK;AAE/G,UAAM,kBAAkB,mBAAmB,UAAU,CAAC,kBAAkB,cAAc,OAAO,OAAO,EAAE;AAEtG,UAAM,iBAAiB,OACrB,YAAY,OACZ,mBAAmB,iBAAiB,UACpC,mBAAmB,iBAAiB,QACtC;AAEA,iBAAa,cAAc;AAG3B,MAAE,eAAe;AACjB,MAAE,gBAAgB;AAAA,EACpB,GACA,CAAC,OAAO,IAAI,WAAW,kBAAkB,CAC3C;AAEA,QAAM,cAAc,8BAAY,MAAM;AACpC,kBAAc,kCAAc,gBAAgB,iCAAgB,KAAK,CAAC;AAClE,kBAAc,KAAK;AACnB,mBAAe,OAAO,IAAI,SAAS;AAAA,EACrC,GAAG,CAAC,gBAAgB,OAAO,IAAI,WAAW,eAAe,cAAc,CAAC;AAExE,8BAAU,MAAM;AACd,UAAM,yBAAyB;AAC/B,UAAM,qBAAqB;AAC3B,UAAM,YAAY,MAAM;AACtB,eAAS,iBAAiB,aAAa,sBAAsB;AAC7D,eAAS,iBAAiB,aAAa,sBAAsB;AAC7D,eAAS,iBAAiB,WAAW,kBAAkB;AACvD,eAAS,iBAAiB,YAAY,kBAAkB;AAAA,IAC1D;AACA,UAAM,eAAe,MAAM;AACzB,eAAS,oBAAoB,aAAa,sBAAsB;AAChE,eAAS,oBAAoB,aAAa,sBAAsB;AAChE,eAAS,oBAAoB,WAAW,kBAAkB;AAC1D,eAAS,oBAAoB,YAAY,kBAAkB;AAAA,IAC7D;AAEA,QAAI;AAAY,gBAAU;AAAA;AACrB,mBAAa;AAGlB,WAAO;AAAA,EACT,GAAG,CAAC,YAAY,iBAAiB,WAAW,CAAC;AAE7C,SACE,mDAAC;AAAA,IACC;AAAA,IACA,MAAK;AAAA,IACL,WAAW;AAAA,IACX;AAAA,IACA,aAAa;AAAA,IACb,cAAc;AAAA,IACd,WAAW;AAAA,IACX,YAAY;AAAA,IACZ,SAAS,CAAC,MAAM,EAAE,gBAAgB;AAAA,GACpC;AAEJ;",
+  "sourcesContent": ["/* eslint-disable react/prop-types */\nimport React, { useState, useCallback, useContext, useRef, useEffect, useMemo } from 'react';\nimport { ColsLayoutStyle } from '../../configs/constants';\nimport { DataTableContext } from '../../DataTableContext';\nimport { columnsToGrid } from '../../helpers';\nimport { StyledResizer } from '../../styled';\nimport { TypescriptColumn } from '../../types/props';\n\nconst narrow = (value: number, min: number | undefined, max: number | undefined): number =>\n  Math.min(Math.max(value, min ?? 30), max ?? Infinity);\n\nexport const HeaderResizer: React.ComponentType<{\n  column: TypescriptColumn;\n}> = ({ column }) => {\n  const {\n    layoutHelpers: { setGridLayout },\n    visibleColumns,\n    tableProps: { onColumnResize },\n  } = useContext(DataTableContext);\n\n  const [isResizing, setIsResizing] = useState(false);\n  const [nextWidth, setNextWidth] = useState(column.width ?? 150);\n  const visibleColumnsCopy = useMemo(\n    () =>\n      visibleColumns.reduce((acc, col) => {\n        if (col.columns) {\n          return [...acc, ...col.columns];\n        }\n        return [...acc, { ...col }];\n      }, [] as TypescriptColumn[]),\n    [visibleColumns],\n  );\n\n  useEffect(() => {\n    const realColumnIndex = visibleColumnsCopy.findIndex((visibleColumn) => visibleColumn.id === column.id);\n    if (realColumnIndex > -1) {\n      visibleColumnsCopy[realColumnIndex].width = nextWidth;\n      setGridLayout(columnsToGrid(visibleColumnsCopy, ColsLayoutStyle.Fixed));\n    }\n  }, [column.id, nextWidth, setGridLayout, visibleColumnsCopy]);\n\n  const ref = useRef<HTMLDivElement>(null);\n\n  const onResizeStart = useCallback(() => {\n    setIsResizing(true);\n  }, []);\n\n  const onResizeHandler = useCallback(\n    (e: MouseEvent | TouchEvent) => {\n      const delta = ('clientX' in e ? e.clientX : e.touches[0].clientX) - (ref.current?.getBoundingClientRect().x ?? 0); // delta in pixels\n\n      const realColumnIndex = visibleColumnsCopy.findIndex((visibleColumn) => visibleColumn.id === column.id);\n      if (realColumnIndex > -1) {\n        const widthWithDelta = narrow(\n          nextWidth + delta,\n          visibleColumnsCopy[realColumnIndex].minWidth,\n          visibleColumnsCopy[realColumnIndex].maxWidth,\n        );\n        setNextWidth(widthWithDelta);\n      }\n      // To prevent text selection\n      e.preventDefault();\n      e.stopPropagation();\n    },\n    [column.id, nextWidth, visibleColumnsCopy],\n  );\n\n  const onResizeEnd = useCallback(() => {\n    setGridLayout(columnsToGrid(visibleColumnsCopy, ColsLayoutStyle.Fixed));\n    setIsResizing(false);\n    onColumnResize(column.id, nextWidth);\n  }, [onColumnResize, column.id, nextWidth, setGridLayout, visibleColumnsCopy]);\n\n  useEffect(() => {\n    const debouncedResizeHandler = onResizeHandler;\n    const debouncedResizeEnd = onResizeEnd;\n    const addEvents = () => {\n      document.addEventListener('mousemove', debouncedResizeHandler);\n      document.addEventListener('touchmove', debouncedResizeHandler);\n      document.addEventListener('mouseup', debouncedResizeEnd);\n      document.addEventListener('touchend', debouncedResizeEnd);\n    };\n    const removeEvents = () => {\n      document.removeEventListener('mousemove', debouncedResizeHandler);\n      document.removeEventListener('touchmove', debouncedResizeHandler);\n      document.removeEventListener('mouseup', debouncedResizeEnd);\n      document.removeEventListener('touchend', debouncedResizeEnd);\n    };\n\n    if (isResizing) addEvents();\n    else removeEvents();\n\n    // just in case the component is unmounted\n    return removeEvents;\n  }, [isResizing, onResizeHandler, onResizeEnd]);\n\n  return (\n    <StyledResizer\n      ref={ref}\n      role=\"separator\"\n      draggable={false}\n      isResizing={isResizing}\n      onMouseDown={onResizeStart}\n      onTouchStart={onResizeStart}\n      onMouseUp={onResizeEnd}\n      onTouchEnd={onResizeEnd}\n      onClick={(e) => e.stopPropagation()}\n    />\n  );\n};\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": "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",
   "names": []
 }

package/dist/cjs/parts/SortableHeaderCell.js

@@ -55,6 +55,7 @@ module.exports = __toCommonJS(SortableHeaderCell_exports);
 var React = __toESM(require("react"));
 var import_ds_grid = require("@elliemae/ds-grid");
 var import_withConditionalDnDSortableContext = require("./HoC/withConditionalDnDSortableContext");
+var import_helpers = require("../helpers");
 const SortableHeaderCell = (_a) => {
   var _b = _a, {
     items,
@@ -64,7 +65,10 @@ const SortableHeaderCell = (_a) => {
     "isDragOverlay"
   ]);
   return (0, import_withConditionalDnDSortableContext.withConditionalDnDSortableContext)(items, isDragOverlay)(import_ds_grid.Grid)(__spreadProps(__spreadValues({}, rest), {
-    style: { display: "flex" }
+    cols: items.map((col) => (0, import_helpers.sizeToCss)(col.width)),
+    style: {
+      gridAutoFlow: "column"
+    }
   }));
 };
 //# sourceMappingURL=SortableHeaderCell.js.map

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/parts/SortableHeaderCell.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["import { Grid } from '@elliemae/ds-grid';\nimport { TypescriptColumn } from '../types/props';\nimport { withConditionalDnDSortableContext } from './HoC/withConditionalDnDSortableContext';\n\nexport const SortableHeaderCell = ({\n  items,\n  isDragOverlay = false,\n  ...rest\n}: {\n  items: TypescriptColumn[];\n  isDragOverlay?: boolean;\n  children: JSX.Element | JSX.Element[];\n}): JSX.Element =>\n  withConditionalDnDSortableContext(items, isDragOverlay)(Grid)({\n    ...rest,\n    style: { display: 'flex' },\n  });\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,qBAAqB;AAErB,+CAAkD;AAE3C,MAAM,qBAAqB,CAAC,OAQnB;AARmB,eACjC;AAAA;AAAA,IACA,gBAAgB;AAAA,MAFiB,IAG9B,iBAH8B,IAG9B;AAAA,IAFH;AAAA,IACA;AAAA;AAOA,yFAAkC,OAAO,aAAa,EAAE,mBAAI,EAAE,iCACzD,OADyD;AAAA,IAE5D,OAAO,EAAE,SAAS,OAAO;AAAA,EAC3B,EAAC;AAAA;",
+  "sourcesContent": ["import { Grid } from '@elliemae/ds-grid';\nimport { TypescriptColumn } from '../types/props';\nimport { withConditionalDnDSortableContext } from './HoC/withConditionalDnDSortableContext';\nimport { sizeToCss } from '../helpers';\n\nexport const SortableHeaderCell = ({\n  items,\n  isDragOverlay = false,\n  ...rest\n}: {\n  items: TypescriptColumn[];\n  isDragOverlay?: boolean;\n  children: JSX.Element | JSX.Element[];\n}): JSX.Element =>\n  withConditionalDnDSortableContext(items, isDragOverlay)(Grid)({\n    ...rest,\n    cols: items.map((col) => sizeToCss(col.width)),\n    style: {\n      gridAutoFlow: 'column',\n    },\n  });\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,qBAAqB;AAErB,+CAAkD;AAClD,qBAA0B;AAEnB,MAAM,qBAAqB,CAAC,OAQnB;AARmB,eACjC;AAAA;AAAA,IACA,gBAAgB;AAAA,MAFiB,IAG9B,iBAH8B,IAG9B;AAAA,IAFH;AAAA,IACA;AAAA;AAOA,yFAAkC,OAAO,aAAa,EAAE,mBAAI,EAAE,iCACzD,OADyD;AAAA,IAE5D,MAAM,MAAM,IAAI,CAAC,QAAQ,8BAAU,IAAI,KAAK,CAAC;AAAA,IAC7C,OAAO;AAAA,MACL,cAAc;AAAA,IAChB;AAAA,EACF,EAAC;AAAA;",
   "names": []
 }

package/dist/cjs/parts/TableContent.js

@@ -51,27 +51,25 @@ var import_constants = require("../configs/constants");
 const TableContentComponent = (props) => {
   const { forwardedRef } = props;
   const {
-    tableProps: { height, width, pagination },
+    tableProps: { pagination },
     allDataFlattened,
     visibleColumns
   } = (0, import_react.useContext)(import_DataTableContext.default);
   const [shiftKeyPressed, setShiftKeyPressed] = (0, import_react.useState)(false);
   const PureTableContent = (0, import_react.useMemo)(() => /* @__PURE__ */ import_react.default.createElement(import_styled.StyledDataTableContentWrapper, {
     "data-testid": import_constants.DATA_TESTID.DATA_TABLE_CONTENT_WRAPPER,
-    height,
-    width,
     ref: forwardedRef,
     noSelectionAllowed: shiftKeyPressed,
     onKeyDown: (e) => setShiftKeyPressed((prevShiftKeyPressed) => prevShiftKeyPressed || e.shiftKey),
-    onKeyUp: (e) => setShiftKeyPressed((prevShiftKeyPressed) => prevShiftKeyPressed && e.code !== "Shift")
+    onKeyUp: (e) => setShiftKeyPressed((prevShiftKeyPressed) => prevShiftKeyPressed && e.code !== "Shift"),
+    rows: pagination ? ["1fr", "auto"] : ["auto"],
+    cols: ["100%"]
   }, /* @__PURE__ */ import_react.default.createElement(import_styled.StyledTableWrapper, {
     role: "table",
     "aria-rowcount": allDataFlattened.length,
     "aria-colcount": visibleColumns.length,
-    "data-testid": import_constants.DATA_TESTID.DATA_TABLE_TABLE,
-    height,
-    width
-  }, /* @__PURE__ */ import_react.default.createElement(import_VirtualRowsList.VirtualRowsList, null)), pagination ? /* @__PURE__ */ import_react.default.createElement(import_Pagination.Pagination, null) : null), [height, width, forwardedRef, allDataFlattened.length, visibleColumns.length, pagination, shiftKeyPressed]);
+    "data-testid": import_constants.DATA_TESTID.DATA_TABLE_TABLE
+  }, /* @__PURE__ */ import_react.default.createElement(import_VirtualRowsList.VirtualRowsList, null)), pagination ? /* @__PURE__ */ import_react.default.createElement(import_Pagination.Pagination, null) : null), [forwardedRef, allDataFlattened.length, visibleColumns.length, pagination, shiftKeyPressed]);
   return PureTableContent;
 };
 const TableContent = import_react.default.forwardRef((props, ref) => /* @__PURE__ */ import_react.default.createElement(TableContentComponent, __spreadProps(__spreadValues({}, props), {

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, useState } 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\ntype TableContentProps = {\n  forwardedRef: React.ForwardedRef<HTMLDivElement>;\n};\n\nconst TableContentComponent = (props: TableContentProps) => {\n  const { forwardedRef } = props;\n  const {\n    tableProps: { height, width, pagination },\n    allDataFlattened,\n    visibleColumns,\n  } = useContext(DataTableContext);\n\n  const [shiftKeyPressed, setShiftKeyPressed] = useState(false);\n\n  const PureTableContent = useMemo(\n    () => (\n      <StyledDataTableContentWrapper\n        data-testid={DATA_TESTID.DATA_TABLE_CONTENT_WRAPPER}\n        height={height}\n        width={width}\n        ref={forwardedRef}\n        noSelectionAllowed={shiftKeyPressed}\n        onKeyDown={(e) => setShiftKeyPressed((prevShiftKeyPressed) => prevShiftKeyPressed || e.shiftKey)}\n        onKeyUp={(e) => setShiftKeyPressed((prevShiftKeyPressed) => prevShiftKeyPressed && e.code !== 'Shift')}\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          height={height}\n          width={width}\n        >\n          <VirtualRowsList />\n        </StyledTableWrapper>\n        {pagination ? <Pagination /> : null}\n      </StyledDataTableContentWrapper>\n    ),\n    [height, width, forwardedRef, allDataFlattened.length, visibleColumns.length, pagination, shiftKeyPressed],\n  );\n\n  return PureTableContent;\n};\n\nexport const TableContent = React.forwardRef<HTMLDivElement>((props, ref) => (\n  <TableContentComponent {...props} forwardedRef={ref} />\n));\n\nexport default TableContent;\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,mBAAqD;AAErD,oBAAkE;AAClE,8BAA6B;AAC7B,wBAA2B;AAC3B,6BAAgC;AAChC,uBAA4B;AAM5B,MAAM,wBAAwB,CAAC,UAA6B;AAC1D,QAAM,EAAE,iBAAiB;AACzB,QAAM;AAAA,IACJ,YAAY,EAAE,QAAQ,OAAO;AAAA,IAC7B;AAAA,IACA;AAAA,MACE,6BAAW,+BAAgB;AAE/B,QAAM,CAAC,iBAAiB,sBAAsB,2BAAS,KAAK;AAE5D,QAAM,mBAAmB,0BACvB,MACE,mDAAC;AAAA,IACC,eAAa,6BAAY;AAAA,IACzB;AAAA,IACA;AAAA,IACA,KAAK;AAAA,IACL,oBAAoB;AAAA,IACpB,WAAW,CAAC,MAAM,mBAAmB,CAAC,wBAAwB,uBAAuB,EAAE,QAAQ;AAAA,IAC/F,SAAS,CAAC,MAAM,mBAAmB,CAAC,wBAAwB,uBAAuB,EAAE,SAAS,OAAO;AAAA,KAErG,mDAAC;AAAA,IACC,MAAK;AAAA,IACL,iBAAe,iBAAiB;AAAA,IAChC,iBAAe,eAAe;AAAA,IAC9B,eAAa,6BAAY;AAAA,IACzB;AAAA,IACA;AAAA,KAEA,mDAAC,4CAAgB,CACnB,GACC,aAAa,mDAAC,kCAAW,IAAK,IACjC,GAEF,CAAC,QAAQ,OAAO,cAAc,iBAAiB,QAAQ,eAAe,QAAQ,YAAY,eAAe,CAC3G;AAEA,SAAO;AACT;AAEO,MAAM,eAAe,qBAAM,WAA2B,CAAC,OAAO,QACnE,mDAAC,wDAA0B,QAA1B;AAAA,EAAiC,cAAc;AAAA,EAAK,CACtD;AAED,IAAO,uBAAQ;",
+  "sourcesContent": ["import React, { useContext, useMemo, useState } 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\ntype TableContentProps = {\n  forwardedRef: React.ForwardedRef<HTMLDivElement>;\n};\n\nconst TableContentComponent = (props: TableContentProps) => {\n  const { forwardedRef } = props;\n  const {\n    tableProps: { pagination },\n    allDataFlattened,\n    visibleColumns,\n  } = useContext(DataTableContext);\n\n  const [shiftKeyPressed, setShiftKeyPressed] = useState(false);\n\n  const PureTableContent = useMemo(\n    () => (\n      <StyledDataTableContentWrapper\n        data-testid={DATA_TESTID.DATA_TABLE_CONTENT_WRAPPER}\n        ref={forwardedRef}\n        noSelectionAllowed={shiftKeyPressed}\n        onKeyDown={(e) => setShiftKeyPressed((prevShiftKeyPressed) => prevShiftKeyPressed || e.shiftKey)}\n        onKeyUp={(e) => setShiftKeyPressed((prevShiftKeyPressed) => prevShiftKeyPressed && e.code !== 'Shift')}\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    [forwardedRef, allDataFlattened.length, visibleColumns.length, pagination, shiftKeyPressed],\n  );\n\n  return PureTableContent;\n};\n\nexport const TableContent = React.forwardRef<HTMLDivElement>((props, ref) => (\n  <TableContentComponent {...props} forwardedRef={ref} />\n));\n\nexport default TableContent;\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,mBAAqD;AAErD,oBAAkE;AAClE,8BAA6B;AAC7B,wBAA2B;AAC3B,6BAAgC;AAChC,uBAA4B;AAM5B,MAAM,wBAAwB,CAAC,UAA6B;AAC1D,QAAM,EAAE,iBAAiB;AACzB,QAAM;AAAA,IACJ,YAAY,EAAE;AAAA,IACd;AAAA,IACA;AAAA,MACE,6BAAW,+BAAgB;AAE/B,QAAM,CAAC,iBAAiB,sBAAsB,2BAAS,KAAK;AAE5D,QAAM,mBAAmB,0BACvB,MACE,mDAAC;AAAA,IACC,eAAa,6BAAY;AAAA,IACzB,KAAK;AAAA,IACL,oBAAoB;AAAA,IACpB,WAAW,CAAC,MAAM,mBAAmB,CAAC,wBAAwB,uBAAuB,EAAE,QAAQ;AAAA,IAC/F,SAAS,CAAC,MAAM,mBAAmB,CAAC,wBAAwB,uBAAuB,EAAE,SAAS,OAAO;AAAA,IACrG,MAAM,aAAa,CAAC,OAAO,MAAM,IAAI,CAAC,MAAM;AAAA,IAC5C,MAAM,CAAC,MAAM;AAAA,KAEb,mDAAC;AAAA,IACC,MAAK;AAAA,IACL,iBAAe,iBAAiB;AAAA,IAChC,iBAAe,eAAe;AAAA,IAC9B,eAAa,6BAAY;AAAA,KAEzB,mDAAC,4CAAgB,CACnB,GACC,aAAa,mDAAC,kCAAW,IAAK,IACjC,GAEF,CAAC,cAAc,iBAAiB,QAAQ,eAAe,QAAQ,YAAY,eAAe,CAC5F;AAEA,SAAO;AACT;AAEO,MAAM,eAAe,qBAAM,WAA2B,CAAC,OAAO,QACnE,mDAAC,wDAA0B,QAA1B;AAAA,EAAiC,cAAc;AAAA,EAAK,CACtD;AAED,IAAO,uBAAQ;",
   "names": []
 }

package/dist/cjs/parts/VirtualRowsList.js

@@ -32,14 +32,13 @@ var import_Rows = require("./Rows");
 var import_Headers = require("./Headers");
 var import_Footer = require("./Footer");
 var import_DataTableContext = require("../DataTableContext");
-var import_fixedSizes = require("../configs/fixedSizes");
 var import_styled = require("../styled");
 var import_Loader = require("./Loader");
 var import_constants = require("../configs/constants");
 const VirtualRowsList = () => {
   const {
     virtualListRef,
-    tableProps: { height, width, isLoading, isLoadingAppended },
+    tableProps: { isLoading, isLoadingAppended },
     virtualListHelpers,
     layoutHelpers: { totalColumnsWidth },
     flattenedData,
@@ -47,11 +46,6 @@ const VirtualRowsList = () => {
   } = (0, import_react.useContext)(import_DataTableContext.DataTableContext);
   const { totalSize, scrollToIndex } = virtualListHelpers;
   const isEmptyContent = (0, import_react.useMemo)(() => !isLoading && flattenedData.length === 0, [isLoading, flattenedData.length]);
-  const tableHeight = (0, import_react.useMemo)(() => {
-    if (typeof height === "string")
-      return height.includes("%") ? height : Number.parseInt(height, 10) - import_fixedSizes.FIXED_SIZES.PAGINATION_HEIGHT;
-    return height;
-  }, [height]);
   const onKeyDown = (0, import_react.useCallback)((e) => {
     if (e.ctrlKey && e.code === "End") {
       scrollToIndex(flattenedData.length - 1);
@@ -63,8 +57,6 @@ const VirtualRowsList = () => {
   }, [scrollToIndex, setFocusedRowId, flattenedData]);
   return /* @__PURE__ */ import_react.default.createElement(import_styled.StyledVirtualListWrapper, {
     ref: virtualListRef,
-    height: tableHeight,
-    width,
     "data-testid": import_constants.DATA_TESTID.DATA_TABLE_SCROLLABLE_CONTAINER,
     onKeyDown,
     tabIndex: -1

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/parts/VirtualRowsList.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["import React, { useContext, useMemo, useCallback } from 'react';\nimport { RowLoading } from './RowLoading'; // imported this way to avoid circular dependencies\nimport { EmptyContent } from './EmptyContent'; // imported this way to avoid circular dependencies\nimport { RowsWithContext as Rows } from './Rows'; // imported this way to avoid circular dependencies\nimport { Headers } from './Headers'; // imported this way to avoid circular dependencies\nimport { Footer } from './Footer'; // imported this way to avoid circular dependencies\nimport { DataTableContext } from '../DataTableContext';\nimport { FIXED_SIZES } from '../configs/fixedSizes';\nimport { StyledVirtualListWrapper, StyledTableContentWrapper } from '../styled';\nimport { MemoizedLoader as Loader } from './Loader';\nimport { DATA_TESTID } from '../configs/constants';\n\nexport const VirtualRowsList = () => {\n  const {\n    virtualListRef,\n    tableProps: { height, width, isLoading, isLoadingAppended },\n    virtualListHelpers,\n    layoutHelpers: { totalColumnsWidth },\n    flattenedData,\n    setFocusedRowId,\n  } = useContext(DataTableContext);\n  const { totalSize, scrollToIndex } = virtualListHelpers;\n\n  const isEmptyContent = useMemo(() => !isLoading && flattenedData.length === 0, [isLoading, flattenedData.length]);\n\n  const tableHeight = useMemo(() => {\n    if (typeof height === 'string')\n      return height.includes('%') ? height : Number.parseInt(height, 10) - FIXED_SIZES.PAGINATION_HEIGHT;\n    return height;\n  }, [height]);\n\n  const onKeyDown = useCallback(\n    (e: React.KeyboardEvent) => {\n      if (e.ctrlKey && e.code === 'End') {\n        scrollToIndex(flattenedData.length - 1);\n        setFocusedRowId(flattenedData[flattenedData.length - 1].uid);\n      } else if (e.ctrlKey && e.code === 'Home') {\n        scrollToIndex(0, { align: 'center' });\n        setFocusedRowId(flattenedData[0].uid);\n      }\n    },\n    [scrollToIndex, setFocusedRowId, flattenedData],\n  );\n\n  return (\n    <StyledVirtualListWrapper\n      ref={virtualListRef}\n      height={tableHeight}\n      width={width}\n      data-testid={DATA_TESTID.DATA_TABLE_SCROLLABLE_CONTAINER}\n      onKeyDown={onKeyDown}\n      tabIndex={-1}\n    >\n      <StyledTableContentWrapper role=\"rowgroup\" height={totalSize || '100%'}>\n        <Headers />\n        {isEmptyContent && <EmptyContent width={totalColumnsWidth} />}\n        {isLoading ? <Loader /> : null}\n        {!isLoading && !isEmptyContent && (\n          <>\n            <Rows />\n            <Footer />\n            {isLoadingAppended && <RowLoading />}\n          </>\n        )}\n      </StyledTableContentWrapper>\n    </StyledVirtualListWrapper>\n  );\n};\n\nexport default VirtualRowsList;\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,mBAAwD;AACxD,wBAA2B;AAC3B,0BAA6B;AAC7B,kBAAwC;AACxC,qBAAwB;AACxB,oBAAuB;AACvB,8BAAiC;AACjC,wBAA4B;AAC5B,oBAAoE;AACpE,oBAAyC;AACzC,uBAA4B;AAErB,MAAM,kBAAkB,MAAM;AACnC,QAAM;AAAA,IACJ;AAAA,IACA,YAAY,EAAE,QAAQ,OAAO,WAAW;AAAA,IACxC;AAAA,IACA,eAAe,EAAE;AAAA,IACjB;AAAA,IACA;AAAA,MACE,6BAAW,wCAAgB;AAC/B,QAAM,EAAE,WAAW,kBAAkB;AAErC,QAAM,iBAAiB,0BAAQ,MAAM,CAAC,aAAa,cAAc,WAAW,GAAG,CAAC,WAAW,cAAc,MAAM,CAAC;AAEhH,QAAM,cAAc,0BAAQ,MAAM;AAChC,QAAI,OAAO,WAAW;AACpB,aAAO,OAAO,SAAS,GAAG,IAAI,SAAS,OAAO,SAAS,QAAQ,EAAE,IAAI,8BAAY;AACnF,WAAO;AAAA,EACT,GAAG,CAAC,MAAM,CAAC;AAEX,QAAM,YAAY,8BAChB,CAAC,MAA2B;AAC1B,QAAI,EAAE,WAAW,EAAE,SAAS,OAAO;AACjC,oBAAc,cAAc,SAAS,CAAC;AACtC,sBAAgB,cAAc,cAAc,SAAS,GAAG,GAAG;AAAA,IAC7D,WAAW,EAAE,WAAW,EAAE,SAAS,QAAQ;AACzC,oBAAc,GAAG,EAAE,OAAO,SAAS,CAAC;AACpC,sBAAgB,cAAc,GAAG,GAAG;AAAA,IACtC;AAAA,EACF,GACA,CAAC,eAAe,iBAAiB,aAAa,CAChD;AAEA,SACE,mDAAC;AAAA,IACC,KAAK;AAAA,IACL,QAAQ;AAAA,IACR;AAAA,IACA,eAAa,6BAAY;AAAA,IACzB;AAAA,IACA,UAAU;AAAA,KAEV,mDAAC;AAAA,IAA0B,MAAK;AAAA,IAAW,QAAQ,aAAa;AAAA,KAC9D,mDAAC,4BAAQ,GACR,kBAAkB,mDAAC;AAAA,IAAa,OAAO;AAAA,GAAmB,GAC1D,YAAY,mDAAC,kCAAO,IAAK,MACzB,CAAC,aAAa,CAAC,kBACd,wFACE,mDAAC,iCAAK,GACN,mDAAC,0BAAO,GACP,qBAAqB,mDAAC,kCAAW,CACpC,CAEJ,CACF;AAEJ;AAEA,IAAO,0BAAQ;",
+  "sourcesContent": ["import React, { useContext, useMemo, useCallback } from 'react';\nimport { RowLoading } from './RowLoading'; // imported this way to avoid circular dependencies\nimport { EmptyContent } from './EmptyContent'; // imported this way to avoid circular dependencies\nimport { RowsWithContext as Rows } from './Rows'; // imported this way to avoid circular dependencies\nimport { Headers } from './Headers'; // imported this way to avoid circular dependencies\nimport { Footer } from './Footer'; // imported this way to avoid circular dependencies\nimport { DataTableContext } from '../DataTableContext';\nimport { FIXED_SIZES } from '../configs/fixedSizes';\nimport { StyledVirtualListWrapper, StyledTableContentWrapper } from '../styled';\nimport { MemoizedLoader as Loader } from './Loader';\nimport { DATA_TESTID } from '../configs/constants';\n\nexport const VirtualRowsList = () => {\n  const {\n    virtualListRef,\n    tableProps: { isLoading, isLoadingAppended },\n    virtualListHelpers,\n    layoutHelpers: { totalColumnsWidth },\n    flattenedData,\n    setFocusedRowId,\n  } = useContext(DataTableContext);\n  const { totalSize, scrollToIndex } = virtualListHelpers;\n\n  const isEmptyContent = useMemo(() => !isLoading && flattenedData.length === 0, [isLoading, flattenedData.length]);\n\n  const onKeyDown = useCallback(\n    (e: React.KeyboardEvent) => {\n      if (e.ctrlKey && e.code === 'End') {\n        scrollToIndex(flattenedData.length - 1);\n        setFocusedRowId(flattenedData[flattenedData.length - 1].uid);\n      } else if (e.ctrlKey && e.code === 'Home') {\n        scrollToIndex(0, { align: 'center' });\n        setFocusedRowId(flattenedData[0].uid);\n      }\n    },\n    [scrollToIndex, setFocusedRowId, flattenedData],\n  );\n\n  return (\n    <StyledVirtualListWrapper\n      ref={virtualListRef}\n      data-testid={DATA_TESTID.DATA_TABLE_SCROLLABLE_CONTAINER}\n      onKeyDown={onKeyDown}\n      tabIndex={-1}\n    >\n      <StyledTableContentWrapper role=\"rowgroup\" height={totalSize || '100%'}>\n        <Headers />\n        {isEmptyContent && <EmptyContent width={totalColumnsWidth} />}\n        {isLoading ? <Loader /> : null}\n        {!isLoading && !isEmptyContent && (\n          <>\n            <Rows />\n            <Footer />\n            {isLoadingAppended && <RowLoading />}\n          </>\n        )}\n      </StyledTableContentWrapper>\n    </StyledVirtualListWrapper>\n  );\n};\n\nexport default VirtualRowsList;\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,mBAAwD;AACxD,wBAA2B;AAC3B,0BAA6B;AAC7B,kBAAwC;AACxC,qBAAwB;AACxB,oBAAuB;AACvB,8BAAiC;AAEjC,oBAAoE;AACpE,oBAAyC;AACzC,uBAA4B;AAErB,MAAM,kBAAkB,MAAM;AACnC,QAAM;AAAA,IACJ;AAAA,IACA,YAAY,EAAE,WAAW;AAAA,IACzB;AAAA,IACA,eAAe,EAAE;AAAA,IACjB;AAAA,IACA;AAAA,MACE,6BAAW,wCAAgB;AAC/B,QAAM,EAAE,WAAW,kBAAkB;AAErC,QAAM,iBAAiB,0BAAQ,MAAM,CAAC,aAAa,cAAc,WAAW,GAAG,CAAC,WAAW,cAAc,MAAM,CAAC;AAEhH,QAAM,YAAY,8BAChB,CAAC,MAA2B;AAC1B,QAAI,EAAE,WAAW,EAAE,SAAS,OAAO;AACjC,oBAAc,cAAc,SAAS,CAAC;AACtC,sBAAgB,cAAc,cAAc,SAAS,GAAG,GAAG;AAAA,IAC7D,WAAW,EAAE,WAAW,EAAE,SAAS,QAAQ;AACzC,oBAAc,GAAG,EAAE,OAAO,SAAS,CAAC;AACpC,sBAAgB,cAAc,GAAG,GAAG;AAAA,IACtC;AAAA,EACF,GACA,CAAC,eAAe,iBAAiB,aAAa,CAChD;AAEA,SACE,mDAAC;AAAA,IACC,KAAK;AAAA,IACL,eAAa,6BAAY;AAAA,IACzB;AAAA,IACA,UAAU;AAAA,KAEV,mDAAC;AAAA,IAA0B,MAAK;AAAA,IAAW,QAAQ,aAAa;AAAA,KAC9D,mDAAC,4BAAQ,GACR,kBAAkB,mDAAC;AAAA,IAAa,OAAO;AAAA,GAAmB,GAC1D,YAAY,mDAAC,kCAAO,IAAK,MACzB,CAAC,aAAa,CAAC,kBACd,wFACE,mDAAC,iCAAK,GACN,mDAAC,0BAAO,GACP,qBAAqB,mDAAC,kCAAW,CACpC,CAEJ,CACF;AAEJ;AAEA,IAAO,0BAAQ;",
   "names": []
 }