@elliemae/ds-data-table 3.60.0-next.33 → 3.60.0-next.35

package/dist/esm/addons/Filters/Components/CurrencyRangeFilter/CurrencyRangeFilterV2.js

@@ -0,0 +1,143 @@
+import * as React from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useRef, useEffect, useCallback, useState } from "react";
+import { Grid } from "@elliemae/ds-grid";
+import { DSInputText } from "@elliemae/ds-form-input-text";
+import { getNumberMaskedValue, useNumberMask } from "@elliemae/ds-form-helpers-mask-hooks";
+import { DSFormLayoutBlockItem } from "@elliemae/ds-form-layout-blocks";
+import { SearchXsmall } from "@elliemae/ds-icons";
+import { uid } from "uid";
+import { FILTER_TYPES } from "../../../../exported-related/index.js";
+import { DATA_TESTID } from "../../../../configs/constants.js";
+import { FilterPopoverV2 } from "../../../../exported-related/FilterPopover/FilterPopoverV2.js";
+const opts = {
+  includeThousandsSeparator: false,
+  decimalPlaces: 2,
+  decimalRequired: true
+};
+const idPreffix = "datatable-currency-range";
+const CurrencyRangeFilterV2 = (props) => {
+  const {
+    column,
+    referenceColumn,
+    filterValue = { from: null, to: null },
+    reduxHeader,
+    patchHeader,
+    onValueChange,
+    innerRef,
+    domIdAffix = uid(4)
+  } = props;
+  const [from, setFrom] = useState(getNumberMaskedValue(filterValue.from ?? "", opts));
+  const [to, setTo] = useState(getNumberMaskedValue(filterValue.to ?? "", opts));
+  const ref = useRef(null);
+  const shouldFocus = useRef(true);
+  const fromInputProps = useNumberMask({
+    valueSetter: setFrom,
+    ...opts
+  });
+  const toInputProps = useNumberMask({
+    valueSetter: setTo,
+    ...opts
+  });
+  const handleOnKeyDown = useCallback(
+    (e) => {
+      if (e.code === "Escape") {
+        patchHeader(column.id, { hideFilterMenu: true, hideFilterButton: false });
+        innerRef.current?.focus();
+      }
+    },
+    [column.id, innerRef, patchHeader]
+  );
+  const handleRef = useCallback(
+    (newRef) => {
+      ref.current = newRef;
+      if (shouldFocus.current) {
+        setTimeout(() => {
+          newRef?.focus();
+          shouldFocus.current = false;
+        });
+      }
+    },
+    [shouldFocus]
+  );
+  useEffect(() => {
+    if (reduxHeader?.hideFilterMenu) {
+      shouldFocus.current = true;
+      setFrom(getNumberMaskedValue(filterValue.from ?? "", opts));
+      setTo(getNumberMaskedValue(filterValue.to ?? "", opts));
+    }
+  }, [filterValue.from, filterValue.to, reduxHeader?.hideFilterMenu]);
+  const handleSubmit = useCallback(
+    (e) => {
+      e.preventDefault();
+      if (!from || !to) {
+        return;
+      }
+      onValueChange(FILTER_TYPES.CURRENCY_RANGE_V2, { from: from ?? "", to: to ?? "" });
+      patchHeader(column.id, { hideFilterMenu: true, hideFilterButton: false });
+      innerRef.current?.focus();
+    },
+    [column.id, from, to, innerRef, onValueChange, patchHeader]
+  );
+  const handleReset = useCallback(() => {
+    setFrom("");
+    setTo("");
+    onValueChange(FILTER_TYPES.CURRENCY_RANGE_V2, void 0);
+    patchHeader(column.id, { hideFilterMenu: true, hideFilterButton: false });
+    innerRef.current?.focus();
+  }, [column.id, innerRef, onValueChange, patchHeader]);
+  return /* @__PURE__ */ jsx(
+    FilterPopoverV2,
+    {
+      onFilterSubmit: handleSubmit,
+      onFilterReset: handleReset,
+      firstElementRef: ref,
+      reduxHeader,
+      column,
+      columnReference: referenceColumn,
+      columnId: column.id,
+      menuContent: /* @__PURE__ */ jsxs(
+        Grid,
+        {
+          "data-testid": DATA_TESTID.DATA_TABLE_CURRENCY_RANGE_CONTROLLER,
+          gutter: "xxxs",
+          padding: "xxs",
+          cols: ["auto", "auto"],
+          style: { background: "white" },
+          onKeyDown: handleOnKeyDown,
+          children: [
+            /* @__PURE__ */ jsx(DSFormLayoutBlockItem, { label: "Min", inputID: `${idPreffix}-min-${column.id}-${domIdAffix}`, children: /* @__PURE__ */ jsx(
+              DSInputText,
+              {
+                value: from,
+                ...fromInputProps,
+                id: `${idPreffix}-min-${column.id}-${domIdAffix}`,
+                style: { textAlign: "right" },
+                placeholder: "0.00",
+                innerRef: handleRef
+              }
+            ) }),
+            /* @__PURE__ */ jsx(DSFormLayoutBlockItem, { label: "Max", inputID: `${idPreffix}-max-${column.id}-${domIdAffix}`, children: /* @__PURE__ */ jsx(
+              DSInputText,
+              {
+                value: to,
+                ...toInputProps,
+                id: `${idPreffix}-max-${column.id}s-${domIdAffix}`,
+                style: { textAlign: "right" },
+                placeholder: "0.00"
+              }
+            ) })
+          ]
+        }
+      ),
+      triggerIcon: /* @__PURE__ */ jsx(SearchXsmall, {}),
+      customStyles: { width: referenceColumn?.offsetWidth },
+      innerRef,
+      ariaLabel: "Open Currency Range Filter"
+    }
+  );
+};
+export {
+  CurrencyRangeFilterV2
+};
+//# sourceMappingURL=CurrencyRangeFilterV2.js.map

