npm - @elliemae/ds-data-table - Versions diffs - 3.15.0 → 3.16.0-next.10 - Mend

@elliemae/ds-data-table 3.15.0 → 3.16.0-next.10

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

Files changed (481) hide show

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

@@ -1,8 +1,8 @@
 import * as React from "react";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { styled } from "@elliemae/ds-system";
-import { ZIndexDataTable } from "../configs/zIndexInternalConfig";
-import { DropIndicatorPosition } from "../types/props";
+import { ZIndexDataTable } from "../configs/zIndexInternalConfig.js";
+import { DropIndicatorPosition } from "../types/props.js";
 const getPositionStyles = ({ dropIndicatorPosition, vertical }) => {
   if (vertical) {
     return `

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/parts/DropIndicator.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React from 'react';\nimport { styled } from '@elliemae/ds-system';\nimport { ZIndexDataTable } from '../configs/zIndexInternalConfig';\nimport { DropIndicatorPosition } from '../types/props';\n\ninterface DropIndicatorProps {\n  vertical: boolean;\n  dropIndicatorPosition: false | DropIndicatorPosition;\n  isDropValid: boolean;\n  isLast?: boolean;\n}\n\nconst getPositionStyles = ({ dropIndicatorPosition, vertical }: DropIndicatorProps) => {\n  if (vertical) {\n    return `\n      left: ${dropIndicatorPosition === DropIndicatorPosition.Before ? '0' : 'unset'};\n      right: ${dropIndicatorPosition === DropIndicatorPosition.After ? '0' : 'unset'};\n    `;\n  }\n  return `\n      top: ${dropIndicatorPosition === DropIndicatorPosition.Before ? '0' : 'unset'};\n      bottom: ${dropIndicatorPosition === DropIndicatorPosition.After ? '0' : 'unset'};\n    `;\n};\n\nconst getCircleStyles = ({ dropIndicatorPosition, vertical }: DropIndicatorProps) => ({\n  position: 'absolute',\n  zIndex: ZIndexDataTable.DROP_INDICATOR,\n  top: vertical || dropIndicatorPosition === DropIndicatorPosition.After ? 'unset' : '-2px',\n  bottom: vertical || dropIndicatorPosition === DropIndicatorPosition.Before ? 'unset' : '-2px',\n  left: !vertical || dropIndicatorPosition === DropIndicatorPosition.After ? 'unset' : '-2px',\n  right: !vertical || dropIndicatorPosition === DropIndicatorPosition.Before ? 'unset' : '-2px',\n  opacity: 1,\n});\n\nconst StyledIndicator = styled.div<DropIndicatorProps>`\n  position: absolute;\n  ${getPositionStyles}\n  box-sizing: border-box;\n  width: ${(props) => (props.vertical ? '2px' : '100%')};\n  height: ${(props) => (props.vertical ? '100%' : '2px')};\n  background-color: ${({ isDropValid, theme }) => (isDropValid ? theme.colors.brand[600] : theme.colors.danger[900])};\n  z-index: ${ZIndexDataTable.DROP_INDICATOR};\n`;\n\nconst CircleIndicator = (style: Record<string, unknown>, isDropValid: boolean) => (\n  <svg height=\"6\" width=\"6\" style={style}>\n    <circle cx=\"3\" cy=\"3\" r=\"3\" strokeWidth=\"0\" fill={isDropValid ? '#1E79C2' : '#C64252'} />\n  </svg>\n);\n\nconst DropIndicator: React.ComponentType<DropIndicatorProps> = (props) => {\n  const { vertical, dropIndicatorPosition, isLast, isDropValid } = props;\n  if (\n    dropIndicatorPosition === false ||\n    ![DropIndicatorPosition.After, DropIndicatorPosition.Before].includes(dropIndicatorPosition)\n  )\n    return null;\n\n  const safeDropIndicatorPosition = isLast ? DropIndicatorPosition.Before : dropIndicatorPosition;\n\n  return (\n    <>\n      {CircleIndicator(getCircleStyles({ ...props, dropIndicatorPosition: safeDropIndicatorPosition }), isDropValid)}\n      <StyledIndicator\n        vertical={vertical}\n        dropIndicatorPosition={safeDropIndicatorPosition}\n        isDropValid={isDropValid}\n      />\n    </>\n  );\n};\n\nexport { DropIndicator };\n"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React from 'react';\nimport { styled } from '@elliemae/ds-system';\nimport { ZIndexDataTable } from '../configs/zIndexInternalConfig.js';\nimport { DropIndicatorPosition } from '../types/props.js';\n\ninterface DropIndicatorProps {\n  vertical: boolean;\n  dropIndicatorPosition: false | DropIndicatorPosition;\n  isDropValid: boolean;\n  isLast?: boolean;\n}\n\nconst getPositionStyles = ({ dropIndicatorPosition, vertical }: DropIndicatorProps) => {\n  if (vertical) {\n    return `\n      left: ${dropIndicatorPosition === DropIndicatorPosition.Before ? '0' : 'unset'};\n      right: ${dropIndicatorPosition === DropIndicatorPosition.After ? '0' : 'unset'};\n    `;\n  }\n  return `\n      top: ${dropIndicatorPosition === DropIndicatorPosition.Before ? '0' : 'unset'};\n      bottom: ${dropIndicatorPosition === DropIndicatorPosition.After ? '0' : 'unset'};\n    `;\n};\n\nconst getCircleStyles = ({ dropIndicatorPosition, vertical }: DropIndicatorProps) => ({\n  position: 'absolute',\n  zIndex: ZIndexDataTable.DROP_INDICATOR,\n  top: vertical || dropIndicatorPosition === DropIndicatorPosition.After ? 'unset' : '-2px',\n  bottom: vertical || dropIndicatorPosition === DropIndicatorPosition.Before ? 'unset' : '-2px',\n  left: !vertical || dropIndicatorPosition === DropIndicatorPosition.After ? 'unset' : '-2px',\n  right: !vertical || dropIndicatorPosition === DropIndicatorPosition.Before ? 'unset' : '-2px',\n  opacity: 1,\n});\n\nconst StyledIndicator = styled.div<DropIndicatorProps>`\n  position: absolute;\n  ${getPositionStyles}\n  box-sizing: border-box;\n  width: ${(props) => (props.vertical ? '2px' : '100%')};\n  height: ${(props) => (props.vertical ? '100%' : '2px')};\n  background-color: ${({ isDropValid, theme }) => (isDropValid ? theme.colors.brand[600] : theme.colors.danger[900])};\n  z-index: ${ZIndexDataTable.DROP_INDICATOR};\n`;\n\nconst CircleIndicator = (style: Record<string, unknown>, isDropValid: boolean) => (\n  <svg height=\"6\" width=\"6\" style={style}>\n    <circle cx=\"3\" cy=\"3\" r=\"3\" strokeWidth=\"0\" fill={isDropValid ? '#1E79C2' : '#C64252'} />\n  </svg>\n);\n\nconst DropIndicator: React.ComponentType<DropIndicatorProps> = (props) => {\n  const { vertical, dropIndicatorPosition, isLast, isDropValid } = props;\n  if (\n    dropIndicatorPosition === false ||\n    ![DropIndicatorPosition.After, DropIndicatorPosition.Before].includes(dropIndicatorPosition)\n  )\n    return null;\n\n  const safeDropIndicatorPosition = isLast ? DropIndicatorPosition.Before : dropIndicatorPosition;\n\n  return (\n    <>\n      {CircleIndicator(getCircleStyles({ ...props, dropIndicatorPosition: safeDropIndicatorPosition }), isDropValid)}\n      <StyledIndicator\n        vertical={vertical}\n        dropIndicatorPosition={safeDropIndicatorPosition}\n        isDropValid={isDropValid}\n      />\n    </>\n  );\n};\n\nexport { DropIndicator };\n"],
   "mappings": "AAAA,YAAY,WAAW;AC+CnB,SAeA,UAfA,KAeA,YAfA;AA9CJ,SAAS,cAAc;AACvB,SAAS,uBAAuB;AAChC,SAAS,6BAA6B;AAStC,MAAM,oBAAoB,CAAC,EAAE,uBAAuB,SAAS,MAA0B;AACrF,MAAI,UAAU;AACZ,WAAO;AAAA,cACG,0BAA0B,sBAAsB,SAAS,MAAM;AAAA,eAC9D,0BAA0B,sBAAsB,QAAQ,MAAM;AAAA;AAAA,EAE3E;AACA,SAAO;AAAA,aACI,0BAA0B,sBAAsB,SAAS,MAAM;AAAA,gBAC5D,0BAA0B,sBAAsB,QAAQ,MAAM;AAAA;AAE9E;AAEA,MAAM,kBAAkB,CAAC,EAAE,uBAAuB,SAAS,OAA2B;AAAA,EACpF,UAAU;AAAA,EACV,QAAQ,gBAAgB;AAAA,EACxB,KAAK,YAAY,0BAA0B,sBAAsB,QAAQ,UAAU;AAAA,EACnF,QAAQ,YAAY,0BAA0B,sBAAsB,SAAS,UAAU;AAAA,EACvF,MAAM,CAAC,YAAY,0BAA0B,sBAAsB,QAAQ,UAAU;AAAA,EACrF,OAAO,CAAC,YAAY,0BAA0B,sBAAsB,SAAS,UAAU;AAAA,EACvF,SAAS;AACX;AAEA,MAAM,kBAAkB,OAAO;AAAA;AAAA,IAE3B;AAAA;AAAA,WAEO,CAAC,UAAW,MAAM,WAAW,QAAQ;AAAA,YACpC,CAAC,UAAW,MAAM,WAAW,SAAS;AAAA,sBAC5B,CAAC,EAAE,aAAa,MAAM,MAAO,cAAc,MAAM,OAAO,MAAM,OAAO,MAAM,OAAO,OAAO;AAAA,aAClG,gBAAgB;AAAA;AAG7B,MAAM,kBAAkB,CAAC,OAAgC,gBACvD,oBAAC,SAAI,QAAO,KAAI,OAAM,KAAI,OACxB,8BAAC,YAAO,IAAG,KAAI,IAAG,KAAI,GAAE,KAAI,aAAY,KAAI,MAAM,cAAc,YAAY,WAAW,GACzF;AAGF,MAAM,gBAAyD,CAAC,UAAU;AACxE,QAAM,EAAE,UAAU,uBAAuB,QAAQ,YAAY,IAAI;AACjE,MACE,0BAA0B,SAC1B,CAAC,CAAC,sBAAsB,OAAO,sBAAsB,MAAM,EAAE,SAAS,qBAAqB;AAE3F,WAAO;AAET,QAAM,4BAA4B,SAAS,sBAAsB,SAAS;AAE1E,SACE,iCACG;AAAA,oBAAgB,gBAAgB,EAAE,GAAG,OAAO,uBAAuB,0BAA0B,CAAC,GAAG,WAAW;AAAA,IAC7G;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA,uBAAuB;AAAA,QACvB;AAAA;AAAA,IACF;AAAA,KACF;AAEJ;",
   "names": []
 }

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

@@ -5,7 +5,7 @@ import { Grid } from "@elliemae/ds-grid";
 import { WarningTriangle } from "@elliemae/ds-icons";
 import { __UNSAFE_SPACE_TO_DIMSUM, toMobile, styled } from "@elliemae/ds-system";
 import { DSButton } from "@elliemae/ds-button";
-import { DataTableContext } from "../DataTableContext";
+import { DataTableContext } from "../DataTableContext.js";
 const EmptyStateWrapper = styled(Grid)`
   position: sticky;
   height: fit-content;

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

@@ -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, styled } from '@elliemae/ds-system';\nimport { DSButton } from '@elliemae/ds-button';\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\nexport { EmptyContent };\n"],
-  "mappings": "AAAA,YAAY,WAAW;AC0DZ,cAIL,YAJK;AA1DX,OAAOA,UAAS,kBAAkB;AAClC,SAAS,YAAY;AACrB,SAAS,uBAAuB;AAChC,SAAS,0BAA0B,UAAU,cAAc;AAC3D,SAAS,gBAAgB;AAEzB,SAAS,wBAAwB;AAEjC,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,MAAM,MAAM;AAAA;AAAA;AAAA;AAAA;AAM1B,MAAM,eAAgE,CAAC,EAAE,MAAM,MAAM;AACnF,QAAM;AAAA,IACJ,YAAY;AAAA,MACV;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,IACA;AAAA,EACF,IAAI,WAAW,gBAAgB;AAE/B,MAAIA,OAAM,eAAe,oBAAoB;AAC3C,WAAO,oBAAC,4BAAyB,OAAe,gCAAqB;AAEvE,SACE,oBAAC,4BAAyB,OAAc,aAAU,aAAY,MAAK,UACjE,+BAAC,qBAAkB,OAAO,eAAe,SAAS,aAAa,gBAAe,UAC5E;AAAA,wBAAC,QAAK,MAAK,OAAM;AAAA,IACjB,oBAAC,kBAAgB,4BAAiB;AAAA,IACjC,4BAA4B,oBAAC,oBAAkB,qCAA0B,IAAsB;AAAA,IAC/F,wBAAwB,yBACvB,oBAAC,UAAO,YAAW,aAAY,WAAW,sBAAsB,SAAS,wBAAwB,IAC/F;AAAA,KACN,GACF;AAEJ;",
+  "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, styled } from '@elliemae/ds-system';\nimport { DSButton } from '@elliemae/ds-button';\nimport { DataTableContext } from '../DataTableContext.js';\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\nexport { EmptyContent };\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACyDZ,cAIL,YAJK;AAzDX,OAAOA,UAAS,kBAAkB;AAClC,SAAS,YAAY;AACrB,SAAS,uBAAuB;AAChC,SAAS,0BAA0B,UAAU,cAAc;AAC3D,SAAS,gBAAgB;AACzB,SAAS,wBAAwB;AAEjC,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,MAAM,MAAM;AAAA;AAAA;AAAA;AAAA;AAM1B,MAAM,eAAgE,CAAC,EAAE,MAAM,MAAM;AACnF,QAAM;AAAA,IACJ,YAAY;AAAA,MACV;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,IACA;AAAA,EACF,IAAI,WAAW,gBAAgB;AAE/B,MAAIA,OAAM,eAAe,oBAAoB;AAC3C,WAAO,oBAAC,4BAAyB,OAAe,gCAAqB;AAEvE,SACE,oBAAC,4BAAyB,OAAc,aAAU,aAAY,MAAK,UACjE,+BAAC,qBAAkB,OAAO,eAAe,SAAS,aAAa,gBAAe,UAC5E;AAAA,wBAAC,QAAK,MAAK,OAAM;AAAA,IACjB,oBAAC,kBAAgB,4BAAiB;AAAA,IACjC,4BAA4B,oBAAC,oBAAkB,qCAA0B,IAAsB;AAAA,IAC/F,wBAAwB,yBACvB,oBAAC,UAAO,YAAW,aAAY,WAAW,sBAAsB,SAAS,wBAAwB,IAC/F;AAAA,KACN,GACF;AAEJ;",
   "names": ["React"]
 }

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

