@eccenca/gui-elements 23.1.0-rc.4 → 23.2.0-rc.0

package/src/cmem/react-flow/ReactFlow/ReactFlow.tsx

@@ -21,7 +21,6 @@ export interface ReactFlowProps extends ReactFlowOriginalProps {
     scrollOnDrag?: {
         /** Time in milliseconds to wait before the canvas scrolls the next step. */
         scrollInterval: number
-
         /**
          * The size of each scroll step.
          * This should be a number between 0.0 - 1.0.

package/src/cmem/react-flow/index.ts

@@ -0,0 +1,3 @@
+export * from "./ReactFlow/ReactFlow";
+export * from "./StickyNoteModal/StickyNoteModal";
+export * from "./extensions/scrollOnDragHook";

package/src/common/index.ts

@@ -0,0 +1,13 @@
+import { openInNewTab } from "./utils/openInNewTab";
+import decideContrastColorValue from "./utils/colorDecideContrastvalue";
+import getColorConfiguration from "./utils/getColorConfiguration";
+import { invisibleZeroWidthCharacters } from "./utils/characters";
+
+export const utils = {
+    openInNewTab,
+    decideContrastColorValue,
+    getColorConfiguration,
+    invisibleZeroWidthCharacters,
+}
+// @deprecated use `utils`
+export const Utilities = utils;

package/src/common/utils/characters.ts

@@ -98,7 +98,7 @@ type InvisibleCharacter = {
     fullLabel: string
 }
 
-const invisibleZeroWidthCharacters = {
+export const invisibleZeroWidthCharacters = {
     codePoints: invisibleZeroWidthCharacterCodePoints,
     codePointMap: invisibleZeroWidthCharacterCodePointsMap,
     createRegex: createInvisibleZeroWidthCharacterCodePointsRegex,

package/src/common/utils/openInNewTab.ts

@@ -1,8 +1,8 @@
 /** Wrapper for an onClick handler on link-like components, i.e. that navigate to a different URL on click.
  * Opens a link (url) in a new tab when CMD or CTRL key is pressed at click time. */
 export const openInNewTab = (
-    event: React.MouseEvent<HTMLElement>,
-    handler?: (e: React.MouseEvent<HTMLElement>) => void,
+    event: React.MouseEvent<HTMLAnchorElement>,
+    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

package/src/components/Accordion/Accordion.tsx

@@ -22,13 +22,13 @@ const carbonAccordionSizeMapping = {
     "large": "lg" as "lg"
 }
 
-function Accordion({
+export const Accordion = ({
     children,
     className = "",
     align = "start",
     size = "medium",
     ...otherProps
-}: AccordionProps) {
+}: AccordionProps) => {
     return (
         <CarbonAccordion
             className={`${eccgui}-accordion__container ` + className}

package/src/components/Accordion/AccordionItem.tsx

@@ -32,7 +32,7 @@ export interface AccordionItemProps extends Omit<CarbonAccordionItemProps, "titl
     elevated?: boolean;
 };
 
-function AccordionItem({
+export const AccordionItem = ({
     children,
     label,
     className = "",
@@ -41,7 +41,7 @@ function AccordionItem({
     condensed = false,
     noBorder = false,
     ...otherProps
-}: AccordionItemProps) {
+}: AccordionItemProps) => {
     return (
         <CarbonAccordionItem
             className={

package/src/components/Accordion/index.ts

@@ -0,0 +1,2 @@
+export * from "./Accordion";
+export * from "./AccordionItem";

package/src/components/Application/ApplicationContainer.tsx

@@ -1,18 +1,16 @@
 import React from "react";
 import { CLASSPREFIX as eccgui } from "../../configuration/constants";
 
-interface ApplicationContainerProps extends React.HTMLAttributes<HTMLDivElement> {
-    className?: string;
-}
+export interface ApplicationContainerProps extends React.HTMLAttributes<HTMLDivElement> {}
 
-function ApplicationContainer({
+export const ApplicationContainer = ({
     children,
     className = "",
-    ...otherProps
-}: ApplicationContainerProps) {
+    ...otherDivProps
+}: ApplicationContainerProps) => {
 
     return (
-        <div className={`${eccgui}-application__container ${className}`} {...otherProps}>
+        <div className={`${eccgui}-application__container ${className}`} {...otherDivProps}>
             { children }
         </div>
     )

package/src/components/Application/ApplicationContent.tsx

@@ -2,15 +2,15 @@ import React from "react";
 import { Content as CarbonContent } from "carbon-components-react";
 import { CLASSPREFIX as eccgui } from "../../configuration/constants";
 
-interface IApplicationContentProps {
-    // original properties from Carbon
+export interface ApplicationContentProps {
+    /**
+        Literally the application content displayed in the main area
+    */
     children: React.ReactNode;
     /**
         addional class name
     */
     className?: string;
-
-    // our extensions
     /**
         is the sidebar navigation currently displayed or not
     */
@@ -20,18 +20,19 @@ interface IApplicationContentProps {
     */
     isApplicationSidebarRail?: boolean;
     /**
-        native attributes for the <main> HTML element
+        native attributes for the <main> HTML element, except `className`
     */
-    htmlMainProps?: React.HTMLAttributes<HTMLElement>;
+    htmlMainProps?: Omit<React.HTMLAttributes<HTMLElement>, "className">;
 }
 
-function ApplicationContent({
+export const ApplicationContent = ({
     children,
+    className = "",
     isApplicationSidebarExpanded = false,
     isApplicationSidebarRail = false,
     htmlMainProps,
-    ...otherPropsShouldOnlyBeUsedForDataAttributes
-}: IApplicationContentProps) {
+    ...otherUnknownProps
+}: ApplicationContentProps) => {
 
     let addSidebarMargin = "";
     if (isApplicationSidebarExpanded) { addSidebarMargin = `${eccgui}-application__content--withsidebar`; }
@@ -39,10 +40,10 @@ function ApplicationContent({
 
     return (
         <CarbonContent
-            {...otherPropsShouldOnlyBeUsedForDataAttributes}
-            {...htmlMainProps}
-            className={`${eccgui}-application__content ${addSidebarMargin}`}
+            className={`${eccgui}-application__content ${addSidebarMargin} ${className}`}
             tagName={"main"}
+            {...otherUnknownProps}
+            {...htmlMainProps}
         >
             { children }
         </CarbonContent>

package/src/components/Application/ApplicationHeader.tsx

@@ -1,11 +1,22 @@
 import React from "react";
-// import PropTypes from 'prop-types';
-import { Header as CarbonHeader } from "carbon-components-react";
+import {
+    Header as CarbonHeader,
+    HeaderProps as CarbonHeaderProps,
+} from "carbon-components-react";
 import { CLASSPREFIX as eccgui } from "../../configuration/constants";
 
-function ApplicationHeader({ children, ...restProps }: any) {
+export interface ApplicationHeaderProps extends CarbonHeaderProps {};
+
+export const ApplicationHeader = ({
+    children = "",
+    className,
+    ...otherCarbonHeaderProps
+}: ApplicationHeaderProps) => {
     return (
-        <CarbonHeader {...restProps} className={`${eccgui}-application__header`}>
+        <CarbonHeader
+            className={`${eccgui}-application__header ` + className}
+            {...otherCarbonHeaderProps}
+        >
             { children }
         </CarbonHeader>
     )

package/src/components/Application/ApplicationSidebarNavigation.tsx

@@ -1,30 +1,24 @@
 import React from "react";
-import { SideNav as CarbonSideNav } from "carbon-components-react";
+import {
+    SideNav as CarbonSideNav,
+    SideNavProps as CarbonSideNavProps,
+} from "carbon-components-react";
 import { CLASSPREFIX as eccgui } from "../../configuration/constants";
 
-interface IApplicationSidebarNavigationProps extends React.HTMLAttributes<HTMLElement> {
-    className?: string;
-    expanded?: boolean;
-    isRail?: boolean;
-    // do not allow these properties
-    defaultExpanded?: never;
-    isPersistent?: never;
-    isFixedNav?: never;
-    isChildOfHeader?: never;
-}
+export interface ApplicationSidebarNavigationProps extends
+    Omit<CarbonSideNavProps, "defaultExpanded" | "isPersistent" | "isFixedNav" | "isChildOfHeader">,
+    React.HTMLAttributes<HTMLElement> {};
 
-function ApplicationSidebarNavigation({
+export const ApplicationSidebarNavigation = ({
     children,
-    className,
-    ...otherProps
-}: IApplicationSidebarNavigationProps) {
-
-    const additionalClassName = className ? className : "";
+    className = "",
+    ...otherCarbonSideNavProps
+}: ApplicationSidebarNavigationProps) => {
 
     return (
         <CarbonSideNav
-            className={`${eccgui}-application__menu__sidebar ${additionalClassName}`}
-            {...otherProps}
+            className={`${eccgui}-application__menu__sidebar ${className}`}
+            {...otherCarbonSideNavProps}
             aria-label={"sidebar"}
             defaultExpanded={false}
             isPersistent={false}

package/src/components/Application/ApplicationSidebarToggler.tsx

@@ -1,12 +1,20 @@
 import React from "react";
-import { HeaderMenuButton as CarbonHeaderMenuButton } from "carbon-components-react";
+import {
+    HeaderMenuButton as CarbonHeaderMenuButton,
+    HeaderMenuButtonProps as CarbonHeaderMenuButtonProps,
+} from "carbon-components-react";
 import { CLASSPREFIX as eccgui } from "../../configuration/constants";
 
-function ApplicationSidebarToggler({ ...restProps }: any) {
+export interface ApplicationSidebarTogglerProps extends CarbonHeaderMenuButtonProps {};
+
+export const ApplicationSidebarToggler = ({
+    className = "",
+    ...otherCarbonHeaderMenuButtonProps
+}: ApplicationSidebarTogglerProps) => {
     return (
         <CarbonHeaderMenuButton
-            className={`${eccgui}-application__menu__toggler`}
-            {...restProps}
+            className={`${eccgui}-application__menu__toggler ` + className}
+            {...otherCarbonHeaderMenuButtonProps}
             isCollapsible={true}
         />
     )

package/src/components/Application/ApplicationTitle.tsx

@@ -1,13 +1,15 @@
 import React from "react";
-import { HeaderName as CarbonHeaderName } 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;
 type ImgDepiction = HTMLElement & HTMLImageElement;
 
-interface IApplicationTitleProps {
-    // original properties from Carbon
-    children: React.ReactNode;
+export interface ApplicationTitleProps extends CarbonHeaderNameProps {
+    // from CarbonHeaderNameProps
     /**
         addional class name
     */
@@ -44,7 +46,7 @@ interface IApplicationTitleProps {
     htmlAProps?: React.AnchorHTMLAttributes<HTMLAnchorElement>;
 }
 
-function ApplicationTitle({
+export const ApplicationTitle = ({
     children,
     className = "",
     prefix = "",
@@ -54,8 +56,8 @@ function ApplicationTitle({
     isAlignedWithSidebar=false,
     isApplicationSidebarExpanded,
     htmlAProps,
-    ...otherPropsShouldOnlyBeUsedForDataAttributes
-}: IApplicationTitleProps) {
+    ...otherCarbonHeaderNameProps
+}: ApplicationTitleProps) => {
 
     const classApplication = `${eccgui}-application__title`;
     const classNotDisplayed = isNotDisplayed || (!isApplicationSidebarExpanded && typeof isNotDisplayed === "undefined") ? "cds--visually-hidden" : "";
@@ -63,7 +65,7 @@ function ApplicationTitle({
 
     return (
         <CarbonHeaderName
-            {...otherPropsShouldOnlyBeUsedForDataAttributes}
+            {...otherCarbonHeaderNameProps}
             {...htmlAProps}
             className={`${classApplication} ${classAlignedSidebar} ${classNotDisplayed} ${className}`}
             href={href}

package/src/components/Application/ApplicationToolbar.tsx

@@ -1,12 +1,20 @@
 import React from "react";
-// import PropTypes from 'prop-types';
-import { HeaderGlobalBar as CarbonHeaderGlobalBar } from "carbon-components-react";
+import {
+    HeaderGlobalBar as CarbonHeaderGlobalBar,
+    HeaderGlobalBarProps as CarbonHeaderGlobalBarProps,
+} from "carbon-components-react";
 import { CLASSPREFIX as eccgui } from "../../configuration/constants";
 
-function ApplicationToolbar({ children, className = '', ...restProps }: any) {
+export interface ApplicationToolbarProps extends CarbonHeaderGlobalBarProps {};
+
+export const ApplicationToolbar = ({
+    children,
+    className = "",
+    ...otherCarbonHeaderGlobalBarProps
+}: ApplicationToolbarProps) => {
     return (
         <CarbonHeaderGlobalBar
-            {...restProps}
+            {...otherCarbonHeaderGlobalBarProps}
             className={`${eccgui}-application__toolbar ` + className}
         >
             { children }

package/src/components/Application/ApplicationToolbarAction.tsx

@@ -1,12 +1,20 @@
 import React from "react";
-// import PropTypes from 'prop-types';
-import { HeaderGlobalAction as CarbonHeaderGlobalAction } from "carbon-components-react";
+import {
+    HeaderGlobalAction as CarbonHeaderGlobalAction,
+    HeaderGlobalActionProps as CarbonHeaderGlobalActionProps,
+} from "carbon-components-react";
 import { CLASSPREFIX as eccgui } from "../../configuration/constants";
 
-function ApplicationToolbarAction({ children, className = '', ...restProps }: any) {
+export interface ApplicationToolbarActionProps extends CarbonHeaderGlobalActionProps {};
+
+export const ApplicationToolbarAction = ({
+    children,
+    className = "",
+    ...otherCarbonHeaderGlobalActionProps
+}: ApplicationToolbarActionProps) => {
     return (
         <CarbonHeaderGlobalAction
-            {...restProps}
+            {...otherCarbonHeaderGlobalActionProps}
             className={`${eccgui}-application__toolbar__action ` + className}
         >
             { children }

package/src/components/Application/ApplicationToolbarPanel.tsx

@@ -1,17 +1,52 @@
 import React from "react";
-// import PropTypes from 'prop-types';
-import { HeaderPanel as CarbonHeaderPanel } from "carbon-components-react";
+import {
+    HeaderPanel as CarbonHeaderPanel,
+    HeaderPanelProps as CarbonHeaderPanelProps,
+} from "carbon-components-react";
 import { CLASSPREFIX as eccgui } from "../../configuration/constants";
 
-function ApplicationToolbarPanel({ children, className = '', ...restProps }: any) {
-    return (
+export interface ApplicationToolbarPanelProps extends CarbonHeaderPanelProps {
+    /**
+     * Event handler getting called when the pointer device leaves the area of the panel menu.
+     * Could be used to close it automatically.
+     */
+    onLeave?: () => void;
+    /**
+     * Event handler getting called when the the user clicks outside of the panel menu area.
+     */
+    onOutsideClick?: () => void;
+};
+
+export const ApplicationToolbarPanel = ({
+    children,
+    className = "",
+    onLeave,
+    onOutsideClick,
+    ...otherCarbonHeaderPanelProps
+}: ApplicationToolbarPanelProps) => {
+
+    const panel = (
         <CarbonHeaderPanel
-            {...restProps}
+            {...otherCarbonHeaderPanelProps}
             className={`${eccgui}-application__toolbar__panel ` + className}
         >
             { children }
         </CarbonHeaderPanel>
-    )
+    );
+
+    return (onLeave || onOutsideClick) ? (
+        <>
+            <div
+                className={
+                    (onLeave ? `${eccgui}-application__toolbar__panel-backdrop--onleave` : "") +
+                    (onOutsideClick ? `${eccgui}-application__toolbar__panel-backdrop--onoutsideclick` : "")
+                }
+                onClick={onOutsideClick}
+                onPointerEnter={onLeave}
+            />
+            {panel}
+        </>
+    ) : panel;
 }
 
 export default ApplicationToolbarPanel;

package/src/components/Application/ApplicationToolbarSection.tsx

@@ -1,10 +1,16 @@
 import React from "react";
 import { CLASSPREFIX as eccgui } from "../../configuration/constants";
 
-function ApplicationToolbarSection({ children, className = '', ...restProps }: any) {
+export interface ApplicationToolbarSectionProps extends React.HTMLAttributes<HTMLDivElement> {};
+
+export const ApplicationToolbarSection = ({
+    children,
+    className = "",
+    ...otherDivProps
+}: ApplicationToolbarSectionProps) => {
     return (
         <div
-            {...restProps}
+            {...otherDivProps}
             className={`${eccgui}-application__toolbar__section ` + className}
         >
             { children }

package/src/components/Application/_toolbar.scss

@@ -42,6 +42,19 @@ $shell-panel-focus: adjust-color($eccgui-color-applicationheader-text, $lightnes
     //width: carbon--mini-units(32);
 }
 
+.#{$eccgui}-application__toolbar__panel-backdrop--onleave,
+.#{$eccgui}-application__toolbar__panel-backdrop--onoutsideclick {
+    position: fixed;
+    top: mini-units(8);
+    right: 0;
+    bottom: 0;
+    left: 0;
+}
+
+.#{$eccgui}-application__toolbar__panel-backdrop--onoutsideclick {
+    top: 0;
+}
+
 // tweak original colors
 
 // $shell-panel-bg-01

package/src/components/Application/application.scss

@@ -7,3 +7,7 @@
 @import 'sidebar';
 // @import '~@carbon/styles/scss/components/ui-shell/navigation-menu';
 @import 'content';
+
+.#{$ns}-portal {
+    z-index: 8001; // higher than carbon ui shell header
+}

package/src/components/Application/index.ts

@@ -0,0 +1,10 @@
+export * from "./ApplicationContainer";
+export * from "./ApplicationHeader";
+export * from "./ApplicationContent";
+export * from "./ApplicationSidebarNavigation";
+export * from "./ApplicationSidebarToggler";
+export * from "./ApplicationTitle";
+export * from "./ApplicationToolbar";
+export * from "./ApplicationToolbarSection";
+export * from "./ApplicationToolbarAction";
+export * from "./ApplicationToolbarPanel";

package/src/components/AutoSuggestion/AutoSuggestion.scss

@@ -4,11 +4,10 @@
 
     &__dropdown {
         transition: all 300ms;
-        // TODO: Replace by variable
-        background-color: #fff;
+        background-color: $pt-popover2-background-color;
         position: absolute;
         top: 0;
-        z-index:2;
+        z-index: 2;
         display: flex;
         flex-flow: column wrap;
         margin-top: 0;
@@ -36,60 +35,62 @@
         padding: 0;
         top: 2px;
         overflow: hidden;
-    }
-
-    .CodeMirror-scroll {
-        margin: 0;
-        padding: 0;
-        overflow-y: hidden !important;
-        overflow-x: auto !important;
-    }
 
-    .CodeMirror-vscrollbar {
-        display: none !important;
-    }
+        .CodeMirror-scroll {
+            margin: 0;
+            padding: 0;
+            overflow-y: hidden !important;
+            overflow-x: auto !important;
+        }
 
-    .CodeMirror-sizer {
-        border: none;
-    }
+        .CodeMirror-vscrollbar {
+            display: none !important;
+        }
 
-    .CodeMirror-lines {
-        padding: 0;
-        line-height: calc(#{$eccgui-size-textfield-height-regular} - 4px - 6px);
-    }
+        .CodeMirror-sizer {
+            border: none;
+        }
 
-    pre.CodeMirror-line,
-    pre.CodeMirror-placeholder,
-    pre.CodeMirror-line-like {
-        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;
-    }
+        .CodeMirror-lines {
+            padding: 0;
+            line-height: calc(#{$eccgui-size-textfield-height-regular} - 4px - 6px);
+        }
 
-    pre.CodeMirror-placeholder {
-        color: $input-placeholder-color;
-    }
+        pre.CodeMirror-line,
+        pre.CodeMirror-placeholder,
+        pre.CodeMirror-line-like {
+            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;
+        }
 
-    .CodeMirror-cursor {
-        border: none;
-        margin: 0;
-        width: 1px;
-        background-color: transparent;
+        pre.CodeMirror-placeholder {
+            color: $input-placeholder-color;
+            padding: 0;
+            top: 3px;
+        }
 
-        &::after {
-            content: " ";
-            height: 1rem;
+        .CodeMirror-cursor {
+            border: none;
+            margin: 0;
             width: 1px;
-            overflow: hidden;
-            background-color: black;
-            position: absolute;
-            top: 50%;
-            right: 0;
-            margin-top: -0.5rem;
+            background-color: transparent;
+
+            &::after {
+                content: " ";
+                height: 1rem;
+                width: 1px;
+                overflow: hidden;
+                background-color: black;
+                position: absolute;
+                top: 50%;
+                right: 0;
+                margin-top: -0.5rem;
+            }
         }
     }
 }