@lightsparkdev/ui 1.1.10 → 1.1.12

package/dist/{chunk-PS7LUKAF.js → chunk-ABXDFBZP.js}

@@ -1,95 +1,108 @@
+import {
+  Table
+} from "./chunk-WUV4EYLL.js";
+import {
+  PillFilter
+} from "./chunk-YEI6JAWD.js";
 import {
   Body
-} from "./chunk-6SGHAVWG.js";
+} from "./chunk-DN2FKFOA.js";
 import {
-  Table
-} from "./chunk-ZVVEPCBU.js";
+  DateFilter,
+  getDefaultDateFilterState
+} from "./chunk-WRUYG6BM.js";
 import {
   EnumFilter,
   getDefaultEnumFilterState,
   isEnumFilterState
-} from "./chunk-EIKXY7AD.js";
+} from "./chunk-Y56BO6PQ.js";
 import {
   IdFilter,
   getDefaultIdFilterState,
   isIdFilterState
-} from "./chunk-3GTTFRUO.js";
+} from "./chunk-WO6S3LT6.js";
 import {
   StringFilter,
   getDefaultStringFilterState,
   isStringFilterState
-} from "./chunk-5AB6NTYU.js";
+} from "./chunk-N4RQOGUG.js";
 import {
   BooleanFilter,
   getDefaultBooleanFilterState
-} from "./chunk-GFAX5WLZ.js";
+} from "./chunk-AJNBTDBR.js";
 import {
   CurrencyFilter,
   getDefaultCurrencyFilterState
-} from "./chunk-SEL2XGBO.js";
-import {
-  DateFilter,
-  getDefaultDateFilterState
-} from "./chunk-2AVXNAAL.js";
+} from "./chunk-TY6ADDBU.js";
 import {
   LabelModerate
-} from "./chunk-25AAHDUW.js";
+} from "./chunk-BV33EFPE.js";
 import {
   Label
-} from "./chunk-IT6Y66F5.js";
+} from "./chunk-L4HEQZN5.js";
 import {
   Modal
-} from "./chunk-CSY4CGNN.js";
+} from "./chunk-QU74MMCB.js";
 import {
   Dropdown
-} from "./chunk-C4X6HNCA.js";
+} from "./chunk-I6KZ6OZC.js";
 import {
-  TextIconAligner
-} from "./chunk-TH42CNH3.js";
+  Flex
+} from "./chunk-GQPSXKNA.js";
 import {
   CardPageFullWidth
-} from "./chunk-TXJQWZCR.js";
+} from "./chunk-LUFTJNU7.js";
 import {
   StyledButtonRow
-} from "./chunk-VHHLWRJS.js";
-import {
-  Spacing
-} from "./chunk-E5DUKMCU.js";
+} from "./chunk-TT7XB7BU.js";
 import {
   Button,
   StyledButton
-} from "./chunk-SIPHI6JZ.js";
+} from "./chunk-LTHYR4CT.js";
 import {
   z
 } from "./chunk-55OQPFLF.js";
+import {
+  Spacing
+} from "./chunk-E5DUKMCU.js";
+import {
+  TextIconAligner
+} from "./chunk-HVI5KOQY.js";
 import {
   Icon
-} from "./chunk-DMPXNHDT.js";
+} from "./chunk-6UZRKYFG.js";
 import {
   standardBorderRadius,
   standardContentInset
-} from "./chunk-HGZGGJQB.js";
+} from "./chunk-F5UEJLZY.js";
 import {
   getColor,
   themeOr,
   themeOrWithKey
-} from "./chunk-VAH342U2.js";
+} from "./chunk-EE47JMIS.js";
 import {
   bp,
   useBreakpoints
 } from "./chunk-JSGRNWSB.js";
 import {
   colors
-} from "./chunk-MIIIUXV6.js";
+} from "./chunk-XT5NXF55.js";
 import {
   __async,
   __spreadProps,
   __spreadValues
-} from "./chunk-W7FAWX6T.js";
+} from "./chunk-CWMXXUWU.js";
 
 // src/components/DataManagerTable/DataManagerTable.tsx
 import styled from "@emotion/styled";
