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

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

@@ -0,0 +1,172 @@
+import * as React from "react";
+import { jsx } from "react/jsx-runtime";
+import { useState, useRef, useCallback, useEffect, useMemo } from "react";
+import { Grid } from "@elliemae/ds-grid";
+import { DSComboBox } from "@elliemae/ds-form-combobox";
+import { SearchXsmall } from "@elliemae/ds-icons";
+import { uid } from "uid";
+import { FilterPopoverV2 } from "../../../../exported-related/FilterPopover/FilterPopoverV2.js";
+import { DATA_TESTID, EMPTY_FILTER } from "../../../../configs/index.js";
+import { usePropsStore } from "../../../../configs/useStore/createInternalAndPropsContext.js";
+const getValue = (datum) => datum?.toString();
+const BaseSelectFilterV2 = (props) => {
+  const {
+    isMulti = false,
+    referenceColumn,
+    filterValue: selectedItems = null,
+    creatable = false,
+    column,
+    type,
+    column: { id, filterOptions: userFilterOptions, filterMinWidth, disableFirstOptionFocusOnFilter = false },
+    reduxHeader,
+    patchHeaderFilterButtonAndMenu,
+    innerRef,
+    onValueChange
+  } = props;
+  const data = usePropsStore((state) => state.data);
+  const ref = useRef(null);
+  const shouldFocus = useRef(true);
+  const filterOptions = useMemo(() => {
+    if (!userFilterOptions) {
+      const automaticFilters = [...new Set(data.map((datum) => getValue(datum?.[id])))];
+      const hasEmptyValue = automaticFilters.some((item) => item === null || item === void 0 || item === "");
+      const finalAutomaticFilters = automaticFilters.filter((item) => item !== null && item !== void 0 && item !== "").map((item) => ({
+        type: "option",
+        dsId: item,
+        value: item,
+        label: item
+      }));
+      if (hasEmptyValue) {
+        finalAutomaticFilters.push({
+          type: "option",
+          dsId: EMPTY_FILTER,
+          value: EMPTY_FILTER,
+          label: "(Empty)"
+        });
+      }
+      return finalAutomaticFilters;
+    }
+    if (Array.isArray(userFilterOptions)) return userFilterOptions;
+    return userFilterOptions();
+  }, [data, id, userFilterOptions]);
+  const filters = filterOptions;
+  const [draftSelection, setDraftSelection] = useState(selectedItems);
+  const handleOnChange = useCallback((value) => {
+    setDraftSelection(value);
+  }, []);
+  const handleOnCreate = useCallback(
+    (label) => {
+      if (label.trim() === "") {
+        return;
+      }
+      if (filterOptions.some((item) => "label" in item && item.label === label)) {
+        return;
+      }
+      const newId = uid();
+      const newItem = {
+        dsId: newId,
+        value: newId,
+        label,
+        type: "option"
+      };
+      filterOptions.unshift(newItem);
+      handleOnChange(Array.isArray(draftSelection) ? [...draftSelection, newItem] : newItem);
+    },
+    [draftSelection, filterOptions, handleOnChange]
+  );
+  const handleRef = useCallback((newRef) => {
+    ref.current = newRef;
+    if (shouldFocus.current) {
+      setTimeout(() => {
+        ref.current?.focus();
+        shouldFocus.current = false;
+      });
+    }
+  }, []);
+  useEffect(() => {
+    if (reduxHeader?.hideFilterMenu) {
+      shouldFocus.current = true;
+      setDraftSelection(selectedItems);
+    }
+  }, [reduxHeader?.hideFilterMenu, selectedItems]);
+  const Select = useMemo(
+    () => /* @__PURE__ */ jsx(
+      Grid,
+      {
+        "data-testid": isMulti ? DATA_TESTID.DATA_TABLE_MULTISELECT_CONTROLLER : DATA_TESTID.DATA_TABLE_SINGLESELECT_CONTROLLER,
+        children: /* @__PURE__ */ jsx(
+          DSComboBox,
+          {
+            inline: true,
+            "aria-label": "Search filter options",
+            innerRef: handleRef,
+            allOptions: filters,
+            onCreate: creatable ? handleOnCreate : void 0,
+            forceFocusFirstOptionOnType: creatable && disableFirstOptionFocusOnFilter === false,
+            onChange: handleOnChange,
+            selectedValues: draftSelection,
+            menuMaxHeight: 300,
+            isMenuOpen: true
+          }
+        )
+      }
+    ),
+    [
+      creatable,
+      disableFirstOptionFocusOnFilter,
+      filters,
+      handleOnChange,
+      handleOnCreate,
+      handleRef,
+      isMulti,
+      draftSelection
+    ]
+  );
+  const handleSubmit = useCallback(
+    (e) => {
+      e.preventDefault();
+      const value = draftSelection;
+      let normalized;
+      if (isMulti) {
+        const asArray = Array.isArray(value) ? value : value ? [value] : [];
+        normalized = asArray.length ? asArray : void 0;
+      } else {
+        normalized = value ?? void 0;
+      }
+      onValueChange(type, normalized);
+      patchHeaderFilterButtonAndMenu(column.id, true);
+      innerRef?.current?.focus();
+    },
+    [column.id, draftSelection, innerRef, isMulti, onValueChange, patchHeaderFilterButtonAndMenu, type]
+  );
+  const handleReset = useCallback(() => {
+    setDraftSelection(isMulti ? [] : null);
+    onValueChange(type, void 0);
+    patchHeaderFilterButtonAndMenu(column.id, true);
+    innerRef?.current?.focus();
+  }, [column.id, innerRef, onValueChange, patchHeaderFilterButtonAndMenu, type, isMulti]);
+  return /* @__PURE__ */ jsx(
+    FilterPopoverV2,
+    {
+      onFilterSubmit: handleSubmit,
+      onFilterReset: handleReset,
+      firstElementRef: ref,
+      reduxHeader,
+      column,
+      columnReference: referenceColumn,
+      columnId: column.id,
+      menuContent: Select,
+      triggerIcon: /* @__PURE__ */ jsx(SearchXsmall, {}),
+      innerRef,
+      ariaLabel: "Open Selection Filter",
+      customStyles: {
+        backgroundColor: "#fff",
+        width: filterMinWidth ?? referenceColumn?.offsetWidth
+      }
+    }
+  );
+};
+export {
+  BaseSelectFilterV2
+};
+//# sourceMappingURL=BaseSelectFilterV2.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../../../../../scripts/build/transpile/react-shim.js", "../../../../../../src/addons/Filters/Components/SelectFilter/BaseSelectFilterV2.tsx"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable max-lines */\nimport React, { useState, useRef, useCallback, useEffect, useMemo } from 'react';\nimport { Grid } from '@elliemae/ds-grid';\nimport type { DSComboboxT } from '@elliemae/ds-form-combobox';\nimport { DSComboBox } from '@elliemae/ds-form-combobox';\nimport { SearchXsmall } from '@elliemae/ds-icons';\nimport { uid } from 'uid';\nimport { FilterPopoverV2 } from '../../../../exported-related/FilterPopover/FilterPopoverV2.js';\nimport type { DSDataTableT } from '../../../../react-desc-prop-types.js';\nimport { DATA_TESTID, EMPTY_FILTER } from '../../../../configs/index.js';\nimport { usePropsStore } from '../../../../configs/useStore/createInternalAndPropsContext.js';\n\ninterface BaseSelectProps {\n  isMulti?: boolean;\n  creatable?: boolean;\n  type: string;\n}\n\ntype MaybeToStringable =\n  | string\n  | number\n  | boolean\n  | Date\n  | RegExp\n  | Array<unknown>\n  | Record<string, unknown>\n  | null\n  | undefined;\n\nconst getValue = (datum: unknown) => (datum as MaybeToStringable)?.toString();\n\ntype BaseSelectFilterValue = DSComboboxT.SelectedOptionsT;\n\nexport const BaseSelectFilterV2: React.ComponentType<\n  DSDataTableT.FilterProps<BaseSelectFilterValue> & BaseSelectProps\n> = (props) => {\n  const {\n    isMulti = false,\n    referenceColumn,\n    filterValue: selectedItems = null,\n    creatable = false,\n    column,\n    type,\n    column: { id, filterOptions: userFilterOptions, filterMinWidth, disableFirstOptionFocusOnFilter = false },\n    reduxHeader,\n    patchHeaderFilterButtonAndMenu,\n    innerRef,\n    onValueChange,\n  } = props;\n\n  const data = usePropsStore((state) => state.data);\n  const ref = useRef<HTMLInputElement | null>(null);\n  const shouldFocus = useRef(true);\n  const filterOptions = useMemo(() => {\n    // If the user didn't provide options, use the available ones\n    if (!userFilterOptions) {\n      const automaticFilters = [...new Set(data.map((datum) => getValue(datum?.[id])))];\n\n      const hasEmptyValue = automaticFilters.some((item) => item === null || item === undefined || item === '');\n\n      const finalAutomaticFilters: DSDataTableT.FilterOptionT[] = automaticFilters\n        .filter((item) => item !== null && item !== undefined && item !== '')\n        .map((item) => ({\n          type: 'option',\n          dsId: item as string,\n          value: item as string,\n          label: item as string,\n        }));\n\n      if (hasEmptyValue) {\n        finalAutomaticFilters.push({\n          type: 'option',\n          dsId: EMPTY_FILTER,\n          value: EMPTY_FILTER,\n          label: '(Empty)',\n        });\n      }\n\n      return finalAutomaticFilters;\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  const filters = filterOptions;\n\n  const [draftSelection, setDraftSelection] = useState<BaseSelectFilterValue>(selectedItems);\n\n  const handleOnChange = useCallback((value: BaseSelectFilterValue) => {\n    setDraftSelection(value);\n  }, []);\n\n  const handleOnCreate = useCallback(\n    (label: string) => {\n      if (label.trim() === '') {\n        return;\n      }\n      if (filterOptions.some((item) => 'label' in item && item.label === label)) {\n        return;\n      }\n      const newId = uid();\n      const newItem: DSDataTableT.FilterOptionT = {\n        dsId: newId,\n        value: newId,\n        label,\n        type: 'option',\n      };\n      filterOptions.unshift(newItem);\n      handleOnChange(Array.isArray(draftSelection) ? [...draftSelection, newItem] : newItem);\n    },\n    [draftSelection, filterOptions, handleOnChange],\n  );\n\n  const handleRef = useCallback((newRef: HTMLInputElement | null) => {\n    ref.current = newRef;\n    if (shouldFocus.current) {\n      setTimeout(() => {\n        ref.current?.focus();\n        shouldFocus.current = false;\n      });\n    }\n  }, []);\n\n  useEffect(() => {\n    if (reduxHeader?.hideFilterMenu) {\n      shouldFocus.current = true;\n      setDraftSelection(selectedItems);\n    }\n  }, [reduxHeader?.hideFilterMenu, selectedItems]);\n\n  const Select = useMemo(\n    () => (\n      <Grid\n        data-testid={\n          isMulti ? DATA_TESTID.DATA_TABLE_MULTISELECT_CONTROLLER : DATA_TESTID.DATA_TABLE_SINGLESELECT_CONTROLLER\n        }\n      >\n        <DSComboBox\n          inline\n          aria-label=\"Search filter options\"\n          innerRef={handleRef}\n          allOptions={filters}\n          onCreate={creatable ? handleOnCreate : undefined}\n          forceFocusFirstOptionOnType={creatable && disableFirstOptionFocusOnFilter === false}\n          onChange={handleOnChange}\n          selectedValues={draftSelection}\n          menuMaxHeight={300}\n          isMenuOpen\n        />\n      </Grid>\n    ),\n    [\n      creatable,\n      disableFirstOptionFocusOnFilter,\n      filters,\n      handleOnChange,\n      handleOnCreate,\n      handleRef,\n      isMulti,\n      draftSelection,\n    ],\n  );\n\n  const handleSubmit = useCallback(\n    (e: React.SyntheticEvent) => {\n      e.preventDefault();\n\n      const value = draftSelection;\n\n      let normalized: BaseSelectFilterValue | undefined;\n\n      if (isMulti) {\n        // eslint-disable-next-line no-nested-ternary\n        const asArray = Array.isArray(value) ? value : value ? [value] : [];\n        normalized = asArray.length ? asArray : undefined;\n      } else {\n        normalized = value ?? undefined;\n      }\n\n      onValueChange(type, normalized);\n      patchHeaderFilterButtonAndMenu(column.id, true);\n      innerRef?.current?.focus();\n    },\n    [column.id, draftSelection, innerRef, isMulti, onValueChange, patchHeaderFilterButtonAndMenu, type],\n  );\n\n  const handleReset = useCallback(() => {\n    setDraftSelection(isMulti ? [] : null);\n    onValueChange(type, undefined);\n    patchHeaderFilterButtonAndMenu(column.id, true);\n    innerRef?.current?.focus();\n  }, [column.id, innerRef, onValueChange, patchHeaderFilterButtonAndMenu, type, isMulti]);\n\n  return (\n    <FilterPopoverV2\n      onFilterSubmit={handleSubmit}\n      onFilterReset={handleReset}\n      firstElementRef={ref}\n      reduxHeader={reduxHeader}\n      column={column}\n      columnReference={referenceColumn}\n      columnId={column.id}\n      menuContent={Select}\n      triggerIcon={<SearchXsmall />}\n      innerRef={innerRef}\n      ariaLabel=\"Open Selection Filter\"\n      customStyles={{\n        backgroundColor: '#fff',\n        width: filterMinWidth ?? referenceColumn?.offsetWidth,\n      }}\n    />\n  );\n};\n"],
+  "mappings": "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",
+  "names": []
+}

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

