@eccenca/gui-elements 23.5.0 → 23.6.0-rc.0

package/src/components/Application/ApplicationContent.tsx

@@ -1,5 +1,6 @@
 import React from "react";
 import { Content as CarbonContent } from "carbon-components-react";
+
 import { CLASSPREFIX as eccgui } from "../../configuration/constants";
 
 export interface ApplicationContentProps {
@@ -33,10 +34,13 @@ export const ApplicationContent = ({
     htmlMainProps,
     ...otherUnknownProps
 }: ApplicationContentProps) => {
-
     let addSidebarMargin = "";
-    if (isApplicationSidebarExpanded) { addSidebarMargin = `${eccgui}-application__content--withsidebar`; }
-    if (isApplicationSidebarRail) { addSidebarMargin = `${eccgui}-application__content--railsidebar`; }
+    if (isApplicationSidebarExpanded) {
+        addSidebarMargin = `${eccgui}-application__content--withsidebar`;
+    }
+    if (isApplicationSidebarRail) {
+        addSidebarMargin = `${eccgui}-application__content--railsidebar`;
+    }
 
     return (
         <CarbonContent
@@ -45,9 +49,9 @@ export const ApplicationContent = ({
             {...otherUnknownProps}
             {...htmlMainProps}
         >
-            { children }
+            {children}
         </CarbonContent>
-    )
-}
+    );
+};
 
 export default ApplicationContent;

package/src/components/Application/ApplicationSidebarNavigation.tsx

@@ -1,20 +1,17 @@
 import React from "react";
-import {
-    SideNav as CarbonSideNav,
-    SideNavProps as CarbonSideNavProps,
-} from "carbon-components-react";
+import { SideNav as CarbonSideNav, SideNavProps as CarbonSideNavProps } from "carbon-components-react";
+
 import { CLASSPREFIX as eccgui } from "../../configuration/constants";
 
-export interface ApplicationSidebarNavigationProps extends
-    Omit<CarbonSideNavProps, "defaultExpanded" | "isPersistent" | "isFixedNav" | "isChildOfHeader">,
-    React.HTMLAttributes<HTMLElement> {};
+export interface ApplicationSidebarNavigationProps
+    extends Omit<CarbonSideNavProps, "defaultExpanded" | "isPersistent" | "isFixedNav" | "isChildOfHeader">,
+        React.HTMLAttributes<HTMLElement> {}
 
 export const ApplicationSidebarNavigation = ({
     children,
     className = "",
     ...otherCarbonSideNavProps
 }: ApplicationSidebarNavigationProps) => {
-
     return (
         <CarbonSideNav
             className={`${eccgui}-application__menu__sidebar ${className}`}
@@ -27,7 +24,7 @@ export const ApplicationSidebarNavigation = ({
         >
             {children}
         </CarbonSideNav>
-    )
-}
+    );
+};
 
 export default ApplicationSidebarNavigation;

package/src/components/Application/ApplicationSidebarToggler.tsx

@@ -3,9 +3,10 @@ import {
     HeaderMenuButton as CarbonHeaderMenuButton,
     HeaderMenuButtonProps as CarbonHeaderMenuButtonProps,
 } from "carbon-components-react";
+
 import { CLASSPREFIX as eccgui } from "../../configuration/constants";
 
-export interface ApplicationSidebarTogglerProps extends CarbonHeaderMenuButtonProps {};
+export type ApplicationSidebarTogglerProps = CarbonHeaderMenuButtonProps;
 
 export const ApplicationSidebarToggler = ({
     className = "",
@@ -17,7 +18,7 @@ export const ApplicationSidebarToggler = ({
             {...otherCarbonHeaderMenuButtonProps}
             isCollapsible={true}
         />
-    )
-}
+    );
+};
 
 export default ApplicationSidebarToggler;

package/src/components/Application/ApplicationTitle.tsx

@@ -1,8 +1,6 @@
 import React from "react";
-import {
-    HeaderName as CarbonHeaderName,
-    HeaderNameProps as CarbonHeaderNameProps,
-} from "carbon-components-react";
+import { HeaderName as CarbonHeaderName, HeaderNameProps as CarbonHeaderNameProps } from "carbon-components-react";
+
 import { CLASSPREFIX as eccgui } from "../../configuration/constants";
 
 type SvgDepiction = HTMLElement & SVGElement;
@@ -53,15 +51,18 @@ export const ApplicationTitle = ({
     href,
     depiction,
     isNotDisplayed = false,
-    isAlignedWithSidebar=false,
+    isAlignedWithSidebar = false,
     isApplicationSidebarExpanded,
     htmlAProps,
     ...otherCarbonHeaderNameProps
 }: ApplicationTitleProps) => {
-
     const classApplication = `${eccgui}-application__title`;
-    const classNotDisplayed = isNotDisplayed || (!isApplicationSidebarExpanded && typeof isNotDisplayed === "undefined") ? "cds--visually-hidden" : "";
-    const classAlignedSidebar = isAlignedWithSidebar || isApplicationSidebarExpanded ? `${eccgui}-application__title--withsidebar` : "";
+    const classNotDisplayed =
+        isNotDisplayed || (!isApplicationSidebarExpanded && typeof isNotDisplayed === "undefined")
+            ? "cds--visually-hidden"
+            : "";
+    const classAlignedSidebar =
+        isAlignedWithSidebar || isApplicationSidebarExpanded ? `${eccgui}-application__title--withsidebar` : "";
 
     return (
         <CarbonHeaderName
@@ -73,20 +74,20 @@ export const ApplicationTitle = ({
         >
             <span className={`${eccgui}-application__title--content`}>
                 {!!depiction && (
-                        <>
-                            <span className={`${eccgui}-application__title--depiction`}>{depiction}</span>
-                        </>
+                    <>
+                        <span className={`${eccgui}-application__title--depiction`}>{depiction}</span>
+                    </>
                 )}
                 {!!prefix && (
-                        <>
-                            <span className="cds--header__name--prefix">{prefix}</span>
-                            &nbsp;
-                        </>
+                    <>
+                        <span className="cds--header__name--prefix">{prefix}</span>
+                        &nbsp;
+                    </>
                 )}
-                { children }
+                {children}
             </span>
         </CarbonHeaderName>
-    )
-}
+    );
+};
 
 export default ApplicationTitle;

package/src/components/Application/ApplicationToolbar.tsx

@@ -3,9 +3,10 @@ import {
     HeaderGlobalBar as CarbonHeaderGlobalBar,
     HeaderGlobalBarProps as CarbonHeaderGlobalBarProps,
 } from "carbon-components-react";
+
 import { CLASSPREFIX as eccgui } from "../../configuration/constants";
 
-export interface ApplicationToolbarProps extends CarbonHeaderGlobalBarProps {};
+export type ApplicationToolbarProps = CarbonHeaderGlobalBarProps;
 
 export const ApplicationToolbar = ({
     children,
@@ -17,9 +18,9 @@ export const ApplicationToolbar = ({
             {...otherCarbonHeaderGlobalBarProps}
             className={`${eccgui}-application__toolbar ` + className}
         >
-            { children }
+            {children}
         </CarbonHeaderGlobalBar>
-    )
-}
+    );
+};
 
 export default ApplicationToolbar;

package/src/components/Application/ApplicationToolbarAction.tsx

@@ -3,9 +3,10 @@ import {
     HeaderGlobalAction as CarbonHeaderGlobalAction,
     HeaderGlobalActionProps as CarbonHeaderGlobalActionProps,
 } from "carbon-components-react";
+
 import { CLASSPREFIX as eccgui } from "../../configuration/constants";
 
-export interface ApplicationToolbarActionProps extends CarbonHeaderGlobalActionProps {};
+export type ApplicationToolbarActionProps = CarbonHeaderGlobalActionProps;
 
 export const ApplicationToolbarAction = ({
     children,
@@ -17,9 +18,9 @@ export const ApplicationToolbarAction = ({
             {...otherCarbonHeaderGlobalActionProps}
             className={`${eccgui}-application__toolbar__action ` + className}
         >
-            { children }
+            {children}
         </CarbonHeaderGlobalAction>
-    )
-}
+    );
+};
 
 export default ApplicationToolbarAction;

package/src/components/Application/ApplicationToolbarPanel.tsx

@@ -1,8 +1,6 @@
 import React from "react";
-import {
-    HeaderPanel as CarbonHeaderPanel,
-    HeaderPanelProps as CarbonHeaderPanelProps,
-} from "carbon-components-react";
+import { HeaderPanel as CarbonHeaderPanel, HeaderPanelProps as CarbonHeaderPanelProps } from "carbon-components-react";
+
 import { CLASSPREFIX as eccgui } from "../../configuration/constants";
 
 export interface ApplicationToolbarPanelProps extends CarbonHeaderPanelProps {
@@ -15,7 +13,7 @@ export interface ApplicationToolbarPanelProps extends CarbonHeaderPanelProps {
      * Event handler getting called when the the user clicks outside of the panel menu area.
      */
     onOutsideClick?: () => void;
-};
+}
 
 export const ApplicationToolbarPanel = ({
     children,
@@ -24,17 +22,16 @@ export const ApplicationToolbarPanel = ({
     onOutsideClick,
     ...otherCarbonHeaderPanelProps
 }: ApplicationToolbarPanelProps) => {
-
     const panel = (
         <CarbonHeaderPanel
             {...otherCarbonHeaderPanelProps}
             className={`${eccgui}-application__toolbar__panel ` + className}
         >
-            { children }
+            {children}
         </CarbonHeaderPanel>
     );
 
-    return (onLeave || onOutsideClick) ? (
+    return onLeave || onOutsideClick ? (
         <>
             <div
                 className={
@@ -46,7 +43,9 @@ export const ApplicationToolbarPanel = ({
             />
             {panel}
         </>
-    ) : panel;
-}
+    ) : (
+        panel
+    );
+};
 
 export default ApplicationToolbarPanel;

package/src/components/Application/ApplicationToolbarSection.tsx

@@ -1,7 +1,8 @@
 import React from "react";
+
 import { CLASSPREFIX as eccgui } from "../../configuration/constants";
 
-export interface ApplicationToolbarSectionProps extends React.HTMLAttributes<HTMLDivElement> {};
+export type ApplicationToolbarSectionProps = React.HTMLAttributes<HTMLDivElement>;
 
 export const ApplicationToolbarSection = ({
     children,
@@ -9,13 +10,10 @@ export const ApplicationToolbarSection = ({
     ...otherDivProps
 }: ApplicationToolbarSectionProps) => {
     return (
-        <div
-            {...otherDivProps}
-            className={`${eccgui}-application__toolbar__section ` + className}
-        >
-            { children }
+        <div {...otherDivProps} className={`${eccgui}-application__toolbar__section ` + className}>
+            {children}
         </div>
-    )
-}
+    );
+};
 
 export default ApplicationToolbarSection;

package/src/components/Application/_content.scss

@@ -5,16 +5,16 @@ $ui-02: $eccgui-color-workspace-background !default;
 // tweack original layout
 
 .#{$prefix}--content {
-    padding: $eccgui-size-block-whitespace;
     min-height: 100vh;
+    padding: $eccgui-size-block-whitespace;
     transform: none; // prevent problems with fixed positions of children, @see https://www.darrenlester.com/blog/why-fixed-position-element-not-relative-to-viewport
 }
 
 .#{$prefix}--header ~ .#{$prefix}--content {
-    margin-top: 0;
-    padding-top: calc(#{mini-units(8)} + #{$eccgui-size-block-whitespace});
-    min-height: calc(100vh - #{mini-units(8)} - #{2 * $eccgui-size-block-whitespace});
     box-sizing: content-box;
+    min-height: calc(100vh - #{mini-units(8)} - #{2 * $eccgui-size-block-whitespace});
+    padding-top: calc(#{mini-units(8)} + #{$eccgui-size-block-whitespace});
+    margin-top: 0;
 }
 
 .#{$prefix}--side-nav ~ .#{$prefix}--content,

package/src/components/Application/_sidebar.scss

@@ -1,6 +1,6 @@
 $ui-02: $eccgui-color-workspace-background !default;
 
-@import '~@carbon/styles/scss/components/ui-shell/side-nav/index';
+@import "~@carbon/styles/scss/components/ui-shell/side-nav/index";
 
 // tweak original layout
 
@@ -11,8 +11,8 @@ $ui-02: $eccgui-color-workspace-background !default;
 }
 
 .#{$prefix}--side-nav.#{$prefix}--side-nav--rail:not(.#{$prefix}--side-nav--fixed) {
-    transform: translateX(0);
     width: mini-units(8);
+    transform: translateX(0);
 
     &:hover {
         width: mini-units(40);

package/src/components/AutoSuggestion/AutoSuggestion.scss

@@ -3,25 +3,27 @@
     width: 100%;
 
     &__dropdown {
-        transition: all 300ms;
-        background-color: $pt-popover2-background-color;
         position: absolute;
         top: 0;
         z-index: 2;
         display: flex;
         flex-flow: column wrap;
-        margin-top: 0;
         max-width: 25rem;
         max-height: 30rem;
+        margin-top: 0;
+        overflow-x: hidden;
+        overflow-y: auto;
+        background-color: $pt-popover-background-color;
+
         // TODO: was: 1px solid $list-container-item-border-color
         border: 1px solid;
         border-radius: 0.3rem;
-        overflow-x:hidden;
-        overflow-y: auto;
+        transition: all 300ms;
 
-        .#{$ns}-menu, .#{$eccgui}-overviewitem__item {
-            max-width: 24rem;
+        .#{$ns}-menu,
+        .#{$eccgui}-overviewitem__item {
             box-sizing: border-box;
+            max-width: 24rem;
         }
     }
 }
@@ -30,17 +32,17 @@
     position: relative;
 
     .CodeMirror {
+        top: 2px;
         height: calc(#{$eccgui-size-textfield-height-regular} - 4px);
-        margin: 0;
         padding: 0;
-        top: 2px;
+        margin: 0;
         overflow: hidden;
 
         .CodeMirror-scroll {
-            margin: 0;
             padding: 0;
-            overflow-y: hidden !important;
+            margin: 0;
             overflow-x: auto !important;
+            overflow-y: hidden !important;
         }
 
         .CodeMirror-vscrollbar {
@@ -59,37 +61,37 @@
         pre.CodeMirror-line,
         pre.CodeMirror-placeholder,
         pre.CodeMirror-line-like {
+            box-sizing: content-box;
+            height: calc(#{$eccgui-size-textfield-height-regular} - 4px - 6px);
+            padding: 3px 0;
             font-family: $eccgui-font-family-default;
             font-size: $eccgui-size-typo-base;
-            padding: 3px 0;
-            height: calc(#{$eccgui-size-textfield-height-regular} - 4px - 6px);
             line-height: calc(#{$eccgui-size-textfield-height-regular} - 4px - 6px);
-            box-sizing: content-box;
             color: $input-color;
         }
 
         pre.CodeMirror-placeholder {
-            color: $input-placeholder-color;
-            padding: 0;
             top: 3px;
+            padding: 0;
+            color: $input-placeholder-color;
         }
 
         .CodeMirror-cursor {
-            border: none;
-            margin: 0;
             width: 1px;
+            margin: 0;
             background-color: transparent;
+            border: none;
 
             &::after {
-                content: " ";
-                height: 1rem;
-                width: 1px;
-                overflow: hidden;
-                background-color: black;
                 position: absolute;
                 top: 50%;
                 right: 0;
+                width: 1px;
+                height: 1rem;
                 margin-top: -0.5rem;
+                overflow: hidden;
+                content: " ";
+                background-color: black;
             }
         }
     }
@@ -97,12 +99,12 @@
 
 .#{$eccgui}-autosuggestion__text--highlighted {
     display: inline-block;
+    color: $eccgui-color-warning-text;
     background-color: $eccgui-color-warning-background;
-    color:$eccgui-color-warning-text;
 }
 
 .#{$eccgui}-autosuggestion__text--highlighted-error {
-    background-image:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAADCAYAAAC09K7GAAAAAXNSR0IArs4c6QAAAAZiS0dEAP8A/wD/oL2nkwAAAAlwSFlzAAALEwAACxMBAJqcGAAAAAd0SU1FB9sJDw4cOCW1/KIAAAAZdEVYdENvbW1lbnQAQ3JlYXRlZCB3aXRoIEdJTVBXgQ4XAAAAHElEQVQI12NggIL/DAz/GdA5/xkY/qPKMDAwAADLZwf5rvm+LQAAAABJRU5ErkJggg==");
-    background-position: left bottom;
+    background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAADCAYAAAC09K7GAAAAAXNSR0IArs4c6QAAAAZiS0dEAP8A/wD/oL2nkwAAAAlwSFlzAAALEwAACxMBAJqcGAAAAAd0SU1FB9sJDw4cOCW1/KIAAAAZdEVYdENvbW1lbnQAQ3JlYXRlZCB3aXRoIEdJTVBXgQ4XAAAAHElEQVQI12NggIL/DAz/GdA5/xkY/qPKMDAwAADLZwf5rvm+LQAAAABJRU5ErkJggg==");
     background-repeat: repeat-x;
+    background-position: left bottom;
 }

package/src/components/AutoSuggestion/AutoSuggestionList.tsx

@@ -1,19 +1,21 @@
 import React from "react";
 import computeScrollIntoView from "compute-scroll-into-view";
+
+import { CLASSPREFIX as eccgui } from "../../configuration/constants";
+
 import {
+    Highlighter,
     Menu,
     MenuItem,
-    Highlighter,
+    OverflowText,
     OverviewItem,
     OverviewItemDescription,
     OverviewItemLine,
-    OverflowText,
-    Spinner,
     Spacing,
+    Spinner,
     Tooltip,
 } from "./../../";
 import { ISuggestionWithReplacementInfo } from "./AutoSuggestion";
-import { CLASSPREFIX as eccgui } from "../../configuration/constants";
 
 export interface AutoSuggestionListProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "children"> {
     // The options of the drop down

package/src/components/AutoSuggestion/ExtendedCodeEditor.tsx

@@ -1,9 +1,11 @@
-import "codemirror/addon/display/placeholder.js";
-import "codemirror/mode/sparql/sparql.js";
 import React from "react";
 import { UnControlled as UnControlledEditor } from "react-codemirror2";
 import { Classes as BlueprintClassNames } from "@blueprintjs/core";
 import { Editor as CodeMirrorEditor, EditorChange } from "codemirror";
+
+import "codemirror/addon/display/placeholder.js";
+import "codemirror/mode/sparql/sparql.js";
+
 import { CLASSPREFIX as eccgui } from "../../configuration/constants";
 
 export interface IRange {

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

@@ -1,6 +1,8 @@
 import React from "react";
-import "@testing-library/jest-dom";
 import { render } from "@testing-library/react";
+
+import "@testing-library/jest-dom";
+
 import AutoSuggestion, { AutoSuggestionProps } from "../AutoSuggestion";
 
 describe("AutoSuggestion", () => {
@@ -45,6 +47,6 @@ describe("AutoSuggestion", () => {
 
     it("should set label prop properly", () => {
         const { getByText } = render(<AutoSuggestion {...props} />);
-        expect(getByText(props.label!!)).toBeTruthy();
+        expect(getByText(props.label!)).toBeTruthy();
     });
 });

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

@@ -1,6 +1,9 @@
 import React from "react";
-import "@testing-library/jest-dom";
+import { Classes } from "@blueprintjs/core";
 import { fireEvent, render, waitFor } from "@testing-library/react";
+
+import "@testing-library/jest-dom";
+
 import { CLASSPREFIX as eccgui } from "../../../configuration/constants";
 import { AutoSuggestionList, AutoSuggestionListProps } from "../AutoSuggestionList";
 
@@ -12,8 +15,12 @@ describe("Dropdown list", () => {
             loading: false,
             isOpen: false,
             options: [],
-            itemToHighlight: () => {},
-            onItemSelectionChange: () => {},
+            itemToHighlight: () => {
+                return;
+            },
+            onItemSelectionChange: () => {
+                return;
+            },
         };
 
         mockOptions = [
@@ -71,7 +78,7 @@ describe("Dropdown list", () => {
         };
         const { container } = render(<AutoSuggestionList {...props} />);
         await waitFor(() => {
-            const parentDiv: HTMLElement = container.querySelector(`.${eccgui}-autosuggestion__dropdown`)!!;
+            const parentDiv: HTMLElement = container.querySelector(`.${eccgui}-autosuggestion__dropdown`)!;
             const leftOffset = Number(parentDiv.style.left.replace(/px$/, ""));
             expect(leftOffset).toBe(offset);
         });
@@ -85,12 +92,14 @@ describe("Dropdown list", () => {
             options: mockOptions,
         };
         const { container } = render(<AutoSuggestionList {...props} />);
-        const activeListItems = Array.from(container.querySelectorAll("li .bp4-menu-item.bp4-active"));
+        const activeListItems = Array.from(container.querySelectorAll(`li .${Classes.MENU_ITEM}.${Classes.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) => {});
+        const mockOnItemSelection = jest.fn((item) => {
+            return;
+        });
         props = {
             ...props,
             loading: false,
@@ -100,13 +109,15 @@ describe("Dropdown list", () => {
         };
         const { getByText } = render(<AutoSuggestionList {...props} />);
         const dropdownListItem = getByText(props.options[0].query).closest(`.${eccgui}-menu__item`);
-        fireEvent.click(dropdownListItem!!);
+        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) => {});
+        const mockItemToHighlight = jest.fn((item) => {
+            return;
+        });
         props = {
             ...props,
             loading: false,
@@ -116,10 +127,10 @@ describe("Dropdown list", () => {
         };
         const { container } = render(<AutoSuggestionList {...props} />);
         const firstItem = container.querySelector("li");
-        fireEvent.mouseEnter(firstItem!!);
+        fireEvent.mouseEnter(firstItem!);
         expect(mockItemToHighlight).toHaveBeenCalledWith(props.options[0]);
         expect(mockItemToHighlight).toHaveBeenCalledTimes(1);
-        fireEvent.mouseLeave(firstItem!!);
+        fireEvent.mouseLeave(firstItem!);
         expect(mockItemToHighlight).toHaveBeenCalledTimes(1);
     });
 });

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

@@ -1,8 +1,10 @@
 import React from "react";
-import "@testing-library/jest-dom";
 import { render } from "@testing-library/react";
-import { ExtendedCodeEditor, ExtendedCodeEditorProps } from "../../../../index";
 import CodeMirror from "codemirror";
+
+import "@testing-library/jest-dom";
+
+import { ExtendedCodeEditor, ExtendedCodeEditorProps } from "../../../../index";
 import { CLASSPREFIX as eccgui } from "../../../configuration/constants";
 
 describe("SingleLineCodeEditor", () => {

package/src/components/AutocompleteField/AutoCompleteField.tsx

@@ -387,7 +387,7 @@ export function AutoCompleteField<T, UPDATE_VALUE>(props: AutoCompleteFieldProps
                     {onlyDropdownWithQuery === false && (
                         <IconButton
                             name={"toggler-caretdown"}
-                            onClick={(e) => {
+                            onClick={(e: React.MouseEvent<HTMLElement>) => {
                                 const target = e.currentTarget
                                     .closest(`.${eccgui}-autocompletefield__input`)
                                     ?.querySelector("input");

package/src/components/AutocompleteField/index.ts

@@ -1,5 +1,5 @@
 import { createNewItemRendererFactory } from "./autoCompleteFieldUtils";
 export * from "./AutoCompleteField";
 export const autoCompleteFieldUtils = {
-    createNewItemRendererFactory
-}
+    createNewItemRendererFactory,
+};