@elliemae/ds-data-table 3.53.0-alpha.1 → 3.53.0-alpha.3

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

@@ -0,0 +1,122 @@
+import * as React from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useRef, useCallback, useState, useEffect } from "react";
+import { SearchXsmall } from "@elliemae/ds-icons";
+import { DSInputText } from "@elliemae/ds-form-input-text";
+import { styled } from "@elliemae/ds-system";
+import { Grid } from "@elliemae/ds-grid";
+import { uid } from "uid";
+import { FilterPopover, FILTER_TYPES } from "../../../../exported-related/index.js";
+import { DATA_TESTID } from "../../../../configs/constants.js";
+import { ScreenReaderOnly } from "../../../../styled.js";
+import { DSDataTableName, DSDataTableSlots } from "../../../../constants/index.js";
+import { usePropsStore } from "../../../../configs/useStore/createInternalAndPropsContext.js";
+const StyledInputFreeTextSearch = styled(DSInputText, {
+  name: DSDataTableName,
+  slot: DSDataTableSlots.FREE_TEXT_SEARCH_FILTER
+})``;
+const StyledInputFreeTextSearchWrapper = styled(Grid, {
+  name: DSDataTableName,
+  slot: DSDataTableSlots.FREE_TEXT_SEARCH_WRAPPER
+})``;
+const FreeTextSearchFilter = (props) => {
+  const {
+    column,
+    referenceColumn,
+    column: { id, persistFilterInputAfterSubmit = false },
+    onValueChange,
+    patchHeaderFilterButtonAndMenu,
+    reduxHeader,
+    innerRef,
+    domIdAffix = uid(4)
+  } = props;
+  const ref = useRef(null);
+  const shouldFocus = useRef(true);
+  const getOwnerProps = usePropsStore((store) => store.get);
+  const getOwnerPropsArguments = useCallback(
+    () => ({
+      columnId: id
+    }),
+    [id]
+  );
+  const handleRef = useCallback((newRef) => {
+    ref.current = newRef;
+    if (shouldFocus.current) {
+      requestAnimationFrame(() => {
+        ref.current?.focus();
+        shouldFocus.current = false;
+      });
+    }
+  }, []);
+  useEffect(() => {
+    if (reduxHeader?.hideFilterMenu) {
+      shouldFocus.current = true;
+    }
+  }, [reduxHeader?.hideFilterMenu]);
+  const [value, setValue] = useState("");
+  const onKeyDown = useCallback(
+    (event) => {
+      if (event.key === "Enter" && value.trim() !== "") {
+        onValueChange(FILTER_TYPES.FREE_TEXT_SEARCH, value || void 0);
+        if (!persistFilterInputAfterSubmit) {
+          setValue("");
+        }
+        setTimeout(() => {
+          patchHeaderFilterButtonAndMenu(id, true);
+          innerRef?.current?.focus();
+        }, 0);
+      }
+    },
+    [id, innerRef, onValueChange, patchHeaderFilterButtonAndMenu, persistFilterInputAfterSubmit, value]
+  );
+  return /* @__PURE__ */ jsx(
+    FilterPopover,
+    {
+      reduxHeader,
+      column,
+      columnId: id,
+      customStyles: {
+        backgroundColor: "#fff",
+        width: referenceColumn?.offsetWidth,
+        minWidth: "80px"
+      },
+      menuContent: /* @__PURE__ */ jsxs(
+        StyledInputFreeTextSearchWrapper,
+        {
+          p: "xxs",
+          gutter: "xxs",
+          getOwnerProps,
+          getOwnerPropsArguments,
+          children: [
+            /* @__PURE__ */ jsx(ScreenReaderOnly, { id: "filter-input-instructions", children: "Press Enter to apply the filter and close the dialog. Focus will return to the button that opened this dialog." }),
+            /* @__PURE__ */ jsx(
+              StyledInputFreeTextSearch,
+              {
+                id: `ds-data-table-free-text-search-${id}-${domIdAffix}`,
+                placeholder: "",
+                value,
+                onValueChange: (newValue) => {
+                  setValue(newValue);
+                },
+                innerRef: handleRef,
+                onKeyDown,
+                "data-testid": DATA_TESTID.DATA_TABLE_FILTER_FREE_TEXT_SEARCH,
+                "aria-label": "Free Text Search Filter",
+                "aria-describedby": "filter-input-instructions",
+                getOwnerProps,
+                getOwnerPropsArguments
+              }
+            )
+          ]
+        }
+      ),
+      triggerIcon: /* @__PURE__ */ jsx(SearchXsmall, {}),
+      innerRef,
+      ariaLabel: "Open Free Text Search Filter"
+    }
+  );
+};
+export {
+  FreeTextSearchFilter
+};
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../../../../../scripts/build/transpile/react-shim.js", "../../../../../../src/addons/Filters/Components/FreeTextSearchFilter/index.tsx"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { useRef, useCallback, useState, useEffect } from 'react';\nimport { SearchXsmall } from '@elliemae/ds-icons';\nimport { DSInputText } from '@elliemae/ds-form-input-text';\nimport { styled } from '@elliemae/ds-system';\nimport { Grid } from '@elliemae/ds-grid';\nimport { uid } from 'uid';\nimport { FilterPopover, FILTER_TYPES } from '../../../../exported-related/index.js';\nimport type { DSDataTableT } from '../../../../react-desc-prop-types.js';\nimport { DATA_TESTID } from '../../../../configs/constants.js';\nimport { ScreenReaderOnly } from '../../../../styled.js';\nimport { DSDataTableName, DSDataTableSlots } from '../../../../constants/index.js';\nimport { usePropsStore } from '../../../../configs/useStore/createInternalAndPropsContext.js';\n\nconst StyledInputFreeTextSearch = styled(DSInputText, {\n  name: DSDataTableName,\n  slot: DSDataTableSlots.FREE_TEXT_SEARCH_FILTER,\n})``;\n\nconst StyledInputFreeTextSearchWrapper = styled(Grid, {\n  name: DSDataTableName,\n  slot: DSDataTableSlots.FREE_TEXT_SEARCH_WRAPPER,\n})``;\n\nexport const FreeTextSearchFilter: React.ComponentType<DSDataTableT.FilterProps<string>> = (props) => {\n  const {\n    column,\n    referenceColumn,\n    column: { id, persistFilterInputAfterSubmit = false },\n    onValueChange,\n    patchHeaderFilterButtonAndMenu,\n    reduxHeader,\n    innerRef,\n    domIdAffix = uid(4),\n  } = props;\n\n  const ref = useRef<HTMLInputElement | null>(null);\n  const shouldFocus = useRef(true);\n\n  const getOwnerProps = usePropsStore((store) => store.get);\n  const getOwnerPropsArguments = useCallback(\n    () => ({\n      columnId: id,\n    }),\n    [id],\n  );\n\n  const handleRef = useCallback((newRef: HTMLInputElement | null) => {\n    ref.current = newRef;\n    if (shouldFocus.current) {\n      requestAnimationFrame(() => {\n        ref.current?.focus();\n        shouldFocus.current = false;\n      });\n    }\n  }, []);\n  useEffect(() => {\n    if (reduxHeader?.hideFilterMenu) {\n      shouldFocus.current = true;\n    }\n  }, [reduxHeader?.hideFilterMenu]);\n\n  const [value, setValue] = useState<string>('');\n\n  const onKeyDown = useCallback(\n    (event: React.KeyboardEvent<HTMLInputElement>) => {\n      if (event.key === 'Enter' && value.trim() !== '') {\n        // || undefined to clear the filter when empty\n        onValueChange(FILTER_TYPES.FREE_TEXT_SEARCH, value || undefined);\n        if (!persistFilterInputAfterSubmit) {\n          setValue('');\n        }\n        setTimeout(() => {\n          patchHeaderFilterButtonAndMenu(id, true);\n          innerRef?.current?.focus();\n        }, 0);\n      }\n    },\n    [id, innerRef, onValueChange, patchHeaderFilterButtonAndMenu, persistFilterInputAfterSubmit, value],\n  );\n  return (\n    <FilterPopover\n      reduxHeader={reduxHeader}\n      column={column}\n      columnId={id}\n      customStyles={{\n        backgroundColor: '#fff',\n        width: referenceColumn?.offsetWidth,\n        minWidth: '80px',\n      }}\n      menuContent={\n        <StyledInputFreeTextSearchWrapper\n          p=\"xxs\"\n          gutter=\"xxs\"\n          getOwnerProps={getOwnerProps}\n          getOwnerPropsArguments={getOwnerPropsArguments}\n        >\n          <ScreenReaderOnly id=\"filter-input-instructions\">\n            Press Enter to apply the filter and close the dialog. Focus will return to the button that opened this\n            dialog.\n          </ScreenReaderOnly>\n          <StyledInputFreeTextSearch\n            id={`ds-data-table-free-text-search-${id}-${domIdAffix}`}\n            placeholder=\"\"\n            value={value}\n            onValueChange={(newValue) => {\n              setValue(newValue);\n            }}\n            innerRef={handleRef}\n            onKeyDown={onKeyDown}\n            data-testid={DATA_TESTID.DATA_TABLE_FILTER_FREE_TEXT_SEARCH}\n            aria-label=\"Free Text Search Filter\"\n            aria-describedby=\"filter-input-instructions\"\n            getOwnerProps={getOwnerProps}\n            getOwnerPropsArguments={getOwnerPropsArguments}\n          />\n        </StyledInputFreeTextSearchWrapper>\n      }\n      triggerIcon={<SearchXsmall />}\n      innerRef={innerRef}\n      ariaLabel=\"Open Free Text Search Filter\"\n    />\n  );\n};\n"],
+  "mappings": "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",
+  "names": []
+}

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

