npm - @elliemae/ds-data-table - Versions diffs - 3.70.0-next.6 → 3.70.0-next.60 - Mend

@elliemae/ds-data-table 3.70.0-next.6 → 3.70.0-next.60

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 (159) hide show

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../src/constants/index.ts"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "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"],
-  "mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,+BAA+B;AACxC,SAAS,yBAAyB;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,GAAG,wBAAwB,iBAAiB,gBAAgB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAO5D,GAAG;AAAA;AAAA;AAAA;AAAA;AAAA,EAKH,iBAAiB,kBAAkB;AAAA,EACnC,eAAe,kBAAkB;AAAA,EACjC,gBAAgB,kBAAkB;AAAA,EAClC,uBAAuB,kBAAkB;AAAA,EACzC,yBAAyB,kBAAkB;AAAA,EAC3C,uBAAuB,kBAAkB;AAAA,EACzC,SAAS,kBAAkB;AAAA,EAC3B,MAAM,kBAAkB;AAAA,EACxB,eAAe,kBAAkB;AAAA,EACjC,MAAM,kBAAkB;AAAA,EACxB,sBAAsB,kBAAkB;AAAA,EACxC,wBAAwB,kBAAkB;AAAA,EAC1C,wBAAwB,kBAAkB;AAAA;AAAA,EAE1C,uBAAuB;AACzB;AAGO,MAAM,mBAAmB;AACzB,MAAM,yBAAyB;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "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"],
+  "mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,+BAA+B;AACxC,SAAS,yBAAyB;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,GAAG,wBAAwB,iBAAiB,gBAAgB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAO5D,GAAG;AAAA;AAAA;AAAA;AAAA;AAAA,EAKH,iBAAiB,kBAAkB;AAAA,EACnC,eAAe,kBAAkB;AAAA,EACjC,gBAAgB,kBAAkB;AAAA,EAClC,uBAAuB,kBAAkB;AAAA,EACzC,yBAAyB,kBAAkB;AAAA,EAC3C,uBAAuB,kBAAkB;AAAA,EACzC,SAAS,kBAAkB;AAAA,EAC3B,MAAM,kBAAkB;AAAA,EACxB,eAAe,kBAAkB;AAAA,EACjC,MAAM,kBAAkB;AAAA,EACxB,sBAAsB,kBAAkB;AAAA,EACxC,wBAAwB,kBAAkB;AAAA,EAC1C,wBAAwB,kBAAkB;AAAA;AAAA,EAE1C,uBAAuB;AACzB;AAGO,MAAM,mBAAmB;AACzB,MAAM,yBAAyB;",
   "names": []
 }

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

@@ -43,7 +43,8 @@ const PillsFromDataTableFilters = ({
     return refs;
   }, [filters.length]);
   return /* @__PURE__ */ jsx(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/esm/exported-related/FilterBar/PillsFromDataTableFilters.js.map CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/exported-related/FilterBar/PillsFromDataTableFilters.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "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"],
