Repository: Avaiga/taipy
File: frontend/taipy-gui/src/components/Taipy/TableFilter.tsx (TypeScript)

Code before:
 */

import React, { ChangeEvent, SyntheticEvent, useCallback, useEffect, useMemo, useRef, useState } from "react";
import Autocomplete from "@mui/material/Autocomplete";
import CheckIcon from "@mui/icons-material/Check";
import DeleteIcon from "@mui/icons-material/Delete";
import FilterListIcon from "@mui/icons-material/FilterList";
import Badge from "@mui/material/Badge";
import FormControl from "@mui/material/FormControl";
import Grid from "@mui/material/Grid2";
import IconButton from "@mui/material/IconButton";
import InputLabel from "@mui/material/InputLabel";
import MenuItem from "@mui/material/MenuItem";
import OutlinedInput from "@mui/material/OutlinedInput";
import Popover, { PopoverOrigin } from "@mui/material/Popover";
import Select, { SelectChangeEvent } from "@mui/material/Select";
import TextField from "@mui/material/TextField";
import Tooltip from "@mui/material/Tooltip";
import { DateField, LocalizationProvider } from "@mui/x-date-pickers";
import { AdapterDateFns } from "@mui/x-date-pickers/AdapterDateFnsV3";

import { ColumnDesc, defaultDateFormat, getSortByIndex, iconInRowSx, FilterDesc } from "./tableUtils";
import { getDateTime, getTypeFromDf } from "../../utils";
import { getSuffixedClassNames } from "./utils";
import SvgIcon from "@mui/icons-material/Check";
import { FormControlLabel, Switch } from "@mui/material";
import { MatchCase } from "../icons/MatchCase";

interface TableFilterProps {
    columns: Record<string, ColumnDesc>;
    colsOrder?: Array<string>;
    onValidate: (data: Array<FilterDesc>) => void;
    appliedFilters?: Array<FilterDesc>;
    className?: string;
    filteredCount: number;
}

interface FilterRowProps {
    idx: number;
    filter?: FilterDesc;
    columns: Record<string, ColumnDesc>;
    colsOrder: Array<string>;
    setFilter: (idx: number, fd: FilterDesc, remove?: boolean) => void;
}

const anchorOrigin = {
    vertical: "bottom",
    horizontal: "right",
} as PopoverOrigin;

const actionsByType = {

Review comment (suggestion):
use current coding rules : specific import for better tree shaking
```
import FormControlLabel from "@mui/material/FormControlLabel";
import Switch from "@mui/material/Switch";

```

Code after:
 */

import React, { ChangeEvent, SyntheticEvent, useCallback, useEffect, useMemo, useRef, useState } from "react";
import Autocomplete from "@mui/material/Autocomplete";
import CheckIcon from "@mui/icons-material/Check";
import DeleteIcon from "@mui/icons-material/Delete";
import FilterListIcon from "@mui/icons-material/FilterList";
import Badge from "@mui/material/Badge";
import FormControl from "@mui/material/FormControl";
import Grid from "@mui/material/Grid2";
import IconButton from "@mui/material/IconButton";
import InputLabel from "@mui/material/InputLabel";
import MenuItem from "@mui/material/MenuItem";
import OutlinedInput from "@mui/material/OutlinedInput";
import Popover, { PopoverOrigin } from "@mui/material/Popover";
import Select, { SelectChangeEvent } from "@mui/material/Select";
import TextField from "@mui/material/TextField";
import Tooltip from "@mui/material/Tooltip";
import Switch from "@mui/material/Switch";
import { DateField, LocalizationProvider } from "@mui/x-date-pickers";
import { AdapterDateFns } from "@mui/x-date-pickers/AdapterDateFnsV3";

import { ColumnDesc, defaultDateFormat, getSortByIndex, iconInRowSx, FilterDesc } from "./tableUtils";
import { getDateTime, getTypeFromDf } from "../../utils";
import { getSuffixedClassNames } from "./utils";
import { MatchCase } from "../icons/MatchCase";

interface TableFilterProps {
    columns: Record<string, ColumnDesc>;
    colsOrder?: Array<string>;
    onValidate: (data: Array<FilterDesc>) => void;
    appliedFilters?: Array<FilterDesc>;
    className?: string;
    filteredCount: number;
}

interface FilterRowProps {
    idx: number;
    filter?: FilterDesc;
    columns: Record<string, ColumnDesc>;
    colsOrder: Array<string>;
    setFilter: (idx: number, fd: FilterDesc, remove?: boolean) => void;
}

const anchorOrigin = {
    vertical: "bottom",
    horizontal: "right",
} as PopoverOrigin;

const actionsByType = {
    string: { "==": "equals", contains: "contains", "!=": "not equals" },