@elliemae/ds-datagrids 3.15.0 → 3.16.0-next.10

package/dist/esm/plugins/expandable-grid/ExpandableColumn.js

@@ -5,8 +5,8 @@ import { ArrowheadDown, ArrowheadRight } from "@elliemae/ds-icons";
 import { aggregatedClasses } from "@elliemae/ds-classnames";
 import { DSButton } from "@elliemae/ds-button";
 import { DSTruncatedTooltipText } from "@elliemae/ds-truncated-tooltip-text";
-import { dataGridBlockName } from "../../blockNames";
-import { RowSizes } from "../../rowSizes";
+import { dataGridBlockName } from "../../blockNames.js";
+import { RowSizes } from "../../rowSizes.js";
 const blockName = `${dataGridBlockName}-expandable-column`;
 const ExpandableColumnWrapper = aggregatedClasses("div")(blockName);
 const LabelDescriptionWrapper = aggregatedClasses("div")(blockName, "label-description-wrapper");
@@ -15,7 +15,7 @@ const Description = aggregatedClasses("span")(blockName, "description");
 const ExtraColumnData = aggregatedClasses("div")(blockName, "extra-column-data");
 const ExpandableMasterWrapper = aggregatedClasses("div")(`${blockName}-master-wrapper`);
 const ExpandableDetailsWrapper = aggregatedClasses("div")(`${blockName}-details-wrapper`);
