@elliemae/ds-data-table 2.3.1 → 3.0.0-alpha.3

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

@@ -0,0 +1,65 @@
+import * as React from "react";
+import React2, { useEffect, useState } from "react";
+import { DatePicker2 } from "@elliemae/ds-icons";
+import { Grid } from "@elliemae/ds-grid";
+import { DSControlledDateRangePicker } from "@elliemae/ds-controlled-form";
+import { FilterPopover, FILTER_TYPES } from "../../../../exported-related";
+import { DATA_TESTID } from "../../../../configs/constants";
+const emptyFilterValue = { startDate: null, endDate: null };
+const DateRangeFilter = (props) => {
+  const {
+    column,
+    column: { id },
+    filterValue = emptyFilterValue,
+    onValueChange,
+    patchHeaderFilterButtonAndMenu,
+    reduxHeader,
+    innerRef
+  } = props;
+  const dateRange = filterValue;
+  const [startDate, setStartDate] = useState(dateRange.startDate || "");
+  const [endDate, setEndDate] = useState(dateRange.endDate || "");
+  useEffect(() => {
+    setStartDate(dateRange.startDate || "");
+    setEndDate(dateRange.endDate || "");
+  }, [dateRange]);
+  useEffect(() => {
+    if (startDate && endDate && !startDate.includes("_") && !endDate.includes("_")) {
+      onValueChange(FILTER_TYPES.DATE_RANGE, { startDate, endDate });
+    }
+  }, [startDate, endDate]);
+  return /* @__PURE__ */ React2.createElement(FilterPopover, {
+    reduxHeader,
+    column,
+    columnId: id,
+    menuContent: /* @__PURE__ */ React2.createElement(Grid, {
+      width: "260px",
+      "data-testid": DATA_TESTID.DATA_TABLE_DATE_RANGE_CONTROLLER
+    }, /* @__PURE__ */ React2.createElement(Grid, {
+      p: "xxs",
+      style: { background: "white" }
+    }, /* @__PURE__ */ React2.createElement(DSControlledDateRangePicker, {
+      fromDate: startDate,
+      onFromDateChange: setStartDate,
+      toDate: endDate,
+      onToDateChange: setEndDate,
+      type: "date-range-inputs",
+      autoFocus: true
+    })), /* @__PURE__ */ React2.createElement(Grid, {
+      onKeyDown: (e) => e.code === "Enter" && setTimeout(() => patchHeaderFilterButtonAndMenu(id, !!(dateRange.startDate || dateRange.endDate)), 0)
+    }, /* @__PURE__ */ React2.createElement(DSControlledDateRangePicker, {
+      fromDate: startDate,
+      onFromDateChange: setStartDate,
+      toDate: endDate,
+      onToDateChange: setEndDate,
+      type: "date-range-picker-controller-only"
+    }))),
+    triggerIcon: /* @__PURE__ */ React2.createElement(DatePicker2, null),
+    innerRef,
+    ariaLabel: "Open Date Range Filter"
+  });
+};
+export {
+  DateRangeFilter
+};
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +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", "/* eslint-disable react/prop-types */\nimport React, { useEffect, 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';\nimport { FilterProps } from '../../../../types/props';\nimport { DATA_TESTID } from '../../../../configs/constants';\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  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              autoFocus\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;ACCA;AACA;AACA;AACA;AACA;AAEA;AAEA,MAAM,mBAAmB,EAAE,WAAW,MAAM,SAAS;AAE9C,MAAM,kBAAoD,CAAC,UAAU;AAC1E,QAAM;AAAA,IACJ;AAAA,IACA,QAAQ,EAAE;AAAA,IACV,cAAc;AAAA,IACd;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,MACE;AAEJ,QAAM,YAAY;AAElB,QAAM,CAAC,WAAW,gBAAgB,SAAS,UAAU,aAAa;AAClE,QAAM,CAAC,SAAS,cAAc,SAAS,UAAU,WAAW;AAE5D,YAAU,MAAM;AACd,iBAAa,UAAU,aAAa;AACpC,eAAW,UAAU,WAAW;AAAA,KAC/B,CAAC;AAEJ,YAAU,MAAM;AACd,QAAI,aAAa,WAAW,CAAC,UAAU,SAAS,QAAQ,CAAC,QAAQ,SAAS,MAAM;AAC9E,oBAAc,aAAa,YAAY,EAAE,WAAW;AAAA;AAAA,KAIrD,CAAC,WAAW;AAEf,SACE,qCAAC,eAAD;AAAA,IACE;AAAA,IACA;AAAA,IACA,UAAU;AAAA,IACV,aACE,qCAAC,MAAD;AAAA,MAAM,OAAM;AAAA,MAAQ,eAAa,YAAY;AAAA,OAC3C,qCAAC,MAAD;AAAA,MAAM,GAAE;AAAA,MAAM,OAAO,EAAE,YAAY;AAAA,OACjC,qCAAC,6BAAD;AAAA,MACE,UAAU;AAAA,MACV,kBAAkB;AAAA,MAClB,QAAQ;AAAA,MACR,gBAAgB;AAAA,MAChB,MAAK;AAAA,MACL,WAAS;AAAA,SAGb,qCAAC,MAAD;AAAA,MACE,WAAW,CAAC,MACV,EAAE,SAAS,WACX,WAAW,MAAM,+BAA+B,IAAI,CAAC,CAAE,WAAU,aAAa,UAAU,WAAW;AAAA,OAGrG,qCAAC,6BAAD;AAAA,MACE,UAAU;AAAA,MACV,kBAAkB;AAAA,MAClB,QAAQ;AAAA,MACR,gBAAgB;AAAA,MAChB,MAAK;AAAA;AAAA,IAKb,aAAa,qCAAC,aAAD;AAAA,IACb;AAAA,IACA,WAAU;AAAA;AAAA;",
+  "names": []
+}

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

