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

package/src/extensions/react-flow/nodes/NodeContentExtension.tsx

@@ -1,7 +1,6 @@
 import React from "react";
 import { CLASSPREFIX as eccgui } from "../../../configuration/constants";
 import IconButton from "../../../components/Icon/IconButton";
-import Button from "../../../components/Button/Button";
 
 export interface NodeContentExtensionProps extends React.HTMLAttributes<HTMLDivElement> {
     /**
@@ -70,15 +69,17 @@ export const NodeContentExtension = ({
                         <div className={`${eccgui}-graphviz__node__extension-body`}>
                             {children}
                         </div>
-                        <div className={`${eccgui}-graphviz__node__extension-actions`}>
-                            <IconButton
-                                className={`${eccgui}-graphviz__node__extension-reducebutton`}
-                                name="toggler-showless"
-                                text={tooltipReduce}
-                                onClick={onToggle ? (e) => { onToggle(e, expanded); } : undefined}
-                            />
-                            {actionButtons}
-                        </div>
+                        {(!!actionButtons || !!onToggle) && (
+                            <div className={`${eccgui}-graphviz__node__extension-actions`}>
+                                <IconButton
+                                    className={`${eccgui}-graphviz__node__extension-reducebutton`}
+                                    name="toggler-showless"
+                                    text={tooltipReduce}
+                                    onClick={onToggle ? (e) => { onToggle(e, expanded); } : undefined}
+                                />
+                                {actionButtons}
+                            </div>
+                        )}
                     </>
                 )
             }

package/src/extensions/react-flow/nodes/NodeDefault.tsx

@@ -6,12 +6,12 @@ import {
 import { Tooltip } from "../../../index";
 import { NodeContent, NodeContentProps } from "./NodeContent";
 
-export interface NodeProps<T> extends ReactFlowNodeProps {
+export interface NodeProps<NODE_DATA, NODE_CONTENT_PROPS = any> extends ReactFlowNodeProps {
     /**
      * Contains all properties for our implementation of the React-Flow node.
      * For details pls see the `NodeContent` element documentation.
      */
-    data: NodeContentProps<T>
+    data: NodeContentProps<NODE_DATA, NODE_CONTENT_PROPS>
 }
 
 /**

package/src/extensions/react-flow/nodes/NodeTools.tsx

@@ -4,10 +4,11 @@ import React, {memo, useState} from "react";import {
 } from "@blueprintjs/core";
 import {ContextOverlay, IconButton} from "../../../index";
 import {CLASSPREFIX as eccgui} from "../../../configuration/constants";
+import {ValidIconName} from "../../../components/Icon/canonicalIconNames";
 
 export interface NodeToolsProps extends IBlueprintPopoverProps {
     children: string | JSX.Element;
-    togglerElement?: string | JSX.Element;
+    togglerElement?: ValidIconName | JSX.Element;
     togglerText?: string;
     menuButtonDataTestId?: string
 }

package/src/extensions/react-flow/nodes/_nodes.scss

@@ -2,11 +2,11 @@
     &.selected:before {
         content: " ";
         position: absolute;
-        top: -11 * $reactflow-node-border-width;
-        right: -11 * $reactflow-node-border-width;
-        bottom: -11 * $reactflow-node-border-width;
-        left: -11 * $reactflow-node-border-width;
-        border-width: $reactflow-node-border-width;
+        top: -6 * $reactflow-node-border-width;
+        right: -6 * $reactflow-node-border-width;
+        bottom: -6 * $reactflow-node-border-width;
+        left: -6 * $reactflow-node-border-width;
+        border-width: 1px;
         border-color: $reactflow-edge-stroke-color-selected;
         border-radius: $reactflow-node-border-radius;
         border-style: dotted;
@@ -23,6 +23,10 @@
         width: unset !important;
         text-align: unset !important;
         padding: unset !important;
+
+        &.selected, &.selected:hover {
+            box-shadow: none;
+        }
     }
 }
 
@@ -43,7 +47,7 @@
     border-style: solid;
 
     &:hover {
-        box-shadow: 0 0 0 11 * $reactflow-node-border-width rgba($reactflow-edge-stroke-color-selected, 0.05);
+        box-shadow: 0 0 0 6 * $reactflow-node-border-width rgba($reactflow-edge-stroke-color-selected, 0.05);
     }
 }
 
@@ -53,13 +57,13 @@
 
 @keyframes pumpingshadow {
   0% {
-    box-shadow: 0 0 3 * $reactflow-node-border-width 0 rgba(#fff, 0.9), 0 0 1 * $reactflow-node-border-width 0 rgba($reactflow-edge-stroke-color-selected, 0);
+    box-shadow: 0 0 2 * $reactflow-node-border-width 0 rgba(#fff, 0.9), 0 0 1 * $reactflow-node-border-width 0 rgba($reactflow-edge-stroke-color-selected, 0);
   }
   50% {
-    box-shadow: 0 0 3 * $reactflow-node-border-width 11 * $reactflow-node-border-width rgba(#fff, 0.9), 0 0 1 * $reactflow-node-border-width 11 * $reactflow-node-border-width $reactflow-edge-stroke-color-selected;
+    box-shadow: 0 0 2 * $reactflow-node-border-width 6 * $reactflow-node-border-width rgba(#fff, 0.9), 0 0 1 * $reactflow-node-border-width 6 * $reactflow-node-border-width $reactflow-edge-stroke-color-selected;
   }
   100% {
-    box-shadow: 0 0 3 * $reactflow-node-border-width 0 rgba(#fff, 0.9), 0 0 1 * $reactflow-node-border-width 0 rgba($reactflow-edge-stroke-color-selected, 0);
+    box-shadow: 0 0 2 * $reactflow-node-border-width 0 rgba(#fff, 0.9), 0 0 1 * $reactflow-node-border-width 0 rgba($reactflow-edge-stroke-color-selected, 0);
   }
 }
 
@@ -197,113 +201,6 @@
     max-height: $reactflow-node-basesize * 13;
 }
 
-// Node types
-
-.react-flow__node-graphNode {
-    .#{$eccgui}-graphviz__node {
-        background-color: #fff;
-        border-color: #8e24aa;
-        border-style: double;
-        border-width: 3 * $reactflow-node-border-width;
-    }
-    .#{$eccgui}-graphviz__node__extension--expanded {
-        border-color: #8e24aa;
-        border-style: double;
-        border-width: 3 * $reactflow-node-border-width;
-    }
-}
-
-.react-flow__node-classNode {
-    .#{$eccgui}-graphviz__node {
-        border-width: 2 * $reactflow-node-border-width;
-        border-radius: 0;
-        border-color: darken($button-background-color, 60%);
-    }
-    .#{$eccgui}-graphviz__node__extension--expanded {
-        border-color: darken($button-background-color, 60%);
-        border-width: 2 * $reactflow-node-border-width;
-        border-radius: 0;
-    }
-}
-
-.react-flow__node-instanceNode {
-    .#{$eccgui}-graphviz__node {
-        border-color: darken($button-background-color, 50%);
-    }
-    .#{$eccgui}-graphviz__node__extension--expanded {
-        border-color: darken($button-background-color, 50%);
-    }
-}
-
-.react-flow__node-propertyNode {
-    .#{$eccgui}-graphviz__node {
-        background-color: complement($button-background-color);
-        border-color: darken(complement($button-background-color), 40%);
-        border-radius: 2 * $reactflow-node-border-radius;
-        border-style: dashed;
-    }
-    .#{$eccgui}-graphviz__node__extension--expanded {
-        border-color: darken(complement($button-background-color), 40%);
-        border-radius: 2 * $reactflow-node-border-radius;
-        border-style: dashed;
-    }
-}
-
-.react-flow__node-datasetNode {
-    .#{$eccgui}-graphviz__node {
-        background-color: #e1f5fe;
-        border-color: #039be5;
-    }
-    .#{$eccgui}-graphviz__node__extension--expanded {
-        border-color: #039be5;
-    }
-}
-
-.react-flow__node-linkingNode {
-    .#{$eccgui}-graphviz__node {
-        background-color: #e0f7fa;
-        border-color: #00acc1;
-    }
-    .#{$eccgui}-graphviz__node__extension--expanded {
-        border-color: #00acc1;
-    }
-}
-
-.react-flow__node-transformNode {
-    .#{$eccgui}-graphviz__node {
-        border-color: #00897b;
-    }
-    .#{$eccgui}-graphviz__node__extension--expanded {
-        border-color: #00897b;
-    }
-}
-
-.react-flow__node-taskNode {
-    .#{$eccgui}-graphviz__node {
-        background-color: #eceff1;
-        border-color: #546e7a;
-    }
-    .#{$eccgui}-graphviz__node__extension--expanded {
-        border-color: #546e7a;
-    }
-}
-
-.react-flow__node-workflowNode {
-    .#{$eccgui}-graphviz__node {
-        background-color: #fff;
-        border-color: #4527a0;
-        border-width: 3 * $reactflow-node-border-width;
-        border-style: double;
-        border-radius: 0;
-    }
-    .#{$eccgui}-graphviz__node__extension--expanded {
-        border-color: #4527a0;
-        border-width: 3 * $reactflow-node-border-width;
-        border-style: double;
-        border-radius: 0;
-    }
-}
-
 // Node highlights
 
 .#{$eccgui}-graphviz__node--highlight-success,
@@ -313,12 +210,12 @@
         content: " ";
         display: block;
         position: absolute;
-        top: -3 * $reactflow-node-border-width;
-        left: -3 * $reactflow-node-border-width;
-        bottom: -3 * $reactflow-node-border-width;
-        right: -3 * $reactflow-node-border-width;
+        top: -2 * $reactflow-node-border-width;
+        left: -2 * $reactflow-node-border-width;
+        bottom: -2 * $reactflow-node-border-width;
+        right: -2 * $reactflow-node-border-width;
         border-radius: inherit;
-        box-shadow: 0 0 0 3*$reactflow-node-border-width $eccgui-color-danger-text;
+        box-shadow: 0 0 0 2 * $reactflow-node-border-width $eccgui-color-danger-text;
         z-index: -1;
     }
 }
@@ -329,12 +226,12 @@
         content: " ";
         display: block;
         position: absolute;
-        top: -3 * $reactflow-node-border-width;
-        left: -3 * $reactflow-node-border-width;
-        bottom: -3 * $reactflow-node-border-width;
-        right: -3 * $reactflow-node-border-width;
+        top: -2 * $reactflow-node-border-width;
+        left: -2 * $reactflow-node-border-width;
+        bottom: -2 * $reactflow-node-border-width;
+        right: -2 * $reactflow-node-border-width;
         border-radius: inherit;
-        box-shadow: 0 0 0 3*$reactflow-node-border-width $eccgui-color-accent;
+        box-shadow: 0 0 0 2 * $reactflow-node-border-width $eccgui-color-accent;
         z-index: -1;
     }
 
@@ -342,29 +239,29 @@
     &.#{$eccgui}-graphviz__node--highlight-warning,
     &.#{$eccgui}-graphviz__node--highlight-danger {
         &:after {
-            top: -7 * $reactflow-node-border-width;
-            left: -7 * $reactflow-node-border-width;
-            bottom: -7 * $reactflow-node-border-width;
-            right: -7 * $reactflow-node-border-width;
+            top: -4 * $reactflow-node-border-width;
+            left: -4 * $reactflow-node-border-width;
+            bottom: -4 * $reactflow-node-border-width;
+            right: -4 * $reactflow-node-border-width;
         }
     }
 }
 
 .#{$eccgui}-graphviz__node--highlight-success {
     &:before {
-        box-shadow: 0 0 0 3*$reactflow-node-border-width $eccgui-color-success-text;
+        box-shadow: 0 0 0 2 * $reactflow-node-border-width $eccgui-color-success-text;
     }
 }
 
 .#{$eccgui}-graphviz__node--highlight-warning {
     &:before {
-        box-shadow: 0 0 0 3*$reactflow-node-border-width $eccgui-color-warning-text;
+        box-shadow: 0 0 0 2 * $reactflow-node-border-width $eccgui-color-warning-text;
     }
 }
 
 .#{$eccgui}-graphviz__node--highlight-altmatch {
     &:after {
-        box-shadow: 0 0 0 3*$reactflow-node-border-width complement($eccgui-color-primary);
+        box-shadow: 0 0 0 2 * $reactflow-node-border-width complement($eccgui-color-primary);
     }
 }
 
@@ -406,7 +303,7 @@
     // separation between node content and extension
     // do not inherit styles here
     border-top-color: $eccgui-color-separation-divider !important;
-    border-top-width: $reactflow-node-border-width !important;
+    border-top-width: 1px !important;
     border-top-style: solid !important;
     border-top-left-radius: 0 !important;
     border-top-right-radius: 0 !important;
@@ -415,57 +312,6 @@
     top: 100%;
     left: -1 * $reactflow-node-border-width;
     right: -1 * $reactflow-node-border-width;
-
-    .react-flow__node-graphNode & {
-        border-color: #8e24aa;
-        border-style: double;
-        border-width: 3 * $reactflow-node-border-width;
-        left: -3 * $reactflow-node-border-width;
-        right: -3 * $reactflow-node-border-width;
-    }
-
-    .react-flow__node-classNode & {
-        border-color: darken($button-background-color, 60%);
-        border-width: 2 * $reactflow-node-border-width;
-        border-radius: 0;
-        left: -2 * $reactflow-node-border-width;
-        right: -2 * $reactflow-node-border-width;
-    }
-
-    .react-flow__node-instanceNode & {
-        border-color: darken($button-background-color, 50%);
-    }
-
-    .react-flow__node-propertyNode & {
-        border-color: darken(complement($button-background-color), 40%);
-        border-radius: 2 * $reactflow-node-border-radius;
-        border-style: dashed;
-    }
-
-    .react-flow__node-datasetNode & {
-        border-color: #039be5;
-    }
-
-    .react-flow__node-linkingNode & {
-        border-color: #00acc1;
-    }
-
-    .react-flow__node-transformNode & {
-        border-color: #00897b;
-    }
-
-    .react-flow__node-taskNode & {
-        border-color: #546e7a;
-    }
-
-    .react-flow__node-workflowNode & {
-        border-color: #4527a0;
-        border-width: 3 * $reactflow-node-border-width;
-        border-style: double;
-        border-radius: 0;
-        left: -3 * $reactflow-node-border-width;
-        right: -3 * $reactflow-node-border-width;
-    }
 }
 
 .#{$eccgui}-graphviz__node__extension-expandbutton {

package/src/extensions/react-flow/nodes/{NodeContent.stories.tsx → stories/NodeContent.stories.tsx}

@@ -2,11 +2,11 @@ import React, { useState, useEffect, useCallback } from "react";
 import { ComponentStory, ComponentMeta } from "@storybook/react";
 import { LoremIpsum } from 'react-lorem-ipsum';
 import ReactFlow, { Elements } from 'react-flow-renderer';
-import HtmlContentBlock from "../../../components/Typography/HtmlContentBlock";
+import HtmlContentBlock from "../../../../components/Typography/HtmlContentBlock";
 
-import { NodeContent } from "./NodeContent";
-import { nodeTypes } from "./nodeTypes";
-import { NodeContentExtension } from "./NodeContentExtension";
+import { NodeContent } from "./../NodeContent";
+import { nodeTypes } from "./../nodeTypes";
+import { NodeContentExtension } from "./../NodeContentExtension";
 import { Default as ContentExtensionExample } from "./NodeContentExtension.stories";
 
 export default {

package/src/extensions/react-flow/nodes/{NodeContentExtension.stories.tsx → stories/NodeContentExtension.stories.tsx}

@@ -1,10 +1,10 @@
 import React, { useState } from "react";
-import { ComponentStory, ComponentMeta } from "@storybook/react";
+import { ComponentMeta } from "@storybook/react";
 import { LoremIpsum } from 'react-lorem-ipsum';
 
-import { NodeContentExtension } from "./NodeContentExtension";
-import IconButton from "../../../components/Icon/IconButton";
-import HtmlContentBlock from "../../../components/Typography/HtmlContentBlock";
+import { NodeContentExtension } from "./../NodeContentExtension";
+import IconButton from "../../../../components/Icon/IconButton";
+import HtmlContentBlock from "../../../../components/Typography/HtmlContentBlock";
 
 export default {
     title: "Extensions/React Flow/Node Content Extension",

package/src/extensions/react-flow/nodes/{NodeDefault.stories.tsx → stories/NodeDefault.stories.tsx}

@@ -1,10 +1,11 @@
 import React, { useState, useEffect, useCallback } from "react";
 import { ComponentStory, ComponentMeta } from "@storybook/react";
-import ReactFlow, { Elements } from 'react-flow-renderer';
+import { ReactFlow } from "./../../../../cmem";
+import { Elements } from 'react-flow-renderer';
 
-import { NodeDefault } from "./NodeDefault";
-import { NodeContent } from "./NodeContent";
-import { nodeTypes } from "./nodeTypes";
+import { NodeDefault } from "./../NodeDefault";
+import { NodeContent } from "./../NodeContent";
+import { nodeTypes } from "./../nodeTypes";
 import { Default as NodeContentExample } from "./NodeContent.stories";
 
 export default {

package/src/index.scss

@@ -169,6 +169,7 @@
 @import "./components/Tabs/tabs";
 @import "./components/PropertyValuePair/propertyvalue";
 @import "./components/Iframe/iframe";
+@import "./components/AutoSuggestion/AutoSuggestion";
 
 // == load tweaks ==============================================================
 

package/src/index.ts

@@ -8,6 +8,9 @@ import ApplicationToolbar from "./components/Application/ApplicationToolbar";
 import ApplicationToolbarSection from "./components/Application/ApplicationToolbarSection";
 import ApplicationToolbarAction from "./components/Application/ApplicationToolbarAction";
 import ApplicationToolbarPanel from "./components/Application/ApplicationToolbarPanel";
+import AutoSuggestion from "./components/AutoSuggestion/AutoSuggestion";
+import { AutoSuggestionList } from "./components/AutoSuggestion/AutoSuggestionList";
+import SingleLineCodeEditor from "./components/AutoSuggestion/SingleLineCodeEditor";
 
 import HtmlContentBlock from "./components/Typography/HtmlContentBlock";
 import OverflowText from "./components/Typography/OverflowText";
@@ -31,6 +34,8 @@ import Button from "./components/Button/Button";
 import Checkbox from "./components/Checkbox/Checkbox";
 import RadioButton from "./components/RadioButton/RadioButton";
 import Tabs from "./components/Tabs/Tabs";
+import Tab from "./components/Tabs/Tab";
+import TabTitle from "./components/Tabs/TabTitle";
 import TextField from "./components/TextField/TextField";
 import TextArea from "./components/TextField/TextArea";
 import SearchField from "./components/TextField/SearchField";
@@ -56,6 +61,7 @@ import TagList from "./components/Tag/TagList";
 import Notification from "./components/Notification/Notification";
 import Toast from "./components/Notification/Toast";
 import { Select } from "@blueprintjs/select";
+import MultiSelect from "./components/MultiSelect/MultiSelect";
 
 import { Iframe } from "./components/Iframe/Iframe";
 import { IframeModal } from "./components/Iframe/IframeModal";
@@ -125,6 +131,8 @@ import { openInNewTab } from "./common/utils/openInNewTab";
 import { ProgressBar } from "./components/ProgressBar/ProgressBar";
 import List from "./components/List/List";
 
+import * as LegacyReplacements from "./legacy-replacements";
+
 const HelperClasses = {
     Typography: TypographyClassNames,
     Intent: IntentClassNames,
@@ -145,6 +153,9 @@ export {
     ApplicationToolbarSection,
     ApplicationToolbarAction,
     ApplicationToolbarPanel,
+    AutoSuggestion,
+    AutoSuggestionList,
+    SingleLineCodeEditor,
     HtmlContentBlock,
     OverflowText,
     WhiteSpaceContainer,
@@ -182,6 +193,8 @@ export {
     Checkbox,
     RadioButton,
     Tabs,
+    Tab,
+    TabTitle,
     TextField,
     TextArea,
     SearchField,
@@ -227,11 +240,13 @@ export {
     Toast,
     HelperClasses,
     Select, // TODO: include as own element
+    MultiSelect,
     AutoCompleteField,
     ProgressBar,
     Iframe,
     IframeModal,
-    Utilities
+    Utilities,
+    LegacyReplacements,
 };
 
 export * from "./cmem";

package/src/legacy-replacements/Tabs/Tabs.stories.tsx

@@ -0,0 +1,46 @@
+import React from "react";
+import { ComponentStory, ComponentMeta } from "@storybook/react";
+
+import { Tabs } from "./../../legacy-replacements";
+
+export default {
+    title: "Legacy/Tabs",
+    component: Tabs,
+    argTypes: {
+        className: {
+            description: "A space-delimited list of class names.",
+            control: "string",
+            table: {
+                defaultValue: { summary: undefined },
+                type: { summary: "string" },
+            }
+        },
+    },
+} as ComponentMeta<typeof Tabs>;
+
+const TemplateDeprecated: ComponentStory<typeof Tabs> = (args) => (
+    <Tabs {...args} />
+);
+
+export const DeprecatedUsage = TemplateDeprecated.bind({});
+DeprecatedUsage.args = {
+    prefixTabNames: "deprecatedtabs",
+    activeTab: "deprecatedtab1",
+    tabs: [
+        {
+            tabId: "deprecatedtab1",
+            tabTitle: "Tab title 1",
+            tabContent: "Tab content 1",
+        },
+        {
+            tabId: "deprecatedtab2",
+            tabTitle: "Tab title 2",
+            tabContent: "Tab content 2",
+        },
+        {
+            tabId: "deprecatedtab3",
+            tabTitle: "Tab title 3",
+            tabContent: "Tab content 3",
+        }
+    ]
+};

package/src/legacy-replacements/Tabs/Tabs.tsx

@@ -0,0 +1,84 @@
+import React from 'react';
+import {
+    Tabs as BlueprintTabs,
+    TabsProps as BlueprintTabsProps,
+    Tab,
+} from "@blueprintjs/core";
+import { CLASSPREFIX as eccgui } from "../../configuration/constants";
+
+// deprecated interface
+interface TabsProps extends Omit<
+    BlueprintTabsProps,
+    "vertical" | "onChange" | "large" | "id" | "renderActiveTabPanelOnly"
+> {
+    activeTab: string;
+    tabs: DeprecatedTabProps[];
+    onTabClick?: ({props}: any) => void;
+    prefixTabNames: string;
+    allowScrollbars?: boolean;
+    /**
+    * If controlled usage is enable then a `onTabClick` handler is ncessary to control tab panel content and `activeTab` updates.
+    */
+    controlled?: boolean;
+}
+
+// deprecated interface
+export interface DeprecatedTabProps {
+    tabId: string;
+    tabTitle: React.ReactNode;
+    tabContent?: JSX.Element;
+    dontShrink?: boolean;
+    className?: string;
+}
+
+const createDeprecatedTab = ({
+    tabId,
+    tabTitle,
+    tabContent,
+    dontShrink=false,
+    ...otherTabProps
+}: DeprecatedTabProps) => {
+    const extraStyles = dontShrink ? { style: {flexShrink: 0} } : {};
+    return <Tab
+        key={tabId}
+        id={tabId}
+        title={tabTitle}
+        panel={tabContent}
+        {...otherTabProps}
+        {...extraStyles}
+    />;
+}
+
+export function TabsReplacement({
+    activeTab,
+    tabs=[],
+    onTabClick,
+    controlled = false,
+    prefixTabNames,
+    className = "",
+    allowScrollbars,
+    ...restProps
+}: TabsProps) {
+    const usagetype = controlled ? { selectedTabId: activeTab } : { defaultSelectedTabId: activeTab }
+    return (
+        <BlueprintTabs
+            id={prefixTabNames}
+            onChange={onTabClick}
+            className={
+                className +
+                (allowScrollbars ? ` ${eccgui}-tabs--scrollablelist` : "")
+            }
+            {...usagetype}
+            {...restProps}
+        >
+            {
+                tabs.map(tab => {
+                    return createDeprecatedTab({
+                        className: `${prefixTabNames}-header-${tab.tabId}`,
+                        ...tab
+                    });
+                })
+            }
+        </BlueprintTabs>
+    );
+};

