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

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

@@ -0,0 +1,177 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var DateSwitcherFilterV2_exports = {};
+__export(DateSwitcherFilterV2_exports, {
+  DateSwitcherFilterV2: () => DateSwitcherFilterV2
+});
+module.exports = __toCommonJS(DateSwitcherFilterV2_exports);
+var React = __toESM(require("react"));
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_react = require("react");
+var import_ds_icons = require("@elliemae/ds-icons");
+var import_ds_grid = require("@elliemae/ds-grid");
+var import_ds_form_date_range_picker = require("@elliemae/ds-form-date-range-picker");
+var import_ds_form_date_time_picker = require("@elliemae/ds-form-date-time-picker");
+var import_ds_form_checkbox = require("@elliemae/ds-form-checkbox");
+var import_uid = require("uid");
+var import_exported_related = require("../../../../exported-related/index.js");
+var import_FilterPopoverV2 = require("../../../../exported-related/FilterPopover/FilterPopoverV2.js");
+var import_constants = require("../../../../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 = (0, import_uid.uid)(4)
+  } = props;
+  const ref = (0, import_react.useRef)(null);
+  const dateRange = filterValue;
+  const [startDate, setStartDate] = (0, import_react.useState)(dateRange.startDate || "");
+  const [endDate, setEndDate] = (0, import_react.useState)(dateRange.endDate || "");
+  const [isDateRange, setIsDateRange] = (0, import_react.useState)(dateRange.isDateRange || false);
+  const handleRef = (0, import_react.useCallback)(
+    (newRef) => {
+      ref.current = newRef;
+      if (!reduxHeader?.hideFilterMenu) {
+        setTimeout(() => newRef?.focus());
+      }
+    },
+    [reduxHeader?.hideFilterMenu]
+  );
+  const handleSubmit = (0, import_react.useCallback)(
+    (e) => {
+      e.preventDefault();
+      const hasValidRange = startDate && endDate && !startDate.includes("_") && !endDate.includes("_");
+      if (hasValidRange) {
+        onValueChange(import_exported_related.FILTER_TYPES.DATE_SWITCHER, { startDate, endDate, isDateRange });
+      } else {
+        return;
+      }
+      patchHeaderFilterButtonAndMenu(id, true);
+      innerRef.current?.focus();
+    },
+    [endDate, id, innerRef, isDateRange, onValueChange, patchHeaderFilterButtonAndMenu, startDate]
+  );
+  const handleReset = (0, import_react.useCallback)(() => {
+    setStartDate("");
+    setEndDate("");
+    setIsDateRange(false);
+    onValueChange(import_exported_related.FILTER_TYPES.DATE_SWITCHER, void 0);
+    patchHeaderFilterButtonAndMenu(id, true);
+    innerRef.current?.focus();
+  }, [id, innerRef, onValueChange, patchHeaderFilterButtonAndMenu]);
+  (0, import_react.useEffect)(() => {
+    if (reduxHeader?.hideFilterMenu) {
+      setStartDate(dateRange.startDate || "");
+      setEndDate(dateRange.endDate || "");
+      setIsDateRange(dateRange.isDateRange || false);
+    }
+  }, [dateRange.endDate, dateRange.isDateRange, dateRange.startDate, reduxHeader?.hideFilterMenu]);
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    import_FilterPopoverV2.FilterPopoverV2,
+    {
+      onFilterSubmit: handleSubmit,
+      onFilterReset: handleReset,
+      firstElementRef: ref,
+      reduxHeader,
+      column,
+      columnReference: referenceColumn,
+      columnId: id,
+      menuContent: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_ds_grid.Grid, { width: "260px", "data-testid": import_constants.DATA_TESTID.DATA_TABLE_DATE_RANGE_CONTROLLER, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_ds_grid.Grid, { p: "xxs", gutter: "xxs", style: { background: "white" }, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { "data-testid": import_constants.DATA_TESTID.DATA_TABLE_DATE_RANGE_CONTROLLER_CHECKBOX_SWITCHER, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            import_ds_form_checkbox.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__ */ (0, import_jsx_runtime.jsx)(
+            import_ds_form_date_range_picker.DSControlledDateRangePicker,
+            {
+              fromDate: startDate,
+              onFromDateChange: setStartDate,
+              toDate: endDate,
+              onToDateChange: setEndDate,
+              type: "date-range-inputs"
+            }
+          ) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            import_ds_form_date_time_picker.DSControlledDateTimePicker,
+            {
+              date: startDate,
+              onDateChange: (_date) => {
+                setStartDate(_date);
+                setEndDate(_date);
+              },
+              type: "date-inputs"
+            }
+          )
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ds_grid.Grid, { children: isDateRange ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          import_ds_form_date_range_picker.DSControlledDateRangePicker,
+          {
+            fromDate: startDate,
+            onFromDateChange: setStartDate,
+            toDate: endDate,
+            onToDateChange: setEndDate,
+            type: "date-range-picker-controller-only"
+          }
+        ) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          import_ds_form_date_time_picker.DSControlledDateTimePicker,
+          {
+            date: startDate,
+            onDateChange: (_date) => {
+              setStartDate(_date);
+              setEndDate(_date);
+            },
+            type: "date-picker-controller-only"
+          }
+        ) })
+      ] }),
+      triggerIcon: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ds_icons.DatePicker2, {}),
+      innerRef,
+      ariaLabel: "Open Date Range Filter"
+    }
+  );
+};
+//# sourceMappingURL=DateSwitcherFilterV2.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../../src/addons/Filters/Components/DateSwitcherFilter/DateSwitcherFilterV2.tsx", "../../../../../../../../../scripts/build/transpile/react-shim.js"],
+  "sourcesContent": ["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", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;AD+Fb;AA/FV,mBAAgE;AAChE,sBAA4B;AAC5B,qBAAqB;AACrB,uCAA4C;AAC5C,sCAA2C;AAC3C,8BAAqC;AACrC,iBAAoB;AACpB,8BAA6B;AAC7B,6BAAgC;AAEhC,uBAA4B;AAE5B,MAAM,mBAAmB,EAAE,WAAW,MAAM,SAAS,MAAM,aAAa,MAAM;AAQvE,MAAM,uBAA+F,CAAC,UAAU;AACrH,QAAM;AAAA,IACJ;AAAA,IACA,QAAQ,EAAE,GAAG;AAAA,IACb;AAAA,IACA,cAAc;AAAA,IACd;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,iBAAa,gBAAI,CAAC;AAAA,EACpB,IAAI;AAEJ,QAAM,UAAM,qBAAgC,IAAI;AAChD,QAAM,YAAY;AAElB,QAAM,CAAC,WAAW,YAAY,QAAI,uBAAS,UAAU,aAAa,EAAE;AACpE,QAAM,CAAC,SAAS,UAAU,QAAI,uBAAS,UAAU,WAAW,EAAE;AAC9D,QAAM,CAAC,aAAa,cAAc,QAAI,uBAAkB,UAAU,eAAe,KAAK;AAEtF,QAAM,gBAAY;AAAA,IAChB,CAAC,WAAwD;AACvD,UAAI,UAAU;AACd,UAAI,CAAC,aAAa,gBAAgB;AAChC,mBAAW,MAAM,QAAQ,MAAM,CAAC;AAAA,MAClC;AAAA,IACF;AAAA,IACA,CAAC,aAAa,cAAc;AAAA,EAC9B;AACA,QAAM,mBAAe;AAAA,IACnB,CAAC,MAA4B;AAC3B,QAAE,eAAe;AAEjB,YAAM,gBAAgB,aAAa,WAAW,CAAC,UAAU,SAAS,GAAG,KAAK,CAAC,QAAQ,SAAS,GAAG;AAE/F,UAAI,eAAe;AACjB,sBAAc,qCAAa,eAAe,EAAE,WAAW,SAAS,YAAY,CAAC;AAAA,MAC/E,OAAO;AACL;AAAA,MACF;AAEA,qCAA+B,IAAI,IAAI;AACvC,eAAS,SAAS,MAAM;AAAA,IAC1B;AAAA,IACA,CAAC,SAAS,IAAI,UAAU,aAAa,eAAe,gCAAgC,SAAS;AAAA,EAC/F;AACA,QAAM,kBAAc,0BAAY,MAAM;AACpC,iBAAa,EAAE;AACf,eAAW,EAAE;AACb,mBAAe,KAAK;AACpB,kBAAc,qCAAa,eAAe,MAAS;AACnD,mCAA+B,IAAI,IAAI;AACvC,aAAS,SAAS,MAAM;AAAA,EAC1B,GAAG,CAAC,IAAI,UAAU,eAAe,8BAA8B,CAAC;AAEhE,8BAAU,MAAM;AACd,QAAI,aAAa,gBAAgB;AAE/B,mBAAa,UAAU,aAAa,EAAE;AACtC,iBAAW,UAAU,WAAW,EAAE;AAClC,qBAAe,UAAU,eAAe,KAAK;AAAA,IAC/C;AAAA,EACF,GAAG,CAAC,UAAU,SAAS,UAAU,aAAa,UAAU,WAAW,aAAa,cAAc,CAAC;AAE/F,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,aACE,6CAAC,uBAAK,OAAM,SAAQ,eAAa,6BAAY,kCAC3C;AAAA,qDAAC,uBAAK,GAAE,OAAM,QAAO,OAAM,OAAO,EAAE,YAAY,QAAQ,GACtD;AAAA,sDAAC,SAAI,eAAa,6BAAY,oDAC5B;AAAA,YAAC;AAAA;AAAA,cACC,SAAS;AAAA,cACT,MAAK;AAAA,cACL,OAAM;AAAA,cACN,IAAI,mCAAmC,UAAU;AAAA,cACjD,UAAU,MAAM;AACd,+BAAe,CAAC,WAAW;AAC3B,6BAAa,EAAE;AACf,2BAAW,EAAE;AAAA,cACf;AAAA,cACA,UAAU;AAAA;AAAA,UACZ,GACF;AAAA,UACC,cACC;AAAA,YAAC;AAAA;AAAA,cACC,UAAU;AAAA,cACV,kBAAkB;AAAA,cAClB,QAAQ;AAAA,cACR,gBAAgB;AAAA,cAChB,MAAK;AAAA;AAAA,UACP,IAEA;AAAA,YAAC;AAAA;AAAA,cACC,MAAM;AAAA,cACN,cAAc,CAAC,UAAU;AACvB,6BAAa,KAAK;AAClB,2BAAW,KAAK;AAAA,cAClB;AAAA,cACA,MAAK;AAAA;AAAA,UACP;AAAA,WAEJ;AAAA,QACA,4CAAC,uBACE,wBACC;AAAA,UAAC;AAAA;AAAA,YACC,UAAU;AAAA,YACV,kBAAkB;AAAA,YAClB,QAAQ;AAAA,YACR,gBAAgB;AAAA,YAChB,MAAK;AAAA;AAAA,QACP,IAEA;AAAA,UAAC;AAAA;AAAA,YACC,MAAM;AAAA,YACN,cAAc,CAAC,UAAU;AACvB,2BAAa,KAAK;AAClB,yBAAW,KAAK;AAAA,YAClB;AAAA,YACA,MAAK;AAAA;AAAA,QACP,GAEJ;AAAA,SACF;AAAA,MAEF,aAAa,4CAAC,+BAAY;AAAA,MAC1B;AAAA,MACA,WAAU;AAAA;AAAA,EACZ;AAEJ;",
+  "names": []
+}

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

