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

package/src/common/utils/CssCustomProperties.ts

@@ -18,7 +18,6 @@ interface getCustomPropertiesProps extends getLocalCssStyleRulesProps {
 }
 
 export default class CssCustomProperties {
-
     getterDefaultProps = {} as getCustomPropertiesProps;
     customprops = {};
 
@@ -37,26 +36,25 @@ export default class CssCustomProperties {
         }
         const customprops = CssCustomProperties.listCustomProperties({
             ...this.getterDefaultProps,
-            ...props
+            ...props,
         });
         this.customprops = customprops;
         return customprops;
-    }
+    };
 
     static listLocalStylesheets = (): CSSStyleSheet[] => {
         if (document && document.styleSheets) {
-            return (Array.from(document.styleSheets) as CSSStyleSheet[])
-                .filter((stylesheet) => {
-                    // is inline stylesheet or from same domain
-                    if (!stylesheet.href) {
-                        return true;
-                    }
-                    return stylesheet.href.indexOf(window.location.origin) === 0;
-                });
+            return (Array.from(document.styleSheets) as CSSStyleSheet[]).filter((stylesheet) => {
+                // is inline stylesheet or from same domain
+                if (!stylesheet.href) {
+                    return true;
+                }
+                return stylesheet.href.indexOf(window.location.origin) === 0;
+            });
         }
 
         return [] as CSSStyleSheet[];
-    }
+    };
 
     static listLocalCssRules = (): CSSRule[] => {
         return CssCustomProperties.listLocalStylesheets()
@@ -64,43 +62,38 @@ export default class CssCustomProperties {
                 return Array.from(stylesheet.cssRules);
             })
             .flat();
-    }
+    };
 
     static listLocalCssStyleRules = (filter: getLocalCssStyleRulesProps = {}): AllowedCSSRule[] => {
-        const {cssRuleType = "CSSStyleRule", selectorText} = filter;
-        const cssStyleRules = CssCustomProperties.listLocalCssRules()
-            .filter((rule) => {
-                const cssrule = rule as AllowedCSSRule;
-                if((cssrule).style) {
-                    if (cssrule.constructor.name !== cssRuleType) {
-                        return false;
-                    }
-                    if (!!selectorText && cssrule.selectorText !== selectorText) {
-                        return false;
-                    }
-                    return true;
-                } else {
+        const { cssRuleType = "CSSStyleRule", selectorText } = filter;
+        const cssStyleRules = CssCustomProperties.listLocalCssRules().filter((rule) => {
+            const cssrule = rule as AllowedCSSRule;
+            if (cssrule.style) {
+                if (cssrule.constructor.name !== cssRuleType) {
                     return false;
                 }
-            })
-        return cssStyleRules as AllowedCSSRule[]
-    }
+                if (!!selectorText && cssrule.selectorText !== selectorText) {
+                    return false;
+                }
+                return true;
+            } else {
+                return false;
+            }
+        });
+        return cssStyleRules as AllowedCSSRule[];
+    };
 
     static listLocalCssStyleRuleProperties = (filter: getLocalCssStyleRulePropertiesProps = {}) => {
         const { propertyType = "all", ...otherFilters } = filter;
         return CssCustomProperties.listLocalCssStyleRules(otherFilters)
             .map((cssrule) => {
-                return [...(cssrule as any).style]
-                    .map((propertyname) => {
-                        return [
-                            propertyname.trim(),
-                            (cssrule as CSSStyleRule).style.getPropertyValue(propertyname).trim()
-                        ];
-                    });
+                return [...(cssrule as any).style].map((propertyname) => {
+                    return [propertyname.trim(), (cssrule as CSSStyleRule).style.getPropertyValue(propertyname).trim()];
+                });
             })
             .flat()
             .filter((declaration) => {
-                switch(propertyType) {
+                switch (propertyType) {
                     case "normal":
                         return declaration[0].indexOf("--") !== 0;
                     case "custom":
@@ -108,28 +101,21 @@ export default class CssCustomProperties {
                 }
                 return true; // case "all"
             });
-    }
+    };
 
     static listCustomProperties = (props: getCustomPropertiesProps = {}) => {
-        const {
-            removeDashPrefix = true,
-            returnObject = true,
-            ...filterProps
-        } = props;
+        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[0].substr(2), declaration[1]];
             }
             return declaration;
         });
 
         return returnObject ? Object.fromEntries(customProperties) : customProperties;