package/dist/esm/addons/Filters/Components/CurrencyRangeFilter/CurrencyRangeFilterV2.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../../../../../scripts/build/transpile/react-shim.js", "../../../../../../src/addons/Filters/Components/CurrencyRangeFilter/CurrencyRangeFilterV2.tsx"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { useRef, useEffect, useCallback, useState } from 'react';\nimport { Grid } from '@elliemae/ds-grid';\nimport { DSInputText } from '@elliemae/ds-form-input-text';\nimport { getNumberMaskedValue, useNumberMask } from '@elliemae/ds-form-helpers-mask-hooks';\nimport { DSFormLayoutBlockItem } from '@elliemae/ds-form-layout-blocks';\nimport { SearchXsmall } from '@elliemae/ds-icons';\nimport { uid } from 'uid';\nimport { FILTER_TYPES } from '../../../../exported-related/index.js';\nimport type { DSDataTableT } from '../../../../react-desc-prop-types.js';\nimport { DATA_TESTID } from '../../../../configs/constants.js';\nimport { FilterPopoverV2 } from '../../../../exported-related/FilterPopover/FilterPopoverV2.js';\n\nconst opts = {\n  includeThousandsSeparator: false,\n  decimalPlaces: 2,\n  decimalRequired: true,\n};\n\nconst idPreffix = 'datatable-currency-range';\n\ninterface CurrentRangeFilterValue {\n  from: string | null;\n  to: string | null;\n}\n\nexport const CurrencyRangeFilterV2: React.ComponentType<DSDataTableT.FilterProps<CurrentRangeFilterValue>> = (\n  props,\n) => {\n  const {\n    column,\n    referenceColumn,\n    filterValue = { from: null, to: null },\n    reduxHeader,\n    patchHeader,\n    onValueChange,\n    innerRef,\n    domIdAffix = uid(4),\n  } = props;\n\n  const [from, setFrom] = useState(getNumberMaskedValue(filterValue.from ?? '', opts));\n  const [to, setTo] = useState(getNumberMaskedValue(filterValue.to ?? '', opts));\n\n  const ref = useRef<HTMLInputElement | null>(null);\n  const shouldFocus = useRef(true);\n\n  const fromInputProps = useNumberMask({\n    valueSetter: setFrom,\n    ...opts,\n  });\n\n  const toInputProps = useNumberMask({\n    valueSetter: setTo,\n    ...opts,\n  });\n\n  const handleOnKeyDown = useCallback(\n    (e: React.KeyboardEvent<HTMLInputElement>) => {\n      if (e.code === 'Escape') {\n        patchHeader(column.id, { hideFilterMenu: true, hideFilterButton: false });\n        innerRef.current?.focus();\n      }\n    },\n    [column.id, innerRef, patchHeader],\n  );\n\n  const handleRef = useCallback(\n    (newRef: HTMLInputElement | null) => {\n      ref.current = newRef;\n      if (shouldFocus.current) {\n        setTimeout(() => {\n          newRef?.focus();\n          shouldFocus.current = false;\n        });\n      }\n    },\n    [shouldFocus],\n  );\n\n  useEffect(() => {\n    if (reduxHeader?.hideFilterMenu) {\n      shouldFocus.current = true;\n      // menu closed without applying: discard draft and sync with applied filter\n      setFrom(getNumberMaskedValue(filterValue.from ?? '', opts));\n      setTo(getNumberMaskedValue(filterValue.to ?? '', opts));\n    }\n  }, [filterValue.from, filterValue.to, reduxHeader?.hideFilterMenu]);\n\n  const handleSubmit = useCallback(\n    (e: React.SyntheticEvent) => {\n      e.preventDefault();\n      if (!from || !to) {\n        return;\n      }\n\n      onValueChange(FILTER_TYPES.CURRENCY_RANGE_V2, { from: from ?? '', to: to ?? '' });\n      patchHeader(column.id, { hideFilterMenu: true, hideFilterButton: false });\n      innerRef.current?.focus();\n    },\n    [column.id, from, to, innerRef, onValueChange, patchHeader],\n  );\n\n  const handleReset = useCallback(() => {\n    setFrom('');\n    setTo('');\n    onValueChange(FILTER_TYPES.CURRENCY_RANGE_V2, undefined);\n    patchHeader(column.id, { hideFilterMenu: true, hideFilterButton: false });\n    innerRef.current?.focus();\n  }, [column.id, innerRef, onValueChange, patchHeader]);\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={column.id}\n      menuContent={\n        <Grid\n          data-testid={DATA_TESTID.DATA_TABLE_CURRENCY_RANGE_CONTROLLER}\n          gutter=\"xxxs\"\n          padding=\"xxs\"\n          cols={['auto', 'auto']}\n          style={{ background: 'white' }}\n          onKeyDown={handleOnKeyDown}\n        >\n          <DSFormLayoutBlockItem label=\"Min\" inputID={`${idPreffix}-min-${column.id}-${domIdAffix}`}>\n            <DSInputText\n              value={from}\n              {...fromInputProps}\n              id={`${idPreffix}-min-${column.id}-${domIdAffix}`}\n              style={{ textAlign: 'right' }}\n              placeholder=\"0.00\"\n              innerRef={handleRef}\n            />\n          </DSFormLayoutBlockItem>\n          <DSFormLayoutBlockItem label=\"Max\" inputID={`${idPreffix}-max-${column.id}-${domIdAffix}`}>\n            <DSInputText\n              value={to}\n              {...toInputProps}\n              id={`${idPreffix}-max-${column.id}s-${domIdAffix}`}\n              style={{ textAlign: 'right' }}\n              placeholder=\"0.00\"\n            />\n          </DSFormLayoutBlockItem>\n        </Grid>\n      }\n      triggerIcon={<SearchXsmall />}\n      customStyles={{ width: referenceColumn?.offsetWidth }}\n      innerRef={innerRef}\n      ariaLabel=\"Open Currency Range Filter\"\n    />\n  );\n};\n"],
+  "mappings": "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",
+  "names": []
+}

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