@@ -3,7 +3,7 @@ import { jsx, jsxs } from "react/jsx-runtime";
 import React2, { useCallback, useContext, useMemo, useRef, useState } from "react";
 import { DSButtonV2 } from "@elliemae/ds-button";
 import { MoreOptionsVert } from "@elliemae/ds-icons";
-import { FILTER_TYPES } from "../../exported-related";
+import { FILTER_TYPES } from "../../exported-related/index.js";
 import {
   SelectPill,
   MultiSelectPill,
@@ -11,10 +11,10 @@ import {
   DateRangePill,
   NumberRangePill,
   DateSwitcherPill
-} from "./components";
-import { DataTableContext } from "../../DataTableContext";
-import { StyledDropdownMenu, StyledWrapper } from "./styled";
-import { DATA_TESTID } from "../../configs/constants";
+} from "./components/index.js";
+import { DataTableContext } from "../../DataTableContext.js";
+import { StyledDropdownMenu, StyledWrapper } from "./styled.js";
+import { DATA_TESTID } from "../../configs/constants.js";
 const pillRenderMapper = {
   [FILTER_TYPES.SELECT]: SelectPill,
   [FILTER_TYPES.MULTI_SELECT]: MultiSelectPill,

package/dist/esm/parts/FilterBar/FiltersBar.js.map CHANGED Viewed

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

package/dist/esm/parts/FilterBar/components/DateRangePill.js.map CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../scripts/build/transpile/react-shim.js", "../../../../../src/parts/FilterBar/components/DateRangePill.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { useCallback } from 'react';\nimport { DSPillGroupV2, DSPillV2 } from '@elliemae/ds-pills';\nimport type { FilterPillComponent } from '../types';\n\nconst format = (value: string) => value?.replace(/-/g, '/');\n\nexport const DateRangePill: FilterPillComponent<{ startDate: string; endDate: string }> = ({\n  columnHeader,\n  column,\n  value,\n  filters,\n  onFiltersChange,\n  prevRef,\n  innerRef,\n  nextRef,\n}) => {\n  const handleOnRemove = useCallback(() => {\n    if (prevRef?.current) prevRef.current.focus();\n    else nextRef.current?.focus();\n    onFiltersChange(filters.filter((filter) => filter.id !== column));\n  }, [onFiltersChange, filters, prevRef, nextRef, column]);\n\n  return value?.startDate && value?.endDate ? (\n    <DSPillGroupV2>\n      <DSPillV2 type=\"label\" label={columnHeader} />\n      <DSPillV2\n        type=\"removable\"\n        label={`${format(value.startDate)} - ${format(value.endDate)}`}\n        onRemove={handleOnRemove}\n        innerRef={innerRef}\n      />\n    </DSPillGroupV2>\n  ) : null;\n};\n"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { useCallback } from 'react';\nimport { DSPillGroupV2, DSPillV2 } from '@elliemae/ds-pills';\nimport type { FilterPillComponent } from '../types.js';\n\nconst format = (value: string) => value?.replace(/-/g, '/');\n\nexport const DateRangePill: FilterPillComponent<{ startDate: string; endDate: string }> = ({\n  columnHeader,\n  column,\n  value,\n  filters,\n  onFiltersChange,\n  prevRef,\n  innerRef,\n  nextRef,\n}) => {\n  const handleOnRemove = useCallback(() => {\n    if (prevRef?.current) prevRef.current.focus();\n    else nextRef.current?.focus();\n    onFiltersChange(filters.filter((filter) => filter.id !== column));\n  }, [onFiltersChange, filters, prevRef, nextRef, column]);\n\n  return value?.startDate && value?.endDate ? (\n    <DSPillGroupV2>\n      <DSPillV2 type=\"label\" label={columnHeader} />\n      <DSPillV2\n        type=\"removable\"\n        label={`${format(value.startDate)} - ${format(value.endDate)}`}\n        onRemove={handleOnRemove}\n        innerRef={innerRef}\n      />\n    </DSPillGroupV2>\n  ) : null;\n};\n"],
   "mappings": "AAAA,YAAY,WAAW;ACuBnB,SACE,KADF;AAvBJ,SAAgB,mBAAmB;AACnC,SAAS,eAAe,gBAAgB;AAGxC,MAAM,SAAS,CAAC,UAAkB,OAAO,QAAQ,MAAM,GAAG;AAEnD,MAAM,gBAA6E,CAAC;AAAA,EACzF;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,MAAM;AACJ,QAAM,iBAAiB,YAAY,MAAM;AACvC,QAAI,SAAS;AAAS,cAAQ,QAAQ,MAAM;AAAA;AACvC,cAAQ,SAAS,MAAM;AAC5B,oBAAgB,QAAQ,OAAO,CAAC,WAAW,OAAO,OAAO,MAAM,CAAC;AAAA,EAClE,GAAG,CAAC,iBAAiB,SAAS,SAAS,SAAS,MAAM,CAAC;AAEvD,SAAO,OAAO,aAAa,OAAO,UAChC,qBAAC,iBACC;AAAA,wBAAC,YAAS,MAAK,SAAQ,OAAO,cAAc;AAAA,IAC5C;AAAA,MAAC;AAAA;AAAA,QACC,MAAK;AAAA,QACL,OAAO,GAAG,OAAO,MAAM,SAAS,OAAO,OAAO,MAAM,OAAO;AAAA,QAC3D,UAAU;AAAA,QACV;AAAA;AAAA,IACF;AAAA,KACF,IACE;AACN;",
   "names": []
 }

package/dist/esm/parts/FilterBar/components/DateSwitcherPill.js.map CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../scripts/build/transpile/react-shim.js", "../../../../../src/parts/FilterBar/components/DateSwitcherPill.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { useCallback } from 'react';\nimport { DSPillGroupV2, DSPillV2 } from '@elliemae/ds-pills';\nimport type { FilterPillComponent } from '../types';\n\nconst format = (value: string) => value?.replace(/-/g, '/');\n\nexport const DateSwitcherPill: FilterPillComponent<{ startDate: string; endDate: string; isDateRange: boolean }> = ({\n  columnHeader,\n  column,\n  value,\n  filters,\n  onFiltersChange,\n  prevRef,\n  innerRef,\n  nextRef,\n}) => {\n  const handleOnRemove = useCallback(() => {\n    if (prevRef?.current) prevRef.current.focus();\n    else nextRef.current?.focus();\n    onFiltersChange(filters.filter((filter) => filter.id !== column));\n  }, [onFiltersChange, filters, prevRef, nextRef, column]);\n\n  return value?.startDate && value?.endDate ? (\n    <DSPillGroupV2>\n      <DSPillV2 type=\"label\" label={columnHeader} />\n      <DSPillV2\n        type=\"removable\"\n        label={value.isDateRange ? `${format(value.startDate)} - ${format(value.endDate)}` : format(value.startDate)}\n        onRemove={handleOnRemove}\n        innerRef={innerRef}\n      />\n    </DSPillGroupV2>\n  ) : null;\n};\n"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { useCallback } from 'react';\nimport { DSPillGroupV2, DSPillV2 } from '@elliemae/ds-pills';\nimport type { FilterPillComponent } from '../types.js';\n\nconst format = (value: string) => value?.replace(/-/g, '/');\n\nexport const DateSwitcherPill: FilterPillComponent<{ startDate: string; endDate: string; isDateRange: boolean }> = ({\n  columnHeader,\n  column,\n  value,\n  filters,\n  onFiltersChange,\n  prevRef,\n  innerRef,\n  nextRef,\n}) => {\n  const handleOnRemove = useCallback(() => {\n    if (prevRef?.current) prevRef.current.focus();\n    else nextRef.current?.focus();\n    onFiltersChange(filters.filter((filter) => filter.id !== column));\n  }, [onFiltersChange, filters, prevRef, nextRef, column]);\n\n  return value?.startDate && value?.endDate ? (\n    <DSPillGroupV2>\n      <DSPillV2 type=\"label\" label={columnHeader} />\n      <DSPillV2\n        type=\"removable\"\n        label={value.isDateRange ? `${format(value.startDate)} - ${format(value.endDate)}` : format(value.startDate)}\n        onRemove={handleOnRemove}\n        innerRef={innerRef}\n      />\n    </DSPillGroupV2>\n  ) : null;\n};\n"],
   "mappings": "AAAA,YAAY,WAAW;ACuBnB,SACE,KADF;AAvBJ,SAAgB,mBAAmB;AACnC,SAAS,eAAe,gBAAgB;AAGxC,MAAM,SAAS,CAAC,UAAkB,OAAO,QAAQ,MAAM,GAAG;AAEnD,MAAM,mBAAsG,CAAC;AAAA,EAClH;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,MAAM;AACJ,QAAM,iBAAiB,YAAY,MAAM;AACvC,QAAI,SAAS;AAAS,cAAQ,QAAQ,MAAM;AAAA;AACvC,cAAQ,SAAS,MAAM;AAC5B,oBAAgB,QAAQ,OAAO,CAAC,WAAW,OAAO,OAAO,MAAM,CAAC;AAAA,EAClE,GAAG,CAAC,iBAAiB,SAAS,SAAS,SAAS,MAAM,CAAC;AAEvD,SAAO,OAAO,aAAa,OAAO,UAChC,qBAAC,iBACC;AAAA,wBAAC,YAAS,MAAK,SAAQ,OAAO,cAAc;AAAA,IAC5C;AAAA,MAAC;AAAA;AAAA,QACC,MAAK;AAAA,QACL,OAAO,MAAM,cAAc,GAAG,OAAO,MAAM,SAAS,OAAO,OAAO,MAAM,OAAO,MAAM,OAAO,MAAM,SAAS;AAAA,QAC3G,UAAU;AAAA,QACV;AAAA;AAAA,IACF;AAAA,KACF,IACE;AACN;",
   "names": []
 }

package/dist/esm/parts/FilterBar/components/MultiSelectPill.js.map CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../scripts/build/transpile/react-shim.js", "../../../../../src/parts/FilterBar/components/MultiSelectPill.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { useCallback } from 'react';\nimport { DSPillGroupV2, DSPillV2 } from '@elliemae/ds-pills';\nimport type { FilterPillComponent, FilterOptionT } from '../types';\n\nexport const MultiSelectPill: FilterPillComponent<FilterOptionT[]> = ({\n  columnHeader,\n  column,\n  value,\n  filters,\n  onFiltersChange,\n  prevRef,\n  innerRef,\n  nextRef,\n}) => {\n  const multiSelectedValue = value;\n  const handleOnRemove = useCallback(\n    (valToRemove) => {\n      const newFilters = [...filters];\n      const filterIndex = newFilters.findIndex((filter) => filter.id === column);\n      newFilters[filterIndex].value = multiSelectedValue.filter((val) => val.dsId !== valToRemove.dsId);\n      if (newFilters[filterIndex].value.length === 0) {\n        if (prevRef?.current) prevRef.current.focus();\n        else nextRef.current?.focus();\n        newFilters.splice(filterIndex, 1);\n      }\n      onFiltersChange(newFilters);\n    },\n    [filters, multiSelectedValue, onFiltersChange, column, prevRef, nextRef],\n  );\n  return multiSelectedValue?.length ? (\n    <DSPillGroupV2>\n      <DSPillV2 type=\"label\" label={columnHeader} />\n      {multiSelectedValue.map((val, index) => (\n        <DSPillV2\n          key={val.dsId}\n          type=\"removable\"\n          label={val.label}\n          onRemove={() => handleOnRemove(val)}\n          innerRef={index === multiSelectedValue.length - 1 ? innerRef : {}}\n        />\n      ))}\n    </DSPillGroupV2>\n  ) : null;\n};\n"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { useCallback } from 'react';\nimport { DSPillGroupV2, DSPillV2 } from '@elliemae/ds-pills';\nimport type { FilterPillComponent, FilterOptionT } from '../types.js';\n\nexport const MultiSelectPill: FilterPillComponent<FilterOptionT[]> = ({\n  columnHeader,\n  column,\n  value,\n  filters,\n  onFiltersChange,\n  prevRef,\n  innerRef,\n  nextRef,\n}) => {\n  const multiSelectedValue = value;\n  const handleOnRemove = useCallback(\n    (valToRemove) => {\n      const newFilters = [...filters];\n      const filterIndex = newFilters.findIndex((filter) => filter.id === column);\n      newFilters[filterIndex].value = multiSelectedValue.filter((val) => val.dsId !== valToRemove.dsId);\n      if (newFilters[filterIndex].value.length === 0) {\n        if (prevRef?.current) prevRef.current.focus();\n        else nextRef.current?.focus();\n        newFilters.splice(filterIndex, 1);\n      }\n      onFiltersChange(newFilters);\n    },\n    [filters, multiSelectedValue, onFiltersChange, column, prevRef, nextRef],\n  );\n  return multiSelectedValue?.length ? (\n    <DSPillGroupV2>\n      <DSPillV2 type=\"label\" label={columnHeader} />\n      {multiSelectedValue.map((val, index) => (\n        <DSPillV2\n          key={val.dsId}\n          type=\"removable\"\n          label={val.label}\n          onRemove={() => handleOnRemove(val)}\n          innerRef={index === multiSelectedValue.length - 1 ? innerRef : {}}\n        />\n      ))}\n    </DSPillGroupV2>\n  ) : null;\n};\n"],
   "mappings": "AAAA,YAAY,WAAW;AC8BnB,SACE,KADF;AA9BJ,SAAgB,mBAAmB;AACnC,SAAS,eAAe,gBAAgB;AAGjC,MAAM,kBAAwD,CAAC;AAAA,EACpE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,MAAM;AACJ,QAAM,qBAAqB;AAC3B,QAAM,iBAAiB;AAAA,IACrB,CAAC,gBAAgB;AACf,YAAM,aAAa,CAAC,GAAG,OAAO;AAC9B,YAAM,cAAc,WAAW,UAAU,CAAC,WAAW,OAAO,OAAO,MAAM;AACzE,iBAAW,aAAa,QAAQ,mBAAmB,OAAO,CAAC,QAAQ,IAAI,SAAS,YAAY,IAAI;AAChG,UAAI,WAAW,aAAa,MAAM,WAAW,GAAG;AAC9C,YAAI,SAAS;AAAS,kBAAQ,QAAQ,MAAM;AAAA;AACvC,kBAAQ,SAAS,MAAM;AAC5B,mBAAW,OAAO,aAAa,CAAC;AAAA,MAClC;AACA,sBAAgB,UAAU;AAAA,IAC5B;AAAA,IACA,CAAC,SAAS,oBAAoB,iBAAiB,QAAQ,SAAS,OAAO;AAAA,EACzE;AACA,SAAO,oBAAoB,SACzB,qBAAC,iBACC;AAAA,wBAAC,YAAS,MAAK,SAAQ,OAAO,cAAc;AAAA,IAC3C,mBAAmB,IAAI,CAAC,KAAK,UAC5B;AAAA,MAAC;AAAA;AAAA,QAEC,MAAK;AAAA,QACL,OAAO,IAAI;AAAA,QACX,UAAU,MAAM,eAAe,GAAG;AAAA,QAClC,UAAU,UAAU,mBAAmB,SAAS,IAAI,WAAW,CAAC;AAAA;AAAA,MAJ3D,IAAI;AAAA,IAKX,CACD;AAAA,KACH,IACE;AACN;",
   "names": []
 }

package/dist/esm/parts/FilterBar/components/NumberRangePill.js.map CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../scripts/build/transpile/react-shim.js", "../../../../../src/parts/FilterBar/components/NumberRangePill.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { useCallback } from 'react';\nimport { DSPillGroupV2, DSPillV2 } from '@elliemae/ds-pills';\nimport type { FilterPillComponent } from '../types';\n\nexport const NumberRangePill: FilterPillComponent<{ from: string; to: string }> = ({\n  columnHeader,\n  column,\n  value,\n  filters,\n  onFiltersChange,\n  prevRef,\n  innerRef,\n  nextRef,\n}) => {\n  const handleOnRemove = useCallback(() => {\n    if (prevRef?.current) prevRef.current.focus();\n    else nextRef.current?.focus();\n    onFiltersChange(filters.filter((filter) => filter.id !== column));\n  }, [onFiltersChange, filters, column, prevRef, nextRef]);\n\n  return (value?.from ?? '') !== '' && (value?.to ?? '') !== '' ? (\n    <DSPillGroupV2>\n      <DSPillV2 type=\"label\" label={columnHeader} />\n      <DSPillV2 type=\"removable\" label={`${value.from} - ${value.to}`} onRemove={handleOnRemove} innerRef={innerRef} />\n    </DSPillGroupV2>\n  ) : null;\n};\n"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { useCallback } from 'react';\nimport { DSPillGroupV2, DSPillV2 } from '@elliemae/ds-pills';\nimport type { FilterPillComponent } from '../types.js';\n\nexport const NumberRangePill: FilterPillComponent<{ from: string; to: string }> = ({\n  columnHeader,\n  column,\n  value,\n  filters,\n  onFiltersChange,\n  prevRef,\n  innerRef,\n  nextRef,\n}) => {\n  const handleOnRemove = useCallback(() => {\n    if (prevRef?.current) prevRef.current.focus();\n    else nextRef.current?.focus();\n    onFiltersChange(filters.filter((filter) => filter.id !== column));\n  }, [onFiltersChange, filters, column, prevRef, nextRef]);\n\n  return (value?.from ?? '') !== '' && (value?.to ?? '') !== '' ? (\n    <DSPillGroupV2>\n      <DSPillV2 type=\"label\" label={columnHeader} />\n      <DSPillV2 type=\"removable\" label={`${value.from} - ${value.to}`} onRemove={handleOnRemove} innerRef={innerRef} />\n    </DSPillGroupV2>\n  ) : null;\n};\n"],
   "mappings": "AAAA,YAAY,WAAW;ACqBnB,SACE,KADF;AArBJ,SAAgB,mBAAmB;AACnC,SAAS,eAAe,gBAAgB;AAGjC,MAAM,kBAAqE,CAAC;AAAA,EACjF;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,MAAM;AACJ,QAAM,iBAAiB,YAAY,MAAM;AACvC,QAAI,SAAS;AAAS,cAAQ,QAAQ,MAAM;AAAA;AACvC,cAAQ,SAAS,MAAM;AAC5B,oBAAgB,QAAQ,OAAO,CAAC,WAAW,OAAO,OAAO,MAAM,CAAC;AAAA,EAClE,GAAG,CAAC,iBAAiB,SAAS,QAAQ,SAAS,OAAO,CAAC;AAEvD,UAAQ,OAAO,QAAQ,QAAQ,OAAO,OAAO,MAAM,QAAQ,KACzD,qBAAC,iBACC;AAAA,wBAAC,YAAS,MAAK,SAAQ,OAAO,cAAc;AAAA,IAC5C,oBAAC,YAAS,MAAK,aAAY,OAAO,GAAG,MAAM,UAAU,MAAM,MAAM,UAAU,gBAAgB,UAAoB;AAAA,KACjH,IACE;AACN;",
   "names": []
 }

package/dist/esm/parts/FilterBar/components/SelectPill.js.map CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../scripts/build/transpile/react-shim.js", "../../../../../src/parts/FilterBar/components/SelectPill.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { useCallback } from 'react';\nimport { DSPillGroupV2, DSPillV2 } from '@elliemae/ds-pills';\nimport type { FilterOptionT, FilterPillComponent } from '../types';\n\nexport const SelectPill: FilterPillComponent<FilterOptionT> = ({\n  columnHeader,\n  column,\n  value,\n  filters,\n  onFiltersChange,\n  prevRef,\n  innerRef,\n  nextRef,\n}) => {\n  const handleOnRemove = useCallback(() => {\n    if (prevRef?.current) prevRef.current.focus();\n    else nextRef.current?.focus();\n    onFiltersChange(filters.filter((filter) => filter.id !== column));\n  }, [onFiltersChange, filters, prevRef, nextRef, column]);\n\n  return value ? (\n    <DSPillGroupV2>\n      <DSPillV2 type=\"label\" label={columnHeader} />\n      <DSPillV2 type=\"removable\" label={value.label} onRemove={handleOnRemove} innerRef={innerRef} />\n    </DSPillGroupV2>\n  ) : null;\n};\n"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { useCallback } from 'react';\nimport { DSPillGroupV2, DSPillV2 } from '@elliemae/ds-pills';\nimport type { FilterOptionT, FilterPillComponent } from '../types.js';\n\nexport const SelectPill: FilterPillComponent<FilterOptionT> = ({\n  columnHeader,\n  column,\n  value,\n  filters,\n  onFiltersChange,\n  prevRef,\n  innerRef,\n  nextRef,\n}) => {\n  const handleOnRemove = useCallback(() => {\n    if (prevRef?.current) prevRef.current.focus();\n    else nextRef.current?.focus();\n    onFiltersChange(filters.filter((filter) => filter.id !== column));\n  }, [onFiltersChange, filters, prevRef, nextRef, column]);\n\n  return value ? (\n    <DSPillGroupV2>\n      <DSPillV2 type=\"label\" label={columnHeader} />\n      <DSPillV2 type=\"removable\" label={value.label} onRemove={handleOnRemove} innerRef={innerRef} />\n    </DSPillGroupV2>\n  ) : null;\n};\n"],
   "mappings": "AAAA,YAAY,WAAW;ACqBnB,SACE,KADF;AArBJ,SAAgB,mBAAmB;AACnC,SAAS,eAAe,gBAAgB;AAGjC,MAAM,aAAiD,CAAC;AAAA,EAC7D;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,MAAM;AACJ,QAAM,iBAAiB,YAAY,MAAM;AACvC,QAAI,SAAS;AAAS,cAAQ,QAAQ,MAAM;AAAA;AACvC,cAAQ,SAAS,MAAM;AAC5B,oBAAgB,QAAQ,OAAO,CAAC,WAAW,OAAO,OAAO,MAAM,CAAC;AAAA,EAClE,GAAG,CAAC,iBAAiB,SAAS,SAAS,SAAS,MAAM,CAAC;AAEvD,SAAO,QACL,qBAAC,iBACC;AAAA,wBAAC,YAAS,MAAK,SAAQ,OAAO,cAAc;AAAA,IAC5C,oBAAC,YAAS,MAAK,aAAY,OAAO,MAAM,OAAO,UAAU,gBAAgB,UAAoB;AAAA,KAC/F,IACE;AACN;",
   "names": []
 }

package/dist/esm/parts/FilterBar/components/SingleDatePill.js.map CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../scripts/build/transpile/react-shim.js", "../../../../../src/parts/FilterBar/components/SingleDatePill.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { useCallback } from 'react';\nimport { DSPillGroupV2, DSPillV2 } from '@elliemae/ds-pills';\nimport type { FilterPillComponent } from '../types';\n\nexport const SingleDatePill: FilterPillComponent<string> = ({\n  columnHeader,\n  column,\n  value,\n  filters,\n  onFiltersChange,\n  prevRef,\n  innerRef,\n  nextRef,\n}) => {\n  const handleOnRemove = useCallback(() => {\n    if (prevRef?.current) prevRef.current.focus();\n    else nextRef.current?.focus();\n    onFiltersChange(filters.filter((filter) => filter.id !== column));\n  }, [onFiltersChange, filters, prevRef, nextRef, column]);\n\n  return value ? (\n    <DSPillGroupV2>\n      <DSPillV2 type=\"label\" label={columnHeader} />\n      <DSPillV2 type=\"removable\" label={value.replace(/-/g, '/')} onRemove={handleOnRemove} innerRef={innerRef} />\n    </DSPillGroupV2>\n  ) : null;\n};\n"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { useCallback } from 'react';\nimport { DSPillGroupV2, DSPillV2 } from '@elliemae/ds-pills';\nimport type { FilterPillComponent } from '../types.js';\n\nexport const SingleDatePill: FilterPillComponent<string> = ({\n  columnHeader,\n  column,\n  value,\n  filters,\n  onFiltersChange,\n  prevRef,\n  innerRef,\n  nextRef,\n}) => {\n  const handleOnRemove = useCallback(() => {\n    if (prevRef?.current) prevRef.current.focus();\n    else nextRef.current?.focus();\n    onFiltersChange(filters.filter((filter) => filter.id !== column));\n  }, [onFiltersChange, filters, prevRef, nextRef, column]);\n\n  return value ? (\n    <DSPillGroupV2>\n      <DSPillV2 type=\"label\" label={columnHeader} />\n      <DSPillV2 type=\"removable\" label={value.replace(/-/g, '/')} onRemove={handleOnRemove} innerRef={innerRef} />\n    </DSPillGroupV2>\n  ) : null;\n};\n"],
   "mappings": "AAAA,YAAY,WAAW;ACqBnB,SACE,KADF;AArBJ,SAAgB,mBAAmB;AACnC,SAAS,eAAe,gBAAgB;AAGjC,MAAM,iBAA8C,CAAC;AAAA,EAC1D;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,MAAM;AACJ,QAAM,iBAAiB,YAAY,MAAM;AACvC,QAAI,SAAS;AAAS,cAAQ,QAAQ,MAAM;AAAA;AACvC,cAAQ,SAAS,MAAM;AAC5B,oBAAgB,QAAQ,OAAO,CAAC,WAAW,OAAO,OAAO,MAAM,CAAC;AAAA,EAClE,GAAG,CAAC,iBAAiB,SAAS,SAAS,SAAS,MAAM,CAAC;AAEvD,SAAO,QACL,qBAAC,iBACC;AAAA,wBAAC,YAAS,MAAK,SAAQ,OAAO,cAAc;AAAA,IAC5C,oBAAC,YAAS,MAAK,aAAY,OAAO,MAAM,QAAQ,MAAM,GAAG,GAAG,UAAU,gBAAgB,UAAoB;AAAA,KAC5G,IACE;AACN;",
   "names": []
 }

package/dist/esm/parts/FilterBar/components/index.js CHANGED Viewed

@@ -1,8 +1,8 @@
 import * as React from "react";
-export * from "./DateRangePill";
-export * from "./DateSwitcherPill";
-export * from "./MultiSelectPill";
-export * from "./NumberRangePill";
-export * from "./SelectPill";
-export * from "./SingleDatePill";
+export * from "./DateRangePill.js";
+export * from "./DateSwitcherPill.js";
+export * from "./MultiSelectPill.js";
+export * from "./NumberRangePill.js";
+export * from "./SelectPill.js";
+export * from "./SingleDatePill.js";
 //# sourceMappingURL=index.js.map

package/dist/esm/parts/FilterBar/components/index.js.map CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../scripts/build/transpile/react-shim.js", "../../../../../src/parts/FilterBar/components/index.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "export * from './DateRangePill';\nexport * from './DateSwitcherPill';\nexport * from './MultiSelectPill';\nexport * from './NumberRangePill';\nexport * from './SelectPill';\nexport * from './SingleDatePill';\n"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "export * from './DateRangePill.js';\nexport * from './DateSwitcherPill.js';\nexport * from './MultiSelectPill.js';\nexport * from './NumberRangePill.js';\nexport * from './SelectPill.js';\nexport * from './SingleDatePill.js';\n"],
   "mappings": "AAAA,YAAY,WAAW;ACAvB,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;",
   "names": []
 }

package/dist/esm/parts/FilterBar/index.js CHANGED Viewed

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

package/dist/esm/parts/FilterBar/index.js.map CHANGED Viewed

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

package/dist/esm/parts/Filters/index.js CHANGED Viewed

@@ -11,9 +11,9 @@ import {
   MultiCreatableFilter,
   SingleDateFilter,
   CurrencyRangeFilter
-} from "../../addons/Filters";
-import { FILTER_TYPES } from "../../exported-related";
-import { DataTableContext } from "../../DataTableContext";
+} from "../../addons/Filters/index.js";
+import { FILTER_TYPES } from "../../exported-related/index.js";
+import { DataTableContext } from "../../DataTableContext.js";
 const FilterMapper = {
   [FILTER_TYPES.SELECT]: SingleSelectFilter,
   [FILTER_TYPES.CREATABLE_SELECT]: SingleCreatableFilter,

package/dist/esm/parts/Filters/index.js.map CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/parts/Filters/index.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable @typescript-eslint/indent */\nimport React, { useCallback, useContext } from 'react';\nimport {\n  DateRangeFilter,\n  DateSwitcherFilter,\n  NumberRangeFilter,\n  SingleSelectFilter,\n  SingleCreatableFilter,\n  MultiSelectFilter,\n  MultiCreatableFilter,\n  SingleDateFilter,\n  CurrencyRangeFilter,\n} from '../../addons/Filters';\nimport { FILTER_TYPES } from '../../exported-related';\nimport { DataTableContext } from '../../DataTableContext';\nimport type { FilterProps } from '../../types/props';\n\nconst FilterMapper: Record<string, React.ComponentType<FilterProps>> = {\n  [FILTER_TYPES.SELECT]: SingleSelectFilter,\n  [FILTER_TYPES.CREATABLE_SELECT]: SingleCreatableFilter,\n  [FILTER_TYPES.MULTI_SELECT]: MultiSelectFilter,\n  [FILTER_TYPES.CREATABLE_MULTI_SELECT]: MultiCreatableFilter,\n  [FILTER_TYPES.SINGLE_DATE]: SingleDateFilter,\n  [FILTER_TYPES.DATE_RANGE]: DateRangeFilter,\n  [FILTER_TYPES.DATE_SWITCHER]: DateSwitcherFilter,\n  [FILTER_TYPES.NUMBER_RANGE]: NumberRangeFilter,\n  [FILTER_TYPES.CURRENCY_RANGE]: CurrencyRangeFilter,\n};\nexport const FilterMapItem: React.ComponentType<\n  Omit<FilterProps, 'patchHeaderFilterButtonAndMenu' | 'patchHeader' | 'onValueChange'>\n> = (props) => {\n  const { column, filterValue: filters, onFiltersChange } = props;\n\n  const { patchHeaderFilterButtonAndMenu, patchHeader } = useContext(DataTableContext);\n\n  const filterValue = filters.find((filter) => filter.id === column.id);\n\n  const onValueChange = useCallback(\n    (type: string, newValue: any) => {\n      const filterIndex = filters.findIndex((filter) => filter.id === column.id);\n      if (newValue === undefined) {\n        const newFilters = filters.filter((filter) => filter.id !== column.id);\n        onFiltersChange(newFilters);\n      } else if (filterIndex === -1) {\n        onFiltersChange([...filters, { id: column.id, type, value: newValue }]);\n      } else {\n        const newFilters = [...filters];\n        newFilters[filterIndex].type = type;\n        newFilters[filterIndex].value = newValue;\n        onFiltersChange(newFilters);\n      }\n    },\n    [column.id, filters, onFiltersChange],\n  );\n\n  const filterProps = {\n    ...props,\n    filterValue: filterValue?.value,\n    onValueChange,\n    patchHeader,\n    patchHeaderFilterButtonAndMenu,\n  };\n\n  if (typeof column.filter === 'string') {\n    if (!(column.filter in FilterMapper)) {\n      throw new Error(`column.filter must be a supported out-of-the-box filter in ${column}`);\n    }\n    const FilterComp = FilterMapper[column.filter];\n    return <FilterComp {...filterProps} />;\n  }\n\n  if (column.Filter) {\n    if (typeof column.Filter !== 'function') {\n      throw new Error(`column.Filter must be a component`);\n    }\n    const FilterComp = column.Filter;\n    return <FilterComp {...filterProps} />;\n  }\n\n  // Column doesn't have any filters\n  return null;\n};\n"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable @typescript-eslint/indent */\nimport React, { useCallback, useContext } from 'react';\nimport {\n  DateRangeFilter,\n  DateSwitcherFilter,\n  NumberRangeFilter,\n  SingleSelectFilter,\n  SingleCreatableFilter,\n  MultiSelectFilter,\n  MultiCreatableFilter,\n  SingleDateFilter,\n  CurrencyRangeFilter,\n} from '../../addons/Filters/index.js';\nimport { FILTER_TYPES } from '../../exported-related/index.js';\nimport { DataTableContext } from '../../DataTableContext.js';\nimport type { FilterProps } from '../../types/props.js';\n\nconst FilterMapper: Record<string, React.ComponentType<FilterProps>> = {\n  [FILTER_TYPES.SELECT]: SingleSelectFilter,\n  [FILTER_TYPES.CREATABLE_SELECT]: SingleCreatableFilter,\n  [FILTER_TYPES.MULTI_SELECT]: MultiSelectFilter,\n  [FILTER_TYPES.CREATABLE_MULTI_SELECT]: MultiCreatableFilter,\n  [FILTER_TYPES.SINGLE_DATE]: SingleDateFilter,\n  [FILTER_TYPES.DATE_RANGE]: DateRangeFilter,\n  [FILTER_TYPES.DATE_SWITCHER]: DateSwitcherFilter,\n  [FILTER_TYPES.NUMBER_RANGE]: NumberRangeFilter,\n  [FILTER_TYPES.CURRENCY_RANGE]: CurrencyRangeFilter,\n};\nexport const FilterMapItem: React.ComponentType<\n  Omit<FilterProps, 'patchHeaderFilterButtonAndMenu' | 'patchHeader' | 'onValueChange'>\n> = (props) => {\n  const { column, filterValue: filters, onFiltersChange } = props;\n\n  const { patchHeaderFilterButtonAndMenu, patchHeader } = useContext(DataTableContext);\n\n  const filterValue = filters.find((filter) => filter.id === column.id);\n\n  const onValueChange = useCallback(\n    (type: string, newValue: any) => {\n      const filterIndex = filters.findIndex((filter) => filter.id === column.id);\n      if (newValue === undefined) {\n        const newFilters = filters.filter((filter) => filter.id !== column.id);\n        onFiltersChange(newFilters);\n      } else if (filterIndex === -1) {\n        onFiltersChange([...filters, { id: column.id, type, value: newValue }]);\n      } else {\n        const newFilters = [...filters];\n        newFilters[filterIndex].type = type;\n        newFilters[filterIndex].value = newValue;\n        onFiltersChange(newFilters);\n      }\n    },\n    [column.id, filters, onFiltersChange],\n  );\n\n  const filterProps = {\n    ...props,\n    filterValue: filterValue?.value,\n    onValueChange,\n    patchHeader,\n    patchHeaderFilterButtonAndMenu,\n  };\n\n  if (typeof column.filter === 'string') {\n    if (!(column.filter in FilterMapper)) {\n      throw new Error(`column.filter must be a supported out-of-the-box filter in ${column}`);\n    }\n    const FilterComp = FilterMapper[column.filter];\n    return <FilterComp {...filterProps} />;\n  }\n\n  if (column.Filter) {\n    if (typeof column.Filter !== 'function') {\n      throw new Error(`column.Filter must be a component`);\n    }\n    const FilterComp = column.Filter;\n    return <FilterComp {...filterProps} />;\n  }\n\n  // Column doesn't have any filters\n  return null;\n};\n"],
   "mappings": "AAAA,YAAY,WAAW;ACoEZ;AAnEX,SAAgB,aAAa,kBAAkB;AAC/C;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AACP,SAAS,oBAAoB;AAC7B,SAAS,wBAAwB;AAGjC,MAAM,eAAiE;AAAA,EACrE,CAAC,aAAa,SAAS;AAAA,EACvB,CAAC,aAAa,mBAAmB;AAAA,EACjC,CAAC,aAAa,eAAe;AAAA,EAC7B,CAAC,aAAa,yBAAyB;AAAA,EACvC,CAAC,aAAa,cAAc;AAAA,EAC5B,CAAC,aAAa,aAAa;AAAA,EAC3B,CAAC,aAAa,gBAAgB;AAAA,EAC9B,CAAC,aAAa,eAAe;AAAA,EAC7B,CAAC,aAAa,iBAAiB;AACjC;AACO,MAAM,gBAET,CAAC,UAAU;AACb,QAAM,EAAE,QAAQ,aAAa,SAAS,gBAAgB,IAAI;AAE1D,QAAM,EAAE,gCAAgC,YAAY,IAAI,WAAW,gBAAgB;AAEnF,QAAM,cAAc,QAAQ,KAAK,CAAC,WAAW,OAAO,OAAO,OAAO,EAAE;AAEpE,QAAM,gBAAgB;AAAA,IACpB,CAAC,MAAc,aAAkB;AAC/B,YAAM,cAAc,QAAQ,UAAU,CAAC,WAAW,OAAO,OAAO,OAAO,EAAE;AACzE,UAAI,aAAa,QAAW;AAC1B,cAAM,aAAa,QAAQ,OAAO,CAAC,WAAW,OAAO,OAAO,OAAO,EAAE;AACrE,wBAAgB,UAAU;AAAA,MAC5B,WAAW,gBAAgB,IAAI;AAC7B,wBAAgB,CAAC,GAAG,SAAS,EAAE,IAAI,OAAO,IAAI,MAAM,OAAO,SAAS,CAAC,CAAC;AAAA,MACxE,OAAO;AACL,cAAM,aAAa,CAAC,GAAG,OAAO;AAC9B,mBAAW,aAAa,OAAO;AAC/B,mBAAW,aAAa,QAAQ;AAChC,wBAAgB,UAAU;AAAA,MAC5B;AAAA,IACF;AAAA,IACA,CAAC,OAAO,IAAI,SAAS,eAAe;AAAA,EACtC;AAEA,QAAM,cAAc;AAAA,IAClB,GAAG;AAAA,IACH,aAAa,aAAa;AAAA,IAC1B;AAAA,IACA;AAAA,IACA;AAAA,EACF;AAEA,MAAI,OAAO,OAAO,WAAW,UAAU;AACrC,QAAI,EAAE,OAAO,UAAU,eAAe;AACpC,YAAM,IAAI,MAAM,8DAA8D,QAAQ;AAAA,IACxF;AACA,UAAM,aAAa,aAAa,OAAO;AACvC,WAAO,oBAAC,cAAY,GAAG,aAAa;AAAA,EACtC;AAEA,MAAI,OAAO,QAAQ;AACjB,QAAI,OAAO,OAAO,WAAW,YAAY;AACvC,YAAM,IAAI,MAAM,mCAAmC;AAAA,IACrD;AACA,UAAM,aAAa,OAAO;AAC1B,WAAO,oBAAC,cAAY,GAAG,aAAa;AAAA,EACtC;AAGA,SAAO;AACT;",
   "names": []
 }

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

@@ -2,17 +2,17 @@ import * as React from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { useContext, useMemo, useRef } from "react";
 import { Grid } from "@elliemae/ds-grid";
-import { StyledHeadTh, StyledHeaderRightIconsWrapper, StyledFocusWithin } from "../../styled";
-import { DataTableContext } from "../../DataTableContext";
-import { SortByCaret } from "../SortByCaret";
-import { DragHandle } from "../DnDHandle";
-import { SortableItemContext } from "../HoC/SortableItemContext";
-import { FilterMapItem } from "../Filters";
-import { HeaderResizer } from "./HeaderResizer";
-import { useHeaderCellHandlers } from "./useHeaderCellHandlers";
-import { useHeaderCellConfig } from "./useHeaderCellConfig";
-import { DATA_TESTID } from "../../configs/constants";
-import { HeaderCellTitle } from "./HeaderCellTitle";
+import { StyledHeadTh, StyledHeaderRightIconsWrapper, StyledFocusWithin } from "../../styled.js";
+import { DataTableContext } from "../../DataTableContext.js";
+import { SortByCaret } from "../SortByCaret.js";
+import { DragHandle } from "../DnDHandle.js";
+import { SortableItemContext } from "../HoC/SortableItemContext.js";
+import { FilterMapItem } from "../Filters/index.js";
+import { HeaderResizer } from "./HeaderResizer.js";
+import { useHeaderCellHandlers } from "./useHeaderCellHandlers.js";
+import { useHeaderCellConfig } from "./useHeaderCellConfig.js";
+import { DATA_TESTID } from "../../configs/constants.js";
+import { HeaderCellTitle } from "./HeaderCellTitle.js";
 const buildScreenReaderInstructions = (colSpan, draggable, filterable, sortable) => {
   const preffix = colSpan === 1 ? "" : "Column Group. ";
   if (!draggable && !filterable && !sortable)

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

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

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

@@ -3,14 +3,14 @@ import { jsx, jsxs } from "react/jsx-runtime";
 import { useContext } from "react";
 import { Grid } from "@elliemae/ds-grid";
 import { styled } from "@elliemae/ds-system";
-import { HeaderCell } from "./HeaderCell";
-import { SortableItemContext } from "../HoC/SortableItemContext";
-import { withDnDSortableColumnContext } from "../internal";
-import { DropIndicator } from "../DropIndicator";
-import { SortableHeaderCell } from "../SortableHeaderCell";
-import { EmptyChildrenGroup } from "./EmptyChildrenGroup";
-import { DATA_TESTID } from "../../configs";
-import { DataTableContext } from "../../DataTableContext";
+import { HeaderCell } from "./HeaderCell.js";
+import { SortableItemContext } from "../HoC/SortableItemContext.js";
+import { withDnDSortableColumnContext } from "../internal.js";
+import { DropIndicator } from "../DropIndicator.js";
+import { SortableHeaderCell } from "../SortableHeaderCell.js";
+import { EmptyChildrenGroup } from "./EmptyChildrenGroup.js";
+import { DATA_TESTID } from "../../configs/index.js";
+import { DataTableContext } from "../../DataTableContext.js";
 const StyledWrapper = styled(Grid)`
   position: relative;
   ${({ shouldDropOneLevel, isDragOverlay }) => shouldDropOneLevel && !isDragOverlay ? `top: 50%; height: 50%;` : ""}

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/parts/Headers/HeaderCellGroup.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable complexity */\nimport React, { useContext } from 'react';\nimport { Grid } from '@elliemae/ds-grid';\nimport { styled } from '@elliemae/ds-system';\nimport { HeaderCell } from './HeaderCell';\nimport { SortableItemContext } from '../HoC/SortableItemContext';\nimport { withDnDSortableColumnContext } from '../internal';\nimport { DropIndicator } from '../DropIndicator';\nimport { SortableHeaderCell } from '../SortableHeaderCell';\nimport type { TypescriptColumn } from '../../types/props';\nimport { EmptyChildrenGroup } from './EmptyChildrenGroup';\nimport { DATA_TESTID } from '../../configs';\nimport { DataTableContext } from '../../DataTableContext';\n\nconst StyledWrapper = styled(Grid)`\n  position: relative;\n  ${({ shouldDropOneLevel, isDragOverlay }) => (shouldDropOneLevel && !isDragOverlay ? `top: 50%; height: 50%;` : '')}\n  width: ${(props) => (props.isDragOverlay ? 'fit-content' : '100%')};\n  grid-column: ${(props) => props.gridColumn};\n  background: ${(props) => (props.isDragging ? props.theme.colors.neutral['080'] : 'white')};\n  opacity: ${(props) => (props.isDragging ? 0.8 : 1)};\n  box-shadow: 0 2px 4px 0 ${(props) => (props.isDragOverlay ? 'rgba(0,0,0,0.5)' : 'transparent')};\n  border-left: ${({ isFirst }) => (isFirst ? '0px' : '1px')} solid ${(props) => props.theme.colors.neutral['080']};\n`;\n\ninterface HeaderCellGroupCompProps {\n  header: TypescriptColumn;\n  isDragOverlay?: boolean;\n  isDraggingParent?: boolean;\n  isLast?: boolean;\n  isFirst?: boolean;\n  level?: number;\n}\n\nconst HeaderCellGroupComp: React.ComponentType<HeaderCellGroupCompProps> = ({\n  header,\n  isDragOverlay,\n  isDraggingParent,\n  isLast,\n  isFirst,\n  level = 0,\n}) => {\n  const { visibleColumns } = useContext(DataTableContext);\n  const { draggableProps } = useContext(SortableItemContext);\n\n  const isMultiLevel = visibleColumns.some((col) => !!col.columns);\n\n  const children = header.columns;\n\n  const isDragging = (draggableProps && draggableProps.isDragging) || isDraggingParent;\n  const dropIndicatorPosition =\n    draggableProps && draggableProps.shouldShowDropIndicatorPosition && draggableProps.dropIndicatorPosition;\n\n  const ChildGroup = isDragOverlay ? HeaderCellGroup : HeaderCellGroupSortable;\n\n  const colSpan = children?.length ?? 1;\n  return (\n    <StyledWrapper\n      ref={draggableProps ? draggableProps.setNodeRef : null}\n      gridColumn={isDragOverlay ? 'auto' : `span ${colSpan}`}\n      isDragOverlay={isDragOverlay}\n      isDragging={isDragging}\n      cols={['auto']}\n      data-testid={isDragOverlay ? DATA_TESTID.DATA_TABLE_COLUMN_DRAG_OVERLAY : undefined}\n      isFirst={isFirst}\n      shouldDropOneLevel={isMultiLevel && level === 0 && !children}\n    >\n      <HeaderCell column={header} isDragOverlay={isDragOverlay} colSpan={colSpan} />\n      {!!children?.length && !isDragOverlay && (\n        <SortableHeaderCell isGroup items={children} isDragOverlay={isDragOverlay}>\n          {children.map((h, index) => (\n            <ChildGroup\n              key={h.id}\n              header={h}\n              isDragOverlay={isDragOverlay}\n              isDraggingParent={isDragging}\n              isLast={index === children.length - 1}\n              isFirst={index === 0}\n              level={level + 1}\n            />\n          ))}\n        </SortableHeaderCell>\n      )}\n      {children?.length && isDragOverlay && <EmptyChildrenGroup />}\n      <DropIndicator vertical dropIndicatorPosition={dropIndicatorPosition} isLast={isLast && isDragging} isDropValid />\n    </StyledWrapper>\n  );\n};\n\n// We need to declare this because we MUST avoid the useSortable call in the recursive calls of the function\n\nexport const HeaderCellGroup = HeaderCellGroupComp;\n\nexport const HeaderCellGroupSortable = withDnDSortableColumnContext(HeaderCellGroupComp);\n"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable complexity */\nimport React, { useContext } from 'react';\nimport { Grid } from '@elliemae/ds-grid';\nimport { styled } from '@elliemae/ds-system';\nimport { HeaderCell } from './HeaderCell.js';\nimport { SortableItemContext } from '../HoC/SortableItemContext.js';\nimport { withDnDSortableColumnContext } from '../internal.js';\nimport { DropIndicator } from '../DropIndicator.js';\nimport { SortableHeaderCell } from '../SortableHeaderCell.js';\nimport type { TypescriptColumn } from '../../types/props.js';\nimport { EmptyChildrenGroup } from './EmptyChildrenGroup.js';\nimport { DATA_TESTID } from '../../configs/index.js';\nimport { DataTableContext } from '../../DataTableContext.js';\n\nconst StyledWrapper = styled(Grid)`\n  position: relative;\n  ${({ shouldDropOneLevel, isDragOverlay }) => (shouldDropOneLevel && !isDragOverlay ? `top: 50%; height: 50%;` : '')}\n  width: ${(props) => (props.isDragOverlay ? 'fit-content' : '100%')};\n  grid-column: ${(props) => props.gridColumn};\n  background: ${(props) => (props.isDragging ? props.theme.colors.neutral['080'] : 'white')};\n  opacity: ${(props) => (props.isDragging ? 0.8 : 1)};\n  box-shadow: 0 2px 4px 0 ${(props) => (props.isDragOverlay ? 'rgba(0,0,0,0.5)' : 'transparent')};\n  border-left: ${({ isFirst }) => (isFirst ? '0px' : '1px')} solid ${(props) => props.theme.colors.neutral['080']};\n`;\n\ninterface HeaderCellGroupCompProps {\n  header: TypescriptColumn;\n  isDragOverlay?: boolean;\n  isDraggingParent?: boolean;\n  isLast?: boolean;\n  isFirst?: boolean;\n  level?: number;\n}\n\nconst HeaderCellGroupComp: React.ComponentType<HeaderCellGroupCompProps> = ({\n  header,\n  isDragOverlay,\n  isDraggingParent,\n  isLast,\n  isFirst,\n  level = 0,\n}) => {\n  const { visibleColumns } = useContext(DataTableContext);\n  const { draggableProps } = useContext(SortableItemContext);\n\n  const isMultiLevel = visibleColumns.some((col) => !!col.columns);\n\n  const children = header.columns;\n\n  const isDragging = (draggableProps && draggableProps.isDragging) || isDraggingParent;\n  const dropIndicatorPosition =\n    draggableProps && draggableProps.shouldShowDropIndicatorPosition && draggableProps.dropIndicatorPosition;\n\n  const ChildGroup = isDragOverlay ? HeaderCellGroup : HeaderCellGroupSortable;\n\n  const colSpan = children?.length ?? 1;\n  return (\n    <StyledWrapper\n      ref={draggableProps ? draggableProps.setNodeRef : null}\n      gridColumn={isDragOverlay ? 'auto' : `span ${colSpan}`}\n      isDragOverlay={isDragOverlay}\n      isDragging={isDragging}\n      cols={['auto']}\n      data-testid={isDragOverlay ? DATA_TESTID.DATA_TABLE_COLUMN_DRAG_OVERLAY : undefined}\n      isFirst={isFirst}\n      shouldDropOneLevel={isMultiLevel && level === 0 && !children}\n    >\n      <HeaderCell column={header} isDragOverlay={isDragOverlay} colSpan={colSpan} />\n      {!!children?.length && !isDragOverlay && (\n        <SortableHeaderCell isGroup items={children} isDragOverlay={isDragOverlay}>\n          {children.map((h, index) => (\n            <ChildGroup\n              key={h.id}\n              header={h}\n              isDragOverlay={isDragOverlay}\n              isDraggingParent={isDragging}\n              isLast={index === children.length - 1}\n              isFirst={index === 0}\n              level={level + 1}\n            />\n          ))}\n        </SortableHeaderCell>\n      )}\n      {children?.length && isDragOverlay && <EmptyChildrenGroup />}\n      <DropIndicator vertical dropIndicatorPosition={dropIndicatorPosition} isLast={isLast && isDragging} isDropValid />\n    </StyledWrapper>\n  );\n};\n\n// We need to declare this because we MUST avoid the useSortable call in the recursive calls of the function\n\nexport const HeaderCellGroup = HeaderCellGroupComp;\n\nexport const HeaderCellGroupSortable = withDnDSortableColumnContext(HeaderCellGroupComp);\n"],
   "mappings": "AAAA,YAAY,WAAW;ACyDnB,SAUE,KAVF;AAxDJ,SAAgB,kBAAkB;AAClC,SAAS,YAAY;AACrB,SAAS,cAAc;AACvB,SAAS,kBAAkB;AAC3B,SAAS,2BAA2B;AACpC,SAAS,oCAAoC;AAC7C,SAAS,qBAAqB;AAC9B,SAAS,0BAA0B;AAEnC,SAAS,0BAA0B;AACnC,SAAS,mBAAmB;AAC5B,SAAS,wBAAwB;AAEjC,MAAM,gBAAgB,OAAO,IAAI;AAAA;AAAA,IAE7B,CAAC,EAAE,oBAAoB,cAAc,MAAO,sBAAsB,CAAC,gBAAgB,2BAA2B;AAAA,WACvG,CAAC,UAAW,MAAM,gBAAgB,gBAAgB;AAAA,iBAC5C,CAAC,UAAU,MAAM;AAAA,gBAClB,CAAC,UAAW,MAAM,aAAa,MAAM,MAAM,OAAO,QAAQ,SAAS;AAAA,aACtE,CAAC,UAAW,MAAM,aAAa,MAAM;AAAA,4BACtB,CAAC,UAAW,MAAM,gBAAgB,oBAAoB;AAAA,iBACjE,CAAC,EAAE,QAAQ,MAAO,UAAU,QAAQ,eAAgB,CAAC,UAAU,MAAM,MAAM,OAAO,QAAQ;AAAA;AAY3G,MAAM,sBAAqE,CAAC;AAAA,EAC1E;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,QAAQ;AACV,MAAM;AACJ,QAAM,EAAE,eAAe,IAAI,WAAW,gBAAgB;AACtD,QAAM,EAAE,eAAe,IAAI,WAAW,mBAAmB;AAEzD,QAAM,eAAe,eAAe,KAAK,CAAC,QAAQ,CAAC,CAAC,IAAI,OAAO;AAE/D,QAAM,WAAW,OAAO;AAExB,QAAM,aAAc,kBAAkB,eAAe,cAAe;AACpE,QAAM,wBACJ,kBAAkB,eAAe,mCAAmC,eAAe;AAErF,QAAM,aAAa,gBAAgB,kBAAkB;AAErD,QAAM,UAAU,UAAU,UAAU;AACpC,SACE;AAAA,IAAC;AAAA;AAAA,MACC,KAAK,iBAAiB,eAAe,aAAa;AAAA,MAClD,YAAY,gBAAgB,SAAS,QAAQ;AAAA,MAC7C;AAAA,MACA;AAAA,MACA,MAAM,CAAC,MAAM;AAAA,MACb,eAAa,gBAAgB,YAAY,iCAAiC;AAAA,MAC1E;AAAA,MACA,oBAAoB,gBAAgB,UAAU,KAAK,CAAC;AAAA,MAEpD;AAAA,4BAAC,cAAW,QAAQ,QAAQ,eAA8B,SAAkB;AAAA,QAC3E,CAAC,CAAC,UAAU,UAAU,CAAC,iBACtB,oBAAC,sBAAmB,SAAO,MAAC,OAAO,UAAU,eAC1C,mBAAS,IAAI,CAAC,GAAG,UAChB;AAAA,UAAC;AAAA;AAAA,YAEC,QAAQ;AAAA,YACR;AAAA,YACA,kBAAkB;AAAA,YAClB,QAAQ,UAAU,SAAS,SAAS;AAAA,YACpC,SAAS,UAAU;AAAA,YACnB,OAAO,QAAQ;AAAA;AAAA,UANV,EAAE;AAAA,QAOT,CACD,GACH;AAAA,QAED,UAAU,UAAU,iBAAiB,oBAAC,sBAAmB;AAAA,QAC1D,oBAAC,iBAAc,UAAQ,MAAC,uBAA8C,QAAQ,UAAU,YAAY,aAAW,MAAC;AAAA;AAAA;AAAA,EAClH;AAEJ;AAIO,MAAM,kBAAkB;AAExB,MAAM,0BAA0B,6BAA6B,mBAAmB;",
   "names": []
 }

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

@@ -1,8 +1,8 @@
 import * as React from "react";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { SimpleTruncatedTooltipText } from "@elliemae/ds-truncated-tooltip-text";
-import { RequiredDot } from "./RequiredDot";
-import { DATA_TESTID } from "../../configs/constants";
+import { RequiredDot } from "./RequiredDot.js";
+import { DATA_TESTID } from "../../configs/constants.js";
 const StringTitle = ({ column, textWrap }) => (column.textWrap || textWrap) === "truncate" ? /* @__PURE__ */ jsx(SimpleTruncatedTooltipText, { value: column.Header }) : /* @__PURE__ */ jsx(Fragment, { children: column.Header });
 const HeaderCellTitle = ({ column, ctx, draggableProps, textWrap }) => /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "center" }, "data-testid": DATA_TESTID.DATA_TABLE_HEADER_CELL_TITLE, children: [
   typeof column.Header === "string" ? /* @__PURE__ */ jsx(StringTitle, { column, textWrap }) : /* @__PURE__ */ jsx(column.Header, { column, ctx, draggableProps }),

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/parts/Headers/HeaderCellTitle.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React from 'react';\nimport { SimpleTruncatedTooltipText } from '@elliemae/ds-truncated-tooltip-text';\nimport type { TypescriptColumn, TypescriptContext } from '../../types/props';\nimport type { SortableItemContextType } from '../HoC/SortableItemContext';\nimport { RequiredDot } from './RequiredDot';\nimport { DATA_TESTID } from '../../configs/constants';\n\ninterface HeaderCellTitle {\n  column: TypescriptColumn;\n  ctx: TypescriptContext;\n  draggableProps: SortableItemContextType['draggableProps'];\n  textWrap: 'wrap' | 'wrap-all' | 'truncate';\n}\n\nconst StringTitle = ({ column, textWrap }) =>\n  (column.textWrap || textWrap) === 'truncate' ? (\n    <SimpleTruncatedTooltipText value={column.Header} />\n  ) : (\n    <>{column.Header}</>\n  );\n\nexport const HeaderCellTitle: React.ComponentType<HeaderCellTitle> = ({ column, ctx, draggableProps, textWrap }) => (\n  <div style={{ display: 'flex', alignItems: 'center' }} data-testid={DATA_TESTID.DATA_TABLE_HEADER_CELL_TITLE}>\n    {typeof column.Header === 'string' ? (\n      <StringTitle column={column} textWrap={textWrap} />\n    ) : (\n      <column.Header column={column} ctx={ctx} draggableProps={draggableProps} />\n    )}\n    {column.required && <RequiredDot />}\n  </div>\n);\n"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React from 'react';\nimport { SimpleTruncatedTooltipText } from '@elliemae/ds-truncated-tooltip-text';\nimport type { TypescriptColumn, TypescriptContext } from '../../types/props.js';\nimport type { SortableItemContextType } from '../HoC/SortableItemContext.js';\nimport { RequiredDot } from './RequiredDot.js';\nimport { DATA_TESTID } from '../../configs/constants.js';\n\ninterface HeaderCellTitle {\n  column: TypescriptColumn;\n  ctx: TypescriptContext;\n  draggableProps: SortableItemContextType['draggableProps'];\n  textWrap: 'wrap' | 'wrap-all' | 'truncate';\n}\n\nconst StringTitle = ({ column, textWrap }) =>\n  (column.textWrap || textWrap) === 'truncate' ? (\n    <SimpleTruncatedTooltipText value={column.Header} />\n  ) : (\n    <>{column.Header}</>\n  );\n\nexport const HeaderCellTitle: React.ComponentType<HeaderCellTitle> = ({ column, ctx, draggableProps, textWrap }) => (\n  <div style={{ display: 'flex', alignItems: 'center' }} data-testid={DATA_TESTID.DATA_TABLE_HEADER_CELL_TITLE}>\n    {typeof column.Header === 'string' ? (\n      <StringTitle column={column} textWrap={textWrap} />\n    ) : (\n      <column.Header column={column} ctx={ctx} draggableProps={draggableProps} />\n    )}\n    {column.required && <RequiredDot />}\n  </div>\n);\n"],
   "mappings": "AAAA,YAAY,WAAW;ACgBnB,SAEA,UAFA,KAMF,YANE;AAfJ,SAAS,kCAAkC;AAG3C,SAAS,mBAAmB;AAC5B,SAAS,mBAAmB;AAS5B,MAAM,cAAc,CAAC,EAAE,QAAQ,SAAS,OACrC,OAAO,YAAY,cAAc,aAChC,oBAAC,8BAA2B,OAAO,OAAO,QAAQ,IAElD,gCAAG,iBAAO,QAAO;AAGd,MAAM,kBAAwD,CAAC,EAAE,QAAQ,KAAK,gBAAgB,SAAS,MAC5G,qBAAC,SAAI,OAAO,EAAE,SAAS,QAAQ,YAAY,SAAS,GAAG,eAAa,YAAY,8BAC7E;AAAA,SAAO,OAAO,WAAW,WACxB,oBAAC,eAAY,QAAgB,UAAoB,IAEjD,oBAAC,OAAO,QAAP,EAAc,QAAgB,KAAU,gBAAgC;AAAA,EAE1E,OAAO,YAAY,oBAAC,eAAY;AAAA,GACnC;",
   "names": []
 }

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

@@ -1,10 +1,10 @@
 import * as React from "react";
 import { jsx } from "react/jsx-runtime";
 import { useState, useCallback, useContext, useRef, useEffect, useMemo } from "react";
-import { ColsLayoutStyle } from "../../configs/constants";
-import { DataTableContext } from "../../DataTableContext";
-import { columnsToGrid } from "../../helpers";
-import { StyledResizer } from "../../styled";
+import { ColsLayoutStyle } from "../../configs/constants.js";
+import { DataTableContext } from "../../DataTableContext.js";
+import { columnsToGrid } from "../../helpers/index.js";
+import { StyledResizer } from "../../styled.js";
 const narrow = (value, min, max) => Math.min(Math.max(value, min ?? 30), max ?? Infinity);
 const stopPropagation = (e) => e.stopPropagation();
 const HeaderResizer = ({ column }) => {

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/parts/Headers/HeaderResizer.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { useState, useCallback, useContext, useRef, useEffect, useMemo } from 'react';\nimport { ColsLayoutStyle } from '../../configs/constants';\nimport { DataTableContext } from '../../DataTableContext';\nimport { columnsToGrid } from '../../helpers';\nimport { StyledResizer } from '../../styled';\nimport type { TypescriptColumn } from '../../types/props';\n\nconst narrow = (value: number, min: number | undefined, max: number | undefined): number =>\n  Math.min(Math.max(value, min ?? 30), max ?? Infinity);\n\nconst stopPropagation = (e: React.MouseEvent) => e.stopPropagation();\n\nexport const HeaderResizer: React.ComponentType<{\n  column: TypescriptColumn;\n}> = ({ column }) => {\n  const {\n    layoutHelpers: { setGridLayout },\n    visibleColumns,\n    tableProps: { onColumnResize, onColumnSizeChange },\n  } = useContext(DataTableContext);\n\n  const [isResizing, setIsResizing] = useState(false);\n  const [nextWidth, setNextWidth] = useState(column.width ?? 150);\n  const visibleColumnsCopy = useMemo(\n    () =>\n      visibleColumns.reduce((acc, col) => {\n        if (col.columns) {\n          return [...acc, ...col.columns];\n        }\n        return [...acc, { ...col }];\n      }, [] as TypescriptColumn[]),\n    [visibleColumns],\n  );\n  const realColumnIndex = useMemo(\n    () => visibleColumnsCopy.findIndex((visibleColumn) => visibleColumn.id === column.id),\n    [column.id, visibleColumnsCopy],\n  );\n\n  useEffect(() => {\n    if (realColumnIndex > -1) {\n      visibleColumnsCopy[realColumnIndex].width = nextWidth;\n      setGridLayout(columnsToGrid(visibleColumnsCopy, ColsLayoutStyle.Fixed));\n    }\n  }, [realColumnIndex, column.id, nextWidth, setGridLayout, visibleColumnsCopy]);\n\n  const ref = useRef<HTMLDivElement>(null);\n\n  const onResizeStart = useCallback(() => {\n    setIsResizing(true);\n  }, []);\n\n  const onResizeHandler = useCallback(\n    (e: MouseEvent | TouchEvent) => {\n      const delta = ('clientX' in e ? e.clientX : e.touches[0].clientX) - (ref.current?.getBoundingClientRect().x ?? 0); // delta in pixels\n\n      if (realColumnIndex > -1) {\n        const widthWithDelta = narrow(\n          nextWidth + delta,\n          visibleColumnsCopy[realColumnIndex].minWidth,\n          visibleColumnsCopy[realColumnIndex].maxWidth,\n        );\n        setNextWidth(widthWithDelta);\n      }\n      // To prevent text selection\n      e.preventDefault();\n      e.stopPropagation();\n    },\n    [realColumnIndex, nextWidth, visibleColumnsCopy],\n  );\n\n  const onResizeEnd = useCallback(() => {\n    setGridLayout(columnsToGrid(visibleColumns, ColsLayoutStyle.Fixed));\n    setIsResizing(false);\n    onColumnResize?.(column.id, nextWidth);\n    onColumnSizeChange(visibleColumnsCopy, column.id, nextWidth);\n  }, [setGridLayout, visibleColumns, onColumnResize, column.id, nextWidth, onColumnSizeChange, visibleColumnsCopy]);\n\n  useEffect(() => {\n    const debouncedResizeHandler = onResizeHandler;\n    const debouncedResizeEnd = onResizeEnd;\n    const addEvents = () => {\n      document.addEventListener('mousemove', debouncedResizeHandler);\n      document.addEventListener('touchmove', debouncedResizeHandler);\n      document.addEventListener('mouseup', debouncedResizeEnd);\n      document.addEventListener('touchend', debouncedResizeEnd);\n    };\n    const removeEvents = () => {\n      document.removeEventListener('mousemove', debouncedResizeHandler);\n      document.removeEventListener('touchmove', debouncedResizeHandler);\n      document.removeEventListener('mouseup', debouncedResizeEnd);\n      document.removeEventListener('touchend', debouncedResizeEnd);\n    };\n\n    if (isResizing) addEvents();\n    else removeEvents();\n\n    // just in case the component is unmounted\n    return removeEvents;\n  }, [isResizing, onResizeHandler, onResizeEnd]);\n\n  return (\n    <StyledResizer\n      ref={ref}\n      role=\"separator\"\n      draggable={false}\n      isResizing={isResizing}\n      onMouseDown={onResizeStart}\n      onTouchStart={onResizeStart}\n      onMouseUp={onResizeEnd}\n      onTouchEnd={onResizeEnd}\n      onClick={stopPropagation}\n    />\n  );\n};\n"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { useState, useCallback, useContext, useRef, useEffect, useMemo } from 'react';\nimport { ColsLayoutStyle } from '../../configs/constants.js';\nimport { DataTableContext } from '../../DataTableContext.js';\nimport { columnsToGrid } from '../../helpers/index.js';\nimport { StyledResizer } from '../../styled.js';\nimport type { TypescriptColumn } from '../../types/props.js';\n\nconst narrow = (value: number, min: number | undefined, max: number | undefined): number =>\n  Math.min(Math.max(value, min ?? 30), max ?? Infinity);\n\nconst stopPropagation = (e: React.MouseEvent) => e.stopPropagation();\n\nexport const HeaderResizer: React.ComponentType<{\n  column: TypescriptColumn;\n}> = ({ column }) => {\n  const {\n    layoutHelpers: { setGridLayout },\n    visibleColumns,\n    tableProps: { onColumnResize, onColumnSizeChange },\n  } = useContext(DataTableContext);\n\n  const [isResizing, setIsResizing] = useState(false);\n  const [nextWidth, setNextWidth] = useState(column.width ?? 150);\n  const visibleColumnsCopy = useMemo(\n    () =>\n      visibleColumns.reduce((acc, col) => {\n        if (col.columns) {\n          return [...acc, ...col.columns];\n        }\n        return [...acc, { ...col }];\n      }, [] as TypescriptColumn[]),\n    [visibleColumns],\n  );\n  const realColumnIndex = useMemo(\n    () => visibleColumnsCopy.findIndex((visibleColumn) => visibleColumn.id === column.id),\n    [column.id, visibleColumnsCopy],\n  );\n\n  useEffect(() => {\n    if (realColumnIndex > -1) {\n      visibleColumnsCopy[realColumnIndex].width = nextWidth;\n      setGridLayout(columnsToGrid(visibleColumnsCopy, ColsLayoutStyle.Fixed));\n    }\n  }, [realColumnIndex, column.id, nextWidth, setGridLayout, visibleColumnsCopy]);\n\n  const ref = useRef<HTMLDivElement>(null);\n\n  const onResizeStart = useCallback(() => {\n    setIsResizing(true);\n  }, []);\n\n  const onResizeHandler = useCallback(\n    (e: MouseEvent | TouchEvent) => {\n      const delta = ('clientX' in e ? e.clientX : e.touches[0].clientX) - (ref.current?.getBoundingClientRect().x ?? 0); // delta in pixels\n\n      if (realColumnIndex > -1) {\n        const widthWithDelta = narrow(\n          nextWidth + delta,\n          visibleColumnsCopy[realColumnIndex].minWidth,\n          visibleColumnsCopy[realColumnIndex].maxWidth,\n        );\n        setNextWidth(widthWithDelta);\n      }\n      // To prevent text selection\n      e.preventDefault();\n      e.stopPropagation();\n    },\n    [realColumnIndex, nextWidth, visibleColumnsCopy],\n  );\n\n  const onResizeEnd = useCallback(() => {\n    setGridLayout(columnsToGrid(visibleColumns, ColsLayoutStyle.Fixed));\n    setIsResizing(false);\n    onColumnResize?.(column.id, nextWidth);\n    onColumnSizeChange(visibleColumnsCopy, column.id, nextWidth);\n  }, [setGridLayout, visibleColumns, onColumnResize, column.id, nextWidth, onColumnSizeChange, visibleColumnsCopy]);\n\n  useEffect(() => {\n    const debouncedResizeHandler = onResizeHandler;\n    const debouncedResizeEnd = onResizeEnd;\n    const addEvents = () => {\n      document.addEventListener('mousemove', debouncedResizeHandler);\n      document.addEventListener('touchmove', debouncedResizeHandler);\n      document.addEventListener('mouseup', debouncedResizeEnd);\n      document.addEventListener('touchend', debouncedResizeEnd);\n    };\n    const removeEvents = () => {\n      document.removeEventListener('mousemove', debouncedResizeHandler);\n      document.removeEventListener('touchmove', debouncedResizeHandler);\n      document.removeEventListener('mouseup', debouncedResizeEnd);\n      document.removeEventListener('touchend', debouncedResizeEnd);\n    };\n\n    if (isResizing) addEvents();\n    else removeEvents();\n\n    // just in case the component is unmounted\n    return removeEvents;\n  }, [isResizing, onResizeHandler, onResizeEnd]);\n\n  return (\n    <StyledResizer\n      ref={ref}\n      role=\"separator\"\n      draggable={false}\n      isResizing={isResizing}\n      onMouseDown={onResizeStart}\n      onTouchStart={onResizeStart}\n      onMouseUp={onResizeEnd}\n      onTouchEnd={onResizeEnd}\n      onClick={stopPropagation}\n    />\n  );\n};\n"],
   "mappings": "AAAA,YAAY,WAAW;ACqGnB;AArGJ,SAAgB,UAAU,aAAa,YAAY,QAAQ,WAAW,eAAe;AACrF,SAAS,uBAAuB;AAChC,SAAS,wBAAwB;AACjC,SAAS,qBAAqB;AAC9B,SAAS,qBAAqB;AAG9B,MAAM,SAAS,CAAC,OAAe,KAAyB,QACtD,KAAK,IAAI,KAAK,IAAI,OAAO,OAAO,EAAE,GAAG,OAAO,QAAQ;AAEtD,MAAM,kBAAkB,CAAC,MAAwB,EAAE,gBAAgB;AAE5D,MAAM,gBAER,CAAC,EAAE,OAAO,MAAM;AACnB,QAAM;AAAA,IACJ,eAAe,EAAE,cAAc;AAAA,IAC/B;AAAA,IACA,YAAY,EAAE,gBAAgB,mBAAmB;AAAA,EACnD,IAAI,WAAW,gBAAgB;AAE/B,QAAM,CAAC,YAAY,aAAa,IAAI,SAAS,KAAK;AAClD,QAAM,CAAC,WAAW,YAAY,IAAI,SAAS,OAAO,SAAS,GAAG;AAC9D,QAAM,qBAAqB;AAAA,IACzB,MACE,eAAe,OAAO,CAAC,KAAK,QAAQ;AAClC,UAAI,IAAI,SAAS;AACf,eAAO,CAAC,GAAG,KAAK,GAAG,IAAI,OAAO;AAAA,MAChC;AACA,aAAO,CAAC,GAAG,KAAK,EAAE,GAAG,IAAI,CAAC;AAAA,IAC5B,GAAG,CAAC,CAAuB;AAAA,IAC7B,CAAC,cAAc;AAAA,EACjB;AACA,QAAM,kBAAkB;AAAA,IACtB,MAAM,mBAAmB,UAAU,CAAC,kBAAkB,cAAc,OAAO,OAAO,EAAE;AAAA,IACpF,CAAC,OAAO,IAAI,kBAAkB;AAAA,EAChC;AAEA,YAAU,MAAM;AACd,QAAI,kBAAkB,IAAI;AACxB,yBAAmB,iBAAiB,QAAQ;AAC5C,oBAAc,cAAc,oBAAoB,gBAAgB,KAAK,CAAC;AAAA,IACxE;AAAA,EACF,GAAG,CAAC,iBAAiB,OAAO,IAAI,WAAW,eAAe,kBAAkB,CAAC;AAE7E,QAAM,MAAM,OAAuB,IAAI;AAEvC,QAAM,gBAAgB,YAAY,MAAM;AACtC,kBAAc,IAAI;AAAA,EACpB,GAAG,CAAC,CAAC;AAEL,QAAM,kBAAkB;AAAA,IACtB,CAAC,MAA+B;AAC9B,YAAM,SAAS,aAAa,IAAI,EAAE,UAAU,EAAE,QAAQ,GAAG,YAAY,IAAI,SAAS,sBAAsB,EAAE,KAAK;AAE/G,UAAI,kBAAkB,IAAI;AACxB,cAAM,iBAAiB;AAAA,UACrB,YAAY;AAAA,UACZ,mBAAmB,iBAAiB;AAAA,UACpC,mBAAmB,iBAAiB;AAAA,QACtC;AACA,qBAAa,cAAc;AAAA,MAC7B;AAEA,QAAE,eAAe;AACjB,QAAE,gBAAgB;AAAA,IACpB;AAAA,IACA,CAAC,iBAAiB,WAAW,kBAAkB;AAAA,EACjD;AAEA,QAAM,cAAc,YAAY,MAAM;AACpC,kBAAc,cAAc,gBAAgB,gBAAgB,KAAK,CAAC;AAClE,kBAAc,KAAK;AACnB,qBAAiB,OAAO,IAAI,SAAS;AACrC,uBAAmB,oBAAoB,OAAO,IAAI,SAAS;AAAA,EAC7D,GAAG,CAAC,eAAe,gBAAgB,gBAAgB,OAAO,IAAI,WAAW,oBAAoB,kBAAkB,CAAC;AAEhH,YAAU,MAAM;AACd,UAAM,yBAAyB;AAC/B,UAAM,qBAAqB;AAC3B,UAAM,YAAY,MAAM;AACtB,eAAS,iBAAiB,aAAa,sBAAsB;AAC7D,eAAS,iBAAiB,aAAa,sBAAsB;AAC7D,eAAS,iBAAiB,WAAW,kBAAkB;AACvD,eAAS,iBAAiB,YAAY,kBAAkB;AAAA,IAC1D;AACA,UAAM,eAAe,MAAM;AACzB,eAAS,oBAAoB,aAAa,sBAAsB;AAChE,eAAS,oBAAoB,aAAa,sBAAsB;AAChE,eAAS,oBAAoB,WAAW,kBAAkB;AAC1D,eAAS,oBAAoB,YAAY,kBAAkB;AAAA,IAC7D;AAEA,QAAI;AAAY,gBAAU;AAAA;AACrB,mBAAa;AAGlB,WAAO;AAAA,EACT,GAAG,CAAC,YAAY,iBAAiB,WAAW,CAAC;AAE7C,SACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA,MAAK;AAAA,MACL,WAAW;AAAA,MACX;AAAA,MACA,aAAa;AAAA,MACb,cAAc;AAAA,MACd,WAAW;AAAA,MACX,YAAY;AAAA,MACZ,SAAS;AAAA;AAAA,EACX;AAEJ;",
   "names": []
 }

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

@@ -1,11 +1,11 @@
 import * as React from "react";
 import { jsx } from "react/jsx-runtime";
 import { useContext } from "react";
-import { StyledHeadWrapper, StyledHeadTr } from "../../styled";
-import { DataTableContext } from "../../DataTableContext";
-import { withConditionalDnDColumnContext } from "../HoC/withConditionalDnDColumnContext";
-import { HeaderCellGroupSortable } from "./HeaderCellGroup";
-import { SortableHeaderCell } from "../SortableHeaderCell";
+import { StyledHeadWrapper, StyledHeadTr } from "../../styled.js";
+import { DataTableContext } from "../../DataTableContext.js";
+import { withConditionalDnDColumnContext } from "../HoC/withConditionalDnDColumnContext.js";
+import { HeaderCellGroupSortable } from "./HeaderCellGroup.js";
+import { SortableHeaderCell } from "../SortableHeaderCell.js";
 const HeadersComp = () => {
   const {
     tableProps: { isExpandable, colsLayoutStyle },

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/parts/Headers/index.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { useContext } from 'react';\nimport { StyledHeadWrapper, StyledHeadTr } from '../../styled';\nimport { DataTableContext } from '../../DataTableContext';\nimport { withConditionalDnDColumnContext } from '../HoC/withConditionalDnDColumnContext';\nimport { HeaderCellGroupSortable } from './HeaderCellGroup';\nimport { SortableHeaderCell } from '../SortableHeaderCell';\nimport type { TypescriptColumn } from '../../types/props';\n\nconst HeadersComp = (): JSX.Element => {\n  const {\n    tableProps: { isExpandable, colsLayoutStyle },\n    layoutHelpers: { gridLayout, totalColumnsWidth },\n    visibleColumns,\n    columnHeaderRef,\n  } = useContext(DataTableContext);\n\n  return (\n    <StyledHeadWrapper totalColumnsWidth={totalColumnsWidth} colsLayoutStyle={colsLayoutStyle} ref={columnHeaderRef}>\n      <SortableHeaderCell items={visibleColumns}>\n        <StyledHeadTr role=\"row\" cols={gridLayout} colsLayoutStyle={colsLayoutStyle} isExpandable={isExpandable}>\n          {visibleColumns.map((h: TypescriptColumn, index) => (\n            <HeaderCellGroupSortable header={h} key={h.id} isLast={index === visibleColumns.length - 1} />\n          ))}\n        </StyledHeadTr>\n      </SortableHeaderCell>\n    </StyledHeadWrapper>\n  );\n};\n\nexport const Headers = withConditionalDnDColumnContext(HeadersComp);\n"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { useContext } from 'react';\nimport { StyledHeadWrapper, StyledHeadTr } from '../../styled.js';\nimport { DataTableContext } from '../../DataTableContext.js';\nimport { withConditionalDnDColumnContext } from '../HoC/withConditionalDnDColumnContext.js';\nimport { HeaderCellGroupSortable } from './HeaderCellGroup.js';\nimport { SortableHeaderCell } from '../SortableHeaderCell.js';\nimport type { TypescriptColumn } from '../../types/props.js';\n\nconst HeadersComp = (): JSX.Element => {\n  const {\n    tableProps: { isExpandable, colsLayoutStyle },\n    layoutHelpers: { gridLayout, totalColumnsWidth },\n    visibleColumns,\n    columnHeaderRef,\n  } = useContext(DataTableContext);\n\n  return (\n    <StyledHeadWrapper totalColumnsWidth={totalColumnsWidth} colsLayoutStyle={colsLayoutStyle} ref={columnHeaderRef}>\n      <SortableHeaderCell items={visibleColumns}>\n        <StyledHeadTr role=\"row\" cols={gridLayout} colsLayoutStyle={colsLayoutStyle} isExpandable={isExpandable}>\n          {visibleColumns.map((h: TypescriptColumn, index) => (\n            <HeaderCellGroupSortable header={h} key={h.id} isLast={index === visibleColumns.length - 1} />\n          ))}\n        </StyledHeadTr>\n      </SortableHeaderCell>\n    </StyledHeadWrapper>\n  );\n};\n\nexport const Headers = withConditionalDnDColumnContext(HeadersComp);\n"],
   "mappings": "AAAA,YAAY,WAAW;ACqBX;AArBZ,SAAgB,kBAAkB;AAClC,SAAS,mBAAmB,oBAAoB;AAChD,SAAS,wBAAwB;AACjC,SAAS,uCAAuC;AAChD,SAAS,+BAA+B;AACxC,SAAS,0BAA0B;AAGnC,MAAM,cAAc,MAAmB;AACrC,QAAM;AAAA,IACJ,YAAY,EAAE,cAAc,gBAAgB;AAAA,IAC5C,eAAe,EAAE,YAAY,kBAAkB;AAAA,IAC/C;AAAA,IACA;AAAA,EACF,IAAI,WAAW,gBAAgB;AAE/B,SACE,oBAAC,qBAAkB,mBAAsC,iBAAkC,KAAK,iBAC9F,8BAAC,sBAAmB,OAAO,gBACzB,8BAAC,gBAAa,MAAK,OAAM,MAAM,YAAY,iBAAkC,cAC1E,yBAAe,IAAI,CAAC,GAAqB,UACxC,oBAAC,2BAAwB,QAAQ,GAAc,QAAQ,UAAU,eAAe,SAAS,KAAhD,EAAE,EAAiD,CAC7F,GACH,GACF,GACF;AAEJ;AAEO,MAAM,UAAU,gCAAgC,WAAW;",
   "names": []
 }