@eccenca/gui-elements 23.1.0 → 23.2.0-rc.1

package/src/components/Card/Card.tsx

@@ -34,7 +34,7 @@ export interface CardProps extends BlueprintCardProps {
  * Element to separate content sections from each other.
  * Cards can include other cards but should not.
  */
-function Card({
+export const Card = ({
     children,
     className='',
     elevation=1,
@@ -45,7 +45,7 @@ function Card({
     whitespaceAmount="medium",
     interactive,
     ...otherProps
-}: CardProps) {
+}: CardProps) => {
     const scrollIn = !!scrollinOnFocus ? {
         tabIndex: 0,
         onFocus: (e: any) => {

package/src/components/Card/CardActions.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import { CLASSPREFIX as eccgui } from "../../configuration/constants";
 
-export interface OverviewItemProps extends React.HTMLAttributes<HTMLDivElement> {
+export interface CardActionsProps extends React.HTMLAttributes<HTMLDivElement> {
     /**
      * Set an inverse direction of how the elements are aligned.
      * Mainly used for cards used as modals (dialogs).
@@ -13,12 +13,12 @@ export interface OverviewItemProps extends React.HTMLAttributes<HTMLDivElement>
  * Contains a footer with user-interaction elements like buttons for the `Card` element.
  * Content must be ordered by importance, so the main action comes before other actions.
  */
-function CardActions ({
+export const CardActions = ({
     children,
     className='',
     inverseDirection=false,
     ...otherProps
-}: OverviewItemProps) {
+}: CardActionsProps) => {
     return (
         <footer
             {...otherProps}

package/src/components/Card/CardActionsAux.tsx

@@ -1,18 +1,17 @@
 import React from 'react';
 import { CLASSPREFIX as eccgui } from "../../configuration/constants";
 
-export interface OverviewItemProps extends React.HTMLAttributes<HTMLDivElement> {
-}
+export interface CardActionsAuxProps extends React.HTMLAttributes<HTMLDivElement> {};
 
 /**
  * Additional side buttons inside `CardActions`.
  * Elements are aligned to the other side of the container.
  */
-function CardActionsAux ({
+export const CardActionsAux = ({
     children,
     className='',
     ...otherProps
-}: OverviewItemProps) {
+}: CardActionsAuxProps) => {
     return (
         <div
             {...otherProps}

package/src/components/Card/CardContent.tsx

@@ -14,12 +14,12 @@ export interface CardContentProps extends React.HTMLAttributes<HTMLDivElement> {
  * Holds the card content.
  * Display scrollbars in case there is not enough space for it.
  */
-function CardContent({
+export const CardContent = ({
     children,
     className='',
     noFlexHeight,
     ...otherProps
-}: CardContentProps) {
+}: CardContentProps) => {
     return (
         <div
             {...otherProps}

package/src/components/Card/CardHeader.tsx

@@ -5,7 +5,7 @@ import { CLASSPREFIX as eccgui } from "../../configuration/constants";
 import CardTitle from "./CardTitle";
 import CardOptions from "./CardOptions";
 
-interface CardHeaderProps extends Omit<OverviewItemProps, "densityHigh" | "hasSpacing"> {
+export interface CardHeaderProps extends Omit<OverviewItemProps, "densityHigh" | "hasSpacing"> {
     children: JSX.Element | (JSX.Element | undefined | null)[] | null | undefined;
     /**
      * @deprecated
@@ -17,12 +17,12 @@ interface CardHeaderProps extends Omit<OverviewItemProps, "densityHigh" | "hasSp
     hasSpacing?: OverviewItemProps["hasSpacing"];
 }
 
-function CardHeader({
+export const CardHeader = ({
     children,
     className = "",
     densityHigh = true,
     ...otherProps
-}: CardHeaderProps) {
+}: CardHeaderProps) => {
     let actions: any[] = [];
     let description: any[] = [];
 

package/src/components/Card/CardOptions.tsx

@@ -2,20 +2,18 @@ import React from 'react';
 import OverviewItemActions, { OverviewItemActionsProps } from './../OverviewItem/OverviewItemActions';
 import { CLASSPREFIX as eccgui } from "../../configuration/constants";
 
-interface CardOptionsProps extends Omit<OverviewItemActionsProps, "hiddenInteractions"> {
-
-}
+export interface CardOptionsProps extends Omit<OverviewItemActionsProps, "hiddenInteractions"> {};
 
 /**
  * Container for elements that allow user-interaction, e.g. buttons or context menus.
  * Can contain multiple of them.
  * Is displayed right-aligned in the `CardHeader`.
  */
-function CardOptions({
+export const CardOptions = ({
     children,
     className='',
     ...otherProps
-}: CardOptionsProps) {
+}: CardOptionsProps) => {
     return (
         <OverviewItemActions
             {...otherProps}

package/src/components/Card/CardTitle.tsx

@@ -12,12 +12,12 @@ export interface CardTitleProps extends Omit<OverviewItemLineProps, "small" | "l
 /**
  * Display a card title, can include other markup like `h2`, `h3` and so on to define document structure.
  */
-function CardTitle({
+export const CardTitle = ({
     children,
     className='',
     narrowed=false,
     ...otherProps
-}: CardTitleProps) {
+}: CardTitleProps) => {
     return (
         <OverviewItemLine
             {...otherProps}

package/src/components/Card/index.tsx

@@ -1,17 +1,7 @@
-import Card from './Card';
-import CardHeader from './CardHeader';
-import CardTitle from './CardTitle';
-import CardOptions from './CardOptions';
-import CardContent from './CardContent';
-import CardActions from './CardActions';
-import CardActionsAux from './CardActionsAux';
-
-export {
-    Card,
-    CardHeader,
-    CardTitle,
-    CardOptions,
-    CardContent,
-    CardActions,
-    CardActionsAux,
-};
+export * from './Card';
+export * from './CardHeader';
+export * from './CardTitle';
+export * from './CardOptions';
+export * from './CardContent';
+export * from './CardActions';
+export * from './CardActionsAux';

package/src/components/Checkbox/Checkbox.tsx

@@ -5,15 +5,15 @@ import {
 } from "@blueprintjs/core";
 import { CLASSPREFIX as eccgui } from "../../configuration/constants";
 
-interface CheckboxProps extends BlueprintCheckboxProps {
+export interface CheckboxProps extends BlueprintCheckboxProps {
     // currently we do not alter it
 };
 
-function Checkbox({
+export const Checkbox = ({
     children,
     className='',
     ...restProps
-}: CheckboxProps) {
+}: CheckboxProps) => {
     return (
         <BlueprintCheckbox
             {...restProps}

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

@@ -0,0 +1,89 @@
+import React from "react";
+import { Meta, StoryFn } from "@storybook/react";
+
+import { CodeAutocompleteField, CodeAutocompleteFieldProps } from "../../../index";
+import { IPartialAutoCompleteResult } from "../AutoSuggestion/AutoSuggestion";
+
+export default {
+    title: "Forms/CodeAutocompleteField",
+    component: CodeAutocompleteField,
+    argTypes: {},
+} as Meta<typeof CodeAutocompleteField>;
+
+const Template: StoryFn<typeof CodeAutocompleteField> = (args) => (
+    <CodeAutocompleteField {...args}></CodeAutocompleteField>
+);
+
+const resultList = ["find me", "item", "auto-completion result"];
+
+const defaultProps: CodeAutocompleteFieldProps = {
+    initialValue: "",
+    fetchSuggestions(
+        inputString: string,
+        cursorPosition: number
+    ): IPartialAutoCompleteResult | undefined | Promise<IPartialAutoCompleteResult | undefined> {
+        const stringBeforeCursor = inputString.substring(0, cursorPosition);
+        const lastSpaceIdx = stringBeforeCursor.lastIndexOf(" ");
+        const searchWordStart = lastSpaceIdx >= 0 ? lastSpaceIdx + 1 : 0;
+        const lastWordBeforeCursor = stringBeforeCursor
+            .substring(searchWordStart, stringBeforeCursor.length)
+            .toLowerCase()
+            .trim();
+        const replacements = resultList.filter((item) => item.toLowerCase().includes(lastWordBeforeCursor));
+        if (replacements.length) {
+            return {
+                cursorPosition: cursorPosition,
+                inputString: inputString,
+                replacementResults: [
+                    {
+                        extractedQuery: lastWordBeforeCursor,
+                        replacementInterval: {
+                            from: searchWordStart,
+                            length: lastWordBeforeCursor.length,
+                        },
+                        replacements: replacements.map((v) => ({
+                            label: `Label of '${v}'`,
+                            description: `Description of '${v}'`,
+                            value: v,
+                        })),
+                    },
+                ],
+            };
+        }
+    },
+    placeholder:
+        "The word before the cursor will be auto-completed. At the beginning or after a space, all results are shown.",
+    onChange(): any {
+        // Do nothing
+    },
+};
+
+/** Offers basic auto-completion for the word right before the cursor. */
+export const Default = Template.bind({});
+
+Default.args = defaultProps;
+
+/** Shows validation error if the input string contains the word 'not'. */
+export const WithValidation = Template.bind({});
+
+WithValidation.args = {
+    ...defaultProps,
+    initialValue: "Contains not",
+    checkInput: (inputString) => {
+        const notIndex = inputString.indexOf("not");
+        if (notIndex >= 0) {
+            return {
+                valid: false,
+                parseError: {
+                    message: "Strings containing the sub-string 'not' are NOT allowed.",
+                    start: notIndex,
+                    end: notIndex + 3,
+                },
+            };
+        } else {
+            return {
+                valid: true,
+            };
+        }
+    },
+};

package/src/components/CodeAutocompleteField/CodeAutocompleteField.tsx

@@ -0,0 +1,22 @@
+import React from "react";
+
+import { CLASSPREFIX as eccgui } from "../../configuration/constants";
+import { AutoSuggestion, AutoSuggestionProps } from "../AutoSuggestion/AutoSuggestion";
+
+export type CodeAutocompleteFieldProps = AutoSuggestionProps;
+
+/**
+ * Input component that allows partial, fine-grained auto-completion, i.e. of sub-strings of the input string.
+ * This is comparable to a one line code editor.
+ *
+ * Example usage: input of a path string offering auto-completion for each single part of the path.
+ */
+export function CodeAutocompleteField({ className, ...otherProps }: CodeAutocompleteFieldProps) {
+    // Currently this works only as an alias element for `MultiSelect`.
+    return (
+        <AutoSuggestion
+            className={`${eccgui}-codeautocompletefield` + (className ? ` ${className}` : "")}
+            {...otherProps}
+        />
+    );
+}

package/src/components/CodeAutocompleteField/index.ts

@@ -0,0 +1 @@
+export * from "./CodeAutocompleteField";

package/src/components/ContextOverlay/ContextMenu.tsx

@@ -6,7 +6,7 @@ import Menu from "../Menu/Menu";
 import IconButton from "../Icon/IconButton";
 import {ValidIconName} from "../Icon/canonicalIconNames";
 
-interface ContextMenuProps extends TestableComponent {
+export interface ContextMenuProps extends TestableComponent {
     /**
      * Addional CSS class names.
      */
@@ -45,7 +45,7 @@ interface ContextMenuProps extends TestableComponent {
 /**
  * Element displays menu items after toggler is clicked.
  */
-function ContextMenu({
+export const ContextMenu = ({
     children,
     className = "",
     togglerElement = "item-moremenu",
@@ -57,7 +57,7 @@ function ContextMenu({
               so by default we use the title attribute instead of Tooltip. */
     tooltipAsTitle = true,
     ...restProps
-}: ContextMenuProps) {
+}: ContextMenuProps) => {
     return (
         <ContextOverlay
             {...restProps}

package/src/components/ContextOverlay/ContextOverlay.tsx

@@ -16,11 +16,11 @@ export interface ContextOverlayProps extends Omit<BlueprintPopoverProps, "positi
  * Element displays connected content by interacting with a target element.
  * Full list of available option can be seen at https://blueprintjs.com/docs/#popover2-package/popover2
  */
-function ContextOverlay({
+export const ContextOverlay = ({
     children,
     className='',
     ...restProps
-}: ContextOverlayProps) {
+}: ContextOverlayProps) => {
 
     return (
         <BlueprintPropover

package/src/components/ContextOverlay/contextoverlay.scss

@@ -5,13 +5,21 @@ $pt-dark-popover2-background-color: $dark-gray4 !default;
 
 @import "~@blueprintjs/popover2/src/popover2";
 
-.#{$ns}-popover2-content {
+.#{$ns}-overlay-content,
+.#{$ns}-popover2,
+.#{$ns}-popover2-content,
+.#{$ns}-popover2-target {
     max-width: 100%;
 }
 
+.#{$ns}-popover2-content {
+    .#{$ns}-input-group {
+        display: block;
+    }
+}
+
 .#{$ns}-popover2-target {
     cursor: pointer;
-    max-width: 100%;
 }
 
 .#{$ns}-submenu.#{$ns}-popover > .#{$ns}-popover-content {

package/src/components/ContextOverlay/index.ts

@@ -0,0 +1,2 @@
+export * from "./ContextOverlay";
+export * from "./ContextMenu";

package/src/components/Depiction/Depiction.tsx

@@ -1,18 +1,22 @@
-import React, {useCallback, useEffect, useRef} from "react";
+import React, { useCallback, useEffect, useRef } from "react";
+import SVG from "react-inlinesvg";
 import Color from "color";
-import SVG from 'react-inlinesvg';
+
+import { CLASSPREFIX as eccgui } from "../../configuration/constants";
 import { BadgeProps } from "../Badge/Badge";
 import { IconProps } from "../Icon/Icon";
 import { TestIconProps } from "../Icon/TestIcon";
 import Tooltip, { TooltipProps } from "../Tooltip/Tooltip";
+
 import decideContrastColorValue from "./../../common/utils/colorDecideContrastvalue";
-import {CLASSPREFIX as eccgui} from "../../configuration/constants";
 
 export interface DepictionProps extends React.HTMLAttributes<HTMLElement> {
     /**
      * Image that should be used as depiction.
      */
-    image: React.ReactElement<IconProps | TestIconProps | React.ImgHTMLAttributes<HTMLImageElement> | React.SVGProps<SVGSVGElement>>;
+    image: React.ReactElement<
+        IconProps | TestIconProps | React.ImgHTMLAttributes<HTMLImageElement> | React.SVGProps<SVGSVGElement>
+    >;
     /**
      * In case you use an SVG encoded as a data URL in the `<img />` element, then it is transformed to a inline SVG inside the DOM tree.
      * Should be work with Base64 and URL encoded data URIs.
@@ -67,7 +71,7 @@ export interface DepictionProps extends React.HTMLAttributes<HTMLElement> {
     /**
      * Attach a `<Badge />` element to the depiction.
      */
-    badge?: React.ReactElement<BadgeProps>,
+    badge?: React.ReactElement<BadgeProps>;
 }
 
 /**
@@ -77,11 +81,11 @@ export function Depiction({
     className = "",
     image,
     forceInlineSvg = false,
-    size="medium",
-    resizing="cover",
-    ratio="source",
+    size = "medium",
+    resizing = "cover",
+    ratio = "source",
     caption,
-    captionPosition="none",
+    captionPosition = "none",
     backgroundColor,
     border,
     rounded,
@@ -92,37 +96,43 @@ export function Depiction({
 }: DepictionProps) {
     const containerRef = useRef<HTMLDivElement>(null);
 
-    let styleDepictionColors = {};
+    let styleDepictionColors = Object.create(null);
     if (!!backgroundColor && backgroundColor !== "light" && backgroundColor !== "dark") {
         try {
             const color = Color(backgroundColor);
             styleDepictionColors = {
                 [`--${eccgui}-depiction-background`]: color.rgb().toString(),
-                [`--${eccgui}-depiction-color`]: decideContrastColorValue({testColor: color})
-            }
-        } catch(ex) {
-            console.warn("Received invalid background color for depiction: " + backgroundColor)
+                [`--${eccgui}-depiction-color`]: decideContrastColorValue({ testColor: color }),
+            };
+        } catch (ex) {
+            console.warn("Received invalid background color for depiction: " + backgroundColor);
         }
     }
 
-    const updateSvgResizing = React.useCallback((el: SVGElement) => {
-        let preserveAspectRatio = "";
-        switch (resizing) {
-            case "cover":
-                preserveAspectRatio = "xMidYMid slice";
-                break;
-            case "stretch":
-                preserveAspectRatio = "none";
-                break;
-        }
-        el.setAttribute("preserveAspectRatio", preserveAspectRatio);
-    }, [resizing])
+    const updateSvgResizing = React.useCallback(
+        (el: SVGElement) => {
+            let preserveAspectRatio = "";
+            switch (resizing) {
+                case "cover":
+                    preserveAspectRatio = "xMidYMid slice";
+                    break;
+                case "stretch":
+                    preserveAspectRatio = "none";
+                    break;
+            }
+            el.setAttribute("preserveAspectRatio", preserveAspectRatio);
+        },
+        [resizing]
+    );
 
-    const inlineSvgCall = useCallback((svgElement: SVGElement) => {
-        if(svgElement) {
-            updateSvgResizing(svgElement)
-        }
-    }, [updateSvgResizing]);
+    const inlineSvgCall = useCallback(
+        (svgElement: SVGElement) => {
+            if (svgElement) {
+                updateSvgResizing(svgElement);
+            }
+        },
+        [updateSvgResizing]
+    );
 
     useEffect(() => {
         // Resize element after every render
@@ -130,7 +140,7 @@ export function Depiction({
         if (svgElement.length > 0) {
             updateSvgResizing(svgElement[0]);
         }
-    })
+    });
 
     let depiction = image;
     if (
@@ -141,13 +151,10 @@ export function Depiction({
         image.props.src.startsWith("data:image/svg+xml")
     ) {
         depiction = (
-            <SVG
-                src={image.props.src}
-                innerRef={inlineSvgCall}
-            >
+            <SVG src={image.props.src} innerRef={inlineSvgCall}>
                 {image}
             </SVG>
-        )
+        );
     }
 
     const depictionContainer = (
@@ -158,11 +165,13 @@ export function Depiction({
                 ` ${eccgui}-depiction__image--${size}` +
                 ` ${eccgui}-depiction__image--${resizing}-sizing` +
                 ` ${eccgui}-depiction__image--ratio-${ratio.replace(":", "to")}` +
-                (backgroundColor === "light" || backgroundColor === "dark" ? ` ${eccgui}-depiction__image--color-${backgroundColor}` : '') +
-                (!!backgroundColor ? ` ${eccgui}-depiction__image--color-config` : '') +
-                (border ? ` ${eccgui}-depiction__image--hasborder` : '') +
-                (rounded ? ` ${eccgui}-depiction__image--roundedborder` : '') +
-                (padding && padding !== "none" ? ` ${eccgui}-depiction__image--padding-${padding}` : '')
+                (backgroundColor === "light" || backgroundColor === "dark"
+                    ? ` ${eccgui}-depiction__image--color-${backgroundColor}`
+                    : "") +
+                (backgroundColor ? ` ${eccgui}-depiction__image--color-config` : "") +
+                (border ? ` ${eccgui}-depiction__image--hasborder` : "") +
+                (rounded ? ` ${eccgui}-depiction__image--roundedborder` : "") +
+                (padding && padding !== "none" ? ` ${eccgui}-depiction__image--padding-${padding}` : "")
             }
             style={styleDepictionColors as React.CSSProperties}
         >
@@ -171,24 +180,17 @@ export function Depiction({
     );
 
     return (
-        <figure
-            className={
-                `${eccgui}-depiction` +
-                (className ? ` ${className}` : '')
-            }
-            {...otherFigureProps}
-        >
-            { captionPosition === "tooltip" && !!caption ? (
-                <Tooltip content={caption} size="medium" {...tooltipProps}>{depictionContainer}</Tooltip>
+        <figure className={`${eccgui}-depiction` + (className ? ` ${className}` : "")} {...otherFigureProps}>
+            {captionPosition === "tooltip" && !!caption ? (
+                <Tooltip content={caption} size="medium" {...tooltipProps}>
+                    {depictionContainer}
+                </Tooltip>
             ) : (
                 depictionContainer
             )}
             {!!caption && (
                 <figcaption
-                    className={
-                        `${eccgui}-depiction__caption` +
-                        ` ${eccgui}-depiction__caption--${captionPosition}`
-                    }
+                    className={`${eccgui}-depiction__caption` + ` ${eccgui}-depiction__caption--${captionPosition}`}
                 >
                     {caption}
                 </figcaption>

package/src/components/Dialog/AlertDialog.tsx

@@ -1,12 +1,8 @@
-/*
-    provides a simple interface for alert dialogs
-*/
-
 import React from 'react';
 import {Definitions as IntentStates, IntentTypes} from "../../common/Intent";
 import SimpleDialog, { SimpleDialogProps } from './SimpleDialog';
 
-export interface IAlertDialogProps extends Omit<SimpleDialogProps, "intent"> {
+export interface AlertDialogProps extends Omit<SimpleDialogProps, "intent"> {
   /**
    * set to true if alert dialog displays a success message
    */
@@ -21,17 +17,20 @@ export interface IAlertDialogProps extends Omit<SimpleDialogProps, "intent"> {
   danger?: boolean;
 }
 
+// @deprecated
+export type IAlertDialogProps = AlertDialogProps;
+
 /**
  * Special element to display alert notification in modal dialogs.
  * Inherits all properties from `SimpleDialog`, except `intent`.
  */
-function AlertDialog({
+export const AlertDialog = ({
     children,
     success=false,
     warning=false,
     danger=false,
     ...otherProps
-}: IAlertDialogProps) {
+}: AlertDialogProps) => {
     let intentLevel: IntentTypes = IntentStates.INFO;
     if (success) { intentLevel = IntentStates.SUCCESS; }
     if (warning) { intentLevel = IntentStates.WARNING; }

package/src/components/Dialog/Modal.tsx

@@ -1,8 +1,3 @@
-/*
-    we only use Dialog as pre-configured and enhanced Overlay, it is
-    recommended to use Card elements inside.
-*/
-
 import React from 'react';
 import {
     Classes as BlueprintClassNames,
@@ -32,10 +27,11 @@ export interface ModalProps extends OverlayProps, IOverlayState {
 
 /**
  * Displays contents on top of other elements, used to create dialogs.
- * This element can be used to create own modal elements and edge cases for modal dialogs.
  * For most situations the usage of `SimpleDialog` and `AlertDialog` should be sufficent.
+ * Otherwise this element can be used to create own modal elements and edge cases for modal dialogs.
+ * Then it is recommended to use the `Card` element inside.
  */
-function Modal({
+export const Modal = ({
     children,
     className='',
     overlayClassName='',
@@ -45,7 +41,7 @@ function Modal({
     preventBackdrop=false,
     wrapperDivProps,
     ...otherProps
-}: ModalProps) {
+}: ModalProps) => {
 
     const alteredChildren = React.Children.map(children, (child) => {
         if ((child as React.ReactElement).type && (child  as React.ReactElement).type === Card) {

package/src/components/Dialog/SimpleDialog.tsx

@@ -1,7 +1,3 @@
-/*
-    provides a simple interface for dialogs using modals with a card inside
-*/
-
 import React from "react";
 import { CLASSPREFIX as eccgui } from "../../configuration/constants";
 import { IntentTypes } from "../../common/Intent";
@@ -60,7 +56,7 @@ export interface SimpleDialogProps extends ModalProps, TestableComponent {
  * Simplifies the dialog display by providing a direct `Card` template for the `Modal` element.
  * Inherits all properties from `Modal`.
  */
-function SimpleDialog({
+export const SimpleDialog = ({
     children,
     canOutsideClickClose = false,
     canEscapeKeyClose = false,
@@ -75,7 +71,7 @@ function SimpleDialog({
     startInFullScreenMode = false,
     size,
     ...otherProps
-}: SimpleDialogProps) {
+}: SimpleDialogProps) => {
     const [displayFullscreen, setDisplayFullscreen] = React.useState<boolean>(startInFullScreenMode);
     const showToggler = startInFullScreenMode || showFullScreenToggler
     const intentClassName = intent ? `${eccgui}-intent--${intent}` : "";