@eccenca/gui-elements 22.0.0-rc.6 → 22.1.0-rc.0

package/src/components/AutoSuggestion/AutoSuggestionList.tsx

@@ -0,0 +1,170 @@
+import React from "react";
+import computeScrollIntoView from "compute-scroll-into-view";
+import {
+    Menu,
+    MenuItem,
+    Highlighter,
+    OverviewItem,
+    OverviewItemDescription,
+    OverviewItemLine,
+    OverflowText,
+    Spinner,
+    Spacing,
+    Tooltip,
+} from "./../../";
+import { ISuggestionWithReplacementInfo } from "./AutoSuggestion";
+
+export interface IDropdownProps {
+    // The options of the drop down
+    options: Array<ISuggestionWithReplacementInfo>;
+    // Called when an item has been selected from the drop down
+    onItemSelectionChange: (item: ISuggestionWithReplacementInfo) => any;
+    // If the drop down is visible
+    isOpen: boolean;
+    // If the drop down should show a loading state
+    loading?: boolean;
+    left?: number;
+    // The item from the drop down that is active
+    currentlyFocusedIndex: number;
+    // Callback indicating what item should currently being highlighted, i.e. is either active or is hovered over
+    itemToHighlight: (item: ISuggestionWithReplacementInfo | undefined) => any;
+}
+
+const ListItem = ({ item }: any, ref: any) => {
+    const listItem = (
+        <OverviewItem densityHigh={true}>
+            <OverviewItemDescription>
+                <OverviewItemLine>
+                    <OverflowText ellipsis="reverse">
+                        <Highlighter
+                            label={item.value}
+                            searchValue={item.query}
+                        />
+                    </OverflowText>
+                </OverviewItemLine>
+                {item.description ? (
+                    <OverviewItemLine small={true}>
+                        <OverflowText>
+                            <Highlighter
+                                label={item.description}
+                                searchValue={item.query}
+                            />
+                        </OverflowText>
+                    </OverviewItemLine>
+                ) : null}
+            </OverviewItemDescription>
+        </OverviewItem>
+    );
+
+    return (
+        <div ref={ref}>
+            {!!item.description && item.description.length > 50 ? (
+                <Tooltip content={item.description}>{listItem}</Tooltip>
+            ) : (
+                <>{listItem}</>
+            )}
+        </div>
+    );
+};
+
+const Item = React.forwardRef(ListItem);
+
+/** A drop-down-like list that can be used in combination with other components to show and select items. */
+export const AutoSuggestionList = ({
+    isOpen,
+    options,
+    loading,
+    onItemSelectionChange,
+    left,
+    currentlyFocusedIndex,
+    itemToHighlight,
+}: IDropdownProps) => {
+    const [hoveredItem, setHoveredItem] = React.useState<
+        ISuggestionWithReplacementInfo | undefined
+    >(undefined);
+    // Refs of list items
+    const [refs] = React.useState<React.RefObject<Element>[]>([])
+    const dropdownRef = React.useRef<HTMLDivElement>(null);
+    const generateRef = (index: number) => {
+        if (!refs[index]) {
+            refs[index] = React.createRef();
+        }
+        return refs[index];
+    };
+
+    React.useEffect(() => {
+        const listIndexNode = refs[currentlyFocusedIndex];
+        if (dropdownRef?.current && listIndexNode?.current) {
+            const actions = computeScrollIntoView(listIndexNode.current, {
+                boundary: dropdownRef.current,
+                block: "nearest",
+                scrollMode: "if-needed",
+            });
+            actions.forEach(({ el, top, left }) => {
+                el.scrollTop = top;
+                el.scrollLeft = left;
+            });
+        }
+    }, [currentlyFocusedIndex, refs]);
+
+    const focusedItem = options[currentlyFocusedIndex]
+
+    // Decide which item to highlight
+    React.useEffect(() => {
+        itemToHighlight(!isOpen ? undefined : hoveredItem || focusedItem);
+    }, [
+        currentlyFocusedIndex,
+        itemToHighlight,
+        focusedItem,
+        isOpen,
+        hoveredItem,
+    ]);
+
+    const Loader = (
+        <OverviewItem hasSpacing>
+            <OverviewItemLine>Fetching suggestions</OverviewItemLine>
+            <Spacing size="tiny" vertical={true} />
+            <Spinner position="inline" description="" />
+        </OverviewItem>
+    );
+
+    const loadingOrHasSuggestions = loading || options.length;
+    if (!loadingOrHasSuggestions || !isOpen) return null;
+    return (
+        <div
+            className="ecc-auto-suggestion-box__dropdown"
+            style={{ left }}
+            ref={dropdownRef}
+        >
+            {loading ? (
+                Loader
+            ) : (
+                <Menu>
+                    {options.map((item, index) => (
+                        <MenuItem
+                            key={index}
+                            internalProps={{
+                                active: currentlyFocusedIndex === index,
+                                onMouseDown: (e) => e.preventDefault(),
+                                onClick: () => onItemSelectionChange(item),
+                                text: (
+                                    <Item
+                                        ref={generateRef(index)}
+                                        item={item}
+                                    />
+                                ),
+                                onMouseEnter: () => setHoveredItem(item),
+                                onMouseLeave: () => setHoveredItem(undefined),
+                                onMouseOver: () => {
+                                    if (item.value !== hoveredItem?.value) {
+                                        setHoveredItem(item);
+                                    }
+                                },
+                            }}
+                        />
+                    ))}
+                </Menu>
+            )}
+        </div>
+    );
+};