@@ -0,0 +1,38 @@
+import * as React from "react";
+import { jsx } from "react/jsx-runtime";
+import { uid } from "uid";
+import { FILTER_TYPES } from "../../../../exported-related/index.js";
+import { DATA_TESTID } from "../../../../configs/constants.js";
+import { BaseSelectFilterV2 } from "./BaseSelectFilterV2.js";
+const MultiCreatableFilterV2 = ({
+  column,
+  referenceColumn,
+  onValueChange,
+  patchHeaderFilterButtonAndMenu,
+  patchHeader,
+  reduxHeader,
+  filterValue,
+  innerRef,
+  domIdAffix = uid(4)
+}) => /* @__PURE__ */ jsx(
+  BaseSelectFilterV2,
+  {
+    creatable: true,
+    reduxHeader,
+    "data-testid": DATA_TESTID.DATA_TABLE_MULTISELECT_CONTROLLER,
+    isMulti: true,
+    column,
+    filterValue: filterValue ?? [],
+    type: FILTER_TYPES.MULTI_SELECT_V2,
+    onValueChange,
+    patchHeaderFilterButtonAndMenu,
+    patchHeader,
+    innerRef,
+    domIdAffix,
+    referenceColumn
+  }
+);
+export {
+  MultiCreatableFilterV2
+};
+//# sourceMappingURL=MultiCreatableFilterV2.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../../../../../scripts/build/transpile/react-shim.js", "../../../../../../src/addons/Filters/Components/SelectFilter/MultiCreatableFilterV2.tsx"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React from 'react';\nimport type { DSComboboxT } from '@elliemae/ds-form-combobox';\nimport { uid } from 'uid';\nimport type { DSDataTableT } from '../../../../react-desc-prop-types.js';\nimport { FILTER_TYPES } from '../../../../exported-related/index.js';\nimport { DATA_TESTID } from '../../../../configs/constants.js';\nimport { BaseSelectFilterV2 } from './BaseSelectFilterV2.js';\n\ntype MultiCreatableFilterValue = DSComboboxT.SelectedOptionsT;\n\nexport const MultiCreatableFilterV2: React.ComponentType<DSDataTableT.FilterProps<MultiCreatableFilterValue>> = ({\n  column,\n  referenceColumn,\n  onValueChange,\n  patchHeaderFilterButtonAndMenu,\n  patchHeader,\n  reduxHeader,\n  filterValue,\n  innerRef,\n  domIdAffix = uid(4),\n}) => (\n  <BaseSelectFilterV2\n    creatable\n    reduxHeader={reduxHeader}\n    data-testid={DATA_TESTID.DATA_TABLE_MULTISELECT_CONTROLLER}\n    isMulti\n    column={column}\n    filterValue={filterValue ?? []}\n    type={FILTER_TYPES.MULTI_SELECT_V2}\n    onValueChange={onValueChange}\n    patchHeaderFilterButtonAndMenu={patchHeaderFilterButtonAndMenu}\n    patchHeader={patchHeader}\n    innerRef={innerRef}\n    domIdAffix={domIdAffix}\n    referenceColumn={referenceColumn}\n  />\n);\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACqBrB;AAnBF,SAAS,WAAW;AAEpB,SAAS,oBAAoB;AAC7B,SAAS,mBAAmB;AAC5B,SAAS,0BAA0B;AAI5B,MAAM,yBAAmG,CAAC;AAAA,EAC/G;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,aAAa,IAAI,CAAC;AACpB,MACE;AAAA,EAAC;AAAA;AAAA,IACC,WAAS;AAAA,IACT;AAAA,IACA,eAAa,YAAY;AAAA,IACzB,SAAO;AAAA,IACP;AAAA,IACA,aAAa,eAAe,CAAC;AAAA,IAC7B,MAAM,aAAa;AAAA,IACnB;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA;AACF;",
+  "names": []
+}

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

