@eccenca/gui-elements 22.1.0 → 23.0.0-rc.2

package/src/cmem/react-flow/configuration/customLabel.ts

@@ -0,0 +1,11 @@
+import { EdgeDefault } from "./../../../extensions/react-flow/edges/EdgeDefault";
+import { NodeDefault } from "./../../../extensions/react-flow/nodes/NodeDefault";
+
+export const edgeTypes = {
+    default: EdgeDefault,
+    straight: EdgeDefault,
+};
+
+export const nodeTypes = {
+    default: NodeDefault,
+};

package/src/cmem/react-flow/configuration/graph.ts

@@ -1,6 +1,5 @@
 import { EdgeDefault } from "./../../../extensions/react-flow/edges/EdgeDefault";
 import { NodeDefault } from "./../../../extensions/react-flow/nodes/NodeDefault";
-import colors from "./_colors-graph.module.scss";
 
 const edgeTypes = {
     default: EdgeDefault,
@@ -25,5 +24,4 @@ const nodeTypes = {
  export {
      edgeTypes,
      nodeTypes,
-     colors,
  }

package/src/cmem/react-flow/configuration/inverseEdge.ts

@@ -0,0 +1,11 @@
+import { EdgeDefault } from "./../../../extensions/react-flow/edges/EdgeDefault";
+import { NodeDefault } from "./../../../extensions/react-flow/nodes/NodeDefault";
+
+export const edgeTypes = {
+    default: EdgeDefault,
+    straight: EdgeDefault,
+};
+
+export const nodeTypes = {
+    default: NodeDefault,
+};

package/src/cmem/react-flow/configuration/linking.ts

@@ -1,7 +1,6 @@
 
 import { EdgeStep } from "./../../../extensions/react-flow/edges/EdgeStep";
 import { NodeDefault } from "./../../../extensions/react-flow/nodes/NodeDefault";
-import colors from "./_colors-linking.module.scss";
 
 const edgeTypes = {
     default: EdgeStep,
@@ -24,5 +23,4 @@ const nodeTypes = {
  export {
      edgeTypes,
      nodeTypes,
-     colors,
  }

package/src/cmem/react-flow/configuration/workflow.ts

@@ -1,6 +1,5 @@
 import { EdgeStep } from "./../../../extensions/react-flow/edges/EdgeStep";
 import { NodeDefault } from "./../../../extensions/react-flow/nodes/NodeDefault";
-import colors from "./_colors-workflow.module.scss";
 
 const edgeTypes = {
     default: EdgeStep,
@@ -21,5 +20,4 @@ const nodeTypes = {
  export {
      edgeTypes,
      nodeTypes,
-     colors,
  }

package/src/common/utils/CssCustomProperties.ts

@@ -0,0 +1,135 @@
+/**
+ * Based on CSS Tricks tutorial.
+ * @see https://css-tricks.com/how-to-get-all-custom-properties-on-a-page-in-javascript/
+ */
+
+type AllowedCSSRule = CSSStyleRule | CSSPageRule; // they have necessary `selectorText` and `style` properties
+
+interface getLocalCssStyleRulesProps {
+    cssRuleType?: "CSSStyleRule" | "CSSPageRule";
+    selectorText?: string;
+}
+interface getLocalCssStyleRulePropertiesProps extends getLocalCssStyleRulesProps {
+    propertyType?: "all" | "normal" | "custom";
+}
+interface getCustomPropertiesProps extends getLocalCssStyleRulesProps {
+    removeDashPrefix?: boolean;
+    returnObject?: boolean;
+}
+
+export default class CssCustomProperties {
+
+    getterDefaultProps = {} as getCustomPropertiesProps;
+    customprops = {};
+
+    constructor(props: getCustomPropertiesProps = {}) {
+        this.getterDefaultProps = props;
+    }
+
+    // Methods
+
+    customProperties = (props: getCustomPropertiesProps = {}) => {
+        // FIXME:
+        // in case of performance issues results should get saved at least into intern variables
+        // other cache strategies could be also tested
+        if (Object.keys(this.customprops).length > 1) {
+            return this.customprops;
+        }
+        const customprops = CssCustomProperties.listCustomProperties({
+            ...this.getterDefaultProps,
+            ...props
+        });
+        this.customprops = customprops;
+        return customprops;
+    }
+
+    static listLocalStylesheets = (): CSSStyleSheet[] => {
+        if (document && document.styleSheets) {
+            return (Array.from(document.styleSheets) as CSSStyleSheet[])
+                .filter((stylesheet) => {
+                    // is inline stylesheet or from same domain
+                    if (!stylesheet.href) {
+                        return true;
+                    }
+                    return stylesheet.href.indexOf(window.location.origin) === 0;
+                });
+        }
+
+        return [] as CSSStyleSheet[];
+    }
+
+    static listLocalCssRules = (): CSSRule[] => {
+        return CssCustomProperties.listLocalStylesheets()
+            .map((stylesheet) => {
+                return Array.from(stylesheet.cssRules);
+            })
+            .flat();
+    }
+
+    static listLocalCssStyleRules = (filter: getLocalCssStyleRulesProps = {}): AllowedCSSRule[] => {
+        const {cssRuleType = "CSSStyleRule", selectorText} = filter;
+        const cssStyleRules = CssCustomProperties.listLocalCssRules()
+            .filter((rule) => {
+                const cssrule = rule as AllowedCSSRule;
+                if((cssrule).style) {
+                    if (cssrule.constructor.name !== cssRuleType) {
+                        return false;
+                    }
+                    if (!!selectorText && cssrule.selectorText !== selectorText) {
+                        return false;
+                    }
+                    return true;
+                } else {
+                    return false;
+                }
+            })
+        return cssStyleRules as AllowedCSSRule[]
+    }
+
+    static listLocalCssStyleRuleProperties = (filter: getLocalCssStyleRulePropertiesProps = {}) => {
+        const { propertyType = "all", ...otherFilters } = filter;
+        return CssCustomProperties.listLocalCssStyleRules(otherFilters)
+            .map((cssrule) => {
+                return [...cssrule.style]
+                    .map((propertyname) => {
+                        return [
+                            propertyname.trim(),
+                            cssrule.style.getPropertyValue(propertyname).trim()
+                        ];
+                    });
+            })
+            .flat()
+            .filter((declaration) => {
+                switch(propertyType) {
+                    case "normal":
+                        return declaration[0].indexOf("--") !== 0;
+                    case "custom":
+                        return declaration[0].indexOf("--") === 0;
+                }
+                return true; // case "all"
+            });
+    }
+
+    static listCustomProperties = (props: getCustomPropertiesProps = {}) => {
+        const {
+            removeDashPrefix = true,
+            returnObject = true,
+            ...filterProps
+        } = props;
+
+        const customProperties = CssCustomProperties.listLocalCssStyleRuleProperties({
+            ...filterProps,
+            propertyType: "custom",
+        }).map((declaration) => {
+            if (removeDashPrefix) {
+                return [
+                    declaration[0].substr(2),
+                    declaration[1]
+                ];
+            }
+            return declaration;
+        });
+
+        return returnObject ? Object.fromEntries(customProperties) : customProperties;
+    }
+}

package/src/common/utils/getColorConfiguration.ts

@@ -0,0 +1,21 @@
+import CssCustomProperties from "./CssCustomProperties";
+import { CLASSPREFIX as eccgui } from "../../configuration/constants";
+
+// Configurations can be found in `src/cmem/react-flow/configuration/_colors-*.scss`
+type colorconfigs = "react-flow-graph" | "react-flow-linking" | "react-flow-workflow";
+
+/**
+ * Read and returns color values provided by CSS custom properties.
+ * They are defined for special CSS classes.
+ * Currently color configurations for the react flow editors are supported.
+ **/
+const getColorConfiguration = (configId: colorconfigs) => {
+    return new CssCustomProperties({
+        selectorText: `.${eccgui}-configuration--colors__${configId}`,
+        cssRuleType: "CSSStyleRule",
+        removeDashPrefix: true,
+        returnObject: true,
+    }).customProperties();
+};
+
+export default getColorConfiguration;

package/src/components/Accordion/accordion.scss

@@ -32,9 +32,16 @@
 .#{$prefix}--accordion__content {
     padding: $eccgui-size-block-whitespace / 2;
     margin: 0 calc(1rem + #{$eccgui-size-block-whitespace / 2}) 0 $eccgui-size-block-whitespace / 2;
+    display: block;
+    opacity: 0;
+    position: fixed;
+    left: -5000em;
 
     .#{$prefix}--accordion__item--active & {
         padding: $eccgui-size-block-whitespace / 2 $eccgui-size-block-whitespace / 2 $eccgui-size-block-whitespace $eccgui-size-block-whitespace / 2;
+        opacity: 1;
+        position: static;
+        left: auto;
     }
 
     .#{$prefix}--accordion--start & {

package/src/components/AutoSuggestion/AutoSuggestion.tsx

@@ -1,4 +1,4 @@
-import React, {useCallback, useEffect, useState} from "react";
+import React, {useEffect, useMemo, useState} from "react";
 import CodeMirror from "codemirror";
 import {FieldItem, IconButton, Spinner, Toolbar, ToolbarSection} from "./../../";
 import {Classes as BlueprintClassNames} from "@blueprintjs/core";
@@ -235,7 +235,7 @@ const AutoSuggestion = ({
         editorState.index = 0
     }, [suggestionResponse, editorState]);
 
-    const asyncCheckInput = async (inputString: string) => {
+    const asyncCheckInput = useMemo(() => async (inputString: string) => {
         if(!checkInput) {
             return
         }
@@ -249,16 +249,29 @@ const AutoSuggestion = ({
         } finally {
             setPathValidationPending(false)
         }
-    }
+    }, [checkInput])
 
-    const checkValuePathValidity = useCallback(
-        debounce((inputString: string) => asyncCheckInput(inputString), 200),
-        [checkInput]
+    const checkValuePathValidity = useMemo(
+        () => debounce((inputString: string) => asyncCheckInput(inputString), 1000),
+        [asyncCheckInput]
     )
 
-    const handleEditorInputChange = useCallback(
-        debounce((inputString: string, cursorPosition: number) => asyncHandleEditorInputChange(inputString, cursorPosition), 200),
-        [fetchSuggestions]
+    const asyncHandleEditorInputChange = useMemo(() => async (inputString: string, cursorPosition: number) => {
+        setSuggestionsPending(true)
+        try {
+            const result: IPartialAutoCompleteResult | undefined = await fetchSuggestions(inputString, cursorPosition)
+            setSuggestionResponse(result)
+        } catch(e) {
+            setSuggestionResponse(undefined)
+            // TODO: Error handling
+        } finally {
+            setSuggestionsPending(false)
+        }
+    }, [fetchSuggestions])
+
+    const handleEditorInputChange = useMemo(() =>
+        debounce((inputString: string, cursorPosition: number) => asyncHandleEditorInputChange(inputString, cursorPosition), 1000),
+        [asyncHandleEditorInputChange]
     )
 
     React.useEffect(() => {
@@ -276,19 +289,6 @@ const AutoSuggestion = ({
         return checkValuePathValidity.cancel
     }, [value, checkValuePathValidity])
 
-    const asyncHandleEditorInputChange = async (inputString: string, cursorPosition: number) => {
-        setSuggestionsPending(true)
-        try {
-            const result: IPartialAutoCompleteResult | undefined = await fetchSuggestions(inputString, cursorPosition)
-            setSuggestionResponse(result)
-        } catch(e) {
-            setSuggestionResponse(undefined)
-            // TODO: Error handling
-        } finally {
-            setSuggestionsPending(false)
-        }
-    }
-
     const handleChange = (val: string) => {
         setValue(val);
         onChange(val)
@@ -427,7 +427,7 @@ const AutoSuggestion = ({
 
     return label ? (
         <FieldItem
-            labelAttributes={{
+            labelProps={{
                 text: (
                     <>
                         {label}

package/src/components/AutoSuggestion/AutoSuggestionList.tsx

@@ -143,23 +143,21 @@ export const AutoSuggestionList = ({
                     {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);
-                                    }
-                                },
+                            active={currentlyFocusedIndex === index}
+                            onMouseDown={(e: any) => 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);
+                                }
                             }}
                         />
                     ))}

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

@@ -84,7 +84,7 @@ describe("Dropdown list", () => {
             options: mockOptions
         }
         const {container} = render(<AutoSuggestionList {...props} />)
-        const activeListItems = Array.from(container.querySelectorAll("li .bp3-menu-item.bp3-active"))
+        const activeListItems = Array.from(container.querySelectorAll("li .bp4-menu-item.bp4-active"))
         expect(activeListItems.length).toBe(1)
     })
 

package/src/components/AutocompleteField/AutoCompleteField.tsx

@@ -1,7 +1,22 @@
 import React, {useEffect, useRef, useState} from "react";
-import {HTMLInputProps, IInputGroupProps, InputGroupProps, IPopoverProps, IRefObject} from "@blueprintjs/core";
-import {Suggest} from "@blueprintjs/select";
-import {Highlighter, IconButton, Menu, MenuItem, OverflowText, Spinner} from "../../index";
+import {
+    HTMLInputProps as BlueprintHTMLInputProps,
+    InputGroupProps as BlueprintInputGroupProps,
+    IRefObject
+} from "@blueprintjs/core";
+import {
+    Suggest2 as Suggest
+} from "@blueprintjs/select";
+import {
+    Highlighter,
+    IconButton,
+    Menu,
+    Notification,
+    MenuItem,
+    OverflowText,
+    Spinner,
+    ContextOverlayProps,
+} from "../../index";
 import {CLASSPREFIX as eccgui} from "../../configuration/constants";
 
 type SearchFunction<T extends any> = (value: string) => T[];
@@ -70,12 +85,12 @@ export interface IAutoCompleteFieldProps<T extends any, UPDATE_VALUE extends any
      * `query` and `onQueryChange` instead of `inputProps.value` and
      * `inputProps.onChange`.
      */
-    inputProps?: IInputGroupProps & HTMLInputProps;
+    inputProps?: BlueprintInputGroupProps & BlueprintHTMLInputProps;
 
     /**
-     * Optional props of the BlueprintJs specific popover element.
+     * Optional props of the internally used `<ContextOverlay/>` element..
      */
-    popoverProps?: Partial<IPopoverProps>
+    contextOverlayProps?: Partial<Omit<ContextOverlayProps, "content" | "children">>
 
     /** Defines if a value can be reset, i.e. a reset icon is shown and the value is set to a specific value.
      *  When undefined, a value cannot be reset.
@@ -122,6 +137,9 @@ export interface IAutoCompleteFieldProps<T extends any, UPDATE_VALUE extends any
      * @param selectedValue The currently selected value.
      */
     resetQueryToValue?(selectedValue: T): string
+
+    /** If an error occurs during the auto-completion request, the error details will be prefixed with this string. */
+    requestErrorPrefix?: string
 }
 
 AutoCompleteField.defaultProps = {
@@ -160,6 +178,7 @@ export function AutoCompleteField<T extends any, UPDATE_VALUE extends any>(props
         itemValueRenderer,
         resetQueryToValue,
         itemValueString,
+        requestErrorPrefix = "",
         ...otherProps
     } = props;
     const [selectedItem, setSelectedItem] = useState<T | undefined>(initialValue);
@@ -169,11 +188,12 @@ export function AutoCompleteField<T extends any, UPDATE_VALUE extends any>(props
     const [query, setQuery] = useState<string>("");
     const [hasFocus, setHasFocus] = useState<boolean>(false);
     const [highlightingEnabled, setHighlightingEnabled] = useState<boolean>(true);
+    const [requestError, setRequestError] = useState<string | undefined>(undefined)
 
     // The suggestions that match the user's input
     const [filtered, setFiltered] = useState<T[]>([]);
 
-    const SuggestAutocomplete = Suggest.ofType<T>();
+    const BlueprintSuggestAutocomplete = Suggest.ofType<T>();
 
     // Sets the query to the item value if it has a valid string value
     const setQueryToSelectedValue = (item?: T) => {
@@ -262,6 +282,7 @@ export function AutoCompleteField<T extends any, UPDATE_VALUE extends any>(props
     // Fetches the results for the given query
     const fetchQueryResults = async (input: string) => {
         setListLoading(true);
+        setRequestError(undefined)
         try {
             let result = await onSearch(input);
             const onlySelectItemReturned = result.length <= 1 && selectedItem && input.length > 0 &&
@@ -282,8 +303,9 @@ export function AutoCompleteField<T extends any, UPDATE_VALUE extends any>(props
             }
             setHighlightingEnabled(enableHighlighting);
             setFiltered(result);
-        } catch (e) {
-            console.log(e);
+        } catch (e: any) {
+            const details = e?.message ?? ""
+            setRequestError(requestErrorPrefix + details)
         } finally {
             setListLoading(false);
         }
@@ -325,6 +347,9 @@ export function AutoCompleteField<T extends any, UPDATE_VALUE extends any>(props
         onChange?.(resetValue);
         setQuery("");
     };
+    const requestErrorRenderer = () => {
+        return <Notification danger={true} message={requestError} />
+    }
     // Optional clear button to reset the selected value
     const clearButton = reset &&
         selectedItem != null &&
@@ -339,21 +364,20 @@ export function AutoCompleteField<T extends any, UPDATE_VALUE extends any>(props
             />
         ) : undefined;
     // Additional properties for the input element of the auto-completion widget
-    const updatedInputProps: InputGroupProps & HTMLInputProps = {
+    const updatedInputProps: BlueprintInputGroupProps & BlueprintHTMLInputProps = {
         rightElement: clearButton,
         autoFocus: autoFocus,
         onBlur: handleOnFocusOut,
         onFocus: handleOnFocusIn,
         ...otherProps.inputProps,
     };
-    const updatedPopOverProps: Partial<IPopoverProps> = {
+    const updatedContextOverlayProps: Partial<Omit<ContextOverlayProps, "content" | "children">> = {
         minimal: true,
-        position: "bottom-left",
+        placement: "bottom-start",
         popoverClassName: `${eccgui}-autocompletefield__options`,
-        wrapperTagName: "div",
-        boundary: "window",
+        rootBoundary: "viewport",
         onClosed: onPopoverClose,
-        ...otherProps.popoverProps,
+        ...otherProps.contextOverlayProps,
     }
     if(selectedItem !== undefined) {
         // Makes sure that even when an empty string is selected, the placeholder won't be shown.
@@ -375,12 +399,13 @@ export function AutoCompleteField<T extends any, UPDATE_VALUE extends any>(props
     } : {}
     return (
         <div ref={fieldRef}>
-            <SuggestAutocomplete
+            <BlueprintSuggestAutocomplete
                 className={`${eccgui}-autocompletefield__input`}
                 disabled={disabled}
-                items={filtered}
+                // Need to display error messages in list
+                items={requestError ? [requestError as T] : filtered}
                 inputValueRenderer={selectedItem !== undefined ? itemValueRenderer : () => ""}
-                itemRenderer={optionRenderer}
+                itemRenderer={requestError ? requestErrorRenderer : optionRenderer}
                 itemsEqual={areEqualItems}
                 noResults={<MenuItem disabled={true} text={noResultText} style={fieldWidthLimits} />}
                 onItemSelect={onSelectionChange}
@@ -388,7 +413,7 @@ export function AutoCompleteField<T extends any, UPDATE_VALUE extends any>(props
                 closeOnSelect={true}
                 query={query}
                 // This leads to odd compile errors without "as any"
-                popoverProps={updatedPopOverProps as any}
+                popoverProps={updatedContextOverlayProps as any}
                 selectedItem={selectedItem}
                 fill
                 {...createNewItemProps}

package/src/components/AutocompleteField/autocompletefield.scss

@@ -1,6 +1,8 @@
 .#{$eccgui}-autocompletefield__options {
-    .#{$ns}-menu {
-        max-height: 45vh;
-        overflow: auto;
+    .#{$ns}-select-popover {
+        .#{$ns}-menu {
+            max-height: 45vh;
+            overflow: auto;
+        }
     }
 }

package/src/components/AutocompleteField/stories/AutoCompleteField.stories.tsx

@@ -0,0 +1,75 @@
+import React from "react";
+import {ComponentMeta, ComponentStory} from "@storybook/react";
+
+import {AutoCompleteField, IAutoCompleteFieldProps} from "../AutoCompleteField";
+import {extractSearchWords, matchesAllWords} from "../../Typography/Highlighter";
+import {createNewItemRendererFactory} from "../autoCompleteFieldUtils";
+
+const AutoCompleteFieldStory: ComponentMeta<typeof AutoCompleteField> = {
+    title: "Components/AutoCompleteField",
+    component: AutoCompleteField,
+    argTypes: {
+    },
+}
+
+const Template: ComponentStory<typeof AutoCompleteField> = (args) => (
+    <AutoCompleteField {...args}></AutoCompleteField>
+);
+
+export const Default = Template.bind({});
+export const AdaptQueryAfterSelection = Template.bind({})
+export const AllowReset = Template.bind({})
+export const AllowCustomValues = Template.bind({})
+
+// Renders string values as string
+const defaultRenderer = (item: string) => item
+
+const defaultArgs: IAutoCompleteFieldProps<string, string> = {
+    itemRenderer: (item: string) => `Rendered item: ${item}`,
+    itemValueRenderer: (item: string) => `Selected item: ${item}`,
+    itemValueString: (item: string) => `Query: ${item}`,
+    onSearch: (query: string) => {
+        const multiWord = extractSearchWords(query, true)
+        return ["search item A", "search element B", "search object C"]
+            .filter(word => matchesAllWords(word.toLowerCase(), multiWord))
+    },
+    onChange: elem => {
+        console.log(`Entry '${elem}' selected!`)
+    },
+    itemValueSelector: defaultRenderer,
+    noResultText: "No result"
+}
+
+// Changes the search query for the selected item, e.g. when the rendered item text should be different from the query finding this item.
+const adaptQueryAfterSelection: IAutoCompleteFieldProps<string, string> = {
+    ...defaultArgs,
+    resetQueryToValue: (selectedValue: string) => selectedValue
+}
+
+// Allows to reset a selection
+const resetSelection: IAutoCompleteFieldProps<string, string> = {
+    ...defaultArgs,
+    reset: {
+        resetValue: "",
+        resetButtonText: "Clear selected value",
+        resettableValue: (value: string) => true
+    }
+}
+
+const allowCustomValues: IAutoCompleteFieldProps<string, string> = {
+    ...defaultArgs,
+    createNewItem: {
+        itemRenderer: createNewItemRendererFactory(
+            (query: string) => `Create new item: ${query}`,
+            "item-add-artefact"
+        ),
+        itemFromQuery: item => item,
+    }
+}
+
+Default.args = defaultArgs;
+AdaptQueryAfterSelection.args = adaptQueryAfterSelection
+AllowReset.args = resetSelection
+AllowCustomValues.args = allowCustomValues
+
+export default AutoCompleteFieldStory

package/src/components/Button/Button.tsx

@@ -52,7 +52,7 @@ export interface ButtonProps extends React.HTMLAttributes<HTMLElement> {
     /**
     * Object with additional properties for the tooltip.
     */
-    tooltipProperties?: Partial<Omit<TooltipProps, "content" | "children">>;
+    tooltipProps?: Partial<Omit<TooltipProps, "content" | "children">>;
     /**
     * If an URL is set then the button is included as HTML anchor element instead of a button form element.
     */
@@ -79,7 +79,7 @@ function Button({
   icon,
   rightIcon,
   tooltip = null,
-  tooltipProperties,
+  tooltipProps,
   ...restProps
 }: ButtonProps & AnchorOrButtonProps) {
   let intention;
@@ -117,7 +117,7 @@ function Button({
   );
 
   return (tooltip && !restProps.loading) ? (
-    <Tooltip content={tooltip} {...tooltipProperties}>
+    <Tooltip content={tooltip} {...tooltipProps}>
       <span>{button}</span>
     </Tooltip>
   ) : (

package/src/components/ContextOverlay/ContextMenu.stories.tsx

@@ -0,0 +1,30 @@
+import React from "react";
+import { ComponentStory, ComponentMeta } from "@storybook/react";
+
+import {
+  ContextMenu,
+  MenuItem,
+} from "../../index";
+
+export default {
+  title: "Components/ContextMenu",
+  component: ContextMenu,
+  subcomponents: { MenuItem },
+  argTypes: {
+      children: {
+          control: "none",
+      }
+  },
+} as ComponentMeta<typeof ContextMenu>;
+
+const Template: ComponentStory<typeof ContextMenu> = (args) => (
+    <ContextMenu {...args} />
+);
+
+export const Default = Template.bind({});
+Default.args = {
+    children: [
+        <MenuItem key="m0" text={"First option"} />,
+        <MenuItem key="m1" text={"Item two"} />
+    ]
+}