@okta/odyssey-react-mui 1.15.9 → 1.20.0

package/dist/labs/DataComponents/tableConstants.js

@@ -0,0 +1,146 @@
+/*!
+ * Copyright (c) 2024-present, Okta, Inc. and/or its affiliates. All rights reserved.
+ * The Okta software accompanied by this notice is provided pursuant to the Apache License, Version 2.0 (the "License.")
+ *
+ * You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0.
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ *
+ * See the License for the specific language governing permissions and limitations under the License.
+ */
+
+import styled from "@emotion/styled";
+import { Box } from "../../Box.js";
+import { DragIndicatorIcon } from "../../icons.generated/index.js";
+import { jsx as _jsx } from "react/jsx-runtime";
+export const dataTableImmutableSettings = {
+  enableColumnActions: false,
+  enableDensityToggle: false,
+  enableExpandAll: false,
+  enableFilters: false,
+  enableFullScreenToggle: false,
+  enableGlobalFilter: false,
+  enableHiding: false,
+  enablePagination: false,
+  layoutMode: "grid-no-grow",
+  manualFiltering: true,
+  manualSorting: true,
+  muiTablePaperProps: {
+    elevation: 0,
+    sx: {
+      overflow: "visible"
+    }
+  },
+  positionActionsColumn: "last",
+  rowVirtualizerOptions: {
+    overscan: 4
+  },
+  selectAllMode: "all"
+};
+export const displayColumnDefOptions = {
+  "mrt-row-actions": {
+    header: "",
+    grow: true,
+    muiTableBodyCellProps: {
+      align: "right",
+      sx: {
+        overflow: "visible",
+        width: "unset"
+      },
+      className: "ods-actions-cell"
+    },
+    muiTableHeadCellProps: {
+      align: "right",
+      sx: {
+        width: "unset"
+      },
+      className: "ods-actions-cell"
+    }
+  },
+  "mrt-row-drag": {
+    header: "",
+    muiTableBodyCellProps: {
+      sx: {
+        minWidth: 0,
+        width: "auto"
+      },
+      className: "ods-drag-handle"
+    },
+    muiTableHeadCellProps: {
+      sx: {
+        minWidth: 0,
+        width: "auto"
+      },
+      children: _jsx(Box, {
+        sx: {
+          marginInline: "-0.1rem"
+        },
+        children: _jsx(DragIndicatorIcon, {
+          sx: {
+            marginInline: 1,
+            opacity: 0
+          }
+        })
+      })
+    }
+  },
+  "mrt-row-select": {
+    muiTableHeadCellProps: {
+      padding: "checkbox"
+    },
+    muiTableBodyCellProps: {
+      padding: "checkbox"
+    }
+  },
+  "mrt-row-expand": {
+    header: "",
+    muiTableBodyCellProps: {
+      sx: {
+        overflow: "visible"
+      }
+    }
+  }
+};
+export const ScrollableTableContainer = styled("div", {
+  shouldForwardProp: prop => prop !== "odysseyDesignTokens" && prop !== "isScrollableStart" && prop !== "isScrollableEnd"
+})(({
+  odysseyDesignTokens,
+  isScrollableStart,
+  isScrollableEnd
+}) => ({
+  marginBlockEnd: odysseyDesignTokens.Spacing4,
+  position: "relative",
+  borderInlineStartColor: isScrollableStart ? odysseyDesignTokens.HueNeutral200 : "transparent",
+  borderInlineStartStyle: "solid",
+  borderInlineStartWidth: odysseyDesignTokens.BorderWidthMain,
+  "::before": {
+    background: "linear-gradient(-90deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.33) 50%, rgba(0, 0, 0, 1) 100%)",
+    content: '""',
+    opacity: isScrollableStart ? "0.075" : "0",
+    pointerEvents: "none",
+    position: "absolute",
+    top: 0,
+    left: 0,
+    bottom: 0,
+    width: odysseyDesignTokens.Spacing6,
+    zIndex: 100,
+    transition: `opacity ${odysseyDesignTokens.TransitionDurationMain} ${odysseyDesignTokens.TransitionTimingMain}`
+  },
+  borderInlineEndColor: isScrollableEnd ? odysseyDesignTokens.HueNeutral200 : "transparent",
+  borderInlineEndStyle: "solid",
+  borderInlineEndWidth: odysseyDesignTokens.BorderWidthMain,
+  "::after": {
+    background: "linear-gradient(90deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.33) 50%, rgba(0, 0, 0, 1) 100%)",
+    content: '""',
+    opacity: isScrollableEnd ? "0.075" : "0",
+    pointerEvents: "none",
+    position: "absolute",
+    top: 0,
+    right: 0,
+    bottom: 0,
+    width: odysseyDesignTokens.Spacing6,
+    transition: `opacity ${odysseyDesignTokens.TransitionDurationMain} ${odysseyDesignTokens.TransitionTimingMain}`
+  }
+}));
+//# sourceMappingURL=tableConstants.js.map