@@ -0,0 +1,37 @@
+import * as React from "react";
+import { jsx } from "react/jsx-runtime";
+import { uid } from "uid";
+import { FILTER_TYPES } from "../../../../exported-related/index.js";
+import { DATA_TESTID } from "../../../../configs/constants.js";
+import { BaseSelectFilterV2 } from "./BaseSelectFilterV2.js";
+const MultiSelectFilterV2 = ({
+  column,
+  referenceColumn,
+  onValueChange,
+  patchHeaderFilterButtonAndMenu,
+  patchHeader,
+  reduxHeader,
+  filterValue,
+  innerRef,
+  domIdAffix = uid(4)
+}) => /* @__PURE__ */ jsx(
+  BaseSelectFilterV2,
+  {
+    reduxHeader,
+    "data-testid": DATA_TESTID.DATA_TABLE_MULTISELECT_CONTROLLER,
+    isMulti: true,
+    column,
+    filterValue: filterValue ?? [],
+    type: FILTER_TYPES.MULTI_SELECT_V2,
+    onValueChange,
+    patchHeaderFilterButtonAndMenu,
+    patchHeader,
+    innerRef,
+    domIdAffix,
+    referenceColumn
+  }
+);
+export {
+  MultiSelectFilterV2
+};
+//# sourceMappingURL=MultiSelectFilterV2.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../../../../../scripts/build/transpile/react-shim.js", "../../../../../../src/addons/Filters/Components/SelectFilter/MultiSelectFilterV2.tsx"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React from 'react';\nimport type { DSComboboxT } from '@elliemae/ds-form-combobox';\nimport { uid } from 'uid';\nimport type { DSDataTableT } from '../../../../react-desc-prop-types.js';\nimport { FILTER_TYPES } from '../../../../exported-related/index.js';\nimport { DATA_TESTID } from '../../../../configs/constants.js';\nimport { BaseSelectFilterV2 } from './BaseSelectFilterV2.js';\n\ntype MultiSelectFilterValue = DSComboboxT.SelectedOptionsT;\n\nexport const MultiSelectFilterV2: React.ComponentType<DSDataTableT.FilterProps<MultiSelectFilterValue>> = ({\n  column,\n  referenceColumn,\n  onValueChange,\n  patchHeaderFilterButtonAndMenu,\n  patchHeader,\n  reduxHeader,\n  filterValue,\n  innerRef,\n  domIdAffix = uid(4),\n}) => (\n  <BaseSelectFilterV2\n    reduxHeader={reduxHeader}\n    data-testid={DATA_TESTID.DATA_TABLE_MULTISELECT_CONTROLLER}\n    isMulti\n    column={column}\n    filterValue={filterValue ?? []}\n    type={FILTER_TYPES.MULTI_SELECT_V2}\n    onValueChange={onValueChange}\n    patchHeaderFilterButtonAndMenu={patchHeaderFilterButtonAndMenu}\n    patchHeader={patchHeader}\n    innerRef={innerRef}\n    domIdAffix={domIdAffix}\n    referenceColumn={referenceColumn}\n  />\n);\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACqBrB;AAnBF,SAAS,WAAW;AAEpB,SAAS,oBAAoB;AAC7B,SAAS,mBAAmB;AAC5B,SAAS,0BAA0B;AAI5B,MAAM,sBAA6F,CAAC;AAAA,EACzG;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,aAAa,IAAI,CAAC;AACpB,MACE;AAAA,EAAC;AAAA;AAAA,IACC;AAAA,IACA,eAAa,YAAY;AAAA,IACzB,SAAO;AAAA,IACP;AAAA,IACA,aAAa,eAAe,CAAC;AAAA,IAC7B,MAAM,aAAa;AAAA,IACnB;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA;AACF;",
+  "names": []
+}

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