@@ -21,6 +21,7 @@ const conform = (value) => {
 const NumberRangeFilter = (props) => {
   const {
     column,
+    referenceColumn,
     filterValue = { from: null, to: null },
     reduxHeader,
     patchHeader,
@@ -120,7 +121,7 @@ const NumberRangeFilter = (props) => {
         }
       ),
       triggerIcon: /* @__PURE__ */ jsx(SearchXsmall, {}),
-      customStyles: { width: column.ref?.current?.offsetWidth ?? "0px" },
+      customStyles: { width: referenceColumn?.offsetWidth },
       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, { useRef, useEffect, useCallback } from 'react';\nimport { Grid } from '@elliemae/ds-grid';\nimport { DSInputText } from '@elliemae/ds-form-input-text';\nimport { getNumberMaskedValue } from '@elliemae/ds-form-helpers-mask-hooks';\nimport { DSFormLayoutBlockItem } from '@elliemae/ds-form-layout-blocks';\nimport { SearchXsmall } from '@elliemae/ds-icons';\nimport { uid } from 'uid';\nimport { FilterPopover, FILTER_TYPES } from '../../../../exported-related/index.js';\nimport type { DSDataTableT } from '../../../../react-desc-prop-types.js';\nimport { DATA_TESTID } from '../../../../configs/constants.js';\n\ninterface NumberRangeFilterValue {\n  from: number | '' | null;\n  to: number | '' | null;\n}\n\nconst opts = {\n  includeThousandsSeparator: false,\n  decimalPlaces: 0,\n};\n\nconst idPreffix = 'datatable-number-range';\n\nconst conform = (value: number | string | null) => {\n  const valueAsString = value?.toString() ?? '';\n  return getNumberMaskedValue(valueAsString, opts);\n};\n\nexport const NumberRangeFilter: React.ComponentType<DSDataTableT.FilterProps<NumberRangeFilterValue>> = (props) => {\n  const {\n    column,\n    filterValue = { from: null, to: null },\n    reduxHeader,\n    patchHeader,\n    onValueChange,\n    innerRef,\n    domIdAffix = uid(4),\n  } = props;\n\n  const handleFromChange = useCallback(\n    (e: React.ChangeEvent<HTMLInputElement>) => {\n      const from: NumberRangeFilterValue['from'] = e.target.value !== '' ? parseInt(e.target.value, 10) : '';\n      const nextValue = {\n        ...filterValue,\n        from,\n      };\n      onValueChange(FILTER_TYPES.CURRENCY_RANGE, nextValue);\n    },\n    [filterValue, onValueChange],\n  );\n\n  const handleToChange = useCallback(\n    (e: React.ChangeEvent<HTMLInputElement>) => {\n      const to: NumberRangeFilterValue['to'] = e.target.value !== '' ? parseInt(e.target.value, 10) : '';\n      const nextValue = {\n        ...filterValue,\n        to,\n      };\n      onValueChange(FILTER_TYPES.CURRENCY_RANGE, nextValue);\n    },\n    [filterValue, onValueChange],\n  );\n\n  // workaround to close menu with esc key since DSInputMask has stoppropagation on key down\n  const onKeyDownHandler = useCallback(\n    (e: React.KeyboardEvent<HTMLInputElement>) => {\n      if (e.code === 'Escape') {\n        patchHeader(column.id, { hideFilterMenu: true, hideFilterButton: false });\n        innerRef.current?.focus();\n      }\n    },\n    [column.id, innerRef, patchHeader],\n  );\n\n  const ref = useRef<HTMLInputElement | null>(null);\n  const shouldFocus = useRef(true);\n  const handleRef = useCallback(\n    (newRef: HTMLInputElement | null) => {\n      if (ref.current) ref.current = newRef;\n      if (shouldFocus.current) {\n        setTimeout(() => {\n          newRef?.focus();\n          shouldFocus.current = false;\n        });\n      }\n    },\n    [shouldFocus],\n  );\n\n  useEffect(() => {\n    if (reduxHeader?.hideFilterMenu) {\n      shouldFocus.current = true;\n    }\n  }, [reduxHeader?.hideFilterMenu]);\n\n  return (\n    <FilterPopover\n      reduxHeader={reduxHeader}\n      column={column}\n      columnId={column.id}\n      menuContent={\n        <Grid\n          data-testid={DATA_TESTID.DATA_TABLE_NUMBER_RANGE_CONTROLLER}\n          gutter=\"xxxs\"\n          padding=\"xxs\"\n          cols={['auto', 'auto']}\n          style={{ background: 'white' }}\n        >\n          <DSFormLayoutBlockItem label=\"Low\" inputID={`${idPreffix}-low-${column.id}-${domIdAffix}`}>\n            <DSInputText\n              value={conform(filterValue.from)}\n              onChange={handleFromChange}\n              id={`${idPreffix}-low-${column.id}-${domIdAffix}`}\n              style={{ textAlign: 'right' }}\n              placeholder=\"0\"\n              innerRef={handleRef}\n              onKeyDown={onKeyDownHandler}\n            />\n          </DSFormLayoutBlockItem>\n          <DSFormLayoutBlockItem label=\"High\" inputID={`${idPreffix}-high-${column.id}-${domIdAffix}`}>\n            <DSInputText\n              value={conform(filterValue.to)}\n              onChange={handleToChange}\n              id={`${idPreffix}-high-${column.id}-${domIdAffix}`}\n              style={{ textAlign: 'right' }}\n              placeholder=\"0\"\n              onKeyDown={onKeyDownHandler}\n            />\n          </DSFormLayoutBlockItem>\n        </Grid>\n      }\n      triggerIcon={<SearchXsmall />}\n      customStyles={{ width: column.ref?.current?.offsetWidth ?? '0px' }}\n      innerRef={innerRef}\n      ariaLabel=\"Open Number Range Filter\"\n    />\n  );\n};\n"],
-  "mappings": "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",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { useRef, useEffect, useCallback } from 'react';\nimport { Grid } from '@elliemae/ds-grid';\nimport { DSInputText } from '@elliemae/ds-form-input-text';\nimport { getNumberMaskedValue } from '@elliemae/ds-form-helpers-mask-hooks';\nimport { DSFormLayoutBlockItem } from '@elliemae/ds-form-layout-blocks';\nimport { SearchXsmall } from '@elliemae/ds-icons';\nimport { uid } from 'uid';\nimport { FilterPopover, FILTER_TYPES } from '../../../../exported-related/index.js';\nimport type { DSDataTableT } from '../../../../react-desc-prop-types.js';\nimport { DATA_TESTID } from '../../../../configs/constants.js';\n\ninterface NumberRangeFilterValue {\n  from: number | '' | null;\n  to: number | '' | null;\n}\n\nconst opts = {\n  includeThousandsSeparator: false,\n  decimalPlaces: 0,\n};\n\nconst idPreffix = 'datatable-number-range';\n\nconst conform = (value: number | string | null) => {\n  const valueAsString = value?.toString() ?? '';\n  return getNumberMaskedValue(valueAsString, opts);\n};\n\nexport const NumberRangeFilter: React.ComponentType<DSDataTableT.FilterProps<NumberRangeFilterValue>> = (props) => {\n  const {\n    column,\n    referenceColumn,\n    filterValue = { from: null, to: null },\n    reduxHeader,\n    patchHeader,\n    onValueChange,\n    innerRef,\n    domIdAffix = uid(4),\n  } = props;\n\n  const handleFromChange = useCallback(\n    (e: React.ChangeEvent<HTMLInputElement>) => {\n      const from: NumberRangeFilterValue['from'] = e.target.value !== '' ? parseInt(e.target.value, 10) : '';\n      const nextValue = {\n        ...filterValue,\n        from,\n      };\n      onValueChange(FILTER_TYPES.CURRENCY_RANGE, nextValue);\n    },\n    [filterValue, onValueChange],\n  );\n\n  const handleToChange = useCallback(\n    (e: React.ChangeEvent<HTMLInputElement>) => {\n      const to: NumberRangeFilterValue['to'] = e.target.value !== '' ? parseInt(e.target.value, 10) : '';\n      const nextValue = {\n        ...filterValue,\n        to,\n      };\n      onValueChange(FILTER_TYPES.CURRENCY_RANGE, nextValue);\n    },\n    [filterValue, onValueChange],\n  );\n\n  // workaround to close menu with esc key since DSInputMask has stoppropagation on key down\n  const onKeyDownHandler = useCallback(\n    (e: React.KeyboardEvent<HTMLInputElement>) => {\n      if (e.code === 'Escape') {\n        patchHeader(column.id, { hideFilterMenu: true, hideFilterButton: false });\n        innerRef.current?.focus();\n      }\n    },\n    [column.id, innerRef, patchHeader],\n  );\n\n  const ref = useRef<HTMLInputElement | null>(null);\n  const shouldFocus = useRef(true);\n  const handleRef = useCallback(\n    (newRef: HTMLInputElement | null) => {\n      if (ref.current) ref.current = newRef;\n      if (shouldFocus.current) {\n        setTimeout(() => {\n          newRef?.focus();\n          shouldFocus.current = false;\n        });\n      }\n    },\n    [shouldFocus],\n  );\n\n  useEffect(() => {\n    if (reduxHeader?.hideFilterMenu) {\n      shouldFocus.current = true;\n    }\n  }, [reduxHeader?.hideFilterMenu]);\n\n  return (\n    <FilterPopover\n      reduxHeader={reduxHeader}\n      column={column}\n      columnId={column.id}\n      menuContent={\n        <Grid\n          data-testid={DATA_TESTID.DATA_TABLE_NUMBER_RANGE_CONTROLLER}\n          gutter=\"xxxs\"\n          padding=\"xxs\"\n          cols={['auto', 'auto']}\n          style={{ background: 'white' }}\n        >\n          <DSFormLayoutBlockItem label=\"Low\" inputID={`${idPreffix}-low-${column.id}-${domIdAffix}`}>\n            <DSInputText\n              value={conform(filterValue.from)}\n              onChange={handleFromChange}\n              id={`${idPreffix}-low-${column.id}-${domIdAffix}`}\n              style={{ textAlign: 'right' }}\n              placeholder=\"0\"\n              innerRef={handleRef}\n              onKeyDown={onKeyDownHandler}\n            />\n          </DSFormLayoutBlockItem>\n          <DSFormLayoutBlockItem label=\"High\" inputID={`${idPreffix}-high-${column.id}-${domIdAffix}`}>\n            <DSInputText\n              value={conform(filterValue.to)}\n              onChange={handleToChange}\n              id={`${idPreffix}-high-${column.id}-${domIdAffix}`}\n              style={{ textAlign: 'right' }}\n              placeholder=\"0\"\n              onKeyDown={onKeyDownHandler}\n            />\n          </DSFormLayoutBlockItem>\n        </Grid>\n      }\n      triggerIcon={<SearchXsmall />}\n      customStyles={{ width: referenceColumn?.offsetWidth }}\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

@@ -12,6 +12,7 @@ const getValue = (datum) => datum?.toString();
 const BaseSelectFilter = (props) => {
   const {
     isMulti = false,
+    referenceColumn,
     filterValue: selectedItems = null,
     creatable = false,
     column,
@@ -145,7 +146,7 @@ const BaseSelectFilter = (props) => {
       onClickOutsideMenu: handleOnClickOutside,
       customStyles: {
         backgroundColor: "#fff",
-        width: filterMinWidth ?? column.ref?.current?.offsetWidth
+        width: filterMinWidth ?? referenceColumn?.offsetWidth
       }
     }
   );

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, 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 { FilterPopover } from '../../../../exported-related/index.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 BaseSelectFilter: React.ComponentType<\n  DSDataTableT.FilterProps<BaseSelectFilterValue> & BaseSelectProps\n> = (props) => {\n  const {\n    isMulti = false,\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\n  const [filters, setFilteredOptions] = useState(filterOptions);\n\n  useEffect(() => setFilteredOptions(filterOptions), [filterOptions]);\n\n  const handleOnChange = useCallback(\n    (value: BaseSelectFilterValue) => {\n      if (isMulti && Array.isArray(value)) {\n        onValueChange(type, value.length !== 0 ? value : undefined);\n      } else {\n        onValueChange(type, value !== null ? value : undefined);\n        patchHeaderFilterButtonAndMenu(column.id, true);\n        innerRef?.current?.focus();\n      }\n    },\n    [column.id, innerRef, isMulti, onValueChange, patchHeaderFilterButtonAndMenu, type],\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(selectedItems) ? [...selectedItems, newItem] : newItem);\n      setFilteredOptions([...filterOptions]);\n    },\n    [filterOptions, handleOnChange, selectedItems],\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    }\n  }, [reduxHeader?.hideFilterMenu]);\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={selectedItems}\n          menuMaxHeight={300}\n        />\n      </Grid>\n    ),\n    [\n      creatable,\n      disableFirstOptionFocusOnFilter,\n      filters,\n      handleOnChange,\n      handleOnCreate,\n      handleRef,\n      isMulti,\n      selectedItems,\n    ],\n  );\n\n  const handleOnClickOutside = useCallback(() => {\n    setFilteredOptions(filterOptions);\n  }, [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      customStyles={{\n        backgroundColor: '#fff',\n        width: filterMinWidth ?? column.ref?.current?.offsetWidth,\n      }}\n    />\n  );\n};\n"],
-  "mappings": "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",
+  "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 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 { FilterPopover } from '../../../../exported-related/index.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 BaseSelectFilter: 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\n  const [filters, setFilteredOptions] = useState(filterOptions);\n\n  useEffect(() => setFilteredOptions(filterOptions), [filterOptions]);\n\n  const handleOnChange = useCallback(\n    (value: BaseSelectFilterValue) => {\n      if (isMulti && Array.isArray(value)) {\n        onValueChange(type, value.length !== 0 ? value : undefined);\n      } else {\n        onValueChange(type, value !== null ? value : undefined);\n        patchHeaderFilterButtonAndMenu(column.id, true);\n        innerRef?.current?.focus();\n      }\n    },\n    [column.id, innerRef, isMulti, onValueChange, patchHeaderFilterButtonAndMenu, type],\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(selectedItems) ? [...selectedItems, newItem] : newItem);\n      setFilteredOptions([...filterOptions]);\n    },\n    [filterOptions, handleOnChange, selectedItems],\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    }\n  }, [reduxHeader?.hideFilterMenu]);\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={selectedItems}\n          menuMaxHeight={300}\n        />\n      </Grid>\n    ),\n    [\n      creatable,\n      disableFirstOptionFocusOnFilter,\n      filters,\n      handleOnChange,\n      handleOnCreate,\n      handleRef,\n      isMulti,\n      selectedItems,\n    ],\n  );\n\n  const handleOnClickOutside = useCallback(() => {\n    setFilteredOptions(filterOptions);\n  }, [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      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/MultiCreatableFilter.js

@@ -6,6 +6,7 @@ import { FILTER_TYPES } from "../../../../exported-related/index.js";
 import { DATA_TESTID } from "../../../../configs/constants.js";
 const MultiCreatableFilter = ({
   column,
+  referenceColumn,
   onValueChange,
   patchHeaderFilterButtonAndMenu,
   patchHeader,
@@ -27,7 +28,8 @@ const MultiCreatableFilter = ({
     patchHeaderFilterButtonAndMenu,
     patchHeader,
     innerRef,
-    domIdAffix
+    domIdAffix,
+    referenceColumn
   }
 );
 export {

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

@@ -1,7 +1,7 @@
 {
   "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 type { DSComboboxT } from '@elliemae/ds-form-combobox';\nimport { uid } from 'uid';\nimport type { DSDataTableT } from '../../../../react-desc-prop-types.js';\nimport { BaseSelectFilter } from './BaseSelectFilter.js';\nimport { FILTER_TYPES } from '../../../../exported-related/index.js';\nimport { DATA_TESTID } from '../../../../configs/constants.js';\n\ntype MultiCreatableFilterValue = DSComboboxT.SelectedOptionsT;\n\nexport const MultiCreatableFilter: React.ComponentType<DSDataTableT.FilterProps<MultiCreatableFilterValue>> = ({\n  column,\n  onValueChange,\n  patchHeaderFilterButtonAndMenu,\n  patchHeader,\n  reduxHeader,\n  filterValue,\n  innerRef,\n  domIdAffix = uid(4),\n}) => (\n  <BaseSelectFilter\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}\n    onValueChange={onValueChange}\n    patchHeaderFilterButtonAndMenu={patchHeaderFilterButtonAndMenu}\n    patchHeader={patchHeader}\n    innerRef={innerRef}\n    domIdAffix={domIdAffix}\n  />\n);\n"],
-  "mappings": "AAAA,YAAY,WAAW;ACoBrB;AAlBF,SAAS,WAAW;AAEpB,SAAS,wBAAwB;AACjC,SAAS,oBAAoB;AAC7B,SAAS,mBAAmB;AAIrB,MAAM,uBAAiG,CAAC;AAAA,EAC7G;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;AACF;",
+  "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 { BaseSelectFilter } from './BaseSelectFilter.js';\nimport { FILTER_TYPES } from '../../../../exported-related/index.js';\nimport { DATA_TESTID } from '../../../../configs/constants.js';\n\ntype MultiCreatableFilterValue = DSComboboxT.SelectedOptionsT;\n\nexport const MultiCreatableFilter: 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  <BaseSelectFilter\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}\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,wBAAwB;AACjC,SAAS,oBAAoB;AAC7B,SAAS,mBAAmB;AAIrB,MAAM,uBAAiG,CAAC;AAAA,EAC7G;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/MultiSelectFilter.js

@@ -6,6 +6,7 @@ import { FILTER_TYPES } from "../../../../exported-related/index.js";
 import { DATA_TESTID } from "../../../../configs/constants.js";
 const MultiSelectFilter = ({
   column,
+  referenceColumn,
   onValueChange,
   patchHeaderFilterButtonAndMenu,
   patchHeader,
@@ -26,7 +27,8 @@ const MultiSelectFilter = ({
     patchHeaderFilterButtonAndMenu,
     patchHeader,
     innerRef,
-    domIdAffix
+    domIdAffix,
+    referenceColumn
   }
 );
 export {

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../../../scripts/build/transpile/react-shim.js", "../../../../../../src/addons/Filters/Components/SelectFilter/MultiSelectFilter.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "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 { BaseSelectFilter } from './BaseSelectFilter.js';\nimport { FILTER_TYPES } from '../../../../exported-related/index.js';\nimport { DATA_TESTID } from '../../../../configs/constants.js';\n\ntype MultiSelectFilterValue = DSComboboxT.SelectedOptionsT;\n\nexport const MultiSelectFilter: React.ComponentType<DSDataTableT.FilterProps<MultiSelectFilterValue>> = ({\n  column,\n  onValueChange,\n  patchHeaderFilterButtonAndMenu,\n  patchHeader,\n  reduxHeader,\n  filterValue,\n  innerRef,\n  domIdAffix = uid(4),\n}) => (\n  <BaseSelectFilter\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}\n    onValueChange={onValueChange}\n    patchHeaderFilterButtonAndMenu={patchHeaderFilterButtonAndMenu}\n    patchHeader={patchHeader}\n    innerRef={innerRef}\n    domIdAffix={domIdAffix}\n  />\n);\n"],
-  "mappings": "AAAA,YAAY,WAAW;ACoBrB;AAlBF,SAAS,WAAW;AAEpB,SAAS,wBAAwB;AACjC,SAAS,oBAAoB;AAC7B,SAAS,mBAAmB;AAIrB,MAAM,oBAA2F,CAAC;AAAA,EACvG;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;AACF;",
+  "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 { BaseSelectFilter } from './BaseSelectFilter.js';\nimport { FILTER_TYPES } from '../../../../exported-related/index.js';\nimport { DATA_TESTID } from '../../../../configs/constants.js';\n\ntype MultiSelectFilterValue = DSComboboxT.SelectedOptionsT;\n\nexport const MultiSelectFilter: 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  <BaseSelectFilter\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}\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,wBAAwB;AACjC,SAAS,oBAAoB;AAC7B,SAAS,mBAAmB;AAIrB,MAAM,oBAA2F,CAAC;AAAA,EACvG;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/SingleCreatableFilter.js

@@ -6,6 +6,7 @@ import { FILTER_TYPES } from "../../../../exported-related/index.js";
 import { DATA_TESTID } from "../../../../configs/constants.js";
 const SingleCreatableFilter = ({
   column,
+  referenceColumn,
   patchHeaderFilterButtonAndMenu,
   patchHeader,
   onValueChange,
@@ -26,7 +27,8 @@ const SingleCreatableFilter = ({
     patchHeaderFilterButtonAndMenu,
     patchHeader,
     innerRef,
-    domIdAffix
+    domIdAffix,
+    referenceColumn
   }
 );
 export {

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

@@ -1,7 +1,7 @@
 {
   "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", "import React from 'react';\nimport { uid } from 'uid';\nimport type { DSComboboxT } from '@elliemae/ds-form-combobox';\nimport { BaseSelectFilter } from './BaseSelectFilter.js';\nimport type { DSDataTableT } from '../../../../react-desc-prop-types.js';\nimport { FILTER_TYPES } from '../../../../exported-related/index.js';\nimport { DATA_TESTID } from '../../../../configs/constants.js';\n\ntype SingleCreatableFilterValue = DSComboboxT.SelectedOptionsT;\n\nexport const SingleCreatableFilter: React.ComponentType<DSDataTableT.FilterProps<SingleCreatableFilterValue>> = ({\n  column,\n  patchHeaderFilterButtonAndMenu,\n  patchHeader,\n  onValueChange,\n  filterValue,\n  reduxHeader,\n  innerRef,\n  domIdAffix = uid(4),\n}) => (\n  <BaseSelectFilter\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}\n    onValueChange={onValueChange}\n    patchHeaderFilterButtonAndMenu={patchHeaderFilterButtonAndMenu}\n    patchHeader={patchHeader}\n    innerRef={innerRef}\n    domIdAffix={domIdAffix}\n  />\n);\n"],
-  "mappings": "AAAA,YAAY,WAAW;ACoBrB;AAnBF,SAAS,WAAW;AAEpB,SAAS,wBAAwB;AAEjC,SAAS,oBAAoB;AAC7B,SAAS,mBAAmB;AAIrB,MAAM,wBAAmG,CAAC;AAAA,EAC/G;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;AACF;",
+  "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 { BaseSelectFilter } from './BaseSelectFilter.js';\nimport type { DSDataTableT } from '../../../../react-desc-prop-types.js';\nimport { FILTER_TYPES } from '../../../../exported-related/index.js';\nimport { DATA_TESTID } from '../../../../configs/constants.js';\n\ntype SingleCreatableFilterValue = DSComboboxT.SelectedOptionsT;\n\nexport const SingleCreatableFilter: 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  <BaseSelectFilter\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}\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;AAEpB,SAAS,wBAAwB;AAEjC,SAAS,oBAAoB;AAC7B,SAAS,mBAAmB;AAIrB,MAAM,wBAAmG,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;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/SingleSelectFilter.js

@@ -1,11 +1,12 @@
 import * as React from "react";
 import { jsx } from "react/jsx-runtime";
-import { BaseSelectFilter } from "./BaseSelectFilter.js";
 import { uid } from "uid";
-import { FILTER_TYPES } from "../../../../exported-related/index.js";
 import { DATA_TESTID } from "../../../../configs/constants.js";
+import { FILTER_TYPES } from "../../../../exported-related/index.js";
+import { BaseSelectFilter } from "./BaseSelectFilter.js";
 const SingleSelectFilter = ({
   column,
+  referenceColumn,
   patchHeaderFilterButtonAndMenu,
   patchHeader,
   onValueChange,
@@ -25,7 +26,8 @@ const SingleSelectFilter = ({
     patchHeaderFilterButtonAndMenu,
     patchHeader,
     innerRef,
-    domIdAffix
+    domIdAffix,
+    referenceColumn
   }
 );
 export {

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../../../scripts/build/transpile/react-shim.js", "../../../../../../src/addons/Filters/Components/SelectFilter/SingleSelectFilter.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React from 'react';\nimport { BaseSelectFilter } from './BaseSelectFilter.js';\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';\n\ntype SingleSelectFilterValue = DSComboboxT.SelectedOptionsT;\n\nexport const SingleSelectFilter: React.ComponentType<DSDataTableT.FilterProps<SingleSelectFilterValue>> = ({\n  column,\n  patchHeaderFilterButtonAndMenu,\n  patchHeader,\n  onValueChange,\n  filterValue,\n  reduxHeader,\n  innerRef,\n  domIdAffix = uid(4),\n}) => (\n  <BaseSelectFilter\n    reduxHeader={reduxHeader}\n    data-testid={DATA_TESTID.DATA_TABLE_SINGLESELECT_CONTROLLER}\n    column={column}\n    filterValue={filterValue}\n    type={FILTER_TYPES.SELECT}\n    onValueChange={onValueChange}\n    patchHeaderFilterButtonAndMenu={patchHeaderFilterButtonAndMenu}\n    patchHeader={patchHeader}\n    innerRef={innerRef}\n    domIdAffix={domIdAffix}\n  />\n);\n"],
-  "mappings": "AAAA,YAAY,WAAW;ACoBrB;AAnBF,SAAS,wBAAwB;AAEjC,SAAS,WAAW;AAEpB,SAAS,oBAAoB;AAC7B,SAAS,mBAAmB;AAIrB,MAAM,qBAA6F,CAAC;AAAA,EACzG;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;AACF;",
+  "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 { BaseSelectFilter } from './BaseSelectFilter.js';\n\ntype SingleSelectFilterValue = DSComboboxT.SelectedOptionsT;\n\nexport const SingleSelectFilter: 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  <BaseSelectFilter\n    reduxHeader={reduxHeader}\n    data-testid={DATA_TESTID.DATA_TABLE_SINGLESELECT_CONTROLLER}\n    column={column}\n    filterValue={filterValue}\n    type={FILTER_TYPES.SELECT}\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,wBAAwB;AAI1B,MAAM,qBAA6F,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;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/index.js

@@ -8,4 +8,5 @@ export * from "./SelectFilter/MultiSelectFilter.js";
 export * from "./SingleDateFilter/index.js";
 export * from "./SelectFilter/SingleCreatableFilter.js";
 export * from "./SelectFilter/MultiCreatableFilter.js";
+export * from "./FreeTextSearchFilter/index.js";
 //# 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';\n"],
-  "mappings": "AAAA,YAAY,WAAW;ACAvB,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';\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;",
   "names": []
 }

package/dist/esm/configs/constants.js

@@ -32,6 +32,7 @@ const DATA_TESTID = {
   DATA_TABLE_FILTER_BUTTON_ELEMENT: "ds-button",
   // TODO 'data-table-filter-menu-button-element',
   DATA_TABLE_FILTER_MENU_CONTENT: "data-table-filter-menu-content",
+  DATA_TABLE_FILTER_FREE_TEXT_SEARCH: "data-table-filter-free-text-search",
   DATA_TABLE_ROW_CONTENT: "data-table-row-content",
   DATA_TABLE_ROW: "data-table-row",
   DATA_TABLE_TOOLBAR_TRIGGER: "data-table-toolbar-trigger",

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

@@ -1,7 +1,7 @@
 {
   "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 const ColsLayoutStyle = {\n  Fixed: 'fixed',\n  Auto: 'auto',\n} as const;\n\nexport const DropIndicatorPosition = {\n  None: 'none',\n  Before: 'before',\n  After: 'after',\n  Inside: 'inside',\n} as const;\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_BUTTON_ELEMENT: 'ds-button', // TODO 'data-table-filter-menu-button-element',\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  DATA_TABLE_SORT_BUTTON: 'data-table-sort-button',\n} as const;\n\nexport const EMPTY_FILTER = 'ds-empty-filter';\n"],
-  "mappings": "AAAA,YAAY,WAAW;ACAhB,MAAM,eAAe;AACrB,MAAM,kBAAkB;AAAA,EAC7B,OAAO;AAAA,EACP,MAAM;AACR;AAEO,MAAM,wBAAwB;AAAA,EACnC,MAAM;AAAA,EACN,QAAQ;AAAA,EACR,OAAO;AAAA,EACP,QAAQ;AACV;AAEO,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,kCAAkC;AAAA;AAAA,EAClC,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;AAAA,EACtC,wBAAwB;AAC1B;AAEO,MAAM,eAAe;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "export const momentFormat = 'MM/DD/YYYY';\nexport const ColsLayoutStyle = {\n  Fixed: 'fixed',\n  Auto: 'auto',\n} as const;\n\nexport const DropIndicatorPosition = {\n  None: 'none',\n  Before: 'before',\n  After: 'after',\n  Inside: 'inside',\n} as const;\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_BUTTON_ELEMENT: 'ds-button', // TODO 'data-table-filter-menu-button-element',\n  DATA_TABLE_FILTER_MENU_CONTENT: 'data-table-filter-menu-content',\n  DATA_TABLE_FILTER_FREE_TEXT_SEARCH: 'data-table-filter-free-text-search',\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  DATA_TABLE_SORT_BUTTON: 'data-table-sort-button',\n} as const;\n\nexport const EMPTY_FILTER = 'ds-empty-filter';\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACAhB,MAAM,eAAe;AACrB,MAAM,kBAAkB;AAAA,EAC7B,OAAO;AAAA,EACP,MAAM;AACR;AAEO,MAAM,wBAAwB;AAAA,EACnC,MAAM;AAAA,EACN,QAAQ;AAAA,EACR,OAAO;AAAA,EACP,QAAQ;AACV;AAEO,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,kCAAkC;AAAA;AAAA,EAClC,gCAAgC;AAAA,EAChC,oCAAoC;AAAA,EACpC,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;AAAA,EACtC,wBAAwB;AAC1B;AAEO,MAAM,eAAe;",
   "names": []
 }

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

@@ -10,14 +10,15 @@ import { useTableResizeCb } from "../useTableResizeCb.js";
 const estimateSize = () => 36;
 const useAutoCalculated = (propsWithDefaults) => {
   const { actionRef, colsLayoutStyle, hiddenColumns, isLoading } = propsWithDefaults;
-  const visibleRangeRef = useRef({ start: 0, end: 0 });
   const virtualListRef = useRef(null);
+  const [bodyClientWidth, setBodyClientWidth] = React2.useState("100%");
   const columnHeaderRef = useRef(null);
   const lastSelected = useRef(-1);
   const visibleColumns = useTableColsWithAddons(propsWithDefaults, hiddenColumns);
   const [flattenedData, allDataFlattened] = useRowFlattenization(propsWithDefaults);
   const [paginatedData, paginationHelpers] = usePaginationConfig(propsWithDefaults, flattenedData);
   const dataLength = useMemo(() => (paginatedData || flattenedData).length, [flattenedData, paginatedData]);
+  const visibleRangeRef = useRef({ start: 0, end: 0, overscan: 15, size: dataLength });
   const virtualListHelpers = useVirtual({
     size: dataLength,
     parentRef: virtualListRef,
@@ -70,7 +71,9 @@ const useAutoCalculated = (propsWithDefaults) => {
     firstFocuseableColumnHeaderId,
     virtualListRef,
     columnHeaderRef,
-    lastSelected
+    lastSelected,
+    bodyClientWidth,
+    setBodyClientWidth
   };
 };
 export {

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/configs/useAutocalculated/index.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable import/no-cycle */\n/* eslint-disable no-continue */\n/* eslint-disable consistent-return */\n/* eslint-disable no-plusplus */\n/* eslint-disable max-statements */\nimport React, { useEffect, useMemo, useRef } from 'react';\nimport { useVirtual, defaultRangeExtractor, type Range } from 'react-virtual';\nimport { type DSDataTableT } from '../../react-desc-prop-types.js';\nimport { useTableColsWithAddons } from '../useTableColsWithAddons.js';\nimport { useRowFlattenization } from '../useRowFlattenization.js';\nimport { usePaginationConfig } from '../usePaginationConfig.js';\nimport { columnsToGrid } from '../../helpers/columnsToGrid.js';\nimport { ColsLayoutStyle } from '../constants.js';\nimport { useTableResizeCb } from '../useTableResizeCb.js';\n\nconst estimateSize = () => 36;\n\nexport const useAutoCalculated = (propsWithDefaults: DSDataTableT.InternalProps): DSDataTableT.UseAutoCalculatedT => {\n  const { actionRef, colsLayoutStyle, hiddenColumns, isLoading } = propsWithDefaults;\n\n  const visibleRangeRef = useRef<Range>({ start: 0, end: 0 });\n  const virtualListRef = useRef<HTMLDivElement | null>(null);\n  const columnHeaderRef = useRef<HTMLDivElement | null>(null);\n  const lastSelected = useRef<number>(-1);\n\n  // ===========================================================================\n  // Column config\n  // ===========================================================================\n  const visibleColumns = useTableColsWithAddons(propsWithDefaults, hiddenColumns);\n\n  // ===========================================================================\n  // Data flattenization and pagination\n  // ===========================================================================\n\n  const [flattenedData, allDataFlattened] = useRowFlattenization(propsWithDefaults);\n\n  const [paginatedData, paginationHelpers] = usePaginationConfig(propsWithDefaults, flattenedData);\n\n  const dataLength = useMemo(() => (paginatedData || flattenedData).length, [flattenedData, paginatedData]);\n\n  // estimateSize should not be really required given what was stated on\n  // https://github.com/tannerlinsley/react-virtual/issues/23\n  const virtualListHelpers = useVirtual({\n    size: dataLength,\n    parentRef: virtualListRef,\n    overscan: 15,\n    paddingStart: columnHeaderRef.current?.getBoundingClientRect()?.height ?? 24,\n    estimateSize,\n    rangeExtractor: React.useCallback((range: Range) => {\n      visibleRangeRef.current = range;\n\n      return defaultRangeExtractor(range);\n    }, []),\n  });\n\n  // ===========================================================================\n  // Empty content config\n  // ===========================================================================\n\n  const isEmptyContent = useMemo(() => !isLoading && flattenedData.length === 0, [isLoading, flattenedData.length]);\n\n  const firstFocuseableColumnHeaderId = useMemo(() => {\n    for (let i = 0; i < visibleColumns.length; i++) {\n      const column = visibleColumns[i];\n      if (column.isFocuseable === false && column.id !== 'expander' && column.id !== 'multiSelecter') {\n        continue;\n      }\n      return column.id;\n    }\n  }, [visibleColumns]);\n\n  // ===========================================================================\n  // Layout config\n  // ===========================================================================\n\n  const gridLayout = useMemo(() => columnsToGrid(visibleColumns, colsLayoutStyle), [colsLayoutStyle, visibleColumns]);\n\n  // We need to listen and update the state based on this props\n  const totalColumnsWidth = useMemo(\n    () =>\n      colsLayoutStyle === ColsLayoutStyle.Fixed\n        ? gridLayout.reduce((acc: number, cur: string) => acc + Number.parseInt(cur, 10), 0)\n        : '100%',\n    [colsLayoutStyle, gridLayout],\n  );\n\n  const layoutHelpers = useMemo(\n    () => ({\n      gridLayout,\n      totalColumnsWidth,\n    }),\n    [gridLayout, totalColumnsWidth],\n  );\n\n  useTableResizeCb({ virtualListRef, propsWithDefault: propsWithDefaults });\n\n  // ===========================================================================\n  // Action ref setup\n  // ===========================================================================\n  useEffect(() => {\n    if (actionRef) {\n      actionRef.current.scrollToIndex = virtualListHelpers.scrollToIndex;\n      actionRef.current.scrollToOffset = virtualListHelpers.scrollToOffset;\n    }\n  }, [actionRef, virtualListHelpers.scrollToIndex, virtualListHelpers.scrollToOffset]);\n\n  return {\n    visibleRangeRef,\n    layoutHelpers,\n    paginationHelpers,\n    visibleColumns,\n    virtualListHelpers,\n    flattenedData: paginatedData || flattenedData,\n    allDataFlattened,\n    isEmptyContent,\n    firstFocuseableColumnHeaderId,\n    virtualListRef,\n    columnHeaderRef,\n    lastSelected,\n  };\n};\n"],
-  "mappings": "AAAA,YAAY,WAAW;ACKvB,OAAOA,UAAS,WAAW,SAAS,cAAc;AAClD,SAAS,YAAY,6BAAyC;AAE9D,SAAS,8BAA8B;AACvC,SAAS,4BAA4B;AACrC,SAAS,2BAA2B;AACpC,SAAS,qBAAqB;AAC9B,SAAS,uBAAuB;AAChC,SAAS,wBAAwB;AAEjC,MAAM,eAAe,MAAM;AAEpB,MAAM,oBAAoB,CAAC,sBAAmF;AACnH,QAAM,EAAE,WAAW,iBAAiB,eAAe,UAAU,IAAI;AAEjE,QAAM,kBAAkB,OAAc,EAAE,OAAO,GAAG,KAAK,EAAE,CAAC;AAC1D,QAAM,iBAAiB,OAA8B,IAAI;AACzD,QAAM,kBAAkB,OAA8B,IAAI;AAC1D,QAAM,eAAe,OAAe,EAAE;AAKtC,QAAM,iBAAiB,uBAAuB,mBAAmB,aAAa;AAM9E,QAAM,CAAC,eAAe,gBAAgB,IAAI,qBAAqB,iBAAiB;AAEhF,QAAM,CAAC,eAAe,iBAAiB,IAAI,oBAAoB,mBAAmB,aAAa;AAE/F,QAAM,aAAa,QAAQ,OAAO,iBAAiB,eAAe,QAAQ,CAAC,eAAe,aAAa,CAAC;AAIxG,QAAM,qBAAqB,WAAW;AAAA,IACpC,MAAM;AAAA,IACN,WAAW;AAAA,IACX,UAAU;AAAA,IACV,cAAc,gBAAgB,SAAS,sBAAsB,GAAG,UAAU;AAAA,IAC1E;AAAA,IACA,gBAAgBA,OAAM,YAAY,CAAC,UAAiB;AAClD,sBAAgB,UAAU;AAE1B,aAAO,sBAAsB,KAAK;AAAA,IACpC,GAAG,CAAC,CAAC;AAAA,EACP,CAAC;AAMD,QAAM,iBAAiB,QAAQ,MAAM,CAAC,aAAa,cAAc,WAAW,GAAG,CAAC,WAAW,cAAc,MAAM,CAAC;AAEhH,QAAM,gCAAgC,QAAQ,MAAM;AAClD,aAAS,IAAI,GAAG,IAAI,eAAe,QAAQ,KAAK;AAC9C,YAAM,SAAS,eAAe,CAAC;AAC/B,UAAI,OAAO,iBAAiB,SAAS,OAAO,OAAO,cAAc,OAAO,OAAO,iBAAiB;AAC9F;AAAA,MACF;AACA,aAAO,OAAO;AAAA,IAChB;AAAA,EACF,GAAG,CAAC,cAAc,CAAC;AAMnB,QAAM,aAAa,QAAQ,MAAM,cAAc,gBAAgB,eAAe,GAAG,CAAC,iBAAiB,cAAc,CAAC;AAGlH,QAAM,oBAAoB;AAAA,IACxB,MACE,oBAAoB,gBAAgB,QAChC,WAAW,OAAO,CAAC,KAAa,QAAgB,MAAM,OAAO,SAAS,KAAK,EAAE,GAAG,CAAC,IACjF;AAAA,IACN,CAAC,iBAAiB,UAAU;AAAA,EAC9B;AAEA,QAAM,gBAAgB;AAAA,IACpB,OAAO;AAAA,MACL;AAAA,MACA;AAAA,IACF;AAAA,IACA,CAAC,YAAY,iBAAiB;AAAA,EAChC;AAEA,mBAAiB,EAAE,gBAAgB,kBAAkB,kBAAkB,CAAC;AAKxE,YAAU,MAAM;AACd,QAAI,WAAW;AACb,gBAAU,QAAQ,gBAAgB,mBAAmB;AACrD,gBAAU,QAAQ,iBAAiB,mBAAmB;AAAA,IACxD;AAAA,EACF,GAAG,CAAC,WAAW,mBAAmB,eAAe,mBAAmB,cAAc,CAAC;AAEnF,SAAO;AAAA,IACL;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,eAAe,iBAAiB;AAAA,IAChC;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF;AACF;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable import/no-cycle */\n/* eslint-disable no-continue */\n/* eslint-disable consistent-return */\n/* eslint-disable no-plusplus */\n/* eslint-disable max-statements */\nimport React, { useEffect, useMemo, useRef } from 'react';\nimport { useVirtual, defaultRangeExtractor, type Range } from 'react-virtual';\nimport { type DSDataTableT } from '../../react-desc-prop-types.js';\nimport { useTableColsWithAddons } from '../useTableColsWithAddons.js';\nimport { useRowFlattenization } from '../useRowFlattenization.js';\nimport { usePaginationConfig } from '../usePaginationConfig.js';\nimport { columnsToGrid } from '../../helpers/columnsToGrid.js';\nimport { ColsLayoutStyle } from '../constants.js';\nimport { useTableResizeCb } from '../useTableResizeCb.js';\n\nconst estimateSize = () => 36;\n\nexport const useAutoCalculated = (propsWithDefaults: DSDataTableT.InternalProps): DSDataTableT.UseAutoCalculatedT => {\n  const { actionRef, colsLayoutStyle, hiddenColumns, isLoading } = propsWithDefaults;\n\n  const virtualListRef = useRef<HTMLDivElement | null>(null);\n  const [bodyClientWidth, setBodyClientWidth] = React.useState<number | string>('100%');\n  const columnHeaderRef = useRef<HTMLDivElement | null>(null);\n  const lastSelected = useRef<number>(-1);\n\n  // ===========================================================================\n  // Column config\n  // ===========================================================================\n  const visibleColumns = useTableColsWithAddons(propsWithDefaults, hiddenColumns);\n\n  // ===========================================================================\n  // Data flattenization and pagination\n  // ===========================================================================\n\n  const [flattenedData, allDataFlattened] = useRowFlattenization(propsWithDefaults);\n\n  const [paginatedData, paginationHelpers] = usePaginationConfig(propsWithDefaults, flattenedData);\n\n  const dataLength = useMemo(() => (paginatedData || flattenedData).length, [flattenedData, paginatedData]);\n\n  // when rangeExtractor is invoked this will be filled with the current range\n  const visibleRangeRef = useRef<Range>({ start: 0, end: 0, overscan: 15, size: dataLength });\n  // estimateSize should not be really required given what was stated on\n  // https://github.com/tannerlinsley/react-virtual/issues/23\n  const virtualListHelpers = useVirtual({\n    size: dataLength,\n    parentRef: virtualListRef,\n    overscan: 15,\n    paddingStart: columnHeaderRef.current?.getBoundingClientRect()?.height ?? 24,\n    estimateSize,\n    rangeExtractor: React.useCallback((range: Range) => {\n      visibleRangeRef.current = range;\n\n      return defaultRangeExtractor(range);\n    }, []),\n  });\n\n  // ===========================================================================\n  // Empty content config\n  // ===========================================================================\n\n  const isEmptyContent = useMemo(() => !isLoading && flattenedData.length === 0, [isLoading, flattenedData.length]);\n\n  const firstFocuseableColumnHeaderId = useMemo(() => {\n    for (let i = 0; i < visibleColumns.length; i++) {\n      const column = visibleColumns[i];\n      if (column.isFocuseable === false && column.id !== 'expander' && column.id !== 'multiSelecter') {\n        continue;\n      }\n      return column.id;\n    }\n  }, [visibleColumns]);\n\n  // ===========================================================================\n  // Layout config\n  // ===========================================================================\n\n  const gridLayout = useMemo(() => columnsToGrid(visibleColumns, colsLayoutStyle), [colsLayoutStyle, visibleColumns]);\n\n  // We need to listen and update the state based on this props\n  const totalColumnsWidth = useMemo(\n    () =>\n      colsLayoutStyle === ColsLayoutStyle.Fixed\n        ? gridLayout.reduce((acc: number, cur: string) => acc + Number.parseInt(cur, 10), 0)\n        : '100%',\n    [colsLayoutStyle, gridLayout],\n  );\n\n  const layoutHelpers = useMemo(\n    () => ({\n      gridLayout,\n      totalColumnsWidth,\n    }),\n    [gridLayout, totalColumnsWidth],\n  );\n\n  useTableResizeCb({ virtualListRef, propsWithDefault: propsWithDefaults });\n\n  // ===========================================================================\n  // Action ref setup\n  // ===========================================================================\n  useEffect(() => {\n    if (actionRef) {\n      actionRef.current.scrollToIndex = virtualListHelpers.scrollToIndex;\n      actionRef.current.scrollToOffset = virtualListHelpers.scrollToOffset;\n    }\n  }, [actionRef, virtualListHelpers.scrollToIndex, virtualListHelpers.scrollToOffset]);\n\n  return {\n    visibleRangeRef,\n    layoutHelpers,\n    paginationHelpers,\n    visibleColumns,\n    virtualListHelpers,\n    flattenedData: paginatedData || flattenedData,\n    allDataFlattened,\n    isEmptyContent,\n    firstFocuseableColumnHeaderId,\n    virtualListRef,\n    columnHeaderRef,\n    lastSelected,\n    bodyClientWidth,\n    setBodyClientWidth,\n  };\n};\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACKvB,OAAOA,UAAS,WAAW,SAAS,cAAc;AAClD,SAAS,YAAY,6BAAyC;AAE9D,SAAS,8BAA8B;AACvC,SAAS,4BAA4B;AACrC,SAAS,2BAA2B;AACpC,SAAS,qBAAqB;AAC9B,SAAS,uBAAuB;AAChC,SAAS,wBAAwB;AAEjC,MAAM,eAAe,MAAM;AAEpB,MAAM,oBAAoB,CAAC,sBAAmF;AACnH,QAAM,EAAE,WAAW,iBAAiB,eAAe,UAAU,IAAI;AAEjE,QAAM,iBAAiB,OAA8B,IAAI;AACzD,QAAM,CAAC,iBAAiB,kBAAkB,IAAIA,OAAM,SAA0B,MAAM;AACpF,QAAM,kBAAkB,OAA8B,IAAI;AAC1D,QAAM,eAAe,OAAe,EAAE;AAKtC,QAAM,iBAAiB,uBAAuB,mBAAmB,aAAa;AAM9E,QAAM,CAAC,eAAe,gBAAgB,IAAI,qBAAqB,iBAAiB;AAEhF,QAAM,CAAC,eAAe,iBAAiB,IAAI,oBAAoB,mBAAmB,aAAa;AAE/F,QAAM,aAAa,QAAQ,OAAO,iBAAiB,eAAe,QAAQ,CAAC,eAAe,aAAa,CAAC;AAGxG,QAAM,kBAAkB,OAAc,EAAE,OAAO,GAAG,KAAK,GAAG,UAAU,IAAI,MAAM,WAAW,CAAC;AAG1F,QAAM,qBAAqB,WAAW;AAAA,IACpC,MAAM;AAAA,IACN,WAAW;AAAA,IACX,UAAU;AAAA,IACV,cAAc,gBAAgB,SAAS,sBAAsB,GAAG,UAAU;AAAA,IAC1E;AAAA,IACA,gBAAgBA,OAAM,YAAY,CAAC,UAAiB;AAClD,sBAAgB,UAAU;AAE1B,aAAO,sBAAsB,KAAK;AAAA,IACpC,GAAG,CAAC,CAAC;AAAA,EACP,CAAC;AAMD,QAAM,iBAAiB,QAAQ,MAAM,CAAC,aAAa,cAAc,WAAW,GAAG,CAAC,WAAW,cAAc,MAAM,CAAC;AAEhH,QAAM,gCAAgC,QAAQ,MAAM;AAClD,aAAS,IAAI,GAAG,IAAI,eAAe,QAAQ,KAAK;AAC9C,YAAM,SAAS,eAAe,CAAC;AAC/B,UAAI,OAAO,iBAAiB,SAAS,OAAO,OAAO,cAAc,OAAO,OAAO,iBAAiB;AAC9F;AAAA,MACF;AACA,aAAO,OAAO;AAAA,IAChB;AAAA,EACF,GAAG,CAAC,cAAc,CAAC;AAMnB,QAAM,aAAa,QAAQ,MAAM,cAAc,gBAAgB,eAAe,GAAG,CAAC,iBAAiB,cAAc,CAAC;AAGlH,QAAM,oBAAoB;AAAA,IACxB,MACE,oBAAoB,gBAAgB,QAChC,WAAW,OAAO,CAAC,KAAa,QAAgB,MAAM,OAAO,SAAS,KAAK,EAAE,GAAG,CAAC,IACjF;AAAA,IACN,CAAC,iBAAiB,UAAU;AAAA,EAC9B;AAEA,QAAM,gBAAgB;AAAA,IACpB,OAAO;AAAA,MACL;AAAA,MACA;AAAA,IACF;AAAA,IACA,CAAC,YAAY,iBAAiB;AAAA,EAChC;AAEA,mBAAiB,EAAE,gBAAgB,kBAAkB,kBAAkB,CAAC;AAKxE,YAAU,MAAM;AACd,QAAI,WAAW;AACb,gBAAU,QAAQ,gBAAgB,mBAAmB;AACrD,gBAAU,QAAQ,iBAAiB,mBAAmB;AAAA,IACxD;AAAA,EACF,GAAG,CAAC,WAAW,mBAAmB,eAAe,mBAAmB,cAAc,CAAC;AAEnF,SAAO;AAAA,IACL;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,eAAe,iBAAiB;AAAA,IAChC;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF;AACF;",
   "names": ["React"]
 }

package/dist/esm/configs/useFreezeVirtualScrollOnDrag.js

@@ -0,0 +1,24 @@
+import * as React from "react";
+import { useEffect } from "react";
+function useFreezeVirtualScrollOnDrag(containerRef, isDragging) {
+  useEffect(() => {
+    const container = containerRef.current;
+    if (!container || !isDragging) return;
+    let lastScrollTop = container.scrollTop;
+    const lockVerticalScroll = () => {
+      if (container.scrollTop !== lastScrollTop) {
+        container.scrollTop = lastScrollTop;
+      } else {
+        lastScrollTop = container.scrollTop;
+      }
+    };
+    container.addEventListener("scroll", lockVerticalScroll);
+    return () => {
+      container.removeEventListener("scroll", lockVerticalScroll);
+    };
+  }, [isDragging, containerRef]);
+}
+export {
+  useFreezeVirtualScrollOnDrag
+};
+//# sourceMappingURL=useFreezeVirtualScrollOnDrag.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../src/configs/useFreezeVirtualScrollOnDrag.tsx"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable consistent-return */\nimport type React from 'react';\nimport { useEffect } from 'react';\nexport function useFreezeVirtualScrollOnDrag(containerRef: React.RefObject<HTMLElement>, isDragging: boolean) {\n  useEffect(() => {\n    const container = containerRef.current;\n    if (!container || !isDragging) return;\n\n    let lastScrollTop = container.scrollTop;\n\n    const lockVerticalScroll = () => {\n      if (container.scrollTop !== lastScrollTop) {\n        container.scrollTop = lastScrollTop;\n      } else {\n        lastScrollTop = container.scrollTop;\n      }\n    };\n\n    container.addEventListener('scroll', lockVerticalScroll);\n\n    return () => {\n      container.removeEventListener('scroll', lockVerticalScroll);\n    };\n  }, [isDragging, containerRef]);\n}\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACEvB,SAAS,iBAAiB;AACnB,SAAS,6BAA6B,cAA4C,YAAqB;AAC5G,YAAU,MAAM;AACd,UAAM,YAAY,aAAa;AAC/B,QAAI,CAAC,aAAa,CAAC,WAAY;AAE/B,QAAI,gBAAgB,UAAU;AAE9B,UAAM,qBAAqB,MAAM;AAC/B,UAAI,UAAU,cAAc,eAAe;AACzC,kBAAU,YAAY;AAAA,MACxB,OAAO;AACL,wBAAgB,UAAU;AAAA,MAC5B;AAAA,IACF;AAEA,cAAU,iBAAiB,UAAU,kBAAkB;AAEvD,WAAO,MAAM;AACX,gBAAU,oBAAoB,UAAU,kBAAkB;AAAA,IAC5D;AAAA,EACF,GAAG,CAAC,YAAY,YAAY,CAAC;AAC/B;",
+  "names": []
+}