@eccenca/gui-elements 23.8.0 → 24.0.0-rc.1

package/src/components/Card/stories/CardOptions.stories.tsx

@@ -1,5 +1,5 @@
 import React from "react";
-import { ComponentMeta, ComponentStory } from "@storybook/react";
+import { Meta, StoryFn } from "@storybook/react";
 
 import IconButton from "../../Icon/IconButton";
 import { CardOptions } from "../index";
@@ -13,9 +13,9 @@ export default {
             description: "Elements for user-interaction.",
         },
     },
-} as ComponentMeta<typeof CardOptions>;
+} as Meta<typeof CardOptions>;
 
-const Template: ComponentStory<typeof CardOptions> = (args) => <CardOptions {...args} />;
+const Template: StoryFn<typeof CardOptions> = (args) => <CardOptions {...args} />;
 
 export const Default = Template.bind({});
 Default.args = {

package/src/components/Card/stories/CardTitle.stories.tsx

@@ -1,5 +1,5 @@
 import React from "react";
-import { ComponentMeta, ComponentStory } from "@storybook/react";
+import { Meta, StoryFn } from "@storybook/react";
 
 import { CardTitle } from "../index";
 
@@ -12,9 +12,9 @@ export default {
             description: "Elements for card title.",
         },
     },
-} as ComponentMeta<typeof CardTitle>;
+} as Meta<typeof CardTitle>;
 
-const Template: ComponentStory<typeof CardTitle> = (args) => <CardTitle {...args} />;
+const Template: StoryFn<typeof CardTitle> = (args) => <CardTitle {...args} />;
 
 export const Default = Template.bind({});
 Default.args = {

package/src/components/Checkbox/Stories/Checkbox.stories.tsx

@@ -1,6 +1,6 @@
 import React from "react";
 import { LoremIpsum } from "react-lorem-ipsum";
-import { ComponentMeta, ComponentStory } from "@storybook/react";
+import { Meta, StoryFn } from "@storybook/react";
 
 import { Checkbox, HtmlContentBlock } from "../../../../index";
 
@@ -10,9 +10,9 @@ export default {
     argTypes: {
         onChange: { action: "clicked" },
     },
-} as ComponentMeta<typeof Checkbox>;
+} as Meta<typeof Checkbox>;
 
-const Template: ComponentStory<typeof Checkbox> = (args) => <Checkbox {...args} />;
+const Template: StoryFn<typeof Checkbox> = (args) => <Checkbox {...args} />;
 
 export const SimpleTextLabel = Template.bind({});
 SimpleTextLabel.args = {

package/src/components/CodeAutocompleteField/CodeAutocompleteField.stories.tsx

@@ -1,5 +1,6 @@
 import React from "react";
 import { Meta, StoryFn } from "@storybook/react";
+import { fn } from "@storybook/test";
 
 import { CodeAutocompleteField, CodeAutocompleteFieldProps } from "../../../index";
 import { IPartialAutoCompleteResult } from "../AutoSuggestion/AutoSuggestion";
@@ -8,6 +9,9 @@ export default {
     title: "Forms/CodeAutocompleteField",
     component: CodeAutocompleteField,
     argTypes: {},
+    args: {
+        onInputChecked: fn(),
+    },
 } as Meta<typeof CodeAutocompleteField>;
 
 const Template: StoryFn<typeof CodeAutocompleteField> = (args) => (

package/src/components/Form/Stories/FieldItem.stories.tsx

@@ -1,6 +1,6 @@
 import React from "react";
 import { LoremIpsum } from "react-lorem-ipsum";
-import { ComponentMeta, ComponentStory } from "@storybook/react";
+import { Meta, StoryFn } from "@storybook/react";
 
 import { FieldItem, TextField } from "../../../../index";
 
@@ -12,9 +12,9 @@ export default {
             control: "none",
         },
     },
-} as ComponentMeta<typeof FieldItem>;
+} as Meta<typeof FieldItem>;
 
-const Template: ComponentStory<typeof FieldItem> = (args) => <FieldItem {...args} />;
+const Template: StoryFn<typeof FieldItem> = (args) => <FieldItem {...args} />;
 export const Default = Template.bind({});
 Default.args = {
     children: <TextField />,

package/src/components/Form/Stories/FieldItemRow.stories.tsx

@@ -1,5 +1,5 @@
 import React from "react";
-import { ComponentMeta, ComponentStory } from "@storybook/react";
+import { Meta, StoryFn } from "@storybook/react";
 
 import FieldItem from "../FieldItem";
 import FieldItemRow from "../FieldItemRow";
@@ -15,9 +15,9 @@ export default {
             description: "Elements to include into the Accordion component",
         },
     },
