@elliemae/ds-data-table 3.60.0-next.9 → 3.61.0-rc.2

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

@@ -36,21 +36,37 @@ var import_jsx_runtime = require("react/jsx-runtime");
 var import_react = require("react");
 var import_ds_pills_v2 = require("@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 = (0, import_react.useCallback)(
+    () => onFiltersChange(filters.filter((filter) => filter.id !== column)),
+    [onFiltersChange, filters, column]
+  );
   const handleOnRemove = (0, import_react.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 = (0, import_react.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__ */ (0, import_jsx_runtime.jsxs)(import_ds_pills_v2.DSPillGroupV2, { children: [
     /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ds_pills_v2.DSPillV2, { type: "label", label: columnHeader }),
     /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
       import_ds_pills_v2.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/cjs/parts/FilterBar/components/DateSwitcherPill.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/parts/FilterBar/components/DateSwitcherPill.tsx", "../../../../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["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", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADgBnB;AAhBJ,mBAAmC;AACnC,yBAAwC;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,qBAAiB,0BAAY,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,6CAAC,oCACC;AAAA,gDAAC,+BAAS,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 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", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;AD+BnB;AA/BJ,mBAA4C;AAC5C,yBAAwC;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,mBAAe;AAAA,IACnB,MAAM,gBAAgB,QAAQ,OAAO,CAAC,WAAW,OAAO,OAAO,MAAM,CAAC;AAAA,IACtE,CAAC,iBAAiB,SAAS,MAAM;AAAA,EACnC;AAEA,QAAM,qBAAiB,0BAAY,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,4BAAwB,sBAAQ,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,6CAAC,oCACC;AAAA,gDAAC,+BAAS,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/cjs/parts/FilterBar/components/FreeTextSearchPill.js

@@ -43,16 +43,36 @@ const FreeTextSearchPillPill = ({
   onFiltersChange,
   prevRef,
   innerRef,
-  nextRef
+  nextRef,
+  onPillRemove
 }) => {
+  const removeFilter = (0, import_react.useCallback)(
+    () => onFiltersChange(filters.filter((filter) => filter.id !== column)),
+    [onFiltersChange, filters, column]
+  );
   const handleOnRemove = (0, import_react.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__ */ (0, import_jsx_runtime.jsxs)(import_ds_pills_v2.DSPillGroupV2, { children: [
     /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ds_pills_v2.DSPillV2, { type: "label", label: columnHeader }),
-    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ds_pills_v2.DSPillV2, { type: "removable", label: value, onRemove: handleOnRemove, innerRef })
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      import_ds_pills_v2.DSPillV2,
+      {
+        type: "removable",
+        label: value,
+        onRemove: handleOnRemove,
+        innerRef,
+        dsPillPillButton: {
+          dsButtonRoot: { "aria-label": `Remove ${value} from ${columnHeader}` }
+        }
+      }
+    )
   ] }) : null;
 };
 //# sourceMappingURL=FreeTextSearchPill.js.map

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/parts/FilterBar/components/FreeTextSearchPill.tsx", "../../../../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["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", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADqBnB;AArBJ,mBAAmC;AACnC,yBAAwC;AAGjC,MAAM,yBAAoF,CAAC;AAAA,EAChG;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,MAAM;AACJ,QAAM,qBAAiB,0BAAY,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,6CAAC,oCACC;AAAA,gDAAC,+BAAS,MAAK,SAAQ,OAAO,cAAc;AAAA,IAC5C,4CAAC,+BAAS,MAAK,aAAY,OAAO,OAAO,UAAU,gBAAgB,UAAoB;AAAA,KACzF,IACE;AACN;",
+  "sourcesContent": ["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", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADiCnB;AAjCJ,mBAAmC;AACnC,yBAAwC;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,mBAAe;AAAA,IACnB,MAAM,gBAAgB,QAAQ,OAAO,CAAC,WAAW,OAAO,OAAO,MAAM,CAAC;AAAA,IACtE,CAAC,iBAAiB,SAAS,MAAM;AAAA,EACnC;AAEA,QAAM,qBAAiB,0BAAY,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,6CAAC,oCACC;AAAA,gDAAC,+BAAS,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/cjs/parts/FilterBar/components/MultiSelectPill.js

@@ -44,7 +44,8 @@ const MultiSelectPill = ({
   onFiltersChange,
   prevRef,
   innerRef,
-  nextRef
+  nextRef,
+  onPillRemove
 }) => {
   const multiSelectedValue = value;
   const handleOnRemove = (0, import_react.useCallback)(
@@ -54,13 +55,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__ */ (0, import_jsx_runtime.jsxs)(import_ds_pills_v2.DSPillGroupV2, { children: [
     /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ds_pills_v2.DSPillV2, { type: "label", label: columnHeader }),
@@ -70,7 +73,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/cjs/parts/FilterBar/components/MultiSelectPill.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/parts/FilterBar/components/MultiSelectPill.tsx", "../../../../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["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", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADsCnB;AAtCJ,mBAAmC;AACnC,uBAA0B;AAC1B,yBAAwC;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,qBAAiB;AAAA,IACrB,CAAC,gBAA4C;AAC3C,YAAM,iBAAa,4BAAU,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,6CAAC,oCACC;AAAA,gDAAC,+BAAS,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 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", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADwCnB;AAxCJ,mBAAmC;AACnC,uBAA0B;AAC1B,yBAAwC;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,qBAAiB;AAAA,IACrB,CAAC,gBAA4C;AAC3C,YAAM,iBAAa,4BAAU,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,6CAAC,oCACC;AAAA,gDAAC,+BAAS,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/cjs/parts/FilterBar/components/NumberRangePill.js

@@ -43,16 +43,39 @@ const NumberRangePill = ({
   onFiltersChange,
   prevRef,
   innerRef,
-  nextRef
+  nextRef,
+  onPillRemove
 }) => {
+  const removeFilter = (0, import_react.useCallback)(
+    () => onFiltersChange(filters.filter((filter) => filter.id !== column)),
+    [onFiltersChange, filters, column]
+  );
   const handleOnRemove = (0, import_react.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 = (0, import_react.useMemo)(() => {
+    if (!value?.from) return "";
+    if (value?.to) return `${value.from} - ${value.to}`;
+    return value.from;
+  }, [value]);
   return (value?.from ?? "") !== "" && (value?.to ?? "") !== "" ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_ds_pills_v2.DSPillGroupV2, { children: [
     /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ds_pills_v2.DSPillV2, { type: "label", label: columnHeader }),
-    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ds_pills_v2.DSPillV2, { type: "removable", label: `${value.from} - ${value.to}`, onRemove: handleOnRemove, innerRef })
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      import_ds_pills_v2.DSPillV2,
+      {
+        type: "removable",
+        label: formattedRange,
+        onRemove: handleOnRemove,
+        innerRef,
+        dsPillPillButton: { dsButtonRoot: { "aria-label": `Remove ${formattedRange} from ${columnHeader}` } }
+      }
+    )
   ] }) : null;
 };
 //# sourceMappingURL=NumberRangePill.js.map

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/parts/FilterBar/components/NumberRangePill.tsx", "../../../../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["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", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADqBnB;AArBJ,mBAAmC;AACnC,yBAAwC;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,qBAAiB,0BAAY,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,6CAAC,oCACC;AAAA,gDAAC,+BAAS,MAAK,SAAQ,OAAO,cAAc;AAAA,IAC5C,4CAAC,+BAAS,MAAK,aAAY,OAAO,GAAG,MAAM,IAAI,MAAM,MAAM,EAAE,IAAI,UAAU,gBAAgB,UAAoB;AAAA,KACjH,IACE;AACN;",
+  "sourcesContent": ["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", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADuCnB;AAvCJ,mBAA4C;AAC5C,yBAAwC;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,mBAAe;AAAA,IACnB,MAAM,gBAAgB,QAAQ,OAAO,CAAC,WAAW,OAAO,OAAO,MAAM,CAAC;AAAA,IACtE,CAAC,iBAAiB,SAAS,MAAM;AAAA,EACnC;AAEA,QAAM,qBAAiB,0BAAY,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,qBAAiB,sBAAQ,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,6CAAC,oCACC;AAAA,gDAAC,+BAAS,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/cjs/parts/FilterBar/components/SelectPill.js

@@ -43,16 +43,36 @@ const SelectPill = ({
   onFiltersChange,
   prevRef,
   innerRef,
-  nextRef
+  nextRef,
+  onPillRemove
 }) => {
+  const removeFilter = (0, import_react.useCallback)(
+    () => onFiltersChange(filters.filter((filter) => filter.id !== column)),
+    [onFiltersChange, filters, column]
+  );
   const handleOnRemove = (0, import_react.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__ */ (0, import_jsx_runtime.jsxs)(import_ds_pills_v2.DSPillGroupV2, { children: [
     /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ds_pills_v2.DSPillV2, { type: "label", label: columnHeader }),
-    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ds_pills_v2.DSPillV2, { type: "removable", label: value.label, onRemove: handleOnRemove, innerRef })
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      import_ds_pills_v2.DSPillV2,
+      {
+        type: "removable",
+        label: value.label,
+        onRemove: handleOnRemove,
+        innerRef,
+        dsPillPillButton: {
+          dsButtonRoot: { "aria-label": `Remove ${value.label} from ${columnHeader}` }
+        }
+      }
+    )
   ] }) : null;
 };
 //# sourceMappingURL=SelectPill.js.map

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/parts/FilterBar/components/SelectPill.tsx", "../../../../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["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", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADsBnB;AAtBJ,mBAAmC;AACnC,yBAAwC;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,qBAAiB,0BAAY,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,6CAAC,oCACC;AAAA,gDAAC,+BAAS,MAAK,SAAQ,OAAO,cAAc;AAAA,IAC5C,4CAAC,+BAAS,MAAK,aAAY,OAAO,MAAM,OAAO,UAAU,gBAAgB,UAAoB;AAAA,KAC/F,IACE;AACN;",
+  "sourcesContent": ["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", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADkCnB;AAlCJ,mBAAmC;AACnC,yBAAwC;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,mBAAe;AAAA,IACnB,MAAM,gBAAgB,QAAQ,OAAO,CAAC,WAAW,OAAO,OAAO,MAAM,CAAC;AAAA,IACtE,CAAC,iBAAiB,SAAS,MAAM;AAAA,EACnC;AAEA,QAAM,qBAAiB,0BAAY,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,6CAAC,oCACC;AAAA,gDAAC,+BAAS,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/cjs/parts/FilterBar/components/SingleDatePill.js

@@ -43,16 +43,37 @@ const SingleDatePill = ({
   onFiltersChange,
   prevRef,
   innerRef,
-  nextRef
+  nextRef,
+  onPillRemove
 }) => {
+  const removeFilter = (0, import_react.useCallback)(
+    () => onFiltersChange(filters.filter((filter) => filter.id !== column)),
+    [onFiltersChange, filters, column]
+  );
   const handleOnRemove = (0, import_react.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__ */ (0, import_jsx_runtime.jsxs)(import_ds_pills_v2.DSPillGroupV2, { children: [
     /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ds_pills_v2.DSPillV2, { type: "label", label: columnHeader }),
-    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ds_pills_v2.DSPillV2, { type: "removable", label: value.replace(/-/g, "/"), onRemove: handleOnRemove, innerRef })
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      import_ds_pills_v2.DSPillV2,
+      {
+        type: "removable",
+        label: formattedDate,
+        onRemove: handleOnRemove,
+        innerRef,
+        dsPillPillButton: {
+          dsButtonRoot: { "aria-label": `Remove ${formattedDate} from ${columnHeader}` }
+        }
+      }
+    )
   ] }) : null;
 };
 //# sourceMappingURL=SingleDatePill.js.map

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/parts/FilterBar/components/SingleDatePill.tsx", "../../../../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["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", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADqBnB;AArBJ,mBAAmC;AACnC,yBAAwC;AAGjC,MAAM,iBAA4E,CAAC;AAAA,EACxF;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,MAAM;AACJ,QAAM,qBAAiB,0BAAY,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,6CAAC,oCACC;AAAA,gDAAC,+BAAS,MAAK,SAAQ,OAAO,cAAc;AAAA,IAC5C,4CAAC,+BAAS,MAAK,aAAY,OAAO,MAAM,QAAQ,MAAM,GAAG,GAAG,UAAU,gBAAgB,UAAoB;AAAA,KAC5G,IACE;AACN;",
+  "sourcesContent": ["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", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADmCnB;AAnCJ,mBAAmC;AACnC,yBAAwC;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,mBAAe;AAAA,IACnB,MAAM,gBAAgB,QAAQ,OAAO,CAAC,WAAW,OAAO,OAAO,MAAM,CAAC;AAAA,IACtE,CAAC,iBAAiB,SAAS,MAAM;AAAA,EACnC;AAEA,QAAM,qBAAiB,0BAAY,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,6CAAC,oCACC;AAAA,gDAAC,+BAAS,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/cjs/parts/Filters/index.js

@@ -40,15 +40,25 @@ var import_createInternalAndPropsContext = require("../../configs/useStore/creat
 var import_exported_related = require("../../exported-related/index.js");
 const FilterMapper = {
   [import_exported_related.FILTER_TYPES.SELECT]: import_Filters.SingleSelectFilter,
+  [import_exported_related.FILTER_TYPES.SELECT_V2]: import_Filters.SingleSelectFilterV2,
   [import_exported_related.FILTER_TYPES.CREATABLE_SELECT]: import_Filters.SingleCreatableFilter,
+  [import_exported_related.FILTER_TYPES.CREATABLE_SELECT_V2]: import_Filters.SingleCreatableFilterV2,
   [import_exported_related.FILTER_TYPES.MULTI_SELECT]: import_Filters.MultiSelectFilter,
+  [import_exported_related.FILTER_TYPES.MULTI_SELECT_V2]: import_Filters.MultiSelectFilterV2,
   [import_exported_related.FILTER_TYPES.CREATABLE_MULTI_SELECT]: import_Filters.MultiCreatableFilter,
+  [import_exported_related.FILTER_TYPES.CREATABLE_MULTI_SELECT_V2]: import_Filters.MultiCreatableFilterV2,
   [import_exported_related.FILTER_TYPES.SINGLE_DATE]: import_Filters.SingleDateFilter,
+  [import_exported_related.FILTER_TYPES.SINGLE_DATE_V2]: import_Filters.SingleDateFilterV2,
   [import_exported_related.FILTER_TYPES.DATE_RANGE]: import_Filters.DateRangeFilter,
+  [import_exported_related.FILTER_TYPES.DATE_RANGE_V2]: import_Filters.DateRangeFilterV2,
   [import_exported_related.FILTER_TYPES.DATE_SWITCHER]: import_Filters.DateSwitcherFilter,
+  [import_exported_related.FILTER_TYPES.DATE_SWITCHER_V2]: import_Filters.DateSwitcherFilterV2,
   [import_exported_related.FILTER_TYPES.NUMBER_RANGE]: import_Filters.NumberRangeFilter,
+  [import_exported_related.FILTER_TYPES.NUMBER_RANGE_V2]: import_Filters.NumberRangeFilterV2,
   [import_exported_related.FILTER_TYPES.CURRENCY_RANGE]: import_Filters.CurrencyRangeFilter,
-  [import_exported_related.FILTER_TYPES.FREE_TEXT_SEARCH]: import_Filters.FreeTextSearchFilter
+  [import_exported_related.FILTER_TYPES.CURRENCY_RANGE_V2]: import_Filters.CurrencyRangeFilterV2,
+  [import_exported_related.FILTER_TYPES.FREE_TEXT_SEARCH]: import_Filters.FreeTextSearchFilter,
+  [import_exported_related.FILTER_TYPES.FREE_TEXT_SEARCH_V2]: import_Filters.FreeTextSearchFilterV2
 };
 const FilterMapItem = (props) => {
   const { column, filters, onFiltersChange } = props;

package/dist/cjs/parts/Filters/index.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/parts/Filters/index.tsx", "../../../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["import { cloneDeep } from 'lodash-es';\nimport React, { useCallback, useMemo } from 'react';\nimport {\n  CurrencyRangeFilter,\n  DateRangeFilter,\n  DateSwitcherFilter,\n  MultiCreatableFilter,\n  MultiSelectFilter,\n  NumberRangeFilter,\n  SingleCreatableFilter,\n  SingleDateFilter,\n  SingleSelectFilter,\n  FreeTextSearchFilter,\n} from '../../addons/Filters/index.js';\nimport { useInternalStore, usePropsStore } from '../../configs/useStore/createInternalAndPropsContext.js';\nimport { FILTER_TYPES } from '../../exported-related/index.js';\nimport type { DSDataTableT } from '../../react-desc-prop-types.js';\n\nconst FilterMapper = {\n  [FILTER_TYPES.SELECT]: SingleSelectFilter,\n  [FILTER_TYPES.CREATABLE_SELECT]: SingleCreatableFilter,\n  [FILTER_TYPES.MULTI_SELECT]: MultiSelectFilter,\n  [FILTER_TYPES.CREATABLE_MULTI_SELECT]: MultiCreatableFilter,\n  [FILTER_TYPES.SINGLE_DATE]: SingleDateFilter,\n  [FILTER_TYPES.DATE_RANGE]: DateRangeFilter,\n  [FILTER_TYPES.DATE_SWITCHER]: DateSwitcherFilter,\n  [FILTER_TYPES.NUMBER_RANGE]: NumberRangeFilter,\n  [FILTER_TYPES.CURRENCY_RANGE]: CurrencyRangeFilter,\n  [FILTER_TYPES.FREE_TEXT_SEARCH]: FreeTextSearchFilter,\n} as const;\n\nexport const FilterMapItem: React.ComponentType<DSDataTableT.FilterItemProps> = (props) => {\n  const { column, filters, onFiltersChange } = props;\n  const domIdAffix = usePropsStore((state) => state.domIdAffix);\n  const patchHeaderFilterButtonAndMenu = useInternalStore((state) => state.patchHeaderFilterButtonAndMenu);\n  const patchHeader = useInternalStore((state) => state.patchHeader);\n\n  const filterValue = useMemo(() => filters.find((filter) => filter.id === column.id), [column.id, filters]);\n\n  const onValueChange = useCallback(\n    (type: string, newValue: unknown) => {\n      const filterIndex = filters.findIndex((filter) => filter.id === column.id);\n      if (newValue === undefined) {\n        const newFilters = filters.filter((filter) => filter.id !== column.id);\n        onFiltersChange(newFilters);\n      } else if (filterIndex === -1) {\n        onFiltersChange([...cloneDeep(filters), { id: column.id, type, value: newValue }]);\n      } else {\n        const newFilters = cloneDeep(filters);\n        newFilters[filterIndex].type = type;\n        newFilters[filterIndex].value = newValue;\n        onFiltersChange(newFilters);\n      }\n    },\n    [column.id, filters, onFiltersChange],\n  );\n\n  const filterProps = {\n    ...props,\n    // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment, @typescript-eslint/no-explicit-any\n    filterValue: filterValue?.value as any,\n    onValueChange,\n    patchHeader,\n    patchHeaderFilterButtonAndMenu,\n    domIdAffix,\n  };\n\n  if (typeof column.filter === 'string') {\n    if (!(column.filter in FilterMapper)) {\n      throw new Error(`column.filter must be a supported out-of-the-box filter in ${column.id}`);\n    }\n    const FilterComp = FilterMapper[column.filter as keyof typeof FilterMapper];\n    return <FilterComp {...filterProps} />;\n  }\n\n  if (column.Filter) {\n    const FilterComp = column.Filter;\n    return <FilterComp {...filterProps} />;\n  }\n\n  // Column doesn't have any filters\n  return null;\n};\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADwEZ;AAxEX,uBAA0B;AAC1B,mBAA4C;AAC5C,qBAWO;AACP,2CAAgD;AAChD,8BAA6B;AAG7B,MAAM,eAAe;AAAA,EACnB,CAAC,qCAAa,MAAM,GAAG;AAAA,EACvB,CAAC,qCAAa,gBAAgB,GAAG;AAAA,EACjC,CAAC,qCAAa,YAAY,GAAG;AAAA,EAC7B,CAAC,qCAAa,sBAAsB,GAAG;AAAA,EACvC,CAAC,qCAAa,WAAW,GAAG;AAAA,EAC5B,CAAC,qCAAa,UAAU,GAAG;AAAA,EAC3B,CAAC,qCAAa,aAAa,GAAG;AAAA,EAC9B,CAAC,qCAAa,YAAY,GAAG;AAAA,EAC7B,CAAC,qCAAa,cAAc,GAAG;AAAA,EAC/B,CAAC,qCAAa,gBAAgB,GAAG;AACnC;AAEO,MAAM,gBAAmE,CAAC,UAAU;AACzF,QAAM,EAAE,QAAQ,SAAS,gBAAgB,IAAI;AAC7C,QAAM,iBAAa,oDAAc,CAAC,UAAU,MAAM,UAAU;AAC5D,QAAM,qCAAiC,uDAAiB,CAAC,UAAU,MAAM,8BAA8B;AACvG,QAAM,kBAAc,uDAAiB,CAAC,UAAU,MAAM,WAAW;AAEjE,QAAM,kBAAc,sBAAQ,MAAM,QAAQ,KAAK,CAAC,WAAW,OAAO,OAAO,OAAO,EAAE,GAAG,CAAC,OAAO,IAAI,OAAO,CAAC;AAEzG,QAAM,oBAAgB;AAAA,IACpB,CAAC,MAAc,aAAsB;AACnC,YAAM,cAAc,QAAQ,UAAU,CAAC,WAAW,OAAO,OAAO,OAAO,EAAE;AACzE,UAAI,aAAa,QAAW;AAC1B,cAAM,aAAa,QAAQ,OAAO,CAAC,WAAW,OAAO,OAAO,OAAO,EAAE;AACrE,wBAAgB,UAAU;AAAA,MAC5B,WAAW,gBAAgB,IAAI;AAC7B,wBAAgB,CAAC,OAAG,4BAAU,OAAO,GAAG,EAAE,IAAI,OAAO,IAAI,MAAM,OAAO,SAAS,CAAC,CAAC;AAAA,MACnF,OAAO;AACL,cAAM,iBAAa,4BAAU,OAAO;AACpC,mBAAW,WAAW,EAAE,OAAO;AAC/B,mBAAW,WAAW,EAAE,QAAQ;AAChC,wBAAgB,UAAU;AAAA,MAC5B;AAAA,IACF;AAAA,IACA,CAAC,OAAO,IAAI,SAAS,eAAe;AAAA,EACtC;AAEA,QAAM,cAAc;AAAA,IAClB,GAAG;AAAA;AAAA,IAEH,aAAa,aAAa;AAAA,IAC1B;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF;AAEA,MAAI,OAAO,OAAO,WAAW,UAAU;AACrC,QAAI,EAAE,OAAO,UAAU,eAAe;AACpC,YAAM,IAAI,MAAM,8DAA8D,OAAO,EAAE,EAAE;AAAA,IAC3F;AACA,UAAM,aAAa,aAAa,OAAO,MAAmC;AAC1E,WAAO,4CAAC,cAAY,GAAG,aAAa;AAAA,EACtC;AAEA,MAAI,OAAO,QAAQ;AACjB,UAAM,aAAa,OAAO;AAC1B,WAAO,4CAAC,cAAY,GAAG,aAAa;AAAA,EACtC;AAGA,SAAO;AACT;",
+  "sourcesContent": ["import { cloneDeep } from 'lodash-es';\nimport React, { useCallback, useMemo } from 'react';\nimport {\n  CurrencyRangeFilter,\n  DateRangeFilter,\n  DateSwitcherFilter,\n  MultiCreatableFilter,\n  MultiSelectFilter,\n  NumberRangeFilter,\n  SingleCreatableFilter,\n  SingleDateFilter,\n  SingleSelectFilter,\n  FreeTextSearchFilter,\n  SingleSelectFilterV2,\n  MultiSelectFilterV2,\n  SingleCreatableFilterV2,\n  MultiCreatableFilterV2,\n  SingleDateFilterV2,\n  DateRangeFilterV2,\n  DateSwitcherFilterV2,\n  FreeTextSearchFilterV2,\n  CurrencyRangeFilterV2,\n  NumberRangeFilterV2,\n} from '../../addons/Filters/index.js';\nimport { useInternalStore, usePropsStore } from '../../configs/useStore/createInternalAndPropsContext.js';\nimport { FILTER_TYPES } from '../../exported-related/index.js';\nimport type { DSDataTableT } from '../../react-desc-prop-types.js';\n\nconst FilterMapper = {\n  [FILTER_TYPES.SELECT]: SingleSelectFilter,\n  [FILTER_TYPES.SELECT_V2]: SingleSelectFilterV2,\n  [FILTER_TYPES.CREATABLE_SELECT]: SingleCreatableFilter,\n  [FILTER_TYPES.CREATABLE_SELECT_V2]: SingleCreatableFilterV2,\n  [FILTER_TYPES.MULTI_SELECT]: MultiSelectFilter,\n  [FILTER_TYPES.MULTI_SELECT_V2]: MultiSelectFilterV2,\n  [FILTER_TYPES.CREATABLE_MULTI_SELECT]: MultiCreatableFilter,\n  [FILTER_TYPES.CREATABLE_MULTI_SELECT_V2]: MultiCreatableFilterV2,\n  [FILTER_TYPES.SINGLE_DATE]: SingleDateFilter,\n  [FILTER_TYPES.SINGLE_DATE_V2]: SingleDateFilterV2,\n  [FILTER_TYPES.DATE_RANGE]: DateRangeFilter,\n  [FILTER_TYPES.DATE_RANGE_V2]: DateRangeFilterV2,\n  [FILTER_TYPES.DATE_SWITCHER]: DateSwitcherFilter,\n  [FILTER_TYPES.DATE_SWITCHER_V2]: DateSwitcherFilterV2,\n  [FILTER_TYPES.NUMBER_RANGE]: NumberRangeFilter,\n  [FILTER_TYPES.NUMBER_RANGE_V2]: NumberRangeFilterV2,\n  [FILTER_TYPES.CURRENCY_RANGE]: CurrencyRangeFilter,\n  [FILTER_TYPES.CURRENCY_RANGE_V2]: CurrencyRangeFilterV2,\n  [FILTER_TYPES.FREE_TEXT_SEARCH]: FreeTextSearchFilter,\n  [FILTER_TYPES.FREE_TEXT_SEARCH_V2]: FreeTextSearchFilterV2,\n} as const;\n\nexport const FilterMapItem: React.ComponentType<DSDataTableT.FilterItemProps> = (props) => {\n  const { column, filters, onFiltersChange } = props;\n  const domIdAffix = usePropsStore((state) => state.domIdAffix);\n  const patchHeaderFilterButtonAndMenu = useInternalStore((state) => state.patchHeaderFilterButtonAndMenu);\n  const patchHeader = useInternalStore((state) => state.patchHeader);\n\n  const filterValue = useMemo(() => filters.find((filter) => filter.id === column.id), [column.id, filters]);\n\n  const onValueChange = useCallback(\n    (type: string, newValue: unknown) => {\n      const filterIndex = filters.findIndex((filter) => filter.id === column.id);\n      if (newValue === undefined) {\n        const newFilters = filters.filter((filter) => filter.id !== column.id);\n        onFiltersChange(newFilters);\n      } else if (filterIndex === -1) {\n        onFiltersChange([...cloneDeep(filters), { id: column.id, type, value: newValue }]);\n      } else {\n        const newFilters = cloneDeep(filters);\n        newFilters[filterIndex].type = type;\n        newFilters[filterIndex].value = newValue;\n        onFiltersChange(newFilters);\n      }\n    },\n    [column.id, filters, onFiltersChange],\n  );\n\n  const filterProps = {\n    ...props,\n    // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment, @typescript-eslint/no-explicit-any\n    filterValue: filterValue?.value as any,\n    onValueChange,\n    patchHeader,\n    patchHeaderFilterButtonAndMenu,\n    domIdAffix,\n  };\n\n  if (typeof column.filter === 'string') {\n    if (!(column.filter in FilterMapper)) {\n      throw new Error(`column.filter must be a supported out-of-the-box filter in ${column.id}`);\n    }\n    const FilterComp = FilterMapper[column.filter as keyof typeof FilterMapper];\n    return <FilterComp {...filterProps} />;\n  }\n\n  if (column.Filter) {\n    const FilterComp = column.Filter;\n    return <FilterComp {...filterProps} />;\n  }\n\n  // Column doesn't have any filters\n  return null;\n};\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;AD4FZ;AA5FX,uBAA0B;AAC1B,mBAA4C;AAC5C,qBAqBO;AACP,2CAAgD;AAChD,8BAA6B;AAG7B,MAAM,eAAe;AAAA,EACnB,CAAC,qCAAa,MAAM,GAAG;AAAA,EACvB,CAAC,qCAAa,SAAS,GAAG;AAAA,EAC1B,CAAC,qCAAa,gBAAgB,GAAG;AAAA,EACjC,CAAC,qCAAa,mBAAmB,GAAG;AAAA,EACpC,CAAC,qCAAa,YAAY,GAAG;AAAA,EAC7B,CAAC,qCAAa,eAAe,GAAG;AAAA,EAChC,CAAC,qCAAa,sBAAsB,GAAG;AAAA,EACvC,CAAC,qCAAa,yBAAyB,GAAG;AAAA,EAC1C,CAAC,qCAAa,WAAW,GAAG;AAAA,EAC5B,CAAC,qCAAa,cAAc,GAAG;AAAA,EAC/B,CAAC,qCAAa,UAAU,GAAG;AAAA,EAC3B,CAAC,qCAAa,aAAa,GAAG;AAAA,EAC9B,CAAC,qCAAa,aAAa,GAAG;AAAA,EAC9B,CAAC,qCAAa,gBAAgB,GAAG;AAAA,EACjC,CAAC,qCAAa,YAAY,GAAG;AAAA,EAC7B,CAAC,qCAAa,eAAe,GAAG;AAAA,EAChC,CAAC,qCAAa,cAAc,GAAG;AAAA,EAC/B,CAAC,qCAAa,iBAAiB,GAAG;AAAA,EAClC,CAAC,qCAAa,gBAAgB,GAAG;AAAA,EACjC,CAAC,qCAAa,mBAAmB,GAAG;AACtC;AAEO,MAAM,gBAAmE,CAAC,UAAU;AACzF,QAAM,EAAE,QAAQ,SAAS,gBAAgB,IAAI;AAC7C,QAAM,iBAAa,oDAAc,CAAC,UAAU,MAAM,UAAU;AAC5D,QAAM,qCAAiC,uDAAiB,CAAC,UAAU,MAAM,8BAA8B;AACvG,QAAM,kBAAc,uDAAiB,CAAC,UAAU,MAAM,WAAW;AAEjE,QAAM,kBAAc,sBAAQ,MAAM,QAAQ,KAAK,CAAC,WAAW,OAAO,OAAO,OAAO,EAAE,GAAG,CAAC,OAAO,IAAI,OAAO,CAAC;AAEzG,QAAM,oBAAgB;AAAA,IACpB,CAAC,MAAc,aAAsB;AACnC,YAAM,cAAc,QAAQ,UAAU,CAAC,WAAW,OAAO,OAAO,OAAO,EAAE;AACzE,UAAI,aAAa,QAAW;AAC1B,cAAM,aAAa,QAAQ,OAAO,CAAC,WAAW,OAAO,OAAO,OAAO,EAAE;AACrE,wBAAgB,UAAU;AAAA,MAC5B,WAAW,gBAAgB,IAAI;AAC7B,wBAAgB,CAAC,OAAG,4BAAU,OAAO,GAAG,EAAE,IAAI,OAAO,IAAI,MAAM,OAAO,SAAS,CAAC,CAAC;AAAA,MACnF,OAAO;AACL,cAAM,iBAAa,4BAAU,OAAO;AACpC,mBAAW,WAAW,EAAE,OAAO;AAC/B,mBAAW,WAAW,EAAE,QAAQ;AAChC,wBAAgB,UAAU;AAAA,MAC5B;AAAA,IACF;AAAA,IACA,CAAC,OAAO,IAAI,SAAS,eAAe;AAAA,EACtC;AAEA,QAAM,cAAc;AAAA,IAClB,GAAG;AAAA;AAAA,IAEH,aAAa,aAAa;AAAA,IAC1B;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF;AAEA,MAAI,OAAO,OAAO,WAAW,UAAU;AACrC,QAAI,EAAE,OAAO,UAAU,eAAe;AACpC,YAAM,IAAI,MAAM,8DAA8D,OAAO,EAAE,EAAE;AAAA,IAC3F;AACA,UAAM,aAAa,aAAa,OAAO,MAAmC;AAC1E,WAAO,4CAAC,cAAY,GAAG,aAAa;AAAA,EACtC;AAEA,MAAI,OAAO,QAAQ;AACjB,UAAM,aAAa,OAAO;AAC1B,WAAO,4CAAC,cAAY,GAAG,aAAa;AAAA,EACtC;AAGA,SAAO;AACT;",
   "names": []
 }

package/dist/cjs/parts/Headers/HeaderCell.js

@@ -75,6 +75,13 @@ const HeaderCell = (props) => {
   const isEmptyContent = (0, import_createInternalAndPropsContext.usePropsStore)((state) => state.isEmptyContent);
   const firstFocuseableColumnHeaderId = (0, import_createInternalAndPropsContext.usePropsStore)((state) => state.firstFocuseableColumnHeaderId);
   const getOwnerProps = (0, import_createInternalAndPropsContext.usePropsStore)((store) => store.get);
+  const getOwnerPropsArguments = (0, import_react.useCallback)(
+    () => ({
+      columnId: column.id,
+      firstFocuseableColumnHeaderId
+    }),
+    [column.id, firstFocuseableColumnHeaderId]
+  );
   const reference = (0, import_react.useRef)(null);
   const reduxHeaders = (0, import_createInternalAndPropsContext.useInternalStore)((state) => state.reduxHeaders);
   const reduxHeader = (0, import_react.useMemo)(() => reduxHeaders[column.id], [reduxHeaders, column]);
@@ -99,7 +106,7 @@ const HeaderCell = (props) => {
   });
   const rightIcons = (0, import_react.useMemo)(() => {
     if (!hasRightIcons) return null;
-    return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_styled.StyledHeaderRightIconsWrapper, { getOwnerProps, children: [
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_styled.StyledHeaderRightIconsWrapper, { getOwnerProps, getOwnerPropsArguments, children: [
       /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
         import_Filters.FilterMapItem,
         {
@@ -129,6 +136,7 @@ const HeaderCell = (props) => {
   }, [
     hasRightIcons,
     getOwnerProps,
+    getOwnerPropsArguments,
     column,
     isDragOverlay,
     onFiltersChange,
@@ -168,6 +176,7 @@ const HeaderCell = (props) => {
       shouldShowDnD,
       innerRef: reference,
       getOwnerProps,
+      getOwnerPropsArguments,
       children: [
         /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_ds_grid.Grid, { width: "100%", cols: hCols, children: [
           shouldShowDnD && DnDHandleComponent,

package/dist/cjs/parts/Headers/HeaderCell.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/parts/Headers/HeaderCell.tsx", "../../../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["/* eslint-disable no-nested-ternary */\n/* eslint-disable max-statements */\n/* eslint-disable complexity */\nimport React, { useContext, useMemo, useRef } from 'react';\nimport { Grid } from '@elliemae/ds-grid';\nimport { StyledHeadTh, StyledHeaderRightIconsWrapper, StyledFocusWithin } from '../../styled.js';\nimport { SortByCaret } from '../SortByCaret.js';\nimport { DragHandle } from '../DnDHandle.js';\nimport { SortableItemContext } from '../HoC/SortableItemContext.js';\nimport { FilterMapItem } from '../Filters/index.js';\nimport { HeaderResizer } from './HeaderResizer.js';\nimport type { DSDataTableT } from '../../react-desc-prop-types.js';\nimport { useHeaderCellHandlers } from './useHeaderCellHandlers.js';\nimport { useHeaderCellConfig } from './useHeaderCellConfig.js';\nimport { DATA_TESTID } from '../../configs/constants.js';\nimport { HeaderCellTitle } from './HeaderCellTitle.js';\nimport { useInternalStore, usePropsStore } from '../../configs/useStore/createInternalAndPropsContext.js';\n\nconst buildScreenReaderInstructions = ({\n  colSpan,\n  draggable,\n  filterable,\n  sortable,\n}: {\n  colSpan: number;\n  draggable: boolean;\n  filterable: boolean;\n  sortable: boolean;\n}) => {\n  const preffix = colSpan === 1 ? '' : 'Column Group. ';\n  if (!draggable && !filterable && !sortable) return preffix;\n\n  let message = sortable\n    ? 'You can sort the data ascendingly/descendingly by this column. Use the up / down arrows keys to do so'\n    : '';\n  if (draggable && filterable) {\n    message = `This column is draggable and filterable. To enable these interactions press the enter key. ${message}`;\n  } else if (draggable || filterable) {\n    message = `This column is ${\n      draggable ? 'draggable' : 'filterable'\n    }. To enable this interaction press the enter key. ${message}`;\n  }\n  return `${preffix}${message}`;\n};\n\ninterface HeaderCellCompProps {\n  column: DSDataTableT.InternalColumn;\n  isDragOverlay?: boolean;\n  colSpan: number;\n}\n\nexport const HeaderCell: React.ComponentType<HeaderCellCompProps> = (props) => {\n  const { column, isDragOverlay, colSpan } = props;\n  const disabledRows = usePropsStore((state) => state.disabledRows);\n  const dragAndDropColumns = usePropsStore((state) => state.dragAndDropColumns);\n  const onFiltersChange = usePropsStore((state) => state.onFiltersChange);\n  const filters = usePropsStore((state) => state.filters);\n  const textWrap = usePropsStore((state) => state.textWrap);\n  const noResultsMessage = usePropsStore((state) => state.noResultsMessage);\n  const domIdAffix = usePropsStore((state) => state.domIdAffix);\n  const noResultsSecondaryMessage = usePropsStore((state) => state.noResultsSecondaryMessage);\n  const isEmptyContent = usePropsStore((state) => state.isEmptyContent);\n  const firstFocuseableColumnHeaderId = usePropsStore((state) => state.firstFocuseableColumnHeaderId);\n  const getOwnerProps = usePropsStore((store) => store.get);\n  const reference = useRef<HTMLDivElement | null>(null);\n\n  const reduxHeaders = useInternalStore((state) => state.reduxHeaders);\n  const reduxHeader = useMemo(() => reduxHeaders[column.id], [reduxHeaders, column]);\n  const dragHandleRef = useRef<HTMLDivElement | null>(null);\n  const filterIconRef = useRef<HTMLButtonElement | null>(null);\n  const resizeHandlerRef = useRef<HTMLInputElement | null>(null);\n  const sortRef = useRef<HTMLButtonElement | null>(null);\n  const { draggableProps } = useContext(SortableItemContext);\n\n  const { hasFilter, hasDnD, hasSortingCaret, hasRightIcons, shouldShowDnD, hCols, isDragging, shouldShowResize } =\n    useHeaderCellConfig(props);\n\n  const { handleSort, ...handlers } = useHeaderCellHandlers({\n    hasFilter,\n    column,\n    hasDnD,\n    dragHandleRef,\n    filterIconRef,\n    resizeHandlerRef,\n    sortRef,\n    hasSortingCaret,\n    isDragOverlay,\n    draggableProps,\n    referenceColumn: reference,\n  });\n\n  const rightIcons = useMemo(() => {\n    if (!hasRightIcons) return null;\n    return (\n      <StyledHeaderRightIconsWrapper getOwnerProps={getOwnerProps}>\n        <FilterMapItem\n          column={column}\n          referenceColumn={!isDragOverlay ? reference.current : undefined}\n          onFiltersChange={onFiltersChange}\n          reduxHeader={reduxHeader}\n          filters={filters}\n          innerRef={filterIconRef}\n        />\n        {hasSortingCaret && (\n          <SortByCaret\n            isSortedDesc={column.isSortedDesc}\n            onClick={(e) => {\n              e.stopPropagation();\n              handleSort(e as React.MouseEvent);\n            }}\n            isReachable={reduxHeader?.withTabStops ?? false}\n            column={column}\n            reduxHeader={reduxHeader}\n            innerRef={sortRef}\n          />\n        )}\n      </StyledHeaderRightIconsWrapper>\n    );\n  }, [\n    hasRightIcons,\n    getOwnerProps,\n    column,\n    isDragOverlay,\n    onFiltersChange,\n    reduxHeader,\n    filters,\n    hasSortingCaret,\n    handleSort,\n  ]);\n\n  const DnDHandleComponent = useMemo(\n    () => (\n      <Grid mr=\"2px\" alignItems=\"center\" style={{ position: 'relative' }}>\n        <StyledFocusWithin hideFocus={isDragging}>\n          <DragHandle\n            key={column.id}\n            innerRef={dragHandleRef}\n            isReachable={reduxHeader?.withTabStops ?? false}\n            id={`header-dnd-handle-${column.id}-${domIdAffix}`}\n            isDragOverlay={isDragOverlay}\n            isDisabled={disabledRows[column.id]}\n          />\n        </StyledFocusWithin>\n      </Grid>\n    ),\n    [column.id, disabledRows, domIdAffix, isDragOverlay, isDragging, reduxHeader?.withTabStops],\n  );\n\n  const screenReaderInstructionsId = `sr-${column.id}-instructions-${domIdAffix}`.replace(/ /g, '');\n  return (\n    <StyledHeadTh\n      column={column}\n      onClick={handleSort}\n      {...handlers}\n      role=\"columnheader\"\n      {...(isEmptyContent && column.id === firstFocuseableColumnHeaderId\n        ? { 'aria-label': `${noResultsMessage}. ${noResultsSecondaryMessage ? `${noResultsSecondaryMessage}.` : ''}` }\n        : {})}\n      aria-describedby={screenReaderInstructionsId}\n      aria-sort={hasSortingCaret ? (column.isSortedDesc ? 'descending' : 'ascending') : 'none'}\n      data-testid={DATA_TESTID.DATA_TABLE_HEADER}\n      tabIndex={column.isFocuseable === false ? -1 : 0}\n      isDraggingActive={Boolean(draggableProps && draggableProps.active)}\n      shouldShowDnD={shouldShowDnD}\n      innerRef={reference}\n      getOwnerProps={getOwnerProps}\n    >\n      <Grid width=\"100%\" cols={hCols}>\n        {shouldShowDnD && DnDHandleComponent}\n        <HeaderCellTitle column={column} draggableProps={draggableProps} textWrap={textWrap} />\n        {rightIcons}\n        {shouldShowResize && (\n          <HeaderResizer column={column} innerRef={resizeHandlerRef} isReachable={reduxHeader?.withTabStops ?? false} />\n        )}\n      </Grid>\n      <span id={screenReaderInstructionsId} style={{ display: 'none' }} aria-hidden=\"false\">\n        {buildScreenReaderInstructions({\n          colSpan,\n          draggable: dragAndDropColumns && column.disableDnD !== true,\n          filterable: hasFilter,\n          sortable: column.canSort ?? false,\n        })}\n      </span>\n    </StyledHeadTh>\n  );\n};\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": "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",
+  "sourcesContent": ["/* eslint-disable no-nested-ternary */\n/* eslint-disable max-statements */\n/* eslint-disable complexity */\nimport React, { useCallback, useContext, useMemo, useRef } from 'react';\nimport { Grid } from '@elliemae/ds-grid';\nimport { StyledHeadTh, StyledHeaderRightIconsWrapper, StyledFocusWithin } from '../../styled.js';\nimport { SortByCaret } from '../SortByCaret.js';\nimport { DragHandle } from '../DnDHandle.js';\nimport { SortableItemContext } from '../HoC/SortableItemContext.js';\nimport { FilterMapItem } from '../Filters/index.js';\nimport { HeaderResizer } from './HeaderResizer.js';\nimport type { DSDataTableT } from '../../react-desc-prop-types.js';\nimport { useHeaderCellHandlers } from './useHeaderCellHandlers.js';\nimport { useHeaderCellConfig } from './useHeaderCellConfig.js';\nimport { DATA_TESTID } from '../../configs/constants.js';\nimport { HeaderCellTitle } from './HeaderCellTitle.js';\nimport { useInternalStore, usePropsStore } from '../../configs/useStore/createInternalAndPropsContext.js';\n\nconst buildScreenReaderInstructions = ({\n  colSpan,\n  draggable,\n  filterable,\n  sortable,\n}: {\n  colSpan: number;\n  draggable: boolean;\n  filterable: boolean;\n  sortable: boolean;\n}) => {\n  const preffix = colSpan === 1 ? '' : 'Column Group. ';\n  if (!draggable && !filterable && !sortable) return preffix;\n\n  let message = sortable\n    ? 'You can sort the data ascendingly/descendingly by this column. Use the up / down arrows keys to do so'\n    : '';\n  if (draggable && filterable) {\n    message = `This column is draggable and filterable. To enable these interactions press the enter key. ${message}`;\n  } else if (draggable || filterable) {\n    message = `This column is ${\n      draggable ? 'draggable' : 'filterable'\n    }. To enable this interaction press the enter key. ${message}`;\n  }\n  return `${preffix}${message}`;\n};\n\ninterface HeaderCellCompProps {\n  column: DSDataTableT.InternalColumn;\n  isDragOverlay?: boolean;\n  colSpan: number;\n}\n\nexport const HeaderCell: React.ComponentType<HeaderCellCompProps> = (props) => {\n  const { column, isDragOverlay, colSpan } = props;\n  const disabledRows = usePropsStore((state) => state.disabledRows);\n  const dragAndDropColumns = usePropsStore((state) => state.dragAndDropColumns);\n  const onFiltersChange = usePropsStore((state) => state.onFiltersChange);\n  const filters = usePropsStore((state) => state.filters);\n  const textWrap = usePropsStore((state) => state.textWrap);\n  const noResultsMessage = usePropsStore((state) => state.noResultsMessage);\n  const domIdAffix = usePropsStore((state) => state.domIdAffix);\n  const noResultsSecondaryMessage = usePropsStore((state) => state.noResultsSecondaryMessage);\n  const isEmptyContent = usePropsStore((state) => state.isEmptyContent);\n  const firstFocuseableColumnHeaderId = usePropsStore((state) => state.firstFocuseableColumnHeaderId);\n  const getOwnerProps = usePropsStore((store) => store.get);\n  const getOwnerPropsArguments = useCallback(\n    () => ({\n      columnId: column.id,\n      firstFocuseableColumnHeaderId,\n    }),\n    [column.id, firstFocuseableColumnHeaderId],\n  );\n  const reference = useRef<HTMLDivElement | null>(null);\n\n  const reduxHeaders = useInternalStore((state) => state.reduxHeaders);\n  const reduxHeader = useMemo(() => reduxHeaders[column.id], [reduxHeaders, column]);\n  const dragHandleRef = useRef<HTMLDivElement | null>(null);\n  const filterIconRef = useRef<HTMLButtonElement | null>(null);\n  const resizeHandlerRef = useRef<HTMLInputElement | null>(null);\n  const sortRef = useRef<HTMLButtonElement | null>(null);\n  const { draggableProps } = useContext(SortableItemContext);\n\n  const { hasFilter, hasDnD, hasSortingCaret, hasRightIcons, shouldShowDnD, hCols, isDragging, shouldShowResize } =\n    useHeaderCellConfig(props);\n\n  const { handleSort, ...handlers } = useHeaderCellHandlers({\n    hasFilter,\n    column,\n    hasDnD,\n    dragHandleRef,\n    filterIconRef,\n    resizeHandlerRef,\n    sortRef,\n    hasSortingCaret,\n    isDragOverlay,\n    draggableProps,\n    referenceColumn: reference,\n  });\n\n  const rightIcons = useMemo(() => {\n    if (!hasRightIcons) return null;\n    return (\n      <StyledHeaderRightIconsWrapper getOwnerProps={getOwnerProps} getOwnerPropsArguments={getOwnerPropsArguments}>\n        <FilterMapItem\n          column={column}\n          referenceColumn={!isDragOverlay ? reference.current : undefined}\n          onFiltersChange={onFiltersChange}\n          reduxHeader={reduxHeader}\n          filters={filters}\n          innerRef={filterIconRef}\n        />\n        {hasSortingCaret && (\n          <SortByCaret\n            isSortedDesc={column.isSortedDesc}\n            onClick={(e) => {\n              e.stopPropagation();\n              handleSort(e as React.MouseEvent);\n            }}\n            isReachable={reduxHeader?.withTabStops ?? false}\n            column={column}\n            reduxHeader={reduxHeader}\n            innerRef={sortRef}\n          />\n        )}\n      </StyledHeaderRightIconsWrapper>\n    );\n  }, [\n    hasRightIcons,\n    getOwnerProps,\n    getOwnerPropsArguments,\n    column,\n    isDragOverlay,\n    onFiltersChange,\n    reduxHeader,\n    filters,\n    hasSortingCaret,\n    handleSort,\n  ]);\n\n  const DnDHandleComponent = useMemo(\n    () => (\n      <Grid mr=\"2px\" alignItems=\"center\" style={{ position: 'relative' }}>\n        <StyledFocusWithin hideFocus={isDragging}>\n          <DragHandle\n            key={column.id}\n            innerRef={dragHandleRef}\n            isReachable={reduxHeader?.withTabStops ?? false}\n            id={`header-dnd-handle-${column.id}-${domIdAffix}`}\n            isDragOverlay={isDragOverlay}\n            isDisabled={disabledRows[column.id]}\n          />\n        </StyledFocusWithin>\n      </Grid>\n    ),\n    [column.id, disabledRows, domIdAffix, isDragOverlay, isDragging, reduxHeader?.withTabStops],\n  );\n\n  const screenReaderInstructionsId = `sr-${column.id}-instructions-${domIdAffix}`.replace(/ /g, '');\n  return (\n    <StyledHeadTh\n      column={column}\n      onClick={handleSort}\n      {...handlers}\n      role=\"columnheader\"\n      {...(isEmptyContent && column.id === firstFocuseableColumnHeaderId\n        ? { 'aria-label': `${noResultsMessage}. ${noResultsSecondaryMessage ? `${noResultsSecondaryMessage}.` : ''}` }\n        : {})}\n      aria-describedby={screenReaderInstructionsId}\n      aria-sort={hasSortingCaret ? (column.isSortedDesc ? 'descending' : 'ascending') : 'none'}\n      data-testid={DATA_TESTID.DATA_TABLE_HEADER}\n      tabIndex={column.isFocuseable === false ? -1 : 0}\n      isDraggingActive={Boolean(draggableProps && draggableProps.active)}\n      shouldShowDnD={shouldShowDnD}\n      innerRef={reference}\n      getOwnerProps={getOwnerProps}\n      getOwnerPropsArguments={getOwnerPropsArguments}\n    >\n      <Grid width=\"100%\" cols={hCols}>\n        {shouldShowDnD && DnDHandleComponent}\n        <HeaderCellTitle column={column} draggableProps={draggableProps} textWrap={textWrap} />\n        {rightIcons}\n        {shouldShowResize && (\n          <HeaderResizer column={column} innerRef={resizeHandlerRef} isReachable={reduxHeader?.withTabStops ?? false} />\n        )}\n      </Grid>\n      <span id={screenReaderInstructionsId} style={{ display: 'none' }} aria-hidden=\"false\">\n        {buildScreenReaderInstructions({\n          colSpan,\n          draggable: dragAndDropColumns && column.disableDnD !== true,\n          filterable: hasFilter,\n          sortable: column.canSort ?? false,\n        })}\n      </span>\n    </StyledHeadTh>\n  );\n};\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": "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",
   "names": []
 }