@@ -0,0 +1,108 @@
+import * as React from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useEffect, useCallback, useRef, useState } from "react";
+import { DatePicker2 } from "@elliemae/ds-icons";
+import { Grid } from "@elliemae/ds-grid";
+import { DSControlledDateRangePicker } from "@elliemae/ds-form-date-range-picker";
+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 };
+const DateRangeFilterV2 = (props) => {
+  const {
+    column,
+    column: { id },
+    referenceColumn,
+    filterValue = emptyFilterValue,
+    onValueChange,
+    patchHeaderFilterButtonAndMenu,
+    reduxHeader,
+    innerRef
+  } = props;
+  const dateRange = filterValue;
+  const [startDate, setStartDate] = useState(dateRange.startDate || "");
+  const [endDate, setEndDate] = useState(dateRange.endDate || "");
+  const ref = useRef(null);
+  const lastElementRef = useRef(null);
+  const shouldFocus = useRef(true);
+  const handleRef = useCallback((newRef) => {
+    ref.current = newRef;
+    if (shouldFocus.current) {
+      setTimeout(() => {
+        newRef?.focus();
+        shouldFocus.current = false;
+      });
+    }
+  }, []);
+  useEffect(() => {
+    if (reduxHeader?.hideFilterMenu) {
+      shouldFocus.current = true;
+      setStartDate(dateRange.startDate || "");
+      setEndDate(dateRange.endDate || "");
+    }
+  }, [dateRange.endDate, dateRange.startDate, reduxHeader?.hideFilterMenu]);
+  const handleSubmit = useCallback(
+    (e) => {
+      e.preventDefault();
+      const hasValidRange = startDate && endDate && !startDate.includes("_") && !endDate.includes("_");
+      if (hasValidRange) {
+        onValueChange(FILTER_TYPES.DATE_RANGE_V2, { startDate, endDate });
+      } else {
+        return;
+      }
+      patchHeaderFilterButtonAndMenu(id, true);
+      innerRef.current?.focus();
+    },
+    [endDate, id, innerRef, onValueChange, patchHeaderFilterButtonAndMenu, startDate]
+  );
+  const handleReset = useCallback(() => {
+    setStartDate("");
+    setEndDate("");
+    onValueChange(FILTER_TYPES.DATE_RANGE_V2, void 0);
+    patchHeaderFilterButtonAndMenu(id, true);
+    innerRef.current?.focus();
+  }, [id, innerRef, onValueChange, patchHeaderFilterButtonAndMenu]);
+  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__ */ jsx(Grid, { p: "xxs", style: { background: "white" }, children: /* @__PURE__ */ jsx(
+          DSControlledDateRangePicker,
+          {
+            fromDate: startDate,
+            onFromDateChange: setStartDate,
+            toDate: endDate,
+            onToDateChange: setEndDate,
+            type: "date-range-inputs",
+            innerRef: handleRef
+          }
+        ) }),
+        /* @__PURE__ */ jsx(Grid, { children: /* @__PURE__ */ jsx(
+          DSControlledDateRangePicker,
+          {
+            fromDate: startDate,
+            onFromDateChange: setStartDate,
+            toDate: endDate,
+            onToDateChange: setEndDate,
+            type: "date-range-picker-controller-only",
+            lastElementRef
+          }
+        ) })
+      ] }),
+      triggerIcon: /* @__PURE__ */ jsx(DatePicker2, {}),
+      innerRef,
+      ariaLabel: "Open Date Range Filter"
+    }
+  );
+};
+export {
+  DateRangeFilterV2
+};
+//# sourceMappingURL=DateRangeFilterV2.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../../../../../scripts/build/transpile/react-shim.js", "../../../../../../src/addons/Filters/Components/DateRangeFilter/DateRangeFilterV2.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 { 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 };\n\ninterface DateRangeFilterValue {\n  startDate: string | null;\n  endDate: string | null;\n}\n\nexport const DateRangeFilterV2: 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  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      setStartDate(dateRange.startDate || '');\n      setEndDate(dateRange.endDate || '');\n    }\n  }, [dateRange.endDate, dateRange.startDate, 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_RANGE_V2, { startDate, endDate });\n      } else {\n        return;\n      }\n\n      patchHeaderFilterButtonAndMenu(id, true);\n      innerRef.current?.focus();\n    },\n    [endDate, id, innerRef, onValueChange, patchHeaderFilterButtonAndMenu, startDate],\n  );\n\n  const handleReset = useCallback(() => {\n    setStartDate('');\n    setEndDate('');\n    onValueChange(FILTER_TYPES.DATE_RANGE_V2, undefined);\n    patchHeaderFilterButtonAndMenu(id, true);\n    innerRef.current?.focus();\n  }, [id, innerRef, onValueChange, patchHeaderFilterButtonAndMenu]);\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\" 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            <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": "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",
+  "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/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": "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",
+  "names": []
+}