npm - @elliemae/ds-data-table - Versions diffs - 3.62.1 → 3.70.0-alpha.10 - Mend

@elliemae/ds-data-table 3.62.1 → 3.70.0-alpha.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 (171) hide show

package/dist/cjs/constants/index.js.map CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/constants/index.ts", "../../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["import { slotObjectToDataTestIds } from '@elliemae/ds-system';\nimport { legacyDataTestIds } from './legacyToBeDeprecated.js';\n\nexport const DSDataTableName = 'DSDatatable';\n\n// we are naming this with the ${component_name}_slots convention to namespace & avoid errors on duplicate exports variables in aggregators\nexport const DATA_TABLE_SLOTS = {\n  ROOT: 'root',\n  CONTENT_WRAPPER: 'content-wrapper',\n  TABLE_WRAPPER: 'table-wrapper',\n  PAGINATION_WRAPPER: 'pagination-wrapper',\n  TABLE_CONTENT_WRAPPER: 'table-content-wrapper',\n  VIRTUAL_LIST_WRAPPER: 'virtual-list-wrapper',\n  HEAD_WRAPPER: 'head-wrapper',\n  HEAD_TR: 'head-tr',\n  HEAD_TH: 'head-th',\n  HEAD_RIGHT_ICONS_WRAPPER: 'head-right-icons-wrapper',\n  HEADER_CELL_WRAPPER: 'header-cell-wrapper',\n  EMPTY_HEADER: 'empty-header',\n  RESIZER: 'resizer',\n  ACTION_CELL: 'action-cell',\n  EXPAND_CELL_CONTAINER: 'expand-cell-container',\n  SINGLE_CELL_CONTAINER: 'single-cell-container',\n  DRAG_AND_DROP_GRIPPER: 'drag-and-drop-gripper',\n  TEXT_EDITABLE_CELL_INPUT: 'text-editable-cell-input',\n  FILTER_POPOVER_BUTTON: 'filter-popover-button',\n  FILTER_POPOVER_CONTENT: 'filter-popover-content',\n  DROP_INDICATOR: 'drop-indicator',\n  CELL: 'cell',\n  CELL_CONTENT: 'cell-content',\n  PENCIL_ICON: 'pencil-icon',\n  EDITABLE_CONTAINER: 'editable-container',\n  FULLSIZE_GRID: 'fullsize-grid',\n  ROW: 'row',\n  GROUP_HEADER_CONTAINER: 'group-header-container',\n  GROUP_HEADER_TITLE: 'header-title',\n  CELL_CONTAINER: 'cells-container',\n  TOOLBAR_WRAPPER: 'toolbar-wrapper',\n  TOOLBAR_BUTTONS_WRAPPER: 'toolbar-buttons-wrapper',\n  TOOLBAR_BUTTON: 'toolbar-button',\n  TOOLBAR_POSITION: 'toolbar-position',\n  EMPTY_STATE_WRAPPER: 'empty-state-wrapper',\n  WARNING_ICON: 'warning-icon',\n  EMPTY_PRIMARY_MESSAGE: 'empty-primary-message',\n  EMPTY_SECONDARY_MESSAGE: 'empty-secondary-message',\n  EMPTY_BUTTON: 'empty-button',\n  CENTER_CONTENT_FLEX_WRAPPER: 'center-content-flex-wrapper',\n  LOADER_WRAPPER: 'loader-wrapper',\n  FILTER_BAR_WRAPPER: 'filter-bar-wrapper',\n  FREE_TEXT_SEARCH_FILTER: 'free-text-search-filter',\n  FREE_TEXT_SEARCH_WRAPPER: 'free-text-search-wrapper',\n  FILTER_POPOVER: 'filter-popover',\n  FILTER_BAR_MENU_BUTTON: 'filter-bar-menu-button',\n  FILTER_POPOVER_FOOTER: 'filter-popover-footer',\n} as const;\n\n// we are naming this with the ${component_name}_data_testid convention to namespace & avoid errors on duplicate exports variables in aggregators\nexport const DATA_TABLE_DATA_TESTID = {\n  ...slotObjectToDataTestIds(DSDataTableName, DATA_TABLE_SLOTS),\n  /**\n   * These data-testid were defined in src/configs/constants.tsx\n   * but they were never exposed to consumers in the index.ts file.\n   * We are exposing them here for backward compatibility, as they are the ones used in the component implementation.\n   *\n   */\n  ...legacyDataTestIds,\n  /**\n   * As there is a mix of hardcoded data-testid and the ones auto generated by slot definitions\n   * we are overriding the auto generated ones with the hardcoded values for consistency.\n   */\n  CONTENT_WRAPPER: legacyDataTestIds.DATA_TABLE_CONTENT_WRAPPER,\n  TABLE_WRAPPER: legacyDataTestIds.DATA_TABLE_TABLE,\n  CELL_CONTAINER: legacyDataTestIds.DATA_TABLE_ROW_CONTENT,\n  DRAG_AND_DROP_GRIPPER: legacyDataTestIds.DATA_TABLE_DRAG_HANDLE,\n  FREE_TEXT_SEARCH_FILTER: legacyDataTestIds.DATA_TABLE_FILTER_FREE_TEXT_SEARCH,\n  FILTER_POPOVER_BUTTON: legacyDataTestIds.DATA_TABLE_FILTER_BUTTON,\n  HEAD_TH: legacyDataTestIds.DATA_TABLE_HEADER,\n  CELL: legacyDataTestIds.DATA_TABLE_CELL,\n  FULLSIZE_GRID: legacyDataTestIds.DATA_TABLE_ROW,\n  ROOT: legacyDataTestIds.DATA_TABLE_WRAPPER,\n  VIRTUAL_LIST_WRAPPER: legacyDataTestIds.DATA_TABLE_SCROLLABLE_CONTAINER,\n  GROUP_HEADER_CONTAINER: legacyDataTestIds.DATA_TABLE_ROW_GROUP_HEADER,\n  FILTER_BAR_MENU_BUTTON: legacyDataTestIds.DATA_TABLE_FILTER_BAR_DD_MENU_BUTTON,\n  // This one does not exist in the legacy list, but it was hardcoded in the component definition\n  EXPAND_CELL_CONTAINER: 'data-table-row-expand-cell',\n};\n\n// Legacy exports before Dimsum Compliance Task\nexport const DSDataTableSlots = DATA_TABLE_SLOTS;\nexport const DSDataTableDataTestIds = DATA_TABLE_DATA_TESTID;\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,uBAAwC;AACxC,kCAAkC;AAE3B,MAAM,kBAAkB;AAGxB,MAAM,mBAAmB;AAAA,EAC9B,MAAM;AAAA,EACN,iBAAiB;AAAA,EACjB,eAAe;AAAA,EACf,oBAAoB;AAAA,EACpB,uBAAuB;AAAA,EACvB,sBAAsB;AAAA,EACtB,cAAc;AAAA,EACd,SAAS;AAAA,EACT,SAAS;AAAA,EACT,0BAA0B;AAAA,EAC1B,qBAAqB;AAAA,EACrB,cAAc;AAAA,EACd,SAAS;AAAA,EACT,aAAa;AAAA,EACb,uBAAuB;AAAA,EACvB,uBAAuB;AAAA,EACvB,uBAAuB;AAAA,EACvB,0BAA0B;AAAA,EAC1B,uBAAuB;AAAA,EACvB,wBAAwB;AAAA,EACxB,gBAAgB;AAAA,EAChB,MAAM;AAAA,EACN,cAAc;AAAA,EACd,aAAa;AAAA,EACb,oBAAoB;AAAA,EACpB,eAAe;AAAA,EACf,KAAK;AAAA,EACL,wBAAwB;AAAA,EACxB,oBAAoB;AAAA,EACpB,gBAAgB;AAAA,EAChB,iBAAiB;AAAA,EACjB,yBAAyB;AAAA,EACzB,gBAAgB;AAAA,EAChB,kBAAkB;AAAA,EAClB,qBAAqB;AAAA,EACrB,cAAc;AAAA,EACd,uBAAuB;AAAA,EACvB,yBAAyB;AAAA,EACzB,cAAc;AAAA,EACd,6BAA6B;AAAA,EAC7B,gBAAgB;AAAA,EAChB,oBAAoB;AAAA,EACpB,yBAAyB;AAAA,EACzB,0BAA0B;AAAA,EAC1B,gBAAgB;AAAA,EAChB,wBAAwB;AAAA,EACxB,uBAAuB;AACzB;AAGO,MAAM,yBAAyB;AAAA,EACpC,OAAG,0CAAwB,iBAAiB,gBAAgB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAO5D,GAAG;AAAA;AAAA;AAAA;AAAA;AAAA,EAKH,iBAAiB,8CAAkB;AAAA,EACnC,eAAe,8CAAkB;AAAA,EACjC,gBAAgB,8CAAkB;AAAA,EAClC,uBAAuB,8CAAkB;AAAA,EACzC,yBAAyB,8CAAkB;AAAA,EAC3C,uBAAuB,8CAAkB;AAAA,EACzC,SAAS,8CAAkB;AAAA,EAC3B,MAAM,8CAAkB;AAAA,EACxB,eAAe,8CAAkB;AAAA,EACjC,MAAM,8CAAkB;AAAA,EACxB,sBAAsB,8CAAkB;AAAA,EACxC,wBAAwB,8CAAkB;AAAA,EAC1C,wBAAwB,8CAAkB;AAAA;AAAA,EAE1C,uBAAuB;AACzB;AAGO,MAAM,mBAAmB;AACzB,MAAM,yBAAyB;",
+  "sourcesContent": ["import { slotObjectToDataTestIds } from '@elliemae/ds-system';\nimport { legacyDataTestIds } from './legacyToBeDeprecated.js';\n\nexport const DSDataTableName = 'DSDatatable';\n\n// we are naming this with the ${component_name}_slots convention to namespace & avoid errors on duplicate exports variables in aggregators\nexport const DATA_TABLE_SLOTS = {\n  ROOT: 'root',\n  CONTENT_WRAPPER: 'content-wrapper',\n  TABLE_WRAPPER: 'table-wrapper',\n  PAGINATION_WRAPPER: 'pagination-wrapper',\n  TABLE_CONTENT_WRAPPER: 'table-content-wrapper',\n  VIRTUAL_LIST_WRAPPER: 'virtual-list-wrapper',\n  HEAD_WRAPPER: 'head-wrapper',\n  HEAD_TR: 'head-tr',\n  HEAD_TH: 'head-th',\n  HEAD_RIGHT_ICONS_WRAPPER: 'head-right-icons-wrapper',\n  HEADER_CELL_WRAPPER: 'header-cell-wrapper',\n  EMPTY_HEADER: 'empty-header',\n  RESIZER: 'resizer',\n  ACTION_CELL: 'action-cell',\n  EXPAND_CELL_CONTAINER: 'expand-cell-container',\n  GLOBAL_CHECKBOX_CONTAINER: 'global-checkbox-container',\n  SINGLE_CELL_CONTAINER: 'single-cell-container',\n  DRAG_AND_DROP_GRIPPER: 'drag-and-drop-gripper',\n  TEXT_EDITABLE_CELL_INPUT: 'text-editable-cell-input',\n  FILTER_POPOVER_BUTTON: 'filter-popover-button',\n  FILTER_POPOVER_CONTENT: 'filter-popover-content',\n  DROP_INDICATOR: 'drop-indicator',\n  CELL: 'cell',\n  CELL_CONTENT: 'cell-content',\n  PENCIL_ICON: 'pencil-icon',\n  EDITABLE_CONTAINER: 'editable-container',\n  FULLSIZE_GRID: 'fullsize-grid',\n  ROW: 'row',\n  GROUP_HEADER_CONTAINER: 'group-header-container',\n  GROUP_HEADER_TITLE: 'header-title',\n  CELL_CONTAINER: 'cells-container',\n  TOOLBAR_WRAPPER: 'toolbar-wrapper',\n  TOOLBAR_BUTTONS_WRAPPER: 'toolbar-buttons-wrapper',\n  TOOLBAR_BUTTON: 'toolbar-button',\n  TOOLBAR_POSITION: 'toolbar-position',\n  EMPTY_STATE_WRAPPER: 'empty-state-wrapper',\n  WARNING_ICON: 'warning-icon',\n  EMPTY_PRIMARY_MESSAGE: 'empty-primary-message',\n  EMPTY_SECONDARY_MESSAGE: 'empty-secondary-message',\n  EMPTY_BUTTON: 'empty-button',\n  CENTER_CONTENT_FLEX_WRAPPER: 'center-content-flex-wrapper',\n  LOADER_WRAPPER: 'loader-wrapper',\n  FILTER_BAR_WRAPPER: 'filter-bar-wrapper',\n  FREE_TEXT_SEARCH_FILTER: 'free-text-search-filter',\n  FREE_TEXT_SEARCH_WRAPPER: 'free-text-search-wrapper',\n  FILTER_POPOVER: 'filter-popover',\n  FILTER_BAR_MENU_BUTTON: 'filter-bar-menu-button',\n  FILTER_POPOVER_FOOTER: 'filter-popover-footer',\n} as const;\n\n// we are naming this with the ${component_name}_data_testid convention to namespace & avoid errors on duplicate exports variables in aggregators\nexport const DATA_TABLE_DATA_TESTID = {\n  ...slotObjectToDataTestIds(DSDataTableName, DATA_TABLE_SLOTS),\n  /**\n   * These data-testid were defined in src/configs/constants.tsx\n   * but they were never exposed to consumers in the index.ts file.\n   * We are exposing them here for backward compatibility, as they are the ones used in the component implementation.\n   *\n   */\n  ...legacyDataTestIds,\n  /**\n   * As there is a mix of hardcoded data-testid and the ones auto generated by slot definitions\n   * we are overriding the auto generated ones with the hardcoded values for consistency.\n   */\n  CONTENT_WRAPPER: legacyDataTestIds.DATA_TABLE_CONTENT_WRAPPER,\n  TABLE_WRAPPER: legacyDataTestIds.DATA_TABLE_TABLE,\n  CELL_CONTAINER: legacyDataTestIds.DATA_TABLE_ROW_CONTENT,\n  DRAG_AND_DROP_GRIPPER: legacyDataTestIds.DATA_TABLE_DRAG_HANDLE,\n  FREE_TEXT_SEARCH_FILTER: legacyDataTestIds.DATA_TABLE_FILTER_FREE_TEXT_SEARCH,\n  FILTER_POPOVER_BUTTON: legacyDataTestIds.DATA_TABLE_FILTER_BUTTON,\n  HEAD_TH: legacyDataTestIds.DATA_TABLE_HEADER,\n  CELL: legacyDataTestIds.DATA_TABLE_CELL,\n  FULLSIZE_GRID: legacyDataTestIds.DATA_TABLE_ROW,\n  ROOT: legacyDataTestIds.DATA_TABLE_WRAPPER,\n  VIRTUAL_LIST_WRAPPER: legacyDataTestIds.DATA_TABLE_SCROLLABLE_CONTAINER,\n  GROUP_HEADER_CONTAINER: legacyDataTestIds.DATA_TABLE_ROW_GROUP_HEADER,\n  FILTER_BAR_MENU_BUTTON: legacyDataTestIds.DATA_TABLE_FILTER_BAR_DD_MENU_BUTTON,\n  // This one does not exist in the legacy list, but it was hardcoded in the component definition\n  EXPAND_CELL_CONTAINER: 'data-table-row-expand-cell',\n};\n\n// Legacy exports before Dimsum Compliance Task\nexport const DSDataTableSlots = DATA_TABLE_SLOTS;\nexport const DSDataTableDataTestIds = DATA_TABLE_DATA_TESTID;\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,uBAAwC;AACxC,kCAAkC;AAE3B,MAAM,kBAAkB;AAGxB,MAAM,mBAAmB;AAAA,EAC9B,MAAM;AAAA,EACN,iBAAiB;AAAA,EACjB,eAAe;AAAA,EACf,oBAAoB;AAAA,EACpB,uBAAuB;AAAA,EACvB,sBAAsB;AAAA,EACtB,cAAc;AAAA,EACd,SAAS;AAAA,EACT,SAAS;AAAA,EACT,0BAA0B;AAAA,EAC1B,qBAAqB;AAAA,EACrB,cAAc;AAAA,EACd,SAAS;AAAA,EACT,aAAa;AAAA,EACb,uBAAuB;AAAA,EACvB,2BAA2B;AAAA,EAC3B,uBAAuB;AAAA,EACvB,uBAAuB;AAAA,EACvB,0BAA0B;AAAA,EAC1B,uBAAuB;AAAA,EACvB,wBAAwB;AAAA,EACxB,gBAAgB;AAAA,EAChB,MAAM;AAAA,EACN,cAAc;AAAA,EACd,aAAa;AAAA,EACb,oBAAoB;AAAA,EACpB,eAAe;AAAA,EACf,KAAK;AAAA,EACL,wBAAwB;AAAA,EACxB,oBAAoB;AAAA,EACpB,gBAAgB;AAAA,EAChB,iBAAiB;AAAA,EACjB,yBAAyB;AAAA,EACzB,gBAAgB;AAAA,EAChB,kBAAkB;AAAA,EAClB,qBAAqB;AAAA,EACrB,cAAc;AAAA,EACd,uBAAuB;AAAA,EACvB,yBAAyB;AAAA,EACzB,cAAc;AAAA,EACd,6BAA6B;AAAA,EAC7B,gBAAgB;AAAA,EAChB,oBAAoB;AAAA,EACpB,yBAAyB;AAAA,EACzB,0BAA0B;AAAA,EAC1B,gBAAgB;AAAA,EAChB,wBAAwB;AAAA,EACxB,uBAAuB;AACzB;AAGO,MAAM,yBAAyB;AAAA,EACpC,OAAG,0CAAwB,iBAAiB,gBAAgB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAO5D,GAAG;AAAA;AAAA;AAAA;AAAA;AAAA,EAKH,iBAAiB,8CAAkB;AAAA,EACnC,eAAe,8CAAkB;AAAA,EACjC,gBAAgB,8CAAkB;AAAA,EAClC,uBAAuB,8CAAkB;AAAA,EACzC,yBAAyB,8CAAkB;AAAA,EAC3C,uBAAuB,8CAAkB;AAAA,EACzC,SAAS,8CAAkB;AAAA,EAC3B,MAAM,8CAAkB;AAAA,EACxB,eAAe,8CAAkB;AAAA,EACjC,MAAM,8CAAkB;AAAA,EACxB,sBAAsB,8CAAkB;AAAA,EACxC,wBAAwB,8CAAkB;AAAA,EAC1C,wBAAwB,8CAAkB;AAAA;AAAA,EAE1C,uBAAuB;AACzB;AAGO,MAAM,mBAAmB;AACzB,MAAM,yBAAyB;",
   "names": []
 }

package/dist/cjs/exported-related/EditableCell.js CHANGED Viewed

@@ -52,8 +52,8 @@ const EditableCell = (props) => {
   }, [isEditing]);
   const handleCellClick = (0, import_react.useCallback)(
     (e) => {
+      e.stopPropagation();
       if (!isEditing) {
-        e.stopPropagation();
         setIsEditing(true);
       }
     },

package/dist/cjs/exported-related/EditableCell.js.map CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/exported-related/EditableCell.tsx", "../../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["import React, { useCallback, useLayoutEffect, useState } from 'react';\nimport { usePropsStore } from '../configs/useStore/createInternalAndPropsContext.js';\nimport type { DSDataTableT } from '../react-desc-prop-types.js';\nimport { StyledEditableContainer, StyledPencilIcon } from '../styled.js';\n\nexport const EditableCell: React.ComponentType<{\n  StandardRender: JSX.Element;\n  EditableRenderer: JSX.Element;\n  cell: DSDataTableT.Cell<HTMLDivElement>;\n  isRowSelected?: boolean;\n}> = (props) => {\n  const { StandardRender, EditableRenderer, cell, isRowSelected } = props;\n  const domIdAffix = usePropsStore((state) => state.domIdAffix);\n  const virtualListHelpers = usePropsStore((state) => state.virtualListHelpers);\n  const getOwnerProps = usePropsStore((store) => store.get);\n  const getOwnerPropsArguments = React.useCallback(() => cell, [cell]);\n\n  const [isEditing, setIsEditing] = useState(false);\n  const [lastIsEditing, setLastIsEditing] = useState(false);\n  // When an editable cell is switched on-off, we recalculate the height of the rows\n  useLayoutEffect(() => {\n    if (isEditing !== lastIsEditing) {\n      virtualListHelpers.measure();\n      setLastIsEditing(isEditing);\n    }\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [isEditing]);\n\n  const handleCellClick = useCallback(\n    (e: React.MouseEvent | React.KeyboardEvent) => {\n      if (!isEditing) {\n        e.stopPropagation();\n        setIsEditing(true);\n      }\n    },\n    [isEditing],\n  );\n\n  const handleOnKeyDown = useCallback(\n    (e: React.KeyboardEvent) => {\n      if (isEditing) {\n        e.stopPropagation();\n        if (['Enter', 'Escape'].includes(e.code)) {\n          setIsEditing(false);\n        }\n      } else if (['Enter', 'Space'].includes(e.code)) {\n        handleCellClick(e);\n      }\n    },\n    [isEditing, handleCellClick, setIsEditing],\n  );\n\n  const handleOnBlur = useCallback(\n    (event: React.FocusEvent) => {\n      if (isEditing && !event.currentTarget?.contains(event.relatedTarget)) {\n        // Not triggered when swapping focus between children\n        setIsEditing(false);\n      }\n    },\n    [isEditing],\n  );\n  const cols = !isEditing ? ['auto', 'min-content'] : ['auto'];\n  return (\n    <StyledEditableContainer\n      cols={cols}\n      tabIndex={isRowSelected && !isEditing ? 0 : -1}\n      innerRef={cell.ref}\n      onClick={handleCellClick}\n      onKeyDown={handleOnKeyDown}\n      onBlur={handleOnBlur}\n      shouldDisplayEditIcon={cell.column.alwaysDisplayEditIcon}\n      role=\"group\"\n      aria-labelledby={isEditing ? undefined : cell.id}\n      getOwnerProps={getOwnerProps}\n      getOwnerPropsArguments={getOwnerPropsArguments}\n    >\n      {!isEditing ? StandardRender : EditableRenderer}\n      {!isEditing && <StyledPencilIcon />}\n      <span id={`editable-cell-${cell.id}-${domIdAffix}`} style={{ display: 'none' }} aria-hidden=\"true\">\n        {cell.value as string}, editable cell. To edit the content&apos;s of this cell, press the Enter key\n      </span>\n    </StyledEditableContainer>\n  );\n};\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;AD6EF;AA7ErB,mBAA8D;AAC9D,2CAA8B;AAE9B,oBAA0D;AAEnD,MAAM,eAKR,CAAC,UAAU;AACd,QAAM,EAAE,gBAAgB,kBAAkB,MAAM,cAAc,IAAI;AAClE,QAAM,iBAAa,oDAAc,CAAC,UAAU,MAAM,UAAU;AAC5D,QAAM,yBAAqB,oDAAc,CAAC,UAAU,MAAM,kBAAkB;AAC5E,QAAM,oBAAgB,oDAAc,CAAC,UAAU,MAAM,GAAG;AACxD,QAAM,yBAAyB,aAAAA,QAAM,YAAY,MAAM,MAAM,CAAC,IAAI,CAAC;AAEnE,QAAM,CAAC,WAAW,YAAY,QAAI,uBAAS,KAAK;AAChD,QAAM,CAAC,eAAe,gBAAgB,QAAI,uBAAS,KAAK;AAExD,oCAAgB,MAAM;AACpB,QAAI,cAAc,eAAe;AAC/B,yBAAmB,QAAQ;AAC3B,uBAAiB,SAAS;AAAA,IAC5B;AAAA,EAEF,GAAG,CAAC,SAAS,CAAC;AAEd,QAAM,sBAAkB;AAAA,IACtB,CAAC,MAA8C;AAC7C,UAAI,CAAC,WAAW;AACd,UAAE,gBAAgB;AAClB,qBAAa,IAAI;AAAA,MACnB;AAAA,IACF;AAAA,IACA,CAAC,SAAS;AAAA,EACZ;AAEA,QAAM,sBAAkB;AAAA,IACtB,CAAC,MAA2B;AAC1B,UAAI,WAAW;AACb,UAAE,gBAAgB;AAClB,YAAI,CAAC,SAAS,QAAQ,EAAE,SAAS,EAAE,IAAI,GAAG;AACxC,uBAAa,KAAK;AAAA,QACpB;AAAA,MACF,WAAW,CAAC,SAAS,OAAO,EAAE,SAAS,EAAE,IAAI,GAAG;AAC9C,wBAAgB,CAAC;AAAA,MACnB;AAAA,IACF;AAAA,IACA,CAAC,WAAW,iBAAiB,YAAY;AAAA,EAC3C;AAEA,QAAM,mBAAe;AAAA,IACnB,CAAC,UAA4B;AAC3B,UAAI,aAAa,CAAC,MAAM,eAAe,SAAS,MAAM,aAAa,GAAG;AAEpE,qBAAa,KAAK;AAAA,MACpB;AAAA,IACF;AAAA,IACA,CAAC,SAAS;AAAA,EACZ;AACA,QAAM,OAAO,CAAC,YAAY,CAAC,QAAQ,aAAa,IAAI,CAAC,MAAM;AAC3D,SACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA,UAAU,iBAAiB,CAAC,YAAY,IAAI;AAAA,MAC5C,UAAU,KAAK;AAAA,MACf,SAAS;AAAA,MACT,WAAW;AAAA,MACX,QAAQ;AAAA,MACR,uBAAuB,KAAK,OAAO;AAAA,MACnC,MAAK;AAAA,MACL,mBAAiB,YAAY,SAAY,KAAK;AAAA,MAC9C;AAAA,MACA;AAAA,MAEC;AAAA,SAAC,YAAY,iBAAiB;AAAA,QAC9B,CAAC,aAAa,4CAAC,kCAAiB;AAAA,QACjC,6CAAC,UAAK,IAAI,iBAAiB,KAAK,EAAE,IAAI,UAAU,IAAI,OAAO,EAAE,SAAS,OAAO,GAAG,eAAY,QACzF;AAAA,eAAK;AAAA,UAAgB;AAAA,WACxB;AAAA;AAAA;AAAA,EACF;AAEJ;",
+  "sourcesContent": ["import React, { useCallback, useLayoutEffect, useState } from 'react';\nimport { usePropsStore } from '../configs/useStore/createInternalAndPropsContext.js';\nimport type { DSDataTableT } from '../react-desc-prop-types.js';\nimport { StyledEditableContainer, StyledPencilIcon } from '../styled.js';\n\nexport const EditableCell: React.ComponentType<{\n  StandardRender: JSX.Element;\n  EditableRenderer: JSX.Element;\n  cell: DSDataTableT.Cell<HTMLDivElement>;\n  isRowSelected?: boolean;\n}> = (props) => {\n  const { StandardRender, EditableRenderer, cell, isRowSelected } = props;\n  const domIdAffix = usePropsStore((state) => state.domIdAffix);\n  const virtualListHelpers = usePropsStore((state) => state.virtualListHelpers);\n  const getOwnerProps = usePropsStore((store) => store.get);\n  const getOwnerPropsArguments = React.useCallback(() => cell, [cell]);\n\n  const [isEditing, setIsEditing] = useState(false);\n  const [lastIsEditing, setLastIsEditing] = useState(false);\n  // When an editable cell is switched on-off, we recalculate the height of the rows\n  useLayoutEffect(() => {\n    if (isEditing !== lastIsEditing) {\n      virtualListHelpers.measure();\n      setLastIsEditing(isEditing);\n    }\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [isEditing]);\n\n  const handleCellClick = useCallback(\n    (e: React.MouseEvent | React.KeyboardEvent) => {\n      e.stopPropagation();\n      if (!isEditing) {\n        setIsEditing(true);\n      }\n    },\n    [isEditing],\n  );\n\n  const handleOnKeyDown = useCallback(\n    (e: React.KeyboardEvent) => {\n      if (isEditing) {\n        e.stopPropagation();\n        if (['Enter', 'Escape'].includes(e.code)) {\n          setIsEditing(false);\n        }\n      } else if (['Enter', 'Space'].includes(e.code)) {\n        handleCellClick(e);\n      }\n    },\n    [isEditing, handleCellClick, setIsEditing],\n  );\n\n  const handleOnBlur = useCallback(\n    (event: React.FocusEvent) => {\n      if (isEditing && !event.currentTarget?.contains(event.relatedTarget)) {\n        // Not triggered when swapping focus between children\n        setIsEditing(false);\n      }\n    },\n    [isEditing],\n  );\n  const cols = !isEditing ? ['auto', 'min-content'] : ['auto'];\n  return (\n    <StyledEditableContainer\n      cols={cols}\n      tabIndex={isRowSelected && !isEditing ? 0 : -1}\n      innerRef={cell.ref}\n      onClick={handleCellClick}\n      onKeyDown={handleOnKeyDown}\n      onBlur={handleOnBlur}\n      shouldDisplayEditIcon={cell.column.alwaysDisplayEditIcon}\n      role=\"group\"\n      aria-labelledby={isEditing ? undefined : cell.id}\n      getOwnerProps={getOwnerProps}\n      getOwnerPropsArguments={getOwnerPropsArguments}\n    >\n      {!isEditing ? StandardRender : EditableRenderer}\n      {!isEditing && <StyledPencilIcon />}\n      <span id={`editable-cell-${cell.id}-${domIdAffix}`} style={{ display: 'none' }} aria-hidden=\"true\">\n        {cell.value as string}, editable cell. To edit the content&apos;s of this cell, press the Enter key\n      </span>\n    </StyledEditableContainer>\n  );\n};\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;AD6EF;AA7ErB,mBAA8D;AAC9D,2CAA8B;AAE9B,oBAA0D;AAEnD,MAAM,eAKR,CAAC,UAAU;AACd,QAAM,EAAE,gBAAgB,kBAAkB,MAAM,cAAc,IAAI;AAClE,QAAM,iBAAa,oDAAc,CAAC,UAAU,MAAM,UAAU;AAC5D,QAAM,yBAAqB,oDAAc,CAAC,UAAU,MAAM,kBAAkB;AAC5E,QAAM,oBAAgB,oDAAc,CAAC,UAAU,MAAM,GAAG;AACxD,QAAM,yBAAyB,aAAAA,QAAM,YAAY,MAAM,MAAM,CAAC,IAAI,CAAC;AAEnE,QAAM,CAAC,WAAW,YAAY,QAAI,uBAAS,KAAK;AAChD,QAAM,CAAC,eAAe,gBAAgB,QAAI,uBAAS,KAAK;AAExD,oCAAgB,MAAM;AACpB,QAAI,cAAc,eAAe;AAC/B,yBAAmB,QAAQ;AAC3B,uBAAiB,SAAS;AAAA,IAC5B;AAAA,EAEF,GAAG,CAAC,SAAS,CAAC;AAEd,QAAM,sBAAkB;AAAA,IACtB,CAAC,MAA8C;AAC7C,QAAE,gBAAgB;AAClB,UAAI,CAAC,WAAW;AACd,qBAAa,IAAI;AAAA,MACnB;AAAA,IACF;AAAA,IACA,CAAC,SAAS;AAAA,EACZ;AAEA,QAAM,sBAAkB;AAAA,IACtB,CAAC,MAA2B;AAC1B,UAAI,WAAW;AACb,UAAE,gBAAgB;AAClB,YAAI,CAAC,SAAS,QAAQ,EAAE,SAAS,EAAE,IAAI,GAAG;AACxC,uBAAa,KAAK;AAAA,QACpB;AAAA,MACF,WAAW,CAAC,SAAS,OAAO,EAAE,SAAS,EAAE,IAAI,GAAG;AAC9C,wBAAgB,CAAC;AAAA,MACnB;AAAA,IACF;AAAA,IACA,CAAC,WAAW,iBAAiB,YAAY;AAAA,EAC3C;AAEA,QAAM,mBAAe;AAAA,IACnB,CAAC,UAA4B;AAC3B,UAAI,aAAa,CAAC,MAAM,eAAe,SAAS,MAAM,aAAa,GAAG;AAEpE,qBAAa,KAAK;AAAA,MACpB;AAAA,IACF;AAAA,IACA,CAAC,SAAS;AAAA,EACZ;AACA,QAAM,OAAO,CAAC,YAAY,CAAC,QAAQ,aAAa,IAAI,CAAC,MAAM;AAC3D,SACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA,UAAU,iBAAiB,CAAC,YAAY,IAAI;AAAA,MAC5C,UAAU,KAAK;AAAA,MACf,SAAS;AAAA,MACT,WAAW;AAAA,MACX,QAAQ;AAAA,MACR,uBAAuB,KAAK,OAAO;AAAA,MACnC,MAAK;AAAA,MACL,mBAAiB,YAAY,SAAY,KAAK;AAAA,MAC9C;AAAA,MACA;AAAA,MAEC;AAAA,SAAC,YAAY,iBAAiB;AAAA,QAC9B,CAAC,aAAa,4CAAC,kCAAiB;AAAA,QACjC,6CAAC,UAAK,IAAI,iBAAiB,KAAK,EAAE,IAAI,UAAU,IAAI,OAAO,EAAE,SAAS,OAAO,GAAG,eAAY,QACzF;AAAA,eAAK;AAAA,UAAgB;AAAA,WACxB;AAAA;AAAA;AAAA,EACF;AAEJ;",
   "names": ["React"]
 }

package/dist/cjs/exported-related/FilterBar/PillsFromDataTableFilters.js CHANGED Viewed

@@ -68,7 +68,8 @@ const PillsFromDataTableFilters = ({
     return refs;
   }, [filters.length]);
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_jsx_runtime.Fragment, { children: filters.map(({ id: column, type, value }, index) => {
-    const columnHeader = columns.find((col) => col.accessor === column)?.Header;
+    const matchedColumn = columns.find((col) => col.accessor === column);
+    const columnHeader = matchedColumn?.pillLabel || matchedColumn?.Header;
     let Component = () => null;
     const filterType = type;
     if (customPillRenderers?.[column]) {

package/dist/cjs/exported-related/FilterBar/PillsFromDataTableFilters.js.map CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/exported-related/FilterBar/PillsFromDataTableFilters.tsx", "../../../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["import { type TypescriptHelpersT } from '@elliemae/ds-typescript-helpers';\nimport React, { useMemo } from 'react';\nimport {\n  DateRangePill,\n  DateSwitcherPill,\n  FreeTextSearchPillPill,\n  MultiSelectPill,\n  NumberRangePill,\n  SelectPill,\n  SingleDatePill,\n} from '../../parts/FilterBar/components/index.js';\nimport type { DSDataTableT } from '../../react-desc-prop-types.js';\nimport { FILTER_TYPES } from '../FilterTypes.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\ninterface PillsFromDataTableFiltersProps {\n  filters: DSDataTableT.Filter[];\n  columns: DSDataTableT.Column[];\n  onFiltersChange: (filters: DSDataTableT.Filter[]) => void;\n  onPillRemove?: (remove: () => void) => void;\n  customPillRenderers?: Record<string, React.ComponentType<DSDataTableT.FilterPillProps<unknown>>>;\n  customPillRenderer?: React.ComponentType<DSDataTableT.FilterPillProps<unknown>>;\n}\n\nexport const PillsFromDataTableFilters: React.FC<PillsFromDataTableFiltersProps> = ({\n  filters,\n  columns,\n\n  onFiltersChange,\n  onPillRemove,\n  customPillRenderers,\n  customPillRenderer,\n}) => {\n  const pillRefs = 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  return (\n    <>\n      {filters.map(({ id: column, type, value }, index) => {\n        const columnHeader = columns.find((col) => col.accessor === column)?.Header;\n        let Component:\n          | TypescriptHelpersT.ObjectValues<typeof pillRenderMapper>\n          | React.ComponentType<DSDataTableT.FilterPillProps<unknown>> = () => null;\n\n        const filterType = type;\n        if (customPillRenderers?.[column]) {\n          Component = customPillRenderers[column];\n        } else if (customPillRenderer) {\n          Component = customPillRenderer;\n        } else if (filterType in pillRenderMapper) {\n          Component = pillRenderMapper[filterType as keyof typeof pillRenderMapper];\n        }\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            innerRef={pillRefs[index]}\n            onPillRemove={onPillRemove}\n          />\n        );\n      })}\n    </>\n  );\n};\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADyDnB;AAxDJ,mBAA+B;AAC/B,wBAQO;AAEP,yBAA6B;AAE7B,MAAM,mBAAmB;AAAA,EACvB,CAAC,gCAAa,MAAM,GAAG;AAAA,EACvB,CAAC,gCAAa,SAAS,GAAG;AAAA,EAC1B,CAAC,gCAAa,YAAY,GAAG;AAAA,EAC7B,CAAC,gCAAa,eAAe,GAAG;AAAA,EAChC,CAAC,gCAAa,WAAW,GAAG;AAAA,EAC5B,CAAC,gCAAa,cAAc,GAAG;AAAA,EAC/B,CAAC,gCAAa,UAAU,GAAG;AAAA,EAC3B,CAAC,gCAAa,aAAa,GAAG;AAAA,EAC9B,CAAC,gCAAa,aAAa,GAAG;AAAA,EAC9B,CAAC,gCAAa,gBAAgB,GAAG;AAAA,EACjC,CAAC,gCAAa,YAAY,GAAG;AAAA,EAC7B,CAAC,gCAAa,eAAe,GAAG;AAAA,EAChC,CAAC,gCAAa,cAAc,GAAG;AAAA,EAC/B,CAAC,gCAAa,iBAAiB,GAAG;AAAA,EAClC,CAAC,gCAAa,gBAAgB,GAAG;AAAA,EACjC,CAAC,gCAAa,mBAAmB,GAAG;AACtC;AAWO,MAAM,4BAAsE,CAAC;AAAA,EAClF;AAAA,EACA;AAAA,EAEA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,MAAM;AACJ,QAAM,eAAW,sBAAQ,MAAM;AAC7B,UAAM,OAAuC,CAAC;AAC9C,aAAS,IAAI,GAAG,IAAI,QAAQ,QAAQ,KAAK,EAAG,MAAK,KAAK,aAAAA,QAAM,UAAU,CAAC;AACvE,WAAO;AAAA,EACT,GAAG,CAAC,QAAQ,MAAM,CAAC;AACnB,SACE,2EACG,kBAAQ,IAAI,CAAC,EAAE,IAAI,QAAQ,MAAM,MAAM,GAAG,UAAU;AACnD,UAAM,eAAe,QAAQ,KAAK,CAAC,QAAQ,IAAI,aAAa,MAAM,GAAG;AACrE,QAAI,YAE6D,MAAM;AAEvE,UAAM,aAAa;AACnB,QAAI,sBAAsB,MAAM,GAAG;AACjC,kBAAY,oBAAoB,MAAM;AAAA,IACxC,WAAW,oBAAoB;AAC7B,kBAAY;AAAA,IACd,WAAW,cAAc,kBAAkB;AACzC,kBAAY,iBAAiB,UAA2C;AAAA,IAC1E;AAEA,WACE;AAAA,MAAC;AAAA;AAAA,QAEC,cAAc,OAAO,iBAAiB,WAAW,eAAe;AAAA,QAChE;AAAA,QAEA;AAAA,QACA;AAAA,QACA;AAAA,QACA,UAAU,SAAS,KAAK;AAAA,QACxB;AAAA;AAAA,MARK;AAAA,IASP;AAAA,EAEJ,CAAC,GACH;AAEJ;",
+  "sourcesContent": ["import { type TypescriptHelpersT } from '@elliemae/ds-typescript-helpers';\nimport React, { useMemo } from 'react';\nimport {\n  DateRangePill,\n  DateSwitcherPill,\n  FreeTextSearchPillPill,\n  MultiSelectPill,\n  NumberRangePill,\n  SelectPill,\n  SingleDatePill,\n} from '../../parts/FilterBar/components/index.js';\nimport type { DSDataTableT } from '../../react-desc-prop-types.js';\nimport { FILTER_TYPES } from '../FilterTypes.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\ninterface PillsFromDataTableFiltersProps {\n  filters: DSDataTableT.Filter[];\n  columns: DSDataTableT.Column[];\n  onFiltersChange: (filters: DSDataTableT.Filter[]) => void;\n  onPillRemove?: (remove: () => void) => void;\n  customPillRenderers?: Record<string, React.ComponentType<DSDataTableT.FilterPillProps<unknown>>>;\n  customPillRenderer?: React.ComponentType<DSDataTableT.FilterPillProps<unknown>>;\n}\n\nexport const PillsFromDataTableFilters: React.FC<PillsFromDataTableFiltersProps> = ({\n  filters,\n  columns,\n\n  onFiltersChange,\n  onPillRemove,\n  customPillRenderers,\n  customPillRenderer,\n}) => {\n  const pillRefs = 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  return (\n    <>\n      {filters.map(({ id: column, type, value }, index) => {\n        const matchedColumn = columns.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 (customPillRenderers?.[column]) {\n          Component = customPillRenderers[column];\n        } else if (customPillRenderer) {\n          Component = customPillRenderer;\n        } else if (filterType in pillRenderMapper) {\n          Component = pillRenderMapper[filterType as keyof typeof pillRenderMapper];\n        }\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            innerRef={pillRefs[index]}\n            onPillRemove={onPillRemove}\n          />\n        );\n      })}\n    </>\n  );\n};\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADyDnB;AAxDJ,mBAA+B;AAC/B,wBAQO;AAEP,yBAA6B;AAE7B,MAAM,mBAAmB;AAAA,EACvB,CAAC,gCAAa,MAAM,GAAG;AAAA,EACvB,CAAC,gCAAa,SAAS,GAAG;AAAA,EAC1B,CAAC,gCAAa,YAAY,GAAG;AAAA,EAC7B,CAAC,gCAAa,eAAe,GAAG;AAAA,EAChC,CAAC,gCAAa,WAAW,GAAG;AAAA,EAC5B,CAAC,gCAAa,cAAc,GAAG;AAAA,EAC/B,CAAC,gCAAa,UAAU,GAAG;AAAA,EAC3B,CAAC,gCAAa,aAAa,GAAG;AAAA,EAC9B,CAAC,gCAAa,aAAa,GAAG;AAAA,EAC9B,CAAC,gCAAa,gBAAgB,GAAG;AAAA,EACjC,CAAC,gCAAa,YAAY,GAAG;AAAA,EAC7B,CAAC,gCAAa,eAAe,GAAG;AAAA,EAChC,CAAC,gCAAa,cAAc,GAAG;AAAA,EAC/B,CAAC,gCAAa,iBAAiB,GAAG;AAAA,EAClC,CAAC,gCAAa,gBAAgB,GAAG;AAAA,EACjC,CAAC,gCAAa,mBAAmB,GAAG;AACtC;AAWO,MAAM,4BAAsE,CAAC;AAAA,EAClF;AAAA,EACA;AAAA,EAEA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,MAAM;AACJ,QAAM,eAAW,sBAAQ,MAAM;AAC7B,UAAM,OAAuC,CAAC;AAC9C,aAAS,IAAI,GAAG,IAAI,QAAQ,QAAQ,KAAK,EAAG,MAAK,KAAK,aAAAA,QAAM,UAAU,CAAC;AACvE,WAAO;AAAA,EACT,GAAG,CAAC,QAAQ,MAAM,CAAC;AACnB,SACE,2EACG,kBAAQ,IAAI,CAAC,EAAE,IAAI,QAAQ,MAAM,MAAM,GAAG,UAAU;AACnD,UAAM,gBAAgB,QAAQ,KAAK,CAAC,QAAQ,IAAI,aAAa,MAAM;AACnE,UAAM,eAAe,eAAe,aAAa,eAAe;AAChE,QAAI,YAE6D,MAAM;AAEvE,UAAM,aAAa;AACnB,QAAI,sBAAsB,MAAM,GAAG;AACjC,kBAAY,oBAAoB,MAAM;AAAA,IACxC,WAAW,oBAAoB;AAC7B,kBAAY;AAAA,IACd,WAAW,cAAc,kBAAkB;AACzC,kBAAY,iBAAiB,UAA2C;AAAA,IAC1E;AAEA,WACE;AAAA,MAAC;AAAA;AAAA,QAEC,cAAc,OAAO,iBAAiB,WAAW,eAAe;AAAA,QAChE;AAAA,QAEA;AAAA,QACA;AAAA,QACA;AAAA,QACA,UAAU,SAAS,KAAK;AAAA,QACxB;AAAA;AAAA,MARK;AAAA,IASP;AAAA,EAEJ,CAAC,GACH;AAEJ;",
   "names": ["React"]
 }

package/dist/cjs/exported-related/FilterPopover/FilterPopoverV2.js CHANGED Viewed

@@ -42,7 +42,6 @@ var import_createInternalAndPropsContext = require("../../configs/useStore/creat
 var import_constants = require("../../constants/index.js");
 var import_useGetFilterHandlers = require("./useGetFilterHandlers.js");
 var import_useGetFilterVisibility = require("./useGetFilterVisibility.js");
-var import_useOnClickOutside = require("./useOnClickOutside.js");
 var import_styled = require("./styled.js");
 const FilterPopoverV2 = (props) => {
   const {
@@ -59,6 +58,7 @@ const FilterPopoverV2 = (props) => {
     onFilterReset
   } = props;
   const getOwnerProps = (0, import_createInternalAndPropsContext.usePropsStore)((store) => store.get);
+  const virtualListRef = (0, import_createInternalAndPropsContext.usePropsStore)((state) => state.virtualListRef);
   const getOwnerPropsArguments = (0, import_react.useCallback)(
     () => ({
       columnId: column.id
@@ -78,20 +78,26 @@ const FilterPopoverV2 = (props) => {
     context
   } = (0, import_ds_floating_context.useFloatingContext)({
     externallyControlledIsOpen: isMenuOpen,
+    externalReferenceElement: columnReference,
     placement: "bottom-end",
     withoutAnimation: true,
-    customOffset: [0, 0]
+    customOffset: [0, 0],
+    onClickOutside: handleClickOutsideMenu,
+    /**
+     * PUI-17187: same fix as FilterPopover/index.tsx (V1) — see the full rationale there,
+     * including why `withoutPortal: true` was tried and rejected (breaks any filter whose
+     * content is larger than the table, e.g. DateRangeFilter's calendar, because withoutPortal
+     * makes the popover a literal DOM descendant of the table's overflow:auto container, which
+     * unconditionally CSS-clips oversized content — position math cannot override that).
+     * boundaryElement keeps the portal and only changes the clipping math, with a per-axis
+     * fallback to the viewport when the content doesn't fit the boundary.
+     */
+    boundaryElement: virtualListRef.current
   });
-  (0, import_useOnClickOutside.useOnClickOutside)(isMenuOpen ? refs.floating : null, handleClickOutsideMenu);
   const handleOnKeyDown = (0, import_ds_hooks_focus_trap.useFocusTrap)({
     firstElementRef,
     lastElementRef
   });
-  (0, import_react.useEffect)(() => {
-    if (columnReference) {
-      refs.setReference(columnReference);
-    }
-  }, [columnReference, refs]);
   return (
     // eslint-disable-next-line jsx-a11y/no-static-element-interactions
     /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(

package/dist/cjs/exported-related/FilterPopover/FilterPopoverV2.js.map CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/exported-related/FilterPopover/FilterPopoverV2.tsx", "../../../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["import { DSButtonV3 } from '@elliemae/ds-button-v2';\n\nimport { useFloatingContext } from '@elliemae/ds-floating-context';\nimport { useFocusTrap } from '@elliemae/ds-hooks-focus-trap';\n\nimport { mergeRefs } from '@elliemae/ds-system';\nimport React, { useCallback, useEffect, useRef, useState } from 'react';\n\nimport { usePropsStore } from '../../configs/useStore/createInternalAndPropsContext.js';\nimport { DATA_TABLE_DATA_TESTID } from '../../constants/index.js';\nimport type { FilterPopoverV2Props } from './types.js';\nimport { useGetFilterHandlers } from './useGetFilterHandlers.js';\nimport { useGetFilterVisibility } from './useGetFilterVisibility.js';\nimport { useOnClickOutside } from './useOnClickOutside.js';\nimport { FilterButton, PopperContent, StyledDSDialogFooter, StyledFloatingWrapper } from './styled.js';\n\nexport const FilterPopoverV2: React.ComponentType<FilterPopoverV2Props> = (props: FilterPopoverV2Props) => {\n  const {\n    column,\n    customStyles,\n    reduxHeader,\n    menuContent,\n    ariaLabel,\n    triggerIcon,\n    innerRef,\n    columnReference,\n    firstElementRef,\n    onFilterSubmit,\n    onFilterReset,\n  } = props;\n\n  const getOwnerProps = usePropsStore((store) => store.get);\n\n  const getOwnerPropsArguments = useCallback(\n    () => ({\n      columnId: column.id,\n    }),\n    [column.id],\n  );\n\n  const [buttonReference, setButtonReference] = useState<HTMLButtonElement | null>(null);\n\n  const [isButtonFocused, setIsButtonFocused] = useState(false);\n  const { isIconVisible, isMenuOpen } = useGetFilterVisibility(reduxHeader);\n\n  const { handleTriggerClick, handleClickOutsideMenu, handleMenuOnKeyDown, handleTriggerOnFocus, handleTriggerOnBlur } =\n    useGetFilterHandlers(props, isMenuOpen, buttonReference, setIsButtonFocused);\n\n  const lastElementRef = useRef<HTMLButtonElement>(null);\n  const boundaryRef = useRef<HTMLDivElement | null>(null);\n\n  const {\n    floatingStyles,\n    isOpen: isFloatingOpen,\n    refs,\n    context,\n  } = useFloatingContext({\n    externallyControlledIsOpen: isMenuOpen,\n    placement: 'bottom-end',\n    withoutAnimation: true,\n    customOffset: [0, 0],\n  });\n\n  useOnClickOutside(isMenuOpen ? refs.floating : null, handleClickOutsideMenu);\n  const handleOnKeyDown = useFocusTrap({\n    firstElementRef,\n    lastElementRef,\n  });\n\n  useEffect(() => {\n    if (columnReference) {\n      refs.setReference(columnReference);\n    }\n  }, [columnReference, refs]);\n\n  return (\n    // eslint-disable-next-line jsx-a11y/no-static-element-interactions\n    <div\n      // This is here to prevent propagation, and not trigger the sort functionality\n      onClick={(e) => e.stopPropagation()}\n      onKeyDown={handleMenuOnKeyDown}\n    >\n      <FilterButton\n        hide={!isIconVisible}\n        data-testid={DATA_TABLE_DATA_TESTID.FILTER_POPOVER_BUTTON}\n        getOwnerProps={getOwnerProps}\n      >\n        <DSButtonV3\n          buttonType=\"icon\"\n          size=\"s\"\n          onClick={handleTriggerClick}\n          onKeyDown={handleMenuOnKeyDown}\n          onFocus={handleTriggerOnFocus}\n          onBlur={handleTriggerOnBlur}\n          innerRef={mergeRefs(isIconVisible && setButtonReference, innerRef)}\n          tabIndex={reduxHeader?.withTabStops ? 0 : -1}\n          aria-label={ariaLabel}\n          aria-hidden={!isButtonFocused}\n          data-testid={DATA_TABLE_DATA_TESTID.DATA_TABLE_FILTER_BUTTON_ELEMENT}\n        >\n          {triggerIcon}\n        </DSButtonV3>\n      </FilterButton>\n      {refs.reference && (\n        <StyledFloatingWrapper\n          innerRef={refs.setFloating}\n          isOpen={isFloatingOpen}\n          floatingStyles={{\n            ...floatingStyles,\n            ...customStyles,\n            minWidth: 'min-content',\n          }}\n          context={context}\n          data-testid={DATA_TABLE_DATA_TESTID.DATA_TABLE_FILTER_MENU_CONTENT}\n          getOwnerProps={getOwnerProps}\n          getOwnerPropsArguments={getOwnerPropsArguments}\n          aria-label={`Filter by ${column.Header as string}`}\n          role=\"dialog\"\n        >\n          <PopperContent getOwnerProps={getOwnerProps} onKeyDown={handleOnKeyDown} innerRef={boundaryRef}>\n            <form onSubmit={onFilterSubmit}>\n              {menuContent}\n              <StyledDSDialogFooter>\n                <DSButtonV3 onClick={onFilterReset} buttonType=\"outline\" size=\"s\">\n                  Reset\n                </DSButtonV3>\n                <DSButtonV3 type=\"submit\" innerRef={lastElementRef} size=\"s\">\n                  Apply\n                </DSButtonV3>\n              </StyledDSDialogFooter>\n            </form>\n          </PopperContent>\n        </StyledFloatingWrapper>\n      )}\n    </div>\n  );\n};\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": "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",
+  "sourcesContent": ["import { DSButtonV3 } from '@elliemae/ds-button-v2';\n\nimport { useFloatingContext } from '@elliemae/ds-floating-context';\nimport { useFocusTrap } from '@elliemae/ds-hooks-focus-trap';\n\nimport { mergeRefs } from '@elliemae/ds-system';\nimport React, { useCallback, useRef, useState } from 'react';\n\nimport { usePropsStore } from '../../configs/useStore/createInternalAndPropsContext.js';\nimport { DATA_TABLE_DATA_TESTID } from '../../constants/index.js';\nimport type { FilterPopoverV2Props } from './types.js';\nimport { useGetFilterHandlers } from './useGetFilterHandlers.js';\nimport { useGetFilterVisibility } from './useGetFilterVisibility.js';\nimport { FilterButton, PopperContent, StyledDSDialogFooter, StyledFloatingWrapper } from './styled.js';\n\nexport const FilterPopoverV2: React.ComponentType<FilterPopoverV2Props> = (props: FilterPopoverV2Props) => {\n  const {\n    column,\n    customStyles,\n    reduxHeader,\n    menuContent,\n    ariaLabel,\n    triggerIcon,\n    innerRef,\n    columnReference,\n    firstElementRef,\n    onFilterSubmit,\n    onFilterReset,\n  } = props;\n\n  const getOwnerProps = usePropsStore((store) => store.get);\n  const virtualListRef = usePropsStore((state) => state.virtualListRef);\n\n  const getOwnerPropsArguments = useCallback(\n    () => ({\n      columnId: column.id,\n    }),\n    [column.id],\n  );\n\n  const [buttonReference, setButtonReference] = useState<HTMLButtonElement | null>(null);\n\n  const [isButtonFocused, setIsButtonFocused] = useState(false);\n  const { isIconVisible, isMenuOpen } = useGetFilterVisibility(reduxHeader);\n\n  const { handleTriggerClick, handleClickOutsideMenu, handleMenuOnKeyDown, handleTriggerOnFocus, handleTriggerOnBlur } =\n    useGetFilterHandlers(props, isMenuOpen, buttonReference, setIsButtonFocused);\n\n  const lastElementRef = useRef<HTMLButtonElement>(null);\n  const boundaryRef = useRef<HTMLDivElement | null>(null);\n\n  const {\n    floatingStyles,\n    isOpen: isFloatingOpen,\n    refs,\n    context,\n  } = useFloatingContext({\n    externallyControlledIsOpen: isMenuOpen,\n    externalReferenceElement: columnReference,\n    placement: 'bottom-end',\n    withoutAnimation: true,\n    customOffset: [0, 0],\n    onClickOutside: handleClickOutsideMenu,\n    /**\n     * PUI-17187: same fix as FilterPopover/index.tsx (V1) \u2014 see the full rationale there,\n     * including why `withoutPortal: true` was tried and rejected (breaks any filter whose\n     * content is larger than the table, e.g. DateRangeFilter's calendar, because withoutPortal\n     * makes the popover a literal DOM descendant of the table's overflow:auto container, which\n     * unconditionally CSS-clips oversized content \u2014 position math cannot override that).\n     * boundaryElement keeps the portal and only changes the clipping math, with a per-axis\n     * fallback to the viewport when the content doesn't fit the boundary.\n     */\n    boundaryElement: virtualListRef.current,\n  });\n  const handleOnKeyDown = useFocusTrap({\n    firstElementRef,\n    lastElementRef,\n  });\n\n  return (\n    // eslint-disable-next-line jsx-a11y/no-static-element-interactions\n    <div\n      // This is here to prevent propagation, and not trigger the sort functionality\n      onClick={(e) => e.stopPropagation()}\n      onKeyDown={handleMenuOnKeyDown}\n    >\n      <FilterButton\n        hide={!isIconVisible}\n        data-testid={DATA_TABLE_DATA_TESTID.FILTER_POPOVER_BUTTON}\n        getOwnerProps={getOwnerProps}\n      >\n        <DSButtonV3\n          buttonType=\"icon\"\n          size=\"s\"\n          onClick={handleTriggerClick}\n          onKeyDown={handleMenuOnKeyDown}\n          onFocus={handleTriggerOnFocus}\n          onBlur={handleTriggerOnBlur}\n          innerRef={mergeRefs(isIconVisible && setButtonReference, innerRef)}\n          tabIndex={reduxHeader?.withTabStops ? 0 : -1}\n          aria-label={ariaLabel}\n          aria-hidden={!isButtonFocused}\n          data-testid={DATA_TABLE_DATA_TESTID.DATA_TABLE_FILTER_BUTTON_ELEMENT}\n        >\n          {triggerIcon}\n        </DSButtonV3>\n      </FilterButton>\n      {refs.reference && (\n        <StyledFloatingWrapper\n          innerRef={refs.setFloating}\n          isOpen={isFloatingOpen}\n          floatingStyles={{\n            ...floatingStyles,\n            ...customStyles,\n            minWidth: 'min-content',\n          }}\n          context={context}\n          data-testid={DATA_TABLE_DATA_TESTID.DATA_TABLE_FILTER_MENU_CONTENT}\n          getOwnerProps={getOwnerProps}\n          getOwnerPropsArguments={getOwnerPropsArguments}\n          aria-label={`Filter by ${column.Header as string}`}\n          role=\"dialog\"\n        >\n          <PopperContent getOwnerProps={getOwnerProps} onKeyDown={handleOnKeyDown} innerRef={boundaryRef}>\n            <form onSubmit={onFilterSubmit}>\n              {menuContent}\n              <StyledDSDialogFooter>\n                <DSButtonV3 onClick={onFilterReset} buttonType=\"outline\" size=\"s\">\n                  Reset\n                </DSButtonV3>\n                <DSButtonV3 type=\"submit\" innerRef={lastElementRef} size=\"s\">\n                  Apply\n                </DSButtonV3>\n              </StyledDSDialogFooter>\n            </form>\n          </PopperContent>\n        </StyledFloatingWrapper>\n      )}\n    </div>\n  );\n};\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": "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",
   "names": []
 }

package/dist/cjs/exported-related/FilterPopover/index.js CHANGED Viewed

@@ -35,25 +35,14 @@ var React = __toESM(require("react"));
 var import_jsx_runtime = require("react/jsx-runtime");
 var import_ds_button_v2 = require("@elliemae/ds-button-v2");
 var import_ds_hooks_focus_trap = require("@elliemae/ds-hooks-focus-trap");
-var import_ds_popperjs = require("@elliemae/ds-popperjs");
+var import_ds_floating_context = require("@elliemae/ds-floating-context");
 var import_ds_system = require("@elliemae/ds-system");
 var import_react = require("react");
 var import_constants = require("../../configs/constants.js");
 var import_createInternalAndPropsContext = require("../../configs/useStore/createInternalAndPropsContext.js");
-var import_constants2 = require("../../constants/index.js");
 var import_useGetFilterHandlers = require("./useGetFilterHandlers.js");
 var import_useGetFilterVisibility = require("./useGetFilterVisibility.js");
-const FilterButton = (0, import_ds_system.styled)("span", { name: import_constants2.DSDataTableName, slot: import_constants2.DSDataTableSlots.FILTER_POPOVER_BUTTON })`
-  display: inline-grid;
-  ${(props) => props.hide ? "opacity: 0; display: none; width: 0;" : ""}
-`;
-const PopperContent = (0, import_ds_system.styled)("div", { name: import_constants2.DSDataTableName, slot: import_constants2.DSDataTableSlots.FILTER_POPOVER_CONTENT })`
-  background-color: #fff;
-`;
-const StyledPoppoverJS = (0, import_ds_system.styled)(import_ds_popperjs.DSPopperJS, {
-  name: import_constants2.DSDataTableName,
-  slot: import_constants2.DSDataTableSlots.FILTER_POPOVER
-})``;
+var import_styled = require("./styled.js");
 const FilterPopover = (props) => {
   const {
     column,
@@ -69,6 +58,7 @@ const FilterPopover = (props) => {
   } = props;
   const filters = (0, import_createInternalAndPropsContext.usePropsStore)((state) => state.filters);
   const getOwnerProps = (0, import_createInternalAndPropsContext.usePropsStore)((store) => store.get);
+  const virtualListRef = (0, import_createInternalAndPropsContext.usePropsStore)((state) => state.virtualListRef);
   const getOwnerPropsArguments = (0, import_react.useCallback)(
     () => ({
       columnId: column.id
@@ -79,17 +69,57 @@ const FilterPopover = (props) => {
   const [buttonReference, setButtonReference] = (0, import_react.useState)(null);
   const [isButtonFocused, setIsButtonFocused] = (0, import_react.useState)(false);
   const { handleTriggerClick, handleClickOutsideMenu, handleMenuOnKeyDown, handleTriggerOnFocus, handleTriggerOnBlur } = (0, import_useGetFilterHandlers.useGetFilterHandlers)(props, isMenuOpen, buttonReference, setIsButtonFocused);
-  const actionRef = (0, import_react.useRef)({
-    update: null
+  const floatingOffset = (0, import_react.useMemo)(() => columnReference ? [0, 1] : [5, 4], [columnReference]);
+  const externalReferenceElement = columnReference || buttonReference;
+  const {
+    refs,
+    floatingStyles,
+    context,
+    isOpen: isFloatingOpen,
+    forceUpdatePosition
+  } = (0, import_ds_floating_context.useFloatingContext)({
+    externallyControlledIsOpen: isMenuOpen,
+    externalReferenceElement,
+    placement: "bottom-end",
+    customOffset: floatingOffset,
+    withoutAnimation: true,
+    placementOrderPreference: ["bottom-end", "top-end"],
+    onClickOutside: handleClickOutsideMenu,
+    /**
+     * PUI-17187: the filter trigger lives inside DataTable's own horizontally-scrollable
+     * container (virtualListRef, overflow: auto). Without a boundary, computePosition only
+     * clips against the browser viewport, so once the column scrolls near the table's own edge
+     * the popover keeps tracking the trigger's raw (partially clipped) screen position and
+     * spills past the table's visible bounds, into the rest of the page.
+     *
+     * Why not `withoutPortal: true` instead (it also derives a clipping boundary — see
+     * getClippingParent — which would resolve to this same scroll container automatically, no
+     * explicit boundaryElement needed): withoutPortal renders the popover as a literal DOM
+     * descendant of that overflow:auto container instead of portaling it to <body>. The browser
+     * then clips ANY content exceeding the container's bounds unconditionally — CSS overflow
+     * clipping is not something position math can override. That breaks any filter whose content
+     * is taller/wider than the table itself: confirmed regression via this exact change during
+     * development — DateRangeFilter's dual-calendar popover (in a 300px-tall table) got its
+     * inputs pushed outside the actual browser viewport entirely, failing the existing
+     * `DSDataTable - FilterPopover focus trap` Playwright CT tests (clicks on
+     * ds-controlled-date-time-picker-month-input timed out as "outside of the viewport").
+     *
+     * boundaryElement keeps the portal (so oversized content still escapes fully into the page,
+     * unclipped, exactly as before) and only changes computePosition's clipping *math*, with a
+     * per-axis fallback to the plain viewport when the floating content doesn't fit the boundary
+     * on that axis (see getBoundaryConstrainedRect) — small popovers (this one) get clamped to
+     * the table; oversized ones (DateRangeFilter's calendar) are unaffected.
+     */
+    boundaryElement: virtualListRef.current
   });
+  (0, import_react.useEffect)(() => {
+    void forceUpdatePosition();
+  }, [filters, forceUpdatePosition]);
   const popoverContentRef = (0, import_react.useRef)(null);
   const handleOnKeyDown = (0, import_ds_hooks_focus_trap.useFocusTrap)({
     firstElementRef,
     lastElementRef
   });
-  (0, import_react.useEffect)(() => {
-    void actionRef.current.update?.();
-  }, [filters]);
   return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
     "div",
     {
@@ -97,7 +127,7 @@ const FilterPopover = (props) => {
       onKeyDown: handleMenuOnKeyDown,
       children: [
         /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-          FilterButton,
+          import_styled.FilterButton,
           {
             hide: !isIconVisible,
             "data-testid": import_constants.DATA_TESTID.DATA_TABLE_FILTER_BUTTON,
@@ -121,27 +151,22 @@ const FilterPopover = (props) => {
           }
         ),
         (columnReference || buttonReference) && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-          StyledPoppoverJS,
+          import_styled.StyledFloatingWrapper,
           {
-            actionRef,
-            referenceElement: columnReference || buttonReference,
-            showPopover: isMenuOpen,
-            closeContextMenu: handleClickOutsideMenu,
-            "data-testid": import_constants.DATA_TESTID.DATA_TABLE_FILTER_MENU_CONTENT,
-            startPlacementPreference: "bottom-end",
-            customOffset: columnReference ? [0, 1] : [5, 4],
-            withoutArrow: true,
-            withoutAnimation: true,
-            extraPopperStyles: {
+            innerRef: refs.setFloating,
+            isOpen: isFloatingOpen,
+            floatingStyles: {
+              ...floatingStyles,
               ...customStyles,
               minWidth: column.ref?.current?.offsetWidth ?? "0px"
             },
-            placementOrderPreference: ["bottom-end", "top-end"],
+            context,
+            "data-testid": import_constants.DATA_TESTID.DATA_TABLE_FILTER_MENU_CONTENT,
             getOwnerProps,
             getOwnerPropsArguments,
             role: "dialog",
             "aria-label": `Filter by ${column.Header}`,
-            children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(PopperContent, { getOwnerProps, innerRef: popoverContentRef, onKeyDown: handleOnKeyDown, children: menuContent })
+            children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_styled.PopperContent, { getOwnerProps, innerRef: popoverContentRef, onKeyDown: handleOnKeyDown, children: menuContent })
           }
         )
       ]

package/dist/cjs/exported-related/FilterPopover/index.js.map CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/exported-related/FilterPopover/index.tsx", "../../../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["/* eslint-disable import/no-cycle */\n/* eslint-disable no-void */\n/* eslint-disable jsx-a11y/no-static-element-interactions */\nimport { DSButtonV2 } from '@elliemae/ds-button-v2';\nimport { useFocusTrap } from '@elliemae/ds-hooks-focus-trap';\nimport type { DSPopperJST } from '@elliemae/ds-popperjs';\nimport { DSPopperJS } from '@elliemae/ds-popperjs';\nimport { mergeRefs, styled } from '@elliemae/ds-system';\nimport React, { useCallback, useEffect, useRef, useState } from 'react';\nimport { DATA_TESTID } from '../../configs/constants.js';\nimport { usePropsStore } from '../../configs/useStore/createInternalAndPropsContext.js';\nimport { DSDataTableName, DSDataTableSlots } from '../../constants/index.js';\nimport type { FilterPopoverProps } from './types.js';\nimport { useGetFilterHandlers } from './useGetFilterHandlers.js';\nimport { useGetFilterVisibility } from './useGetFilterVisibility.js';\n\nconst FilterButton = styled('span', { name: DSDataTableName, slot: DSDataTableSlots.FILTER_POPOVER_BUTTON })<{\n  hide: boolean;\n}>`\n  display: inline-grid;\n  ${(props) => (props.hide ? 'opacity: 0; display: none; width: 0;' : '')}\n`;\n\nconst PopperContent = styled('div', { name: DSDataTableName, slot: DSDataTableSlots.FILTER_POPOVER_CONTENT })`\n  background-color: #fff;\n`;\n\nconst StyledPoppoverJS = styled(DSPopperJS, {\n  name: DSDataTableName,\n  slot: DSDataTableSlots.FILTER_POPOVER,\n})``;\n\nexport const FilterPopover: React.ComponentType<FilterPopoverProps> = (props: FilterPopoverProps) => {\n  const {\n    column,\n    customStyles,\n    reduxHeader,\n    menuContent,\n    ariaLabel,\n    triggerIcon,\n    innerRef,\n    columnReference,\n    firstElementRef,\n    lastElementRef,\n  } = props;\n\n  const filters = usePropsStore((state) => state.filters);\n  const getOwnerProps = usePropsStore((store) => store.get);\n\n  const getOwnerPropsArguments = useCallback(\n    () => ({\n      columnId: column.id,\n    }),\n    [column.id],\n  );\n\n  const { isIconVisible, isMenuOpen } = useGetFilterVisibility(reduxHeader);\n\n  const [buttonReference, setButtonReference] = useState<HTMLButtonElement | null>(null);\n\n  const [isButtonFocused, setIsButtonFocused] = useState(false);\n\n  const { handleTriggerClick, handleClickOutsideMenu, handleMenuOnKeyDown, handleTriggerOnFocus, handleTriggerOnBlur } =\n    useGetFilterHandlers(props, isMenuOpen, buttonReference, setIsButtonFocused);\n\n  const actionRef: Required<DSPopperJST.Props>['actionRef'] = useRef({\n    update: null,\n  });\n  const popoverContentRef = useRef<HTMLDivElement>(null);\n\n  const handleOnKeyDown = useFocusTrap({\n    firstElementRef,\n    lastElementRef,\n  });\n\n  useEffect(() => {\n    // When the filters change, we need to update the popper position,\n    // because the filter bar might push the datatable up or down, causing the popper to be misaligned\n    void actionRef.current.update?.();\n  }, [filters]);\n\n  return (\n    <div\n      // This is here to prevent propagation, and not trigger the sort functionality\n      onClick={(e) => e.stopPropagation()}\n      onKeyDown={handleMenuOnKeyDown}\n    >\n      <FilterButton\n        hide={!isIconVisible}\n        data-testid={DATA_TESTID.DATA_TABLE_FILTER_BUTTON}\n        getOwnerProps={getOwnerProps}\n      >\n        <DSButtonV2\n          buttonType=\"icon\"\n          size=\"s\"\n          onClick={handleTriggerClick}\n          onFocus={handleTriggerOnFocus}\n          onBlur={handleTriggerOnBlur}\n          innerRef={mergeRefs(isIconVisible && setButtonReference, innerRef)}\n          tabIndex={reduxHeader?.withTabStops ? 0 : -1}\n          aria-label={ariaLabel}\n          aria-hidden={!isButtonFocused}\n          data-testid={DATA_TESTID.DATA_TABLE_FILTER_BUTTON_ELEMENT}\n        >\n          {triggerIcon}\n        </DSButtonV2>\n      </FilterButton>\n      {(columnReference || buttonReference) && (\n        <StyledPoppoverJS\n          actionRef={actionRef}\n          referenceElement={columnReference || buttonReference}\n          showPopover={isMenuOpen}\n          closeContextMenu={handleClickOutsideMenu}\n          data-testid={DATA_TESTID.DATA_TABLE_FILTER_MENU_CONTENT}\n          startPlacementPreference=\"bottom-end\"\n          customOffset={columnReference ? [0, 1] : [5, 4]}\n          withoutArrow\n          withoutAnimation\n          extraPopperStyles={{\n            ...customStyles,\n            minWidth: column.ref?.current?.offsetWidth ?? '0px',\n          }}\n          placementOrderPreference={['bottom-end', 'top-end']}\n          getOwnerProps={getOwnerProps}\n          getOwnerPropsArguments={getOwnerPropsArguments}\n          role=\"dialog\"\n          aria-label={`Filter by ${column.Header as string}`}\n        >\n          <PopperContent getOwnerProps={getOwnerProps} innerRef={popoverContentRef} onKeyDown={handleOnKeyDown}>\n            {menuContent}\n          </PopperContent>\n        </StyledPoppoverJS>\n      )}\n    </div>\n  );\n};\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": "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",
-  "names": ["import_constants"]
+  "sourcesContent": ["/* eslint-disable import/no-cycle */\n/* eslint-disable no-void */\n/* eslint-disable jsx-a11y/no-static-element-interactions */\nimport { DSButtonV2 } from '@elliemae/ds-button-v2';\nimport { useFocusTrap } from '@elliemae/ds-hooks-focus-trap';\nimport { useFloatingContext } from '@elliemae/ds-floating-context';\nimport { mergeRefs } from '@elliemae/ds-system';\nimport React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';\nimport { DATA_TESTID } from '../../configs/constants.js';\nimport { usePropsStore } from '../../configs/useStore/createInternalAndPropsContext.js';\nimport type { FilterPopoverProps } from './types.js';\nimport { useGetFilterHandlers } from './useGetFilterHandlers.js';\nimport { useGetFilterVisibility } from './useGetFilterVisibility.js';\nimport { FilterButton, PopperContent, StyledFloatingWrapper } from './styled.js';\n\nexport const FilterPopover: React.ComponentType<FilterPopoverProps> = (props: FilterPopoverProps) => {\n  const {\n    column,\n    customStyles,\n    reduxHeader,\n    menuContent,\n    ariaLabel,\n    triggerIcon,\n    innerRef,\n    columnReference,\n    firstElementRef,\n    lastElementRef,\n  } = props;\n\n  const filters = usePropsStore((state) => state.filters);\n  const getOwnerProps = usePropsStore((store) => store.get);\n  const virtualListRef = usePropsStore((state) => state.virtualListRef);\n\n  const getOwnerPropsArguments = useCallback(\n    () => ({\n      columnId: column.id,\n    }),\n    [column.id],\n  );\n\n  const { isIconVisible, isMenuOpen } = useGetFilterVisibility(reduxHeader);\n\n  const [buttonReference, setButtonReference] = useState<HTMLButtonElement | null>(null);\n  const [isButtonFocused, setIsButtonFocused] = useState(false);\n\n  const { handleTriggerClick, handleClickOutsideMenu, handleMenuOnKeyDown, handleTriggerOnFocus, handleTriggerOnBlur } =\n    useGetFilterHandlers(props, isMenuOpen, buttonReference, setIsButtonFocused);\n\n  const floatingOffset = useMemo<[number, number]>(() => (columnReference ? [0, 1] : [5, 4]), [columnReference]);\n\n  const externalReferenceElement = columnReference || buttonReference;\n\n  const {\n    refs,\n    floatingStyles,\n    context,\n    isOpen: isFloatingOpen,\n    forceUpdatePosition,\n  } = useFloatingContext({\n    externallyControlledIsOpen: isMenuOpen,\n    externalReferenceElement,\n    placement: 'bottom-end',\n    customOffset: floatingOffset,\n    withoutAnimation: true,\n    placementOrderPreference: ['bottom-end', 'top-end'],\n    onClickOutside: handleClickOutsideMenu,\n    /**\n     * PUI-17187: the filter trigger lives inside DataTable's own horizontally-scrollable\n     * container (virtualListRef, overflow: auto). Without a boundary, computePosition only\n     * clips against the browser viewport, so once the column scrolls near the table's own edge\n     * the popover keeps tracking the trigger's raw (partially clipped) screen position and\n     * spills past the table's visible bounds, into the rest of the page.\n     *\n     * Why not `withoutPortal: true` instead (it also derives a clipping boundary \u2014 see\n     * getClippingParent \u2014 which would resolve to this same scroll container automatically, no\n     * explicit boundaryElement needed): withoutPortal renders the popover as a literal DOM\n     * descendant of that overflow:auto container instead of portaling it to <body>. The browser\n     * then clips ANY content exceeding the container's bounds unconditionally \u2014 CSS overflow\n     * clipping is not something position math can override. That breaks any filter whose content\n     * is taller/wider than the table itself: confirmed regression via this exact change during\n     * development \u2014 DateRangeFilter's dual-calendar popover (in a 300px-tall table) got its\n     * inputs pushed outside the actual browser viewport entirely, failing the existing\n     * `DSDataTable - FilterPopover focus trap` Playwright CT tests (clicks on\n     * ds-controlled-date-time-picker-month-input timed out as \"outside of the viewport\").\n     *\n     * boundaryElement keeps the portal (so oversized content still escapes fully into the page,\n     * unclipped, exactly as before) and only changes computePosition's clipping *math*, with a\n     * per-axis fallback to the plain viewport when the floating content doesn't fit the boundary\n     * on that axis (see getBoundaryConstrainedRect) \u2014 small popovers (this one) get clamped to\n     * the table; oversized ones (DateRangeFilter's calendar) are unaffected.\n     */\n    boundaryElement: virtualListRef.current,\n  });\n\n  // When the filter bar changes height, re-compute the floating position\n  useEffect(() => {\n    void forceUpdatePosition();\n  }, [filters, forceUpdatePosition]);\n\n  const popoverContentRef = useRef<HTMLDivElement>(null);\n  const handleOnKeyDown = useFocusTrap({\n    firstElementRef,\n    lastElementRef,\n  });\n\n  return (\n    <div\n      // This is here to prevent propagation, and not trigger the sort functionality\n      onClick={(e) => e.stopPropagation()}\n      onKeyDown={handleMenuOnKeyDown}\n    >\n      <FilterButton\n        hide={!isIconVisible}\n        data-testid={DATA_TESTID.DATA_TABLE_FILTER_BUTTON}\n        getOwnerProps={getOwnerProps}\n      >\n        <DSButtonV2\n          buttonType=\"icon\"\n          size=\"s\"\n          onClick={handleTriggerClick}\n          onFocus={handleTriggerOnFocus}\n          onBlur={handleTriggerOnBlur}\n          innerRef={mergeRefs(isIconVisible && setButtonReference, innerRef)}\n          tabIndex={reduxHeader?.withTabStops ? 0 : -1}\n          aria-label={ariaLabel}\n          aria-hidden={!isButtonFocused}\n          data-testid={DATA_TESTID.DATA_TABLE_FILTER_BUTTON_ELEMENT}\n        >\n          {triggerIcon}\n        </DSButtonV2>\n      </FilterButton>\n      {(columnReference || buttonReference) && (\n        <StyledFloatingWrapper\n          innerRef={refs.setFloating}\n          isOpen={isFloatingOpen}\n          floatingStyles={{\n            ...floatingStyles,\n            ...customStyles,\n            minWidth: column.ref?.current?.offsetWidth ?? '0px',\n          }}\n          context={context}\n          data-testid={DATA_TESTID.DATA_TABLE_FILTER_MENU_CONTENT}\n          getOwnerProps={getOwnerProps}\n          getOwnerPropsArguments={getOwnerPropsArguments}\n          role=\"dialog\"\n          aria-label={`Filter by ${column.Header as string}`}\n        >\n          <PopperContent getOwnerProps={getOwnerProps} innerRef={popoverContentRef} onKeyDown={handleOnKeyDown}>\n            {menuContent}\n          </PopperContent>\n        </StyledFloatingWrapper>\n      )}\n    </div>\n  );\n};\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;AD0GnB;AAvGJ,0BAA2B;AAC3B,iCAA6B;AAC7B,iCAAmC;AACnC,uBAA0B;AAC1B,mBAAyE;AACzE,uBAA4B;AAC5B,2CAA8B;AAE9B,kCAAqC;AACrC,oCAAuC;AACvC,oBAAmE;AAE5D,MAAM,gBAAyD,CAAC,UAA8B;AACnG,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,IAAI;AAEJ,QAAM,cAAU,oDAAc,CAAC,UAAU,MAAM,OAAO;AACtD,QAAM,oBAAgB,oDAAc,CAAC,UAAU,MAAM,GAAG;AACxD,QAAM,qBAAiB,oDAAc,CAAC,UAAU,MAAM,cAAc;AAEpE,QAAM,6BAAyB;AAAA,IAC7B,OAAO;AAAA,MACL,UAAU,OAAO;AAAA,IACnB;AAAA,IACA,CAAC,OAAO,EAAE;AAAA,EACZ;AAEA,QAAM,EAAE,eAAe,WAAW,QAAI,sDAAuB,WAAW;AAExE,QAAM,CAAC,iBAAiB,kBAAkB,QAAI,uBAAmC,IAAI;AACrF,QAAM,CAAC,iBAAiB,kBAAkB,QAAI,uBAAS,KAAK;AAE5D,QAAM,EAAE,oBAAoB,wBAAwB,qBAAqB,sBAAsB,oBAAoB,QACjH,kDAAqB,OAAO,YAAY,iBAAiB,kBAAkB;AAE7E,QAAM,qBAAiB,sBAA0B,MAAO,kBAAkB,CAAC,GAAG,CAAC,IAAI,CAAC,GAAG,CAAC,GAAI,CAAC,eAAe,CAAC;AAE7G,QAAM,2BAA2B,mBAAmB;AAEpD,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA,QAAQ;AAAA,IACR;AAAA,EACF,QAAI,+CAAmB;AAAA,IACrB,4BAA4B;AAAA,IAC5B;AAAA,IACA,WAAW;AAAA,IACX,cAAc;AAAA,IACd,kBAAkB;AAAA,IAClB,0BAA0B,CAAC,cAAc,SAAS;AAAA,IAClD,gBAAgB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IA0BhB,iBAAiB,eAAe;AAAA,EAClC,CAAC;AAGD,8BAAU,MAAM;AACd,SAAK,oBAAoB;AAAA,EAC3B,GAAG,CAAC,SAAS,mBAAmB,CAAC;AAEjC,QAAM,wBAAoB,qBAAuB,IAAI;AACrD,QAAM,sBAAkB,yCAAa;AAAA,IACnC;AAAA,IACA;AAAA,EACF,CAAC;AAED,SACE;AAAA,IAAC;AAAA;AAAA,MAEC,SAAS,CAAC,MAAM,EAAE,gBAAgB;AAAA,MAClC,WAAW;AAAA,MAEX;AAAA;AAAA,UAAC;AAAA;AAAA,YACC,MAAM,CAAC;AAAA,YACP,eAAa,6BAAY;AAAA,YACzB;AAAA,YAEA;AAAA,cAAC;AAAA;AAAA,gBACC,YAAW;AAAA,gBACX,MAAK;AAAA,gBACL,SAAS;AAAA,gBACT,SAAS;AAAA,gBACT,QAAQ;AAAA,gBACR,cAAU,4BAAU,iBAAiB,oBAAoB,QAAQ;AAAA,gBACjE,UAAU,aAAa,eAAe,IAAI;AAAA,gBAC1C,cAAY;AAAA,gBACZ,eAAa,CAAC;AAAA,gBACd,eAAa,6BAAY;AAAA,gBAExB;AAAA;AAAA,YACH;AAAA;AAAA,QACF;AAAA,SACE,mBAAmB,oBACnB;AAAA,UAAC;AAAA;AAAA,YACC,UAAU,KAAK;AAAA,YACf,QAAQ;AAAA,YACR,gBAAgB;AAAA,cACd,GAAG;AAAA,cACH,GAAG;AAAA,cACH,UAAU,OAAO,KAAK,SAAS,eAAe;AAAA,YAChD;AAAA,YACA;AAAA,YACA,eAAa,6BAAY;AAAA,YACzB;AAAA,YACA;AAAA,YACA,MAAK;AAAA,YACL,cAAY,aAAa,OAAO,MAAgB;AAAA,YAEhD,sDAAC,+BAAc,eAA8B,UAAU,mBAAmB,WAAW,iBAClF,uBACH;AAAA;AAAA,QACF;AAAA;AAAA;AAAA,EAEJ;AAEJ;",
+  "names": []
 }

package/dist/cjs/parts/Cells/Cell.js CHANGED Viewed

@@ -34,13 +34,13 @@ module.exports = __toCommonJS(Cell_exports);
 var React = __toESM(require("react"));
 var import_jsx_runtime = require("react/jsx-runtime");
 var import_ds_grid = require("@elliemae/ds-grid");
-var import_ds_truncated_tooltip_text = require("@elliemae/ds-truncated-tooltip-text");
 var import_react = __toESM(require("react"));
 var import_Columns = require("../../addons/Columns/index.js");
 var import_Editables = require("../../addons/Editables/index.js");
 var import_constants = require("../../configs/constants.js");
 var import_createInternalAndPropsContext = require("../../configs/useStore/createInternalAndPropsContext.js");
 var import_styled = require("../../styled.js");
+var import_TruncatedTooltipText = require("../../TruncatedTooltipText.js");
 var import_SortableItemContext = require("../HoC/SortableItemContext.js");
 var import_useCellStyle = require("./useCellStyle.js");
 const PureStandardCell = (0, import_react.memo)(({ cellStyle, children, column, getOwnerProps, getOwnerPropsArguments }) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
@@ -89,7 +89,7 @@ const Cell = ({
   const textValue = (0, import_react.useMemo)(
     () => appliedTextWrap === "truncate" ? (
       // @ts-expect-error - data-table typescript is broken
-      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ds_truncated_tooltip_text.SimpleTruncatedTooltipText, { value: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(CellComponent, { ...cellProps }) })
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_TruncatedTooltipText.TruncatedTooltipText, { value: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(CellComponent, { ...cellProps }) })
     ) : (
       // @ts-expect-error - data-table typescript is broken
       /* @__PURE__ */ (0, import_jsx_runtime.jsx)(CellComponent, { ...cellProps })

package/dist/cjs/parts/Cells/Cell.js.map CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/parts/Cells/Cell.tsx", "../../../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["/* eslint-disable max-lines */\nimport { Grid } from '@elliemae/ds-grid';\nimport { SimpleTruncatedTooltipText } from '@elliemae/ds-truncated-tooltip-text';\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 { SortableItemContext } from '../HoC/SortableItemContext.js';\nimport { useCellStyle } from './useCellStyle.js';\n\nconst PureStandardCell = memo<\n  PropsWithChildren<{\n    cellStyle: React.CSSProperties;\n    column: DSDataTableT.InternalColumn;\n    getOwnerProps: DSDataTableT.GetOwnerPropsT;\n    getOwnerPropsArguments: () => DSDataTableT.Cell;\n  }>\n>(({ cellStyle, children, column, getOwnerProps, getOwnerPropsArguments }) => (\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\ninterface CellProps {\n  cell: DSDataTableT.Cell;\n  column: DSDataTableT.InternalColumn;\n  row: DSDataTableT.InternalRow;\n  isRowSelected: boolean;\n  shouldAddExpandCell: boolean;\n  isDragOverlay: boolean;\n}\n\nconst Cell: React.ComponentType<CellProps> = ({\n  cell,\n  column,\n  row,\n  isRowSelected,\n  shouldAddExpandCell,\n  isDragOverlay,\n}) => {\n  const cellRendererProps = usePropsStore((state) => state.cellRendererProps);\n  const disabledRows = usePropsStore((state) => state.disabledRows);\n  const getOwnerProps = usePropsStore((store) => store.get);\n  const getOwnerPropsArguments = React.useCallback(() => cell, [cell]);\n  const isDisabledRow = disabledRows[row.uid];\n\n  const { draggableProps } = useContext(SortableItemContext);\n\n  const [appliedTextWrap, cellStyle] = useCellStyle(column, shouldAddExpandCell);\n\n  const cellProps = useMemo(\n    () => ({\n      ...cellRendererProps,\n      cell,\n      row,\n      isRowSelected,\n      draggableProps,\n      isDragOverlay,\n      role: 'cell',\n      cellStyle,\n      column,\n      isDisabledRow,\n    }),\n    [cellRendererProps, cell, row, isRowSelected, draggableProps, isDragOverlay, cellStyle, column, isDisabledRow],\n  );\n\n  const CellComponent = cell.render;\n\n  const textValue = useMemo(\n    () =>\n      appliedTextWrap === 'truncate' ? (\n        // @ts-expect-error - data-table typescript is broken\n        <SimpleTruncatedTooltipText value={<CellComponent {...cellProps} />} />\n      ) : (\n        // @ts-expect-error - data-table typescript is broken\n        <CellComponent {...cellProps} />\n      ),\n    [CellComponent, appliedTextWrap, cellProps],\n  );\n  const pureCellContent = useMemo(() => {\n    if (shouldAddExpandCell) {\n      return (\n        <Grid cols={['min-content', 'auto']} alignItems=\"center\" height=\"100%\">\n          {/* @ts-expect-error - data-table typescript is broken */}\n          {shouldAddExpandCell && expandRowColumn.Cell && <expandRowColumn.Cell {...cellProps} />}\n          {textValue}\n        </Grid>\n      );\n    }\n    return textValue;\n  }, [cellProps, shouldAddExpandCell, textValue]);\n  const DefaultCellContentJSX = useMemo(\n    () => (\n      <StyledCellContent getOwnerProps={getOwnerProps} getOwnerPropsArguments={getOwnerPropsArguments}>\n        {pureCellContent}\n      </StyledCellContent>\n    ),\n    [getOwnerProps, getOwnerPropsArguments, pureCellContent],\n  );\n\n  const EditableContentJSX = useMemo(() => {\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 {...cellProps} DefaultCellRender={DefaultCellContentJSX} />;\n    }\n    if (typeof column.editable === 'function')\n      // @ts-expect-error - data-table typescript is broken\n      return column.editable({\n        DefaultCellRender: DefaultCellContentJSX,\n        ...cellProps,\n      }) as JSX.Element;\n\n    return null;\n  }, [DefaultCellContentJSX, cellProps, column]);\n\n  return (\n    <PureStandardCell {...cellProps} getOwnerProps={getOwnerProps} getOwnerPropsArguments={getOwnerPropsArguments}>\n      {column.editable && !disabledRows[row.uid] ? EditableContentJSX : DefaultCellContentJSX}\n    </PureStandardCell>\n  );\n};\n\nexport { Cell };\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": "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",
+  "sourcesContent": ["/* eslint-disable max-lines */\nimport { Grid } from '@elliemae/ds-grid';\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<\n  PropsWithChildren<{\n    cellStyle: React.CSSProperties;\n    column: DSDataTableT.InternalColumn;\n    getOwnerProps: DSDataTableT.GetOwnerPropsT;\n    getOwnerPropsArguments: () => DSDataTableT.Cell;\n  }>\n>(({ cellStyle, children, column, getOwnerProps, getOwnerPropsArguments }) => (\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\ninterface CellProps {\n  cell: DSDataTableT.Cell;\n  column: DSDataTableT.InternalColumn;\n  row: DSDataTableT.InternalRow;\n  isRowSelected: boolean;\n  shouldAddExpandCell: boolean;\n  isDragOverlay: boolean;\n}\n\nconst Cell: React.ComponentType<CellProps> = ({\n  cell,\n  column,\n  row,\n  isRowSelected,\n  shouldAddExpandCell,\n  isDragOverlay,\n}) => {\n  const cellRendererProps = usePropsStore((state) => state.cellRendererProps);\n  const disabledRows = usePropsStore((state) => state.disabledRows);\n  const getOwnerProps = usePropsStore((store) => store.get);\n  const getOwnerPropsArguments = React.useCallback(() => cell, [cell]);\n  const isDisabledRow = disabledRows[row.uid];\n\n  const { draggableProps } = useContext(SortableItemContext);\n\n  const [appliedTextWrap, cellStyle] = useCellStyle(column, shouldAddExpandCell);\n\n  const cellProps = useMemo(\n    () => ({\n      ...cellRendererProps,\n      cell,\n      row,\n      isRowSelected,\n      draggableProps,\n      isDragOverlay,\n      role: 'cell',\n      cellStyle,\n      column,\n      isDisabledRow,\n    }),\n    [cellRendererProps, cell, row, isRowSelected, draggableProps, isDragOverlay, cellStyle, column, isDisabledRow],\n  );\n\n  const CellComponent = cell.render;\n\n  const textValue = useMemo(\n    () =>\n      appliedTextWrap === 'truncate' ? (\n        // @ts-expect-error - data-table typescript is broken\n        <TruncatedTooltipText value={<CellComponent {...cellProps} />} />\n      ) : (\n        // @ts-expect-error - data-table typescript is broken\n        <CellComponent {...cellProps} />\n      ),\n    [CellComponent, appliedTextWrap, cellProps],\n  );\n  const pureCellContent = useMemo(() => {\n    if (shouldAddExpandCell) {\n      return (\n        <Grid cols={['min-content', 'auto']} alignItems=\"center\" height=\"100%\">\n          {/* @ts-expect-error - data-table typescript is broken */}\n          {shouldAddExpandCell && expandRowColumn.Cell && <expandRowColumn.Cell {...cellProps} />}\n          {textValue}\n        </Grid>\n      );\n    }\n    return textValue;\n  }, [cellProps, shouldAddExpandCell, textValue]);\n  const DefaultCellContentJSX = useMemo(\n    () => (\n      <StyledCellContent getOwnerProps={getOwnerProps} getOwnerPropsArguments={getOwnerPropsArguments}>\n        {pureCellContent}\n      </StyledCellContent>\n    ),\n    [getOwnerProps, getOwnerPropsArguments, pureCellContent],\n  );\n\n  const EditableContentJSX = useMemo(() => {\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 {...cellProps} DefaultCellRender={DefaultCellContentJSX} />;\n    }\n    if (typeof column.editable === 'function')\n      // @ts-expect-error - data-table typescript is broken\n      return column.editable({\n        DefaultCellRender: DefaultCellContentJSX,\n        ...cellProps,\n      }) as JSX.Element;\n\n    return null;\n  }, [DefaultCellContentJSX, cellProps, column]);\n\n  return (\n    <PureStandardCell {...cellProps} getOwnerProps={getOwnerProps} getOwnerPropsArguments={getOwnerPropsArguments}>\n      {column.editable && !disabledRows[row.uid] ? EditableContentJSX : DefaultCellContentJSX}\n    </PureStandardCell>\n  );\n};\n\nexport { Cell };\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": "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",
   "names": ["React"]
 }

package/dist/cjs/parts/Cells/CellFactory.js CHANGED Viewed

@@ -33,13 +33,13 @@ __export(CellFactory_exports, {
 module.exports = __toCommonJS(CellFactory_exports);
 var React = __toESM(require("react"));
 var import_jsx_runtime = require("react/jsx-runtime");
-var import_ds_truncated_tooltip_text = require("@elliemae/ds-truncated-tooltip-text");
 var import_react = __toESM(require("react"));
 var import_Columns = require("../../addons/Columns/index.js");
 var import_Editables = require("../../addons/Editables/index.js");
 var import_constants = require("../../configs/constants.js");
 var import_createInternalAndPropsContext = require("../../configs/useStore/createInternalAndPropsContext.js");
 var import_styled = require("../../styled.js");
+var import_TruncatedTooltipText = require("../../TruncatedTooltipText.js");
 var import_SortableItemContext = require("../HoC/SortableItemContext.js");
 var import_useCellStyle = require("./useCellStyle.js");
 const PureStandardCell = (0, import_react.memo)(
@@ -67,7 +67,7 @@ const TruncableCellContent = (0, import_react.memo)((props) => {
   const textWrap = (0, import_createInternalAndPropsContext.usePropsStore)((state) => state.textWrap);
   const appliedTextWrap = column.textWrap || textWrap;
   if (appliedTextWrap === "truncate") {
-    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ds_truncated_tooltip_text.SimpleTruncatedTooltipText, { value: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(CellComponent, { ...props }) });
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_TruncatedTooltipText.TruncatedTooltipText, { value: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(CellComponent, { ...props }) });
   }
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(CellComponent, { ...props });
 });

package/dist/cjs/parts/Cells/CellFactory.js.map CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/parts/Cells/CellFactory.tsx", "../../../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["/* eslint-disable max-lines */\nimport { SimpleTruncatedTooltipText } from '@elliemae/ds-truncated-tooltip-text';\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 { 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 <SimpleTruncatedTooltipText 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", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADkBjB;AAjBN,uCAA2C;AAC3C,mBAAyE;AACzE,qBAAgC;AAChC,uBAAqC;AACrC,uBAA4B;AAC5B,2CAA8B;AAE9B,oBAA8C;AAC9C,iCAAoC;AACpC,0BAA6B;AAE7B,MAAM,uBAAmB;AAAA,EACvB,CAAC,EAAE,QAAQ,MAAM,qBAAqB,sBAAsB,KAAK,SAAS,MAAM;AAC9E,UAAM,gBAAY,kCAAa,QAAQ,qBAAqB,sBAAsB,GAAG,EAAE,CAAC;AACxF,UAAM,oBAAgB,oDAAc,CAAC,UAAU,MAAM,GAAG;AACxD,UAAM,yBAAyB,aAAAA,QAAM,YAAY,MAAM,MAAM,CAAC,IAAI,CAAC;AACnE,WACE;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA,OAAO;AAAA,QACP,MAAK;AAAA,QACL,eAAa,6BAAY;AAAA,QACzB;AAAA,QACA;AAAA,QAEC;AAAA;AAAA,IACH;AAAA,EAEJ;AACF;AAEA,MAAM,2BAAuB,mBAAK,CAAC,UAAkC;AACnE,QAAM,EAAE,MAAM,OAAO,IAAI;AACzB,QAAM,EAAE,QAAQ,cAAc,IAAI;AAElC,QAAM,eAAW,oDAAc,CAAC,UAAU,MAAM,QAAQ;AACxD,QAAM,kBAAkB,OAAO,YAAY;AAC3C,MAAI,oBAAoB,YAAY;AAClC,WAAO,4CAAC,+DAA2B,OAAO,4CAAC,iBAAe,GAAG,OAAO,GAAI;AAAA,EAC1E;AACA,SAAO,4CAAC,iBAAe,GAAG,OAAO;AACnC,CAAC;AAED,MAAM,4BAAwB;AAAA,EAC5B,CAAC,UAAkC,+BAAgB,QAAQ,4CAAC,+BAAgB,MAAhB,EAAsB,GAAG,OAAO;AAC9F;AAEA,MAAM,yBAAqB;AAAA,EACzB,CACE,UAIG;AACH,UAAM,EAAE,qBAAqB,eAAe,uBAAuB,IAAI;AAEvE,WACE,4CAAC,mCAAkB,eAA8B,wBAC9C,gCAAsB,4CAAC,yBAAuB,GAAG,OAAO,IAAK,4CAAC,wBAAsB,GAAG,OAAO,GACjG;AAAA,EAEJ;AACF;AAEA,MAAM,mBAAe;AAAA,EACnB,CACE,UAIG;AACH,UAAM,EAAE,eAAe,wBAAwB,GAAG,UAAU,IAAI;AAChE,UAAM,EAAE,OAAO,IAAI;AACnB,UAAM,wBACJ;AAAA,MAAC;AAAA;AAAA,QACE,GAAG;AAAA,QACJ;AAAA,QACA;AAAA;AAAA,IACF;AAGF,QAAI,OAAO,OAAO,aAAa,UAAU;AACvC,YAAM,EAAE,kBAAkB,IAAI,wCAAuB,OAAO,QAAQ,KAAK,CAAC;AAE1E,UAAI,kBAAmB,QAAO,4CAAC,qBAAmB,GAAG,WAAW,mBAAmB,uBAAuB;AAAA,IAC5G;AACA,QAAI,OAAO,OAAO,aAAa,YAAY;AACzC,YAAM,4BAA4B,OAAO;AAGzC,aAAO,4CAAC,6BAA2B,GAAG,WAAW,mBAAmB,uBAAuB;AAAA,IAC7F;AAEA,WAAO;AAAA,EACT;AACF;AAYA,MAAM,cAAqD,CAAC,UAAU;AACpE,QAAM,EAAE,QAAQ,KAAK,KAAK,IAAI;AAC9B,QAAM,wBAAoB,oDAAc,CAAC,UAAU,MAAM,iBAAiB;AAC1E,QAAM,mBAAe,oDAAc,CAAC,UAAU,MAAM,YAAY;AAChE,QAAM,iBAAa,oDAAc,CAAC,UAAU,MAAM,UAAU;AAC5D,QAAM,oBAAgB,oDAAc,CAAC,UAAU,MAAM,GAAG;AACxD,QAAM,yBAAyB,aAAAA,QAAM,YAAY,MAAM,MAAM,CAAC,IAAI,CAAC;AAEnE,QAAM,gBAAgB,aAAa,IAAI,GAAG;AAE1C,QAAM,EAAE,eAAe,QAAI,yBAAW,8CAAmB;AAEzD,QAAM,gBAAoC;AAAA,IACxC,OAAO;AAAA,MACL,GAAG;AAAA,MACH,GAAG;AAAA,MACH,MAAM;AAAA,MACN;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,IACA,CAAC,mBAAmB,OAAO,gBAAgB,eAAe,UAAU;AAAA,EACtE;AAEA,SACE,4CAAC,oBAAkB,GAAG,WACnB,iBAAO,YAAY,CAAC,aAAa,IAAI,GAAG,IACvC,4CAAC,gBAAc,GAAG,WAAW,eAA8B,wBAAgD,IAE3G;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACJ;AAAA,MACA;AAAA;AAAA,EACF,GAEJ;AAEJ;",
+  "sourcesContent": ["/* 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", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": "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",
   "names": ["React"]
 }

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

@@ -114,7 +114,8 @@ const FiltersBar = () => {
       getOwnerProps,
       children: [
         filters.map(({ id: column, type, value }, index) => {
-          const columnHeader = visibleColumns.find((col) => col.accessor === column)?.Header;
+          const matchedColumn = visibleColumns.find((col) => col.accessor === column);
+          const columnHeader = matchedColumn?.pillLabel || matchedColumn?.Header;
           let Component = () => null;
           const filterType = type;
           if (filterType in pillRenderMapper) {