@elliemae/ds-data-table 3.80.0-next.62 → 3.80.0-next.65

package/dist/esm/helpers/getIdFromUniqueRowAccessor.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../src/helpers/getIdFromUniqueRowAccessor.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable @typescript-eslint/no-unsafe-call */\n/* eslint-disable @typescript-eslint/no-unsafe-return */\n/* eslint-disable @typescript-eslint/no-unsafe-member-access */\nimport type { DSDataTableT } from '../react-desc-prop-types.js';\n\nexport const getIdFromUniqueRowAccessor = (\n  uniqueRowAccessor: DSDataTableT.UniqueRowAccessorType,\n  row: Pick<DSDataTableT.InternalRow, 'id' | 'original'>,\n): string => {\n  if (uniqueRowAccessor === undefined) {\n    // user did not defined an unique row accesor, use the one generated by react-table\n    return row.id.toString();\n  }\n\n  if (typeof uniqueRowAccessor === 'string') {\n    // user specified a field as an unique row accessor\n    return String(row.original[uniqueRowAccessor]);\n  }\n\n  if (Array.isArray(uniqueRowAccessor)) {\n    // user specified combination of fields as unique row accessor\n    return uniqueRowAccessor.map((key) => String(row.original[key])).join('__');\n  }\n\n  // let the user decide on their end what to do\n  return uniqueRowAccessor(row.original);\n};\n"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable @typescript-eslint/no-unsafe-call */\n/* eslint-disable @typescript-eslint/no-unsafe-return */\n/* eslint-disable @typescript-eslint/no-unsafe-member-access */\nimport type { DSDataTableT } from '../react-desc-prop-types.js';\n\nexport const getIdFromUniqueRowAccessor = (\n  uniqueRowAccessor: DSDataTableT.UniqueRowAccessorType,\n  row: Pick<DSDataTableT.InternalRow, 'id' | 'original'>,\n): string => {\n  if (uniqueRowAccessor === undefined) {\n    // user did not define a unique row accessor, use the position-based id the table generates (see useRowFlattenization)\n    return row.id.toString();\n  }\n\n  if (typeof uniqueRowAccessor === 'string') {\n    // user specified a field as an unique row accessor\n    return String(row.original[uniqueRowAccessor]);\n  }\n\n  if (Array.isArray(uniqueRowAccessor)) {\n    // user specified combination of fields as unique row accessor\n    return uniqueRowAccessor.map((key) => String(row.original[key])).join('__');\n  }\n\n  // let the user decide on their end what to do\n  return uniqueRowAccessor(row.original);\n};\n"],
   "mappings": "AAAA,YAAY,WAAW;ACKhB,MAAM,6BAA6B,CACxC,mBACA,QACW;AACX,MAAI,sBAAsB,QAAW;AAEnC,WAAO,IAAI,GAAG,SAAS;AAAA,EACzB;AAEA,MAAI,OAAO,sBAAsB,UAAU;AAEzC,WAAO,OAAO,IAAI,SAAS,iBAAiB,CAAC;AAAA,EAC/C;AAEA,MAAI,MAAM,QAAQ,iBAAiB,GAAG;AAEpC,WAAO,kBAAkB,IAAI,CAAC,QAAQ,OAAO,IAAI,SAAS,GAAG,CAAC,CAAC,EAAE,KAAK,IAAI;AAAA,EAC5E;AAGA,SAAO,kBAAkB,IAAI,QAAQ;AACvC;",
   "names": []
 }

package/dist/esm/helpers/gridLayoutHelpers.js

@@ -46,8 +46,10 @@ const setSubColumnsGridLayout = (wrapper, columns, withRawGridLayout = false) =>
     );
   });
 };
+const columnWidthToPixels = (width) => width === void 0 ? void 0 : Number.parseInt(String(width), 10);
 export {
   changeGridLayout,
+  columnWidthToPixels,
   getGridLayout,
   removeGridLayout,
   setSubColumnsGridLayout

package/dist/esm/helpers/gridLayoutHelpers.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../src/helpers/gridLayoutHelpers.ts"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import type { DSDataTableT } from '../react-desc-prop-types.js';\n\nconst getRawGridLayout = (wrapper: HTMLDivElement | null): string[] => {\n  if (!wrapper) return [];\n  const gridLayoutVar = getComputedStyle(wrapper).getPropertyValue('--grid-layout');\n  if (!gridLayoutVar) return [];\n  return gridLayoutVar\n    .split('minmax(0,')\n    .slice(1)\n    .map((str) => str.replace(')', ''));\n};\n\n// Returns the current grid layout of the table (by reading the CSS variable --grid-layout)\nexport const getGridLayout = (wrapper: HTMLDivElement | null): number[] => {\n  if (!wrapper) return [];\n  const gridLayoutVar = getComputedStyle(wrapper).getPropertyValue('--grid-layout');\n  if (!gridLayoutVar) return [];\n  return gridLayoutVar\n    .split('minmax(0,')\n    .slice(1)\n    .map((str) => str.replace('px) ', '').replace('px)', ''))\n    .map((str) => Number.parseInt(str, 10));\n};\n\n// Changes the grid layout of the table (by changing the CSS variable --grid-layout)\nexport const changeGridLayout = (wrapper: HTMLDivElement | null, colIndex: number, newWidth: number) => {\n  if (!wrapper) return;\n  const cols = getGridLayout(wrapper);\n  cols[colIndex] = newWidth;\n  wrapper.style.setProperty('--grid-layout', cols.map((col) => `minmax(0, ${col}px)`).join(' '));\n  wrapper.style.setProperty('--total-width', `${cols.reduce((acc, col) => acc + col, 0)}px`);\n};\n\nexport const removeGridLayout = (wrapper: HTMLDivElement | null) => {\n  if (!wrapper) return;\n  wrapper.style.removeProperty('--grid-layout');\n  wrapper.style.removeProperty('--total-width');\n};\n\n// TODO: @carusox remove this\n// Since the structure of the column grouping is not ideal (with this I mean that the columns are nested in the HTML DOM),\n// we need to create variables to keep track of the sub-columns layout for each different group\n// When we go ahead and implement the new behavior (also present nowadays on the specs, we should be removing this code)\nexport const setSubColumnsGridLayout = (\n  wrapper: HTMLDivElement | null,\n  columns: DSDataTableT.InternalColumn[],\n  withRawGridLayout = false,\n) => {\n  if (!wrapper) return;\n\n  const cols = withRawGridLayout ? getRawGridLayout(wrapper) : getGridLayout(wrapper);\n\n  let prevIndex = 0;\n\n  const variables = columns.reduce(\n    (acc, cur) => {\n      const count = cur.columns ? cur.columns.length : 1;\n      acc.push({\n        cols: cols.slice(prevIndex, prevIndex + count),\n        id: cur.id,\n      });\n      prevIndex += count;\n      return acc;\n    },\n    [] as { cols: (string | number)[]; id: string }[],\n  );\n\n  variables.forEach((variable) => {\n    wrapper.style.setProperty(\n      `--grid-layout-${variable.id}`,\n      variable.cols.map((col) => (withRawGridLayout ? `minmax(0, ${col})` : `minmax(0, ${col}px)`)).join(' '),\n    );\n  });\n};\n"],
-  "mappings": "AAAA,YAAY,WAAW;ACEvB,MAAM,mBAAmB,CAAC,YAA6C;AACrE,MAAI,CAAC,QAAS,QAAO,CAAC;AACtB,QAAM,gBAAgB,iBAAiB,OAAO,EAAE,iBAAiB,eAAe;AAChF,MAAI,CAAC,cAAe,QAAO,CAAC;AAC5B,SAAO,cACJ,MAAM,WAAW,EACjB,MAAM,CAAC,EACP,IAAI,CAAC,QAAQ,IAAI,QAAQ,KAAK,EAAE,CAAC;AACtC;AAGO,MAAM,gBAAgB,CAAC,YAA6C;AACzE,MAAI,CAAC,QAAS,QAAO,CAAC;AACtB,QAAM,gBAAgB,iBAAiB,OAAO,EAAE,iBAAiB,eAAe;AAChF,MAAI,CAAC,cAAe,QAAO,CAAC;AAC5B,SAAO,cACJ,MAAM,WAAW,EACjB,MAAM,CAAC,EACP,IAAI,CAAC,QAAQ,IAAI,QAAQ,QAAQ,EAAE,EAAE,QAAQ,OAAO,EAAE,CAAC,EACvD,IAAI,CAAC,QAAQ,OAAO,SAAS,KAAK,EAAE,CAAC;AAC1C;AAGO,MAAM,mBAAmB,CAAC,SAAgC,UAAkB,aAAqB;AACtG,MAAI,CAAC,QAAS;AACd,QAAM,OAAO,cAAc,OAAO;AAClC,OAAK,QAAQ,IAAI;AACjB,UAAQ,MAAM,YAAY,iBAAiB,KAAK,IAAI,CAAC,QAAQ,aAAa,GAAG,KAAK,EAAE,KAAK,GAAG,CAAC;AAC7F,UAAQ,MAAM,YAAY,iBAAiB,GAAG,KAAK,OAAO,CAAC,KAAK,QAAQ,MAAM,KAAK,CAAC,CAAC,IAAI;AAC3F;AAEO,MAAM,mBAAmB,CAAC,YAAmC;AAClE,MAAI,CAAC,QAAS;AACd,UAAQ,MAAM,eAAe,eAAe;AAC5C,UAAQ,MAAM,eAAe,eAAe;AAC9C;AAMO,MAAM,0BAA0B,CACrC,SACA,SACA,oBAAoB,UACjB;AACH,MAAI,CAAC,QAAS;AAEd,QAAM,OAAO,oBAAoB,iBAAiB,OAAO,IAAI,cAAc,OAAO;AAElF,MAAI,YAAY;AAEhB,QAAM,YAAY,QAAQ;AAAA,IACxB,CAAC,KAAK,QAAQ;AACZ,YAAM,QAAQ,IAAI,UAAU,IAAI,QAAQ,SAAS;AACjD,UAAI,KAAK;AAAA,QACP,MAAM,KAAK,MAAM,WAAW,YAAY,KAAK;AAAA,QAC7C,IAAI,IAAI;AAAA,MACV,CAAC;AACD,mBAAa;AACb,aAAO;AAAA,IACT;AAAA,IACA,CAAC;AAAA,EACH;AAEA,YAAU,QAAQ,CAAC,aAAa;AAC9B,YAAQ,MAAM;AAAA,MACZ,iBAAiB,SAAS,EAAE;AAAA,MAC5B,SAAS,KAAK,IAAI,CAAC,QAAS,oBAAoB,aAAa,GAAG,MAAM,aAAa,GAAG,KAAM,EAAE,KAAK,GAAG;AAAA,IACxG;AAAA,EACF,CAAC;AACH;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import type { DSDataTableT } from '../react-desc-prop-types.js';\n\nconst getRawGridLayout = (wrapper: HTMLDivElement | null): string[] => {\n  if (!wrapper) return [];\n  const gridLayoutVar = getComputedStyle(wrapper).getPropertyValue('--grid-layout');\n  if (!gridLayoutVar) return [];\n  return gridLayoutVar\n    .split('minmax(0,')\n    .slice(1)\n    .map((str) => str.replace(')', ''));\n};\n\n// Returns the current grid layout of the table (by reading the CSS variable --grid-layout)\nexport const getGridLayout = (wrapper: HTMLDivElement | null): number[] => {\n  if (!wrapper) return [];\n  const gridLayoutVar = getComputedStyle(wrapper).getPropertyValue('--grid-layout');\n  if (!gridLayoutVar) return [];\n  return gridLayoutVar\n    .split('minmax(0,')\n    .slice(1)\n    .map((str) => str.replace('px) ', '').replace('px)', ''))\n    .map((str) => Number.parseInt(str, 10));\n};\n\n// Changes the grid layout of the table (by changing the CSS variable --grid-layout)\nexport const changeGridLayout = (wrapper: HTMLDivElement | null, colIndex: number, newWidth: number) => {\n  if (!wrapper) return;\n  const cols = getGridLayout(wrapper);\n  cols[colIndex] = newWidth;\n  wrapper.style.setProperty('--grid-layout', cols.map((col) => `minmax(0, ${col}px)`).join(' '));\n  wrapper.style.setProperty('--total-width', `${cols.reduce((acc, col) => acc + col, 0)}px`);\n};\n\nexport const removeGridLayout = (wrapper: HTMLDivElement | null) => {\n  if (!wrapper) return;\n  wrapper.style.removeProperty('--grid-layout');\n  wrapper.style.removeProperty('--total-width');\n};\n\n// TODO: @carusox remove this\n// Since the structure of the column grouping is not ideal (with this I mean that the columns are nested in the HTML DOM),\n// we need to create variables to keep track of the sub-columns layout for each different group\n// When we go ahead and implement the new behavior (also present nowadays on the specs, we should be removing this code)\nexport const setSubColumnsGridLayout = (\n  wrapper: HTMLDivElement | null,\n  columns: DSDataTableT.InternalColumn[],\n  withRawGridLayout = false,\n) => {\n  if (!wrapper) return;\n\n  const cols = withRawGridLayout ? getRawGridLayout(wrapper) : getGridLayout(wrapper);\n\n  let prevIndex = 0;\n\n  const variables = columns.reduce(\n    (acc, cur) => {\n      const count = cur.columns ? cur.columns.length : 1;\n      acc.push({\n        cols: cols.slice(prevIndex, prevIndex + count),\n        id: cur.id,\n      });\n      prevIndex += count;\n      return acc;\n    },\n    [] as { cols: (string | number)[]; id: string }[],\n  );\n\n  variables.forEach((variable) => {\n    wrapper.style.setProperty(\n      `--grid-layout-${variable.id}`,\n      variable.cols.map((col) => (withRawGridLayout ? `minmax(0, ${col})` : `minmax(0, ${col}px)`)).join(' '),\n    );\n  });\n};\n\n// The width of a column in pixels: a number, or a px string ('200px') read with parseInt like the rest of the grid\n// layout (getGridLayout above). The resizer works in pixels (see DSDataTableT.ResizeableColumnWidth).\nexport const columnWidthToPixels = (width: number | string | undefined): number | undefined =>\n  width === undefined ? undefined : Number.parseInt(String(width), 10);\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACEvB,MAAM,mBAAmB,CAAC,YAA6C;AACrE,MAAI,CAAC,QAAS,QAAO,CAAC;AACtB,QAAM,gBAAgB,iBAAiB,OAAO,EAAE,iBAAiB,eAAe;AAChF,MAAI,CAAC,cAAe,QAAO,CAAC;AAC5B,SAAO,cACJ,MAAM,WAAW,EACjB,MAAM,CAAC,EACP,IAAI,CAAC,QAAQ,IAAI,QAAQ,KAAK,EAAE,CAAC;AACtC;AAGO,MAAM,gBAAgB,CAAC,YAA6C;AACzE,MAAI,CAAC,QAAS,QAAO,CAAC;AACtB,QAAM,gBAAgB,iBAAiB,OAAO,EAAE,iBAAiB,eAAe;AAChF,MAAI,CAAC,cAAe,QAAO,CAAC;AAC5B,SAAO,cACJ,MAAM,WAAW,EACjB,MAAM,CAAC,EACP,IAAI,CAAC,QAAQ,IAAI,QAAQ,QAAQ,EAAE,EAAE,QAAQ,OAAO,EAAE,CAAC,EACvD,IAAI,CAAC,QAAQ,OAAO,SAAS,KAAK,EAAE,CAAC;AAC1C;AAGO,MAAM,mBAAmB,CAAC,SAAgC,UAAkB,aAAqB;AACtG,MAAI,CAAC,QAAS;AACd,QAAM,OAAO,cAAc,OAAO;AAClC,OAAK,QAAQ,IAAI;AACjB,UAAQ,MAAM,YAAY,iBAAiB,KAAK,IAAI,CAAC,QAAQ,aAAa,GAAG,KAAK,EAAE,KAAK,GAAG,CAAC;AAC7F,UAAQ,MAAM,YAAY,iBAAiB,GAAG,KAAK,OAAO,CAAC,KAAK,QAAQ,MAAM,KAAK,CAAC,CAAC,IAAI;AAC3F;AAEO,MAAM,mBAAmB,CAAC,YAAmC;AAClE,MAAI,CAAC,QAAS;AACd,UAAQ,MAAM,eAAe,eAAe;AAC5C,UAAQ,MAAM,eAAe,eAAe;AAC9C;AAMO,MAAM,0BAA0B,CACrC,SACA,SACA,oBAAoB,UACjB;AACH,MAAI,CAAC,QAAS;AAEd,QAAM,OAAO,oBAAoB,iBAAiB,OAAO,IAAI,cAAc,OAAO;AAElF,MAAI,YAAY;AAEhB,QAAM,YAAY,QAAQ;AAAA,IACxB,CAAC,KAAK,QAAQ;AACZ,YAAM,QAAQ,IAAI,UAAU,IAAI,QAAQ,SAAS;AACjD,UAAI,KAAK;AAAA,QACP,MAAM,KAAK,MAAM,WAAW,YAAY,KAAK;AAAA,QAC7C,IAAI,IAAI;AAAA,MACV,CAAC;AACD,mBAAa;AACb,aAAO;AAAA,IACT;AAAA,IACA,CAAC;AAAA,EACH;AAEA,YAAU,QAAQ,CAAC,aAAa;AAC9B,YAAQ,MAAM;AAAA,MACZ,iBAAiB,SAAS,EAAE;AAAA,MAC5B,SAAS,KAAK,IAAI,CAAC,QAAS,oBAAoB,aAAa,GAAG,MAAM,aAAa,GAAG,KAAM,EAAE,KAAK,GAAG;AAAA,IACxG;AAAA,EACF,CAAC;AACH;AAIO,MAAM,sBAAsB,CAAC,UAClC,UAAU,SAAY,SAAY,OAAO,SAAS,OAAO,KAAK,GAAG,EAAE;",
   "names": []
 }

