@elliemae/ds-data-table 3.60.0-next.5 → 3.60.0-next.50

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);
@@ -77,8 +85,6 @@ const FiltersBar = () => {
     StyledWrapper,
     {
       width,
-      "aria-live": "polite",
-      "aria-relevant": "additions removals",
       gutter: "xs",
       getOwnerProps,
       children: [

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      /**\n       * PUI-17317 - [DataTable] No announcement is made when a filter is added or removed\n       * https://jira.elliemae.io/browse/PUI-17317\n       *\n       * ## Problem\n       * Screen reader users received no feedback when filters were added or removed.\n       * The attempted fix \u2014 placing `aria-live=\"polite\"` + `aria-relevant=\"additions removals\"`\n       * on this wrapper \u2014 was unreliable across screen readers and, when it did fire,\n       * produced meaningless announcements by concatenating the pill label with its\n       * remove-button aria-label, e.g.:\n       *   \"React Dev Remove React Dev from Position\"\n       *\n       * WCAG recommends contextual messages like \"Filter applied: Currency = USD\".\n       * That level of specificity cannot be achieved automatically through aria attributes alone.\n       *\n       * ## Decision\n       * `aria-live` / `aria-relevant` were removed from this component.\n       * The responsibility for announcing filter changes is delegated to the consumer,\n       * who has access to the full filter state and can compose meaningful messages like:\n       *\n       * e.g: Multi Select Filter\n       *\n       * - \"Filter added: Position: React dev\"\n       * - \"Filter updated: Position: React dev, Fullstack dev\"\n       * - \"Filter removed: Position: React dev, Fullstack dev\"\n       */\n      /*\n      aria-live=\"polite\"\n      aria-relevant=\"additions removals\" \n      */\n      gutter=\"xs\"\n      getOwnerProps={getOwnerProps}\n    >\n      {filters.map(({ id: column, type, value }, index) => {\n        const columnHeader = visibleColumns.find((col) => col.accessor === column)?.Header;\n        let Component:\n          | TypescriptHelpersT.ObjectValues<typeof pillRenderMapper>\n          | React.ComponentType<DSDataTableT.FilterPillProps<unknown>> = () => null;\n\n        const filterType = type;\n        if (filterType in pillRenderMapper) {\n          Component = pillRenderMapper[filterType as keyof typeof pillRenderMapper];\n        } else if (filterBarProps?.customPillRenderer) {\n          Component = filterBarProps.customPillRenderer;\n        }\n        return (\n          <Component\n            key={column}\n            columnHeader={typeof columnHeader === 'string' ? columnHeader : column}\n            column={column}\n            // eslint-disable-next-line @typescript-eslint/no-explicit-any, @typescript-eslint/no-unsafe-assignment\n            value={value as any}\n            filters={filters}\n            onFiltersChange={onFiltersChange}\n            prevRef={pillGroupRefs[index - 1]}\n            innerRef={pillGroupRefs[index]}\n            nextRef={pillGroupRefs[index + 1] ?? dropdownMenuRef}\n          />\n        );\n      })}\n      {FilterBarAddonRenderer ? (\n        <FilterBarAddonRenderer innerRef={dropdownMenuRef} />\n      ) : (\n        <DeprecatedDropdown\n          finalIsOpen={finalIsOpen}\n          onFilterBarClose={onFilterBarClose}\n          onFilterBarOnClickOutside={onFilterBarOnClickOutside}\n          removeAllFilters={removeAllFilters}\n          filterBarProps={filterBarProps}\n          dropdownMenuRef={dropdownMenuRef}\n          onTriggerClick={onTriggerClick}\n        />\n      )}\n    </StyledWrapper>\n  );\n};\n"],
+  "mappings": "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",
   "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": []
 }

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

@@ -10,16 +10,37 @@ const SingleDatePill = ({
   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]);
+  const formattedDate = value ? value.replace(/-/g, "/") : "";
   return value ? /* @__PURE__ */ jsxs(DSPillGroupV2, { children: [
     /* @__PURE__ */ jsx(DSPillV2, { type: "label", label: columnHeader }),
-    /* @__PURE__ */ jsx(DSPillV2, { type: "removable", label: value.replace(/-/g, "/"), onRemove: handleOnRemove, innerRef })
+    /* @__PURE__ */ jsx(
+      DSPillV2,
+      {
+        type: "removable",
+        label: formattedDate,
+        onRemove: handleOnRemove,
+        innerRef,
+        dsPillPillButton: {
+          dsButtonRoot: { "aria-label": `Remove ${formattedDate} from ${columnHeader}` }
+        }
+      }
+    )
   ] }) : null;
 };
 export {

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../../scripts/build/transpile/react-shim.js", "../../../../../src/parts/FilterBar/components/SingleDatePill.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 SingleDatePill: 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.replace(/-/g, '/')} 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,iBAA4E,CAAC;AAAA,EACxF;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,QAAQ,MAAM,GAAG,GAAG,UAAU,gBAAgB,UAAoB;AAAA,KAC5G,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 SingleDatePill: 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  const formattedDate = value ? value.replace(/-/g, '/') : '';\n\n  return value ? (\n    <DSPillGroupV2>\n      <DSPillV2 type=\"label\" label={columnHeader} />\n      <DSPillV2\n        type=\"removable\"\n        label={formattedDate}\n        onRemove={handleOnRemove}\n        innerRef={innerRef}\n        dsPillPillButton={{\n          dsButtonRoot: { 'aria-label': `Remove ${formattedDate} from ${columnHeader}` },\n        }}\n      />\n    </DSPillGroupV2>\n  ) : null;\n};\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACmCnB,SACE,KADF;AAnCJ,SAAgB,mBAAmB;AACnC,SAAS,eAAe,gBAAgB;AAGjC,MAAM,iBAA4E,CAAC;AAAA,EACxF;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,gBAAgB,QAAQ,MAAM,QAAQ,MAAM,GAAG,IAAI;AAEzD,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,aAAa,SAAS,YAAY,GAAG;AAAA,QAC/E;AAAA;AAAA,IACF;AAAA,KACF,IACE;AACN;",
   "names": []
 }

