@elliemae/ds-data-table 3.60.0-next.37 → 3.60.0-next.39

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/Headers/HeaderCell.js

@@ -1,6 +1,6 @@
 import * as React from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
-import { useContext, useMemo, useRef } from "react";
+import { useCallback, useContext, useMemo, useRef } from "react";
 import { Grid } from "@elliemae/ds-grid";
 import { StyledHeadTh, StyledHeaderRightIconsWrapper, StyledFocusWithin } from "../../styled.js";
 import { SortByCaret } from "../SortByCaret.js";
@@ -42,6 +42,13 @@ const HeaderCell = (props) => {
   const isEmptyContent = usePropsStore((state) => state.isEmptyContent);
   const firstFocuseableColumnHeaderId = usePropsStore((state) => state.firstFocuseableColumnHeaderId);
   const getOwnerProps = usePropsStore((store) => store.get);
+  const getOwnerPropsArguments = useCallback(
+    () => ({
+      columnId: column.id,
+      firstFocuseableColumnHeaderId
+    }),
+    [column.id, firstFocuseableColumnHeaderId]
+  );
   const reference = useRef(null);
   const reduxHeaders = useInternalStore((state) => state.reduxHeaders);
   const reduxHeader = useMemo(() => reduxHeaders[column.id], [reduxHeaders, column]);
@@ -66,7 +73,7 @@ const HeaderCell = (props) => {
   });
   const rightIcons = useMemo(() => {
     if (!hasRightIcons) return null;
-    return /* @__PURE__ */ jsxs(StyledHeaderRightIconsWrapper, { getOwnerProps, children: [
+    return /* @__PURE__ */ jsxs(StyledHeaderRightIconsWrapper, { getOwnerProps, getOwnerPropsArguments, children: [
       /* @__PURE__ */ jsx(
         FilterMapItem,
         {
@@ -96,6 +103,7 @@ const HeaderCell = (props) => {
   }, [
     hasRightIcons,
     getOwnerProps,
+    getOwnerPropsArguments,
     column,
     isDragOverlay,
     onFiltersChange,
@@ -135,6 +143,7 @@ const HeaderCell = (props) => {
       shouldShowDnD,
       innerRef: reference,
       getOwnerProps,
+      getOwnerPropsArguments,
       children: [
         /* @__PURE__ */ jsxs(Grid, { width: "100%", cols: hCols, children: [
           shouldShowDnD && DnDHandleComponent,

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/parts/Headers/HeaderCell.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* 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"],
-  "mappings": "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",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* 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"],
+  "mappings": "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",
   "names": []
 }