@eccenca/gui-elements 25.2.0-rc.0 → 26.0.0-rc.0

package/src/components/NotAvailable/NotAvailable.stories.tsx

@@ -0,0 +1,15 @@
+import React from "react";
+import { Meta, StoryFn } from "@storybook/react";
+
+import { NotAvailable } from "../../../index";
+
+export default {
+    title: "Components/NotAvailable",
+    component: NotAvailable,
+    argTypes: {},
+} as Meta<typeof NotAvailable>;
+
+const TemplateFull: StoryFn<typeof NotAvailable> = (args) => <NotAvailable {...args} />;
+
+export const Default = TemplateFull.bind({});
+Default.args = {};

package/src/components/NotAvailable/NotAvailable.tsx

@@ -0,0 +1,69 @@
+import React from "react";
+
+import { CLASSPREFIX as eccgui, Tag, TagProps, Tooltip, TooltipProps } from "../../index";
+import { TestableComponent } from "../interfaces";
+export interface NotAvailableProps
+    extends TestableComponent, Pick<TagProps, "icon" | "className">, Pick<TooltipProps, "intent"> {
+    /**
+     * Text displayed by the element.
+     */
+    label?: TagProps["children"];
+    /**
+     * Add a tooltip to the element.
+     * You need to set an empty string `""` to remove it.
+     */
+    tooltip?: TooltipProps["content"];
+    /**
+     * Specify the display of the used `Tag` component.
+     */
+    tagProps?: Omit<TagProps, "icon" | "intent" | "children">;
+    /**
+     * Specify the display of the used `Tooltip` component.
+     */
+    tooltipProps?: Omit<TooltipProps, "content" | "intent" | "children">;
+    /**
+     * Do not use the `Tag` component for the display.
+     * The `intent` state can be displayed only on the tooltip then.
+     */
+    noTag?: boolean;
+}
+
+/**
+ * Simple placeholder element that can be used to display info about missing data.
+ */
+export const NotAvailable = ({
+    label = "n/a",
+    tooltip = "not available",
+    icon,
+    intent,
+    tagProps,
+    tooltipProps,
+    className,
+    noTag = false,
+    ...otherProps
+}: NotAvailableProps) => {
+    const defaultTagProps: TagProps = {
+        icon,
+        intent,
+        emphasis: "weaker",
+        className: `${eccgui}-notavailable` + className ? ` ${className}` : "",
+    };
+    const naElement =
+        noTag === false ? (
+            <Tag {...defaultTagProps} {...tagProps} {...otherProps}>
+                {label ?? "n/a"}
+            </Tag>
+        ) : (
+            <>{label ?? "n/a"}</>
+        );
+    const defaultTooltipProps: TooltipProps = {
+        children: naElement,
+        content: tooltip,
+        intent,
+        addIndicator: noTag,
+    };
+
+    return tooltip ? <Tooltip {...defaultTooltipProps} {...tooltipProps} /> : naElement;
+};
+
+export default NotAvailable;

package/src/components/Notification/Notification.stories.tsx

@@ -3,7 +3,8 @@ import { LoremIpsum, loremIpsum } from "react-lorem-ipsum";
 import { Meta, StoryFn } from "@storybook/react";
 
 import { helpersArgTypes } from "../../../.storybook/helpers";