@@ -0,0 +1,95 @@
+import * as React from "react";
+import React2, { useEffect, useState } from "react";
+import { DatePicker2 } from "@elliemae/ds-icons";
+import { Grid } from "@elliemae/ds-grid";
+import {
+  DSControlledDateRangePicker,
+  DSControlledDateTimePicker,
+  DSControlledCheckbox
+} from "@elliemae/ds-controlled-form";
+import { FilterPopover, FILTER_TYPES } from "../../../../exported-related";
+import { DATA_TESTID } from "../../../../configs/constants";
+const emptyFilterValue = { startDate: null, endDate: null };
+const DateSwitcherFilter = (props) => {
+  const {
+    column,
+    column: { id },
+    filterValue = emptyFilterValue,
+    onValueChange,
+    patchHeaderFilterButtonAndMenu,
+    reduxHeader,
+    innerRef
+  } = props;
+  const dateRange = filterValue;
+  const [startDate, setStartDate] = useState(dateRange.startDate || "");
+  const [endDate, setEndDate] = useState(dateRange.endDate || "");
+  const [isDateRange, setIsDateRange] = useState(false);
+  useEffect(() => {
+    setStartDate(dateRange.startDate || "");
+    setEndDate(dateRange.endDate || "");
+  }, [dateRange]);
+  useEffect(() => {
+    if (startDate && endDate && !startDate.includes("_") && !endDate.includes("_")) {
+      onValueChange(FILTER_TYPES.DATE_SWITCHER, { startDate, endDate, isDateRange });
+    }
+  }, [startDate, endDate, isDateRange]);
+  return /* @__PURE__ */ React2.createElement(FilterPopover, {
+    reduxHeader,
+    column,
+    columnId: id,
+    menuContent: /* @__PURE__ */ React2.createElement(Grid, {
+      width: "260px",
+      "data-testid": DATA_TESTID.DATA_TABLE_DATE_RANGE_CONTROLLER
+    }, /* @__PURE__ */ React2.createElement(Grid, {
+      p: "xxs",
+      gutter: "xxs",
+      style: { background: "white" }
+    }, /* @__PURE__ */ React2.createElement(DSControlledCheckbox, {
+      checked: isDateRange,
+      name: "Date range",
+      label: "Date Range",
+      id: "date-range-switcher-id-internal",
+      onChange: () => {
+        setIsDateRange(!isDateRange);
+        setStartDate("");
+        setEndDate("");
+      },
+      autoFocus: true
+    }), isDateRange ? /* @__PURE__ */ React2.createElement(DSControlledDateRangePicker, {
+      fromDate: startDate,
+      onFromDateChange: setStartDate,
+      toDate: endDate,
+      onToDateChange: setEndDate,
+      type: "date-range-inputs"
+    }) : /* @__PURE__ */ React2.createElement(DSControlledDateTimePicker, {
+      date: startDate,
+      onDateChange: (_date) => {
+        setStartDate(_date);
+        setEndDate(_date);
+      },
+      type: "date-inputs"
+    })), /* @__PURE__ */ React2.createElement(Grid, {
+      onKeyDown: (e) => e.code === "Enter" && setTimeout(() => patchHeaderFilterButtonAndMenu(id, !!(dateRange.startDate || dateRange.endDate)), 0)
+    }, isDateRange ? /* @__PURE__ */ React2.createElement(DSControlledDateRangePicker, {
+      fromDate: startDate,
+      onFromDateChange: setStartDate,
+      toDate: endDate,
+      onToDateChange: setEndDate,
+      type: "date-range-picker-controller-only"
+    }) : /* @__PURE__ */ React2.createElement(DSControlledDateTimePicker, {
+      date: startDate,
+      onDateChange: (_date) => {
+        setStartDate(_date);
+        setEndDate(_date);
+      },
+      type: "date-picker-controller-only"
+    }))),
+    triggerIcon: /* @__PURE__ */ React2.createElement(DatePicker2, null),
+    innerRef,
+    ariaLabel: "Open Date Range Filter"
+  });
+};
+export {
+  DateSwitcherFilter
+};
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../../../../scripts/build/transpile/react-shim.js", "../../../../../../src/addons/Filters/Components/DateSwitcherFilter/index.tsx"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable max-lines */\n/* eslint-disable react/prop-types */\nimport React, { useEffect, 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';\nimport { FilterProps } from '../../../../types/props';\nimport { DATA_TESTID } from '../../../../configs/constants';\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 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  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            <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              autoFocus\n            />\n            {isDateRange ? (\n              <DSControlledDateRangePicker\n                fromDate={startDate}\n                onFromDateChange={setStartDate}\n                toDate={endDate}\n                onToDateChange={setEndDate}\n                type=\"date-range-inputs\"\n              />\n            ) : (\n              <DSControlledDateTimePicker\n                date={startDate}\n                onDateChange={(_date) => {\n                  setStartDate(_date);\n                  setEndDate(_date);\n                }}\n                type=\"date-inputs\"\n              />\n            )}\n          </Grid>\n          <Grid\n            onKeyDown={(e) =>\n              e.code === 'Enter' &&\n              setTimeout(() => patchHeaderFilterButtonAndMenu(id, !!(dateRange.startDate || dateRange.endDate)), 0)\n            }\n          >\n            {isDateRange ? (\n              <DSControlledDateRangePicker\n                fromDate={startDate}\n                onFromDateChange={setStartDate}\n                toDate={endDate}\n                onToDateChange={setEndDate}\n                type=\"date-range-picker-controller-only\"\n              />\n            ) : (\n              <DSControlledDateTimePicker\n                date={startDate}\n                onDateChange={(_date) => {\n                  setStartDate(_date);\n                  setEndDate(_date);\n                }}\n                type=\"date-picker-controller-only\"\n              />\n            )}\n          </Grid>\n        </Grid>\n      }\n      triggerIcon={<DatePicker2 />}\n      innerRef={innerRef}\n      ariaLabel=\"Open Date Range Filter\"\n    />\n  );\n};\n"],
+  "mappings": "AAAA;ACEA;AACA;AACA;AACA;AAAA;AAAA;AAAA;AAAA;AAKA;AAEA;AAEA,MAAM,mBAAmB,EAAE,WAAW,MAAM,SAAS;AAE9C,MAAM,qBAAuD,CAAC,UAAU;AAC7E,QAAM;AAAA,IACJ;AAAA,IACA,QAAQ,EAAE;AAAA,IACV,cAAc;AAAA,IACd;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,MACE;AAEJ,QAAM,YAAY;AAElB,QAAM,CAAC,WAAW,gBAAgB,SAAS,UAAU,aAAa;AAClE,QAAM,CAAC,SAAS,cAAc,SAAS,UAAU,WAAW;AAC5D,QAAM,CAAC,aAAa,kBAAkB,SAAS;AAE/C,YAAU,MAAM;AACd,iBAAa,UAAU,aAAa;AACpC,eAAW,UAAU,WAAW;AAAA,KAC/B,CAAC;AAEJ,YAAU,MAAM;AACd,QAAI,aAAa,WAAW,CAAC,UAAU,SAAS,QAAQ,CAAC,QAAQ,SAAS,MAAM;AAC9E,oBAAc,aAAa,eAAe,EAAE,WAAW,SAAS;AAAA;AAAA,KAIjE,CAAC,WAAW,SAAS;AAExB,SACE,qCAAC,eAAD;AAAA,IACE;AAAA,IACA;AAAA,IACA,UAAU;AAAA,IACV,aACE,qCAAC,MAAD;AAAA,MAAM,OAAM;AAAA,MAAQ,eAAa,YAAY;AAAA,OAC3C,qCAAC,MAAD;AAAA,MAAM,GAAE;AAAA,MAAM,QAAO;AAAA,MAAM,OAAO,EAAE,YAAY;AAAA,OAC9C,qCAAC,sBAAD;AAAA,MACE,SAAS;AAAA,MACT,MAAK;AAAA,MACL,OAAM;AAAA,MACN,IAAG;AAAA,MACH,UAAU,MAAM;AACd,uBAAe,CAAC;AAChB,qBAAa;AACb,mBAAW;AAAA;AAAA,MAEb,WAAS;AAAA,QAEV,cACC,qCAAC,6BAAD;AAAA,MACE,UAAU;AAAA,MACV,kBAAkB;AAAA,MAClB,QAAQ;AAAA,MACR,gBAAgB;AAAA,MAChB,MAAK;AAAA,SAGP,qCAAC,4BAAD;AAAA,MACE,MAAM;AAAA,MACN,cAAc,CAAC,UAAU;AACvB,qBAAa;AACb,mBAAW;AAAA;AAAA,MAEb,MAAK;AAAA,SAIX,qCAAC,MAAD;AAAA,MACE,WAAW,CAAC,MACV,EAAE,SAAS,WACX,WAAW,MAAM,+BAA+B,IAAI,CAAC,CAAE,WAAU,aAAa,UAAU,WAAW;AAAA,OAGpG,cACC,qCAAC,6BAAD;AAAA,MACE,UAAU;AAAA,MACV,kBAAkB;AAAA,MAClB,QAAQ;AAAA,MACR,gBAAgB;AAAA,MAChB,MAAK;AAAA,SAGP,qCAAC,4BAAD;AAAA,MACE,MAAM;AAAA,MACN,cAAc,CAAC,UAAU;AACvB,qBAAa;AACb,mBAAW;AAAA;AAAA,MAEb,MAAK;AAAA;AAAA,IAMf,aAAa,qCAAC,aAAD;AAAA,IACb;AAAA,IACA,WAAU;AAAA;AAAA;",
+  "names": []
+}

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