package/src/components/AutoSuggestion/SingleLineCodeEditor.tsx

@@ -0,0 +1,97 @@
+import "codemirror/addon/display/placeholder"
+import "codemirror/mode/sparql/sparql.js";
+import React from "react";
+import { Controlled as ControlledEditor } from "react-codemirror2";
+import { Classes as BlueprintClassNames } from "@blueprintjs/core";
+import {Editor as CodeMirrorEditor} from "codemirror";
+
+export interface IEditorProps {
+  // Is called with the editor instance that allows access via the CodeMirror API
+  setEditorInstance: (editor: CodeMirrorEditor) => any
+  // Called whenever the editor content changes
+  onChange: (value: string) => any
+  // Called when the cursor position changes
+  onCursorChange: (pos: any, coords: any) => any
+  // The editor theme, e.g. "sparql"
+  mode?: string
+  // The initial value of the editor
+  initialValue: string
+  // Called when the focus status changes
+  onFocusChange: (focused: boolean) => any
+  // Called when the user presses a key
+  onKeyDown: (event: KeyboardEvent) => any
+  // Called when the user selects text
+  onSelection: (ranges: IRange[]) => any
+  // If the <Tab> key is enabled as normal input, i.e. it won't have the behavior of changing to the next input element, expected in a web app.
+  enableTab?: boolean
+    /** Placeholder tobe shown when no text has been entered, yet. */
+    placeholder?: string
+    showScrollBar?: boolean
+}
+
+export interface IRange {
+  from: number
+  to: number
+}
+
+/** A single-line code editor. */
+const SingleLineCodeEditor = ({
+                                  setEditorInstance,
+                                  onChange,
+                                  onCursorChange,
+                                  mode,
+                                  initialValue,
+                                  onFocusChange,
+                                  onKeyDown,
+                                  onSelection,
+                                  enableTab = false,
+                                  placeholder,
+                                  showScrollBar = true
+                              }: IEditorProps) => {
+    return (
+        <div className={"ecc-input-editor " + BlueprintClassNames.INPUT}>
+            <ControlledEditor
+        editorDidMount={(editor) => {
+          editor.on("beforeChange", (_, change) => {
+            // Prevent the user from entering new-line characters, since this is supposed to be a one-line editor.
+            const newText = change.text.join("").replace(/\n/g, "");
+            //failing unexpectedly during undo and redo
+            if (change.update && typeof change.update === "function") {
+              change.update(change.from, change.to, [newText]);
+            }
+            return true;
+          });
+          setEditorInstance(editor);
+        }}
+        value={initialValue}
+        onFocus={() => onFocusChange(true)}
+        onBlur={() => onFocusChange(false)}
+        options={{
+            mode: mode,
+            lineNumbers: false,
+            theme: "xq-light",
+            extraKeys: enableTab ? undefined : {Tab: false},
+            placeholder,
+            scrollbarStyle: showScrollBar ? "native" : "null"
+        }}
+        onSelection={(editor, data) => {
+          if(Array.isArray(data?.ranges)) {
+            onSelection(data.ranges
+                .map((r: any) => ({from: r.from().ch, to: r.to().ch}))
+                .filter((r: any) => r.from !== r.to))
+          }
+        }}
+        onCursor={(editor, data) => {
+          onCursorChange(data, editor.cursorCoords(true, "div"));
+        }}
+        onBeforeChange={(editor, data, value) => {
+          const trimmedValue = value.replace(/\n/g, "");
+          onChange(trimmedValue);
+        }}
+        onKeyDown={(_, event) => onKeyDown(event)}
+      />
+    </div>
+  );
+};
+
+export default SingleLineCodeEditor;

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