-function ExpandableColumnCell({ label, description, isExpanded, expandableDetails, extraData, onToggleExpand }) {
+const ExpandableColumnCell = ({ label, description, isExpanded, expandableDetails, extraData, onToggleExpand }) => {
   const ref = useRef();
   return /* @__PURE__ */ jsxs(ExpandableColumnWrapper, { ref, tabindex: 0, children: [
     /* @__PURE__ */ jsxs(ExpandableMasterWrapper, { style: { height: RowSizes.extend }, children: [
@@ -42,7 +42,7 @@ function ExpandableColumnCell({ label, description, isExpanded, expandableDetail
     ] }),
     isExpanded && /* @__PURE__ */ jsx(ExpandableDetailsWrapper, { children: expandableDetails })
   ] });
-}
+};
 const expandableColumnRenderer = ({ renderRowLabel, renderRowDescription, renderExtraData }) => (value, { rowData, isExpanded }, grid) => {
   const {
     props: { renderExpandedDetails },
@@ -74,27 +74,25 @@ const ExpandableColumn = ({
   searchable,
   customRenderer,
   ...rest
-}) => {
-  return {
-    ...rest,
-    label,
-    property,
-    cell: {
-      formatters: [
-        expandableColumnRenderer({
-          renderRowLabel,
-          renderRowDescription,
-          renderExtraData
-        })
-      ]
-    },
-    width: width || "50%",
-    expandableColumn: true,
-    resizable,
-    sortable,
-    searchable
-  };
-};
+}) => ({
+  ...rest,
+  label,
+  property,
+  cell: {
+    formatters: [
+      expandableColumnRenderer({
+        renderRowLabel,
+        renderRowDescription,
+        renderExtraData
+      })
+    ]
+  },
+  width: width || "50%",
+  expandableColumn: true,
+  resizable,
+  sortable,
+  searchable
+});
 var ExpandableColumn_default = ExpandableColumn;
 export {
   ExpandableColumn,

package/dist/esm/plugins/expandable-grid/ExpandableColumn.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/plugins/expandable-grid/ExpandableColumn.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable react/display-name */\nimport React, { useRef } from 'react';\nimport { ArrowheadDown, ArrowheadRight } from '@elliemae/ds-icons';\nimport { aggregatedClasses } from '@elliemae/ds-classnames';\nimport { DSButton } from '@elliemae/ds-button';\nimport { DSTruncatedTooltipText } from '@elliemae/ds-truncated-tooltip-text';\nimport { dataGridBlockName } from '../../blockNames';\nimport { RowSizes } from '../../rowSizes';\n\nconst blockName = `${dataGridBlockName}-expandable-column`;\n\n// todo: clean this when we move to css-js\nconst ExpandableColumnWrapper = aggregatedClasses('div')(blockName);\nconst LabelDescriptionWrapper = aggregatedClasses('div')(blockName, 'label-description-wrapper');\nconst Label = aggregatedClasses('span')(blockName, 'label');\nconst Description = aggregatedClasses('span')(blockName, 'description');\nconst ExtraColumnData = aggregatedClasses('div')(blockName, 'extra-column-data');\nconst ExpandableMasterWrapper = aggregatedClasses('div')(`${blockName}-master-wrapper`);\nconst ExpandableDetailsWrapper = aggregatedClasses('div')(`${blockName}-details-wrapper`);\n\nfunction ExpandableColumnCell({ label, description, isExpanded, expandableDetails, extraData, onToggleExpand }) {\n  const ref = useRef();\n  return (\n    <ExpandableColumnWrapper ref={ref} tabindex={0}>\n      <ExpandableMasterWrapper style={{ height: RowSizes.extend }}>\n        <DSButton\n          buttonType=\"text\"\n          className=\"expandable-arrow\"\n          icon={isExpanded ? <ArrowheadDown /> : <ArrowheadRight />}\n          onClick={(e) => {\n            onToggleExpand(e);\n            if (ref && ref.current) {\n              ref.current.focus();\n            }\n          }}\n          size=\"s\"\n        />\n        <LabelDescriptionWrapper>\n          <Label>\n            <DSTruncatedTooltipText value={label} />\n          </Label>\n          <Description>\n            <DSTruncatedTooltipText value={description} />\n          </Description>\n        </LabelDescriptionWrapper>\n        <ExtraColumnData>{extraData}</ExtraColumnData>\n      </ExpandableMasterWrapper>\n      {isExpanded && <ExpandableDetailsWrapper>{expandableDetails}</ExpandableDetailsWrapper>}\n    </ExpandableColumnWrapper>\n  );\n}\n\nconst expandableColumnRenderer =\n  ({ renderRowLabel, renderRowDescription, renderExtraData }) =>\n  (value, { rowData, isExpanded }, grid) => {\n    const {\n      props: { renderExpandedDetails },\n      actions: { toggleExpand },\n    } = grid.getInstance();\n\n    const expandableDetails = renderExpandedDetails({ rowData });\n    return (\n      <ExpandableColumnCell\n        description={renderRowDescription({ rowData })}\n        expandableDetails={expandableDetails}\n        extraData={renderExtraData({ rowData })}\n        isExpanded={isExpanded}\n        label={renderRowLabel({ rowData })}\n        onToggleExpand={() => toggleExpand(rowData)}\n      />\n    );\n  };\nconst noop = () => null;\nexport const ExpandableColumn = ({\n  property,\n  label,\n  renderRowLabel = () => '----',\n  renderRowDescription = noop,\n  renderExtraData = noop,\n  width,\n  resizable,\n  sortable,\n  searchable,\n  customRenderer,\n  ...rest\n}) => {\n  return {\n    ...rest,\n    label,\n    property,\n    cell: {\n      formatters: [\n        expandableColumnRenderer({\n          renderRowLabel,\n          renderRowDescription,\n          renderExtraData,\n        }),\n      ],\n    },\n    width: width || '50%',\n    expandableColumn: true,\n    resizable,\n    sortable,\n    searchable,\n  };\n};\n\nexport default ExpandableColumn;\n"],
-  "mappings": "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",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable react/display-name */\nimport React, { useRef } from 'react';\nimport { ArrowheadDown, ArrowheadRight } from '@elliemae/ds-icons';\nimport { aggregatedClasses } from '@elliemae/ds-classnames';\nimport { DSButton } from '@elliemae/ds-button';\nimport { DSTruncatedTooltipText } from '@elliemae/ds-truncated-tooltip-text';\nimport { dataGridBlockName } from '../../blockNames.js';\nimport { RowSizes } from '../../rowSizes.js';\n\nconst blockName = `${dataGridBlockName}-expandable-column`;\n\n// todo: clean this when we move to css-js\nconst ExpandableColumnWrapper = aggregatedClasses('div')(blockName);\nconst LabelDescriptionWrapper = aggregatedClasses('div')(blockName, 'label-description-wrapper');\nconst Label = aggregatedClasses('span')(blockName, 'label');\nconst Description = aggregatedClasses('span')(blockName, 'description');\nconst ExtraColumnData = aggregatedClasses('div')(blockName, 'extra-column-data');\nconst ExpandableMasterWrapper = aggregatedClasses('div')(`${blockName}-master-wrapper`);\nconst ExpandableDetailsWrapper = aggregatedClasses('div')(`${blockName}-details-wrapper`);\n\nconst ExpandableColumnCell = ({ label, description, isExpanded, expandableDetails, extraData, onToggleExpand }) => {\n  const ref = useRef();\n  return (\n    <ExpandableColumnWrapper ref={ref} tabindex={0}>\n      <ExpandableMasterWrapper style={{ height: RowSizes.extend }}>\n        <DSButton\n          buttonType=\"text\"\n          className=\"expandable-arrow\"\n          icon={isExpanded ? <ArrowheadDown /> : <ArrowheadRight />}\n          onClick={(e) => {\n            onToggleExpand(e);\n            if (ref && ref.current) {\n              ref.current.focus();\n            }\n          }}\n          size=\"s\"\n        />\n        <LabelDescriptionWrapper>\n          <Label>\n            <DSTruncatedTooltipText value={label} />\n          </Label>\n          <Description>\n            <DSTruncatedTooltipText value={description} />\n          </Description>\n        </LabelDescriptionWrapper>\n        <ExtraColumnData>{extraData}</ExtraColumnData>\n      </ExpandableMasterWrapper>\n      {isExpanded && <ExpandableDetailsWrapper>{expandableDetails}</ExpandableDetailsWrapper>}\n    </ExpandableColumnWrapper>\n  );\n};\n\nconst expandableColumnRenderer =\n  ({ renderRowLabel, renderRowDescription, renderExtraData }) =>\n  (value, { rowData, isExpanded }, grid) => {\n    const {\n      props: { renderExpandedDetails },\n      actions: { toggleExpand },\n    } = grid.getInstance();\n\n    const expandableDetails = renderExpandedDetails({ rowData });\n    return (\n      <ExpandableColumnCell\n        description={renderRowDescription({ rowData })}\n        expandableDetails={expandableDetails}\n        extraData={renderExtraData({ rowData })}\n        isExpanded={isExpanded}\n        label={renderRowLabel({ rowData })}\n        onToggleExpand={() => toggleExpand(rowData)}\n      />\n    );\n  };\nconst noop = () => null;\nexport const ExpandableColumn = ({\n  property,\n  label,\n  renderRowLabel = () => '----',\n  renderRowDescription = noop,\n  renderExtraData = noop,\n  width,\n  resizable,\n  sortable,\n  searchable,\n  customRenderer,\n  ...rest\n}) => ({\n  ...rest,\n  label,\n  property,\n  cell: {\n    formatters: [\n      expandableColumnRenderer({\n        renderRowLabel,\n        renderRowDescription,\n        renderExtraData,\n      }),\n    ],\n  },\n  width: width || '50%',\n  expandableColumn: true,\n  resizable,\n  sortable,\n  searchable,\n});\n\nexport default ExpandableColumn;\n"],
+  "mappings": "AAAA,YAAY,WAAW;AC4BM,cASrB,YATqB;AA3B7B,SAAgB,cAAc;AAC9B,SAAS,eAAe,sBAAsB;AAC9C,SAAS,yBAAyB;AAClC,SAAS,gBAAgB;AACzB,SAAS,8BAA8B;AACvC,SAAS,yBAAyB;AAClC,SAAS,gBAAgB;AAEzB,MAAM,YAAY,GAAG;AAGrB,MAAM,0BAA0B,kBAAkB,KAAK,EAAE,SAAS;AAClE,MAAM,0BAA0B,kBAAkB,KAAK,EAAE,WAAW,2BAA2B;AAC/F,MAAM,QAAQ,kBAAkB,MAAM,EAAE,WAAW,OAAO;AAC1D,MAAM,cAAc,kBAAkB,MAAM,EAAE,WAAW,aAAa;AACtE,MAAM,kBAAkB,kBAAkB,KAAK,EAAE,WAAW,mBAAmB;AAC/E,MAAM,0BAA0B,kBAAkB,KAAK,EAAE,GAAG,0BAA0B;AACtF,MAAM,2BAA2B,kBAAkB,KAAK,EAAE,GAAG,2BAA2B;AAExF,MAAM,uBAAuB,CAAC,EAAE,OAAO,aAAa,YAAY,mBAAmB,WAAW,eAAe,MAAM;AACjH,QAAM,MAAM,OAAO;AACnB,SACE,qBAAC,2BAAwB,KAAU,UAAU,GAC3C;AAAA,yBAAC,2BAAwB,OAAO,EAAE,QAAQ,SAAS,OAAO,GACxD;AAAA;AAAA,QAAC;AAAA;AAAA,UACC,YAAW;AAAA,UACX,WAAU;AAAA,UACV,MAAM,aAAa,oBAAC,iBAAc,IAAK,oBAAC,kBAAe;AAAA,UACvD,SAAS,CAAC,MAAM;AACd,2BAAe,CAAC;AAChB,gBAAI,OAAO,IAAI,SAAS;AACtB,kBAAI,QAAQ,MAAM;AAAA,YACpB;AAAA,UACF;AAAA,UACA,MAAK;AAAA;AAAA,MACP;AAAA,MACA,qBAAC,2BACC;AAAA,4BAAC,SACC,8BAAC,0BAAuB,OAAO,OAAO,GACxC;AAAA,QACA,oBAAC,eACC,8BAAC,0BAAuB,OAAO,aAAa,GAC9C;AAAA,SACF;AAAA,MACA,oBAAC,mBAAiB,qBAAU;AAAA,OAC9B;AAAA,IACC,cAAc,oBAAC,4BAA0B,6BAAkB;AAAA,KAC9D;AAEJ;AAEA,MAAM,2BACJ,CAAC,EAAE,gBAAgB,sBAAsB,gBAAgB,MACzD,CAAC,OAAO,EAAE,SAAS,WAAW,GAAG,SAAS;AACxC,QAAM;AAAA,IACJ,OAAO,EAAE,sBAAsB;AAAA,IAC/B,SAAS,EAAE,aAAa;AAAA,EAC1B,IAAI,KAAK,YAAY;AAErB,QAAM,oBAAoB,sBAAsB,EAAE,QAAQ,CAAC;AAC3D,SACE;AAAA,IAAC;AAAA;AAAA,MACC,aAAa,qBAAqB,EAAE,QAAQ,CAAC;AAAA,MAC7C;AAAA,MACA,WAAW,gBAAgB,EAAE,QAAQ,CAAC;AAAA,MACtC;AAAA,MACA,OAAO,eAAe,EAAE,QAAQ,CAAC;AAAA,MACjC,gBAAgB,MAAM,aAAa,OAAO;AAAA;AAAA,EAC5C;AAEJ;AACF,MAAM,OAAO,MAAM;AACZ,MAAM,mBAAmB,CAAC;AAAA,EAC/B;AAAA,EACA;AAAA,EACA,iBAAiB,MAAM;AAAA,EACvB,uBAAuB;AAAA,EACvB,kBAAkB;AAAA,EAClB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,KACG;AACL,OAAO;AAAA,EACL,GAAG;AAAA,EACH;AAAA,EACA;AAAA,EACA,MAAM;AAAA,IACJ,YAAY;AAAA,MACV,yBAAyB;AAAA,QACvB;AAAA,QACA;AAAA,QACA;AAAA,MACF,CAAC;AAAA,IACH;AAAA,EACF;AAAA,EACA,OAAO,SAAS;AAAA,EAChB,kBAAkB;AAAA,EAClB;AAAA,EACA;AAAA,EACA;AACF;AAEA,IAAO,2BAAQ;",
   "names": []
 }

package/dist/esm/plugins/expandable-grid/ExpandablePlugin.js

@@ -6,10 +6,10 @@ import { VariableSizeList } from "react-window";
 import { ArrowheadDown, ArrowheadRight } from "@elliemae/ds-icons";
 import { DSButton } from "@elliemae/ds-button";
 import { createInstancePlugin, appendCellFormatter } from "@elliemae/ds-shared";
-import { ExpandedRow } from "./ExpandedRow";
-import { ExpandedRowExtra } from "./ExpandedRowExtra";
-import { RowSizes } from "../../rowSizes";
-import { useExpandGridState } from "./useExpandGridState";
+import { ExpandedRow } from "./ExpandedRow.js";
+import { ExpandedRowExtra } from "./ExpandedRowExtra.js";
+import { RowSizes } from "../../rowSizes.js";
+import { useExpandGridState } from "./useExpandGridState.js";
 const getExpandedRowSizeBySubrows = ({ totalAmount, amountVisible, isShowingAll, size = 36 }) => isShowingAll ? size * (totalAmount + 1) - 6 : size * (amountVisible + 1) + 32;
 const ExpandedRows = {
   SingleColumn: ExpandedRow,
@@ -111,7 +111,7 @@ const ExpandablePlugin = createInstancePlugin("expandable", {
     renderers.body.row = useMemo(() => {
       const expandedRowType = isExpandableSingleColumn(grid.decoratedColumns) ? "SingleColumn" : "Master";
       const ExpandedRowComponent = createExpandedRow(expandedRowType);
-      return ({ isExpanded, ...rowProps }) => {
+      return function({ isExpanded, ...rowProps }) {
         if (isExpanded) {
           const {
             props: { detailColumns, getChildrenRows, renderRowDetails },

package/dist/esm/plugins/expandable-grid/ExpandablePlugin.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/plugins/expandable-grid/ExpandablePlugin.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable max-lines */\nimport React, { useEffect, useMemo, useRef } from 'react';\nimport { cx, isFunction } from '@elliemae/ds-utilities';\nimport { VariableSizeList } from 'react-window';\nimport { ArrowheadDown, ArrowheadRight } from '@elliemae/ds-icons';\nimport { DSButton } from '@elliemae/ds-button';\nimport { createInstancePlugin, appendCellFormatter } from '@elliemae/ds-shared';\nimport { ExpandedRow } from './ExpandedRow';\nimport { ExpandedRowExtra } from './ExpandedRowExtra';\nimport { RowSizes } from '../../rowSizes';\nimport { useExpandGridState } from './useExpandGridState';\n\nconst getExpandedRowSizeBySubrows = ({ totalAmount, amountVisible, isShowingAll, size = 36 }) =>\n  isShowingAll ? size * (totalAmount + 1) - 6 : size * (amountVisible + 1) + 32;\n\nconst ExpandedRows = {\n  SingleColumn: ExpandedRow,\n  Master: ExpandedRowExtra,\n};\n\nconst createExpandedRow = (type) => ExpandedRows[type] || ExpandedRows.Master;\n\nconst isExpandableSingleColumn = (columns) => columns.some((column) => column.expandableColumn);\n\nexport const ExpandablePlugin = createInstancePlugin('expandable', {\n  registerStateHook: useExpandGridState,\n  decorateGrid(grid) {\n    const { decoratedColumns, columns } = grid.getInstance();\n    const detailColumns = useMemo(\n      () =>\n        decoratedColumns\n          .map((column) => ({\n            ...column,\n            customRenderer: column.detailCustomRenderer,\n          }))\n          .filter((col) => !col.expandableColumn),\n      [columns],\n    );\n    return {\n      detailColumns,\n    };\n  },\n\n  decorateColumns(columns, grid) {\n    if (isExpandableSingleColumn(columns)) return columns;\n    // get first column from user\n    const firstColumnIndex = columns.findIndex((column) => column.isUserColumn);\n    const firstColumn = columns[firstColumnIndex];\n    firstColumn.formatExpandable = true;\n\n    return [\n      ...columns.slice(0, firstColumnIndex),\n      appendCellFormatter((value, { isExpanded, rowData }) => {\n        const {\n          actions: { toggleExpand },\n        } = grid.getInstance();\n        /*\n         * should return only 2 elements ../custom-cell-renderer/addCustomRendererToCell.js\n         * getRenderer it's checking that length to apply the custom render to value only\n         */\n        return (\n          <>\n            <DSButton\n              buttonType=\"text\"\n              className=\"expandable-arrow\"\n              icon={isExpanded ? <ArrowheadDown /> : <ArrowheadRight />}\n              onClick={(e) => {\n                e.stopPropagation();\n                toggleExpand(rowData);\n              }}\n              size=\"s\"\n            />\n            {value}\n          </>\n        );\n      }, firstColumn),\n      ...columns.slice(firstColumnIndex + 1),\n    ];\n  },\n\n  getBodyProps(bodyProps, grid) {\n    const {\n      composedRows: rows,\n      props: {\n        rowKey,\n        getChildrenRows,\n        rowSize = 'normal',\n        subrowSize = 'normal',\n        getExpandedRowMinSize,\n        getExpandedRowSize,\n        expandableSubrowsVisible,\n      },\n      state: { expandedRows },\n    } = grid.getInstance();\n    const rowSizePx = RowSizes[rowSize];\n    const subrowSizePx = RowSizes[subrowSize];\n    const listRef = useRef();\n\n    useEffect(() => {\n      if (listRef.current) listRef.current.resetAfterIndex(0, true);\n    });\n\n    // implementation of expandable row single column with aggregation\n    const getItemSize = (index) => {\n      const rowData = rows[index];\n      const key = rowData[rowKey];\n      const children = getChildrenRows({ rowData });\n\n      const expandedSize = getExpandedRowSize\n        ? getExpandedRowSize(index, { rowData }) // https://jira.elliemae.io/browse/PUI-1659\n        : getExpandedRowSizeBySubrows({\n            totalAmount: children.length,\n            amountVisible: children.length > expandableSubrowsVisible ? expandableSubrowsVisible : children.length,\n            isShowingAll:\n              children.length < expandableSubrowsVisible || (expandedRows[key] && expandedRows[key].showAllRows),\n            size: subrowSizePx,\n          });\n\n      const expandedMinSize = isFunction(getExpandedRowMinSize) && getExpandedRowMinSize(index);\n\n      // eslint-disable-next-line no-nested-ternary\n      return expandedRows[key] ? (expandedMinSize > expandedSize ? expandedMinSize : expandedSize) : rowSizePx;\n    };\n\n    return {\n      ...bodyProps,\n      className: cx(bodyProps.className, 'expandable'),\n      listComponent: VariableSizeList,\n      listProps: { ref: listRef, itemSize: getItemSize },\n    };\n  },\n\n  decorateRenderers(renderers, grid) {\n    const Row = renderers.body.row;\n    const Cell = renderers.body.cell;\n\n    // eslint-disable-next-line react/display-name\n    renderers.body.row = useMemo(() => {\n      // todo: the expandable grid should be created from another specific grid component\n      const expandedRowType = isExpandableSingleColumn(grid.decoratedColumns) ? 'SingleColumn' : 'Master';\n      const ExpandedRowComponent = createExpandedRow(expandedRowType);\n      // eslint-disable-next-line react/display-name\n      return ({ isExpanded, ...rowProps }) => {\n        if (isExpanded) {\n          const {\n            props: { detailColumns, getChildrenRows, renderRowDetails },\n            composedRows,\n          } = grid.getInstance();\n          // https://jira.elliemae.io/browse/PUI-1667\n          const rowData = composedRows[rowProps.index] ? composedRows[rowProps.index] : rowProps.rowData;\n          return (\n            <ExpandedRowComponent\n              cellComponent={Cell}\n              detailColumns={detailColumns}\n              parentGrid={grid}\n              renderRowDetails={renderRowDetails}\n              rowComponent={Row}\n              rowData={rowData}\n              rowProps={{\n                rowData,\n                isExpanded,\n                ...rowProps,\n              }}\n              rows={getChildrenRows({ rowData })}\n            >\n              {rowProps.children}\n            </ExpandedRowComponent>\n          );\n        }\n        return <Row {...rowProps} />;\n      };\n    }, []);\n\n    return renderers;\n  },\n\n  getRowProps(rowProps, grid, { rowData }) {\n    const {\n      props: { rowKey },\n      state: { expandedRows },\n    } = grid.getInstance();\n    const key = rowData[rowKey];\n    const isExpanded = !!expandedRows[key];\n    return {\n      ...rowProps,\n      className: cx(\n        rowProps.className,\n        Object.keys(expandedRows).length > 0 && 'expandable-row',\n        isExpanded && 'expanded',\n      ),\n      isExpanded,\n      showAllRows: expandedRows[key] && expandedRows[key].showAllRows,\n    };\n  },\n});\n"],
-  "mappings": "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",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable max-lines */\nimport React, { useEffect, useMemo, useRef } from 'react';\nimport { cx, isFunction } from '@elliemae/ds-utilities';\nimport { VariableSizeList } from 'react-window';\nimport { ArrowheadDown, ArrowheadRight } from '@elliemae/ds-icons';\nimport { DSButton } from '@elliemae/ds-button';\nimport { createInstancePlugin, appendCellFormatter } from '@elliemae/ds-shared';\nimport { ExpandedRow } from './ExpandedRow.js';\nimport { ExpandedRowExtra } from './ExpandedRowExtra.js';\nimport { RowSizes } from '../../rowSizes.js';\nimport { useExpandGridState } from './useExpandGridState.js';\n\nconst getExpandedRowSizeBySubrows = ({ totalAmount, amountVisible, isShowingAll, size = 36 }) =>\n  isShowingAll ? size * (totalAmount + 1) - 6 : size * (amountVisible + 1) + 32;\n\nconst ExpandedRows = {\n  SingleColumn: ExpandedRow,\n  Master: ExpandedRowExtra,\n};\n\nconst createExpandedRow = (type) => ExpandedRows[type] || ExpandedRows.Master;\n\nconst isExpandableSingleColumn = (columns) => columns.some((column) => column.expandableColumn);\n\nexport const ExpandablePlugin = createInstancePlugin('expandable', {\n  registerStateHook: useExpandGridState,\n  decorateGrid(grid) {\n    const { decoratedColumns, columns } = grid.getInstance();\n    const detailColumns = useMemo(\n      () =>\n        decoratedColumns\n          .map((column) => ({\n            ...column,\n            customRenderer: column.detailCustomRenderer,\n          }))\n          .filter((col) => !col.expandableColumn),\n      [columns],\n    );\n    return {\n      detailColumns,\n    };\n  },\n\n  decorateColumns(columns, grid) {\n    if (isExpandableSingleColumn(columns)) return columns;\n    // get first column from user\n    const firstColumnIndex = columns.findIndex((column) => column.isUserColumn);\n    const firstColumn = columns[firstColumnIndex];\n    firstColumn.formatExpandable = true;\n\n    return [\n      ...columns.slice(0, firstColumnIndex),\n      appendCellFormatter((value, { isExpanded, rowData }) => {\n        const {\n          actions: { toggleExpand },\n        } = grid.getInstance();\n        /*\n         * should return only 2 elements ../custom-cell-renderer/addCustomRendererToCell.js\n         * getRenderer it's checking that length to apply the custom render to value only\n         */\n        return (\n          <>\n            <DSButton\n              buttonType=\"text\"\n              className=\"expandable-arrow\"\n              icon={isExpanded ? <ArrowheadDown /> : <ArrowheadRight />}\n              onClick={(e) => {\n                e.stopPropagation();\n                toggleExpand(rowData);\n              }}\n              size=\"s\"\n            />\n            {value}\n          </>\n        );\n      }, firstColumn),\n      ...columns.slice(firstColumnIndex + 1),\n    ];\n  },\n\n  getBodyProps(bodyProps, grid) {\n    const {\n      composedRows: rows,\n      props: {\n        rowKey,\n        getChildrenRows,\n        rowSize = 'normal',\n        subrowSize = 'normal',\n        getExpandedRowMinSize,\n        getExpandedRowSize,\n        expandableSubrowsVisible,\n      },\n      state: { expandedRows },\n    } = grid.getInstance();\n    const rowSizePx = RowSizes[rowSize];\n    const subrowSizePx = RowSizes[subrowSize];\n    const listRef = useRef();\n\n    useEffect(() => {\n      if (listRef.current) listRef.current.resetAfterIndex(0, true);\n    });\n\n    // implementation of expandable row single column with aggregation\n    const getItemSize = (index) => {\n      const rowData = rows[index];\n      const key = rowData[rowKey];\n      const children = getChildrenRows({ rowData });\n\n      const expandedSize = getExpandedRowSize\n        ? getExpandedRowSize(index, { rowData }) // https://jira.elliemae.io/browse/PUI-1659\n        : getExpandedRowSizeBySubrows({\n            totalAmount: children.length,\n            amountVisible: children.length > expandableSubrowsVisible ? expandableSubrowsVisible : children.length,\n            isShowingAll:\n              children.length < expandableSubrowsVisible || (expandedRows[key] && expandedRows[key].showAllRows),\n            size: subrowSizePx,\n          });\n\n      const expandedMinSize = isFunction(getExpandedRowMinSize) && getExpandedRowMinSize(index);\n\n      // eslint-disable-next-line no-nested-ternary\n      return expandedRows[key] ? (expandedMinSize > expandedSize ? expandedMinSize : expandedSize) : rowSizePx;\n    };\n\n    return {\n      ...bodyProps,\n      className: cx(bodyProps.className, 'expandable'),\n      listComponent: VariableSizeList,\n      listProps: { ref: listRef, itemSize: getItemSize },\n    };\n  },\n\n  decorateRenderers(renderers, grid) {\n    const Row = renderers.body.row;\n    const Cell = renderers.body.cell;\n\n    // eslint-disable-next-line react/display-name\n    renderers.body.row = useMemo(() => {\n      // todo: the expandable grid should be created from another specific grid component\n      const expandedRowType = isExpandableSingleColumn(grid.decoratedColumns) ? 'SingleColumn' : 'Master';\n      const ExpandedRowComponent = createExpandedRow(expandedRowType);\n      // eslint-disable-next-line react/display-name\n      return function ({ isExpanded, ...rowProps }) {\n        if (isExpanded) {\n          const {\n            props: { detailColumns, getChildrenRows, renderRowDetails },\n            composedRows,\n          } = grid.getInstance();\n          // https://jira.elliemae.io/browse/PUI-1667\n          const rowData = composedRows[rowProps.index] ? composedRows[rowProps.index] : rowProps.rowData;\n          return (\n            <ExpandedRowComponent\n              cellComponent={Cell}\n              detailColumns={detailColumns}\n              parentGrid={grid}\n              renderRowDetails={renderRowDetails}\n              rowComponent={Row}\n              rowData={rowData}\n              rowProps={{\n                rowData,\n                isExpanded,\n                ...rowProps,\n              }}\n              rows={getChildrenRows({ rowData })}\n            >\n              {rowProps.children}\n            </ExpandedRowComponent>\n          );\n        }\n        return <Row {...rowProps} />;\n      };\n    }, []);\n\n    return renderers;\n  },\n\n  getRowProps(rowProps, grid, { rowData }) {\n    const {\n      props: { rowKey },\n      state: { expandedRows },\n    } = grid.getInstance();\n    const key = rowData[rowKey];\n    const isExpanded = !!expandedRows[key];\n    return {\n      ...rowProps,\n      className: cx(\n        rowProps.className,\n        Object.keys(expandedRows).length > 0 && 'expandable-row',\n        isExpanded && 'expanded',\n      ),\n      isExpanded,\n      showAllRows: expandedRows[key] && expandedRows[key].showAllRows,\n    };\n  },\n});\n"],
+  "mappings": "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",
   "names": []
 }

package/dist/esm/plugins/expandable-grid/ExpandedRow.js

@@ -5,12 +5,12 @@ import { DSButton } from "@elliemae/ds-button";
 import { styled } from "@elliemae/ds-system";
 import { get } from "@elliemae/ds-utilities";
 import { deferComponentRender, useDataGrid } from "@elliemae/ds-shared";
-import { PaginationPlugin } from "../pagination";
-import { BodyCell } from "../../components/BodyCell";
-import { defaultRenderers } from "../../components/renderers";
-import { TableBody } from "../../components/TableBody";
-import { Table } from "../../components/Table";
-import { ColumnSizingPlugin } from "../column-sizing";
+import { PaginationPlugin } from "../pagination/index.js";
+import { BodyCell } from "../../components/BodyCell.js";
+import { defaultRenderers } from "../../components/renderers/index.js";
+import { TableBody } from "../../components/TableBody.js";
+import { Table } from "../../components/Table.js";
+import { ColumnSizingPlugin } from "../column-sizing/index.js";
 const DetailGrid = deferComponentRender(({ parentGrid, parentRowData, rows }) => {
   const { instanceRef, ...parentProps } = parentGrid.props;
   const grid = useDataGrid({

package/dist/esm/plugins/expandable-grid/ExpandedRow.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/plugins/expandable-grid/ExpandedRow.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable react/prop-types */\n/* eslint-disable max-lines */\nimport React from 'react';\nimport { DSSeparator } from '@elliemae/ds-separator';\nimport { DSButton } from '@elliemae/ds-button';\nimport { styled } from '@elliemae/ds-system';\nimport { get } from '@elliemae/ds-utilities';\nimport { deferComponentRender, useDataGrid } from '@elliemae/ds-shared';\nimport { PaginationPlugin } from '../pagination';\nimport { BodyCell } from '../../components/BodyCell';\nimport { defaultRenderers } from '../../components/renderers';\nimport { TableBody } from '../../components/TableBody';\nimport { Table } from '../../components/Table';\nimport { ColumnSizingPlugin } from '../column-sizing';\n\nconst DetailGrid = deferComponentRender(({ parentGrid, parentRowData, rows }) => {\n  const { instanceRef, ...parentProps } = parentGrid.props;\n  const grid = useDataGrid({\n    uuid: parentGrid.getInstance().uuid,\n    ...parentProps,\n    columns: parentGrid\n      .getInstance()\n      .decoratedColumns.filter((col) => !col.expandableColumn)\n      .map((c) => ({ ...c, expandableColumn: false })),\n    rows,\n    plugins: [ColumnSizingPlugin, PaginationPlugin],\n    renderers: defaultRenderers,\n    bindColumnsSizeTo: parentGrid.uuid,\n    numRowsVisible: 'all',\n    paginated: true,\n    pagination: {\n      perPage: rows.length,\n      conditionalPagination: true,\n    },\n    parentRowData,\n  });\n\n  return (\n    <Table {...grid}>\n      <TableBody />\n    </Table>\n  );\n}, null);\n\nconst DetailsWrapper = styled.span`\n  flex: 1;\n  width: ${(props) => props.width}px;\n`;\n\nconst DetailGridWrapper = styled.div`\n  display: flex;\n  height: calc(100% - ${(props) => (props.allRowsVisible ? 18 : 60)}px);\n  width: ${(props) => props.expandableGridDetailWidth}px;\n  margin: 12px 0;\n`;\n\nconst ExpandedRow = ({\n  parentGrid,\n  detailColumns,\n  rowData,\n  rows,\n  rowProps,\n  cellComponent: CellComponent,\n  rowComponent: RowComponent,\n}) => {\n  const {\n    decoratedColumns,\n    actions: { toggleShowAllRows },\n    state: { expandedRows },\n    props: {\n      rowKey,\n      showMoreRowsText = 'SHOW ALL ROWS',\n      showLessRowsText = 'SHOW LESS ROWS',\n      expandableSubrowsVisible,\n    },\n    columnSizeService: { expandableGridDetailWidth },\n  } = parentGrid.getInstance();\n\n  const { showAllRows, ...restRowProps } = rowProps;\n  return (\n    <RowComponent {...restRowProps}>\n      <BodyCell\n        column={decoratedColumns[0]}\n        columnIndex={0}\n        component={CellComponent}\n        grid={parentGrid}\n        rowProps={{ rowData, ...rowProps }}\n      />\n      <DetailsWrapper width={expandableGridDetailWidth}>\n        <DetailGridWrapper\n          allRowsVisible={rows.length < expandableSubrowsVisible || get(expandedRows, [rowKey, 'showAllRows'])}\n          expandableGridDetailWidth={expandableGridDetailWidth}\n        >\n          <DSSeparator dashed orientation=\"vertical\" />\n          <DetailGrid\n            detailColumns={detailColumns}\n            parentGrid={parentGrid.getInstance()}\n            parentRowData={rowData}\n            rows={showAllRows ? rows : (rows || []).slice(0, expandableSubrowsVisible)}\n          />\n        </DetailGridWrapper>\n        {rows.length > expandableSubrowsVisible && (\n          <DSButton\n            buttonType=\"text\"\n            labelText={showAllRows ? showLessRowsText : showMoreRowsText}\n            onClick={(e) => {\n              e.stopPropagation();\n              toggleShowAllRows(rowData);\n            }}\n            style={{ marginBottom: '10px' }}\n          />\n        )}\n      </DetailsWrapper>\n    </RowComponent>\n  );\n};\n\nexport { ExpandedRow };\nexport default ExpandedRow;\n"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable react/prop-types */\n/* eslint-disable max-lines */\nimport React from 'react';\nimport { DSSeparator } from '@elliemae/ds-separator';\nimport { DSButton } from '@elliemae/ds-button';\nimport { styled } from '@elliemae/ds-system';\nimport { get } from '@elliemae/ds-utilities';\nimport { deferComponentRender, useDataGrid } from '@elliemae/ds-shared';\nimport { PaginationPlugin } from '../pagination/index.js';\nimport { BodyCell } from '../../components/BodyCell.js';\nimport { defaultRenderers } from '../../components/renderers/index.js';\nimport { TableBody } from '../../components/TableBody.js';\nimport { Table } from '../../components/Table.js';\nimport { ColumnSizingPlugin } from '../column-sizing/index.js';\n\nconst DetailGrid = deferComponentRender(({ parentGrid, parentRowData, rows }) => {\n  const { instanceRef, ...parentProps } = parentGrid.props;\n  const grid = useDataGrid({\n    uuid: parentGrid.getInstance().uuid,\n    ...parentProps,\n    columns: parentGrid\n      .getInstance()\n      .decoratedColumns.filter((col) => !col.expandableColumn)\n      .map((c) => ({ ...c, expandableColumn: false })),\n    rows,\n    plugins: [ColumnSizingPlugin, PaginationPlugin],\n    renderers: defaultRenderers,\n    bindColumnsSizeTo: parentGrid.uuid,\n    numRowsVisible: 'all',\n    paginated: true,\n    pagination: {\n      perPage: rows.length,\n      conditionalPagination: true,\n    },\n    parentRowData,\n  });\n\n  return (\n    <Table {...grid}>\n      <TableBody />\n    </Table>\n  );\n}, null);\n\nconst DetailsWrapper = styled.span`\n  flex: 1;\n  width: ${(props) => props.width}px;\n`;\n\nconst DetailGridWrapper = styled.div`\n  display: flex;\n  height: calc(100% - ${(props) => (props.allRowsVisible ? 18 : 60)}px);\n  width: ${(props) => props.expandableGridDetailWidth}px;\n  margin: 12px 0;\n`;\n\nconst ExpandedRow = ({\n  parentGrid,\n  detailColumns,\n  rowData,\n  rows,\n  rowProps,\n  cellComponent: CellComponent,\n  rowComponent: RowComponent,\n}) => {\n  const {\n    decoratedColumns,\n    actions: { toggleShowAllRows },\n    state: { expandedRows },\n    props: {\n      rowKey,\n      showMoreRowsText = 'SHOW ALL ROWS',\n      showLessRowsText = 'SHOW LESS ROWS',\n      expandableSubrowsVisible,\n    },\n    columnSizeService: { expandableGridDetailWidth },\n  } = parentGrid.getInstance();\n\n  const { showAllRows, ...restRowProps } = rowProps;\n  return (\n    <RowComponent {...restRowProps}>\n      <BodyCell\n        column={decoratedColumns[0]}\n        columnIndex={0}\n        component={CellComponent}\n        grid={parentGrid}\n        rowProps={{ rowData, ...rowProps }}\n      />\n      <DetailsWrapper width={expandableGridDetailWidth}>\n        <DetailGridWrapper\n          allRowsVisible={rows.length < expandableSubrowsVisible || get(expandedRows, [rowKey, 'showAllRows'])}\n          expandableGridDetailWidth={expandableGridDetailWidth}\n        >\n          <DSSeparator dashed orientation=\"vertical\" />\n          <DetailGrid\n            detailColumns={detailColumns}\n            parentGrid={parentGrid.getInstance()}\n            parentRowData={rowData}\n            rows={showAllRows ? rows : (rows || []).slice(0, expandableSubrowsVisible)}\n          />\n        </DetailGridWrapper>\n        {rows.length > expandableSubrowsVisible && (\n          <DSButton\n            buttonType=\"text\"\n            labelText={showAllRows ? showLessRowsText : showMoreRowsText}\n            onClick={(e) => {\n              e.stopPropagation();\n              toggleShowAllRows(rowData);\n            }}\n            style={{ marginBottom: '10px' }}\n          />\n        )}\n      </DetailsWrapper>\n    </RowComponent>\n  );\n};\n\nexport { ExpandedRow };\nexport default ExpandedRow;\n"],
   "mappings": "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",
   "names": []
 }

package/dist/esm/plugins/expandable-grid/ExpandedRowExtra.js

@@ -3,18 +3,22 @@ import { jsx, jsxs } from "react/jsx-runtime";
 import { cx } from "@elliemae/ds-utilities";
 import { DSSeparator } from "@elliemae/ds-separator";
 import { aggregatedClasses } from "@elliemae/ds-classnames";
-import { dataGridBlockName } from "../../blockNames";
+import { dataGridBlockName } from "../../blockNames.js";
 const blockName = `${dataGridBlockName}-expanded-row`;
 const DetailsWrapper = aggregatedClasses("div")(`${blockName}-details-wrapper`, null, () => ({
   "ie-flex-basis-auto": true
 }));
-function ExpandedRowExtra({ children, rowData, rowProps, rowComponent: RowComponent, renderRowDetails = () => null }) {
-  return /* @__PURE__ */ jsxs(RowComponent, { ...rowProps, className: cx(rowProps.className, "expanded-detail-row"), children: [
-    /* @__PURE__ */ jsx(RowComponent, { className: "master-row-expanded", children }),
-    /* @__PURE__ */ jsx(DSSeparator, { dashed: true, margin: "xs" }),
-    /* @__PURE__ */ jsx(DetailsWrapper, { children: renderRowDetails({ rowData }) })
-  ] });
-}
+const ExpandedRowExtra = ({
+  children,
+  rowData,
+  rowProps,
+  rowComponent: RowComponent,
+  renderRowDetails = () => null
+}) => /* @__PURE__ */ jsxs(RowComponent, { ...rowProps, className: cx(rowProps.className, "expanded-detail-row"), children: [
+  /* @__PURE__ */ jsx(RowComponent, { className: "master-row-expanded", children }),
+  /* @__PURE__ */ jsx(DSSeparator, { dashed: true, margin: "xs" }),
+  /* @__PURE__ */ jsx(DetailsWrapper, { children: renderRowDetails({ rowData }) })
+] });
 var ExpandedRowExtra_default = ExpandedRowExtra;
 export {
   ExpandedRowExtra,

package/dist/esm/plugins/expandable-grid/ExpandedRowExtra.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/plugins/expandable-grid/ExpandedRowExtra.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React from 'react';\nimport { cx } from '@elliemae/ds-utilities';\nimport { DSSeparator } from '@elliemae/ds-separator';\nimport { aggregatedClasses } from '@elliemae/ds-classnames';\nimport { dataGridBlockName } from '../../blockNames';\n\nconst blockName = `${dataGridBlockName}-expanded-row`;\n\nconst DetailsWrapper = aggregatedClasses('div')(`${blockName}-details-wrapper`, null, () => ({\n  'ie-flex-basis-auto': true,\n}));\n\nfunction ExpandedRowExtra({ children, rowData, rowProps, rowComponent: RowComponent, renderRowDetails = () => null }) {\n  return (\n    <RowComponent {...rowProps} className={cx(rowProps.className, 'expanded-detail-row')}>\n      <RowComponent className=\"master-row-expanded\">{children}</RowComponent>\n      <DSSeparator dashed margin=\"xs\" />\n      <DetailsWrapper>{renderRowDetails({ rowData })}</DetailsWrapper>\n    </RowComponent>\n  );\n}\n\nexport { ExpandedRowExtra };\nexport default ExpandedRowExtra;\n"],
-  "mappings": "AAAA,YAAY,WAAW;ACcnB,SACE,KADF;AAbJ,SAAS,UAAU;AACnB,SAAS,mBAAmB;AAC5B,SAAS,yBAAyB;AAClC,SAAS,yBAAyB;AAElC,MAAM,YAAY,GAAG;AAErB,MAAM,iBAAiB,kBAAkB,KAAK,EAAE,GAAG,6BAA6B,MAAM,OAAO;AAAA,EAC3F,sBAAsB;AACxB,EAAE;AAEF,SAAS,iBAAiB,EAAE,UAAU,SAAS,UAAU,cAAc,cAAc,mBAAmB,MAAM,KAAK,GAAG;AACpH,SACE,qBAAC,gBAAc,GAAG,UAAU,WAAW,GAAG,SAAS,WAAW,qBAAqB,GACjF;AAAA,wBAAC,gBAAa,WAAU,uBAAuB,UAAS;AAAA,IACxD,oBAAC,eAAY,QAAM,MAAC,QAAO,MAAK;AAAA,IAChC,oBAAC,kBAAgB,2BAAiB,EAAE,QAAQ,CAAC,GAAE;AAAA,KACjD;AAEJ;AAGA,IAAO,2BAAQ;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React from 'react';\nimport { cx } from '@elliemae/ds-utilities';\nimport { DSSeparator } from '@elliemae/ds-separator';\nimport { aggregatedClasses } from '@elliemae/ds-classnames';\nimport { dataGridBlockName } from '../../blockNames.js';\n\nconst blockName = `${dataGridBlockName}-expanded-row`;\n\nconst DetailsWrapper = aggregatedClasses('div')(`${blockName}-details-wrapper`, null, () => ({\n  'ie-flex-basis-auto': true,\n}));\n\nconst ExpandedRowExtra = ({\n  children,\n  rowData,\n  rowProps,\n  rowComponent: RowComponent,\n  renderRowDetails = () => null,\n}) => (\n  <RowComponent {...rowProps} className={cx(rowProps.className, 'expanded-detail-row')}>\n    <RowComponent className=\"master-row-expanded\">{children}</RowComponent>\n    <DSSeparator dashed margin=\"xs\" />\n    <DetailsWrapper>{renderRowDetails({ rowData })}</DetailsWrapper>\n  </RowComponent>\n);\n\nexport { ExpandedRowExtra };\nexport default ExpandedRowExtra;\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACmBrB,SACE,KADF;AAlBF,SAAS,UAAU;AACnB,SAAS,mBAAmB;AAC5B,SAAS,yBAAyB;AAClC,SAAS,yBAAyB;AAElC,MAAM,YAAY,GAAG;AAErB,MAAM,iBAAiB,kBAAkB,KAAK,EAAE,GAAG,6BAA6B,MAAM,OAAO;AAAA,EAC3F,sBAAsB;AACxB,EAAE;AAEF,MAAM,mBAAmB,CAAC;AAAA,EACxB;AAAA,EACA;AAAA,EACA;AAAA,EACA,cAAc;AAAA,EACd,mBAAmB,MAAM;AAC3B,MACE,qBAAC,gBAAc,GAAG,UAAU,WAAW,GAAG,SAAS,WAAW,qBAAqB,GACjF;AAAA,sBAAC,gBAAa,WAAU,uBAAuB,UAAS;AAAA,EACxD,oBAAC,eAAY,QAAM,MAAC,QAAO,MAAK;AAAA,EAChC,oBAAC,kBAAgB,2BAAiB,EAAE,QAAQ,CAAC,GAAE;AAAA,GACjD;AAIF,IAAO,2BAAQ;",
   "names": []
 }

package/dist/esm/plugins/expandable-grid/index.js

@@ -1,6 +1,6 @@
 import * as React from "react";
-import { ExpandablePlugin } from "./ExpandablePlugin";
-import { ExpandableColumn } from "./ExpandableColumn";
+import { ExpandablePlugin } from "./ExpandablePlugin.js";
+import { ExpandableColumn } from "./ExpandableColumn.js";
 export {
   ExpandableColumn,
   ExpandablePlugin

package/dist/esm/plugins/expandable-grid/index.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/plugins/expandable-grid/index.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "export { ExpandablePlugin } from './ExpandablePlugin';\nexport { ExpandableColumn } from './ExpandableColumn';\n"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "export { ExpandablePlugin } from './ExpandablePlugin.js';\nexport { ExpandableColumn } from './ExpandableColumn.js';\n"],
   "mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,wBAAwB;AACjC,SAAS,wBAAwB;",
   "names": []
 }

package/dist/esm/plugins/expandable-grid/useExpandGridState.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/plugins/expandable-grid/useExpandGridState.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { isFunction,useExpandState } from '@elliemae/ds-utilities';\nimport { useState } from 'react';\n\nexport const useExpandGridState = (grid) => {\n  const {\n    composedRows,\n    props: {\n      expandedRows: expandedRowsProp = {},\n      rowKey = 'id',\n      onExpandRow,\n      onToggleShowAllRows,\n      onExpandChange,\n      onExpandAll,\n      onToggleExpand,\n      onCollapseRow,\n    },\n  } = grid;\n\n  const { state, actions } = useExpandState({\n    items: composedRows,\n    itemKey: rowKey,\n    expanded: expandedRowsProp,\n    onExpand: onExpandRow,\n    onExpandChange,\n    onExpandAll,\n    onToggleExpand,\n    onCollapse: onCollapseRow,\n  });\n\n  const [shouldRefocus, setShouldReFocus] = useState(false);\n  const expandRow = (row) => actions.expand(row, { showAllRows: false });\n\n  const toggleExpandAllRows = actions.toggleExpandAll;\n\n  const collapseRow = actions.collapse;\n\n  const toggleExpand = (row) => {\n    setShouldReFocus(false);\n    actions.toggleExpand(row, { showAllRows: false });\n  };\n\n  const toggleShowAllRows = (row) => {\n    if (isFunction(onToggleShowAllRows)) {\n      onToggleShowAllRows(row);\n    } else {\n      const key = row[rowKey];\n      actions.expand(row, {\n        showAllRows: state.expanded[key] && !state.expanded[key].showAllRows,\n      });\n    }\n  };\n\n  return {\n    state: {\n      expandedRows: state.expanded,\n      isExpandedAll: state.isExpandedAll,\n      shouldRefocus,\n    },\n    actions: {\n      expandRow,\n      toggleExpandAllRows,\n      toggleExpand,\n      toggleShowAllRows,\n      collapseRow,\n    },\n  };\n};\n"],
-  "mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,YAAW,sBAAsB;AAC1C,SAAS,gBAAgB;AAElB,MAAM,qBAAqB,CAAC,SAAS;AAC1C,QAAM;AAAA,IACJ;AAAA,IACA,OAAO;AAAA,MACL,cAAc,mBAAmB,CAAC;AAAA,MAClC,SAAS;AAAA,MACT;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,EACF,IAAI;AAEJ,QAAM,EAAE,OAAO,QAAQ,IAAI,eAAe;AAAA,IACxC,OAAO;AAAA,IACP,SAAS;AAAA,IACT,UAAU;AAAA,IACV,UAAU;AAAA,IACV;AAAA,IACA;AAAA,IACA;AAAA,IACA,YAAY;AAAA,EACd,CAAC;AAED,QAAM,CAAC,eAAe,gBAAgB,IAAI,SAAS,KAAK;AACxD,QAAM,YAAY,CAAC,QAAQ,QAAQ,OAAO,KAAK,EAAE,aAAa,MAAM,CAAC;AAErE,QAAM,sBAAsB,QAAQ;AAEpC,QAAM,cAAc,QAAQ;AAE5B,QAAM,eAAe,CAAC,QAAQ;AAC5B,qBAAiB,KAAK;AACtB,YAAQ,aAAa,KAAK,EAAE,aAAa,MAAM,CAAC;AAAA,EAClD;AAEA,QAAM,oBAAoB,CAAC,QAAQ;AACjC,QAAI,WAAW,mBAAmB,GAAG;AACnC,0BAAoB,GAAG;AAAA,IACzB,OAAO;AACL,YAAM,MAAM,IAAI;AAChB,cAAQ,OAAO,KAAK;AAAA,QAClB,aAAa,MAAM,SAAS,QAAQ,CAAC,MAAM,SAAS,KAAK;AAAA,MAC3D,CAAC;AAAA,IACH;AAAA,EACF;AAEA,SAAO;AAAA,IACL,OAAO;AAAA,MACL,cAAc,MAAM;AAAA,MACpB,eAAe,MAAM;AAAA,MACrB;AAAA,IACF;AAAA,IACA,SAAS;AAAA,MACP;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,EACF;AACF;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { isFunction, useExpandState } from '@elliemae/ds-utilities';\nimport { useState } from 'react';\n\nexport const useExpandGridState = (grid) => {\n  const {\n    composedRows,\n    props: {\n      expandedRows: expandedRowsProp = {},\n      rowKey = 'id',\n      onExpandRow,\n      onToggleShowAllRows,\n      onExpandChange,\n      onExpandAll,\n      onToggleExpand,\n      onCollapseRow,\n    },\n  } = grid;\n\n  const { state, actions } = useExpandState({\n    items: composedRows,\n    itemKey: rowKey,\n    expanded: expandedRowsProp,\n    onExpand: onExpandRow,\n    onExpandChange,\n    onExpandAll,\n    onToggleExpand,\n    onCollapse: onCollapseRow,\n  });\n\n  const [shouldRefocus, setShouldReFocus] = useState(false);\n  const expandRow = (row) => actions.expand(row, { showAllRows: false });\n\n  const toggleExpandAllRows = actions.toggleExpandAll;\n\n  const collapseRow = actions.collapse;\n\n  const toggleExpand = (row) => {\n    setShouldReFocus(false);\n    actions.toggleExpand(row, { showAllRows: false });\n  };\n\n  const toggleShowAllRows = (row) => {\n    if (isFunction(onToggleShowAllRows)) {\n      onToggleShowAllRows(row);\n    } else {\n      const key = row[rowKey];\n      actions.expand(row, {\n        showAllRows: state.expanded[key] && !state.expanded[key].showAllRows,\n      });\n    }\n  };\n\n  return {\n    state: {\n      expandedRows: state.expanded,\n      isExpandedAll: state.isExpandedAll,\n      shouldRefocus,\n    },\n    actions: {\n      expandRow,\n      toggleExpandAllRows,\n      toggleExpand,\n      toggleShowAllRows,\n      collapseRow,\n    },\n  };\n};\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,YAAY,sBAAsB;AAC3C,SAAS,gBAAgB;AAElB,MAAM,qBAAqB,CAAC,SAAS;AAC1C,QAAM;AAAA,IACJ;AAAA,IACA,OAAO;AAAA,MACL,cAAc,mBAAmB,CAAC;AAAA,MAClC,SAAS;AAAA,MACT;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,EACF,IAAI;AAEJ,QAAM,EAAE,OAAO,QAAQ,IAAI,eAAe;AAAA,IACxC,OAAO;AAAA,IACP,SAAS;AAAA,IACT,UAAU;AAAA,IACV,UAAU;AAAA,IACV;AAAA,IACA;AAAA,IACA;AAAA,IACA,YAAY;AAAA,EACd,CAAC;AAED,QAAM,CAAC,eAAe,gBAAgB,IAAI,SAAS,KAAK;AACxD,QAAM,YAAY,CAAC,QAAQ,QAAQ,OAAO,KAAK,EAAE,aAAa,MAAM,CAAC;AAErE,QAAM,sBAAsB,QAAQ;AAEpC,QAAM,cAAc,QAAQ;AAE5B,QAAM,eAAe,CAAC,QAAQ;AAC5B,qBAAiB,KAAK;AACtB,YAAQ,aAAa,KAAK,EAAE,aAAa,MAAM,CAAC;AAAA,EAClD;AAEA,QAAM,oBAAoB,CAAC,QAAQ;AACjC,QAAI,WAAW,mBAAmB,GAAG;AACnC,0BAAoB,GAAG;AAAA,IACzB,OAAO;AACL,YAAM,MAAM,IAAI;AAChB,cAAQ,OAAO,KAAK;AAAA,QAClB,aAAa,MAAM,SAAS,QAAQ,CAAC,MAAM,SAAS,KAAK;AAAA,MAC3D,CAAC;AAAA,IACH;AAAA,EACF;AAEA,SAAO;AAAA,IACL,OAAO;AAAA,MACL,cAAc,MAAM;AAAA,MACpB,eAAe,MAAM;AAAA,MACrB;AAAA,IACF;AAAA,IACA,SAAS;AAAA,MACP;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,EACF;AACF;",
   "names": []
 }

package/dist/esm/plugins/export-data/index.js

@@ -1,5 +1,5 @@
 import * as React from "react";
-import { ExportDataPlugin } from "./ExportDataPlugin";
+import { ExportDataPlugin } from "./ExportDataPlugin.js";
 export {
   ExportDataPlugin
 };

package/dist/esm/plugins/export-data/index.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/plugins/export-data/index.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "export { ExportDataPlugin } from './ExportDataPlugin';\n"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "export { ExportDataPlugin } from './ExportDataPlugin.js';\n"],
   "mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,wBAAwB;",
   "names": []
 }

package/dist/esm/plugins/filterable/FilterablePlugin.js

@@ -1,9 +1,9 @@
 import * as React from "react";
 import { get, isFunction } from "@elliemae/ds-utilities";
 import { createInstancePlugin } from "@elliemae/ds-shared";
-import { addFilterToColumn } from "./addFilterToColumn";
-import filterRowsByQuery, { filterRowsByQueryGroup } from "./filtering-helper/filterRowsByQuery";
-import { useFilterableState } from "./useFilterableState";
+import { addFilterToColumn } from "./addFilterToColumn.js";
+import filterRowsByQuery, { filterRowsByQueryGroup } from "./filtering-helper/filterRowsByQuery.js";
+import { useFilterableState } from "./useFilterableState.js";
 const decorateColumn = (column, grid) => {
   const {
     props: { isFilterableColumnActive = (col) => col.searchable, onRemoveAllFilters },

package/dist/esm/plugins/filterable/FilterablePlugin.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/plugins/filterable/FilterablePlugin.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable indent */\nimport { get, isFunction } from '@elliemae/ds-utilities';\nimport { createInstancePlugin } from '@elliemae/ds-shared';\nimport { addFilterToColumn } from './addFilterToColumn';\n\nimport filterRowsByQuery, { filterRowsByQueryGroup } from './filtering-helper/filterRowsByQuery';\nimport { useFilterableState } from './useFilterableState';\n\nconst decorateColumn = (column, grid) => {\n  const {\n    props: { isFilterableColumnActive = (col) => col.searchable, onRemoveAllFilters },\n    actions: { addFilter, removeFilter },\n    state: { query, filters },\n  } = grid;\n\n  return isFilterableColumnActive(column)\n    ? addFilterToColumn(\n        {\n          grid,\n          onAddFilter: addFilter,\n          onRemoveFilter: removeFilter,\n          onRemoveAllFilters,\n          query,\n          filters,\n        },\n        column,\n      )\n    : column;\n};\n\nconst composeRows = (rows, grid) => {\n  const {\n    props: { isDataFiltered, groupedRows },\n    state: { query },\n    composedRows,\n  } = grid.getInstance();\n  const nextRows = !groupedRows ? filterRowsByQuery(rows, query) : filterRowsByQueryGroup(rows, query, composedRows);\n\n  return !isDataFiltered ? nextRows : rows;\n};\n\nexport const FilterablePlugin = createInstancePlugin('filterable', {\n  registerStateHook: useFilterableState,\n  decorateColumn,\n  composeRows,\n  registerHotKeys(grid) {\n    return {\n      key: 'ctrl+f',\n      handler: ({ cellIndex }) => {\n        const { decoratedColumns } = grid.getInstance();\n\n        const column = decoratedColumns[cellIndex];\n        const toggleMenuMethod = get(column, ['filterMenu', 'current', 'toggleMenu']);\n        if (isFunction(toggleMenuMethod)) toggleMenuMethod();\n      },\n    };\n  },\n});\n"],
-  "mappings": "AAAA,YAAY,WAAW;ACCvB,SAAS,KAAK,kBAAkB;AAChC,SAAS,4BAA4B;AACrC,SAAS,yBAAyB;AAElC,OAAO,qBAAqB,8BAA8B;AAC1D,SAAS,0BAA0B;AAEnC,MAAM,iBAAiB,CAAC,QAAQ,SAAS;AACvC,QAAM;AAAA,IACJ,OAAO,EAAE,2BAA2B,CAAC,QAAQ,IAAI,YAAY,mBAAmB;AAAA,IAChF,SAAS,EAAE,WAAW,aAAa;AAAA,IACnC,OAAO,EAAE,OAAO,QAAQ;AAAA,EAC1B,IAAI;AAEJ,SAAO,yBAAyB,MAAM,IAClC;AAAA,IACE;AAAA,MACE;AAAA,MACA,aAAa;AAAA,MACb,gBAAgB;AAAA,MAChB;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,IACA;AAAA,EACF,IACA;AACN;AAEA,MAAM,cAAc,CAAC,MAAM,SAAS;AAClC,QAAM;AAAA,IACJ,OAAO,EAAE,gBAAgB,YAAY;AAAA,IACrC,OAAO,EAAE,MAAM;AAAA,IACf;AAAA,EACF,IAAI,KAAK,YAAY;AACrB,QAAM,WAAW,CAAC,cAAc,kBAAkB,MAAM,KAAK,IAAI,uBAAuB,MAAM,OAAO,YAAY;AAEjH,SAAO,CAAC,iBAAiB,WAAW;AACtC;AAEO,MAAM,mBAAmB,qBAAqB,cAAc;AAAA,EACjE,mBAAmB;AAAA,EACnB;AAAA,EACA;AAAA,EACA,gBAAgB,MAAM;AACpB,WAAO;AAAA,MACL,KAAK;AAAA,MACL,SAAS,CAAC,EAAE,UAAU,MAAM;AAC1B,cAAM,EAAE,iBAAiB,IAAI,KAAK,YAAY;AAE9C,cAAM,SAAS,iBAAiB;AAChC,cAAM,mBAAmB,IAAI,QAAQ,CAAC,cAAc,WAAW,YAAY,CAAC;AAC5E,YAAI,WAAW,gBAAgB;AAAG,2BAAiB;AAAA,MACrD;AAAA,IACF;AAAA,EACF;AACF,CAAC;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable indent */\nimport { get, isFunction } from '@elliemae/ds-utilities';\nimport { createInstancePlugin } from '@elliemae/ds-shared';\nimport { addFilterToColumn } from './addFilterToColumn.js';\nimport filterRowsByQuery, { filterRowsByQueryGroup } from './filtering-helper/filterRowsByQuery.js';\nimport { useFilterableState } from './useFilterableState.js';\n\nconst decorateColumn = (column, grid) => {\n  const {\n    props: { isFilterableColumnActive = (col) => col.searchable, onRemoveAllFilters },\n    actions: { addFilter, removeFilter },\n    state: { query, filters },\n  } = grid;\n\n  return isFilterableColumnActive(column)\n    ? addFilterToColumn(\n        {\n          grid,\n          onAddFilter: addFilter,\n          onRemoveFilter: removeFilter,\n          onRemoveAllFilters,\n          query,\n          filters,\n        },\n        column,\n      )\n    : column;\n};\n\nconst composeRows = (rows, grid) => {\n  const {\n    props: { isDataFiltered, groupedRows },\n    state: { query },\n    composedRows,\n  } = grid.getInstance();\n  const nextRows = !groupedRows ? filterRowsByQuery(rows, query) : filterRowsByQueryGroup(rows, query, composedRows);\n\n  return !isDataFiltered ? nextRows : rows;\n};\n\nexport const FilterablePlugin = createInstancePlugin('filterable', {\n  registerStateHook: useFilterableState,\n  decorateColumn,\n  composeRows,\n  registerHotKeys(grid) {\n    return {\n      key: 'ctrl+f',\n      handler: ({ cellIndex }) => {\n        const { decoratedColumns } = grid.getInstance();\n\n        const column = decoratedColumns[cellIndex];\n        const toggleMenuMethod = get(column, ['filterMenu', 'current', 'toggleMenu']);\n        if (isFunction(toggleMenuMethod)) toggleMenuMethod();\n      },\n    };\n  },\n});\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACCvB,SAAS,KAAK,kBAAkB;AAChC,SAAS,4BAA4B;AACrC,SAAS,yBAAyB;AAClC,OAAO,qBAAqB,8BAA8B;AAC1D,SAAS,0BAA0B;AAEnC,MAAM,iBAAiB,CAAC,QAAQ,SAAS;AACvC,QAAM;AAAA,IACJ,OAAO,EAAE,2BAA2B,CAAC,QAAQ,IAAI,YAAY,mBAAmB;AAAA,IAChF,SAAS,EAAE,WAAW,aAAa;AAAA,IACnC,OAAO,EAAE,OAAO,QAAQ;AAAA,EAC1B,IAAI;AAEJ,SAAO,yBAAyB,MAAM,IAClC;AAAA,IACE;AAAA,MACE;AAAA,MACA,aAAa;AAAA,MACb,gBAAgB;AAAA,MAChB;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,IACA;AAAA,EACF,IACA;AACN;AAEA,MAAM,cAAc,CAAC,MAAM,SAAS;AAClC,QAAM;AAAA,IACJ,OAAO,EAAE,gBAAgB,YAAY;AAAA,IACrC,OAAO,EAAE,MAAM;AAAA,IACf;AAAA,EACF,IAAI,KAAK,YAAY;AACrB,QAAM,WAAW,CAAC,cAAc,kBAAkB,MAAM,KAAK,IAAI,uBAAuB,MAAM,OAAO,YAAY;AAEjH,SAAO,CAAC,iBAAiB,WAAW;AACtC;AAEO,MAAM,mBAAmB,qBAAqB,cAAc;AAAA,EACjE,mBAAmB;AAAA,EACnB;AAAA,EACA;AAAA,EACA,gBAAgB,MAAM;AACpB,WAAO;AAAA,MACL,KAAK;AAAA,MACL,SAAS,CAAC,EAAE,UAAU,MAAM;AAC1B,cAAM,EAAE,iBAAiB,IAAI,KAAK,YAAY;AAE9C,cAAM,SAAS,iBAAiB;AAChC,cAAM,mBAAmB,IAAI,QAAQ,CAAC,cAAc,WAAW,YAAY,CAAC;AAC5E,YAAI,WAAW,gBAAgB;AAAG,2BAAiB;AAAA,MACrD;AAAA,IACF;AAAA,EACF;AACF,CAAC;",
   "names": []
 }

package/dist/esm/plugins/filterable/addFilterToColumn.js

@@ -1,7 +1,7 @@
 import * as React from "react";
 import { createRef } from "react";
 import { mergeClassNameToColumnHeader } from "@elliemae/ds-shared";
-import { FilterableFormatter } from "./filterableFormatter";
+import { FilterableFormatter } from "./filterableFormatter.js";
 const addFilterToColumn = (props, column) => {
   const filterMenuRef = createRef();
   column.header.formatters.push(FilterableFormatter({ ...props, filterMenuRef }));

package/dist/esm/plugins/filterable/addFilterToColumn.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/plugins/filterable/addFilterToColumn.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { createRef } from 'react';\nimport { mergeClassNameToColumnHeader } from '@elliemae/ds-shared';\nimport { FilterableFormatter } from './filterableFormatter';\n\nexport const addFilterToColumn = (props, column) => {\n  const filterMenuRef = createRef();\n  column.header.formatters.push(FilterableFormatter({ ...props, filterMenuRef }));\n  column.filterMenu = filterMenuRef;\n  return mergeClassNameToColumnHeader('with-filtering', column);\n};\n"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { createRef } from 'react';\nimport { mergeClassNameToColumnHeader } from '@elliemae/ds-shared';\nimport { FilterableFormatter } from './filterableFormatter.js';\n\nexport const addFilterToColumn = (props, column) => {\n  const filterMenuRef = createRef();\n  column.header.formatters.push(FilterableFormatter({ ...props, filterMenuRef }));\n  column.filterMenu = filterMenuRef;\n  return mergeClassNameToColumnHeader('with-filtering', column);\n};\n"],
   "mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,iBAAiB;AAC1B,SAAS,oCAAoC;AAC7C,SAAS,2BAA2B;AAE7B,MAAM,oBAAoB,CAAC,OAAO,WAAW;AAClD,QAAM,gBAAgB,UAAU;AAChC,SAAO,OAAO,WAAW,KAAK,oBAAoB,EAAE,GAAG,OAAO,cAAc,CAAC,CAAC;AAC9E,SAAO,aAAa;AACpB,SAAO,6BAA6B,kBAAkB,MAAM;AAC9D;",
   "names": []
 }

package/dist/esm/plugins/filterable/components/FilterableHeader.js

@@ -5,7 +5,7 @@ import PropTypes from "prop-types";
 import { aggregatedClasses } from "@elliemae/ds-classnames";
 import { get, debounce, useResizeObserver } from "@elliemae/ds-utilities";
 import { useTheme } from "@elliemae/ds-system";
-import { getFilterMenuByType } from "./filterable-menus/getFilterMenuByType";
+import { getFilterMenuByType } from "./filterable-menus/getFilterMenuByType.js";
 const blockName = "data-grid-filter-header";
 const Container = aggregatedClasses("div")(blockName, null, ({ showFilter }) => ({
   "show-filter": showFilter

package/dist/esm/plugins/filterable/components/FilterableHeader.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../scripts/build/transpile/react-shim.js", "../../../../../src/plugins/filterable/components/FilterableHeader.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable no-param-reassign */\nimport React, { useCallback, useEffect, useState } from 'react';\nimport PropTypes from 'prop-types';\nimport { aggregatedClasses } from '@elliemae/ds-classnames';\nimport { get, debounce, useResizeObserver} from '@elliemae/ds-utilities';\nimport { useTheme } from '@elliemae/ds-system';\nimport { getFilterMenuByType } from './filterable-menus/getFilterMenuByType';\n\nconst blockName = 'data-grid-filter-header';\n\nconst Container = aggregatedClasses('div')(blockName, null, ({ showFilter }) => ({\n  'show-filter': showFilter,\n}));\nconst FilterHeaderValue = aggregatedClasses('div')(blockName, 'value');\nconst FilterHeaderButton = aggregatedClasses('div')(blockName, 'button');\n\nexport const FilterableHeader = ({\n  column,\n  value,\n  columnData,\n  onAddFilter,\n  onRemoveFilter,\n  filterMenuRef,\n  onFilterMenuClose,\n  onFilterMenuOpen,\n  filters,\n  isMulti,\n}) => {\n  const [isMenuOpened, setMenuOpened] = useState(false);\n  const [headerWidth, setHeaderWidth] = useState();\n  const debouncedWidthSetter = debounce(setHeaderWidth, 200);\n  const { filterMenuMinWidth, filterMenuMaxWidth } = column;\n  const theme = useTheme();\n  const dropdownMinWidth = filterMenuMinWidth || Number(theme.space.xl.replace('px', '')) * 2;\n\n  const defineHeaderWidth = ({ width }) => {\n    let nextWidth = width + 16; // todo: use dimsum space once we convert it to JS\n    if (nextWidth < dropdownMinWidth) nextWidth = dropdownMinWidth;\n    if (filterMenuMaxWidth && nextWidth > filterMenuMaxWidth) nextWidth = filterMenuMaxWidth;\n    return !isMenuOpened ? debouncedWidthSetter(nextWidth) : setHeaderWidth(nextWidth);\n  };\n\n  useEffect(() => {\n    if (filterMenuRef) {\n      filterMenuRef.current = {\n        toggleMenu: () => setMenuOpened((prevState) => !prevState),\n      };\n    }\n  }, [filterMenuRef]);\n\n  useEffect(() => {\n    if (!isMenuOpened) onFilterMenuClose(column);\n    else onFilterMenuOpen(column);\n  });\n\n  const [ref] = useResizeObserver(defineHeaderWidth);\n  const handleOpenMenu = useCallback((open) => {\n    setMenuOpened(open);\n    if (open) onFilterMenuOpen();\n  }, []);\n  const FilterMenuComponent = getFilterMenuByType(get(column, ['filter', 'type']));\n  return (\n    <Container ref={ref} classProps={{ showFilter: isMenuOpened }}>\n      <FilterHeaderValue className=\"header-value\">{value}</FilterHeaderValue>\n      <FilterHeaderButton data-testid=\"data-grid-filter-header__button\">\n        <FilterMenuComponent\n          className=\"filter-header-menu\"\n          column={column}\n          filters={filters}\n          isMenuOpened={isMenuOpened}\n          isMulti={isMulti}\n          menuProps={{\n            options: columnData || [],\n            style: { minWidth: headerWidth, maxWidth: filterMenuMaxWidth },\n            zIndex: 100,\n          }}\n          onAddFilter={onAddFilter}\n          onRemoveFilter={onRemoveFilter}\n          onOpenMenu={handleOpenMenu}\n          onClose={onFilterMenuClose}\n          width={headerWidth}\n          {...get(column, ['filter'], {})}\n        />\n      </FilterHeaderButton>\n    </Container>\n  );\n}\n\nFilterableHeader.propTypes = {\n  column: PropTypes.any,\n  value: PropTypes.any,\n  columnData: PropTypes.any,\n  onAddFilter: PropTypes.func,\n  onRemoveFilter: PropTypes.func,\n  filterMenuRef: PropTypes.any,\n  onFilterMenuClose: PropTypes.func,\n  onFilterMenuOpen: PropTypes.func,\n  filters: PropTypes.arrayOf(PropTypes.shape({})),\n  isMulti: PropTypes.bool,\n};\n\nexport default FilterableHeader;\n"],
-  "mappings": "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",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable no-param-reassign */\nimport React, { useCallback, useEffect, useState } from 'react';\nimport PropTypes from 'prop-types';\nimport { aggregatedClasses } from '@elliemae/ds-classnames';\nimport { get, debounce, useResizeObserver } from '@elliemae/ds-utilities';\nimport { useTheme } from '@elliemae/ds-system';\nimport { getFilterMenuByType } from './filterable-menus/getFilterMenuByType.js';\n\nconst blockName = 'data-grid-filter-header';\n\nconst Container = aggregatedClasses('div')(blockName, null, ({ showFilter }) => ({\n  'show-filter': showFilter,\n}));\nconst FilterHeaderValue = aggregatedClasses('div')(blockName, 'value');\nconst FilterHeaderButton = aggregatedClasses('div')(blockName, 'button');\n\nexport const FilterableHeader = ({\n  column,\n  value,\n  columnData,\n  onAddFilter,\n  onRemoveFilter,\n  filterMenuRef,\n  onFilterMenuClose,\n  onFilterMenuOpen,\n  filters,\n  isMulti,\n}) => {\n  const [isMenuOpened, setMenuOpened] = useState(false);\n  const [headerWidth, setHeaderWidth] = useState();\n  const debouncedWidthSetter = debounce(setHeaderWidth, 200);\n  const { filterMenuMinWidth, filterMenuMaxWidth } = column;\n  const theme = useTheme();\n  const dropdownMinWidth = filterMenuMinWidth || Number(theme.space.xl.replace('px', '')) * 2;\n\n  const defineHeaderWidth = ({ width }) => {\n    let nextWidth = width + 16; // todo: use dimsum space once we convert it to JS\n    if (nextWidth < dropdownMinWidth) nextWidth = dropdownMinWidth;\n    if (filterMenuMaxWidth && nextWidth > filterMenuMaxWidth) nextWidth = filterMenuMaxWidth;\n    return !isMenuOpened ? debouncedWidthSetter(nextWidth) : setHeaderWidth(nextWidth);\n  };\n\n  useEffect(() => {\n    if (filterMenuRef) {\n      filterMenuRef.current = {\n        toggleMenu: () => setMenuOpened((prevState) => !prevState),\n      };\n    }\n  }, [filterMenuRef]);\n\n  useEffect(() => {\n    if (!isMenuOpened) onFilterMenuClose(column);\n    else onFilterMenuOpen(column);\n  });\n\n  const [ref] = useResizeObserver(defineHeaderWidth);\n  const handleOpenMenu = useCallback((open) => {\n    setMenuOpened(open);\n    if (open) onFilterMenuOpen();\n  }, []);\n  const FilterMenuComponent = getFilterMenuByType(get(column, ['filter', 'type']));\n  return (\n    <Container ref={ref} classProps={{ showFilter: isMenuOpened }}>\n      <FilterHeaderValue className=\"header-value\">{value}</FilterHeaderValue>\n      <FilterHeaderButton data-testid=\"data-grid-filter-header__button\">\n        <FilterMenuComponent\n          className=\"filter-header-menu\"\n          column={column}\n          filters={filters}\n          isMenuOpened={isMenuOpened}\n          isMulti={isMulti}\n          menuProps={{\n            options: columnData || [],\n            style: { minWidth: headerWidth, maxWidth: filterMenuMaxWidth },\n            zIndex: 100,\n          }}\n          onAddFilter={onAddFilter}\n          onRemoveFilter={onRemoveFilter}\n          onOpenMenu={handleOpenMenu}\n          onClose={onFilterMenuClose}\n          width={headerWidth}\n          {...get(column, ['filter'], {})}\n        />\n      </FilterHeaderButton>\n    </Container>\n  );\n};\n\nFilterableHeader.propTypes = {\n  column: PropTypes.any,\n  value: PropTypes.any,\n  columnData: PropTypes.any,\n  onAddFilter: PropTypes.func,\n  onRemoveFilter: PropTypes.func,\n  filterMenuRef: PropTypes.any,\n  onFilterMenuClose: PropTypes.func,\n  onFilterMenuOpen: PropTypes.func,\n  filters: PropTypes.arrayOf(PropTypes.shape({})),\n  isMulti: PropTypes.bool,\n};\n\nexport default FilterableHeader;\n"],
+  "mappings": "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",
   "names": []
 }

package/dist/esm/plugins/filterable/components/filterable-menus/DateRangeFilterMenu.js

@@ -8,7 +8,7 @@ import { DatePicker2 } from "@elliemae/ds-icons";
 import { DSButton } from "@elliemae/ds-button";
 import moment from "moment";
 import { aggregatedClasses } from "@elliemae/ds-classnames";
-import { DEFAULT_DATE_FORMAT } from "./defaultDateFormat";
+import { DEFAULT_DATE_FORMAT } from "./defaultDateFormat.js";
 const blockname = "date-range";
 const Wrapper = aggregatedClasses("div")(blockname, "wrapper");
 const Header = aggregatedClasses("div")(blockname, "header");
@@ -76,7 +76,7 @@ const formatRangeDate = ({ startDate, endDate }, format = DEFAULT_DATE_FORMAT) =
     return `${endDate.format(format)}`;
   return `${startDate.format(format)} - ${endDate.format(format)}`;
 };
-function DateRangeFilterMenu({
+const DateRangeFilterMenu = ({
   column,
   className,
   isMenuOpened = false,
@@ -86,51 +86,49 @@ function DateRangeFilterMenu({
   dateFormatter = formatRangeDate,
   showHeader = true,
   menuProps
-}) {
-  return /* @__PURE__ */ jsx(
-    DSPopper,
-    {
-      contentComponent: /* @__PURE__ */ jsx("div", { className, children: /* @__PURE__ */ jsx(
-        DateRangePickerContainer,
-        {
-          minimumNights: 0,
-          onChange: ({ startDate, endDate }) => {
-            startDate.startOf("day");
-            endDate.endOf("day");
-            onAddFilter(
-              {
-                group: column.property,
-                label: column.label,
-                value: dateFormatter({ startDate, endDate }),
-                type: "date",
-                filterParams: { start: startDate, end: endDate },
-                transformRowValue: (value) => moment(value, column.dateFormat || DEFAULT_DATE_FORMAT),
-                operator: "range"
-              },
-              column
-            );
-            onOpenMenu(false);
-          },
-          showHeader
-        }
-      ) }),
-      isOpen: isMenuOpened,
-      onOpen: onOpenMenu,
-      placement,
-      showArrow: false,
-      triggerComponent: /* @__PURE__ */ jsx(
-        DSButton,
-        {
-          buttonType: "text",
-          icon: /* @__PURE__ */ jsx(DatePicker2, {}),
-          onClick: () => !isMenuOpened ? onOpenMenu(true) : onOpenMenu(false),
-          size: "s"
-        }
-      ),
-      zIndex: menuProps.zIndex
-    }
-  );
-}
+}) => /* @__PURE__ */ jsx(
+  DSPopper,
+  {
+    contentComponent: /* @__PURE__ */ jsx("div", { className, children: /* @__PURE__ */ jsx(
+      DateRangePickerContainer,
+      {
+        minimumNights: 0,
+        onChange: ({ startDate, endDate }) => {
+          startDate.startOf("day");
+          endDate.endOf("day");
+          onAddFilter(
+            {
+              group: column.property,
+              label: column.label,
+              value: dateFormatter({ startDate, endDate }),
+              type: "date",
+              filterParams: { start: startDate, end: endDate },
+              transformRowValue: (value) => moment(value, column.dateFormat || DEFAULT_DATE_FORMAT),
+              operator: "range"
+            },
+            column
+          );
+          onOpenMenu(false);
+        },
+        showHeader
+      }
+    ) }),
+    isOpen: isMenuOpened,
+    onOpen: onOpenMenu,
+    placement,
+    showArrow: false,
+    triggerComponent: /* @__PURE__ */ jsx(
+      DSButton,
+      {
+        buttonType: "text",
+        icon: /* @__PURE__ */ jsx(DatePicker2, {}),
+        onClick: () => !isMenuOpened ? onOpenMenu(true) : onOpenMenu(false),
+        size: "s"
+      }
+    ),
+    zIndex: menuProps.zIndex
+  }
+);
 DateRangeFilterMenu.propTypes = {
   column: PropTypes.any,
   className: PropTypes.string,