@eccenca/gui-elements 23.1.0 → 23.2.0-rc.1

package/src/cmem/ActivityControl/SilkActivityControl.tsx

@@ -1,7 +1,7 @@
 import {TestableComponent} from "../../components/interfaces";
-import {ActivityControlWidget, IActivityAction} from "./ActivityControlWidget";
+import {ActivityControlWidget, ActivityControlWidgetProps } from "./ActivityControlWidget";
 import React, {useEffect, useRef, useState} from "react";
-import {ConcreteActivityStatus, IActivityStatus} from "./ActivityControlTypes";
+import {SilkActivityStatusConcrete, SilkActivityStatusProps} from "./ActivityControlTypes";
 import {Intent} from "@blueprintjs/core/src/common/intent";
 import {ActivityExecutionErrorReportModal} from "./ActivityExecutionErrorReportModal";
 import {Icon, Spacing} from "../../";
@@ -11,7 +11,7 @@ import {IntentTypes} from "../../common/Intent";
 const progressBreakpointIndetermination = 10;
 const progressBreakpointAnimation = 99;
 
-interface SilkActivityControlProps extends TestableComponent {
+export interface SilkActivityControlProps extends TestableComponent {
     // The label of this activity
     label: string | JSX.Element;
     /**
@@ -19,9 +19,9 @@ interface SilkActivityControlProps extends TestableComponent {
      */
     tags?: JSX.Element;
     // Initial state
-    initialStatus?: IActivityStatus;
+    initialStatus?: SilkActivityStatusProps;
     // Register a function in order to receive callbacks
-    registerForUpdates: (callback: (status: IActivityStatus) => any) => any;
+    registerForUpdates: (callback: (status: SilkActivityStatusProps) => any) => any;
     // Un-register this component from any updates
     unregisterFromUpdates: () => any;
     // If the start action should be available
@@ -57,12 +57,12 @@ interface SilkActivityControlProps extends TestableComponent {
         translate: (unit: TimeUnits) => string;
     };
     // configure how the widget is displayed
-    layoutConfig?: IActivityControlLayoutProps;
+    layoutConfig?: SilkActivityControlLayoutProps;
     /** Configures when the status message should be hidden, e.g. because it is uninteresting. */
-    hideMessageOnStatus?: (concreteStatus: ConcreteActivityStatus | undefined) => boolean
+    hideMessageOnStatus?: (concreteStatus: SilkActivityStatusConcrete | undefined) => boolean
 }
 
-export interface IActivityControlLayoutProps {
+export interface SilkActivityControlLayoutProps {
     // show small version of the widget
     small?: boolean;
     // display widget inside rectange
@@ -77,7 +77,10 @@ export interface IActivityControlLayoutProps {
     labelWrapper?: JSX.Element;
 }
 
-const defaultLayout: IActivityControlLayoutProps = {
+// @deprecated use `SilkActivityControlLayoutProps`
+export type IActivityControlLayoutProps = SilkActivityControlLayoutProps;
+
+const defaultLayout: SilkActivityControlLayoutProps = {
     small: false,
     border: false,
     canShrink: false,
@@ -88,11 +91,11 @@ interface IErrorReportAction {
     // The title of the error report modal
     title?: string;
     // The element that will be rendered in the modal, either as Markdown or object
-    renderReport: (report: string | IActivityExecutionReport) => JSX.Element;
-    // What version of the report should be handed to the renderReport function, if false IActivityExecutionReport, if true the Markdown string
+    renderReport: (report: string | SilkActivityExecutionReportProps) => JSX.Element;
+    // What version of the report should be handed to the renderReport function, if false SilkActivityExecutionReportProps, if true the Markdown string
     renderMarkdown: boolean;
     // The function to fetch the error report. It returns undefined if something went wrong.
-    fetchErrorReport: (markdown: boolean) => Promise<string | IActivityExecutionReport | undefined>;
+    fetchErrorReport: (markdown: boolean) => Promise<string | SilkActivityExecutionReportProps | undefined>;
     // If besides showing the error report, there should also be an option to download it.
     allowDownload?: boolean;
     // The text of the download button in the modal
@@ -101,7 +104,7 @@ interface IErrorReportAction {
     closeButtonValue: string;
 }
 
-export interface IActivityExecutionReport {
+export interface SilkActivityExecutionReportProps {
     // Summary of the activity execution error
     errorSummary: string;
     // If the activity was running in a project context, the project ID
@@ -122,6 +125,9 @@ export interface IActivityExecutionReport {
     stackTrace?: IStacktrace;
 }
 
+// @deprecated use `SilkActivityExecutionReportProps`
+export type IActivityExecutionReport = SilkActivityExecutionReportProps;
+
 interface IStacktrace {
     // The final error message of the stacktrace
     errorMessage?: String;
@@ -131,9 +137,12 @@ interface IStacktrace {
     cause?: IStacktrace;
 }
 
+// @deprecated use `SilkActivityControlTranslationKeys`
 export type ActivityControlTranslationKeys = "startActivity" | "stopActivity" | "reloadActivity" | "showErrorReport" | "startPrioritized";
-
+export type SilkActivityControlTranslationKeys = ActivityControlTranslationKeys;
+// @deprecated use `SilkActivityControlAction`
 export type ActivityAction = "start" | "cancel" | "restart";
+export type SilkActivityControlAction = ActivityAction;
 
 /** Silk activity control. */
 export function SilkActivityControl(props: SilkActivityControlProps) {
@@ -160,14 +169,14 @@ export function useSilkActivityControl({
     executePrioritized,
     ...props
 }: SilkActivityControlProps) {
-    const [activityStatus, setActivityStatus] = useState<IActivityStatus | undefined>(initialStatus);
-    const currentStatus = useRef<IActivityStatus | undefined>(initialStatus)
+    const [activityStatus, setActivityStatus] = useState<SilkActivityStatusProps | undefined>(initialStatus);
+    const currentStatus = useRef<SilkActivityStatusProps | undefined>(initialStatus)
     const [showStartPrioritized, setShowStartPrioritized] = useState(false)
-    const [errorReport, setErrorReport] = useState<string | IActivityExecutionReport | undefined>(undefined);
+    const [errorReport, setErrorReport] = useState<string | SilkActivityExecutionReportProps | undefined>(undefined);
 
     // Register update function
     useEffect(() => {
-        const updateActivityStatus = (status: IActivityStatus | undefined) => {
+        const updateActivityStatus = (status: SilkActivityStatusProps | undefined) => {
             if(status?.concreteStatus !== "Waiting") {
                 setShowStartPrioritized(false)
             } else if(executePrioritized) {
@@ -189,7 +198,7 @@ export function useSilkActivityControl({
     );
 
     // Create activity actions
-    const actions: IActivityAction[] = [];
+    const actions: ActivityControlWidgetProps['activityActions'] = [];
 
     if (failureReportAction && activityStatus?.failed && activityStatus.concreteStatus !== "Cancelled") {
         actions.push({
@@ -367,7 +376,7 @@ export function useSilkActivityControl({
     } as const;
 }
 
-export const calcIntent = (activityStatus: IActivityStatus): Intent => {
+export const calcIntent = (activityStatus: SilkActivityStatusProps): Intent => {
     const concreteStatus = activityStatus.concreteStatus;
     let intent: Intent;
     switch (concreteStatus) {

package/src/cmem/ActivityControl/index.ts

@@ -1,3 +1,4 @@
-export { ActivityControlWidget } from "./ActivityControlWidget";
-export { ActivityExecutionErrorReportModal } from "./ActivityExecutionErrorReportModal";
-export { SilkActivityControl, useSilkActivityControl } from "./SilkActivityControl";
+export * from "./ActivityControlWidget";
+export * from "./ActivityExecutionErrorReportModal";
+export * from "./SilkActivityControl";
+export * from "./ActivityControlTypes";

package/src/cmem/ContentBlobToggler/ContentBlobToggler.tsx

@@ -1,8 +1,7 @@
 import React, {useState} from "react";
 import {Link, Spacing} from "../../index";
 
-interface IContentBlobTogglerProps
-  extends React.HTMLAttributes<HTMLDivElement> {
+export interface ContentBlobTogglerProps extends React.HTMLAttributes<HTMLDivElement> {
   /**
         space-delimited list of class names
     */
@@ -43,7 +42,7 @@ export function ContentBlobToggler({
   startExtended = false,
   enableToggler = true,
   ...otherProps
-}: IContentBlobTogglerProps) {
+}: ContentBlobTogglerProps) {
   const [isExtended, setViewState] = useState(startExtended);
   const handlerToggleView = (event: any) => {
     event.preventDefault();

package/src/cmem/ContentBlobToggler/StringPreviewContentBlobToggler.tsx

@@ -1,35 +1,15 @@
 import React from "react";
-import { ContentBlobToggler, Markdown } from "./..";
+import { ContentBlobToggler, ContentBlobTogglerProps, Markdown } from "./..";
 
-interface IStringPreviewContentBlobTogglerProps extends React.HTMLAttributes<HTMLDivElement> {
-    /**
-     space-delimited list of class names
-     */
-    className?: string;
+export interface StringPreviewContentBlobTogglerProps extends Omit<ContentBlobTogglerProps, "previewContent" | "enableToggler"> {
     /**
      The preview content will be cut to this length if it is too long.
      */
     previewMaxLength?: number;
-    /**
-     text label used for toggler when preview is displayed
-     */
-    toggleExtendText: string;
-    /**
-     text label used for toggler when full view is displayed
-     */
-    toggleReduceText: string;
     /**
      The content string. If it is smaller than previewMaxLength this will be displayed in full, else fullviewContent will be displayed.
      */
     content: string;
-    /**
-     Content that is displayed as extended full view
-     */
-    fullviewContent: React.ReactNode;
-    /**
-     show extended full view initially
-     */
-    startExtended?: boolean;
     /** If only the first non-empty line should be shown in the preview. This will in addition also be shortened according to previewMaxLength. */
     firstNonEmptyLineOnly?: boolean
     /** If enabled the preview is rendered as markdown. */
@@ -40,17 +20,17 @@ interface IStringPreviewContentBlobTogglerProps extends React.HTMLAttributes<HTM
 
 /** Version of the content toggler for text only content. */
 export function StringPreviewContentBlobToggler({
-                                                    className = "",
-                                                    previewMaxLength,
-                                                    toggleExtendText,
-                                                    toggleReduceText,
-                                                    content,
-                                                    fullviewContent,
-                                                    startExtended,
-                                                    firstNonEmptyLineOnly,
-                                                    renderPreviewAsMarkdown = false,
-                                                    allowedHtmlElementsInPreview
-                                                }: IStringPreviewContentBlobTogglerProps) {
+    className = "",
+    previewMaxLength,
+    toggleExtendText,
+    toggleReduceText,
+    content,
+    fullviewContent,
+    startExtended,
+    firstNonEmptyLineOnly,
+    renderPreviewAsMarkdown = false,
+    allowedHtmlElementsInPreview
+}: StringPreviewContentBlobTogglerProps) {
     const previewMaybeFirstLine = firstNonEmptyLineOnly ? firstNonEmptyLine(content) : content
     const previewString = previewMaxLength ? previewMaybeFirstLine.substr(0, previewMaxLength) : previewMaybeFirstLine
     const enableToggler = previewString !== content
@@ -68,9 +48,16 @@ export function StringPreviewContentBlobToggler({
 
 const newLineRegex = new RegExp("\r|\n"); // eslint-disable-line
 
-/** Takes the first non-empty line from a preview string. */
+/**
+ * Takes the first non-empty line from a preview string.
+ * @deprecated use `stringPreviewContentBlobTogglerUtils.firstNonEmptyLine`
+ */
 export function firstNonEmptyLine(preview: string) {
     const previewString = preview.trim();
     const result = newLineRegex.exec(previewString);
     return result !== null ? previewString.substr(0, result.index) : previewString;
 }
+
+export const stringPreviewContentBlobTogglerUtils = {
+    firstNonEmptyLine
+}

package/src/cmem/ContentBlobToggler/index.ts

@@ -1,2 +1,2 @@
-export { ContentBlobToggler } from "./ContentBlobToggler";
-export { StringPreviewContentBlobToggler } from "./StringPreviewContentBlobToggler";
+export * from "./ContentBlobToggler";
+export * from "./StringPreviewContentBlobToggler";

package/src/cmem/DateTimeDisplay/ElapsedDateTimeDisplay.tsx

@@ -1,7 +1,11 @@
 import React, {useEffect, useState} from "react";
 import {TestableComponent} from "../../components/interfaces";
 
-interface IProps extends TestableComponent {
+// @deprecated use `ElapsedDateTimeDisplayUnits`
+export type TimeUnits = "minute" | "minutes" | "hour" | "hours" | "day" | "days"
+export type ElapsedDateTimeDisplayUnits = TimeUnits;
+
+export interface ElapsedDateTimeDisplayProps extends TestableComponent {
     // The date time given as string (parseable by Date) or number (ms since 1970-01-01 00:00:00 UTC)
     dateTime: string | number
     // String to put before the elapsed time
@@ -11,17 +15,18 @@ interface IProps extends TestableComponent {
     // If the date time string should be shown as tooltip
     showDateTimeTooltip?: boolean
     // Translate time related vocabulary
-    translateUnits: (unit: TimeUnits) => string
+    translateUnits: (unit: ElapsedDateTimeDisplayUnits) => string
 }
 
-export type TimeUnits = "minute" | "minutes" | "hour" | "hours" | "day" | "days"
-
 const dateTimeToElapsedTimeInMs = (dateTime: string | number) => {
     const absoluteMs = typeof dateTime === "number" ? dateTime : new Date(dateTime).getTime()
     return new Date().getTime() - absoluteMs
 }
 
-// Returns a segmentation of the elapsed time, i.e. an array with the nr of days, hours, minutes, seconds
+/**
+ * Returns a segmentation of the elapsed time, i.e. an array with the nr of days, hours, minutes, seconds
+ * @deprecated moved to `elapsedDateTimeDisplayUtils.elapsedTimeSegmented`
+ */
 export const elapsedTimeSegmented = (elapsedTimeInMs: number): number[] => {
     // In how many segments the time should be split, i.e. hours, minutes, seconds
     const segmentSteps = [24, 60, 60]
@@ -37,9 +42,12 @@ export const elapsedTimeSegmented = (elapsedTimeInMs: number): number[] => {
     return segmentValues.reverse()
 }
 
-// Returns the simplified elapsed time
-export const simplifiedElapsedTime = (timeSegments: number[], translateUnits: (unit: TimeUnits) => string) => {
-    const units: TimeUnits[] = ["day", "hour", "minute"]
+/**
+ * Returns the simplified elapsed time
+ * @deprecated moved to `elapsedDateTimeDisplayUtils.simplifiedElapsedTime`
+ */
+export const simplifiedElapsedTime = (timeSegments: number[], translateUnits: (unit: ElapsedDateTimeDisplayUnits) => string) => {
+    const units: ElapsedDateTimeDisplayUnits[] = ["day", "hour", "minute"]
     // Find first non-null value
     let idx = 0
     while(idx < 3 && timeSegments[idx] === 0) {
@@ -49,11 +57,21 @@ export const simplifiedElapsedTime = (timeSegments: number[], translateUnits: (u
         // Do not show exact seconds
         return `< 1 ${translateUnits("minute")}`
     } else {
-        return `${timeSegments[idx]} ${translateUnits(units[idx] + (timeSegments[idx] > 1 ? "s": "") as TimeUnits)}`
+        return `${timeSegments[idx]} ${translateUnits(units[idx] + (timeSegments[idx] > 1 ? "s": "") as ElapsedDateTimeDisplayUnits)}`
     }
 }
-/** Displays the elapsed time in a human readable way. */
-export const ElapsedDateTimeDisplay = ({dateTime, prefix = "", suffix = "", showDateTimeTooltip = true, translateUnits, ...otherProps}: IProps) => {
+
+/**
+ * Displays the elapsed time in a human readable way.
+ */
+export const ElapsedDateTimeDisplay = ({
+    dateTime,
+    prefix = "",
+    suffix = "",
+    showDateTimeTooltip = true,
+    translateUnits,
+    ...otherProps
+}: ElapsedDateTimeDisplayProps) => {
     const [elapsedTime, setElapsedTime] = useState<number>(dateTimeToElapsedTimeInMs(dateTime))
 
     useEffect(() => {
@@ -67,3 +85,8 @@ export const ElapsedDateTimeDisplay = ({dateTime, prefix = "", suffix = "", show
         {prefix + simplifiedElapsedTime(elapsedTimeSegmented(elapsedTime), translateUnits) + suffix}
     </span>
 }
+
+export const elapsedDateTimeDisplayUtils = {
+    elapsedTimeSegmented,
+    simplifiedElapsedTime,
+}

package/src/cmem/index.ts

@@ -1,25 +1,7 @@
-import { ActivityAction, IActivityControlLayoutProps } from "./ActivityControl/SilkActivityControl";
-import { IActivityStatus } from "./ActivityControl/ActivityControlTypes";
-import { TimeUnits } from "./DateTimeDisplay/ElapsedDateTimeDisplay";
-
-export {
-    ActivityControlWidget,
-    ActivityExecutionErrorReportModal,
-    SilkActivityControl,
-    useSilkActivityControl,
-} from "./ActivityControl";
-export { ContentBlobToggler, StringPreviewContentBlobToggler } from "./ContentBlobToggler";
-export { firstNonEmptyLine } from "./ContentBlobToggler/StringPreviewContentBlobToggler";
-export { ElapsedDateTimeDisplay } from "./DateTimeDisplay/ElapsedDateTimeDisplay";
-export { Markdown } from "./markdown/Markdown";
-export { ReactFlow } from "./react-flow/ReactFlow/ReactFlow";
-export { StickyNoteModal } from "./react-flow/StickyNoteModal/StickyNoteModal";
-
-export type {
-    IActivityStatus,
-    ActivityAction,
-    IActivityControlLayoutProps,
-    TimeUnits,
-}
-
+export * from "./ActivityControl";
 export * from "./ConfidenceValue";
+export * from "./ContentBlobToggler"
+export * from "./DateTimeDisplay/ElapsedDateTimeDisplay";
+export * from "./markdown/Markdown";
+export * from "./markdown/highlightSearchWords";
+export * from "./react-flow";

package/src/cmem/markdown/Markdown.tsx

@@ -1,14 +1,14 @@
+import React from "react";
 import ReactMarkdown from "react-markdown";
 import rehypeRaw from "rehype-raw";
 import remarkGfm from "remark-gfm";
 //@ts-ignore
 import remarkTypograf from "@mavrin/remark-typograf";
 import {remarkDefinitionList} from 'remark-definition-list';
-import React from "react";
-import {HtmlContentBlock, TestableComponent} from "../../index";
 import { PluggableList } from "react-markdown/lib/react-markdown";
+import {HtmlContentBlock, TestableComponent} from "../../index";
 
-export interface MarkdownParserProps extends TestableComponent {
+export interface MarkdownProps extends TestableComponent {
     children: string;
     /**
      * Allow HTML as partial content, otherwise escape HTML tags.
@@ -39,6 +39,8 @@ export interface MarkdownParserProps extends TestableComponent {
      */
     linkTargetName?: false | string;
 }
+/* @deprecated use `MarkdownProps` */
+export type MarkdownParserProps = MarkdownProps;
 
 const configDefault = {
     /*
@@ -73,7 +75,7 @@ export const Markdown = ({
     reHypePlugins,
     linkTargetName = "_mdref",
     ...otherProps
-}: MarkdownParserProps) => {
+}: MarkdownProps) => {
 
     const configHtml = allowHtml ? {
         rehypePlugins: [...configDefault.rehypePlugins].concat([rehypeRaw]),

package/src/cmem/markdown/highlightSearchWords.ts

@@ -1,12 +1,15 @@
 import {Content, Parent, Root, Text} from "hast";
 import {Transformer} from "unified"
 import {Node} from "unist";
-import {createMultiWordRegex, extractSearchWords} from "../../components/Typography/Highlighter";
+import { highlighterUtils } from "../../components/Typography/Highlighter";
 
-/** Creates a react-markdown reHype plugin that marks text based on a multi-word search query. */
+/**
+ * Creates a react-markdown reHype plugin that marks text based on a multi-word search query.
+ * @deprecated moved to `markdownUtils.highlightSearchWordsPluginFactory`
+ */
 export default function highlightSearchWordsPluginFactory(searchQuery: string | undefined) {
-    const searchStringParts = searchQuery ? extractSearchWords(searchQuery) : []
-    const multiWordRegex = createMultiWordRegex(searchStringParts);
+    const searchStringParts = searchQuery ? highlighterUtils.extractSearchWords(searchQuery) : []
+    const multiWordRegex = highlighterUtils.createMultiWordRegex(searchStringParts);
     const createTextNode = (text: string): Text => ({type: "text", value: text})
 
     // Highlight a text node by returning an array of text and mark elements
@@ -65,3 +68,7 @@ export default function highlightSearchWordsPluginFactory(searchQuery: string |
         return (input: Root) => highlightRootNode(input)
     }
 }
+
+export const markdownUtils = {
+    highlightSearchWordsPluginFactory,
+}

package/src/cmem/markdown/markdown.scss

@@ -1,4 +1,4 @@
-.footnote-ref {
+[data-footnote-ref=true] {
     &::before {
         content: "[";
     }
@@ -11,7 +11,7 @@
     margin-left: $eccgui-size-inline-whitespace * 0.5;
 }
 
-.footnote-back {
+.data-footnote-backref {
     &::before {
         content: "[";
     }
@@ -19,9 +19,16 @@
         content: "]";
     }
 
-    margin-left: $eccgui-size-inline-whitespace;
+    margin-left: 0.5 * $eccgui-size-inline-whitespace;
 }
 
+#footnote-label {
+    @extend hr;
+    @extend .#{$eccgui}-separation__divider-horizontal;
+    @extend .#{$eccgui}-separation__spacing--medium;
+    @extend .#{$eccgui}-separation__divider-horizontal--short;
+    overflow: hidden;
+}
 
 .task-list-item {
     list-style: none;
@@ -30,3 +37,26 @@
         margin-left: $eccgui-size-block-whitespace * -2;
     }
 }
+
+/*
+    WORKAROUND: markdown footnotes rendered without (empty) local anchors
+*/
+
+.#{$eccgui}-typography__contentblock {
+    a[href=""] {
+        font-size: $eccgui-size-typo-caption;
+        line-height: $eccgui-size-typo-caption-lineheight;
+        pointer-events: none;
+        cursor: text;
+        color: currentColor;
+        text-decoration: none;
+        vertical-align: super;
+
+        &:before {
+            content: "[";
+        }
+        &:after {
+            content: "]";
+        }
+    }
+}

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>
     )