@@ -0,0 +1,37 @@
+import React from "react";
+import "@testing-library/jest-dom";
+import {render} from "@testing-library/react";
+import AutoSuggestion, {IProps} from "../AutoSuggestion"
+
+describe("AutoSuggestion", () => {
+    let props: IProps
+    beforeEach(() => {
+        props = {
+            label: "test value path",
+            initialValue: "",
+            onChange: jest.fn((value) => {
+            }),
+            fetchSuggestions: jest.fn((inputString, cursorPosition) => undefined),
+            checkInput: jest.fn(inputString => ({
+                valid: true
+            })),
+            onInputChecked: jest.fn(validInput => {
+            }),
+            validationErrorText: "",
+            clearIconText: "",
+            onFocusChange: jest.fn(hasFocus => {
+            }),
+            id: "test-auto-suggestion"
+        }
+    })
+
+    it("should render properly", () => {
+        const {container} = render(<AutoSuggestion {...props} />)
+        expect(container).not.toBeEmptyDOMElement()
+    })
+
+    it("should set label prop properly", () => {
+        const {getByText} = render(<AutoSuggestion {...props}/>)
+        expect(getByText(props.label!!)).toBeTruthy()
+    })
+})

package/src/components/AutoSuggestion/tests/AutoSuggestionList.test.tsx

@@ -0,0 +1,124 @@
+import React from 'react';
+import '@testing-library/jest-dom'
+import {fireEvent, render} from '@testing-library/react'
+import {CLASSPREFIX as eccgui} from "../../../configuration/constants";
+import {AutoSuggestionList, IDropdownProps} from '../AutoSuggestionList'
+
+describe("Dropdown list", () => {
+    let props:IDropdownProps,  mockOptions
+    beforeEach(() => {
+        props  = {
+            currentlyFocusedIndex: 0,
+            loading: false,
+            left:0,
+            isOpen: false,
+            options: [],
+            itemToHighlight: () => {},
+            onItemSelectionChange: () => {}
+        }
+
+        mockOptions = [
+            {
+                query:"organizations",
+                from: 0,
+                length: 13,
+                value:"organizations/name"
+            },
+            {
+                query:"",
+                from: 13,
+                length:0,
+                value:"/"
+            }
+        ]
+    })
+
+
+    it("doesn't render when not focused", () => {
+        const {container} = render(<AutoSuggestionList {...props} />)
+        expect(container).toBeEmptyDOMElement()
+    })
+
+    it("should be able to display loading state, when fetching suggestions", () => {
+        props = {
+            ...props,
+            loading: true,
+            isOpen: true
+        }
+        const {getByText} = render(<AutoSuggestionList {...props} />)
+        expect(getByText("Fetching suggestions")).toBeTruthy()
+    })
+
+    it("should render list when suggestions are fetched", () => {
+       props = {
+           ...props,
+           loading: false,
+           isOpen:true,
+           options: mockOptions
+       }
+       const {container} = render(<AutoSuggestionList {...props} />)
+       const dropdownItems =  container.getElementsByTagName("li")
+       expect(container).not.toBeEmptyDOMElement()
+       expect(dropdownItems.length).toBe(2)
+    })
+
+    it("should move horizontally for every cursor movement", () => {
+       props = {
+           ...props,
+           options: mockOptions,
+           loading: false,
+           isOpen: true,
+           left: 10
+       }
+       const {container} = render(<AutoSuggestionList {...props} />)
+       const parentDiv:HTMLElement = container.querySelector(".ecc-auto-suggestion-box__dropdown")!!
+       const leftOffset = Number(parentDiv.style.left.replace(/px$/,""));
+       expect(leftOffset).toBe(props.left)
+    })
+
+    it("should have one active item at a time", () => {
+        props = {
+            ...props,
+            loading: false,
+            isOpen:true,
+            options: mockOptions
+        }
+        const {container} = render(<AutoSuggestionList {...props} />)
+        const activeListItems = Array.from(container.querySelectorAll("li .bp3-menu-item.bp3-active"))
+        expect(activeListItems.length).toBe(1)
+    })
+
+    it("should respond to click on each item and pass the clicked item to autosuggestion", () =>  {
+        const mockOnItemSelection = jest.fn((item) => {})
+        props = {
+            ...props,
+            loading: false,
+            isOpen:true,
+            options: mockOptions,
+            onItemSelectionChange: mockOnItemSelection
+        }
+        const {getByText} =  render(<AutoSuggestionList {...props}/>)
+        const dropdownListItem =  getByText(props.options[0].query).closest(`.${eccgui}-menu__item`);
+        fireEvent.click(dropdownListItem!!)
+        expect(mockOnItemSelection).toHaveBeenCalledTimes(1)
+        expect(mockOnItemSelection).toHaveBeenCalledWith(props.options[0])
+    })
+
+    it("should call highlight function when list item is mouse hovered",() => {
+        const mockItemToHighlight = jest.fn((item) => {})
+        props = {
+            ...props,
+            loading: false,
+            isOpen:true,
+            options: mockOptions,
+            itemToHighlight: mockItemToHighlight
+        }
+        const {container} =  render(<AutoSuggestionList {...props}/>)
+        const firstItem =  container.querySelector("li");
+        fireEvent.mouseEnter(firstItem!!)
+        expect(mockItemToHighlight).toHaveBeenCalledWith(props.options[0])
+        expect(mockItemToHighlight).toHaveBeenCalledTimes(1)
+        fireEvent.mouseLeave(firstItem!!)
+        expect(mockItemToHighlight).toHaveBeenCalledTimes(1)
+    })
+})