package/src/legacy-replacements/index.ts

@@ -0,0 +1,11 @@
+export { ButtonReplacement as Button } from "./Button/Button";
+export { AffirmativeButtonReplacement as AffirmativeButton } from "./Button/AffirmativeButton";
+export { DismissiveButtonReplacement as DismissiveButton } from "./Button/DismissiveButton";
+export { DisruptiveButtonReplacement as DisruptiveButton } from "./Button/DisruptiveButton";
+export { ButtonReplacement as ProgressButton } from "./Button/Button";
+export { CheckboxReplacement as Checkbox } from "./Checkbox/Checkbox";
+export { RadioButtonReplacement as Radio } from "./Radio/RadioButton";
+export { TabsReplacement as Tabs } from "./Tabs/Tabs";
+export { TextFieldReplacement as TextField } from "./TextField/TextField";
+
+export type { DeprecatedTabProps } from "./Tabs/Tabs";

package/src/test/setupTests.js

@@ -1,2 +1,21 @@
 import "regenerator-runtime/runtime";
 
+if (window.document) {
+    window.document.body.createTextRange = function() {
+        return {
+            setEnd: function(){},
+            setStart: function(){},
+            getBoundingClientRect: function(){
+                return {right: 0};
+            },
+            getClientRects: function(){
+                return {
+                    length: 0,
+                    left: 0,
+                    right: 0
+                }
+            }
+        }
+    }
+}
+