package/dist/labs/DataComponents/tableConstants.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tableConstants.js","names":["styled","Box","DragIndicatorIcon","jsx","_jsx","dataTableImmutableSettings","enableColumnActions","enableDensityToggle","enableExpandAll","enableFilters","enableFullScreenToggle","enableGlobalFilter","enableHiding","enablePagination","layoutMode","manualFiltering","manualSorting","muiTablePaperProps","elevation","sx","overflow","positionActionsColumn","rowVirtualizerOptions","overscan","selectAllMode","displayColumnDefOptions","header","grow","muiTableBodyCellProps","align","width","className","muiTableHeadCellProps","minWidth","children","marginInline","opacity","padding","ScrollableTableContainer","shouldForwardProp","prop","odysseyDesignTokens","isScrollableStart","isScrollableEnd","marginBlockEnd","Spacing4","position","borderInlineStartColor","HueNeutral200","borderInlineStartStyle","borderInlineStartWidth","BorderWidthMain","background","content","pointerEvents","top","left","bottom","Spacing6","zIndex","transition","TransitionDurationMain","TransitionTimingMain","borderInlineEndColor","borderInlineEndStyle","borderInlineEndWidth","right"],"sources":["../../../src/labs/DataComponents/tableConstants.tsx"],"sourcesContent":["/*!\n * Copyright (c) 2024-present, Okta, Inc. and/or its affiliates. All rights reserved.\n * The Okta software accompanied by this notice is provided pursuant to the Apache License, Version 2.0 (the \"License.\")\n *\n * You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0.\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS, WITHOUT\n * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n *\n * See the License for the specific language governing permissions and limitations under the License.\n */\n\nimport styled from \"@emotion/styled\";\nimport { MRT_RowData, MRT_TableOptions } from \"material-react-table\";\n\nimport { Box } from \"../../Box\";\nimport { DesignTokens } from \"../../OdysseyDesignTokensContext\";\nimport { DragIndicatorIcon } from \"../../icons.generated\";\n\nexport const dataTableImmutableSettings = {\n  enableColumnActions: false,\n  enableDensityToggle: false,\n  enableExpandAll: false,\n  enableFilters: false,\n  enableFullScreenToggle: false,\n  enableGlobalFilter: false,\n  enableHiding: false,\n  enablePagination: false,\n  layoutMode: \"grid-no-grow\" as MRT_TableOptions<MRT_RowData>[\"layoutMode\"],\n  manualFiltering: true,\n  manualSorting: true,\n  muiTablePaperProps: {\n    elevation: 0,\n    sx: {\n      overflow: \"visible\",\n    },\n  },\n  positionActionsColumn:\n    \"last\" as MRT_TableOptions<MRT_RowData>[\"positionActionsColumn\"],\n  rowVirtualizerOptions: {\n    overscan: 4,\n  },\n  selectAllMode: \"all\" as MRT_TableOptions<MRT_RowData>[\"selectAllMode\"],\n};\n\nexport const displayColumnDefOptions = {\n  \"mrt-row-actions\": {\n    header: \"\",\n    grow: true,\n    muiTableBodyCellProps: {\n      align: \"right\" as const,\n      sx: {\n        overflow: \"visible\",\n        width: \"unset\",\n      },\n      className: \"ods-actions-cell\",\n    },\n    muiTableHeadCellProps: {\n      align: \"right\" as const,\n      sx: {\n        width: \"unset\",\n      },\n      className: \"ods-actions-cell\",\n    },\n  },\n  \"mrt-row-drag\": {\n    header: \"\",\n    muiTableBodyCellProps: {\n      sx: {\n        minWidth: 0,\n        width: \"auto\",\n      },\n      className: \"ods-drag-handle\",\n    },\n    muiTableHeadCellProps: {\n      sx: {\n        minWidth: 0,\n        width: \"auto\",\n      },\n      children: (\n        // Add a spacer to simulate the width of the drag handle in the column.\n        // Without this, the head cells are offset from their body cell counterparts\n        <Box sx={{ marginInline: \"-0.1rem\" }}>\n          <DragIndicatorIcon sx={{ marginInline: 1, opacity: 0 }} />\n        </Box>\n      ),\n    },\n  },\n  \"mrt-row-select\": {\n    muiTableHeadCellProps: {\n      padding: \"checkbox\" as const,\n    },\n    muiTableBodyCellProps: {\n      padding: \"checkbox\" as const,\n    },\n  },\n  \"mrt-row-expand\": {\n    header: \"\",\n    muiTableBodyCellProps: {\n      sx: {\n        overflow: \"visible\",\n      },\n    },\n  },\n};\n\nexport const ScrollableTableContainer = styled(\"div\", {\n  shouldForwardProp: (prop) =>\n    prop !== \"odysseyDesignTokens\" &&\n    prop !== \"isScrollableStart\" &&\n    prop !== \"isScrollableEnd\",\n})(\n  ({\n    odysseyDesignTokens,\n    isScrollableStart,\n    isScrollableEnd,\n  }: {\n    odysseyDesignTokens: DesignTokens;\n    isScrollableStart: boolean;\n    isScrollableEnd: boolean;\n  }) => ({\n    marginBlockEnd: odysseyDesignTokens.Spacing4,\n    position: \"relative\",\n    borderInlineStartColor: isScrollableStart\n      ? odysseyDesignTokens.HueNeutral200\n      : \"transparent\",\n    borderInlineStartStyle: \"solid\",\n    borderInlineStartWidth: odysseyDesignTokens.BorderWidthMain,\n    \"::before\": {\n      background:\n        \"linear-gradient(-90deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.33) 50%, rgba(0, 0, 0, 1) 100%)\",\n      content: '\"\"',\n      opacity: isScrollableStart ? \"0.075\" : \"0\",\n      pointerEvents: \"none\",\n      position: \"absolute\",\n      top: 0,\n      left: 0,\n      bottom: 0,\n      width: odysseyDesignTokens.Spacing6,\n      zIndex: 100,\n      transition: `opacity ${odysseyDesignTokens.TransitionDurationMain} ${odysseyDesignTokens.TransitionTimingMain}`,\n    },\n    borderInlineEndColor: isScrollableEnd\n      ? odysseyDesignTokens.HueNeutral200\n      : \"transparent\",\n    borderInlineEndStyle: \"solid\",\n    borderInlineEndWidth: odysseyDesignTokens.BorderWidthMain,\n    \"::after\": {\n      background:\n        \"linear-gradient(90deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.33) 50%, rgba(0, 0, 0, 1) 100%)\",\n      content: '\"\"',\n      opacity: isScrollableEnd ? \"0.075\" : \"0\",\n      pointerEvents: \"none\",\n      position: \"absolute\",\n      top: 0,\n      right: 0,\n      bottom: 0,\n      width: odysseyDesignTokens.Spacing6,\n      transition: `opacity ${odysseyDesignTokens.TransitionDurationMain} ${odysseyDesignTokens.TransitionTimingMain}`,\n    },\n  }),\n);\n"],"mappings":"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"}