package/src/components/AutoSuggestion/tests/SingleLineCodeEditor.test.tsx

@@ -0,0 +1,55 @@
+import React from "react";
+import "@testing-library/jest-dom";
+import { render } from "@testing-library/react";
+import SingleLineEditor, {
+    IEditorProps,
+} from "../SingleLineCodeEditor";
+import CodeMirror from "codemirror";
+
+describe("SingleLineCodeEditor", () => {
+    let props: IEditorProps,
+        codeMirrorEditorInstance: CodeMirror.Editor = null as any;
+    beforeEach(() => {
+        props = {
+            setEditorInstance: jest.fn((editor) => {
+                codeMirrorEditorInstance = editor;
+            }),
+            onChange: jest.fn((value) => {}),
+            onCursorChange: jest.fn((pos, coords) => {}),
+            mode: null,
+            initialValue: "",
+            onFocusChange: jest.fn((focused) => {}),
+            onKeyDown: jest.fn((event) => {}),
+            onSelection: jest.fn((ranges) => {}),
+        };
+    });
+
+    it("should render properly", () => {
+        const { container } = render(<SingleLineEditor {...props} />);
+        expect(container.querySelector(".ecc-input-editor")).not.toBeNull();
+    });
+
+    it("should set the editorInstance immediately it's mounted", () => {
+        render(<SingleLineEditor {...props} />);
+        expect(props.setEditorInstance).toHaveBeenCalledTimes(1);
+        expect(codeMirrorEditorInstance).not.toBeNull();
+    });
+
+    it("should set the default value on the editor input", () => {
+        props = {
+            ...props,
+            initialValue: "This is the initial input",
+        };
+        const { getByText } = render(<SingleLineEditor {...props} />);
+        expect(codeMirrorEditorInstance.getValue()).toBe(props.initialValue);
+        expect(getByText(props.initialValue)).toBeTruthy();
+    });
+
+    it("should not allow user to create new lines", () => {
+        render(<SingleLineEditor {...props} />);
+        codeMirrorEditorInstance
+            .getDoc()
+            .setValue("I'm entering a new line \n character");
+        expect(codeMirrorEditorInstance.lineCount()).toBe(1);
+    });
+});

package/src/components/AutocompleteField/AutoCompleteField.tsx