@@ -0,0 +1,108 @@
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+import * as React from "react";
+import React2 from "react";
+import { Grid } from "@elliemae/ds-grid";
+import { DSInputMask, MASK_TYPES } from "@elliemae/ds-form";
+import { DSFormLayoutBlockItem } from "@elliemae/ds-form-layout-blocks";
+import { SearchXsmall } from "@elliemae/ds-icons";
+import { FilterPopover, FILTER_TYPES } from "../../../../exported-related";
+import { DATA_TESTID } from "../../../../configs/constants";
+import { useDispatchHeadersActions } from "../../../../redux/reducers/headersReducers";
+const opts = {
+  prefix: "",
+  suffix: "",
+  allowDecimal: false,
+  includeThousandsSeparator: false,
+  requireDecimal: false,
+  allowNegative: true
+};
+const NumberRangeFilter = (props) => {
+  const { column, filterValue = { from: null, to: null }, reduxHeader, onValueChange, innerRef } = props;
+  const handleFromChange = (e) => {
+    const from = e.target.value !== "" ? parseInt(e.target.value, 10) : "";
+    const nextValue = __spreadProps(__spreadValues({}, filterValue), {
+      from
+    });
+    onValueChange(FILTER_TYPES.CURRENCY_RANGE, nextValue);
+  };
+  const handleToChange = (e) => {
+    const to = e.target.value !== "" ? parseInt(e.target.value, 10) : "";
+    const nextValue = __spreadProps(__spreadValues({}, filterValue), {
+      to
+    });
+    onValueChange(FILTER_TYPES.CURRENCY_RANGE, nextValue);
+  };
+  const { patchHeader } = useDispatchHeadersActions();
+  const closePopover = (e) => {
+    if (e.code === "Escape") {
+      patchHeader(column.id, { hideFilterMenu: true, hideFilterButton: false });
+      innerRef.current.focus();
+    }
+  };
+  const idPreffix = "datatable-number-range";
+  return /* @__PURE__ */ React2.createElement(FilterPopover, {
+    reduxHeader,
+    column,
+    columnId: column.id,
+    menuContent: /* @__PURE__ */ React2.createElement(Grid, {
+      "data-testid": DATA_TESTID.DATA_TABLE_NUMBER_RANGE_CONTROLLER,
+      gutter: "xxxs",
+      padding: "xxs",
+      cols: ["auto", "auto"],
+      style: { background: "white" }
+    }, /* @__PURE__ */ React2.createElement(DSFormLayoutBlockItem, {
+      label: "Low",
+      inputID: `${idPreffix}-low-${column.id}`
+    }, /* @__PURE__ */ React2.createElement(DSInputMask, {
+      containerProps: { style: { textAlign: "right" } },
+      id: `${idPreffix}-low-${column.id}`,
+      value: `${filterValue?.from ?? ""}`,
+      onChange: handleFromChange,
+      placeholder: "0",
+      mask: (number) => MASK_TYPES.NUMBER(opts)(number),
+      autoFocus: true,
+      onKeyDown: (e) => {
+        closePopover(e);
+      }
+    })), /* @__PURE__ */ React2.createElement(DSFormLayoutBlockItem, {
+      label: "High",
+      inputID: `${idPreffix}-high-${column.id}`
+    }, /* @__PURE__ */ React2.createElement(DSInputMask, {
+      containerProps: { style: { textAlign: "right" } },
+      id: `${idPreffix}-high-${column.id}`,
+      value: `${filterValue?.to ?? ""}`,
+      onChange: handleToChange,
+      placeholder: "0",
+      mask: (number) => MASK_TYPES.NUMBER(opts)(number),
+      onKeyDown: (e) => {
+        closePopover(e);
+      }
+    }))),
+    triggerIcon: /* @__PURE__ */ React2.createElement(SearchXsmall, null),
+    customStyles: { width: column.ref?.current?.offsetWidth ?? "0px" },
+    innerRef,
+    ariaLabel: "Open Number Range Filter"
+  });
+};
+export {
+  NumberRangeFilter
+};
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../../../../scripts/build/transpile/react-shim.js", "../../../../../../src/addons/Filters/Components/NumberRangeFilter/index.tsx"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable react/prop-types */\nimport React 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';\nimport { FilterProps } from '../../../../types/props';\nimport { DATA_TESTID } from '../../../../configs/constants';\nimport { useDispatchHeadersActions } from '../../../../redux/reducers/headersReducers';\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, onValueChange, innerRef } = props;\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  const { patchHeader } = useDispatchHeadersActions();\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  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              autoFocus\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"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;AAAA;ACCA;AACA;AACA;AACA;AACA;AACA;AAEA;AACA;AAEA,MAAM,OAAO;AAAA,EACX,QAAQ;AAAA,EACR,QAAQ;AAAA,EACR,cAAc;AAAA,EACd,2BAA2B;AAAA,EAC3B,gBAAgB;AAAA,EAChB,eAAe;AAAA;AAGV,MAAM,oBAAsD,CAAC,UAAU;AAC5E,QAAM,EAAE,QAAQ,cAAc,EAAE,MAAM,MAAM,IAAI,QAAQ,aAAa,eAAe,aAAa;AACjG,QAAM,mBAAmB,CAAC,MAAM;AAC9B,UAAM,OAAO,EAAE,OAAO,UAAU,KAAK,SAAS,EAAE,OAAO,OAAO,MAAM;AACpE,UAAM,YAAY,iCACb,cADa;AAAA,MAEhB;AAAA;AAEF,kBAAc,aAAa,gBAAgB;AAAA;AAE7C,QAAM,iBAAiB,CAAC,MAAM;AAC5B,UAAM,KAAK,EAAE,OAAO,UAAU,KAAK,SAAS,EAAE,OAAO,OAAO,MAAM;AAClE,UAAM,YAAY,iCACb,cADa;AAAA,MAEhB;AAAA;AAEF,kBAAc,aAAa,gBAAgB;AAAA;AAE7C,QAAM,EAAE,gBAAgB;AAGxB,QAAM,eAAe,CAAC,MAAM;AAC1B,QAAI,EAAE,SAAS,UAAU;AACvB,kBAAY,OAAO,IAAI,EAAE,gBAAgB,MAAM,kBAAkB;AACjE,eAAS,QAAQ;AAAA;AAAA;AAGrB,QAAM,YAAY;AAClB,SACE,qCAAC,eAAD;AAAA,IACE;AAAA,IACA;AAAA,IACA,UAAU,OAAO;AAAA,IACjB,aACE,qCAAC,MAAD;AAAA,MACE,eAAa,YAAY;AAAA,MACzB,QAAO;AAAA,MACP,SAAQ;AAAA,MACR,MAAM,CAAC,QAAQ;AAAA,MACf,OAAO,EAAE,YAAY;AAAA,OAErB,qCAAC,uBAAD;AAAA,MAAuB,OAAM;AAAA,MAAM,SAAS,GAAG,iBAAiB,OAAO;AAAA,OACrE,qCAAC,aAAD;AAAA,MACE,gBAAgB,EAAE,OAAO,EAAE,WAAW;AAAA,MACtC,IAAI,GAAG,iBAAiB,OAAO;AAAA,MAC/B,OAAO,GAAG,aAAa,QAAQ;AAAA,MAC/B,UAAU;AAAA,MACV,aAAY;AAAA,MACZ,MAAM,CAAC,WAAW,WAAW,OAAO,MAAM;AAAA,MAC1C,WAAS;AAAA,MACT,WAAW,CAAC,MAAM;AAChB,qBAAa;AAAA;AAAA,SAInB,qCAAC,uBAAD;AAAA,MAAuB,OAAM;AAAA,MAAO,SAAS,GAAG,kBAAkB,OAAO;AAAA,OACvE,qCAAC,aAAD;AAAA,MACE,gBAAgB,EAAE,OAAO,EAAE,WAAW;AAAA,MACtC,IAAI,GAAG,kBAAkB,OAAO;AAAA,MAChC,OAAO,GAAG,aAAa,MAAM;AAAA,MAC7B,UAAU;AAAA,MACV,aAAY;AAAA,MACZ,MAAM,CAAC,WAAW,WAAW,OAAO,MAAM;AAAA,MAC1C,WAAW,CAAC,MAAM;AAChB,qBAAa;AAAA;AAAA;AAAA,IAMvB,aAAa,qCAAC,cAAD;AAAA,IACb,cAAc,EAAE,OAAO,OAAO,KAAK,SAAS,eAAe;AAAA,IAC3D;AAAA,IACA,WAAU;AAAA;AAAA;",
+  "names": []
+}