package/dist/labs/DataComponents/useFilterConversion.js

@@ -0,0 +1,58 @@
+/*!
+ * Copyright (c) 2024-present, Okta, Inc. and/or its affiliates. All rights reserved.
+ * The Okta software accompanied by this notice is provided pursuant to the Apache License, Version 2.0 (the "License.")
+ *
+ * You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0.
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ *
+ * See the License for the specific language governing permissions and limitations under the License.
+ */
+
+import { useCallback, useMemo } from "react";
+export const useFilterConversion = ({
+  columns,
+  filters
+}) => {
+  const convertFilterSelectOptions = useCallback(options => options?.map(option => typeof option === "string" ? {
+    label: option,
+    value: option
+  } : {
+    label: option.label ?? option.value,
+    value: option.value ?? option.label
+  }), []);
+  const convertColumnToFilter = useCallback(column => column.enableColumnFilter !== false && column.accessorKey ? {
+    id: column.accessorKey,
+    label: column.header,
+    variant: column.filterVariant,
+    options: convertFilterSelectOptions(column.filterSelectOptions)
+  } : null, [convertFilterSelectOptions]);
+  const dataTableFilters = useMemo(() => {
+    const providedFilters = filters || columns;
+    if (!providedFilters) {
+      return [];
+    }
+    return providedFilters.reduce((accumulator, item) => {
+      if (typeof item === "string") {
+        const foundColumn = columns?.find(column => column.accessorKey === item);
+        if (foundColumn) {
+          const filter = convertColumnToFilter(foundColumn);
+          if (filter) {
+            return accumulator.concat(filter);
+          }
+        }
+      } else if ("accessorKey" in item) {
+        const filter = convertColumnToFilter(item);
+        if (filter) {
+          return accumulator.concat(filter);
+        }
+      } else if ("label" in item) {
+        return accumulator.concat(item);
+      }
+      return accumulator;
+    }, []);
+  }, [columns, filters]);
+  return dataTableFilters;
+};
+//# sourceMappingURL=useFilterConversion.js.map

