@eccenca/gui-elements 22.0.0-rc.7 → 22.1.0-rc.1

package/dist/types/components/ContextOverlay/ContextMenu.d.ts

@@ -1,3 +1,8 @@
 /// <reference types="react" />
-declare function ContextMenu({ children, className, togglerElement, togglerText, togglerLarge, tooltipAsTitle, ...restProps }: any): JSX.Element;
+import { ValidIconName } from "../Icon/canonicalIconNames";
+interface ContextMenuProps {
+    togglerElement?: ValidIconName | JSX.Element;
+    [key: string]: any;
+}
+declare function ContextMenu({ children, className, togglerElement, togglerText, togglerLarge, tooltipAsTitle, ...restProps }: ContextMenuProps): JSX.Element;
 export default ContextMenu;

package/dist/types/components/Dialog/Modal.d.ts

@@ -1,6 +1,5 @@
 import React from 'react';
-import { OverlayProps } from "@blueprintjs/core";
-import { IOverlayState } from '@blueprintjs/core';
+import { OverlayProps, IOverlayState } from "@blueprintjs/core";
 export interface ModalProps extends OverlayProps, IOverlayState {
     children: React.ReactNode | React.ReactNode[];
     /**
@@ -15,11 +14,13 @@ export interface ModalProps extends OverlayProps, IOverlayState {
      * Prevents that a backdrop area is displayed behind the modal elements.
      */
     preventBackdrop?: boolean;
+    /** Optional props for the wrapper div element inside the modal overlay. */
+    wrapperDivProps?: React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>;
 }
 /**
  * Displays contents on top of other elements, used to create dialogs.
  * This element can be used to create own modal elements and edge cases for modal dialogs.
  * For most situations the usage of `SimpleDialog` and `AlertDialog` should be sufficent.
  */
-declare function Modal({ children, className, overlayClassName, size, canOutsideClickClose, canEscapeKeyClose, preventBackdrop, ...otherProps }: ModalProps): JSX.Element;
+declare function Modal({ children, className, overlayClassName, size, canOutsideClickClose, canEscapeKeyClose, preventBackdrop, wrapperDivProps, ...otherProps }: ModalProps): JSX.Element;
 export default Modal;

package/dist/types/components/Dialog/SimpleDialog.d.ts

@@ -32,6 +32,8 @@ export interface SimpleDialogProps extends ModalProps, TestableComponent {
      * Define purpose of the dialog, e.g. if it is a warning.
      */
     intent?: IntentTypes;
+    /** Optional props for the wrapper div element inside the modal. */
+    wrapperDivProps?: React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>;
 }
 /**
  * Simplifies the dialog display by providing a direct `Card` template for the `Modal` element.

package/dist/types/components/Form/FieldItemRow.d.ts

@@ -1,3 +1,4 @@
 /// <reference types="react" />
+/** Allows to layout field items horizontally. */
 declare function FieldItemRow({ children, className, ...otherProps }: any): JSX.Element;
 export default FieldItemRow;

package/dist/types/components/Icon/Icon.d.ts

@@ -3,7 +3,7 @@ import { IconProps as CarbonIconProps } from "carbon-components-react";
 import { IntentTypes } from "../../common/Intent";
 import { TooltipProps } from "./../Tooltip/Tooltip";
 import { ValidIconName } from "./canonicalIconNames";
