@elliemae/ds-data-table 3.60.0-next.4 → 3.60.0-next.40

package/dist/esm/exported-related/Filters/applyOutOfTheBoxFilters.js

@@ -23,8 +23,9 @@ const applyOutOfTheBoxFilters = (data, filters) => {
   let filteredData = data;
   filters.forEach((filter) => {
     const { type } = filter;
-    if (isFilterTypeOutOfTheBox(type)) {
-      const outOfTheBoxfilterFromMapper = filterMapper[type];
+    const fromV2toV1Type = type.replace("-v2", "");
+    if (isFilterTypeOutOfTheBox(fromV2toV1Type)) {
+      const outOfTheBoxfilterFromMapper = filterMapper[fromV2toV1Type];
       const outOfTheBoxFilterValue = filter.value;
       filteredData = outOfTheBoxfilterFromMapper(filteredData, filter.id, outOfTheBoxFilterValue);
     }

package/dist/esm/exported-related/Filters/applyOutOfTheBoxFilters.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/exported-related/Filters/applyOutOfTheBoxFilters.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { singleSelectFilterFn } from './singleSelectFilterFn.js';\nimport { multiSelectFilterFn } from './multiSelectFilterFn.js';\nimport { singleDateFilterFn } from './singleDateFilterFn.js';\nimport { dateRangeFilterFn } from './dateRangeFilterFn.js';\nimport { dateSwitcherFilterFn } from './dateSwitcherFilterFn.js';\nimport { numberRangeFilterFn } from './numberRangeFilterFn.js';\nimport { currencyRangeFilterFn } from './currencyRangeFilterFn.js';\nimport { freeTextSearchFilterFn } from './freeTextSearchFilterFn.js';\nimport { FILTER_TYPES } from '../FilterTypes.js';\nimport type { DSDataTableT } from '../../react-desc-prop-types.js';\n\nconst filterMapper = {\n  [FILTER_TYPES.SELECT]: singleSelectFilterFn,\n  [FILTER_TYPES.MULTI_SELECT]: multiSelectFilterFn,\n  [FILTER_TYPES.SINGLE_DATE]: singleDateFilterFn,\n  [FILTER_TYPES.DATE_RANGE]: dateRangeFilterFn,\n  [FILTER_TYPES.DATE_SWITCHER]: dateSwitcherFilterFn,\n  [FILTER_TYPES.NUMBER_RANGE]: numberRangeFilterFn,\n  [FILTER_TYPES.CURRENCY_RANGE]: currencyRangeFilterFn,\n  [FILTER_TYPES.FREE_TEXT_SEARCH]: freeTextSearchFilterFn,\n} as const;\n\ntype OutOfTheBoxFilterType = keyof typeof filterMapper;\n\nconst isFilterTypeOutOfTheBox = (type: string): type is OutOfTheBoxFilterType =>\n  Object.keys(filterMapper).includes(type);\n\nexport const applyOutOfTheBoxFilters = (\n  data: DSDataTableT.Row[],\n  filters: DSDataTableT.Filter[],\n): DSDataTableT.Row[] => {\n  let filteredData = data;\n\n  filters.forEach((filter) => {\n    const { type } = filter;\n    if (isFilterTypeOutOfTheBox(type)) {\n      // all the out of the box filters have internal validation for the filter value\n      // so we can safely call the filter function with the filter value as unknown, and let the filter function validate it\n      const outOfTheBoxfilterFromMapper = filterMapper[type] as DSDataTableT.FilterFn<unknown>;\n      const outOfTheBoxFilterValue = filter.value;\n      filteredData = outOfTheBoxfilterFromMapper(filteredData, filter.id, outOfTheBoxFilterValue);\n    }\n  });\n\n  return filteredData;\n};\n"],
-  "mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,4BAA4B;AACrC,SAAS,2BAA2B;AACpC,SAAS,0BAA0B;AACnC,SAAS,yBAAyB;AAClC,SAAS,4BAA4B;AACrC,SAAS,2BAA2B;AACpC,SAAS,6BAA6B;AACtC,SAAS,8BAA8B;AACvC,SAAS,oBAAoB;AAG7B,MAAM,eAAe;AAAA,EACnB,CAAC,aAAa,MAAM,GAAG;AAAA,EACvB,CAAC,aAAa,YAAY,GAAG;AAAA,EAC7B,CAAC,aAAa,WAAW,GAAG;AAAA,EAC5B,CAAC,aAAa,UAAU,GAAG;AAAA,EAC3B,CAAC,aAAa,aAAa,GAAG;AAAA,EAC9B,CAAC,aAAa,YAAY,GAAG;AAAA,EAC7B,CAAC,aAAa,cAAc,GAAG;AAAA,EAC/B,CAAC,aAAa,gBAAgB,GAAG;AACnC;AAIA,MAAM,0BAA0B,CAAC,SAC/B,OAAO,KAAK,YAAY,EAAE,SAAS,IAAI;AAElC,MAAM,0BAA0B,CACrC,MACA,YACuB;AACvB,MAAI,eAAe;AAEnB,UAAQ,QAAQ,CAAC,WAAW;AAC1B,UAAM,EAAE,KAAK,IAAI;AACjB,QAAI,wBAAwB,IAAI,GAAG;AAGjC,YAAM,8BAA8B,aAAa,IAAI;AACrD,YAAM,yBAAyB,OAAO;AACtC,qBAAe,4BAA4B,cAAc,OAAO,IAAI,sBAAsB;AAAA,IAC5F;AAAA,EACF,CAAC;AAED,SAAO;AACT;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { singleSelectFilterFn } from './singleSelectFilterFn.js';\nimport { multiSelectFilterFn } from './multiSelectFilterFn.js';\nimport { singleDateFilterFn } from './singleDateFilterFn.js';\nimport { dateRangeFilterFn } from './dateRangeFilterFn.js';\nimport { dateSwitcherFilterFn } from './dateSwitcherFilterFn.js';\nimport { numberRangeFilterFn } from './numberRangeFilterFn.js';\nimport { currencyRangeFilterFn } from './currencyRangeFilterFn.js';\nimport { freeTextSearchFilterFn } from './freeTextSearchFilterFn.js';\nimport { FILTER_TYPES } from '../FilterTypes.js';\nimport type { DSDataTableT } from '../../react-desc-prop-types.js';\n\nconst filterMapper = {\n  [FILTER_TYPES.SELECT]: singleSelectFilterFn,\n  [FILTER_TYPES.MULTI_SELECT]: multiSelectFilterFn,\n  [FILTER_TYPES.SINGLE_DATE]: singleDateFilterFn,\n  [FILTER_TYPES.DATE_RANGE]: dateRangeFilterFn,\n  [FILTER_TYPES.DATE_SWITCHER]: dateSwitcherFilterFn,\n  [FILTER_TYPES.NUMBER_RANGE]: numberRangeFilterFn,\n  [FILTER_TYPES.CURRENCY_RANGE]: currencyRangeFilterFn,\n  [FILTER_TYPES.FREE_TEXT_SEARCH]: freeTextSearchFilterFn,\n} as const;\n\ntype OutOfTheBoxFilterType = keyof typeof filterMapper;\n\nconst isFilterTypeOutOfTheBox = (type: string): type is OutOfTheBoxFilterType =>\n  Object.keys(filterMapper).includes(type);\n\nexport const applyOutOfTheBoxFilters = (\n  data: DSDataTableT.Row[],\n  filters: DSDataTableT.Filter[],\n): DSDataTableT.Row[] => {\n  let filteredData = data;\n\n  filters.forEach((filter) => {\n    const { type } = filter;\n    const fromV2toV1Type = type.replace('-v2', '');\n    if (isFilterTypeOutOfTheBox(fromV2toV1Type)) {\n      // all the out of the box filters have internal validation for the filter value\n      // so we can safely call the filter function with the filter value as unknown, and let the filter function validate it\n      const outOfTheBoxfilterFromMapper = filterMapper[fromV2toV1Type] as DSDataTableT.FilterFn<unknown>;\n      const outOfTheBoxFilterValue = filter.value;\n      filteredData = outOfTheBoxfilterFromMapper(filteredData, filter.id, outOfTheBoxFilterValue);\n    }\n  });\n\n  return filteredData;\n};\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,4BAA4B;AACrC,SAAS,2BAA2B;AACpC,SAAS,0BAA0B;AACnC,SAAS,yBAAyB;AAClC,SAAS,4BAA4B;AACrC,SAAS,2BAA2B;AACpC,SAAS,6BAA6B;AACtC,SAAS,8BAA8B;AACvC,SAAS,oBAAoB;AAG7B,MAAM,eAAe;AAAA,EACnB,CAAC,aAAa,MAAM,GAAG;AAAA,EACvB,CAAC,aAAa,YAAY,GAAG;AAAA,EAC7B,CAAC,aAAa,WAAW,GAAG;AAAA,EAC5B,CAAC,aAAa,UAAU,GAAG;AAAA,EAC3B,CAAC,aAAa,aAAa,GAAG;AAAA,EAC9B,CAAC,aAAa,YAAY,GAAG;AAAA,EAC7B,CAAC,aAAa,cAAc,GAAG;AAAA,EAC/B,CAAC,aAAa,gBAAgB,GAAG;AACnC;AAIA,MAAM,0BAA0B,CAAC,SAC/B,OAAO,KAAK,YAAY,EAAE,SAAS,IAAI;AAElC,MAAM,0BAA0B,CACrC,MACA,YACuB;AACvB,MAAI,eAAe;AAEnB,UAAQ,QAAQ,CAAC,WAAW;AAC1B,UAAM,EAAE,KAAK,IAAI;AACjB,UAAM,iBAAiB,KAAK,QAAQ,OAAO,EAAE;AAC7C,QAAI,wBAAwB,cAAc,GAAG;AAG3C,YAAM,8BAA8B,aAAa,cAAc;AAC/D,YAAM,yBAAyB,OAAO;AACtC,qBAAe,4BAA4B,cAAc,OAAO,IAAI,sBAAsB;AAAA,IAC5F;AAAA,EACF,CAAC;AAED,SAAO;AACT;",
   "names": []
 }

package/dist/esm/exported-related/index.js

@@ -14,7 +14,7 @@ import {
   currencyRangeFilterFn,
   dateRangeFilterFn
 } from "./Filters/index.js";
-import { FilterBarDropdownMenu, FilterMenuButton } from "./FilterBar/index.js";
+import { FilterBarDropdownMenu, FilterMenuButton, PillsFromDataTableFilters } from "./FilterBar/index.js";
 import { SkeletonCell, SkeletonHeaderCell } from "./Skeleton/index.js";
 export {
   EditableCell,
@@ -22,6 +22,7 @@ export {
   FilterBarDropdownMenu,
   FilterMenuButton,
   FilterPopover,
+  PillsFromDataTableFilters,
   ROW_VARIANTS,
   ROW_VARIANT_COMPACT_KEY,
   ROW_VARIANT_KEY,

package/dist/esm/exported-related/index.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../src/exported-related/index.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "export { FilterPopover } from './FilterPopover/index.js';\nexport { EditableCell } from './EditableCell.js';\nexport { Toolbar } from './Toolbar/index.js';\nexport { groupBy } from './groupBy.js';\nexport { FILTER_TYPES } from './FilterTypes.js';\nexport { ROW_VARIANTS, ROW_VARIANT_KEY, ROW_VARIANT_COMPACT_KEY } from './RowVariants.js';\nexport {\n  applyOutOfTheBoxFilters,\n  singleDateFilterFn,\n  singleSelectFilterFn,\n  multiSelectFilterFn,\n  numberRangeFilterFn,\n  currencyRangeFilterFn,\n  dateRangeFilterFn,\n} from './Filters/index.js';\nexport { FilterBarDropdownMenu, FilterMenuButton } from './FilterBar/index.js';\nexport { SkeletonCell, SkeletonHeaderCell } from './Skeleton/index.js';\n"],
-  "mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,qBAAqB;AAC9B,SAAS,oBAAoB;AAC7B,SAAS,eAAe;AACxB,SAAS,eAAe;AACxB,SAAS,oBAAoB;AAC7B,SAAS,cAAc,iBAAiB,+BAA+B;AACvE;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AACP,SAAS,uBAAuB,wBAAwB;AACxD,SAAS,cAAc,0BAA0B;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "export { FilterPopover } from './FilterPopover/index.js';\nexport { EditableCell } from './EditableCell.js';\nexport { Toolbar } from './Toolbar/index.js';\nexport { groupBy } from './groupBy.js';\nexport { FILTER_TYPES } from './FilterTypes.js';\nexport { ROW_VARIANTS, ROW_VARIANT_KEY, ROW_VARIANT_COMPACT_KEY } from './RowVariants.js';\nexport {\n  applyOutOfTheBoxFilters,\n  singleDateFilterFn,\n  singleSelectFilterFn,\n  multiSelectFilterFn,\n  numberRangeFilterFn,\n  currencyRangeFilterFn,\n  dateRangeFilterFn,\n} from './Filters/index.js';\nexport { FilterBarDropdownMenu, FilterMenuButton, PillsFromDataTableFilters } from './FilterBar/index.js';\nexport { SkeletonCell, SkeletonHeaderCell } from './Skeleton/index.js';\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,qBAAqB;AAC9B,SAAS,oBAAoB;AAC7B,SAAS,eAAe;AACxB,SAAS,eAAe;AACxB,SAAS,oBAAoB;AAC7B,SAAS,cAAc,iBAAiB,+BAA+B;AACvE;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AACP,SAAS,uBAAuB,kBAAkB,iCAAiC;AACnF,SAAS,cAAc,0BAA0B;",
   "names": []
 }

package/dist/esm/index.js

@@ -18,6 +18,7 @@ import {
   dateRangeFilterFn,
   FilterBarDropdownMenu,
   FilterMenuButton,
+  PillsFromDataTableFilters,
   SkeletonCell,
   SkeletonHeaderCell
 } from "./exported-related/index.js";
@@ -51,6 +52,7 @@ export {
   FilterMenuButton,
   FilterPopover,
   INTERNAL_COLUMNS,
+  PillsFromDataTableFilters,
   ROW_VARIANTS,
   ROW_VARIANT_COMPACT_KEY,
   ROW_VARIANT_KEY,

package/dist/esm/index.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../src/index.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "export { DataTable, DataTableWithSchema } from './DataTable.js';\n\nexport {\n  FilterPopover,\n  EditableCell,\n  Toolbar,\n  groupBy,\n  FILTER_TYPES,\n  ROW_VARIANTS,\n  ROW_VARIANT_KEY,\n  ROW_VARIANT_COMPACT_KEY,\n  applyOutOfTheBoxFilters,\n  singleDateFilterFn,\n  singleSelectFilterFn,\n  multiSelectFilterFn,\n  numberRangeFilterFn,\n  currencyRangeFilterFn,\n  dateRangeFilterFn,\n  FilterBarDropdownMenu,\n  FilterMenuButton,\n  SkeletonCell,\n  SkeletonHeaderCell,\n} from './exported-related/index.js';\n\nexport {\n  actionColumn,\n  expandRowColumn,\n  multiSelectColumn,\n  singleSelectColumn,\n  dragHandleColumn,\n  INTERNAL_COLUMNS,\n} from './addons/Columns/index.js';\n\nexport type { DSDataTableT } from './react-desc-prop-types.js';\n\nexport { useWholeStore } from './configs/useStore/useStore.js';\n\nexport {\n  DATA_TABLE_DATA_TESTID,\n  DATA_TABLE_SLOTS,\n  DSDataTableDataTestIds,\n  DSDataTableName,\n  DSDataTableSlots,\n} from './constants/index.js';\n"],
-  "mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,WAAW,2BAA2B;AAE/C;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AAEP;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AAIP,SAAS,qBAAqB;AAE9B;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "export { DataTable, DataTableWithSchema } from './DataTable.js';\n\nexport {\n  FilterPopover,\n  EditableCell,\n  Toolbar,\n  groupBy,\n  FILTER_TYPES,\n  ROW_VARIANTS,\n  ROW_VARIANT_KEY,\n  ROW_VARIANT_COMPACT_KEY,\n  applyOutOfTheBoxFilters,\n  singleDateFilterFn,\n  singleSelectFilterFn,\n  multiSelectFilterFn,\n  numberRangeFilterFn,\n  currencyRangeFilterFn,\n  dateRangeFilterFn,\n  FilterBarDropdownMenu,\n  FilterMenuButton,\n  PillsFromDataTableFilters,\n  SkeletonCell,\n  SkeletonHeaderCell,\n} from './exported-related/index.js';\n\nexport {\n  actionColumn,\n  expandRowColumn,\n  multiSelectColumn,\n  singleSelectColumn,\n  dragHandleColumn,\n  INTERNAL_COLUMNS,\n} from './addons/Columns/index.js';\n\nexport type { DSDataTableT } from './react-desc-prop-types.js';\n\nexport { useWholeStore } from './configs/useStore/useStore.js';\n\nexport {\n  DATA_TABLE_DATA_TESTID,\n  DATA_TABLE_SLOTS,\n  DSDataTableDataTestIds,\n  DSDataTableName,\n  DSDataTableSlots,\n} from './constants/index.js';\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,WAAW,2BAA2B;AAE/C;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AAEP;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AAIP,SAAS,qBAAqB;AAE9B;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;",
   "names": []
 }

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

@@ -2,7 +2,7 @@ import * as React from "react";
 import { jsx } from "react/jsx-runtime";
 import { DSButtonV2 } from "@elliemae/ds-button-v2";
 import { MoreOptionsVert } from "@elliemae/ds-icons";
-import { DSDropdownMenu } from "@elliemae/ds-dropdownmenu";
+import { DSDropdownMenu } from "@elliemae/ds-legacy-dropdownmenu";
 import { DATA_TESTID } from "../../configs/index.js";
 const DeprecatedDropdown = ({
   finalIsOpen,

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/parts/FilterBar/DeprecatedDropdown.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "// eslint-disable-next-line @typescript-eslint/ban-ts-comment\n// @ts-nocheck This is using the deprecated dropdown menu\nimport React from 'react';\nimport { DSButtonV2 } from '@elliemae/ds-button-v2';\nimport { MoreOptionsVert } from '@elliemae/ds-icons';\nimport { DSDropdownMenu } from '@elliemae/ds-dropdownmenu';\nimport { DATA_TESTID } from '../../configs/index.js';\nimport type { DSDataTableT } from '../../react-desc-prop-types.js';\n\ninterface DeprecatedDropdownProps {\n  finalIsOpen: boolean;\n  onFilterBarClose: () => void;\n  onFilterBarOnClickOutside: () => void;\n  removeAllFilters: () => void;\n  filterBarProps: DSDataTableT.Props['filterBarProps'];\n  dropdownMenuRef: React.MutableRefObject<HTMLButtonElement | null>;\n  onTriggerClick: () => void;\n}\n\nexport const DeprecatedDropdown: React.ComponentType<DeprecatedDropdownProps> = ({\n  finalIsOpen,\n  onFilterBarClose,\n  onFilterBarOnClickOutside,\n  removeAllFilters,\n  filterBarProps,\n  dropdownMenuRef,\n  onTriggerClick,\n}) => (\n  <DSDropdownMenu\n    preventOverflow=\"scrollParent\"\n    isOpen={finalIsOpen}\n    onClose={onFilterBarClose}\n    onClickOutsideMenu={onFilterBarOnClickOutside}\n    options={[\n      {\n        id: '__internal__option__clear__filters',\n        label: 'Clear Filters',\n        onClick: removeAllFilters,\n        onKeyDown: (e: React.KeyboardEvent) => {\n          if (['Enter', 'Space'].includes(e.code)) removeAllFilters();\n        },\n      },\n      ...(filterBarProps?.extraOptions || []).map((option) => ({\n        ...option,\n        onKeyDown: (e: React.KeyboardEvent) => {\n          if (['Enter', 'Space'].includes(e.code)) option?.onClick?.(e);\n        },\n      })),\n    ]}\n    triggerComponent={\n      <DSButtonV2\n        data-testid={DATA_TESTID.DATA_TABLE_FILTER_BAR_DD_MENU_BUTTON}\n        buttonType=\"icon\"\n        innerRef={dropdownMenuRef}\n        onClick={onTriggerClick}\n        aria-label=\"Filter bar addon\"\n        style={{ marginLeft: 'auto' }}\n      >\n        <MoreOptionsVert />\n      </DSButtonV2>\n    }\n  />\n);\n"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "// eslint-disable-next-line @typescript-eslint/ban-ts-comment\n// @ts-nocheck This is using the deprecated dropdown menu\nimport React from 'react';\nimport { DSButtonV2 } from '@elliemae/ds-button-v2';\nimport { MoreOptionsVert } from '@elliemae/ds-icons';\nimport { DSDropdownMenu } from '@elliemae/ds-legacy-dropdownmenu';\nimport { DATA_TESTID } from '../../configs/index.js';\nimport type { DSDataTableT } from '../../react-desc-prop-types.js';\n\ninterface DeprecatedDropdownProps {\n  finalIsOpen: boolean;\n  onFilterBarClose: () => void;\n  onFilterBarOnClickOutside: () => void;\n  removeAllFilters: () => void;\n  filterBarProps: DSDataTableT.Props['filterBarProps'];\n  dropdownMenuRef: React.MutableRefObject<HTMLButtonElement | null>;\n  onTriggerClick: () => void;\n}\n\nexport const DeprecatedDropdown: React.ComponentType<DeprecatedDropdownProps> = ({\n  finalIsOpen,\n  onFilterBarClose,\n  onFilterBarOnClickOutside,\n  removeAllFilters,\n  filterBarProps,\n  dropdownMenuRef,\n  onTriggerClick,\n}) => (\n  <DSDropdownMenu\n    preventOverflow=\"scrollParent\"\n    isOpen={finalIsOpen}\n    onClose={onFilterBarClose}\n    onClickOutsideMenu={onFilterBarOnClickOutside}\n    options={[\n      {\n        id: '__internal__option__clear__filters',\n        label: 'Clear Filters',\n        onClick: removeAllFilters,\n        onKeyDown: (e: React.KeyboardEvent) => {\n          if (['Enter', 'Space'].includes(e.code)) removeAllFilters();\n        },\n      },\n      ...(filterBarProps?.extraOptions || []).map((option) => ({\n        ...option,\n        onKeyDown: (e: React.KeyboardEvent) => {\n          if (['Enter', 'Space'].includes(e.code)) option?.onClick?.(e);\n        },\n      })),\n    ]}\n    triggerComponent={\n      <DSButtonV2\n        data-testid={DATA_TESTID.DATA_TABLE_FILTER_BAR_DD_MENU_BUTTON}\n        buttonType=\"icon\"\n        innerRef={dropdownMenuRef}\n        onClick={onTriggerClick}\n        aria-label=\"Filter bar addon\"\n        style={{ marginLeft: 'auto' }}\n      >\n        <MoreOptionsVert />\n      </DSButtonV2>\n    }\n  />\n);\n"],
   "mappings": "AAAA,YAAY,WAAW;AC0Df;AAvDR,SAAS,kBAAkB;AAC3B,SAAS,uBAAuB;AAChC,SAAS,sBAAsB;AAC/B,SAAS,mBAAmB;AAarB,MAAM,qBAAmE,CAAC;AAAA,EAC/E;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,MACE;AAAA,EAAC;AAAA;AAAA,IACC,iBAAgB;AAAA,IAChB,QAAQ;AAAA,IACR,SAAS;AAAA,IACT,oBAAoB;AAAA,IACpB,SAAS;AAAA,MACP;AAAA,QACE,IAAI;AAAA,QACJ,OAAO;AAAA,QACP,SAAS;AAAA,QACT,WAAW,CAAC,MAA2B;AACrC,cAAI,CAAC,SAAS,OAAO,EAAE,SAAS,EAAE,IAAI,EAAG,kBAAiB;AAAA,QAC5D;AAAA,MACF;AAAA,MACA,IAAI,gBAAgB,gBAAgB,CAAC,GAAG,IAAI,CAAC,YAAY;AAAA,QACvD,GAAG;AAAA,QACH,WAAW,CAAC,MAA2B;AACrC,cAAI,CAAC,SAAS,OAAO,EAAE,SAAS,EAAE,IAAI,EAAG,SAAQ,UAAU,CAAC;AAAA,QAC9D;AAAA,MACF,EAAE;AAAA,IACJ;AAAA,IACA,kBACE;AAAA,MAAC;AAAA;AAAA,QACC,eAAa,YAAY;AAAA,QACzB,YAAW;AAAA,QACX,UAAU;AAAA,QACV,SAAS;AAAA,QACT,cAAW;AAAA,QACX,OAAO,EAAE,YAAY,OAAO;AAAA,QAE5B,8BAAC,mBAAgB;AAAA;AAAA,IACnB;AAAA;AAEJ;",
   "names": []
 }

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

@@ -16,13 +16,21 @@ import { DeprecatedDropdown } from "./DeprecatedDropdown.js";
 import { usePropsStore } from "../../configs/useStore/createInternalAndPropsContext.js";
 const pillRenderMapper = {
   [FILTER_TYPES.SELECT]: SelectPill,
+  [FILTER_TYPES.SELECT_V2]: SelectPill,
   [FILTER_TYPES.MULTI_SELECT]: MultiSelectPill,
+  [FILTER_TYPES.MULTI_SELECT_V2]: MultiSelectPill,
   [FILTER_TYPES.SINGLE_DATE]: SingleDatePill,
+  [FILTER_TYPES.SINGLE_DATE_V2]: SingleDatePill,
   [FILTER_TYPES.DATE_RANGE]: DateRangePill,
+  [FILTER_TYPES.DATE_RANGE_V2]: DateRangePill,
   [FILTER_TYPES.DATE_SWITCHER]: DateSwitcherPill,
+  [FILTER_TYPES.DATE_SWITCHER_V2]: DateSwitcherPill,
   [FILTER_TYPES.NUMBER_RANGE]: NumberRangePill,
+  [FILTER_TYPES.NUMBER_RANGE_V2]: NumberRangePill,
   [FILTER_TYPES.CURRENCY_RANGE]: NumberRangePill,
-  [FILTER_TYPES.FREE_TEXT_SEARCH]: FreeTextSearchPillPill
+  [FILTER_TYPES.CURRENCY_RANGE_V2]: NumberRangePill,
+  [FILTER_TYPES.FREE_TEXT_SEARCH]: FreeTextSearchPillPill,
+  [FILTER_TYPES.FREE_TEXT_SEARCH_V2]: FreeTextSearchPillPill
 };
 const FiltersBar = () => {
   const width = usePropsStore((state) => state.width);

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/parts/FilterBar/FiltersBar.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { useCallback, useMemo, useRef, useState } from 'react';\nimport { type TypescriptHelpersT } from '@elliemae/ds-typescript-helpers';\nimport { FILTER_TYPES } from '../../exported-related/index.js';\nimport {\n  SelectPill,\n  MultiSelectPill,\n  SingleDatePill,\n  DateRangePill,\n  NumberRangePill,\n  DateSwitcherPill,\n  FreeTextSearchPillPill,\n} from './components/index.js';\nimport { StyledWrapper } from './styled.js';\nimport { DeprecatedDropdown } from './DeprecatedDropdown.js';\nimport type { DSDataTableT } from '../../react-desc-prop-types.js';\nimport { usePropsStore } from '../../configs/useStore/createInternalAndPropsContext.js';\n\nconst pillRenderMapper = {\n  [FILTER_TYPES.SELECT]: SelectPill,\n  [FILTER_TYPES.MULTI_SELECT]: MultiSelectPill,\n  [FILTER_TYPES.SINGLE_DATE]: SingleDatePill,\n  [FILTER_TYPES.DATE_RANGE]: DateRangePill,\n  [FILTER_TYPES.DATE_SWITCHER]: DateSwitcherPill,\n  [FILTER_TYPES.NUMBER_RANGE]: NumberRangePill,\n  [FILTER_TYPES.CURRENCY_RANGE]: NumberRangePill,\n  [FILTER_TYPES.FREE_TEXT_SEARCH]: FreeTextSearchPillPill,\n} as const;\n\nexport const FiltersBar: React.ComponentType = () => {\n  const width = usePropsStore((state) => state.width);\n  const filterBarProps = usePropsStore((state) => state.filterBarProps);\n  const onFiltersChange = usePropsStore((state) => state.onFiltersChange);\n  const filters = usePropsStore((state) => state.filters);\n  const visibleColumns = usePropsStore((state) => state.visibleColumns);\n  const getOwnerProps = usePropsStore((store) => store.get);\n\n  const [isOpen, setIsOpen] = useState(false);\n\n  const pillGroupRefs = useMemo(() => {\n    const refs: React.RefObject<HTMLElement>[] = [];\n    for (let i = 0; i < filters.length; i += 1) refs.push(React.createRef());\n    return refs;\n  }, [filters.length]);\n\n  const dropdownMenuRef = useRef<HTMLButtonElement | null>(null);\n\n  const {\n    filterBarAddonRenderer: FilterBarAddonRenderer,\n    onClearAllFiltersClick,\n    onDropdownMenuToggle,\n    onDropdownMenuClickOutside,\n    onDropdownMenuTriggerClick,\n    isDropdownMenuOpen,\n  } = filterBarProps || {};\n\n  const removeAllFilters = useCallback(() => {\n    onFiltersChange([]);\n    onClearAllFiltersClick?.();\n    setIsOpen(false);\n  }, [onFiltersChange, onClearAllFiltersClick]);\n\n  const onFilterBarClose = useCallback(() => {\n    onDropdownMenuToggle?.(false, 'onClose');\n    dropdownMenuRef.current?.focus();\n    setIsOpen(false);\n  }, [onDropdownMenuToggle]);\n\n  const onFilterBarOpen = useCallback(() => {\n    onDropdownMenuToggle?.(true, 'onOpen');\n    setIsOpen(true);\n  }, [onDropdownMenuToggle]);\n\n  const onFilterBarOnClickOutside = useCallback(() => {\n    onDropdownMenuToggle?.(false, 'onClickOutside');\n    onDropdownMenuClickOutside?.();\n    setIsOpen(false);\n  }, [onDropdownMenuClickOutside, onDropdownMenuToggle]);\n\n  const onTriggerClick = useCallback(() => {\n    onDropdownMenuTriggerClick?.();\n    onFilterBarOpen();\n  }, [onDropdownMenuTriggerClick, onFilterBarOpen]);\n\n  const finalIsOpen = useMemo(() => {\n    if (typeof isDropdownMenuOpen === 'boolean') return isDropdownMenuOpen;\n    return isOpen;\n  }, [isDropdownMenuOpen, isOpen]);\n\n  return (\n    <StyledWrapper\n      width={width}\n      aria-live=\"polite\"\n      aria-relevant=\"additions removals\"\n      gutter=\"xs\"\n      getOwnerProps={getOwnerProps}\n    >\n      {filters.map(({ id: column, type, value }, index) => {\n        const columnHeader = visibleColumns.find((col) => col.accessor === column)?.Header;\n        let Component:\n          | TypescriptHelpersT.ObjectValues<typeof pillRenderMapper>\n          | React.ComponentType<DSDataTableT.FilterPillProps<unknown>> = () => null;\n\n        const filterType = type;\n        if (filterType in pillRenderMapper) {\n          Component = pillRenderMapper[filterType as keyof typeof pillRenderMapper];\n        } else if (filterBarProps?.customPillRenderer) {\n          Component = filterBarProps.customPillRenderer;\n        }\n        return (\n          <Component\n            key={column}\n            columnHeader={typeof columnHeader === 'string' ? columnHeader : column}\n            column={column}\n            // eslint-disable-next-line @typescript-eslint/no-explicit-any, @typescript-eslint/no-unsafe-assignment\n            value={value as any}\n            filters={filters}\n            onFiltersChange={onFiltersChange}\n            prevRef={pillGroupRefs[index - 1]}\n            innerRef={pillGroupRefs[index]}\n            nextRef={pillGroupRefs[index + 1] ?? dropdownMenuRef}\n          />\n        );\n      })}\n      {FilterBarAddonRenderer ? (\n        <FilterBarAddonRenderer innerRef={dropdownMenuRef} />\n      ) : (\n        <DeprecatedDropdown\n          finalIsOpen={finalIsOpen}\n          onFilterBarClose={onFilterBarClose}\n          onFilterBarOnClickOutside={onFilterBarOnClickOutside}\n          removeAllFilters={removeAllFilters}\n          filterBarProps={filterBarProps}\n          dropdownMenuRef={dropdownMenuRef}\n          onTriggerClick={onTriggerClick}\n        />\n      )}\n    </StyledWrapper>\n  );\n};\n"],
-  "mappings": "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",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { useCallback, useMemo, useRef, useState } from 'react';\nimport { type TypescriptHelpersT } from '@elliemae/ds-typescript-helpers';\nimport { FILTER_TYPES } from '../../exported-related/index.js';\nimport {\n  SelectPill,\n  MultiSelectPill,\n  SingleDatePill,\n  DateRangePill,\n  NumberRangePill,\n  DateSwitcherPill,\n  FreeTextSearchPillPill,\n} from './components/index.js';\nimport { StyledWrapper } from './styled.js';\nimport { DeprecatedDropdown } from './DeprecatedDropdown.js';\nimport type { DSDataTableT } from '../../react-desc-prop-types.js';\nimport { usePropsStore } from '../../configs/useStore/createInternalAndPropsContext.js';\n\nconst pillRenderMapper = {\n  [FILTER_TYPES.SELECT]: SelectPill,\n  [FILTER_TYPES.SELECT_V2]: SelectPill,\n  [FILTER_TYPES.MULTI_SELECT]: MultiSelectPill,\n  [FILTER_TYPES.MULTI_SELECT_V2]: MultiSelectPill,\n  [FILTER_TYPES.SINGLE_DATE]: SingleDatePill,\n  [FILTER_TYPES.SINGLE_DATE_V2]: SingleDatePill,\n  [FILTER_TYPES.DATE_RANGE]: DateRangePill,\n  [FILTER_TYPES.DATE_RANGE_V2]: DateRangePill,\n  [FILTER_TYPES.DATE_SWITCHER]: DateSwitcherPill,\n  [FILTER_TYPES.DATE_SWITCHER_V2]: DateSwitcherPill,\n  [FILTER_TYPES.NUMBER_RANGE]: NumberRangePill,\n  [FILTER_TYPES.NUMBER_RANGE_V2]: NumberRangePill,\n  [FILTER_TYPES.CURRENCY_RANGE]: NumberRangePill,\n  [FILTER_TYPES.CURRENCY_RANGE_V2]: NumberRangePill,\n  [FILTER_TYPES.FREE_TEXT_SEARCH]: FreeTextSearchPillPill,\n  [FILTER_TYPES.FREE_TEXT_SEARCH_V2]: FreeTextSearchPillPill,\n} as const;\n\nexport const FiltersBar: React.ComponentType = () => {\n  const width = usePropsStore((state) => state.width);\n  const filterBarProps = usePropsStore((state) => state.filterBarProps);\n  const onFiltersChange = usePropsStore((state) => state.onFiltersChange);\n  const filters = usePropsStore((state) => state.filters);\n  const visibleColumns = usePropsStore((state) => state.visibleColumns);\n  const getOwnerProps = usePropsStore((store) => store.get);\n\n  const [isOpen, setIsOpen] = useState(false);\n\n  const pillGroupRefs = useMemo(() => {\n    const refs: React.RefObject<HTMLElement>[] = [];\n    for (let i = 0; i < filters.length; i += 1) refs.push(React.createRef());\n    return refs;\n  }, [filters.length]);\n\n  const dropdownMenuRef = useRef<HTMLButtonElement | null>(null);\n\n  const {\n    filterBarAddonRenderer: FilterBarAddonRenderer,\n    onClearAllFiltersClick,\n    onDropdownMenuToggle,\n    onDropdownMenuClickOutside,\n    onDropdownMenuTriggerClick,\n    isDropdownMenuOpen,\n  } = filterBarProps || {};\n\n  const removeAllFilters = useCallback(() => {\n    onFiltersChange([]);\n    onClearAllFiltersClick?.();\n    setIsOpen(false);\n  }, [onFiltersChange, onClearAllFiltersClick]);\n\n  const onFilterBarClose = useCallback(() => {\n    onDropdownMenuToggle?.(false, 'onClose');\n    dropdownMenuRef.current?.focus();\n    setIsOpen(false);\n  }, [onDropdownMenuToggle]);\n\n  const onFilterBarOpen = useCallback(() => {\n    onDropdownMenuToggle?.(true, 'onOpen');\n    setIsOpen(true);\n  }, [onDropdownMenuToggle]);\n\n  const onFilterBarOnClickOutside = useCallback(() => {\n    onDropdownMenuToggle?.(false, 'onClickOutside');\n    onDropdownMenuClickOutside?.();\n    setIsOpen(false);\n  }, [onDropdownMenuClickOutside, onDropdownMenuToggle]);\n\n  const onTriggerClick = useCallback(() => {\n    onDropdownMenuTriggerClick?.();\n    onFilterBarOpen();\n  }, [onDropdownMenuTriggerClick, onFilterBarOpen]);\n\n  const finalIsOpen = useMemo(() => {\n    if (typeof isDropdownMenuOpen === 'boolean') return isDropdownMenuOpen;\n    return isOpen;\n  }, [isDropdownMenuOpen, isOpen]);\n\n  return (\n    <StyledWrapper\n      width={width}\n      aria-live=\"polite\"\n      aria-relevant=\"additions removals\"\n      gutter=\"xs\"\n      getOwnerProps={getOwnerProps}\n    >\n      {filters.map(({ id: column, type, value }, index) => {\n        const columnHeader = visibleColumns.find((col) => col.accessor === column)?.Header;\n        let Component:\n          | TypescriptHelpersT.ObjectValues<typeof pillRenderMapper>\n          | React.ComponentType<DSDataTableT.FilterPillProps<unknown>> = () => null;\n\n        const filterType = type;\n        if (filterType in pillRenderMapper) {\n          Component = pillRenderMapper[filterType as keyof typeof pillRenderMapper];\n        } else if (filterBarProps?.customPillRenderer) {\n          Component = filterBarProps.customPillRenderer;\n        }\n        return (\n          <Component\n            key={column}\n            columnHeader={typeof columnHeader === 'string' ? columnHeader : column}\n            column={column}\n            // eslint-disable-next-line @typescript-eslint/no-explicit-any, @typescript-eslint/no-unsafe-assignment\n            value={value as any}\n            filters={filters}\n            onFiltersChange={onFiltersChange}\n            prevRef={pillGroupRefs[index - 1]}\n            innerRef={pillGroupRefs[index]}\n            nextRef={pillGroupRefs[index + 1] ?? dropdownMenuRef}\n          />\n        );\n      })}\n      {FilterBarAddonRenderer ? (\n        <FilterBarAddonRenderer innerRef={dropdownMenuRef} />\n      ) : (\n        <DeprecatedDropdown\n          finalIsOpen={finalIsOpen}\n          onFilterBarClose={onFilterBarClose}\n          onFilterBarOnClickOutside={onFilterBarOnClickOutside}\n          removeAllFilters={removeAllFilters}\n          filterBarProps={filterBarProps}\n          dropdownMenuRef={dropdownMenuRef}\n          onTriggerClick={onTriggerClick}\n        />\n      )}\n    </StyledWrapper>\n  );\n};\n"],
+  "mappings": "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",
   "names": ["React"]
 }

package/dist/esm/parts/FilterBar/components/DateRangePill.js

@@ -1,23 +1,38 @@
 import * as React from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
-import { useCallback } from "react";
+import { useCallback, useMemo } from "react";
 import { DSPillGroupV2, DSPillV2 } from "@elliemae/ds-pills-v2";
 const format = (value) => value?.replace(/-/g, "/");
-const DateRangePill = ({ columnHeader, column, value, filters, onFiltersChange, prevRef, innerRef, nextRef }) => {
+const DateRangePill = ({ columnHeader, column, value, filters, onFiltersChange, prevRef, innerRef, nextRef, onPillRemove }) => {
+  const removeFilter = useCallback(
+    () => onFiltersChange(filters.filter((filter) => filter.id !== column)),
+    [onFiltersChange, filters, column]
+  );
   const handleOnRemove = useCallback(() => {
+    if (onPillRemove) {
+      onPillRemove(removeFilter);
+      return;
+    }
     if (prevRef?.current) prevRef.current.focus();
-    else nextRef.current?.focus();
-    onFiltersChange(filters.filter((filter) => filter.id !== column));
-  }, [onFiltersChange, filters, prevRef, nextRef, column]);
+    else nextRef?.current?.focus();
+    removeFilter();
+  }, [onPillRemove, removeFilter, prevRef, nextRef]);
+  const formattedDateRange = useMemo(
+    () => value?.startDate && value?.endDate ? `${format(value.startDate)} - ${format(value.endDate)}` : "",
+    [value]
+  );
   return value?.startDate && value?.endDate ? /* @__PURE__ */ jsxs(DSPillGroupV2, { children: [
     /* @__PURE__ */ jsx(DSPillV2, { type: "label", label: columnHeader }),
     /* @__PURE__ */ jsx(
       DSPillV2,
       {
         type: "removable",
-        label: `${format(value.startDate)} - ${format(value.endDate)}`,
+        label: formattedDateRange,
         onRemove: handleOnRemove,
-        innerRef
+        innerRef,
+        dsPillPillButton: {
+          dsButtonRoot: { "aria-label": `Remove ${formattedDateRange} from ${columnHeader}` }
+        }
       }
     )
   ] }) : null;

package/dist/esm/parts/FilterBar/components/DateRangePill.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../../scripts/build/transpile/react-shim.js", "../../../../../src/parts/FilterBar/components/DateRangePill.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { useCallback } from 'react';\nimport { DSPillGroupV2, DSPillV2 } from '@elliemae/ds-pills-v2';\nimport type { DSDataTableT } from '../../../react-desc-prop-types.js';\n\nconst format = (value: string) => value?.replace(/-/g, '/');\n\nexport const DateRangePill: React.ComponentType<\n  DSDataTableT.FilterPillProps<{ startDate: string; endDate: string }>\n> = ({ columnHeader, column, value, filters, onFiltersChange, prevRef, innerRef, nextRef }) => {\n  const handleOnRemove = useCallback(() => {\n    if (prevRef?.current) prevRef.current.focus();\n    else nextRef.current?.focus();\n    onFiltersChange(filters.filter((filter) => filter.id !== column));\n  }, [onFiltersChange, filters, prevRef, nextRef, column]);\n\n  return value?.startDate && value?.endDate ? (\n    <DSPillGroupV2>\n      <DSPillV2 type=\"label\" label={columnHeader} />\n      <DSPillV2\n        type=\"removable\"\n        label={`${format(value.startDate)} - ${format(value.endDate)}`}\n        onRemove={handleOnRemove}\n        innerRef={innerRef}\n      />\n    </DSPillGroupV2>\n  ) : null;\n};\n"],
-  "mappings": "AAAA,YAAY,WAAW;ACgBnB,SACE,KADF;AAhBJ,SAAgB,mBAAmB;AACnC,SAAS,eAAe,gBAAgB;AAGxC,MAAM,SAAS,CAAC,UAAkB,OAAO,QAAQ,MAAM,GAAG;AAEnD,MAAM,gBAET,CAAC,EAAE,cAAc,QAAQ,OAAO,SAAS,iBAAiB,SAAS,UAAU,QAAQ,MAAM;AAC7F,QAAM,iBAAiB,YAAY,MAAM;AACvC,QAAI,SAAS,QAAS,SAAQ,QAAQ,MAAM;AAAA,QACvC,SAAQ,SAAS,MAAM;AAC5B,oBAAgB,QAAQ,OAAO,CAAC,WAAW,OAAO,OAAO,MAAM,CAAC;AAAA,EAClE,GAAG,CAAC,iBAAiB,SAAS,SAAS,SAAS,MAAM,CAAC;AAEvD,SAAO,OAAO,aAAa,OAAO,UAChC,qBAAC,iBACC;AAAA,wBAAC,YAAS,MAAK,SAAQ,OAAO,cAAc;AAAA,IAC5C;AAAA,MAAC;AAAA;AAAA,QACC,MAAK;AAAA,QACL,OAAO,GAAG,OAAO,MAAM,SAAS,CAAC,MAAM,OAAO,MAAM,OAAO,CAAC;AAAA,QAC5D,UAAU;AAAA,QACV;AAAA;AAAA,IACF;AAAA,KACF,IACE;AACN;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { useCallback, useMemo } from 'react';\nimport { DSPillGroupV2, DSPillV2 } from '@elliemae/ds-pills-v2';\nimport type { DSDataTableT } from '../../../react-desc-prop-types.js';\n\nconst format = (value: string) => value?.replace(/-/g, '/');\n\nexport const DateRangePill: React.ComponentType<\n  DSDataTableT.FilterPillProps<{ startDate: string; endDate: string }>\n> = ({ columnHeader, column, value, filters, onFiltersChange, prevRef, innerRef, nextRef, onPillRemove }) => {\n  const removeFilter = useCallback(\n    () => onFiltersChange(filters.filter((filter) => filter.id !== column)),\n    [onFiltersChange, filters, column],\n  );\n\n  const handleOnRemove = useCallback(() => {\n    if (onPillRemove) {\n      onPillRemove(removeFilter);\n      return;\n    }\n\n    if (prevRef?.current) prevRef.current.focus();\n    else nextRef?.current?.focus();\n\n    removeFilter();\n  }, [onPillRemove, removeFilter, prevRef, nextRef]);\n\n  const formattedDateRange = useMemo(\n    () => (value?.startDate && value?.endDate ? `${format(value.startDate)} - ${format(value.endDate)}` : ''),\n    [value],\n  );\n\n  return value?.startDate && value?.endDate ? (\n    <DSPillGroupV2>\n      <DSPillV2 type=\"label\" label={columnHeader} />\n      <DSPillV2\n        type=\"removable\"\n        label={formattedDateRange}\n        onRemove={handleOnRemove}\n        innerRef={innerRef}\n        dsPillPillButton={{\n          dsButtonRoot: { 'aria-label': `Remove ${formattedDateRange} from ${columnHeader}` },\n        }}\n      />\n    </DSPillGroupV2>\n  ) : null;\n};\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACgCnB,SACE,KADF;AAhCJ,SAAgB,aAAa,eAAe;AAC5C,SAAS,eAAe,gBAAgB;AAGxC,MAAM,SAAS,CAAC,UAAkB,OAAO,QAAQ,MAAM,GAAG;AAEnD,MAAM,gBAET,CAAC,EAAE,cAAc,QAAQ,OAAO,SAAS,iBAAiB,SAAS,UAAU,SAAS,aAAa,MAAM;AAC3G,QAAM,eAAe;AAAA,IACnB,MAAM,gBAAgB,QAAQ,OAAO,CAAC,WAAW,OAAO,OAAO,MAAM,CAAC;AAAA,IACtE,CAAC,iBAAiB,SAAS,MAAM;AAAA,EACnC;AAEA,QAAM,iBAAiB,YAAY,MAAM;AACvC,QAAI,cAAc;AAChB,mBAAa,YAAY;AACzB;AAAA,IACF;AAEA,QAAI,SAAS,QAAS,SAAQ,QAAQ,MAAM;AAAA,QACvC,UAAS,SAAS,MAAM;AAE7B,iBAAa;AAAA,EACf,GAAG,CAAC,cAAc,cAAc,SAAS,OAAO,CAAC;AAEjD,QAAM,qBAAqB;AAAA,IACzB,MAAO,OAAO,aAAa,OAAO,UAAU,GAAG,OAAO,MAAM,SAAS,CAAC,MAAM,OAAO,MAAM,OAAO,CAAC,KAAK;AAAA,IACtG,CAAC,KAAK;AAAA,EACR;AAEA,SAAO,OAAO,aAAa,OAAO,UAChC,qBAAC,iBACC;AAAA,wBAAC,YAAS,MAAK,SAAQ,OAAO,cAAc;AAAA,IAC5C;AAAA,MAAC;AAAA;AAAA,QACC,MAAK;AAAA,QACL,OAAO;AAAA,QACP,UAAU;AAAA,QACV;AAAA,QACA,kBAAkB;AAAA,UAChB,cAAc,EAAE,cAAc,UAAU,kBAAkB,SAAS,YAAY,GAAG;AAAA,QACpF;AAAA;AAAA,IACF;AAAA,KACF,IACE;AACN;",
   "names": []
 }

package/dist/esm/parts/FilterBar/components/DateSwitcherPill.js

@@ -1,23 +1,39 @@
 import * as React from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
-import { useCallback } from "react";
+import { useCallback, useMemo } from "react";
 import { DSPillGroupV2, DSPillV2 } from "@elliemae/ds-pills-v2";
 const format = (value) => value?.replace(/-/g, "/");
-const DateSwitcherPill = ({ columnHeader, column, value, filters, onFiltersChange, prevRef, innerRef, nextRef }) => {
+const DateSwitcherPill = ({ columnHeader, column, value, filters, onFiltersChange, prevRef, innerRef, nextRef, onPillRemove }) => {
+  const removeFilter = useCallback(
+    () => onFiltersChange(filters.filter((filter) => filter.id !== column)),
+    [onFiltersChange, filters, column]
+  );
   const handleOnRemove = useCallback(() => {
+    if (onPillRemove) {
+      onPillRemove(removeFilter);
+      return;
+    }
     if (prevRef?.current) prevRef.current.focus();
-    else nextRef.current?.focus();
-    onFiltersChange(filters.filter((filter) => filter.id !== column));
-  }, [onFiltersChange, filters, prevRef, nextRef, column]);
+    else nextRef?.current?.focus();
+    removeFilter();
+  }, [onPillRemove, removeFilter, prevRef, nextRef]);
+  const formattedDateSwitcher = useMemo(() => {
+    if (!value?.startDate) return "";
+    if (value.isDateRange && value?.endDate) return `${format(value.startDate)} - ${format(value.endDate)}`;
+    return format(value.startDate);
+  }, [value]);
   return value?.startDate && value?.endDate ? /* @__PURE__ */ jsxs(DSPillGroupV2, { children: [
     /* @__PURE__ */ jsx(DSPillV2, { type: "label", label: columnHeader }),
     /* @__PURE__ */ jsx(
       DSPillV2,
       {
         type: "removable",
-        label: value.isDateRange ? `${format(value.startDate)} - ${format(value.endDate)}` : format(value.startDate),
+        label: formattedDateSwitcher,
         onRemove: handleOnRemove,
-        innerRef
+        innerRef,
+        dsPillPillButton: {
+          dsButtonRoot: { "aria-label": `Remove ${formattedDateSwitcher} from ${columnHeader}` }
+        }
       }
     )
   ] }) : null;

package/dist/esm/parts/FilterBar/components/DateSwitcherPill.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../../scripts/build/transpile/react-shim.js", "../../../../../src/parts/FilterBar/components/DateSwitcherPill.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { useCallback } from 'react';\nimport { DSPillGroupV2, DSPillV2 } from '@elliemae/ds-pills-v2';\nimport type { DSDataTableT } from '../../../react-desc-prop-types.js';\n\nconst format = (value: string) => value?.replace(/-/g, '/');\n\nexport const DateSwitcherPill: React.ComponentType<\n  DSDataTableT.FilterPillProps<{ startDate: string; endDate: string; isDateRange: boolean }>\n> = ({ columnHeader, column, value, filters, onFiltersChange, prevRef, innerRef, nextRef }) => {\n  const handleOnRemove = useCallback(() => {\n    if (prevRef?.current) prevRef.current.focus();\n    else nextRef.current?.focus();\n    onFiltersChange(filters.filter((filter) => filter.id !== column));\n  }, [onFiltersChange, filters, prevRef, nextRef, column]);\n\n  return value?.startDate && value?.endDate ? (\n    <DSPillGroupV2>\n      <DSPillV2 type=\"label\" label={columnHeader} />\n      <DSPillV2\n        type=\"removable\"\n        label={value.isDateRange ? `${format(value.startDate)} - ${format(value.endDate)}` : format(value.startDate)}\n        onRemove={handleOnRemove}\n        innerRef={innerRef}\n      />\n    </DSPillGroupV2>\n  ) : null;\n};\n"],
-  "mappings": "AAAA,YAAY,WAAW;ACgBnB,SACE,KADF;AAhBJ,SAAgB,mBAAmB;AACnC,SAAS,eAAe,gBAAgB;AAGxC,MAAM,SAAS,CAAC,UAAkB,OAAO,QAAQ,MAAM,GAAG;AAEnD,MAAM,mBAET,CAAC,EAAE,cAAc,QAAQ,OAAO,SAAS,iBAAiB,SAAS,UAAU,QAAQ,MAAM;AAC7F,QAAM,iBAAiB,YAAY,MAAM;AACvC,QAAI,SAAS,QAAS,SAAQ,QAAQ,MAAM;AAAA,QACvC,SAAQ,SAAS,MAAM;AAC5B,oBAAgB,QAAQ,OAAO,CAAC,WAAW,OAAO,OAAO,MAAM,CAAC;AAAA,EAClE,GAAG,CAAC,iBAAiB,SAAS,SAAS,SAAS,MAAM,CAAC;AAEvD,SAAO,OAAO,aAAa,OAAO,UAChC,qBAAC,iBACC;AAAA,wBAAC,YAAS,MAAK,SAAQ,OAAO,cAAc;AAAA,IAC5C;AAAA,MAAC;AAAA;AAAA,QACC,MAAK;AAAA,QACL,OAAO,MAAM,cAAc,GAAG,OAAO,MAAM,SAAS,CAAC,MAAM,OAAO,MAAM,OAAO,CAAC,KAAK,OAAO,MAAM,SAAS;AAAA,QAC3G,UAAU;AAAA,QACV;AAAA;AAAA,IACF;AAAA,KACF,IACE;AACN;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { useCallback, useMemo } from 'react';\nimport { DSPillGroupV2, DSPillV2 } from '@elliemae/ds-pills-v2';\nimport type { DSDataTableT } from '../../../react-desc-prop-types.js';\n\nconst format = (value: string) => value?.replace(/-/g, '/');\n\nexport const DateSwitcherPill: React.ComponentType<\n  DSDataTableT.FilterPillProps<{ startDate: string; endDate: string; isDateRange: boolean }>\n> = ({ columnHeader, column, value, filters, onFiltersChange, prevRef, innerRef, nextRef, onPillRemove }) => {\n  const removeFilter = useCallback(\n    () => onFiltersChange(filters.filter((filter) => filter.id !== column)),\n    [onFiltersChange, filters, column],\n  );\n\n  const handleOnRemove = useCallback(() => {\n    if (onPillRemove) {\n      onPillRemove(removeFilter);\n      return;\n    }\n\n    if (prevRef?.current) prevRef.current.focus();\n    else nextRef?.current?.focus();\n\n    removeFilter();\n  }, [onPillRemove, removeFilter, prevRef, nextRef]);\n  const formattedDateSwitcher = useMemo(() => {\n    if (!value?.startDate) return '';\n    if (value.isDateRange && value?.endDate) return `${format(value.startDate)} - ${format(value.endDate)}`;\n    return format(value.startDate);\n  }, [value]);\n  return value?.startDate && value?.endDate ? (\n    <DSPillGroupV2>\n      <DSPillV2 type=\"label\" label={columnHeader} />\n      <DSPillV2\n        type=\"removable\"\n        label={formattedDateSwitcher}\n        onRemove={handleOnRemove}\n        innerRef={innerRef}\n        dsPillPillButton={{\n          dsButtonRoot: { 'aria-label': `Remove ${formattedDateSwitcher} from ${columnHeader}` },\n        }}\n      />\n    </DSPillGroupV2>\n  ) : null;\n};\n"],
+  "mappings": "AAAA,YAAY,WAAW;AC+BnB,SACE,KADF;AA/BJ,SAAgB,aAAa,eAAe;AAC5C,SAAS,eAAe,gBAAgB;AAGxC,MAAM,SAAS,CAAC,UAAkB,OAAO,QAAQ,MAAM,GAAG;AAEnD,MAAM,mBAET,CAAC,EAAE,cAAc,QAAQ,OAAO,SAAS,iBAAiB,SAAS,UAAU,SAAS,aAAa,MAAM;AAC3G,QAAM,eAAe;AAAA,IACnB,MAAM,gBAAgB,QAAQ,OAAO,CAAC,WAAW,OAAO,OAAO,MAAM,CAAC;AAAA,IACtE,CAAC,iBAAiB,SAAS,MAAM;AAAA,EACnC;AAEA,QAAM,iBAAiB,YAAY,MAAM;AACvC,QAAI,cAAc;AAChB,mBAAa,YAAY;AACzB;AAAA,IACF;AAEA,QAAI,SAAS,QAAS,SAAQ,QAAQ,MAAM;AAAA,QACvC,UAAS,SAAS,MAAM;AAE7B,iBAAa;AAAA,EACf,GAAG,CAAC,cAAc,cAAc,SAAS,OAAO,CAAC;AACjD,QAAM,wBAAwB,QAAQ,MAAM;AAC1C,QAAI,CAAC,OAAO,UAAW,QAAO;AAC9B,QAAI,MAAM,eAAe,OAAO,QAAS,QAAO,GAAG,OAAO,MAAM,SAAS,CAAC,MAAM,OAAO,MAAM,OAAO,CAAC;AACrG,WAAO,OAAO,MAAM,SAAS;AAAA,EAC/B,GAAG,CAAC,KAAK,CAAC;AACV,SAAO,OAAO,aAAa,OAAO,UAChC,qBAAC,iBACC;AAAA,wBAAC,YAAS,MAAK,SAAQ,OAAO,cAAc;AAAA,IAC5C;AAAA,MAAC;AAAA;AAAA,QACC,MAAK;AAAA,QACL,OAAO;AAAA,QACP,UAAU;AAAA,QACV;AAAA,QACA,kBAAkB;AAAA,UAChB,cAAc,EAAE,cAAc,UAAU,qBAAqB,SAAS,YAAY,GAAG;AAAA,QACvF;AAAA;AAAA,IACF;AAAA,KACF,IACE;AACN;",
   "names": []
 }

package/dist/esm/parts/FilterBar/components/FreeTextSearchPill.js

@@ -10,16 +10,36 @@ const FreeTextSearchPillPill = ({
   onFiltersChange,
   prevRef,
   innerRef,
-  nextRef
+  nextRef,
+  onPillRemove
 }) => {
+  const removeFilter = useCallback(
+    () => onFiltersChange(filters.filter((filter) => filter.id !== column)),
+    [onFiltersChange, filters, column]
+  );
   const handleOnRemove = useCallback(() => {
+    if (onPillRemove) {
+      onPillRemove(removeFilter);
+      return;
+    }
     if (prevRef?.current) prevRef.current.focus();
-    else nextRef.current?.focus();
-    onFiltersChange(filters.filter((filter) => filter.id !== column));
-  }, [onFiltersChange, filters, prevRef, nextRef, column]);
+    else nextRef?.current?.focus();
+    removeFilter();
+  }, [onPillRemove, removeFilter, prevRef, nextRef]);
   return value ? /* @__PURE__ */ jsxs(DSPillGroupV2, { children: [
     /* @__PURE__ */ jsx(DSPillV2, { type: "label", label: columnHeader }),
-    /* @__PURE__ */ jsx(DSPillV2, { type: "removable", label: value, onRemove: handleOnRemove, innerRef })
+    /* @__PURE__ */ jsx(
+      DSPillV2,
+      {
+        type: "removable",
+        label: value,
+        onRemove: handleOnRemove,
+        innerRef,
+        dsPillPillButton: {
+          dsButtonRoot: { "aria-label": `Remove ${value} from ${columnHeader}` }
+        }
+      }
+    )
   ] }) : null;
 };
 export {

package/dist/esm/parts/FilterBar/components/FreeTextSearchPill.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../../scripts/build/transpile/react-shim.js", "../../../../../src/parts/FilterBar/components/FreeTextSearchPill.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { useCallback } from 'react';\nimport { DSPillGroupV2, DSPillV2 } from '@elliemae/ds-pills-v2';\nimport type { DSDataTableT } from '../../../react-desc-prop-types.js';\n\nexport const FreeTextSearchPillPill: React.ComponentType<DSDataTableT.FilterPillProps<string>> = ({\n  columnHeader,\n  column,\n  value,\n  filters,\n  onFiltersChange,\n  prevRef,\n  innerRef,\n  nextRef,\n}) => {\n  const handleOnRemove = useCallback(() => {\n    if (prevRef?.current) prevRef.current.focus();\n    else nextRef.current?.focus();\n    onFiltersChange(filters.filter((filter) => filter.id !== column));\n  }, [onFiltersChange, filters, prevRef, nextRef, column]);\n\n  return value ? (\n    <DSPillGroupV2>\n      <DSPillV2 type=\"label\" label={columnHeader} />\n      <DSPillV2 type=\"removable\" label={value} onRemove={handleOnRemove} innerRef={innerRef} />\n    </DSPillGroupV2>\n  ) : null;\n};\n"],
-  "mappings": "AAAA,YAAY,WAAW;ACqBnB,SACE,KADF;AArBJ,SAAgB,mBAAmB;AACnC,SAAS,eAAe,gBAAgB;AAGjC,MAAM,yBAAoF,CAAC;AAAA,EAChG;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,MAAM;AACJ,QAAM,iBAAiB,YAAY,MAAM;AACvC,QAAI,SAAS,QAAS,SAAQ,QAAQ,MAAM;AAAA,QACvC,SAAQ,SAAS,MAAM;AAC5B,oBAAgB,QAAQ,OAAO,CAAC,WAAW,OAAO,OAAO,MAAM,CAAC;AAAA,EAClE,GAAG,CAAC,iBAAiB,SAAS,SAAS,SAAS,MAAM,CAAC;AAEvD,SAAO,QACL,qBAAC,iBACC;AAAA,wBAAC,YAAS,MAAK,SAAQ,OAAO,cAAc;AAAA,IAC5C,oBAAC,YAAS,MAAK,aAAY,OAAO,OAAO,UAAU,gBAAgB,UAAoB;AAAA,KACzF,IACE;AACN;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { useCallback } from 'react';\nimport { DSPillGroupV2, DSPillV2 } from '@elliemae/ds-pills-v2';\nimport type { DSDataTableT } from '../../../react-desc-prop-types.js';\n\nexport const FreeTextSearchPillPill: React.ComponentType<DSDataTableT.FilterPillProps<string>> = ({\n  columnHeader,\n  column,\n  value,\n  filters,\n  onFiltersChange,\n  prevRef,\n  innerRef,\n  nextRef,\n  onPillRemove,\n}) => {\n  const removeFilter = useCallback(\n    () => onFiltersChange(filters.filter((filter) => filter.id !== column)),\n    [onFiltersChange, filters, column],\n  );\n\n  const handleOnRemove = useCallback(() => {\n    if (onPillRemove) {\n      onPillRemove(removeFilter);\n      return;\n    }\n\n    if (prevRef?.current) prevRef.current.focus();\n    else nextRef?.current?.focus();\n\n    removeFilter();\n  }, [onPillRemove, removeFilter, prevRef, nextRef]);\n\n  return value ? (\n    <DSPillGroupV2>\n      <DSPillV2 type=\"label\" label={columnHeader} />\n      <DSPillV2\n        type=\"removable\"\n        label={value}\n        onRemove={handleOnRemove}\n        innerRef={innerRef}\n        dsPillPillButton={{\n          dsButtonRoot: { 'aria-label': `Remove ${value} from ${columnHeader}` },\n        }}\n      />\n    </DSPillGroupV2>\n  ) : null;\n};\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACiCnB,SACE,KADF;AAjCJ,SAAgB,mBAAmB;AACnC,SAAS,eAAe,gBAAgB;AAGjC,MAAM,yBAAoF,CAAC;AAAA,EAChG;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,MAAM;AACJ,QAAM,eAAe;AAAA,IACnB,MAAM,gBAAgB,QAAQ,OAAO,CAAC,WAAW,OAAO,OAAO,MAAM,CAAC;AAAA,IACtE,CAAC,iBAAiB,SAAS,MAAM;AAAA,EACnC;AAEA,QAAM,iBAAiB,YAAY,MAAM;AACvC,QAAI,cAAc;AAChB,mBAAa,YAAY;AACzB;AAAA,IACF;AAEA,QAAI,SAAS,QAAS,SAAQ,QAAQ,MAAM;AAAA,QACvC,UAAS,SAAS,MAAM;AAE7B,iBAAa;AAAA,EACf,GAAG,CAAC,cAAc,cAAc,SAAS,OAAO,CAAC;AAEjD,SAAO,QACL,qBAAC,iBACC;AAAA,wBAAC,YAAS,MAAK,SAAQ,OAAO,cAAc;AAAA,IAC5C;AAAA,MAAC;AAAA;AAAA,QACC,MAAK;AAAA,QACL,OAAO;AAAA,QACP,UAAU;AAAA,QACV;AAAA,QACA,kBAAkB;AAAA,UAChB,cAAc,EAAE,cAAc,UAAU,KAAK,SAAS,YAAY,GAAG;AAAA,QACvE;AAAA;AAAA,IACF;AAAA,KACF,IACE;AACN;",
   "names": []
 }

package/dist/esm/parts/FilterBar/components/MultiSelectPill.js

@@ -11,7 +11,8 @@ const MultiSelectPill = ({
   onFiltersChange,
   prevRef,
   innerRef,
-  nextRef
+  nextRef,
+  onPillRemove
 }) => {
   const multiSelectedValue = value;
   const handleOnRemove = useCallback(
@@ -21,13 +22,15 @@ const MultiSelectPill = ({
       const newFilterValue = multiSelectedValue.filter((val) => val.dsId !== valToRemove.dsId);
       newFilters[filterIndex].value = newFilterValue;
       if (newFilterValue.length === 0) {
-        if (prevRef?.current) prevRef.current.focus();
-        else nextRef.current?.focus();
+        if (onPillRemove) {
+          onPillRemove(() => onFiltersChange(newFilters));
+        } else if (prevRef?.current) prevRef.current.focus();
+        else nextRef?.current?.focus();
         newFilters.splice(filterIndex, 1);
       }
       onFiltersChange(newFilters);
     },
-    [filters, multiSelectedValue, onFiltersChange, column, prevRef, nextRef]
+    [filters, multiSelectedValue, onFiltersChange, onPillRemove, column, prevRef, nextRef]
   );
   return multiSelectedValue?.length ? /* @__PURE__ */ jsxs(DSPillGroupV2, { children: [
     /* @__PURE__ */ jsx(DSPillV2, { type: "label", label: columnHeader }),
@@ -37,7 +40,10 @@ const MultiSelectPill = ({
         type: "removable",
         label: val.label,
         onRemove: () => handleOnRemove(val),
-        innerRef: index === multiSelectedValue.length - 1 ? innerRef : void 0
+        innerRef: index === multiSelectedValue.length - 1 ? innerRef : void 0,
+        dsPillPillButton: {
+          dsButtonRoot: { "aria-label": `Remove ${val.label} from ${columnHeader}` }
+        }
       },
       val.dsId
     ))

package/dist/esm/parts/FilterBar/components/MultiSelectPill.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../../scripts/build/transpile/react-shim.js", "../../../../../src/parts/FilterBar/components/MultiSelectPill.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { useCallback } from 'react';\nimport { cloneDeep } from 'lodash-es';\nimport { DSPillGroupV2, DSPillV2 } from '@elliemae/ds-pills-v2';\nimport type { DSComboboxT } from '@elliemae/ds-form-combobox';\nimport type { DSDataTableT } from '../../../react-desc-prop-types.js';\n\ntype MultiSelectPillValues = DSComboboxT.ItemOption[];\n\nexport const MultiSelectPill: React.ComponentType<DSDataTableT.FilterPillProps<MultiSelectPillValues>> = ({\n  columnHeader,\n  column,\n  value,\n  filters,\n  onFiltersChange,\n  prevRef,\n  innerRef,\n  nextRef,\n}) => {\n  const multiSelectedValue = value;\n  const handleOnRemove = useCallback(\n    (valToRemove: DSDataTableT.FilterOptionT) => {\n      const newFilters = cloneDeep(filters);\n      const filterIndex = newFilters.findIndex((filter) => filter.id === column);\n\n      const newFilterValue = multiSelectedValue.filter((val) => val.dsId !== valToRemove.dsId);\n\n      newFilters[filterIndex].value = newFilterValue;\n\n      if (newFilterValue.length === 0) {\n        if (prevRef?.current) prevRef.current.focus();\n        else nextRef.current?.focus();\n        newFilters.splice(filterIndex, 1);\n      }\n      onFiltersChange(newFilters);\n    },\n    [filters, multiSelectedValue, onFiltersChange, column, prevRef, nextRef],\n  );\n  return multiSelectedValue?.length ? (\n    <DSPillGroupV2>\n      <DSPillV2 type=\"label\" label={columnHeader} />\n      {multiSelectedValue.map((val, index) => (\n        <DSPillV2\n          key={val.dsId}\n          type=\"removable\"\n          label={val.label}\n          onRemove={() => handleOnRemove(val)}\n          innerRef={index === multiSelectedValue.length - 1 ? innerRef : undefined}\n        />\n      ))}\n    </DSPillGroupV2>\n  ) : null;\n};\n"],
-  "mappings": "AAAA,YAAY,WAAW;ACsCnB,SACE,KADF;AAtCJ,SAAgB,mBAAmB;AACnC,SAAS,iBAAiB;AAC1B,SAAS,eAAe,gBAAgB;AAMjC,MAAM,kBAA4F,CAAC;AAAA,EACxG;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,MAAM;AACJ,QAAM,qBAAqB;AAC3B,QAAM,iBAAiB;AAAA,IACrB,CAAC,gBAA4C;AAC3C,YAAM,aAAa,UAAU,OAAO;AACpC,YAAM,cAAc,WAAW,UAAU,CAAC,WAAW,OAAO,OAAO,MAAM;AAEzE,YAAM,iBAAiB,mBAAmB,OAAO,CAAC,QAAQ,IAAI,SAAS,YAAY,IAAI;AAEvF,iBAAW,WAAW,EAAE,QAAQ;AAEhC,UAAI,eAAe,WAAW,GAAG;AAC/B,YAAI,SAAS,QAAS,SAAQ,QAAQ,MAAM;AAAA,YACvC,SAAQ,SAAS,MAAM;AAC5B,mBAAW,OAAO,aAAa,CAAC;AAAA,MAClC;AACA,sBAAgB,UAAU;AAAA,IAC5B;AAAA,IACA,CAAC,SAAS,oBAAoB,iBAAiB,QAAQ,SAAS,OAAO;AAAA,EACzE;AACA,SAAO,oBAAoB,SACzB,qBAAC,iBACC;AAAA,wBAAC,YAAS,MAAK,SAAQ,OAAO,cAAc;AAAA,IAC3C,mBAAmB,IAAI,CAAC,KAAK,UAC5B;AAAA,MAAC;AAAA;AAAA,QAEC,MAAK;AAAA,QACL,OAAO,IAAI;AAAA,QACX,UAAU,MAAM,eAAe,GAAG;AAAA,QAClC,UAAU,UAAU,mBAAmB,SAAS,IAAI,WAAW;AAAA;AAAA,MAJ1D,IAAI;AAAA,IAKX,CACD;AAAA,KACH,IACE;AACN;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { useCallback } from 'react';\nimport { cloneDeep } from 'lodash-es';\nimport { DSPillGroupV2, DSPillV2 } from '@elliemae/ds-pills-v2';\nimport type { DSComboboxT } from '@elliemae/ds-form-combobox';\nimport type { DSDataTableT } from '../../../react-desc-prop-types.js';\n\ntype MultiSelectPillValues = DSComboboxT.ItemOption[];\n\nexport const MultiSelectPill: React.ComponentType<DSDataTableT.FilterPillProps<MultiSelectPillValues>> = ({\n  columnHeader,\n  column,\n  value,\n  filters,\n  onFiltersChange,\n  prevRef,\n  innerRef,\n  nextRef,\n  onPillRemove,\n}) => {\n  const multiSelectedValue = value;\n  const handleOnRemove = useCallback(\n    (valToRemove: DSDataTableT.FilterOptionT) => {\n      const newFilters = cloneDeep(filters);\n      const filterIndex = newFilters.findIndex((filter) => filter.id === column);\n\n      const newFilterValue = multiSelectedValue.filter((val) => val.dsId !== valToRemove.dsId);\n\n      newFilters[filterIndex].value = newFilterValue;\n      if (newFilterValue.length === 0) {\n        if (onPillRemove) {\n          onPillRemove(() => onFiltersChange(newFilters));\n        } else if (prevRef?.current) prevRef.current.focus();\n        else nextRef?.current?.focus();\n        newFilters.splice(filterIndex, 1);\n      }\n      onFiltersChange(newFilters);\n    },\n    [filters, multiSelectedValue, onFiltersChange, onPillRemove, column, prevRef, nextRef],\n  );\n  return multiSelectedValue?.length ? (\n    <DSPillGroupV2>\n      <DSPillV2 type=\"label\" label={columnHeader} />\n      {multiSelectedValue.map((val, index) => (\n        <DSPillV2\n          key={val.dsId}\n          type=\"removable\"\n          label={val.label}\n          onRemove={() => handleOnRemove(val)}\n          innerRef={index === multiSelectedValue.length - 1 ? innerRef : undefined}\n          dsPillPillButton={{\n            dsButtonRoot: { 'aria-label': `Remove ${val.label} from ${columnHeader}` },\n          }}\n        />\n      ))}\n    </DSPillGroupV2>\n  ) : null;\n};\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACwCnB,SACE,KADF;AAxCJ,SAAgB,mBAAmB;AACnC,SAAS,iBAAiB;AAC1B,SAAS,eAAe,gBAAgB;AAMjC,MAAM,kBAA4F,CAAC;AAAA,EACxG;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,MAAM;AACJ,QAAM,qBAAqB;AAC3B,QAAM,iBAAiB;AAAA,IACrB,CAAC,gBAA4C;AAC3C,YAAM,aAAa,UAAU,OAAO;AACpC,YAAM,cAAc,WAAW,UAAU,CAAC,WAAW,OAAO,OAAO,MAAM;AAEzE,YAAM,iBAAiB,mBAAmB,OAAO,CAAC,QAAQ,IAAI,SAAS,YAAY,IAAI;AAEvF,iBAAW,WAAW,EAAE,QAAQ;AAChC,UAAI,eAAe,WAAW,GAAG;AAC/B,YAAI,cAAc;AAChB,uBAAa,MAAM,gBAAgB,UAAU,CAAC;AAAA,QAChD,WAAW,SAAS,QAAS,SAAQ,QAAQ,MAAM;AAAA,YAC9C,UAAS,SAAS,MAAM;AAC7B,mBAAW,OAAO,aAAa,CAAC;AAAA,MAClC;AACA,sBAAgB,UAAU;AAAA,IAC5B;AAAA,IACA,CAAC,SAAS,oBAAoB,iBAAiB,cAAc,QAAQ,SAAS,OAAO;AAAA,EACvF;AACA,SAAO,oBAAoB,SACzB,qBAAC,iBACC;AAAA,wBAAC,YAAS,MAAK,SAAQ,OAAO,cAAc;AAAA,IAC3C,mBAAmB,IAAI,CAAC,KAAK,UAC5B;AAAA,MAAC;AAAA;AAAA,QAEC,MAAK;AAAA,QACL,OAAO,IAAI;AAAA,QACX,UAAU,MAAM,eAAe,GAAG;AAAA,QAClC,UAAU,UAAU,mBAAmB,SAAS,IAAI,WAAW;AAAA,QAC/D,kBAAkB;AAAA,UAChB,cAAc,EAAE,cAAc,UAAU,IAAI,KAAK,SAAS,YAAY,GAAG;AAAA,QAC3E;AAAA;AAAA,MAPK,IAAI;AAAA,IAQX,CACD;AAAA,KACH,IACE;AACN;",
   "names": []
 }

package/dist/esm/parts/FilterBar/components/NumberRangePill.js

@@ -1,6 +1,6 @@
 import * as React from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
-import { useCallback } from "react";
+import { useCallback, useMemo } from "react";
 import { DSPillGroupV2, DSPillV2 } from "@elliemae/ds-pills-v2";
 const NumberRangePill = ({
   columnHeader,
@@ -10,16 +10,39 @@ const NumberRangePill = ({
   onFiltersChange,
   prevRef,
   innerRef,
-  nextRef
+  nextRef,
+  onPillRemove
 }) => {
+  const removeFilter = useCallback(
+    () => onFiltersChange(filters.filter((filter) => filter.id !== column)),
+    [onFiltersChange, filters, column]
+  );
   const handleOnRemove = useCallback(() => {
+    if (onPillRemove) {
+      onPillRemove(removeFilter);
+      return;
+    }
     if (prevRef?.current) prevRef.current.focus();
-    else nextRef.current?.focus();
-    onFiltersChange(filters.filter((filter) => filter.id !== column));
-  }, [onFiltersChange, filters, column, prevRef, nextRef]);
+    else nextRef?.current?.focus();
+    removeFilter();
+  }, [onPillRemove, removeFilter, prevRef, nextRef]);
+  const formattedRange = useMemo(() => {
+    if (!value?.from) return "";
+    if (value?.to) return `${value.from} - ${value.to}`;
+    return value.from;
+  }, [value]);
   return (value?.from ?? "") !== "" && (value?.to ?? "") !== "" ? /* @__PURE__ */ jsxs(DSPillGroupV2, { children: [
     /* @__PURE__ */ jsx(DSPillV2, { type: "label", label: columnHeader }),
-    /* @__PURE__ */ jsx(DSPillV2, { type: "removable", label: `${value.from} - ${value.to}`, onRemove: handleOnRemove, innerRef })
+    /* @__PURE__ */ jsx(
+      DSPillV2,
+      {
+        type: "removable",
+        label: formattedRange,
+        onRemove: handleOnRemove,
+        innerRef,
+        dsPillPillButton: { dsButtonRoot: { "aria-label": `Remove ${formattedRange} from ${columnHeader}` } }
+      }
+    )
   ] }) : null;
 };
 export {

package/dist/esm/parts/FilterBar/components/NumberRangePill.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../../scripts/build/transpile/react-shim.js", "../../../../../src/parts/FilterBar/components/NumberRangePill.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { useCallback } from 'react';\nimport { DSPillGroupV2, DSPillV2 } from '@elliemae/ds-pills-v2';\nimport type { DSDataTableT } from '../../../react-desc-prop-types.js';\n\nexport const NumberRangePill: React.ComponentType<DSDataTableT.FilterPillProps<{ from: string; to: string }>> = ({\n  columnHeader,\n  column,\n  value,\n  filters,\n  onFiltersChange,\n  prevRef,\n  innerRef,\n  nextRef,\n}) => {\n  const handleOnRemove = useCallback(() => {\n    if (prevRef?.current) prevRef.current.focus();\n    else nextRef.current?.focus();\n    onFiltersChange(filters.filter((filter) => filter.id !== column));\n  }, [onFiltersChange, filters, column, prevRef, nextRef]);\n\n  return (value?.from ?? '') !== '' && (value?.to ?? '') !== '' ? (\n    <DSPillGroupV2>\n      <DSPillV2 type=\"label\" label={columnHeader} />\n      <DSPillV2 type=\"removable\" label={`${value.from} - ${value.to}`} onRemove={handleOnRemove} innerRef={innerRef} />\n    </DSPillGroupV2>\n  ) : null;\n};\n"],
-  "mappings": "AAAA,YAAY,WAAW;ACqBnB,SACE,KADF;AArBJ,SAAgB,mBAAmB;AACnC,SAAS,eAAe,gBAAgB;AAGjC,MAAM,kBAAmG,CAAC;AAAA,EAC/G;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,MAAM;AACJ,QAAM,iBAAiB,YAAY,MAAM;AACvC,QAAI,SAAS,QAAS,SAAQ,QAAQ,MAAM;AAAA,QACvC,SAAQ,SAAS,MAAM;AAC5B,oBAAgB,QAAQ,OAAO,CAAC,WAAW,OAAO,OAAO,MAAM,CAAC;AAAA,EAClE,GAAG,CAAC,iBAAiB,SAAS,QAAQ,SAAS,OAAO,CAAC;AAEvD,UAAQ,OAAO,QAAQ,QAAQ,OAAO,OAAO,MAAM,QAAQ,KACzD,qBAAC,iBACC;AAAA,wBAAC,YAAS,MAAK,SAAQ,OAAO,cAAc;AAAA,IAC5C,oBAAC,YAAS,MAAK,aAAY,OAAO,GAAG,MAAM,IAAI,MAAM,MAAM,EAAE,IAAI,UAAU,gBAAgB,UAAoB;AAAA,KACjH,IACE;AACN;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { useCallback, useMemo } from 'react';\nimport { DSPillGroupV2, DSPillV2 } from '@elliemae/ds-pills-v2';\nimport type { DSDataTableT } from '../../../react-desc-prop-types.js';\n\nexport const NumberRangePill: React.ComponentType<DSDataTableT.FilterPillProps<{ from: string; to: string }>> = ({\n  columnHeader,\n  column,\n  value,\n  filters,\n  onFiltersChange,\n  prevRef,\n  innerRef,\n  nextRef,\n  onPillRemove,\n}) => {\n  const removeFilter = useCallback(\n    () => onFiltersChange(filters.filter((filter) => filter.id !== column)),\n    [onFiltersChange, filters, column],\n  );\n\n  const handleOnRemove = useCallback(() => {\n    if (onPillRemove) {\n      onPillRemove(removeFilter);\n      return;\n    }\n\n    if (prevRef?.current) prevRef.current.focus();\n    else nextRef?.current?.focus();\n\n    removeFilter();\n  }, [onPillRemove, removeFilter, prevRef, nextRef]);\n\n  const formattedRange = useMemo(() => {\n    if (!value?.from) return '';\n    if (value?.to) return `${value.from} - ${value.to}`;\n    return value.from;\n  }, [value]);\n\n  return (value?.from ?? '') !== '' && (value?.to ?? '') !== '' ? (\n    <DSPillGroupV2>\n      <DSPillV2 type=\"label\" label={columnHeader} />\n      <DSPillV2\n        type=\"removable\"\n        label={formattedRange}\n        onRemove={handleOnRemove}\n        innerRef={innerRef}\n        dsPillPillButton={{ dsButtonRoot: { 'aria-label': `Remove ${formattedRange} from ${columnHeader}` } }}\n      />\n    </DSPillGroupV2>\n  ) : null;\n};\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACuCnB,SACE,KADF;AAvCJ,SAAgB,aAAa,eAAe;AAC5C,SAAS,eAAe,gBAAgB;AAGjC,MAAM,kBAAmG,CAAC;AAAA,EAC/G;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,MAAM;AACJ,QAAM,eAAe;AAAA,IACnB,MAAM,gBAAgB,QAAQ,OAAO,CAAC,WAAW,OAAO,OAAO,MAAM,CAAC;AAAA,IACtE,CAAC,iBAAiB,SAAS,MAAM;AAAA,EACnC;AAEA,QAAM,iBAAiB,YAAY,MAAM;AACvC,QAAI,cAAc;AAChB,mBAAa,YAAY;AACzB;AAAA,IACF;AAEA,QAAI,SAAS,QAAS,SAAQ,QAAQ,MAAM;AAAA,QACvC,UAAS,SAAS,MAAM;AAE7B,iBAAa;AAAA,EACf,GAAG,CAAC,cAAc,cAAc,SAAS,OAAO,CAAC;AAEjD,QAAM,iBAAiB,QAAQ,MAAM;AACnC,QAAI,CAAC,OAAO,KAAM,QAAO;AACzB,QAAI,OAAO,GAAI,QAAO,GAAG,MAAM,IAAI,MAAM,MAAM,EAAE;AACjD,WAAO,MAAM;AAAA,EACf,GAAG,CAAC,KAAK,CAAC;AAEV,UAAQ,OAAO,QAAQ,QAAQ,OAAO,OAAO,MAAM,QAAQ,KACzD,qBAAC,iBACC;AAAA,wBAAC,YAAS,MAAK,SAAQ,OAAO,cAAc;AAAA,IAC5C;AAAA,MAAC;AAAA;AAAA,QACC,MAAK;AAAA,QACL,OAAO;AAAA,QACP,UAAU;AAAA,QACV;AAAA,QACA,kBAAkB,EAAE,cAAc,EAAE,cAAc,UAAU,cAAc,SAAS,YAAY,GAAG,EAAE;AAAA;AAAA,IACtG;AAAA,KACF,IACE;AACN;",
   "names": []
 }

package/dist/esm/parts/FilterBar/components/SelectPill.js

@@ -10,16 +10,36 @@ const SelectPill = ({
   onFiltersChange,
   prevRef,
   innerRef,
-  nextRef
+  nextRef,
+  onPillRemove
 }) => {
+  const removeFilter = useCallback(
+    () => onFiltersChange(filters.filter((filter) => filter.id !== column)),
+    [onFiltersChange, filters, column]
+  );
   const handleOnRemove = useCallback(() => {
+    if (onPillRemove) {
+      onPillRemove(removeFilter);
+      return;
+    }
     if (prevRef?.current) prevRef.current.focus();
-    else nextRef.current?.focus();
-    onFiltersChange(filters.filter((filter) => filter.id !== column));
-  }, [onFiltersChange, filters, prevRef, nextRef, column]);
+    else nextRef?.current?.focus();
+    removeFilter();
+  }, [onPillRemove, removeFilter, prevRef, nextRef]);
   return value ? /* @__PURE__ */ jsxs(DSPillGroupV2, { children: [
     /* @__PURE__ */ jsx(DSPillV2, { type: "label", label: columnHeader }),
-    /* @__PURE__ */ jsx(DSPillV2, { type: "removable", label: value.label, onRemove: handleOnRemove, innerRef })
+    /* @__PURE__ */ jsx(
+      DSPillV2,
+      {
+        type: "removable",
+        label: value.label,
+        onRemove: handleOnRemove,
+        innerRef,
+        dsPillPillButton: {
+          dsButtonRoot: { "aria-label": `Remove ${value.label} from ${columnHeader}` }
+        }
+      }
+    )
   ] }) : null;
 };
 export {

package/dist/esm/parts/FilterBar/components/SelectPill.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../../scripts/build/transpile/react-shim.js", "../../../../../src/parts/FilterBar/components/SelectPill.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { useCallback } from 'react';\nimport { DSPillGroupV2, DSPillV2 } from '@elliemae/ds-pills-v2';\nimport type { DSComboboxT } from '@elliemae/ds-form-combobox';\nimport type { DSDataTableT } from '../../../react-desc-prop-types.js';\n\nexport const SelectPill: React.ComponentType<DSDataTableT.FilterPillProps<DSComboboxT.ItemOption | null>> = ({\n  columnHeader,\n  column,\n  value,\n  filters,\n  onFiltersChange,\n  prevRef,\n  innerRef,\n  nextRef,\n}) => {\n  const handleOnRemove = useCallback(() => {\n    if (prevRef?.current) prevRef.current.focus();\n    else nextRef.current?.focus();\n    onFiltersChange(filters.filter((filter) => filter.id !== column));\n  }, [onFiltersChange, filters, prevRef, nextRef, column]);\n\n  return value ? (\n    <DSPillGroupV2>\n      <DSPillV2 type=\"label\" label={columnHeader} />\n      <DSPillV2 type=\"removable\" label={value.label} onRemove={handleOnRemove} innerRef={innerRef} />\n    </DSPillGroupV2>\n  ) : null;\n};\n"],
-  "mappings": "AAAA,YAAY,WAAW;ACsBnB,SACE,KADF;AAtBJ,SAAgB,mBAAmB;AACnC,SAAS,eAAe,gBAAgB;AAIjC,MAAM,aAA+F,CAAC;AAAA,EAC3G;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,MAAM;AACJ,QAAM,iBAAiB,YAAY,MAAM;AACvC,QAAI,SAAS,QAAS,SAAQ,QAAQ,MAAM;AAAA,QACvC,SAAQ,SAAS,MAAM;AAC5B,oBAAgB,QAAQ,OAAO,CAAC,WAAW,OAAO,OAAO,MAAM,CAAC;AAAA,EAClE,GAAG,CAAC,iBAAiB,SAAS,SAAS,SAAS,MAAM,CAAC;AAEvD,SAAO,QACL,qBAAC,iBACC;AAAA,wBAAC,YAAS,MAAK,SAAQ,OAAO,cAAc;AAAA,IAC5C,oBAAC,YAAS,MAAK,aAAY,OAAO,MAAM,OAAO,UAAU,gBAAgB,UAAoB;AAAA,KAC/F,IACE;AACN;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { useCallback } from 'react';\nimport { DSPillGroupV2, DSPillV2 } from '@elliemae/ds-pills-v2';\nimport type { DSComboboxT } from '@elliemae/ds-form-combobox';\nimport type { DSDataTableT } from '../../../react-desc-prop-types.js';\n\nexport const SelectPill: React.ComponentType<DSDataTableT.FilterPillProps<DSComboboxT.ItemOption | null>> = ({\n  columnHeader,\n  column,\n  value,\n  filters,\n  onFiltersChange,\n  prevRef,\n  innerRef,\n  nextRef,\n  onPillRemove,\n}) => {\n  const removeFilter = useCallback(\n    () => onFiltersChange(filters.filter((filter) => filter.id !== column)),\n    [onFiltersChange, filters, column],\n  );\n\n  const handleOnRemove = useCallback(() => {\n    if (onPillRemove) {\n      onPillRemove(removeFilter);\n      return;\n    }\n\n    if (prevRef?.current) prevRef.current.focus();\n    else nextRef?.current?.focus();\n\n    removeFilter();\n  }, [onPillRemove, removeFilter, prevRef, nextRef]);\n\n  return value ? (\n    <DSPillGroupV2>\n      <DSPillV2 type=\"label\" label={columnHeader} />\n      <DSPillV2\n        type=\"removable\"\n        label={value.label}\n        onRemove={handleOnRemove}\n        innerRef={innerRef}\n        dsPillPillButton={{\n          dsButtonRoot: { 'aria-label': `Remove ${value.label} from ${columnHeader}` },\n        }}\n      />\n    </DSPillGroupV2>\n  ) : null;\n};\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACkCnB,SACE,KADF;AAlCJ,SAAgB,mBAAmB;AACnC,SAAS,eAAe,gBAAgB;AAIjC,MAAM,aAA+F,CAAC;AAAA,EAC3G;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,MAAM;AACJ,QAAM,eAAe;AAAA,IACnB,MAAM,gBAAgB,QAAQ,OAAO,CAAC,WAAW,OAAO,OAAO,MAAM,CAAC;AAAA,IACtE,CAAC,iBAAiB,SAAS,MAAM;AAAA,EACnC;AAEA,QAAM,iBAAiB,YAAY,MAAM;AACvC,QAAI,cAAc;AAChB,mBAAa,YAAY;AACzB;AAAA,IACF;AAEA,QAAI,SAAS,QAAS,SAAQ,QAAQ,MAAM;AAAA,QACvC,UAAS,SAAS,MAAM;AAE7B,iBAAa;AAAA,EACf,GAAG,CAAC,cAAc,cAAc,SAAS,OAAO,CAAC;AAEjD,SAAO,QACL,qBAAC,iBACC;AAAA,wBAAC,YAAS,MAAK,SAAQ,OAAO,cAAc;AAAA,IAC5C;AAAA,MAAC;AAAA;AAAA,QACC,MAAK;AAAA,QACL,OAAO,MAAM;AAAA,QACb,UAAU;AAAA,QACV;AAAA,QACA,kBAAkB;AAAA,UAChB,cAAc,EAAE,cAAc,UAAU,MAAM,KAAK,SAAS,YAAY,GAAG;AAAA,QAC7E;AAAA;AAAA,IACF;AAAA,KACF,IACE;AACN;",
   "names": []
 }