@elliemae/ds-data-table 3.55.1 → 3.57.0-next.1

package/dist/cjs/DSDataTableDefinitions.js

@@ -78,7 +78,8 @@ const DSDataTableSlots = {
   EMPTY_BUTTON: "empty-button",
   CENTER_CONTENT_FLEX_WRAPPER: "center-content-flex-wrapper",
   LOADER_WRAPPER: "loader-wrapper",
-  FILTER_BAR_WRAPPER: "filter-bar-wrapper"
+  FILTER_BAR_WRAPPER: "filter-bar-wrapper",
+  FREE_TEXT_SEARCH_FILTER: "free-text-search-filter"
 };
 const DSDataTableDataTestIds = (0, import_ds_system.slotObjectToDataTestIds)(DSDataTableName, DSDataTableSlots);
 //# sourceMappingURL=DSDataTableDefinitions.js.map

package/dist/cjs/DSDataTableDefinitions.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/DSDataTableDefinitions.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["import { slotObjectToDataTestIds } from '@elliemae/ds-system';\nexport const DSDataTableName = 'DSDatatable';\n\nexport const DSDataTableSlots = {\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};\n\nexport const DSDataTableDataTestIds = slotObjectToDataTestIds(DSDataTableName, DSDataTableSlots);\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,uBAAwC;AACjC,MAAM,kBAAkB;AAExB,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;AACtB;AAEO,MAAM,6BAAyB,0CAAwB,iBAAiB,gBAAgB;",
+  "sourcesContent": ["import { slotObjectToDataTestIds } from '@elliemae/ds-system';\nexport const DSDataTableName = 'DSDatatable';\n\nexport const DSDataTableSlots = {\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};\n\nexport const DSDataTableDataTestIds = slotObjectToDataTestIds(DSDataTableName, DSDataTableSlots);\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,uBAAwC;AACjC,MAAM,kBAAkB;AAExB,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;AAC3B;AAEO,MAAM,6BAAyB,0CAAwB,iBAAiB,gBAAgB;",
   "names": []
 }

package/dist/cjs/addons/Editables/TextEditableCell/TextEditableCell.js

@@ -33,7 +33,7 @@ __export(TextEditableCell_exports, {
 module.exports = __toCommonJS(TextEditableCell_exports);
 var React = __toESM(require("react"));
 var import_jsx_runtime = require("react/jsx-runtime");
-var import_react = require("react");
+var import_react = __toESM(require("react"));
 var import_ds_system = require("@elliemae/ds-system");
 var import_exported_related = require("../../../exported-related/index.js");
 var import_createInternalAndPropsContext = require("../../../configs/useStore/createInternalAndPropsContext.js");
@@ -49,6 +49,7 @@ const TextEditableCell = (props) => {
   const { cell, DefaultCellRender, isRowSelected } = props;
   const onCellValueChange = (0, import_createInternalAndPropsContext.usePropsStore)((state) => state.onCellValueChange);
   const getOwnerProps = (0, import_createInternalAndPropsContext.usePropsStore)((store) => store.get);
+  const getOwnerPropsArguments = import_react.default.useCallback(() => cell, [cell]);
   const [value, setValue] = (0, import_react.useState)(cell.value);
   const handleOnChange = (0, import_react.useCallback)((e) => {
     const {
@@ -88,7 +89,8 @@ const TextEditableCell = (props) => {
           onChange: handleOnChange,
           onBlur: handleOnBlur,
           autoFocus: true,
-          getOwnerProps
+          getOwnerProps,
+          getOwnerPropsArguments
         }
       ),
       cell,

package/dist/cjs/addons/Editables/TextEditableCell/TextEditableCell.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/addons/Editables/TextEditableCell/TextEditableCell.tsx", "../../../../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["/* eslint-disable jsx-a11y/no-autofocus */\nimport React, { useState, useCallback } from 'react';\nimport { styled } from '@elliemae/ds-system';\nimport { EditableCell } from '../../../exported-related/index.js';\nimport type { DSDataTableT } from '../../../react-desc-prop-types.js';\nimport { usePropsStore } from '../../../configs/useStore/createInternalAndPropsContext.js';\nimport { DSDataTableName, DSDataTableSlots } from '../../../DSDataTableDefinitions.js';\n\nconst StyledInput = styled('input', { name: DSDataTableName, slot: DSDataTableSlots.TEXT_EDITABLE_CELL_INPUT })`\n  outline: none;\n  :focus {\n    border: 2px solid ${(props) => props.theme.colors.brand[700]};\n  }\n  max-width: 100%;\n`;\n\nexport const TextEditableCell: React.ComponentType<DSDataTableT.EditableCellProps<HTMLDivElement>> = (props) => {\n  const { cell, DefaultCellRender, isRowSelected } = props;\n\n  const onCellValueChange = usePropsStore((state) => state.onCellValueChange);\n  const getOwnerProps = usePropsStore((store) => store.get);\n\n  const [value, setValue] = useState<string>(cell.value as string);\n\n  const handleOnChange = useCallback((e: React.ChangeEvent<HTMLInputElement>) => {\n    const {\n      target: { value: tValue },\n    } = e;\n    setValue(tValue);\n  }, []);\n\n  const handleOnBlur = useCallback(() => {\n    const property = cell.column.id;\n    const rowIndex = cell.row.index;\n    onCellValueChange({ value, property, rowIndex });\n  }, [value, onCellValueChange, cell.column.id, cell.row.index]);\n\n  const handleOnKeyDown = useCallback(\n    (e: React.KeyboardEvent) => {\n      if (e.code === 'Enter') {\n        cell.ref.current?.focus();\n        // will exec on blur callback from input and save new value\n      }\n      if (e.code === 'Escape') {\n        setValue(cell.value as string);\n        const auxRef = cell.ref.current;\n        // this prevent the on blur\n        setTimeout(() => {\n          auxRef?.focus();\n        });\n      }\n    },\n    [cell],\n  );\n  return (\n    <EditableCell\n      StandardRender={DefaultCellRender}\n      EditableRenderer={\n        <StyledInput\n          value={value}\n          onKeyDown={handleOnKeyDown}\n          onChange={handleOnChange}\n          onBlur={handleOnBlur}\n          autoFocus\n          getOwnerProps={getOwnerProps}\n        />\n      }\n      cell={cell}\n      isRowSelected={isRowSelected}\n    />\n  );\n};\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;AD0Df;AAzDR,mBAA6C;AAC7C,uBAAuB;AACvB,8BAA6B;AAE7B,2CAA8B;AAC9B,oCAAkD;AAElD,MAAM,kBAAc,yBAAO,SAAS,EAAE,MAAM,+CAAiB,MAAM,+CAAiB,yBAAyB,CAAC;AAAA;AAAA;AAAA,wBAGtF,CAAC,UAAU,MAAM,MAAM,OAAO,MAAM,GAAG,CAAC;AAAA;AAAA;AAAA;AAKzD,MAAM,mBAAwF,CAAC,UAAU;AAC9G,QAAM,EAAE,MAAM,mBAAmB,cAAc,IAAI;AAEnD,QAAM,wBAAoB,oDAAc,CAAC,UAAU,MAAM,iBAAiB;AAC1E,QAAM,oBAAgB,oDAAc,CAAC,UAAU,MAAM,GAAG;AAExD,QAAM,CAAC,OAAO,QAAQ,QAAI,uBAAiB,KAAK,KAAe;AAE/D,QAAM,qBAAiB,0BAAY,CAAC,MAA2C;AAC7E,UAAM;AAAA,MACJ,QAAQ,EAAE,OAAO,OAAO;AAAA,IAC1B,IAAI;AACJ,aAAS,MAAM;AAAA,EACjB,GAAG,CAAC,CAAC;AAEL,QAAM,mBAAe,0BAAY,MAAM;AACrC,UAAM,WAAW,KAAK,OAAO;AAC7B,UAAM,WAAW,KAAK,IAAI;AAC1B,sBAAkB,EAAE,OAAO,UAAU,SAAS,CAAC;AAAA,EACjD,GAAG,CAAC,OAAO,mBAAmB,KAAK,OAAO,IAAI,KAAK,IAAI,KAAK,CAAC;AAE7D,QAAM,sBAAkB;AAAA,IACtB,CAAC,MAA2B;AAC1B,UAAI,EAAE,SAAS,SAAS;AACtB,aAAK,IAAI,SAAS,MAAM;AAAA,MAE1B;AACA,UAAI,EAAE,SAAS,UAAU;AACvB,iBAAS,KAAK,KAAe;AAC7B,cAAM,SAAS,KAAK,IAAI;AAExB,mBAAW,MAAM;AACf,kBAAQ,MAAM;AAAA,QAChB,CAAC;AAAA,MACH;AAAA,IACF;AAAA,IACA,CAAC,IAAI;AAAA,EACP;AACA,SACE;AAAA,IAAC;AAAA;AAAA,MACC,gBAAgB;AAAA,MAChB,kBACE;AAAA,QAAC;AAAA;AAAA,UACC;AAAA,UACA,WAAW;AAAA,UACX,UAAU;AAAA,UACV,QAAQ;AAAA,UACR,WAAS;AAAA,UACT;AAAA;AAAA,MACF;AAAA,MAEF;AAAA,MACA;AAAA;AAAA,EACF;AAEJ;",
-  "names": []
+  "sourcesContent": ["/* eslint-disable jsx-a11y/no-autofocus */\nimport React, { useState, useCallback } from 'react';\nimport { styled } from '@elliemae/ds-system';\nimport { EditableCell } from '../../../exported-related/index.js';\nimport type { DSDataTableT } from '../../../react-desc-prop-types.js';\nimport { usePropsStore } from '../../../configs/useStore/createInternalAndPropsContext.js';\nimport { DSDataTableName, DSDataTableSlots } from '../../../DSDataTableDefinitions.js';\n\nconst StyledInput = styled('input', { name: DSDataTableName, slot: DSDataTableSlots.TEXT_EDITABLE_CELL_INPUT })`\n  outline: none;\n  :focus {\n    border: 2px solid ${(props) => props.theme.colors.brand[700]};\n  }\n  max-width: 100%;\n`;\n\nexport const TextEditableCell: React.ComponentType<DSDataTableT.EditableCellProps<HTMLDivElement>> = (props) => {\n  const { cell, DefaultCellRender, isRowSelected } = props;\n\n  const onCellValueChange = usePropsStore((state) => state.onCellValueChange);\n  const getOwnerProps = usePropsStore((store) => store.get);\n  const getOwnerPropsArguments = React.useCallback(() => cell, [cell]);\n\n  const [value, setValue] = useState<string>(cell.value as string);\n\n  const handleOnChange = useCallback((e: React.ChangeEvent<HTMLInputElement>) => {\n    const {\n      target: { value: tValue },\n    } = e;\n    setValue(tValue);\n  }, []);\n\n  const handleOnBlur = useCallback(() => {\n    const property = cell.column.id;\n    const rowIndex = cell.row.index;\n    onCellValueChange({ value, property, rowIndex });\n  }, [value, onCellValueChange, cell.column.id, cell.row.index]);\n\n  const handleOnKeyDown = useCallback(\n    (e: React.KeyboardEvent) => {\n      if (e.code === 'Enter') {\n        cell.ref.current?.focus();\n        // will exec on blur callback from input and save new value\n      }\n      if (e.code === 'Escape') {\n        setValue(cell.value as string);\n        const auxRef = cell.ref.current;\n        // this prevent the on blur\n        setTimeout(() => {\n          auxRef?.focus();\n        });\n      }\n    },\n    [cell],\n  );\n  return (\n    <EditableCell\n      StandardRender={DefaultCellRender}\n      EditableRenderer={\n        <StyledInput\n          value={value}\n          onKeyDown={handleOnKeyDown}\n          onChange={handleOnChange}\n          onBlur={handleOnBlur}\n          autoFocus\n          getOwnerProps={getOwnerProps}\n          getOwnerPropsArguments={getOwnerPropsArguments}\n        />\n      }\n      cell={cell}\n      isRowSelected={isRowSelected}\n    />\n  );\n};\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;AD2Df;AA1DR,mBAA6C;AAC7C,uBAAuB;AACvB,8BAA6B;AAE7B,2CAA8B;AAC9B,oCAAkD;AAElD,MAAM,kBAAc,yBAAO,SAAS,EAAE,MAAM,+CAAiB,MAAM,+CAAiB,yBAAyB,CAAC;AAAA;AAAA;AAAA,wBAGtF,CAAC,UAAU,MAAM,MAAM,OAAO,MAAM,GAAG,CAAC;AAAA;AAAA;AAAA;AAKzD,MAAM,mBAAwF,CAAC,UAAU;AAC9G,QAAM,EAAE,MAAM,mBAAmB,cAAc,IAAI;AAEnD,QAAM,wBAAoB,oDAAc,CAAC,UAAU,MAAM,iBAAiB;AAC1E,QAAM,oBAAgB,oDAAc,CAAC,UAAU,MAAM,GAAG;AACxD,QAAM,yBAAyB,aAAAA,QAAM,YAAY,MAAM,MAAM,CAAC,IAAI,CAAC;AAEnE,QAAM,CAAC,OAAO,QAAQ,QAAI,uBAAiB,KAAK,KAAe;AAE/D,QAAM,qBAAiB,0BAAY,CAAC,MAA2C;AAC7E,UAAM;AAAA,MACJ,QAAQ,EAAE,OAAO,OAAO;AAAA,IAC1B,IAAI;AACJ,aAAS,MAAM;AAAA,EACjB,GAAG,CAAC,CAAC;AAEL,QAAM,mBAAe,0BAAY,MAAM;AACrC,UAAM,WAAW,KAAK,OAAO;AAC7B,UAAM,WAAW,KAAK,IAAI;AAC1B,sBAAkB,EAAE,OAAO,UAAU,SAAS,CAAC;AAAA,EACjD,GAAG,CAAC,OAAO,mBAAmB,KAAK,OAAO,IAAI,KAAK,IAAI,KAAK,CAAC;AAE7D,QAAM,sBAAkB;AAAA,IACtB,CAAC,MAA2B;AAC1B,UAAI,EAAE,SAAS,SAAS;AACtB,aAAK,IAAI,SAAS,MAAM;AAAA,MAE1B;AACA,UAAI,EAAE,SAAS,UAAU;AACvB,iBAAS,KAAK,KAAe;AAC7B,cAAM,SAAS,KAAK,IAAI;AAExB,mBAAW,MAAM;AACf,kBAAQ,MAAM;AAAA,QAChB,CAAC;AAAA,MACH;AAAA,IACF;AAAA,IACA,CAAC,IAAI;AAAA,EACP;AACA,SACE;AAAA,IAAC;AAAA;AAAA,MACC,gBAAgB;AAAA,MAChB,kBACE;AAAA,QAAC;AAAA;AAAA,UACC;AAAA,UACA,WAAW;AAAA,UACX,UAAU;AAAA,UACV,QAAQ;AAAA,UACR,WAAS;AAAA,UACT;AAAA,UACA;AAAA;AAAA,MACF;AAAA,MAEF;AAAA,MACA;AAAA;AAAA,EACF;AAEJ;",
+  "names": ["React"]
 }

package/dist/cjs/addons/Filters/Components/CurrencyRangeFilter/index.js

@@ -51,6 +51,7 @@ const idPreffix = "datatable-currency-range";
 const CurrencyRangeFilter = (props) => {
   const {
     column,
+    referenceColumn,
     filterValue = { from: null, to: null },
     reduxHeader,
     patchHeader,
@@ -61,8 +62,8 @@ const CurrencyRangeFilter = (props) => {
   const [from, setFrom] = (0, import_react.useState)((0, import_ds_form_helpers_mask_hooks.getNumberMaskedValue)(filterValue.from ?? "", opts));
   const [to, setTo] = (0, import_react.useState)((0, import_ds_form_helpers_mask_hooks.getNumberMaskedValue)(filterValue.to ?? "", opts));
   (0, import_react.useEffect)(() => {
-    setFrom((0, import_ds_form_helpers_mask_hooks.getNumberMaskedValue)(filterValue.from ?? "", opts));
-    setTo((0, import_ds_form_helpers_mask_hooks.getNumberMaskedValue)(filterValue.to ?? "", opts));
+    setFrom(filterValue.from ?? "");
+    setTo(filterValue.to ?? "");
   }, [filterValue.from, filterValue.to]);
   const ref = (0, import_react.useRef)(null);
   const shouldFocus = (0, import_react.useRef)(true);
@@ -161,7 +162,7 @@ const CurrencyRangeFilter = (props) => {
         }
       ),
       triggerIcon: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ds_icons.SearchXsmall, {}),
-      customStyles: { width: column.ref?.current?.offsetWidth ?? "0px" },
+      customStyles: { width: referenceColumn?.offsetWidth },
       innerRef,
       ariaLabel: "Open Currency Range Filter"
     }

package/dist/cjs/addons/Filters/Components/CurrencyRangeFilter/index.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../src/addons/Filters/Components/CurrencyRangeFilter/index.tsx", "../../../../../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["import React, { useRef, useEffect, useCallback, useState } from 'react';\nimport { Grid } from '@elliemae/ds-grid';\nimport { DSInputText } from '@elliemae/ds-form-input-text';\nimport { getNumberMaskedValue, useNumberMask } from '@elliemae/ds-form-helpers-mask-hooks';\nimport { DSFormLayoutBlockItem } from '@elliemae/ds-form-layout-blocks';\nimport { SearchXsmall } from '@elliemae/ds-icons';\nimport { uid } from 'uid';\nimport { FilterPopover, FILTER_TYPES } from '../../../../exported-related/index.js';\nimport type { DSDataTableT } from '../../../../react-desc-prop-types.js';\nimport { DATA_TESTID } from '../../../../configs/constants.js';\n\nconst opts = {\n  includeThousandsSeparator: false,\n  decimalPlaces: 2,\n  decimalRequired: true,\n};\n\nconst idPreffix = 'datatable-currency-range';\n\ninterface CurrentRangeFilterValue {\n  from: string | null;\n  to: string | null;\n}\n\nexport const CurrencyRangeFilter: React.ComponentType<DSDataTableT.FilterProps<CurrentRangeFilterValue>> = (props) => {\n  const {\n    column,\n    filterValue = { from: null, to: null },\n    reduxHeader,\n    patchHeader,\n    onValueChange,\n    innerRef,\n    domIdAffix = uid(4),\n  } = props;\n\n  const [from, setFrom] = useState(getNumberMaskedValue(filterValue.from ?? '', opts));\n  const [to, setTo] = useState(getNumberMaskedValue(filterValue.to ?? '', opts));\n\n  useEffect(() => {\n    // in order to update the input values when the user clear the filters\n    // we need to update the state when the filterValue changes\n    setFrom(getNumberMaskedValue(filterValue.from ?? '', opts));\n    setTo(getNumberMaskedValue(filterValue.to ?? '', opts));\n  }, [filterValue.from, filterValue.to]);\n\n  const ref = useRef<HTMLInputElement | null>(null);\n  const shouldFocus = useRef(true);\n\n  const handleApplyChange = useCallback(\n    ({ newFrom, newTo }: { newFrom?: string; newTo?: string }) => {\n      onValueChange(FILTER_TYPES.CURRENCY_RANGE, { from: newFrom ?? '', to: newTo ?? '' });\n    },\n    [onValueChange],\n  );\n\n  const handleFromChange = useCallback(\n    (e: React.ChangeEvent<HTMLInputElement>, newFrom?: string) => {\n      handleApplyChange({ newFrom, newTo: to });\n    },\n    [handleApplyChange, to],\n  );\n  const handleToChange = useCallback(\n    (e: React.ChangeEvent<HTMLInputElement>, newTo?: string) => {\n      handleApplyChange({ newFrom: from, newTo });\n    },\n    [from, handleApplyChange],\n  );\n\n  const fromInputProps = useNumberMask({\n    valueSetter: setFrom,\n    onChange: handleFromChange,\n    ...opts,\n  });\n\n  const toInputProps = useNumberMask({\n    valueSetter: setTo,\n    onChange: handleToChange,\n    ...opts,\n  });\n\n  const handleOnKeyDown = useCallback(\n    (e: React.KeyboardEvent<HTMLInputElement>) => {\n      if (e.code === 'Escape') {\n        patchHeader(column.id, { hideFilterMenu: true, hideFilterButton: false });\n        innerRef.current?.focus();\n      }\n    },\n    [column.id, innerRef, patchHeader],\n  );\n\n  const handleRef = useCallback(\n    (newRef: HTMLInputElement | null) => {\n      if (ref.current) ref.current = newRef;\n      if (shouldFocus.current) {\n        setTimeout(() => {\n          newRef?.focus();\n          shouldFocus.current = false;\n        });\n      }\n    },\n    [shouldFocus],\n  );\n\n  useEffect(() => {\n    if (reduxHeader?.hideFilterMenu) {\n      shouldFocus.current = true;\n    }\n  }, [reduxHeader?.hideFilterMenu]);\n\n  return (\n    <FilterPopover\n      reduxHeader={reduxHeader}\n      column={column}\n      columnId={column.id}\n      menuContent={\n        <Grid\n          data-testid={DATA_TESTID.DATA_TABLE_CURRENCY_RANGE_CONTROLLER}\n          gutter=\"xxxs\"\n          padding=\"xxs\"\n          cols={['auto', 'auto']}\n          style={{ background: 'white' }}\n          onKeyDown={handleOnKeyDown}\n        >\n          <DSFormLayoutBlockItem label=\"Min\" inputID={`${idPreffix}-min-${column.id}-${domIdAffix}`}>\n            <DSInputText\n              value={from}\n              {...fromInputProps}\n              id={`${idPreffix}-min-${column.id}-${domIdAffix}`}\n              style={{ textAlign: 'right' }}\n              placeholder=\"0.00\"\n              innerRef={handleRef}\n            />\n          </DSFormLayoutBlockItem>\n          <DSFormLayoutBlockItem label=\"Max\" inputID={`${idPreffix}-max-${column.id}-${domIdAffix}`}>\n            <DSInputText\n              value={to}\n              {...toInputProps}\n              id={`${idPreffix}-max-${column.id}s-${domIdAffix}`}\n              style={{ textAlign: 'right' }}\n              placeholder=\"0.00\"\n            />\n          </DSFormLayoutBlockItem>\n        </Grid>\n      }\n      triggerIcon={<SearchXsmall />}\n      customStyles={{ width: column.ref?.current?.offsetWidth ?? '0px' }}\n      innerRef={innerRef}\n      ariaLabel=\"Open Currency Range Filter\"\n    />\n  );\n};\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": "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",
+  "sourcesContent": ["import React, { useRef, useEffect, useCallback, useState } from 'react';\nimport { Grid } from '@elliemae/ds-grid';\nimport { DSInputText } from '@elliemae/ds-form-input-text';\nimport { getNumberMaskedValue, useNumberMask } from '@elliemae/ds-form-helpers-mask-hooks';\nimport { DSFormLayoutBlockItem } from '@elliemae/ds-form-layout-blocks';\nimport { SearchXsmall } from '@elliemae/ds-icons';\nimport { uid } from 'uid';\nimport { FilterPopover, FILTER_TYPES } from '../../../../exported-related/index.js';\nimport type { DSDataTableT } from '../../../../react-desc-prop-types.js';\nimport { DATA_TESTID } from '../../../../configs/constants.js';\n\nconst opts = {\n  includeThousandsSeparator: false,\n  decimalPlaces: 2,\n  decimalRequired: true,\n};\n\nconst idPreffix = 'datatable-currency-range';\n\ninterface CurrentRangeFilterValue {\n  from: string | null;\n  to: string | null;\n}\n\nexport const CurrencyRangeFilter: React.ComponentType<DSDataTableT.FilterProps<CurrentRangeFilterValue>> = (props) => {\n  const {\n    column,\n    referenceColumn,\n    filterValue = { from: null, to: null },\n    reduxHeader,\n    patchHeader,\n    onValueChange,\n    innerRef,\n    domIdAffix = uid(4),\n  } = props;\n\n  const [from, setFrom] = useState(getNumberMaskedValue(filterValue.from ?? '', opts));\n  const [to, setTo] = useState(getNumberMaskedValue(filterValue.to ?? '', opts));\n\n  useEffect(() => {\n    // in order to update the input values when the user clear the filters\n    // we need to update the state when the filterValue changes\n    setFrom(filterValue.from ?? '');\n    setTo(filterValue.to ?? '');\n  }, [filterValue.from, filterValue.to]);\n\n  const ref = useRef<HTMLInputElement | null>(null);\n  const shouldFocus = useRef(true);\n\n  const handleApplyChange = useCallback(\n    ({ newFrom, newTo }: { newFrom?: string; newTo?: string }) => {\n      onValueChange(FILTER_TYPES.CURRENCY_RANGE, { from: newFrom ?? '', to: newTo ?? '' });\n    },\n    [onValueChange],\n  );\n\n  const handleFromChange = useCallback(\n    (e: React.ChangeEvent<HTMLInputElement>, newFrom?: string) => {\n      handleApplyChange({ newFrom, newTo: to });\n    },\n    [handleApplyChange, to],\n  );\n  const handleToChange = useCallback(\n    (e: React.ChangeEvent<HTMLInputElement>, newTo?: string) => {\n      handleApplyChange({ newFrom: from, newTo });\n    },\n    [from, handleApplyChange],\n  );\n\n  const fromInputProps = useNumberMask({\n    valueSetter: setFrom,\n    onChange: handleFromChange,\n    ...opts,\n  });\n\n  const toInputProps = useNumberMask({\n    valueSetter: setTo,\n    onChange: handleToChange,\n    ...opts,\n  });\n\n  const handleOnKeyDown = useCallback(\n    (e: React.KeyboardEvent<HTMLInputElement>) => {\n      if (e.code === 'Escape') {\n        patchHeader(column.id, { hideFilterMenu: true, hideFilterButton: false });\n        innerRef.current?.focus();\n      }\n    },\n    [column.id, innerRef, patchHeader],\n  );\n\n  const handleRef = useCallback(\n    (newRef: HTMLInputElement | null) => {\n      if (ref.current) ref.current = newRef;\n      if (shouldFocus.current) {\n        setTimeout(() => {\n          newRef?.focus();\n          shouldFocus.current = false;\n        });\n      }\n    },\n    [shouldFocus],\n  );\n\n  useEffect(() => {\n    if (reduxHeader?.hideFilterMenu) {\n      shouldFocus.current = true;\n    }\n  }, [reduxHeader?.hideFilterMenu]);\n\n  return (\n    <FilterPopover\n      reduxHeader={reduxHeader}\n      column={column}\n      columnId={column.id}\n      menuContent={\n        <Grid\n          data-testid={DATA_TESTID.DATA_TABLE_CURRENCY_RANGE_CONTROLLER}\n          gutter=\"xxxs\"\n          padding=\"xxs\"\n          cols={['auto', 'auto']}\n          style={{ background: 'white' }}\n          onKeyDown={handleOnKeyDown}\n        >\n          <DSFormLayoutBlockItem label=\"Min\" inputID={`${idPreffix}-min-${column.id}-${domIdAffix}`}>\n            <DSInputText\n              value={from}\n              {...fromInputProps}\n              id={`${idPreffix}-min-${column.id}-${domIdAffix}`}\n              style={{ textAlign: 'right' }}\n              placeholder=\"0.00\"\n              innerRef={handleRef}\n            />\n          </DSFormLayoutBlockItem>\n          <DSFormLayoutBlockItem label=\"Max\" inputID={`${idPreffix}-max-${column.id}-${domIdAffix}`}>\n            <DSInputText\n              value={to}\n              {...toInputProps}\n              id={`${idPreffix}-max-${column.id}s-${domIdAffix}`}\n              style={{ textAlign: 'right' }}\n              placeholder=\"0.00\"\n            />\n          </DSFormLayoutBlockItem>\n        </Grid>\n      }\n      triggerIcon={<SearchXsmall />}\n      customStyles={{ width: referenceColumn?.offsetWidth }}\n      innerRef={innerRef}\n      ariaLabel=\"Open Currency Range Filter\"\n    />\n  );\n};\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": "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",
   "names": []
 }

package/dist/cjs/addons/Filters/Components/FreeTextSearchFilter/index.js

@@ -0,0 +1,139 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var FreeTextSearchFilter_exports = {};
+__export(FreeTextSearchFilter_exports, {
+  FreeTextSearchFilter: () => FreeTextSearchFilter
+});
+module.exports = __toCommonJS(FreeTextSearchFilter_exports);
+var React = __toESM(require("react"));
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_react = require("react");
+var import_ds_icons = require("@elliemae/ds-icons");
+var import_ds_form_input_text = require("@elliemae/ds-form-input-text");
+var import_ds_system = require("@elliemae/ds-system");
+var import_ds_grid = require("@elliemae/ds-grid");
+var import_uid = require("uid");
+var import_exported_related = require("../../../../exported-related/index.js");
+var import_constants = require("../../../../configs/constants.js");
+var import_styled = require("../../../../styled.js");
+var import_DSDataTableDefinitions = require("../../../../DSDataTableDefinitions.js");
+var import_createInternalAndPropsContext = require("../../../../configs/useStore/createInternalAndPropsContext.js");
+const StyledInputFreeTextSearch = (0, import_ds_system.styled)(import_ds_form_input_text.DSInputText, {
+  name: import_DSDataTableDefinitions.DSDataTableName,
+  slot: import_DSDataTableDefinitions.DSDataTableSlots.FREE_TEXT_SEARCH_FILTER
+})``;
+const FreeTextSearchFilter = (props) => {
+  const {
+    column,
+    referenceColumn,
+    column: { id, persistFilterInputAfterSubmit = false },
+    onValueChange,
+    patchHeaderFilterButtonAndMenu,
+    reduxHeader,
+    innerRef,
+    domIdAffix = (0, import_uid.uid)(4)
+  } = props;
+  const ref = (0, import_react.useRef)(null);
+  const shouldFocus = (0, import_react.useRef)(true);
+  const getOwnerProps = (0, import_createInternalAndPropsContext.usePropsStore)((store) => store.get);
+  const getOwnerPropsArguments = (0, import_react.useCallback)(
+    () => ({
+      columnId: id
+    }),
+    [id]
+  );
+  const handleRef = (0, import_react.useCallback)((newRef) => {
+    ref.current = newRef;
+    if (shouldFocus.current) {
+      requestAnimationFrame(() => {
+        ref.current?.focus();
+        shouldFocus.current = false;
+      });
+    }
+  }, []);
+  (0, import_react.useEffect)(() => {
+    if (reduxHeader?.hideFilterMenu) {
+      shouldFocus.current = true;
+    }
+  }, [reduxHeader?.hideFilterMenu]);
+  const [value, setValue] = (0, import_react.useState)("");
+  const onKeyDown = (0, import_react.useCallback)(
+    (event) => {
+      if (event.key === "Enter") {
+        onValueChange(import_exported_related.FILTER_TYPES.FREE_TEXT_SEARCH, value || void 0);
+        if (!persistFilterInputAfterSubmit) {
+          setValue("");
+        }
+        setTimeout(() => {
+          patchHeaderFilterButtonAndMenu(id, true);
+          innerRef?.current?.focus();
+        }, 0);
+      }
+    },
+    [id, innerRef, onValueChange, patchHeaderFilterButtonAndMenu, persistFilterInputAfterSubmit, value]
+  );
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    import_exported_related.FilterPopover,
+    {
+      reduxHeader,
+      column,
+      columnId: id,
+      customStyles: {
+        backgroundColor: "#fff",
+        width: referenceColumn?.offsetWidth,
+        minWidth: "80px"
+      },
+      menuContent: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_ds_grid.Grid, { p: "xxs", gutter: "xxs", style: { background: "white" }, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_styled.ScreenReaderOnly, { id: "filter-input-instructions", children: "Press Enter to apply the filter and close the dialog. Focus will return to the button that opened this dialog." }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          StyledInputFreeTextSearch,
+          {
+            id: `ds-data-table-free-text-search-${id}-${domIdAffix}`,
+            placeholder: "",
+            value,
+            onValueChange: (newValue) => {
+              setValue(newValue);
+            },
+            innerRef: handleRef,
+            onKeyDown,
+            "data-testid": import_constants.DATA_TESTID.DATA_TABLE_FILTER_FREE_TEXT_SEARCH,
+            "aria-label": "Free Text Search Filter",
+            "aria-describedby": "filter-input-instructions",
+            getOwnerProps,
+            getOwnerPropsArguments
+          }
+        )
+      ] }),
+      triggerIcon: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ds_icons.SearchXsmall, {}),
+      innerRef,
+      ariaLabel: "Open Free Text Search Filter"
+    }
+  );
+};
+//# sourceMappingURL=index.js.map

package/dist/cjs/addons/Filters/Components/FreeTextSearchFilter/index.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../../src/addons/Filters/Components/FreeTextSearchFilter/index.tsx", "../../../../../../../../../scripts/build/transpile/react-shim.js"],
+  "sourcesContent": ["import React, { useRef, useCallback, useState, useEffect } from 'react';\nimport { SearchXsmall } from '@elliemae/ds-icons';\nimport { DSInputText } from '@elliemae/ds-form-input-text';\nimport { styled } from '@elliemae/ds-system';\nimport { Grid } from '@elliemae/ds-grid';\nimport { uid } from 'uid';\nimport { FilterPopover, FILTER_TYPES } from '../../../../exported-related/index.js';\nimport type { DSDataTableT } from '../../../../react-desc-prop-types.js';\nimport { DATA_TESTID } from '../../../../configs/constants.js';\nimport { ScreenReaderOnly } from '../../../../styled.js';\nimport { DSDataTableName, DSDataTableSlots } from '../../../../DSDataTableDefinitions.js';\nimport { usePropsStore } from '../../../../configs/useStore/createInternalAndPropsContext.js';\n\nconst StyledInputFreeTextSearch = styled(DSInputText, {\n  name: DSDataTableName,\n  slot: DSDataTableSlots.FREE_TEXT_SEARCH_FILTER,\n})``;\n\nexport const FreeTextSearchFilter: React.ComponentType<DSDataTableT.FilterProps<string>> = (props) => {\n  const {\n    column,\n    referenceColumn,\n    column: { id, persistFilterInputAfterSubmit = false },\n    onValueChange,\n    patchHeaderFilterButtonAndMenu,\n    reduxHeader,\n    innerRef,\n    domIdAffix = uid(4),\n  } = props;\n\n  const ref = useRef<HTMLInputElement | null>(null);\n  const shouldFocus = useRef(true);\n\n  const getOwnerProps = usePropsStore((store) => store.get);\n  const getOwnerPropsArguments = useCallback(\n    () => ({\n      columnId: id,\n    }),\n    [id],\n  );\n\n  const handleRef = useCallback((newRef: HTMLInputElement | null) => {\n    ref.current = newRef;\n    if (shouldFocus.current) {\n      requestAnimationFrame(() => {\n        ref.current?.focus();\n        shouldFocus.current = false;\n      });\n    }\n  }, []);\n  useEffect(() => {\n    if (reduxHeader?.hideFilterMenu) {\n      shouldFocus.current = true;\n    }\n  }, [reduxHeader?.hideFilterMenu]);\n\n  const [value, setValue] = useState<string>('');\n\n  const onKeyDown = useCallback(\n    (event: React.KeyboardEvent<HTMLInputElement>) => {\n      if (event.key === 'Enter') {\n        // || undefined to clear the filter when empty\n        onValueChange(FILTER_TYPES.FREE_TEXT_SEARCH, value || undefined);\n        if (!persistFilterInputAfterSubmit) {\n          setValue('');\n        }\n        setTimeout(() => {\n          patchHeaderFilterButtonAndMenu(id, true);\n          innerRef?.current?.focus();\n        }, 0);\n      }\n    },\n    [id, innerRef, onValueChange, patchHeaderFilterButtonAndMenu, persistFilterInputAfterSubmit, value],\n  );\n  return (\n    <FilterPopover\n      reduxHeader={reduxHeader}\n      column={column}\n      columnId={id}\n      customStyles={{\n        backgroundColor: '#fff',\n        width: referenceColumn?.offsetWidth,\n        minWidth: '80px',\n      }}\n      menuContent={\n        <Grid p=\"xxs\" gutter=\"xxs\" style={{ background: 'white' }}>\n          <ScreenReaderOnly id=\"filter-input-instructions\">\n            Press Enter to apply the filter and close the dialog. Focus will return to the button that opened this\n            dialog.\n          </ScreenReaderOnly>\n          <StyledInputFreeTextSearch\n            id={`ds-data-table-free-text-search-${id}-${domIdAffix}`}\n            placeholder=\"\"\n            value={value}\n            onValueChange={(newValue) => {\n              setValue(newValue);\n            }}\n            innerRef={handleRef}\n            onKeyDown={onKeyDown}\n            data-testid={DATA_TESTID.DATA_TABLE_FILTER_FREE_TEXT_SEARCH}\n            aria-label=\"Free Text Search Filter\"\n            aria-describedby=\"filter-input-instructions\"\n            getOwnerProps={getOwnerProps}\n            getOwnerPropsArguments={getOwnerPropsArguments}\n          />\n        </Grid>\n      }\n      triggerIcon={<SearchXsmall />}\n      innerRef={innerRef}\n      ariaLabel=\"Open Free Text Search Filter\"\n    />\n  );\n};\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADqFf;AArFR,mBAAgE;AAChE,sBAA6B;AAC7B,gCAA4B;AAC5B,uBAAuB;AACvB,qBAAqB;AACrB,iBAAoB;AACpB,8BAA4C;AAE5C,uBAA4B;AAC5B,oBAAiC;AACjC,oCAAkD;AAClD,2CAA8B;AAE9B,MAAM,gCAA4B,yBAAO,uCAAa;AAAA,EACpD,MAAM;AAAA,EACN,MAAM,+CAAiB;AACzB,CAAC;AAEM,MAAM,uBAA8E,CAAC,UAAU;AACpG,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA,QAAQ,EAAE,IAAI,gCAAgC,MAAM;AAAA,IACpD;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,iBAAa,gBAAI,CAAC;AAAA,EACpB,IAAI;AAEJ,QAAM,UAAM,qBAAgC,IAAI;AAChD,QAAM,kBAAc,qBAAO,IAAI;AAE/B,QAAM,oBAAgB,oDAAc,CAAC,UAAU,MAAM,GAAG;AACxD,QAAM,6BAAyB;AAAA,IAC7B,OAAO;AAAA,MACL,UAAU;AAAA,IACZ;AAAA,IACA,CAAC,EAAE;AAAA,EACL;AAEA,QAAM,gBAAY,0BAAY,CAAC,WAAoC;AACjE,QAAI,UAAU;AACd,QAAI,YAAY,SAAS;AACvB,4BAAsB,MAAM;AAC1B,YAAI,SAAS,MAAM;AACnB,oBAAY,UAAU;AAAA,MACxB,CAAC;AAAA,IACH;AAAA,EACF,GAAG,CAAC,CAAC;AACL,8BAAU,MAAM;AACd,QAAI,aAAa,gBAAgB;AAC/B,kBAAY,UAAU;AAAA,IACxB;AAAA,EACF,GAAG,CAAC,aAAa,cAAc,CAAC;AAEhC,QAAM,CAAC,OAAO,QAAQ,QAAI,uBAAiB,EAAE;AAE7C,QAAM,gBAAY;AAAA,IAChB,CAAC,UAAiD;AAChD,UAAI,MAAM,QAAQ,SAAS;AAEzB,sBAAc,qCAAa,kBAAkB,SAAS,MAAS;AAC/D,YAAI,CAAC,+BAA+B;AAClC,mBAAS,EAAE;AAAA,QACb;AACA,mBAAW,MAAM;AACf,yCAA+B,IAAI,IAAI;AACvC,oBAAU,SAAS,MAAM;AAAA,QAC3B,GAAG,CAAC;AAAA,MACN;AAAA,IACF;AAAA,IACA,CAAC,IAAI,UAAU,eAAe,gCAAgC,+BAA+B,KAAK;AAAA,EACpG;AACA,SACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA;AAAA,MACA,UAAU;AAAA,MACV,cAAc;AAAA,QACZ,iBAAiB;AAAA,QACjB,OAAO,iBAAiB;AAAA,QACxB,UAAU;AAAA,MACZ;AAAA,MACA,aACE,6CAAC,uBAAK,GAAE,OAAM,QAAO,OAAM,OAAO,EAAE,YAAY,QAAQ,GACtD;AAAA,oDAAC,kCAAiB,IAAG,6BAA4B,4HAGjD;AAAA,QACA;AAAA,UAAC;AAAA;AAAA,YACC,IAAI,kCAAkC,EAAE,IAAI,UAAU;AAAA,YACtD,aAAY;AAAA,YACZ;AAAA,YACA,eAAe,CAAC,aAAa;AAC3B,uBAAS,QAAQ;AAAA,YACnB;AAAA,YACA,UAAU;AAAA,YACV;AAAA,YACA,eAAa,6BAAY;AAAA,YACzB,cAAW;AAAA,YACX,oBAAiB;AAAA,YACjB;AAAA,YACA;AAAA;AAAA,QACF;AAAA,SACF;AAAA,MAEF,aAAa,4CAAC,gCAAa;AAAA,MAC3B;AAAA,MACA,WAAU;AAAA;AAAA,EACZ;AAEJ;",
+  "names": []
+}

package/dist/cjs/addons/Filters/Components/NumberRangeFilter/index.js

@@ -54,6 +54,7 @@ const conform = (value) => {
 const NumberRangeFilter = (props) => {
   const {
     column,
+    referenceColumn,
     filterValue = { from: null, to: null },
     reduxHeader,
     patchHeader,
@@ -153,7 +154,7 @@ const NumberRangeFilter = (props) => {
         }
       ),
       triggerIcon: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ds_icons.SearchXsmall, {}),
-      customStyles: { width: column.ref?.current?.offsetWidth ?? "0px" },
+      customStyles: { width: referenceColumn?.offsetWidth },
       innerRef,
       ariaLabel: "Open Number Range Filter"
     }

package/dist/cjs/addons/Filters/Components/NumberRangeFilter/index.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../src/addons/Filters/Components/NumberRangeFilter/index.tsx", "../../../../../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["import React, { useRef, useEffect, useCallback } from 'react';\nimport { Grid } from '@elliemae/ds-grid';\nimport { DSInputText } from '@elliemae/ds-form-input-text';\nimport { getNumberMaskedValue } from '@elliemae/ds-form-helpers-mask-hooks';\nimport { DSFormLayoutBlockItem } from '@elliemae/ds-form-layout-blocks';\nimport { SearchXsmall } from '@elliemae/ds-icons';\nimport { uid } from 'uid';\nimport { FilterPopover, FILTER_TYPES } from '../../../../exported-related/index.js';\nimport type { DSDataTableT } from '../../../../react-desc-prop-types.js';\nimport { DATA_TESTID } from '../../../../configs/constants.js';\n\ninterface NumberRangeFilterValue {\n  from: number | '' | null;\n  to: number | '' | null;\n}\n\nconst opts = {\n  includeThousandsSeparator: false,\n  decimalPlaces: 0,\n};\n\nconst idPreffix = 'datatable-number-range';\n\nconst conform = (value: number | string | null) => {\n  const valueAsString = value?.toString() ?? '';\n  return getNumberMaskedValue(valueAsString, opts);\n};\n\nexport const NumberRangeFilter: React.ComponentType<DSDataTableT.FilterProps<NumberRangeFilterValue>> = (props) => {\n  const {\n    column,\n    filterValue = { from: null, to: null },\n    reduxHeader,\n    patchHeader,\n    onValueChange,\n    innerRef,\n    domIdAffix = uid(4),\n  } = props;\n\n  const handleFromChange = useCallback(\n    (e: React.ChangeEvent<HTMLInputElement>) => {\n      const from: NumberRangeFilterValue['from'] = e.target.value !== '' ? parseInt(e.target.value, 10) : '';\n      const nextValue = {\n        ...filterValue,\n        from,\n      };\n      onValueChange(FILTER_TYPES.CURRENCY_RANGE, nextValue);\n    },\n    [filterValue, onValueChange],\n  );\n\n  const handleToChange = useCallback(\n    (e: React.ChangeEvent<HTMLInputElement>) => {\n      const to: NumberRangeFilterValue['to'] = e.target.value !== '' ? parseInt(e.target.value, 10) : '';\n      const nextValue = {\n        ...filterValue,\n        to,\n      };\n      onValueChange(FILTER_TYPES.CURRENCY_RANGE, nextValue);\n    },\n    [filterValue, onValueChange],\n  );\n\n  // workaround to close menu with esc key since DSInputMask has stoppropagation on key down\n  const onKeyDownHandler = useCallback(\n    (e: React.KeyboardEvent<HTMLInputElement>) => {\n      if (e.code === 'Escape') {\n        patchHeader(column.id, { hideFilterMenu: true, hideFilterButton: false });\n        innerRef.current?.focus();\n      }\n    },\n    [column.id, innerRef, patchHeader],\n  );\n\n  const ref = useRef<HTMLInputElement | null>(null);\n  const shouldFocus = useRef(true);\n  const handleRef = useCallback(\n    (newRef: HTMLInputElement | null) => {\n      if (ref.current) ref.current = newRef;\n      if (shouldFocus.current) {\n        setTimeout(() => {\n          newRef?.focus();\n          shouldFocus.current = false;\n        });\n      }\n    },\n    [shouldFocus],\n  );\n\n  useEffect(() => {\n    if (reduxHeader?.hideFilterMenu) {\n      shouldFocus.current = true;\n    }\n  }, [reduxHeader?.hideFilterMenu]);\n\n  return (\n    <FilterPopover\n      reduxHeader={reduxHeader}\n      column={column}\n      columnId={column.id}\n      menuContent={\n        <Grid\n          data-testid={DATA_TESTID.DATA_TABLE_NUMBER_RANGE_CONTROLLER}\n          gutter=\"xxxs\"\n          padding=\"xxs\"\n          cols={['auto', 'auto']}\n          style={{ background: 'white' }}\n        >\n          <DSFormLayoutBlockItem label=\"Low\" inputID={`${idPreffix}-low-${column.id}-${domIdAffix}`}>\n            <DSInputText\n              value={conform(filterValue.from)}\n              onChange={handleFromChange}\n              id={`${idPreffix}-low-${column.id}-${domIdAffix}`}\n              style={{ textAlign: 'right' }}\n              placeholder=\"0\"\n              innerRef={handleRef}\n              onKeyDown={onKeyDownHandler}\n            />\n          </DSFormLayoutBlockItem>\n          <DSFormLayoutBlockItem label=\"High\" inputID={`${idPreffix}-high-${column.id}-${domIdAffix}`}>\n            <DSInputText\n              value={conform(filterValue.to)}\n              onChange={handleToChange}\n              id={`${idPreffix}-high-${column.id}-${domIdAffix}`}\n              style={{ textAlign: 'right' }}\n              placeholder=\"0\"\n              onKeyDown={onKeyDownHandler}\n            />\n          </DSFormLayoutBlockItem>\n        </Grid>\n      }\n      triggerIcon={<SearchXsmall />}\n      customStyles={{ width: column.ref?.current?.offsetWidth ?? '0px' }}\n      innerRef={innerRef}\n      ariaLabel=\"Open Number Range Filter\"\n    />\n  );\n};\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": "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",
+  "sourcesContent": ["import React, { useRef, useEffect, useCallback } from 'react';\nimport { Grid } from '@elliemae/ds-grid';\nimport { DSInputText } from '@elliemae/ds-form-input-text';\nimport { getNumberMaskedValue } from '@elliemae/ds-form-helpers-mask-hooks';\nimport { DSFormLayoutBlockItem } from '@elliemae/ds-form-layout-blocks';\nimport { SearchXsmall } from '@elliemae/ds-icons';\nimport { uid } from 'uid';\nimport { FilterPopover, FILTER_TYPES } from '../../../../exported-related/index.js';\nimport type { DSDataTableT } from '../../../../react-desc-prop-types.js';\nimport { DATA_TESTID } from '../../../../configs/constants.js';\n\ninterface NumberRangeFilterValue {\n  from: number | '' | null;\n  to: number | '' | null;\n}\n\nconst opts = {\n  includeThousandsSeparator: false,\n  decimalPlaces: 0,\n};\n\nconst idPreffix = 'datatable-number-range';\n\nconst conform = (value: number | string | null) => {\n  const valueAsString = value?.toString() ?? '';\n  return getNumberMaskedValue(valueAsString, opts);\n};\n\nexport const NumberRangeFilter: React.ComponentType<DSDataTableT.FilterProps<NumberRangeFilterValue>> = (props) => {\n  const {\n    column,\n    referenceColumn,\n    filterValue = { from: null, to: null },\n    reduxHeader,\n    patchHeader,\n    onValueChange,\n    innerRef,\n    domIdAffix = uid(4),\n  } = props;\n\n  const handleFromChange = useCallback(\n    (e: React.ChangeEvent<HTMLInputElement>) => {\n      const from: NumberRangeFilterValue['from'] = e.target.value !== '' ? parseInt(e.target.value, 10) : '';\n      const nextValue = {\n        ...filterValue,\n        from,\n      };\n      onValueChange(FILTER_TYPES.CURRENCY_RANGE, nextValue);\n    },\n    [filterValue, onValueChange],\n  );\n\n  const handleToChange = useCallback(\n    (e: React.ChangeEvent<HTMLInputElement>) => {\n      const to: NumberRangeFilterValue['to'] = e.target.value !== '' ? parseInt(e.target.value, 10) : '';\n      const nextValue = {\n        ...filterValue,\n        to,\n      };\n      onValueChange(FILTER_TYPES.CURRENCY_RANGE, nextValue);\n    },\n    [filterValue, onValueChange],\n  );\n\n  // workaround to close menu with esc key since DSInputMask has stoppropagation on key down\n  const onKeyDownHandler = useCallback(\n    (e: React.KeyboardEvent<HTMLInputElement>) => {\n      if (e.code === 'Escape') {\n        patchHeader(column.id, { hideFilterMenu: true, hideFilterButton: false });\n        innerRef.current?.focus();\n      }\n    },\n    [column.id, innerRef, patchHeader],\n  );\n\n  const ref = useRef<HTMLInputElement | null>(null);\n  const shouldFocus = useRef(true);\n  const handleRef = useCallback(\n    (newRef: HTMLInputElement | null) => {\n      if (ref.current) ref.current = newRef;\n      if (shouldFocus.current) {\n        setTimeout(() => {\n          newRef?.focus();\n          shouldFocus.current = false;\n        });\n      }\n    },\n    [shouldFocus],\n  );\n\n  useEffect(() => {\n    if (reduxHeader?.hideFilterMenu) {\n      shouldFocus.current = true;\n    }\n  }, [reduxHeader?.hideFilterMenu]);\n\n  return (\n    <FilterPopover\n      reduxHeader={reduxHeader}\n      column={column}\n      columnId={column.id}\n      menuContent={\n        <Grid\n          data-testid={DATA_TESTID.DATA_TABLE_NUMBER_RANGE_CONTROLLER}\n          gutter=\"xxxs\"\n          padding=\"xxs\"\n          cols={['auto', 'auto']}\n          style={{ background: 'white' }}\n        >\n          <DSFormLayoutBlockItem label=\"Low\" inputID={`${idPreffix}-low-${column.id}-${domIdAffix}`}>\n            <DSInputText\n              value={conform(filterValue.from)}\n              onChange={handleFromChange}\n              id={`${idPreffix}-low-${column.id}-${domIdAffix}`}\n              style={{ textAlign: 'right' }}\n              placeholder=\"0\"\n              innerRef={handleRef}\n              onKeyDown={onKeyDownHandler}\n            />\n          </DSFormLayoutBlockItem>\n          <DSFormLayoutBlockItem label=\"High\" inputID={`${idPreffix}-high-${column.id}-${domIdAffix}`}>\n            <DSInputText\n              value={conform(filterValue.to)}\n              onChange={handleToChange}\n              id={`${idPreffix}-high-${column.id}-${domIdAffix}`}\n              style={{ textAlign: 'right' }}\n              placeholder=\"0\"\n              onKeyDown={onKeyDownHandler}\n            />\n          </DSFormLayoutBlockItem>\n        </Grid>\n      }\n      triggerIcon={<SearchXsmall />}\n      customStyles={{ width: referenceColumn?.offsetWidth }}\n      innerRef={innerRef}\n      ariaLabel=\"Open Number Range Filter\"\n    />\n  );\n};\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": "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",
   "names": []
 }

package/dist/cjs/addons/Filters/Components/SelectFilter/BaseSelectFilter.js

@@ -45,6 +45,7 @@ const getValue = (datum) => datum?.toString();
 const BaseSelectFilter = (props) => {
   const {
     isMulti = false,
+    referenceColumn,
     filterValue: selectedItems = null,
     creatable = false,
     column,
@@ -178,7 +179,7 @@ const BaseSelectFilter = (props) => {
       onClickOutsideMenu: handleOnClickOutside,
       customStyles: {
         backgroundColor: "#fff",
-        width: filterMinWidth ?? column.ref?.current?.offsetWidth
+        width: filterMinWidth ?? referenceColumn?.offsetWidth
       }
     }
   );

package/dist/cjs/addons/Filters/Components/SelectFilter/BaseSelectFilter.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../src/addons/Filters/Components/SelectFilter/BaseSelectFilter.tsx", "../../../../../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["import React, { useState, useRef, useCallback, useEffect, useMemo } from 'react';\nimport { Grid } from '@elliemae/ds-grid';\nimport type { DSComboboxT } from '@elliemae/ds-form-combobox';\nimport { DSComboBox } from '@elliemae/ds-form-combobox';\nimport { SearchXsmall } from '@elliemae/ds-icons';\nimport { uid } from 'uid';\nimport { FilterPopover } from '../../../../exported-related/index.js';\nimport type { DSDataTableT } from '../../../../react-desc-prop-types.js';\nimport { DATA_TESTID, EMPTY_FILTER } from '../../../../configs/index.js';\nimport { usePropsStore } from '../../../../configs/useStore/createInternalAndPropsContext.js';\n\ninterface BaseSelectProps {\n  isMulti?: boolean;\n  creatable?: boolean;\n  type: string;\n}\n\ntype MaybeToStringable =\n  | string\n  | number\n  | boolean\n  | Date\n  | RegExp\n  | Array<unknown>\n  | Record<string, unknown>\n  | null\n  | undefined;\n\nconst getValue = (datum: unknown) => (datum as MaybeToStringable)?.toString();\n\ntype BaseSelectFilterValue = DSComboboxT.SelectedOptionsT;\n\nexport const BaseSelectFilter: React.ComponentType<\n  DSDataTableT.FilterProps<BaseSelectFilterValue> & BaseSelectProps\n> = (props) => {\n  const {\n    isMulti = false,\n    filterValue: selectedItems = null,\n    creatable = false,\n    column,\n    type,\n    column: { id, filterOptions: userFilterOptions, filterMinWidth, disableFirstOptionFocusOnFilter = false },\n    reduxHeader,\n    patchHeaderFilterButtonAndMenu,\n    innerRef,\n    onValueChange,\n  } = props;\n\n  const data = usePropsStore((state) => state.data);\n  const ref = useRef<HTMLInputElement | null>(null);\n  const shouldFocus = useRef(true);\n  const filterOptions = useMemo(() => {\n    // If the user didn't provide options, use the available ones\n    if (!userFilterOptions) {\n      const automaticFilters = [...new Set(data.map((datum) => getValue(datum?.[id])))];\n\n      const hasEmptyValue = automaticFilters.some((item) => item === null || item === undefined || item === '');\n\n      const finalAutomaticFilters: DSDataTableT.FilterOptionT[] = automaticFilters\n        .filter((item) => item !== null && item !== undefined && item !== '')\n        .map((item) => ({\n          type: 'option',\n          dsId: item as string,\n          value: item as string,\n          label: item as string,\n        }));\n\n      if (hasEmptyValue) {\n        finalAutomaticFilters.push({\n          type: 'option',\n          dsId: EMPTY_FILTER,\n          value: EMPTY_FILTER,\n          label: '(Empty)',\n        });\n      }\n\n      return finalAutomaticFilters;\n    }\n\n    // If user provided the array itself, use it\n    if (Array.isArray(userFilterOptions)) return userFilterOptions;\n    // Otherwise, it is a function\n    return userFilterOptions();\n  }, [data, id, userFilterOptions]);\n\n  const [filters, setFilteredOptions] = useState(filterOptions);\n\n  useEffect(() => setFilteredOptions(filterOptions), [filterOptions]);\n\n  const handleOnChange = useCallback(\n    (value: BaseSelectFilterValue) => {\n      if (isMulti && Array.isArray(value)) {\n        onValueChange(type, value.length !== 0 ? value : undefined);\n      } else {\n        onValueChange(type, value !== null ? value : undefined);\n        patchHeaderFilterButtonAndMenu(column.id, true);\n        innerRef?.current?.focus();\n      }\n    },\n    [column.id, innerRef, isMulti, onValueChange, patchHeaderFilterButtonAndMenu, type],\n  );\n\n  const handleOnCreate = useCallback(\n    (label: string) => {\n      if (label.trim() === '') {\n        return;\n      }\n      if (filterOptions.some((item) => 'label' in item && item.label === label)) {\n        return;\n      }\n      const newId = uid();\n      const newItem: DSDataTableT.FilterOptionT = {\n        dsId: newId,\n        value: newId,\n        label,\n        type: 'option',\n      };\n      filterOptions.unshift(newItem);\n      handleOnChange(Array.isArray(selectedItems) ? [...selectedItems, newItem] : newItem);\n      setFilteredOptions([...filterOptions]);\n    },\n    [filterOptions, handleOnChange, selectedItems],\n  );\n\n  const handleRef = useCallback((newRef: HTMLInputElement | null) => {\n    ref.current = newRef;\n    if (shouldFocus.current) {\n      setTimeout(() => {\n        ref.current?.focus();\n        shouldFocus.current = false;\n      });\n    }\n  }, []);\n\n  useEffect(() => {\n    if (reduxHeader?.hideFilterMenu) {\n      shouldFocus.current = true;\n    }\n  }, [reduxHeader?.hideFilterMenu]);\n\n  const Select = useMemo(\n    () => (\n      <Grid\n        data-testid={\n          isMulti ? DATA_TESTID.DATA_TABLE_MULTISELECT_CONTROLLER : DATA_TESTID.DATA_TABLE_SINGLESELECT_CONTROLLER\n        }\n      >\n        <DSComboBox\n          inline\n          aria-label=\"Search filter options\"\n          innerRef={handleRef}\n          allOptions={filters}\n          onCreate={creatable ? handleOnCreate : undefined}\n          forceFocusFirstOptionOnType={creatable && disableFirstOptionFocusOnFilter === false}\n          onChange={handleOnChange}\n          selectedValues={selectedItems}\n          menuMaxHeight={300}\n        />\n      </Grid>\n    ),\n    [\n      creatable,\n      disableFirstOptionFocusOnFilter,\n      filters,\n      handleOnChange,\n      handleOnCreate,\n      handleRef,\n      isMulti,\n      selectedItems,\n    ],\n  );\n\n  const handleOnClickOutside = useCallback(() => {\n    setFilteredOptions(filterOptions);\n  }, [filterOptions]);\n\n  return (\n    <FilterPopover\n      reduxHeader={reduxHeader}\n      column={column}\n      columnId={column.id}\n      menuContent={Select}\n      triggerIcon={<SearchXsmall />}\n      innerRef={innerRef}\n      ariaLabel=\"Open Selection Filter\"\n      onClickOutsideMenu={handleOnClickOutside}\n      customStyles={{\n        backgroundColor: '#fff',\n        width: filterMinWidth ?? column.ref?.current?.offsetWidth,\n      }}\n    />\n  );\n};\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": "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",
+  "sourcesContent": ["import React, { useState, useRef, useCallback, useEffect, useMemo } from 'react';\nimport { Grid } from '@elliemae/ds-grid';\nimport type { DSComboboxT } from '@elliemae/ds-form-combobox';\nimport { DSComboBox } from '@elliemae/ds-form-combobox';\nimport { SearchXsmall } from '@elliemae/ds-icons';\nimport { uid } from 'uid';\nimport { FilterPopover } from '../../../../exported-related/index.js';\nimport type { DSDataTableT } from '../../../../react-desc-prop-types.js';\nimport { DATA_TESTID, EMPTY_FILTER } from '../../../../configs/index.js';\nimport { usePropsStore } from '../../../../configs/useStore/createInternalAndPropsContext.js';\n\ninterface BaseSelectProps {\n  isMulti?: boolean;\n  creatable?: boolean;\n  type: string;\n}\n\ntype MaybeToStringable =\n  | string\n  | number\n  | boolean\n  | Date\n  | RegExp\n  | Array<unknown>\n  | Record<string, unknown>\n  | null\n  | undefined;\n\nconst getValue = (datum: unknown) => (datum as MaybeToStringable)?.toString();\n\ntype BaseSelectFilterValue = DSComboboxT.SelectedOptionsT;\n\nexport const BaseSelectFilter: React.ComponentType<\n  DSDataTableT.FilterProps<BaseSelectFilterValue> & BaseSelectProps\n> = (props) => {\n  const {\n    isMulti = false,\n    referenceColumn,\n    filterValue: selectedItems = null,\n    creatable = false,\n    column,\n    type,\n    column: { id, filterOptions: userFilterOptions, filterMinWidth, disableFirstOptionFocusOnFilter = false },\n    reduxHeader,\n    patchHeaderFilterButtonAndMenu,\n    innerRef,\n    onValueChange,\n  } = props;\n\n  const data = usePropsStore((state) => state.data);\n  const ref = useRef<HTMLInputElement | null>(null);\n  const shouldFocus = useRef(true);\n  const filterOptions = useMemo(() => {\n    // If the user didn't provide options, use the available ones\n    if (!userFilterOptions) {\n      const automaticFilters = [...new Set(data.map((datum) => getValue(datum?.[id])))];\n\n      const hasEmptyValue = automaticFilters.some((item) => item === null || item === undefined || item === '');\n\n      const finalAutomaticFilters: DSDataTableT.FilterOptionT[] = automaticFilters\n        .filter((item) => item !== null && item !== undefined && item !== '')\n        .map((item) => ({\n          type: 'option',\n          dsId: item as string,\n          value: item as string,\n          label: item as string,\n        }));\n\n      if (hasEmptyValue) {\n        finalAutomaticFilters.push({\n          type: 'option',\n          dsId: EMPTY_FILTER,\n          value: EMPTY_FILTER,\n          label: '(Empty)',\n        });\n      }\n\n      return finalAutomaticFilters;\n    }\n\n    // If user provided the array itself, use it\n    if (Array.isArray(userFilterOptions)) return userFilterOptions;\n    // Otherwise, it is a function\n    return userFilterOptions();\n  }, [data, id, userFilterOptions]);\n\n  const [filters, setFilteredOptions] = useState(filterOptions);\n\n  useEffect(() => setFilteredOptions(filterOptions), [filterOptions]);\n\n  const handleOnChange = useCallback(\n    (value: BaseSelectFilterValue) => {\n      if (isMulti && Array.isArray(value)) {\n        onValueChange(type, value.length !== 0 ? value : undefined);\n      } else {\n        onValueChange(type, value !== null ? value : undefined);\n        patchHeaderFilterButtonAndMenu(column.id, true);\n        innerRef?.current?.focus();\n      }\n    },\n    [column.id, innerRef, isMulti, onValueChange, patchHeaderFilterButtonAndMenu, type],\n  );\n\n  const handleOnCreate = useCallback(\n    (label: string) => {\n      if (label.trim() === '') {\n        return;\n      }\n      if (filterOptions.some((item) => 'label' in item && item.label === label)) {\n        return;\n      }\n      const newId = uid();\n      const newItem: DSDataTableT.FilterOptionT = {\n        dsId: newId,\n        value: newId,\n        label,\n        type: 'option',\n      };\n      filterOptions.unshift(newItem);\n      handleOnChange(Array.isArray(selectedItems) ? [...selectedItems, newItem] : newItem);\n      setFilteredOptions([...filterOptions]);\n    },\n    [filterOptions, handleOnChange, selectedItems],\n  );\n\n  const handleRef = useCallback((newRef: HTMLInputElement | null) => {\n    ref.current = newRef;\n    if (shouldFocus.current) {\n      setTimeout(() => {\n        ref.current?.focus();\n        shouldFocus.current = false;\n      });\n    }\n  }, []);\n\n  useEffect(() => {\n    if (reduxHeader?.hideFilterMenu) {\n      shouldFocus.current = true;\n    }\n  }, [reduxHeader?.hideFilterMenu]);\n\n  const Select = useMemo(\n    () => (\n      <Grid\n        data-testid={\n          isMulti ? DATA_TESTID.DATA_TABLE_MULTISELECT_CONTROLLER : DATA_TESTID.DATA_TABLE_SINGLESELECT_CONTROLLER\n        }\n      >\n        <DSComboBox\n          inline\n          aria-label=\"Search filter options\"\n          innerRef={handleRef}\n          allOptions={filters}\n          onCreate={creatable ? handleOnCreate : undefined}\n          forceFocusFirstOptionOnType={creatable && disableFirstOptionFocusOnFilter === false}\n          onChange={handleOnChange}\n          selectedValues={selectedItems}\n          menuMaxHeight={300}\n        />\n      </Grid>\n    ),\n    [\n      creatable,\n      disableFirstOptionFocusOnFilter,\n      filters,\n      handleOnChange,\n      handleOnCreate,\n      handleRef,\n      isMulti,\n      selectedItems,\n    ],\n  );\n\n  const handleOnClickOutside = useCallback(() => {\n    setFilteredOptions(filterOptions);\n  }, [filterOptions]);\n\n  return (\n    <FilterPopover\n      reduxHeader={reduxHeader}\n      column={column}\n      columnId={column.id}\n      menuContent={Select}\n      triggerIcon={<SearchXsmall />}\n      innerRef={innerRef}\n      ariaLabel=\"Open Selection Filter\"\n      onClickOutsideMenu={handleOnClickOutside}\n      customStyles={{\n        backgroundColor: '#fff',\n        width: filterMinWidth ?? referenceColumn?.offsetWidth,\n      }}\n    />\n  );\n};\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": "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",
   "names": []
 }

package/dist/cjs/addons/Filters/Components/SelectFilter/MultiCreatableFilter.js

@@ -39,6 +39,7 @@ var import_exported_related = require("../../../../exported-related/index.js");
 var import_constants = require("../../../../configs/constants.js");
 const MultiCreatableFilter = ({
   column,
+  referenceColumn,
   onValueChange,
   patchHeaderFilterButtonAndMenu,
   patchHeader,
@@ -60,7 +61,8 @@ const MultiCreatableFilter = ({
     patchHeaderFilterButtonAndMenu,
     patchHeader,
     innerRef,
-    domIdAffix
+    domIdAffix,
+    referenceColumn
   }
 );
 //# sourceMappingURL=MultiCreatableFilter.js.map

package/dist/cjs/addons/Filters/Components/SelectFilter/MultiCreatableFilter.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../src/addons/Filters/Components/SelectFilter/MultiCreatableFilter.tsx", "../../../../../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["import React from 'react';\nimport type { DSComboboxT } from '@elliemae/ds-form-combobox';\nimport { uid } from 'uid';\nimport type { DSDataTableT } from '../../../../react-desc-prop-types.js';\nimport { BaseSelectFilter } from './BaseSelectFilter.js';\nimport { FILTER_TYPES } from '../../../../exported-related/index.js';\nimport { DATA_TESTID } from '../../../../configs/constants.js';\n\ntype MultiCreatableFilterValue = DSComboboxT.SelectedOptionsT;\n\nexport const MultiCreatableFilter: React.ComponentType<DSDataTableT.FilterProps<MultiCreatableFilterValue>> = ({\n  column,\n  onValueChange,\n  patchHeaderFilterButtonAndMenu,\n  patchHeader,\n  reduxHeader,\n  filterValue,\n  innerRef,\n  domIdAffix = uid(4),\n}) => (\n  <BaseSelectFilter\n    creatable\n    reduxHeader={reduxHeader}\n    data-testid={DATA_TESTID.DATA_TABLE_MULTISELECT_CONTROLLER}\n    isMulti\n    column={column}\n    filterValue={filterValue ?? []}\n    type={FILTER_TYPES.MULTI_SELECT}\n    onValueChange={onValueChange}\n    patchHeaderFilterButtonAndMenu={patchHeaderFilterButtonAndMenu}\n    patchHeader={patchHeader}\n    innerRef={innerRef}\n    domIdAffix={domIdAffix}\n  />\n);\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADoBrB;AAlBF,iBAAoB;AAEpB,8BAAiC;AACjC,8BAA6B;AAC7B,uBAA4B;AAIrB,MAAM,uBAAiG,CAAC;AAAA,EAC7G;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,iBAAa,gBAAI,CAAC;AACpB,MACE;AAAA,EAAC;AAAA;AAAA,IACC,WAAS;AAAA,IACT;AAAA,IACA,eAAa,6BAAY;AAAA,IACzB,SAAO;AAAA,IACP;AAAA,IACA,aAAa,eAAe,CAAC;AAAA,IAC7B,MAAM,qCAAa;AAAA,IACnB;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA;AACF;",
+  "sourcesContent": ["import React from 'react';\nimport type { DSComboboxT } from '@elliemae/ds-form-combobox';\nimport { uid } from 'uid';\nimport type { DSDataTableT } from '../../../../react-desc-prop-types.js';\nimport { BaseSelectFilter } from './BaseSelectFilter.js';\nimport { FILTER_TYPES } from '../../../../exported-related/index.js';\nimport { DATA_TESTID } from '../../../../configs/constants.js';\n\ntype MultiCreatableFilterValue = DSComboboxT.SelectedOptionsT;\n\nexport const MultiCreatableFilter: React.ComponentType<DSDataTableT.FilterProps<MultiCreatableFilterValue>> = ({\n  column,\n  referenceColumn,\n  onValueChange,\n  patchHeaderFilterButtonAndMenu,\n  patchHeader,\n  reduxHeader,\n  filterValue,\n  innerRef,\n  domIdAffix = uid(4),\n}) => (\n  <BaseSelectFilter\n    creatable\n    reduxHeader={reduxHeader}\n    data-testid={DATA_TESTID.DATA_TABLE_MULTISELECT_CONTROLLER}\n    isMulti\n    column={column}\n    filterValue={filterValue ?? []}\n    type={FILTER_TYPES.MULTI_SELECT}\n    onValueChange={onValueChange}\n    patchHeaderFilterButtonAndMenu={patchHeaderFilterButtonAndMenu}\n    patchHeader={patchHeader}\n    innerRef={innerRef}\n    domIdAffix={domIdAffix}\n    referenceColumn={referenceColumn}\n  />\n);\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADqBrB;AAnBF,iBAAoB;AAEpB,8BAAiC;AACjC,8BAA6B;AAC7B,uBAA4B;AAIrB,MAAM,uBAAiG,CAAC;AAAA,EAC7G;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,iBAAa,gBAAI,CAAC;AACpB,MACE;AAAA,EAAC;AAAA;AAAA,IACC,WAAS;AAAA,IACT;AAAA,IACA,eAAa,6BAAY;AAAA,IACzB,SAAO;AAAA,IACP;AAAA,IACA,aAAa,eAAe,CAAC;AAAA,IAC7B,MAAM,qCAAa;AAAA,IACnB;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA;AACF;",
   "names": []
 }

package/dist/cjs/addons/Filters/Components/SelectFilter/MultiSelectFilter.js

@@ -39,6 +39,7 @@ var import_exported_related = require("../../../../exported-related/index.js");
 var import_constants = require("../../../../configs/constants.js");
 const MultiSelectFilter = ({
   column,
+  referenceColumn,
   onValueChange,
   patchHeaderFilterButtonAndMenu,
   patchHeader,
@@ -59,7 +60,8 @@ const MultiSelectFilter = ({
     patchHeaderFilterButtonAndMenu,
     patchHeader,
     innerRef,
-    domIdAffix
+    domIdAffix,
+    referenceColumn
   }
 );
 //# sourceMappingURL=MultiSelectFilter.js.map

package/dist/cjs/addons/Filters/Components/SelectFilter/MultiSelectFilter.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../src/addons/Filters/Components/SelectFilter/MultiSelectFilter.tsx", "../../../../../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["import React from 'react';\nimport type { DSComboboxT } from '@elliemae/ds-form-combobox';\nimport { uid } from 'uid';\nimport type { DSDataTableT } from '../../../../react-desc-prop-types.js';\nimport { BaseSelectFilter } from './BaseSelectFilter.js';\nimport { FILTER_TYPES } from '../../../../exported-related/index.js';\nimport { DATA_TESTID } from '../../../../configs/constants.js';\n\ntype MultiSelectFilterValue = DSComboboxT.SelectedOptionsT;\n\nexport const MultiSelectFilter: React.ComponentType<DSDataTableT.FilterProps<MultiSelectFilterValue>> = ({\n  column,\n  onValueChange,\n  patchHeaderFilterButtonAndMenu,\n  patchHeader,\n  reduxHeader,\n  filterValue,\n  innerRef,\n  domIdAffix = uid(4),\n}) => (\n  <BaseSelectFilter\n    reduxHeader={reduxHeader}\n    data-testid={DATA_TESTID.DATA_TABLE_MULTISELECT_CONTROLLER}\n    isMulti\n    column={column}\n    filterValue={filterValue ?? []}\n    type={FILTER_TYPES.MULTI_SELECT}\n    onValueChange={onValueChange}\n    patchHeaderFilterButtonAndMenu={patchHeaderFilterButtonAndMenu}\n    patchHeader={patchHeader}\n    innerRef={innerRef}\n    domIdAffix={domIdAffix}\n  />\n);\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADoBrB;AAlBF,iBAAoB;AAEpB,8BAAiC;AACjC,8BAA6B;AAC7B,uBAA4B;AAIrB,MAAM,oBAA2F,CAAC;AAAA,EACvG;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,iBAAa,gBAAI,CAAC;AACpB,MACE;AAAA,EAAC;AAAA;AAAA,IACC;AAAA,IACA,eAAa,6BAAY;AAAA,IACzB,SAAO;AAAA,IACP;AAAA,IACA,aAAa,eAAe,CAAC;AAAA,IAC7B,MAAM,qCAAa;AAAA,IACnB;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA;AACF;",
+  "sourcesContent": ["import React from 'react';\nimport type { DSComboboxT } from '@elliemae/ds-form-combobox';\nimport { uid } from 'uid';\nimport type { DSDataTableT } from '../../../../react-desc-prop-types.js';\nimport { BaseSelectFilter } from './BaseSelectFilter.js';\nimport { FILTER_TYPES } from '../../../../exported-related/index.js';\nimport { DATA_TESTID } from '../../../../configs/constants.js';\n\ntype MultiSelectFilterValue = DSComboboxT.SelectedOptionsT;\n\nexport const MultiSelectFilter: React.ComponentType<DSDataTableT.FilterProps<MultiSelectFilterValue>> = ({\n  column,\n  referenceColumn,\n  onValueChange,\n  patchHeaderFilterButtonAndMenu,\n  patchHeader,\n  reduxHeader,\n  filterValue,\n  innerRef,\n  domIdAffix = uid(4),\n}) => (\n  <BaseSelectFilter\n    reduxHeader={reduxHeader}\n    data-testid={DATA_TESTID.DATA_TABLE_MULTISELECT_CONTROLLER}\n    isMulti\n    column={column}\n    filterValue={filterValue ?? []}\n    type={FILTER_TYPES.MULTI_SELECT}\n    onValueChange={onValueChange}\n    patchHeaderFilterButtonAndMenu={patchHeaderFilterButtonAndMenu}\n    patchHeader={patchHeader}\n    innerRef={innerRef}\n    domIdAffix={domIdAffix}\n    referenceColumn={referenceColumn}\n  />\n);\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADqBrB;AAnBF,iBAAoB;AAEpB,8BAAiC;AACjC,8BAA6B;AAC7B,uBAA4B;AAIrB,MAAM,oBAA2F,CAAC;AAAA,EACvG;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,iBAAa,gBAAI,CAAC;AACpB,MACE;AAAA,EAAC;AAAA;AAAA,IACC;AAAA,IACA,eAAa,6BAAY;AAAA,IACzB,SAAO;AAAA,IACP;AAAA,IACA,aAAa,eAAe,CAAC;AAAA,IAC7B,MAAM,qCAAa;AAAA,IACnB;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA;AACF;",
   "names": []
 }

package/dist/cjs/addons/Filters/Components/SelectFilter/SingleCreatableFilter.js

@@ -39,6 +39,7 @@ var import_exported_related = require("../../../../exported-related/index.js");
 var import_constants = require("../../../../configs/constants.js");
 const SingleCreatableFilter = ({
   column,
+  referenceColumn,
   patchHeaderFilterButtonAndMenu,
   patchHeader,
   onValueChange,
@@ -59,7 +60,8 @@ const SingleCreatableFilter = ({
     patchHeaderFilterButtonAndMenu,
     patchHeader,
     innerRef,
-    domIdAffix
+    domIdAffix,
+    referenceColumn
   }
 );
 //# sourceMappingURL=SingleCreatableFilter.js.map

package/dist/cjs/addons/Filters/Components/SelectFilter/SingleCreatableFilter.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../src/addons/Filters/Components/SelectFilter/SingleCreatableFilter.tsx", "../../../../../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["import React from 'react';\nimport { uid } from 'uid';\nimport type { DSComboboxT } from '@elliemae/ds-form-combobox';\nimport { BaseSelectFilter } from './BaseSelectFilter.js';\nimport type { DSDataTableT } from '../../../../react-desc-prop-types.js';\nimport { FILTER_TYPES } from '../../../../exported-related/index.js';\nimport { DATA_TESTID } from '../../../../configs/constants.js';\n\ntype SingleCreatableFilterValue = DSComboboxT.SelectedOptionsT;\n\nexport const SingleCreatableFilter: React.ComponentType<DSDataTableT.FilterProps<SingleCreatableFilterValue>> = ({\n  column,\n  patchHeaderFilterButtonAndMenu,\n  patchHeader,\n  onValueChange,\n  filterValue,\n  reduxHeader,\n  innerRef,\n  domIdAffix = uid(4),\n}) => (\n  <BaseSelectFilter\n    creatable\n    reduxHeader={reduxHeader}\n    data-testid={DATA_TESTID.DATA_TABLE_SINGLESELECT_CONTROLLER}\n    column={column}\n    filterValue={filterValue}\n    type={FILTER_TYPES.SELECT}\n    onValueChange={onValueChange}\n    patchHeaderFilterButtonAndMenu={patchHeaderFilterButtonAndMenu}\n    patchHeader={patchHeader}\n    innerRef={innerRef}\n    domIdAffix={domIdAffix}\n  />\n);\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADoBrB;AAnBF,iBAAoB;AAEpB,8BAAiC;AAEjC,8BAA6B;AAC7B,uBAA4B;AAIrB,MAAM,wBAAmG,CAAC;AAAA,EAC/G;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,iBAAa,gBAAI,CAAC;AACpB,MACE;AAAA,EAAC;AAAA;AAAA,IACC,WAAS;AAAA,IACT;AAAA,IACA,eAAa,6BAAY;AAAA,IACzB;AAAA,IACA;AAAA,IACA,MAAM,qCAAa;AAAA,IACnB;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA;AACF;",
+  "sourcesContent": ["import React from 'react';\nimport { uid } from 'uid';\nimport type { DSComboboxT } from '@elliemae/ds-form-combobox';\nimport { BaseSelectFilter } from './BaseSelectFilter.js';\nimport type { DSDataTableT } from '../../../../react-desc-prop-types.js';\nimport { FILTER_TYPES } from '../../../../exported-related/index.js';\nimport { DATA_TESTID } from '../../../../configs/constants.js';\n\ntype SingleCreatableFilterValue = DSComboboxT.SelectedOptionsT;\n\nexport const SingleCreatableFilter: React.ComponentType<DSDataTableT.FilterProps<SingleCreatableFilterValue>> = ({\n  column,\n  referenceColumn,\n  patchHeaderFilterButtonAndMenu,\n  patchHeader,\n  onValueChange,\n  filterValue,\n  reduxHeader,\n  innerRef,\n  domIdAffix = uid(4),\n}) => (\n  <BaseSelectFilter\n    creatable\n    reduxHeader={reduxHeader}\n    data-testid={DATA_TESTID.DATA_TABLE_SINGLESELECT_CONTROLLER}\n    column={column}\n    filterValue={filterValue}\n    type={FILTER_TYPES.SELECT}\n    onValueChange={onValueChange}\n    patchHeaderFilterButtonAndMenu={patchHeaderFilterButtonAndMenu}\n    patchHeader={patchHeader}\n    innerRef={innerRef}\n    domIdAffix={domIdAffix}\n    referenceColumn={referenceColumn}\n  />\n);\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADqBrB;AApBF,iBAAoB;AAEpB,8BAAiC;AAEjC,8BAA6B;AAC7B,uBAA4B;AAIrB,MAAM,wBAAmG,CAAC;AAAA,EAC/G;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,iBAAa,gBAAI,CAAC;AACpB,MACE;AAAA,EAAC;AAAA;AAAA,IACC,WAAS;AAAA,IACT;AAAA,IACA,eAAa,6BAAY;AAAA,IACzB;AAAA,IACA;AAAA,IACA,MAAM,qCAAa;AAAA,IACnB;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA;AACF;",
   "names": []
 }

package/dist/cjs/addons/Filters/Components/SelectFilter/SingleSelectFilter.js

@@ -39,6 +39,7 @@ var import_exported_related = require("../../../../exported-related/index.js");
 var import_BaseSelectFilter = require("./BaseSelectFilter.js");
 const SingleSelectFilter = ({
   column,
+  referenceColumn,
   patchHeaderFilterButtonAndMenu,
   patchHeader,
   onValueChange,
@@ -58,7 +59,8 @@ const SingleSelectFilter = ({
     patchHeaderFilterButtonAndMenu,
     patchHeader,
     innerRef,
-    domIdAffix
+    domIdAffix,
+    referenceColumn
   }
 );
 //# sourceMappingURL=SingleSelectFilter.js.map

package/dist/cjs/addons/Filters/Components/SelectFilter/SingleSelectFilter.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../src/addons/Filters/Components/SelectFilter/SingleSelectFilter.tsx", "../../../../../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["import type { DSComboboxT } from '@elliemae/ds-form-combobox';\nimport React from 'react';\nimport { uid } from 'uid';\nimport { DATA_TESTID } from '../../../../configs/constants.js';\nimport { FILTER_TYPES } from '../../../../exported-related/index.js';\nimport type { DSDataTableT } from '../../../../react-desc-prop-types.js';\nimport { BaseSelectFilter } from './BaseSelectFilter.js';\n\ntype SingleSelectFilterValue = DSComboboxT.SelectedOptionsT;\n\nexport const SingleSelectFilter: React.ComponentType<DSDataTableT.FilterProps<SingleSelectFilterValue>> = ({\n  column,\n  patchHeaderFilterButtonAndMenu,\n  patchHeader,\n  onValueChange,\n  filterValue,\n  reduxHeader,\n  innerRef,\n  domIdAffix = uid(4),\n}) => (\n  <BaseSelectFilter\n    reduxHeader={reduxHeader}\n    data-testid={DATA_TESTID.DATA_TABLE_SINGLESELECT_CONTROLLER}\n    column={column}\n    filterValue={filterValue}\n    type={FILTER_TYPES.SELECT}\n    onValueChange={onValueChange}\n    patchHeaderFilterButtonAndMenu={patchHeaderFilterButtonAndMenu}\n    patchHeader={patchHeader}\n    innerRef={innerRef}\n    domIdAffix={domIdAffix}\n  />\n);\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADoBrB;AAlBF,iBAAoB;AACpB,uBAA4B;AAC5B,8BAA6B;AAE7B,8BAAiC;AAI1B,MAAM,qBAA6F,CAAC;AAAA,EACzG;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,iBAAa,gBAAI,CAAC;AACpB,MACE;AAAA,EAAC;AAAA;AAAA,IACC;AAAA,IACA,eAAa,6BAAY;AAAA,IACzB;AAAA,IACA;AAAA,IACA,MAAM,qCAAa;AAAA,IACnB;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA;AACF;",
+  "sourcesContent": ["import type { DSComboboxT } from '@elliemae/ds-form-combobox';\nimport React from 'react';\nimport { uid } from 'uid';\nimport { DATA_TESTID } from '../../../../configs/constants.js';\nimport { FILTER_TYPES } from '../../../../exported-related/index.js';\nimport type { DSDataTableT } from '../../../../react-desc-prop-types.js';\nimport { BaseSelectFilter } from './BaseSelectFilter.js';\n\ntype SingleSelectFilterValue = DSComboboxT.SelectedOptionsT;\n\nexport const SingleSelectFilter: React.ComponentType<DSDataTableT.FilterProps<SingleSelectFilterValue>> = ({\n  column,\n  referenceColumn,\n  patchHeaderFilterButtonAndMenu,\n  patchHeader,\n  onValueChange,\n  filterValue,\n  reduxHeader,\n  innerRef,\n  domIdAffix = uid(4),\n}) => (\n  <BaseSelectFilter\n    reduxHeader={reduxHeader}\n    data-testid={DATA_TESTID.DATA_TABLE_SINGLESELECT_CONTROLLER}\n    column={column}\n    filterValue={filterValue}\n    type={FILTER_TYPES.SELECT}\n    onValueChange={onValueChange}\n    patchHeaderFilterButtonAndMenu={patchHeaderFilterButtonAndMenu}\n    patchHeader={patchHeader}\n    innerRef={innerRef}\n    domIdAffix={domIdAffix}\n    referenceColumn={referenceColumn}\n  />\n);\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADqBrB;AAnBF,iBAAoB;AACpB,uBAA4B;AAC5B,8BAA6B;AAE7B,8BAAiC;AAI1B,MAAM,qBAA6F,CAAC;AAAA,EACzG;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,iBAAa,gBAAI,CAAC;AACpB,MACE;AAAA,EAAC;AAAA;AAAA,IACC;AAAA,IACA,eAAa,6BAAY;AAAA,IACzB;AAAA,IACA;AAAA,IACA,MAAM,qCAAa;AAAA,IACnB;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA;AACF;",
   "names": []
 }