-import { Button, HtmlContentBlock, Markdown, Notification, Spacing } from "../../../index";
+import { Markdown } from "../../cmem";
+import { Button, HtmlContentBlock, Notification, Spacing } from "../../components";
 
 export default {
     title: "Components/Notification",

package/src/components/Notification/Notification.tsx

@@ -14,17 +14,18 @@ import Icon, { IconProps } from "./../Icon/Icon";
 import { TestIconProps } from "./../Icon/TestIcon";
 
 export interface NotificationProps
-    extends TestableComponent,
+    extends
+        TestableComponent,
         Omit<BlueprintToastProps, "message" | "action" | "icon" | "intent">,
         React.HTMLAttributes<HTMLDivElement> {
     /**
      * Extra user action elements
      */
-    actions?: JSX.Element | JSX.Element[];
+    actions?: React.JSX.Element | React.JSX.Element[];
     /**
      * Notification message that can be used as alternative to children elements.
      */
-    message?: JSX.Element | string;
+    message?: React.JSX.Element | string;
     /**
      * Intent state of the notification.
      */
@@ -97,7 +98,7 @@ export const Notification = ({
             timeout={timeout ? timeout : 0}
             icon={
                 notificationIcon
-                    ? React.cloneElement(notificationIcon as JSX.Element, {
+                    ? React.cloneElement(notificationIcon as React.JSX.Element, {
                           className: (notificationIcon.props.className ?? "") + ` ${BlueprintClassNames.ICON}`,
                       })
                     : undefined

package/src/components/OverviewItem/OverviewItemActions.tsx

@@ -18,7 +18,7 @@ export interface OverviewItemActionsProps extends React.HTMLAttributes<HTMLDivEl
     /**
      * Display element while the rendering of the actual children is delayed.
      */
-    delaySkeleton?: JSX.Element;
+    delaySkeleton?: React.JSX.Element;
 }
 
 /**

package/src/components/OverviewItem/OverviewItemDepiction.tsx

@@ -35,7 +35,7 @@ export const OverviewItemDepiction = ({
         "type" in children &&
         (children.type === Icon || children.type === TestIcon)
     ) {
-        return <Depiction image={children as JSX.Element} {...defaultDepictionDisplay} />;
+        return <Depiction image={children as React.JSX.Element} {...defaultDepictionDisplay} />;
     }
     return (
         <div

package/src/components/OverviewItem/stories/OverviewItem.stories.tsx

@@ -14,7 +14,7 @@ import {
     OverviewItemLine,
     Tag,
     TagList,
-} from "./../../../../index";
+} from "./../../../components";
 import { FullExample as OtherDepictionExample } from "./../../Depiction/stories/Depiction.stories";
 import { Default as ActionsExample } from "./OverviewItemActions.stories";
 import { AutoTransform as DepictionExample } from "./OverviewItemDepiction.stories";

package/src/components/OverviewItem/stories/OverviewItemActions.stories.tsx

@@ -1,7 +1,7 @@
 import React from "react";
 import { Meta, StoryFn } from "@storybook/react";
 
-import { Button, ContextMenu, IconButton, OverviewItemActions } from "./../../../../index";
+import { Button, ContextMenu, IconButton, OverviewItemActions } from "./../../../components";
 
 export default {
     title: "Components/OverviewItem/OverviewItemActions",

package/src/components/OverviewItem/stories/OverviewItemDepiction.stories.tsx

@@ -3,7 +3,7 @@ import { Meta, StoryFn } from "@storybook/react";
 
 import png16to9 from "../../Depiction/stories/test-16to9.png";
 
-import { Depiction, Icon, OverviewItem, OverviewItemDepiction } from "./../../../../index";
+import { Depiction, Icon, OverviewItem, OverviewItemDepiction } from "./../../../components";
 import { FullExample as DepictionExample } from "./../../Depiction/stories/Depiction.stories";
 
 export default {

package/src/components/OverviewItem/stories/OverviewItemDescription.stories.tsx

@@ -2,7 +2,7 @@ import React from "react";
 import { LoremIpsum } from "react-lorem-ipsum";
 import { Meta, StoryFn } from "@storybook/react";
 
-import { OverviewItemDescription, OverviewItemLine } from "./../../../../index";
+import { OverviewItemDescription, OverviewItemLine } from "./../../../components";
 
 export default {
     title: "Components/OverviewItem/OverviewItemDescription",

package/src/components/OverviewItem/stories/OverviewItemListPerformance.tsx

@@ -86,7 +86,7 @@ export const OverviewItemListPerformance = ({
         // eslint-disable-next-line no-console
         console.log(
             "OverviewItemListPerformance Rendering time (s)",
-            (renderEnd.getTime() - renderStart.getTime()) / 1000
+            (renderEnd.getTime() - renderStart.getTime()) / 1000,
         );
 
         if (containerRef.current) {
@@ -96,7 +96,7 @@ export const OverviewItemListPerformance = ({
                 // eslint-disable-next-line no-console
                 console.log(
                     `Change ${++changeCount} after time (s)`,
-                    (renderChange.getTime() - renderEnd.getTime()) / 1000
+                    (renderChange.getTime() - renderEnd.getTime()) / 1000,
                 );
             };
             if (observerRef.current) {

package/src/components/Pagination/Pagination.tsx

@@ -103,7 +103,7 @@ export const usePagination = ({
         ({ page, pageSize }: { page: any; pageSize: any }) => {
             setPagination({ ..._pagination.current, current: page, limit: pageSize });
         },
-        [setPagination]
+        [setPagination],
     );
     // When the total number of pageable items changes, this function must be called
     const onTotalChange = React.useCallback(
@@ -112,7 +112,7 @@ export const usePagination = ({
                 setPagination({ ..._pagination.current, total: total, current: 1 });
             }
         },
-        [setPagination]
+        [setPagination],
     );
     const paginationElement = (
         <Pagination

package/src/components/PropertyValuePair/PropertyValueList.tsx

@@ -7,7 +7,7 @@ import { PropertyValuePair } from "./PropertyValuePair";
 export interface PropertyValueListProps extends React.HTMLAttributes<HTMLDListElement> {
     /**
      * Only use one single column and put property label and value below each other.
-     * This property is forwardd to direct `PropertyValuePair` children.
+     * This property is forward to direct `PropertyValuePair` children.
      */
     singleColumn?: boolean;
 }

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

@@ -2,7 +2,7 @@ import React from "react";
 import { LoremIpsum } from "react-lorem-ipsum";
 import { Meta, StoryFn } from "@storybook/react";
 
-import { HtmlContentBlock, RadioButton } from "../../../../index";
+import { HtmlContentBlock, RadioButton } from "../../../components";
 
 export default {
     title: "Forms/RadioButton",

package/src/components/Select/Select.stories.tsx

@@ -1,7 +1,7 @@
 import React from "react";
 import { loremIpsum } from "react-lorem-ipsum";
 import { Meta, StoryFn } from "@storybook/react";
-import { fn } from "@storybook/test";
+import { fn } from "storybook/test";
 
 import { helpersArgTypes } from "../../../.storybook/helpers";
 import { Button, Depiction, MenuItem, Select } from "../../index";

package/src/components/Select/Select.tsx

@@ -3,12 +3,15 @@ import { Classes as BlueprintClasses, InputGroupProps } from "@blueprintjs/core"
 import { Select as BlueprintSelect, SelectProps as BlueprintSelectProps } from "@blueprintjs/select";
 
 import { CLASSPREFIX as eccgui } from "../../configuration/constants";
+import { Button, ButtonProps } from "../Button/Button";
+import { ContextOverlayProps } from "../ContextOverlay";
+import Icon from "../Icon/Icon";
 import { TestableComponent } from "../interfaces";
-
-import { Button, ButtonProps, ContextOverlayProps, Icon, OverflowText } from "./../../index";
+import OverflowText from "../Typography/OverflowText";
 
 export interface SelectProps<T>
-    extends TestableComponent,
+    extends
+        TestableComponent,
         Omit<BlueprintSelectProps<T>, "popoverTargetProps" | "popoverContentProps" | "popoverProps" | "popoverRef">,
         Pick<ButtonProps, "icon" | "rightIcon"> {
     /**
@@ -117,7 +120,7 @@ export function Select<T>({
                             {typeof rightIcon === "string" ? (
                                 <Icon name={rightIcon} />
                             ) : (
-                                rightIcon ?? <Icon name={"toggler-caretdown"} />
+                                (rightIcon ?? <Icon name={"toggler-caretdown"} />)
                             )}
                         </>
                     }

package/src/components/Skeleton/Skeleton.tsx

@@ -6,7 +6,7 @@ export interface SkeletonProps {
     /**
      * Element that need to displayed using the skeleton styles.
      */
-    children: JSX.Element | JSX.Element[];
+    children: React.JSX.Element | React.JSX.Element[];
 }
 
 /**
@@ -15,7 +15,7 @@ export interface SkeletonProps {
  */
 export function Skeleton({ children }: SkeletonProps) {
     const alteredChildren = React.Children.map(children, (child) => {
-        const originalChild = child as React.ReactElement;
+        const originalChild = child;
         if (originalChild.props) {
             return React.cloneElement(originalChild, {
                 className: originalChild.props.className ? originalChild.props.className + " " + SKELETON : SKELETON,

package/src/components/Spinner/Spinner.tsx

@@ -5,7 +5,7 @@ import {
     Spinner as BlueprintSpinner,
     SpinnerProps as BlueprintSpinnerProps,
 } from "@blueprintjs/core";
-import Color from "color";
+import Color, { ColorLike } from "color";
 
 import { CLASSPREFIX as eccgui } from "../../configuration/constants";
 
@@ -21,7 +21,7 @@ export interface SpinnerProps extends Omit<BlueprintSpinnerProps, "size" | "inte
      * Must be a valid css color definition.
      * `intent` property will always overwrite this setting.
      */
-    color?: Color | string | "inherit";
+    color?: ColorLike | "inherit";
     /**
      * Intent state of the spinner.
      * When used the spinner is colored.

package/src/components/Sticky/StickyTarget.tsx

@@ -101,7 +101,7 @@ export const StickyTarget = ({
                         }
                         stickyTargetRef.current?.style.setProperty(
                             "--eccgui-sticky-target-applicationoffset",
-                            `${connectedOffset}px`
+                            `${connectedOffset}px`,
                         );
                     };
 

package/src/components/Sticky/stories/StickyTarget.stories.tsx

@@ -1,6 +1,6 @@
 import React from "react";
 import { LoremIpsum } from "react-lorem-ipsum";
-import { Meta, Story } from "@storybook/react";
+import { Meta, StoryFn } from "@storybook/react";
 
 import { HtmlContentBlock, StickyTarget } from "../../../../index";
 
@@ -10,7 +10,7 @@ export default {
     argTypes: {},
 } as Meta<typeof StickyTarget>;
 
-const Template: Story<typeof StickyTarget> = (args) => (
+const Template: StoryFn<typeof StickyTarget> = (args) => (
     <div style={{ height: "10rem", overflow: "auto", position: "relative" }}>
         <HtmlContentBlock>
             {args.getConnectedElement && args.to !== "bottom" && (

package/src/components/Structure/TitleSubsection.tsx

@@ -6,7 +6,7 @@ export interface TitleSubsectionProps extends React.HTMLAttributes<HTMLElement>
     /**
      * HTML tag to use for element. As default element `h3` is used for a string as children, otherwise `div`.
      */
-    useHtmlElement?: keyof JSX.IntrinsicElements;
+    useHtmlElement?: keyof React.JSX.IntrinsicElements;
 }
 
 export const TitleSubsection = ({ children, className = "", useHtmlElement, ...restProps }: TitleSubsectionProps) => {
@@ -20,7 +20,7 @@ export const TitleSubsection = ({ children, className = "", useHtmlElement, ...r
             ...restProps,
             className: `${eccgui}-structure__title-subsection ` + className,
         },
-        children
+        children,
     );
 };
 

package/src/components/SuggestField/SuggestField.stories.tsx

@@ -22,7 +22,7 @@ const defaultArgs: SuggestFieldProps<string, string> = {
     onSearch: (query: string) => {
         const multiWord = highlighterUtils.extractSearchWords(query, true);
         return ["search item A", "search element B", "search object C"].filter((word) =>
-            highlighterUtils.matchesAllWords(word.toLowerCase(), multiWord)
+            highlighterUtils.matchesAllWords(word.toLowerCase(), multiWord),
         );
     },
     onChange: (elem) => {
@@ -76,7 +76,7 @@ const allowCustomValues: SuggestFieldProps<string, string> = {
     createNewItem: {
         itemRenderer: suggestFieldUtils.createNewItemRendererFactory(
             (query: string) => `Create new item: ${query}`,
-            "item-add-artefact"
+            "item-add-artefact",
         ),
         itemFromQuery: (item) => item,
     },

package/src/components/SuggestField/index.ts

@@ -6,6 +6,3 @@ export * from "./../AutocompleteField/interfaces";
 export const suggestFieldUtils = {
     createNewItemRendererFactory,
 };
-
-// @deprecated (v26) use `suggestFieldUtils`
-export const autoCompleteFieldUtils = suggestFieldUtils;

package/src/components/Table/Table.tsx

@@ -9,7 +9,8 @@ type TableRowHeightSize = "small" | "medium" | "large";
 // workaround to get type/interface
 type CarbonTableProps = React.ComponentProps<typeof CarbonTable>;
 export interface TableProps
-    extends Omit<CarbonTableProps, "size" | "overflowMenuOnHover" | "stickyHeader" | "useStaticWidth">,
+    extends
+        Omit<CarbonTableProps, "size" | "overflowMenuOnHover" | "stickyHeader" | "useStaticWidth">,
         React.TableHTMLAttributes<HTMLTableElement> {
     /**
      * Sets basically the height of a row inside the table.
@@ -50,7 +51,7 @@ export function Table({
     children,
     ...otherCarbonTableProps
 }: TableProps) {
-    let colLayout: boolean | JSX.Element = false;
+    let colLayout: boolean | React.JSX.Element = false;
     if (!!columnWidths && columnWidths.length > 0) {
         colLayout = (
             <colgroup className={`${eccgui}-simpletable__layout`}>

package/src/components/Table/TableContainer.tsx

@@ -12,21 +12,23 @@ import { CLASSPREFIX as eccgui } from "../../configuration/constants";
 import { TableProps, tableRowHeightSizes } from "./Table";
 
 export interface TableDataContainerProps
-    extends Omit<
+    extends
+        Omit<
             CarbonDataTableProps<
                 Array<Omit<CarbonDataTableRow<Array<CarbonDataTableHeader>>, "cells">>,
                 Array<CarbonDataTableHeader>
             >,
             "size" | "overflowMenuOnHover" | "stickyHeader" | "useStaticWidth"
         >,
-        React.TableHTMLAttributes<HTMLTableElement> {
-    children(signature: any): JSX.Element;
+        Omit<React.TableHTMLAttributes<HTMLTableElement>, "children"> {
+    children(signature: any): React.JSX.Element;
     size?: TableProps["size"];
 }
 export interface TableSimpleContainerProps
-    extends Omit<CarbonTableContainerProps, "description" | "stickyHeader" | "title" | "useStaticWidth">,
+    extends
+        Omit<CarbonTableContainerProps, "description" | "stickyHeader" | "title" | "useStaticWidth">,
         React.HTMLAttributes<HTMLDivElement> {
-    children?: JSX.Element;
+    children?: React.JSX.Element;
 }
 
 export type TableContainerProps = TableDataContainerProps | TableSimpleContainerProps;
@@ -46,7 +48,10 @@ export function TableContainer({ className = "", ...otherProps }: TableContainer
             />
         </CarbonDataTable.TableContainer>
     ) : (
-        <CarbonDataTable.TableContainer {...otherProps} className={`${eccgui}-simpletable__container ` + className} />
+        <CarbonDataTable.TableContainer
+            {...{ ...otherProps, children: otherProps.children as React.ReactNode }}
+            className={`${eccgui}-simpletable__container ` + className}
+        />
     );
 }
 

package/src/components/Table/TableExpandHeader.tsx

@@ -9,7 +9,8 @@ import { ValidIconName } from "../Icon/canonicalIconNames";
 import IconButton from "./../Icon/IconButton";
 
 export interface TableExpandHeaderProps
-    extends Omit<
+    extends
+        Omit<
             CarbonTableExpandHeaderProps,
             "children" | "ariaLabel" | "enableExpando" | "expandIconDescription" | "aria-label"
         >,

package/src/components/Table/TableExpandRow.tsx

@@ -6,12 +6,13 @@ import { usePrefix as carbonPrefix } from "@carbon/react";
 import { CLASSPREFIX as eccgui } from "../../configuration/constants";
 
 import IconButton from "./../Icon/IconButton";
-import { TableCell } from "./index";
+import TableCell from "./TableCell";
 
 // workaround to get type/interface
 type CarbonTableExpandRowProps = React.ComponentProps<typeof CarbonTableExpandRow>;
 export interface TableExpandRowProps
-    extends Omit<CarbonTableExpandRowProps, "children" | "ref" | "ariaLabel" | "expandIconDescription" | "aria-label">,
+    extends
+        Omit<CarbonTableExpandRowProps, "children" | "ref" | "ariaLabel" | "expandIconDescription" | "aria-label">,
         React.HTMLAttributes<HTMLTableRowElement> {
     /**
      * This text is displayed as tooltip for the button that toggles the expanded/collapsed state.

package/src/components/Table/index.tsx

@@ -7,4 +7,10 @@ export * from "./TableCell";
 
 // TODO, we may wrap to add own classes (currently not necessary)
 export { TableHead, TableBody, TableExpandedRow, TableHeader } from "@carbon/react";
-export type { TableHeadProps, TableBodyProps, TableExpandedRowProps, TableHeaderProps, DataTableRenderProps } from "@carbon/react";
+export type {
+    TableHeadProps,
+    TableBodyProps,
+    TableExpandedRowProps,
+    TableHeaderProps,
+    DataTableRenderProps,
+} from "@carbon/react";

package/src/components/Tabs/Tab.tsx

@@ -1,6 +1,6 @@
 import React from "react";
 import { Tab as BlueprintTab, TabProps as BlueprintTabProps } from "@blueprintjs/core";
-import Color from "color";
+import Color, { ColorLike } from "color";
 
 import { CLASSPREFIX as eccgui } from "../../configuration/constants";
 import { TestableComponent } from "../interfaces";
@@ -20,7 +20,7 @@ export interface TabProps extends TestableComponent, Omit<BlueprintTabProps, "ti
      *
      * The front color is set automatically, so the tag label is always readable.
      */
-    backgroundColor?: Color | string;
+    backgroundColor?: ColorLike;
     /**
      * In case of not enough space do not shrink this tab in its size.
      */

package/src/components/Tabs/TabTitle.tsx

@@ -29,7 +29,7 @@ export interface TabTitleProps {
     /**
      * Add a tooltip to a tab, displayed when user hoveres over it.
      */
-    tooltip?: string | JSX.Element;
+    tooltip?: string | React.JSX.Element;
     /**
      * Make the tab not usable, display is also narrowed.
      */

package/src/components/Tag/Tag.tsx

@@ -1,6 +1,6 @@
 import React from "react";
 import { Tag as BlueprintTag, TagProps as BlueprintTagProps } from "@blueprintjs/core";
-import Color from "color";
+import Color, { ColorLike } from "color";
 
 import { intentClassName, IntentTypes } from "../../common/Intent";
 import { CLASSPREFIX as eccgui } from "../../configuration/constants";
@@ -10,12 +10,11 @@ import { TestIconProps } from "../Icon/TestIcon";
 
 import decideContrastColorValue from "./../../common/utils/colorDecideContrastvalue";
 
-export interface TagProps
-    extends Omit<
-        BlueprintTagProps,
-        // currently not supported
-        "active" | "fill" | "icon" | "intent" | "large" | "multiline" | "rightIcon"
-    > {
+export interface TagProps extends Omit<
+    BlueprintTagProps,
+    // currently not supported
+    "active" | "fill" | "icon" | "intent" | "large" | "multiline" | "rightIcon"
+> {
     // own properties
 
     /**
@@ -25,7 +24,7 @@ export interface TagProps
      *
      * The front color is set automatically, so the tag label is always readable.
      */
-    backgroundColor?: Color | string;
+    backgroundColor?: ColorLike;
 
     /**
      * visual appearance and "thickness" of the tag
@@ -61,13 +60,13 @@ function Tag({
     backgroundColor,
     ...otherProps
 }: TagProps) {
-    otherProps["interactive"] = otherProps.interactive ?? !!otherProps.onClick ? true : false;
+    otherProps["interactive"] = (otherProps.interactive ?? !!otherProps.onClick) ? true : false;
     if (backgroundColor) {
         const additionalStyles = otherProps.style ?? {};
         let color = Color("#ffffff");
         try {
             color = Color(backgroundColor);
-        } catch (ex) {
+        } catch {
             // eslint-disable-next-line no-console
             console.warn("Received invalid background color for tag: " + backgroundColor);
         }

package/src/components/Tag/stories/Tag.stories.tsx

@@ -3,7 +3,7 @@ import { Meta, StoryFn } from "@storybook/react";
 
 import { helpersArgTypes } from "../../../../.storybook/helpers";
 
-import { Tag } from "./../../../../index";
+import { Tag } from "./../../../components";
 
 export default {
     title: "Components/Tag",

package/src/components/Tag/stories/TagList.stories.tsx

@@ -1,7 +1,7 @@
 import React from "react";
 import { Meta, StoryFn } from "@storybook/react";
 
-import { Tag, TagList } from "./../../../../index";
+import { Tag, TagList } from "./../../../components";
 
 export default {
     title: "Components/Tag",