-    }
+    };
 }

package/src/common/utils/characters.ts

@@ -20,92 +20,90 @@ const internalInvisibleZeroWidthCharacterCodePoints: InternalInvisibleCharacter[
     { codePoint: 65532, label: "Object Replacement Character" },
     { codePoint: [119155, 119162], label: "Invisible Musical Symbol" },
     { codePoint: [917504, 917631], label: "Tags" },
-    { codePoint: [917760, 917999], label: "Variation Selectors" }
-]
+    { codePoint: [917760, 917999], label: "Variation Selectors" },
+];
 
-const toHex = (codepoint: number): string => codepoint.toString(16).toUpperCase()
+const toHex = (codepoint: number): string => codepoint.toString(16).toUpperCase();
 
 const padWithZeroes = (hexString: string): string => {
-    if(hexString.length % 2 === 1) {
-        return `0${hexString}`
+    if (hexString.length % 2 === 1) {
+        return `0${hexString}`;
     }
-    return hexString
-}
+    return hexString;
+};
 
 /** All characters that are considered invisible zero-width characters that e.g. need to be handled in input fields. */
-const invisibleZeroWidthCharacterCodePoints: InvisibleCharacter[] = internalInvisibleZeroWidthCharacterCodePoints.map(cp => {
-    const create = (codePoint: number, label?: string) => {
-        const hexString = toHex(codePoint)
-        const unicodeHexRepresentation = `U+${padWithZeroes(hexString)}`
-        return {
-            codePoint: codePoint,
-            label: label ?? unicodeHexRepresentation,
-            hexString,
-            fullLabel: label ? `${label} (${unicodeHexRepresentation})` : unicodeHexRepresentation
-        }
-    }
-    if(Array.isArray(cp.codePoint)) {
-        const codePoints: InvisibleCharacter[] = []
-        const [from, to] = cp.codePoint
-        if(from < 0 || to < 0 || from > to) {
-            throw new Error(`Invalid code point range specified: [${from}, ${to}]`)
+const invisibleZeroWidthCharacterCodePoints: InvisibleCharacter[] = internalInvisibleZeroWidthCharacterCodePoints
+    .map((cp) => {
+        const create = (codePoint: number, label?: string) => {
+            const hexString = toHex(codePoint);
+            const unicodeHexRepresentation = `U+${padWithZeroes(hexString)}`;
+            return {
+                codePoint: codePoint,
+                label: label ?? unicodeHexRepresentation,
+                hexString,
+                fullLabel: label ? `${label} (${unicodeHexRepresentation})` : unicodeHexRepresentation,
+            };
+        };
+        if (Array.isArray(cp.codePoint)) {
+            const codePoints: InvisibleCharacter[] = [];
+            const [from, to] = cp.codePoint;
+            if (from < 0 || to < 0 || from > to) {
+                throw new Error(`Invalid code point range specified: [${from}, ${to}]`);
+            }
+            for (let currentCp = from; currentCp <= to; currentCp++) {
+                codePoints.push(create(currentCp, cp.label));
+            }
+            return codePoints;
+        } else {
+            return create(cp.codePoint, cp.label);
         }
-        for(let currentCp = from; currentCp <= to; currentCp++) {
-            codePoints.push(create(currentCp, cp.label))
-        }
-        return codePoints
-    } else {
-        return create(cp.codePoint, cp.label)
-    }
-}).flat()
+    })
+    .flat();
 
 const createInvisibleZeroWidthCharacterCodePointsRegex = () => {
     return new RegExp(
-        `([${
-            invisibleZeroWidthCharacterCodePoints
-                .map(cp => `\\u{${cp.hexString}}`)
-                .join("")
-        }])`,
+        `([${invisibleZeroWidthCharacterCodePoints.map((cp) => `\\u{${cp.hexString}}`).join("")}])`,
         "ug"
-    )
-}
+    );
+};
 
 /** Map from codepoint to invisible character. */
 const invisibleZeroWidthCharacterCodePointsMap: Map<number, InvisibleCharacter> = new Map(
-    invisibleZeroWidthCharacterCodePoints.map(cp => [cp.codePoint, cp])
-)
+    invisibleZeroWidthCharacterCodePoints.map((cp) => [cp.codePoint, cp])
+);
 
 const clearStringFromInvisibleCharacters = (inputString: string): string => {
-    const regex = createInvisibleZeroWidthCharacterCodePointsRegex()
-    return inputString.replaceAll(regex, "")
-}
+    const regex = createInvisibleZeroWidthCharacterCodePointsRegex();
+    return inputString.replaceAll(regex, "");
+};
 
 interface InternalInvisibleCharacter {
     /** Code point or code point range (inclusive on both sides). */
-    codePoint: number | [number, number],
+    codePoint: number | [number, number];
     /** Human readable label for code point. */
-    label?: string
+    label?: string;
 }
 
 type InvisibleCharacter = {
     /** Code point. */
-    codePoint: number,
+    codePoint: number;
     /** Human readable label for code point. */
-    label: string
+    label: string;
     /** The hex representation of the code point, e.g. "200B" */
-    hexString: string
+    hexString: string;
     /** The label plus the hex value. */
-    fullLabel: string
-}
+    fullLabel: string;
+};
 
 export const invisibleZeroWidthCharacters = {
     codePoints: invisibleZeroWidthCharacterCodePoints,
     codePointMap: invisibleZeroWidthCharacterCodePointsMap,
     createRegex: createInvisibleZeroWidthCharacterCodePointsRegex,
-    clearString: clearStringFromInvisibleCharacters
-}
+    clearString: clearStringFromInvisibleCharacters,
+};
 
 const moduleObject = {
-    invisibleZeroWidthCharacters
-}
-export default moduleObject
+    invisibleZeroWidthCharacters,
+};
+export default moduleObject;