package/dist/esm/parts/Filters/index.js

@@ -12,21 +12,41 @@ import {
   SingleCreatableFilter,
   SingleDateFilter,
   SingleSelectFilter,
-  FreeTextSearchFilter
+  FreeTextSearchFilter,
+  SingleSelectFilterV2,
+  MultiSelectFilterV2,
+  SingleCreatableFilterV2,
+  MultiCreatableFilterV2,
+  SingleDateFilterV2,
+  DateRangeFilterV2,
+  DateSwitcherFilterV2,
+  FreeTextSearchFilterV2,
+  CurrencyRangeFilterV2,
+  NumberRangeFilterV2
 } from "../../addons/Filters/index.js";
 import { useInternalStore, usePropsStore } from "../../configs/useStore/createInternalAndPropsContext.js";
 import { FILTER_TYPES } from "../../exported-related/index.js";
 const FilterMapper = {
   [FILTER_TYPES.SELECT]: SingleSelectFilter,
+  [FILTER_TYPES.SELECT_V2]: SingleSelectFilterV2,
   [FILTER_TYPES.CREATABLE_SELECT]: SingleCreatableFilter,
+  [FILTER_TYPES.CREATABLE_SELECT_V2]: SingleCreatableFilterV2,
   [FILTER_TYPES.MULTI_SELECT]: MultiSelectFilter,
+  [FILTER_TYPES.MULTI_SELECT_V2]: MultiSelectFilterV2,
   [FILTER_TYPES.CREATABLE_MULTI_SELECT]: MultiCreatableFilter,
+  [FILTER_TYPES.CREATABLE_MULTI_SELECT_V2]: MultiCreatableFilterV2,
   [FILTER_TYPES.SINGLE_DATE]: SingleDateFilter,
+  [FILTER_TYPES.SINGLE_DATE_V2]: SingleDateFilterV2,
   [FILTER_TYPES.DATE_RANGE]: DateRangeFilter,
+  [FILTER_TYPES.DATE_RANGE_V2]: DateRangeFilterV2,
   [FILTER_TYPES.DATE_SWITCHER]: DateSwitcherFilter,
+  [FILTER_TYPES.DATE_SWITCHER_V2]: DateSwitcherFilterV2,
   [FILTER_TYPES.NUMBER_RANGE]: NumberRangeFilter,
+  [FILTER_TYPES.NUMBER_RANGE_V2]: NumberRangeFilterV2,
   [FILTER_TYPES.CURRENCY_RANGE]: CurrencyRangeFilter,
-  [FILTER_TYPES.FREE_TEXT_SEARCH]: FreeTextSearchFilter
+  [FILTER_TYPES.CURRENCY_RANGE_V2]: CurrencyRangeFilterV2,
+  [FILTER_TYPES.FREE_TEXT_SEARCH]: FreeTextSearchFilter,
+  [FILTER_TYPES.FREE_TEXT_SEARCH_V2]: FreeTextSearchFilterV2
 };
 const FilterMapItem = (props) => {
   const { column, filters, onFiltersChange } = props;