[Bug]: Backward incompatibility on use of label in CollectionPreferences.

[nicklera1]

Browser

Chrome, Safari, Firefox, Edge

Package version

v3.0.782

React version

18.1

Description

Resent change to a5defd9#diff-9a4626222e43ed6f71fb6aa5a4fc8bff1727c66603314abd4888c51c55025741R65 have broke rendering of Preference panel due to new filtering logic where it assumes that label is string which is based on the interface (my assumption)

export interface ContentDisplayOption {
       id: string;
       label: string;
       alwaysVisible?: boolean;
   }

The issue is that we had use ReactNode as label before and since the current code assumes it's string it throws and error.

TypeError: e.label.toLowerCase is not a function
    at index.tsx:65:22
    at Array.filter (<anonymous>)
    at index.tsx:64:60

Source code

a5defd9#diff-9a4626222e43ed6f71fb6aa5a4fc8bff1727c66603314abd4888c51c55025741R65

const sortedAndFilteredOptions = useMemo(
   () =>
     getSortedOptions({ options, contentDisplay: value }).filter(option =>
       option.label.toLowerCase().trim().includes(columnFilteringText.toLowerCase().trim())
     ),
   [columnFilteringText, options, value]
 );

Reproduction

import styled from "styled-components";
// Example of ContentDisplayOption
export interface ContentDisplayOption {
  id: string;
  label: string;
  alwaysVisible?: boolean;
}

function App() {
  const options = [
    {
      id: "first",
      label: "First Label",
      alwaysVisible: true,
    },
    {
      id: "first",
      label: (
        // ReactNode passed here
        <div>
          <strong>ALSO LABEL</strong>
        </div>
      ) as React.ReactNode,
      alwaysVisible: true,
    },
  ] as ContentDisplayOption[];
  return (
    <div style={{ padding: "30px" }}>
      {options.map((opt) => {
        return (
          <ul>
            <li> Id: {opt.id} </li>
            <li> Label: {opt.label}</li>
            <li> Visible: {opt.alwaysVisible ? "Yes" : "no"} </li>
          </ul>
        );
      })}
    </div>
  );
}

export default App;

Code of Conduct

• I agree to follow this project's Code of Conduct
• I checked the current issues for duplicate problems