package/dist/esm/addons/Filters/Components/SelectFilter/BaseSelectFilter.js

@@ -0,0 +1,88 @@
+import * as React from "react";
+import React2, { useState, useEffect, useMemo, useCallback } from "react";
+import { Grid } from "@elliemae/ds-grid";
+import { DSComboBox } from "@elliemae/ds-controlled-form";
+import { SearchXsmall } from "@elliemae/ds-icons";
+import { FilterPopover } from "../../../../exported-related";
+import { DATA_TESTID } from "../../../../configs/constants";
+const BaseSelectFilter = (props) => {
+  const {
+    isMulti = false,
+    selectedItems,
+    column,
+    type,
+    column: { id, filterOptions: userFilterOptions },
+    ctx: {
+      tableProps: { data }
+    },
+    reduxHeader,
+    innerRef,
+    onValueChange
+  } = props;
+  const filterOptions = useMemo(() => {
+    if (!userFilterOptions) {
+      const automaticFilters = [...new Set(data.map((datum) => datum[id].toString()))].map((item) => ({
+        type: "option",
+        dsId: item,
+        value: item,
+        label: item
+      }));
+      return automaticFilters;
+    }
+    if (Array.isArray(userFilterOptions))
+      return userFilterOptions;
+    return userFilterOptions();
+  }, [data, id, userFilterOptions]);
+  const handleOnChange = (value) => {
+    if (isMulti) {
+      const multiSelectedItem = selectedItems;
+      const isFound = multiSelectedItem.find((item) => item.dsId === value.dsId);
+      if (isFound) {
+        onValueChange(type, multiSelectedItem.filter((item) => item.dsId !== value.dsId));
+      } else {
+        onValueChange(type, [...multiSelectedItem, value]);
+      }
+    } else {
+      const singleSelectedItem = selectedItems;
+      onValueChange(type, singleSelectedItem?.dsId !== value.dsId ? value : null);
+    }
+  };
+  const [filters, setFilteredOptions] = useState(filterOptions);
+  useEffect(() => {
+    setFilteredOptions(filterOptions);
+  }, [filterOptions]);
+  const filteredOptions = useCallback((filter) => filterOptions.filter((option) => option.type === "separator" || option.label.toLowerCase().includes(filter.toLowerCase())), [filterOptions]);
+  const handleOnFilter = useCallback((newFilter) => {
+    setFilteredOptions(filteredOptions(newFilter));
+  }, [filteredOptions]);
+  const Select = /* @__PURE__ */ React2.createElement(Grid, {
+    "data-testid": isMulti ? DATA_TESTID.DATA_TABLE_MULTISELECT_CONTROLLER : DATA_TESTID.DATA_TABLE_SINGLESELECT_CONTROLLER,
+    style: { background: "#fff", position: "relative" }
+  }, /* @__PURE__ */ React2.createElement(DSComboBox, {
+    inline: true,
+    autoFocus: true,
+    options: filters,
+    onChange: handleOnChange,
+    selectedValues: selectedItems,
+    onFilter: handleOnFilter,
+    menuMaxHeight: 300
+  }));
+  const handleOnClickOutside = () => {
+    setFilteredOptions(filteredOptions(""));
+  };
+  return /* @__PURE__ */ React2.createElement(FilterPopover, {
+    reduxHeader,
+    column,
+    columnId: column.id,
+    menuContent: Select,
+    triggerIcon: /* @__PURE__ */ React2.createElement(SearchXsmall, null),
+    innerRef,
+    ariaLabel: "Open Selection Filter",
+    onClickOutsideMenu: handleOnClickOutside,
+    customStyles: { width: column.ref?.current?.offsetWidth ?? "0px" }
+  });
+};
+export {
+  BaseSelectFilter
+};
+//# sourceMappingURL=BaseSelectFilter.js.map

