npm - @elliemae/ds-data-table - Versions diffs - 3.17.0-next.9 → 3.17.0 - Mend

@elliemae/ds-data-table 3.17.0-next.9 → 3.17.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (107) hide show

package/dist/cjs/addons/Filters/Components/CurrencyRangeFilter/index.js CHANGED Viewed

@@ -35,44 +35,40 @@ var React = __toESM(require("react"));
 var import_jsx_runtime = require("react/jsx-runtime");
 var import_react = require("react");
 var import_ds_grid = require("@elliemae/ds-grid");
-var import_ds_form = require("@elliemae/ds-form");
+var import_ds_controlled_form = require("@elliemae/ds-controlled-form");
 var import_ds_form_layout_blocks = require("@elliemae/ds-form-layout-blocks");
 var import_ds_icons = require("@elliemae/ds-icons");
 var import_exported_related = require("../../../../exported-related/index.js");
 var import_constants = require("../../../../configs/constants.js");
 const opts = {
-  prefix: "",
-  suffix: "",
-  allowDecimal: true,
-  decimalLimit: 2,
   includeThousandsSeparator: false,
-  requireDecimal: true,
-  allowNegative: true
+  decimalPlaces: 2,
+  decimalRequired: true
 };
+const idPreffix = "datatable-currency-range";
 const CurrencyRangeFilter = (props) => {
   const { column, filterValue = { from: null, to: null }, reduxHeader, patchHeader, onValueChange, innerRef } = props;
-  const ref = (0, import_react.useRef)();
-  const shouldFocus = (0, import_react.useRef)();
-  const handleFromChange = (e) => {
-    const nextValue = {
-      ...filterValue,
-      from: e.target.value
-    };
-    onValueChange(import_exported_related.FILTER_TYPES.CURRENCY_RANGE, nextValue);
-  };
-  const handleToChange = (e) => {
-    const nextValue = {
-      ...filterValue,
-      to: e.target.value
-    };
-    onValueChange(import_exported_related.FILTER_TYPES.CURRENCY_RANGE, nextValue);
-  };
-  const closePopover = (e) => {
-    if (e.code === "Escape") {
-      patchHeader(column.id, { hideFilterMenu: true, hideFilterButton: false });
-      innerRef.current.focus();
-    }
-  };
+  const [from, setFrom] = (0, import_react.useState)((0, import_ds_controlled_form.getNumberMaskedValue)(filterValue.from ?? "", opts));
+  const [to, setTo] = (0, import_react.useState)((0, import_ds_controlled_form.getNumberMaskedValue)(filterValue.to ?? "", opts));
+  const ref = (0, import_react.useRef)(null);
+  const shouldFocus = (0, import_react.useRef)(true);
+  const fromInputProps = (0, import_ds_controlled_form.useNumberMask)({
+    valueSetter: setFrom,
+    ...opts
+  });
+  const toInputProps = (0, import_ds_controlled_form.useNumberMask)({
+    valueSetter: setTo,
+    ...opts
+  });
+  const handleOnKeyDown = (0, import_react.useCallback)(
+    (e) => {
+      if (e.code === "Escape") {
+        patchHeader(column.id, { hideFilterMenu: true, hideFilterButton: false });
+        innerRef.current?.focus();
+      }
+    },
+    [column.id, innerRef, patchHeader]
+  );
   const handleRef = (0, import_react.useCallback)(
     (newRef) => {
       if (ref.current)
@@ -86,12 +82,14 @@ const CurrencyRangeFilter = (props) => {
     },
     [shouldFocus]
   );
+  (0, import_react.useEffect)(() => {
+    onValueChange(import_exported_related.FILTER_TYPES.CURRENCY_RANGE, { from, to });
+  }, [from, to]);
   (0, import_react.useEffect)(() => {
     if (reduxHeader?.hideFilterMenu) {
       shouldFocus.current = true;
     }
   }, [reduxHeader?.hideFilterMenu]);
-  const idPreffix = "datatable-currency-range";
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
     import_exported_related.FilterPopover,
     {
@@ -106,34 +104,27 @@ const CurrencyRangeFilter = (props) => {
           padding: "xxs",
           cols: ["auto", "auto"],
           style: { background: "white" },
+          onKeyDown: handleOnKeyDown,
           children: [
             /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ds_form_layout_blocks.DSFormLayoutBlockItem, { label: "Min", inputID: `${idPreffix}-min-${column.id}`, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-              import_ds_form.DSInputMask,
+              import_ds_controlled_form.DSInputText,
               {
-                containerProps: { style: { textAlign: "right" } },
+                value: from,
+                ...fromInputProps,
                 id: `${idPreffix}-min-${column.id}`,
-                value: `${filterValue?.from ?? ""}`,
-                onChange: handleFromChange,
+                style: { textAlign: "right" },
                 placeholder: "0.00",
-                mask: (number) => import_ds_form.MASK_TYPES.NUMBER(opts)(number),
-                innerRef: handleRef,
-                onKeyDown: (e) => {
-                  closePopover(e);
-                }
+                innerRef: handleRef
               }
             ) }),
             /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ds_form_layout_blocks.DSFormLayoutBlockItem, { label: "Max", inputID: `${idPreffix}-max-${column.id}`, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-              import_ds_form.DSInputMask,
+              import_ds_controlled_form.DSInputText,
               {
-                containerProps: { style: { textAlign: "right" } },
+                value: to,
+                ...toInputProps,
                 id: `${idPreffix}-max-${column.id}`,
-                value: `${filterValue?.to ?? ""}`,
-                onChange: handleToChange,
-                placeholder: "0.00",
-                mask: (number) => import_ds_form.MASK_TYPES.NUMBER(opts)(number),
-                onKeyDown: (e) => {
-                  closePopover(e);
-                }
+                style: { textAlign: "right" },
+                placeholder: "0.00"
               }
             ) })
           ]