-} as ComponentMeta<typeof FieldItemRow>;
+} as Meta<typeof FieldItemRow>;
 
-const Template: ComponentStory<typeof FieldItemRow> = (args) => <FieldItemRow {...args} />;
+const Template: StoryFn<typeof FieldItemRow> = (args) => <FieldItemRow {...args} />;
 export const Default = Template.bind({});
 Default.args = {
     children: [

package/src/components/Grid/Grid.tsx

@@ -1,10 +1,11 @@
 import React from "react";
-// @ts-ignore // FlexGrid is not part of @types/carbon-components-react
-import { FlexGrid as CarbonGrid, GridDefaultProps } from "carbon-components-react";
+import { FlexGrid as CarbonGrid } from "@carbon/react";
+import { GridProps as CarbonGridProps } from "@carbon/react/es/components/Grid";
 
 import { CLASSPREFIX as eccgui } from "../../configuration/constants";
 
-export interface GridProps extends Omit<GridDefaultProps, "fullWidth" | "columns" | "narrow" | "as"> {
+export interface GridProps
+    extends Omit<CarbonGridProps<"article" | "section" | "div">, "fullWidth" | "columns" | "narrow" | "as"> {
     /**
      * The available grid height can be distributed between multiple rows.
      * To do so the `verticalStretched` property must be set for the `<GridRow />` element that need to be stretched.

package/src/components/Grid/GridColumn.tsx

@@ -1,10 +1,10 @@
 import React from "react";
-// import PropTypes from 'prop-types';
-import { Column as CarbonColumn, ColumnDefaultProps } from "carbon-components-react";
+import { Column as CarbonColumn } from "@carbon/react";
+import { ColumnProps as CarbonGridColumnProps } from "@carbon/react/es/components/Grid/Column";
 
 import { CLASSPREFIX as eccgui } from "../../configuration/constants";
 
-export interface GridColumnProps extends Omit<ColumnDefaultProps, "max" | "xlg" | "lg" | "md" | "sm"> {
+export interface GridColumnProps extends Omit<CarbonGridColumnProps<"div">, "max" | "xlg" | "lg" | "md" | "sm"> {
     /**
      * Column width is small, using 3 (or 2, on medium viewports) parts out of 16.
      * This boolean property is basically a quick switch for setting `{ md:2, lg:3 }`.
@@ -22,7 +22,7 @@ export interface GridColumnProps extends Omit<ColumnDefaultProps, "max" | "xlg"
     /**
      * Overwrite column sizes by using the original size config of the Carbon grid column.
      */
-    carbonSizeConfig?: Pick<ColumnDefaultProps, "max" | "xlg" | "lg" | "md" | "sm">;
+    carbonSizeConfig?: Pick<CarbonGridColumnProps<"div">, "max" | "xlg" | "lg" | "md" | "sm">;
     /**
      * @deprecated
      * Grid column always uses full width if it is the only column and does not have any othe size config.

package/src/components/Grid/GridRow.tsx

@@ -1,10 +1,11 @@
 import React from "react";
 // import PropTypes from 'prop-types';
-import { Row as CarbonRow, RowDefaultProps } from "carbon-components-react";
+import { Row as CarbonRow } from "@carbon/react";
+import { RowProps as CarbonRowProps } from "@carbon/react/es/components/Grid/Row";
 
 import { CLASSPREFIX as eccgui } from "../../configuration/constants";
 
-export interface GridRowProps extends Omit<RowDefaultProps, "narrow"> {
+export interface GridRowProps extends Omit<CarbonRowProps<"div">, "narrow"> {
     /**
      * Do not wrap column children when there is not enough space available.
      * This only works for grids on medium sized and larger viewports.

package/src/components/Grid/grid.scss

@@ -7,7 +7,7 @@ $eccgui-size-grid-gutter: $eccgui-size-block-whitespace !default;
 $grid-gutter: rem($eccgui-size-grid-gutter);
 
 // load grid
-@import "~@carbon/styles/scss/grid/flexbox";
+@import "~@carbon/react/scss/grid/flexbox";
 
 // adjustments
 

package/src/components/Grid/stories/Grid.stories.tsx

@@ -1,5 +1,5 @@
 import React from "react";
-import { ComponentMeta, ComponentStory } from "@storybook/react";
+import { Meta, StoryFn } from "@storybook/react";
 
 import { Grid, GridColumn, GridRow } from "../../../../index";
 
@@ -14,9 +14,9 @@ export default {
             control: "none",
         },
     },
-} as ComponentMeta<typeof Grid>;
+} as Meta<typeof Grid>;
 
-const Template: ComponentStory<typeof Grid> = (args) => (
+const Template: StoryFn<typeof Grid> = (args) => (
     <div style={{ minHeight: "30vh", position: "relative" }}>
         <Grid {...args} />
     </div>

package/src/components/Grid/stories/GridColumn.stories.tsx

@@ -1,6 +1,6 @@
 import React from "react";
 import { LoremIpsum } from "react-lorem-ipsum";
-import { ComponentMeta, ComponentStory } from "@storybook/react";
+import { Meta, StoryFn } from "@storybook/react";
 
 import { Grid, GridColumn, GridRow, HtmlContentBlock } from "../../../../index";
 
@@ -12,9 +12,9 @@ export default {
             control: "none",
         },
     },
-} as ComponentMeta<typeof GridColumn>;
+} as Meta<typeof GridColumn>;
 
-const Template: ComponentStory<typeof GridColumn> = (args) => (
+const Template: StoryFn<typeof GridColumn> = (args) => (
     <Grid>
         <GridRow>
             <GridColumn {...args} />
@@ -41,7 +41,7 @@ const otherColumn = (
     </GridColumn>
 );
 
-const TemplateWidths: ComponentStory<typeof GridColumn> = (args) => (
+const TemplateWidths: StoryFn<typeof GridColumn> = (args) => (
     <Grid>
         <GridRow>
             <GridColumn {...args} />

package/src/components/Grid/stories/GridRow.stories.tsx

@@ -1,5 +1,5 @@
 import React from "react";
-import { ComponentMeta, ComponentStory } from "@storybook/react";
+import { Meta, StoryFn } from "@storybook/react";
 
 import { Grid, GridColumn, GridRow } from "../../../../index";
 
@@ -13,9 +13,9 @@ export default {
             control: "none",
         },
     },
-} as ComponentMeta<typeof GridRow>;
+} as Meta<typeof GridRow>;
 
-const Template: ComponentStory<typeof GridRow> = (args) => (
+const Template: StoryFn<typeof GridRow> = (args) => (
     <Grid style={{ minHeight: "30vh" }} verticalStretchable>
         <GridRow {...args} />
     </Grid>
@@ -26,7 +26,7 @@ Default.args = {
     children: <GridColumn {...ColumnExample.args} verticalAlign="center" />,
 };
 
-const TemplateStretched: ComponentStory<typeof GridRow> = (args) => (
+const TemplateStretched: StoryFn<typeof GridRow> = (args) => (
     <Grid style={{ minHeight: "50vh" }} verticalStretchable>
         <GridRow {...args}>
             <GridColumn>Top row.</GridColumn>

package/src/components/HoverToggler/HoverToggler.stories.tsx

@@ -1,5 +1,5 @@
 import React from "react";
-import { ComponentMeta, ComponentStory } from "@storybook/react";
+import { Meta, StoryFn } from "@storybook/react";
 
 import { HoverToggler } from "./../../index";
 
@@ -7,9 +7,9 @@ export default {
     title: "Components/HoverToggler",
     component: HoverToggler,
     argTypes: {},
-} as ComponentMeta<typeof HoverToggler>;
+} as Meta<typeof HoverToggler>;
 
-const Template: ComponentStory<typeof HoverToggler> = (args) => <HoverToggler {...args} style={{ height: "auto" }} />;
+const Template: StoryFn<typeof HoverToggler> = (args) => <HoverToggler {...args} style={{ height: "auto" }} />;
 
 export const Default = Template.bind({});
 Default.args = {

package/src/components/Icon/BaseIcon.tsx

@@ -1,11 +1,10 @@
 import React from "react";
-import { IconProps as CarbonIconProps } from "carbon-components-react";
+import { CarbonIconProps, CarbonIconType } from "@carbon/react/icons";
 
 import { IntentTypes } from "../../common/Intent";
 import { CLASSPREFIX as eccgui } from "../../configuration/constants";
 
 import Tooltip, { TooltipProps } from "./../Tooltip/Tooltip";
-import { CarbonIconType } from "./canonicalIconNames";
 
 export interface BaseIconProps extends Omit<CarbonIconProps, "icon" | "description" | "name"> {
     /**
@@ -35,12 +34,17 @@ export interface BaseIconProps extends Omit<CarbonIconProps, "icon" | "descripti
     className?: string;
     /**
      * Description for icon as accessibility fallback.
+     * @deprecated Use `title` as replacement.
      */
     description?: string;
     /**
      * Additonal tooltip properties, e.g. `hoverOpenDelay`.
      */
     tooltipProps?: Partial<Omit<TooltipProps, "content" | "children">>;
+    /**
+     * @deprecated Use `title` as replacement.
+     */
+    iconTitle?: CarbonIconProps["title"];
 }
 
 /**
@@ -55,6 +59,7 @@ function BaseIcon({
     tooltipProps,
     intent,
     description,
+    iconTitle,
     tabIndex,
     ...restProps
 }: BaseIconProps) {
@@ -65,9 +70,11 @@ function BaseIcon({
 
     const icon = (
         <CarbonIconNamed
+            title={
+                iconTitle || description ? (iconTitle ? iconTitle : description ? description : undefined) : undefined
+            }
             {...restProps}
             {...sizeConfig}
-            description={description ?? tooltipText ?? ""}
             className={
                 `${eccgui}-icon` + (intent ? ` ${eccgui}-intent--${intent}` : "") + (className ? ` ${className}` : "")
             }

package/src/components/Icon/canonicalIconNames.tsx

@@ -1,166 +1,7 @@
-import * as icons from "@carbon/icons-react";
-import { IconProps as CarbonIconProps } from "carbon-components-react";
+import * as icons from "@carbon/react/icons";
+import { CarbonIconType as IconType } from "@carbon/react/icons";
 
-/** Valid icon names. */
-export type ValidIconName =
-    | "application-activities"
-    | "application-dataintegration"
-    | "application-explore"
-    | "application-homepage"
-    | "application-legacygui"
-    | "application-mapping"
-    | "application-queries"
-    | "application-useraccount"
-    | "application-vocabularies"
-    | "application-warning"
-    | "application-hotkeys"
-    | "application-notification"
-    | "artefact-chatlog"
-    | "artefact-commit"
-    | "artefact-customtask"
-    | "artefact-dataset"
-    | "artefact-dataset-csv"
-    | "artefact-dataset-eccencadataplatform"
-    | "artefact-dataset-excel"
-    | "artefact-dataset-file"
-    | "artefact-dataset-jdbc"
-    | "artefact-dataset-json"
-    | "artefact-dataset-multicsv"
-    | "artefact-dataset-neo4j"
-    | "artefact-dataset-sparkview"
-    | "artefact-dataset-sparqlendpoint"
-    | "artefact-dataset-sqlendpoint"
-    | "artefact-dataset-xml"
-    | "artefact-deprecated"
-    | "artefact-embedded"
-    | "artefact-errorlog"
-    | "artefact-file"
-    | "artefact-linking"
-    | "artefact-project"
-    | "artefact-rawdata"
-    | "artefact-remote"
-    | "artefact-report"
-    | "artefact-task"
-    | "artefact-transform"
-    | "artefact-uncategorized"
-    | "artefact-workflow"
-    | "data-boolean"
-    | "data-sourcepath"
-    | "data-targetpath"
-    | "data-string"
-    | "data-date"
-    | "data-time"
-    | "data-datetime"
-    | "data-number"
-    | "entity-human"
-    | "entity-robot"
-    | "item-add-artefact"
-    | "item-clone"
-    | "item-comment"
-    | "item-copy"
-    | "item-download"
-    | "item-draggable"
-    | "item-edit"
-    | "item-evaluation"
-    | "item-execution"
-    | "item-info"
-    | "item-launch"
-    | "item-moremenu"
-    | "item-question"
-    | "item-reload"
-    | "item-remove"
-    | "item-reset"
-    | "item-save"
-    | "item-settings"
-    | "item-shuffle"
-    | "item-skip-forward"
-    | "item-start"
-    | "item-stop"
-    | "item-upload"
-    | "item-vertmenu"
-    | "item-viewdetails"
-    | "item-hidedetails"
-    | "list-sort"
-    | "list-sortasc"
-    | "list-sortdesc"
-    | "module-accesscontrol"
-    | "module-annotation"
-    | "module-dashboard"
-    | "module-gdprsearch"
-    | "module-integrations"
-    | "module-linkedrules"
-    | "module-reports"
-    | "module-search"
-    | "module-thesauri"
-    | "module-timetracker"
-    | "module-visualization"
-    | "navigation-back"
-    | "navigation-close"
-    | "navigation-down"
-    | "navigation-extern"
-    | "navigation-first"
-    | "navigation-forth"
-    | "navigation-jump"
-    | "navigation-last"
-    | "navigation-left"
-    | "navigation-next"
-    | "navigation-previous"
-    | "navigation-right"
-    | "navigation-up"
-    | "operation-aggregation"
-    | "operation-autolayout"
-    | "operation-clear"
-    | "operation-commit"
-    | "operation-comparison"
-    | "operation-erase"
-    | "operation-filter"
-    | "operation-filteredit"
-    | "operation-filterremove"
-    | "operation-fix"
-    | "operation-link"
-    | "operation-logout"
-    | "operation-magic"
-    | "operation-merge"
-    | "operation-redo"
-    | "operation-search"
-    | "operation-sharelink"
-    | "operation-transform"
-    | "operation-translate"
-    | "operation-undo"
-    | "operation-unlink"
-    | "state-checked"
-    | "state-checkedsimple"
-    | "state-confirmed"
-    | "state-danger"
-    | "state-declined"
-    | "state-info"
-    | "state-locked"
-    | "state-partlychecked"
-    | "state-protected"
-    | "state-success"
-    | "state-unchecked"
-    | "state-unlocked"
-    | "state-warning"
-    | "toggler-caret"
-    | "toggler-caretright"
-    | "toggler-caretdown"
-    | "toggler-maximize"
-    | "toggler-minimize"
-    | "toggler-moveleft"
-    | "toggler-moveright"
-    | "toggler-list"
-    | "toggler-rowexpand"
-    | "toggler-rowcollapse"
-    | "toggler-showless"
-    | "toggler-showmore"
-    | "toggler-star-empty"
-    | "toggler-star-filled"
-    | "toggler-table"
-    | "toggler-tree"
-    | "form-template"
-    | "undefined";
-
-export type CarbonIconType = React.ComponentType<CarbonIconProps>;
+export type CarbonIconType = IconType;
 
 /**
  * @deprecated
@@ -168,7 +9,7 @@ export type CarbonIconType = React.ComponentType<CarbonIconProps>;
  */
 export type IconSized = CarbonIconType;
 
-const canonicalIconNames: Record<ValidIconName, CarbonIconType> = {
+const canonicalIcons = {
     "application-activities": icons.Activity,
     "application-dataintegration": icons.DataUnstructured,
     "application-explore": icons.Explore,
@@ -339,4 +180,6 @@ const canonicalIconNames: Record<ValidIconName, CarbonIconType> = {
     undefined: icons.Undefined,
 };
 
+export type ValidIconName = keyof typeof canonicalIcons;
+const canonicalIconNames: Record<ValidIconName, CarbonIconType> = canonicalIcons;
 export default canonicalIconNames;

package/src/components/Icon/stories/Icon.stories.tsx

@@ -4,12 +4,14 @@ import { Meta, StoryFn } from "@storybook/react";
 
 import { Button, Icon } from "../../../../index";
 import { Definitions } from "../../../common/Intent";
+import BaseIcon from "../BaseIcon";
 
 import canonicalIcons, { ValidIconName } from "./../canonicalIconNames";
 
 export default {
     title: "Components/Icon",
     component: Icon,
+    subcomponents: { BaseIcon },
     argTypes: {
         name: {
             control: "select",
@@ -31,6 +33,7 @@ const Template: StoryFn<typeof Icon> = (args) => (
 export const Default = Template.bind({});
 Default.args = {
     name: "undefined",
+    title: "This is the title",
 };
 
 const TemplateSizes: StoryFn<typeof Icon> = (args) => (

package/src/components/InteractionGate/InteractionGate.stories.tsx

@@ -1,6 +1,6 @@
 import React from "react";
 import { LoremIpsum } from "react-lorem-ipsum";
-import { ComponentMeta, ComponentStory } from "@storybook/react";
+import { Meta, StoryFn } from "@storybook/react";
 
 import { Button, HtmlContentBlock, InteractionGate, Link, Spinner } from "./../../index";
 
@@ -14,9 +14,9 @@ export default {
             description: "Any sub lements, could contain elements that provide options for user interactions.",
         },
     },
-} as ComponentMeta<typeof InteractionGate>;
+} as Meta<typeof InteractionGate>;
 
-const Template: ComponentStory<typeof InteractionGate> = (args) => <InteractionGate {...args}></InteractionGate>;
+const Template: StoryFn<typeof InteractionGate> = (args) => <InteractionGate {...args}></InteractionGate>;
 
 export const Default = Template.bind({});
 Default.args = {

package/src/components/Label/Label.stories.tsx

@@ -1,6 +1,6 @@
 import React from "react";
 import { loremIpsum } from "react-lorem-ipsum";
-import { ComponentMeta, ComponentStory } from "@storybook/react";
+import { Meta, StoryFn } from "@storybook/react";
 
 import { Label } from "../../index";
 
@@ -8,9 +8,9 @@ export default {
     title: "Forms/Label",
     component: Label,
     argTypes: {},
-} as ComponentMeta<typeof Label>;
+} as Meta<typeof Label>;
 
-const Template: ComponentStory<typeof Label> = (args) => <Label {...args} />;
+const Template: StoryFn<typeof Label> = (args) => <Label {...args} />;
 
 export const Default = Template.bind({});
 Default.args = {

package/src/components/Link/Link.tsx

@@ -1,12 +1,12 @@
 import React from "react";
-import { Link as CarbonLink, LinkProps as CarbonLinkProps } from "carbon-components-react";
+import { Link as CarbonLink, LinkProps as CarbonLinkProps } from "@carbon/react";
 
 import { openInNewTab } from "../../common/utils/openInNewTab";
 import { CLASSPREFIX as eccgui } from "../../configuration/constants";
 
-export type LinkProps = CarbonLinkProps;
+export type LinkProps = Omit<CarbonLinkProps<"a">, "ref">;
 
-export const Link = ({ className = "", children, href, onClick, ...otherProps }: CarbonLinkProps) => {
+export const Link = ({ className = "", children, href, onClick, ...otherProps }: LinkProps) => {
     return (
         <CarbonLink
             className={`${eccgui}-link ` + className}

package/src/components/Link/link.scss

@@ -1,4 +1,4 @@
-@use "~@carbon/styles/scss/components/link/link";
+@use "~@carbon/react/scss/components/link/link";
 @include link.link;
 
 .#{$prefix}--link {

package/src/components/MultiSelect/MultiSelect.tsx

@@ -117,6 +117,11 @@ interface MultiSelectCommonProps<T>
      * It uses the attributes given via this property.
      */
     wrapperProps?: React.HTMLAttributes<HTMLDivElement>;
+    /**
+     * Function that allows us to filter values from the option list.
+     * If not provided, values are filtered by their labels
+     */
+    searchPredicate?: (item: T, query: string) => boolean;
 }
 
 export type MultiSelectProps<T> = MultiSelectCommonProps<T> &
@@ -171,6 +176,7 @@ export function MultiSelect<T>({
     "data-test-id": dataTestId,
     "data-testid": dataTestid,
     wrapperProps,
+    searchPredicate,
     ...otherMultiSelectProps
 }: MultiSelectProps<T>) {
     // Options created by a user
@@ -261,6 +267,10 @@ export function MultiSelect<T>({
         setSelectedItems(filteredItems);
     };
 
+    const defaultFilterPredicate = (item: T, query: string) => {
+        return itemLabel(item).toLowerCase().includes(query);
+    };
+
     /**
      * selects and deselects an item from selection list
      * if the item exists it removes it instead
@@ -298,10 +308,10 @@ export function MultiSelect<T>({
                 if (requestState.current.query === query) {
                     // Only use most recent request
                     const outsideOptions = [...(resultFromQuery ?? externalItems)];
+                    const filter = searchPredicate ?? defaultFilterPredicate;
+
                     setFilteredItems(
-                        [...outsideOptions, ...createdItems.current].filter((item) =>
-                            itemLabel(item).toLowerCase().includes(query.toLowerCase())
-                        )
+                        [...outsideOptions, ...createdItems.current].filter((item) => filter(item, query.toLowerCase()))
                     );
                     setShowSpinner(false);
                 }