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

package/src/components/Menu/MenuItem.tsx

@@ -9,7 +9,7 @@ import { TestIconProps } from "./../Icon/TestIcon";
 import { openInNewTab } from '../../common/utils/openInNewTab';
 import { ValidIconName } from "../Icon/canonicalIconNames";
 
-export interface MenuItemProps extends Omit<BlueprintMenuItemProps, "icon" | "children">, Omit<React.AnchorHTMLAttributes<HTMLAnchorElement>, "onClick" | "target" | "children"> {
+export interface MenuItemProps extends Omit<BlueprintMenuItemProps, "icon" | "children">, Omit<React.AnchorHTMLAttributes<HTMLAnchorElement>, "onClick" | "onFocus" | "target" | "children"> {
     /*
      * If set the icon is diplayed on the left side of the menu item.
      */
@@ -20,19 +20,19 @@ export interface MenuItemProps extends Omit<BlueprintMenuItemProps, "icon" | "ch
 /**
  * Single item, used as child inside `Menu`.
  */
-function MenuItem({
+export const MenuItem = ({
     children,
     className = "",
     icon,
     onClick,
     href,
     ...restProps
-}: MenuItemProps) {
+}: MenuItemProps) => {
     return (
         <BlueprintMenuItem
             {...restProps}
             href={href}
-            onClick={(e) => openInNewTab(e, onClick, href)}
+            onClick={(e:React.MouseEvent<HTMLElement>) => openInNewTab(e as React.MouseEvent<HTMLAnchorElement>, onClick, href)}
             className={`${eccgui}-menu__item ` + className}
             icon={
                 icon ? (

package/src/components/Menu/index.ts

@@ -0,0 +1,3 @@
+export * from "./Menu";
+export * from "./MenuDivider"
+export * from "./MenuItem";

package/src/components/MultiSelect/MultiSelect.tsx

@@ -4,7 +4,7 @@ import {
     HTMLInputProps as BlueprintHTMLInputProps
 } from "@blueprintjs/core";
 import {
-    IItemRendererProps as BlueprintItemRendererProps,
+    ItemRendererProps as BlueprintItemRendererProps,
     MultiSelect2 as BlueprintMultiSelect,
     MultiSelect2Props as BlueprintMultiSelectProps
 } from "@blueprintjs/select";
@@ -19,13 +19,16 @@ import {
 
 import {removeExtraSpaces} from "../../common/utils/stringUtils";
 
-export interface SelectedParamsType<T> {
+export interface MultiSelectSelectionProps<T> {
     newlySelected: T;
     selectedItems: T[];
     createdItems: Partial<T>[];
 }
 
-interface IProps<T> extends Pick<BlueprintMultiSelectProps<T>, "items" | "placeholder" | "openOnKeyDown"> {
+// @deprecated use `MultiSelectSelectionProps<T>`
+export type SelectedParamsType<T> = MultiSelectSelectionProps<T>;
+
+export interface MultiSelectProps<T> extends Pick<BlueprintMultiSelectProps<T>, "items" | "placeholder" | "openOnKeyDown"> {
     /**
      * Returns the unique ID of an item. This will be used for equality of items.
      */
@@ -42,7 +45,7 @@ interface IProps<T> extends Pick<BlueprintMultiSelectProps<T>, "items" | "placeh
     /**
      *  function handler that would be called anytime an item is selected/deselected or an item is created/removed
      */
-    onSelection?: (params: SelectedParamsType<T>) => void;
+    onSelection?: (params: MultiSelectSelectionProps<T>) => void;
     /**
      * Props to spread to `ContextOverlay`. Note that `content` cannot be changed.
      */
@@ -107,7 +110,7 @@ interface IProps<T> extends Pick<BlueprintMultiSelectProps<T>, "items" | "placeh
     requestDelay?: number
 }
 
-function MultiSelect<T>({
+export function MultiSelect<T>({
     items,
     prePopulateWithItems,
     itemId,
@@ -129,7 +132,7 @@ function MultiSelect<T>({
     createNewItemFromQuery,
     requestDelay = 0,
     ...otherProps
-}: IProps<T>) {
+}: MultiSelectProps<T>) {
     const [createdItems, setCreatedItems] = React.useState<T[]>([]);
     const [createdSelectedItems, setCreatedSelectedItems] = React.useState<T[]>([]);
     const [itemsCopy, setItemsCopy] = React.useState<T[]>([...items]);

package/src/components/Notification/Notification.tsx

@@ -67,7 +67,7 @@ export interface NotificationProps extends Omit<BlueprintToastProps, "message" |
  * Displays a notification message, optionally combined with depiction and further action buttons.
  * By default it uses colorization of an blueish info alert.
  */
-function Notification({
+export const Notification = ({
     actions,
     children,
     className,
@@ -82,7 +82,7 @@ function Notification({
     icon,
     timeout,
     ...otherProps
-}: NotificationProps) {
+}: NotificationProps) => {
     let intentLevel: string = IntentClassNames.INFO;
     let iconSymbol = iconName;
     switch (true) {

package/src/components/Notification/Toast.tsx

@@ -1,8 +1,15 @@
 import React from "react";
 import { CLASSPREFIX as eccgui } from "../../configuration/constants";
-import Notification from "./Notification";
+import Notification, { NotificationProps } from "./Notification";
 
-function Toast({ children, className, timeout = 10000, ...otherProps }: any) {
+export interface ToastProps extends NotificationProps {};
+
+// FIXME: we need to check if we still need this component. It does not add a lot to `Notification`.
+
+/**
+ * Displays a `Notification` with a pre-set `timeout` setting.
+ */
+function Toast({ children, className, timeout = 10000, ...otherProps }: NotificationProps) {
     return (
         <Notification
             className={`${eccgui}-notification--toast` + (className ? " " + className : "")}

package/src/components/Notification/index.ts

@@ -0,0 +1,2 @@
+export * from "./Notification";
+export * from "./Toast";

package/src/components/NumericInput/NumericInput.tsx

@@ -1,4 +1,6 @@
-import { NumericInput } from "@blueprintjs/core";
+import { NumericInput as BlueprintNumericInput } from "@blueprintjs/core";
 import { memo } from "react";
 
-export default memo(NumericInput);
+// @deprecated will be remove because beside the special arrow buttons it does not add any special. Could be done also with TextField + correct `type`.
+export const NumericInput = memo(BlueprintNumericInput)
+export default NumericInput;

package/src/components/OverviewItem/OverviewItem.tsx

@@ -16,13 +16,13 @@ export interface OverviewItemProps extends React.HTMLAttributes<HTMLDivElement>
  * This element can include all basic information and actions to give an overview about the item.
  * Mainly used in items list or to create basic widgets.
  */
-function OverviewItem({
+export const OverviewItem = ({
     children,
     className = '',
     densityHigh = false,
     hasSpacing = false,
     ...otherProps
-}: OverviewItemProps) {
+}: OverviewItemProps) => {
 
     const item = (
         <div

package/src/components/OverviewItem/OverviewItemActions.tsx

@@ -12,12 +12,12 @@ export interface OverviewItemActionsProps extends React.HTMLAttributes<HTMLDivEl
  * Contains an arbitrary number of elements for user-interactions.
  * It does not make sense to include more than 1 or 2 of these elements within `OverviewItem`.
  */
-function OverviewItemActions ({
+export const OverviewItemActions = ({
     children,
     className = '',
     hiddenInteractions = false,
     ...restProps
-}: OverviewItemActionsProps) {
+}: OverviewItemActionsProps) => {
     return (
         <div
             {...restProps}

package/src/components/OverviewItem/OverviewItemDepiction.tsx

@@ -9,12 +9,12 @@ export interface OverviewItemDepictionProps extends React.HTMLAttributes<HTMLDiv
     keepColors?: boolean;
 }
 
-function OverviewItemDepiction({
+export const OverviewItemDepiction = ({
     children,
     className = '',
     keepColors = false,
     ...restProps
-}: OverviewItemDepictionProps) {
+}: OverviewItemDepictionProps) => {
     const defaultDepictionDisplay = {
         // mimic OverviewItemDepiction "behaviour"
         border: false,

package/src/components/OverviewItem/OverviewItemDescription.tsx

@@ -1,13 +1,15 @@
 import React from "react";
 import { CLASSPREFIX as eccgui } from "../../configuration/constants";
 
-function OverviewItemDescription({
+export interface OverviewItemDescriptionProps extends React.HTMLAttributes<HTMLDivElement> {}
+
+export const OverviewItemDescription = ({
     children,
-    className = '',
-    ...restProps
-}: React.HTMLAttributes<HTMLDivElement>) {
+    className = "",
+    ...otherDivProps
+}: OverviewItemDescriptionProps) => {
     return (
-        <div {...restProps} className={`${eccgui}-overviewitem__description `+className}>
+        <div {...otherDivProps} className={`${eccgui}-overviewitem__description ` + className}>
             {children}
         </div>
     )

package/src/components/OverviewItem/OverviewItemLine.tsx

@@ -18,13 +18,13 @@ export interface OverviewItemLineProps extends React.HTMLAttributes<HTMLDivEleme
  * If the content overflows the container then this part of the content is hidden.
  * It does not make sense to include more that 2 or 3 of those lines within one `OverviewItemDescription`.
  */
-function OverviewItemLine({
+export const OverviewItemLine = ({
     children,
     className = '',
     small=false,
     large=false,
     ...restProps
-}: OverviewItemLineProps) {
+}: OverviewItemLineProps) => {
     return (
         <div
             {...restProps}

package/src/components/OverviewItem/OverviewItemList.tsx

@@ -25,7 +25,7 @@ export interface OverviewItemListProps extends React.HTMLAttributes<HTMLOListEle
  * This element can include all basic information and actions to give an overview about the item.
  * Mainly used in items list or to create basic widgets.
  */
-function OverviewItemList({
+export const OverviewItemList = ({
     children,
     className = '',
     densityHigh = false,
@@ -33,7 +33,7 @@ function OverviewItemList({
     hasSpacing = false,
     columns=1,
     ...restProps
-}: OverviewItemListProps) {
+}: OverviewItemListProps) => {
     return (
         <ol
             {...restProps}

package/src/components/OverviewItem/index.ts

@@ -0,0 +1,6 @@
+export * from "./OverviewItem";
+export * from "./OverviewItemDepiction";
+export * from "./OverviewItemDescription";
+export * from "./OverviewItemLine";
+export * from "./OverviewItemActions";
+export * from "./OverviewItemList";

package/src/components/Pagination/Pagination.tsx

@@ -32,7 +32,7 @@ export interface PaginationProps extends CarbonPaginationProps {
     hideBorders?: boolean;
 }
 
-function Pagination({
+export const Pagination = ({
     className,
     hidePageSizeConfiguration = false,
     hideInfoText = false,
@@ -40,7 +40,7 @@ function Pagination({
     hideNavigationArrows = false,
     hideBorders = false,
     ...otherProps
-}: PaginationProps) {
+}: PaginationProps) => {
     return (
         <CarbonPagination
             {...otherProps}

package/src/components/PropertyValuePair/PropertyName.tsx

@@ -2,7 +2,9 @@ import React from "react";
 import { CLASSPREFIX as eccgui } from "../../configuration/constants";
 import Label from "../Label/Label";
 
-function PropertyName({ className = "", children, ...otherProps }: any) {
+export interface PropertyNameProps extends React.HTMLAttributes<HTMLElement> {};
+
+export const PropertyName = ({ className = "", children, ...otherProps }: PropertyNameProps) => {
     return (
         <dt className={`${eccgui}-propertyvalue__property` + (className ? " " + className : "")} {...otherProps}>
             <div>{typeof children === "string" ? <Label text={children} isLayoutForElement="span" /> : children}</div>

package/src/components/PropertyValuePair/PropertyValue.tsx

@@ -1,7 +1,9 @@
 import React from "react";
 import { CLASSPREFIX as eccgui } from "../../configuration/constants";
 
-function PropertyValue({ className = "", children, ...otherProps }: any) {
+export interface PropertyValueProps extends React.HTMLAttributes<HTMLElement> {};
+
+export const PropertyValue = ({ className = "", children, ...otherProps }: PropertyValueProps) => {
     return (
         <dd className={`${eccgui}-propertyvalue__value` + (className ? " " + className : "")} {...otherProps}>
             <div>{children}</div>

package/src/components/PropertyValuePair/PropertyValueList.tsx

@@ -1,7 +1,9 @@
 import React from "react";
 import { CLASSPREFIX as eccgui } from "../../configuration/constants";
 
-function PropertyValueList({ className = "", children, ...otherProps }: any) {
+export interface PropertyValueListProps extends React.HTMLAttributes<HTMLDListElement> {};
+
+export const PropertyValueList = ({ className = "", children, ...otherProps }: PropertyValueListProps) => {
     return (
         <dl className={`${eccgui}-propertyvalue__list` + (className ? " " + className : "")} {...otherProps}>
             {children}

package/src/components/PropertyValuePair/PropertyValuePair.tsx

@@ -1,7 +1,24 @@
 import React from "react";
 import { CLASSPREFIX as eccgui } from "../../configuration/constants";
 
-function PropertyValuePair({ className = "", children, hasSpacing = false, hasDivider = false, ...otherProps }: any) {
+export interface PropertyValuePairProps extends React.HTMLAttributes<HTMLDivElement> {
+    /**
+     * Add a bit white space to the bottom of the element.
+     */
+    hasSpacing?: boolean;
+    /**
+     * Add a horizontal rule to the bottom of the element.
+     */
+    hasDivider?: boolean;
+};
+
+export const PropertyValuePair = ({
+    className = "",
+    children,
+    hasSpacing = false,
+    hasDivider = false,
+    ...otherProps
+}: PropertyValuePairProps) => {
     return (
         <div
             className={

package/src/components/PropertyValuePair/index.ts

@@ -0,0 +1,4 @@
+export * from "./PropertyName";
+export * from "./PropertyValue";
+export * from "./PropertyValuePair";
+export * from "./PropertyValueList";

package/src/components/RadioButton/RadioButton.tsx

@@ -5,15 +5,15 @@ import {
 } from "@blueprintjs/core";
 import { CLASSPREFIX as eccgui } from "../../configuration/constants";
 
-interface RadioButtonProps extends BlueprintRadioProps {
+export interface RadioButtonProps extends BlueprintRadioProps {
     // currently we do not alter it
 };
 
-function RadioButton({
+export const RadioButton = ({
     children,
     className='',
     ...restProps
-}: RadioButtonProps) {
+}: RadioButtonProps) => {
     return (
         <BlueprintRadioButton
             {...restProps}

package/src/components/Select/Select.tsx

@@ -24,7 +24,7 @@ export interface SelectProps<T> extends Omit<
  * Create a Select box without the HTML select element.
  * It is possible to filter options, as well as to add new options if necessary.
  */
-function Select<T>({contextOverlayProps, ...otherSelectProps}: SelectProps<T>) {
+export function Select<T>({contextOverlayProps, ...otherSelectProps}: SelectProps<T>) {
     return (
         <BlueprintSelect<T>
             popoverProps={{ minimal: true, ...contextOverlayProps}}

package/src/components/Separation/Spacing.tsx

@@ -22,7 +22,7 @@ export interface SpacingProps {
  * Adds horizontal or vertical space between neighbouring elements.
  * It also can add a visual ruler inside.
  */
-function Spacing({ size = "medium", hasDivider = false, vertical = false }: SpacingProps) {
+export const Spacing = ({ size = "medium", hasDivider = false, vertical = false }: SpacingProps) => {
     const direction = vertical ? "vertical" : "horizontal";
     return (
         <div

package/src/components/Spinner/Spinner.tsx

@@ -7,8 +7,11 @@ import {
 } from "@blueprintjs/core";
 import {CLASSPREFIX as eccgui} from "../../configuration/constants";
 
+// @deprecated use `SpinnerProps['position']`
 export type SpinnerPosition = "local" | "inline" | "global"
+// @deprecated use `SpinnerProps['size']`
 export type SpinnerSize = "tiny" | "small" | "medium" | "large" | "xlarge" | "inherit"
+// @deprecated use `SpinnerProps['stroke']`
 export type SpinnerStroke = "thin" | "medium" | "bold"
 type Intent = "inherit" | "primary" | "success" | "warning" | "danger"
 
@@ -62,7 +65,7 @@ export interface SpinnerProps extends Omit<BlueprintSpinnerProps, "size"> {
     description?: string
 }
 
-function Spinner({
+export const Spinner = ({
     className = "",
     color = "inherit",
     position = "local",
@@ -73,7 +76,7 @@ function Spinner({
     overlayProps,
     description = "Loading indicator", // currently unsupported (FIXME):
     ...otherProps
-}: SpinnerProps) {
+}: SpinnerProps) => {
     const [showSpinner, setShowSpinner] = useState<boolean>(!delay || delay <= 0);
     useEffect(() => {
         if(!showSpinner) {

package/src/components/Structure/Section.tsx

@@ -1,7 +1,9 @@
 import React from "react";
 import { CLASSPREFIX as eccgui } from "../../configuration/constants";
 
-function Section({ children, className = '', ...restProps }: any) {
+export interface SectionProps extends React.HTMLAttributes<HTMLElement> {};
+
+export const Section = ({ children, className = '', ...restProps }: SectionProps) => {
     return (
         <section
             {...restProps}

package/src/components/Structure/SectionHeader.tsx

@@ -1,7 +1,9 @@
 import React from "react";
 import { CLASSPREFIX as eccgui } from "../../configuration/constants";
 
-function SectionHeader({ children, className = '', ...restProps }: any) {
+export interface SectionHeaderProps extends React.HTMLAttributes<HTMLElement> {};
+
+export const SectionHeader = ({ children, className = '', ...restProps }: SectionHeaderProps) => {
     return (
         <header
             {...restProps}

package/src/components/Structure/TitleMainsection.tsx

@@ -1,11 +1,13 @@
 import React from "react";
 import { CLASSPREFIX as eccgui } from "../../configuration/constants";
 
-function TitleMainsection ({
+export interface TitleMainsectionProps extends React.HTMLAttributes<HTMLElement> {};
+
+export const TitleMainsection = ({
     children,
     className = '',
     ...restProps
-}: any) {
+}: TitleMainsectionProps) => {
     let htmlElement = React.createElement('div');
     const childrenArray = React.Children.toArray(children);
 

package/src/components/Structure/TitlePage.tsx

@@ -1,11 +1,13 @@
 import React from "react";
 import { CLASSPREFIX as eccgui } from "../../configuration/constants";
 
-function TitlePage ({
+export interface TitlePageProps extends React.HTMLAttributes<HTMLElement> {};
+
+export const TitlePage = ({
     children,
     className = '',
     ...restProps
-}: any) {
+}: TitlePageProps) => {
     let htmlElement = React.createElement('div');
     const childrenArray = React.Children.toArray(children);
 

package/src/components/Structure/TitleSubsection.tsx

@@ -1,15 +1,30 @@
 import React from "react";
 import { CLASSPREFIX as eccgui } from "../../configuration/constants";
 
-function TitleSubsection({ children, className = "", useHtmlElement, ...restProps }: any) {
+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;
+};
+
+export const TitleSubsection = ({
+    children,
+    className = "",
+    useHtmlElement,
+    ...restProps
+}: TitleSubsectionProps) => {
     const childrenArray = React.Children.toArray(children);
     const defaultHtmlElement = childrenArray.length === 1 && typeof childrenArray[0] === "string" ? "h3" : "div";
-    const titleElement = useHtmlElement ? React.createElement(useHtmlElement) : React.createElement(defaultHtmlElement);
+    const titleElement = useHtmlElement??defaultHtmlElement;
 
-    return (
-        <titleElement.type {...restProps} className={`${eccgui}-structure__title-subsection ` + className}>
-            {children}
-        </titleElement.type>
+    return React.createElement(
+        titleElement,
+        {
+            ...restProps,
+            className: `${eccgui}-structure__title-subsection ` + className,
+        },
+        children
     );
 }
 

package/src/components/Structure/index.ts

@@ -0,0 +1,5 @@
+export * from "./Section";
+export * from "./SectionHeader";
+export * from "./TitlePage";
+export * from "./TitleMainsection";
+export * from "./TitleSubsection";

package/src/components/Switch/Switch.tsx

@@ -16,7 +16,7 @@ export interface SwitchProps extends Omit<BlueprintSwitchProps, "onChange"> {
     className?: string;
 }
 
-function Switch({onChange, className, ...otherProps}: SwitchProps) {
+export const Switch = ({onChange, className, ...otherProps}: SwitchProps) => {
     const handleChange = (e: SyntheticEvent<HTMLInputElement>) => {
         const checked = !!(e as any).target?.checked
         onChange && onChange(checked);

package/src/components/Tabs/Tab.tsx

@@ -27,9 +27,6 @@ export interface TabProps extends Omit<BlueprintTabProps, "title"> {
     dontShrink?: boolean;
 }
 
-// Dummy as we cannot use it like that directly for now
-export const TabDummyForStorybook = (props: TabProps) => { return <>{props.title}</>}
-
 export const transformTabProperties = ({
     title,
     dontShrink=false,
@@ -61,52 +58,4 @@ export const transformTabProperties = ({
     }
 }
 
-/*
-
-NOTE: Try to overload the original Tab element. Currently it does not work.
-(at least inside Storybook) because the set displayName is overwritten and
-Blueprints Tabs integration cannot match the new Tab element correctly by
-checking the displayName.
-
-const Tab = (tabProps: TabProps) => {
-    return <BlueprintTab
-        {...transformTabProperties(tabProps)}
-    />;
-}
-
-Tab.displayName = BlueprintTab.displayName;
-//*/
-
-/*
-import { AbstractPureComponent2, Classes } from "@blueprintjs/core";
-class Tab extends AbstractPureComponent2<TabProps> {
-    public static defaultProps: Partial<TabProps> = {
-        disabled: false,
-        //dontShrink: false,
-    };
-
-    constructor(props: TabProps) {
-        //const { title, ...otherProps} = transformTabProperties(props);
-        //const newProps = {...otherProps, title: props.title}
-        //console.log(newProps);
-        super(props);
-    }
-
-    public static displayName = BlueprintTab.displayName;
-
-    // this component is never rendered directly; see BlueprintTabs#renderTabPanel()
-    public render() {
-        const { className, panel } = this.props;
-        return (
-            <div className={`${Classes.TAB_PANEL} ${className}`} role="tablist">
-                {panel}
-            </div>
-        );
-    }
-}
-
-//*
-export default Tab;
-//*/
-
 export default BlueprintTab;

package/src/components/Tabs/TabPanel.tsx

@@ -21,13 +21,13 @@ export interface TabPanelProps extends React.HTMLAttributes<HTMLDivElement> {
  * Element to display the content related to a tab.
  * This could be used if `<Tabs />` is used in uncontrolled mode.
  */
-function TabPanel({
+export const TabPanel = ({
     children,
     className = "",
     labelledBy,
     hidden = false,
     ...otherDivProps
-}: TabPanelProps) {
+}: TabPanelProps) => {
     return (
         <div
             {...otherDivProps}

package/src/components/Tabs/TabTitle.tsx

@@ -38,7 +38,7 @@ export interface TabTitleProps {
 /**
  * Gives control about functionality and layout of the tab titles.
  */
-const TabTitle = ({
+export const TabTitle = ({
     text,
     tooltip,
     titlePrefix,

package/src/components/Tabs/Tabs.tsx

@@ -6,7 +6,7 @@ import {
 import { CLASSPREFIX as eccgui } from "../../configuration/constants";
 import Tab, { TabProps, transformTabProperties } from "./Tab";
 
-interface TabsProps extends Omit<BlueprintTabsProps, "vertical" | "large" | "animate"> {
+export interface TabsProps extends Omit<BlueprintTabsProps, "vertical" | "large" | "animate"> {
     children?: React.ReactNode;
     /**
      * Data structure containing all tabs, including their titles and content panels.
@@ -20,14 +20,14 @@ interface TabsProps extends Omit<BlueprintTabsProps, "vertical" | "large" | "ani
     allowScrollbars?: boolean;
 }
 
-function Tabs(
+export const Tabs = (
     {
         tabs=[],
         children,
         className = "",
         allowScrollbars,
         ...restProps
-    }: TabsProps) {
+    }: TabsProps) => {
 
     return (
         <BlueprintTabs