@elliemae/ds-data-table 3.4.2 → 3.4.3

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

@@ -1,5 +1,6 @@
 import * as React from "react";
-import React2 from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useRef, useEffect, useCallback } from "react";
 import { Grid } from "@elliemae/ds-grid";
 import { DSInputMask, MASK_TYPES } from "@elliemae/ds-form";
 import { DSFormLayoutBlockItem } from "@elliemae/ds-form-layout-blocks";
@@ -39,45 +40,71 @@ const NumberRangeFilter = (props) => {
     }
   };
   const idPreffix = "datatable-number-range";
-  return /* @__PURE__ */ React2.createElement(FilterPopover, {
+  const ref = useRef();
+  const shouldFocus = useRef(true);
+  const handleRef = useCallback(
+    (newRef) => {
+      if (ref.current)
+        ref.current = newRef;
+      if (shouldFocus.current) {
+        setTimeout(() => {
+          newRef?.focus();
+          shouldFocus.current = false;
+        });
+      }
+    },
+    [shouldFocus]
+  );
+  useEffect(() => {
+    if (reduxHeader?.hideFilterMenu) {
+      shouldFocus.current = true;
+    }
+  }, [reduxHeader?.hideFilterMenu]);
+  return /* @__PURE__ */ jsx(FilterPopover, {
     reduxHeader,
     column,
     columnId: column.id,
-    menuContent: /* @__PURE__ */ React2.createElement(Grid, {
+    menuContent: /* @__PURE__ */ jsxs(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),
+      style: { background: "white" },
+      children: [
+        /* @__PURE__ */ jsx(DSFormLayoutBlockItem, {
+          label: "Low",
+          inputID: `${idPreffix}-low-${column.id}`,
+          children: /* @__PURE__ */ jsx(DSInputMask, {
+            containerProps: { style: { textAlign: "right" } },
+            id: `${idPreffix}-low-${column.id}`,
+            value: `${filterValue?.from ?? ""}`,
+            onChange: handleFromChange,
+            placeholder: "0",
+            mask: (number) => MASK_TYPES.NUMBER(opts)(number),
+            innerRef: handleRef,
+            onKeyDown: (e) => {
+              closePopover(e);
+            }
+          })
+        }),
+        /* @__PURE__ */ jsx(DSFormLayoutBlockItem, {
+          label: "High",
+          inputID: `${idPreffix}-high-${column.id}`,
+          children: /* @__PURE__ */ jsx(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__ */ jsx(SearchXsmall, {}),
     customStyles: { width: column.ref?.current?.offsetWidth ?? "0px" },
     innerRef,
     ariaLabel: "Open Number Range Filter"

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

@@ -1,7 +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", "import 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';\n\nconst opts = {\n  prefix: '',\n  suffix: '',\n  allowDecimal: false,\n  includeThousandsSeparator: false,\n  requireDecimal: false,\n  allowNegative: true,\n};\n\nexport const NumberRangeFilter: React.ComponentType<FilterProps> = (props) => {\n  const { column, filterValue = { from: null, to: null }, reduxHeader, patchHeader, onValueChange, innerRef } = props;\n\n  const handleFromChange = (e) => {\n    const from = e.target.value !== '' ? parseInt(e.target.value, 10) : '';\n    const nextValue = {\n      ...filterValue,\n      from,\n    };\n    onValueChange(FILTER_TYPES.CURRENCY_RANGE, nextValue);\n  };\n  const handleToChange = (e) => {\n    const to = e.target.value !== '' ? parseInt(e.target.value, 10) : '';\n    const nextValue = {\n      ...filterValue,\n      to,\n    };\n    onValueChange(FILTER_TYPES.CURRENCY_RANGE, nextValue);\n  };\n\n  // workaround to close menu with esc key since DSInputMask has stoppropagation on key down\n  const closePopover = (e) => {\n    if (e.code === 'Escape') {\n      patchHeader(column.id, { hideFilterMenu: true, hideFilterButton: false });\n      innerRef.current.focus();\n    }\n  };\n  const idPreffix = 'datatable-number-range';\n  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;ACAA;AACA;AACA;AACA;AACA;AACA;AAEA;AAEA,MAAM,OAAO;AAAA,EACX,QAAQ;AAAA,EACR,QAAQ;AAAA,EACR,cAAc;AAAA,EACd,2BAA2B;AAAA,EAC3B,gBAAgB;AAAA,EAChB,eAAe;AACjB;AAEO,MAAM,oBAAsD,CAAC,UAAU;AAC5E,QAAM,EAAE,QAAQ,cAAc,EAAE,MAAM,MAAM,IAAI,KAAK,GAAG,aAAa,aAAa,eAAe,aAAa;AAE9G,QAAM,mBAAmB,CAAC,MAAM;AAC9B,UAAM,OAAO,EAAE,OAAO,UAAU,KAAK,SAAS,EAAE,OAAO,OAAO,EAAE,IAAI;AACpE,UAAM,YAAY;AAAA,MAChB,GAAG;AAAA,MACH;AAAA,IACF;AACA,kBAAc,aAAa,gBAAgB,SAAS;AAAA,EACtD;AACA,QAAM,iBAAiB,CAAC,MAAM;AAC5B,UAAM,KAAK,EAAE,OAAO,UAAU,KAAK,SAAS,EAAE,OAAO,OAAO,EAAE,IAAI;AAClE,UAAM,YAAY;AAAA,MAChB,GAAG;AAAA,MACH;AAAA,IACF;AACA,kBAAc,aAAa,gBAAgB,SAAS;AAAA,EACtD;AAGA,QAAM,eAAe,CAAC,MAAM;AAC1B,QAAI,EAAE,SAAS,UAAU;AACvB,kBAAY,OAAO,IAAI,EAAE,gBAAgB,MAAM,kBAAkB,MAAM,CAAC;AACxE,eAAS,QAAQ,MAAM;AAAA,IACzB;AAAA,EACF;AACA,QAAM,YAAY;AAClB,SACE,qCAAC;AAAA,IACC;AAAA,IACA;AAAA,IACA,UAAU,OAAO;AAAA,IACjB,aACE,qCAAC;AAAA,MACC,eAAa,YAAY;AAAA,MACzB,QAAO;AAAA,MACP,SAAQ;AAAA,MACR,MAAM,CAAC,QAAQ,MAAM;AAAA,MACrB,OAAO,EAAE,YAAY,QAAQ;AAAA,OAE7B,qCAAC;AAAA,MAAsB,OAAM;AAAA,MAAM,SAAS,GAAG,iBAAiB,OAAO;AAAA,OACrE,qCAAC;AAAA,MACC,gBAAgB,EAAE,OAAO,EAAE,WAAW,QAAQ,EAAE;AAAA,MAChD,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,IAAI,EAAE,MAAM;AAAA,MAChD,WAAS;AAAA,MACT,WAAW,CAAC,MAAM;AAChB,qBAAa,CAAC;AAAA,MAChB;AAAA,KACF,CACF,GACA,qCAAC;AAAA,MAAsB,OAAM;AAAA,MAAO,SAAS,GAAG,kBAAkB,OAAO;AAAA,OACvE,qCAAC;AAAA,MACC,gBAAgB,EAAE,OAAO,EAAE,WAAW,QAAQ,EAAE;AAAA,MAChD,IAAI,GAAG,kBAAkB,OAAO;AAAA,MAChC,OAAO,GAAG,aAAa,MAAM;AAAA,MAC7B,UAAU;AAAA,MACV,aAAY;AAAA,MACZ,MAAM,CAAC,WAAW,WAAW,OAAO,IAAI,EAAE,MAAM;AAAA,MAChD,WAAW,CAAC,MAAM;AAChB,qBAAa,CAAC;AAAA,MAChB;AAAA,KACF,CACF,CACF;AAAA,IAEF,aAAa,qCAAC,kBAAa;AAAA,IAC3B,cAAc,EAAE,OAAO,OAAO,KAAK,SAAS,eAAe,MAAM;AAAA,IACjE;AAAA,IACA,WAAU;AAAA,GACZ;AAEJ;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { useRef, useEffect, useCallback } from 'react';\nimport { Grid } from '@elliemae/ds-grid';\nimport { DSInputMask, MASK_TYPES } from '@elliemae/ds-form';\nimport { DSFormLayoutBlockItem } from '@elliemae/ds-form-layout-blocks';\nimport { SearchXsmall } from '@elliemae/ds-icons';\nimport { FilterPopover, FILTER_TYPES } from '../../../../exported-related';\nimport { FilterProps } from '../../../../types/props';\nimport { DATA_TESTID } from '../../../../configs/constants';\n\nconst opts = {\n  prefix: '',\n  suffix: '',\n  allowDecimal: false,\n  includeThousandsSeparator: false,\n  requireDecimal: false,\n  allowNegative: true,\n};\n\nexport const NumberRangeFilter: React.ComponentType<FilterProps> = (props) => {\n  const { column, filterValue = { from: null, to: null }, reduxHeader, patchHeader, onValueChange, innerRef } = props;\n\n  const handleFromChange = (e) => {\n    const from = e.target.value !== '' ? parseInt(e.target.value, 10) : '';\n    const nextValue = {\n      ...filterValue,\n      from,\n    };\n    onValueChange(FILTER_TYPES.CURRENCY_RANGE, nextValue);\n  };\n  const handleToChange = (e) => {\n    const to = e.target.value !== '' ? parseInt(e.target.value, 10) : '';\n    const nextValue = {\n      ...filterValue,\n      to,\n    };\n    onValueChange(FILTER_TYPES.CURRENCY_RANGE, nextValue);\n  };\n\n  // workaround to close menu with esc key since DSInputMask has stoppropagation on key down\n  const closePopover = (e) => {\n    if (e.code === 'Escape') {\n      patchHeader(column.id, { hideFilterMenu: true, hideFilterButton: false });\n      innerRef.current.focus();\n    }\n  };\n  const idPreffix = 'datatable-number-range';\n\n  const ref = useRef();\n  const shouldFocus = useRef(true);\n  const handleRef = useCallback(\n    (newRef) => {\n      if (ref.current) ref.current = newRef;\n      if (shouldFocus.current) {\n        setTimeout(() => {\n          newRef?.focus();\n          shouldFocus.current = false;\n        });\n      }\n    },\n    [shouldFocus],\n  );\n\n  useEffect(() => {\n    if (reduxHeader?.hideFilterMenu) {\n      shouldFocus.current = true;\n    }\n  }, [reduxHeader?.hideFilterMenu]);\n\n  return (\n    <FilterPopover\n      reduxHeader={reduxHeader}\n      column={column}\n      columnId={column.id}\n      menuContent={\n        <Grid\n          data-testid={DATA_TESTID.DATA_TABLE_NUMBER_RANGE_CONTROLLER}\n          gutter=\"xxxs\"\n          padding=\"xxs\"\n          cols={['auto', 'auto']}\n          style={{ background: 'white' }}\n        >\n          <DSFormLayoutBlockItem label=\"Low\" inputID={`${idPreffix}-low-${column.id}`}>\n            <DSInputMask\n              containerProps={{ style: { textAlign: 'right' } }}\n              id={`${idPreffix}-low-${column.id}`}\n              value={`${filterValue?.from ?? ''}`}\n              onChange={handleFromChange}\n              placeholder=\"0\"\n              mask={(number) => MASK_TYPES.NUMBER(opts)(number)}\n              innerRef={handleRef}\n              onKeyDown={(e) => {\n                closePopover(e);\n              }}\n            />\n          </DSFormLayoutBlockItem>\n          <DSFormLayoutBlockItem label=\"High\" inputID={`${idPreffix}-high-${column.id}`}>\n            <DSInputMask\n              containerProps={{ style: { textAlign: 'right' } }}\n              id={`${idPreffix}-high-${column.id}`}\n              value={`${filterValue?.to ?? ''}`}\n              onChange={handleToChange}\n              placeholder=\"0\"\n              mask={(number) => MASK_TYPES.NUMBER(opts)(number)}\n              onKeyDown={(e) => {\n                closePopover(e);\n              }}\n            />\n          </DSFormLayoutBlockItem>\n        </Grid>\n      }\n      triggerIcon={<SearchXsmall />}\n      customStyles={{ width: column.ref?.current?.offsetWidth ?? '0px' }}\n      innerRef={innerRef}\n      ariaLabel=\"Open Number Range Filter\"\n    />\n  );\n};\n"],
+  "mappings": "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",
   "names": []
 }

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

@@ -1,5 +1,6 @@
 import * as React from "react";
-import React2, { useState, useEffect, useMemo } 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-controlled-form";
 import { SearchXsmall } from "@elliemae/ds-icons";
@@ -22,6 +23,8 @@ const BaseSelectFilter = (props) => {
     innerRef,
     onValueChange
   } = props;
+  const ref = useRef();
+  const shouldFocus = useRef(true);
   const filterOptions = useMemo(() => {
     if (!userFilterOptions) {
       const automaticFilters = [
@@ -39,6 +42,7 @@ const BaseSelectFilter = (props) => {
     return userFilterOptions();
   }, [data, id, userFilterOptions]);
   const [filters, setFilteredOptions] = useState(filterOptions);
+  useEffect(() => setFilteredOptions(filterOptions), [filterOptions]);
   const handleOnChange = (value) => {
     onValueChange(type, value);
     if (!isMulti)
@@ -60,34 +64,48 @@ const BaseSelectFilter = (props) => {
     };
     filterOptions.unshift(newItem);
     handleOnChange(Array.isArray(selectedItems) ? [...selectedItems, newItem] : newItem);
-    setFilteredOptions(filterOptions);
+    setFilteredOptions([...filterOptions]);
   };
+  const handleRef = useCallback(
+    (newRef) => {
+      if (ref.current)
+        ref.current = newRef;
+      if (shouldFocus.current) {
+        setTimeout(() => {
+          newRef?.focus();
+          shouldFocus.current = false;
+        });
+      }
+    },
+    [shouldFocus]
+  );
   useEffect(() => {
-    setFilteredOptions(filterOptions);
-  }, [filterOptions]);
-  const Select = /* @__PURE__ */ React2.createElement(Grid, {
+    if (reduxHeader?.hideFilterMenu) {
+      shouldFocus.current = true;
+    }
+  }, [reduxHeader?.hideFilterMenu]);
+  const Select = /* @__PURE__ */ jsx(Grid, {
     "data-testid": isMulti ? DATA_TESTID.DATA_TABLE_MULTISELECT_CONTROLLER : DATA_TESTID.DATA_TABLE_SINGLESELECT_CONTROLLER,
-    style: { background: "#fff", position: "relative", width: filterMinWidth ?? column.ref?.current?.offsetWidth }
-  }, /* @__PURE__ */ React2.createElement(DSComboBox, {
-    inline: true,
-    autoFocus: true,
-    allOptions: filterOptions,
-    onCreate: creatable ? handleOnCreate : void 0,
-    filteredOptions: filters,
-    onChange: handleOnChange,
-    selectedValues: selectedItems,
-    onFilter: setFilteredOptions,
-    menuMaxHeight: 300
-  }));
+    style: { background: "#fff", position: "relative", width: filterMinWidth ?? column.ref?.current?.offsetWidth },
+    children: /* @__PURE__ */ jsx(DSComboBox, {
+      inline: true,
+      innerRef: handleRef,
+      allOptions: filters,
+      onCreate: creatable ? handleOnCreate : void 0,
+      onChange: handleOnChange,
+      selectedValues: selectedItems,
+      menuMaxHeight: 300
+    })
+  });
   const handleOnClickOutside = () => {
     setFilteredOptions(filterOptions);
   };
-  return /* @__PURE__ */ React2.createElement(FilterPopover, {
+  return /* @__PURE__ */ jsx(FilterPopover, {
     reduxHeader,
     column,
     columnId: column.id,
     menuContent: Select,
-    triggerIcon: /* @__PURE__ */ React2.createElement(SearchXsmall, null),
+    triggerIcon: /* @__PURE__ */ jsx(SearchXsmall, {}),
     innerRef,
     ariaLabel: "Open Selection Filter",
     onClickOutsideMenu: handleOnClickOutside

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

@@ -1,7 +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", "import React, { useState, useEffect, useMemo } from 'react';\nimport { Grid } from '@elliemae/ds-grid';\nimport { DSComboBox } from '@elliemae/ds-controlled-form';\nimport { SearchXsmall } from '@elliemae/ds-icons';\nimport { uid } from 'uid';\nimport { FilterPopover } from '../../../../exported-related';\nimport { FilterProps } from '../../../../types/props';\nimport { DATA_TESTID } from '../../../../configs';\n\ninterface FilterOptionT {\n  dsId: string;\n  type: string;\n  value: string;\n  label: string;\n}\n\ninterface BaseSelectProps {\n  isMulti?: boolean;\n  creatable?: 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 = null,\n    creatable = false,\n    column,\n    type,\n    column: { id, filterOptions: userFilterOptions, filterMinWidth },\n    ctx: {\n      tableProps: { data },\n    },\n    reduxHeader,\n    patchHeaderFilterButtonAndMenu,\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 = [\n        ...new Set(data.map((datum) => datum?.[id]?.toString()).filter((val) => val !== undefined)),\n      ].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 [filters, setFilteredOptions] = useState(filterOptions);\n\n  const handleOnChange = (value) => {\n    onValueChange(type, value);\n    if (!isMulti) patchHeaderFilterButtonAndMenu(column.id, true);\n  };\n\n  const handleOnCreate = (label: string) => {\n    if (label.trim() === '') {\n      return;\n    }\n    if (filterOptions.some((item) => item.label === label)) {\n      return;\n    }\n    const newId = uid();\n    const newItem = {\n      dsId: newId,\n      value: newId,\n      label,\n      type: 'option',\n    };\n    filterOptions.unshift(newItem);\n    handleOnChange(Array.isArray(selectedItems) ? [...selectedItems, newItem] : newItem);\n    setFilteredOptions(filterOptions);\n  };\n\n  useEffect(() => {\n    setFilteredOptions(filterOptions);\n  }, [filterOptions]);\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', width: filterMinWidth ?? column.ref?.current?.offsetWidth }}\n    >\n      <DSComboBox\n        inline\n        autoFocus\n        allOptions={filterOptions}\n        onCreate={creatable ? handleOnCreate : undefined}\n        filteredOptions={filters}\n        onChange={handleOnChange}\n        selectedValues={selectedItems}\n        onFilter={setFilteredOptions}\n        menuMaxHeight={300}\n      />\n    </Grid>\n  );\n\n  const handleOnClickOutside = () => {\n    setFilteredOptions(filterOptions);\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    />\n  );\n};\n"],
-  "mappings": "AAAA;ACAA;AACA;AACA;AACA;AACA;AACA;AAEA;AAgBO,MAAM,mBAAuE,CAAC,UAAU;AAC7F,QAAM;AAAA,IACJ,UAAU;AAAA,IACV,gBAAgB;AAAA,IAChB,YAAY;AAAA,IACZ;AAAA,IACA;AAAA,IACA,QAAQ,EAAE,IAAI,eAAe,mBAAmB;AAAA,IAChD,KAAK;AAAA,MACH,YAAY,EAAE;AAAA;AAAA,IAEhB;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,MACE;AAEJ,QAAM,gBAAiC,QAAQ,MAAM;AAEnD,QAAI,CAAC,mBAAmB;AACtB,YAAM,mBAAmB;AAAA,QACvB,GAAG,IAAI,IAAI,KAAK,IAAI,CAAC,UAAU,QAAQ,KAAK,SAAS,CAAC,EAAE,OAAO,CAAC,QAAQ,QAAQ,MAAS,CAAC;AAAA,MAC5F,EAAE,IAAI,CAAC,SAAU;AAAA,QACf,MAAM;AAAA,QACN,MAAM;AAAA,QACN,OAAO;AAAA,QACP,OAAO;AAAA,MACT,EAAE;AAEF,aAAO;AAAA,IACT;AAGA,QAAI,MAAM,QAAQ,iBAAiB;AAAG,aAAO;AAE7C,WAAO,kBAAkB;AAAA,EAC3B,GAAG,CAAC,MAAM,IAAI,iBAAiB,CAAC;AAEhC,QAAM,CAAC,SAAS,sBAAsB,SAAS,aAAa;AAE5D,QAAM,iBAAiB,CAAC,UAAU;AAChC,kBAAc,MAAM,KAAK;AACzB,QAAI,CAAC;AAAS,qCAA+B,OAAO,IAAI,IAAI;AAAA,EAC9D;AAEA,QAAM,iBAAiB,CAAC,UAAkB;AACxC,QAAI,MAAM,KAAK,MAAM,IAAI;AACvB;AAAA,IACF;AACA,QAAI,cAAc,KAAK,CAAC,SAAS,KAAK,UAAU,KAAK,GAAG;AACtD;AAAA,IACF;AACA,UAAM,QAAQ,IAAI;AAClB,UAAM,UAAU;AAAA,MACd,MAAM;AAAA,MACN,OAAO;AAAA,MACP;AAAA,MACA,MAAM;AAAA,IACR;AACA,kBAAc,QAAQ,OAAO;AAC7B,mBAAe,MAAM,QAAQ,aAAa,IAAI,CAAC,GAAG,eAAe,OAAO,IAAI,OAAO;AACnF,uBAAmB,aAAa;AAAA,EAClC;AAEA,YAAU,MAAM;AACd,uBAAmB,aAAa;AAAA,EAClC,GAAG,CAAC,aAAa,CAAC;AAElB,QAAM,SACJ,qCAAC;AAAA,IACC,eACE,UAAU,YAAY,oCAAoC,YAAY;AAAA,IAExE,OAAO,EAAE,YAAY,QAAQ,UAAU,YAAY,OAAO,kBAAkB,OAAO,KAAK,SAAS,YAAY;AAAA,KAE7G,qCAAC;AAAA,IACC,QAAM;AAAA,IACN,WAAS;AAAA,IACT,YAAY;AAAA,IACZ,UAAU,YAAY,iBAAiB;AAAA,IACvC,iBAAiB;AAAA,IACjB,UAAU;AAAA,IACV,gBAAgB;AAAA,IAChB,UAAU;AAAA,IACV,eAAe;AAAA,GACjB,CACF;AAGF,QAAM,uBAAuB,MAAM;AACjC,uBAAmB,aAAa;AAAA,EAClC;AACA,SACE,qCAAC;AAAA,IACC;AAAA,IACA;AAAA,IACA,UAAU,OAAO;AAAA,IACjB,aAAa;AAAA,IACb,aAAa,qCAAC,kBAAa;AAAA,IAC3B;AAAA,IACA,WAAU;AAAA,IACV,oBAAoB;AAAA,GACtB;AAEJ;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { useState, useRef, useCallback, useEffect, useMemo } from 'react';\nimport { Grid } from '@elliemae/ds-grid';\nimport { DSComboBox } from '@elliemae/ds-controlled-form';\nimport { SearchXsmall } from '@elliemae/ds-icons';\nimport { uid } from 'uid';\nimport { FilterPopover } from '../../../../exported-related';\nimport { FilterProps } from '../../../../types/props';\nimport { DATA_TESTID } from '../../../../configs';\n\ninterface FilterOptionT {\n  dsId: string;\n  type: string;\n  value: string;\n  label: string;\n}\n\ninterface BaseSelectProps {\n  isMulti?: boolean;\n  creatable?: 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 = null,\n    creatable = false,\n    column,\n    type,\n    column: { id, filterOptions: userFilterOptions, filterMinWidth },\n    ctx: {\n      tableProps: { data },\n    },\n    reduxHeader,\n    patchHeaderFilterButtonAndMenu,\n    innerRef,\n    onValueChange,\n  } = props;\n\n  const ref = useRef();\n  const shouldFocus = useRef(true);\n  const filterOptions: FilterOptionT[] = useMemo(() => {\n    // If the user didn't provide options, use the available ones\n    if (!userFilterOptions) {\n      const automaticFilters = [\n        ...new Set(data.map((datum) => datum?.[id]?.toString()).filter((val) => val !== undefined)),\n      ].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 [filters, setFilteredOptions] = useState(filterOptions);\n\n  useEffect(() => setFilteredOptions(filterOptions), [filterOptions]);\n\n  const handleOnChange = (value) => {\n    onValueChange(type, value);\n    if (!isMulti) patchHeaderFilterButtonAndMenu(column.id, true);\n  };\n\n  const handleOnCreate = (label: string) => {\n    if (label.trim() === '') {\n      return;\n    }\n    if (filterOptions.some((item) => item.label === label)) {\n      return;\n    }\n    const newId = uid();\n    const newItem = {\n      dsId: newId,\n      value: newId,\n      label,\n      type: 'option',\n    };\n    filterOptions.unshift(newItem);\n    handleOnChange(Array.isArray(selectedItems) ? [...selectedItems, newItem] : newItem);\n    setFilteredOptions([...filterOptions]);\n  };\n\n  const handleRef = useCallback(\n    (newRef) => {\n      if (ref.current) ref.current = newRef;\n      if (shouldFocus.current) {\n        setTimeout(() => {\n          newRef?.focus();\n          shouldFocus.current = false;\n        });\n      }\n    },\n    [shouldFocus],\n  );\n\n  useEffect(() => {\n    if (reduxHeader?.hideFilterMenu) {\n      shouldFocus.current = true;\n    }\n  }, [reduxHeader?.hideFilterMenu]);\n\n  const 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', width: filterMinWidth ?? column.ref?.current?.offsetWidth }}\n    >\n      <DSComboBox\n        inline\n        innerRef={handleRef}\n        allOptions={filters}\n        onCreate={creatable ? handleOnCreate : undefined}\n        onChange={handleOnChange}\n        selectedValues={selectedItems}\n        menuMaxHeight={300}\n      />\n    </Grid>\n  );\n\n  const handleOnClickOutside = () => {\n    setFilteredOptions(filterOptions);\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    />\n  );\n};\n"],
+  "mappings": "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",
   "names": []
 }

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

@@ -1,5 +1,5 @@
 import * as React from "react";
-import React2 from "react";
+import { jsx } from "react/jsx-runtime";
 import { BaseSelectFilter } from "./BaseSelectFilter";
 import { FILTER_TYPES } from "../../../../exported-related";
 import { DATA_TESTID } from "../../../../configs/constants";
@@ -12,7 +12,7 @@ const MultiCreatableFilter = ({
   reduxHeader,
   filterValue,
   innerRef
-}) => /* @__PURE__ */ React2.createElement(BaseSelectFilter, {
+}) => /* @__PURE__ */ jsx(BaseSelectFilter, {
   creatable: true,
   reduxHeader,
   "data-testid": DATA_TESTID.DATA_TABLE_MULTISELECT_CONTROLLER,

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

@@ -2,6 +2,6 @@
   "version": 3,
   "sources": ["../../../../../../../../scripts/build/transpile/react-shim.js", "../../../../../../src/addons/Filters/Components/SelectFilter/MultiCreatableFilter.tsx"],
   "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import 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 MultiCreatableFilter: React.ComponentType<FilterProps> = ({\n  column,\n  ctx,\n  onValueChange,\n  patchHeaderFilterButtonAndMenu,\n  patchHeader,\n  reduxHeader,\n  filterValue,\n  innerRef,\n}) => (\n  <BaseSelectFilter\n    creatable\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;ACAA;AAEA;AACA;AACA;AAEO,MAAM,uBAAyD,CAAC;AAAA,EACrE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,MAEA,qCAAC;AAAA,EACC,WAAS;AAAA,EACT;AAAA,EACA,eAAa,YAAY;AAAA,EACzB,SAAO;AAAA,EACP;AAAA,EACA;AAAA,EACA,eAAe,eAAe,CAAC;AAAA,EAC/B,MAAM,aAAa;AAAA,EACnB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,CACF;",
+  "mappings": "AAAA,YAAY,WAAW;ACAvB;AAEA,SAAS,wBAAwB;AACjC,SAAS,oBAAoB;AAC7B,SAAS,mBAAmB;AAErB,MAAM,uBAAyD,CAAC;AAAA,EACrE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,MACE,oBAAC;AAAA,EACC,WAAS;AAAA,EACT;AAAA,EACA,eAAa,YAAY;AAAA,EACzB,SAAO;AAAA,EACP;AAAA,EACA;AAAA,EACA,eAAe,eAAe,CAAC;AAAA,EAC/B,MAAM,aAAa;AAAA,EACnB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,CACF;",
   "names": []
 }

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

@@ -1,5 +1,5 @@
 import * as React from "react";
-import React2 from "react";
+import { jsx } from "react/jsx-runtime";
 import { BaseSelectFilter } from "./BaseSelectFilter";
 import { FILTER_TYPES } from "../../../../exported-related";
 import { DATA_TESTID } from "../../../../configs/constants";
@@ -12,7 +12,7 @@ const MultiSelectFilter = ({
   reduxHeader,
   filterValue,
   innerRef
-}) => /* @__PURE__ */ React2.createElement(BaseSelectFilter, {
+}) => /* @__PURE__ */ jsx(BaseSelectFilter, {
   reduxHeader,
   "data-testid": DATA_TESTID.DATA_TABLE_MULTISELECT_CONTROLLER,
   isMulti: true,

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

@@ -2,6 +2,6 @@
   "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", "import 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;ACAA;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;AAAA,EACC;AAAA,EACA,eAAa,YAAY;AAAA,EACzB,SAAO;AAAA,EACP;AAAA,EACA;AAAA,EACA,eAAe,eAAe,CAAC;AAAA,EAC/B,MAAM,aAAa;AAAA,EACnB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,CACF;",
+  "mappings": "AAAA,YAAY,WAAW;ACAvB;AAEA,SAAS,wBAAwB;AACjC,SAAS,oBAAoB;AAC7B,SAAS,mBAAmB;AAErB,MAAM,oBAAsD,CAAC;AAAA,EAClE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,MACE,oBAAC;AAAA,EACC;AAAA,EACA,eAAa,YAAY;AAAA,EACzB,SAAO;AAAA,EACP;AAAA,EACA;AAAA,EACA,eAAe,eAAe,CAAC;AAAA,EAC/B,MAAM,aAAa;AAAA,EACnB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,CACF;",
   "names": []
 }

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

@@ -1,5 +1,5 @@
 import * as React from "react";
-import React2 from "react";
+import { jsx } from "react/jsx-runtime";
 import { BaseSelectFilter } from "./BaseSelectFilter";
 import { FILTER_TYPES } from "../../../../exported-related";
 import { DATA_TESTID } from "../../../../configs/constants";
@@ -12,7 +12,7 @@ const SingleCreatableFilter = ({
   filterValue,
   reduxHeader,
   innerRef
-}) => /* @__PURE__ */ React2.createElement(BaseSelectFilter, {
+}) => /* @__PURE__ */ jsx(BaseSelectFilter, {
   creatable: true,
   reduxHeader,
   "data-testid": DATA_TESTID.DATA_TABLE_SINGLESELECT_CONTROLLER,

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

@@ -2,6 +2,6 @@
   "version": 3,
   "sources": ["../../../../../../../../scripts/build/transpile/react-shim.js", "../../../../../../src/addons/Filters/Components/SelectFilter/SingleCreatableFilter.tsx"],
   "sourcesContent": ["import * as React from 'react';\nexport { React };\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 SingleCreatableFilter: React.ComponentType<FilterProps> = ({\n  column,\n  ctx,\n  patchHeaderFilterButtonAndMenu,\n  patchHeader,\n  onValueChange,\n  filterValue,\n  reduxHeader,\n  innerRef,\n}) => (\n  <BaseSelectFilter\n    creatable\n    reduxHeader={reduxHeader}\n    data-testid={DATA_TESTID.DATA_TABLE_SINGLESELECT_CONTROLLER}\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;ACCA;AACA;AAEA;AACA;AAEO,MAAM,wBAA0D,CAAC;AAAA,EACtE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,MAEA,qCAAC;AAAA,EACC,WAAS;AAAA,EACT;AAAA,EACA,eAAa,YAAY;AAAA,EACzB;AAAA,EACA;AAAA,EACA,eAAe;AAAA,EACf,MAAM,aAAa;AAAA,EACnB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,CACF;",
+  "mappings": "AAAA,YAAY,WAAW;ACAvB;AAEA,SAAS,wBAAwB;AAEjC,SAAS,oBAAoB;AAC7B,SAAS,mBAAmB;AAErB,MAAM,wBAA0D,CAAC;AAAA,EACtE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,MACE,oBAAC;AAAA,EACC,WAAS;AAAA,EACT;AAAA,EACA,eAAa,YAAY;AAAA,EACzB;AAAA,EACA;AAAA,EACA,eAAe;AAAA,EACf,MAAM,aAAa;AAAA,EACnB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,CACF;",
   "names": []
 }

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

@@ -1,5 +1,5 @@
 import * as React from "react";
-import React2 from "react";
+import { jsx } from "react/jsx-runtime";
 import { BaseSelectFilter } from "./BaseSelectFilter";
 import { FILTER_TYPES } from "../../../../exported-related";
 import { DATA_TESTID } from "../../../../configs/constants";
@@ -12,7 +12,7 @@ const SingleSelectFilter = ({
   filterValue,
   reduxHeader,
   innerRef
-}) => /* @__PURE__ */ React2.createElement(BaseSelectFilter, {
+}) => /* @__PURE__ */ jsx(BaseSelectFilter, {
   reduxHeader,
   "data-testid": DATA_TESTID.DATA_TABLE_SINGLESELECT_CONTROLLER,
   column,

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

@@ -2,6 +2,6 @@
   "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 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    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;ACCA;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;AAAA,EACC;AAAA,EACA,eAAa,YAAY;AAAA,EACzB;AAAA,EACA;AAAA,EACA,eAAe;AAAA,EACf,MAAM,aAAa;AAAA,EACnB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,CACF;",
+  "mappings": "AAAA,YAAY,WAAW;ACAvB;AAEA,SAAS,wBAAwB;AAEjC,SAAS,oBAAoB;AAC7B,SAAS,mBAAmB;AAErB,MAAM,qBAAuD,CAAC;AAAA,EACnE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,MACE,oBAAC;AAAA,EACC;AAAA,EACA,eAAa,YAAY;AAAA,EACzB;AAAA,EACA;AAAA,EACA,eAAe;AAAA,EACf,MAAM,aAAa;AAAA,EACnB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,CACF;",
   "names": []
 }

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

@@ -1,5 +1,6 @@
 import * as React from "react";
-import React2, { useCallback, useEffect, useState } 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-controlled-form";
@@ -26,30 +27,53 @@ const SingleDateFilter = (props) => {
   const commitDateChange = useCallback(() => {
     patchHeaderFilterButtonAndMenu(id, true);
   }, [id, patchHeaderFilterButtonAndMenu]);
-  return /* @__PURE__ */ React2.createElement(FilterPopover, {
+  const ref = useRef();
+  const shouldFocus = useRef(true);
+  const handleRef = useCallback((newRef) => {
+    if (ref.current)
+      ref.current = newRef;
+    if (shouldFocus.current) {
+      setTimeout(() => {
+        newRef?.focus();
+        shouldFocus.current = false;
+      });
+    }
+  }, []);
+  useEffect(() => {
+    if (reduxHeader?.hideFilterMenu) {
+      shouldFocus.current = true;
+    }
+  }, [reduxHeader?.hideFilterMenu]);
+  return /* @__PURE__ */ jsx(FilterPopover, {
     reduxHeader,
     column,
     columnId: column.id,
-    menuContent: /* @__PURE__ */ React2.createElement(Grid, {
+    menuContent: /* @__PURE__ */ jsxs(Grid, {
       "data-testid": DATA_TESTID.DATA_TABLE_SINGLE_DATE_CONTROLLER,
-      width: "260px"
-    }, /* @__PURE__ */ React2.createElement(Grid, {
-      p: "xxs",
-      style: { background: "white" }
-    }, /* @__PURE__ */ React2.createElement(DSControlledDateTimePicker, {
-      date,
-      onDateChange: setDate,
-      type: "date-inputs",
-      isClearable: true,
-      autoFocus: true
-    })), /* @__PURE__ */ React2.createElement(Grid, {
-      onKeyDown: (e) => e.code === "Enter" && setTimeout(commitDateChange, 0)
-    }, /* @__PURE__ */ React2.createElement(DSControlledDateTimePicker, {
-      date,
-      onDateChange: setDate,
-      type: "date-picker-controller-only"
-    }))),
-    triggerIcon: /* @__PURE__ */ React2.createElement(DatePicker2, null),
+      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, {
+          onKeyDown: (e) => e.code === "Enter" && setTimeout(commitDateChange, 0),
+          children: /* @__PURE__ */ jsx(DSControlledDateTimePicker, {
+            date,
+            onDateChange: setDate,
+            type: "date-picker-controller-only"
+          })
+        })
+      ]
+    }),
+    triggerIcon: /* @__PURE__ */ jsx(DatePicker2, {}),
     innerRef,
     ariaLabel: "Open Single Date Filter"
   });

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, useEffect, useState } from 'react';\nimport { DatePicker2 } from '@elliemae/ds-icons';\nimport { Grid } from '@elliemae/ds-grid';\nimport { DSControlledDateTimePicker } from '@elliemae/ds-controlled-form';\nimport { FilterPopover, FILTER_TYPES } from '../../../../exported-related';\nimport { FilterProps } from '../../../../types/props';\nimport { DATA_TESTID } from '../../../../configs/constants';\n\nexport const SingleDateFilter: React.ComponentType<FilterProps> = (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  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 date={date} onDateChange={setDate} type=\"date-inputs\" isClearable autoFocus />\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;ACAA;AACA;AACA;AACA;AACA;AAEA;AAEO,MAAM,mBAAqD,CAAC,UAAU;AAC3E,QAAM;AAAA,IACJ;AAAA,IACA,QAAQ,EAAE;AAAA,IACV;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,MACE;AAEJ,QAAM,CAAC,MAAM,WAAW,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;AAAG,oBAAc,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,SACE,qCAAC;AAAA,IACC;AAAA,IACA;AAAA,IACA,UAAU,OAAO;AAAA,IACjB,aACE,qCAAC;AAAA,MAAK,eAAa,YAAY;AAAA,MAAmC,OAAM;AAAA,OACtE,qCAAC;AAAA,MAAK,GAAE;AAAA,MAAM,OAAO,EAAE,YAAY,QAAQ;AAAA,OACzC,qCAAC;AAAA,MAA2B;AAAA,MAAY,cAAc;AAAA,MAAS,MAAK;AAAA,MAAc,aAAW;AAAA,MAAC,WAAS;AAAA,KAAC,CAC1G,GACA,qCAAC;AAAA,MAAK,WAAW,CAAC,MAAM,EAAE,SAAS,WAAW,WAAW,kBAAkB,CAAC;AAAA,OAC1E,qCAAC;AAAA,MAA2B;AAAA,MAAY,cAAc;AAAA,MAAS,MAAK;AAAA,KAA8B,CACpG,CACF;AAAA,IAEF,aAAa,qCAAC,iBAAY;AAAA,IAC1B;AAAA,IACA,WAAU;AAAA,GACZ;AAEJ;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { useCallback, useMemo, useRef, useEffect, useState } from 'react';\nimport { DatePicker2 } from '@elliemae/ds-icons';\n\nimport { Grid } from '@elliemae/ds-grid';\nimport { DSControlledDateTimePicker } from '@elliemae/ds-controlled-form';\nimport { FilterPopover, FILTER_TYPES } from '../../../../exported-related';\nimport { FilterProps } from '../../../../types/props';\nimport { DATA_TESTID } from '../../../../configs/constants';\n\nexport const SingleDateFilter: React.ComponentType<FilterProps> = (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();\n  const shouldFocus = useRef(true);\n  const handleRef = useCallback((newRef) => {\n    if (ref.current) ref.current = newRef;\n    if (shouldFocus.current) {\n      setTimeout(() => {\n        newRef?.focus();\n        shouldFocus.current = false;\n      });\n    }\n  }, []);\n\n  useEffect(() => {\n    if (reduxHeader?.hideFilterMenu) {\n      shouldFocus.current = true;\n    }\n  }, [reduxHeader?.hideFilterMenu]);\n\n  return (\n    <FilterPopover\n      reduxHeader={reduxHeader}\n      column={column}\n      columnId={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;ACAvB;AAAA,SAAgB,aAAsB,QAAQ,WAAW,gBAAgB;AACzE,SAAS,mBAAmB;AAE5B,SAAS,YAAY;AACrB,SAAS,kCAAkC;AAC3C,SAAS,eAAe,oBAAoB;AAE5C,SAAS,mBAAmB;AAErB,MAAM,mBAAqD,CAAC,UAAU;AAC3E,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;AAAG,oBAAc,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,OAAO;AACnB,QAAM,cAAc,OAAO,IAAI;AAC/B,QAAM,YAAY,YAAY,CAAC,WAAW;AACxC,QAAI,IAAI;AAAS,UAAI,UAAU;AAC/B,QAAI,YAAY,SAAS;AACvB,iBAAW,MAAM;AACf,gBAAQ,MAAM;AACd,oBAAY,UAAU;AAAA,MACxB,CAAC;AAAA,IACH;AAAA,EACF,GAAG,CAAC,CAAC;AAEL,YAAU,MAAM;AACd,QAAI,aAAa,gBAAgB;AAC/B,kBAAY,UAAU;AAAA,IACxB;AAAA,EACF,GAAG,CAAC,aAAa,cAAc,CAAC;AAEhC,SACE,oBAAC;AAAA,IACC;AAAA,IACA;AAAA,IACA,UAAU,OAAO;AAAA,IACjB,aACE,qBAAC;AAAA,MAAK,eAAa,YAAY;AAAA,MAAmC,OAAM;AAAA,MACtE;AAAA,4BAAC;AAAA,UAAK,GAAE;AAAA,UAAM,OAAO,EAAE,YAAY,QAAQ;AAAA,UACzC,8BAAC;AAAA,YACC;AAAA,YACA,cAAc;AAAA,YACd,MAAK;AAAA,YACL,aAAW;AAAA,YACX,UAAU;AAAA,WACZ;AAAA,SACF;AAAA,QACA,oBAAC;AAAA,UAAK,WAAW,CAAC,MAAM,EAAE,SAAS,WAAW,WAAW,kBAAkB,CAAC;AAAA,UAC1E,8BAAC;AAAA,YAA2B;AAAA,YAAY,cAAc;AAAA,YAAS,MAAK;AAAA,WAA8B;AAAA,SACpG;AAAA;AAAA,KACF;AAAA,IAEF,aAAa,oBAAC,eAAY;AAAA,IAC1B;AAAA,IACA,WAAU;AAAA,GACZ;AAEJ;",
   "names": []
 }

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

@@ -2,6 +2,6 @@
   "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';\nexport * from './DateSwitcherFilter';\nexport * from './NumberRangeFilter';\nexport * from './CurrencyRangeFilter';\nexport * from './SelectFilter/SingleSelectFilter';\nexport * from './SelectFilter/MultiSelectFilter';\nexport * from './SingleDateFilter';\nexport * from './SelectFilter/SingleCreatableFilter';\nexport * from './SelectFilter/MultiCreatableFilter';\n"],
-  "mappings": "AAAA;ACAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;",
+  "mappings": "AAAA,YAAY,WAAW;ACAvB,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;",
   "names": []
 }

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

@@ -2,6 +2,6 @@
   "version": 3,
   "sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/addons/Filters/index.tsx"],
   "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "export * from './Components';\n"],
-  "mappings": "AAAA;ACAA;",
+  "mappings": "AAAA,YAAY,WAAW;ACAvB,cAAc;",
   "names": []
 }

package/dist/esm/addons/Pagination/Pagination.js

@@ -1,5 +1,6 @@
 import * as React from "react";
-import React2, { useContext, useEffect, useMemo } from "react";
+import { jsx } from "react/jsx-runtime";
+import { useContext, useEffect, useMemo } from "react";
 import { DSPagination } from "@elliemae/ds-pagination";
 import { DataTableContext } from "../../DataTableContext";
 const Pagination = () => {
@@ -13,7 +14,7 @@ const Pagination = () => {
   useEffect(() => {
     onPageChanged(originalPage);
   }, [onPageChanged, originalPage]);
-  return /* @__PURE__ */ React2.createElement(DSPagination, {
+  return /* @__PURE__ */ jsx(DSPagination, {
     ...paginationHelpers,
     width: totalColumnsWidth
   });

package/dist/esm/addons/Pagination/Pagination.js.map

@@ -2,6 +2,6 @@
   "version": 3,
   "sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/addons/Pagination/Pagination.tsx"],
   "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { useContext, useEffect, useMemo } from 'react';\nimport { DSPagination } from '@elliemae/ds-pagination';\nimport { DataTableContext } from '../../DataTableContext';\n\nexport const Pagination: React.ComponentType<Record<string, never>> = () => {\n  const {\n    tableProps: { onPageChanged },\n    paginationHelpers,\n    flattenedData: page,\n    layoutHelpers: { totalColumnsWidth },\n  } = useContext(DataTableContext);\n\n  const originalPage = useMemo(() => page.map((row) => row.original), [page]);\n\n  useEffect(() => {\n    onPageChanged(originalPage);\n  }, [onPageChanged, originalPage]);\n\n  return <DSPagination {...paginationHelpers} width={totalColumnsWidth} />;\n};\n"],
-  "mappings": "AAAA;ACAA;AACA;AACA;AAEO,MAAM,aAAyD,MAAM;AAC1E,QAAM;AAAA,IACJ,YAAY,EAAE;AAAA,IACd;AAAA,IACA,eAAe;AAAA,IACf,eAAe,EAAE;AAAA,MACf,WAAW,gBAAgB;AAE/B,QAAM,eAAe,QAAQ,MAAM,KAAK,IAAI,CAAC,QAAQ,IAAI,QAAQ,GAAG,CAAC,IAAI,CAAC;AAE1E,YAAU,MAAM;AACd,kBAAc,YAAY;AAAA,EAC5B,GAAG,CAAC,eAAe,YAAY,CAAC;AAEhC,SAAO,qCAAC;AAAA,IAAc,GAAG;AAAA,IAAmB,OAAO;AAAA,GAAmB;AACxE;",
+  "mappings": "AAAA,YAAY,WAAW;ACAvB;AAAA,SAAgB,YAAY,WAAW,eAAe;AACtD,SAAS,oBAAoB;AAC7B,SAAS,wBAAwB;AAE1B,MAAM,aAAyD,MAAM;AAC1E,QAAM;AAAA,IACJ,YAAY,EAAE,cAAc;AAAA,IAC5B;AAAA,IACA,eAAe;AAAA,IACf,eAAe,EAAE,kBAAkB;AAAA,EACrC,IAAI,WAAW,gBAAgB;AAE/B,QAAM,eAAe,QAAQ,MAAM,KAAK,IAAI,CAAC,QAAQ,IAAI,QAAQ,GAAG,CAAC,IAAI,CAAC;AAE1E,YAAU,MAAM;AACd,kBAAc,YAAY;AAAA,EAC5B,GAAG,CAAC,eAAe,YAAY,CAAC;AAEhC,SAAO,oBAAC;AAAA,IAAc,GAAG;AAAA,IAAmB,OAAO;AAAA,GAAmB;AACxE;",
   "names": []
 }

package/dist/esm/addons/Pagination/index.js.map

@@ -2,6 +2,6 @@
   "version": 3,
   "sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/addons/Pagination/index.tsx"],
   "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "export { Pagination } from './Pagination';\n"],
-  "mappings": "AAAA;ACAA;",
+  "mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,kBAAkB;",
   "names": []
 }

package/dist/esm/configs/constants.js.map

@@ -2,6 +2,6 @@
   "version": 3,
   "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/configs/constants.tsx"],
   "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "export const momentFormat = 'MM/DD/YYYY';\nexport enum ColsLayoutStyle {\n  Fixed = 'fixed',\n  Auto = 'auto',\n}\n\nexport const DATA_TESTID = {\n  DATA_TABLE_WRAPPER: 'data-table-wrapper',\n  DATA_TABLE_GLOBAL_EXPAND_CELL: 'data-table-global-expand-cell',\n  DATA_TABLE_ICON_ARROW_DOWN: 'ic-arrow-head-down',\n  DATA_TABLE_ICON_ARROW_RIGHT: 'ic-arrow-head-right',\n  DATA_TABLE_ICON_ARROW_MIXED: 'ic-arrow-head-mixed',\n  DATA_TABLE_ICON_CHILD: 'ic-arrow-child',\n  DATA_TABLE_GLOBAL_CHECKBOX: 'data-table-global-checkbox',\n  DATA_TABLE_CHECKBOX: 'data-table-checkbox',\n  DATA_TABLE_RADIO: 'data-table-radio',\n  DATA_TABLE_DATE_RANGE_CONTROLLER: 'data-table-date-range',\n  DATA_TABLE_DATE_RANGE_CONTROLLER_CHECKBOX_SWITCHER: 'data-table-date-range-checkbox-switcher-container',\n  DATA_TABLE_SINGLE_DATE_CONTROLLER: 'data-table-single-date',\n  DATA_TABLE_NUMBER_RANGE_CONTROLLER: 'data-table-number-range',\n  DATA_TABLE_CURRENCY_RANGE_CONTROLLER: 'data-table-currency-range',\n  DATA_TABLE_SELECT_MENU_ITEM: 'data-table-filter-menu-list-item',\n  DATA_TABLE_MULTISELECT_CONTROLLER: 'data-table-multi-select',\n  DATA_TABLE_SINGLESELECT_CONTROLLER: 'data-table-single-select',\n  DATA_TABLE_FILTER_BUTTON: 'data-table-filter-menu-button',\n  DATA_TABLE_FILTER_MENU_CONTENT: 'data-table-filter-menu-content',\n  DATA_TABLE_ROW_CONTENT: 'data-table-row-content',\n  DATA_TABLE_ROW: 'data-table-row',\n  DATA_TABLE_TOOLBAR_TRIGGER: 'data-table-toolbar-trigger',\n  DATA_TABLE_CELL: 'data-table-cell',\n  DATA_TABLE_DRAG_HANDLE: 'data-table-drag-handle',\n  DATA_TABLE_CONTENT_WRAPPER: 'data-table-content-wrapper',\n  DATA_TABLE_TABLE: 'data-table-table',\n  DATA_TABLE_SCROLLABLE_CONTAINER: 'data-table-scrollable-container',\n  DATA_TABLE_HEADER: 'data-table-header',\n  DATA_TABLE_ROW_HEADER_CONTENT: 'data-table-row-header-content',\n  DATA_TABLE_ROW_GROUP_HEADER: 'data-table-row-group-header',\n  DATA_TABLE_COLUMN_DRAG_OVERLAY: 'data-table-drag-column-drag-overlay',\n  DATA_TABLE_HEADER_CELL_TITLE: 'header-cell-title',\n  DATA_TABLE_FILTER_BAR_DD_MENU_BUTTON: 'filter-bar-ddmenu-button',\n};\n"],
-  "mappings": "AAAA;ACAO,MAAM,eAAe;AACrB,IAAK,kBAAL,kBAAK,qBAAL;AACL,8BAAQ;AACR,6BAAO;AAFG;AAAA;AAKL,MAAM,cAAc;AAAA,EACzB,oBAAoB;AAAA,EACpB,+BAA+B;AAAA,EAC/B,4BAA4B;AAAA,EAC5B,6BAA6B;AAAA,EAC7B,6BAA6B;AAAA,EAC7B,uBAAuB;AAAA,EACvB,4BAA4B;AAAA,EAC5B,qBAAqB;AAAA,EACrB,kBAAkB;AAAA,EAClB,kCAAkC;AAAA,EAClC,oDAAoD;AAAA,EACpD,mCAAmC;AAAA,EACnC,oCAAoC;AAAA,EACpC,sCAAsC;AAAA,EACtC,6BAA6B;AAAA,EAC7B,mCAAmC;AAAA,EACnC,oCAAoC;AAAA,EACpC,0BAA0B;AAAA,EAC1B,gCAAgC;AAAA,EAChC,wBAAwB;AAAA,EACxB,gBAAgB;AAAA,EAChB,4BAA4B;AAAA,EAC5B,iBAAiB;AAAA,EACjB,wBAAwB;AAAA,EACxB,4BAA4B;AAAA,EAC5B,kBAAkB;AAAA,EAClB,iCAAiC;AAAA,EACjC,mBAAmB;AAAA,EACnB,+BAA+B;AAAA,EAC/B,6BAA6B;AAAA,EAC7B,gCAAgC;AAAA,EAChC,8BAA8B;AAAA,EAC9B,sCAAsC;AACxC;",
-  "names": []
+  "mappings": "AAAA,YAAY,WAAW;ACAhB,MAAM,eAAe;AACrB,IAAK,kBAAL,kBAAKA,qBAAL;AACL,EAAAA,iBAAA,WAAQ;AACR,EAAAA,iBAAA,UAAO;AAFG,SAAAA;AAAA,GAAA;AAKL,MAAM,cAAc;AAAA,EACzB,oBAAoB;AAAA,EACpB,+BAA+B;AAAA,EAC/B,4BAA4B;AAAA,EAC5B,6BAA6B;AAAA,EAC7B,6BAA6B;AAAA,EAC7B,uBAAuB;AAAA,EACvB,4BAA4B;AAAA,EAC5B,qBAAqB;AAAA,EACrB,kBAAkB;AAAA,EAClB,kCAAkC;AAAA,EAClC,oDAAoD;AAAA,EACpD,mCAAmC;AAAA,EACnC,oCAAoC;AAAA,EACpC,sCAAsC;AAAA,EACtC,6BAA6B;AAAA,EAC7B,mCAAmC;AAAA,EACnC,oCAAoC;AAAA,EACpC,0BAA0B;AAAA,EAC1B,gCAAgC;AAAA,EAChC,wBAAwB;AAAA,EACxB,gBAAgB;AAAA,EAChB,4BAA4B;AAAA,EAC5B,iBAAiB;AAAA,EACjB,wBAAwB;AAAA,EACxB,4BAA4B;AAAA,EAC5B,kBAAkB;AAAA,EAClB,iCAAiC;AAAA,EACjC,mBAAmB;AAAA,EACnB,+BAA+B;AAAA,EAC/B,6BAA6B;AAAA,EAC7B,gCAAgC;AAAA,EAChC,8BAA8B;AAAA,EAC9B,sCAAsC;AACxC;",
+  "names": ["ColsLayoutStyle"]
 }

package/dist/esm/configs/fixedSizes.js.map

@@ -2,6 +2,6 @@
   "version": 3,
   "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/configs/fixedSizes.tsx"],
   "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "export const FIXED_SIZES = {\n  PAGINATION_HEIGHT: 42,\n};\n"],
-  "mappings": "AAAA;ACAO,MAAM,cAAc;AAAA,EACzB,mBAAmB;AACrB;",
+  "mappings": "AAAA,YAAY,WAAW;ACAhB,MAAM,cAAc;AAAA,EACzB,mBAAmB;AACrB;",
   "names": []
 }

package/dist/esm/configs/index.js.map

@@ -2,6 +2,6 @@
   "version": 3,
   "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/configs/index.tsx"],
   "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "export * from './constants';\nexport * from './fixedSizes';\nexport * from './useDatatableConfig';\nexport * from './useRowFlattenization';\nexport * from './zIndexInternalConfig';\n"],
-  "mappings": "AAAA;ACAA;AACA;AACA;AACA;AACA;",
+  "mappings": "AAAA,YAAY,WAAW;ACAvB,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;",
   "names": []
 }