package/dist/cjs/addons/Filters/Components/CurrencyRangeFilter/index.js.map CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../src/addons/Filters/Components/CurrencyRangeFilter/index.tsx", "../../../../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["import React, { useRef, useEffect, useCallback } from 'react';\nimport { Grid } from '@elliemae/ds-grid';\nimport { DSInputMask, MASK_TYPES } from '@elliemae/ds-form';\nimport { DSFormLayoutBlockItem } from '@elliemae/ds-form-layout-blocks';\nimport { SearchXsmall } from '@elliemae/ds-icons';\nimport { FilterPopover, FILTER_TYPES } from '../../../../exported-related/index.js';\nimport type { FilterProps } from '../../../../types/props.js';\nimport { DATA_TESTID } from '../../../../configs/constants.js';\n\nconst opts = {\n  prefix: '',\n  suffix: '',\n  allowDecimal: true,\n  decimalLimit: 2,\n  includeThousandsSeparator: false,\n  requireDecimal: true,\n  allowNegative: true,\n};\n\nexport const CurrencyRangeFilter: React.ComponentType<FilterProps> = (props) => {\n  const { column, filterValue = { from: null, to: null }, reduxHeader, patchHeader, onValueChange, innerRef } = props;\n\n  const ref = useRef();\n  const shouldFocus = useRef();\n  const handleFromChange = (e) => {\n    const nextValue = {\n      ...filterValue,\n      from: e.target.value,\n    };\n    onValueChange(FILTER_TYPES.CURRENCY_RANGE, nextValue);\n  };\n  const handleToChange = (e) => {\n    const nextValue = {\n      ...filterValue,\n      to: e.target.value,\n    };\n    onValueChange(FILTER_TYPES.CURRENCY_RANGE, nextValue);\n  };\n\n  // workaround to close menu with esc key since DSInputMask has stoppropagation on key down\n  const closePopover = (e) => {\n    if (e.code === 'Escape') {\n      patchHeader(column.id, { hideFilterMenu: true, hideFilterButton: false });\n      innerRef.current.focus();\n    }\n  };\n\n  const handleRef = useCallback(\n    (newRef) => {\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  const idPreffix = 'datatable-currency-range';\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        >\n          <DSFormLayoutBlockItem label=\"Min\" inputID={`${idPreffix}-min-${column.id}`}>\n            <DSInputMask\n              containerProps={{ style: { textAlign: 'right' } }}\n              id={`${idPreffix}-min-${column.id}`}\n              value={`${filterValue?.from ?? ''}`}\n              onChange={handleFromChange}\n              placeholder=\"0.00\"\n              mask={(number) => MASK_TYPES.NUMBER(opts)(number)}\n              innerRef={handleRef}\n              onKeyDown={(e) => {\n                closePopover(e);\n              }}\n            />\n          </DSFormLayoutBlockItem>\n          <DSFormLayoutBlockItem label=\"Max\" inputID={`${idPreffix}-max-${column.id}`}>\n            <DSInputMask\n              containerProps={{ style: { textAlign: 'right' } }}\n              id={`${idPreffix}-max-${column.id}`}\n              value={`${filterValue?.to ?? ''}`}\n              onChange={handleToChange}\n              placeholder=\"0.00\"\n              mask={(number) => MASK_TYPES.NUMBER(opts)(number)}\n              onKeyDown={(e) => {\n                closePopover(e);\n              }}\n            />\n          </DSFormLayoutBlockItem>\n        </Grid>\n      }\n      triggerIcon={<SearchXsmall />}\n      customStyles={{ width: column.ref?.current?.offsetWidth ?? '0px' }}\n      innerRef={innerRef}\n      ariaLabel=\"Open Currency Range Filter\"\n    />\n  );\n};\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": "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",
+  "sourcesContent": ["import React, { useRef, useEffect, useCallback, useState } from 'react';\nimport { Grid } from '@elliemae/ds-grid';\nimport { DSInputText, getNumberMaskedValue, useNumberMask } from '@elliemae/ds-controlled-form';\nimport { DSFormLayoutBlockItem } from '@elliemae/ds-form-layout-blocks';\nimport { SearchXsmall } from '@elliemae/ds-icons';\nimport { FilterPopover, FILTER_TYPES } from '../../../../exported-related/index.js';\nimport type { FilterProps } from '../../../../types/props.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<FilterProps<CurrentRangeFilterValue>> = (props) => {\n  const { column, filterValue = { from: null, to: null }, reduxHeader, patchHeader, onValueChange, innerRef } = 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      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    onValueChange(FILTER_TYPES.CURRENCY_RANGE, { from, to });\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  }, [from, to]);\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}`}>\n            <DSInputText\n              value={from}\n              {...fromInputProps}\n              id={`${idPreffix}-min-${column.id}`}\n              style={{ textAlign: 'right' }}\n              placeholder=\"0.00\"\n              innerRef={handleRef}\n            />\n          </DSFormLayoutBlockItem>\n          <DSFormLayoutBlockItem label=\"Max\" inputID={`${idPreffix}-max-${column.id}`}>\n            <DSInputText\n              value={to}\n              {...toInputProps}\n              id={`${idPreffix}-max-${column.id}`}\n              style={{ textAlign: 'right' }}\n              placeholder=\"0.00\"\n            />\n          </DSFormLayoutBlockItem>\n        </Grid>\n      }\n      triggerIcon={<SearchXsmall />}\n      customStyles={{ width: column.ref?.current?.offsetWidth ?? '0px' }}\n      innerRef={innerRef}\n      ariaLabel=\"Open Currency Range Filter\"\n    />\n  );\n};\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": "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",
   "names": []
 }

package/dist/cjs/addons/Filters/Components/DateRangeFilter/index.js CHANGED Viewed

@@ -36,7 +36,7 @@ var import_jsx_runtime = require("react/jsx-runtime");
 var import_react = require("react");
 var import_ds_icons = require("@elliemae/ds-icons");
 var import_ds_grid = require("@elliemae/ds-grid");
-var import_ds_controlled_form = require("@elliemae/ds-controlled-form");
+var import_ds_form_date_range_picker = require("@elliemae/ds-form-date-range-picker");
 var import_exported_related = require("../../../../exported-related/index.js");
 var import_constants = require("../../../../configs/constants.js");
 const emptyFilterValue = { startDate: null, endDate: null };
@@ -62,7 +62,7 @@ const DateRangeFilter = (props) => {
       onValueChange(import_exported_related.FILTER_TYPES.DATE_RANGE, { startDate, endDate });
     }
   }, [startDate, endDate]);
