@elliemae/ds-data-table 3.33.1 → 3.34.0-next.2

package/dist/esm/addons/Columns/ColumnSelectMultiple/ColumnSelectMultiple.js

@@ -2,6 +2,7 @@ import * as React from "react";
 import { jsx } from "react/jsx-runtime";
 import { useMemo, useRef, useCallback, createRef } from "react";
 import { DSControlledCheckbox } from "@elliemae/ds-form-checkbox";
+import { uid as genUid } from "uid";
 import { DATA_TESTID } from "../../../configs/constants.js";
 import { useInternalStore, usePropsStore } from "../../../configs/useStore/useStore.js";
 const multiSelectColumn = {
@@ -57,7 +58,7 @@ const multiSelectColumn = {
       }
     );
   },
-  Cell: ({ cell, row, isRowSelected }) => {
+  Cell: ({ cell, row, isRowSelected, domIdAffix = genUid(4) }) => {
     const onSelectionChange = usePropsStore((state) => state.onSelectionChange);
     const selection = usePropsStore((state) => state.selection);
     const disabledRows = usePropsStore((state) => state.disabledRows);
@@ -112,7 +113,7 @@ const multiSelectColumn = {
     return /* @__PURE__ */ jsx("div", { role: "presentation", onClick: stopThePropagation, onKeyDown: onKeyDownHandler, onKeyUp: onKeyUpHandler, children: /* @__PURE__ */ jsx(
       DSControlledCheckbox,
       {
-        id: `data-table-checkbox-${uid}`,
+        id: `data-table-checkbox-${uid}-${domIdAffix}`,
         "data-testid": DATA_TESTID.DATA_TABLE_CHECKBOX,
         "aria-label": "Toggle row selected",
         checked: selectedState,

package/dist/esm/addons/Columns/ColumnSelectMultiple/ColumnSelectMultiple.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../../scripts/build/transpile/react-shim.js", "../../../../../src/addons/Columns/ColumnSelectMultiple/ColumnSelectMultiple.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { useMemo, useRef, useCallback, createRef } from 'react';\nimport { DSControlledCheckbox } from '@elliemae/ds-form-checkbox';\nimport type { DSDataTableT } from '../../../react-desc-prop-types.js';\nimport { DATA_TESTID } from '../../../configs/constants.js';\nimport { useInternalStore, usePropsStore } from '../../../configs/useStore/useStore.js';\n\nexport const multiSelectColumn: DSDataTableT.InternalColumn<HTMLInputElement> = {\n  // Build our multiSelecter column\n  id: 'multiSelecter', // Make sure it has an ID\n  Header: () => {\n    const onSelectionChange = usePropsStore((state) => state.onSelectionChange);\n    const selection = usePropsStore((state) => state.selection);\n    const disabledRows = usePropsStore((state) => state.disabledRows);\n    const noResultsMessage = usePropsStore((state) => state.noResultsMessage);\n    const noResultsSecondaryMessage = usePropsStore((state) => state.noResultsSecondaryMessage);\n    const allDataFlattened = usePropsStore((state) => state.allDataFlattened);\n    const flattenedData = usePropsStore((state) => state.flattenedData);\n    const isEmptyContent = usePropsStore((state) => state.isEmptyContent);\n    const firstFocuseableColumnHeaderId = usePropsStore((state) => state.firstFocuseableColumnHeaderId);\n\n    // We for sure have selection, so we just typecast it for TS reasons\n    const dtSelection = selection ?? {};\n    const selectionKeyCount = flattenedData.reduce(\n      (acc, cur) => (dtSelection[cur.uid] && !disabledRows[cur.uid] ? 1 : 0) + acc,\n      0,\n    );\n\n    const currentGlobalState = useMemo(\n      () =>\n        selectionKeyCount > 0 && selectionKeyCount < flattenedData.filter((datum) => !disabledRows[datum.uid]).length\n          ? 'mixed'\n          : selectionKeyCount > 0,\n      [selectionKeyCount, flattenedData, disabledRows],\n    );\n\n    // global state toggling: false to true, mixed to true, true to false\n    const newGlobalStateAfterToggle = useMemo(() => currentGlobalState !== true, [currentGlobalState]);\n\n    const newSelection: DSDataTableT.Selection = useMemo(() => {\n      if (!newGlobalStateAfterToggle) return {};\n\n      return allDataFlattened.reduce<DSDataTableT.Selection>((newSelectionObject, datum) => {\n        newSelectionObject[datum.uid] = !disabledRows[datum.uid];\n        return newSelectionObject;\n      }, {});\n    }, [newGlobalStateAfterToggle, allDataFlattened, disabledRows]);\n\n    const onChangeHandler = useCallback(\n      (newState: boolean, e: React.ChangeEvent | React.MouseEvent | React.KeyboardEvent) => {\n        onSelectionChange(newSelection, 'All', e);\n      },\n      [newSelection, onSelectionChange],\n    );\n\n    const ariaControls = useMemo(\n      () => allDataFlattened.map((datum) => `data-table-checkbox-${datum.uid}`).join(' '),\n      [allDataFlattened],\n    );\n\n    return (\n      <DSControlledCheckbox\n        aria-controls={ariaControls}\n        data-testid={DATA_TESTID.DATA_TABLE_GLOBAL_CHECKBOX}\n        aria-label={\n          isEmptyContent && firstFocuseableColumnHeaderId === 'multiSelecter'\n            ? `${noResultsMessage}. ${\n                noResultsSecondaryMessage ? `${noResultsSecondaryMessage}.` : ''\n              } Toggle all rows selected`\n            : 'Toggle all rows selected'\n        }\n        checked={currentGlobalState}\n        onChange={onChangeHandler}\n      />\n    );\n  },\n  Cell: ({ cell, row, isRowSelected }) => {\n    const onSelectionChange = usePropsStore((state) => state.onSelectionChange);\n    const selection = usePropsStore((state) => state.selection);\n    const disabledRows = usePropsStore((state) => state.disabledRows);\n    const lastSelected = usePropsStore((state) => state.lastSelected);\n    const flattenedData = usePropsStore((state) => state.flattenedData);\n    const isShiftPressed = useInternalStore((state) => state.isShiftPressed);\n    const setIsShiftPressed = useInternalStore((state) => state.setIsShiftPressed);\n\n    const { uid } = row;\n    const selectedState = selection?.[uid] ?? false;\n\n    const isShiftPressedKeyRef = useRef(false);\n    const onChangeHandler = useCallback(\n      (newState: boolean, e: React.ChangeEvent | React.MouseEvent | React.KeyboardEvent) => {\n        const newSelection = { ...selection, [uid]: newState }; // we only want true and mixed values\n        if (!newState) delete newSelection[uid]; // if newState is false, remove from the new selection\n        const now = Number.parseInt(uid, 10);\n        if ((isShiftPressed || isShiftPressedKeyRef.current) && lastSelected.current > -1) {\n          for (let i = Math.min(lastSelected.current, now); i <= Math.max(lastSelected.current, now); i += 1) {\n            const correctDataIndex = flattenedData[i].id;\n            if (!Object.keys(disabledRows).includes(correctDataIndex))\n              newSelection[correctDataIndex] = newSelection[lastSelected.current];\n            if (!newSelection[correctDataIndex]) delete newSelection[correctDataIndex];\n          }\n        }\n        lastSelected.current = now;\n        onSelectionChange(newSelection, uid, e);\n      },\n      [disabledRows, flattenedData, isShiftPressed, lastSelected, onSelectionChange, selection, uid],\n    );\n\n    const onKeyDownHandler: React.KeyboardEventHandler = useCallback(\n      (e) => {\n        setIsShiftPressed(e.code === 'Shift' || e.shiftKey);\n        e.stopPropagation();\n      },\n      [setIsShiftPressed],\n    );\n\n    const onKeyUpHandler: React.KeyboardEventHandler = useCallback(\n      (e) => {\n        setIsShiftPressed(false);\n        isShiftPressedKeyRef.current = false;\n        e.stopPropagation();\n      },\n      [setIsShiftPressed],\n    );\n\n    const stopThePropagation = useCallback((e: React.MouseEvent | React.KeyboardEvent) => {\n      if (e.shiftKey) {\n        isShiftPressedKeyRef.current = true;\n      }\n      e.stopPropagation();\n    }, []);\n\n    return (\n      <div role=\"presentation\" onClick={stopThePropagation} onKeyDown={onKeyDownHandler} onKeyUp={onKeyUpHandler}>\n        <DSControlledCheckbox\n          id={`data-table-checkbox-${uid}`}\n          data-testid={DATA_TESTID.DATA_TABLE_CHECKBOX}\n          aria-label=\"Toggle row selected\"\n          checked={selectedState}\n          onChange={onChangeHandler}\n          disabled={disabledRows[row.uid]}\n          innerRef={cell.ref}\n          tabIndex={isRowSelected ? 0 : -1}\n        />\n      </div>\n    );\n  },\n  textWrap: 'wrap',\n  width: 32,\n  padding: 7,\n  canResize: false,\n  isFocuseable: false,\n  disableDnD: true,\n  parentId: null,\n  depth: 0,\n  ref: createRef(),\n};\n"],
-  "mappings": "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",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { useMemo, useRef, useCallback, createRef } from 'react';\nimport { DSControlledCheckbox } from '@elliemae/ds-form-checkbox';\nimport { uid as genUid } from 'uid';\nimport type { DSDataTableT } from '../../../react-desc-prop-types.js';\nimport { DATA_TESTID } from '../../../configs/constants.js';\nimport { useInternalStore, usePropsStore } from '../../../configs/useStore/useStore.js';\n\nexport const multiSelectColumn: DSDataTableT.InternalColumn = {\n  // Build our multiSelecter column\n  id: 'multiSelecter', // Make sure it has an ID\n  Header: () => {\n    const onSelectionChange = usePropsStore((state) => state.onSelectionChange);\n    const selection = usePropsStore((state) => state.selection);\n    const disabledRows = usePropsStore((state) => state.disabledRows);\n    const noResultsMessage = usePropsStore((state) => state.noResultsMessage);\n    const noResultsSecondaryMessage = usePropsStore((state) => state.noResultsSecondaryMessage);\n    const allDataFlattened = usePropsStore((state) => state.allDataFlattened);\n    const flattenedData = usePropsStore((state) => state.flattenedData);\n    const isEmptyContent = usePropsStore((state) => state.isEmptyContent);\n    const firstFocuseableColumnHeaderId = usePropsStore((state) => state.firstFocuseableColumnHeaderId);\n\n    // We for sure have selection, so we just typecast it for TS reasons\n    const dtSelection = selection ?? {};\n    const selectionKeyCount = flattenedData.reduce(\n      (acc, cur) => (dtSelection[cur.uid] && !disabledRows[cur.uid] ? 1 : 0) + acc,\n      0,\n    );\n\n    const currentGlobalState = useMemo(\n      () =>\n        selectionKeyCount > 0 && selectionKeyCount < flattenedData.filter((datum) => !disabledRows[datum.uid]).length\n          ? 'mixed'\n          : selectionKeyCount > 0,\n      [selectionKeyCount, flattenedData, disabledRows],\n    );\n\n    // global state toggling: false to true, mixed to true, true to false\n    const newGlobalStateAfterToggle = useMemo(() => currentGlobalState !== true, [currentGlobalState]);\n\n    const newSelection: DSDataTableT.Selection = useMemo(() => {\n      if (!newGlobalStateAfterToggle) return {};\n\n      return allDataFlattened.reduce<DSDataTableT.Selection>((newSelectionObject, datum) => {\n        newSelectionObject[datum.uid] = !disabledRows[datum.uid];\n        return newSelectionObject;\n      }, {});\n    }, [newGlobalStateAfterToggle, allDataFlattened, disabledRows]);\n\n    const onChangeHandler = useCallback(\n      (newState: boolean, e: React.ChangeEvent | React.MouseEvent | React.KeyboardEvent) => {\n        onSelectionChange(newSelection, 'All', e);\n      },\n      [newSelection, onSelectionChange],\n    );\n\n    const ariaControls = useMemo(\n      () => allDataFlattened.map((datum) => `data-table-checkbox-${datum.uid}`).join(' '),\n      [allDataFlattened],\n    );\n\n    return (\n      <DSControlledCheckbox\n        aria-controls={ariaControls}\n        data-testid={DATA_TESTID.DATA_TABLE_GLOBAL_CHECKBOX}\n        aria-label={\n          isEmptyContent && firstFocuseableColumnHeaderId === 'multiSelecter'\n            ? `${noResultsMessage}. ${\n                noResultsSecondaryMessage ? `${noResultsSecondaryMessage}.` : ''\n              } Toggle all rows selected`\n            : 'Toggle all rows selected'\n        }\n        checked={currentGlobalState}\n        onChange={onChangeHandler}\n      />\n    );\n  },\n  Cell: ({ cell, row, isRowSelected, domIdAffix = genUid(4) }) => {\n    const onSelectionChange = usePropsStore((state) => state.onSelectionChange);\n    const selection = usePropsStore((state) => state.selection);\n    const disabledRows = usePropsStore((state) => state.disabledRows);\n    const lastSelected = usePropsStore((state) => state.lastSelected);\n    const flattenedData = usePropsStore((state) => state.flattenedData);\n    const isShiftPressed = useInternalStore((state) => state.isShiftPressed);\n    const setIsShiftPressed = useInternalStore((state) => state.setIsShiftPressed);\n\n    const { uid } = row;\n    const selectedState = selection?.[uid] ?? false;\n\n    const isShiftPressedKeyRef = useRef(false);\n    const onChangeHandler = useCallback(\n      (newState: boolean, e: React.ChangeEvent | React.MouseEvent | React.KeyboardEvent) => {\n        const newSelection = { ...selection, [uid]: newState }; // we only want true and mixed values\n        if (!newState) delete newSelection[uid]; // if newState is false, remove from the new selection\n        const now = Number.parseInt(uid, 10);\n        if ((isShiftPressed || isShiftPressedKeyRef.current) && lastSelected.current > -1) {\n          for (let i = Math.min(lastSelected.current, now); i <= Math.max(lastSelected.current, now); i += 1) {\n            const correctDataIndex = flattenedData[i].id;\n            if (!Object.keys(disabledRows).includes(correctDataIndex))\n              newSelection[correctDataIndex] = newSelection[lastSelected.current];\n            if (!newSelection[correctDataIndex]) delete newSelection[correctDataIndex];\n          }\n        }\n        lastSelected.current = now;\n        onSelectionChange(newSelection, uid, e);\n      },\n      [disabledRows, flattenedData, isShiftPressed, lastSelected, onSelectionChange, selection, uid],\n    );\n\n    const onKeyDownHandler: React.KeyboardEventHandler = useCallback(\n      (e) => {\n        setIsShiftPressed(e.code === 'Shift' || e.shiftKey);\n        e.stopPropagation();\n      },\n      [setIsShiftPressed],\n    );\n\n    const onKeyUpHandler: React.KeyboardEventHandler = useCallback(\n      (e) => {\n        setIsShiftPressed(false);\n        isShiftPressedKeyRef.current = false;\n        e.stopPropagation();\n      },\n      [setIsShiftPressed],\n    );\n\n    const stopThePropagation = useCallback((e: React.MouseEvent | React.KeyboardEvent) => {\n      if (e.shiftKey) {\n        isShiftPressedKeyRef.current = true;\n      }\n      e.stopPropagation();\n    }, []);\n\n    return (\n      <div role=\"presentation\" onClick={stopThePropagation} onKeyDown={onKeyDownHandler} onKeyUp={onKeyUpHandler}>\n        <DSControlledCheckbox\n          id={`data-table-checkbox-${uid}-${domIdAffix}`}\n          data-testid={DATA_TESTID.DATA_TABLE_CHECKBOX}\n          aria-label=\"Toggle row selected\"\n          checked={selectedState}\n          onChange={onChangeHandler}\n          disabled={disabledRows[row.uid]}\n          innerRef={cell.ref}\n          tabIndex={isRowSelected ? 0 : -1}\n        />\n      </div>\n    );\n  },\n  textWrap: 'wrap',\n  width: 32,\n  padding: 7,\n  canResize: false,\n  isFocuseable: false,\n  disableDnD: true,\n  parentId: null,\n  depth: 0,\n  ref: createRef(),\n};\n"],
+  "mappings": "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",
   "names": []
 }

package/dist/esm/addons/Columns/ColumnSelectSingle/ColumnSelectSingle.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../../scripts/build/transpile/react-shim.js", "../../../../../src/addons/Columns/ColumnSelectSingle/ColumnSelectSingle.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { createRef, useCallback } from 'react';\nimport { DSControlledRadio } from '@elliemae/ds-form-radio';\nimport { styled } from '@elliemae/ds-system';\nimport type { DSDataTableT } from '../../../react-desc-prop-types.js';\nimport { DATA_TESTID } from '../../../configs/constants.js';\nimport { ScreenReaderOnly } from '../../../styled.js';\nimport { usePropsStore } from '../../../configs/useStore/useStore.js';\nimport { DSDataTableName, DSDataTableSlots } from '../../../DSDataTableDefinitions.js';\n\nconst CenteredContent = styled('div', { name: DSDataTableName, slot: DSDataTableSlots.SINGLE_CELL_CONTAINER })`\n  display: flex;\n  height: 100%;\n  width: 100%;\n  justify-content: center;\n  align-items: center;\n`;\n\nconst stopThePropagation = (e: React.MouseEvent | React.KeyboardEvent) => e.stopPropagation();\n\nexport const singleSelectColumn: DSDataTableT.InternalColumn<HTMLInputElement> = {\n  // Build our singleSelecter column\n  id: 'singleSelecter', // Make sure it has an ID\n  // The header doesn't need anything for single selection\n  Header: () => <ScreenReaderOnly>Single Select Column</ScreenReaderOnly>,\n  Cell: ({ cell, row, isRowSelected }) => {\n    const onSelectionChange = usePropsStore((state) => state.onSelectionChange);\n    const selection = usePropsStore((state) => state.selection);\n    const disabledRows = usePropsStore((state) => state.disabledRows);\n    const { uid } = row;\n    const selectedState = !!selection?.[uid];\n\n    const onChangeHandler = useCallback(\n      (newValue: string, e: React.ChangeEvent) => {\n        // in single select we only allow one item to be selected\n        onSelectionChange({ [uid]: !selectedState }, uid, e);\n      },\n      [onSelectionChange, selectedState, uid],\n    );\n\n    return (\n      <CenteredContent onClick={stopThePropagation} onKeyDown={stopThePropagation}>\n        <DSControlledRadio\n          aria-checked={selectedState}\n          aria-disabled={disabledRows[row.uid]}\n          title=\"Toggle row selected\"\n          aria-label=\"Toggle row selected\"\n          checked={selectedState}\n          onChange={onChangeHandler}\n          data-testid={DATA_TESTID.DATA_TABLE_RADIO}\n          disabled={disabledRows[row.uid]}\n          innerRef={cell.ref}\n          value={uid}\n          tabIndex={isRowSelected ? 0 : -1}\n        />\n      </CenteredContent>\n    );\n  },\n  textWrap: 'wrap',\n  width: 32,\n  padding: 4,\n  canResize: false,\n  isFocuseable: false,\n  disableDnD: true,\n  parentId: null,\n  depth: 0,\n  ref: createRef(),\n};\n"],
-  "mappings": "AAAA,YAAY,WAAW;ACuBP;AAvBhB,SAAgB,WAAW,mBAAmB;AAC9C,SAAS,yBAAyB;AAClC,SAAS,cAAc;AAEvB,SAAS,mBAAmB;AAC5B,SAAS,wBAAwB;AACjC,SAAS,qBAAqB;AAC9B,SAAS,iBAAiB,wBAAwB;AAElD,MAAM,kBAAkB,OAAO,OAAO,EAAE,MAAM,iBAAiB,MAAM,iBAAiB,sBAAsB,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAQ7G,MAAM,qBAAqB,CAAC,MAA8C,EAAE,gBAAgB;AAErF,MAAM,qBAAoE;AAAA;AAAA,EAE/E,IAAI;AAAA;AAAA;AAAA,EAEJ,QAAQ,MAAM,oBAAC,oBAAiB,kCAAoB;AAAA,EACpD,MAAM,CAAC,EAAE,MAAM,KAAK,cAAc,MAAM;AACtC,UAAM,oBAAoB,cAAc,CAAC,UAAU,MAAM,iBAAiB;AAC1E,UAAM,YAAY,cAAc,CAAC,UAAU,MAAM,SAAS;AAC1D,UAAM,eAAe,cAAc,CAAC,UAAU,MAAM,YAAY;AAChE,UAAM,EAAE,IAAI,IAAI;AAChB,UAAM,gBAAgB,CAAC,CAAC,YAAY,GAAG;AAEvC,UAAM,kBAAkB;AAAA,MACtB,CAAC,UAAkB,MAAyB;AAE1C,0BAAkB,EAAE,CAAC,GAAG,GAAG,CAAC,cAAc,GAAG,KAAK,CAAC;AAAA,MACrD;AAAA,MACA,CAAC,mBAAmB,eAAe,GAAG;AAAA,IACxC;AAEA,WACE,oBAAC,mBAAgB,SAAS,oBAAoB,WAAW,oBACvD;AAAA,MAAC;AAAA;AAAA,QACC,gBAAc;AAAA,QACd,iBAAe,aAAa,IAAI,GAAG;AAAA,QACnC,OAAM;AAAA,QACN,cAAW;AAAA,QACX,SAAS;AAAA,QACT,UAAU;AAAA,QACV,eAAa,YAAY;AAAA,QACzB,UAAU,aAAa,IAAI,GAAG;AAAA,QAC9B,UAAU,KAAK;AAAA,QACf,OAAO;AAAA,QACP,UAAU,gBAAgB,IAAI;AAAA;AAAA,IAChC,GACF;AAAA,EAEJ;AAAA,EACA,UAAU;AAAA,EACV,OAAO;AAAA,EACP,SAAS;AAAA,EACT,WAAW;AAAA,EACX,cAAc;AAAA,EACd,YAAY;AAAA,EACZ,UAAU;AAAA,EACV,OAAO;AAAA,EACP,KAAK,UAAU;AACjB;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { createRef, useCallback } from 'react';\nimport { DSControlledRadio } from '@elliemae/ds-form-radio';\nimport { styled } from '@elliemae/ds-system';\nimport type { DSDataTableT } from '../../../react-desc-prop-types.js';\nimport { DATA_TESTID } from '../../../configs/constants.js';\nimport { ScreenReaderOnly } from '../../../styled.js';\nimport { usePropsStore } from '../../../configs/useStore/useStore.js';\nimport { DSDataTableName, DSDataTableSlots } from '../../../DSDataTableDefinitions.js';\n\nconst CenteredContent = styled('div', { name: DSDataTableName, slot: DSDataTableSlots.SINGLE_CELL_CONTAINER })`\n  display: flex;\n  height: 100%;\n  width: 100%;\n  justify-content: center;\n  align-items: center;\n`;\n\nconst stopThePropagation = (e: React.MouseEvent | React.KeyboardEvent) => e.stopPropagation();\n\nexport const singleSelectColumn: DSDataTableT.InternalColumn = {\n  // Build our singleSelecter column\n  id: 'singleSelecter', // Make sure it has an ID\n  // The header doesn't need anything for single selection\n  Header: () => <ScreenReaderOnly>Single Select Column</ScreenReaderOnly>,\n  Cell: ({ cell, row, isRowSelected }) => {\n    const onSelectionChange = usePropsStore((state) => state.onSelectionChange);\n    const selection = usePropsStore((state) => state.selection);\n    const disabledRows = usePropsStore((state) => state.disabledRows);\n    const { uid } = row;\n    const selectedState = !!selection?.[uid];\n\n    const onChangeHandler = useCallback(\n      (newValue: string, e: React.ChangeEvent) => {\n        // in single select we only allow one item to be selected\n        onSelectionChange({ [uid]: !selectedState }, uid, e);\n      },\n      [onSelectionChange, selectedState, uid],\n    );\n\n    return (\n      <CenteredContent onClick={stopThePropagation} onKeyDown={stopThePropagation}>\n        <DSControlledRadio\n          aria-checked={selectedState}\n          aria-disabled={disabledRows[row.uid]}\n          title=\"Toggle row selected\"\n          aria-label=\"Toggle row selected\"\n          checked={selectedState}\n          onChange={onChangeHandler}\n          data-testid={DATA_TESTID.DATA_TABLE_RADIO}\n          disabled={disabledRows[row.uid]}\n          innerRef={cell.ref}\n          value={uid}\n          tabIndex={isRowSelected ? 0 : -1}\n        />\n      </CenteredContent>\n    );\n  },\n  textWrap: 'wrap',\n  width: 32,\n  padding: 4,\n  canResize: false,\n  isFocuseable: false,\n  disableDnD: true,\n  parentId: null,\n  depth: 0,\n  ref: createRef(),\n};\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACuBP;AAvBhB,SAAgB,WAAW,mBAAmB;AAC9C,SAAS,yBAAyB;AAClC,SAAS,cAAc;AAEvB,SAAS,mBAAmB;AAC5B,SAAS,wBAAwB;AACjC,SAAS,qBAAqB;AAC9B,SAAS,iBAAiB,wBAAwB;AAElD,MAAM,kBAAkB,OAAO,OAAO,EAAE,MAAM,iBAAiB,MAAM,iBAAiB,sBAAsB,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAQ7G,MAAM,qBAAqB,CAAC,MAA8C,EAAE,gBAAgB;AAErF,MAAM,qBAAkD;AAAA;AAAA,EAE7D,IAAI;AAAA;AAAA;AAAA,EAEJ,QAAQ,MAAM,oBAAC,oBAAiB,kCAAoB;AAAA,EACpD,MAAM,CAAC,EAAE,MAAM,KAAK,cAAc,MAAM;AACtC,UAAM,oBAAoB,cAAc,CAAC,UAAU,MAAM,iBAAiB;AAC1E,UAAM,YAAY,cAAc,CAAC,UAAU,MAAM,SAAS;AAC1D,UAAM,eAAe,cAAc,CAAC,UAAU,MAAM,YAAY;AAChE,UAAM,EAAE,IAAI,IAAI;AAChB,UAAM,gBAAgB,CAAC,CAAC,YAAY,GAAG;AAEvC,UAAM,kBAAkB;AAAA,MACtB,CAAC,UAAkB,MAAyB;AAE1C,0BAAkB,EAAE,CAAC,GAAG,GAAG,CAAC,cAAc,GAAG,KAAK,CAAC;AAAA,MACrD;AAAA,MACA,CAAC,mBAAmB,eAAe,GAAG;AAAA,IACxC;AAEA,WACE,oBAAC,mBAAgB,SAAS,oBAAoB,WAAW,oBACvD;AAAA,MAAC;AAAA;AAAA,QACC,gBAAc;AAAA,QACd,iBAAe,aAAa,IAAI,GAAG;AAAA,QACnC,OAAM;AAAA,QACN,cAAW;AAAA,QACX,SAAS;AAAA,QACT,UAAU;AAAA,QACV,eAAa,YAAY;AAAA,QACzB,UAAU,aAAa,IAAI,GAAG;AAAA,QAC9B,UAAU,KAAK;AAAA,QACf,OAAO;AAAA,QACP,UAAU,gBAAgB,IAAI;AAAA;AAAA,IAChC,GACF;AAAA,EAEJ;AAAA,EACA,UAAU;AAAA,EACV,OAAO;AAAA,EACP,SAAS;AAAA,EACT,WAAW;AAAA,EACX,cAAc;AAAA,EACd,YAAY;AAAA,EACZ,UAAU;AAAA,EACV,OAAO;AAAA,EACP,KAAK,UAAU;AACjB;",
   "names": []
 }

package/dist/esm/addons/Editables/ComboboxEditableCell/ComboboxEditableCell.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../../scripts/build/transpile/react-shim.js", "../../../../../src/addons/Editables/ComboboxEditableCell/ComboboxEditableCell.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable jsx-a11y/no-autofocus */\nimport React, { useState, useCallback, useMemo } from 'react';\nimport { DSComboBox, type DSComboboxT } from '@elliemae/ds-form-combobox';\nimport { EditableCell } from '../../../exported-related/index.js';\nimport type { DSDataTableT } from '../../../react-desc-prop-types.js';\nimport { usePropsStore } from '../../../configs/useStore/useStore.js';\n\nexport const ComboboxEditableCell: React.ComponentType<{\n  cell: DSDataTableT.Cell<HTMLDivElement>;\n  DefaultCellRender: JSX.Element;\n  isRowSelected: boolean;\n}> = (props) => {\n  const { cell, DefaultCellRender, isRowSelected } = props;\n\n  const onCellValueChange = usePropsStore((state) => state.onCellValueChange);\n  const flattenedData = usePropsStore((state) => state.flattenedData);\n\n  const cellValue = useMemo(() => cell.value as string, [cell.value]);\n  const columnId = useMemo(() => cell.column.id, [cell.column.id]);\n\n  const [value, setValue] = useState<DSComboboxT.ItemOption>({\n    dsId: cellValue,\n    type: 'option',\n    value: cellValue,\n    label: cellValue,\n  });\n\n  const uniqueOptions = useMemo(() => {\n    if (cell.column.editOptions) {\n      return typeof cell.column.editOptions === 'function' ? cell.column.editOptions() : cell.column.editOptions;\n    }\n\n    const uniqueValuesMap: Record<string, boolean> = {};\n    return flattenedData.reduce((optionsSoFar, currRow) => {\n      const currValue = currRow.original[columnId] as string;\n      if (!uniqueValuesMap[currValue]) {\n        optionsSoFar.push({ dsId: currValue, type: 'option', value: currValue, label: currValue });\n        uniqueValuesMap[currValue] = true;\n      }\n      return optionsSoFar;\n    }, [] as DSDataTableT.EditOptionT[]);\n  }, [cell.column, flattenedData, columnId]);\n\n  const [currentOptions, setCurrentOptions] = useState(uniqueOptions);\n\n  const handleOnBlur = useCallback(() => {\n    const property = columnId;\n    onCellValueChange({ value: value?.value, property, rowIndex: cell.row.index });\n  }, [columnId, onCellValueChange, value?.value, cell]);\n\n  const handleOnChange = useCallback((newValue: DSComboboxT.SelectedOptionsT) => {\n    setValue(newValue as DSComboboxT.ItemOption);\n  }, []);\n\n  return (\n    <EditableCell\n      StandardRender={DefaultCellRender}\n      EditableRenderer={\n        <DSComboBox\n          selectedValues={value}\n          autoFocus\n          withoutPortal={false}\n          onBlur={handleOnBlur}\n          onChange={handleOnChange}\n          allOptions={uniqueOptions}\n          onFilter={setCurrentOptions}\n          filteredOptions={currentOptions}\n        />\n      }\n      cell={cell}\n      isRowSelected={isRowSelected}\n    />\n  );\n};\n"],
-  "mappings": "AAAA,YAAY,WAAW;AC0Df;AAzDR,SAAgB,UAAU,aAAa,eAAe;AACtD,SAAS,kBAAoC;AAC7C,SAAS,oBAAoB;AAE7B,SAAS,qBAAqB;AAEvB,MAAM,uBAIR,CAAC,UAAU;AACd,QAAM,EAAE,MAAM,mBAAmB,cAAc,IAAI;AAEnD,QAAM,oBAAoB,cAAc,CAAC,UAAU,MAAM,iBAAiB;AAC1E,QAAM,gBAAgB,cAAc,CAAC,UAAU,MAAM,aAAa;AAElE,QAAM,YAAY,QAAQ,MAAM,KAAK,OAAiB,CAAC,KAAK,KAAK,CAAC;AAClE,QAAM,WAAW,QAAQ,MAAM,KAAK,OAAO,IAAI,CAAC,KAAK,OAAO,EAAE,CAAC;AAE/D,QAAM,CAAC,OAAO,QAAQ,IAAI,SAAiC;AAAA,IACzD,MAAM;AAAA,IACN,MAAM;AAAA,IACN,OAAO;AAAA,IACP,OAAO;AAAA,EACT,CAAC;AAED,QAAM,gBAAgB,QAAQ,MAAM;AAClC,QAAI,KAAK,OAAO,aAAa;AAC3B,aAAO,OAAO,KAAK,OAAO,gBAAgB,aAAa,KAAK,OAAO,YAAY,IAAI,KAAK,OAAO;AAAA,IACjG;AAEA,UAAM,kBAA2C,CAAC;AAClD,WAAO,cAAc,OAAO,CAAC,cAAc,YAAY;AACrD,YAAM,YAAY,QAAQ,SAAS,QAAQ;AAC3C,UAAI,CAAC,gBAAgB,SAAS,GAAG;AAC/B,qBAAa,KAAK,EAAE,MAAM,WAAW,MAAM,UAAU,OAAO,WAAW,OAAO,UAAU,CAAC;AACzF,wBAAgB,SAAS,IAAI;AAAA,MAC/B;AACA,aAAO;AAAA,IACT,GAAG,CAAC,CAA+B;AAAA,EACrC,GAAG,CAAC,KAAK,QAAQ,eAAe,QAAQ,CAAC;AAEzC,QAAM,CAAC,gBAAgB,iBAAiB,IAAI,SAAS,aAAa;AAElE,QAAM,eAAe,YAAY,MAAM;AACrC,UAAM,WAAW;AACjB,sBAAkB,EAAE,OAAO,OAAO,OAAO,UAAU,UAAU,KAAK,IAAI,MAAM,CAAC;AAAA,EAC/E,GAAG,CAAC,UAAU,mBAAmB,OAAO,OAAO,IAAI,CAAC;AAEpD,QAAM,iBAAiB,YAAY,CAAC,aAA2C;AAC7E,aAAS,QAAkC;AAAA,EAC7C,GAAG,CAAC,CAAC;AAEL,SACE;AAAA,IAAC;AAAA;AAAA,MACC,gBAAgB;AAAA,MAChB,kBACE;AAAA,QAAC;AAAA;AAAA,UACC,gBAAgB;AAAA,UAChB,WAAS;AAAA,UACT,eAAe;AAAA,UACf,QAAQ;AAAA,UACR,UAAU;AAAA,UACV,YAAY;AAAA,UACZ,UAAU;AAAA,UACV,iBAAiB;AAAA;AAAA,MACnB;AAAA,MAEF;AAAA,MACA;AAAA;AAAA,EACF;AAEJ;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable jsx-a11y/no-autofocus */\nimport React, { useState, useCallback, useMemo } from 'react';\nimport { DSComboBox, type DSComboboxT } from '@elliemae/ds-form-combobox';\nimport { EditableCell } from '../../../exported-related/index.js';\nimport type { DSDataTableT } from '../../../react-desc-prop-types.js';\nimport { usePropsStore } from '../../../configs/useStore/useStore.js';\n\nexport const ComboboxEditableCell: React.ComponentType<DSDataTableT.EditableCellProps<HTMLDivElement>> = (props) => {\n  const { cell, DefaultCellRender, isRowSelected } = props;\n\n  const onCellValueChange = usePropsStore((state) => state.onCellValueChange);\n  const flattenedData = usePropsStore((state) => state.flattenedData);\n\n  const cellValue = useMemo(() => cell.value as string, [cell.value]);\n  const columnId = useMemo(() => cell.column.id, [cell.column.id]);\n\n  const [value, setValue] = useState<DSComboboxT.ItemOption>({\n    dsId: cellValue,\n    type: 'option',\n    value: cellValue,\n    label: cellValue,\n  });\n\n  const uniqueOptions = useMemo(() => {\n    if (cell.column.editOptions) {\n      return typeof cell.column.editOptions === 'function' ? cell.column.editOptions() : cell.column.editOptions;\n    }\n\n    const uniqueValuesMap: Record<string, boolean> = {};\n    return flattenedData.reduce((optionsSoFar, currRow) => {\n      const currValue = currRow.original[columnId] as string;\n      if (!uniqueValuesMap[currValue]) {\n        optionsSoFar.push({ dsId: currValue, type: 'option', value: currValue, label: currValue });\n        uniqueValuesMap[currValue] = true;\n      }\n      return optionsSoFar;\n    }, [] as DSDataTableT.EditOptionT[]);\n  }, [cell.column, flattenedData, columnId]);\n\n  const [currentOptions, setCurrentOptions] = useState(uniqueOptions);\n\n  const handleOnBlur = useCallback(() => {\n    const property = columnId;\n    onCellValueChange({ value: value?.value, property, rowIndex: cell.row.index });\n  }, [columnId, onCellValueChange, value?.value, cell]);\n\n  const handleOnChange = useCallback((newValue: DSComboboxT.SelectedOptionsT) => {\n    setValue(newValue as DSComboboxT.ItemOption);\n  }, []);\n\n  return (\n    <EditableCell\n      StandardRender={DefaultCellRender}\n      EditableRenderer={\n        <DSComboBox\n          selectedValues={value}\n          autoFocus\n          withoutPortal={false}\n          onBlur={handleOnBlur}\n          onChange={handleOnChange}\n          allOptions={uniqueOptions}\n          onFilter={setCurrentOptions}\n          filteredOptions={currentOptions}\n        />\n      }\n      cell={cell}\n      isRowSelected={isRowSelected}\n    />\n  );\n};\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACsDf;AArDR,SAAgB,UAAU,aAAa,eAAe;AACtD,SAAS,kBAAoC;AAC7C,SAAS,oBAAoB;AAE7B,SAAS,qBAAqB;AAEvB,MAAM,uBAA4F,CAAC,UAAU;AAClH,QAAM,EAAE,MAAM,mBAAmB,cAAc,IAAI;AAEnD,QAAM,oBAAoB,cAAc,CAAC,UAAU,MAAM,iBAAiB;AAC1E,QAAM,gBAAgB,cAAc,CAAC,UAAU,MAAM,aAAa;AAElE,QAAM,YAAY,QAAQ,MAAM,KAAK,OAAiB,CAAC,KAAK,KAAK,CAAC;AAClE,QAAM,WAAW,QAAQ,MAAM,KAAK,OAAO,IAAI,CAAC,KAAK,OAAO,EAAE,CAAC;AAE/D,QAAM,CAAC,OAAO,QAAQ,IAAI,SAAiC;AAAA,IACzD,MAAM;AAAA,IACN,MAAM;AAAA,IACN,OAAO;AAAA,IACP,OAAO;AAAA,EACT,CAAC;AAED,QAAM,gBAAgB,QAAQ,MAAM;AAClC,QAAI,KAAK,OAAO,aAAa;AAC3B,aAAO,OAAO,KAAK,OAAO,gBAAgB,aAAa,KAAK,OAAO,YAAY,IAAI,KAAK,OAAO;AAAA,IACjG;AAEA,UAAM,kBAA2C,CAAC;AAClD,WAAO,cAAc,OAAO,CAAC,cAAc,YAAY;AACrD,YAAM,YAAY,QAAQ,SAAS,QAAQ;AAC3C,UAAI,CAAC,gBAAgB,SAAS,GAAG;AAC/B,qBAAa,KAAK,EAAE,MAAM,WAAW,MAAM,UAAU,OAAO,WAAW,OAAO,UAAU,CAAC;AACzF,wBAAgB,SAAS,IAAI;AAAA,MAC/B;AACA,aAAO;AAAA,IACT,GAAG,CAAC,CAA+B;AAAA,EACrC,GAAG,CAAC,KAAK,QAAQ,eAAe,QAAQ,CAAC;AAEzC,QAAM,CAAC,gBAAgB,iBAAiB,IAAI,SAAS,aAAa;AAElE,QAAM,eAAe,YAAY,MAAM;AACrC,UAAM,WAAW;AACjB,sBAAkB,EAAE,OAAO,OAAO,OAAO,UAAU,UAAU,KAAK,IAAI,MAAM,CAAC;AAAA,EAC/E,GAAG,CAAC,UAAU,mBAAmB,OAAO,OAAO,IAAI,CAAC;AAEpD,QAAM,iBAAiB,YAAY,CAAC,aAA2C;AAC7E,aAAS,QAAkC;AAAA,EAC7C,GAAG,CAAC,CAAC;AAEL,SACE;AAAA,IAAC;AAAA;AAAA,MACC,gBAAgB;AAAA,MAChB,kBACE;AAAA,QAAC;AAAA;AAAA,UACC,gBAAgB;AAAA,UAChB,WAAS;AAAA,UACT,eAAe;AAAA,UACf,QAAQ;AAAA,UACR,UAAU;AAAA,UACV,YAAY;AAAA,UACZ,UAAU;AAAA,UACV,iBAAiB;AAAA;AAAA,MACnB;AAAA,MAEF;AAAA,MACA;AAAA;AAAA,EACF;AAEJ;",
   "names": []
 }

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../../scripts/build/transpile/react-shim.js", "../../../../../src/addons/Editables/TextEditableCell/TextEditableCell.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* 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/useStore.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<{\n  cell: DSDataTableT.Cell<HTMLDivElement>;\n  DefaultCellRender: JSX.Element;\n  isRowSelected: boolean;\n}> = (props) => {\n  const { cell, DefaultCellRender, isRowSelected } = props;\n\n  const onCellValueChange = usePropsStore((state) => state.onCellValueChange);\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        />\n      }\n      cell={cell}\n      isRowSelected={isRowSelected}\n    />\n  );\n};\n"],
-  "mappings": "AAAA,YAAY,WAAW;AC6Df;AA5DR,SAAgB,UAAU,mBAAmB;AAC7C,SAAS,cAAc;AACvB,SAAS,oBAAoB;AAE7B,SAAS,qBAAqB;AAC9B,SAAS,iBAAiB,wBAAwB;AAElD,MAAM,cAAc,OAAO,SAAS,EAAE,MAAM,iBAAiB,MAAM,iBAAiB,yBAAyB,CAAC;AAAA;AAAA;AAAA,wBAGtF,CAAC,UAAU,MAAM,MAAM,OAAO,MAAM,GAAG;AAAA;AAAA;AAAA;AAKxD,MAAM,mBAIR,CAAC,UAAU;AACd,QAAM,EAAE,MAAM,mBAAmB,cAAc,IAAI;AAEnD,QAAM,oBAAoB,cAAc,CAAC,UAAU,MAAM,iBAAiB;AAE1E,QAAM,CAAC,OAAO,QAAQ,IAAI,SAAiB,KAAK,KAAe;AAE/D,QAAM,iBAAiB,YAAY,CAAC,MAA2C;AAC7E,UAAM;AAAA,MACJ,QAAQ,EAAE,OAAO,OAAO;AAAA,IAC1B,IAAI;AACJ,aAAS,MAAM;AAAA,EACjB,GAAG,CAAC,CAAC;AAEL,QAAM,eAAe,YAAY,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,kBAAkB;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;AAAA,MACX;AAAA,MAEF;AAAA,MACA;AAAA;AAAA,EACF;AAEJ;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* 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/useStore.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\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        />\n      }\n      cell={cell}\n      isRowSelected={isRowSelected}\n    />\n  );\n};\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACyDf;AAxDR,SAAgB,UAAU,mBAAmB;AAC7C,SAAS,cAAc;AACvB,SAAS,oBAAoB;AAE7B,SAAS,qBAAqB;AAC9B,SAAS,iBAAiB,wBAAwB;AAElD,MAAM,cAAc,OAAO,SAAS,EAAE,MAAM,iBAAiB,MAAM,iBAAiB,yBAAyB,CAAC;AAAA;AAAA;AAAA,wBAGtF,CAAC,UAAU,MAAM,MAAM,OAAO,MAAM,GAAG;AAAA;AAAA;AAAA;AAKxD,MAAM,mBAAwF,CAAC,UAAU;AAC9G,QAAM,EAAE,MAAM,mBAAmB,cAAc,IAAI;AAEnD,QAAM,oBAAoB,cAAc,CAAC,UAAU,MAAM,iBAAiB;AAE1E,QAAM,CAAC,OAAO,QAAQ,IAAI,SAAiB,KAAK,KAAe;AAE/D,QAAM,iBAAiB,YAAY,CAAC,MAA2C;AAC7E,UAAM;AAAA,MACJ,QAAQ,EAAE,OAAO,OAAO;AAAA,IAC1B,IAAI;AACJ,aAAS,MAAM;AAAA,EACjB,GAAG,CAAC,CAAC;AAEL,QAAM,eAAe,YAAY,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,kBAAkB;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;AAAA,MACX;AAAA,MAEF;AAAA,MACA;AAAA;AAAA,EACF;AAEJ;",
   "names": []
 }

package/dist/esm/addons/Editables/index.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/addons/Editables/index.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import type React from 'react';\nimport { TextEditableCell } from './TextEditableCell/TextEditableCell.js';\nimport { ComboboxEditableCell } from './ComboboxEditableCell/ComboboxEditableCell.js';\n\nexport const outOfTheBoxEditables: Record<string, { EditableComponent: React.ComponentType<any> }> = {\n  'ds-edit-text': { EditableComponent: TextEditableCell },\n  'ds-edit-combobox': {\n    EditableComponent: ComboboxEditableCell,\n  },\n};\n"],
-  "mappings": "AAAA,YAAY,WAAW;ACCvB,SAAS,wBAAwB;AACjC,SAAS,4BAA4B;AAE9B,MAAM,uBAAwF;AAAA,EACnG,gBAAgB,EAAE,mBAAmB,iBAAiB;AAAA,EACtD,oBAAoB;AAAA,IAClB,mBAAmB;AAAA,EACrB;AACF;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import type React from 'react';\nimport { TextEditableCell } from './TextEditableCell/TextEditableCell.js';\nimport { ComboboxEditableCell } from './ComboboxEditableCell/ComboboxEditableCell.js';\nimport type { DSDataTableT } from 'react-desc-prop-types.js';\n\nexport const outOfTheBoxEditables: Record<\n  string,\n  { EditableComponent: React.ComponentType<DSDataTableT.EditableCellProps<HTMLDivElement>> }\n> = {\n  'ds-edit-text': { EditableComponent: TextEditableCell },\n  'ds-edit-combobox': {\n    EditableComponent: ComboboxEditableCell,\n  },\n};\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACCvB,SAAS,wBAAwB;AACjC,SAAS,4BAA4B;AAG9B,MAAM,uBAGT;AAAA,EACF,gBAAgB,EAAE,mBAAmB,iBAAiB;AAAA,EACtD,oBAAoB;AAAA,IAClB,mBAAmB;AAAA,EACrB;AACF;",
   "names": []
 }

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

@@ -6,6 +6,7 @@ import { DSInputText } from "@elliemae/ds-form-input-text";
 import { getNumberMaskedValue, useNumberMask } from "@elliemae/ds-form-helpers-mask-hooks";
 import { DSFormLayoutBlockItem } from "@elliemae/ds-form-layout-blocks";
 import { SearchXsmall } from "@elliemae/ds-icons";
+import { uid } from "uid";
 import { FilterPopover, FILTER_TYPES } from "../../../../exported-related/index.js";
 import { DATA_TESTID } from "../../../../configs/constants.js";
 const opts = {
@@ -15,7 +16,15 @@ const opts = {
 };
 const idPreffix = "datatable-currency-range";
 const CurrencyRangeFilter = (props) => {
-  const { column, filterValue = { from: null, to: null }, reduxHeader, patchHeader, onValueChange, innerRef } = props;
+  const {
+    column,
+    filterValue = { from: null, to: null },
+    reduxHeader,
+    patchHeader,
+    onValueChange,
+    innerRef,
+    domIdAffix = uid(4)
+  } = props;
   const [from, setFrom] = useState(getNumberMaskedValue(filterValue.from ?? "", opts));
   const [to, setTo] = useState(getNumberMaskedValue(filterValue.to ?? "", opts));
   const ref = useRef(null);
@@ -79,7 +88,7 @@ const CurrencyRangeFilter = (props) => {
               {
                 value: from,
                 ...fromInputProps,
-                id: `${idPreffix}-min-${column.id}`,
+                id: `${idPreffix}-min-${column.id}-${domIdAffix}`,
                 style: { textAlign: "right" },
                 placeholder: "0.00",
                 innerRef: handleRef
@@ -90,7 +99,7 @@ const CurrencyRangeFilter = (props) => {
               {
                 value: to,
                 ...toInputProps,
-                id: `${idPreffix}-max-${column.id}`,
+                id: `${idPreffix}-max-${column.id}s-${domIdAffix}`,
                 style: { textAlign: "right" },
                 placeholder: "0.00"
               }

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../../../scripts/build/transpile/react-shim.js", "../../../../../../src/addons/Filters/Components/CurrencyRangeFilter/index.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "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 { 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 { column, filterValue = { from: null, to: null }, reduxHeader, patchHeader, onValueChange, innerRef } = props;\n\n  const [from, setFrom] = useState(getNumberMaskedValue(filterValue.from ?? '', opts));\n  const [to, setTo] = useState(getNumberMaskedValue(filterValue.to ?? '', opts));\n\n  const ref = useRef<HTMLInputElement | null>(null);\n  const shouldFocus = useRef(true);\n\n  const fromInputProps = useNumberMask({\n    valueSetter: setFrom,\n    ...opts,\n  });\n\n  const toInputProps = useNumberMask({\n    valueSetter: setTo,\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    onValueChange(FILTER_TYPES.CURRENCY_RANGE, { from, to });\n    // We are missing onValueChange on purpose, this is an internal function and won't cause any problems\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [from, to]);\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}`}>\n            <DSInputText\n              value={from}\n              {...fromInputProps}\n              id={`${idPreffix}-min-${column.id}`}\n              style={{ textAlign: 'right' }}\n              placeholder=\"0.00\"\n              innerRef={handleRef}\n            />\n          </DSFormLayoutBlockItem>\n          <DSFormLayoutBlockItem label=\"Max\" inputID={`${idPreffix}-max-${column.id}`}>\n            <DSInputText\n              value={to}\n              {...toInputProps}\n              id={`${idPreffix}-max-${column.id}`}\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"],
-  "mappings": "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",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "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  const ref = useRef<HTMLInputElement | null>(null);\n  const shouldFocus = useRef(true);\n\n  const fromInputProps = useNumberMask({\n    valueSetter: setFrom,\n    ...opts,\n  });\n\n  const toInputProps = useNumberMask({\n    valueSetter: setTo,\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    onValueChange(FILTER_TYPES.CURRENCY_RANGE, { from, to });\n    // We are missing onValueChange on purpose, this is an internal function and won't cause any problems\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [from, to]);\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}`}>\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}`}>\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"],
+  "mappings": "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",
   "names": []
 }

package/dist/esm/addons/Filters/Components/DateSwitcherFilter/index.js

@@ -6,6 +6,7 @@ import { Grid } from "@elliemae/ds-grid";
 import { DSControlledDateRangePicker } from "@elliemae/ds-form-date-range-picker";
 import { DSControlledDateTimePicker } from "@elliemae/ds-form-date-time-picker";
 import { DSControlledCheckbox } from "@elliemae/ds-form-checkbox";
+import { uid } from "uid";
 import { FilterPopover, FILTER_TYPES } from "../../../../exported-related/index.js";
 import { DATA_TESTID } from "../../../../configs/constants.js";
 const emptyFilterValue = { startDate: null, endDate: null };
@@ -17,7 +18,8 @@ const DateSwitcherFilter = (props) => {
     onValueChange,
     patchHeaderFilterButtonAndMenu,
     reduxHeader,
-    innerRef
+    innerRef,
+    domIdAffix = uid(4)
   } = props;
   const ref = useRef(null);
   const dateRange = filterValue;
@@ -57,7 +59,7 @@ const DateSwitcherFilter = (props) => {
               checked: isDateRange,
               name: "Date range",
               label: "Date Range",
-              id: "date-range-switcher-id-internal",
+              id: `date-range-switcher-id-internal-${domIdAffix}`,
               onChange: () => {
                 setIsDateRange(!isDateRange);
                 setStartDate("");

package/dist/esm/addons/Filters/Components/DateSwitcherFilter/index.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../../../scripts/build/transpile/react-shim.js", "../../../../../../src/addons/Filters/Components/DateSwitcherFilter/index.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { useEffect, useRef, useCallback, useState } from 'react';\nimport { DatePicker2 } from '@elliemae/ds-icons';\nimport { Grid } from '@elliemae/ds-grid';\nimport { DSControlledDateRangePicker } from '@elliemae/ds-form-date-range-picker';\nimport { DSControlledDateTimePicker } from '@elliemae/ds-form-date-time-picker';\nimport { DSControlledCheckbox } from '@elliemae/ds-form-checkbox';\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 emptyFilterValue = { startDate: null, endDate: null };\n\ninterface DateSwitcherFilterValue {\n  startDate: string | null;\n  endDate: string | null;\n  isDateRange: boolean;\n}\n\nexport const DateSwitcherFilter: React.ComponentType<DSDataTableT.FilterProps<DateSwitcherFilterValue>> = (props) => {\n  const {\n    column,\n    column: { id },\n    filterValue = emptyFilterValue,\n    onValueChange,\n    patchHeaderFilterButtonAndMenu,\n    reduxHeader,\n    innerRef,\n  } = props;\n\n  const ref = useRef<HTMLInputElement | null>(null);\n  const dateRange = filterValue;\n\n  const [startDate, setStartDate] = useState(dateRange.startDate || '');\n  const [endDate, setEndDate] = useState(dateRange.endDate || '');\n  const [isDateRange, setIsDateRange] = useState(false);\n\n  useEffect(() => {\n    setStartDate(dateRange.startDate || '');\n    setEndDate(dateRange.endDate || '');\n  }, [dateRange]);\n\n  useEffect(() => {\n    if (startDate && endDate && !startDate.includes('_') && !endDate.includes('_')) {\n      onValueChange(FILTER_TYPES.DATE_SWITCHER, { startDate, endDate, isDateRange });\n    }\n    // We are missing onValueChange on purpose, this is an internal function and won't cause any problems\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [startDate, endDate, isDateRange]);\n\n  const handleRef = useCallback(\n    (newRef: HTMLInputElement | HTMLButtonElement | null) => {\n      if (ref.current) ref.current = newRef as HTMLInputElement | null;\n      if (!reduxHeader?.hideFilterMenu) {\n        setTimeout(() => newRef?.focus());\n      }\n    },\n    [reduxHeader?.hideFilterMenu],\n  );\n\n  return (\n    <FilterPopover\n      reduxHeader={reduxHeader}\n      column={column}\n      columnId={id}\n      menuContent={\n        <Grid width=\"260px\" data-testid={DATA_TESTID.DATA_TABLE_DATE_RANGE_CONTROLLER}>\n          <Grid p=\"xxs\" gutter=\"xxs\" style={{ background: 'white' }}>\n            <div data-testid={DATA_TESTID.DATA_TABLE_DATE_RANGE_CONTROLLER_CHECKBOX_SWITCHER}>\n              <DSControlledCheckbox\n                checked={isDateRange}\n                name=\"Date range\"\n                label=\"Date Range\"\n                id=\"date-range-switcher-id-internal\"\n                onChange={() => {\n                  setIsDateRange(!isDateRange);\n                  setStartDate('');\n                  setEndDate('');\n                }}\n                innerRef={handleRef}\n              />\n            </div>\n            {isDateRange ? (\n              <DSControlledDateRangePicker\n                fromDate={startDate}\n                onFromDateChange={setStartDate}\n                toDate={endDate}\n                onToDateChange={setEndDate}\n                type=\"date-range-inputs\"\n              />\n            ) : (\n              <DSControlledDateTimePicker\n                date={startDate}\n                onDateChange={(_date) => {\n                  setStartDate(_date);\n                  setEndDate(_date);\n                }}\n                type=\"date-inputs\"\n              />\n            )}\n          </Grid>\n          <Grid\n            onKeyDown={(e) =>\n              e.code === 'Enter' &&\n              setTimeout(() => patchHeaderFilterButtonAndMenu(id, !!(dateRange.startDate || dateRange.endDate)), 0)\n            }\n          >\n            {isDateRange ? (\n              <DSControlledDateRangePicker\n                fromDate={startDate}\n                onFromDateChange={setStartDate}\n                toDate={endDate}\n                onToDateChange={setEndDate}\n                type=\"date-range-picker-controller-only\"\n              />\n            ) : (\n              <DSControlledDateTimePicker\n                date={startDate}\n                onDateChange={(_date) => {\n                  setStartDate(_date);\n                  setEndDate(_date);\n                }}\n                type=\"date-picker-controller-only\"\n              />\n            )}\n          </Grid>\n        </Grid>\n      }\n      triggerIcon={<DatePicker2 />}\n      innerRef={innerRef}\n      ariaLabel=\"Open Date Range Filter\"\n    />\n  );\n};\n"],
-  "mappings": "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",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { useEffect, useRef, useCallback, useState } from 'react';\nimport { DatePicker2 } from '@elliemae/ds-icons';\nimport { Grid } from '@elliemae/ds-grid';\nimport { DSControlledDateRangePicker } from '@elliemae/ds-form-date-range-picker';\nimport { DSControlledDateTimePicker } from '@elliemae/ds-form-date-time-picker';\nimport { DSControlledCheckbox } from '@elliemae/ds-form-checkbox';\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 emptyFilterValue = { startDate: null, endDate: null };\n\ninterface DateSwitcherFilterValue {\n  startDate: string | null;\n  endDate: string | null;\n  isDateRange: boolean;\n}\n\nexport const DateSwitcherFilter: React.ComponentType<DSDataTableT.FilterProps<DateSwitcherFilterValue>> = (props) => {\n  const {\n    column,\n    column: { id },\n    filterValue = emptyFilterValue,\n    onValueChange,\n    patchHeaderFilterButtonAndMenu,\n    reduxHeader,\n    innerRef,\n    domIdAffix = uid(4),\n  } = props;\n\n  const ref = useRef<HTMLInputElement | null>(null);\n  const dateRange = filterValue;\n\n  const [startDate, setStartDate] = useState(dateRange.startDate || '');\n  const [endDate, setEndDate] = useState(dateRange.endDate || '');\n  const [isDateRange, setIsDateRange] = useState(false);\n\n  useEffect(() => {\n    setStartDate(dateRange.startDate || '');\n    setEndDate(dateRange.endDate || '');\n  }, [dateRange]);\n\n  useEffect(() => {\n    if (startDate && endDate && !startDate.includes('_') && !endDate.includes('_')) {\n      onValueChange(FILTER_TYPES.DATE_SWITCHER, { startDate, endDate, isDateRange });\n    }\n    // We are missing onValueChange on purpose, this is an internal function and won't cause any problems\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [startDate, endDate, isDateRange]);\n\n  const handleRef = useCallback(\n    (newRef: HTMLInputElement | HTMLButtonElement | null) => {\n      if (ref.current) ref.current = newRef as HTMLInputElement | null;\n      if (!reduxHeader?.hideFilterMenu) {\n        setTimeout(() => newRef?.focus());\n      }\n    },\n    [reduxHeader?.hideFilterMenu],\n  );\n\n  return (\n    <FilterPopover\n      reduxHeader={reduxHeader}\n      column={column}\n      columnId={id}\n      menuContent={\n        <Grid width=\"260px\" data-testid={DATA_TESTID.DATA_TABLE_DATE_RANGE_CONTROLLER}>\n          <Grid p=\"xxs\" gutter=\"xxs\" style={{ background: 'white' }}>\n            <div data-testid={DATA_TESTID.DATA_TABLE_DATE_RANGE_CONTROLLER_CHECKBOX_SWITCHER}>\n              <DSControlledCheckbox\n                checked={isDateRange}\n                name=\"Date range\"\n                label=\"Date Range\"\n                id={`date-range-switcher-id-internal-${domIdAffix}`}\n                onChange={() => {\n                  setIsDateRange(!isDateRange);\n                  setStartDate('');\n                  setEndDate('');\n                }}\n                innerRef={handleRef}\n              />\n            </div>\n            {isDateRange ? (\n              <DSControlledDateRangePicker\n                fromDate={startDate}\n                onFromDateChange={setStartDate}\n                toDate={endDate}\n                onToDateChange={setEndDate}\n                type=\"date-range-inputs\"\n              />\n            ) : (\n              <DSControlledDateTimePicker\n                date={startDate}\n                onDateChange={(_date) => {\n                  setStartDate(_date);\n                  setEndDate(_date);\n                }}\n                type=\"date-inputs\"\n              />\n            )}\n          </Grid>\n          <Grid\n            onKeyDown={(e) =>\n              e.code === 'Enter' &&\n              setTimeout(() => patchHeaderFilterButtonAndMenu(id, !!(dateRange.startDate || dateRange.endDate)), 0)\n            }\n          >\n            {isDateRange ? (\n              <DSControlledDateRangePicker\n                fromDate={startDate}\n                onFromDateChange={setStartDate}\n                toDate={endDate}\n                onToDateChange={setEndDate}\n                type=\"date-range-picker-controller-only\"\n              />\n            ) : (\n              <DSControlledDateTimePicker\n                date={startDate}\n                onDateChange={(_date) => {\n                  setStartDate(_date);\n                  setEndDate(_date);\n                }}\n                type=\"date-picker-controller-only\"\n              />\n            )}\n          </Grid>\n        </Grid>\n      }\n      triggerIcon={<DatePicker2 />}\n      innerRef={innerRef}\n      ariaLabel=\"Open Date Range Filter\"\n    />\n  );\n};\n"],
+  "mappings": "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",
   "names": []
 }

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

@@ -6,6 +6,7 @@ import { DSInputText } from "@elliemae/ds-form-input-text";
 import { getNumberMaskedValue } from "@elliemae/ds-form-helpers-mask-hooks";
 import { DSFormLayoutBlockItem } from "@elliemae/ds-form-layout-blocks";
 import { SearchXsmall } from "@elliemae/ds-icons";
+import { uid } from "uid";
 import { FilterPopover, FILTER_TYPES } from "../../../../exported-related/index.js";
 import { DATA_TESTID } from "../../../../configs/constants.js";
 const opts = {
@@ -18,7 +19,15 @@ const conform = (value) => {
   return getNumberMaskedValue(valueAsString, opts);
 };
 const NumberRangeFilter = (props) => {
-  const { column, filterValue = { from: null, to: null }, reduxHeader, patchHeader, onValueChange, innerRef } = props;
+  const {
+    column,
+    filterValue = { from: null, to: null },
+    reduxHeader,
+    patchHeader,
+    onValueChange,
+    innerRef,
+    domIdAffix = uid(4)
+  } = props;
   const handleFromChange = useCallback(
     (e) => {
       const from = e.target.value !== "" ? parseInt(e.target.value, 10) : "";
@@ -90,7 +99,7 @@ const NumberRangeFilter = (props) => {
               {
                 value: conform(filterValue.from),
                 onChange: handleFromChange,
-                id: `${idPreffix}-low-${column.id}`,
+                id: `${idPreffix}-low-${column.id}-${domIdAffix}`,
                 style: { textAlign: "right" },
                 placeholder: "0",
                 innerRef: handleRef,
@@ -102,7 +111,7 @@ const NumberRangeFilter = (props) => {
               {
                 value: conform(filterValue.to),
                 onChange: handleToChange,
-                id: `${idPreffix}-high-${column.id}`,
+                id: `${idPreffix}-high-${column.id}-${domIdAffix}`,
                 style: { textAlign: "right" },
                 placeholder: "0",
                 onKeyDown: onKeyDownHandler

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../../../scripts/build/transpile/react-shim.js", "../../../../../../src/addons/Filters/Components/NumberRangeFilter/index.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "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 { 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 { column, filterValue = { from: null, to: null }, reduxHeader, patchHeader, onValueChange, innerRef } = 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}`}>\n            <DSInputText\n              value={conform(filterValue.from)}\n              onChange={handleFromChange}\n              id={`${idPreffix}-low-${column.id}`}\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}`}>\n            <DSInputText\n              value={conform(filterValue.to)}\n              onChange={handleToChange}\n              id={`${idPreffix}-high-${column.id}`}\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"],
-  "mappings": "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",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "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}`}>\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}`}>\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"],
+  "mappings": "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",
   "names": []
 }

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

@@ -1,5 +1,6 @@
 import * as React from "react";
 import { jsx } from "react/jsx-runtime";
+import { uid } from "uid";
 import { BaseSelectFilter } from "./BaseSelectFilter.js";
 import { FILTER_TYPES } from "../../../../exported-related/index.js";
 import { DATA_TESTID } from "../../../../configs/constants.js";
@@ -10,7 +11,8 @@ const MultiCreatableFilter = ({
   patchHeader,
   reduxHeader,
   filterValue,
-  innerRef
+  innerRef,
+  domIdAffix = uid(4)
 }) => /* @__PURE__ */ jsx(
   BaseSelectFilter,
   {
@@ -24,7 +26,8 @@ const MultiCreatableFilter = ({
     onValueChange,
     patchHeaderFilterButtonAndMenu,
     patchHeader,
-    innerRef
+    innerRef,
+    domIdAffix
   }
 );
 export {

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../../../scripts/build/transpile/react-shim.js", "../../../../../../src/addons/Filters/Components/SelectFilter/MultiCreatableFilter.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React from 'react';\nimport type { DSComboboxT } from '@elliemae/ds-form-combobox';\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}) => (\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  />\n);\n"],
-  "mappings": "AAAA,YAAY,WAAW;ACkBrB;AAfF,SAAS,wBAAwB;AACjC,SAAS,oBAAoB;AAC7B,SAAS,mBAAmB;AAIrB,MAAM,uBAAiG,CAAC;AAAA,EAC7G;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,MACE;AAAA,EAAC;AAAA;AAAA,IACC,WAAS;AAAA,IACT;AAAA,IACA,eAAa,YAAY;AAAA,IACzB,SAAO;AAAA,IACP;AAAA,IACA,aAAa,eAAe,CAAC;AAAA,IAC7B,MAAM,aAAa;AAAA,IACnB;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA;AACF;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "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"],
+  "mappings": "AAAA,YAAY,WAAW;ACoBrB;AAlBF,SAAS,WAAW;AAEpB,SAAS,wBAAwB;AACjC,SAAS,oBAAoB;AAC7B,SAAS,mBAAmB;AAIrB,MAAM,uBAAiG,CAAC;AAAA,EAC7G;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,aAAa,IAAI,CAAC;AACpB,MACE;AAAA,EAAC;AAAA;AAAA,IACC,WAAS;AAAA,IACT;AAAA,IACA,eAAa,YAAY;AAAA,IACzB,SAAO;AAAA,IACP;AAAA,IACA,aAAa,eAAe,CAAC;AAAA,IAC7B,MAAM,aAAa;AAAA,IACnB;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA;AACF;",
   "names": []
 }

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

@@ -1,5 +1,6 @@
 import * as React from "react";
 import { jsx } from "react/jsx-runtime";
+import { uid } from "uid";
 import { BaseSelectFilter } from "./BaseSelectFilter.js";
 import { FILTER_TYPES } from "../../../../exported-related/index.js";
 import { DATA_TESTID } from "../../../../configs/constants.js";
@@ -10,7 +11,8 @@ const MultiSelectFilter = ({
   patchHeader,
   reduxHeader,
   filterValue,
-  innerRef
+  innerRef,
+  domIdAffix = uid(4)
 }) => /* @__PURE__ */ jsx(
   BaseSelectFilter,
   {
@@ -23,7 +25,8 @@ const MultiSelectFilter = ({
     onValueChange,
     patchHeaderFilterButtonAndMenu,
     patchHeader,
-    innerRef
+    innerRef,
+    domIdAffix
   }
 );
 export {

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../../../scripts/build/transpile/react-shim.js", "../../../../../../src/addons/Filters/Components/SelectFilter/MultiSelectFilter.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React from 'react';\nimport type { DSComboboxT } from '@elliemae/ds-form-combobox';\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}) => (\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  />\n);\n"],
-  "mappings": "AAAA,YAAY,WAAW;ACkBrB;AAfF,SAAS,wBAAwB;AACjC,SAAS,oBAAoB;AAC7B,SAAS,mBAAmB;AAIrB,MAAM,oBAA2F,CAAC;AAAA,EACvG;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,MACE;AAAA,EAAC;AAAA;AAAA,IACC;AAAA,IACA,eAAa,YAAY;AAAA,IACzB,SAAO;AAAA,IACP;AAAA,IACA,aAAa,eAAe,CAAC;AAAA,IAC7B,MAAM,aAAa;AAAA,IACnB;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA;AACF;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "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"],
+  "mappings": "AAAA,YAAY,WAAW;ACoBrB;AAlBF,SAAS,WAAW;AAEpB,SAAS,wBAAwB;AACjC,SAAS,oBAAoB;AAC7B,SAAS,mBAAmB;AAIrB,MAAM,oBAA2F,CAAC;AAAA,EACvG;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,aAAa,IAAI,CAAC;AACpB,MACE;AAAA,EAAC;AAAA;AAAA,IACC;AAAA,IACA,eAAa,YAAY;AAAA,IACzB,SAAO;AAAA,IACP;AAAA,IACA,aAAa,eAAe,CAAC;AAAA,IAC7B,MAAM,aAAa;AAAA,IACnB;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA;AACF;",
   "names": []
 }

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

@@ -1,5 +1,6 @@
 import * as React from "react";
 import { jsx } from "react/jsx-runtime";
+import { uid } from "uid";
 import { BaseSelectFilter } from "./BaseSelectFilter.js";
 import { FILTER_TYPES } from "../../../../exported-related/index.js";
 import { DATA_TESTID } from "../../../../configs/constants.js";
@@ -10,7 +11,8 @@ const SingleCreatableFilter = ({
   onValueChange,
   filterValue,
   reduxHeader,
-  innerRef
+  innerRef,
+  domIdAffix = uid(4)
 }) => /* @__PURE__ */ jsx(
   BaseSelectFilter,
   {
@@ -23,7 +25,8 @@ const SingleCreatableFilter = ({
     onValueChange,
     patchHeaderFilterButtonAndMenu,
     patchHeader,
-    innerRef
+    innerRef,
+    domIdAffix
   }
 );
 export {

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../../../scripts/build/transpile/react-shim.js", "../../../../../../src/addons/Filters/Components/SelectFilter/SingleCreatableFilter.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React from 'react';\nimport { BaseSelectFilter } from './BaseSelectFilter.js';\nimport type { DSComboboxT } from '@elliemae/ds-form-combobox';\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}) => (\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  />\n);\n"],
-  "mappings": "AAAA,YAAY,WAAW;ACkBrB;AAjBF,SAAS,wBAAwB;AAGjC,SAAS,oBAAoB;AAC7B,SAAS,mBAAmB;AAIrB,MAAM,wBAAmG,CAAC;AAAA,EAC/G;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,MACE;AAAA,EAAC;AAAA;AAAA,IACC,WAAS;AAAA,IACT;AAAA,IACA,eAAa,YAAY;AAAA,IACzB;AAAA,IACA;AAAA,IACA,MAAM,aAAa;AAAA,IACnB;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA;AACF;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "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"],
+  "mappings": "AAAA,YAAY,WAAW;ACoBrB;AAnBF,SAAS,WAAW;AAEpB,SAAS,wBAAwB;AAEjC,SAAS,oBAAoB;AAC7B,SAAS,mBAAmB;AAIrB,MAAM,wBAAmG,CAAC;AAAA,EAC/G;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,aAAa,IAAI,CAAC;AACpB,MACE;AAAA,EAAC;AAAA;AAAA,IACC,WAAS;AAAA,IACT;AAAA,IACA,eAAa,YAAY;AAAA,IACzB;AAAA,IACA;AAAA,IACA,MAAM,aAAa;AAAA,IACnB;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA;AACF;",
   "names": []
 }

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

@@ -1,6 +1,7 @@
 import * as React from "react";
 import { jsx } from "react/jsx-runtime";
 import { BaseSelectFilter } from "./BaseSelectFilter.js";
+import { uid } from "uid";
 import { FILTER_TYPES } from "../../../../exported-related/index.js";
 import { DATA_TESTID } from "../../../../configs/constants.js";
 const SingleSelectFilter = ({
@@ -10,7 +11,8 @@ const SingleSelectFilter = ({
   onValueChange,
   filterValue,
   reduxHeader,
-  innerRef
+  innerRef,
+  domIdAffix = uid(4)
 }) => /* @__PURE__ */ jsx(
   BaseSelectFilter,
   {
@@ -22,7 +24,8 @@ const SingleSelectFilter = ({
     onValueChange,
     patchHeaderFilterButtonAndMenu,
     patchHeader,
-    innerRef
+    innerRef,
+    domIdAffix
   }
 );
 export {