@elliemae/ds-data-table 3.60.0-next.4 → 3.60.0-next.40

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/CurrencyRangeFilter/index.js

@@ -33,6 +33,7 @@ const CurrencyRangeFilter = (props) => {
     setTo(filterValue.to ?? "");
   }, [filterValue.from, filterValue.to]);
   const ref = useRef(null);
+  const lastElementRef = useRef(null);
   const shouldFocus = useRef(true);
   const handleApplyChange = useCallback(
     ({ newFrom, newTo }) => {
@@ -73,7 +74,7 @@ const CurrencyRangeFilter = (props) => {
   );
   const handleRef = useCallback(
     (newRef) => {
-      if (ref.current) ref.current = newRef;
+      ref.current = newRef;
       if (shouldFocus.current) {
         setTimeout(() => {
           newRef?.focus();
@@ -91,8 +92,11 @@ const CurrencyRangeFilter = (props) => {
   return /* @__PURE__ */ jsx(
     FilterPopover,
     {
+      firstElementRef: ref,
+      lastElementRef,
       reduxHeader,
       column,
+      columnReference: referenceColumn,
       columnId: column.id,
       menuContent: /* @__PURE__ */ jsxs(
         Grid,
@@ -122,7 +126,8 @@ const CurrencyRangeFilter = (props) => {
                 ...toInputProps,
                 id: `${idPreffix}-max-${column.id}s-${domIdAffix}`,
                 style: { textAlign: "right" },
-                placeholder: "0.00"
+                placeholder: "0.00",
+                innerRef: lastElementRef
               }
             ) })
           ]

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../../../scripts/build/transpile/react-shim.js", "../../../../../../src/addons/Filters/Components/CurrencyRangeFilter/index.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 { 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 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 CurrencyRangeFilter: React.ComponentType<DSDataTableT.FilterProps<CurrentRangeFilterValue>> = (props) => {\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  useEffect(() => {\n    // in order to update the input values when the user clear the filters\n    // we need to update the state when the filterValue changes\n    setFrom(filterValue.from ?? '');\n    setTo(filterValue.to ?? '');\n  }, [filterValue.from, filterValue.to]);\n\n  const ref = useRef<HTMLInputElement | null>(null);\n  const shouldFocus = useRef(true);\n\n  const handleApplyChange = useCallback(\n    ({ newFrom, newTo }: { newFrom?: string; newTo?: string }) => {\n      onValueChange(FILTER_TYPES.CURRENCY_RANGE, { from: newFrom ?? '', to: newTo ?? '' });\n    },\n    [onValueChange],\n  );\n\n  const handleFromChange = useCallback(\n    (e: React.ChangeEvent<HTMLInputElement>, newFrom?: string) => {\n      handleApplyChange({ newFrom, newTo: to });\n    },\n    [handleApplyChange, to],\n  );\n  const handleToChange = useCallback(\n    (e: React.ChangeEvent<HTMLInputElement>, newTo?: string) => {\n      handleApplyChange({ newFrom: from, newTo });\n    },\n    [from, handleApplyChange],\n  );\n\n  const fromInputProps = useNumberMask({\n    valueSetter: setFrom,\n    onChange: handleFromChange,\n    ...opts,\n  });\n\n  const toInputProps = useNumberMask({\n    valueSetter: setTo,\n    onChange: handleToChange,\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      if (ref.current) 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    }\n  }, [reduxHeader?.hideFilterMenu]);\n\n  return (\n    <FilterPopover\n      reduxHeader={reduxHeader}\n      column={column}\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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",
+  "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 { 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 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 CurrencyRangeFilter: React.ComponentType<DSDataTableT.FilterProps<CurrentRangeFilterValue>> = (props) => {\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  useEffect(() => {\n    // in order to update the input values when the user clear the filters\n    // we need to update the state when the filterValue changes\n    setFrom(filterValue.from ?? '');\n    setTo(filterValue.to ?? '');\n  }, [filterValue.from, filterValue.to]);\n\n  const ref = useRef<HTMLInputElement | null>(null);\n  const lastElementRef = useRef<HTMLInputElement | null>(null);\n  const shouldFocus = useRef(true);\n\n  const handleApplyChange = useCallback(\n    ({ newFrom, newTo }: { newFrom?: string; newTo?: string }) => {\n      onValueChange(FILTER_TYPES.CURRENCY_RANGE, { from: newFrom ?? '', to: newTo ?? '' });\n    },\n    [onValueChange],\n  );\n\n  const handleFromChange = useCallback(\n    (e: React.ChangeEvent<HTMLInputElement>, newFrom?: string) => {\n      handleApplyChange({ newFrom, newTo: to });\n    },\n    [handleApplyChange, to],\n  );\n  const handleToChange = useCallback(\n    (e: React.ChangeEvent<HTMLInputElement>, newTo?: string) => {\n      handleApplyChange({ newFrom: from, newTo });\n    },\n    [from, handleApplyChange],\n  );\n\n  const fromInputProps = useNumberMask({\n    valueSetter: setFrom,\n    onChange: handleFromChange,\n    ...opts,\n  });\n\n  const toInputProps = useNumberMask({\n    valueSetter: setTo,\n    onChange: handleToChange,\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    }\n  }, [reduxHeader?.hideFilterMenu]);\n\n  return (\n    <FilterPopover\n      firstElementRef={ref}\n      lastElementRef={lastElementRef}\n      reduxHeader={reduxHeader}\n      column={column}\n      columnReference={referenceColumn}\n      columnId={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              innerRef={lastElementRef}\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/DateRangeFilter/index.js

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

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

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

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

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

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

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