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

package/src/common/utils/CssCustomProperties.ts

@@ -0,0 +1,123 @@
+/**
+ * Based on CSS Tricks tutorial.
+ * @see https://css-tricks.com/how-to-get-all-custom-properties-on-a-page-in-javascript/
+ */
+
+interface getLocalCssStyleRulesProps {
+    cssRuleType?: "CSSStyleRule";
+    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 = () => {
+        if (document && document.styleSheets) {
+            return Array.from(document.styleSheets)
+                .filter((stylesheet) => {
+                    // is inline stylesheet or from same domain
+                    if (!stylesheet.href) {
+                        return true;
+                    }
+                    return stylesheet.href.indexOf(window.location.origin) === 0;
+                });
+        }
+
+        return [];
+    }
+
+    static listLocalCssRules = () => {
+        return CssCustomProperties.listLocalStylesheets()
+            .map((stylesheet) => {
+                return Array.from(stylesheet.cssRules);
+            })
+            .flat();
+    }
+
+    static listLocalCssStyleRules = (filter: getLocalCssStyleRulesProps = {}) => {
+        const {cssRuleType = "CSSStyleRule", selectorText} = filter;
+        return CssCustomProperties.listLocalCssRules()
+            .filter((cssrule) => {
+                if (cssrule.constructor.name !== cssRuleType) { return false; }
+                if (!!selectorText && cssrule.selectorText !== selectorText) { return false; }
+                return true;
+            })
+    }
+
+    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/common/utils/stringUtils.ts

@@ -0,0 +1,2 @@
+/** Removes leading and trailing spaces. In addition converts multiple subsequent spaces to a single space. */
+export const removeExtraSpaces = (text: string) => text.replace(/\s+/g, " ").trim();

package/src/components/Accordion/accordion.scss

@@ -3,7 +3,6 @@
 
 // changes
 
-
 .#{$prefix}--accordion__heading {
     min-height: mini-units(5);
     align-items: center;
@@ -33,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 & {
@@ -47,7 +53,7 @@
     }
 
     *, *::before, *::after {
-        box-sizing: revert;
+        box-sizing: inherit;
     }
 }
 

package/src/components/Application/ApplicationContent.tsx

@@ -30,11 +30,6 @@ function ApplicationContent({
     isApplicationSidebarExpanded = false,
     isApplicationSidebarRail = false,
     htmlMainProps,
-    /*
-        TODO: type definitions do not include data attributes because of their infinite number of possible names, so we
-        need to solve this by filtering out all other props, or create a stack of allowed data attributes or using
-        a combined process of dynamic keys and template mappings in typescript
-    */
     ...otherPropsShouldOnlyBeUsedForDataAttributes
 }: IApplicationContentProps) {
 

package/src/components/Application/ApplicationTitle.tsx

@@ -54,11 +54,6 @@ function ApplicationTitle({
     isAlignedWithSidebar=false,
     isApplicationSidebarExpanded,
     htmlAProps,
-    /*
-        TODO: type definitions do not include data attributes because of their infinite number of possible names, so we
-        need to solve this by filtering out all other props, or create a stack of allowed data attributes or using
-        a combined process of dynamic keys and template mappings in typescript
-    */
     ...otherPropsShouldOnlyBeUsedForDataAttributes
 }: IApplicationTitleProps) {
 

package/src/components/AutoSuggestion/AutoSuggestion.tsx

@@ -182,6 +182,7 @@ const AutoSuggestion = ({
                 return () => marker.clear()
             }
         }
+        return;
     }, [highlightedElement, selectedTextRanges, editorInstance])
 
     //handle linting
