@elliemae/ds-data-table 3.1.4 → 3.1.5-rc.10

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  isGroup = false,\n  ...rest\n}: {\n  items: TypescriptColumn[];\n  isDragOverlay?: boolean;\n  isGroup: boolean;\n  children: JSX.Element | JSX.Element[];\n}): JSX.Element =>\n  withConditionalDnDSortableContext(items, isDragOverlay)(Grid)({\n    ...rest,\n    cols: isGroup && items.map((col) => sizeToCss(col.width ?? 150)),\n    style: isGroup\n      ? {\n          gridAutoFlow: 'column',\n        }\n      : { display: 'flex' },\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,OAUnB;AAVmB,eACjC;AAAA;AAAA,IACA,gBAAgB;AAAA,IAChB,UAAU;AAAA,MAHuB,IAI9B,iBAJ8B,IAI9B;AAAA,IAHH;AAAA,IACA;AAAA,IACA;AAAA;AAQA,yFAAkC,OAAO,aAAa,EAAE,mBAAI,EAAE,iCACzD,OADyD;AAAA,IAE5D,MAAM,WAAW,MAAM,IAAI,CAAC,QAAQ,8BAAU,IAAI,SAAS,GAAG,CAAC;AAAA,IAC/D,OAAO,UACH;AAAA,MACE,cAAc;AAAA,IAChB,IACA,EAAE,SAAS,OAAO;AAAA,EACxB,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": []
 }

package/dist/cjs/styled.js

@@ -67,24 +67,21 @@ const StyledFocusWithin = (0, import_ds_system.styled)(import_ds_grid.Grid)`
     ${(props) => props.hideFocus ? "" : styledFocusCss(props)}
   }
 `;
-const StyledDataTableWrapper = import_ds_system.styled.div`
+const StyledDataTableWrapper = (0, import_ds_system.styled)(import_ds_grid.Grid)`
   width: ${(props) => (0, import_helpers.sizeToCss)(props.width ?? " 100%")};
   height: ${(props) => (0, import_helpers.sizeToCss)(props.height ?? " 100%")};
 `;
-const StyledDataTableContentWrapper = import_ds_system.styled.div`
+const StyledDataTableContentWrapper = (0, import_ds_system.styled)(import_ds_grid.Grid)`
   user-select: ${({ noSelectionAllowed }) => noSelectionAllowed ? "none" : "auto"};
   width: 100%;
-  height: 100%;
 `;
 const StyledTableWrapper = import_ds_system.styled.div`
   display: inline-block;
   border-spacing: 0;
   z-index: 0;
   position: relative;
-  ${({ width = "100%", height = "100%" }) => `
-  width: ${(0, import_helpers.sizeToCss)(width)};
-  height: ${(0, import_helpers.sizeToCss)(height)};
-  `}
+  width: 100%;
+  height: 100%;
 `;
 const StyledTableContentWrapper = import_ds_system.styled.div`
   position: relative;
@@ -94,10 +91,8 @@ const StyledTableContentWrapper = import_ds_system.styled.div`
 `;
 const StyledVirtualListWrapper = import_ds_system.styled.div`
   overflow: auto;
-  ${({ height = "auto", width = "100%" }) => `
-  height: ${(0, import_helpers.sizeToCss)(height)};
-  width: ${(0, import_helpers.sizeToCss)(width)};
-  `}
+  height: 100%;
+  width: 100%;
 `;
 const getGridTemplateColumnsStyle = ({
   cols,

package/dist/cjs/styled.js.map

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

package/dist/esm/DataTable.js

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

package/dist/esm/DataTable.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../scripts/build/transpile/react-shim.js", "../../src/DataTable.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "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"],
-  "mappings": ";;;;;;;;;;;;;;;;AAAA;ACAA;AACA;AACA;AAEA;AACA;AACA;AACA;AACA;AACA;AAEO,MAAM,YAAY,CAAC,UAAwC;AAChE,QAAM,EAAE,kBAAkB;AAE1B,QAAM,kBAAkB,OAAO;AAC/B,QAAM,yBAAyB,OAAO;AAEtC,QAAM,MAAM,mBAAmB,KAAK;AAEpC,QAAM;AAAA,IACJ,YAAY,EAAE,QAAQ;AAAA,MACpB;AAEJ,SACE,qCAAC,iBAAiB,UAAjB;AAAA,IAA0B,OAAO;AAAA,KAChC,qCAAC;AAAA,IACC,KAAK;AAAA,IACL,eAAa,YAAY;AAAA,IACzB;AAAA,IACA;AAAA,KAEC,gBAAgB,qCAAC,gBAAW,IAAK,MAClC,qCAAC;AAAA,IAAa,KAAK;AAAA,GAAwB,CAC7C,CACF;AAEJ;AAEA,UAAU,YAAY;AACtB,UAAU,eAAe,mBAAK;AAC9B,UAAU,cAAc;AACjB,MAAM,sBAAsB,SAAS,SAAS,EAAE,YAAY,YAAY;AAC/E,oBAAoB,YAAY;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "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"],
+  "mappings": ";;;;;;;;;;;;;;;;AAAA;ACAA;AACA;AACA;AAEA;AACA;AACA;AACA;AACA;AACA;AAEO,MAAM,YAAY,CAAC,UAAwC;AAChE,QAAM,EAAE,kBAAkB;AAE1B,QAAM,kBAAkB,OAAO;AAC/B,QAAM,yBAAyB,OAAO;AAEtC,QAAM,MAAM,mBAAmB,KAAK;AAEpC,QAAM;AAAA,IACJ,YAAY,EAAE,QAAQ;AAAA,MACpB;AAEJ,SACE,qCAAC,iBAAiB,UAAjB;AAAA,IAA0B,OAAO;AAAA,KAChC,qCAAC;AAAA,IACC,KAAK;AAAA,IACL,eAAa,YAAY;AAAA,IACzB;AAAA,IACA;AAAA,IACA,MAAM,CAAC,MAAM;AAAA,IACb,MAAM,gBAAgB,CAAC,QAAQ,KAAK,IAAI,CAAC,KAAK;AAAA,KAE7C,gBAAgB,qCAAC,gBAAW,IAAK,MAClC,qCAAC;AAAA,IAAa,KAAK;AAAA,GAAwB,CAC7C,CACF;AAEJ;AAEA,UAAU,YAAY;AACtB,UAAU,eAAe,mBAAK;AAC9B,UAAU,cAAc;AACjB,MAAM,sBAAsB,SAAS,SAAS,EAAE,YAAY,YAAY;AAC/E,oBAAoB,YAAY;",
   "names": []
 }

package/dist/esm/addons/Filters/Components/DateSwitcherFilter/index.js

@@ -44,6 +44,8 @@ const DateSwitcherFilter = (props) => {
       p: "xxs",
       gutter: "xxs",
       style: { background: "white" }
+    }, /* @__PURE__ */ React2.createElement("div", {
+      "data-testid": DATA_TESTID.DATA_TABLE_DATE_RANGE_CONTROLLER_CHECKBOX_SWITCHER
     }, /* @__PURE__ */ React2.createElement(DSControlledCheckbox, {
       checked: isDateRange,
       name: "Date range",
@@ -55,7 +57,7 @@ const DateSwitcherFilter = (props) => {
         setEndDate("");
       },
       autoFocus: true
-    }), isDateRange ? /* @__PURE__ */ React2.createElement(DSControlledDateRangePicker, {
+    })), isDateRange ? /* @__PURE__ */ React2.createElement(DSControlledDateRangePicker, {
       fromDate: startDate,
       onFromDateChange: setStartDate,
       toDate: endDate,

package/dist/esm/addons/Filters/Components/DateSwitcherFilter/index.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../../scripts/build/transpile/react-shim.js", "../../../../../../src/addons/Filters/Components/DateSwitcherFilter/index.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable max-lines */\n/* eslint-disable react/prop-types */\nimport React, { useEffect, useState } from 'react';\nimport { DatePicker2 } from '@elliemae/ds-icons';\nimport { Grid } from '@elliemae/ds-grid';\nimport {\n  DSControlledDateRangePicker,\n  DSControlledDateTimePicker,\n  DSControlledCheckbox,\n} from '@elliemae/ds-controlled-form';\nimport { FilterPopover, FILTER_TYPES } from '../../../../exported-related';\nimport { FilterProps } from '../../../../types/props';\nimport { DATA_TESTID } from '../../../../configs/constants';\n\nconst emptyFilterValue = { startDate: null, endDate: null };\n\nexport const DateSwitcherFilter: React.ComponentType<FilterProps> = (props) => {\n  const {\n    column,\n    column: { id },\n    filterValue = emptyFilterValue,\n    onValueChange,\n    patchHeaderFilterButtonAndMenu,\n    reduxHeader,\n    innerRef,\n  } = props;\n\n  const dateRange = filterValue;\n\n  const [startDate, setStartDate] = useState(dateRange.startDate || '');\n  const [endDate, setEndDate] = useState(dateRange.endDate || '');\n  const [isDateRange, setIsDateRange] = useState(false);\n\n  useEffect(() => {\n    setStartDate(dateRange.startDate || '');\n    setEndDate(dateRange.endDate || '');\n  }, [dateRange]);\n\n  useEffect(() => {\n    if (startDate && endDate && !startDate.includes('_') && !endDate.includes('_')) {\n      onValueChange(FILTER_TYPES.DATE_SWITCHER, { startDate, endDate, isDateRange });\n    }\n    // We are missing onValueChange on purpose, this is an internal function and won't cause any problems\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [startDate, endDate, isDateRange]);\n\n  return (\n    <FilterPopover\n      reduxHeader={reduxHeader}\n      column={column}\n      columnId={id}\n      menuContent={\n        <Grid width=\"260px\" data-testid={DATA_TESTID.DATA_TABLE_DATE_RANGE_CONTROLLER}>\n          <Grid p=\"xxs\" gutter=\"xxs\" style={{ background: 'white' }}>\n            <DSControlledCheckbox\n              checked={isDateRange}\n              name=\"Date range\"\n              label=\"Date Range\"\n              id=\"date-range-switcher-id-internal\"\n              onChange={() => {\n                setIsDateRange(!isDateRange);\n                setStartDate('');\n                setEndDate('');\n              }}\n              autoFocus\n            />\n            {isDateRange ? (\n              <DSControlledDateRangePicker\n                fromDate={startDate}\n                onFromDateChange={setStartDate}\n                toDate={endDate}\n                onToDateChange={setEndDate}\n                type=\"date-range-inputs\"\n              />\n            ) : (\n              <DSControlledDateTimePicker\n                date={startDate}\n                onDateChange={(_date) => {\n                  setStartDate(_date);\n                  setEndDate(_date);\n                }}\n                type=\"date-inputs\"\n              />\n            )}\n          </Grid>\n          <Grid\n            onKeyDown={(e) =>\n              e.code === 'Enter' &&\n              setTimeout(() => patchHeaderFilterButtonAndMenu(id, !!(dateRange.startDate || dateRange.endDate)), 0)\n            }\n          >\n            {isDateRange ? (\n              <DSControlledDateRangePicker\n                fromDate={startDate}\n                onFromDateChange={setStartDate}\n                toDate={endDate}\n                onToDateChange={setEndDate}\n                type=\"date-range-picker-controller-only\"\n              />\n            ) : (\n              <DSControlledDateTimePicker\n                date={startDate}\n                onDateChange={(_date) => {\n                  setStartDate(_date);\n                  setEndDate(_date);\n                }}\n                type=\"date-picker-controller-only\"\n              />\n            )}\n          </Grid>\n        </Grid>\n      }\n      triggerIcon={<DatePicker2 />}\n      innerRef={innerRef}\n      ariaLabel=\"Open Date Range Filter\"\n    />\n  );\n};\n"],
-  "mappings": "AAAA;ACEA;AACA;AACA;AACA;AAAA;AAAA;AAAA;AAAA;AAKA;AAEA;AAEA,MAAM,mBAAmB,EAAE,WAAW,MAAM,SAAS,KAAK;AAEnD,MAAM,qBAAuD,CAAC,UAAU;AAC7E,QAAM;AAAA,IACJ;AAAA,IACA,QAAQ,EAAE;AAAA,IACV,cAAc;AAAA,IACd;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,MACE;AAEJ,QAAM,YAAY;AAElB,QAAM,CAAC,WAAW,gBAAgB,SAAS,UAAU,aAAa,EAAE;AACpE,QAAM,CAAC,SAAS,cAAc,SAAS,UAAU,WAAW,EAAE;AAC9D,QAAM,CAAC,aAAa,kBAAkB,SAAS,KAAK;AAEpD,YAAU,MAAM;AACd,iBAAa,UAAU,aAAa,EAAE;AACtC,eAAW,UAAU,WAAW,EAAE;AAAA,EACpC,GAAG,CAAC,SAAS,CAAC;AAEd,YAAU,MAAM;AACd,QAAI,aAAa,WAAW,CAAC,UAAU,SAAS,GAAG,KAAK,CAAC,QAAQ,SAAS,GAAG,GAAG;AAC9E,oBAAc,aAAa,eAAe,EAAE,WAAW,SAAS,YAAY,CAAC;AAAA,IAC/E;AAAA,EAGF,GAAG,CAAC,WAAW,SAAS,WAAW,CAAC;AAEpC,SACE,qCAAC;AAAA,IACC;AAAA,IACA;AAAA,IACA,UAAU;AAAA,IACV,aACE,qCAAC;AAAA,MAAK,OAAM;AAAA,MAAQ,eAAa,YAAY;AAAA,OAC3C,qCAAC;AAAA,MAAK,GAAE;AAAA,MAAM,QAAO;AAAA,MAAM,OAAO,EAAE,YAAY,QAAQ;AAAA,OACtD,qCAAC;AAAA,MACC,SAAS;AAAA,MACT,MAAK;AAAA,MACL,OAAM;AAAA,MACN,IAAG;AAAA,MACH,UAAU,MAAM;AACd,uBAAe,CAAC,WAAW;AAC3B,qBAAa,EAAE;AACf,mBAAW,EAAE;AAAA,MACf;AAAA,MACA,WAAS;AAAA,KACX,GACC,cACC,qCAAC;AAAA,MACC,UAAU;AAAA,MACV,kBAAkB;AAAA,MAClB,QAAQ;AAAA,MACR,gBAAgB;AAAA,MAChB,MAAK;AAAA,KACP,IAEA,qCAAC;AAAA,MACC,MAAM;AAAA,MACN,cAAc,CAAC,UAAU;AACvB,qBAAa,KAAK;AAClB,mBAAW,KAAK;AAAA,MAClB;AAAA,MACA,MAAK;AAAA,KACP,CAEJ,GACA,qCAAC;AAAA,MACC,WAAW,CAAC,MACV,EAAE,SAAS,WACX,WAAW,MAAM,+BAA+B,IAAI,CAAC,CAAE,WAAU,aAAa,UAAU,QAAQ,GAAG,CAAC;AAAA,OAGrG,cACC,qCAAC;AAAA,MACC,UAAU;AAAA,MACV,kBAAkB;AAAA,MAClB,QAAQ;AAAA,MACR,gBAAgB;AAAA,MAChB,MAAK;AAAA,KACP,IAEA,qCAAC;AAAA,MACC,MAAM;AAAA,MACN,cAAc,CAAC,UAAU;AACvB,qBAAa,KAAK;AAClB,mBAAW,KAAK;AAAA,MAClB;AAAA,MACA,MAAK;AAAA,KACP,CAEJ,CACF;AAAA,IAEF,aAAa,qCAAC,iBAAY;AAAA,IAC1B;AAAA,IACA,WAAU;AAAA,GACZ;AAEJ;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable max-lines */\n/* eslint-disable react/prop-types */\nimport React, { useEffect, useState } from 'react';\nimport { DatePicker2 } from '@elliemae/ds-icons';\nimport { Grid } from '@elliemae/ds-grid';\nimport {\n  DSControlledDateRangePicker,\n  DSControlledDateTimePicker,\n  DSControlledCheckbox,\n} from '@elliemae/ds-controlled-form';\nimport { FilterPopover, FILTER_TYPES } from '../../../../exported-related';\nimport { FilterProps } from '../../../../types/props';\nimport { DATA_TESTID } from '../../../../configs/constants';\n\nconst emptyFilterValue = { startDate: null, endDate: null };\n\nexport const DateSwitcherFilter: React.ComponentType<FilterProps> = (props) => {\n  const {\n    column,\n    column: { id },\n    filterValue = emptyFilterValue,\n    onValueChange,\n    patchHeaderFilterButtonAndMenu,\n    reduxHeader,\n    innerRef,\n  } = props;\n\n  const dateRange = filterValue;\n\n  const [startDate, setStartDate] = useState(dateRange.startDate || '');\n  const [endDate, setEndDate] = useState(dateRange.endDate || '');\n  const [isDateRange, setIsDateRange] = useState(false);\n\n  useEffect(() => {\n    setStartDate(dateRange.startDate || '');\n    setEndDate(dateRange.endDate || '');\n  }, [dateRange]);\n\n  useEffect(() => {\n    if (startDate && endDate && !startDate.includes('_') && !endDate.includes('_')) {\n      onValueChange(FILTER_TYPES.DATE_SWITCHER, { startDate, endDate, isDateRange });\n    }\n    // We are missing onValueChange on purpose, this is an internal function and won't cause any problems\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [startDate, endDate, isDateRange]);\n\n  return (\n    <FilterPopover\n      reduxHeader={reduxHeader}\n      column={column}\n      columnId={id}\n      menuContent={\n        <Grid width=\"260px\" data-testid={DATA_TESTID.DATA_TABLE_DATE_RANGE_CONTROLLER}>\n          <Grid p=\"xxs\" gutter=\"xxs\" style={{ background: 'white' }}>\n            <div data-testid={DATA_TESTID.DATA_TABLE_DATE_RANGE_CONTROLLER_CHECKBOX_SWITCHER}>\n              <DSControlledCheckbox\n                checked={isDateRange}\n                name=\"Date range\"\n                label=\"Date Range\"\n                id=\"date-range-switcher-id-internal\"\n                onChange={() => {\n                  setIsDateRange(!isDateRange);\n                  setStartDate('');\n                  setEndDate('');\n                }}\n                autoFocus\n              />\n            </div>\n            {isDateRange ? (\n              <DSControlledDateRangePicker\n                fromDate={startDate}\n                onFromDateChange={setStartDate}\n                toDate={endDate}\n                onToDateChange={setEndDate}\n                type=\"date-range-inputs\"\n              />\n            ) : (\n              <DSControlledDateTimePicker\n                date={startDate}\n                onDateChange={(_date) => {\n                  setStartDate(_date);\n                  setEndDate(_date);\n                }}\n                type=\"date-inputs\"\n              />\n            )}\n          </Grid>\n          <Grid\n            onKeyDown={(e) =>\n              e.code === 'Enter' &&\n              setTimeout(() => patchHeaderFilterButtonAndMenu(id, !!(dateRange.startDate || dateRange.endDate)), 0)\n            }\n          >\n            {isDateRange ? (\n              <DSControlledDateRangePicker\n                fromDate={startDate}\n                onFromDateChange={setStartDate}\n                toDate={endDate}\n                onToDateChange={setEndDate}\n                type=\"date-range-picker-controller-only\"\n              />\n            ) : (\n              <DSControlledDateTimePicker\n                date={startDate}\n                onDateChange={(_date) => {\n                  setStartDate(_date);\n                  setEndDate(_date);\n                }}\n                type=\"date-picker-controller-only\"\n              />\n            )}\n          </Grid>\n        </Grid>\n      }\n      triggerIcon={<DatePicker2 />}\n      innerRef={innerRef}\n      ariaLabel=\"Open Date Range Filter\"\n    />\n  );\n};\n"],
+  "mappings": "AAAA;ACEA;AACA;AACA;AACA;AAAA;AAAA;AAAA;AAAA;AAKA;AAEA;AAEA,MAAM,mBAAmB,EAAE,WAAW,MAAM,SAAS,KAAK;AAEnD,MAAM,qBAAuD,CAAC,UAAU;AAC7E,QAAM;AAAA,IACJ;AAAA,IACA,QAAQ,EAAE;AAAA,IACV,cAAc;AAAA,IACd;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,MACE;AAEJ,QAAM,YAAY;AAElB,QAAM,CAAC,WAAW,gBAAgB,SAAS,UAAU,aAAa,EAAE;AACpE,QAAM,CAAC,SAAS,cAAc,SAAS,UAAU,WAAW,EAAE;AAC9D,QAAM,CAAC,aAAa,kBAAkB,SAAS,KAAK;AAEpD,YAAU,MAAM;AACd,iBAAa,UAAU,aAAa,EAAE;AACtC,eAAW,UAAU,WAAW,EAAE;AAAA,EACpC,GAAG,CAAC,SAAS,CAAC;AAEd,YAAU,MAAM;AACd,QAAI,aAAa,WAAW,CAAC,UAAU,SAAS,GAAG,KAAK,CAAC,QAAQ,SAAS,GAAG,GAAG;AAC9E,oBAAc,aAAa,eAAe,EAAE,WAAW,SAAS,YAAY,CAAC;AAAA,IAC/E;AAAA,EAGF,GAAG,CAAC,WAAW,SAAS,WAAW,CAAC;AAEpC,SACE,qCAAC;AAAA,IACC;AAAA,IACA;AAAA,IACA,UAAU;AAAA,IACV,aACE,qCAAC;AAAA,MAAK,OAAM;AAAA,MAAQ,eAAa,YAAY;AAAA,OAC3C,qCAAC;AAAA,MAAK,GAAE;AAAA,MAAM,QAAO;AAAA,MAAM,OAAO,EAAE,YAAY,QAAQ;AAAA,OACtD,qCAAC;AAAA,MAAI,eAAa,YAAY;AAAA,OAC5B,qCAAC;AAAA,MACC,SAAS;AAAA,MACT,MAAK;AAAA,MACL,OAAM;AAAA,MACN,IAAG;AAAA,MACH,UAAU,MAAM;AACd,uBAAe,CAAC,WAAW;AAC3B,qBAAa,EAAE;AACf,mBAAW,EAAE;AAAA,MACf;AAAA,MACA,WAAS;AAAA,KACX,CACF,GACC,cACC,qCAAC;AAAA,MACC,UAAU;AAAA,MACV,kBAAkB;AAAA,MAClB,QAAQ;AAAA,MACR,gBAAgB;AAAA,MAChB,MAAK;AAAA,KACP,IAEA,qCAAC;AAAA,MACC,MAAM;AAAA,MACN,cAAc,CAAC,UAAU;AACvB,qBAAa,KAAK;AAClB,mBAAW,KAAK;AAAA,MAClB;AAAA,MACA,MAAK;AAAA,KACP,CAEJ,GACA,qCAAC;AAAA,MACC,WAAW,CAAC,MACV,EAAE,SAAS,WACX,WAAW,MAAM,+BAA+B,IAAI,CAAC,CAAE,WAAU,aAAa,UAAU,QAAQ,GAAG,CAAC;AAAA,OAGrG,cACC,qCAAC;AAAA,MACC,UAAU;AAAA,MACV,kBAAkB;AAAA,MAClB,QAAQ;AAAA,MACR,gBAAgB;AAAA,MAChB,MAAK;AAAA,KACP,IAEA,qCAAC;AAAA,MACC,MAAM;AAAA,MACN,cAAc,CAAC,UAAU;AACvB,qBAAa,KAAK;AAClB,mBAAW,KAAK;AAAA,MAClB;AAAA,MACA,MAAK;AAAA,KACP,CAEJ,CACF;AAAA,IAEF,aAAa,qCAAC,iBAAY;AAAA,IAC1B;AAAA,IACA,WAAU;AAAA,GACZ;AAEJ;",
   "names": []
 }

package/dist/esm/configs/constants.js

@@ -16,6 +16,7 @@ const DATA_TESTID = {
   DATA_TABLE_CHECKBOX: "data-table-checkbox",
   DATA_TABLE_RADIO: "data-table-radio",
   DATA_TABLE_DATE_RANGE_CONTROLLER: "data-table-date-range",
+  DATA_TABLE_DATE_RANGE_CONTROLLER: "data-table-date-range-checkbox-switcher-container",
   DATA_TABLE_SINGLE_DATE_CONTROLLER: "data-table-single-date",
   DATA_TABLE_NUMBER_RANGE_CONTROLLER: "data-table-number-range",
   DATA_TABLE_CURRENCY_RANGE_CONTROLLER: "data-table-currency-range",

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/configs/constants.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "export const momentFormat = 'MM/DD/YYYY';\nexport enum ColsLayoutStyle {\n  Fixed = 'fixed',\n  Auto = 'auto',\n}\n\nexport const DATA_TESTID = {\n  DATA_TABLE_WRAPPER: 'data-table-wrapper',\n  DATA_TABLE_GLOBAL_EXPAND_CELL: 'data-table-global-expand-cell',\n  DATA_TABLE_ICON_ARROW_DOWN: 'ic-arrow-head-down',\n  DATA_TABLE_ICON_ARROW_RIGHT: 'ic-arrow-head-right',\n  DATA_TABLE_ICON_ARROW_MIXED: 'ic-arrow-head-mixed',\n  DATA_TABLE_ICON_CHILD: 'ic-arrow-child',\n  DATA_TABLE_GLOBAL_CHECKBOX: 'data-table-global-checkbox',\n  DATA_TABLE_CHECKBOX: 'data-table-checkbox',\n  DATA_TABLE_RADIO: 'data-table-radio',\n  DATA_TABLE_DATE_RANGE_CONTROLLER: 'data-table-date-range',\n  DATA_TABLE_SINGLE_DATE_CONTROLLER: 'data-table-single-date',\n  DATA_TABLE_NUMBER_RANGE_CONTROLLER: 'data-table-number-range',\n  DATA_TABLE_CURRENCY_RANGE_CONTROLLER: 'data-table-currency-range',\n  DATA_TABLE_SELECT_MENU_ITEM: 'data-table-filter-menu-list-item',\n  DATA_TABLE_MULTISELECT_CONTROLLER: 'data-table-multi-select',\n  DATA_TABLE_SINGLESELECT_CONTROLLER: 'data-table-single-select',\n  DATA_TABLE_FILTER_BUTTON: 'data-table-filter-menu-button',\n  DATA_TABLE_FILTER_MENU_CONTENT: 'data-table-filter-menu-content',\n  DATA_TABLE_ROW_CONTENT: 'data-table-row-content',\n  DATA_TABLE_ROW: 'data-table-row',\n  DATA_TABLE_TOOLBAR_TRIGGER: 'data-table-toolbar-trigger',\n  DATA_TABLE_CELL: 'data-table-cell',\n  DATA_TABLE_DRAG_HANDLE: 'data-table-drag-handle',\n  DATA_TABLE_CONTENT_WRAPPER: 'data-table-content-wrapper',\n  DATA_TABLE_TABLE: 'data-table-table',\n  DATA_TABLE_SCROLLABLE_CONTAINER: 'data-table-scrollable-container',\n  DATA_TABLE_HEADER: 'data-table-header',\n  DATA_TABLE_ROW_HEADER_CONTENT: 'data-table-row-header-content',\n  DATA_TABLE_ROW_GROUP_HEADER: 'data-table-row-group-header',\n  DATA_TABLE_COLUMN_DRAG_OVERLAY: 'data-table-drag-column-drag-overlay',\n  DATA_TABLE_HEADER_CELL_TITLE: 'header-cell-title',\n  DATA_TABLE_FILTER_BAR_DD_MENU_BUTTON: 'filter-bar-ddmenu-button',\n};\n"],
-  "mappings": "AAAA;ACAO,MAAM,eAAe;AACrB,IAAK,kBAAL,kBAAK,qBAAL;AACL,8BAAQ;AACR,6BAAO;AAFG;AAAA;AAKL,MAAM,cAAc;AAAA,EACzB,oBAAoB;AAAA,EACpB,+BAA+B;AAAA,EAC/B,4BAA4B;AAAA,EAC5B,6BAA6B;AAAA,EAC7B,6BAA6B;AAAA,EAC7B,uBAAuB;AAAA,EACvB,4BAA4B;AAAA,EAC5B,qBAAqB;AAAA,EACrB,kBAAkB;AAAA,EAClB,kCAAkC;AAAA,EAClC,mCAAmC;AAAA,EACnC,oCAAoC;AAAA,EACpC,sCAAsC;AAAA,EACtC,6BAA6B;AAAA,EAC7B,mCAAmC;AAAA,EACnC,oCAAoC;AAAA,EACpC,0BAA0B;AAAA,EAC1B,gCAAgC;AAAA,EAChC,wBAAwB;AAAA,EACxB,gBAAgB;AAAA,EAChB,4BAA4B;AAAA,EAC5B,iBAAiB;AAAA,EACjB,wBAAwB;AAAA,EACxB,4BAA4B;AAAA,EAC5B,kBAAkB;AAAA,EAClB,iCAAiC;AAAA,EACjC,mBAAmB;AAAA,EACnB,+BAA+B;AAAA,EAC/B,6BAA6B;AAAA,EAC7B,gCAAgC;AAAA,EAChC,8BAA8B;AAAA,EAC9B,sCAAsC;AACxC;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "export const momentFormat = 'MM/DD/YYYY';\nexport enum ColsLayoutStyle {\n  Fixed = 'fixed',\n  Auto = 'auto',\n}\n\nexport const DATA_TESTID = {\n  DATA_TABLE_WRAPPER: 'data-table-wrapper',\n  DATA_TABLE_GLOBAL_EXPAND_CELL: 'data-table-global-expand-cell',\n  DATA_TABLE_ICON_ARROW_DOWN: 'ic-arrow-head-down',\n  DATA_TABLE_ICON_ARROW_RIGHT: 'ic-arrow-head-right',\n  DATA_TABLE_ICON_ARROW_MIXED: 'ic-arrow-head-mixed',\n  DATA_TABLE_ICON_CHILD: 'ic-arrow-child',\n  DATA_TABLE_GLOBAL_CHECKBOX: 'data-table-global-checkbox',\n  DATA_TABLE_CHECKBOX: 'data-table-checkbox',\n  DATA_TABLE_RADIO: 'data-table-radio',\n  DATA_TABLE_DATE_RANGE_CONTROLLER: 'data-table-date-range',\n  DATA_TABLE_DATE_RANGE_CONTROLLER: 'data-table-date-range-checkbox-switcher-container',\n  DATA_TABLE_SINGLE_DATE_CONTROLLER: 'data-table-single-date',\n  DATA_TABLE_NUMBER_RANGE_CONTROLLER: 'data-table-number-range',\n  DATA_TABLE_CURRENCY_RANGE_CONTROLLER: 'data-table-currency-range',\n  DATA_TABLE_SELECT_MENU_ITEM: 'data-table-filter-menu-list-item',\n  DATA_TABLE_MULTISELECT_CONTROLLER: 'data-table-multi-select',\n  DATA_TABLE_SINGLESELECT_CONTROLLER: 'data-table-single-select',\n  DATA_TABLE_FILTER_BUTTON: 'data-table-filter-menu-button',\n  DATA_TABLE_FILTER_MENU_CONTENT: 'data-table-filter-menu-content',\n  DATA_TABLE_ROW_CONTENT: 'data-table-row-content',\n  DATA_TABLE_ROW: 'data-table-row',\n  DATA_TABLE_TOOLBAR_TRIGGER: 'data-table-toolbar-trigger',\n  DATA_TABLE_CELL: 'data-table-cell',\n  DATA_TABLE_DRAG_HANDLE: 'data-table-drag-handle',\n  DATA_TABLE_CONTENT_WRAPPER: 'data-table-content-wrapper',\n  DATA_TABLE_TABLE: 'data-table-table',\n  DATA_TABLE_SCROLLABLE_CONTAINER: 'data-table-scrollable-container',\n  DATA_TABLE_HEADER: 'data-table-header',\n  DATA_TABLE_ROW_HEADER_CONTENT: 'data-table-row-header-content',\n  DATA_TABLE_ROW_GROUP_HEADER: 'data-table-row-group-header',\n  DATA_TABLE_COLUMN_DRAG_OVERLAY: 'data-table-drag-column-drag-overlay',\n  DATA_TABLE_HEADER_CELL_TITLE: 'header-cell-title',\n  DATA_TABLE_FILTER_BAR_DD_MENU_BUTTON: 'filter-bar-ddmenu-button',\n};\n"],
+  "mappings": "AAAA;ACAO,MAAM,eAAe;AACrB,IAAK,kBAAL,kBAAK,qBAAL;AACL,8BAAQ;AACR,6BAAO;AAFG;AAAA;AAKL,MAAM,cAAc;AAAA,EACzB,oBAAoB;AAAA,EACpB,+BAA+B;AAAA,EAC/B,4BAA4B;AAAA,EAC5B,6BAA6B;AAAA,EAC7B,6BAA6B;AAAA,EAC7B,uBAAuB;AAAA,EACvB,4BAA4B;AAAA,EAC5B,qBAAqB;AAAA,EACrB,kBAAkB;AAAA,EAClB,kCAAkC;AAAA,EAClC,kCAAkC;AAAA,EAClC,mCAAmC;AAAA,EACnC,oCAAoC;AAAA,EACpC,sCAAsC;AAAA,EACtC,6BAA6B;AAAA,EAC7B,mCAAmC;AAAA,EACnC,oCAAoC;AAAA,EACpC,0BAA0B;AAAA,EAC1B,gCAAgC;AAAA,EAChC,wBAAwB;AAAA,EACxB,gBAAgB;AAAA,EAChB,4BAA4B;AAAA,EAC5B,iBAAiB;AAAA,EACjB,wBAAwB;AAAA,EACxB,4BAA4B;AAAA,EAC5B,kBAAkB;AAAA,EAClB,iCAAiC;AAAA,EACjC,mBAAmB;AAAA,EACnB,+BAA+B;AAAA,EAC/B,6BAA6B;AAAA,EAC7B,gCAAgC;AAAA,EAChC,8BAA8B;AAAA,EAC9B,sCAAsC;AACxC;",
   "names": []
 }

package/dist/esm/configs/useDatatableConfig.js

@@ -27,7 +27,12 @@ const useDatatableConfig = (props) => {
   const virtualListRef = useRef(null);
   const columnHeaderRef = useRef(null);
   const tableColsWithAddons = useTableColsWithAddons(props);
-  const visibleColumns = useMemo(() => tableColsWithAddons.filter((col) => !props.hiddenColumns.includes(col.accessor)), [props.hiddenColumns, tableColsWithAddons]);
+  const visibleColumns = 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] = useState(1);
   const virtualListHelpers = useVirtual({
     size: dataLength,

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/configs/useDatatableConfig.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { useEffect, useMemo, useRef, useState } from 'react';\nimport { useVirtual } from 'react-virtual';\nimport { columnsToGrid } from '../helpers/columnsToGrid';\nimport { 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"],
-  "mappings": ";;;;;;;;;;;;;;;;AAAA;ACAA;AACA;AACA;AAEA;AACA;AACA;AACA;AACA;AAEO,MAAM,qBAAqB,CAAC,UAA8C;AAC/E,QAAM,iBAAiB,OAAuB,IAAI;AAClD,QAAM,kBAAkB,OAAuB,IAAI;AAKnD,QAAM,sBAAsB,uBAAuB,KAAK;AAExD,QAAM,iBAAiB,QACrB,MAAM,oBAAoB,OAAO,CAAC,QAA0B,CAAC,MAAM,cAAc,SAAS,IAAI,QAAQ,CAAC,GACvG,CAAC,MAAM,eAAe,mBAAmB,CAC3C;AAMA,QAAM,CAAC,YAAY,iBAAiB,SAAS,CAAC;AAI9C,QAAM,qBAAqB,WAAW;AAAA,IACpC,MAAM;AAAA,IACN,WAAW;AAAA,IACX,UAAU;AAAA,IACV,cAAc,gBAAgB,SAAS,sBAAsB,GAAG,UAAU;AAAA,EAC5E,CAAC;AAKD,YAAU,MAAM;AACd,QAAI,MAAM,WAAW;AACnB,YAAM,UAAU,QAAQ,gBAAgB,mBAAmB;AAC3D,YAAM,UAAU,QAAQ,iBAAiB,mBAAmB;AAAA,IAC9D;AAAA,EACF,GAAG,CAAC,MAAM,WAAW,mBAAmB,eAAe,mBAAmB,cAAc,CAAC;AAMzF,QAAM,CAAC,eAAe,oBAAoB,qBAAqB,KAAK;AAEpE,QAAM,CAAC,eAAe,qBAAqB,oBAAoB,OAAO,aAAa;AAGnF,MAAI,eAAgB,kBAAiB,eAAe;AAAQ,kBAAe,kBAAiB,eAAe,MAAM;AAMjH,QAAM,CAAC,YAAY,iBAAiB,SAAS,cAAc,gBAAgB,MAAM,eAAe,CAAC;AAGjG,YAAU,MAAM;AACd,kBAAc,cAAc,gBAAgB,MAAM,eAAe,CAAC;AAAA,EACpE,GAAG,CAAC,gBAAgB,MAAM,eAAe,CAAC;AAE1C,QAAM,oBAAoB,QACxB,MACE,MAAM,oBAAoB,gBAAgB,QACtC,WAAW,OAAO,CAAC,KAAa,QAAgB,MAAM,OAAO,SAAS,KAAK,EAAE,GAAG,CAAC,IACjF,QACN,CAAC,MAAM,iBAAiB,UAAU,CACpC;AAEA,QAAM,gBAAgB,QACpB,MAAO;AAAA,IACL;AAAA,IACA;AAAA,IACA;AAAA,EACF,IACA,CAAC,YAAY,eAAe,iBAAiB,CAC/C;AAMA,QAAM,gBAAgB,uBAAuB;AAE7C,QAAM,MAAM,QACV,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 * as React from 'react';\nexport { React };\n", "import { useEffect, useMemo, useRef, useState } from 'react';\nimport { useVirtual } from 'react-virtual';\nimport { columnsToGrid } from '../helpers/columnsToGrid';\nimport { 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"],
+  "mappings": ";;;;;;;;;;;;;;;;AAAA;ACAA;AACA;AACA;AAEA;AACA;AACA;AACA;AACA;AAEO,MAAM,qBAAqB,CAAC,UAA8C;AAC/E,QAAM,iBAAiB,OAAuB,IAAI;AAClD,QAAM,kBAAkB,OAAuB,IAAI;AAKnD,QAAM,sBAAsB,uBAAuB,KAAK;AACxD,QAAM,iBAAiB,QACrB,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,SAAS,CAAC;AAI9C,QAAM,qBAAqB,WAAW;AAAA,IACpC,MAAM;AAAA,IACN,WAAW;AAAA,IACX,UAAU;AAAA,IACV,cAAc,gBAAgB,SAAS,sBAAsB,GAAG,UAAU;AAAA,EAC5E,CAAC;AAKD,YAAU,MAAM;AACd,QAAI,MAAM,WAAW;AACnB,YAAM,UAAU,QAAQ,gBAAgB,mBAAmB;AAC3D,YAAM,UAAU,QAAQ,iBAAiB,mBAAmB;AAAA,IAC9D;AAAA,EACF,GAAG,CAAC,MAAM,WAAW,mBAAmB,eAAe,mBAAmB,cAAc,CAAC;AAMzF,QAAM,CAAC,eAAe,oBAAoB,qBAAqB,KAAK;AAEpE,QAAM,CAAC,eAAe,qBAAqB,oBAAoB,OAAO,aAAa;AAGnF,MAAI,eAAgB,kBAAiB,eAAe;AAAQ,kBAAe,kBAAiB,eAAe,MAAM;AAMjH,QAAM,CAAC,YAAY,iBAAiB,SAAS,cAAc,gBAAgB,MAAM,eAAe,CAAC;AAGjG,YAAU,MAAM;AACd,kBAAc,cAAc,gBAAgB,MAAM,eAAe,CAAC;AAAA,EACpE,GAAG,CAAC,gBAAgB,MAAM,eAAe,CAAC;AAE1C,QAAM,oBAAoB,QACxB,MACE,MAAM,oBAAoB,gBAAgB,QACtC,WAAW,OAAO,CAAC,KAAa,QAAgB,MAAM,OAAO,SAAS,KAAK,EAAE,GAAG,CAAC,IACjF,QACN,CAAC,MAAM,iBAAiB,UAAU,CACpC;AAEA,QAAM,gBAAgB,QACpB,MAAO;AAAA,IACL;AAAA,IACA;AAAA,IACA;AAAA,EACF,IACA,CAAC,YAAY,eAAe,iBAAiB,CAC/C;AAMA,QAAM,gBAAgB,uBAAuB;AAE7C,QAAM,MAAM,QACV,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/esm/exported-related/Toolbar/Toolbar.js

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

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/exported-related/Toolbar/Toolbar.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { useCallback, useRef, useState } from 'react';\nimport { styled } 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"],
-  "mappings": "AAAA;ACAA;AACA;AACA;AACA;AACA;AACA;AAEA,MAAM,cAAc,OAAO;AAAA;AAAA;AAAA;AAAA;AAM3B,MAAM,iBAAiB,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAc9B,MAAM,kBAAkB,OAAO;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,SAAS,KAAK;AAEtC,QAAM,aAAa,OAAO,IAAI;AAE9B,QAAM,uBAAuB,YAAY,MAAM,QAAQ,KAAK,GAAG,CAAC,CAAC;AAEjE,QAAM,gBAAgB,YAAY,MAAM,QAAQ,IAAI,GAAG,CAAC,CAAC;AAEzD,oBAAkB,YAAY,oBAAoB;AAElD,SACE,qCAAC;AAAA,IAAgB,KAAK;AAAA,IAAY,SAAS,CAAC,MAAM,EAAE,gBAAgB;AAAA,KAClE,qCAAC;AAAA,IAAe,cAAc,MAAM,QAAQ,IAAI;AAAA,IAAG,cAAc,MAAM,QAAQ,KAAK;AAAA,KACjF,QAAQ,qCAAC,mBAAa,QAAS,GAChC,qCAAC;AAAA,IACC,YAAW;AAAA,IACX,WAAU;AAAA,IACV,eAAa,YAAY;AAAA,IACzB,SAAS;AAAA,IACT,WAAW,CAAC,MAAM,CAAC,SAAS,OAAO,EAAE,SAAS,EAAE,IAAI,KAAK,cAAc;AAAA,IACvE,UAAU;AAAA,KAEV,qCAAC,qBAAgB,CACnB,CACF,CACF;AAEJ;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "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"],
+  "mappings": "AAAA;ACAA;AACA;AACA;AACA;AACA;AACA;AAEA,MAAM,cAAc,OAAO;AAAA;AAAA;AAAA;AAAA;AAM3B,MAAM,iBAAiB,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAc9B,MAAM,kBAAkB,OAAO;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,SAAS,KAAK;AAEtC,QAAM,aAAa,OAAO,IAAI;AAC9B,QAAM,iBAAiB,OAA0B,IAAI;AAErD,QAAM,uBAAuB,YAAY,MAAM,QAAQ,KAAK,GAAG,CAAC,CAAC;AAEjE,QAAM,gBAAgB,YAAY,MAAM,QAAQ,IAAI,GAAG,CAAC,CAAC;AAEzD,oBAAkB,YAAY,oBAAoB;AAElD,QAAM,mBAAmB,YAAY,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,YACvB,CAAC,MAA2B;AAC1B,QAAI,CAAC,SAAS,OAAO,EAAE,SAAS,EAAE,IAAI,GAAG;AACvC,oBAAc;AAAA,IAChB;AAAA,EACF,GACA,CAAC,aAAa,CAChB;AAEA,SACE,qCAAC;AAAA,IAAgB,KAAK;AAAA,IAAY,SAAS,CAAC,MAAwB,EAAE,gBAAgB;AAAA,KACpF,qCAAC;AAAA,IACC,cAAc,MAAM,QAAQ,IAAI;AAAA,IAChC,cAAc,MAAM,QAAQ,KAAK;AAAA,IACjC,WAAW;AAAA,KAEV,QAAQ,qCAAC,mBAAa,QAAS,GAChC,qCAAC;AAAA,IACC,YAAW;AAAA,IACX,WAAU;AAAA,IACV,eAAa,YAAY;AAAA,IACzB,UAAU;AAAA,IACV,SAAS;AAAA,IACT,WAAW;AAAA,IACX,UAAU;AAAA,KAEV,qCAAC,qBAAgB,CACnB,CACF,CACF;AAEJ;",
   "names": []
 }

package/dist/esm/parts/EmptyContent.js

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

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/parts/EmptyContent.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "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"],
-  "mappings": "AAAA;ACAA;AACA;AACA;AACA;AACA;AACA;AACA;AAEA;AAEA,MAAM,oBAAoB,OAAO,IAAI;AAAA;AAAA;AAAA;AAAA;AAAA;AAMrC,MAAM,OAAO,OAAO,eAAe;AAAA,UACzB,CAAC,UAAU,MAAM,MAAM,OAAO,QAAQ;AAAA,WACrC,CAAC,UAAU,MAAM,MAAM,OAAO,QAAQ;AAAA;AAAA;AAGjD,MAAM,iBAAiB,OAAO;AAAA;AAAA;AAAA,eAGf,CAAC,UAAU,SAAS,MAAM,MAAM,UAAU,MAAM,IAAI;AAAA,WACxD,CAAC,UAAU,MAAM,MAAM,OAAO,QAAQ;AAAA,gBACjC,CAAC,UAAU,yBAAyB,MAAM,MAAM,MAAM,CAAC;AAAA,mBACpD,CAAC,UAAU,yBAAyB,MAAM,MAAM,MAAM,EAAE;AAAA;AAE3E,MAAM,mBAAmB,OAAO;AAAA;AAAA,eAEjB,CAAC,UAAU,SAAS,MAAM,MAAM,UAAU,MAAM,IAAI;AAAA,WACxD,CAAC,UAAU,MAAM,MAAM,OAAO,QAAQ;AAAA;AAAA;AAGjD,MAAM,SAAS,OAAO,QAAQ;AAAA,gBACd,CAAC,UAAU,yBAAyB,MAAM,MAAM,MAAM,CAAC;AAAA;AAAA;AAAA;AAIvE,MAAM,2BAA2B,OAAO;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,WAAW,gBAAgB;AAE/B,MAAI,OAAM,eAAe,oBAAoB;AAC3C,WAAO,qCAAC;AAAA,MAAyB;AAAA,OAAe,oBAAqB;AAEvE,SACE,qCAAC;AAAA,IAAyB;AAAA,IAAc,aAAU;AAAA,IAAY,MAAK;AAAA,KACjE,qCAAC;AAAA,IAAkB,OAAO;AAAA,IAAY,gBAAe;AAAA,KACnD,qCAAC;AAAA,IAAK,MAAK;AAAA,GAAM,GACjB,qCAAC,sBAAgB,gBAAiB,GACjC,4BAA4B,qCAAC,wBAAkB,yBAA0B,IAAsB,MAC/F,wBAAwB,yBACvB,qCAAC;AAAA,IAAO,YAAW;AAAA,IAAY,WAAW;AAAA,IAAsB,SAAS;AAAA,GAAwB,IAC/F,IACN,CACF;AAEJ;AAEA,aAAa,YAAY;AAAA,EACvB,OAAO,UAAU;AACnB;AAGA,IAAO,uBAAQ;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "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"],
+  "mappings": "AAAA;ACAA;AACA;AACA;AACA;AACA;AACA;AACA;AAEA;AAEA,MAAM,oBAAoB,OAAO,IAAI;AAAA;AAAA;AAAA;AAAA;AAAA;AAMrC,MAAM,OAAO,OAAO,eAAe;AAAA,UACzB,CAAC,UAAU,MAAM,MAAM,OAAO,QAAQ;AAAA,WACrC,CAAC,UAAU,MAAM,MAAM,OAAO,QAAQ;AAAA;AAAA;AAGjD,MAAM,iBAAiB,OAAO;AAAA;AAAA;AAAA,eAGf,CAAC,UAAU,SAAS,MAAM,MAAM,UAAU,MAAM,IAAI;AAAA,WACxD,CAAC,UAAU,MAAM,MAAM,OAAO,QAAQ;AAAA,gBACjC,CAAC,UAAU,yBAAyB,MAAM,MAAM,MAAM,CAAC;AAAA,mBACpD,CAAC,UAAU,yBAAyB,MAAM,MAAM,MAAM,EAAE;AAAA;AAE3E,MAAM,mBAAmB,OAAO;AAAA;AAAA,eAEjB,CAAC,UAAU,SAAS,MAAM,MAAM,UAAU,MAAM,IAAI;AAAA,WACxD,CAAC,UAAU,MAAM,MAAM,OAAO,QAAQ;AAAA;AAAA;AAGjD,MAAM,SAAS,OAAO,QAAQ;AAAA,gBACd,CAAC,UAAU,yBAAyB,MAAM,MAAM,MAAM,CAAC;AAAA;AAAA;AAAA;AAIvE,MAAM,2BAA2B,OAAO;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,WAAW,gBAAgB;AAE/B,MAAI,OAAM,eAAe,oBAAoB;AAC3C,WAAO,qCAAC;AAAA,MAAyB;AAAA,OAAe,oBAAqB;AAEvE,SACE,qCAAC;AAAA,IAAyB;AAAA,IAAc,aAAU;AAAA,IAAY,MAAK;AAAA,KACjE,qCAAC;AAAA,IAAkB,OAAO,eAAe,SAAS;AAAA,IAAa,gBAAe;AAAA,KAC5E,qCAAC;AAAA,IAAK,MAAK;AAAA,GAAM,GACjB,qCAAC,sBAAgB,gBAAiB,GACjC,4BAA4B,qCAAC,wBAAkB,yBAA0B,IAAsB,MAC/F,wBAAwB,yBACvB,qCAAC;AAAA,IAAO,YAAW;AAAA,IAAY,WAAW;AAAA,IAAsB,SAAS;AAAA,GAAwB,IAC/F,IACN,CACF;AAEJ;AAEA,aAAa,YAAY;AAAA,EACvB,OAAO,UAAU;AACnB;AAGA,IAAO,uBAAQ;",
   "names": []
 }

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

@@ -39,9 +39,11 @@ const FiltersBar = () => {
   const removeAllFilters = useCallback(() => {
     onFiltersChange([]);
     filterBarProps?.onClearAllFiltersClick?.();
+    setIsOpen(false);
   }, [onFiltersChange, filterBarProps?.onClearAllFiltersClick]);
   const onFilterBarClose = useCallback(() => {
     filterBarProps?.onDropdownMenuToggle?.(false, "onClose");
+    dropdownMenuRef.current.focus();
     setIsOpen(false);
   }, [filterBarProps?.onDropdownMenuToggle]);
   const onFilterBarOpen = useCallback(() => {
@@ -96,7 +98,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 || []
     ],