-  "mappings": "AAAA,YAAY,WAAW;ACyDnB,mBAiBM,WAjBN;AAxDJ,OAAOA,UAAS,eAAe;AAC/B;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AAEP,SAAS,oBAAoB;AAE7B,MAAM,mBAAmB;AAAA,EACvB,CAAC,aAAa,MAAM,GAAG;AAAA,EACvB,CAAC,aAAa,SAAS,GAAG;AAAA,EAC1B,CAAC,aAAa,YAAY,GAAG;AAAA,EAC7B,CAAC,aAAa,eAAe,GAAG;AAAA,EAChC,CAAC,aAAa,WAAW,GAAG;AAAA,EAC5B,CAAC,aAAa,cAAc,GAAG;AAAA,EAC/B,CAAC,aAAa,UAAU,GAAG;AAAA,EAC3B,CAAC,aAAa,aAAa,GAAG;AAAA,EAC9B,CAAC,aAAa,aAAa,GAAG;AAAA,EAC9B,CAAC,aAAa,gBAAgB,GAAG;AAAA,EACjC,CAAC,aAAa,YAAY,GAAG;AAAA,EAC7B,CAAC,aAAa,eAAe,GAAG;AAAA,EAChC,CAAC,aAAa,cAAc,GAAG;AAAA,EAC/B,CAAC,aAAa,iBAAiB,GAAG;AAAA,EAClC,CAAC,aAAa,gBAAgB,GAAG;AAAA,EACjC,CAAC,aAAa,mBAAmB,GAAG;AACtC;AAWO,MAAM,4BAAsE,CAAC;AAAA,EAClF;AAAA,EACA;AAAA,EAEA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,MAAM;AACJ,QAAM,WAAW,QAAQ,MAAM;AAC7B,UAAM,OAAuC,CAAC;AAC9C,aAAS,IAAI,GAAG,IAAI,QAAQ,QAAQ,KAAK,EAAG,MAAK,KAAKA,OAAM,UAAU,CAAC;AACvE,WAAO;AAAA,EACT,GAAG,CAAC,QAAQ,MAAM,CAAC;AACnB,SACE,gCACG,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 * as React from 'react';\nexport { React };\n", "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"],
+  "mappings": "AAAA,YAAY,WAAW;ACyDnB,mBAkBM,WAlBN;AAxDJ,OAAOA,UAAS,eAAe;AAC/B;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AAEP,SAAS,oBAAoB;AAE7B,MAAM,mBAAmB;AAAA,EACvB,CAAC,aAAa,MAAM,GAAG;AAAA,EACvB,CAAC,aAAa,SAAS,GAAG;AAAA,EAC1B,CAAC,aAAa,YAAY,GAAG;AAAA,EAC7B,CAAC,aAAa,eAAe,GAAG;AAAA,EAChC,CAAC,aAAa,WAAW,GAAG;AAAA,EAC5B,CAAC,aAAa,cAAc,GAAG;AAAA,EAC/B,CAAC,aAAa,UAAU,GAAG;AAAA,EAC3B,CAAC,aAAa,aAAa,GAAG;AAAA,EAC9B,CAAC,aAAa,aAAa,GAAG;AAAA,EAC9B,CAAC,aAAa,gBAAgB,GAAG;AAAA,EACjC,CAAC,aAAa,YAAY,GAAG;AAAA,EAC7B,CAAC,aAAa,eAAe,GAAG;AAAA,EAChC,CAAC,aAAa,cAAc,GAAG;AAAA,EAC/B,CAAC,aAAa,iBAAiB,GAAG;AAAA,EAClC,CAAC,aAAa,gBAAgB,GAAG;AAAA,EACjC,CAAC,aAAa,mBAAmB,GAAG;AACtC;AAWO,MAAM,4BAAsE,CAAC;AAAA,EAClF;AAAA,EACA;AAAA,EAEA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,MAAM;AACJ,QAAM,WAAW,QAAQ,MAAM;AAC7B,UAAM,OAAuC,CAAC;AAC9C,aAAS,IAAI,GAAG,IAAI,QAAQ,QAAQ,KAAK,EAAG,MAAK,KAAKA,OAAM,UAAU,CAAC;AACvE,WAAO;AAAA,EACT,GAAG,CAAC,QAAQ,MAAM,CAAC;AACnB,SACE,gCACG,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/esm/exported-related/FilterPopover/FilterPopoverV2.js CHANGED Viewed

@@ -4,12 +4,11 @@ import { DSButtonV3 } from "@elliemae/ds-button-v2";
 import { useFloatingContext } from "@elliemae/ds-floating-context";
 import { useFocusTrap } from "@elliemae/ds-hooks-focus-trap";
 import { mergeRefs } from "@elliemae/ds-system";
-import { useCallback, useEffect, useRef, useState } from "react";
+import { useCallback, useRef, useState } from "react";
 import { usePropsStore } from "../../configs/useStore/createInternalAndPropsContext.js";
 import { DATA_TABLE_DATA_TESTID } from "../../constants/index.js";
 import { useGetFilterHandlers } from "./useGetFilterHandlers.js";
 import { useGetFilterVisibility } from "./useGetFilterVisibility.js";