package/dist/esm/addons/Filters/Components/SelectFilter/BaseSelectFilter.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../../../../scripts/build/transpile/react-shim.js", "../../../../../../src/addons/Filters/Components/SelectFilter/BaseSelectFilter.tsx"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable react/prop-types */\nimport React, { useState, useEffect, useMemo, useCallback } from 'react';\nimport { Grid } from '@elliemae/ds-grid';\nimport { DSComboBox } from '@elliemae/ds-controlled-form';\nimport { SearchXsmall } from '@elliemae/ds-icons';\nimport { FilterPopover } from '../../../../exported-related';\nimport { FilterProps } from '../../../../types/props';\nimport { DATA_TESTID } from '../../../../configs/constants';\n\ninterface FilterOptionT {\n  dsId: string;\n  type: string;\n  value: string;\n  label: string;\n}\n\ninterface BaseSelectProps {\n  isSingle?: boolean;\n  isMulti?: boolean;\n  selectedItems?: FilterOptionT[] | FilterOptionT;\n  type: string;\n}\n\nexport const BaseSelectFilter: React.ComponentType<FilterProps & BaseSelectProps> = (props) => {\n  const {\n    isMulti = false,\n    selectedItems,\n    column,\n    type,\n    column: { id, filterOptions: userFilterOptions },\n    ctx: {\n      tableProps: { data },\n    },\n    reduxHeader,\n    innerRef,\n    onValueChange,\n  } = props;\n\n  const filterOptions: FilterOptionT[] = useMemo(() => {\n    // If the user didn't provide options, use the available ones\n    if (!userFilterOptions) {\n      const automaticFilters = [...new Set(data.map((datum) => datum[id].toString()))].map((item) => ({\n        type: 'option',\n        dsId: item,\n        value: item,\n        label: item,\n      }));\n\n      return automaticFilters;\n    }\n\n    // If user provided the array itself, use it\n    if (Array.isArray(userFilterOptions)) return userFilterOptions;\n    // Otherwise, it is a function\n    return userFilterOptions();\n  }, [data, id, userFilterOptions]);\n\n  const handleOnChange = (value) => {\n    if (isMulti) {\n      const multiSelectedItem = selectedItems as FilterOptionT[];\n      const isFound = multiSelectedItem.find((item) => item.dsId === value.dsId);\n      if (isFound) {\n        onValueChange(\n          type,\n          multiSelectedItem.filter((item) => item.dsId !== value.dsId),\n        );\n      } else {\n        onValueChange(type, [...multiSelectedItem, value]);\n      }\n    } else {\n      const singleSelectedItem = selectedItems as FilterOptionT;\n      onValueChange(type, singleSelectedItem?.dsId !== value.dsId ? value : null);\n    }\n  };\n\n  const [filters, setFilteredOptions] = useState(filterOptions);\n\n  useEffect(() => {\n    setFilteredOptions(filterOptions);\n  }, [filterOptions]);\n\n  const filteredOptions = useCallback(\n    (filter) =>\n      filterOptions.filter(\n        (option) => option.type === 'separator' || option.label.toLowerCase().includes(filter.toLowerCase()),\n      ),\n    [filterOptions],\n  );\n\n  const handleOnFilter = useCallback(\n    (newFilter) => {\n      setFilteredOptions(filteredOptions(newFilter));\n    },\n    [filteredOptions],\n  );\n\n  const Select = (\n    <Grid\n      data-testid={\n        isMulti ? DATA_TESTID.DATA_TABLE_MULTISELECT_CONTROLLER : DATA_TESTID.DATA_TABLE_SINGLESELECT_CONTROLLER\n      }\n      style={{ background: '#fff', position: 'relative' }}\n    >\n      <DSComboBox\n        inline\n        autoFocus\n        options={filters}\n        onChange={handleOnChange}\n        selectedValues={selectedItems}\n        onFilter={handleOnFilter}\n        menuMaxHeight={300}\n      />\n    </Grid>\n  );\n\n  const handleOnClickOutside = () => {\n    setFilteredOptions(filteredOptions(''));\n  };\n  return (\n    <FilterPopover\n      reduxHeader={reduxHeader}\n      column={column}\n      columnId={column.id}\n      menuContent={Select}\n      triggerIcon={<SearchXsmall />}\n      innerRef={innerRef}\n      ariaLabel=\"Open Selection Filter\"\n      onClickOutsideMenu={handleOnClickOutside}\n      customStyles={{ width: column.ref?.current?.offsetWidth ?? '0px' }}\n    />\n  );\n};\n"],
+  "mappings": "AAAA;ACCA;AACA;AACA;AACA;AACA;AAEA;AAgBO,MAAM,mBAAuE,CAAC,UAAU;AAC7F,QAAM;AAAA,IACJ,UAAU;AAAA,IACV;AAAA,IACA;AAAA,IACA;AAAA,IACA,QAAQ,EAAE,IAAI,eAAe;AAAA,IAC7B,KAAK;AAAA,MACH,YAAY,EAAE;AAAA;AAAA,IAEhB;AAAA,IACA;AAAA,IACA;AAAA,MACE;AAEJ,QAAM,gBAAiC,QAAQ,MAAM;AAEnD,QAAI,CAAC,mBAAmB;AACtB,YAAM,mBAAmB,CAAC,GAAG,IAAI,IAAI,KAAK,IAAI,CAAC,UAAU,MAAM,IAAI,cAAc,IAAI,CAAC,SAAU;AAAA,QAC9F,MAAM;AAAA,QACN,MAAM;AAAA,QACN,OAAO;AAAA,QACP,OAAO;AAAA;AAGT,aAAO;AAAA;AAIT,QAAI,MAAM,QAAQ;AAAoB,aAAO;AAE7C,WAAO;AAAA,KACN,CAAC,MAAM,IAAI;AAEd,QAAM,iBAAiB,CAAC,UAAU;AAChC,QAAI,SAAS;AACX,YAAM,oBAAoB;AAC1B,YAAM,UAAU,kBAAkB,KAAK,CAAC,SAAS,KAAK,SAAS,MAAM;AACrE,UAAI,SAAS;AACX,sBACE,MACA,kBAAkB,OAAO,CAAC,SAAS,KAAK,SAAS,MAAM;AAAA,aAEpD;AACL,sBAAc,MAAM,CAAC,GAAG,mBAAmB;AAAA;AAAA,WAExC;AACL,YAAM,qBAAqB;AAC3B,oBAAc,MAAM,oBAAoB,SAAS,MAAM,OAAO,QAAQ;AAAA;AAAA;AAI1E,QAAM,CAAC,SAAS,sBAAsB,SAAS;AAE/C,YAAU,MAAM;AACd,uBAAmB;AAAA,KAClB,CAAC;AAEJ,QAAM,kBAAkB,YACtB,CAAC,WACC,cAAc,OACZ,CAAC,WAAW,OAAO,SAAS,eAAe,OAAO,MAAM,cAAc,SAAS,OAAO,iBAE1F,CAAC;AAGH,QAAM,iBAAiB,YACrB,CAAC,cAAc;AACb,uBAAmB,gBAAgB;AAAA,KAErC,CAAC;AAGH,QAAM,SACJ,qCAAC,MAAD;AAAA,IACE,eACE,UAAU,YAAY,oCAAoC,YAAY;AAAA,IAExE,OAAO,EAAE,YAAY,QAAQ,UAAU;AAAA,KAEvC,qCAAC,YAAD;AAAA,IACE,QAAM;AAAA,IACN,WAAS;AAAA,IACT,SAAS;AAAA,IACT,UAAU;AAAA,IACV,gBAAgB;AAAA,IAChB,UAAU;AAAA,IACV,eAAe;AAAA;AAKrB,QAAM,uBAAuB,MAAM;AACjC,uBAAmB,gBAAgB;AAAA;AAErC,SACE,qCAAC,eAAD;AAAA,IACE;AAAA,IACA;AAAA,IACA,UAAU,OAAO;AAAA,IACjB,aAAa;AAAA,IACb,aAAa,qCAAC,cAAD;AAAA,IACb;AAAA,IACA,WAAU;AAAA,IACV,oBAAoB;AAAA,IACpB,cAAc,EAAE,OAAO,OAAO,KAAK,SAAS,eAAe;AAAA;AAAA;",
+  "names": []
+}