@@ -189,7 +190,6 @@ const AutoSuggestion = ({
         const parseError = validationResponse?.parseError;
         if (parseError && editorInstance) {
             const { message, start, end } = parseError;
-            // TODO: Display error message
             editorInstance.getDoc().getEditor()
             const marker = editorInstance.markText(
                 { line: 0, ch: start },
@@ -267,6 +267,7 @@ const AutoSuggestion = ({
             handleEditorInputChange(value, cursorPosition)
             return handleEditorInputChange.cancel
         }
+        return;
     }, [cursorPosition, value, isFocused, handleEditorInputChange]);
 
     // Trigger input validation

package/src/components/AutoSuggestion/SingleLineCodeEditor.tsx

@@ -1,4 +1,4 @@
-import "codemirror/addon/display/placeholder"
+import "codemirror/addon/display/placeholder.js"
 import "codemirror/mode/sparql/sparql.js";
 import React from "react";
 import { Controlled as ControlledEditor } from "react-codemirror2";
@@ -74,7 +74,7 @@ const SingleLineCodeEditor = ({
             placeholder,
             scrollbarStyle: showScrollBar ? "native" : "null"
         }}
-        onSelection={(editor, data) => {
+        onSelection={(_editor, data) => {
           if(Array.isArray(data?.ranges)) {
             onSelection(data.ranges
                 .map((r: any) => ({from: r.from().ch, to: r.to().ch}))
@@ -84,7 +84,7 @@ const SingleLineCodeEditor = ({
         onCursor={(editor, data) => {
           onCursorChange(data, editor.cursorCoords(true, "div"));
         }}
-        onBeforeChange={(editor, data, value) => {
+        onBeforeChange={(_editor, _data, value) => {
           const trimmedValue = value.replace(/\n/g, "");
           onChange(trimmedValue);
         }}

package/src/components/AutocompleteField/AutoCompleteField.tsx

@@ -213,6 +213,7 @@ export function AutoCompleteField<T extends any, UPDATE_VALUE extends any>(props
                 setListLoading(false);
             };
         }
+        return;
     },
         // eslint-disable-next-line react-hooks/exhaustive-deps
         [hasFocus, query]
@@ -272,7 +273,8 @@ export function AutoCompleteField<T extends any, UPDATE_VALUE extends any>(props
                 // Disable highlighting, since we used empty string search
                 enableHighlighting = false;
                 // Put selected item at the top if it is not in the result list
-                if (!!selectedItem && itemIndexOf(emptyStringResults, selectedItem) === -1) {
+                if (!!selectedItem && itemIndexOf(emptyStringResults, selectedItem) > -1) {
+                    emptyStringResults.splice(itemIndexOf(emptyStringResults, selectedItem), 1)
                     result = [selectedItem, ...emptyStringResults];
                 } else {
                     result = emptyStringResults;
@@ -346,7 +348,7 @@ export function AutoCompleteField<T extends any, UPDATE_VALUE extends any>(props
     };
     const updatedPopOverProps: Partial<IPopoverProps> = {
         minimal: true,
-        position: "bottom",
+        position: "bottom-left",
         popoverClassName: `${eccgui}-autocompletefield__options`,
         wrapperTagName: "div",
         boundary: "window",
@@ -385,12 +387,12 @@ export function AutoCompleteField<T extends any, UPDATE_VALUE extends any>(props
                 onQueryChange={(q) => setQuery(q)}
                 closeOnSelect={true}
                 query={query}
-                // FIXME: This leads to odd compile errors without "as any"
+                // This leads to odd compile errors without "as any"
                 popoverProps={updatedPopOverProps as any}
                 selectedItem={selectedItem}
                 fill
                 {...createNewItemProps}
-                // FIXME: This leads to odd compile errors without "as any"
+                // This leads to odd compile errors without "as any"
                 inputProps={updatedInputProps as any}
                 itemListRenderer={listLoading ? () => <Menu><MenuItem disabled={true} text={<Spinner position={"inline"} />} style={fieldWidthLimits} /></Menu> : undefined}
             />

package/src/components/Breadcrumb/BreadcrumbItem.tsx

@@ -7,7 +7,7 @@ import {
 import { CLASSPREFIX as eccgui } from "../../configuration/constants";
 import { openInNewTab } from "../../common/utils/openInNewTab";
 
-// TODO: enforce href and remove onClick later
+// FIXME: enforce href and remove onClick later
 export type IBreadcrumbItemProps = Omit<
     IBlueprintBreadcrumbItemProps,
     // we remove some properties that are currently not necessary, required usage should be discussed
@@ -19,14 +19,14 @@ export type IBreadcrumbItemProps = Omit<
 
 function BreadcrumbItem({
     className = "",
-    onClick, 
-    href, 
+    onClick,
+    href,
     //itemDivider='',
     ...otherBlueprintBreadcrumbProps
 }: IBreadcrumbItemProps) {
- 
+
     /*
-        TODO: adding `data-divider` does not work this way because BlueprintJS
+        FIXME: adding `data-divider` does not work this way because BlueprintJS
         breadcrumb component does not support (and forward) it on HTML element
         level. The idea is to add the divider as data-* property to use it via
         CSS/Sass as content for the pseudo element, currently done static in CSS

package/src/components/Breadcrumb/BreadcrumbList.tsx

@@ -18,7 +18,7 @@ type ReducedBreadcrumbsProps = Omit<
     "popoverProps"
 >;
 
-// TODO: enforce onItemClick later
+// FIXME: enforce onItemClick later when href value can always be routed correctly
 interface IBreadcrumbListProps extends ReducedBreadcrumbsProps {
     /**
         list of breadcrumb items to display

package/src/components/Button/Button.stories.tsx

@@ -19,7 +19,7 @@ export default {
         },
         className: {
             description: "A space-delimited list of class names.",
-            control: "boolean",
+            control: "text",
             table: {
                 defaultValue: { summary: undefined },
                 type: { summary: "string" },

package/src/components/Button/Button.tsx

@@ -116,7 +116,7 @@ function Button({
     </ButtonType>
   );
 
-  return tooltip ? (
+  return (tooltip && !restProps.loading) ? (
     <Tooltip content={tooltip} {...tooltipProperties}>
       <span>{button}</span>
     </Tooltip>

package/src/components/Card/Card.tsx

@@ -7,18 +7,23 @@ import { CLASSPREFIX as eccgui } from "../../configuration/constants";
 
 export interface CardProps extends BlueprintCardProps {
     /**
-     * When set to `true` card is included as simple HTML `div` element.
+     * `<Card />` element is included in DOM as simple `div` element.
      * By default it is a HTML `section`.
      */
     isOnlyLayout?: boolean;
     /**
-     * When set to true, will take the full height of container
+     * Take the full height of container to display the card.
      */
     fullHeight?: boolean;
     /**
-     * when set to true will invert the background color and slightly darken
+     * Background color is slightly altered to differ card display from other cards.
      */
     elevated?: boolean;
+    /**
+     * When card (or its children) get focus the card is scrolled into the viewport.
+     * Property value defined which part of the card is always scrolled in, this may important when the card is larger than the viewport.
+     */
+    scrollinOnFocus?: "start" | "center" | "end";
 }
 
 /**
@@ -32,26 +37,40 @@ function Card({
     isOnlyLayout=false,
     fullHeight=false,
     elevated=false,
+    scrollinOnFocus,
     interactive,
     ...otherProps
 }: CardProps) {
+    const scrollIn = !!scrollinOnFocus ? {
+        tabIndex: 0,
+        onFocus: (e: any) => {
+            const el = e.target.closest(".diapp-iframewindow__content");
+            setTimeout(()=>{if (el) el.scrollIntoView({
+                behavior: "smooth",
+                block: scrollinOnFocus,
+                inline: scrollinOnFocus,
+            })}, 100);
+        }
+    } : {}
     const cardElement = (
         <BlueprintCard
             className={
                 `${eccgui}-card ` +
                 (fullHeight ? ` ${eccgui}-card--fullheight ` : '') +
                 (elevated ? ` ${eccgui}-card--elevated ` : '') +
+                (!!scrollinOnFocus ? ` ${eccgui}-card--scrollonfocus ` : '') +
                 className
             }
             elevation={elevation}
             interactive={!!otherProps.onClick ? true : interactive}
+            {...scrollIn}
             {...otherProps}
         >
             {children}
         </BlueprintCard>
     );
 
-    // TODO: improve Card element so it is itself a section html element
+    // FIXME: improve Card element so it is itself a section html element
     return isOnlyLayout === false ? <section>{cardElement}</section> : cardElement;
 };
 

package/src/components/Card/card.scss

@@ -44,6 +44,10 @@ $eccgui-size-card-spacing: $eccgui-size-typo-base !default;
     @extend .#{$eccgui}-grid__row--fullheight;
 }
 
+.#{$eccgui}-card--scrollonfocus {
+    outline: none;
+}
+
 .#{$eccgui}-card__header {
     padding: $eccgui-size-card-spacing/2 $eccgui-size-card-spacing/2 $eccgui-size-card-spacing/2 $eccgui-size-card-spacing;
     box-sizing: content-box;

package/src/components/Checkbox/checkbox.scss

@@ -35,6 +35,10 @@ $switch-checked-background-color-disabled: rgba($switch-checked-background-color
             box-shadow: none;
         }
 
+        input:focus ~ .#{$ns}-control-indicator {
+            outline-offset: 0;
+        }
+
         input:disabled ~ .#{$ns}-control-indicator,
         input:disabled:checked ~ .#{$ns}-control-indicator,
         {

package/src/components/Dialog/Modal.tsx

@@ -47,7 +47,7 @@ function Modal({
     ...otherProps
 }: ModalProps) {
 
-    const alteredChildren = React.Children.map(children, (child, index) => {
+    const alteredChildren = React.Children.map(children, (child) => {
         if ((child as React.ReactElement).type && (child  as React.ReactElement).type === Card) {
             return React.cloneElement(
                 child as React.ReactElement,

package/src/components/Form/FieldItem.tsx

@@ -5,10 +5,10 @@ import { CLASSPREFIX as eccgui } from "../../configuration/constants";
 import {TestableComponent} from "../interfaces";
 
 /*
-    TODO:
+    FIXME: Improve development convenience and prevent development errors
 
-    * disabled stae could be automatically forwarded to inserted input element,
-      currently this need to be dome explicitely .
+    * disabled state could be automatically forwarded to inserted input element,
+      currently this need to be dome explicitly .
     * input id could be forwarded to label and input element
     * input id could be created when not given
 */

package/src/components/Form/FieldItemRow.tsx

@@ -2,13 +2,11 @@ import React from "react";
 import { CLASSPREFIX as eccgui } from "../../configuration/constants";
 
 /*
-    TODO:
-
-    * allow grow factors for children
+    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 : "")}>{children}</div>;
+    return <div className={`${eccgui}-fielditem__row` + (className ? " " + className : "")} {...otherProps}>{children}</div>;
 }
 
 export default FieldItemRow;

package/src/components/Form/FieldSet.tsx

@@ -59,6 +59,7 @@ function FieldSet({
                 classIntent +
                 (boxed ? ` ${eccgui}-fieldset--boxed` : "")
             }
+            {...otherProps}
         >
             {title && <legend>{title}</legend>}
             {userhelp}

package/src/components/Icon/IconButton.tsx

@@ -10,7 +10,7 @@ interface IconButtonProps extends ButtonProps {
     className?: string
     // Tooltip text
     text?: string,
-    // Time after tooltip text is viible when icon is hovered/focuses
+    // Time after tooltip text is visible when icon is hovered/focuses
     tooltipOpenDelay?: number,
     // Display large icon version
     large?: boolean,
@@ -18,7 +18,7 @@ interface IconButtonProps extends ButtonProps {
     small?: boolean
     // If the tooltip should be set as title attribute instead of the Tooltip component. If true, all other tooltip parameters are ignored.
     tooltipAsTitle?: boolean
-    // If set, button will become an anchor button. FIXME: Setting this parameter should not change the type of the button. Split into several components.
+    // If set, button will become an anchor button. FIXME: CMEM-3742: Setting this parameter should not change the type of the button. Split into several components.
     href?: string
     // Additional description of the icon function to improve accessibility, if not defined then the text label is used as fallback
     description?: string

package/src/components/Iframe/Iframe.tsx

@@ -60,7 +60,7 @@ export const Iframe = React.forwardRef<HTMLIFrameElement, IframeProps>(({
     const classNames = `${eccgui}-iframe` +
         (!!useViewportHeight ? ` ${eccgui}-iframe--${useViewportHeight}height` : "") +
         (!!useAvailableSpace ? ` ${eccgui}-iframe--useavailablespace` : "");
-    const { onLoad = (e: any)=>{}, style, ...otherOriginalIframeProps } = htmlIframeProps;
+    const { onLoad = ()=>{}, style, ...otherOriginalIframeProps } = htmlIframeProps;
     return (
         <div className={classNames}>
             {!isLoaded && <Spinner />}

package/src/components/Menu/MenuItem.tsx

@@ -11,7 +11,7 @@ interface IProps {
     icon?: ValidIconName | string[]
     // Props defined by the Blueprint component that should be forwarded
     internalProps?: Partial<MenuItemProps> & React.AnchorHTMLAttributes<HTMLAnchorElement>
-    // FIXME: For backward compatibility, should be avoided in all code bases
+    // FIXME: CMEM-3742: For backward compatibility, should be avoided in all code bases
     [key: string]: any
 }
 

package/src/components/MultiSelect/MultiSelect.stories.tsx

@@ -1,6 +1,6 @@
 import React from "react";
 import { ComponentStory, ComponentMeta } from "@storybook/react";
-import { name } from "react-lorem-ipsum";
+import { loremIpsum } from "react-lorem-ipsum";
 
 import MultiSelectExample from "./MultiSelect";
 
@@ -36,8 +36,16 @@ const Template: ComponentStory<typeof MultiSelectExample> = (args) => <MultiSele
 
 export const Default = Template.bind({});
 
-const items = new Array(5).fill(undefined).map((_) => {
-    const testLabel = name();
+const testLabels = loremIpsum({
+    p: 1,
+    avgSentencesPerParagraph: 5,
+    avgWordsPerSentence: 1,
+    startWithLoremIpsum: false,
+    random: false
+}).toString().split(".");
+
+const items = new Array(5).fill(undefined).map((_, id) => {
+    const testLabel = testLabels[id];
     return { testLabel, testId: `${testLabel}-id` };
 });
 
@@ -45,8 +53,8 @@ Default.args = {
     items,
     canCreateNewItem: true,
     prePopulateWithItems: false,
-    equalityProp: "testId",
-    labelProp: "testLabel",
+    itemId: item => item.testId,
+    itemLabel: item => item.testLabel,
     openOnKeyDown: true,
 };
 
@@ -58,6 +66,6 @@ openDropdownWhenFocused.args = {
     items,
     canCreateNewItem: true,
     prePopulateWithItems: false,
-    equalityProp: "testId",
-    labelProp: "testLabel",
+    itemId: item => item.testId,
+    itemLabel: item => item.testLabel,
 };