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

Code before:
                    />
                ) : (
                    <TextField
                        value={val || ""}
                        onChange={onValueChange}
                        label={`${val ? "" : "Empty "}String`}
                        margin="dense"
                    />
                )}
            </Grid>

            <Grid size={1}>
                <Tooltip title="Toggle Case Sensitivity">
                    <IconButton onClick={toggleMatchCase} className="case-sensitive-toggle">
                        <SvgIcon>
                            <path d="M20 14c0-1.5-.5-2-2-2h-2v-1c0-1 0-1-2-1v9h4c1.5 0 2-.53 2-2zm-8-2c0-1.5-.53-2-2-2H6c-1.5 0-2 .5-2 2v7h2v-3h4v3h2zm-2-5h4V5h-4zm12 2v11c0 1.11-.89 2-2 2H4a2 2 0 0 1-2-2V9c0-1.11.89-2 2-2h4V5l2-2h4l2 2v2h4a2 2 0 0 1 2 2m-6 8h2v-3h-2zM6 12h4v2H6z" />
                        </SvgIcon>
                    </IconButton>
                </Tooltip>
            </Grid>

            <Grid size={1}>
                <Tooltip title="Validate">
                    <span>
                        <IconButton onClick={onCheckClick} disabled={!enableCheck} sx={iconInRowSx}>
                            <CheckIcon />
                        </IconButton>
                    </span>
                </Tooltip>
            </Grid>
            <Grid size={1}>
                <Tooltip title="Delete">
                    <span>
                        <IconButton onClick={onDeleteClick} disabled={!enableDel} sx={iconInRowSx}>
                            <DeleteIcon />
                        </IconButton>
                    </span>
                </Tooltip>
            </Grid>
        </Grid>
    );
};

const TableFilter = (props: TableFilterProps) => {
    const { onValidate, appliedFilters, columns, className = "", filteredCount } = props;

    const [showFilter, setShowFilter] = useState(false);
    const filterRef = useRef<HTMLButtonElement | null>(null);
    const [filters, setFilters] = useState<Array<FilterDesc>>([]);

    const colsOrder = useMemo(() => {

Review comment (security):
I would add the icon only as an end Adornment to the AutoComplete and TextField within a MUi switch component

```jsx
<TextField ...
                        slotProps={{
                            input: {
                                endAdornment: (
                                    <Switch
                                        onChange={toggleMatchCase}
                                        checked={matchCase}
                                        className="case-sensitive-toggle"
                                        size="small"
                                        checkedIcon={<MatchCase />}
                                        icon={<MatchCase color="disabled" />}
                                    />
                                ),
                            },

```

Code after:
                        sx={autocompleteSx}
                    />
                ) : (
                    <TextField
                        value={val || ""}
                        onChange={onValueChange}
                        label={`${val ? "" : "Empty "}String`}
                        margin="dense"
                        slotProps={{
                            input: {
                                endAdornment: (
                                    <Switch
                                        onChange={toggleMatchCase}
                                        checked={matchCase}
                                        size="small"
                                        checkedIcon={<MatchCase />}
                                        icon={<MatchCase color="disabled" />}
                                        inputProps={{ "aria-label": "Case Sensitive Toggle" }}
                                    />
                                ),
                            },
                        }}
                    />
                )}
            </Grid>

            <Grid size={1}>
                <Tooltip title="Validate">
                    <span>
                        <IconButton onClick={onCheckClick} disabled={!enableCheck} sx={iconInRowSx}>
                            <CheckIcon />
                        </IconButton>
                    </span>
                </Tooltip>
            </Grid>
            <Grid size={1}>
                <Tooltip title="Delete">
                    <span>
                        <IconButton onClick={onDeleteClick} disabled={!enableDel} sx={iconInRowSx}>
                            <DeleteIcon />
                        </IconButton>
                    </span>
                </Tooltip>
            </Grid>
        </Grid>
    );
};

const TableFilter = (props: TableFilterProps) => {
    const { onValidate, appliedFilters, columns, className = "", filteredCount } = props;