@elliemae/ds-data-table 3.60.0-next.6 → 3.60.0-next.61

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

@@ -11,6 +11,7 @@ const DateRangeFilter = (props) => {
   const {
     column,
     column: { id },
+    referenceColumn,
     filterValue = emptyFilterValue,
     onValueChange,
     patchHeaderFilterButtonAndMenu,
@@ -30,9 +31,10 @@ const DateRangeFilter = (props) => {
     }
   }, [startDate, endDate]);
   const ref = useRef(null);
+  const lastElementRef = useRef(null);
   const shouldFocus = useRef(true);
   const handleRef = useCallback((newRef) => {
-    if (ref.current) ref.current = newRef;
+    ref.current = newRef;
     if (shouldFocus.current) {
       setTimeout(() => {
         newRef?.focus();
@@ -48,8 +50,11 @@ const DateRangeFilter = (props) => {
   return /* @__PURE__ */ jsx(
     FilterPopover,
     {
+      firstElementRef: ref,
+      lastElementRef,
       reduxHeader,
       column,
+      columnReference: referenceColumn,
       columnId: id,
       menuContent: /* @__PURE__ */ jsxs(Grid, { width: "260px", "data-testid": DATA_TESTID.DATA_TABLE_DATE_RANGE_CONTROLLER, children: [
         /* @__PURE__ */ jsx(Grid, { p: "xxs", style: { background: "white" }, children: /* @__PURE__ */ jsx(
@@ -74,7 +79,8 @@ const DateRangeFilter = (props) => {
                 onFromDateChange: setStartDate,
                 toDate: endDate,
                 onToDateChange: setEndDate,
-                type: "date-range-picker-controller-only"
+                type: "date-range-picker-controller-only",
+                lastElementRef
               }
             )
           }

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../../../scripts/build/transpile/react-shim.js", "../../../../../../src/addons/Filters/Components/DateRangeFilter/index.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { useEffect, useCallback, useRef, useState } from 'react';\nimport { DatePicker2 } from '@elliemae/ds-icons';\nimport { Grid } from '@elliemae/ds-grid';\nimport { DSControlledDateRangePicker } from '@elliemae/ds-form-date-range-picker';\nimport { FilterPopover, FILTER_TYPES } from '../../../../exported-related/index.js';\nimport type { DSDataTableT } from '../../../../react-desc-prop-types.js';\nimport { DATA_TESTID } from '../../../../configs/constants.js';\n\nconst emptyFilterValue = { startDate: null, endDate: null };\n\ninterface DateRangeFilterValue {\n  startDate: string | null;\n  endDate: string | null;\n}\n\nexport const DateRangeFilter: React.ComponentType<DSDataTableT.FilterProps<DateRangeFilterValue>> = (props) => {\n  const {\n    column,\n    column: { id },\n    filterValue = emptyFilterValue,\n    onValueChange,\n    patchHeaderFilterButtonAndMenu,\n    reduxHeader,\n    innerRef,\n  } = props;\n\n  const dateRange = filterValue;\n\n  const [startDate, setStartDate] = useState(dateRange.startDate || '');\n  const [endDate, setEndDate] = useState(dateRange.endDate || '');\n\n  useEffect(() => {\n    setStartDate(dateRange.startDate || '');\n    setEndDate(dateRange.endDate || '');\n  }, [dateRange]);\n\n  useEffect(() => {\n    if (startDate && endDate && !startDate.includes('_') && !endDate.includes('_')) {\n      onValueChange(FILTER_TYPES.DATE_RANGE, { startDate, endDate });\n    }\n    // We are missing onValueChange on purpose, this is an internal function and won't cause any problems\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [startDate, endDate]);\n\n  const ref = useRef<HTMLInputElement | null>(null);\n  const shouldFocus = useRef(true);\n  const handleRef = useCallback((newRef: HTMLInputElement | HTMLButtonElement | null) => {\n    if (ref.current) ref.current = newRef as HTMLInputElement | null;\n    if (shouldFocus.current) {\n      setTimeout(() => {\n        newRef?.focus();\n        shouldFocus.current = false;\n      });\n    }\n  }, []);\n\n  useEffect(() => {\n    if (reduxHeader?.hideFilterMenu) {\n      shouldFocus.current = true;\n    }\n  }, [reduxHeader?.hideFilterMenu]);\n\n  return (\n    <FilterPopover\n      reduxHeader={reduxHeader}\n      column={column}\n      columnId={id}\n      menuContent={\n        <Grid width=\"260px\" data-testid={DATA_TESTID.DATA_TABLE_DATE_RANGE_CONTROLLER}>\n          <Grid p=\"xxs\" style={{ background: 'white' }}>\n            <DSControlledDateRangePicker\n              fromDate={startDate}\n              onFromDateChange={setStartDate}\n              toDate={endDate}\n              onToDateChange={setEndDate}\n              type=\"date-range-inputs\"\n              innerRef={handleRef}\n            />\n          </Grid>\n          <Grid\n            onKeyDown={(e) =>\n              e.code === 'Enter' &&\n              setTimeout(() => patchHeaderFilterButtonAndMenu(id, !!(dateRange.startDate || dateRange.endDate)), 0)\n            }\n          >\n            <DSControlledDateRangePicker\n              fromDate={startDate}\n              onFromDateChange={setStartDate}\n              toDate={endDate}\n              onToDateChange={setEndDate}\n              type=\"date-range-picker-controller-only\"\n            />\n          </Grid>\n        </Grid>\n      }\n      triggerIcon={<DatePicker2 />}\n      innerRef={innerRef}\n      ariaLabel=\"Open Date Range Filter\"\n    />\n  );\n};\n"],
-  "mappings": "AAAA,YAAY,WAAW;ACoEf,SAEI,KAFJ;AApER,SAAgB,WAAW,aAAa,QAAQ,gBAAgB;AAChE,SAAS,mBAAmB;AAC5B,SAAS,YAAY;AACrB,SAAS,mCAAmC;AAC5C,SAAS,eAAe,oBAAoB;AAE5C,SAAS,mBAAmB;AAE5B,MAAM,mBAAmB,EAAE,WAAW,MAAM,SAAS,KAAK;AAOnD,MAAM,kBAAuF,CAAC,UAAU;AAC7G,QAAM;AAAA,IACJ;AAAA,IACA,QAAQ,EAAE,GAAG;AAAA,IACb,cAAc;AAAA,IACd;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,IAAI;AAEJ,QAAM,YAAY;AAElB,QAAM,CAAC,WAAW,YAAY,IAAI,SAAS,UAAU,aAAa,EAAE;AACpE,QAAM,CAAC,SAAS,UAAU,IAAI,SAAS,UAAU,WAAW,EAAE;AAE9D,YAAU,MAAM;AACd,iBAAa,UAAU,aAAa,EAAE;AACtC,eAAW,UAAU,WAAW,EAAE;AAAA,EACpC,GAAG,CAAC,SAAS,CAAC;AAEd,YAAU,MAAM;AACd,QAAI,aAAa,WAAW,CAAC,UAAU,SAAS,GAAG,KAAK,CAAC,QAAQ,SAAS,GAAG,GAAG;AAC9E,oBAAc,aAAa,YAAY,EAAE,WAAW,QAAQ,CAAC;AAAA,IAC/D;AAAA,EAGF,GAAG,CAAC,WAAW,OAAO,CAAC;AAEvB,QAAM,MAAM,OAAgC,IAAI;AAChD,QAAM,cAAc,OAAO,IAAI;AAC/B,QAAM,YAAY,YAAY,CAAC,WAAwD;AACrF,QAAI,IAAI,QAAS,KAAI,UAAU;AAC/B,QAAI,YAAY,SAAS;AACvB,iBAAW,MAAM;AACf,gBAAQ,MAAM;AACd,oBAAY,UAAU;AAAA,MACxB,CAAC;AAAA,IACH;AAAA,EACF,GAAG,CAAC,CAAC;AAEL,YAAU,MAAM;AACd,QAAI,aAAa,gBAAgB;AAC/B,kBAAY,UAAU;AAAA,IACxB;AAAA,EACF,GAAG,CAAC,aAAa,cAAc,CAAC;AAEhC,SACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA;AAAA,MACA,UAAU;AAAA,MACV,aACE,qBAAC,QAAK,OAAM,SAAQ,eAAa,YAAY,kCAC3C;AAAA,4BAAC,QAAK,GAAE,OAAM,OAAO,EAAE,YAAY,QAAQ,GACzC;AAAA,UAAC;AAAA;AAAA,YACC,UAAU;AAAA,YACV,kBAAkB;AAAA,YAClB,QAAQ;AAAA,YACR,gBAAgB;AAAA,YAChB,MAAK;AAAA,YACL,UAAU;AAAA;AAAA,QACZ,GACF;AAAA,QACA;AAAA,UAAC;AAAA;AAAA,YACC,WAAW,CAAC,MACV,EAAE,SAAS,WACX,WAAW,MAAM,+BAA+B,IAAI,CAAC,EAAE,UAAU,aAAa,UAAU,QAAQ,GAAG,CAAC;AAAA,YAGtG;AAAA,cAAC;AAAA;AAAA,gBACC,UAAU;AAAA,gBACV,kBAAkB;AAAA,gBAClB,QAAQ;AAAA,gBACR,gBAAgB;AAAA,gBAChB,MAAK;AAAA;AAAA,YACP;AAAA;AAAA,QACF;AAAA,SACF;AAAA,MAEF,aAAa,oBAAC,eAAY;AAAA,MAC1B;AAAA,MACA,WAAU;AAAA;AAAA,EACZ;AAEJ;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { useEffect, useCallback, useRef, useState } from 'react';\nimport { DatePicker2 } from '@elliemae/ds-icons';\nimport { Grid } from '@elliemae/ds-grid';\nimport { DSControlledDateRangePicker } from '@elliemae/ds-form-date-range-picker';\nimport { FilterPopover, FILTER_TYPES } from '../../../../exported-related/index.js';\nimport type { DSDataTableT } from '../../../../react-desc-prop-types.js';\nimport { DATA_TESTID } from '../../../../configs/constants.js';\n\nconst emptyFilterValue = { startDate: null, endDate: null };\n\ninterface DateRangeFilterValue {\n  startDate: string | null;\n  endDate: string | null;\n}\n\nexport const DateRangeFilter: React.ComponentType<DSDataTableT.FilterProps<DateRangeFilterValue>> = (props) => {\n  const {\n    column,\n    column: { id },\n    referenceColumn,\n    filterValue = emptyFilterValue,\n    onValueChange,\n    patchHeaderFilterButtonAndMenu,\n    reduxHeader,\n    innerRef,\n  } = props;\n\n  const dateRange = filterValue;\n\n  const [startDate, setStartDate] = useState(dateRange.startDate || '');\n  const [endDate, setEndDate] = useState(dateRange.endDate || '');\n\n  useEffect(() => {\n    setStartDate(dateRange.startDate || '');\n    setEndDate(dateRange.endDate || '');\n  }, [dateRange]);\n\n  useEffect(() => {\n    if (startDate && endDate && !startDate.includes('_') && !endDate.includes('_')) {\n      onValueChange(FILTER_TYPES.DATE_RANGE, { startDate, endDate });\n    }\n    // We are missing onValueChange on purpose, this is an internal function and won't cause any problems\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [startDate, endDate]);\n\n  const ref = useRef<HTMLInputElement | null>(null);\n  const lastElementRef = useRef<HTMLElement | null>(null);\n  const shouldFocus = useRef(true);\n  const handleRef = useCallback((newRef: HTMLInputElement | HTMLButtonElement | null) => {\n    ref.current = newRef as HTMLInputElement | null;\n    if (shouldFocus.current) {\n      setTimeout(() => {\n        newRef?.focus();\n        shouldFocus.current = false;\n      });\n    }\n  }, []);\n\n  useEffect(() => {\n    if (reduxHeader?.hideFilterMenu) {\n      shouldFocus.current = true;\n    }\n  }, [reduxHeader?.hideFilterMenu]);\n\n  return (\n    <FilterPopover\n      firstElementRef={ref}\n      lastElementRef={lastElementRef}\n      reduxHeader={reduxHeader}\n      column={column}\n      columnReference={referenceColumn}\n      columnId={id}\n      menuContent={\n        <Grid width=\"260px\" data-testid={DATA_TESTID.DATA_TABLE_DATE_RANGE_CONTROLLER}>\n          <Grid p=\"xxs\" style={{ background: 'white' }}>\n            <DSControlledDateRangePicker\n              fromDate={startDate}\n              onFromDateChange={setStartDate}\n              toDate={endDate}\n              onToDateChange={setEndDate}\n              type=\"date-range-inputs\"\n              innerRef={handleRef}\n            />\n          </Grid>\n          <Grid\n            onKeyDown={(e) =>\n              e.code === 'Enter' &&\n              setTimeout(() => patchHeaderFilterButtonAndMenu(id, !!(dateRange.startDate || dateRange.endDate)), 0)\n            }\n          >\n            <DSControlledDateRangePicker\n              fromDate={startDate}\n              onFromDateChange={setStartDate}\n              toDate={endDate}\n              onToDateChange={setEndDate}\n              type=\"date-range-picker-controller-only\"\n              lastElementRef={lastElementRef}\n            />\n          </Grid>\n        </Grid>\n      }\n      triggerIcon={<DatePicker2 />}\n      innerRef={innerRef}\n      ariaLabel=\"Open Date Range Filter\"\n    />\n  );\n};\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACyEf,SAEI,KAFJ;AAzER,SAAgB,WAAW,aAAa,QAAQ,gBAAgB;AAChE,SAAS,mBAAmB;AAC5B,SAAS,YAAY;AACrB,SAAS,mCAAmC;AAC5C,SAAS,eAAe,oBAAoB;AAE5C,SAAS,mBAAmB;AAE5B,MAAM,mBAAmB,EAAE,WAAW,MAAM,SAAS,KAAK;AAOnD,MAAM,kBAAuF,CAAC,UAAU;AAC7G,QAAM;AAAA,IACJ;AAAA,IACA,QAAQ,EAAE,GAAG;AAAA,IACb;AAAA,IACA,cAAc;AAAA,IACd;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,IAAI;AAEJ,QAAM,YAAY;AAElB,QAAM,CAAC,WAAW,YAAY,IAAI,SAAS,UAAU,aAAa,EAAE;AACpE,QAAM,CAAC,SAAS,UAAU,IAAI,SAAS,UAAU,WAAW,EAAE;AAE9D,YAAU,MAAM;AACd,iBAAa,UAAU,aAAa,EAAE;AACtC,eAAW,UAAU,WAAW,EAAE;AAAA,EACpC,GAAG,CAAC,SAAS,CAAC;AAEd,YAAU,MAAM;AACd,QAAI,aAAa,WAAW,CAAC,UAAU,SAAS,GAAG,KAAK,CAAC,QAAQ,SAAS,GAAG,GAAG;AAC9E,oBAAc,aAAa,YAAY,EAAE,WAAW,QAAQ,CAAC;AAAA,IAC/D;AAAA,EAGF,GAAG,CAAC,WAAW,OAAO,CAAC;AAEvB,QAAM,MAAM,OAAgC,IAAI;AAChD,QAAM,iBAAiB,OAA2B,IAAI;AACtD,QAAM,cAAc,OAAO,IAAI;AAC/B,QAAM,YAAY,YAAY,CAAC,WAAwD;AACrF,QAAI,UAAU;AACd,QAAI,YAAY,SAAS;AACvB,iBAAW,MAAM;AACf,gBAAQ,MAAM;AACd,oBAAY,UAAU;AAAA,MACxB,CAAC;AAAA,IACH;AAAA,EACF,GAAG,CAAC,CAAC;AAEL,YAAU,MAAM;AACd,QAAI,aAAa,gBAAgB;AAC/B,kBAAY,UAAU;AAAA,IACxB;AAAA,EACF,GAAG,CAAC,aAAa,cAAc,CAAC;AAEhC,SACE;AAAA,IAAC;AAAA;AAAA,MACC,iBAAiB;AAAA,MACjB;AAAA,MACA;AAAA,MACA;AAAA,MACA,iBAAiB;AAAA,MACjB,UAAU;AAAA,MACV,aACE,qBAAC,QAAK,OAAM,SAAQ,eAAa,YAAY,kCAC3C;AAAA,4BAAC,QAAK,GAAE,OAAM,OAAO,EAAE,YAAY,QAAQ,GACzC;AAAA,UAAC;AAAA;AAAA,YACC,UAAU;AAAA,YACV,kBAAkB;AAAA,YAClB,QAAQ;AAAA,YACR,gBAAgB;AAAA,YAChB,MAAK;AAAA,YACL,UAAU;AAAA;AAAA,QACZ,GACF;AAAA,QACA;AAAA,UAAC;AAAA;AAAA,YACC,WAAW,CAAC,MACV,EAAE,SAAS,WACX,WAAW,MAAM,+BAA+B,IAAI,CAAC,EAAE,UAAU,aAAa,UAAU,QAAQ,GAAG,CAAC;AAAA,YAGtG;AAAA,cAAC;AAAA;AAAA,gBACC,UAAU;AAAA,gBACV,kBAAkB;AAAA,gBAClB,QAAQ;AAAA,gBACR,gBAAgB;AAAA,gBAChB,MAAK;AAAA,gBACL;AAAA;AAAA,YACF;AAAA;AAAA,QACF;AAAA,SACF;AAAA,MAEF,aAAa,oBAAC,eAAY;AAAA,MAC1B;AAAA,MACA,WAAU;AAAA;AAAA,EACZ;AAEJ;",
   "names": []
 }

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

@@ -0,0 +1,147 @@
+import * as React from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useRef, useCallback, useState, useEffect } from "react";
+import { DatePicker2 } from "@elliemae/ds-icons";
+import { Grid } from "@elliemae/ds-grid";
+import { DSControlledDateRangePicker } from "@elliemae/ds-form-date-range-picker";
+import { DSControlledDateTimePicker } from "@elliemae/ds-form-date-time-picker";
+import { DSControlledCheckbox } from "@elliemae/ds-form-checkbox";
+import { uid } from "uid";
+import { FILTER_TYPES } from "../../../../exported-related/index.js";
+import { FilterPopoverV2 } from "../../../../exported-related/FilterPopover/FilterPopoverV2.js";
+import { DATA_TESTID } from "../../../../configs/constants.js";
+const emptyFilterValue = { startDate: null, endDate: null, isDateRange: false };
+const DateSwitcherFilterV2 = (props) => {
+  const {
+    column,
+    column: { id },
+    referenceColumn,
+    filterValue = emptyFilterValue,
+    onValueChange,
+    patchHeaderFilterButtonAndMenu,
+    reduxHeader,
+    innerRef,
+    domIdAffix = uid(4)
+  } = props;
+  const ref = useRef(null);
+  const dateRange = filterValue;
+  const [startDate, setStartDate] = useState(dateRange.startDate || "");
+  const [endDate, setEndDate] = useState(dateRange.endDate || "");
+  const [isDateRange, setIsDateRange] = useState(dateRange.isDateRange || false);
+  const handleRef = useCallback(
+    (newRef) => {
+      ref.current = newRef;
+      if (!reduxHeader?.hideFilterMenu) {
+        setTimeout(() => newRef?.focus());
+      }
+    },
+    [reduxHeader?.hideFilterMenu]
+  );
+  const handleSubmit = useCallback(
+    (e) => {
+      e.preventDefault();
+      const hasValidRange = startDate && endDate && !startDate.includes("_") && !endDate.includes("_");
+      if (hasValidRange) {
+        onValueChange(FILTER_TYPES.DATE_SWITCHER, { startDate, endDate, isDateRange });
+      } else {
+        return;
+      }
+      patchHeaderFilterButtonAndMenu(id, true);
+      innerRef.current?.focus();
+    },
+    [endDate, id, innerRef, isDateRange, onValueChange, patchHeaderFilterButtonAndMenu, startDate]
+  );
+  const handleReset = useCallback(() => {
+    setStartDate("");
+    setEndDate("");
+    setIsDateRange(false);
+    onValueChange(FILTER_TYPES.DATE_SWITCHER, void 0);
+    patchHeaderFilterButtonAndMenu(id, true);
+    innerRef.current?.focus();
+  }, [id, innerRef, onValueChange, patchHeaderFilterButtonAndMenu]);
+  useEffect(() => {
+    if (reduxHeader?.hideFilterMenu) {
+      setStartDate(dateRange.startDate || "");
+      setEndDate(dateRange.endDate || "");
+      setIsDateRange(dateRange.isDateRange || false);
+    }
+  }, [dateRange.endDate, dateRange.isDateRange, dateRange.startDate, reduxHeader?.hideFilterMenu]);
+  return /* @__PURE__ */ jsx(
+    FilterPopoverV2,
+    {
+      onFilterSubmit: handleSubmit,
+      onFilterReset: handleReset,
+      firstElementRef: ref,
+      reduxHeader,
+      column,
+      columnReference: referenceColumn,
+      columnId: id,
+      menuContent: /* @__PURE__ */ jsxs(Grid, { width: "260px", "data-testid": DATA_TESTID.DATA_TABLE_DATE_RANGE_CONTROLLER, children: [
+        /* @__PURE__ */ jsxs(Grid, { p: "xxs", gutter: "xxs", style: { background: "white" }, children: [
+          /* @__PURE__ */ jsx("div", { "data-testid": DATA_TESTID.DATA_TABLE_DATE_RANGE_CONTROLLER_CHECKBOX_SWITCHER, children: /* @__PURE__ */ jsx(
+            DSControlledCheckbox,
+            {
+              checked: isDateRange,
+              name: "Date range",
+              label: "Date Range",
+              id: `date-range-switcher-id-internal-${domIdAffix}`,
+              onChange: () => {
+                setIsDateRange(!isDateRange);
+                setStartDate("");
+                setEndDate("");
+              },
+              innerRef: handleRef
+            }
+          ) }),
+          isDateRange ? /* @__PURE__ */ jsx(
+            DSControlledDateRangePicker,
+            {
+              fromDate: startDate,
+              onFromDateChange: setStartDate,
+              toDate: endDate,
+              onToDateChange: setEndDate,
+              type: "date-range-inputs"
+            }
+          ) : /* @__PURE__ */ jsx(
+            DSControlledDateTimePicker,
+            {
+              date: startDate,
+              onDateChange: (_date) => {
+                setStartDate(_date);
+                setEndDate(_date);
+              },
+              type: "date-inputs"
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsx(Grid, { children: isDateRange ? /* @__PURE__ */ jsx(
+          DSControlledDateRangePicker,
+          {
+            fromDate: startDate,
+            onFromDateChange: setStartDate,
+            toDate: endDate,
+            onToDateChange: setEndDate,
+            type: "date-range-picker-controller-only"
+          }
+        ) : /* @__PURE__ */ jsx(
+          DSControlledDateTimePicker,
+          {
+            date: startDate,
+            onDateChange: (_date) => {
+              setStartDate(_date);
+              setEndDate(_date);
+            },
+            type: "date-picker-controller-only"
+          }
+        ) })
+      ] }),
+      triggerIcon: /* @__PURE__ */ jsx(DatePicker2, {}),
+      innerRef,
+      ariaLabel: "Open Date Range Filter"
+    }
+  );
+};
+export {
+  DateSwitcherFilterV2
+};
+//# sourceMappingURL=DateSwitcherFilterV2.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../../../../../scripts/build/transpile/react-shim.js", "../../../../../../src/addons/Filters/Components/DateSwitcherFilter/DateSwitcherFilterV2.tsx"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { useRef, useCallback, useState, useEffect } from 'react';\nimport { DatePicker2 } from '@elliemae/ds-icons';\nimport { Grid } from '@elliemae/ds-grid';\nimport { DSControlledDateRangePicker } from '@elliemae/ds-form-date-range-picker';\nimport { DSControlledDateTimePicker } from '@elliemae/ds-form-date-time-picker';\nimport { DSControlledCheckbox } from '@elliemae/ds-form-checkbox';\nimport { uid } from 'uid';\nimport { FILTER_TYPES } from '../../../../exported-related/index.js';\nimport { FilterPopoverV2 } from '../../../../exported-related/FilterPopover/FilterPopoverV2.js';\nimport type { DSDataTableT } from '../../../../react-desc-prop-types.js';\nimport { DATA_TESTID } from '../../../../configs/constants.js';\n\nconst emptyFilterValue = { startDate: null, endDate: null, isDateRange: false };\n\ninterface DateSwitcherFilterValue {\n  startDate: string | null;\n  endDate: string | null;\n  isDateRange: boolean;\n}\n\nexport const DateSwitcherFilterV2: React.ComponentType<DSDataTableT.FilterProps<DateSwitcherFilterValue>> = (props) => {\n  const {\n    column,\n    column: { id },\n    referenceColumn,\n    filterValue = emptyFilterValue,\n    onValueChange,\n    patchHeaderFilterButtonAndMenu,\n    reduxHeader,\n    innerRef,\n    domIdAffix = uid(4),\n  } = props;\n\n  const ref = useRef<HTMLInputElement | null>(null);\n  const dateRange = filterValue;\n\n  const [startDate, setStartDate] = useState(dateRange.startDate || '');\n  const [endDate, setEndDate] = useState(dateRange.endDate || '');\n  const [isDateRange, setIsDateRange] = useState<boolean>(dateRange.isDateRange || false);\n\n  const handleRef = useCallback(\n    (newRef: HTMLInputElement | HTMLButtonElement | null) => {\n      ref.current = newRef as HTMLInputElement | null;\n      if (!reduxHeader?.hideFilterMenu) {\n        setTimeout(() => newRef?.focus());\n      }\n    },\n    [reduxHeader?.hideFilterMenu],\n  );\n  const handleSubmit = useCallback(\n    (e: React.SyntheticEvent) => {\n      e.preventDefault();\n\n      const hasValidRange = startDate && endDate && !startDate.includes('_') && !endDate.includes('_');\n\n      if (hasValidRange) {\n        onValueChange(FILTER_TYPES.DATE_SWITCHER, { startDate, endDate, isDateRange });\n      } else {\n        return;\n      }\n\n      patchHeaderFilterButtonAndMenu(id, true);\n      innerRef.current?.focus();\n    },\n    [endDate, id, innerRef, isDateRange, onValueChange, patchHeaderFilterButtonAndMenu, startDate],\n  );\n  const handleReset = useCallback(() => {\n    setStartDate('');\n    setEndDate('');\n    setIsDateRange(false);\n    onValueChange(FILTER_TYPES.DATE_SWITCHER, undefined);\n    patchHeaderFilterButtonAndMenu(id, true);\n    innerRef.current?.focus();\n  }, [id, innerRef, onValueChange, patchHeaderFilterButtonAndMenu]);\n\n  useEffect(() => {\n    if (reduxHeader?.hideFilterMenu) {\n      // When the menu closes without applying, discard draft state\n      setStartDate(dateRange.startDate || '');\n      setEndDate(dateRange.endDate || '');\n      setIsDateRange(dateRange.isDateRange || false);\n    }\n  }, [dateRange.endDate, dateRange.isDateRange, dateRange.startDate, reduxHeader?.hideFilterMenu]);\n\n  return (\n    <FilterPopoverV2\n      onFilterSubmit={handleSubmit}\n      onFilterReset={handleReset}\n      firstElementRef={ref}\n      reduxHeader={reduxHeader}\n      column={column}\n      columnReference={referenceColumn}\n      columnId={id}\n      menuContent={\n        <Grid width=\"260px\" data-testid={DATA_TESTID.DATA_TABLE_DATE_RANGE_CONTROLLER}>\n          <Grid p=\"xxs\" gutter=\"xxs\" style={{ background: 'white' }}>\n            <div data-testid={DATA_TESTID.DATA_TABLE_DATE_RANGE_CONTROLLER_CHECKBOX_SWITCHER}>\n              <DSControlledCheckbox\n                checked={isDateRange}\n                name=\"Date range\"\n                label=\"Date Range\"\n                id={`date-range-switcher-id-internal-${domIdAffix}`}\n                onChange={() => {\n                  setIsDateRange(!isDateRange);\n                  setStartDate('');\n                  setEndDate('');\n                }}\n                innerRef={handleRef}\n              />\n            </div>\n            {isDateRange ? (\n              <DSControlledDateRangePicker\n                fromDate={startDate}\n                onFromDateChange={setStartDate}\n                toDate={endDate}\n                onToDateChange={setEndDate}\n                type=\"date-range-inputs\"\n              />\n            ) : (\n              <DSControlledDateTimePicker\n                date={startDate}\n                onDateChange={(_date) => {\n                  setStartDate(_date);\n                  setEndDate(_date);\n                }}\n                type=\"date-inputs\"\n              />\n            )}\n          </Grid>\n          <Grid>\n            {isDateRange ? (\n              <DSControlledDateRangePicker\n                fromDate={startDate}\n                onFromDateChange={setStartDate}\n                toDate={endDate}\n                onToDateChange={setEndDate}\n                type=\"date-range-picker-controller-only\"\n              />\n            ) : (\n              <DSControlledDateTimePicker\n                date={startDate}\n                onDateChange={(_date) => {\n                  setStartDate(_date);\n                  setEndDate(_date);\n                }}\n                type=\"date-picker-controller-only\"\n              />\n            )}\n          </Grid>\n        </Grid>\n      }\n      triggerIcon={<DatePicker2 />}\n      innerRef={innerRef}\n      ariaLabel=\"Open Date Range Filter\"\n    />\n  );\n};\n"],
+  "mappings": "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",
+  "names": []
+}

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

@@ -14,6 +14,7 @@ const DateSwitcherFilter = (props) => {
   const {
     column,
     column: { id },
+    referenceColumn,
     filterValue = emptyFilterValue,
     onValueChange,
     patchHeaderFilterButtonAndMenu,
@@ -22,6 +23,7 @@ const DateSwitcherFilter = (props) => {
     domIdAffix = uid(4)
   } = props;
   const ref = useRef(null);
+  const lastElementRef = useRef(null);
   const dateRange = filterValue;
   const [startDate, setStartDate] = useState(dateRange.startDate || "");
   const [endDate, setEndDate] = useState(dateRange.endDate || "");
@@ -37,7 +39,7 @@ const DateSwitcherFilter = (props) => {
   }, [startDate, endDate, isDateRange]);
   const handleRef = useCallback(
     (newRef) => {
-      if (ref.current) ref.current = newRef;
+      ref.current = newRef;
       if (!reduxHeader?.hideFilterMenu) {
         setTimeout(() => newRef?.focus());
       }
@@ -47,8 +49,11 @@ const DateSwitcherFilter = (props) => {
   return /* @__PURE__ */ jsx(
     FilterPopover,
     {
+      firstElementRef: ref,
+      lastElementRef,
       reduxHeader,
       column,
+      columnReference: referenceColumn,
       columnId: id,
       menuContent: /* @__PURE__ */ jsxs(Grid, { width: "260px", "data-testid": DATA_TESTID.DATA_TABLE_DATE_RANGE_CONTROLLER, children: [
         /* @__PURE__ */ jsxs(Grid, { p: "xxs", gutter: "xxs", style: { background: "white" }, children: [
@@ -99,7 +104,8 @@ const DateSwitcherFilter = (props) => {
                 onFromDateChange: setStartDate,
                 toDate: endDate,
                 onToDateChange: setEndDate,
-                type: "date-range-picker-controller-only"
+                type: "date-range-picker-controller-only",
+                lastElementRef
               }
             ) : /* @__PURE__ */ jsx(
               DSControlledDateTimePicker,
@@ -109,7 +115,8 @@ const DateSwitcherFilter = (props) => {
                   setStartDate(_date);
                   setEndDate(_date);
                 },
-                type: "date-picker-controller-only"
+                type: "date-picker-controller-only",
+                lastElementRef
               }
             )
           }

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

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

package/dist/esm/addons/Filters/Components/FreeTextSearchFilter/FreeTextSearchFilterV2.js

@@ -0,0 +1,131 @@
+import * as React from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { DSInputText } from "@elliemae/ds-form-input-text";
+import { Grid } from "@elliemae/ds-grid";
+import { SearchXsmall } from "@elliemae/ds-icons";
+import { styled } from "@elliemae/ds-system";
+import { useCallback, useEffect, useRef, useState } from "react";
+import { uid } from "uid";
+import { DATA_TESTID } from "../../../../configs/constants.js";
+import { usePropsStore } from "../../../../configs/useStore/createInternalAndPropsContext.js";
+import { DSDataTableName, DSDataTableSlots } from "../../../../constants/index.js";
+import { FilterPopoverV2 } from "../../../../exported-related/FilterPopover/FilterPopoverV2.js";
+import { FILTER_TYPES } from "../../../../exported-related/index.js";
+import { ScreenReaderOnly } from "../../../../styled.js";
+const StyledInputFreeTextSearch = styled(DSInputText, {
+  name: DSDataTableName,
+  slot: DSDataTableSlots.FREE_TEXT_SEARCH_FILTER
+})``;
+const StyledInputFreeTextSearchWrapper = styled(Grid, {
+  name: DSDataTableName,
+  slot: DSDataTableSlots.FREE_TEXT_SEARCH_WRAPPER
+})``;
+const FreeTextSearchFilterV2 = (props) => {
+  const {
+    column,
+    referenceColumn,
+    column: { id, persistFilterInputAfterSubmit = false },
+    onValueChange,
+    patchHeaderFilterButtonAndMenu,
+    reduxHeader,
+    innerRef,
+    domIdAffix = uid(4)
+  } = props;
+  const ref = useRef(null);
+  const shouldFocus = useRef(true);
+  const getOwnerProps = usePropsStore((store) => store.get);
+  const getOwnerPropsArguments = useCallback(
+    () => ({
+      columnId: id
+    }),
+    [id]
+  );
+  const handleRef = useCallback((newRef) => {
+    ref.current = newRef;
+    if (shouldFocus.current) {
+      requestAnimationFrame(() => {
+        ref.current?.focus();
+        shouldFocus.current = false;
+      });
+    }
+  }, []);
+  useEffect(() => {
+    if (reduxHeader?.hideFilterMenu) {
+      shouldFocus.current = true;
+    }
+  }, [reduxHeader?.hideFilterMenu]);
+  const [value, setValue] = useState("");
+  const handleSubmit = useCallback(
+    (e) => {
+      e.preventDefault();
+      const trimmed = value.trim();
+      if (trimmed === "") return;
+      onValueChange(FILTER_TYPES.FREE_TEXT_SEARCH_V2, trimmed || void 0);
+      if (!persistFilterInputAfterSubmit) {
+        setValue("");
+      }
+      setTimeout(() => {
+        patchHeaderFilterButtonAndMenu(id, true);
+        innerRef?.current?.focus();
+      }, 0);
+    },
+    [id, innerRef, onValueChange, patchHeaderFilterButtonAndMenu, persistFilterInputAfterSubmit, value]
+  );
+  const handleReset = useCallback(() => {
+    setValue("");
+    onValueChange(FILTER_TYPES.FREE_TEXT_SEARCH_V2, void 0);
+  }, [onValueChange]);
+  return /* @__PURE__ */ jsx(
+    FilterPopoverV2,
+    {
+      onFilterSubmit: handleSubmit,
+      onFilterReset: handleReset,
+      firstElementRef: ref,
+      reduxHeader,
+      column,
+      columnReference: referenceColumn,
+      columnId: id,
+      customStyles: {
+        backgroundColor: "#fff",
+        width: referenceColumn?.offsetWidth,
+        minWidth: "80px"
+      },
+      menuContent: /* @__PURE__ */ jsxs(
+        StyledInputFreeTextSearchWrapper,
+        {
+          p: "xxs",
+          gutter: "xxs",
+          getOwnerProps,
+          getOwnerPropsArguments,
+          children: [
+            /* @__PURE__ */ jsx(ScreenReaderOnly, { id: "filter-input-instructions", children: "Press Enter to apply the filter and close the dialog. Focus will return to the button that opened this dialog." }),
+            /* @__PURE__ */ jsx(
+              StyledInputFreeTextSearch,
+              {
+                id: `ds-data-table-free-text-search-${id}-${domIdAffix}`,
+                placeholder: "",
+                value,
+                onValueChange: (newValue) => {
+                  setValue(newValue);
+                },
+                innerRef: handleRef,
+                "data-testid": DATA_TESTID.DATA_TABLE_FILTER_FREE_TEXT_SEARCH,
+                "aria-label": "Free Text Search Filter",
+                "aria-describedby": "filter-input-instructions",
+                getOwnerProps,
+                getOwnerPropsArguments
+              }
+            )
+          ]
+        }
+      ),
+      triggerIcon: /* @__PURE__ */ jsx(SearchXsmall, {}),
+      innerRef,
+      ariaLabel: "Open Free Text Search Filter"
+    }
+  );
+};
+export {
+  FreeTextSearchFilterV2
+};
+//# sourceMappingURL=FreeTextSearchFilterV2.js.map

package/dist/esm/addons/Filters/Components/FreeTextSearchFilter/FreeTextSearchFilterV2.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../../../../../scripts/build/transpile/react-shim.js", "../../../../../../src/addons/Filters/Components/FreeTextSearchFilter/FreeTextSearchFilterV2.tsx"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { DSInputText } from '@elliemae/ds-form-input-text';\nimport { Grid } from '@elliemae/ds-grid';\nimport { SearchXsmall } from '@elliemae/ds-icons';\nimport { styled } from '@elliemae/ds-system';\nimport React, { useCallback, useEffect, useRef, useState } from 'react';\nimport { uid } from 'uid';\nimport { DATA_TESTID } from '../../../../configs/constants.js';\nimport { usePropsStore } from '../../../../configs/useStore/createInternalAndPropsContext.js';\nimport { DSDataTableName, DSDataTableSlots } from '../../../../constants/index.js';\nimport { FilterPopoverV2 } from '../../../../exported-related/FilterPopover/FilterPopoverV2.js';\nimport { FILTER_TYPES } from '../../../../exported-related/index.js';\nimport type { DSDataTableT } from '../../../../react-desc-prop-types.js';\nimport { ScreenReaderOnly } from '../../../../styled.js';\n\nconst StyledInputFreeTextSearch = styled(DSInputText, {\n  name: DSDataTableName,\n  slot: DSDataTableSlots.FREE_TEXT_SEARCH_FILTER,\n})``;\n\nconst StyledInputFreeTextSearchWrapper = styled(Grid, {\n  name: DSDataTableName,\n  slot: DSDataTableSlots.FREE_TEXT_SEARCH_WRAPPER,\n})``;\n\nexport const FreeTextSearchFilterV2: React.ComponentType<DSDataTableT.FilterProps<string>> = (props) => {\n  const {\n    column,\n    referenceColumn,\n    column: { id, persistFilterInputAfterSubmit = false },\n    onValueChange,\n    patchHeaderFilterButtonAndMenu,\n    reduxHeader,\n    innerRef,\n    domIdAffix = uid(4),\n  } = props;\n\n  const ref = useRef<HTMLInputElement | null>(null);\n  const shouldFocus = useRef(true);\n\n  const getOwnerProps = usePropsStore((store) => store.get);\n  const getOwnerPropsArguments = useCallback(\n    () => ({\n      columnId: id,\n    }),\n    [id],\n  );\n\n  const handleRef = useCallback((newRef: HTMLInputElement | null) => {\n    ref.current = newRef;\n    if (shouldFocus.current) {\n      requestAnimationFrame(() => {\n        ref.current?.focus();\n        shouldFocus.current = false;\n      });\n    }\n  }, []);\n  useEffect(() => {\n    if (reduxHeader?.hideFilterMenu) {\n      shouldFocus.current = true;\n    }\n  }, [reduxHeader?.hideFilterMenu]);\n\n  const [value, setValue] = useState<string>('');\n  const handleSubmit = useCallback(\n    (e: React.SyntheticEvent) => {\n      e.preventDefault();\n\n      const trimmed = value.trim();\n      if (trimmed === '') return;\n\n      onValueChange(FILTER_TYPES.FREE_TEXT_SEARCH_V2, trimmed || undefined);\n      if (!persistFilterInputAfterSubmit) {\n        setValue('');\n      }\n      setTimeout(() => {\n        patchHeaderFilterButtonAndMenu(id, true);\n        innerRef?.current?.focus();\n      }, 0);\n    },\n    [id, innerRef, onValueChange, patchHeaderFilterButtonAndMenu, persistFilterInputAfterSubmit, value],\n  );\n  const handleReset = useCallback(() => {\n    setValue('');\n    onValueChange(FILTER_TYPES.FREE_TEXT_SEARCH_V2, undefined);\n  }, [onValueChange]);\n  return (\n    <FilterPopoverV2\n      onFilterSubmit={handleSubmit}\n      onFilterReset={handleReset}\n      firstElementRef={ref}\n      reduxHeader={reduxHeader}\n      column={column}\n      columnReference={referenceColumn}\n      columnId={id}\n      customStyles={{\n        backgroundColor: '#fff',\n        width: referenceColumn?.offsetWidth,\n        minWidth: '80px',\n      }}\n      menuContent={\n        <StyledInputFreeTextSearchWrapper\n          p=\"xxs\"\n          gutter=\"xxs\"\n          getOwnerProps={getOwnerProps}\n          getOwnerPropsArguments={getOwnerPropsArguments}\n        >\n          <ScreenReaderOnly id=\"filter-input-instructions\">\n            Press Enter to apply the filter and close the dialog. Focus will return to the button that opened this\n            dialog.\n          </ScreenReaderOnly>\n          <StyledInputFreeTextSearch\n            id={`ds-data-table-free-text-search-${id}-${domIdAffix}`}\n            placeholder=\"\"\n            value={value}\n            onValueChange={(newValue) => {\n              setValue(newValue);\n            }}\n            innerRef={handleRef}\n            data-testid={DATA_TESTID.DATA_TABLE_FILTER_FREE_TEXT_SEARCH}\n            aria-label=\"Free Text Search Filter\"\n            aria-describedby=\"filter-input-instructions\"\n            getOwnerProps={getOwnerProps}\n            getOwnerPropsArguments={getOwnerPropsArguments}\n          />\n        </StyledInputFreeTextSearchWrapper>\n      }\n      triggerIcon={<SearchXsmall />}\n      innerRef={innerRef}\n      ariaLabel=\"Open Free Text Search Filter\"\n    />\n  );\n};\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACoGf,SAME,KANF;AApGR,SAAS,mBAAmB;AAC5B,SAAS,YAAY;AACrB,SAAS,oBAAoB;AAC7B,SAAS,cAAc;AACvB,SAAgB,aAAa,WAAW,QAAQ,gBAAgB;AAChE,SAAS,WAAW;AACpB,SAAS,mBAAmB;AAC5B,SAAS,qBAAqB;AAC9B,SAAS,iBAAiB,wBAAwB;AAClD,SAAS,uBAAuB;AAChC,SAAS,oBAAoB;AAE7B,SAAS,wBAAwB;AAEjC,MAAM,4BAA4B,OAAO,aAAa;AAAA,EACpD,MAAM;AAAA,EACN,MAAM,iBAAiB;AACzB,CAAC;AAED,MAAM,mCAAmC,OAAO,MAAM;AAAA,EACpD,MAAM;AAAA,EACN,MAAM,iBAAiB;AACzB,CAAC;AAEM,MAAM,yBAAgF,CAAC,UAAU;AACtG,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA,QAAQ,EAAE,IAAI,gCAAgC,MAAM;AAAA,IACpD;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,aAAa,IAAI,CAAC;AAAA,EACpB,IAAI;AAEJ,QAAM,MAAM,OAAgC,IAAI;AAChD,QAAM,cAAc,OAAO,IAAI;AAE/B,QAAM,gBAAgB,cAAc,CAAC,UAAU,MAAM,GAAG;AACxD,QAAM,yBAAyB;AAAA,IAC7B,OAAO;AAAA,MACL,UAAU;AAAA,IACZ;AAAA,IACA,CAAC,EAAE;AAAA,EACL;AAEA,QAAM,YAAY,YAAY,CAAC,WAAoC;AACjE,QAAI,UAAU;AACd,QAAI,YAAY,SAAS;AACvB,4BAAsB,MAAM;AAC1B,YAAI,SAAS,MAAM;AACnB,oBAAY,UAAU;AAAA,MACxB,CAAC;AAAA,IACH;AAAA,EACF,GAAG,CAAC,CAAC;AACL,YAAU,MAAM;AACd,QAAI,aAAa,gBAAgB;AAC/B,kBAAY,UAAU;AAAA,IACxB;AAAA,EACF,GAAG,CAAC,aAAa,cAAc,CAAC;AAEhC,QAAM,CAAC,OAAO,QAAQ,IAAI,SAAiB,EAAE;AAC7C,QAAM,eAAe;AAAA,IACnB,CAAC,MAA4B;AAC3B,QAAE,eAAe;AAEjB,YAAM,UAAU,MAAM,KAAK;AAC3B,UAAI,YAAY,GAAI;AAEpB,oBAAc,aAAa,qBAAqB,WAAW,MAAS;AACpE,UAAI,CAAC,+BAA+B;AAClC,iBAAS,EAAE;AAAA,MACb;AACA,iBAAW,MAAM;AACf,uCAA+B,IAAI,IAAI;AACvC,kBAAU,SAAS,MAAM;AAAA,MAC3B,GAAG,CAAC;AAAA,IACN;AAAA,IACA,CAAC,IAAI,UAAU,eAAe,gCAAgC,+BAA+B,KAAK;AAAA,EACpG;AACA,QAAM,cAAc,YAAY,MAAM;AACpC,aAAS,EAAE;AACX,kBAAc,aAAa,qBAAqB,MAAS;AAAA,EAC3D,GAAG,CAAC,aAAa,CAAC;AAClB,SACE;AAAA,IAAC;AAAA;AAAA,MACC,gBAAgB;AAAA,MAChB,eAAe;AAAA,MACf,iBAAiB;AAAA,MACjB;AAAA,MACA;AAAA,MACA,iBAAiB;AAAA,MACjB,UAAU;AAAA,MACV,cAAc;AAAA,QACZ,iBAAiB;AAAA,QACjB,OAAO,iBAAiB;AAAA,QACxB,UAAU;AAAA,MACZ;AAAA,MACA,aACE;AAAA,QAAC;AAAA;AAAA,UACC,GAAE;AAAA,UACF,QAAO;AAAA,UACP;AAAA,UACA;AAAA,UAEA;AAAA,gCAAC,oBAAiB,IAAG,6BAA4B,4HAGjD;AAAA,YACA;AAAA,cAAC;AAAA;AAAA,gBACC,IAAI,kCAAkC,EAAE,IAAI,UAAU;AAAA,gBACtD,aAAY;AAAA,gBACZ;AAAA,gBACA,eAAe,CAAC,aAAa;AAC3B,2BAAS,QAAQ;AAAA,gBACnB;AAAA,gBACA,UAAU;AAAA,gBACV,eAAa,YAAY;AAAA,gBACzB,cAAW;AAAA,gBACX,oBAAiB;AAAA,gBACjB;AAAA,gBACA;AAAA;AAAA,YACF;AAAA;AAAA;AAAA,MACF;AAAA,MAEF,aAAa,oBAAC,gBAAa;AAAA,MAC3B;AAAA,MACA,WAAU;AAAA;AAAA,EACZ;AAEJ;",
+  "names": []
+}

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

@@ -72,8 +72,11 @@ const FreeTextSearchFilter = (props) => {
   return /* @__PURE__ */ jsx(
     FilterPopover,
     {
+      firstElementRef: ref,
+      lastElementRef: ref,
       reduxHeader,
       column,
+      columnReference: referenceColumn,
       columnId: id,
       customStyles: {
         backgroundColor: "#fff",

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../../../scripts/build/transpile/react-shim.js", "../../../../../../src/addons/Filters/Components/FreeTextSearchFilter/index.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { useRef, useCallback, useState, useEffect } from 'react';\nimport { SearchXsmall } from '@elliemae/ds-icons';\nimport { DSInputText } from '@elliemae/ds-form-input-text';\nimport { styled } from '@elliemae/ds-system';\nimport { Grid } from '@elliemae/ds-grid';\nimport { uid } from 'uid';\nimport { FilterPopover, FILTER_TYPES } from '../../../../exported-related/index.js';\nimport type { DSDataTableT } from '../../../../react-desc-prop-types.js';\nimport { DATA_TESTID } from '../../../../configs/constants.js';\nimport { ScreenReaderOnly } from '../../../../styled.js';\nimport { DSDataTableName, DSDataTableSlots } from '../../../../constants/index.js';\nimport { usePropsStore } from '../../../../configs/useStore/createInternalAndPropsContext.js';\n\nconst StyledInputFreeTextSearch = styled(DSInputText, {\n  name: DSDataTableName,\n  slot: DSDataTableSlots.FREE_TEXT_SEARCH_FILTER,\n})``;\n\nconst StyledInputFreeTextSearchWrapper = styled(Grid, {\n  name: DSDataTableName,\n  slot: DSDataTableSlots.FREE_TEXT_SEARCH_WRAPPER,\n})``;\n\nexport const FreeTextSearchFilter: React.ComponentType<DSDataTableT.FilterProps<string>> = (props) => {\n  const {\n    column,\n    referenceColumn,\n    column: { id, persistFilterInputAfterSubmit = false },\n    onValueChange,\n    patchHeaderFilterButtonAndMenu,\n    reduxHeader,\n    innerRef,\n    domIdAffix = uid(4),\n  } = props;\n\n  const ref = useRef<HTMLInputElement | null>(null);\n  const shouldFocus = useRef(true);\n\n  const getOwnerProps = usePropsStore((store) => store.get);\n  const getOwnerPropsArguments = useCallback(\n    () => ({\n      columnId: id,\n    }),\n    [id],\n  );\n\n  const handleRef = useCallback((newRef: HTMLInputElement | null) => {\n    ref.current = newRef;\n    if (shouldFocus.current) {\n      requestAnimationFrame(() => {\n        ref.current?.focus();\n        shouldFocus.current = false;\n      });\n    }\n  }, []);\n  useEffect(() => {\n    if (reduxHeader?.hideFilterMenu) {\n      shouldFocus.current = true;\n    }\n  }, [reduxHeader?.hideFilterMenu]);\n\n  const [value, setValue] = useState<string>('');\n\n  const onKeyDown = useCallback(\n    (event: React.KeyboardEvent<HTMLInputElement>) => {\n      if (event.key === 'Enter' && value.trim() !== '') {\n        // || undefined to clear the filter when empty\n        onValueChange(FILTER_TYPES.FREE_TEXT_SEARCH, value || undefined);\n        if (!persistFilterInputAfterSubmit) {\n          setValue('');\n        }\n        setTimeout(() => {\n          patchHeaderFilterButtonAndMenu(id, true);\n          innerRef?.current?.focus();\n        }, 0);\n      }\n    },\n    [id, innerRef, onValueChange, patchHeaderFilterButtonAndMenu, persistFilterInputAfterSubmit, value],\n  );\n  return (\n    <FilterPopover\n      reduxHeader={reduxHeader}\n      column={column}\n      columnId={id}\n      customStyles={{\n        backgroundColor: '#fff',\n        width: referenceColumn?.offsetWidth,\n        minWidth: '80px',\n      }}\n      menuContent={\n        <StyledInputFreeTextSearchWrapper\n          p=\"xxs\"\n          gutter=\"xxs\"\n          getOwnerProps={getOwnerProps}\n          getOwnerPropsArguments={getOwnerPropsArguments}\n        >\n          <ScreenReaderOnly id=\"filter-input-instructions\">\n            Press Enter to apply the filter and close the dialog. Focus will return to the button that opened this\n            dialog.\n          </ScreenReaderOnly>\n          <StyledInputFreeTextSearch\n            id={`ds-data-table-free-text-search-${id}-${domIdAffix}`}\n            placeholder=\"\"\n            value={value}\n            onValueChange={(newValue) => {\n              setValue(newValue);\n            }}\n            innerRef={handleRef}\n            onKeyDown={onKeyDown}\n            data-testid={DATA_TESTID.DATA_TABLE_FILTER_FREE_TEXT_SEARCH}\n            aria-label=\"Free Text Search Filter\"\n            aria-describedby=\"filter-input-instructions\"\n            getOwnerProps={getOwnerProps}\n            getOwnerPropsArguments={getOwnerPropsArguments}\n          />\n        </StyledInputFreeTextSearchWrapper>\n      }\n      triggerIcon={<SearchXsmall />}\n      innerRef={innerRef}\n      ariaLabel=\"Open Free Text Search Filter\"\n    />\n  );\n};\n"],
-  "mappings": "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",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { useRef, useCallback, useState, useEffect } from 'react';\nimport { SearchXsmall } from '@elliemae/ds-icons';\nimport { DSInputText } from '@elliemae/ds-form-input-text';\nimport { styled } from '@elliemae/ds-system';\nimport { Grid } from '@elliemae/ds-grid';\nimport { uid } from 'uid';\nimport { FilterPopover, FILTER_TYPES } from '../../../../exported-related/index.js';\nimport type { DSDataTableT } from '../../../../react-desc-prop-types.js';\nimport { DATA_TESTID } from '../../../../configs/constants.js';\nimport { ScreenReaderOnly } from '../../../../styled.js';\nimport { DSDataTableName, DSDataTableSlots } from '../../../../constants/index.js';\nimport { usePropsStore } from '../../../../configs/useStore/createInternalAndPropsContext.js';\n\nconst StyledInputFreeTextSearch = styled(DSInputText, {\n  name: DSDataTableName,\n  slot: DSDataTableSlots.FREE_TEXT_SEARCH_FILTER,\n})``;\n\nconst StyledInputFreeTextSearchWrapper = styled(Grid, {\n  name: DSDataTableName,\n  slot: DSDataTableSlots.FREE_TEXT_SEARCH_WRAPPER,\n})``;\n\nexport const FreeTextSearchFilter: React.ComponentType<DSDataTableT.FilterProps<string>> = (props) => {\n  const {\n    column,\n    referenceColumn,\n    column: { id, persistFilterInputAfterSubmit = false },\n    onValueChange,\n    patchHeaderFilterButtonAndMenu,\n    reduxHeader,\n    innerRef,\n    domIdAffix = uid(4),\n  } = props;\n\n  const ref = useRef<HTMLInputElement | null>(null);\n  const shouldFocus = useRef(true);\n\n  const getOwnerProps = usePropsStore((store) => store.get);\n  const getOwnerPropsArguments = useCallback(\n    () => ({\n      columnId: id,\n    }),\n    [id],\n  );\n\n  const handleRef = useCallback((newRef: HTMLInputElement | null) => {\n    ref.current = newRef;\n    if (shouldFocus.current) {\n      requestAnimationFrame(() => {\n        ref.current?.focus();\n        shouldFocus.current = false;\n      });\n    }\n  }, []);\n  useEffect(() => {\n    if (reduxHeader?.hideFilterMenu) {\n      shouldFocus.current = true;\n    }\n  }, [reduxHeader?.hideFilterMenu]);\n\n  const [value, setValue] = useState<string>('');\n\n  const onKeyDown = useCallback(\n    (event: React.KeyboardEvent<HTMLInputElement>) => {\n      if (event.key === 'Enter' && value.trim() !== '') {\n        // || undefined to clear the filter when empty\n        onValueChange(FILTER_TYPES.FREE_TEXT_SEARCH, value || undefined);\n        if (!persistFilterInputAfterSubmit) {\n          setValue('');\n        }\n        setTimeout(() => {\n          patchHeaderFilterButtonAndMenu(id, true);\n          innerRef?.current?.focus();\n        }, 0);\n      }\n    },\n    [id, innerRef, onValueChange, patchHeaderFilterButtonAndMenu, persistFilterInputAfterSubmit, value],\n  );\n  return (\n    <FilterPopover\n      firstElementRef={ref}\n      lastElementRef={ref}\n      reduxHeader={reduxHeader}\n      column={column}\n      columnReference={referenceColumn}\n      columnId={id}\n      customStyles={{\n        backgroundColor: '#fff',\n        width: referenceColumn?.offsetWidth,\n        minWidth: '80px',\n      }}\n      menuContent={\n        <StyledInputFreeTextSearchWrapper\n          p=\"xxs\"\n          gutter=\"xxs\"\n          getOwnerProps={getOwnerProps}\n          getOwnerPropsArguments={getOwnerPropsArguments}\n        >\n          <ScreenReaderOnly id=\"filter-input-instructions\">\n            Press Enter to apply the filter and close the dialog. Focus will return to the button that opened this\n            dialog.\n          </ScreenReaderOnly>\n          <StyledInputFreeTextSearch\n            id={`ds-data-table-free-text-search-${id}-${domIdAffix}`}\n            placeholder=\"\"\n            value={value}\n            onValueChange={(newValue) => {\n              setValue(newValue);\n            }}\n            innerRef={handleRef}\n            onKeyDown={onKeyDown}\n            data-testid={DATA_TESTID.DATA_TABLE_FILTER_FREE_TEXT_SEARCH}\n            aria-label=\"Free Text Search Filter\"\n            aria-describedby=\"filter-input-instructions\"\n            getOwnerProps={getOwnerProps}\n            getOwnerPropsArguments={getOwnerPropsArguments}\n          />\n        </StyledInputFreeTextSearchWrapper>\n      }\n      triggerIcon={<SearchXsmall />}\n      innerRef={innerRef}\n      ariaLabel=\"Open Free Text Search Filter\"\n    />\n  );\n};\n"],
+  "mappings": "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",
   "names": []
 }