-import { useOnClickOutside } from "./useOnClickOutside.js";
 import { FilterButton, PopperContent, StyledDSDialogFooter, StyledFloatingWrapper } from "./styled.js";
 const FilterPopoverV2 = (props) => {
   const {
@@ -26,6 +25,7 @@ const FilterPopoverV2 = (props) => {
     onFilterReset
   } = props;
   const getOwnerProps = usePropsStore((store) => store.get);
+  const virtualListRef = usePropsStore((state) => state.virtualListRef);
   const getOwnerPropsArguments = useCallback(
     () => ({
       columnId: column.id
@@ -45,20 +45,26 @@ const FilterPopoverV2 = (props) => {
     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
   });
-  useOnClickOutside(isMenuOpen ? refs.floating : null, handleClickOutsideMenu);
   const handleOnKeyDown = useFocusTrap({
     firstElementRef,
     lastElementRef
   });
-  useEffect(() => {
-    if (columnReference) {
-      refs.setReference(columnReference);
-    }
-  }, [columnReference, refs]);
   return (
     // eslint-disable-next-line jsx-a11y/no-static-element-interactions
     /* @__PURE__ */ jsxs(

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/exported-related/FilterPopover/FilterPopoverV2.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "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"],
-  "mappings": "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",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "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"],
+  "mappings": "AAAA,YAAY,WAAW;AC2Ff,cAmCM,YAnCN;AA3FR,SAAS,kBAAkB;AAE3B,SAAS,0BAA0B;AACnC,SAAS,oBAAoB;AAE7B,SAAS,iBAAiB;AAC1B,SAAgB,aAAa,QAAQ,gBAAgB;AAErD,SAAS,qBAAqB;AAC9B,SAAS,8BAA8B;AAEvC,SAAS,4BAA4B;AACrC,SAAS,8BAA8B;AACvC,SAAS,cAAc,eAAe,sBAAsB,6BAA6B;AAElF,MAAM,kBAA6D,CAAC,UAAgC;AACzG,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,IAAI;AAEJ,QAAM,gBAAgB,cAAc,CAAC,UAAU,MAAM,GAAG;AACxD,QAAM,iBAAiB,cAAc,CAAC,UAAU,MAAM,cAAc;AAEpE,QAAM,yBAAyB;AAAA,IAC7B,OAAO;AAAA,MACL,UAAU,OAAO;AAAA,IACnB;AAAA,IACA,CAAC,OAAO,EAAE;AAAA,EACZ;AAEA,QAAM,CAAC,iBAAiB,kBAAkB,IAAI,SAAmC,IAAI;AAErF,QAAM,CAAC,iBAAiB,kBAAkB,IAAI,SAAS,KAAK;AAC5D,QAAM,EAAE,eAAe,WAAW,IAAI,uBAAuB,WAAW;AAExE,QAAM,EAAE,oBAAoB,wBAAwB,qBAAqB,sBAAsB,oBAAoB,IACjH,qBAAqB,OAAO,YAAY,iBAAiB,kBAAkB;AAE7E,QAAM,iBAAiB,OAA0B,IAAI;AACrD,QAAM,cAAc,OAA8B,IAAI;AAEtD,QAAM;AAAA,IACJ;AAAA,IACA,QAAQ;AAAA,IACR;AAAA,IACA;AAAA,EACF,IAAI,mBAAmB;AAAA,IACrB,4BAA4B;AAAA,IAC5B,0BAA0B;AAAA,IAC1B,WAAW;AAAA,IACX,kBAAkB;AAAA,IAClB,cAAc,CAAC,GAAG,CAAC;AAAA,IACnB,gBAAgB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAUhB,iBAAiB,eAAe;AAAA,EAClC,CAAC;AACD,QAAM,kBAAkB,aAAa;AAAA,IACnC;AAAA,IACA;AAAA,EACF,CAAC;AAED;AAAA;AAAA,IAEE;AAAA,MAAC;AAAA;AAAA,QAEC,SAAS,CAAC,MAAM,EAAE,gBAAgB;AAAA,QAClC,WAAW;AAAA,QAEX;AAAA;AAAA,YAAC;AAAA;AAAA,cACC,MAAM,CAAC;AAAA,cACP,eAAa,uBAAuB;AAAA,cACpC;AAAA,cAEA;AAAA,gBAAC;AAAA;AAAA,kBACC,YAAW;AAAA,kBACX,MAAK;AAAA,kBACL,SAAS;AAAA,kBACT,WAAW;AAAA,kBACX,SAAS;AAAA,kBACT,QAAQ;AAAA,kBACR,UAAU,UAAU,iBAAiB,oBAAoB,QAAQ;AAAA,kBACjE,UAAU,aAAa,eAAe,IAAI;AAAA,kBAC1C,cAAY;AAAA,kBACZ,eAAa,CAAC;AAAA,kBACd,eAAa,uBAAuB;AAAA,kBAEnC;AAAA;AAAA,cACH;AAAA;AAAA,UACF;AAAA,UACC,KAAK,aACJ;AAAA,YAAC;AAAA;AAAA,cACC,UAAU,KAAK;AAAA,cACf,QAAQ;AAAA,cACR,gBAAgB;AAAA,gBACd,GAAG;AAAA,gBACH,GAAG;AAAA,gBACH,UAAU;AAAA,cACZ;AAAA,cACA;AAAA,cACA,eAAa,uBAAuB;AAAA,cACpC;AAAA,cACA;AAAA,cACA,cAAY,aAAa,OAAO,MAAgB;AAAA,cAChD,MAAK;AAAA,cAEL,8BAAC,iBAAc,eAA8B,WAAW,iBAAiB,UAAU,aACjF,+BAAC,UAAK,UAAU,gBACb;AAAA;AAAA,gBACD,qBAAC,wBACC;AAAA,sCAAC,cAAW,SAAS,eAAe,YAAW,WAAU,MAAK,KAAI,mBAElE;AAAA,kBACA,oBAAC,cAAW,MAAK,UAAS,UAAU,gBAAgB,MAAK,KAAI,mBAE7D;AAAA,mBACF;AAAA,iBACF,GACF;AAAA;AAAA,UACF;AAAA;AAAA;AAAA,IAEJ;AAAA;AAEJ;",
   "names": []
 }

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

@@ -9,7 +9,6 @@ import { DATA_TESTID } from "../../configs/constants.js";
 import { usePropsStore } from "../../configs/useStore/createInternalAndPropsContext.js";
 import { useGetFilterHandlers } from "./useGetFilterHandlers.js";
 import { useGetFilterVisibility } from "./useGetFilterVisibility.js";
-import { useOnClickOutside } from "./useOnClickOutside.js";
 import { FilterButton, PopperContent, StyledFloatingWrapper } from "./styled.js";
 const FilterPopover = (props) => {
   const {
@@ -26,6 +25,7 @@ const FilterPopover = (props) => {
   } = props;
   const filters = usePropsStore((state) => state.filters);
   const getOwnerProps = usePropsStore((store) => store.get);
+  const virtualListRef = usePropsStore((state) => state.virtualListRef);
   const getOwnerPropsArguments = useCallback(
     () => ({
       columnId: column.id
@@ -37,6 +37,7 @@ const FilterPopover = (props) => {
   const [isButtonFocused, setIsButtonFocused] = useState(false);
   const { handleTriggerClick, handleClickOutsideMenu, handleMenuOnKeyDown, handleTriggerOnFocus, handleTriggerOnBlur } = useGetFilterHandlers(props, isMenuOpen, buttonReference, setIsButtonFocused);
   const floatingOffset = useMemo(() => columnReference ? [0, 1] : [5, 4], [columnReference]);
+  const externalReferenceElement = columnReference || buttonReference;
   const {
     refs,
     floatingStyles,
@@ -45,19 +46,42 @@ const FilterPopover = (props) => {
     forceUpdatePosition
   } = useFloatingContext({
     externallyControlledIsOpen: isMenuOpen,
+    externalReferenceElement,
     placement: "bottom-end",
     customOffset: floatingOffset,
     withoutAnimation: true,
-    placementOrderPreference: ["bottom-end", "top-end"]
+    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
   });
-  useEffect(() => {
-    const ref = columnReference || buttonReference;
-    if (ref) refs.setReference(ref);
-  }, [columnReference, buttonReference, refs]);
   useEffect(() => {
     void forceUpdatePosition();
   }, [filters, forceUpdatePosition]);
-  useOnClickOutside(isMenuOpen ? refs.floating : null, handleClickOutsideMenu);
   const popoverContentRef = useRef(null);
   const handleOnKeyDown = useFocusTrap({
     firstElementRef,

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/exported-related/FilterPopover/index.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* 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 { useOnClickOutside } from './useOnClickOutside.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\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 {\n    refs,\n    floatingStyles,\n    context,\n    isOpen: isFloatingOpen,\n    forceUpdatePosition,\n  } = useFloatingContext({\n    externallyControlledIsOpen: isMenuOpen,\n    placement: 'bottom-end',\n    customOffset: floatingOffset,\n    withoutAnimation: true,\n    placementOrderPreference: ['bottom-end', 'top-end'],\n  });\n\n  useEffect(() => {\n    const ref = columnReference || buttonReference;\n    if (ref) refs.setReference(ref);\n  }, [columnReference, buttonReference, refs]);\n\n  // When the filter bar changes height, re-compute the floating position\n  useEffect(() => {\n    void forceUpdatePosition();\n  }, [filters, forceUpdatePosition]);\n\n  useOnClickOutside(isMenuOpen ? refs.floating : null, handleClickOutsideMenu);\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"],
-  "mappings": "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",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* 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"],
+  "mappings": "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",
   "names": []
 }

package/dist/esm/package.json CHANGED Viewed

@@ -3,8 +3,5 @@
   "sideEffects": [
     "*.css",
     "*.scss"
-  ],
-  "publishConfig": {
-    "access": "public"
-  }
+  ]
 }

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

@@ -1,13 +1,13 @@
 import * as React from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { Grid } from "@elliemae/ds-grid";
-import { TruncatedTooltipText } from "../../TruncatedTooltipText.js";
 import React2, { memo, useContext, useMemo } from "react";
 import { expandRowColumn } from "../../addons/Columns/index.js";
 import { outOfTheBoxEditables } from "../../addons/Editables/index.js";
 import { DATA_TESTID } from "../../configs/constants.js";
 import { usePropsStore } from "../../configs/useStore/createInternalAndPropsContext.js";
 import { StyledCell, StyledCellContent } from "../../styled.js";
+import { TruncatedTooltipText } from "../../TruncatedTooltipText.js";
 import { SortableItemContext } from "../HoC/SortableItemContext.js";
 import { useCellStyle } from "./useCellStyle.js";
 const PureStandardCell = memo(({ cellStyle, children, column, getOwnerProps, getOwnerPropsArguments }) => /* @__PURE__ */ jsx(

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/parts/Cells/Cell.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable max-lines */\nimport { Grid } from '@elliemae/ds-grid';\nimport { TruncatedTooltipText } from '../../TruncatedTooltipText.js';\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        <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"],
-  "mappings": "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",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* 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"],
+  "mappings": "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",
   "names": ["React"]
 }

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

@@ -1,12 +1,12 @@
 import * as React from "react";
 import { jsx } from "react/jsx-runtime";
-import { TruncatedTooltipText } from "../../TruncatedTooltipText.js";
 import React2, { memo, useContext, useMemo } from "react";
 import { expandRowColumn } from "../../addons/Columns/index.js";
 import { outOfTheBoxEditables } from "../../addons/Editables/index.js";
 import { DATA_TESTID } from "../../configs/constants.js";
 import { usePropsStore } from "../../configs/useStore/createInternalAndPropsContext.js";
 import { StyledCell, StyledCellContent } from "../../styled.js";
+import { TruncatedTooltipText } from "../../TruncatedTooltipText.js";
 import { SortableItemContext } from "../HoC/SortableItemContext.js";
 import { useCellStyle } from "./useCellStyle.js";
 const PureStandardCell = memo(

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

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

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

@@ -89,7 +89,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) {

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

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

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

@@ -12,23 +12,9 @@ import { useHeaderCellHandlers } from "./useHeaderCellHandlers.js";
 import { useHeaderCellConfig } from "./useHeaderCellConfig.js";
 import { DATA_TESTID } from "../../configs/constants.js";
 import { HeaderCellTitle } from "./HeaderCellTitle.js";
+import { buildScreenReaderInstructions } from "./buildScreenReaderInstructions.js";
 import { useInternalStore, usePropsStore } from "../../configs/useStore/createInternalAndPropsContext.js";
-const buildScreenReaderInstructions = ({
-  colSpan,
-  draggable,
-  filterable,
-  sortable
-}) => {
-  const preffix = colSpan === 1 ? "" : "Column Group. ";
-  if (!draggable && !filterable && !sortable) return preffix;
-  let message = sortable ? "You can sort the data ascendingly/descendingly by this column. Use the up / down arrows keys to do so" : "";
-  if (draggable && filterable) {
-    message = `This column is draggable and filterable. To enable these interactions press the enter key. ${message}`;
-  } else if (draggable || filterable) {
-    message = `This column is ${draggable ? "draggable" : "filterable"}. To enable this interaction press the enter key. ${message}`;
-  }
-  return `${preffix}${message}`;
-};
+const HIDDEN_STYLE = { display: "none" };
 const HeaderCell = (props) => {
   const { column, isDragOverlay, colSpan } = props;
   const disabledRows = usePropsStore((state) => state.disabledRows);
@@ -113,7 +99,7 @@ const HeaderCell = (props) => {
     handleSort
   ]);
   const DnDHandleComponent = useMemo(
-    () => /* @__PURE__ */ jsx(Grid, { mr: "2px", alignItems: "center", style: { position: "relative" }, children: /* @__PURE__ */ jsx(StyledFocusWithin, { hideFocus: isDragging, children: /* @__PURE__ */ jsx(
+    () => /* @__PURE__ */ jsx(Grid, { mr: "2px", height: "fit-content", py: "2px", mt: "2px", alignItems: "flex-start", style: { position: "relative" }, children: /* @__PURE__ */ jsx(StyledFocusWithin, { hideFocus: isDragging, children: /* @__PURE__ */ jsx(
       DragHandle,
       {
         innerRef: dragHandleRef,
@@ -127,7 +113,14 @@ const HeaderCell = (props) => {
     [column.id, disabledRows, domIdAffix, isDragOverlay, isDragging, reduxHeader?.withTabStops]
   );
   const screenReaderInstructionsId = `sr-${column.id}-instructions-${domIdAffix}`.replace(/ /g, "");
-  return /* @__PURE__ */ jsxs(
+  const instructions = buildScreenReaderInstructions({
+    colSpan,
+    draggable: dragAndDropColumns && column.disableDnD !== true,
+    filterable: hasFilter,
+    sortable: column.canSort ?? false,
+    resizable: shouldShowResize
+  });
+  const headTh = /* @__PURE__ */ jsxs(
     StyledHeadTh,
     {
       column,
@@ -151,15 +144,11 @@ const HeaderCell = (props) => {
           rightIcons,
           shouldShowResize && /* @__PURE__ */ jsx(HeaderResizer, { column, innerRef: resizeHandlerRef, isReachable: reduxHeader?.withTabStops ?? false })
         ] }),
-        /* @__PURE__ */ jsx("span", { id: screenReaderInstructionsId, style: { display: "none" }, "aria-hidden": "false", children: buildScreenReaderInstructions({
-          colSpan,
-          draggable: dragAndDropColumns && column.disableDnD !== true,
-          filterable: hasFilter,
-          sortable: column.canSort ?? false
-        }) })
+        /* @__PURE__ */ jsx("span", { id: screenReaderInstructionsId, style: HIDDEN_STYLE, children: instructions })
       ]
     }
   );
+  return headTh;
 };
 export {
   HeaderCell