@@ -47,6 +47,7 @@ const DateSwitcherFilter = (props) => {
   const {
     column,
     column: { id },
+    referenceColumn,
     filterValue = emptyFilterValue,
     onValueChange,
     patchHeaderFilterButtonAndMenu,
@@ -55,6 +56,7 @@ const DateSwitcherFilter = (props) => {
     domIdAffix = (0, import_uid.uid)(4)
   } = props;
   const ref = (0, import_react.useRef)(null);
+  const lastElementRef = (0, import_react.useRef)(null);
   const dateRange = filterValue;
   const [startDate, setStartDate] = (0, import_react.useState)(dateRange.startDate || "");
   const [endDate, setEndDate] = (0, import_react.useState)(dateRange.endDate || "");
@@ -70,7 +72,7 @@ const DateSwitcherFilter = (props) => {
   }, [startDate, endDate, isDateRange]);
   const handleRef = (0, import_react.useCallback)(
     (newRef) => {
-      if (ref.current) ref.current = newRef;
+      ref.current = newRef;
       if (!reduxHeader?.hideFilterMenu) {
         setTimeout(() => newRef?.focus());
       }
@@ -80,8 +82,11 @@ const DateSwitcherFilter = (props) => {
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
     import_exported_related.FilterPopover,
     {
+      firstElementRef: ref,
+      lastElementRef,
       reduxHeader,
       column,
+      columnReference: referenceColumn,
       columnId: id,
       menuContent: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_ds_grid.Grid, { width: "260px", "data-testid": import_constants.DATA_TESTID.DATA_TABLE_DATE_RANGE_CONTROLLER, children: [
         /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_ds_grid.Grid, { p: "xxs", gutter: "xxs", style: { background: "white" }, children: [
@@ -132,7 +137,8 @@ const DateSwitcherFilter = (props) => {
                 onFromDateChange: setStartDate,
                 toDate: endDate,
                 onToDateChange: setEndDate,
-                type: "date-range-picker-controller-only"
+                type: "date-range-picker-controller-only",
+                lastElementRef
               }
             ) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
               import_ds_form_date_time_picker.DSControlledDateTimePicker,
@@ -142,7 +148,8 @@ const DateSwitcherFilter = (props) => {
                   setStartDate(_date);
                   setEndDate(_date);
                 },
-                type: "date-picker-controller-only"
+                type: "date-picker-controller-only",
+                lastElementRef
               }
             )
           }

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../src/addons/Filters/Components/DateSwitcherFilter/index.tsx", "../../../../../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["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", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": "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",
+  "sourcesContent": ["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", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADyEb;AAzEV,mBAAgE;AAChE,sBAA4B;AAC5B,qBAAqB;AACrB,uCAA4C;AAC5C,sCAA2C;AAC3C,8BAAqC;AACrC,iBAAoB;AACpB,8BAA4C;AAE5C,uBAA4B;AAE5B,MAAM,mBAAmB,EAAE,WAAW,MAAM,SAAS,KAAK;AAQnD,MAAM,qBAA6F,CAAC,UAAU;AACnH,QAAM;AAAA,IACJ;AAAA,IACA,QAAQ,EAAE,GAAG;AAAA,IACb;AAAA,IACA,cAAc;AAAA,IACd;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,iBAAa,gBAAI,CAAC;AAAA,EACpB,IAAI;AAEJ,QAAM,UAAM,qBAAgC,IAAI;AAChD,QAAM,qBAAiB,qBAA2B,IAAI;AACtD,QAAM,YAAY;AAElB,QAAM,CAAC,WAAW,YAAY,QAAI,uBAAS,UAAU,aAAa,EAAE;AACpE,QAAM,CAAC,SAAS,UAAU,QAAI,uBAAS,UAAU,WAAW,EAAE;AAC9D,QAAM,CAAC,aAAa,cAAc,QAAI,uBAAS,KAAK;AAEpD,8BAAU,MAAM;AACd,iBAAa,UAAU,aAAa,EAAE;AACtC,eAAW,UAAU,WAAW,EAAE;AAAA,EACpC,GAAG,CAAC,SAAS,CAAC;AAEd,8BAAU,MAAM;AACd,QAAI,aAAa,WAAW,CAAC,UAAU,SAAS,GAAG,KAAK,CAAC,QAAQ,SAAS,GAAG,GAAG;AAC9E,oBAAc,qCAAa,eAAe,EAAE,WAAW,SAAS,YAAY,CAAC;AAAA,IAC/E;AAAA,EAGF,GAAG,CAAC,WAAW,SAAS,WAAW,CAAC;AAEpC,QAAM,gBAAY;AAAA,IAChB,CAAC,WAAwD;AACvD,UAAI,UAAU;AACd,UAAI,CAAC,aAAa,gBAAgB;AAChC,mBAAW,MAAM,QAAQ,MAAM,CAAC;AAAA,MAClC;AAAA,IACF;AAAA,IACA,CAAC,aAAa,cAAc;AAAA,EAC9B;AAEA,SACE;AAAA,IAAC;AAAA;AAAA,MACC,iBAAiB;AAAA,MACjB;AAAA,MACA;AAAA,MACA;AAAA,MACA,iBAAiB;AAAA,MACjB,UAAU;AAAA,MACV,aACE,6CAAC,uBAAK,OAAM,SAAQ,eAAa,6BAAY,kCAC3C;AAAA,qDAAC,uBAAK,GAAE,OAAM,QAAO,OAAM,OAAO,EAAE,YAAY,QAAQ,GACtD;AAAA,sDAAC,SAAI,eAAa,6BAAY,oDAC5B;AAAA,YAAC;AAAA;AAAA,cACC,SAAS;AAAA,cACT,MAAK;AAAA,cACL,OAAM;AAAA,cACN,IAAI,mCAAmC,UAAU;AAAA,cACjD,UAAU,MAAM;AACd,+BAAe,CAAC,WAAW;AAC3B,6BAAa,EAAE;AACf,2BAAW,EAAE;AAAA,cACf;AAAA,cACA,UAAU;AAAA;AAAA,UACZ,GACF;AAAA,UACC,cACC;AAAA,YAAC;AAAA;AAAA,cACC,UAAU;AAAA,cACV,kBAAkB;AAAA,cAClB,QAAQ;AAAA,cACR,gBAAgB;AAAA,cAChB,MAAK;AAAA;AAAA,UACP,IAEA;AAAA,YAAC;AAAA;AAAA,cACC,MAAM;AAAA,cACN,cAAc,CAAC,UAAU;AACvB,6BAAa,KAAK;AAClB,2BAAW,KAAK;AAAA,cAClB;AAAA,cACA,MAAK;AAAA;AAAA,UACP;AAAA,WAEJ;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,YAGrG,wBACC;AAAA,cAAC;AAAA;AAAA,gBACC,UAAU;AAAA,gBACV,kBAAkB;AAAA,gBAClB,QAAQ;AAAA,gBACR,gBAAgB;AAAA,gBAChB,MAAK;AAAA,gBACL;AAAA;AAAA,YACF,IAEA;AAAA,cAAC;AAAA;AAAA,gBACC,MAAM;AAAA,gBACN,cAAc,CAAC,UAAU;AACvB,+BAAa,KAAK;AAClB,6BAAW,KAAK;AAAA,gBAClB;AAAA,gBACA,MAAK;AAAA,gBACL;AAAA;AAAA,YACF;AAAA;AAAA,QAEJ;AAAA,SACF;AAAA,MAEF,aAAa,4CAAC,+BAAY;AAAA,MAC1B;AAAA,MACA,WAAU;AAAA;AAAA,EACZ;AAEJ;",
   "names": []
 }

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

@@ -0,0 +1,161 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var FreeTextSearchFilterV2_exports = {};
+__export(FreeTextSearchFilterV2_exports, {
+  FreeTextSearchFilterV2: () => FreeTextSearchFilterV2
+});
+module.exports = __toCommonJS(FreeTextSearchFilterV2_exports);
+var React = __toESM(require("react"));
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_ds_form_input_text = require("@elliemae/ds-form-input-text");
+var import_ds_grid = require("@elliemae/ds-grid");
+var import_ds_icons = require("@elliemae/ds-icons");
+var import_ds_system = require("@elliemae/ds-system");
+var import_react = require("react");
+var import_uid = require("uid");
+var import_constants = require("../../../../configs/constants.js");
+var import_createInternalAndPropsContext = require("../../../../configs/useStore/createInternalAndPropsContext.js");
+var import_constants2 = require("../../../../constants/index.js");
+var import_FilterPopoverV2 = require("../../../../exported-related/FilterPopover/FilterPopoverV2.js");
+var import_exported_related = require("../../../../exported-related/index.js");
+var import_styled = require("../../../../styled.js");
+const StyledInputFreeTextSearch = (0, import_ds_system.styled)(import_ds_form_input_text.DSInputText, {
+  name: import_constants2.DSDataTableName,
+  slot: import_constants2.DSDataTableSlots.FREE_TEXT_SEARCH_FILTER
+})``;
+const StyledInputFreeTextSearchWrapper = (0, import_ds_system.styled)(import_ds_grid.Grid, {
+  name: import_constants2.DSDataTableName,
+  slot: import_constants2.DSDataTableSlots.FREE_TEXT_SEARCH_WRAPPER
+})``;
+const FreeTextSearchFilterV2 = (props) => {
+  const {
+    column,
+    referenceColumn,
+    column: { id, persistFilterInputAfterSubmit = false },
+    onValueChange,
+    patchHeaderFilterButtonAndMenu,
+    reduxHeader,
+    innerRef,
+    domIdAffix = (0, import_uid.uid)(4)
+  } = props;
+  const ref = (0, import_react.useRef)(null);
+  const shouldFocus = (0, import_react.useRef)(true);
+  const getOwnerProps = (0, import_createInternalAndPropsContext.usePropsStore)((store) => store.get);
+  const getOwnerPropsArguments = (0, import_react.useCallback)(
+    () => ({
+      columnId: id
+    }),
+    [id]
+  );
+  const handleRef = (0, import_react.useCallback)((newRef) => {
+    ref.current = newRef;
+    if (shouldFocus.current) {
+      requestAnimationFrame(() => {
+        ref.current?.focus();
+        shouldFocus.current = false;
+      });
+    }
+  }, []);
+  (0, import_react.useEffect)(() => {
+    if (reduxHeader?.hideFilterMenu) {
+      shouldFocus.current = true;
+    }
+  }, [reduxHeader?.hideFilterMenu]);
+  const [value, setValue] = (0, import_react.useState)("");
+  const handleSubmit = (0, import_react.useCallback)(
+    (e) => {
+      e.preventDefault();
+      const trimmed = value.trim();
+      if (trimmed === "") return;
+      onValueChange(import_exported_related.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 = (0, import_react.useCallback)(() => {
+    setValue("");
+    onValueChange(import_exported_related.FILTER_TYPES.FREE_TEXT_SEARCH_V2, void 0);
+  }, [onValueChange]);
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    import_FilterPopoverV2.FilterPopoverV2,
+    {
+      onFilterSubmit: handleSubmit,
+      onFilterReset: handleReset,
+      firstElementRef: ref,
+      reduxHeader,
+      column,
+      columnReference: referenceColumn,
+      columnId: id,
+      customStyles: {
+        backgroundColor: "#fff",
+        width: referenceColumn?.offsetWidth,
+        minWidth: "80px"
+      },
+      menuContent: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+        StyledInputFreeTextSearchWrapper,
+        {
+          p: "xxs",
+          gutter: "xxs",
+          getOwnerProps,
+          getOwnerPropsArguments,
+          children: [
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_styled.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__ */ (0, import_jsx_runtime.jsx)(
+              StyledInputFreeTextSearch,
+              {
+                id: `ds-data-table-free-text-search-${id}-${domIdAffix}`,
+                placeholder: "",
+                value,
+                onValueChange: (newValue) => {
+                  setValue(newValue);
+                },
+                innerRef: handleRef,
+                "data-testid": import_constants.DATA_TESTID.DATA_TABLE_FILTER_FREE_TEXT_SEARCH,
+                "aria-label": "Free Text Search Filter",
+                "aria-describedby": "filter-input-instructions",
+                getOwnerProps,
+                getOwnerPropsArguments
+              }
+            )
+          ]
+        }
+      ),
+      triggerIcon: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ds_icons.SearchXsmall, {}),
+      innerRef,
+      ariaLabel: "Open Free Text Search Filter"
+    }
+  );
+};
+//# sourceMappingURL=FreeTextSearchFilterV2.js.map

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

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

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

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

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

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