package/dist/esm/addons/Filters/Components/SelectFilter/MultiSelectFilter.js

@@ -0,0 +1,31 @@
+import * as React from "react";
+import React2 from "react";
+import { BaseSelectFilter } from "./BaseSelectFilter";
+import { FILTER_TYPES } from "../../../../exported-related";
+import { DATA_TESTID } from "../../../../configs/constants";
+const MultiSelectFilter = ({
+  column,
+  ctx,
+  onValueChange,
+  patchHeaderFilterButtonAndMenu,
+  patchHeader,
+  reduxHeader,
+  filterValue,
+  innerRef
+}) => /* @__PURE__ */ React2.createElement(BaseSelectFilter, {
+  reduxHeader,
+  "data-testid": DATA_TESTID.DATA_TABLE_MULTISELECT_CONTROLLER,
+  isMulti: true,
+  column,
+  ctx,
+  selectedItems: filterValue ?? [],
+  type: FILTER_TYPES.MULTI_SELECT,
+  onValueChange,
+  patchHeaderFilterButtonAndMenu,
+  patchHeader,
+  innerRef
+});
+export {
+  MultiSelectFilter
+};
+//# sourceMappingURL=MultiSelectFilter.js.map

package/dist/esm/addons/Filters/Components/SelectFilter/MultiSelectFilter.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../../../../scripts/build/transpile/react-shim.js", "../../../../../../src/addons/Filters/Components/SelectFilter/MultiSelectFilter.tsx"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable react/prop-types */\nimport React from 'react';\nimport { FilterProps } from '../../../../types/props';\nimport { BaseSelectFilter } from './BaseSelectFilter';\nimport { FILTER_TYPES } from '../../../../exported-related';\nimport { DATA_TESTID } from '../../../../configs/constants';\n\nexport const MultiSelectFilter: React.ComponentType<FilterProps> = ({\n  column,\n  ctx,\n  onValueChange,\n  patchHeaderFilterButtonAndMenu,\n  patchHeader,\n  reduxHeader,\n  filterValue,\n  innerRef,\n}) => (\n  <BaseSelectFilter\n    reduxHeader={reduxHeader}\n    data-testid={DATA_TESTID.DATA_TABLE_MULTISELECT_CONTROLLER}\n    isMulti\n    column={column}\n    ctx={ctx}\n    selectedItems={filterValue ?? []}\n    type={FILTER_TYPES.MULTI_SELECT}\n    onValueChange={onValueChange}\n    patchHeaderFilterButtonAndMenu={patchHeaderFilterButtonAndMenu}\n    patchHeader={patchHeader}\n    innerRef={innerRef}\n  />\n);\n"],
+  "mappings": "AAAA;ACCA;AAEA;AACA;AACA;AAEO,MAAM,oBAAsD,CAAC;AAAA,EAClE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,MAEA,qCAAC,kBAAD;AAAA,EACE;AAAA,EACA,eAAa,YAAY;AAAA,EACzB,SAAO;AAAA,EACP;AAAA,EACA;AAAA,EACA,eAAe,eAAe;AAAA,EAC9B,MAAM,aAAa;AAAA,EACnB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA;",
+  "names": []
+}