package/dist/labs/DataComponents/useFilterConversion.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useFilterConversion.js","names":["useCallback","useMemo","useFilterConversion","columns","filters","convertFilterSelectOptions","options","map","option","label","value","convertColumnToFilter","column","enableColumnFilter","accessorKey","id","header","variant","filterVariant","filterSelectOptions","dataTableFilters","providedFilters","reduce","accumulator","item","foundColumn","find","filter","concat"],"sources":["../../../src/labs/DataComponents/useFilterConversion.ts"],"sourcesContent":["/*!\n * Copyright (c) 2024-present, Okta, Inc. and/or its affiliates. All rights reserved.\n * The Okta software accompanied by this notice is provided pursuant to the Apache License, Version 2.0 (the \"License.\")\n *\n * You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0.\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS, WITHOUT\n * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n *\n * See the License for the specific language governing permissions and limitations under the License.\n */\n\nimport { useCallback, useMemo } from \"react\";\nimport { MRT_RowData } from \"material-react-table\";\n\nimport { DataFilter } from \"../DataFilters\";\nimport { DataTableColumn } from \"../../DataTable\";\nimport { UniversalProps, TableProps } from \"./componentTypes\";\n\ntype FilterConversionType = {\n  columns?: TableProps[\"columns\"];\n  filters?: UniversalProps[\"filters\"];\n};\n\nexport const useFilterConversion = ({\n  columns,\n  filters,\n}: FilterConversionType) => {\n  const convertFilterSelectOptions = useCallback(\n    (options: DataTableColumn<MRT_RowData>[\"filterSelectOptions\"]) =>\n      options?.map((option) =>\n        typeof option === \"string\"\n          ? {\n              label: option,\n              value: option,\n            }\n          : {\n              // If the option isn't a string, it must have value and/or option defined\n              // If either is undefined, use the other\n              label: option.label ?? option.value,\n              value: option.value ?? option.label,\n            },\n      ),\n    [],\n  );\n\n  const convertColumnToFilter = useCallback(\n    (column: DataTableColumn<MRT_RowData>) =>\n      column.enableColumnFilter !== false && column.accessorKey\n        ? ({\n            id: column.accessorKey,\n            label: column.header,\n            variant: column.filterVariant,\n            options: convertFilterSelectOptions(column.filterSelectOptions),\n          } satisfies DataFilter as DataFilter)\n        : null,\n    [convertFilterSelectOptions],\n  );\n\n  const dataTableFilters = useMemo(() => {\n    const providedFilters = filters || columns;\n    if (!providedFilters) {\n      return [];\n    }\n    return providedFilters.reduce<DataFilter[]>((accumulator, item) => {\n      if (typeof item === \"string\") {\n        const foundColumn = columns?.find(\n          (column) => column.accessorKey === item,\n        );\n        if (foundColumn) {\n          const filter = convertColumnToFilter(foundColumn);\n          if (filter) {\n            return accumulator.concat(filter);\n          }\n        }\n      } else if (\"accessorKey\" in item) {\n        // Checks if it's a column\n        const filter = convertColumnToFilter(item);\n        if (filter) {\n          return accumulator.concat(filter);\n        }\n      } else if (\"label\" in item) {\n        // Checks if it's a DataFilter\n        return accumulator.concat(item);\n      }\n      // If none of the conditions match, item is ignored (not mapping to undefined)\n      return accumulator;\n    }, []);\n  }, [columns, filters]);\n\n  return dataTableFilters;\n};\n"],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA,SAASA,WAAW,EAAEC,OAAO,QAAQ,OAAO;AAY5C,OAAO,MAAMC,mBAAmB,GAAGA,CAAC;EAClCC,OAAO;EACPC;AACoB,CAAC,KAAK;EAC1B,MAAMC,0BAA0B,GAAGL,WAAW,CAC3CM,OAA4D,IAC3DA,OAAO,EAAEC,GAAG,CAAEC,MAAM,IAClB,OAAOA,MAAM,KAAK,QAAQ,GACtB;IACEC,KAAK,EAAED,MAAM;IACbE,KAAK,EAAEF;EACT,CAAC,GACD;IAGEC,KAAK,EAAED,MAAM,CAACC,KAAK,IAAID,MAAM,CAACE,KAAK;IACnCA,KAAK,EAAEF,MAAM,CAACE,KAAK,IAAIF,MAAM,CAACC;EAChC,CACN,CAAC,EACH,EACF,CAAC;EAED,MAAME,qBAAqB,GAAGX,WAAW,CACtCY,MAAoC,IACnCA,MAAM,CAACC,kBAAkB,KAAK,KAAK,IAAID,MAAM,CAACE,WAAW,GACpD;IACCC,EAAE,EAAEH,MAAM,CAACE,WAAW;IACtBL,KAAK,EAAEG,MAAM,CAACI,MAAM;IACpBC,OAAO,EAAEL,MAAM,CAACM,aAAa;IAC7BZ,OAAO,EAAED,0BAA0B,CAACO,MAAM,CAACO,mBAAmB;EAChE,CAAC,GACD,IAAI,EACV,CAACd,0BAA0B,CAC7B,CAAC;EAED,MAAMe,gBAAgB,GAAGnB,OAAO,CAAC,MAAM;IACrC,MAAMoB,eAAe,GAAGjB,OAAO,IAAID,OAAO;IAC1C,IAAI,CAACkB,eAAe,EAAE;MACpB,OAAO,EAAE;IACX;IACA,OAAOA,eAAe,CAACC,MAAM,CAAe,CAACC,WAAW,EAAEC,IAAI,KAAK;MACjE,IAAI,OAAOA,IAAI,KAAK,QAAQ,EAAE;QAC5B,MAAMC,WAAW,GAAGtB,OAAO,EAAEuB,IAAI,CAC9Bd,MAAM,IAAKA,MAAM,CAACE,WAAW,KAAKU,IACrC,CAAC;QACD,IAAIC,WAAW,EAAE;UACf,MAAME,MAAM,GAAGhB,qBAAqB,CAACc,WAAW,CAAC;UACjD,IAAIE,MAAM,EAAE;YACV,OAAOJ,WAAW,CAACK,MAAM,CAACD,MAAM,CAAC;UACnC;QACF;MACF,CAAC,MAAM,IAAI,aAAa,IAAIH,IAAI,EAAE;QAEhC,MAAMG,MAAM,GAAGhB,qBAAqB,CAACa,IAAI,CAAC;QAC1C,IAAIG,MAAM,EAAE;UACV,OAAOJ,WAAW,CAACK,MAAM,CAACD,MAAM,CAAC;QACnC;MACF,CAAC,MAAM,IAAI,OAAO,IAAIH,IAAI,EAAE;QAE1B,OAAOD,WAAW,CAACK,MAAM,CAACJ,IAAI,CAAC;MACjC;MAEA,OAAOD,WAAW;IACpB,CAAC,EAAE,EAAE,CAAC;EACR,CAAC,EAAE,CAACpB,OAAO,EAAEC,OAAO,CAAC,CAAC;EAEtB,OAAOgB,gBAAgB;AACzB,CAAC"}