package/dist/esm/helpers/index.js

@@ -2,6 +2,7 @@ import * as React from "react";
 export * from "./sizeToCss.js";
 export * from "./columnsToGrid.js";
 export * from "./cellPadding.js";
+export * from "./smallButtonSize.js";
 export * from "./getIdFromUniqueRowAccessor.js";
 export * from "./addCellData.js";
 //# sourceMappingURL=index.js.map

package/dist/esm/helpers/index.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../src/helpers/index.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "// style\nexport * from './sizeToCss.js';\nexport * from './columnsToGrid.js';\nexport * from './cellPadding.js';\n\n// props-related\nexport * from './getIdFromUniqueRowAccessor.js';\nexport * from './addCellData.js';\n"],
-  "mappings": "AAAA,YAAY,WAAW;ACCvB,cAAc;AACd,cAAc;AACd,cAAc;AAGd,cAAc;AACd,cAAc;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "// style\nexport * from './sizeToCss.js';\nexport * from './columnsToGrid.js';\nexport * from './cellPadding.js';\nexport * from './smallButtonSize.js';\n\n// props-related\nexport * from './getIdFromUniqueRowAccessor.js';\nexport * from './addCellData.js';\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACCvB,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AAGd,cAAc;AACd,cAAc;",
   "names": []
 }

package/dist/esm/helpers/smallButtonSize.js

@@ -0,0 +1,17 @@
+import * as React from "react";
+const SMALL_BUTTON_SIZE = { mobile: "1.249625rem", desktop: "1.538rem" };
+const smallButtonSizeCss = ({ theme }) => `
+  height: ${SMALL_BUTTON_SIZE.mobile};
+  min-height: ${SMALL_BUTTON_SIZE.mobile};
+  min-width: ${SMALL_BUTTON_SIZE.mobile};
+  font-size: ${theme.fontSizes.label[300]};
+  @media (min-width: ${theme.breakpoints.small}) {
+    height: ${SMALL_BUTTON_SIZE.desktop};
+    min-height: ${SMALL_BUTTON_SIZE.desktop};
+    min-width: ${SMALL_BUTTON_SIZE.desktop};
+  }
+`;
+export {
+  smallButtonSizeCss
+};
+//# sourceMappingURL=smallButtonSize.js.map

package/dist/esm/helpers/smallButtonSize.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../src/helpers/smallButtonSize.ts"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import type { Theme } from '@elliemae/ds-system';\n\n// The table owns the size of its small buttons (the filter trigger, the sort caret and the buttons of the filter\n// popover): they are default size ds-button buttons that the table sizes through its own styled wrappers, instead of\n// the `size=\"s\"` of ds-button, which ds-button warns \"will be deprecated in the future\". The values are the ones of the small button, kept on\n// purpose if ds-button changes them.\nconst SMALL_BUTTON_SIZE = { mobile: '1.249625rem', desktop: '1.538rem' } as const;\n\nexport const smallButtonSizeCss = ({ theme }: { theme: Theme }): string => `\n  height: ${SMALL_BUTTON_SIZE.mobile};\n  min-height: ${SMALL_BUTTON_SIZE.mobile};\n  min-width: ${SMALL_BUTTON_SIZE.mobile};\n  font-size: ${theme.fontSizes.label[300]};\n  @media (min-width: ${theme.breakpoints.small}) {\n    height: ${SMALL_BUTTON_SIZE.desktop};\n    min-height: ${SMALL_BUTTON_SIZE.desktop};\n    min-width: ${SMALL_BUTTON_SIZE.desktop};\n  }\n`;\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACMvB,MAAM,oBAAoB,EAAE,QAAQ,eAAe,SAAS,WAAW;AAEhE,MAAM,qBAAqB,CAAC,EAAE,MAAM,MAAgC;AAAA,YAC/D,kBAAkB,MAAM;AAAA,gBACpB,kBAAkB,MAAM;AAAA,eACzB,kBAAkB,MAAM;AAAA,eACxB,MAAM,UAAU,MAAM,GAAG,CAAC;AAAA,uBAClB,MAAM,YAAY,KAAK;AAAA,cAChC,kBAAkB,OAAO;AAAA,kBACrB,kBAAkB,OAAO;AAAA,iBAC1B,kBAAkB,OAAO;AAAA;AAAA;",
+  "names": []
+}

