VE-204 Virtualised Autocomplete For Label Filter

src/Filter/LabelFilter/LabelFilter.stories.jsx → src/Filter/LabelFilter/LabelFilter.stories.tsx

@@ -10,7 +10,8 @@ export default {
 // example options
 const options = [
   { _id: 1, color: "#005FA8", description: "first label", name: "label 1" },
-  { _id: 2, color: "#f542e0", description: "second label", name: "label 2" }
+  { _id: 2, color: "#f542e0", description: "second label", name: "label 2" },
+  { _id: 3, color: "#ffa500", description: "third label", name: "label 3" }
 ];
 
 // story template with state for selection
@@ -19,7 +20,7 @@ const Template = args => {
   React.useEffect(() => {
     setValue(args.value);
   }, [args.value]);
-  const onChange = value => {
+  const onChange = (value: typeof options) => {
     setValue(value);
     action("onChange")(value);
   };
@@ -32,17 +33,7 @@ export const Default = {
     limitTags: -1,
     name: "label-filter",
     options,
-    value: [options[0]],
-    variant: "popper"
-  },
-
-  render: Template
-};
-
-export const AlwaysOpen = {
-  args: {
-    ...Default.args,
-    variant: "always-open"
+    value: [options[0]]
   },
 
   render: Template

src/Filter/LabelFilter/LabelFilter.test.jsx → src/Filter/LabelFilter/LabelFilter.test.tsx

@@ -1,41 +1,55 @@
 import * as React from "react";
 
+import { describe, expect, it, vi } from "vitest";
 import { render, screen } from "@testing-library/react";
 
 import LabelFilter from "./LabelFilter";
+import { LabelFilterProps } from "./LabelFilter.types";
 import userEvent from "@testing-library/user-event";
 
 /**
  * Test wrapper for LabelFilter
  *
  * Provides state for value to avoid errors changing from uncontrolled to controlled.
  */
-const LabelFilterWithState = ({ onChange, value: valueIn = [], ...rest }) => {
+const LabelFilterWithState = ({
+  onChange = () => {},
+  value: valueIn = [],
+  options,
+  ...rest
+}: LabelFilterProps) => {
   const [value, setValue] = React.useState(valueIn);
   const handleChange = selectedValues => {
     setValue(selectedValues);
     onChange(selectedValues);
   };
 
-  return <LabelFilter {...rest} onChange={handleChange} value={value} />;
+  return (
+    <LabelFilter
+      options={options}
+      {...rest}
+      onChange={handleChange}
+      value={value}
+    />
+  );
 };
 
 // sample options
 const options = [
   {
-    _id: 1,
+    _id: "1",
     color: "#FF0000",
     description: "option 1 description",
     name: "option 1"
   },
   {
-    _id: 2,
+    _id: "2",
     color: "#00FF00",
     description: "option 2 description",
     name: "option 2"
   },
   {
-    _id: 3,
+    _id: "3",
     color: "#0000FF",
     description: "option 3 description",
     name: "option 3"
@@ -80,51 +94,6 @@ describe("LabelFilter", () => {
       await userEvent.click(screen.getByRole("button", { name: /open/i }));
       await userEvent.click(screen.getByText("option 2"));
 
-      // check that the onChange event is fired
-      expect(onChange).toHaveBeenLastCalledWith(options.slice(0, 2));
-    });
-  });
-  describe("variant=always-open", () => {
-    it("can single select", async () => {
-      const onChange = vi.fn();
-      render(
-        <LabelFilterWithState
-          options={options}
-          onChange={onChange}
-          variant="always-open"
-        />
-      );
-
-      // check that the options are rendered
-      expect(screen.getByText("option 1")).toBeInTheDocument();
-      expect(screen.getByText("option 2")).toBeInTheDocument();
-      expect(screen.getByText("option 3")).toBeInTheDocument();
-
-      // click the first option
-      await userEvent.click(screen.getByText("option 1"));
-
-      // check that the onChange event is fired
-      expect(onChange).toHaveBeenLastCalledWith([options[0]]);
-    });
-    it("can single select", async () => {
-      const onChange = vi.fn();
-      render(
-        <LabelFilterWithState
-          options={options}
-          onChange={onChange}
-          variant="always-open"
-        />
-      );
-
-      // check that the options are rendered
-      expect(screen.getByText("option 1")).toBeInTheDocument();
-      expect(screen.getByText("option 2")).toBeInTheDocument();
-      expect(screen.getByText("option 3")).toBeInTheDocument();
-
-      // click the first option
-      await userEvent.click(screen.getByText("option 1"));
-      await userEvent.click(screen.getByText("option 2"));
-
       // check that the onChange event is fired
       expect(onChange).toHaveBeenLastCalledWith(options.slice(0, 2));
     });

src/Filter/LabelFilter/LabelFilter.jsx → src/Filter/LabelFilter/LabelFilter.tsx

@@ -1,32 +1,29 @@
 import * as React from "react";
 
 import {
-  Autocomplete,
+  AutocompleteOwnerState,
+  AutocompleteRenderGetTagProps,
   Box,
   Checkbox,
   TextField,
-  Typography,
-  autocompleteClasses
+  Typography
 } from "@mui/material";
 
-import AlwaysOpenAutocomplete from "../AlwaysOpenAutocomplete";
+import { Label } from "../../LabelSelector/Label.types";
 import LabelChip from "../../LabelSelector/LabelChip/LabelChip";
+import { LabelFilterProps } from "./LabelFilter.types";
+import { VirtualizedAutocomplete } from "../../Autocomplete/Autocomplete";
 
 /**
  * A label filter allows the user to select multiple labels from a list.
  */
 export default function LabelFilter({
-  variant = "popper",
   value = [],
   limitTags = -1,
   ...props
-}) {
+}: LabelFilterProps) {
   const defaults = { limitTags, value };
-  return variant === "popper" ? (
-    <LabelFilterPopper {...props} {...defaults} />
-  ) : (
-    <LabelFilterAlwaysOpen {...props} {...defaults} />
-  );
+  return <LabelFilterPopper {...props} {...defaults} />;
 }
 
 /**
@@ -39,15 +36,15 @@ function LabelFilterPopper({
   options,
   value,
   limitTags
-}) {
+}: LabelFilterProps) {
   return (
-    <Autocomplete
+    <VirtualizedAutocomplete
       getOptionLabel={option => option.name}
       isOptionEqualToValue={(option, value) => option._id === value._id}
       limitTags={limitTags}
       multiple
       noOptionsText="No labels"
-      onChange={(e, newValue) => onChange(newValue)}
+      onChange={(e, newValue) => onChange?.(newValue)}
       options={options}
       value={value}
       renderInput={params => (
@@ -59,68 +56,41 @@ function LabelFilterPopper({
   );
 }
 
-/**
- * An inline label filter is always open and the popper does not sit above other elements.
- */
-function LabelFilterAlwaysOpen({
-  name,
-  label,
-  options,
-  value,
-  limitTags,
-  onChange
-}) {
-  return (
-    <AlwaysOpenAutocomplete
-      getOptionLabel={option => option.name}
-      isOptionEqualToValue={(option, value) => option._id === value._id}
-      limitTags={limitTags}
-      multiple
-      noOptionsText="No labels"
-      onChange={(e, newValue) => onChange(newValue)}
-      options={options}
-      renderInput={params => {
-        return (
-          <TextField
-            {...params}
-            label={label}
-            name={name}
-            sx={{
-              [`& .${autocompleteClasses.popupIndicator}`]: { display: "none" }
-            }}
-          />
-        );
-      }}
-      renderOption={Option}
-      renderTags={Tags}
-      value={value}
-    />
-  );
-}
-
 // render for label chips
-function Tags(labels, getTagProps, { onChange, value }) {
-  return labels.map(label => (
+function Tags(
+  labels: Label[],
+  getTagProps: AutocompleteRenderGetTagProps,
+  ownerState: AutocompleteOwnerState<Label, true, undefined, undefined, "div">
+) {
+  const value = ownerState.value || []; // Current selected labels
+  const onChange = ownerState.onChange || (() => {}); // No-op if onChange is not provided
+  return labels.map((label, index) => (
     <LabelChip
       key={label._id}
       label={label.name}
       color={label.color}
       style={{ marginLeft: 2 }}
-      onDelete={e =>
-        onChange(
-          e,
-          value.filter(l => l._id !== label._id)
-        )
-      }
+      onDelete={e => {
+        const updatedValue = value.filter(l => l._id !== label._id); // Remove label from the value
+        // Trigger onChange with event, updated value, reason, and details
+        onChange(e as React.SyntheticEvent, updatedValue, "removeOption", {
+          option: label
+        });
+      }}
       clickable={false}
     />
   ));
 }
 
-// render for label options
-function Option(props, option, { selected }) {
+// Render label options
+function Option(
+  props: React.HTMLAttributes<HTMLLIElement>,
+  option: Label,
+  { selected }: { selected: boolean }
+) {
+  const { key, ...restProps } = props as { key?: React.Key }; // Extract key explicitly
   return (
-    <li {...props}>
+    <li key={key} {...restProps}>
       <Checkbox
         checked={selected}
         sx={{

src/Filter/LabelFilter/index.ts → src/Filter/LabelFilter/LabelFilter.types.ts

@@ -3,11 +3,11 @@ import LabelFilter from "./LabelFilter";
 
 export type LabelFilterProps = {
   label?: string;
+  limitTags?: number;
   name?: string;
   onChange?: (value: Label[]) => void;
   options: Label[];
   value?: Label[];
-  variant?: "popper" | "always-open";
 };
 
 export default LabelFilter as React.FC<LabelFilterProps>;

src/Filter/index.ts

@@ -2,7 +2,10 @@ export {
   default as CheckboxFilter,
   type CheckboxFilterProps
 } from "./CheckboxFilter";
-export { default as LabelFilter, type LabelFilterProps } from "./LabelFilter";
+export {
+  default as LabelFilter,
+  type LabelFilterProps
+} from "./LabelFilter/LabelFilter.types";
 export { default as RangeFilter, type RangeFilterProps } from "./RangeFilter";
 
 export { SidebarFilter, type SidebarFilterProps } from "./SidebarFilter";

src/FontPicker/FontPicker.jsx

@@ -1,5 +1,7 @@
-import { Autocomplete, Box, TextField, Typography } from "@mui/material";
+import { Box, TextField, Typography } from "@mui/material";
 import React, { useEffect, useState } from "react";
+
+import Autocomplete from "../Autocomplete";
 import PropTypes from "prop-types";
 
 // default font options list

src/LabelSelector/LabelSelector.jsx

@@ -1,4 +1,3 @@
-import Autocomplete, { createFilterOptions } from "@mui/material/Autocomplete";
 import {
   Box,
   Button,
@@ -17,6 +16,8 @@ import EditLabelDialog from "../EditLabelDialog/EditLabelDialog";
 import LabelChip from "./LabelChip/LabelChip";
 import NoWrapTypography from "../NoWrapTypography/NoWrapTypography";
 import PropTypes from "prop-types";
+import { VirtualizedAutocomplete } from "../Autocomplete/Autocomplete";
+import { createFilterOptions } from "@mui/material/Autocomplete";
 
 // custom styling
 const styles = {
@@ -166,7 +167,7 @@ export default function LabelSelector({
 
   return (
     <>
-      <Autocomplete
+      <VirtualizedAutocomplete
         size={size}
         disableCloseOnSelect
         limitTags={limitTags}