package/src/common/utils/colorDecideContrastvalue.ts

@@ -14,15 +14,17 @@ export interface decideContrastColorValueProps {
 const decideContrastColorValue = ({
     testColor,
     lightColor = "#fff",
-    darkColor = "#000"
+    darkColor = "#000",
 }: decideContrastColorValueProps): string => {
     let contrastColor = "";
     try {
-        contrastColor = Color(testColor).isLight() ? Color(darkColor).rgb().toString() : Color(lightColor).rgb().toString();
-    } catch(ex) {
-        console.warn("Received invalid colors", {testColor, lightColor, darkColor});
+        contrastColor = Color(testColor).isLight()
+            ? Color(darkColor).rgb().toString()
+            : Color(lightColor).rgb().toString();
+    } catch (ex) {
+        console.warn("Received invalid colors", { testColor, lightColor, darkColor });
     }
     return contrastColor;
-}
+};
 
 export default decideContrastColorValue;

package/src/common/utils/getColorConfiguration.ts

@@ -1,10 +1,11 @@
-import CssCustomProperties from "./CssCustomProperties";
 import { CLASSPREFIX as eccgui } from "../../configuration/constants";
 
+import CssCustomProperties from "./CssCustomProperties";
+
 // Configurations can be found in `src/cmem/react-flow/configuration/_colors-*.scss`
 type colorconfigs = "react-flow-graph" | "react-flow-linking" | "react-flow-workflow" | "stickynotes";
 