package/dist/labs/DataFilters.js

@@ -16,24 +16,95 @@ import _Typography from "@mui/material/Typography";
  */
 
 import { memo, useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { Trans, useTranslation } from "react-i18next";
 import styled from "@emotion/styled";
 import { Autocomplete } from "../Autocomplete.js";
 import { Box } from "../Box.js";
-import { TagList } from "../TagList.js";
-import { Tag } from "../Tag.js";
-import { SearchField } from "../SearchField.js";
 import { Button } from "../Button.js";
-import { CheckIcon, ChevronRightIcon, CloseCircleFilledIcon, FilterIcon } from "../icons.generated/index.js";
-import { Subordinate } from "../Typography.js";
-import { TextField } from "../TextField.js";
 import { CheckboxGroup } from "../CheckboxGroup.js";
 import { Checkbox } from "../Checkbox.js";
+import { CheckIcon, ChevronRightIcon, CloseCircleFilledIcon, FilterIcon } from "../icons.generated/index.js";
+import { useOdysseyDesignTokens } from "../OdysseyDesignTokensContext.js";
 import { RadioGroup } from "../RadioGroup.js";
 import { Radio } from "../Radio.js";
-import { Trans, useTranslation } from "react-i18next";
+import { SearchField } from "../SearchField.js";
+import { Tag } from "../Tag.js";
+import { TagList } from "../TagList.js";
+import { TextField } from "../TextField.js";
+import { Subordinate } from "../Typography.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 import { Fragment as _Fragment } from "react/jsx-runtime";
+const AutocompleteOuterContainer = styled("div", {
+  shouldForwardProp: prop => prop !== "odysseyDesignTokens"
+})(({
+  odysseyDesignTokens
+}) => ({
+  display: "flex",
+  alignItems: "flex-end",
+  gap: odysseyDesignTokens.Spacing2
+}));
+const AutocompleteInnerContainer = styled("div")({
+  width: "100%"
+});
+const FilterTags = ({
+  activeFilters,
+  updateFilterAndInputValues
+}) => {
+  const filtersWithValues = activeFilters.filter(activeFilter => activeFilter.value);
+  const filtersToRender = [];
+  filtersWithValues.forEach(filter => {
+    if (Array.isArray(filter.value)) {
+      filter.value.forEach(filterValue => {
+        const formattedValue = typeof filterValue === "string" ? filterValue : filterValue.value;
+        filtersToRender.push({
+          id: filter.id,
+          label: filter.label,
+          value: formattedValue
+        });
+      });
+    }
+    if (typeof filter.value === "string") {
+      filtersToRender.push({
+        id: filter.id,
+        label: filter.label,
+        value: filter.value
+      });
+    }
+  });
+  const getFilter = id => filtersWithValues.find(filter => filter.id === id);
+  const removeValueFromFilterAndInput = (id, removedFilterValue) => {
+    const currentFilter = getFilter(id);
+    if (currentFilter) {
+      const {
+        value
+      } = currentFilter;
+      if (Array.isArray(value)) {
+        const updatedValues = value.filter(currentValue => {
+          return currentValue.value !== removedFilterValue;
+        });
+        updateFilterAndInputValues({
+          filterId: id,
+          value: updatedValues.length > 0 ? updatedValues : undefined
+        });
+      }
+      if (typeof value === "string") {
+        updateFilterAndInputValues({
+          filterId: id,
+          value: undefined
+        });
+      }
+    }
+  };
+  return _jsx(TagList, {
+    children: filtersToRender.map(filter => _jsx(Tag, {
+      label: `${filter.label}: ${filter.value}`,
+      onRemove: () => removeValueFromFilterAndInput(filter.id, filter.value)
+    }, `${filter.label}: ${filter.value}`))
+  });
+};
+const MemoizedFilterTags = memo(FilterTags);
+MemoizedFilterTags.displayName = "FilterTags";
 const DataFilters = ({
   onChangeSearch,
   onChangeFilters,
@@ -48,6 +119,7 @@ const DataFilters = ({
   const {
     t
   } = useTranslation();
+  const odysseyDesignTokens = useOdysseyDesignTokens();
   const initialInputValues = useMemo(() => {
     return filtersProp.reduce((accumulator, filter) => {
       accumulator[filter.id] = filter.value;
@@ -57,7 +129,7 @@ const DataFilters = ({
   const [inputValues, setInputValues] = useState(initialInputValues);
   const [searchValue, setSearchValue] = useState(defaultSearchTerm);
   const activeFilters = useMemo(() => {
-    return filters.filter(filter => typeof filter.value === "string" && filter.value);
+    return filters.filter(filter => filter.value);
   }, [filters]);
   const [isFiltersMenuOpen, setIsFiltersMenuOpen] = useState(false);
   const [filtersMenuAnchorElement, setFiltersMenuAnchorElement] = useState();
@@ -80,12 +152,7 @@ const DataFilters = ({
     }
   }, [onChangeSearch, searchValue, searchDelayTime, hasSearchSubmitButton]);
   const autocompleteOptions = useMemo(() => {
-    if (filterPopoverCurrentFilter?.variant === "autocomplete" && filterPopoverCurrentFilter?.options) {
-      return filterPopoverCurrentFilter.options.map(option => ({
-        label: option.label
-      }));
-    }
-    return [];
+    return filterPopoverCurrentFilter?.options || [];
   }, [filterPopoverCurrentFilter]);
   const updateInputValue = useCallback(({
     filterId,
@@ -100,40 +167,49 @@ const DataFilters = ({
     filterId,
     value
   }) => {
+    setInputValues(prevInputValues => ({
+      ...prevInputValues,
+      [filterId]: value
+    }));
     const updatedFilters = filtersProp.map(filter => ({
       ...filter,
       value: filter.id === filterId ? value : inputValues[filter.id]
     }));
     setFilters(updatedFilters);
   }, [inputValues, filtersProp]);
-  const getAutoCompleteLabel = value => {
-    if (Array.isArray(value)) {
-      return value.map(valueElement => {
-        if (typeof valueElement === "string") {
-          return undefined;
-        }
-        return valueElement.label;
-      }).filter(item => Boolean(item));
-    }
-    return value?.label;
-  };
-  const handleMultiSelectChange = useCallback((filterId, value, submit = false) => {
-    const startingValues = filtersProp.find(filter => filter.id === filterId)?.options?.map(option => option.value);
-    const currentValues = inputValues[filterId] ?? startingValues;
-    const updatedValues = currentValues.includes(value) ? currentValues.filter(item => item !== value) : [...currentValues, value];
-    const valuesToSave = updatedValues.sort().join() === startingValues?.sort().join() ? undefined : updatedValues;
+  const updateFilterAndInputValues = useCallback(({
+    filterId,
+    value
+  }) => {
+    updateInputValue({
+      filterId,
+      value
+    });
+    updateFilters({
+      filterId,
+      value
+    });
+  }, [updateFilters, updateInputValue]);
+  const handleCheckboxFilterAndInputValueChange = useCallback((filterId, option, checked) => {
+    const currentValues = inputValues[filterId] || [];
+    const updatedValues = checked ? [...currentValues, option] : currentValues.filter(inputValue => inputValue.value !== option.value);
+    const normalizedUpdatedValues = updatedValues.length > 0 ? updatedValues : undefined;
     setInputValues({
       ...inputValues,
-      [filterId]: valuesToSave
+      [filterId]: normalizedUpdatedValues
     });
-    if (submit) {
-      const updatedFilters = filtersProp.map(filter => ({
-        ...filter,
-        value: filter.id === filterId ? valuesToSave : inputValues[filter.id]
-      }));
-      setFilters(updatedFilters);
-    }
-  }, [inputValues, filtersProp]);
+    const updatedFilters = filters.map(filter => ({
+      ...filter,
+      value: filter.id === filterId ? normalizedUpdatedValues : inputValues[filter.id]
+    }));
+    setFilters(updatedFilters);
+  }, [filters, inputValues]);
+  const handleAutocompleteFilterChange = useCallback((filterId, option) => {
+    setInputValues({
+      ...inputValues,
+      [filterId]: option
+    });
+  }, [inputValues]);
   const clearAllFilters = useCallback(() => {
     const updatedInputValues = filtersProp.reduce((accumulator, filter) => {
       accumulator[filter.id] = undefined;
@@ -153,14 +229,6 @@ const DataFilters = ({
     }));
     setFilters(updatedFilters);
   }, [inputValues, filtersProp]);
-  const AutocompleteOuterContainer = styled("div")({
-    display: "flex",
-    gap: "2",
-    alignItems: "flex-end"
-  });
-  const AutocompleteInnerContainer = styled("div")({
-    width: "100%"
-  });
   const filterMenu = useMemo(() => _jsxs(_Fragment, {
     children: [_jsx(Box, {
       children: _jsx(Button, {
@@ -243,6 +311,7 @@ const DataFilters = ({
       })
     })]
   }), [isFiltersMenuOpen, isDisabled, filterPopoverCurrentFilter, isFilterPopoverOpen, filtersMenuAnchorElement, filtersProp, filters, t]);
+  const autoCompleteValue = useMemo(() => filterPopoverCurrentFilter?.id ? inputValues[filterPopoverCurrentFilter.id] : undefined, [filterPopoverCurrentFilter, inputValues]);
   return _jsxs(Box, {
     children: [_jsxs(Box, {
       sx: {
@@ -277,6 +346,7 @@ const DataFilters = ({
                   setIsFiltersMenuOpen(false);
                 }
               }
+              handleFilterSubmit();
               setIsFilterPopoverOpen(false);
             },
             children: _jsx(Box, {
@@ -291,22 +361,18 @@ const DataFilters = ({
                   setIsFilterPopoverOpen(false);
                   setIsFiltersMenuOpen(false);
                 },
+                noValidate: true,
                 children: filterPopoverCurrentFilter?.render ? filterPopoverCurrentFilter.render(updateFilters) : _jsxs(_Fragment, {
                   children: [filterPopoverCurrentFilter?.variant === "autocomplete" && filterPopoverCurrentFilter?.options && _jsxs(AutocompleteOuterContainer, {
+                    odysseyDesignTokens: odysseyDesignTokens,
                     children: [_jsx(AutocompleteInnerContainer, {
                       children: _jsx(Autocomplete, {
+                        hasMultipleChoices: true,
+                        isCustomValueAllowed: filterPopoverCurrentFilter?.isCustomValueAllowed,
                         label: filterPopoverCurrentFilter.label,
-                        value: inputValues[filterPopoverCurrentFilter.id] ?? "",
+                        value: autoCompleteValue,
                         onChange: (_, value) => {
-                          const label = typeof value === "string" ? getAutoCompleteLabel({
-                            label: value
-                          }) : Array.isArray(value) ? getAutoCompleteLabel(value.map(item => typeof item === "string" ? {
-                            label: item
-                          } : item)) : value ? getAutoCompleteLabel(value) : "";
-                          updateInputValue({
-                            filterId: filterPopoverCurrentFilter.id,
-                            value: label
-                          });
+                          handleAutocompleteFilterChange(filterPopoverCurrentFilter.id, value);
                         },
                         options: autocompleteOptions
                       })
@@ -358,20 +424,22 @@ const DataFilters = ({
                   }), filterPopoverCurrentFilter?.variant === "multi-select" && filterPopoverCurrentFilter?.options && _jsx(CheckboxGroup, {
                     label: filterPopoverCurrentFilter.label,
                     isRequired: true,
-                    children: filterPopoverCurrentFilter.options.map(option => _jsx(Checkbox, {
-                      label: option.label,
-                      value: option.value,
-                      isDefaultChecked: inputValues[filterPopoverCurrentFilter.id]?.includes(option.value) || inputValues[filterPopoverCurrentFilter.id] === undefined,
-                      onChange: () => handleMultiSelectChange(filterPopoverCurrentFilter.id, option.value, true)
-                    }, option.value))
+                    children: filterPopoverCurrentFilter.options.map(option => {
+                      const checkFilterInputValuesAsArray = inputValues[filterPopoverCurrentFilter.id] || [];
+                      const isOptionValueInInputValues = checkFilterInputValuesAsArray.some(inputValue => inputValue.value === option.value);
+                      return _jsx(Checkbox, {
+                        label: option.label,
+                        value: option.value,
+                        isChecked: isOptionValueInInputValues,
+                        onChange: (_, checked) => {
+                          handleCheckboxFilterAndInputValueChange(filterPopoverCurrentFilter.id, option, checked);
+                        }
+                      }, option.value);
+                    })
                   }), filterPopoverCurrentFilter?.variant === "select" && filterPopoverCurrentFilter?.options && _jsxs(RadioGroup, {
                     label: filterPopoverCurrentFilter.label,
                     onChange: (_, value) => {
-                      updateInputValue({
-                        filterId: filterPopoverCurrentFilter.id,
-                        value
-                      });
-                      updateFilters({
+                      updateFilterAndInputValues({
                         filterId: filterPopoverCurrentFilter.id,
                         value
                       });
@@ -448,20 +516,9 @@ const DataFilters = ({
         paddingTop: 4,
         marginTop: 4
       },
-      children: _jsx(TagList, {
-        children: activeFilters.map(filter => _jsx(Tag, {
-          label: `${filter.label}: ${filter.value}`,
-          onRemove: () => {
-            updateInputValue({
-              filterId: filter.id,
-              value: undefined
-            });
-            updateFilters({
-              filterId: filter.id,
-              value: undefined
-            });
-          }
-        }, filter.label))
+      children: _jsx(MemoizedFilterTags, {
+        activeFilters: activeFilters,
+        updateFilterAndInputValues: updateFilterAndInputValues
       })
     })]
   });