package/dist/esm/parts/Cells/CellFactory.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/parts/Cells/CellFactory.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable max-lines */\nimport React, { memo, useContext, useMemo, type PropsWithChildren } from 'react';\nimport { expandRowColumn } from '../../addons/Columns/index.js';\nimport { outOfTheBoxEditables } from '../../addons/Editables/index.js';\nimport { DATA_TESTID } from '../../configs/constants.js';\nimport { usePropsStore } from '../../configs/useStore/createInternalAndPropsContext.js';\nimport type { DSDataTableT } from '../../react-desc-prop-types.js';\nimport { StyledCell, StyledCellContent } from '../../styled.js';\nimport { TruncatedTooltipText } from '../../TruncatedTooltipText.js';\nimport { SortableItemContext } from '../HoC/SortableItemContext.js';\nimport { useCellStyle } from './useCellStyle.js';\n\nconst PureStandardCell = memo<PropsWithChildren<DSDataTableT.CellProps>>(\n  ({ column, cell, shouldAddExpandCell, cellIsNextToExpander, row, children }) => {\n    const cellStyle = useCellStyle(column, shouldAddExpandCell, cellIsNextToExpander, row)[1];\n    const getOwnerProps = usePropsStore((store) => store.get);\n    const getOwnerPropsArguments = React.useCallback(() => cell, [cell]);\n    return (\n      <StyledCell\n        column={column}\n        style={cellStyle}\n        role=\"cell\"\n        data-testid={DATA_TESTID.DATA_TABLE_CELL}\n        getOwnerProps={getOwnerProps}\n        getOwnerPropsArguments={getOwnerPropsArguments}\n      >\n        {children}\n      </StyledCell>\n    );\n  },\n);\n\nconst TruncableCellContent = memo((props: DSDataTableT.CellProps) => {\n  const { cell, column } = props;\n  const { render: CellComponent } = cell;\n\n  const textWrap = usePropsStore((state) => state.textWrap);\n  const appliedTextWrap = column.textWrap || textWrap;\n  if (appliedTextWrap === 'truncate') {\n    return <TruncatedTooltipText value={<CellComponent {...props} />} />;\n  }\n  return <CellComponent {...props} />;\n});\n\nconst ExpandableCellContent = memo(\n  (props: DSDataTableT.CellProps) => expandRowColumn.Cell && <expandRowColumn.Cell {...props} />,\n);\n\nconst DefaultCellContent = memo(\n  (\n    props: DSDataTableT.CellProps & {\n      getOwnerProps: DSDataTableT.GetOwnerPropsT;\n      getOwnerPropsArguments: () => DSDataTableT.Cell;\n    },\n  ) => {\n    const { shouldAddExpandCell, getOwnerProps, getOwnerPropsArguments } = props;\n\n    return (\n      <StyledCellContent getOwnerProps={getOwnerProps} getOwnerPropsArguments={getOwnerPropsArguments}>\n        {shouldAddExpandCell ? <ExpandableCellContent {...props} /> : <TruncableCellContent {...props} />}\n      </StyledCellContent>\n    );\n  },\n);\n\nconst EditableCell = memo(\n  (\n    props: DSDataTableT.CellProps & {\n      getOwnerProps: DSDataTableT.GetOwnerPropsT;\n      getOwnerPropsArguments: () => DSDataTableT.Cell;\n    },\n  ) => {\n    const { getOwnerProps, getOwnerPropsArguments, ...restProps } = props;\n    const { column } = restProps;\n    const DefaultCellContentJSX = (\n      <DefaultCellContent\n        {...restProps}\n        getOwnerProps={getOwnerProps}\n        getOwnerPropsArguments={getOwnerPropsArguments}\n      />\n    );\n\n    if (typeof column.editable === 'string') {\n      const { EditableComponent } = outOfTheBoxEditables?.[column.editable] ?? {};\n      // @ts-expect-error - data-table typescript is broken\n      if (EditableComponent) return <EditableComponent {...restProps} DefaultCellRender={DefaultCellContentJSX} />;\n    }\n    if (typeof column.editable === 'function') {\n      const ColumnEditableRenderProps = column.editable as React.ComponentType<\n        DSDataTableT.CellProps & { DefaultCellRender: JSX.Element }\n      >;\n      return <ColumnEditableRenderProps {...restProps} DefaultCellRender={DefaultCellContentJSX} />;\n    }\n\n    return null;\n  },\n);\n\ninterface CellFactoryProps {\n  cell: DSDataTableT.Cell;\n  column: DSDataTableT.InternalColumn;\n  row: DSDataTableT.InternalRow;\n  isRowSelected: boolean;\n  shouldAddExpandCell: boolean;\n  cellIsNextToExpander: boolean;\n  isDragOverlay: boolean;\n}\n\nconst CellFactory: React.ComponentType<CellFactoryProps> = (props) => {\n  const { column, row, cell } = props;\n  const cellRendererProps = usePropsStore((state) => state.cellRendererProps);\n  const disabledRows = usePropsStore((state) => state.disabledRows);\n  const domIdAffix = usePropsStore((state) => state.domIdAffix);\n  const getOwnerProps = usePropsStore((store) => store.get);\n  const getOwnerPropsArguments = React.useCallback(() => cell, [cell]);\n\n  const isDisabledRow = disabledRows[row.uid];\n\n  const { draggableProps } = useContext(SortableItemContext);\n\n  const cellProps: DSDataTableT.CellProps = useMemo(\n    () => ({\n      ...cellRendererProps,\n      ...props,\n      role: 'cell',\n      draggableProps,\n      isDisabledRow,\n      domIdAffix,\n    }),\n    [cellRendererProps, props, draggableProps, isDisabledRow, domIdAffix],\n  );\n\n  return (\n    <PureStandardCell {...cellProps}>\n      {column.editable && !disabledRows[row.uid] ? (\n        <EditableCell {...cellProps} getOwnerProps={getOwnerProps} getOwnerPropsArguments={getOwnerPropsArguments} />\n      ) : (\n        <DefaultCellContent\n          {...cellProps}\n          getOwnerProps={getOwnerProps}\n          getOwnerPropsArguments={getOwnerPropsArguments}\n        />\n      )}\n    </PureStandardCell>\n  );\n};\n\nexport { CellFactory };\n"],
-  "mappings": "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",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable max-lines */\nimport React, { memo, useContext, useMemo, type PropsWithChildren } from 'react';\nimport { expandRowColumn } from '../../addons/Columns/index.js';\nimport { outOfTheBoxEditables } from '../../addons/Editables/index.js';\nimport { DATA_TESTID } from '../../configs/constants.js';\nimport { usePropsStore } from '../../configs/useStore/createInternalAndPropsContext.js';\nimport type { DSDataTableT } from '../../react-desc-prop-types.js';\nimport { StyledCell, StyledCellContent } from '../../styled.js';\nimport { TruncatedTooltipText } from '../../TruncatedTooltipText.js';\nimport { SortableItemContext } from '../HoC/SortableItemContext.js';\nimport { useCellStyle } from './useCellStyle.js';\n\nconst PureStandardCell = memo<PropsWithChildren<DSDataTableT.CellProps>>(\n  ({ column, cell, shouldAddExpandCell, cellIsNextToExpander, row, children }) => {\n    const cellStyle = useCellStyle(column, shouldAddExpandCell, cellIsNextToExpander, row)[1];\n    const getOwnerProps = usePropsStore((store) => store.get);\n    const getOwnerPropsArguments = React.useCallback(() => cell, [cell]);\n    return (\n      <StyledCell\n        column={column}\n        style={cellStyle}\n        role=\"cell\"\n        data-testid={DATA_TESTID.DATA_TABLE_CELL}\n        getOwnerProps={getOwnerProps}\n        getOwnerPropsArguments={getOwnerPropsArguments}\n      >\n        {children}\n      </StyledCell>\n    );\n  },\n);\n\nconst TruncableCellContent = memo((props: DSDataTableT.CellProps) => {\n  const { cell, column } = props;\n  const { render: CellComponent } = cell;\n\n  const textWrap = usePropsStore((state) => state.textWrap);\n  const appliedTextWrap = column.textWrap || textWrap;\n  if (appliedTextWrap === 'truncate') {\n    return <TruncatedTooltipText value={<CellComponent {...props} />} />;\n  }\n  return <CellComponent {...props} />;\n});\n\nconst ExpandableCellContent = memo(\n  (props: DSDataTableT.CellProps) => expandRowColumn.Cell && <expandRowColumn.Cell {...props} />,\n);\n\nconst DefaultCellContent = memo(\n  (\n    props: DSDataTableT.CellProps & {\n      getOwnerProps: DSDataTableT.GetOwnerPropsT;\n      getOwnerPropsArguments: () => DSDataTableT.Cell;\n    },\n  ) => {\n    const { shouldAddExpandCell, getOwnerProps, getOwnerPropsArguments } = props;\n\n    return (\n      <StyledCellContent getOwnerProps={getOwnerProps} getOwnerPropsArguments={getOwnerPropsArguments}>\n        {shouldAddExpandCell ? <ExpandableCellContent {...props} /> : <TruncableCellContent {...props} />}\n      </StyledCellContent>\n    );\n  },\n);\n\nconst EditableCell = memo(\n  (\n    props: DSDataTableT.CellProps & {\n      getOwnerProps: DSDataTableT.GetOwnerPropsT;\n      getOwnerPropsArguments: () => DSDataTableT.Cell;\n    },\n  ) => {\n    const { getOwnerProps, getOwnerPropsArguments, ...restProps } = props;\n    const { column } = restProps;\n    const DefaultCellContentJSX = (\n      <DefaultCellContent\n        {...restProps}\n        getOwnerProps={getOwnerProps}\n        getOwnerPropsArguments={getOwnerPropsArguments}\n      />\n    );\n\n    if (typeof column.editable === 'string') {\n      const { EditableComponent } = outOfTheBoxEditables?.[column.editable] ?? {};\n      // @ts-expect-error - data-table typescript is broken\n      if (EditableComponent) return <EditableComponent {...restProps} DefaultCellRender={DefaultCellContentJSX} />;\n    }\n    if (typeof column.editable === 'function') {\n      const ColumnEditableRenderProps = column.editable as React.ComponentType<\n        DSDataTableT.CellProps & { DefaultCellRender: JSX.Element }\n      >;\n      return <ColumnEditableRenderProps {...restProps} DefaultCellRender={DefaultCellContentJSX} />;\n    }\n\n    return null;\n  },\n);\n\nconst CellFactory: React.ComponentType<DSDataTableT.CellFactoryProps> = (props) => {\n  const { column, row, cell } = props;\n  const cellRendererProps = usePropsStore((state) => state.cellRendererProps);\n  const disabledRows = usePropsStore((state) => state.disabledRows);\n  const domIdAffix = usePropsStore((state) => state.domIdAffix);\n  const getOwnerProps = usePropsStore((store) => store.get);\n  const getOwnerPropsArguments = React.useCallback(() => cell, [cell]);\n\n  const isDisabledRow = disabledRows[row.uid];\n\n  const { draggableProps } = useContext(SortableItemContext);\n\n  const cellProps: DSDataTableT.CellProps = useMemo(\n    () => ({\n      ...cellRendererProps,\n      ...props,\n      role: 'cell',\n      draggableProps,\n      isDisabledRow,\n      domIdAffix,\n    }),\n    [cellRendererProps, props, draggableProps, isDisabledRow, domIdAffix],\n  );\n\n  return (\n    <PureStandardCell {...cellProps}>\n      {column.editable && !disabledRows[row.uid] ? (\n        <EditableCell {...cellProps} getOwnerProps={getOwnerProps} getOwnerPropsArguments={getOwnerPropsArguments} />\n      ) : (\n        <DefaultCellContent\n          {...cellProps}\n          getOwnerProps={getOwnerProps}\n          getOwnerPropsArguments={getOwnerPropsArguments}\n        />\n      )}\n    </PureStandardCell>\n  );\n};\n\nexport { CellFactory };\n"],
+  "mappings": "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",
   "names": ["React"]
 }

package/dist/esm/parts/Cells/index.js

@@ -1,5 +1,6 @@
 import * as React from "react";
 import { Fragment, jsx } from "react/jsx-runtime";
+import { useCallback } from "react";
 import { INTERNAL_COLUMNS } from "../../addons/Columns/index.js";
 import { usePropsStore } from "../../configs/useStore/createInternalAndPropsContext.js";
 import { StyledActionCell } from "../../styled.js";
@@ -7,6 +8,7 @@ import { CellFactory } from "./CellFactory.js";
 const Cells = (props) => {
   const { row, isRowSelected, isDragOverlay } = props;
   const getOwnerProps = usePropsStore((store) => store.get);
+  const getOwnerPropsArguments = useCallback(() => ({ row }), [row]);
   if (row.depth <= 1) {
     let userCellIsNextToExpander = false;
     let userCellsProcessed = 0;
@@ -16,15 +18,24 @@ const Cells = (props) => {
       let jsx2 = null;
       if (column.id === "rowActions") {
         const ActionComponent = cell.render;
-        jsx2 = /* @__PURE__ */ jsx(StyledActionCell, { role: "cell", getOwnerProps, children: /* @__PURE__ */ jsx(
-          ActionComponent,
+        jsx2 = /* @__PURE__ */ jsx(
+          StyledActionCell,
           {
-            ...props,
-            cell,
-            column,
-            shouldAddExpandCell: isUserCell && userCellIsNextToExpander
-          }
-        ) }, cell.id);
+            role: "cell",
+            getOwnerProps,
+            getOwnerPropsArguments,
+            children: /* @__PURE__ */ jsx(
+              ActionComponent,
+              {
+                ...props,
+                cell,
+                column,
+                shouldAddExpandCell: isUserCell && userCellIsNextToExpander
+              }
+            )
+          },
+          cell.id
+        );
       } else if (column.id === "expander") {
         userCellIsNextToExpander = !isDragOverlay;
         jsx2 = /* @__PURE__ */ jsx(

package/dist/esm/parts/Cells/index.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/parts/Cells/index.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable complexity */\nimport React from 'react';\nimport { INTERNAL_COLUMNS } from '../../addons/Columns/index.js';\nimport { usePropsStore } from '../../configs/useStore/createInternalAndPropsContext.js';\nimport { StyledActionCell } from '../../styled.js';\n\nimport type { DSDataTableT } from '../../react-desc-prop-types.js';\nimport { CellFactory } from './CellFactory.js';\n\nconst Cells: React.ComponentType<{\n  row: DSDataTableT.InternalRow;\n  isRowSelected: boolean;\n  isDragOverlay: boolean;\n}> = (props) => {\n  const { row, isRowSelected, isDragOverlay } = props;\n  const getOwnerProps = usePropsStore((store) => store.get);\n  // we won't print sub-rows more nested than the first level\n  if (row.depth <= 1) {\n    let userCellIsNextToExpander = false;\n    let userCellsProcessed = 0;\n    return (\n      <>\n        {row.cells.map((cell) => {\n          const { column } = cell;\n\n          const isUserCell = !INTERNAL_COLUMNS.includes(column.id);\n\n          let jsx = null;\n\n          if (column.id === 'rowActions') {\n            const ActionComponent = cell.render;\n            jsx = (\n              <StyledActionCell role=\"cell\" key={cell.id} getOwnerProps={getOwnerProps}>\n                <ActionComponent\n                  {...props}\n                  cell={cell}\n                  column={column}\n                  shouldAddExpandCell={isUserCell && userCellIsNextToExpander}\n                />\n              </StyledActionCell>\n            );\n          } else if (column.id === 'expander') {\n            // Next user's cell will be next to expander\n            userCellIsNextToExpander = !isDragOverlay; // Don't add it on drag overlay\n            jsx = (\n              <CellFactory\n                cell={cell}\n                column={column}\n                row={row}\n                isRowSelected={isRowSelected}\n                shouldAddExpandCell\n                isDragOverlay={isDragOverlay}\n                key={cell.id}\n              />\n            );\n          } else {\n            jsx = (\n              <CellFactory\n                cell={cell}\n                column={column}\n                row={row}\n                isRowSelected={isRowSelected}\n                shouldAddExpandCell={false}\n                cellIsNextToExpander={isUserCell && userCellIsNextToExpander}\n                isDragOverlay={isDragOverlay}\n                key={cell.id}\n              />\n            );\n          }\n\n          // Drag overlay only need to print the DnD handle and the first user's cell\n          if (isDragOverlay) {\n            if (column.id !== 'dragHandleColumn' && (!isUserCell || userCellsProcessed !== 0)) jsx = null;\n          }\n\n          // Reset expand cell\n          if (isUserCell) {\n            userCellIsNextToExpander = false;\n            userCellsProcessed += 1;\n          }\n          return jsx;\n        })}\n      </>\n    );\n  }\n\n  return null;\n};\n\nexport { Cells };\n"],
-  "mappings": "AAAA,YAAY,WAAW;ACqBjB,mBAYU,WAZV;AAnBN,SAAS,wBAAwB;AACjC,SAAS,qBAAqB;AAC9B,SAAS,wBAAwB;AAGjC,SAAS,mBAAmB;AAE5B,MAAM,QAID,CAAC,UAAU;AACd,QAAM,EAAE,KAAK,eAAe,cAAc,IAAI;AAC9C,QAAM,gBAAgB,cAAc,CAAC,UAAU,MAAM,GAAG;AAExD,MAAI,IAAI,SAAS,GAAG;AAClB,QAAI,2BAA2B;AAC/B,QAAI,qBAAqB;AACzB,WACE,gCACG,cAAI,MAAM,IAAI,CAAC,SAAS;AACvB,YAAM,EAAE,OAAO,IAAI;AAEnB,YAAM,aAAa,CAAC,iBAAiB,SAAS,OAAO,EAAE;AAEvD,UAAIA,OAAM;AAEV,UAAI,OAAO,OAAO,cAAc;AAC9B,cAAM,kBAAkB,KAAK;AAC7B,QAAAA,OACE,oBAAC,oBAAiB,MAAK,QAAqB,eAC1C;AAAA,UAAC;AAAA;AAAA,YACE,GAAG;AAAA,YACJ;AAAA,YACA;AAAA,YACA,qBAAqB,cAAc;AAAA;AAAA,QACrC,KANiC,KAAK,EAOxC;AAAA,MAEJ,WAAW,OAAO,OAAO,YAAY;AAEnC,mCAA2B,CAAC;AAC5B,QAAAA,OACE;AAAA,UAAC;AAAA;AAAA,YACC;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,YACA,qBAAmB;AAAA,YACnB;AAAA;AAAA,UACK,KAAK;AAAA,QACZ;AAAA,MAEJ,OAAO;AACL,QAAAA,OACE;AAAA,UAAC;AAAA;AAAA,YACC;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,YACA,qBAAqB;AAAA,YACrB,sBAAsB,cAAc;AAAA,YACpC;AAAA;AAAA,UACK,KAAK;AAAA,QACZ;AAAA,MAEJ;AAGA,UAAI,eAAe;AACjB,YAAI,OAAO,OAAO,uBAAuB,CAAC,cAAc,uBAAuB,GAAI,CAAAA,OAAM;AAAA,MAC3F;AAGA,UAAI,YAAY;AACd,mCAA2B;AAC3B,8BAAsB;AAAA,MACxB;AACA,aAAOA;AAAA,IACT,CAAC,GACH;AAAA,EAEJ;AAEA,SAAO;AACT;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable complexity */\nimport React, { useCallback } from 'react';\nimport { INTERNAL_COLUMNS } from '../../addons/Columns/index.js';\nimport { usePropsStore } from '../../configs/useStore/createInternalAndPropsContext.js';\nimport { StyledActionCell } from '../../styled.js';\n\nimport type { DSDataTableT } from '../../react-desc-prop-types.js';\nimport { CellFactory } from './CellFactory.js';\n\nconst Cells: React.ComponentType<{\n  row: DSDataTableT.InternalRow;\n  isRowSelected: boolean;\n  isDragOverlay: boolean;\n}> = (props) => {\n  const { row, isRowSelected, isDragOverlay } = props;\n  const getOwnerProps = usePropsStore((store) => store.get);\n  const getOwnerPropsArguments = useCallback(() => ({ row }), [row]);\n  // we won't print sub-rows more nested than the first level\n  if (row.depth <= 1) {\n    let userCellIsNextToExpander = false;\n    let userCellsProcessed = 0;\n    return (\n      <>\n        {row.cells.map((cell) => {\n          const { column } = cell;\n\n          const isUserCell = !INTERNAL_COLUMNS.includes(column.id);\n\n          let jsx = null;\n\n          if (column.id === 'rowActions') {\n            const ActionComponent = cell.render;\n            jsx = (\n              <StyledActionCell\n                role=\"cell\"\n                key={cell.id}\n                getOwnerProps={getOwnerProps}\n                getOwnerPropsArguments={getOwnerPropsArguments}\n              >\n                <ActionComponent\n                  {...props}\n                  cell={cell}\n                  column={column}\n                  shouldAddExpandCell={isUserCell && userCellIsNextToExpander}\n                />\n              </StyledActionCell>\n            );\n          } else if (column.id === 'expander') {\n            // Next user's cell will be next to expander\n            userCellIsNextToExpander = !isDragOverlay; // Don't add it on drag overlay\n            jsx = (\n              <CellFactory\n                cell={cell}\n                column={column}\n                row={row}\n                isRowSelected={isRowSelected}\n                shouldAddExpandCell\n                isDragOverlay={isDragOverlay}\n                key={cell.id}\n              />\n            );\n          } else {\n            jsx = (\n              <CellFactory\n                cell={cell}\n                column={column}\n                row={row}\n                isRowSelected={isRowSelected}\n                shouldAddExpandCell={false}\n                cellIsNextToExpander={isUserCell && userCellIsNextToExpander}\n                isDragOverlay={isDragOverlay}\n                key={cell.id}\n              />\n            );\n          }\n\n          // Drag overlay only need to print the DnD handle and the first user's cell\n          if (isDragOverlay) {\n            if (column.id !== 'dragHandleColumn' && (!isUserCell || userCellsProcessed !== 0)) jsx = null;\n          }\n\n          // Reset expand cell\n          if (isUserCell) {\n            userCellIsNextToExpander = false;\n            userCellsProcessed += 1;\n          }\n          return jsx;\n        })}\n      </>\n    );\n  }\n\n  return null;\n};\n\nexport { Cells };\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACsBjB,mBAiBU,WAjBV;AArBN,SAAgB,mBAAmB;AACnC,SAAS,wBAAwB;AACjC,SAAS,qBAAqB;AAC9B,SAAS,wBAAwB;AAGjC,SAAS,mBAAmB;AAE5B,MAAM,QAID,CAAC,UAAU;AACd,QAAM,EAAE,KAAK,eAAe,cAAc,IAAI;AAC9C,QAAM,gBAAgB,cAAc,CAAC,UAAU,MAAM,GAAG;AACxD,QAAM,yBAAyB,YAAY,OAAO,EAAE,IAAI,IAAI,CAAC,GAAG,CAAC;AAEjE,MAAI,IAAI,SAAS,GAAG;AAClB,QAAI,2BAA2B;AAC/B,QAAI,qBAAqB;AACzB,WACE,gCACG,cAAI,MAAM,IAAI,CAAC,SAAS;AACvB,YAAM,EAAE,OAAO,IAAI;AAEnB,YAAM,aAAa,CAAC,iBAAiB,SAAS,OAAO,EAAE;AAEvD,UAAIA,OAAM;AAEV,UAAI,OAAO,OAAO,cAAc;AAC9B,cAAM,kBAAkB,KAAK;AAC7B,QAAAA,OACE;AAAA,UAAC;AAAA;AAAA,YACC,MAAK;AAAA,YAEL;AAAA,YACA;AAAA,YAEA;AAAA,cAAC;AAAA;AAAA,gBACE,GAAG;AAAA,gBACJ;AAAA,gBACA;AAAA,gBACA,qBAAqB,cAAc;AAAA;AAAA,YACrC;AAAA;AAAA,UATK,KAAK;AAAA,QAUZ;AAAA,MAEJ,WAAW,OAAO,OAAO,YAAY;AAEnC,mCAA2B,CAAC;AAC5B,QAAAA,OACE;AAAA,UAAC;AAAA;AAAA,YACC;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,YACA,qBAAmB;AAAA,YACnB;AAAA;AAAA,UACK,KAAK;AAAA,QACZ;AAAA,MAEJ,OAAO;AACL,QAAAA,OACE;AAAA,UAAC;AAAA;AAAA,YACC;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,YACA,qBAAqB;AAAA,YACrB,sBAAsB,cAAc;AAAA,YACpC;AAAA;AAAA,UACK,KAAK;AAAA,QACZ;AAAA,MAEJ;AAGA,UAAI,eAAe;AACjB,YAAI,OAAO,OAAO,uBAAuB,CAAC,cAAc,uBAAuB,GAAI,CAAAA,OAAM;AAAA,MAC3F;AAGA,UAAI,YAAY;AACd,mCAA2B;AAC3B,8BAAsB;AAAA,MACxB;AACA,aAAOA;AAAA,IACT,CAAC,GACH;AAAA,EAEJ;AAEA,SAAO;AACT;",
   "names": ["jsx"]
 }

package/dist/esm/parts/DnDHandle.js

@@ -3,7 +3,7 @@ import { jsx } from "react/jsx-runtime";
 import { createElement } from "react";
 import { GripperVertical } from "@elliemae/ds-icons";
 import { mergeRefs, styled } from "@elliemae/ds-system";
-import { useContext } from "react";
+import { useCallback, useContext } from "react";
 import { usePropsStore } from "../configs/useStore/createInternalAndPropsContext.js";
 import { DSDataTableName, DSDataTableSlots } from "../constants/index.js";
 import { DATA_TESTID } from "../configs/constants.js";
@@ -24,9 +24,10 @@ const StyledGripperButton = styled("div", { name: DSDataTableName, slot: DSDataT
     fill: ${({ isDragging, theme }) => isDragging && theme.colors.neutral["500"]};
   }
 `;
-const DragHandle = ({ id, isReachable, isDragOverlay, innerRef, isDisabled }) => {
+const DragHandle = ({ id, isReachable, isDragOverlay, innerRef, isDisabled, row, columnId }) => {
   const { draggableProps } = useContext(SortableItemContext);
   const getOwnerProps = usePropsStore((store) => store.get);
+  const getOwnerPropsArguments = useCallback(() => row ? { row } : { columnId }, [row, columnId]);
   const isActive = draggableProps && !!draggableProps.active;
   const isDragging = draggableProps && draggableProps.isDragging;
   const setActivatorNodeRef = draggableProps && draggableProps.setActivatorNodeRef;
@@ -48,7 +49,8 @@ const DragHandle = ({ id, isReachable, isDragOverlay, innerRef, isDisabled }) =>
       "aria-label": "Drag handle",
       isDragging,
       isDisabled,
-      getOwnerProps
+      getOwnerProps,
+      getOwnerPropsArguments
     },
     /* @__PURE__ */ jsx(GripperVertical, { size: "s" })
   );

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../src/parts/DnDHandle.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { GripperVertical } from '@elliemae/ds-icons';\nimport { mergeRefs, styled } from '@elliemae/ds-system';\nimport React, { useContext } from 'react';\nimport { usePropsStore } from '../configs/useStore/createInternalAndPropsContext.js';\nimport { DSDataTableName, DSDataTableSlots } from '../constants/index.js';\nimport { DATA_TESTID } from '../configs/constants.js';\nimport { SortableItemContext } from './HoC/SortableItemContext.js';\n\nconst StyledGripperButton = styled('div', { name: DSDataTableName, slot: DSDataTableSlots.DRAG_AND_DROP_GRIPPER })<{\n  isActive: boolean;\n  isDragOverlay?: boolean;\n  isDisabled?: boolean;\n  isDragging: boolean;\n}>`\n  pointer-events: ${({ isDisabled }) => (isDisabled ? 'none' : '')};\n  cursor: ${({ isActive, isDragOverlay, isDisabled }) => {\n    if (isDisabled) return 'not-allowed';\n    if (isActive || isDragOverlay) return 'grabbing';\n    return 'grab';\n  }};\n  outline: none;\n  display: flex;\n  align-items: center;\n  touch-action: none;\n\n  svg {\n    fill: ${({ isDragging, theme }) => isDragging && theme.colors.neutral['500']};\n  }\n`;\n\nexport const DragHandle: React.ComponentType<{\n  id: string;\n  isReachable: boolean;\n  isDragOverlay?: boolean;\n  isDisabled?: boolean;\n  innerRef: React.RefObject<HTMLDivElement> | React.RefCallback<HTMLDivElement>;\n}> = ({ id, isReachable, isDragOverlay, innerRef, isDisabled }) => {\n  const { draggableProps } = useContext(SortableItemContext);\n  const getOwnerProps = usePropsStore((store) => store.get);\n\n  const isActive = draggableProps && !!draggableProps.active;\n  const isDragging = draggableProps && draggableProps.isDragging;\n  const setActivatorNodeRef = draggableProps && draggableProps.setActivatorNodeRef;\n\n  return (\n    <StyledGripperButton\n      role=\"button\"\n      {...(draggableProps &&\n        !isDisabled && {\n          ...draggableProps.listeners,\n          ...draggableProps.attributes,\n        })}\n      isActive={isActive}\n      isDragOverlay={isDragOverlay}\n      innerRef={mergeRefs(innerRef, setActivatorNodeRef)}\n      tabIndex={isReachable ? 0 : -1}\n      data-testid={DATA_TESTID.DATA_TABLE_DRAG_HANDLE}\n      id={`drag-handle-btn-${id}`} // the domIdAffix should already be part of the props.id...\n      key={`${id}-drag-handle`}\n      aria-label=\"Drag handle\"\n      isDragging={isDragging}\n      isDisabled={isDisabled}\n      getOwnerProps={getOwnerProps}\n    >\n      <GripperVertical size=\"s\" />\n    </StyledGripperButton>\n  );\n};\n"],
-  "mappings": "AAAA,YAAY,WAAW;ACgEjB;AAnBF;AA7CJ,SAAS,uBAAuB;AAChC,SAAS,WAAW,cAAc;AAClC,SAAgB,kBAAkB;AAClC,SAAS,qBAAqB;AAC9B,SAAS,iBAAiB,wBAAwB;AAClD,SAAS,mBAAmB;AAC5B,SAAS,2BAA2B;AAEpC,MAAM,sBAAsB,OAAO,OAAO,EAAE,MAAM,iBAAiB,MAAM,iBAAiB,sBAAsB,CAAC;AAAA,oBAM7F,CAAC,EAAE,WAAW,MAAO,aAAa,SAAS,EAAG;AAAA,YACtD,CAAC,EAAE,UAAU,eAAe,WAAW,MAAM;AACrD,MAAI,WAAY,QAAO;AACvB,MAAI,YAAY,cAAe,QAAO;AACtC,SAAO;AACT,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,YAOS,CAAC,EAAE,YAAY,MAAM,MAAM,cAAc,MAAM,OAAO,QAAQ,KAAK,CAAC;AAAA;AAAA;AAIzE,MAAM,aAMR,CAAC,EAAE,IAAI,aAAa,eAAe,UAAU,WAAW,MAAM;AACjE,QAAM,EAAE,eAAe,IAAI,WAAW,mBAAmB;AACzD,QAAM,gBAAgB,cAAc,CAAC,UAAU,MAAM,GAAG;AAExD,QAAM,WAAW,kBAAkB,CAAC,CAAC,eAAe;AACpD,QAAM,aAAa,kBAAkB,eAAe;AACpD,QAAM,sBAAsB,kBAAkB,eAAe;AAE7D,SACE;AAAA,IAAC;AAAA;AAAA,MACC,MAAK;AAAA,MACJ,GAAI,kBACH,CAAC,cAAc;AAAA,QACb,GAAG,eAAe;AAAA,QAClB,GAAG,eAAe;AAAA,MACpB;AAAA,MACF;AAAA,MACA;AAAA,MACA,UAAU,UAAU,UAAU,mBAAmB;AAAA,MACjD,UAAU,cAAc,IAAI;AAAA,MAC5B,eAAa,YAAY;AAAA,MACzB,IAAI,mBAAmB,EAAE;AAAA,MACzB,KAAK,GAAG,EAAE;AAAA,MACV,cAAW;AAAA,MACX;AAAA,MACA;AAAA,MACA;AAAA;AAAA,IAEA,oBAAC,mBAAgB,MAAK,KAAI;AAAA,EAC5B;AAEJ;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { GripperVertical } from '@elliemae/ds-icons';\nimport { mergeRefs, styled } from '@elliemae/ds-system';\nimport React, { useCallback, useContext } from 'react';\nimport { usePropsStore } from '../configs/useStore/createInternalAndPropsContext.js';\nimport { DSDataTableName, DSDataTableSlots } from '../constants/index.js';\nimport { DATA_TESTID } from '../configs/constants.js';\nimport { SortableItemContext } from './HoC/SortableItemContext.js';\nimport type { DSDataTableT } from '../react-desc-prop-types.js';\n\nconst StyledGripperButton = styled('div', { name: DSDataTableName, slot: DSDataTableSlots.DRAG_AND_DROP_GRIPPER })<{\n  isActive: boolean;\n  isDragOverlay?: boolean;\n  isDisabled?: boolean;\n  isDragging: boolean;\n}>`\n  pointer-events: ${({ isDisabled }) => (isDisabled ? 'none' : '')};\n  cursor: ${({ isActive, isDragOverlay, isDisabled }) => {\n    if (isDisabled) return 'not-allowed';\n    if (isActive || isDragOverlay) return 'grabbing';\n    return 'grab';\n  }};\n  outline: none;\n  display: flex;\n  align-items: center;\n  touch-action: none;\n\n  svg {\n    fill: ${({ isDragging, theme }) => isDragging && theme.colors.neutral['500']};\n  }\n`;\n\nexport const DragHandle: React.ComponentType<{\n  id: string;\n  isReachable: boolean;\n  isDragOverlay?: boolean;\n  isDisabled?: boolean;\n  /** A row handle receives `row`, a column header handle receives `columnId`: they become the slot's named arguments */\n  row?: DSDataTableT.InternalRow;\n  columnId?: string;\n  innerRef: React.RefObject<HTMLDivElement> | React.RefCallback<HTMLDivElement>;\n}> = ({ id, isReachable, isDragOverlay, innerRef, isDisabled, row, columnId }) => {\n  const { draggableProps } = useContext(SortableItemContext);\n  const getOwnerProps = usePropsStore((store) => store.get);\n  const getOwnerPropsArguments = useCallback(() => (row ? { row } : { columnId }), [row, columnId]);\n\n  const isActive = draggableProps && !!draggableProps.active;\n  const isDragging = draggableProps && draggableProps.isDragging;\n  const setActivatorNodeRef = draggableProps && draggableProps.setActivatorNodeRef;\n\n  return (\n    <StyledGripperButton\n      role=\"button\"\n      {...(draggableProps &&\n        !isDisabled && {\n          ...draggableProps.listeners,\n          ...draggableProps.attributes,\n        })}\n      isActive={isActive}\n      isDragOverlay={isDragOverlay}\n      innerRef={mergeRefs(innerRef, setActivatorNodeRef)}\n      tabIndex={isReachable ? 0 : -1}\n      data-testid={DATA_TESTID.DATA_TABLE_DRAG_HANDLE}\n      id={`drag-handle-btn-${id}`} // the domIdAffix should already be part of the props.id...\n      key={`${id}-drag-handle`}\n      aria-label=\"Drag handle\"\n      isDragging={isDragging}\n      isDisabled={isDisabled}\n      getOwnerProps={getOwnerProps}\n      getOwnerPropsArguments={getOwnerPropsArguments}\n    >\n      <GripperVertical size=\"s\" />\n    </StyledGripperButton>\n  );\n};\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACsEjB;AApBF;AAlDJ,SAAS,uBAAuB;AAChC,SAAS,WAAW,cAAc;AAClC,SAAgB,aAAa,kBAAkB;AAC/C,SAAS,qBAAqB;AAC9B,SAAS,iBAAiB,wBAAwB;AAClD,SAAS,mBAAmB;AAC5B,SAAS,2BAA2B;AAGpC,MAAM,sBAAsB,OAAO,OAAO,EAAE,MAAM,iBAAiB,MAAM,iBAAiB,sBAAsB,CAAC;AAAA,oBAM7F,CAAC,EAAE,WAAW,MAAO,aAAa,SAAS,EAAG;AAAA,YACtD,CAAC,EAAE,UAAU,eAAe,WAAW,MAAM;AACrD,MAAI,WAAY,QAAO;AACvB,MAAI,YAAY,cAAe,QAAO;AACtC,SAAO;AACT,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,YAOS,CAAC,EAAE,YAAY,MAAM,MAAM,cAAc,MAAM,OAAO,QAAQ,KAAK,CAAC;AAAA;AAAA;AAIzE,MAAM,aASR,CAAC,EAAE,IAAI,aAAa,eAAe,UAAU,YAAY,KAAK,SAAS,MAAM;AAChF,QAAM,EAAE,eAAe,IAAI,WAAW,mBAAmB;AACzD,QAAM,gBAAgB,cAAc,CAAC,UAAU,MAAM,GAAG;AACxD,QAAM,yBAAyB,YAAY,MAAO,MAAM,EAAE,IAAI,IAAI,EAAE,SAAS,GAAI,CAAC,KAAK,QAAQ,CAAC;AAEhG,QAAM,WAAW,kBAAkB,CAAC,CAAC,eAAe;AACpD,QAAM,aAAa,kBAAkB,eAAe;AACpD,QAAM,sBAAsB,kBAAkB,eAAe;AAE7D,SACE;AAAA,IAAC;AAAA;AAAA,MACC,MAAK;AAAA,MACJ,GAAI,kBACH,CAAC,cAAc;AAAA,QACb,GAAG,eAAe;AAAA,QAClB,GAAG,eAAe;AAAA,MACpB;AAAA,MACF;AAAA,MACA;AAAA,MACA,UAAU,UAAU,UAAU,mBAAmB;AAAA,MACjD,UAAU,cAAc,IAAI;AAAA,MAC5B,eAAa,YAAY;AAAA,MACzB,IAAI,mBAAmB,EAAE;AAAA,MACzB,KAAK,GAAG,EAAE;AAAA,MACV,cAAW;AAAA,MACX;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA;AAAA,IAEA,oBAAC,mBAAgB,MAAK,KAAI;AAAA,EAC5B;AAEJ;",
   "names": []
 }

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

@@ -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 { styled } from '@elliemae/ds-system';\nimport React from 'react';\nimport { DSDataTableName, DSDataTableSlots } from '../constants/index.js';\nimport { DropIndicatorPosition } from '../configs/constants.js';\nimport { usePropsStore } from '../configs/useStore/createInternalAndPropsContext.js';\nimport { ZIndexDataTable } from '../configs/zIndexInternalConfig.js';\nimport type { DSDataTableT } from '../react-desc-prop-types.js';\n\ninterface DropIndicatorProps {\n  vertical: boolean;\n  dropIndicatorPosition: false | DSDataTableT.DropIndicatorPositionValues;\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', {\n  name: DSDataTableName,\n  slot: DSDataTableSlots.DROP_INDICATOR,\n})<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  const getOwnerProps = usePropsStore((store) => store.get);\n\n  if (\n    dropIndicatorPosition === false ||\n    dropIndicatorPosition === DropIndicatorPosition.None ||\n    dropIndicatorPosition === DropIndicatorPosition.Inside\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        getOwnerProps={getOwnerProps}\n      />\n    </>\n  );\n};\n\nexport { DropIndicator };\n"],
-  "mappings": "AAAA,YAAY,WAAW;ACqDnB,SAkBA,UAlBA,KAkBA,YAlBA;AArDJ,SAAS,cAAc;AAEvB,SAAS,iBAAiB,wBAAwB;AAClD,SAAS,6BAA6B;AACtC,SAAS,qBAAqB;AAC9B,SAAS,uBAAuB;AAUhC,MAAM,oBAAoB,CAAC,EAAE,uBAAuB,SAAS,MAA0B;AACrF,MAAI,UAAU;AACZ,WAAO;AAAA,cACG,0BAA0B,sBAAsB,SAAS,MAAM,OAAO;AAAA,eACrE,0BAA0B,sBAAsB,QAAQ,MAAM,OAAO;AAAA;AAAA,EAElF;AACA,SAAO;AAAA,aACI,0BAA0B,sBAAsB,SAAS,MAAM,OAAO;AAAA,gBACnE,0BAA0B,sBAAsB,QAAQ,MAAM,OAAO;AAAA;AAErF;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,OAAO;AAAA,EACpC,MAAM;AAAA,EACN,MAAM,iBAAiB;AACzB,CAAC;AAAA;AAAA,IAEG,iBAAiB;AAAA;AAAA,WAEV,CAAC,UAAW,MAAM,WAAW,QAAQ,MAAO;AAAA,YAC3C,CAAC,UAAW,MAAM,WAAW,SAAS,KAAM;AAAA,sBAClC,CAAC,EAAE,aAAa,MAAM,MAAO,cAAc,MAAM,OAAO,MAAM,GAAG,IAAI,MAAM,OAAO,OAAO,GAAG,CAAE;AAAA,aACvG,gBAAgB,cAAc;AAAA;AAG3C,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,QAAM,gBAAgB,cAAc,CAAC,UAAU,MAAM,GAAG;AAExD,MACE,0BAA0B,SAC1B,0BAA0B,sBAAsB,QAChD,0BAA0B,sBAAsB;AAEhD,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,QACA;AAAA;AAAA,IACF;AAAA,KACF;AAEJ;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { styled } from '@elliemae/ds-system';\nimport React from 'react';\nimport { DSDataTableName, DSDataTableSlots } from '../constants/index.js';\nimport { DropIndicatorPosition } from '../configs/constants.js';\nimport { usePropsStore } from '../configs/useStore/createInternalAndPropsContext.js';\nimport { ZIndexDataTable } from '../configs/zIndexInternalConfig.js';\nimport type { DSDataTableT } from '../react-desc-prop-types.js';\n\nconst getPositionStyles = ({ dropIndicatorPosition, vertical }: DSDataTableT.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 }: DSDataTableT.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', {\n  name: DSDataTableName,\n  slot: DSDataTableSlots.DROP_INDICATOR,\n})<DSDataTableT.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<DSDataTableT.DropIndicatorProps> = (props) => {\n  const { vertical, dropIndicatorPosition, isLast, isDropValid } = props;\n  const getOwnerProps = usePropsStore((store) => store.get);\n\n  if (\n    dropIndicatorPosition === false ||\n    dropIndicatorPosition === DropIndicatorPosition.None ||\n    dropIndicatorPosition === DropIndicatorPosition.Inside\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        getOwnerProps={getOwnerProps}\n      />\n    </>\n  );\n};\n\nexport { DropIndicator };\n"],
+  "mappings": "AAAA,YAAY,WAAW;AC8CnB,SAkBA,UAlBA,KAkBA,YAlBA;AA9CJ,SAAS,cAAc;AAEvB,SAAS,iBAAiB,wBAAwB;AAClD,SAAS,6BAA6B;AACtC,SAAS,qBAAqB;AAC9B,SAAS,uBAAuB;AAGhC,MAAM,oBAAoB,CAAC,EAAE,uBAAuB,SAAS,MAAuC;AAClG,MAAI,UAAU;AACZ,WAAO;AAAA,cACG,0BAA0B,sBAAsB,SAAS,MAAM,OAAO;AAAA,eACrE,0BAA0B,sBAAsB,QAAQ,MAAM,OAAO;AAAA;AAAA,EAElF;AACA,SAAO;AAAA,aACI,0BAA0B,sBAAsB,SAAS,MAAM,OAAO;AAAA,gBACnE,0BAA0B,sBAAsB,QAAQ,MAAM,OAAO;AAAA;AAErF;AAEA,MAAM,kBAAkB,CAAC,EAAE,uBAAuB,SAAS,OAAwC;AAAA,EACjG,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,OAAO;AAAA,EACpC,MAAM;AAAA,EACN,MAAM,iBAAiB;AACzB,CAAC;AAAA;AAAA,IAEG,iBAAiB;AAAA;AAAA,WAEV,CAAC,UAAW,MAAM,WAAW,QAAQ,MAAO;AAAA,YAC3C,CAAC,UAAW,MAAM,WAAW,SAAS,KAAM;AAAA,sBAClC,CAAC,EAAE,aAAa,MAAM,MAAO,cAAc,MAAM,OAAO,MAAM,GAAG,IAAI,MAAM,OAAO,OAAO,GAAG,CAAE;AAAA,aACvG,gBAAgB,cAAc;AAAA;AAG3C,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,gBAAsE,CAAC,UAAU;AACrF,QAAM,EAAE,UAAU,uBAAuB,QAAQ,YAAY,IAAI;AACjE,QAAM,gBAAgB,cAAc,CAAC,UAAU,MAAM,GAAG;AAExD,MACE,0BAA0B,SAC1B,0BAA0B,sBAAsB,QAChD,0BAA0B,sBAAsB;AAEhD,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,QACA;AAAA;AAAA,IACF;AAAA,KACF;AAEJ;",
   "names": []
 }

package/dist/esm/parts/EmptyContent.js

@@ -42,10 +42,10 @@ const EmptyStateContent = () => {
   if (isSkeleton) return null;
   if (React2.isValidElement(noResultsPlaceholder)) return noResultsPlaceholder;
   return /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsx(Icon, { size: "xxl" }),
+    /* @__PURE__ */ jsx(Icon, { size: "xxl", getOwnerProps }),
     /* @__PURE__ */ jsx(PrimaryMessage, { getOwnerProps, children: noResultsMessage }),
     noResultsSecondaryMessage ? /* @__PURE__ */ jsx(SecondaryMessage, { getOwnerProps, children: noResultsSecondaryMessage }) : null,
-    noResultsButtonLabel && onNoResultsButtonClick ? /* @__PURE__ */ jsx(Button, { buttonType: "outline", onClick: onNoResultsButtonClick, children: noResultsButtonLabel }) : null
+    noResultsButtonLabel && onNoResultsButtonClick ? /* @__PURE__ */ jsx(Button, { buttonType: "outline", onClick: onNoResultsButtonClick, getOwnerProps, children: noResultsButtonLabel }) : null
   ] });
 };
 const CenterContentFlexWrapper = styled("div", {

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../src/parts/EmptyContent.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { DSButtonV2 } from '@elliemae/ds-button-v2';\nimport { Grid } from '@elliemae/ds-grid';\nimport { WarningTriangle } from '@elliemae/ds-icons';\nimport { __UNSAFE_SPACE_TO_DIMSUM, styled, toMobile } from '@elliemae/ds-system';\nimport React from 'react';\nimport { usePropsStore } from '../configs/useStore/createInternalAndPropsContext.js';\nimport { DSDataTableName, DSDataTableSlots } from '../constants/index.js';\n\nconst Icon = styled(WarningTriangle, { name: DSDataTableName, slot: DSDataTableSlots.WARNING_ICON })`\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', { name: DSDataTableName, slot: DSDataTableSlots.EMPTY_PRIMARY_MESSAGE })`\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', { name: DSDataTableName, slot: DSDataTableSlots.EMPTY_SECONDARY_MESSAGE })`\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(DSButtonV2, { name: DSDataTableName, slot: DSDataTableSlots.EMPTY_BUTTON })`\n  margin-top: ${(props) => __UNSAFE_SPACE_TO_DIMSUM(props.theme.space.m)};\n  justify-self: center;\n  width: fit-content;\n`;\n\nconst EmptyStateContent = () => {\n  const noResultsMessage = usePropsStore((state) => state.noResultsMessage);\n  const noResultsSecondaryMessage = usePropsStore((state) => state.noResultsSecondaryMessage);\n  const noResultsButtonLabel = usePropsStore((state) => state.noResultsButtonLabel);\n  const onNoResultsButtonClick = usePropsStore((state) => state.onNoResultsButtonClick);\n  const isSkeleton = usePropsStore((state) => state.isSkeleton);\n  const noResultsPlaceholder = usePropsStore((state) => state.noResultsPlaceholder);\n  const getOwnerProps = usePropsStore((store) => store.get);\n\n  if (isSkeleton) return null;\n\n  if (React.isValidElement(noResultsPlaceholder)) return noResultsPlaceholder;\n\n  return (\n    <>\n      <Icon size=\"xxl\" />\n      <PrimaryMessage getOwnerProps={getOwnerProps}>{noResultsMessage}</PrimaryMessage>\n      {noResultsSecondaryMessage ? (\n        <SecondaryMessage getOwnerProps={getOwnerProps}>{noResultsSecondaryMessage}</SecondaryMessage>\n      ) : null}\n      {noResultsButtonLabel && onNoResultsButtonClick ? (\n        <Button buttonType=\"outline\" onClick={onNoResultsButtonClick}>\n          {noResultsButtonLabel}\n        </Button>\n      ) : null}\n    </>\n  );\n};\n\nconst CenterContentFlexWrapper = styled('div', {\n  name: DSDataTableName,\n  slot: DSDataTableSlots.CENTER_CONTENT_FLEX_WRAPPER,\n})<{ width: string }>`\n  width: ${({ width }) => width};\n  height: 100%;\n  display: flex;\n  align-items: center;\n`;\nconst EmptyStateWrapper = styled(Grid, { name: DSDataTableName, slot: DSDataTableSlots.EMPTY_STATE_WRAPPER })`\n  position: sticky;\n  height: fit-content;\n  top: 0;\n  left: 0;\n`;\n\nconst EmptyContent: React.ComponentType = () => {\n  const getOwnerProps = usePropsStore((store) => store.get);\n  const bodyClientWidth = usePropsStore((state) => state.bodyClientWidth);\n\n  return (\n    <CenterContentFlexWrapper width=\"100%\" role=\"row\" getOwnerProps={getOwnerProps}>\n      <EmptyStateWrapper\n        width={bodyClientWidth}\n        justifyContent=\"center\"\n        role=\"cell\"\n        aria-live=\"assertive\"\n        getOwnerProps={getOwnerProps}\n      >\n        <EmptyStateContent />\n      </EmptyStateWrapper>\n    </CenterContentFlexWrapper>\n  );\n};\n\nexport { EmptyContent };\n"],
-  "mappings": "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",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { DSButtonV2 } from '@elliemae/ds-button-v2';\nimport { Grid } from '@elliemae/ds-grid';\nimport { WarningTriangle } from '@elliemae/ds-icons';\nimport { __UNSAFE_SPACE_TO_DIMSUM, styled, toMobile } from '@elliemae/ds-system';\nimport React from 'react';\nimport { usePropsStore } from '../configs/useStore/createInternalAndPropsContext.js';\nimport { DSDataTableName, DSDataTableSlots } from '../constants/index.js';\n\nconst Icon = styled(WarningTriangle, { name: DSDataTableName, slot: DSDataTableSlots.WARNING_ICON })`\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', { name: DSDataTableName, slot: DSDataTableSlots.EMPTY_PRIMARY_MESSAGE })`\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', { name: DSDataTableName, slot: DSDataTableSlots.EMPTY_SECONDARY_MESSAGE })`\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(DSButtonV2, { name: DSDataTableName, slot: DSDataTableSlots.EMPTY_BUTTON })`\n  margin-top: ${(props) => __UNSAFE_SPACE_TO_DIMSUM(props.theme.space.m)};\n  justify-self: center;\n  width: fit-content;\n`;\n\nconst EmptyStateContent = () => {\n  const noResultsMessage = usePropsStore((state) => state.noResultsMessage);\n  const noResultsSecondaryMessage = usePropsStore((state) => state.noResultsSecondaryMessage);\n  const noResultsButtonLabel = usePropsStore((state) => state.noResultsButtonLabel);\n  const onNoResultsButtonClick = usePropsStore((state) => state.onNoResultsButtonClick);\n  const isSkeleton = usePropsStore((state) => state.isSkeleton);\n  const noResultsPlaceholder = usePropsStore((state) => state.noResultsPlaceholder);\n  const getOwnerProps = usePropsStore((store) => store.get);\n\n  if (isSkeleton) return null;\n\n  if (React.isValidElement(noResultsPlaceholder)) return noResultsPlaceholder;\n\n  return (\n    <>\n      <Icon size=\"xxl\" getOwnerProps={getOwnerProps} />\n      <PrimaryMessage getOwnerProps={getOwnerProps}>{noResultsMessage}</PrimaryMessage>\n      {noResultsSecondaryMessage ? (\n        <SecondaryMessage getOwnerProps={getOwnerProps}>{noResultsSecondaryMessage}</SecondaryMessage>\n      ) : null}\n      {noResultsButtonLabel && onNoResultsButtonClick ? (\n        <Button buttonType=\"outline\" onClick={onNoResultsButtonClick} getOwnerProps={getOwnerProps}>\n          {noResultsButtonLabel}\n        </Button>\n      ) : null}\n    </>\n  );\n};\n\nconst CenterContentFlexWrapper = styled('div', {\n  name: DSDataTableName,\n  slot: DSDataTableSlots.CENTER_CONTENT_FLEX_WRAPPER,\n})<{ width: string }>`\n  width: ${({ width }) => width};\n  height: 100%;\n  display: flex;\n  align-items: center;\n`;\nconst EmptyStateWrapper = styled(Grid, { name: DSDataTableName, slot: DSDataTableSlots.EMPTY_STATE_WRAPPER })`\n  position: sticky;\n  height: fit-content;\n  top: 0;\n  left: 0;\n`;\n\nconst EmptyContent: React.ComponentType = () => {\n  const getOwnerProps = usePropsStore((store) => store.get);\n  const bodyClientWidth = usePropsStore((state) => state.bodyClientWidth);\n\n  return (\n    <CenterContentFlexWrapper width=\"100%\" role=\"row\" getOwnerProps={getOwnerProps}>\n      <EmptyStateWrapper\n        width={bodyClientWidth}\n        justifyContent=\"center\"\n        role=\"cell\"\n        aria-live=\"assertive\"\n        getOwnerProps={getOwnerProps}\n      >\n        <EmptyStateContent />\n      </EmptyStateWrapper>\n    </CenterContentFlexWrapper>\n  );\n};\n\nexport { EmptyContent };\n"],
+  "mappings": "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",
   "names": ["React"]
 }

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

@@ -0,0 +1,58 @@
+import * as React from "react";
+import { jsx } from "react/jsx-runtime";
+import { useCallback, useMemo } from "react";
+import { FilterMenuButton } from "../../exported-related/FilterBar/FilterMenuButton.js";
+import { usePropsStore } from "../../configs/useStore/createInternalAndPropsContext.js";
+import { convertExtraOptionsToMenuButtonOptions } from "./convertExtraOptions.js";
+const FilterBarMenuButtonAddon = ({
+  removeAllFilters,
+  filterBarProps,
+  dropdownMenuRef
+}) => {
+  const {
+    extraOptions,
+    onDropdownMenuToggle,
+    onDropdownMenuClickOutside,
+    onDropdownMenuTriggerClick,
+    isDropdownMenuOpen
+  } = filterBarProps ?? {};
+  const getOwnerProps = usePropsStore((store) => store.get);
+  const options = useMemo(() => convertExtraOptionsToMenuButtonOptions(extraOptions), [extraOptions]);
+  const onOpen = useCallback(
+    ({ reason }) => {
+      if (reason === "trigger-click") onDropdownMenuTriggerClick?.();
+      onDropdownMenuToggle?.(true, "onOpen");
+    },
+    [onDropdownMenuToggle, onDropdownMenuTriggerClick]
+  );
+  const onClose = useCallback(
+    ({ reason }) => {
+      if (reason === "window-blur") return;
+      if (reason === "outside-click") {
+        onDropdownMenuToggle?.(false, "onClickOutside");
+        onDropdownMenuClickOutside?.();
+        return;
+      }
+      if (reason === "trigger-toggle") onDropdownMenuTriggerClick?.();
+      onDropdownMenuToggle?.(false, "onClose");
+    },
+    [onDropdownMenuClickOutside, onDropdownMenuToggle, onDropdownMenuTriggerClick]
+  );
+  const consumerOwnedOpenStateProps = typeof isDropdownMenuOpen === "boolean" ? { a11yDangerouslyConsumerOwnedMenuOpenState: isDropdownMenuOpen } : {};
+  return /* @__PURE__ */ jsx(
+    FilterMenuButton,
+    {
+      options,
+      onClearFilters: removeAllFilters,
+      innerRef: dropdownMenuRef,
+      getOwnerProps,
+      onOpen,
+      onClose,
+      ...consumerOwnedOpenStateProps
+    }
+  );
+};
+export {
+  FilterBarMenuButtonAddon
+};
+//# sourceMappingURL=FilterBarMenuButtonAddon.js.map

package/dist/esm/parts/FilterBar/FilterBarMenuButtonAddon.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/parts/FilterBar/FilterBarMenuButtonAddon.tsx"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { useCallback, useMemo } from 'react';\nimport type { DSMenuButtonT } from '@elliemae/ds-menu-button';\nimport { FilterMenuButton } from '../../exported-related/FilterBar/FilterMenuButton.js';\nimport { usePropsStore } from '../../configs/useStore/createInternalAndPropsContext.js';\nimport type { DSDataTableT } from '../../react-desc-prop-types.js';\nimport { convertExtraOptionsToMenuButtonOptions } from './convertExtraOptions.js';\n\nexport interface FilterBarMenuButtonAddonProps {\n  removeAllFilters: () => void;\n  filterBarProps: DSDataTableT.Props['filterBarProps'];\n  dropdownMenuRef: React.MutableRefObject<HTMLButtonElement | null>;\n}\n\n/** PUI-19093 (https://jira.elliemae.io/browse/PUI-19093)\n * The addon the filter bar renders when no `filterBarAddonRenderer` is provided: \"Clear Filters\" plus\n * `filterBarProps.extraOptions`, on `DSMenuButton`. It replaces the menu that came from `@elliemae/ds-legacy-dropdownmenu`.\n * The four `*DropdownMenu*` props of `filterBarProps` keep working through `DSMenuButton`'s `onOpen` / `onClose`\n * intents (see the migration notes for the differences of the accessible menu).\n */\nexport const FilterBarMenuButtonAddon: React.ComponentType<FilterBarMenuButtonAddonProps> = ({\n  removeAllFilters,\n  filterBarProps,\n  dropdownMenuRef,\n}) => {\n  const {\n    extraOptions,\n    onDropdownMenuToggle,\n    onDropdownMenuClickOutside,\n    onDropdownMenuTriggerClick,\n    isDropdownMenuOpen,\n  } = filterBarProps ?? {};\n\n  const getOwnerProps = usePropsStore((store) => store.get);\n\n  const options = useMemo(() => convertExtraOptionsToMenuButtonOptions(extraOptions), [extraOptions]);\n\n  const onOpen = useCallback(\n    ({ reason }: DSMenuButtonT.MenuOpenMetainfo) => {\n      if (reason === 'trigger-click') onDropdownMenuTriggerClick?.();\n      onDropdownMenuToggle?.(true, 'onOpen');\n    },\n    [onDropdownMenuToggle, onDropdownMenuTriggerClick],\n  );\n\n  const onClose = useCallback(\n    ({ reason }: DSMenuButtonT.MenuCloseMetainfo) => {\n      // the window losing focus is not an interaction of the user with the menu: it is not reported\n      if (reason === 'window-blur') return;\n      if (reason === 'outside-click') {\n        onDropdownMenuToggle?.(false, 'onClickOutside');\n        onDropdownMenuClickOutside?.();\n        return;\n      }\n      // a click on the trigger while the menu is open is a trigger click, as it was with the legacy menu\n      if (reason === 'trigger-toggle') onDropdownMenuTriggerClick?.();\n      onDropdownMenuToggle?.(false, 'onClose');\n    },\n    [onDropdownMenuClickOutside, onDropdownMenuToggle, onDropdownMenuTriggerClick],\n  );\n\n  const consumerOwnedOpenStateProps =\n    typeof isDropdownMenuOpen === 'boolean' ? { a11yDangerouslyConsumerOwnedMenuOpenState: isDropdownMenuOpen } : {};\n\n  return (\n    <FilterMenuButton\n      options={options}\n      onClearFilters={removeAllFilters}\n      innerRef={dropdownMenuRef}\n      getOwnerProps={getOwnerProps}\n      onOpen={onOpen}\n      onClose={onClose}\n      /* The consumer owns the open state only when it provides `isDropdownMenuOpen`, which is the contract this prop\n       * always had: the escape hatch of DSMenuButton is contingent on that boolean, nothing else opts into it. */\n      {...consumerOwnedOpenStateProps}\n    />\n  );\n};\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACgEnB;AAhEJ,SAAgB,aAAa,eAAe;AAE5C,SAAS,wBAAwB;AACjC,SAAS,qBAAqB;AAE9B,SAAS,8CAA8C;AAchD,MAAM,2BAA+E,CAAC;AAAA,EAC3F;AAAA,EACA;AAAA,EACA;AACF,MAAM;AACJ,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,IAAI,kBAAkB,CAAC;AAEvB,QAAM,gBAAgB,cAAc,CAAC,UAAU,MAAM,GAAG;AAExD,QAAM,UAAU,QAAQ,MAAM,uCAAuC,YAAY,GAAG,CAAC,YAAY,CAAC;AAElG,QAAM,SAAS;AAAA,IACb,CAAC,EAAE,OAAO,MAAsC;AAC9C,UAAI,WAAW,gBAAiB,8BAA6B;AAC7D,6BAAuB,MAAM,QAAQ;AAAA,IACvC;AAAA,IACA,CAAC,sBAAsB,0BAA0B;AAAA,EACnD;AAEA,QAAM,UAAU;AAAA,IACd,CAAC,EAAE,OAAO,MAAuC;AAE/C,UAAI,WAAW,cAAe;AAC9B,UAAI,WAAW,iBAAiB;AAC9B,+BAAuB,OAAO,gBAAgB;AAC9C,qCAA6B;AAC7B;AAAA,MACF;AAEA,UAAI,WAAW,iBAAkB,8BAA6B;AAC9D,6BAAuB,OAAO,SAAS;AAAA,IACzC;AAAA,IACA,CAAC,4BAA4B,sBAAsB,0BAA0B;AAAA,EAC/E;AAEA,QAAM,8BACJ,OAAO,uBAAuB,YAAY,EAAE,2CAA2C,mBAAmB,IAAI,CAAC;AAEjH,SACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA,gBAAgB;AAAA,MAChB,UAAU;AAAA,MACV;AAAA,MACA;AAAA,MACA;AAAA,MAGC,GAAG;AAAA;AAAA,EACN;AAEJ;",
+  "names": []
+}

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

@@ -1,6 +1,6 @@
 import * as React from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
-import React2, { useCallback, useMemo, useRef, useState } from "react";
+import React2, { useCallback, useMemo, useRef } from "react";
 import { FILTER_TYPES } from "../../exported-related/index.js";
 import {
   SelectPill,
@@ -12,7 +12,7 @@ import {
   FreeTextSearchPillPill
 } from "./components/index.js";
 import { StyledWrapper } from "./styled.js";
-import { DeprecatedDropdown } from "./DeprecatedDropdown.js";
+import { FilterBarMenuButtonAddon } from "./FilterBarMenuButtonAddon.js";
 import { usePropsStore } from "../../configs/useStore/createInternalAndPropsContext.js";
 const pillRenderMapper = {
   [FILTER_TYPES.SELECT]: SelectPill,
@@ -39,48 +39,17 @@ const FiltersBar = () => {
   const filters = usePropsStore((state) => state.filters);
   const visibleColumns = usePropsStore((state) => state.visibleColumns);
   const getOwnerProps = usePropsStore((store) => store.get);
-  const [isOpen, setIsOpen] = useState(false);
   const pillGroupRefs = useMemo(() => {
     const refs = [];
     for (let i = 0; i < filters.length; i += 1) refs.push(React2.createRef());
     return refs;
   }, [filters.length]);
   const dropdownMenuRef = useRef(null);
-  const {
-    filterBarAddonRenderer: FilterBarAddonRenderer,
-    onClearAllFiltersClick,
-    onDropdownMenuToggle,
-    onDropdownMenuClickOutside,
-    onDropdownMenuTriggerClick,
-    isDropdownMenuOpen
-  } = filterBarProps || {};
+  const { filterBarAddonRenderer: FilterBarAddonRenderer, onClearAllFiltersClick } = filterBarProps || {};
   const removeAllFilters = useCallback(() => {
     onFiltersChange([]);
     onClearAllFiltersClick?.();
-    setIsOpen(false);
   }, [onFiltersChange, onClearAllFiltersClick]);
-  const onFilterBarClose = useCallback(() => {
-    onDropdownMenuToggle?.(false, "onClose");
-    dropdownMenuRef.current?.focus();
-    setIsOpen(false);
-  }, [onDropdownMenuToggle]);
-  const onFilterBarOpen = useCallback(() => {
-    onDropdownMenuToggle?.(true, "onOpen");
-    setIsOpen(true);
-  }, [onDropdownMenuToggle]);
-  const onFilterBarOnClickOutside = useCallback(() => {
-    onDropdownMenuToggle?.(false, "onClickOutside");
-    onDropdownMenuClickOutside?.();
-    setIsOpen(false);
-  }, [onDropdownMenuClickOutside, onDropdownMenuToggle]);
-  const onTriggerClick = useCallback(() => {
-    onDropdownMenuTriggerClick?.();
-    onFilterBarOpen();
-  }, [onDropdownMenuTriggerClick, onFilterBarOpen]);
-  const finalIsOpen = useMemo(() => {
-    if (typeof isDropdownMenuOpen === "boolean") return isDropdownMenuOpen;
-    return isOpen;
-  }, [isDropdownMenuOpen, isOpen]);
   return /* @__PURE__ */ jsxs(
     StyledWrapper,
     {
@@ -114,15 +83,11 @@ const FiltersBar = () => {
           );
         }),
         FilterBarAddonRenderer ? /* @__PURE__ */ jsx(FilterBarAddonRenderer, { innerRef: dropdownMenuRef }) : /* @__PURE__ */ jsx(
-          DeprecatedDropdown,
+          FilterBarMenuButtonAddon,
           {
-            finalIsOpen,
-            onFilterBarClose,
-            onFilterBarOnClickOutside,
             removeAllFilters,
             filterBarProps,
-            dropdownMenuRef,
-            onTriggerClick
+            dropdownMenuRef
           }
         )
       ]

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

@@ -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, useMemo, useRef, useState } from 'react';\nimport { type TypescriptHelpersT } from '@elliemae/ds-typescript-helpers';\nimport { FILTER_TYPES } from '../../exported-related/index.js';\nimport {\n  SelectPill,\n  MultiSelectPill,\n  SingleDatePill,\n  DateRangePill,\n  NumberRangePill,\n  DateSwitcherPill,\n  FreeTextSearchPillPill,\n} from './components/index.js';\nimport { StyledWrapper } from './styled.js';\nimport { DeprecatedDropdown } from './DeprecatedDropdown.js';\nimport type { DSDataTableT } from '../../react-desc-prop-types.js';\nimport { usePropsStore } from '../../configs/useStore/createInternalAndPropsContext.js';\n\nconst pillRenderMapper = {\n  [FILTER_TYPES.SELECT]: SelectPill,\n  [FILTER_TYPES.SELECT_V2]: SelectPill,\n  [FILTER_TYPES.MULTI_SELECT]: MultiSelectPill,\n  [FILTER_TYPES.MULTI_SELECT_V2]: MultiSelectPill,\n  [FILTER_TYPES.SINGLE_DATE]: SingleDatePill,\n  [FILTER_TYPES.SINGLE_DATE_V2]: SingleDatePill,\n  [FILTER_TYPES.DATE_RANGE]: DateRangePill,\n  [FILTER_TYPES.DATE_RANGE_V2]: DateRangePill,\n  [FILTER_TYPES.DATE_SWITCHER]: DateSwitcherPill,\n  [FILTER_TYPES.DATE_SWITCHER_V2]: DateSwitcherPill,\n  [FILTER_TYPES.NUMBER_RANGE]: NumberRangePill,\n  [FILTER_TYPES.NUMBER_RANGE_V2]: NumberRangePill,\n  [FILTER_TYPES.CURRENCY_RANGE]: NumberRangePill,\n  [FILTER_TYPES.CURRENCY_RANGE_V2]: NumberRangePill,\n  [FILTER_TYPES.FREE_TEXT_SEARCH]: FreeTextSearchPillPill,\n  [FILTER_TYPES.FREE_TEXT_SEARCH_V2]: FreeTextSearchPillPill,\n} as const;\n\nexport const FiltersBar: React.ComponentType = () => {\n  const width = usePropsStore((state) => state.width);\n  const filterBarProps = usePropsStore((state) => state.filterBarProps);\n  const onFiltersChange = usePropsStore((state) => state.onFiltersChange);\n  const filters = usePropsStore((state) => state.filters);\n  const visibleColumns = usePropsStore((state) => state.visibleColumns);\n  const getOwnerProps = usePropsStore((store) => store.get);\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<HTMLButtonElement | null>(null);\n\n  const {\n    filterBarAddonRenderer: FilterBarAddonRenderer,\n    onClearAllFiltersClick,\n    onDropdownMenuToggle,\n    onDropdownMenuClickOutside,\n    onDropdownMenuTriggerClick,\n    isDropdownMenuOpen,\n  } = filterBarProps || {};\n\n  const removeAllFilters = useCallback(() => {\n    onFiltersChange([]);\n    onClearAllFiltersClick?.();\n    setIsOpen(false);\n  }, [onFiltersChange, onClearAllFiltersClick]);\n\n  const onFilterBarClose = useCallback(() => {\n    onDropdownMenuToggle?.(false, 'onClose');\n    dropdownMenuRef.current?.focus();\n    setIsOpen(false);\n  }, [onDropdownMenuToggle]);\n\n  const onFilterBarOpen = useCallback(() => {\n    onDropdownMenuToggle?.(true, 'onOpen');\n    setIsOpen(true);\n  }, [onDropdownMenuToggle]);\n\n  const onFilterBarOnClickOutside = useCallback(() => {\n    onDropdownMenuToggle?.(false, 'onClickOutside');\n    onDropdownMenuClickOutside?.();\n    setIsOpen(false);\n  }, [onDropdownMenuClickOutside, onDropdownMenuToggle]);\n\n  const onTriggerClick = useCallback(() => {\n    onDropdownMenuTriggerClick?.();\n    onFilterBarOpen();\n  }, [onDropdownMenuTriggerClick, onFilterBarOpen]);\n\n  const finalIsOpen = useMemo(() => {\n    if (typeof isDropdownMenuOpen === 'boolean') return isDropdownMenuOpen;\n    return isOpen;\n  }, [isDropdownMenuOpen, isOpen]);\n\n  return (\n    <StyledWrapper\n      width={width}\n      /**\n       * PUI-17317 - [DataTable] No announcement is made when a filter is added or removed\n       * https://jira.elliemae.io/browse/PUI-17317\n       *\n       * ## Problem\n       * Screen reader users received no feedback when filters were added or removed.\n       * The attempted fix \u2014 placing `aria-live=\"polite\"` + `aria-relevant=\"additions removals\"`\n       * on this wrapper \u2014 was unreliable across screen readers and, when it did fire,\n       * produced meaningless announcements by concatenating the pill label with its\n       * remove-button aria-label, e.g.:\n       *   \"React Dev Remove React Dev from Position\"\n       *\n       * WCAG recommends contextual messages like \"Filter applied: Currency = USD\".\n       * That level of specificity cannot be achieved automatically through aria attributes alone.\n       *\n       * ## Decision\n       * `aria-live` / `aria-relevant` were removed from this component.\n       * The responsibility for announcing filter changes is delegated to the consumer,\n       * who has access to the full filter state and can compose meaningful messages like:\n       *\n       * e.g: Multi Select Filter\n       *\n       * - \"Filter added: Position: React dev\"\n       * - \"Filter updated: Position: React dev, Fullstack dev\"\n       * - \"Filter removed: Position: React dev, Fullstack dev\"\n       */\n      /*\n      aria-live=\"polite\"\n      aria-relevant=\"additions removals\" \n      */\n      gutter=\"xs\"\n      getOwnerProps={getOwnerProps}\n    >\n      {filters.map(({ id: column, type, value }, index) => {\n        const matchedColumn = visibleColumns.find((col) => col.accessor === column);\n        const columnHeader = matchedColumn?.pillLabel || matchedColumn?.Header;\n        let Component:\n          | TypescriptHelpersT.ObjectValues<typeof pillRenderMapper>\n          | React.ComponentType<DSDataTableT.FilterPillProps<unknown>> = () => null;\n\n        const filterType = type;\n        if (filterType in pillRenderMapper) {\n          Component = pillRenderMapper[filterType as keyof typeof pillRenderMapper];\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            // eslint-disable-next-line @typescript-eslint/no-explicit-any, @typescript-eslint/no-unsafe-assignment\n            value={value as any}\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        <DeprecatedDropdown\n          finalIsOpen={finalIsOpen}\n          onFilterBarClose={onFilterBarClose}\n          onFilterBarOnClickOutside={onFilterBarOnClickOutside}\n          removeAllFilters={removeAllFilters}\n          filterBarProps={filterBarProps}\n          dropdownMenuRef={dropdownMenuRef}\n          onTriggerClick={onTriggerClick}\n        />\n      )}\n    </StyledWrapper>\n  );\n};\n"],
-  "mappings": "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",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { useCallback, useMemo, useRef } from 'react';\nimport { type TypescriptHelpersT } from '@elliemae/ds-typescript-helpers';\nimport { FILTER_TYPES } from '../../exported-related/index.js';\nimport {\n  SelectPill,\n  MultiSelectPill,\n  SingleDatePill,\n  DateRangePill,\n  NumberRangePill,\n  DateSwitcherPill,\n  FreeTextSearchPillPill,\n} from './components/index.js';\nimport { StyledWrapper } from './styled.js';\nimport { FilterBarMenuButtonAddon } from './FilterBarMenuButtonAddon.js';\nimport type { DSDataTableT } from '../../react-desc-prop-types.js';\nimport { usePropsStore } from '../../configs/useStore/createInternalAndPropsContext.js';\n\nconst pillRenderMapper = {\n  [FILTER_TYPES.SELECT]: SelectPill,\n  [FILTER_TYPES.SELECT_V2]: SelectPill,\n  [FILTER_TYPES.MULTI_SELECT]: MultiSelectPill,\n  [FILTER_TYPES.MULTI_SELECT_V2]: MultiSelectPill,\n  [FILTER_TYPES.SINGLE_DATE]: SingleDatePill,\n  [FILTER_TYPES.SINGLE_DATE_V2]: SingleDatePill,\n  [FILTER_TYPES.DATE_RANGE]: DateRangePill,\n  [FILTER_TYPES.DATE_RANGE_V2]: DateRangePill,\n  [FILTER_TYPES.DATE_SWITCHER]: DateSwitcherPill,\n  [FILTER_TYPES.DATE_SWITCHER_V2]: DateSwitcherPill,\n  [FILTER_TYPES.NUMBER_RANGE]: NumberRangePill,\n  [FILTER_TYPES.NUMBER_RANGE_V2]: NumberRangePill,\n  [FILTER_TYPES.CURRENCY_RANGE]: NumberRangePill,\n  [FILTER_TYPES.CURRENCY_RANGE_V2]: NumberRangePill,\n  [FILTER_TYPES.FREE_TEXT_SEARCH]: FreeTextSearchPillPill,\n  [FILTER_TYPES.FREE_TEXT_SEARCH_V2]: FreeTextSearchPillPill,\n} as const;\n\nexport const FiltersBar: React.ComponentType = () => {\n  const width = usePropsStore((state) => state.width);\n  const filterBarProps = usePropsStore((state) => state.filterBarProps);\n  const onFiltersChange = usePropsStore((state) => state.onFiltersChange);\n  const filters = usePropsStore((state) => state.filters);\n  const visibleColumns = usePropsStore((state) => state.visibleColumns);\n  const getOwnerProps = usePropsStore((store) => store.get);\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<HTMLButtonElement | null>(null);\n\n  const { filterBarAddonRenderer: FilterBarAddonRenderer, onClearAllFiltersClick } = filterBarProps || {};\n\n  const removeAllFilters = useCallback(() => {\n    onFiltersChange([]);\n    onClearAllFiltersClick?.();\n  }, [onFiltersChange, onClearAllFiltersClick]);\n\n  return (\n    <StyledWrapper\n      width={width}\n      /**\n       * PUI-17317 - [DataTable] No announcement is made when a filter is added or removed\n       * https://jira.elliemae.io/browse/PUI-17317\n       *\n       * ## Problem\n       * Screen reader users received no feedback when filters were added or removed.\n       * The attempted fix \u2014 placing `aria-live=\"polite\"` + `aria-relevant=\"additions removals\"`\n       * on this wrapper \u2014 was unreliable across screen readers and, when it did fire,\n       * produced meaningless announcements by concatenating the pill label with its\n       * remove-button aria-label, e.g.:\n       *   \"React Dev Remove React Dev from Position\"\n       *\n       * WCAG recommends contextual messages like \"Filter applied: Currency = USD\".\n       * That level of specificity cannot be achieved automatically through aria attributes alone.\n       *\n       * ## Decision\n       * `aria-live` / `aria-relevant` were removed from this component.\n       * The responsibility for announcing filter changes is delegated to the consumer,\n       * who has access to the full filter state and can compose meaningful messages like:\n       *\n       * e.g: Multi Select Filter\n       *\n       * - \"Filter added: Position: React dev\"\n       * - \"Filter updated: Position: React dev, Fullstack dev\"\n       * - \"Filter removed: Position: React dev, Fullstack dev\"\n       */\n      /*\n      aria-live=\"polite\"\n      aria-relevant=\"additions removals\" \n      */\n      gutter=\"xs\"\n      getOwnerProps={getOwnerProps}\n    >\n      {filters.map(({ id: column, type, value }, index) => {\n        const matchedColumn = visibleColumns.find((col) => col.accessor === column);\n        const columnHeader = matchedColumn?.pillLabel || matchedColumn?.Header;\n        let Component:\n          | TypescriptHelpersT.ObjectValues<typeof pillRenderMapper>\n          | React.ComponentType<DSDataTableT.FilterPillProps<unknown>> = () => null;\n\n        const filterType = type;\n        if (filterType in pillRenderMapper) {\n          Component = pillRenderMapper[filterType as keyof typeof pillRenderMapper];\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            // eslint-disable-next-line @typescript-eslint/no-explicit-any, @typescript-eslint/no-unsafe-assignment\n            value={value as any}\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        <FilterBarMenuButtonAddon\n          removeAllFilters={removeAllFilters}\n          filterBarProps={filterBarProps}\n          dropdownMenuRef={dropdownMenuRef}\n        />\n      )}\n    </StyledWrapper>\n  );\n};\n"],
+  "mappings": "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",
   "names": ["React"]
 }