@@ -0,0 +1,37 @@
+import * as React from "react";
+import { jsx } from "react/jsx-runtime";
+import { uid } from "uid";
+import { FILTER_TYPES } from "../../../../exported-related/index.js";
+import { DATA_TESTID } from "../../../../configs/constants.js";
+import { BaseSelectFilterV2 } from "./BaseSelectFilterV2.js";
+const SingleCreatableFilterV2 = ({
+  column,
+  referenceColumn,
+  patchHeaderFilterButtonAndMenu,
+  patchHeader,
+  onValueChange,
+  filterValue,
+  reduxHeader,
+  innerRef,
+  domIdAffix = uid(4)
+}) => /* @__PURE__ */ jsx(
+  BaseSelectFilterV2,
+  {
+    creatable: true,
+    reduxHeader,
+    "data-testid": DATA_TESTID.DATA_TABLE_SINGLESELECT_CONTROLLER,
+    column,
+    filterValue,
+    type: FILTER_TYPES.SELECT_V2,
+    onValueChange,
+    patchHeaderFilterButtonAndMenu,
+    patchHeader,
+    innerRef,
+    domIdAffix,
+    referenceColumn
+  }
+);
+export {
+  SingleCreatableFilterV2
+};
+//# sourceMappingURL=SingleCreatableFilterV2.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../../../../../scripts/build/transpile/react-shim.js", "../../../../../../src/addons/Filters/Components/SelectFilter/SingleCreatableFilterV2.tsx"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React from 'react';\nimport { uid } from 'uid';\nimport type { DSComboboxT } from '@elliemae/ds-form-combobox';\nimport type { DSDataTableT } from '../../../../react-desc-prop-types.js';\nimport { FILTER_TYPES } from '../../../../exported-related/index.js';\nimport { DATA_TESTID } from '../../../../configs/constants.js';\nimport { BaseSelectFilterV2 } from './BaseSelectFilterV2.js';\n\ntype SingleCreatableFilterValue = DSComboboxT.SelectedOptionsT;\n\nexport const SingleCreatableFilterV2: React.ComponentType<DSDataTableT.FilterProps<SingleCreatableFilterValue>> = ({\n  column,\n  referenceColumn,\n  patchHeaderFilterButtonAndMenu,\n  patchHeader,\n  onValueChange,\n  filterValue,\n  reduxHeader,\n  innerRef,\n  domIdAffix = uid(4),\n}) => (\n  <BaseSelectFilterV2\n    creatable\n    reduxHeader={reduxHeader}\n    data-testid={DATA_TESTID.DATA_TABLE_SINGLESELECT_CONTROLLER}\n    column={column}\n    filterValue={filterValue}\n    type={FILTER_TYPES.SELECT_V2}\n    onValueChange={onValueChange}\n    patchHeaderFilterButtonAndMenu={patchHeaderFilterButtonAndMenu}\n    patchHeader={patchHeader}\n    innerRef={innerRef}\n    domIdAffix={domIdAffix}\n    referenceColumn={referenceColumn}\n  />\n);\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACqBrB;AApBF,SAAS,WAAW;AAGpB,SAAS,oBAAoB;AAC7B,SAAS,mBAAmB;AAC5B,SAAS,0BAA0B;AAI5B,MAAM,0BAAqG,CAAC;AAAA,EACjH;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,aAAa,IAAI,CAAC;AACpB,MACE;AAAA,EAAC;AAAA;AAAA,IACC,WAAS;AAAA,IACT;AAAA,IACA,eAAa,YAAY;AAAA,IACzB;AAAA,IACA;AAAA,IACA,MAAM,aAAa;AAAA,IACnB;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA;AACF;",
+  "names": []
+}

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

@@ -0,0 +1,36 @@
+import * as React from "react";
+import { jsx } from "react/jsx-runtime";
+import { uid } from "uid";
+import { DATA_TESTID } from "../../../../configs/constants.js";
+import { FILTER_TYPES } from "../../../../exported-related/index.js";
+import { BaseSelectFilterV2 } from "./BaseSelectFilterV2.js";
+const SingleSelectFilterV2 = ({
+  column,
+  referenceColumn,
+  patchHeaderFilterButtonAndMenu,
+  patchHeader,
+  onValueChange,
+  filterValue,
+  reduxHeader,
+  innerRef,
+  domIdAffix = uid(4)
+}) => /* @__PURE__ */ jsx(
+  BaseSelectFilterV2,
+  {
+    reduxHeader,
+    "data-testid": DATA_TESTID.DATA_TABLE_SINGLESELECT_CONTROLLER,
+    column,
+    filterValue,
+    type: FILTER_TYPES.SELECT_V2,
+    onValueChange,
+    patchHeaderFilterButtonAndMenu,
+    patchHeader,
+    innerRef,
+    domIdAffix,
+    referenceColumn
+  }
+);
+export {
+  SingleSelectFilterV2
+};
+//# sourceMappingURL=SingleSelectFilterV2.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../../../../../scripts/build/transpile/react-shim.js", "../../../../../../src/addons/Filters/Components/SelectFilter/SingleSelectFilterV2.tsx"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import type { DSComboboxT } from '@elliemae/ds-form-combobox';\nimport React from 'react';\nimport { uid } from 'uid';\nimport { DATA_TESTID } from '../../../../configs/constants.js';\nimport { FILTER_TYPES } from '../../../../exported-related/index.js';\nimport type { DSDataTableT } from '../../../../react-desc-prop-types.js';\nimport { BaseSelectFilterV2 } from './BaseSelectFilterV2.js';\n\ntype SingleSelectFilterValue = DSComboboxT.SelectedOptionsT;\n\nexport const SingleSelectFilterV2: React.ComponentType<DSDataTableT.FilterProps<SingleSelectFilterValue>> = ({\n  column,\n  referenceColumn,\n  patchHeaderFilterButtonAndMenu,\n  patchHeader,\n  onValueChange,\n  filterValue,\n  reduxHeader,\n  innerRef,\n  domIdAffix = uid(4),\n}) => (\n  <BaseSelectFilterV2\n    reduxHeader={reduxHeader}\n    data-testid={DATA_TESTID.DATA_TABLE_SINGLESELECT_CONTROLLER}\n    column={column}\n    filterValue={filterValue}\n    type={FILTER_TYPES.SELECT_V2}\n    onValueChange={onValueChange}\n    patchHeaderFilterButtonAndMenu={patchHeaderFilterButtonAndMenu}\n    patchHeader={patchHeader}\n    innerRef={innerRef}\n    domIdAffix={domIdAffix}\n    referenceColumn={referenceColumn}\n  />\n);\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACqBrB;AAnBF,SAAS,WAAW;AACpB,SAAS,mBAAmB;AAC5B,SAAS,oBAAoB;AAE7B,SAAS,0BAA0B;AAI5B,MAAM,uBAA+F,CAAC;AAAA,EAC3G;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,aAAa,IAAI,CAAC;AACpB,MACE;AAAA,EAAC;AAAA;AAAA,IACC;AAAA,IACA,eAAa,YAAY;AAAA,IACzB;AAAA,IACA;AAAA,IACA,MAAM,aAAa;AAAA,IACnB;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA;AACF;",
+  "names": []
+}

package/dist/esm/addons/Filters/Components/SingleDateFilter/SingleDateFilterV2.js