-interface IconProps extends Omit<CarbonIconProps, "icon" | "description" | "name"> {
+export interface IconProps extends Omit<CarbonIconProps, "icon" | "description" | "name"> {
     className?: string;
     name: ValidIconName | string[];
     description?: string;
@@ -15,6 +15,6 @@ interface IconProps extends Omit<CarbonIconProps, "icon" | "description" | "name
     intent?: IntentTypes;
 }
 /** Returns the first icon name that exists or the fallback icon name. */
-export declare const findExistingIconName: (iconNames: string[], fallbackIconName?: string) => string;
+export declare const findExistingIconName: (iconNames: string[], fallbackIconName?: ValidIconName) => ValidIconName;
 declare function Icon({ className, name, large, small, tooltipText, tooltipOpenDelay, tooltipProperties, intent, ...restProps }: IconProps): JSX.Element;
 export default Icon;

package/dist/types/components/Icon/IconButton.d.ts

@@ -2,7 +2,7 @@
 import { ButtonProps, AnchorOrButtonProps } from "../Button/Button";
 import { ValidIconName } from "./canonicalIconNames";
 interface IconButtonProps extends ButtonProps {
-    name: ValidIconName;
+    name: ValidIconName | string[];
     className?: string;
     text?: string;
     tooltipOpenDelay?: number;

package/dist/types/components/Icon/canonicalIconNames.d.ts

@@ -1,6 +1,6 @@
 /// <reference types="react" />
 /** Valid icon names. */
-export declare type ValidIconName = string | "application-dataintegration" | "application-homepage" | "application-useraccount" | "application-warning" | "application-mapping" | "application-explore" | "application-vocabularies" | "application-queries" | "application-legacygui" | "application-activities" | "module-timetracker" | "module-accesscontrol" | "module-annotation" | "module-dashboard" | "module-search" | "module-visualization" | "module-reports" | "module-thesauri" | "module-linkedrules" | "module-integrations" | "module-gdprsearch" | "toggler-showmore" | "toggler-showless" | "toggler-moveright" | "toggler-moveleft" | "toggler-maximize" | "toggler-minimize" | "toggler-tree" | "navigation-back" | "navigation-forth" | "navigation-close" | "navigation-jump" | "navigation-last" | "navigation-previous" | "navigation-next" | "navigation-first" | "item-moremenu" | "item-vertmenu" | "item-viewdetails" | "item-clone" | "item-edit" | "item-evaluation" | "item-execution" | "item-info" | "item-remove" | "item-add-artefact" | "item-launch" | "item-download" | "item-question" | "item-copy" | "item-save" | "item-start" | "item-stop" | "item-reload" | "item-shuffle" | "item-draggable" | "operation-search" | "operation-clear" | "operation-undo" | "operation-redo" | "operation-logout" | "operation-filter" | "operation-filteredit" | "list-sort" | "list-sortasc" | "list-sortdesc" | "state-info" | "state-success" | "state-warning" | "state-danger" | "state-unchecked" | "state-checked" | "state-partlychecked" | "artefact-project" | "artefact-workflow" | "artefact-dataset" | "artefact-dataset-csv" | "artefact-dataset-multicsv" | "artefact-dataset-sparkview" | "artefact-dataset-sqlendpoint" | "artefact-dataset-jdbc" | "artefact-dataset-xml" | "artefact-dataset-json" | "artefact-dataset-excel" | "artefact-dataset-file" | "artefact-dataset-eccencadataplatform" | "artefact-dataset-sparqlendpoint" | "artefact-dataset-neo4j" | "artefact-transform" | "artefact-linking" | "artefact-task" | "artefact-customtask" | "artefact-file" | "artefact-embedded" | "artefact-remote" | "artefact-deprecated" | "artefact-uncategorized" | "artefact-rawdata" | "artefact-report" | "activity-error-report" | "select-caret" | "linked-item" | "operation-auto-graph-layout" | "unlinked-item" | "undefined" | "Undefined";
+export declare type ValidIconName = "application-dataintegration" | "application-homepage" | "application-useraccount" | "application-warning" | "application-mapping" | "application-explore" | "application-vocabularies" | "application-queries" | "application-legacygui" | "application-activities" | "module-timetracker" | "module-accesscontrol" | "module-annotation" | "module-dashboard" | "module-search" | "module-visualization" | "module-reports" | "module-thesauri" | "module-linkedrules" | "module-integrations" | "module-gdprsearch" | "toggler-showmore" | "toggler-showless" | "toggler-moveright" | "toggler-moveleft" | "toggler-maximize" | "toggler-minimize" | "toggler-tree" | "navigation-back" | "navigation-forth" | "navigation-close" | "navigation-jump" | "navigation-last" | "navigation-previous" | "navigation-next" | "navigation-first" | "item-moremenu" | "item-vertmenu" | "item-viewdetails" | "item-clone" | "item-edit" | "item-evaluation" | "item-execution" | "item-info" | "item-remove" | "item-add-artefact" | "item-launch" | "item-download" | "item-question" | "item-copy" | "item-save" | "item-start" | "item-stop" | "item-reload" | "item-shuffle" | "item-draggable" | "operation-search" | "operation-clear" | "operation-undo" | "operation-redo" | "operation-logout" | "operation-filter" | "operation-filteredit" | "operation-comparison" | "operation-transform" | "operation-aggregation" | "data-sourcepath" | "data-targetpath" | "list-sort" | "list-sortasc" | "list-sortdesc" | "state-info" | "state-success" | "state-warning" | "state-danger" | "state-unchecked" | "state-checked" | "state-partlychecked" | "artefact-project" | "artefact-workflow" | "artefact-dataset" | "artefact-dataset-csv" | "artefact-dataset-multicsv" | "artefact-dataset-sparkview" | "artefact-dataset-sqlendpoint" | "artefact-dataset-jdbc" | "artefact-dataset-xml" | "artefact-dataset-json" | "artefact-dataset-excel" | "artefact-dataset-file" | "artefact-dataset-eccencadataplatform" | "artefact-dataset-sparqlendpoint" | "artefact-dataset-neo4j" | "artefact-transform" | "artefact-linking" | "artefact-task" | "artefact-customtask" | "artefact-file" | "artefact-embedded" | "artefact-remote" | "artefact-deprecated" | "artefact-uncategorized" | "artefact-rawdata" | "artefact-report" | "activity-error-report" | "select-caret" | "linked-item" | "operation-auto-graph-layout" | "unlinked-item" | "write-protected" | "undefined" | "Undefined";
 export interface IconSized {
     small: (props: any) => JSX.Element | null;
     normal: (props: any) => JSX.Element | null;

package/dist/types/components/MultiSelect/MultiSelect.d.ts

@@ -0,0 +1,86 @@
+/// <reference types="react" />
+import { MultiSelectProps } from "@blueprintjs/select";
+import { HTMLInputProps } from "@blueprintjs/core/src/common/props";
+interface SelectedParamsType<T> {
+    newlySelected: T;
+    selectedItems: T[];
+    createdItems: Partial<T>[];
+}
+interface IProps<T> extends Pick<MultiSelectProps<T>, "items" | "placeholder" | "openOnKeyDown"> {
+    /**
+     * Returns the unique ID of an item. This will be used for equality of items.
+     */
+    itemId: (item: T) => string;
+    /**
+     * Returns the label of an item.
+     * this would be used in the item selection list as well as the multi-select input
+     */
+    itemLabel: (item: T) => string;
+    /**
+     * When set to true will set the multi-select value with all the items provided
+     */
+    prePopulateWithItems?: boolean;
+    /**
+     *  function handler that would be called anytime an item is selected/deselected or an item is created/removed
+     */
+    onSelection?: (params: SelectedParamsType<T>) => void;
+    /**
+     * Props to spread to `Popover`. Note that `content` cannot be changed.
+     */
+    popoverProps?: MultiSelectProps<T>["popoverProps"];
+    /**
+     * Props to spread to `TagInput`. Use `query` and `onQueryChange` to control the input.
+     */
+    tagInputProps?: MultiSelectProps<T>["tagInputProps"];
+    /** Additional properties for the (query) input field of the multi-selection. */
+    inputProps?: HTMLInputProps;
+    /**
+     * prop to listen for query changes, when text is entered in the multi-select input
+     */
+    runOnQueryChange?: (query: string) => Promise<T[] | undefined>;
+    /**
+     * Whether the component should take up the full width of its container.
+     * This overrides `popoverProps.fill` and `tagInputProps.fill`.
+     */
+    fullWidth?: boolean;
+    /**
+     * text content to render when filtering items returns zero results.
+     * If omitted, "No results." will be rendered in this case.
+     */
+    noResultText?: string;
+    /**
+     * text content to render when a new item non-existing in filtered items is about to be created .
+     * If omitted, "No results." will be rendered in this case.
+     */
+    newItemCreationText?: string;
+    /**
+     * Allows to creates new item from a given query. If this is not provided then no new items can be created.
+     */
+    createNewItemFromQuery?: (query: string) => T;
+    /**
+     * Items that were newly created and not taken from the list will be post-fixed with this string.
+     */
+    newItemPostfix?: string;
+    /**
+     * The input element is displayed with primary color scheme.
+     */
+    hasStatePrimary?: boolean;
+    /**
+     * The input element is displayed with success (some type of green) color scheme.
+     */
+    hasStateSuccess?: boolean;
+    /**
+     * The input element is displayed with success (some type of orange) color scheme.
+     */
+    hasStateWarning?: boolean;
+    /**
+     * The input element is displayed with success (some type of red) color scheme.
+     */
+    hasStateDanger?: boolean;
+    /**
+     * Disables the input element
+     */
+    disabled?: boolean;
+}
+declare function MultiSelect<T>({ items, prePopulateWithItems, itemId, itemLabel, onSelection, popoverProps, tagInputProps, inputProps, runOnQueryChange, fullWidth, noResultText, newItemCreationText, newItemPostfix, hasStatePrimary, hasStateDanger, hasStateSuccess, hasStateWarning, disabled, createNewItemFromQuery, ...otherProps }: IProps<T>): JSX.Element;
+export default MultiSelect;

package/dist/types/components/Notification/Notification.d.ts

@@ -1,3 +1,56 @@
-/// <reference types="react" />
-declare function Notification({ actions, children, className, message, success, warning, danger, neutral, fullWidth, iconName, timeout, ...otherProps }: any): JSX.Element;
+import React from "react";
+import { ToastProps as BlueprintToastProps } from "@blueprintjs/core";
+import { ValidIconName } from "./../Icon/canonicalIconNames";
+export interface NotificationProps extends Omit<BlueprintToastProps, "message" | "action" | "icon" | "intent">, React.HTMLAttributes<HTMLDivElement> {
+    /**
+     * Extra user action elements
+     */
+    actions?: JSX.Element | JSX.Element[];
+    /**
+     * Notification message that can be used as alternative to children elements.
+     */
+    message?: JSX.Element | string;
+    /**
+     * Notification has a neutral color scheme.
+     */
+    neutral?: boolean;
+    /**
+     * Notification is a success info.
+     * This defines the colorization and the icon symbol.
+     */
+    success?: boolean;
+    /**
+     * Notification is a warning alert.
+     * This defines the colorization and the icon symbol.
+     */
+    warning?: boolean;
+    /**
+     * Notification is a danger alert.
+     * This defines the colorization and the icon symbol.
+     */
+    danger?: boolean;
+    /**
+     * Notification uses the the given space more flexible.
+     * Depracation notice: Property name will removed in futire versions.
+     * Please use `flexWidth`.
+     * @depracted
+     */
+    fullWidth?: boolean;
+    /**
+     * Notification uses the the given space more flexible.
+     * Default notifcation is displayed in min and max limits.
+     * Those limits are removed by setting this property to `true`.
+     */
+    flexWidth?: boolean;
+    /**
+     * Icon used as depiction that is displayed with the notification.
+     */
+    iconName?: ValidIconName;
+}
+/**
+ * Displays a notification message, optionally combined with depiction and further action buttons.
+ * By default it uses colorization of an blueish info alert.
+ */
+declare function Notification({ actions, children, className, message, success, warning, danger, neutral, fullWidth, // deprecated
+flexWidth, iconName, timeout, ...otherProps }: NotificationProps): JSX.Element;
 export default Notification;

package/dist/types/components/OverviewItem/OverviewItemList.d.ts

@@ -16,7 +16,7 @@ export interface OverviewItemListProps extends React.HTMLAttributes<HTMLOListEle
      * Use multiple columns.
      * Currently only lists using 1 and 2 columns are supported.
      */
-    columns?: number;
+    columns?: 1 | 2;
 }
 /**
  * This element can include all basic information and actions to give an overview about the item.

package/dist/types/components/Spinner/Spinner.d.ts

@@ -14,6 +14,6 @@ export interface SpinnerProps extends Partial<BlueprintOverlayProps & Omit<Bluep
     stroke?: SpinnerStroke;
     delay?: number;
 }
-declare function Spinner({ className, color, description, // currently unsupported (TODO)
+declare function Spinner({ className, color, description, // currently unsupported (FIXME)
 position, size, stroke, delay, ...otherProps }: SpinnerProps): JSX.Element | null;
 export default Spinner;