@eccenca/gui-elements 23.0.0-rc.3 → 23.0.0-rc.5

package/src/components/AutoSuggestion/AutoSuggestionList.tsx

@@ -13,8 +13,9 @@ import {
     Tooltip,
 } from "./../../";
 import { ISuggestionWithReplacementInfo } from "./AutoSuggestion";
+import { CLASSPREFIX as eccgui } from "../../configuration/constants";
 
-export interface IDropdownProps {
+export interface IDropdownProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "children"> {
     // The options of the drop down
     options: Array<ISuggestionWithReplacementInfo>;
     // Called when an item has been selected from the drop down
@@ -78,6 +79,8 @@ export const AutoSuggestionList = ({
     left,
     currentlyFocusedIndex,
     itemToHighlight,
+    style,
+    ...otherDivProps
 }: IDropdownProps) => {
     const [hoveredItem, setHoveredItem] = React.useState<
         ISuggestionWithReplacementInfo | undefined
@@ -132,8 +135,9 @@ export const AutoSuggestionList = ({
     if (!loadingOrHasSuggestions || !isOpen) return null;
     return (
         <div
-            className="ecc-auto-suggestion-box__dropdown"
-            style={{ left }}
+            {...otherDivProps}
+            className={`${eccgui}-autosuggestion__dropdown`}
+            style={{ ...style, left }}
             ref={dropdownRef}
         >
             {loading ? (

package/src/components/AutoSuggestion/SingleLineCodeEditor.tsx

@@ -4,6 +4,7 @@ import React from "react";
 import { Controlled as ControlledEditor } from "react-codemirror2";
 import { Classes as BlueprintClassNames } from "@blueprintjs/core";
 import {Editor as CodeMirrorEditor} from "codemirror";
+import { CLASSPREFIX as eccgui } from "../../configuration/constants";
 
 export interface IEditorProps {
   // Is called with the editor instance that allows access via the CodeMirror API
@@ -11,7 +12,7 @@ export interface IEditorProps {
   // Called whenever the editor content changes
   onChange: (value: string) => any
   // Called when the cursor position changes
-  onCursorChange: (pos: any, coords: any) => any
+  onCursorChange: (pos: any, coords: any, scrollinfo: any) => any
   // The editor theme, e.g. "sparql"
   mode?: string
   // The initial value of the editor
@@ -49,7 +50,7 @@ const SingleLineCodeEditor = ({
                                   showScrollBar = true
                               }: IEditorProps) => {
     return (
-        <div className={"ecc-input-editor " + BlueprintClassNames.INPUT}>
+        <div className={`${eccgui}-singlelinecodeeditor ${BlueprintClassNames.INPUT}`}>
             <ControlledEditor
         editorDidMount={(editor) => {
           editor.on("beforeChange", (_, change) => {
@@ -82,7 +83,11 @@ const SingleLineCodeEditor = ({
           }
         }}
         onCursor={(editor, data) => {
-          onCursorChange(data, editor.cursorCoords(true, "div"));
+          onCursorChange(
+              data,
+              editor.cursorCoords(true, "local"),
+              editor.getScrollInfo()
+          );
         }}
         onBeforeChange={(_editor, _data, value) => {
           const trimmedValue = value.replace(/\n/g, "");

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

@@ -71,7 +71,7 @@ describe("Dropdown list", () => {
            left: 10
        }
        const {container} = render(<AutoSuggestionList {...props} />)
-       const parentDiv:HTMLElement = container.querySelector(".ecc-auto-suggestion-box__dropdown")!!
+       const parentDiv:HTMLElement = container.querySelector(`.${eccgui}-autosuggestion__dropdown`)!!
        const leftOffset = Number(parentDiv.style.left.replace(/px$/,""));
        expect(leftOffset).toBe(props.left)
     })

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

@@ -5,6 +5,7 @@ import SingleLineEditor, {
     IEditorProps,
 } from "../SingleLineCodeEditor";
 import CodeMirror from "codemirror";
+import { CLASSPREFIX as eccgui } from "../../../configuration/constants";
 
 describe("SingleLineCodeEditor", () => {
     let props: IEditorProps,
@@ -26,7 +27,7 @@ describe("SingleLineCodeEditor", () => {
 
     it("should render properly", () => {
         const { container } = render(<SingleLineEditor {...props} />);
-        expect(container.querySelector(".ecc-input-editor")).not.toBeNull();
+        expect(container.querySelector(`.${eccgui}-singlelinecodeeditor`)).not.toBeNull();
     });
 
     it("should set the editorInstance immediately it's mounted", () => {

package/src/components/AutocompleteField/AutoCompleteField.tsx

@@ -149,17 +149,15 @@ AutoCompleteField.defaultProps = {
 
 /** Style object to be used in menu option items. */
 export interface IElementWidth {
-    width: string
+    minWidth: string;
+    //width: string
     maxWidth: string
 }
 
 /** Hook that returns the element width of the given ref.*/
 const elementWidth = (elRef: IRefObject<HTMLInputElement> | null): IElementWidth => {
-    if(elRef && elRef.current) {
-        return { width: elRef.current.offsetWidth + "px", maxWidth: "90vw" }
-    } else {
-        return { width: "40rem", maxWidth: "90vw" }
-    }
+    const minWidth = (elRef && elRef.current) ? elRef.current.offsetWidth + "px" : "20rem";
+    return { minWidth, maxWidth: "90vw" };
 }
 
 /** Auto-complete input widget. */
@@ -194,6 +192,7 @@ export function AutoCompleteField<T extends any, UPDATE_VALUE extends any>(props
     const [filtered, setFiltered] = useState<T[]>([]);
 
     const BlueprintSuggestAutocomplete = Suggest.ofType<T>();
+    const readOnly = !!otherProps.inputProps?.readOnly
 
     // Sets the query to the item value if it has a valid string value
     const setQueryToSelectedValue = (item?: T) => {
@@ -223,7 +222,7 @@ export function AutoCompleteField<T extends any, UPDATE_VALUE extends any>(props
     );
 
     useEffect(() => {
-        if (!disabled && hasFocus) {
+        if (!disabled && !readOnly && hasFocus) {
             setListLoading(true);
             const timeout: number = window.setTimeout(async () => {
                 fetchQueryResults(query);
@@ -351,7 +350,7 @@ export function AutoCompleteField<T extends any, UPDATE_VALUE extends any>(props
         return <Notification danger={true} message={requestError} />
     }
     // Optional clear button to reset the selected value
-    const clearButton = reset &&
+    const clearButton = !readOnly && !disabled && reset &&
         selectedItem != null &&
         reset.resettableValue(selectedItem) ? (
             <IconButton
@@ -370,7 +369,9 @@ export function AutoCompleteField<T extends any, UPDATE_VALUE extends any>(props
         onBlur: handleOnFocusOut,
         onFocus: handleOnFocusIn,
         ...otherProps.inputProps,
+        title: (selectedItem !== undefined && (readOnly || disabled)) ? itemValueString(selectedItem) : otherProps.inputProps?.title,
     };
+    const preventOverlayOnReadonly = readOnly ? { isOpen: false } : {}
     const updatedContextOverlayProps: Partial<Omit<ContextOverlayProps, "content" | "children">> = {
         minimal: true,
         placement: "bottom-start",
@@ -378,6 +379,7 @@ export function AutoCompleteField<T extends any, UPDATE_VALUE extends any>(props
         rootBoundary: "viewport",
         onClosed: onPopoverClose,
         ...otherProps.contextOverlayProps,
+        ...preventOverlayOnReadonly,
     }
     if(selectedItem !== undefined) {
         // Makes sure that even when an empty string is selected, the placeholder won't be shown.

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

@@ -20,6 +20,7 @@ export const Default = Template.bind({});
 export const AdaptQueryAfterSelection = Template.bind({})
 export const AllowReset = Template.bind({})
 export const AllowCustomValues = Template.bind({})
+export const ReadOnlyState = Template.bind({})
 
 // Renders string values as string
 const defaultRenderer = (item: string) => item
@@ -37,7 +38,7 @@ const defaultArgs: IAutoCompleteFieldProps<string, string> = {
         console.log(`Entry '${elem}' selected!`)
     },
     itemValueSelector: defaultRenderer,
-    noResultText: "No result"
+    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.
@@ -67,9 +68,19 @@ const allowCustomValues: IAutoCompleteFieldProps<string, string> = {
     }
 }
 
+// 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 readOnlyState: IAutoCompleteFieldProps<string, string> = {
+    ...defaultArgs,
+    initialValue: "search item B",
+    inputProps: {
+        readOnly: true
+    }
+}
+
 Default.args = defaultArgs;
-AdaptQueryAfterSelection.args = adaptQueryAfterSelection
-AllowReset.args = resetSelection
-AllowCustomValues.args = allowCustomValues
+AdaptQueryAfterSelection.args = adaptQueryAfterSelection;
+AllowReset.args = resetSelection;
+AllowCustomValues.args = allowCustomValues;
+ReadOnlyState.args = readOnlyState;
 
 export default AutoCompleteFieldStory

package/src/components/Breadcrumb/BreadcrumbList.tsx

@@ -1,4 +1,4 @@
-import React from "react";
+import React, {useCallback} from "react";
 import {
     Breadcrumbs2 as BlueprintBreadcrumbList,
     Breadcrumbs2Props as BlueprintBreadcrumbsProps,
@@ -60,7 +60,7 @@ function BreadcrumbList({
     latenOverflow = false,
     ...otherBlueprintBreadcrumbsProps
 }: BreadcrumbListProps) {
-    const renderBreadcrumb = (propsBreadcrumb: BreadcrumbItemProps) => {
+    const renderBreadcrumb = useCallback((propsBreadcrumb: BreadcrumbItemProps) => {
         const {onClick, ...otherProps} = propsBreadcrumb;
         return (
             <BreadcrumbItem
@@ -75,11 +75,15 @@ function BreadcrumbList({
                 }
             />
         );
-    };
+    }, [onItemClick]);
 
-    const renderCurrentBreadcrumb = (propsBreadcrumb: BreadcrumbItemProps) => {
+    const renderCurrentBreadcrumb = React.useCallback((propsBreadcrumb: BreadcrumbItemProps) => {
         return <BreadcrumbItem {...propsBreadcrumb} current={true} /*itemDivider={itemDivider}*/ />;
-    };
+    }, []);
+
+    const overflowListProps = React.useMemo(() => ignoreOverflow ? {
+        minVisibleItems: otherBlueprintBreadcrumbsProps.items.length,
+    } : {}, [ignoreOverflow, otherBlueprintBreadcrumbsProps.items.length])
 
     return (
         <BlueprintBreadcrumbList
@@ -93,9 +97,7 @@ function BreadcrumbList({
             minVisibleItems={1}
             breadcrumbRenderer={renderBreadcrumb}
             currentBreadcrumbRenderer={renderCurrentBreadcrumb}
-            overflowListProps={ignoreOverflow ? {
-                minVisibleItems: otherBlueprintBreadcrumbsProps.items.length,
-            } : {}}
+            overflowListProps={overflowListProps}
         />
     );
 }

package/src/components/Breadcrumb/breadcrumb.scss

@@ -67,4 +67,8 @@ a.#{$eccgui}-breadcrumb__item {
             text-decoration: none;
         }
     }
+    a {
+        @extend .#{$eccgui}-breadcrumb__item;
+        @extend .#{$ns}-breadcrumb;
+    }
 }

package/src/components/Breadcrumb/stories/BreadcrumbList.stories.tsx

@@ -21,6 +21,7 @@ Default.args = {
         {text: "Main click category", onClick: () => alert("Breadcrumb click")},
         {text: <div>Sub category item</div>, href: "#"},
         {text: <span>Disabled breadcrumb with a very long title</span>, disabled: true},
+        {text: <a href="#wrong">Wrongly placed link inside link</a>},
         {text: "Current breadcrumb item", current: true}
     ],
 };

package/src/components/Card/Card.tsx

@@ -49,7 +49,7 @@ function Card({
                 behavior: "smooth",
                 block: scrollinOnFocus,
                 inline: scrollinOnFocus,
-            })}, 100);
+            })}, 200);
         }
     } : {}
     const cardElement = (

package/src/components/Card/CardContent.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 CardContentProps extends React.HTMLAttributes<HTMLDivElement> {
 }
 
 /**
@@ -12,7 +12,7 @@ function CardContent({
     children,
     className='',
     ...otherProps
-}: OverviewItemProps) {
+}: CardContentProps) {
     return (
         <div
             {...otherProps}

package/src/components/ContextOverlay/ContextMenu.tsx

@@ -38,6 +38,8 @@ interface ContextMenuProps extends TestableComponent {
      * Props to spread to `ContextOverlay` that is used to display the dropdown.
      */
     contextOverlayProps?: Partial<Omit<ContextOverlayProps, "content" | "children" | "className">>
+    /** Disables the button to open the menu. */
+    disabled?: boolean
 }
 
 /**
@@ -49,6 +51,7 @@ function ContextMenu({
     togglerElement = "item-moremenu",
     togglerText = "Show more options",
     contextOverlayProps,
+    disabled,
     togglerLarge = false,
     /* FIXME: The Tooltip component can interfere with the opened menu, since it is implemented via portal and may cover the menu,
               so by default we use the title attribute instead of Tooltip. */
@@ -68,6 +71,7 @@ function ContextMenu({
                     name={[togglerElement]}
                     text={togglerText}
                     large={togglerLarge}
+                    disabled={!!disabled}
                     data-test-id={restProps["data-test-id"]}
                 />
             ) : (

package/src/components/Form/FieldItem.tsx

@@ -13,7 +13,7 @@ import {TestableComponent} from "../interfaces";
     * input id could be created when not given
 */
 
-interface IProps extends TestableComponent {
+export interface FieldItemProps extends React.HTMLAttributes<HTMLDivElement>, TestableComponent {
     hasStatePrimary?: boolean
     hasStateSuccess?: boolean
     hasStateWarning?: boolean
@@ -26,6 +26,9 @@ interface IProps extends TestableComponent {
     messageText?: string
 }
 
+/**
+ * Form element that manages the combination of label, helper texts, input element and feedback messages.
+ */
 function FieldItem({
     hasStatePrimary = false,
     hasStateSuccess = false,
@@ -38,7 +41,7 @@ function FieldItem({
     helperText,
     messageText,
     ...otherProps
-}: IProps) {
+}: FieldItemProps) {
     let classIntent = "";
     switch (true) {
         case hasStatePrimary:
@@ -79,10 +82,10 @@ function FieldItem({
 
     return (
         <div
-            data-test-id={otherProps["data-test-id"]}
             className={
                 `${eccgui}-fielditem` + (className ? " " + className : "") + (disabled ? ` ${eccgui}-fielditem--disabled` : "")
             }
+            {...otherProps}
         >
             {label}
             {userhelp}

package/src/components/Form/FieldItemRow.tsx

@@ -1,12 +1,34 @@
 import React from "react";
 import { CLASSPREFIX as eccgui } from "../../configuration/constants";
 
-/*
-    FIXME: allow grow factors for children
-*/
-/** Allows to layout field items horizontally. */
-function FieldItemRow({ children, className, ...otherProps }: any) {
-    return <div className={`${eccgui}-fielditem__row` + (className ? " " + className : "")} {...otherProps}>{children}</div>;
+export interface FieldItemRowProps extends React.HTMLAttributes<HTMLDivElement> {
+    /**
+     * If set to `true` all `FieldItem` childrens have the same width.
+     */
+    justifyItemWidths?: boolean;
+}
+
+/**
+ * Allows to display `FieldItem` children horizontally in one row.
+ */
+function FieldItemRow({
+    children,
+    className,
+    justifyItemWidths = false,
+    ...otherProps
+}: FieldItemRowProps) {
+    return (
+        <div
+            className={
+                `${eccgui}-fielditem__row` +
+                (justifyItemWidths ? ` ${eccgui}-fielditem__row--justified` : "") +
+                (className ? ` ${className}` : "")
+            }
+            {...otherProps}
+        >
+            {children}
+        </div>
+    );
 }
 
 export default FieldItemRow;

package/src/components/Form/form.scss

@@ -157,3 +157,9 @@ form {
         margin-bottom: $eccgui-size-block-whitespace;
     }
 }
+
+.#{$eccgui}-fielditem__row--justified {
+    & > .#{$eccgui}-fielditem {
+        width: 100%;
+    }
+}

package/src/components/Grid/Grid.tsx

@@ -2,14 +2,20 @@ import React from "react";
 // import PropTypes from 'prop-types';
 import { Grid as CarbonGrid } from "carbon-components-react";
 import { CLASSPREFIX as eccgui } from "../../configuration/constants";
+import {GridDefaultProps} from "carbon-components-react/lib/components/Grid/Grid";
+
+interface GridProps extends GridDefaultProps {
+    verticalStretchable?: boolean
+    useAbsoluteSpace?: boolean
+}
 
 function Grid({
     children,
-    verticalStretchable,
-    useAbsoluteSpace,
+    verticalStretchable = false,
+    useAbsoluteSpace = false,
     className = '',
     ...restProps
-}: any) {
+}: GridProps) {
     return (
         <CarbonGrid
             {...restProps}

package/src/components/Grid/GridColumn.tsx

@@ -2,6 +2,14 @@ import React from "react";
 // import PropTypes from 'prop-types';
 import { Column as CarbonColumn } from "carbon-components-react";
 import { CLASSPREFIX as eccgui } from "../../configuration/constants";
+import {ColumnDefaultProps} from "carbon-components-react/lib/components/Grid/Column";
+
+interface GridColumnProps extends ColumnDefaultProps {
+    small?: boolean
+    medium?: boolean
+    full?: boolean
+    verticalAlign?: "center"
+}
 
 function GridColumn({
     children,
@@ -9,9 +17,9 @@ function GridColumn({
     small = false,
     medium = false,
     full = true,
-    verticalAlign = '',
+    verticalAlign,
     ...otherProps
-}: any) {
+}: GridColumnProps) {
     let sizeConfig = {};
     if (small) sizeConfig = { md:2, lg:3 };
     if (medium) sizeConfig = { md:3, lg:5 };

package/src/components/Grid/GridRow.tsx

@@ -2,6 +2,13 @@ import React from "react";
 // import PropTypes from 'prop-types';
 import { Row as CarbonRow } from "carbon-components-react";
 import { CLASSPREFIX as eccgui } from "../../configuration/constants";
+import {RowDefaultProps} from "carbon-components-react/lib/components/Grid/Row";
+
+interface GridRowProps extends RowDefaultProps {
+    dontWrapColumns?: boolean
+    fullHeight?: boolean
+    verticalStretched?: boolean
+}
 
 function GridRow({
     children,
@@ -10,7 +17,7 @@ function GridRow({
     fullHeight = false,
     verticalStretched,
     ...otherProps
-}: any) {
+}: GridRowProps) {
     return (
         <CarbonRow
             {...otherProps}

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

@@ -0,0 +1,20 @@
+import React from "react";
+import { ComponentStory, ComponentMeta } from "@storybook/react";
+import { HoverToggler } from "./../../index";
+
+export default {
+    title: "Components/HoverToggler",
+    component: HoverToggler,
+    argTypes: {
+    },
+} as ComponentMeta<typeof HoverToggler>;
+
+const Template: ComponentStory<typeof HoverToggler> = (args) => (
+    <HoverToggler {...args} style={{height: "auto"}} />
+);
+
+export const Default = Template.bind({});
+Default.args = {
+    baseContent: "Base content.",
+    hoverContent: <>Content<br/>on <a href="#">hover</a>.</>
+};

package/src/components/HoverToggler/HoverToggler.tsx

@@ -0,0 +1,58 @@
+import React from "react";
+import { CLASSPREFIX as eccgui } from "../../configuration/constants";
+
+interface HoverTogglerProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "children"> {
+    /**
+     * Additional CSS class name.
+     */
+    className?: string;
+    /**
+     * The content that is shown when not hovered.
+     */
+    baseContent: JSX.Element;
+    baseContentProps?: Omit<React.HTMLAttributes<HTMLDivElement>, "children">;
+    /**
+     * The content that is shown when hovered.
+     */
+    hoverContent: JSX.Element;
+    hoverContentProps?: Omit<React.HTMLAttributes<HTMLDivElement>, "children">;
+    /**
+     * Display as inline element.
+     */
+    inline?: boolean;
+}
+
+/** Displays a specific element. Displays another element when hovered. */
+export const HoverToggler = ({
+    className = "",
+    baseContent,
+    baseContentProps,
+    hoverContent,
+    hoverContentProps,
+    inline = false,
+    style,
+    ...otherProps
+}: HoverTogglerProps) => {
+    return (<div
+        className={
+            `${eccgui}-hovertoggler__wrapper` +
+            (inline ? ` ${eccgui}-hovertoggler--inline` : "")
+        }
+        style={style}
+    >
+        <div
+            className={
+                `${eccgui}-hovertoggler` +
+                (className ? ` ${className}` : "")
+            }
+            {...otherProps}
+        >
+            <div className={`${eccgui}-hovertoggler__basecontent`}>
+                <div className={`${eccgui}-hovertoggler__wrappercontent`} {...baseContentProps}>{ baseContent }</div>
+            </div>
+            <div className={`${eccgui}-hovertoggler__hovercontent`}>
+                <div tabIndex={0} className={`${eccgui}-hovertoggler__wrappercontent`} {...hoverContentProps}>{ hoverContent }</div>
+            </div>
+        </div>
+    </div>);
+}

package/src/components/HoverToggler/hovertoggler.scss

@@ -0,0 +1,45 @@
+.#{$eccgui}-hovertoggler__wrapper {
+    width: 100%;
+    overflow: hidden;
+    display: flex;
+    justify-content: flex-start;
+    align-items: center;
+}
+
+.#{$eccgui}-hovertoggler--inline {
+    display: inline-flex;
+    width: auto;
+}
+
+.#{$eccgui}-hovertoggler {
+    display: flex;
+    width: 200%;
+    justify-content: flex-start;
+    align-items: stretch;
+    flex-shrink: 0;
+
+    .#{$eccgui}-hovertoggler--inline > & {
+        display: inline-flex;
+    }
+}
+
+.#{$eccgui}-hovertoggler__basecontent,
+.#{$eccgui}-hovertoggler__hovercontent {
+    overflow: hidden;
+    order: 1;
+    flex-grow: 0;
+    flex-shrink: 0;
+    width: 50%;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+
+.#{$eccgui}-hovertoggler__hovercontent {
+    order: 2;
+
+    .#{$eccgui}-hovertoggler:hover > &,
+    &:focus-within {
+        order: 0;
+    }
+}