@@ -0,0 +1,88 @@
+import * as React from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useCallback, useRef, useEffect, useState } from "react";
+import { DatePicker2 } from "@elliemae/ds-icons";
+import { Grid } from "@elliemae/ds-grid";
+import { DSControlledDateTimePicker } from "@elliemae/ds-form-date-time-picker";
+import { FILTER_TYPES } from "../../../../exported-related/index.js";
+import { DATA_TESTID } from "../../../../configs/constants.js";
+import { FilterPopoverV2 } from "../../../../exported-related/FilterPopover/FilterPopoverV2.js";
+const SingleDateFilterV2 = (props) => {
+  const {
+    column,
+    column: { id },
+    filterValue,
+    reduxHeader,
+    referenceColumn,
+    onValueChange,
+    patchHeaderFilterButtonAndMenu,
+    innerRef
+  } = props;
+  const [date, setDate] = useState(filterValue || "");
+  const ref = useRef(null);
+  const shouldFocus = useRef(true);
+  const handleRef = useCallback((newRef) => {
+    ref.current = newRef;
+    if (shouldFocus.current) {
+      setTimeout(() => {
+        newRef?.focus();
+        shouldFocus.current = false;
+      });
+    }
+  }, []);
+  const handleSubmit = useCallback(
+    (e) => {
+      e.preventDefault();
+      if (date && !date.includes("_")) {
+        onValueChange(FILTER_TYPES.SINGLE_DATE_V2, date || void 0);
+        patchHeaderFilterButtonAndMenu(id, true);
+        innerRef?.current?.focus();
+      }
+    },
+    [date, id, onValueChange, patchHeaderFilterButtonAndMenu, innerRef]
+  );
+  const handleReset = useCallback(() => {
+    setDate("");
+    onValueChange(FILTER_TYPES.SINGLE_DATE_V2, void 0);
+    patchHeaderFilterButtonAndMenu(id, true);
+    innerRef?.current?.focus();
+  }, [id, onValueChange, patchHeaderFilterButtonAndMenu, innerRef]);
+  useEffect(() => {
+    if (reduxHeader?.hideFilterMenu) {
+      shouldFocus.current = true;
+      setDate(filterValue || "");
+    }
+  }, [reduxHeader?.hideFilterMenu, filterValue]);
+  return /* @__PURE__ */ jsx(
+    FilterPopoverV2,
+    {
+      onFilterSubmit: handleSubmit,
+      onFilterReset: handleReset,
+      firstElementRef: ref,
+      reduxHeader,
+      column,
+      columnReference: referenceColumn,
+      columnId: column.id,
+      menuContent: /* @__PURE__ */ jsxs(Grid, { "data-testid": DATA_TESTID.DATA_TABLE_SINGLE_DATE_CONTROLLER, width: "260px", children: [
+        /* @__PURE__ */ jsx(Grid, { p: "xxs", style: { background: "white" }, children: /* @__PURE__ */ jsx(
+          DSControlledDateTimePicker,
+          {
+            date,
+            onDateChange: setDate,
+            type: "date-inputs",
+            isClearable: true,
+            innerRef: handleRef
+          }
+        ) }),
+        /* @__PURE__ */ jsx(Grid, { children: /* @__PURE__ */ jsx(DSControlledDateTimePicker, { date, onDateChange: setDate, type: "date-picker-controller-only" }) })
+      ] }),
+      triggerIcon: /* @__PURE__ */ jsx(DatePicker2, {}),
+      innerRef,
+      ariaLabel: "Open Single Date Filter"
+    }
+  );
+};
+export {
+  SingleDateFilterV2
+};
+//# sourceMappingURL=SingleDateFilterV2.js.map

package/dist/esm/addons/Filters/Components/SingleDateFilter/SingleDateFilterV2.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../../../../../scripts/build/transpile/react-shim.js", "../../../../../../src/addons/Filters/Components/SingleDateFilter/SingleDateFilterV2.tsx"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { useCallback, useRef, useEffect, useState } from 'react';\nimport { DatePicker2 } from '@elliemae/ds-icons';\nimport { Grid } from '@elliemae/ds-grid';\nimport { DSControlledDateTimePicker } from '@elliemae/ds-form-date-time-picker';\nimport { FILTER_TYPES } from '../../../../exported-related/index.js';\nimport type { DSDataTableT } from '../../../../react-desc-prop-types.js';\nimport { DATA_TESTID } from '../../../../configs/constants.js';\nimport { FilterPopoverV2 } from '../../../../exported-related/FilterPopover/FilterPopoverV2.js';\n\ntype SingleDataFilterValue = string | null;\n\nexport const SingleDateFilterV2: React.ComponentType<DSDataTableT.FilterProps<SingleDataFilterValue>> = (props) => {\n  const {\n    column,\n    column: { id },\n    filterValue,\n    reduxHeader,\n    referenceColumn,\n    onValueChange,\n    patchHeaderFilterButtonAndMenu,\n    innerRef,\n  } = props;\n\n  const [date, setDate] = useState(filterValue || '');\n\n  const ref = useRef<HTMLInputElement | null>(null);\n  const shouldFocus = useRef(true);\n  const handleRef = useCallback((newRef: HTMLInputElement | HTMLButtonElement | null) => {\n    ref.current = newRef as HTMLInputElement | null;\n    if (shouldFocus.current) {\n      setTimeout(() => {\n        newRef?.focus();\n        shouldFocus.current = false;\n      });\n    }\n  }, []);\n\n  const handleSubmit = useCallback(\n    (e: React.SyntheticEvent) => {\n      e.preventDefault();\n      if (date && !date.includes('_')) {\n        onValueChange(FILTER_TYPES.SINGLE_DATE_V2, date || undefined);\n        patchHeaderFilterButtonAndMenu(id, true);\n        innerRef?.current?.focus();\n      }\n    },\n    [date, id, onValueChange, patchHeaderFilterButtonAndMenu, innerRef],\n  );\n\n  const handleReset = useCallback(() => {\n    setDate('');\n    onValueChange(FILTER_TYPES.SINGLE_DATE_V2, undefined);\n    patchHeaderFilterButtonAndMenu(id, true);\n    innerRef?.current?.focus();\n  }, [id, onValueChange, patchHeaderFilterButtonAndMenu, innerRef]);\n\n  useEffect(() => {\n    if (reduxHeader?.hideFilterMenu) {\n      shouldFocus.current = true;\n      setDate(filterValue || '');\n    }\n  }, [reduxHeader?.hideFilterMenu, filterValue]);\n\n  return (\n    <FilterPopoverV2\n      onFilterSubmit={handleSubmit}\n      onFilterReset={handleReset}\n      firstElementRef={ref}\n      reduxHeader={reduxHeader}\n      column={column}\n      columnReference={referenceColumn}\n      columnId={column.id}\n      menuContent={\n        <Grid data-testid={DATA_TESTID.DATA_TABLE_SINGLE_DATE_CONTROLLER} width=\"260px\">\n          <Grid p=\"xxs\" style={{ background: 'white' }}>\n            <DSControlledDateTimePicker\n              date={date}\n              onDateChange={setDate}\n              type=\"date-inputs\"\n              isClearable\n              innerRef={handleRef}\n            />\n          </Grid>\n          <Grid>\n            <DSControlledDateTimePicker date={date} onDateChange={setDate} type=\"date-picker-controller-only\" />\n          </Grid>\n        </Grid>\n      }\n      triggerIcon={<DatePicker2 />}\n      innerRef={innerRef}\n      ariaLabel=\"Open Single Date Filter\"\n    />\n  );\n};\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACyEf,SAEI,KAFJ;AAzER,SAAgB,aAAa,QAAQ,WAAW,gBAAgB;AAChE,SAAS,mBAAmB;AAC5B,SAAS,YAAY;AACrB,SAAS,kCAAkC;AAC3C,SAAS,oBAAoB;AAE7B,SAAS,mBAAmB;AAC5B,SAAS,uBAAuB;AAIzB,MAAM,qBAA2F,CAAC,UAAU;AACjH,QAAM;AAAA,IACJ;AAAA,IACA,QAAQ,EAAE,GAAG;AAAA,IACb;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,IAAI;AAEJ,QAAM,CAAC,MAAM,OAAO,IAAI,SAAS,eAAe,EAAE;AAElD,QAAM,MAAM,OAAgC,IAAI;AAChD,QAAM,cAAc,OAAO,IAAI;AAC/B,QAAM,YAAY,YAAY,CAAC,WAAwD;AACrF,QAAI,UAAU;AACd,QAAI,YAAY,SAAS;AACvB,iBAAW,MAAM;AACf,gBAAQ,MAAM;AACd,oBAAY,UAAU;AAAA,MACxB,CAAC;AAAA,IACH;AAAA,EACF,GAAG,CAAC,CAAC;AAEL,QAAM,eAAe;AAAA,IACnB,CAAC,MAA4B;AAC3B,QAAE,eAAe;AACjB,UAAI,QAAQ,CAAC,KAAK,SAAS,GAAG,GAAG;AAC/B,sBAAc,aAAa,gBAAgB,QAAQ,MAAS;AAC5D,uCAA+B,IAAI,IAAI;AACvC,kBAAU,SAAS,MAAM;AAAA,MAC3B;AAAA,IACF;AAAA,IACA,CAAC,MAAM,IAAI,eAAe,gCAAgC,QAAQ;AAAA,EACpE;AAEA,QAAM,cAAc,YAAY,MAAM;AACpC,YAAQ,EAAE;AACV,kBAAc,aAAa,gBAAgB,MAAS;AACpD,mCAA+B,IAAI,IAAI;AACvC,cAAU,SAAS,MAAM;AAAA,EAC3B,GAAG,CAAC,IAAI,eAAe,gCAAgC,QAAQ,CAAC;AAEhE,YAAU,MAAM;AACd,QAAI,aAAa,gBAAgB;AAC/B,kBAAY,UAAU;AACtB,cAAQ,eAAe,EAAE;AAAA,IAC3B;AAAA,EACF,GAAG,CAAC,aAAa,gBAAgB,WAAW,CAAC;AAE7C,SACE;AAAA,IAAC;AAAA;AAAA,MACC,gBAAgB;AAAA,MAChB,eAAe;AAAA,MACf,iBAAiB;AAAA,MACjB;AAAA,MACA;AAAA,MACA,iBAAiB;AAAA,MACjB,UAAU,OAAO;AAAA,MACjB,aACE,qBAAC,QAAK,eAAa,YAAY,mCAAmC,OAAM,SACtE;AAAA,4BAAC,QAAK,GAAE,OAAM,OAAO,EAAE,YAAY,QAAQ,GACzC;AAAA,UAAC;AAAA;AAAA,YACC;AAAA,YACA,cAAc;AAAA,YACd,MAAK;AAAA,YACL,aAAW;AAAA,YACX,UAAU;AAAA;AAAA,QACZ,GACF;AAAA,QACA,oBAAC,QACC,8BAAC,8BAA2B,MAAY,cAAc,SAAS,MAAK,+BAA8B,GACpG;AAAA,SACF;AAAA,MAEF,aAAa,oBAAC,eAAY;AAAA,MAC1B;AAAA,MACA,WAAU;AAAA;AAAA,EACZ;AAEJ;",
+  "names": []
+}

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

