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

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);
                 }

package/src/components/MultiSuggestField/MultiSuggestField.stories.tsx

@@ -1,6 +1,7 @@
 import React, { useCallback, useMemo, useState } from "react";
 import { loremIpsum } from "react-lorem-ipsum";
 import { Meta, StoryFn } from "@storybook/react";
+import { fn } from "@storybook/test";
 
 import { MultiSelectSelectionProps, MultiSuggestField, SimpleDialog } from "./../../../index";
 
@@ -28,6 +29,9 @@ export default {
             control: "none",
         },
     },
+    args: {
+        onSelection: fn(),
+    },
 } as Meta<typeof MultiSuggestField>;
 
 const Template: StoryFn<typeof MultiSuggestField> = (args) => {
@@ -234,3 +238,15 @@ const WithinModal = (): JSX.Element => {
 };
 
 export const withinModal = WithinModal.bind({});
+
+/** With custom search function */
+export const CustomSearch = Template.bind({});
+CustomSearch.args = {
+    items,
+    prePopulateWithItems: false,
+    itemId: (item) => item.testId,
+    itemLabel: (item) => item.testLabel,
+    searchPredicate: (item, query) => {
+        return item.testId.toLowerCase().includes(query) || item.testLabel.toLowerCase().includes(query);
+    },
+};

package/src/components/MultiSuggestField/tests/MultiSuggestField.test.tsx

@@ -4,7 +4,7 @@ import { fireEvent, render, screen, waitFor } from "@testing-library/react";
 import "@testing-library/jest-dom";
 
 import { MultiSuggestField } from "../MultiSuggestField";
-import { Default, dropdownOnFocus, predefinedNotControlledValues } from "../MultiSuggestField.stories";
+import { CustomSearch, Default, dropdownOnFocus, predefinedNotControlledValues } from "../MultiSuggestField.stories";
 
 const testLabels = ["label1", "label2", "label3", "label4", "label5"];
 
@@ -260,6 +260,68 @@ describe("MultiSuggestField", () => {
                 expect(onSelection).toHaveBeenCalledWith(expectedObject);
             });
         });
+
+        it("should filter items by custom search function", async () => {
+            const { container } = render(<MultiSuggestField {...CustomSearch.args} items={items} />);
+
+            const [inputContainer] = container.getElementsByClassName("eccgui-multiselect");
+            const [input] = inputContainer.getElementsByTagName("input");
+
+            fireEvent.click(input);
+
+            await waitFor(() => {
+                const listbox = screen.getByRole("listbox");
+                expect(listbox).toBeInTheDocument();
+
+                const menuItems = listbox.getElementsByClassName("eccgui-menu__item");
+                expect(menuItems.length).toBe(CustomSearch.args.items.length);
+            });
+
+            fireEvent.change(input, { target: { value: "label1" } });
+
+            await waitFor(() => {
+                const listbox = screen.getByRole("listbox");
+                expect(listbox).toBeInTheDocument();
+
+                const menuItems = listbox.getElementsByClassName("eccgui-menu__item");
+                expect(menuItems.length).toBe(1);
+
+                const item = menuItems[0];
+
+                const [div] = item.getElementsByTagName("div");
+                expect(div.textContent).toBe("label1");
+            });
+
+            fireEvent.change(input, { target: { value: "label1-id" } });
+
+            await waitFor(() => {
+                const listbox = screen.getByRole("listbox");
+                expect(listbox).toBeInTheDocument();
+
+                const menuItems = listbox.getElementsByClassName("eccgui-menu__item");
+                expect(menuItems.length).toBe(1);
+
+                const item = menuItems[0];
+
+                const [div] = item.getElementsByTagName("div");
+                expect(div.textContent).toBe("label1");
+            });
+
+            fireEvent.change(input, { target: { value: "label1-id-other" } });
+
+            await waitFor(() => {
+                const listbox = screen.getByRole("listbox");
+                expect(listbox).toBeInTheDocument();
+
+                const menuItems = listbox.getElementsByClassName("eccgui-menu__item");
+                expect(menuItems.length).toBe(1);
+
+                const item = menuItems[0];
+
+                const [div] = item.getElementsByTagName("div");
+                expect(div.textContent).toBe("No results.");
+            });
+        });
     });
 
     describe("controlled (when both selectedItems and onSelect are provided)", () => {

package/src/components/Notification/Notification.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 { helpersArgTypes } from "../../../.storybook/helpers";
 import { Button, HtmlContentBlock, Notification, Spacing } from "../../../index";
@@ -16,9 +16,9 @@ export default {
             ...helpersArgTypes.exampleIcon,
         },
     },
-} as ComponentMeta<typeof Notification>;
+} as Meta<typeof Notification>;
 
-const TemplateFull: ComponentStory<typeof Notification> = (args) => <Notification {...args} />;
+const TemplateFull: StoryFn<typeof Notification> = (args) => <Notification {...args} />;
 
 export const ExampleWithMessage = TemplateFull.bind({});
 ExampleWithMessage.args = {

package/src/components/Pagination/Pagination.tsx

@@ -1,5 +1,6 @@
 import React, { useState } from "react";
-import { Pagination as CarbonPagination, PaginationProps as CarbonPaginationProps } from "carbon-components-react";
+import { Pagination as CarbonPagination } from "@carbon/react";
+import { PaginationProps as CarbonPaginationProps } from "@carbon/react/es/components/Pagination/Pagination";
 
 import { CLASSPREFIX as eccgui } from "../../configuration/constants";
 

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

@@ -1,16 +1,16 @@
 import React from "react";
-import { ComponentMeta, ComponentStory } from "@storybook/react";
+import { Meta, StoryFn } from "@storybook/react";
 
 import { Pagination } from "../../../../index";
 export default {
     title: "Components/Pagination",
     component: Pagination,
     argTypes: {},
-} as ComponentMeta<typeof Pagination>;
+} as Meta<typeof Pagination>;
 
 const PaginationExample = (args) => <Pagination {...args} />;
 
-export const Default: ComponentStory<typeof Pagination> = PaginationExample.bind({});
+export const Default: StoryFn<typeof Pagination> = PaginationExample.bind({});
 Default.args = {
     pageSizes: [10, 20, 50, 100],
     totalItems: 60,
@@ -18,7 +18,7 @@ Default.args = {
     forwardText: "Next page",
 };
 
-export const ExtendedPagesizeSelection: ComponentStory<typeof Pagination> = PaginationExample.bind({});
+export const ExtendedPagesizeSelection: StoryFn<typeof Pagination> = PaginationExample.bind({});
 ExtendedPagesizeSelection.args = {
     ...Default.args,
     pageSizes: [