package/dist/esm/addons/Filters/Components/SelectFilter/SingleSelectFilter.js

@@ -0,0 +1,31 @@
+import * as React from "react";
+import React2 from "react";
+import { BaseSelectFilter } from "./BaseSelectFilter";
+import { FILTER_TYPES } from "../../../../exported-related";
+import { DATA_TESTID } from "../../../../configs/constants";
+const SingleSelectFilter = ({
+  column,
+  ctx,
+  patchHeaderFilterButtonAndMenu,
+  patchHeader,
+  onValueChange,
+  filterValue,
+  reduxHeader,
+  innerRef
+}) => /* @__PURE__ */ React2.createElement(BaseSelectFilter, {
+  reduxHeader,
+  "data-testid": DATA_TESTID.DATA_TABLE_SINGLESELECT_CONTROLLER,
+  isSingle: true,
+  column,
+  ctx,
+  selectedItems: filterValue,
+  type: FILTER_TYPES.SELECT,
+  onValueChange,
+  patchHeaderFilterButtonAndMenu,
+  patchHeader,
+  innerRef
+});
+export {
+  SingleSelectFilter
+};
+//# sourceMappingURL=SingleSelectFilter.js.map

package/dist/esm/addons/Filters/Components/SelectFilter/SingleSelectFilter.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../../../../scripts/build/transpile/react-shim.js", "../../../../../../src/addons/Filters/Components/SelectFilter/SingleSelectFilter.tsx"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable react/prop-types */\n/* eslint-disable max-lines */\nimport React from 'react';\nimport { BaseSelectFilter } from './BaseSelectFilter';\nimport { FilterProps } from '../../../../types/props';\nimport { FILTER_TYPES } from '../../../../exported-related';\nimport { DATA_TESTID } from '../../../../configs/constants';\n\nexport const SingleSelectFilter: React.ComponentType<FilterProps> = ({\n  column,\n  ctx,\n  patchHeaderFilterButtonAndMenu,\n  patchHeader,\n  onValueChange,\n  filterValue,\n  reduxHeader,\n  innerRef,\n}) => (\n  <BaseSelectFilter\n    reduxHeader={reduxHeader}\n    data-testid={DATA_TESTID.DATA_TABLE_SINGLESELECT_CONTROLLER}\n    isSingle\n    column={column}\n    ctx={ctx}\n    selectedItems={filterValue}\n    type={FILTER_TYPES.SELECT}\n    onValueChange={onValueChange}\n    patchHeaderFilterButtonAndMenu={patchHeaderFilterButtonAndMenu}\n    patchHeader={patchHeader}\n    innerRef={innerRef}\n  />\n);\n"],
+  "mappings": "AAAA;ACEA;AACA;AAEA;AACA;AAEO,MAAM,qBAAuD,CAAC;AAAA,EACnE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,MAEA,qCAAC,kBAAD;AAAA,EACE;AAAA,EACA,eAAa,YAAY;AAAA,EACzB,UAAQ;AAAA,EACR;AAAA,EACA;AAAA,EACA,eAAe;AAAA,EACf,MAAM,aAAa;AAAA,EACnB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA;",
+  "names": []
+}

package/dist/esm/addons/Filters/Components/SelectFilter/components.js