-  const ref = (0, import_react.useRef)();
+  const ref = (0, import_react.useRef)(null);
   const shouldFocus = (0, import_react.useRef)(true);
   const handleRef = (0, import_react.useCallback)((newRef) => {
     if (ref.current)
@@ -87,7 +87,7 @@ const DateRangeFilter = (props) => {
       columnId: id,
       menuContent: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_ds_grid.Grid, { width: "260px", "data-testid": import_constants.DATA_TESTID.DATA_TABLE_DATE_RANGE_CONTROLLER, children: [
         /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ds_grid.Grid, { p: "xxs", style: { background: "white" }, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-          import_ds_controlled_form.DSControlledDateRangePicker,
+          import_ds_form_date_range_picker.DSControlledDateRangePicker,
           {
             fromDate: startDate,
             onFromDateChange: setStartDate,
@@ -102,7 +102,7 @@ const DateRangeFilter = (props) => {
           {
             onKeyDown: (e) => e.code === "Enter" && setTimeout(() => patchHeaderFilterButtonAndMenu(id, !!(dateRange.startDate || dateRange.endDate)), 0),
             children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-              import_ds_controlled_form.DSControlledDateRangePicker,
+              import_ds_form_date_range_picker.DSControlledDateRangePicker,
               {
                 fromDate: startDate,
                 onFromDateChange: setStartDate,

package/dist/cjs/addons/Filters/Components/DateRangeFilter/index.js.map CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../src/addons/Filters/Components/DateRangeFilter/index.tsx", "../../../../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["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-controlled-form';\nimport { FilterPopover, FILTER_TYPES } from '../../../../exported-related/index.js';\nimport type { FilterProps } from '../../../../types/props.js';\nimport { DATA_TESTID } from '../../../../configs/constants.js';\n\nconst emptyFilterValue = { startDate: null, endDate: null };\n\nexport const DateRangeFilter: React.ComponentType<FilterProps> = (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();\n  const shouldFocus = useRef(true);\n  const handleRef = useCallback((newRef) => {\n    if (ref.current) ref.current = newRef;\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", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;AD+Df;AA/DR,mBAAgE;AAChE,sBAA4B;AAC5B,qBAAqB;AACrB,gCAA4C;AAC5C,8BAA4C;AAE5C,uBAA4B;AAE5B,MAAM,mBAAmB,EAAE,WAAW,MAAM,SAAS,KAAK;AAEnD,MAAM,kBAAoD,CAAC,UAAU;AAC1E,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,QAAI,uBAAS,UAAU,aAAa,EAAE;AACpE,QAAM,CAAC,SAAS,UAAU,QAAI,uBAAS,UAAU,WAAW,EAAE;AAE9D,8BAAU,MAAM;AACd,iBAAa,UAAU,aAAa,EAAE;AACtC,eAAW,UAAU,WAAW,EAAE;AAAA,EACpC,GAAG,CAAC,SAAS,CAAC;AAEd,8BAAU,MAAM;AACd,QAAI,aAAa,WAAW,CAAC,UAAU,SAAS,GAAG,KAAK,CAAC,QAAQ,SAAS,GAAG,GAAG;AAC9E,oBAAc,qCAAa,YAAY,EAAE,WAAW,QAAQ,CAAC;AAAA,IAC/D;AAAA,EAGF,GAAG,CAAC,WAAW,OAAO,CAAC;AAEvB,QAAM,UAAM,qBAAO;AACnB,QAAM,kBAAc,qBAAO,IAAI;AAC/B,QAAM,gBAAY,0BAAY,CAAC,WAAW;AACxC,QAAI,IAAI;AAAS,UAAI,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,8BAAU,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,6CAAC,uBAAK,OAAM,SAAQ,eAAa,6BAAY,kCAC3C;AAAA,oDAAC,uBAAK,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,4CAAC,+BAAY;AAAA,MAC1B;AAAA,MACA,WAAU;AAAA;AAAA,EACZ;AAEJ;",
+  "sourcesContent": ["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 { FilterProps } from '../../../../types/props.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<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", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADoEf;AApER,mBAAgE;AAChE,sBAA4B;AAC5B,qBAAqB;AACrB,uCAA4C;AAC5C,8BAA4C;AAE5C,uBAA4B;AAE5B,MAAM,mBAAmB,EAAE,WAAW,MAAM,SAAS,KAAK;AAOnD,MAAM,kBAA0E,CAAC,UAAU;AAChG,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,QAAI,uBAAS,UAAU,aAAa,EAAE;AACpE,QAAM,CAAC,SAAS,UAAU,QAAI,uBAAS,UAAU,WAAW,EAAE;AAE9D,8BAAU,MAAM;AACd,iBAAa,UAAU,aAAa,EAAE;AACtC,eAAW,UAAU,WAAW,EAAE;AAAA,EACpC,GAAG,CAAC,SAAS,CAAC;AAEd,8BAAU,MAAM;AACd,QAAI,aAAa,WAAW,CAAC,UAAU,SAAS,GAAG,KAAK,CAAC,QAAQ,SAAS,GAAG,GAAG;AAC9E,oBAAc,qCAAa,YAAY,EAAE,WAAW,QAAQ,CAAC;AAAA,IAC/D;AAAA,EAGF,GAAG,CAAC,WAAW,OAAO,CAAC;AAEvB,QAAM,UAAM,qBAAgC,IAAI;AAChD,QAAM,kBAAc,qBAAO,IAAI;AAC/B,QAAM,gBAAY,0BAAY,CAAC,WAAwD;AACrF,QAAI,IAAI;AAAS,UAAI,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,8BAAU,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,6CAAC,uBAAK,OAAM,SAAQ,eAAa,6BAAY,kCAC3C;AAAA,oDAAC,uBAAK,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,4CAAC,+BAAY;AAAA,MAC1B;AAAA,MACA,WAAU;AAAA;AAAA,EACZ;AAEJ;",
   "names": []
 }

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

@@ -36,7 +36,9 @@ var import_jsx_runtime = require("react/jsx-runtime");
 var import_react = require("react");
 var import_ds_icons = require("@elliemae/ds-icons");
 var import_ds_grid = require("@elliemae/ds-grid");
-var import_ds_controlled_form = require("@elliemae/ds-controlled-form");
+var import_ds_form_date_range_picker = require("@elliemae/ds-form-date-range-picker");
+var import_ds_form_date_time_picker = require("@elliemae/ds-form-date-time-picker");
+var import_ds_form_checkbox = require("@elliemae/ds-form-checkbox");
 var import_exported_related = require("../../../../exported-related/index.js");
 var import_constants = require("../../../../configs/constants.js");
 const emptyFilterValue = { startDate: null, endDate: null };
@@ -50,7 +52,7 @@ const DateSwitcherFilter = (props) => {
     reduxHeader,
     innerRef
   } = props;
-  const ref = (0, import_react.useRef)();
+  const ref = (0, import_react.useRef)(null);
   const dateRange = filterValue;
   const [startDate, setStartDate] = (0, import_react.useState)(dateRange.startDate || "");
   const [endDate, setEndDate] = (0, import_react.useState)(dateRange.endDate || "");
@@ -83,7 +85,7 @@ const DateSwitcherFilter = (props) => {
       menuContent: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_ds_grid.Grid, { width: "260px", "data-testid": import_constants.DATA_TESTID.DATA_TABLE_DATE_RANGE_CONTROLLER, children: [
         /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_ds_grid.Grid, { p: "xxs", gutter: "xxs", style: { background: "white" }, children: [
           /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { "data-testid": import_constants.DATA_TESTID.DATA_TABLE_DATE_RANGE_CONTROLLER_CHECKBOX_SWITCHER, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-            import_ds_controlled_form.DSControlledCheckbox,
+            import_ds_form_checkbox.DSControlledCheckbox,
             {
               checked: isDateRange,
               name: "Date range",
@@ -98,7 +100,7 @@ const DateSwitcherFilter = (props) => {
             }
           ) }),
           isDateRange ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-            import_ds_controlled_form.DSControlledDateRangePicker,
+            import_ds_form_date_range_picker.DSControlledDateRangePicker,
             {
               fromDate: startDate,
               onFromDateChange: setStartDate,
@@ -107,7 +109,7 @@ const DateSwitcherFilter = (props) => {
               type: "date-range-inputs"
             }
           ) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-            import_ds_controlled_form.DSControlledDateTimePicker,
+            import_ds_form_date_time_picker.DSControlledDateTimePicker,
             {
               date: startDate,
               onDateChange: (_date) => {
@@ -123,7 +125,7 @@ const DateSwitcherFilter = (props) => {
           {
             onKeyDown: (e) => e.code === "Enter" && setTimeout(() => patchHeaderFilterButtonAndMenu(id, !!(dateRange.startDate || dateRange.endDate)), 0),
             children: isDateRange ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-              import_ds_controlled_form.DSControlledDateRangePicker,
+              import_ds_form_date_range_picker.DSControlledDateRangePicker,
               {
                 fromDate: startDate,
                 onFromDateChange: setStartDate,
@@ -132,7 +134,7 @@ const DateSwitcherFilter = (props) => {
                 type: "date-range-picker-controller-only"
               }
             ) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-              import_ds_controlled_form.DSControlledDateTimePicker,
+              import_ds_form_date_time_picker.DSControlledDateTimePicker,
               {
                 date: startDate,
                 onDateChange: (_date) => {

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../src/addons/Filters/Components/DateSwitcherFilter/index.tsx", "../../../../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["/* eslint-disable max-lines */\nimport React, { useEffect, useRef, useCallback, useState } from 'react';\nimport { DatePicker2 } from '@elliemae/ds-icons';\nimport { Grid } from '@elliemae/ds-grid';\nimport {\n  DSControlledDateRangePicker,\n  DSControlledDateTimePicker,\n  DSControlledCheckbox,\n} from '@elliemae/ds-controlled-form';\nimport { FilterPopover, FILTER_TYPES } from '../../../../exported-related/index.js';\nimport type { FilterProps } from '../../../../types/props.js';\nimport { DATA_TESTID } from '../../../../configs/constants.js';\n\nconst emptyFilterValue = { startDate: null, endDate: null };\n\nexport const DateSwitcherFilter: React.ComponentType<FilterProps> = (props) => {\n  const {\n    column,\n    column: { id },\n    filterValue = emptyFilterValue,\n    onValueChange,\n    patchHeaderFilterButtonAndMenu,\n    reduxHeader,\n    innerRef,\n  } = props;\n\n  const ref = useRef();\n  const dateRange = filterValue;\n\n  const [startDate, setStartDate] = useState(dateRange.startDate || '');\n  const [endDate, setEndDate] = useState(dateRange.endDate || '');\n  const [isDateRange, setIsDateRange] = useState(false);\n\n  useEffect(() => {\n    setStartDate(dateRange.startDate || '');\n    setEndDate(dateRange.endDate || '');\n  }, [dateRange]);\n\n  useEffect(() => {\n    if (startDate && endDate && !startDate.includes('_') && !endDate.includes('_')) {\n      onValueChange(FILTER_TYPES.DATE_SWITCHER, { startDate, endDate, isDateRange });\n    }\n    // We are missing onValueChange on purpose, this is an internal function and won't cause any problems\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [startDate, endDate, isDateRange]);\n\n  const handleRef = useCallback(\n    (newRef) => {\n      if (ref.current) ref.current = newRef;\n      if (!reduxHeader?.hideFilterMenu) {\n        setTimeout(() => newRef?.focus());\n      }\n    },\n    [reduxHeader?.hideFilterMenu],\n  );\n\n  return (\n    <FilterPopover\n      reduxHeader={reduxHeader}\n      column={column}\n      columnId={id}\n      menuContent={\n        <Grid width=\"260px\" data-testid={DATA_TESTID.DATA_TABLE_DATE_RANGE_CONTROLLER}>\n          <Grid p=\"xxs\" gutter=\"xxs\" style={{ background: 'white' }}>\n            <div data-testid={DATA_TESTID.DATA_TABLE_DATE_RANGE_CONTROLLER_CHECKBOX_SWITCHER}>\n              <DSControlledCheckbox\n                checked={isDateRange}\n                name=\"Date range\"\n                label=\"Date Range\"\n                id=\"date-range-switcher-id-internal\"\n                onChange={() => {\n                  setIsDateRange(!isDateRange);\n                  setStartDate('');\n                  setEndDate('');\n                }}\n                innerRef={handleRef}\n              />\n            </div>\n            {isDateRange ? (\n              <DSControlledDateRangePicker\n                fromDate={startDate}\n                onFromDateChange={setStartDate}\n                toDate={endDate}\n                onToDateChange={setEndDate}\n                type=\"date-range-inputs\"\n              />\n            ) : (\n              <DSControlledDateTimePicker\n                date={startDate}\n                onDateChange={(_date) => {\n                  setStartDate(_date);\n                  setEndDate(_date);\n                }}\n                type=\"date-inputs\"\n              />\n            )}\n          </Grid>\n          <Grid\n            onKeyDown={(e) =>\n              e.code === 'Enter' &&\n              setTimeout(() => patchHeaderFilterButtonAndMenu(id, !!(dateRange.startDate || dateRange.endDate)), 0)\n            }\n          >\n            {isDateRange ? (\n              <DSControlledDateRangePicker\n                fromDate={startDate}\n                onFromDateChange={setStartDate}\n                toDate={endDate}\n                onToDateChange={setEndDate}\n                type=\"date-range-picker-controller-only\"\n              />\n            ) : (\n              <DSControlledDateTimePicker\n                date={startDate}\n                onDateChange={(_date) => {\n                  setStartDate(_date);\n                  setEndDate(_date);\n                }}\n                type=\"date-picker-controller-only\"\n              />\n            )}\n          </Grid>\n        </Grid>\n      }\n      triggerIcon={<DatePicker2 />}\n      innerRef={innerRef}\n      ariaLabel=\"Open Date Range Filter\"\n    />\n  );\n};\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;AD+Db;AA9DV,mBAAgE;AAChE,sBAA4B;AAC5B,qBAAqB;AACrB,gCAIO;AACP,8BAA4C;AAE5C,uBAA4B;AAE5B,MAAM,mBAAmB,EAAE,WAAW,MAAM,SAAS,KAAK;AAEnD,MAAM,qBAAuD,CAAC,UAAU;AAC7E,QAAM;AAAA,IACJ;AAAA,IACA,QAAQ,EAAE,GAAG;AAAA,IACb,cAAc;AAAA,IACd;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,IAAI;AAEJ,QAAM,UAAM,qBAAO;AACnB,QAAM,YAAY;AAElB,QAAM,CAAC,WAAW,YAAY,QAAI,uBAAS,UAAU,aAAa,EAAE;AACpE,QAAM,CAAC,SAAS,UAAU,QAAI,uBAAS,UAAU,WAAW,EAAE;AAC9D,QAAM,CAAC,aAAa,cAAc,QAAI,uBAAS,KAAK;AAEpD,8BAAU,MAAM;AACd,iBAAa,UAAU,aAAa,EAAE;AACtC,eAAW,UAAU,WAAW,EAAE;AAAA,EACpC,GAAG,CAAC,SAAS,CAAC;AAEd,8BAAU,MAAM;AACd,QAAI,aAAa,WAAW,CAAC,UAAU,SAAS,GAAG,KAAK,CAAC,QAAQ,SAAS,GAAG,GAAG;AAC9E,oBAAc,qCAAa,eAAe,EAAE,WAAW,SAAS,YAAY,CAAC;AAAA,IAC/E;AAAA,EAGF,GAAG,CAAC,WAAW,SAAS,WAAW,CAAC;AAEpC,QAAM,gBAAY;AAAA,IAChB,CAAC,WAAW;AACV,UAAI,IAAI;AAAS,YAAI,UAAU;AAC/B,UAAI,CAAC,aAAa,gBAAgB;AAChC,mBAAW,MAAM,QAAQ,MAAM,CAAC;AAAA,MAClC;AAAA,IACF;AAAA,IACA,CAAC,aAAa,cAAc;AAAA,EAC9B;AAEA,SACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA;AAAA,MACA,UAAU;AAAA,MACV,aACE,6CAAC,uBAAK,OAAM,SAAQ,eAAa,6BAAY,kCAC3C;AAAA,qDAAC,uBAAK,GAAE,OAAM,QAAO,OAAM,OAAO,EAAE,YAAY,QAAQ,GACtD;AAAA,sDAAC,SAAI,eAAa,6BAAY,oDAC5B;AAAA,YAAC;AAAA;AAAA,cACC,SAAS;AAAA,cACT,MAAK;AAAA,cACL,OAAM;AAAA,cACN,IAAG;AAAA,cACH,UAAU,MAAM;AACd,+BAAe,CAAC,WAAW;AAC3B,6BAAa,EAAE;AACf,2BAAW,EAAE;AAAA,cACf;AAAA,cACA,UAAU;AAAA;AAAA,UACZ,GACF;AAAA,UACC,cACC;AAAA,YAAC;AAAA;AAAA,cACC,UAAU;AAAA,cACV,kBAAkB;AAAA,cAClB,QAAQ;AAAA,cACR,gBAAgB;AAAA,cAChB,MAAK;AAAA;AAAA,UACP,IAEA;AAAA,YAAC;AAAA;AAAA,cACC,MAAM;AAAA,cACN,cAAc,CAAC,UAAU;AACvB,6BAAa,KAAK;AAClB,2BAAW,KAAK;AAAA,cAClB;AAAA,cACA,MAAK;AAAA;AAAA,UACP;AAAA,WAEJ;AAAA,QACA;AAAA,UAAC;AAAA;AAAA,YACC,WAAW,CAAC,MACV,EAAE,SAAS,WACX,WAAW,MAAM,+BAA+B,IAAI,CAAC,EAAE,UAAU,aAAa,UAAU,QAAQ,GAAG,CAAC;AAAA,YAGrG,wBACC;AAAA,cAAC;AAAA;AAAA,gBACC,UAAU;AAAA,gBACV,kBAAkB;AAAA,gBAClB,QAAQ;AAAA,gBACR,gBAAgB;AAAA,gBAChB,MAAK;AAAA;AAAA,YACP,IAEA;AAAA,cAAC;AAAA;AAAA,gBACC,MAAM;AAAA,gBACN,cAAc,CAAC,UAAU;AACvB,+BAAa,KAAK;AAClB,6BAAW,KAAK;AAAA,gBAClB;AAAA,gBACA,MAAK;AAAA;AAAA,YACP;AAAA;AAAA,QAEJ;AAAA,SACF;AAAA,MAEF,aAAa,4CAAC,+BAAY;AAAA,MAC1B;AAAA,MACA,WAAU;AAAA;AAAA,EACZ;AAEJ;",
+  "sourcesContent": ["import React, { useEffect, useRef, useCallback, useState } from 'react';\nimport { DatePicker2 } from '@elliemae/ds-icons';\nimport { Grid } from '@elliemae/ds-grid';\nimport { DSControlledDateRangePicker } from '@elliemae/ds-form-date-range-picker';\nimport { DSControlledDateTimePicker } from '@elliemae/ds-form-date-time-picker';\nimport { DSControlledCheckbox } from '@elliemae/ds-form-checkbox';\nimport { FilterPopover, FILTER_TYPES } from '../../../../exported-related/index.js';\nimport type { FilterProps } from '../../../../types/props.js';\nimport { DATA_TESTID } from '../../../../configs/constants.js';\n\nconst emptyFilterValue = { startDate: null, endDate: null };\n\ninterface DateSwitcherFilterValue {\n  startDate: string | null;\n  endDate: string | null;\n  isDateRange: boolean;\n}\n\nexport const DateSwitcherFilter: React.ComponentType<FilterProps<DateSwitcherFilterValue>> = (props) => {\n  const {\n    column,\n    column: { id },\n    filterValue = emptyFilterValue,\n    onValueChange,\n    patchHeaderFilterButtonAndMenu,\n    reduxHeader,\n    innerRef,\n  } = props;\n\n  const ref = useRef<HTMLInputElement | null>(null);\n  const dateRange = filterValue;\n\n  const [startDate, setStartDate] = useState(dateRange.startDate || '');\n  const [endDate, setEndDate] = useState(dateRange.endDate || '');\n  const [isDateRange, setIsDateRange] = useState(false);\n\n  useEffect(() => {\n    setStartDate(dateRange.startDate || '');\n    setEndDate(dateRange.endDate || '');\n  }, [dateRange]);\n\n  useEffect(() => {\n    if (startDate && endDate && !startDate.includes('_') && !endDate.includes('_')) {\n      onValueChange(FILTER_TYPES.DATE_SWITCHER, { startDate, endDate, isDateRange });\n    }\n    // We are missing onValueChange on purpose, this is an internal function and won't cause any problems\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [startDate, endDate, isDateRange]);\n\n  const handleRef = useCallback(\n    (newRef: HTMLInputElement | HTMLButtonElement | null) => {\n      if (ref.current) ref.current = newRef as HTMLInputElement | null;\n      if (!reduxHeader?.hideFilterMenu) {\n        setTimeout(() => newRef?.focus());\n      }\n    },\n    [reduxHeader?.hideFilterMenu],\n  );\n\n  return (\n    <FilterPopover\n      reduxHeader={reduxHeader}\n      column={column}\n      columnId={id}\n      menuContent={\n        <Grid width=\"260px\" data-testid={DATA_TESTID.DATA_TABLE_DATE_RANGE_CONTROLLER}>\n          <Grid p=\"xxs\" gutter=\"xxs\" style={{ background: 'white' }}>\n            <div data-testid={DATA_TESTID.DATA_TABLE_DATE_RANGE_CONTROLLER_CHECKBOX_SWITCHER}>\n              <DSControlledCheckbox\n                checked={isDateRange}\n                name=\"Date range\"\n                label=\"Date Range\"\n                id=\"date-range-switcher-id-internal\"\n                onChange={() => {\n                  setIsDateRange(!isDateRange);\n                  setStartDate('');\n                  setEndDate('');\n                }}\n                innerRef={handleRef}\n              />\n            </div>\n            {isDateRange ? (\n              <DSControlledDateRangePicker\n                fromDate={startDate}\n                onFromDateChange={setStartDate}\n                toDate={endDate}\n                onToDateChange={setEndDate}\n                type=\"date-range-inputs\"\n              />\n            ) : (\n              <DSControlledDateTimePicker\n                date={startDate}\n                onDateChange={(_date) => {\n                  setStartDate(_date);\n                  setEndDate(_date);\n                }}\n                type=\"date-inputs\"\n              />\n            )}\n          </Grid>\n          <Grid\n            onKeyDown={(e) =>\n              e.code === 'Enter' &&\n              setTimeout(() => patchHeaderFilterButtonAndMenu(id, !!(dateRange.startDate || dateRange.endDate)), 0)\n            }\n          >\n            {isDateRange ? (\n              <DSControlledDateRangePicker\n                fromDate={startDate}\n                onFromDateChange={setStartDate}\n                toDate={endDate}\n                onToDateChange={setEndDate}\n                type=\"date-range-picker-controller-only\"\n              />\n            ) : (\n              <DSControlledDateTimePicker\n                date={startDate}\n                onDateChange={(_date) => {\n                  setStartDate(_date);\n                  setEndDate(_date);\n                }}\n                type=\"date-picker-controller-only\"\n              />\n            )}\n          </Grid>\n        </Grid>\n      }\n      triggerIcon={<DatePicker2 />}\n      innerRef={innerRef}\n      ariaLabel=\"Open Date Range Filter\"\n    />\n  );\n};\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": "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",
   "names": []
 }

package/dist/cjs/addons/Filters/Components/NumberRangeFilter/index.js CHANGED Viewed

@@ -35,45 +35,54 @@ var React = __toESM(require("react"));
 var import_jsx_runtime = require("react/jsx-runtime");
 var import_react = require("react");
 var import_ds_grid = require("@elliemae/ds-grid");
-var import_ds_form = require("@elliemae/ds-form");
+var import_ds_controlled_form = require("@elliemae/ds-controlled-form");
 var import_ds_form_layout_blocks = require("@elliemae/ds-form-layout-blocks");
 var import_ds_icons = require("@elliemae/ds-icons");
 var import_exported_related = require("../../../../exported-related/index.js");
 var import_constants = require("../../../../configs/constants.js");
 const opts = {
-  prefix: "",
-  suffix: "",
-  allowDecimal: false,
   includeThousandsSeparator: false,
-  requireDecimal: false,
-  allowNegative: true
+  decimalPlaces: 0
+};
+const idPreffix = "datatable-number-range";
+const conform = (value) => {
+  const valueAsString = value?.toString() ?? "";
+  return (0, import_ds_controlled_form.getNumberMaskedValue)(valueAsString, opts);
 };
 const NumberRangeFilter = (props) => {
   const { column, filterValue = { from: null, to: null }, reduxHeader, patchHeader, onValueChange, innerRef } = props;
-  const handleFromChange = (e) => {
-    const from = e.target.value !== "" ? parseInt(e.target.value, 10) : "";
-    const nextValue = {
-      ...filterValue,
-      from
-    };
-    onValueChange(import_exported_related.FILTER_TYPES.CURRENCY_RANGE, nextValue);
-  };
-  const handleToChange = (e) => {
-    const to = e.target.value !== "" ? parseInt(e.target.value, 10) : "";
-    const nextValue = {
-      ...filterValue,
-      to
-    };
-    onValueChange(import_exported_related.FILTER_TYPES.CURRENCY_RANGE, nextValue);
-  };
-  const closePopover = (e) => {
-    if (e.code === "Escape") {
-      patchHeader(column.id, { hideFilterMenu: true, hideFilterButton: false });
-      innerRef.current.focus();
-    }
-  };
-  const idPreffix = "datatable-number-range";
-  const ref = (0, import_react.useRef)();
+  const handleFromChange = (0, import_react.useCallback)(
+    (e) => {
+      const from = e.target.value !== "" ? parseInt(e.target.value, 10) : "";
+      const nextValue = {
+        ...filterValue,
+        from
+      };
+      onValueChange(import_exported_related.FILTER_TYPES.CURRENCY_RANGE, nextValue);
+    },
+    [filterValue, onValueChange]
+  );
+  const handleToChange = (0, import_react.useCallback)(
+    (e) => {
+      const to = e.target.value !== "" ? parseInt(e.target.value, 10) : "";
+      const nextValue = {
+        ...filterValue,
+        to
+      };
+      onValueChange(import_exported_related.FILTER_TYPES.CURRENCY_RANGE, nextValue);
+    },
+    [filterValue, onValueChange]
+  );
+  const onKeyDownHandler = (0, import_react.useCallback)(
+    (e) => {
+      if (e.code === "Escape") {
+        patchHeader(column.id, { hideFilterMenu: true, hideFilterButton: false });
+        innerRef.current?.focus();
+      }
+    },
+    [column.id, innerRef, patchHeader]
+  );
+  const ref = (0, import_react.useRef)(null);
   const shouldFocus = (0, import_react.useRef)(true);
   const handleRef = (0, import_react.useCallback)(
     (newRef) => {
@@ -109,32 +118,26 @@ const NumberRangeFilter = (props) => {
           style: { background: "white" },
           children: [
             /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ds_form_layout_blocks.DSFormLayoutBlockItem, { label: "Low", inputID: `${idPreffix}-low-${column.id}`, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-              import_ds_form.DSInputMask,
+              import_ds_controlled_form.DSInputText,
               {
-                containerProps: { style: { textAlign: "right" } },
-                id: `${idPreffix}-low-${column.id}`,
-                value: `${filterValue?.from ?? ""}`,
+                value: conform(filterValue.from),
                 onChange: handleFromChange,
+                id: `${idPreffix}-low-${column.id}`,
+                style: { textAlign: "right" },
                 placeholder: "0",
-                mask: (number) => import_ds_form.MASK_TYPES.NUMBER(opts)(number),
                 innerRef: handleRef,
-                onKeyDown: (e) => {
-                  closePopover(e);
-                }
+                onKeyDown: onKeyDownHandler
               }
             ) }),
             /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ds_form_layout_blocks.DSFormLayoutBlockItem, { label: "High", inputID: `${idPreffix}-high-${column.id}`, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-              import_ds_form.DSInputMask,
+              import_ds_controlled_form.DSInputText,
               {
-                containerProps: { style: { textAlign: "right" } },
-                id: `${idPreffix}-high-${column.id}`,
-                value: `${filterValue?.to ?? ""}`,
+                value: conform(filterValue.to),
                 onChange: handleToChange,
+                id: `${idPreffix}-high-${column.id}`,
+                style: { textAlign: "right" },
                 placeholder: "0",
-                mask: (number) => import_ds_form.MASK_TYPES.NUMBER(opts)(number),
-                onKeyDown: (e) => {
-                  closePopover(e);
-                }
+                onKeyDown: onKeyDownHandler
               }
             ) })
           ]

package/dist/cjs/addons/Filters/Components/NumberRangeFilter/index.js.map CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../src/addons/Filters/Components/NumberRangeFilter/index.tsx", "../../../../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["import React, { useRef, useEffect, useCallback } from 'react';\nimport { Grid } from '@elliemae/ds-grid';\nimport { DSInputMask, MASK_TYPES } from '@elliemae/ds-form';\nimport { DSFormLayoutBlockItem } from '@elliemae/ds-form-layout-blocks';\nimport { SearchXsmall } from '@elliemae/ds-icons';\nimport { FilterPopover, FILTER_TYPES } from '../../../../exported-related/index.js';\nimport type { FilterProps } from '../../../../types/props.js';\nimport { DATA_TESTID } from '../../../../configs/constants.js';\n\nconst opts = {\n  prefix: '',\n  suffix: '',\n  allowDecimal: false,\n  includeThousandsSeparator: false,\n  requireDecimal: false,\n  allowNegative: true,\n};\n\nexport const NumberRangeFilter: React.ComponentType<FilterProps> = (props) => {\n  const { column, filterValue = { from: null, to: null }, reduxHeader, patchHeader, onValueChange, innerRef } = props;\n\n  const handleFromChange = (e) => {\n    const from = e.target.value !== '' ? parseInt(e.target.value, 10) : '';\n    const nextValue = {\n      ...filterValue,\n      from,\n    };\n    onValueChange(FILTER_TYPES.CURRENCY_RANGE, nextValue);\n  };\n  const handleToChange = (e) => {\n    const to = e.target.value !== '' ? parseInt(e.target.value, 10) : '';\n    const nextValue = {\n      ...filterValue,\n      to,\n    };\n    onValueChange(FILTER_TYPES.CURRENCY_RANGE, nextValue);\n  };\n\n  // workaround to close menu with esc key since DSInputMask has stoppropagation on key down\n  const closePopover = (e) => {\n    if (e.code === 'Escape') {\n      patchHeader(column.id, { hideFilterMenu: true, hideFilterButton: false });\n      innerRef.current.focus();\n    }\n  };\n  const idPreffix = 'datatable-number-range';\n\n  const ref = useRef();\n  const shouldFocus = useRef(true);\n  const handleRef = useCallback(\n    (newRef) => {\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_NUMBER_RANGE_CONTROLLER}\n          gutter=\"xxxs\"\n          padding=\"xxs\"\n          cols={['auto', 'auto']}\n          style={{ background: 'white' }}\n        >\n          <DSFormLayoutBlockItem label=\"Low\" inputID={`${idPreffix}-low-${column.id}`}>\n            <DSInputMask\n              containerProps={{ style: { textAlign: 'right' } }}\n              id={`${idPreffix}-low-${column.id}`}\n              value={`${filterValue?.from ?? ''}`}\n              onChange={handleFromChange}\n              placeholder=\"0\"\n              mask={(number) => MASK_TYPES.NUMBER(opts)(number)}\n              innerRef={handleRef}\n              onKeyDown={(e) => {\n                closePopover(e);\n              }}\n            />\n          </DSFormLayoutBlockItem>\n          <DSFormLayoutBlockItem label=\"High\" inputID={`${idPreffix}-high-${column.id}`}>\n            <DSInputMask\n              containerProps={{ style: { textAlign: 'right' } }}\n              id={`${idPreffix}-high-${column.id}`}\n              value={`${filterValue?.to ?? ''}`}\n              onChange={handleToChange}\n              placeholder=\"0\"\n              mask={(number) => MASK_TYPES.NUMBER(opts)(number)}\n              onKeyDown={(e) => {\n                closePopover(e);\n              }}\n            />\n          </DSFormLayoutBlockItem>\n        </Grid>\n      }\n      triggerIcon={<SearchXsmall />}\n      customStyles={{ width: column.ref?.current?.offsetWidth ?? '0px' }}\n      innerRef={innerRef}\n      ariaLabel=\"Open Number Range Filter\"\n    />\n  );\n};\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": "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",
+  "sourcesContent": ["import React, { useRef, useEffect, useCallback } from 'react';\nimport { Grid } from '@elliemae/ds-grid';\nimport { DSInputText, getNumberMaskedValue } from '@elliemae/ds-controlled-form';\nimport { DSFormLayoutBlockItem } from '@elliemae/ds-form-layout-blocks';\nimport { SearchXsmall } from '@elliemae/ds-icons';\nimport { FilterPopover, FILTER_TYPES } from '../../../../exported-related/index.js';\nimport type { FilterProps } from '../../../../types/props.js';\nimport { DATA_TESTID } from '../../../../configs/constants.js';\n\ninterface NumberRangeFilterValue {\n  from: number | '' | null;\n  to: number | '' | null;\n}\n\nconst opts = {\n  includeThousandsSeparator: false,\n  decimalPlaces: 0,\n};\n\nconst idPreffix = 'datatable-number-range';\n\nconst conform = (value: number | string | null) => {\n  const valueAsString = value?.toString() ?? '';\n  return getNumberMaskedValue(valueAsString, opts);\n};\n\nexport const NumberRangeFilter: React.ComponentType<FilterProps<NumberRangeFilterValue>> = (props) => {\n  const { column, filterValue = { from: null, to: null }, reduxHeader, patchHeader, onValueChange, innerRef } = props;\n\n  const handleFromChange = useCallback(\n    (e: React.ChangeEvent<HTMLInputElement>) => {\n      const from: NumberRangeFilterValue['from'] = e.target.value !== '' ? parseInt(e.target.value, 10) : '';\n      const nextValue = {\n        ...filterValue,\n        from,\n      };\n      onValueChange(FILTER_TYPES.CURRENCY_RANGE, nextValue);\n    },\n    [filterValue, onValueChange],\n  );\n\n  const handleToChange = useCallback(\n    (e: React.ChangeEvent<HTMLInputElement>) => {\n      const to: NumberRangeFilterValue['to'] = e.target.value !== '' ? parseInt(e.target.value, 10) : '';\n      const nextValue = {\n        ...filterValue,\n        to,\n      };\n      onValueChange(FILTER_TYPES.CURRENCY_RANGE, nextValue);\n    },\n    [filterValue, onValueChange],\n  );\n\n  // workaround to close menu with esc key since DSInputMask has stoppropagation on key down\n  const onKeyDownHandler = 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 ref = useRef<HTMLInputElement | null>(null);\n  const shouldFocus = useRef(true);\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_NUMBER_RANGE_CONTROLLER}\n          gutter=\"xxxs\"\n          padding=\"xxs\"\n          cols={['auto', 'auto']}\n          style={{ background: 'white' }}\n        >\n          <DSFormLayoutBlockItem label=\"Low\" inputID={`${idPreffix}-low-${column.id}`}>\n            <DSInputText\n              value={conform(filterValue.from)}\n              onChange={handleFromChange}\n              id={`${idPreffix}-low-${column.id}`}\n              style={{ textAlign: 'right' }}\n              placeholder=\"0\"\n              innerRef={handleRef}\n              onKeyDown={onKeyDownHandler}\n            />\n          </DSFormLayoutBlockItem>\n          <DSFormLayoutBlockItem label=\"High\" inputID={`${idPreffix}-high-${column.id}`}>\n            <DSInputText\n              value={conform(filterValue.to)}\n              onChange={handleToChange}\n              id={`${idPreffix}-high-${column.id}`}\n              style={{ textAlign: 'right' }}\n              placeholder=\"0\"\n              onKeyDown={onKeyDownHandler}\n            />\n          </DSFormLayoutBlockItem>\n        </Grid>\n      }\n      triggerIcon={<SearchXsmall />}\n      customStyles={{ width: column.ref?.current?.offsetWidth ?? '0px' }}\n      innerRef={innerRef}\n      ariaLabel=\"Open Number Range Filter\"\n    />\n  );\n};\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": "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",
   "names": []
 }