@@ -17,10 +17,9 @@ export interface IRenderModifiers {
 /**
  * Parameters for the auto-complete field parameterized by T and U.
  * @param T is the input data structure/type of the items that can be selected.
- * @param U is the output data structure/type that is output on changes of the selected item, i.e. it may get converted first
- *          before onChange is called.
+ * @param UPDATE_VALUE The value type that will be pushed into the onChange callback.
  */
-export interface IAutoCompleteFieldProps<T extends any, U extends any> {
+export interface IAutoCompleteFieldProps<T extends any, UPDATE_VALUE extends any> {
     /**
      * Fired when text is typed into the input field. Returns a list of items of type T.
      */
@@ -31,7 +30,7 @@ export interface IAutoCompleteFieldProps<T extends any, U extends any> {
      * @param value The value that has been converted with itemValueSelector.
      * @param e     The event
      */
-    onChange?(value: U, e?: React.SyntheticEvent<HTMLElement>): any;
+    onChange?(value: UPDATE_VALUE, e?: React.SyntheticEvent<HTMLElement>): any;
 
     /**
      * The initial value for the auto-complete input field
@@ -58,7 +57,10 @@ export interface IAutoCompleteFieldProps<T extends any, U extends any> {
      * Selects the part from the auto-completion item that is called with the onChange callback.
      * @param item The selected item that should be converted to the value that onChange is called with.
      */
-    itemValueSelector(item: T): U;
+    itemValueSelector(item: T): UPDATE_VALUE;
+
+    /** The string representation of the actual value, i.e. without meta data etc. This will be used to compare if values are equal. */
+    itemValueString(item: T): string
 
     /** The text that should be displayed when no search result has been found and no custom entry can be created. */
     noResultText: string
@@ -84,7 +86,7 @@ export interface IAutoCompleteFieldProps<T extends any, U extends any> {
         resettableValue(value: T): boolean;
 
         /** The value onChange is called with when a reset action is triggered. */
-        resetValue: U;
+        resetValue: UPDATE_VALUE;
 
         /** The reset button text that is shown on hovering over the reset icon. */
         resetButtonText: string
@@ -143,7 +145,7 @@ const elementWidth = (elRef: IRefObject<HTMLInputElement> | null): IElementWidth
 }
 
 /** Auto-complete input widget. */
-export function AutoCompleteField<T extends any, U extends any>(props: IAutoCompleteFieldProps<T, U>) {
+export function AutoCompleteField<T extends any, UPDATE_VALUE extends any>(props: IAutoCompleteFieldProps<T, UPDATE_VALUE>) {
     const {
         reset,
         noResultText,
@@ -157,6 +159,7 @@ export function AutoCompleteField<T extends any, U extends any>(props: IAutoComp
         createNewItem,
         itemValueRenderer,
         resetQueryToValue,
+        itemValueString,
         ...otherProps
     } = props;
     const [selectedItem, setSelectedItem] = useState<T | undefined>(initialValue);
@@ -177,8 +180,8 @@ export function AutoCompleteField<T extends any, U extends any>(props: IAutoComp
         if (item) {
             // If new values can be created, always reset the query value to the actual value of the selected item.
             // This e.g. prevents that the "create new" option will be shown, since an item with the same value already exists.
-            const defaultResetValue: string = createNewItem && typeof itemValueSelector(item) === "string" ? (
-                itemValueSelector(item) as string
+            const defaultResetValue: string = createNewItem ? (
+                itemValueString(item) as string
             ) : itemValueRenderer(item)
             const resetVal = resetQueryToValue ? resetQueryToValue(item) : defaultResetValue
             setQuery(resetVal)
@@ -189,11 +192,7 @@ export function AutoCompleteField<T extends any, U extends any>(props: IAutoComp
 
     // The key for the option elements
     const itemKey = (item: T): string => {
-        let itemValue: U | string = itemValueSelector(item);
-        if (typeof itemValue !== "string") {
-            itemValue = itemValueRenderer(item);
-        }
-        return itemValue;
+        return itemValueString(item);
     };
 
     useEffect(() => {
@@ -250,9 +249,9 @@ export function AutoCompleteField<T extends any, U extends any>(props: IAutoComp
     // Return the index of the item in the array based on the itemValueRenderer value
     const itemIndexOf = (arr: T[], searchItem: T): number => {
         let idx = -1;
-        const searchItemString = itemValueSelector(searchItem);
+        const searchItemString = itemValueString(searchItem);
         arr.forEach((v, i) => {
-            if (itemValueSelector(v) === searchItemString) {
+            if (itemValueString(v) === searchItemString) {
                 idx = i;
             }
         });
@@ -265,7 +264,7 @@ export function AutoCompleteField<T extends any, U extends any>(props: IAutoComp
         try {
             let result = await onSearch(input);
             const onlySelectItemReturned = result.length <= 1 && selectedItem && input.length > 0 &&
-                (itemValueRenderer(selectedItem) === input || itemValueSelector(selectedItem) === input)
+                (itemValueRenderer(selectedItem) === input || itemValueString(selectedItem) === input)
             let enableHighlighting = true;
             if (onlySelectItemReturned) {
                 // If the auto-completion only returns no suggestion or the selected item itself, query with empty string.
@@ -319,7 +318,7 @@ export function AutoCompleteField<T extends any, U extends any>(props: IAutoComp
         }
     };
     // Resets the selection
-    const clearSelection = (resetValue: U) => () => {
+    const clearSelection = (resetValue: UPDATE_VALUE) => () => {
         setSelectedItem(undefined);
         onChange?.(resetValue);
         setQuery("");
@@ -350,6 +349,7 @@ export function AutoCompleteField<T extends any, U extends any>(props: IAutoComp
         position: "bottom",
         popoverClassName: `${eccgui}-autocompletefield__options`,
         wrapperTagName: "div",
+        boundary: "window",
         onClosed: onPopoverClose,
         ...otherProps.popoverProps,
     }
@@ -362,7 +362,7 @@ export function AutoCompleteField<T extends any, U extends any>(props: IAutoComp
     const createNewItemProps = createNewItem ? {
         createNewItemFromQuery: createNewItem.itemFromQuery,
         createNewItemRenderer: (query: string, active: boolean, handleClick: React.MouseEventHandler<HTMLElement>) => {
-            if(selectedItem && query === itemValueSelector(selectedItem)) {
+            if(selectedItem && query === itemValueString(selectedItem)) {
                 // Never show create new item option if the same item is already selected
                 return undefined
             } else {

package/src/components/AutocompleteField/autoCompleteFieldUtils.tsx

@@ -2,6 +2,7 @@ import React from "react";
 import {IElementWidth, IRenderModifiers} from "./AutoCompleteField";
 import OverflowText from "../Typography/OverflowText";
 import MenuItem from "../Menu/MenuItem";
+import {ValidIconName} from "../Icon/canonicalIconNames";
 
 /** Returns a function to be used in an AutoComplete widget for rendering custom elements based on the query string.
  *
@@ -10,7 +11,7 @@ import MenuItem from "../Menu/MenuItem";
  */
 export const createNewItemRendererFactory = (
     itemTextRenderer: (query: string, styleWidth: IElementWidth) => string | JSX.Element,
-    iconName?: string) => {
+    iconName?: ValidIconName) => {
     // Return custom render function
     return (query: string, modifiers: IRenderModifiers, handleClick: React.MouseEventHandler<HTMLElement>) => {
         let textElement = itemTextRenderer(query, modifiers.styleWidth)

package/src/components/Button/Button.tsx

@@ -9,6 +9,7 @@ import {
 import Icon from "../Icon/Icon";
 import Tooltip, { TooltipProps } from "./../Tooltip/Tooltip";
 import { CLASSPREFIX as eccgui } from "../../configuration/constants";
+import {ValidIconName} from "../Icon/canonicalIconNames";
 
 export type AnchorOrButtonProps = Omit<BlueprintButtonProps, "elementRef" | "icon" | "rightIcon"> | Omit<BlueprintAnchorButtonProps, "elementRef" | "icon" | "rightIcon">;
 
@@ -56,8 +57,8 @@ export interface ButtonProps extends React.HTMLAttributes<HTMLElement> {
     * If an URL is set then the button is included as HTML anchor element instead of a button form element.
     */
     href?: string;
-    icon?: string | JSX.Element;
-    rightIcon?: string | JSX.Element;
+    icon?: ValidIconName | JSX.Element;
+    rightIcon?: ValidIconName | JSX.Element;
     target?: string;
 }
 

package/src/components/ContextOverlay/ContextMenu.tsx

@@ -3,6 +3,12 @@ import { CLASSPREFIX as eccgui } from "../../configuration/constants";
 import ContextOverlay from "./ContextOverlay";
 import Menu from "../Menu/Menu";
 import IconButton from "../Icon/IconButton";
+import {ValidIconName} from "../Icon/canonicalIconNames";
+
+interface ContextMenuProps {
+    togglerElement?: ValidIconName | JSX.Element
+    [key: string]: any
+}
 
 function ContextMenu({
     children,
@@ -14,13 +20,13 @@ function ContextMenu({
               so by default we use the title attribute instead of Tooltip. */
     tooltipAsTitle = true,
     ...restProps
-}: any) {
+}: ContextMenuProps) {
     return (
         <ContextOverlay {...restProps} className={`${eccgui}-contextmenu ` + className}>
             {typeof togglerElement === "string" ? (
                 <IconButton
                     tooltipAsTitle={tooltipAsTitle}
-                    name={togglerElement}
+                    name={[togglerElement]}
                     text={togglerText}
                     large={togglerLarge}
                     data-test-id={restProps["data-test-id"]}