-const colorConfigurationMemo = new Map<colorconfigs, any>()
+const colorConfigurationMemo = new Map<colorconfigs, any>();
 
 /**
  * Read and returns color values provided by CSS custom properties.
@@ -12,14 +13,17 @@ const colorConfigurationMemo = new Map<colorconfigs, any>()
  * Currently color configurations for the react flow editors are supported.
  **/
 const getColorConfiguration = (configId: colorconfigs) => {
-    if(!colorConfigurationMemo.has(configId)) {
-        colorConfigurationMemo.set(configId, new CssCustomProperties({
-            selectorText: `.${eccgui}-configuration--colors__${configId}`,
-            removeDashPrefix: true,
-            returnObject: true,
-        }).customProperties())
+    if (!colorConfigurationMemo.has(configId)) {
+        colorConfigurationMemo.set(
+            configId,
+            new CssCustomProperties({
+                selectorText: `.${eccgui}-configuration--colors__${configId}`,
+                removeDashPrefix: true,
+                returnObject: true,
+            }).customProperties()
+        );
     }
-    return colorConfigurationMemo.get(configId)!!;
+    return colorConfigurationMemo.get(configId)!;
 };
 
 export default getColorConfiguration;

package/src/common/utils/openInNewTab.ts

@@ -5,13 +5,13 @@ export const openInNewTab = (
     handler?: (e: React.MouseEvent<HTMLAnchorElement>) => void,
     url?: string
 ) => {
-  //if ctrl key or cmd key bypass click handler and delegation open in the background new tab
-  if (url && (event.ctrlKey || event.metaKey)) {
-    event.preventDefault();
-    event.nativeEvent.stopImmediatePropagation();
-    event.stopPropagation();
-    window.open(url, "_blank");
-  } else if(handler) {
-    handler(event);
-  }
+    //if ctrl key or cmd key bypass click handler and delegation open in the background new tab
+    if (url && (event.ctrlKey || event.metaKey)) {
+        event.preventDefault();
+        event.nativeEvent.stopImmediatePropagation();
+        event.stopPropagation();
+        window.open(url, "_blank");
+    } else if (handler) {
+        handler(event);
+    }
 };

package/src/components/Accordion/Accordion.tsx

@@ -1,8 +1,6 @@
 import React from "react";
-import {
-    Accordion as CarbonAccordion,
-    AccordionProps as CarbonAccordionProps,
-} from "carbon-components-react";
+import { Accordion as CarbonAccordion, AccordionProps as CarbonAccordionProps } from "carbon-components-react";
+
 import { CLASSPREFIX as eccgui } from "../../configuration/constants";
 
 export interface AccordionProps extends Omit<CarbonAccordionProps, "className" | "size"> {
@@ -17,10 +15,10 @@ export interface AccordionProps extends Omit<CarbonAccordionProps, "className" |
 }
 
 const carbonAccordionSizeMapping = {
-    "small": "sm" as "sm",
-    "medium": "md" as "md",
-    "large": "lg" as "lg"
-}
+    small: "sm" as const,
+    medium: "md" as const,
+    large: "lg" as const,
+};
 
 export const Accordion = ({
     children,
@@ -34,10 +32,11 @@ export const Accordion = ({
             className={`${eccgui}-accordion__container ` + className}
             align={align}
             size={carbonAccordionSizeMapping[size]}
-            {...otherProps}>
+            {...otherProps}
+        >
             {children}
         </CarbonAccordion>
     );
-}
+};
 
 export default Accordion;

package/src/components/Accordion/AccordionItem.tsx

@@ -3,9 +3,11 @@ import {
     AccordionItem as CarbonAccordionItem,
     AccordionItemProps as CarbonAccordionItemProps,
 } from "carbon-components-react";
+
 import { CLASSPREFIX as eccgui } from "../../configuration/constants";
 
-export interface AccordionItemProps extends Omit<CarbonAccordionItemProps, "title" | "iconDescription" | "renderExpando"> {
+export interface AccordionItemProps
+    extends Omit<CarbonAccordionItemProps, "title" | "iconDescription" | "renderExpando"> {
     /**
      * additional user class name
      */
@@ -30,7 +32,7 @@ export interface AccordionItemProps extends Omit<CarbonAccordionItemProps, "titl
      * highlight accordion item by different background color
      */
     elevated?: boolean;
-};
+}
 
 export const AccordionItem = ({
     children,
@@ -46,7 +48,7 @@ export const AccordionItem = ({
         <CarbonAccordionItem
             className={
                 `${eccgui}-accordion__item` +
-                (!!className ? " " + className : "") +
+                (className ? " " + className : "") +
                 (fullWidth ? ` ${eccgui}-accordion__item--fullwidth` : "") +
                 (elevated ? ` ${eccgui}-accordion__item--elevated` : "") +
                 (condensed ? ` ${eccgui}-accordion__item--condensed` : "") +
@@ -58,6 +60,6 @@ export const AccordionItem = ({
             {children}
         </CarbonAccordionItem>
     );
-}
+};
 
 export default AccordionItem;

package/src/components/Accordion/Stories/Accordion.stories.tsx

@@ -1,7 +1,8 @@
 import React from "react";
-import { ComponentStory, ComponentMeta } from "@storybook/react";
+import { ComponentMeta, ComponentStory } from "@storybook/react";
+
 import { Accordion, AccordionItem } from "../../../../index";
-import { Default as AccordionStoryItem } from '../Stories/AccordionItem.stories'
+import { Default as AccordionStoryItem } from "../Stories/AccordionItem.stories";
 
 export default {
     title: "Components/Accordion",
@@ -10,18 +11,15 @@ export default {
     argTypes: {
         children: {
             control: "none",
-            description: "Elements to include into the Accordion component"
+            description: "Elements to include into the Accordion component",
         },
-    }
-
+    },
 } as ComponentMeta<typeof Accordion>;
 
-const TemplateIcons: ComponentStory<typeof Accordion> = (args) => (
-    <Accordion {...args} />
-);
+const TemplateIcons: ComponentStory<typeof Accordion> = (args) => <Accordion {...args} />;
 export const Default = TemplateIcons.bind({});
 Default.args = {
-    children : [
+    children: [
         <AccordionItem {...AccordionStoryItem.args} label="Accordion item 1" />,
         <AccordionItem {...AccordionStoryItem.args} label="Accordion item 2 (elevated)" elevated />,
         <AccordionItem {...AccordionStoryItem.args} label="Accordion item 3 (initially opened)" open />,
@@ -29,5 +27,5 @@ Default.args = {
         <AccordionItem {...AccordionStoryItem.args} label="Accordion item 5" />,
     ],
     align: "start",
-    size: "medium"
+    size: "medium",
 };

package/src/components/Accordion/Stories/AccordionItem.stories.tsx

@@ -1,7 +1,8 @@
 import React from "react";
-import { ComponentStory, ComponentMeta } from "@storybook/react";
+import { LoremIpsum } from "react-lorem-ipsum";
+import { ComponentMeta, ComponentStory } from "@storybook/react";
+
 import { Accordion, AccordionItem, HtmlContentBlock } from "../../../../index";
-import { LoremIpsum } from 'react-lorem-ipsum';
 
 export default {
     title: "Components/Accordion/AccordionItem",
@@ -9,13 +10,12 @@ export default {
     argTypes: {
         children: {
             control: "none",
-            description: "content of accordion item"
+            description: "content of accordion item",
         },
-    }
-
+    },
 } as ComponentMeta<typeof AccordionItem>;
 
-const Template : ComponentStory<typeof AccordionItem> = (args) => (
+const Template: ComponentStory<typeof AccordionItem> = (args) => (
     <Accordion>
         <AccordionItem {...args} />
     </Accordion>
@@ -23,5 +23,9 @@ const Template : ComponentStory<typeof AccordionItem> = (args) => (
 export const Default = Template.bind({});
 Default.args = {
     label: "Title of accordion item",
-    children : <HtmlContentBlock><LoremIpsum p={2} avgSentencesPerParagraph={4} random={false} /></HtmlContentBlock>
+    children: (
+        <HtmlContentBlock>
+            <LoremIpsum p={2} avgSentencesPerParagraph={4} random={false} />
+        </HtmlContentBlock>
+    ),
 };

package/src/components/Accordion/accordion.scss

@@ -5,13 +5,17 @@
 // own vars
 $eccgui-color-accordion-background-elevated: rgba($eccgui-color-accent, 0.1) !default;
 $eccgui-color-accordion-toggler-hover: $menu-item-color-hover !default;
-$eccgui-color-accordion-toggler-elevated-hover: mix($eccgui-color-accordion-background-elevated, $eccgui-color-accordion-toggler-hover, 50%) !default;
+$eccgui-color-accordion-toggler-elevated-hover: mix(
+    $eccgui-color-accordion-background-elevated,
+    $eccgui-color-accordion-toggler-hover,
+    50%
+) !default;
 
 // changes
 
 .#{$prefix}--accordion__heading {
-    min-height: mini-units(5);
     align-items: center;
+    min-height: mini-units(5);
     color: inherit;
 
     .#{$prefix}--accordion__arrow {
@@ -25,10 +29,10 @@ $eccgui-color-accordion-toggler-elevated-hover: mix($eccgui-color-accordion-back
 
 .#{$prefix}--accordion__title {
     min-width: 0; // flex layout fix
+    margin: 0 0 0 $eccgui-size-block-whitespace;
     font-size: inherit;
     line-height: inherit;
     color: inherit;
-    margin: 0 0 0 $eccgui-size-block-whitespace;
 
     .#{$prefix}--accordion--start & {
         margin: 0 0 0 $eccgui-size-block-whitespace * 0.5;
@@ -36,18 +40,19 @@ $eccgui-color-accordion-toggler-elevated-hover: mix($eccgui-color-accordion-back
 }
 
 .#{$prefix}--accordion__content {
+    position: fixed;
+    left: -5000em;
+    display: block;
     padding: $eccgui-size-block-whitespace * 0.5;
     margin: 0 calc(1rem + #{$eccgui-size-block-whitespace * 0.5}) 0 $eccgui-size-block-whitespace * 0.5;
-    display: block;
     opacity: 0;
-    position: fixed;
-    left: -5000em;
 
     .#{$prefix}--accordion__item--active & {
-        padding: $eccgui-size-block-whitespace * 0.5 $eccgui-size-block-whitespace * 0.5 $eccgui-size-block-whitespace $eccgui-size-block-whitespace * 0.5;
-        opacity: 1;
         position: static;
         left: auto;
+        padding: $eccgui-size-block-whitespace * 0.5 $eccgui-size-block-whitespace * 0.5 $eccgui-size-block-whitespace
+            $eccgui-size-block-whitespace * 0.5;
+        opacity: 1;
     }
 
     .#{$prefix}--accordion--start & {
@@ -58,7 +63,9 @@ $eccgui-color-accordion-toggler-elevated-hover: mix($eccgui-color-accordion-back
         margin: 0;
     }
 
-    *, *::before, *::after {
+    *,
+    *::before,
+    *::after {
         box-sizing: inherit;
     }
 }
@@ -92,8 +99,8 @@ $eccgui-color-accordion-toggler-elevated-hover: mix($eccgui-color-accordion-back
 .#{$eccgui}-accordion__item--condensed {
     .#{$prefix}--accordion__heading {
         min-height: 0;
-        line-height: 1em;
         padding: 0;
+        line-height: 1em;
 
         .#{$prefix}--accordion__arrow {
             margin: 0;

package/src/components/Application/ApplicationContainer.tsx

@@ -1,19 +1,18 @@
 import React from "react";
-import { CLASSPREFIX as eccgui } from "../../configuration/constants";
+import { OverlaysProvider } from "@blueprintjs/core";
 
-export interface ApplicationContainerProps extends React.HTMLAttributes<HTMLDivElement> {}
+import { CLASSPREFIX as eccgui } from "../../configuration/constants";
 
-export const ApplicationContainer = ({
-    children,
-    className = "",
-    ...otherDivProps
-}: ApplicationContainerProps) => {
+export type ApplicationContainerProps = React.HTMLAttributes<HTMLDivElement>;
 
+export const ApplicationContainer = ({ children, className = "", ...otherDivProps }: ApplicationContainerProps) => {
     return (
-        <div className={`${eccgui}-application__container ${className}`} {...otherDivProps}>
-            { children }
-        </div>
-    )
-}
+        <OverlaysProvider>
+            <div className={`${eccgui}-application__container ${className}`} {...otherDivProps}>
+                {children}
+            </div>
+        </OverlaysProvider>
+    );
+};
 
 export default ApplicationContainer;