-import { Fragment, useEffect, useState } from "react";
+import {
+  Fragment,
+  useEffect,
+  useState
+} from "react";
+import { css } from "@emotion/react";
+import { CurrencyUnit, ensureArray } from "@lightsparkdev/core";
+import { useSearchParams } from "react-router-dom";
 import { Fragment as Fragment2, jsx, jsxs } from "@emotion/react/jsx-runtime";
 function getDefaultFilterState(filter) {
   switch (filter.type) {
@@ -118,8 +131,149 @@ function initialFilterState(filters) {
   });
   return state;
 }
+function saveFiltersToURL(searchParams, filters, filterStates, currentPage) {
+  const newSearchParams = new URLSearchParams(searchParams);
+  filters.forEach((filter) => {
+    newSearchParams.delete(String(filter.accessorKey));
+  });
+  filters.forEach((filter) => {
+    var _a, _b;
+    const filterState = filterStates[filter.accessorKey];
+    if (filterState && filterState.isApplied) {
+      if (filter.type === "string" /* STRING */ || filter.type === "enum" /* ENUM */ || filter.type === "id" /* ID */) {
+        const appliedValues = filterState.appliedValues;
+        if (appliedValues && appliedValues.length > 0) {
+          newSearchParams.set(
+            String(filter.accessorKey),
+            appliedValues.join(",")
+          );
+        }
+      } else if (filter.type === "boolean" /* BOOLEAN */) {
+        const appliedValue = filterState.value;
+        if (appliedValue !== void 0) {
+          newSearchParams.set(String(filter.accessorKey), String(appliedValue));
+        }
+      } else if (filter.type === "date" /* DATE */) {
+        const dateFilter = filterState;
+        if (dateFilter.start || dateFilter.end) {
+          const startStr = dateFilter.start ? dateFilter.start.toISOString() : "";
+          const endStr = dateFilter.end ? dateFilter.end.toISOString() : "";
+          newSearchParams.set(
+            String(filter.accessorKey),
+            `${startStr},${endStr}`
+          );
+        }
+      } else if (filter.type === "currency" /* CURRENCY */) {
+        const currencyFilter = filterState;
+        if (currencyFilter.min_amount || currencyFilter.max_amount) {
+          const minValue = (_a = currencyFilter.min_amount) == null ? void 0 : _a.value;
+          const maxValue = (_b = currencyFilter.max_amount) == null ? void 0 : _b.value;
+          if (minValue !== void 0 || maxValue !== void 0) {
+            const currencyValue = minValue !== void 0 && maxValue !== void 0 ? `${minValue}-${maxValue}` : minValue !== void 0 ? `>${minValue}` : `<${maxValue}`;
+            newSearchParams.set(String(filter.accessorKey), currencyValue);
+          }
+        }
+      }
+    }
+  });
+  return newSearchParams;
+}
+function loadFiltersFromURL(searchParams, filters, currentFilterStates) {
+  const newFilterStates = __spreadValues({}, currentFilterStates);
+  filters.forEach((filter) => {
+    const paramValue = searchParams.get(String(filter.accessorKey));
+    if (paramValue !== null && paramValue !== void 0 && paramValue !== "") {
+      if (filter.type === "string" /* STRING */) {
+        const stringFilter = newFilterStates[filter.accessorKey];
+        const appliedValues = paramValue.includes(",") ? paramValue.split(",").filter((v) => v.trim() !== "") : [paramValue];
+        newFilterStates[filter.accessorKey] = __spreadProps(__spreadValues({}, stringFilter), {
+          appliedValues,
+          isApplied: true
+        });
+      } else if (filter.type === "enum" /* ENUM */) {
+        const enumFilter = newFilterStates[filter.accessorKey];
+        const appliedValues = paramValue.includes(",") ? paramValue.split(",").filter((v) => v.trim() !== "") : [paramValue];
+        newFilterStates[filter.accessorKey] = __spreadProps(__spreadValues({}, enumFilter), {
+          appliedValues,
+          isApplied: true
+        });
+      } else if (filter.type === "id" /* ID */) {
+        const idFilter = newFilterStates[filter.accessorKey];
+        const appliedValues = paramValue.includes(",") ? paramValue.split(",").filter((v) => v.trim() !== "") : [paramValue];
+        newFilterStates[filter.accessorKey] = __spreadProps(__spreadValues({}, idFilter), {
+          appliedValues,
+          isApplied: true
+        });
+      } else if (filter.type === "boolean" /* BOOLEAN */) {
+        const booleanFilter = newFilterStates[filter.accessorKey];
+        const boolValue = paramValue === "true";
+        newFilterStates[filter.accessorKey] = __spreadProps(__spreadValues({}, booleanFilter), {
+          value: boolValue,
+          isApplied: true
+        });
+      } else if (filter.type === "date" /* DATE */) {
+        const dateFilter = newFilterStates[filter.accessorKey];
+        if (paramValue.includes(",")) {
+          const [startStr, endStr] = paramValue.split(",");
+          const startDate = startStr ? new Date(startStr) : null;
+          const endDate = endStr ? new Date(endStr) : null;
+          if (startDate && !isNaN(startDate.getTime()) || endDate && !isNaN(endDate.getTime())) {
+            newFilterStates[filter.accessorKey] = __spreadProps(__spreadValues({}, dateFilter), {
+              start: startDate,
+              end: endDate,
+              isApplied: true
+            });
+          }
+        } else {
+          const dateValue = new Date(paramValue);
+          if (!isNaN(dateValue.getTime())) {
+            newFilterStates[filter.accessorKey] = __spreadProps(__spreadValues({}, dateFilter), {
+              start: dateValue,
+              end: null,
+              isApplied: true
+            });
+          }
+        }
+      } else if (filter.type === "currency" /* CURRENCY */) {
+        const currencyFilter = newFilterStates[filter.accessorKey];
+        if (paramValue.includes("-")) {
+          const [min, max] = paramValue.split("-").map((v) => parseInt(v));
+          if (!isNaN(min) && !isNaN(max)) {
+            newFilterStates[filter.accessorKey] = __spreadProps(__spreadValues({}, currencyFilter), {
+              min_amount: { value: min, unit: CurrencyUnit.SATOSHI },
+              max_amount: { value: max, unit: CurrencyUnit.SATOSHI },
+              isApplied: true
+            });
+          }
+        } else if (paramValue.startsWith(">")) {
+          const min = parseInt(paramValue.substring(1));
+          if (!isNaN(min)) {
+            newFilterStates[filter.accessorKey] = __spreadProps(__spreadValues({}, currencyFilter), {
+              min_amount: { value: min, unit: CurrencyUnit.SATOSHI },
+              max_amount: null,
+              isApplied: true
+            });
+          }
+        } else if (paramValue.startsWith("<")) {
+          const max = parseInt(paramValue.substring(1));
+          if (!isNaN(max)) {
+            newFilterStates[filter.accessorKey] = __spreadProps(__spreadValues({}, currencyFilter), {
+              min_amount: null,
+              max_amount: { value: max, unit: CurrencyUnit.SATOSHI },
+              isApplied: true
+            });
+          }
+        }
+      }
+    } else {
+      newFilterStates[filter.accessorKey] = getDefaultFilterState(filter);
+    }
+  });
+  return newFilterStates;
+}
 function DataManagerTable(props) {
-  var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j;
+  var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l;
+  const [searchParams, setSearchParams] = useSearchParams();
   const isCardPageFullWidth = typeof props.cardPageFullWidth === "boolean" ? props.cardPageFullWidth : true;
   const cardPageMt = typeof props.cardPageMt === "undefined" ? 24 : props.cardPageMt;
   const showPaginationPreviousNext = typeof ((_a = props.paginationDisplayOptions) == null ? void 0 : _a.showPaginationPreviousNext) === "boolean" ? props.paginationDisplayOptions.showPaginationPreviousNext : true;
@@ -140,10 +294,51 @@ function DataManagerTable(props) {
   const [fetchVariables, setFetchVariables] = useState(
     ((_d = props.filterOptions) == null ? void 0 : _d.initialQueryVariables) || {}
   );
+  const DropdownComponent = ((_e = props.customComponents) == null ? void 0 : _e.dropdownComponent) || Dropdown;
   const isSm = breakPoint.isSm();
   useEffect(() => {
     setIsLoading(Boolean(props.loading));
   }, [props.loading]);
+  useEffect(() => {
+    if (!props.filterOptions || !props.enableURLFilters) return;
+    const { filters: filters2, getFilterQueryVariables } = props.filterOptions;
+    const newFilterStates = loadFiltersFromURL(
+      searchParams,
+      filters2,
+      filterStates
+    );
+    setFilterStates(newFilterStates);
+    const newFetchVariables = getFilterQueryVariables(
+      filters2,
+      newFilterStates,
+      pageSize
+    );
+    setFetchVariables(newFetchVariables);
+    const numFiltersApplied2 = Object.values(newFilterStates).reduce(
+      (acc, state) => {
+        return state.isApplied ? acc + 1 : acc;
+      },
+      0
+    );
+    setNumFiltersApplied(numFiltersApplied2);
+    if (props.filterOptions && Object.values(newFilterStates).some((state) => state.isApplied)) {
+      setIsLoading(true);
+      setPageCursorState((prevState) => __spreadProps(__spreadValues({}, prevState), {
+        startResult: void 0
+      }));
+      props.filterOptions.refetch(newFetchVariables).then(() => {
+        setIsLoading(false);
+      }).catch((e) => {
+        setIsLoading(false);
+        throw e;
+      });
+    }
+  }, [searchParams, props.filterOptions, pageSize]);
+  useEffect(() => {
+    if (props.refetchOnPropsChange && props.filterOptions) {
+      void handleApplyFilters(filterStates, props.filterOptions, pageSize);
+    }
+  }, [...props.refetchOnPropsChange || []]);
   useEffect(() => {
     if (!props.nextPageCursor) {
       return;
@@ -180,7 +375,7 @@ function DataManagerTable(props) {
     };
   }
   const handleApplyFilters = (filterStates2, filterOptions, pageSize2) => __async(this, null, function* () {
-    var _a2, _b2, _c2, _d2;
+    var _a2;
     const { filters: filters2, refetch, getFilterQueryVariables } = filterOptions;
     const appliedFilterStates = __spreadValues({}, filterStates2);
     const filterStatesArray = Object.values(appliedFilterStates);
@@ -197,13 +392,10 @@ function DataManagerTable(props) {
           appliedFilterStates[filter.accessorKey] = validResult;
           if (isIdFilterState(filterState)) {
             const appliedValues = validResult.appliedValues;
-            const isApplied = !!(appliedValues == null ? void 0 : appliedValues.length);
             updateFilterState(filter)(__spreadProps(__spreadValues({}, filterStates2[filter.accessorKey]), {
               value: "",
-              appliedValues: appliedValues ? [...appliedValues] : [],
-              isApplied
+              appliedValues: appliedValues ? [...appliedValues] : []
             }));
-            filterState.isApplied = isApplied;
           }
         } else {
           filterState.errorMessage = filter.errorMessage || "Error validating input";
@@ -231,27 +423,19 @@ function DataManagerTable(props) {
           updatedAppliedValues.push(value);
           const newFilterState = __spreadProps(__spreadValues({}, filterStates2[filter.accessorKey]), {
             value: "",
-            appliedValues: updatedAppliedValues,
-            isApplied: !!updatedAppliedValues.length
+            appliedValues: updatedAppliedValues
           });
           appliedFilterStates[filter.accessorKey] = newFilterState;
           updateFilterState(filter)(newFilterState);
-        } else if (((_b2 = filterState.appliedValues) == null ? void 0 : _b2.length) === 0) {
-          updateFilterState(filter)(getDefaultStringFilterState());
-          filterState.isApplied = false;
         }
       } else if (isEnumFilterState(filterState)) {
         if (filterState.value) {
           const newFilterState = __spreadProps(__spreadValues({}, filterStates2[filter.accessorKey]), {
             value: "",
-            appliedValues: filterState.appliedValues,
-            isApplied: !!((_c2 = filterState.appliedValues) == null ? void 0 : _c2.length)
+            appliedValues: filterState.appliedValues
           });
           appliedFilterStates[filter.accessorKey] = newFilterState;
           updateFilterState(filter)(newFilterState);
-        } else if (((_d2 = filterState.appliedValues) == null ? void 0 : _d2.length) === 0) {
-          updateFilterState(filter)(getDefaultEnumFilterState());
-          filterState.isApplied = false;
         }
       }
     }
@@ -267,6 +451,15 @@ function DataManagerTable(props) {
       pageSize2
     );
     setFetchVariables(newFetchVariables);
+    if (props.enableURLFilters) {
+      const newSearchParams = saveFiltersToURL(
+        searchParams,
+        filters2,
+        appliedFilterStates,
+        currentPage
+      );
+      setSearchParams(newSearchParams);
+    }
     setPageCursorState((prevState) => __spreadProps(__spreadValues({}, prevState), {
       startResult: void 0
     }));
@@ -491,11 +684,11 @@ function DataManagerTable(props) {
     icon: {
       name: "Sort"
     },
-    text: !isFilterButtonSmall ? `Filter${numFiltersApplied > 0 ? ` | ${numFiltersApplied}` : ""}` : void 0
+    text: !isFilterButtonSmall ? `Filter${numFiltersApplied > 0 && props.filterEditorStyle !== "pills" ? ` | ${numFiltersApplied}` : ""}` : void 0
   };
   if (props.filterOptions) {
-    const FilterContainerComponent = ((_e = props.customComponents) == null ? void 0 : _e.filterContainerComponent) || DataManagerTableFilterContainer;
-    filters = /* @__PURE__ */ jsx(FilterContainerComponent, { children: isSm ? /* @__PURE__ */ jsxs(Fragment, { children: [
+    const FilterContainerComponent = ((_f = props.customComponents) == null ? void 0 : _f.filterContainerComponent) || DataManagerTableFilterContainer;
+    const defaultFilterContent = /* @__PURE__ */ jsx(Fragment2, { children: isSm ? /* @__PURE__ */ jsxs(Fragment, { children: [
       /* @__PURE__ */ jsx(
         Button,
         __spreadProps(__spreadValues(__spreadValues({}, commonButtonProps), props.filterButtonProps), {
@@ -512,7 +705,7 @@ function DataManagerTable(props) {
         }
       )
     ] }) : /* @__PURE__ */ jsx(
-      Dropdown,
+      DropdownComponent,
       {
         borderRadius: 12,
         maxDropdownItemsWidth: 400,
@@ -528,9 +721,108 @@ function DataManagerTable(props) {
         align: props.filterDropdownAlign || "right"
       }
     ) });
+    const pillFilters = props.filterOptions ? props.filterOptions.filters.filter((filter) => {
+      var _a2;
+      return (_a2 = filterStates[filter.accessorKey]) == null ? void 0 : _a2.isApplied;
+    }).map((filter) => {
+      var _a2, _b2, _c2;
+      return /* @__PURE__ */ jsx(
+        PillFilter,
+        {
+          filter,
+          state: filterStates[filter.accessorKey],
+          onDelete: () => {
+            setFilterStates((prevStates) => {
+              const newStates = __spreadValues({}, prevStates);
+              newStates[filter.accessorKey] = getDefaultFilterState(filter);
+              void handleApplyFilters(
+                newStates,
+                props.filterOptions,
+                pageSize
+              );
+              return newStates;
+            });
+          },
+          customComponents: {
+            customDropdown: (_a2 = props.customComponents) == null ? void 0 : _a2.dropdownComponent,
+            customTextInput: (_b2 = props.customComponents) == null ? void 0 : _b2.textInputComponent,
+            customCalendarCss: (_c2 = props.customComponents) == null ? void 0 : _c2.customCalendarCss
+          },
+          onUpdateFilter: (newFilterState) => {
+            setFilterStates((prevStates) => {
+              const newStates = __spreadValues({}, prevStates);
+              newStates[filter.accessorKey] = newFilterState;
+              void handleApplyFilters(
+                newStates,
+                props.filterOptions,
+                pageSize
+              );
+              setShowFilterEditor(false);
+              return newStates;
+            });
+          }
+        },
+        filter.label
+      );
+    }) : [];
+    const pillsFilterContent = /* @__PURE__ */ jsxs(PillFiltersContainer, { children: [
+      /* @__PURE__ */ jsxs(Flex, { gap: 4, align: "center", flexWrap: "wrap", children: [
+        pillFilters,
+        /* @__PURE__ */ jsx(
+          DropdownComponent,
+          {
+            borderRadius: 12,
+            maxDropdownItemsWidth: 200,
+            dropdownItems: getPillDropdownItems({
+              filterOptions: props.filterOptions,
+              filterStates,
+              setFilterStates,
+              handleApplyFilters,
+              pageSize,
+              setShowFilterEditor,
+              customDropdownComponent: (_g = props.customComponents) == null ? void 0 : _g.dropdownComponent
+            }),
+            isOpen: showFilterEditor,
+            onOpen: () => {
+              setShowFilterEditor(true);
+            },
+            onClose: () => {
+              setShowFilterEditor(false);
+            },
+            button: __spreadProps(__spreadValues(__spreadValues({}, commonButtonProps), props.filterButtonProps), {
+              iconSide: "left"
+            }),
+            align: props.filterDropdownAlign || "right"
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsx(Flex, { children: numFiltersApplied > 0 && /* @__PURE__ */ jsx(
+        Button,
+        __spreadProps(__spreadValues(__spreadValues({}, commonButtonProps), props.filterButtonProps), {
+          icon: {
+            name: "CentralCrossSmall",
+            width: 16,
+            color: "text",
+            iconProps: {
+              strokeWidth: 3
+            }
+          },
+          text: "Clear",
+          typography: {
+            color: "secondary"
+          },
+          onClick: handleClearFilters,
+          kind: "transparent"
+        })
+      ) })
+    ] });
+    filters = /* @__PURE__ */ jsxs(FilterContainerComponent, { children: [
+      (!props.filterEditorStyle || props.filterEditorStyle === "default") && defaultFilterContent,
+      props.filterEditorStyle === "pills" && pillsFilterContent
+    ] });
   }
   let showMoreDropdown;
-  if (((_f = props.pageSizes) == null ? void 0 : _f.length) > 1) {
+  if (((_h = props.pageSizes) == null ? void 0 : _h.length) > 1) {
     showMoreDropdown = /* @__PURE__ */ jsx(
       Dropdown,
       {
@@ -589,9 +881,9 @@ function DataManagerTable(props) {
   } else if (props.resultCount) {
     const startResult = pageCursorState.startResult || 1;
     const endResult = Math.min(props.resultCount, startResult + pageSize - 1);
-    const isFullCount = (_g = props.isFullCount) != null ? _g : true;
+    const isFullCount = (_i = props.isFullCount) != null ? _i : true;
     const countString = isFullCount ? props.resultCount : props.resultCount + "+";
-    const resultsString = ((_h = props.paginationDisplayOptions) == null ? void 0 : _h.showPageNumberButtons) ? /* @__PURE__ */ jsx("div", {}) : /* @__PURE__ */ jsxs("div", { children: [
+    const resultsString = ((_j = props.paginationDisplayOptions) == null ? void 0 : _j.showPageNumberButtons) ? /* @__PURE__ */ jsx("div", {}) : /* @__PURE__ */ jsxs("div", { children: [
       /* @__PURE__ */ jsx(Label, { children: "Viewing " }),
       /* @__PURE__ */ jsx(LabelModerate, { children: `${startResult}-${endResult}` }),
       /* @__PURE__ */ jsx(Label, { children: " of " }),
@@ -604,7 +896,7 @@ function DataManagerTable(props) {
       { length: Math.ceil(props.resultCount / pageSize) },
       (_, i) => i
     );
-    const pageNumberButtons = ((_i = props.paginationDisplayOptions) == null ? void 0 : _i.showPageNumberButtons) ? /* @__PURE__ */ jsxs(PageNumberPaginationButtonsContainer, { children: [
+    const pageNumberButtons = ((_k = props.paginationDisplayOptions) == null ? void 0 : _k.showPageNumberButtons) ? /* @__PURE__ */ jsxs(PageNumberPaginationButtonsContainer, { children: [
       /* @__PURE__ */ jsx(
         Button,
         {
@@ -713,7 +1005,7 @@ function DataManagerTable(props) {
       ] })
     ] });
   }
-  const DataManagerTableHeaderComponent = ((_j = props.customComponents) == null ? void 0 : _j.dataManagerTableHeaderComponent) || DataManagerTableHeader;
+  const DataManagerTableHeaderComponent = ((_l = props.customComponents) == null ? void 0 : _l.dataManagerTableHeaderComponent) || DataManagerTableHeader;
   const content = /* @__PURE__ */ jsxs(Fragment2, { children: [
     props.showHeader && /* @__PURE__ */ jsxs(DataManagerTableHeaderComponent, { children: [
       props.header,
@@ -722,10 +1014,141 @@ function DataManagerTable(props) {
     /* @__PURE__ */ jsx(Table, __spreadProps(__spreadValues({}, props), { loading: isLoading })),
     footer
   ] });
-  return /* @__PURE__ */ jsx(StyledDataManagerTable, { children: isCardPageFullWidth ? /* @__PURE__ */ jsx(CardPageFullWidth, { css: { marginTop: `${cardPageMt}px` }, children: content }) : content });
+  return /* @__PURE__ */ jsx(StyledDataManagerTable, { fullHeight: props.fullHeight, children: isCardPageFullWidth ? /* @__PURE__ */ jsx(CardPageFullWidth, { css: { marginTop: `${cardPageMt}px` }, children: content }) : content });
+}
+function getPillDropdownItems({
+  filterOptions,
+  filterStates,
+  setFilterStates,
+  handleApplyFilters,
+  pageSize,
+  setShowFilterEditor,
+  customDropdownComponent
+}) {
+  const getDropdownItemForFilter = (filter) => {
+    let filterSubDropdownOptions = [];
+    if (filter.type === "enum" /* ENUM */) {
+      filterSubDropdownOptions = filter.enumValues.map((option) => ({
+        label: option.label,
+        onClick: () => {
+          const optionValues = ensureArray(option.value);
+          const state = filterStates[filter.accessorKey];
+          let updatedAppliedValues = [];
+          if (filter.isMulti) {
+            updatedAppliedValues = state.appliedValues ? [
+              ...state.appliedValues.filter(
+                (appliedValue) => appliedValue !== option.value
+              ),
+              ...optionValues
+            ] : [...optionValues];
+          } else {
+            updatedAppliedValues = [...optionValues];
+          }
+          setFilterStates((prevStates) => {
+            const newStates = __spreadValues({}, prevStates);
+            newStates[filter.accessorKey] = __spreadProps(__spreadValues({}, getDefaultFilterState(filter)), {
+              value: updatedAppliedValues.join(", "),
+              isApplied: true,
+              appliedValues: updatedAppliedValues
+            });
+            void handleApplyFilters(newStates, filterOptions, pageSize);
+            setShowFilterEditor(false);
+            return newStates;
+          });
+        }
+      }));
+    }
+    return {
+      label: filter.label,
+      getIcon: ({ dropdownItem, theme }) => ({
+        name: "CentralChevronRightSm",
+        width: 18,
+        color: theme.secondary
+      }),
+      iconSide: "right",
+      onClick: () => {
+        if (filter.type === "string" /* STRING */) {
+          const state = filterStates[filter.accessorKey];
+          let updatedAppliedValues = [];
+          updatedAppliedValues = filter.isMulti && state.appliedValues ? [
+            ...state.appliedValues.filter(
+              (appliedValue) => appliedValue !== filter.value
+            )
+          ] : state.appliedValues ? [...state.appliedValues] : [];
+          setFilterStates((prevStates) => {
+            const newStates = __spreadValues({}, prevStates);
+            newStates[filter.accessorKey] = __spreadProps(__spreadValues({}, getDefaultFilterState(filter)), {
+              value: updatedAppliedValues.join(", "),
+              isApplied: true,
+              appliedValues: updatedAppliedValues
+            });
+            void handleApplyFilters(newStates, filterOptions, pageSize);
+            setShowFilterEditor(false);
+            return newStates;
+          });
+        } else if (filter.type === "boolean" /* BOOLEAN */) {
+          setFilterStates((prevStates) => {
+            const newStates = __spreadValues({}, prevStates);
+            newStates[filter.accessorKey] = __spreadProps(__spreadValues({}, getDefaultFilterState(filter)), {
+              value: filter.value,
+              isApplied: true
+            });
+            void handleApplyFilters(newStates, filterOptions, pageSize);
+            setShowFilterEditor(false);
+            return newStates;
+          });
+        } else if (filter.type === "id" /* ID */) {
+          const state = filterStates[filter.accessorKey];
+          let updatedAppliedValues = [];
+          updatedAppliedValues = filter.isMulti && state.appliedValues ? [
+            ...state.appliedValues.filter(
+              (appliedValue) => appliedValue !== filter.value
+            )
+          ] : state.appliedValues ? [...state.appliedValues] : [];
+          setFilterStates((prevStates) => {
+            const newStates = __spreadValues({}, prevStates);
+            newStates[filter.accessorKey] = __spreadProps(__spreadValues({}, getDefaultFilterState(filter)), {
+              value: updatedAppliedValues.join(", "),
+              isApplied: true,
+              appliedValues: updatedAppliedValues
+            });
+            void handleApplyFilters(newStates, filterOptions, pageSize);
+            setShowFilterEditor(false);
+            return newStates;
+          });
+        } else if (filter.type === "currency" /* CURRENCY */) {
+        } else if (filter.type === "date" /* DATE */) {
+          setFilterStates((prevStates) => {
+            const newStates = __spreadValues({}, prevStates);
+            newStates[filter.accessorKey] = __spreadProps(__spreadValues({}, getDefaultFilterState(filter)), {
+              preset: "Custom" /* Custom */,
+              start: null,
+              end: null,
+              isApplied: true
+            });
+            void handleApplyFilters(newStates, filterOptions, pageSize);
+            setShowFilterEditor(false);
+            return newStates;
+          });
+        }
+      },
+      subDropdown: filterSubDropdownOptions.length > 0 ? {
+        subItems: filterSubDropdownOptions,
+        customDropdown: customDropdownComponent
+      } : void 0
+    };
+  };
+  return filterOptions.filters.map(
+    (filter) => getDropdownItemForFilter(filter)
+  );
 }
 var StyledDataManagerTable = styled.div`
   width: 100%;
+  display: flex;
+  flex-direction: column;
+  ${({ fullHeight }) => fullHeight && css`
+      flex-grow: 1;
+    `}
 `;
 var commonPadding = `
   ${bp.lg(`
@@ -842,6 +1265,14 @@ var FilterContentFooterRight = styled.div`
   display: flex;
   gap: ${Spacing.px.xs};
 `;
+var PillFiltersContainer = styled.div`
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: space-between;
+  width: 100%;
+  gap: ${Spacing.px["2xs"]};
+`;
 
 export {
   DataManagerTable