@@ -12,6 +12,7 @@ const SingleDateFilter = (props) => {
     column: { id },
     filterValue,
     reduxHeader,
+    referenceColumn,
     onValueChange,
     patchHeaderFilterButtonAndMenu,
     innerRef
@@ -27,9 +28,10 @@ const SingleDateFilter = (props) => {
     patchHeaderFilterButtonAndMenu(id, true);
   }, [id, patchHeaderFilterButtonAndMenu]);
   const ref = useRef(null);
+  const lastElementRef = useRef(null);
   const shouldFocus = useRef(true);
   const handleRef = useCallback((newRef) => {
-    if (ref.current) ref.current = newRef;
+    ref.current = newRef;
     if (shouldFocus.current) {
       setTimeout(() => {
         newRef?.focus();
@@ -45,8 +47,11 @@ const SingleDateFilter = (props) => {
   return /* @__PURE__ */ jsx(
     FilterPopover,
     {
+      firstElementRef: ref,
+      lastElementRef,
       reduxHeader,
       column,
+      columnReference: referenceColumn,
       columnId: column.id,
       menuContent: /* @__PURE__ */ jsxs(Grid, { "data-testid": DATA_TESTID.DATA_TABLE_SINGLE_DATE_CONTROLLER, width: "260px", children: [
         /* @__PURE__ */ jsx(Grid, { p: "xxs", style: { background: "white" }, children: /* @__PURE__ */ jsx(
@@ -59,7 +64,15 @@ const SingleDateFilter = (props) => {
             innerRef: handleRef
           }
         ) }),
-        /* @__PURE__ */ jsx(Grid, { onKeyDown: (e) => e.code === "Enter" && setTimeout(commitDateChange, 0), children: /* @__PURE__ */ jsx(DSControlledDateTimePicker, { date, onDateChange: setDate, type: "date-picker-controller-only" }) })
+        /* @__PURE__ */ jsx(Grid, { onKeyDown: (e) => e.code === "Enter" && setTimeout(commitDateChange, 0), children: /* @__PURE__ */ jsx(
+          DSControlledDateTimePicker,
+          {
+            date,
+            onDateChange: setDate,
+            type: "date-picker-controller-only",
+            lastElementRef
+          }
+        ) })
       ] }),
       triggerIcon: /* @__PURE__ */ jsx(DatePicker2, {}),
       innerRef,

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../../../scripts/build/transpile/react-shim.js", "../../../../../../src/addons/Filters/Components/SingleDateFilter/index.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { useCallback, useRef, useEffect, useState } from 'react';\nimport { DatePicker2 } from '@elliemae/ds-icons';\nimport { Grid } from '@elliemae/ds-grid';\nimport { DSControlledDateTimePicker } from '@elliemae/ds-form-date-time-picker';\nimport { FilterPopover, FILTER_TYPES } from '../../../../exported-related/index.js';\nimport type { DSDataTableT } from '../../../../react-desc-prop-types.js';\nimport { DATA_TESTID } from '../../../../configs/constants.js';\n\ntype SingleDataFilterValue = string | null;\n\nexport const SingleDateFilter: React.ComponentType<DSDataTableT.FilterProps<SingleDataFilterValue>> = (props) => {\n  const {\n    column,\n    column: { id },\n    filterValue,\n    reduxHeader,\n    onValueChange,\n    patchHeaderFilterButtonAndMenu,\n    innerRef,\n  } = props;\n\n  const [date, setDate] = useState(filterValue || '');\n\n  useEffect(() => {\n    setDate(filterValue || '');\n  }, [filterValue]);\n\n  useEffect(() => {\n    if (!date.includes('_')) onValueChange(FILTER_TYPES.SINGLE_DATE, date || undefined);\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  }, [date]);\n\n  const commitDateChange = useCallback(() => {\n    patchHeaderFilterButtonAndMenu(id, true);\n  }, [id, patchHeaderFilterButtonAndMenu]);\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={column.id}\n      menuContent={\n        <Grid data-testid={DATA_TESTID.DATA_TABLE_SINGLE_DATE_CONTROLLER} width=\"260px\">\n          <Grid p=\"xxs\" style={{ background: 'white' }}>\n            <DSControlledDateTimePicker\n              date={date}\n              onDateChange={setDate}\n              type=\"date-inputs\"\n              isClearable\n              innerRef={handleRef}\n            />\n          </Grid>\n          <Grid onKeyDown={(e) => e.code === 'Enter' && setTimeout(commitDateChange, 0)}>\n            <DSControlledDateTimePicker date={date} onDateChange={setDate} type=\"date-picker-controller-only\" />\n          </Grid>\n        </Grid>\n      }\n      triggerIcon={<DatePicker2 />}\n      innerRef={innerRef}\n      ariaLabel=\"Open Single Date Filter\"\n    />\n  );\n};\n"],
-  "mappings": "AAAA,YAAY,WAAW;AC6Df,SAEI,KAFJ;AA7DR,SAAgB,aAAa,QAAQ,WAAW,gBAAgB;AAChE,SAAS,mBAAmB;AAC5B,SAAS,YAAY;AACrB,SAAS,kCAAkC;AAC3C,SAAS,eAAe,oBAAoB;AAE5C,SAAS,mBAAmB;AAIrB,MAAM,mBAAyF,CAAC,UAAU;AAC/G,QAAM;AAAA,IACJ;AAAA,IACA,QAAQ,EAAE,GAAG;AAAA,IACb;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,IAAI;AAEJ,QAAM,CAAC,MAAM,OAAO,IAAI,SAAS,eAAe,EAAE;AAElD,YAAU,MAAM;AACd,YAAQ,eAAe,EAAE;AAAA,EAC3B,GAAG,CAAC,WAAW,CAAC;AAEhB,YAAU,MAAM;AACd,QAAI,CAAC,KAAK,SAAS,GAAG,EAAG,eAAc,aAAa,aAAa,QAAQ,MAAS;AAAA,EAGpF,GAAG,CAAC,IAAI,CAAC;AAET,QAAM,mBAAmB,YAAY,MAAM;AACzC,mCAA+B,IAAI,IAAI;AAAA,EACzC,GAAG,CAAC,IAAI,8BAA8B,CAAC;AAEvC,QAAM,MAAM,OAAgC,IAAI;AAChD,QAAM,cAAc,OAAO,IAAI;AAC/B,QAAM,YAAY,YAAY,CAAC,WAAwD;AACrF,QAAI,IAAI,QAAS,KAAI,UAAU;AAC/B,QAAI,YAAY,SAAS;AACvB,iBAAW,MAAM;AACf,gBAAQ,MAAM;AACd,oBAAY,UAAU;AAAA,MACxB,CAAC;AAAA,IACH;AAAA,EACF,GAAG,CAAC,CAAC;AAEL,YAAU,MAAM;AACd,QAAI,aAAa,gBAAgB;AAC/B,kBAAY,UAAU;AAAA,IACxB;AAAA,EACF,GAAG,CAAC,aAAa,cAAc,CAAC;AAEhC,SACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA;AAAA,MACA,UAAU,OAAO;AAAA,MACjB,aACE,qBAAC,QAAK,eAAa,YAAY,mCAAmC,OAAM,SACtE;AAAA,4BAAC,QAAK,GAAE,OAAM,OAAO,EAAE,YAAY,QAAQ,GACzC;AAAA,UAAC;AAAA;AAAA,YACC;AAAA,YACA,cAAc;AAAA,YACd,MAAK;AAAA,YACL,aAAW;AAAA,YACX,UAAU;AAAA;AAAA,QACZ,GACF;AAAA,QACA,oBAAC,QAAK,WAAW,CAAC,MAAM,EAAE,SAAS,WAAW,WAAW,kBAAkB,CAAC,GAC1E,8BAAC,8BAA2B,MAAY,cAAc,SAAS,MAAK,+BAA8B,GACpG;AAAA,SACF;AAAA,MAEF,aAAa,oBAAC,eAAY;AAAA,MAC1B;AAAA,MACA,WAAU;AAAA;AAAA,EACZ;AAEJ;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { useCallback, useRef, useEffect, useState } from 'react';\nimport { DatePicker2 } from '@elliemae/ds-icons';\nimport { Grid } from '@elliemae/ds-grid';\nimport { DSControlledDateTimePicker } from '@elliemae/ds-form-date-time-picker';\nimport { FilterPopover, FILTER_TYPES } from '../../../../exported-related/index.js';\nimport type { DSDataTableT } from '../../../../react-desc-prop-types.js';\nimport { DATA_TESTID } from '../../../../configs/constants.js';\n\ntype SingleDataFilterValue = string | null;\n\nexport const SingleDateFilter: React.ComponentType<DSDataTableT.FilterProps<SingleDataFilterValue>> = (props) => {\n  const {\n    column,\n    column: { id },\n    filterValue,\n    reduxHeader,\n    referenceColumn,\n    onValueChange,\n    patchHeaderFilterButtonAndMenu,\n    innerRef,\n  } = props;\n\n  const [date, setDate] = useState(filterValue || '');\n\n  useEffect(() => {\n    setDate(filterValue || '');\n  }, [filterValue]);\n\n  useEffect(() => {\n    if (!date.includes('_')) onValueChange(FILTER_TYPES.SINGLE_DATE, date || undefined);\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  }, [date]);\n\n  const commitDateChange = useCallback(() => {\n    patchHeaderFilterButtonAndMenu(id, true);\n  }, [id, patchHeaderFilterButtonAndMenu]);\n\n  const ref = useRef<HTMLInputElement | null>(null);\n  const lastElementRef = useRef<HTMLElement | null>(null);\n  const shouldFocus = useRef(true);\n  const handleRef = useCallback((newRef: HTMLInputElement | HTMLButtonElement | null) => {\n    ref.current = newRef as HTMLInputElement | null;\n    if (shouldFocus.current) {\n      setTimeout(() => {\n        newRef?.focus();\n        shouldFocus.current = false;\n      });\n    }\n  }, []);\n\n  useEffect(() => {\n    if (reduxHeader?.hideFilterMenu) {\n      shouldFocus.current = true;\n    }\n  }, [reduxHeader?.hideFilterMenu]);\n\n  return (\n    <FilterPopover\n      firstElementRef={ref}\n      lastElementRef={lastElementRef}\n      reduxHeader={reduxHeader}\n      column={column}\n      columnReference={referenceColumn}\n      columnId={column.id}\n      menuContent={\n        <Grid data-testid={DATA_TESTID.DATA_TABLE_SINGLE_DATE_CONTROLLER} width=\"260px\">\n          <Grid p=\"xxs\" style={{ background: 'white' }}>\n            <DSControlledDateTimePicker\n              date={date}\n              onDateChange={setDate}\n              type=\"date-inputs\"\n              isClearable\n              innerRef={handleRef}\n            />\n          </Grid>\n          <Grid onKeyDown={(e) => e.code === 'Enter' && setTimeout(commitDateChange, 0)}>\n            <DSControlledDateTimePicker\n              date={date}\n              onDateChange={setDate}\n              type=\"date-picker-controller-only\"\n              lastElementRef={lastElementRef}\n            />\n          </Grid>\n        </Grid>\n      }\n      triggerIcon={<DatePicker2 />}\n      innerRef={innerRef}\n      ariaLabel=\"Open Single Date Filter\"\n    />\n  );\n};\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACkEf,SAEI,KAFJ;AAlER,SAAgB,aAAa,QAAQ,WAAW,gBAAgB;AAChE,SAAS,mBAAmB;AAC5B,SAAS,YAAY;AACrB,SAAS,kCAAkC;AAC3C,SAAS,eAAe,oBAAoB;AAE5C,SAAS,mBAAmB;AAIrB,MAAM,mBAAyF,CAAC,UAAU;AAC/G,QAAM;AAAA,IACJ;AAAA,IACA,QAAQ,EAAE,GAAG;AAAA,IACb;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,IAAI;AAEJ,QAAM,CAAC,MAAM,OAAO,IAAI,SAAS,eAAe,EAAE;AAElD,YAAU,MAAM;AACd,YAAQ,eAAe,EAAE;AAAA,EAC3B,GAAG,CAAC,WAAW,CAAC;AAEhB,YAAU,MAAM;AACd,QAAI,CAAC,KAAK,SAAS,GAAG,EAAG,eAAc,aAAa,aAAa,QAAQ,MAAS;AAAA,EAGpF,GAAG,CAAC,IAAI,CAAC;AAET,QAAM,mBAAmB,YAAY,MAAM;AACzC,mCAA+B,IAAI,IAAI;AAAA,EACzC,GAAG,CAAC,IAAI,8BAA8B,CAAC;AAEvC,QAAM,MAAM,OAAgC,IAAI;AAChD,QAAM,iBAAiB,OAA2B,IAAI;AACtD,QAAM,cAAc,OAAO,IAAI;AAC/B,QAAM,YAAY,YAAY,CAAC,WAAwD;AACrF,QAAI,UAAU;AACd,QAAI,YAAY,SAAS;AACvB,iBAAW,MAAM;AACf,gBAAQ,MAAM;AACd,oBAAY,UAAU;AAAA,MACxB,CAAC;AAAA,IACH;AAAA,EACF,GAAG,CAAC,CAAC;AAEL,YAAU,MAAM;AACd,QAAI,aAAa,gBAAgB;AAC/B,kBAAY,UAAU;AAAA,IACxB;AAAA,EACF,GAAG,CAAC,aAAa,cAAc,CAAC;AAEhC,SACE;AAAA,IAAC;AAAA;AAAA,MACC,iBAAiB;AAAA,MACjB;AAAA,MACA;AAAA,MACA;AAAA,MACA,iBAAiB;AAAA,MACjB,UAAU,OAAO;AAAA,MACjB,aACE,qBAAC,QAAK,eAAa,YAAY,mCAAmC,OAAM,SACtE;AAAA,4BAAC,QAAK,GAAE,OAAM,OAAO,EAAE,YAAY,QAAQ,GACzC;AAAA,UAAC;AAAA;AAAA,YACC;AAAA,YACA,cAAc;AAAA,YACd,MAAK;AAAA,YACL,aAAW;AAAA,YACX,UAAU;AAAA;AAAA,QACZ,GACF;AAAA,QACA,oBAAC,QAAK,WAAW,CAAC,MAAM,EAAE,SAAS,WAAW,WAAW,kBAAkB,CAAC,GAC1E;AAAA,UAAC;AAAA;AAAA,YACC;AAAA,YACA,cAAc;AAAA,YACd,MAAK;AAAA,YACL;AAAA;AAAA,QACF,GACF;AAAA,SACF;AAAA,MAEF,aAAa,oBAAC,eAAY;AAAA,MAC1B;AAAA,MACA,WAAU;AAAA;AAAA,EACZ;AAEJ;",
   "names": []
 }

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

@@ -9,4 +9,26 @@ export * from "./SingleDateFilter/index.js";
 export * from "./SelectFilter/SingleCreatableFilter.js";
 export * from "./SelectFilter/MultiCreatableFilter.js";
 export * from "./FreeTextSearchFilter/index.js";
+import { DateRangeFilterV2 } from "./DateRangeFilter/DateRangeFilterV2.js";
+import { DateSwitcherFilterV2 } from "./DateSwitcherFilter/DateSwitcherFilterV2.js";
+import { NumberRangeFilterV2 } from "./NumberRangeFilter/NumberRangeFilterV2.js";
+import { CurrencyRangeFilterV2 } from "./CurrencyRangeFilter/CurrencyRangeFilterV2.js";
+import { SingleSelectFilterV2 } from "./SelectFilter/SingleSelectFilterV2.js";
+import { MultiSelectFilterV2 } from "./SelectFilter/MultiSelectFilterV2.js";
+import { SingleDateFilterV2 } from "./SingleDateFilter/SingleDateFilterV2.js";
+import { SingleCreatableFilterV2 } from "./SelectFilter/SingleCreatableFilterV2.js";
+import { MultiCreatableFilterV2 } from "./SelectFilter/MultiCreatableFilterV2.js";
+import { FreeTextSearchFilterV2 } from "./FreeTextSearchFilter/FreeTextSearchFilterV2.js";
+export {
+  CurrencyRangeFilterV2,
+  DateRangeFilterV2,
+  DateSwitcherFilterV2,
+  FreeTextSearchFilterV2,
+  MultiCreatableFilterV2,
+  MultiSelectFilterV2,
+  NumberRangeFilterV2,
+  SingleCreatableFilterV2,
+  SingleDateFilterV2,
+  SingleSelectFilterV2
+};
 //# sourceMappingURL=index.js.map

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../../scripts/build/transpile/react-shim.js", "../../../../../src/addons/Filters/Components/index.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "export * from './DateRangeFilter/index.js';\nexport * from './DateSwitcherFilter/index.js';\nexport * from './NumberRangeFilter/index.js';\nexport * from './CurrencyRangeFilter/index.js';\nexport * from './SelectFilter/SingleSelectFilter.js';\nexport * from './SelectFilter/MultiSelectFilter.js';\nexport * from './SingleDateFilter/index.js';\nexport * from './SelectFilter/SingleCreatableFilter.js';\nexport * from './SelectFilter/MultiCreatableFilter.js';\nexport * from './FreeTextSearchFilter/index.js';\n"],
-  "mappings": "AAAA,YAAY,WAAW;ACAvB,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "export * from './DateRangeFilter/index.js';\nexport * from './DateSwitcherFilter/index.js';\nexport * from './NumberRangeFilter/index.js';\nexport * from './CurrencyRangeFilter/index.js';\nexport * from './SelectFilter/SingleSelectFilter.js';\nexport * from './SelectFilter/MultiSelectFilter.js';\nexport * from './SingleDateFilter/index.js';\nexport * from './SelectFilter/SingleCreatableFilter.js';\nexport * from './SelectFilter/MultiCreatableFilter.js';\nexport * from './FreeTextSearchFilter/index.js';\nexport { DateRangeFilterV2 } from './DateRangeFilter/DateRangeFilterV2.js';\nexport { DateSwitcherFilterV2 } from './DateSwitcherFilter/DateSwitcherFilterV2.js';\nexport { NumberRangeFilterV2 } from './NumberRangeFilter/NumberRangeFilterV2.js';\nexport { CurrencyRangeFilterV2 } from './CurrencyRangeFilter/CurrencyRangeFilterV2.js';\nexport { SingleSelectFilterV2 } from './SelectFilter/SingleSelectFilterV2.js';\nexport { MultiSelectFilterV2 } from './SelectFilter/MultiSelectFilterV2.js';\nexport { SingleDateFilterV2 } from './SingleDateFilter/SingleDateFilterV2.js';\nexport { SingleCreatableFilterV2 } from './SelectFilter/SingleCreatableFilterV2.js';\nexport { MultiCreatableFilterV2 } from './SelectFilter/MultiCreatableFilterV2.js';\nexport { FreeTextSearchFilterV2 } from './FreeTextSearchFilter/FreeTextSearchFilterV2.js';\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACAvB,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,SAAS,yBAAyB;AAClC,SAAS,4BAA4B;AACrC,SAAS,2BAA2B;AACpC,SAAS,6BAA6B;AACtC,SAAS,4BAA4B;AACrC,SAAS,2BAA2B;AACpC,SAAS,0BAA0B;AACnC,SAAS,+BAA+B;AACxC,SAAS,8BAA8B;AACvC,SAAS,8BAA8B;",
   "names": []
 }

package/dist/esm/constants/index.js

@@ -48,7 +48,8 @@ const DATA_TABLE_SLOTS = {
   FREE_TEXT_SEARCH_FILTER: "free-text-search-filter",
   FREE_TEXT_SEARCH_WRAPPER: "free-text-search-wrapper",
   FILTER_POPOVER: "filter-popover",
-  FILTER_BAR_MENU_BUTTON: "filter-bar-menu-button"
+  FILTER_BAR_MENU_BUTTON: "filter-bar-menu-button",
+  FILTER_POPOVER_FOOTER: "filter-popover-footer"
 };
 const DATA_TABLE_DATA_TESTID = {
   ...slotObjectToDataTestIds(DSDataTableName, DATA_TABLE_SLOTS),