@@ -0,0 +1,57 @@
+import * as React from "react";
+import styled from "styled-components";
+const Wrapper = styled.div`
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+`;
+const InputWrapper = styled.div`
+  width: 100%;
+  padding: 10px;
+`;
+const Input = styled.input`
+  width: 100%;
+  border: 1px solid #eee;
+  height: 25px;
+  &:focus {
+    outline: none;
+    border: 1px solid ${(props) => props.theme.colors.brand[600]};
+  }
+`;
+const MenuList = styled.div`
+  position: relative;
+  width: 100%;
+`;
+const MenuItem = styled.div`
+  display: flex;
+  box-sizing: border-box;
+  align-items: center;
+  white-space: wrap;
+  position: absolute; // needed to virtualization
+  top: 0;
+  left: 0;
+  width: 100%;
+  padding: 10px;
+  border: 1px solid transparent;
+  cursor: pointer;
+  &:hover {
+    border: 1px solid ${(props) => props.theme.colors.brand[600]};
+  }
+  &:focus {
+    border: 1px solid ${(props) => props.theme.colors.brand[600]};
+  }
+`;
+const VirtualListWrapper = styled.div`
+  width: 100%;
+  overflow: auto; // needed to virtualization
+  max-height: 300px;
+`;
+export {
+  Input,
+  InputWrapper,
+  MenuItem,
+  MenuList,
+  VirtualListWrapper,
+  Wrapper
+};
+//# sourceMappingURL=components.js.map

package/dist/esm/addons/Filters/Components/SelectFilter/components.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../../../../scripts/build/transpile/react-shim.js", "../../../../../../src/addons/Filters/Components/SelectFilter/components.tsx"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import styled from 'styled-components';\n\nexport const Wrapper = styled.div`\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n`;\n\nexport const InputWrapper = styled.div`\n  width: 100%;\n  padding: 10px;\n`;\n\n// TODO: use dimsum text input\nexport const Input = styled.input`\n  width: 100%;\n  border: 1px solid #eee;\n  height: 25px;\n  &:focus {\n    outline: none;\n    border: 1px solid ${(props) => props.theme.colors.brand[600]};\n  }\n`;\n\nexport const MenuList = styled.div`\n  position: relative;\n  width: 100%;\n`;\n\nexport const MenuItem = styled.div`\n  display: flex;\n  box-sizing: border-box;\n  align-items: center;\n  white-space: wrap;\n  position: absolute; // needed to virtualization\n  top: 0;\n  left: 0;\n  width: 100%;\n  padding: 10px;\n  border: 1px solid transparent;\n  cursor: pointer;\n  &:hover {\n    border: 1px solid ${(props) => props.theme.colors.brand[600]};\n  }\n  &:focus {\n    border: 1px solid ${(props) => props.theme.colors.brand[600]};\n  }\n`;\n\nexport const VirtualListWrapper = styled.div`\n  width: 100%;\n  overflow: auto; // needed to virtualization\n  max-height: 300px;\n`;\n"],
+  "mappings": "AAAA;ACAA;AAEO,MAAM,UAAU,OAAO;AAAA;AAAA;AAAA;AAAA;AAMvB,MAAM,eAAe,OAAO;AAAA;AAAA;AAAA;AAM5B,MAAM,QAAQ,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,wBAMJ,CAAC,UAAU,MAAM,MAAM,OAAO,MAAM;AAAA;AAAA;AAIrD,MAAM,WAAW,OAAO;AAAA;AAAA;AAAA;AAKxB,MAAM,WAAW,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,wBAaP,CAAC,UAAU,MAAM,MAAM,OAAO,MAAM;AAAA;AAAA;AAAA,wBAGpC,CAAC,UAAU,MAAM,MAAM,OAAO,MAAM;AAAA;AAAA;AAIrD,MAAM,qBAAqB,OAAO;AAAA;AAAA;AAAA;AAAA;",
+  "names": []
+}

package/dist/esm/addons/Filters/Components/SelectFilter/useSelectFilterHandlers.js

@@ -0,0 +1,63 @@
+import * as React from "react";
+import { useCallback } from "react";
+import { focusNextMenuItem, focusPrevMenuItem } from "./utils";
+const useSelectFilterHandlers = ({
+  column: { id },
+  type,
+  isSingle,
+  isMulti,
+  selectedItems,
+  onValueChange,
+  patchHeaderFilterButtonAndMenu,
+  patchHeader
+}) => {
+  const handleSelectItem = useCallback((option) => {
+    if (isSingle) {
+      onValueChange(type, option);
+    } else if (isMulti) {
+      let nextSelectedItems = [];
+      if (selectedItems.includes(option)) {
+        nextSelectedItems = selectedItems.filter((opt) => opt !== option);
+      } else {
+        nextSelectedItems = [...selectedItems, option];
+      }
+      onValueChange(type, nextSelectedItems);
+    }
+  }, [isSingle, isMulti, onValueChange, type, selectedItems]);
+  const onInputWrapperKeyDown = useCallback((e) => {
+    if (e.code === "ArrowDown")
+      focusNextMenuItem(e, -1);
+  }, []);
+  const onMenuItemClick = useCallback((option) => () => {
+    handleSelectItem(option);
+    if (isSingle)
+      patchHeaderFilterButtonAndMenu(id, true);
+  }, [handleSelectItem, id, isSingle, patchHeaderFilterButtonAndMenu]);
+  const onMenuItemKeyDown = useCallback((option, index, virtualIndex, inputRef, innerRef) => (e) => {
+    if (e.code === "ArrowUp") {
+      if (index === 0)
+        inputRef.current.focus();
+      else
+        focusPrevMenuItem(e, virtualIndex);
+    }
+    if (e.code === "ArrowDown")
+      focusNextMenuItem(e, virtualIndex);
+    if (e.code === "Space") {
+      e.preventDefault();
+      handleSelectItem(option);
+      if (isSingle) {
+        patchHeader(id, { hideFilterMenu: true, hideFilterButton: false });
+        setTimeout(() => innerRef.current.focus());
+      }
+    }
+    if (e.code === "Enter") {
+      patchHeader(id, { hideFilterMenu: true, hideFilterButton: false });
+      setTimeout(() => innerRef.current.focus());
+    }
+  }, [handleSelectItem, id, isSingle, patchHeader]);
+  return { onInputWrapperKeyDown, onMenuItemClick, onMenuItemKeyDown };
+};
+export {
+  useSelectFilterHandlers
+};
+//# sourceMappingURL=useSelectFilterHandlers.js.map