@eccenca/gui-elements 23.0.0 → 23.1.0-easynav.0

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

@@ -0,0 +1,71 @@
+import React from "react";
+import Color from "color";
+import { BadgeProps } from "../Badge/Badge";
+import { IconProps } from "../Icon/Icon";
+import { TestIconProps } from "../Icon/TestIcon";
+import { TooltipProps } from "../Tooltip/Tooltip";
+export interface DepictionProps extends React.HTMLAttributes<HTMLElement> {
+    /**
+     * Image that should be used as depiction.
+     */
+    image: React.ReactElement<IconProps | TestIconProps | React.ImgHTMLAttributes<HTMLImageElement> | React.SVGProps<SVGSVGElement>>;
+    /**
+     * In case you use an SVG encoded as a data URL in the `<img />` element, then it is transformed to a inline SVG inside the DOM tree.
+     * Should be work with Base64 and URL encoded data URIs.
+     */
+    forceInlineSvg?: boolean;
+    /**
+     * Sets the height of the depiction, not the dimension (width x height).
+     */
+    size?: "tiny" | "small" | "medium" | "large" | "xlarge" | "source";
+    /**
+     * Resizing strategy for image to match the given ratio.
+     * * contain: image is fully visible in the depiction
+     * * cover: the image fully covers the depition area but it may displayed only partially
+     * * stretch: image is streched to fill the depiction area
+     */
+    resizing?: "contain" | "cover" | "stretch";
+    /**
+     * Aspect ration of the depiction.
+     */
+    ratio?: "1:1" | "source";
+    /**
+     * Use a fully rounded shape on the depiction edges.
+     * Combined with `ratio="1:1"` its displayed within a circular shape.
+     */
+    rounded?: boolean;
+    /**
+     * Color that is used for the depiction background.
+     * This may be important if you use PNG, SVG or other image types that can have transparent background areas.
+     */
+    backgroundColor?: Color | string | "light" | "dark";
+    /**
+     * The depiction is displayed with a border around it.
+     */
+    border?: boolean;
+    /**
+     * Add padding around the image inside the depiction.
+     * The amount of padding is defined relative to the depiction size, so a small padding on a small depiction is displayed smaller than a small padding on a large depiction.
+     */
+    padding?: "none" | "tiny" | "small" | "medium" | "large";
+    /**
+     * Description of the depiction.
+     */
+    caption?: string | JSX.Element;
+    /**
+     * How is the caption displayed.
+     */
+    captionPosition?: "none" | "tooltip";
+    /**
+     * In case of `captionPosition="tooltip"` this can be used to set the properties of the Tooltip element.
+     */
+    tooltipProps?: TooltipProps;
+    /**
+     * Attach a `<Badge />` element to the depiction.
+     */
+    badge?: React.ReactElement<BadgeProps>;
+}
+/**
+ * Display a graphical representation and attache a caption or a badge to it.
+ */
+export declare function Depiction({ className, image, forceInlineSvg, size, resizing, ratio, caption, captionPosition, backgroundColor, border, rounded, padding, badge, tooltipProps, ...otherFigureProps }: DepictionProps): JSX.Element;

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

@@ -1,8 +1,27 @@
 /// <reference types="react" />
-import { GridDefaultProps } from "carbon-components-react/lib/components/Grid/Grid";
-interface GridProps extends GridDefaultProps {
+import { GridDefaultProps } from "carbon-components-react";
+interface GridProps extends Omit<GridDefaultProps, "fullWidth" | "columns" | "narrow"> {
+    /**
+     * The available grid height can be distributed between multiple rows.
+     * To do so the `verticalStretched` property must be set for the `<GridRow />` element that need to be stretched.
+     * This property can be set for multiple rows, then they share the available vertical space regarding their content.
+     */
     verticalStretchable?: boolean;
+    /**
+     * Use the exact space defined by the parent element.
+     * This parent element must be displayed using a fixed, relative or absolute position.
+     */
     useAbsoluteSpace?: boolean;
+    /**
+     * @deprecated
+     * This is set always by default.
+     */
+    fullWidth?: boolean;
 }
+/**
+ * Layouts a grid that can contain rows and columns.
+ * Grids can also be stacked into other grids for more complex layouts.
+ * A very complex level of stacked grids is a sign that something should be designed differently.
+ */
 declare function Grid({ children, verticalStretchable, useAbsoluteSpace, className, ...restProps }: GridProps): JSX.Element;
 export default Grid;

package/dist/types/components/Grid/GridColumn.d.ts

@@ -1,10 +1,28 @@
 /// <reference types="react" />
-import { ColumnDefaultProps } from "carbon-components-react/lib/components/Grid/Column";
-interface GridColumnProps extends ColumnDefaultProps {
+import { ColumnDefaultProps } from "carbon-components-react";
+interface GridColumnProps extends Omit<ColumnDefaultProps, "max" | "xlg" | "lg" | "md" | "sm"> {
+    /**
+     * Column width is small, using 3 (or 2, on medium viewports) parts out of 16.
+     * This boolean property is basically a quick switch for setting `{ md:2, lg:3 }`.
+     */
     small?: boolean;
+    /**
+     * Column width is medium, using 5 (or 3, on medium viewports) parts out of 16.
+     * This boolean property is basically a quick switch for setting `{ md:3, lg:5 }`.
+     */
     medium?: boolean;
+    /**
+     * Alignment of column content.
+     */
+    verticalAlign?: "top" | "center";
+    /**
+     * @deprecated
+     */
     full?: boolean;
-    verticalAlign?: "center";
 }
+/**
+ * Grid columns can be used in grid rows.
+ * They can contain other grids if this is necessary for more complex layouts.
+ */
 declare function GridColumn({ children, className, small, medium, full, verticalAlign, ...otherProps }: GridColumnProps): JSX.Element;
 export default GridColumn;

package/dist/types/components/Grid/GridRow.d.ts

@@ -1,9 +1,25 @@
 /// <reference types="react" />
-import { RowDefaultProps } from "carbon-components-react/lib/components/Grid/Row";
-interface GridRowProps extends RowDefaultProps {
+import { RowDefaultProps } from "carbon-components-react";
+interface GridRowProps extends Omit<RowDefaultProps, "narrow"> {
+    /**
+     * Do not wrap column children when there is not enough space available.
+     * This only works for grids on medium sized and larger viewports.
+     */
     dontWrapColumns?: boolean;
+    /**
+     * Row uses maximum height of the workview.
+     */
     fullHeight?: boolean;
+    /**
+     * When a row is vertically stretched then it uses the remaining spcae on the y-axis.
+     * Option can be used on multiple rows, then they share the available space.
+     * This makes only sense if the grid height is set by additional styles or properties.
+     * The grid must be set to `verticalStretchable=true`.
+     */
     verticalStretched?: boolean;
 }
+/**
+ * Grid rows exists as children in a grid and can contain columns.
+ */
 declare function GridRow({ children, className, dontWrapColumns, fullHeight, verticalStretched, ...otherProps }: GridRowProps): JSX.Element;
 export default GridRow;

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

@@ -0,0 +1,45 @@
+/// <reference types="react" />
+import { IconProps as CarbonIconProps } from "carbon-components-react";
+import { IntentTypes } from "../../common/Intent";
+import { TooltipProps } from "./../Tooltip/Tooltip";
+import { CarbonIconType } from "./canonicalIconNames";
+export interface BaseIconProps extends Omit<CarbonIconProps, "icon" | "description" | "name"> {
+    /**
+     * Carbon icon component that is used.
+     */
+    iconComponent: CarbonIconType;
+    /**
+     * Add tooltip text to icon
+     */
+    tooltipText?: string;
+    /**
+     * Intent state of icon.
+     * Currently only `success`, `info`, `warning` and `danger` are implemented for icons, even there are more states available.
+     */
+    intent?: IntentTypes;
+    /**
+     * Display large icon version.
+     */
+    large?: boolean;
+    /**
+     * Display small icon version.
+     */
+    small?: boolean;
+    /**
+     * Additional CSS classes.
+     */
+    className?: string;
+    /**
+     * Description for icon as accessibility fallback.
+     */
+    description?: string;
+    /**
+     * Additonal tooltip properties, e.g. `hoverOpenDelay`.
+     */
+    tooltipProps?: Partial<Omit<TooltipProps, "content" | "children">>;
+}
+/**
+ * The base icon provides the basic functionality that is necessary to wrap the Carbon icon component.
+ */
+declare function BaseIcon({ iconComponent, className, large, small, tooltipText, tooltipProps, intent, description, ...restProps }: BaseIconProps): JSX.Element;
+export default BaseIcon;

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

@@ -1,45 +1,18 @@
 /// <reference types="react" />
-import { IconProps as CarbonIconProps } from "carbon-components-react";
-import { IntentTypes } from "../../common/Intent";
-import { TooltipProps } from "./../Tooltip/Tooltip";
+import { BaseIconProps } from "./BaseIcon";
 import { ValidIconName } from "./canonicalIconNames";
-export interface IconProps extends Omit<CarbonIconProps, "icon" | "description" | "name"> {
+export interface IconProps extends Omit<BaseIconProps, "iconComponent"> {
     /**
      * Canonical icon name, or an array of strings.
      * In case of the array the first valid icon name is used.
      */
     name: ValidIconName | string[];
-    /**
-     * Add tooltip text to icon
-     */
-    tooltipText?: string;
-    /**
-     * Intent state of icon.
-     * Currently only `success`, `info`, `warning` and `danger` are implemented for icons, even there are more states available.
-     */
-    intent?: IntentTypes;
-    /**
-     * Display large icon version.
-     */
-    large?: boolean;
-    /**
-     * Display small icon version.
-     */
-    small?: boolean;
-    /**
-     * Additional CSS classes.
-     */
-    className?: string;
-    /**
-     * Description for icon as accessibility fallback.
-     */
-    description?: string;
-    /**
-     * Additonal tooltip properties, e.g. `hoverOpenDelay`.
-     */
-    tooltipProps?: Partial<Omit<TooltipProps, "content" | "children">>;
 }
 /** Returns the first icon name that exists or the fallback icon name. */
 export declare const findExistingIconName: (iconNames: string[], fallbackIconName?: ValidIconName) => ValidIconName;
-declare function Icon({ className, name, large, small, tooltipText, tooltipProps, intent, ...restProps }: IconProps): JSX.Element;
+/**
+ * The icon provides a graphical symbol that is specified by a canonical name.
+ * This name is hard-coded to force a homegenous usage of the [Carbon icon library](https://carbondesignsystem.com/guidelines/icons/library).
+ */
+declare function Icon({ name, ...otherBaseIconProps }: IconProps): JSX.Element;
 export default Icon;

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

@@ -1,12 +1,13 @@
-/// <reference types="react" />
+import React from "react";
 import { ButtonProps, AnchorOrButtonProps } from "../Button/Button";
+import { TestIconProps } from "./TestIcon";
 import { ValidIconName } from "./canonicalIconNames";
 interface IconButtonProps extends Omit<ButtonProps, "icon" | "rightIcon" | "text" | "minimal" | "tooltip"> {
     /**
      * Canonical icon name, or an array of strings.
      * In case of the array the first valid icon name is used.
      */
-    name: ValidIconName | string[];
+    name: ValidIconName | string[] | React.ReactElement<TestIconProps>;
     /**
      * Button text, will be displayed as tooltip.
      */

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

@@ -0,0 +1,20 @@
+/// <reference types="react" />
+import { BaseIconProps } from "./BaseIcon";
+import { CarbonIconType } from "./canonicalIconNames";
+export interface TestIconProps extends Omit<BaseIconProps, "iconComponent"> {
+    /**
+     * Carbon icon that is used instead of the via `name` defined canonical named icon.
+     */
+    tryout: CarbonIconType;
+}
+/**
+ * This component is primarily provided to test icons in a third application without defining them via a canonical name before.
+ *
+ * Example usage:
+ * ```
+ * import { LogoReact } from "@carbon/icons-react";
+ * const testIcon = <TestIcon tryout={LogoReact} />
+ * ```
+ */
+declare function TestIcon({ className, tryout, ...otherBaseIconProps }: TestIconProps): JSX.Element;
+export default TestIcon;

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

@@ -1,10 +1,12 @@
 /// <reference types="react" />
+import { IconProps as CarbonIconProps } from "carbon-components-react";
 /** Valid icon names. */
-export declare type ValidIconName = "application-activities" | "application-dataintegration" | "application-explore" | "application-homepage" | "application-legacygui" | "application-mapping" | "application-queries" | "application-useraccount" | "application-vocabularies" | "application-warning" | "artefact-commit" | "artefact-customtask" | "artefact-dataset" | "artefact-dataset-csv" | "artefact-dataset-eccencadataplatform" | "artefact-dataset-excel" | "artefact-dataset-file" | "artefact-dataset-jdbc" | "artefact-dataset-json" | "artefact-dataset-multicsv" | "artefact-dataset-neo4j" | "artefact-dataset-sparkview" | "artefact-dataset-sparqlendpoint" | "artefact-dataset-sqlendpoint" | "artefact-dataset-xml" | "artefact-deprecated" | "artefact-embedded" | "artefact-errorlog" | "artefact-file" | "artefact-linking" | "artefact-project" | "artefact-rawdata" | "artefact-remote" | "artefact-report" | "artefact-task" | "artefact-transform" | "artefact-uncategorized" | "artefact-workflow" | "data-sourcepath" | "data-targetpath" | "item-add-artefact" | "item-clone" | "item-comment" | "item-copy" | "item-download" | "item-draggable" | "item-edit" | "item-evaluation" | "item-execution" | "item-info" | "item-launch" | "item-moremenu" | "item-question" | "item-reload" | "item-remove" | "item-reset" | "item-save" | "item-settings" | "item-shuffle" | "item-start" | "item-stop" | "item-upload" | "item-vertmenu" | "item-viewdetails" | "list-sort" | "list-sortasc" | "list-sortdesc" | "module-accesscontrol" | "module-annotation" | "module-dashboard" | "module-gdprsearch" | "module-integrations" | "module-linkedrules" | "module-reports" | "module-search" | "module-thesauri" | "module-timetracker" | "module-visualization" | "navigation-back" | "navigation-close" | "navigation-first" | "navigation-forth" | "navigation-jump" | "navigation-last" | "navigation-next" | "navigation-previous" | "operation-aggregation" | "operation-autolayout" | "operation-clear" | "operation-commit" | "operation-comparison" | "operation-filter" | "operation-filteredit" | "operation-link" | "operation-logout" | "operation-redo" | "operation-search" | "operation-sharelink" | "operation-transform" | "operation-undo" | "operation-unlink" | "state-checked" | "state-checkedsimple" | "state-confirmed" | "state-danger" | "state-declined" | "state-info" | "state-partlychecked" | "state-protected" | "state-success" | "state-unchecked" | "state-warning" | "toggler-caret" | "toggler-maximize" | "toggler-minimize" | "toggler-moveleft" | "toggler-moveright" | "toggler-showless" | "toggler-showmore" | "toggler-star-empty" | "toggler-star-filled" | "toggler-tree" | "undefined" | "Undefined";
-export interface IconSized {
-    small: (props: any) => JSX.Element | null;
-    normal: (props: any) => JSX.Element | null;
-    large: (props: any) => JSX.Element | null;
-}
-declare const canonicalIconNames: Record<ValidIconName, IconSized>;
+export declare type ValidIconName = "application-activities" | "application-dataintegration" | "application-explore" | "application-homepage" | "application-legacygui" | "application-mapping" | "application-queries" | "application-useraccount" | "application-vocabularies" | "application-warning" | "artefact-commit" | "artefact-customtask" | "artefact-dataset" | "artefact-dataset-csv" | "artefact-dataset-eccencadataplatform" | "artefact-dataset-excel" | "artefact-dataset-file" | "artefact-dataset-jdbc" | "artefact-dataset-json" | "artefact-dataset-multicsv" | "artefact-dataset-neo4j" | "artefact-dataset-sparkview" | "artefact-dataset-sparqlendpoint" | "artefact-dataset-sqlendpoint" | "artefact-dataset-xml" | "artefact-deprecated" | "artefact-embedded" | "artefact-errorlog" | "artefact-file" | "artefact-linking" | "artefact-project" | "artefact-rawdata" | "artefact-remote" | "artefact-report" | "artefact-task" | "artefact-transform" | "artefact-uncategorized" | "artefact-workflow" | "data-sourcepath" | "data-targetpath" | "item-add-artefact" | "item-clone" | "item-comment" | "item-copy" | "item-download" | "item-draggable" | "item-edit" | "item-evaluation" | "item-execution" | "item-info" | "item-launch" | "item-moremenu" | "item-question" | "item-reload" | "item-remove" | "item-reset" | "item-save" | "item-settings" | "item-shuffle" | "item-start" | "item-stop" | "item-upload" | "item-vertmenu" | "item-viewdetails" | "list-sort" | "list-sortasc" | "list-sortdesc" | "module-accesscontrol" | "module-annotation" | "module-dashboard" | "module-gdprsearch" | "module-integrations" | "module-linkedrules" | "module-reports" | "module-search" | "module-thesauri" | "module-timetracker" | "module-visualization" | "navigation-back" | "navigation-close" | "navigation-first" | "navigation-forth" | "navigation-jump" | "navigation-last" | "navigation-next" | "navigation-previous" | "operation-aggregation" | "operation-autolayout" | "operation-clear" | "operation-commit" | "operation-comparison" | "operation-filter" | "operation-filteredit" | "operation-link" | "operation-logout" | "operation-redo" | "operation-search" | "operation-sharelink" | "operation-transform" | "operation-undo" | "operation-unlink" | "state-checked" | "state-checkedsimple" | "state-confirmed" | "state-danger" | "state-declined" | "state-info" | "state-partlychecked" | "state-protected" | "state-success" | "state-unchecked" | "state-warning" | "toggler-caret" | "toggler-maximize" | "toggler-minimize" | "toggler-moveleft" | "toggler-moveright" | "toggler-showless" | "toggler-showmore" | "toggler-star-empty" | "toggler-star-filled" | "toggler-tree" | "undefined";
+export declare type CarbonIconType = React.ComponentType<CarbonIconProps>;
+/**
+ * @deprecated
+ * use CarbonIconType instead
+ */
+export declare type IconSized = CarbonIconType;
+declare const canonicalIconNames: Record<ValidIconName, CarbonIconType>;
 export default canonicalIconNames;

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

@@ -0,0 +1,4 @@
+import Icon, { IconProps } from "./Icon";
+import TestIcon, { TestIconProps } from "./TestIcon";
+export { Icon, TestIcon };
+export type { IconProps, TestIconProps };

package/dist/types/components/Menu/MenuItem.d.ts

@@ -1,8 +1,9 @@
 import React from 'react';
 import { MenuItemProps as BlueprintMenuItemProps } from "@blueprintjs/core";
+import { TestIconProps } from "./../Icon/TestIcon";
 import { ValidIconName } from "../Icon/canonicalIconNames";
 export interface MenuItemProps extends Omit<BlueprintMenuItemProps, "icon" | "children">, Omit<React.AnchorHTMLAttributes<HTMLAnchorElement>, "onClick" | "target" | "children"> {
-    icon?: ValidIconName | string[];
+    icon?: ValidIconName | string[] | React.ReactElement<TestIconProps>;
     children?: React.ReactNode;
 }
 /**

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

@@ -82,8 +82,10 @@ interface IProps<T> extends Pick<BlueprintMultiSelectProps<T>, "items" | "placeh
      * Disables the input element
      */
     disabled?: boolean;
+    /** Delay in ms how long the request for the given query should be delayed. */
+    requestDelay?: number;
 }
-declare function MultiSelect<T>({ items, prePopulateWithItems, itemId, itemLabel, onSelection, contextOverlayProps, tagInputProps, inputProps, runOnQueryChange, fullWidth, noResultText, newItemCreationText, newItemPostfix, hasStatePrimary, hasStateDanger, hasStateSuccess, hasStateWarning, disabled, createNewItemFromQuery, ...otherProps }: IProps<T>): JSX.Element;
+declare function MultiSelect<T>({ items, prePopulateWithItems, itemId, itemLabel, onSelection, contextOverlayProps, tagInputProps, inputProps, runOnQueryChange, fullWidth, noResultText, newItemCreationText, newItemPostfix, hasStatePrimary, hasStateDanger, hasStateSuccess, hasStateWarning, disabled, createNewItemFromQuery, requestDelay, ...otherProps }: IProps<T>): JSX.Element;
 declare namespace MultiSelect {
     var ofType: typeof BlueprintMultiSelect.ofType;
 }

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

@@ -1,5 +1,7 @@
 import React from "react";
 import { ToastProps as BlueprintToastProps } from "@blueprintjs/core";
+import { IconProps } from "./../Icon/Icon";
+import { TestIconProps } from "./../Icon/TestIcon";
 import { ValidIconName } from "./../Icon/canonicalIconNames";
 export interface NotificationProps extends Omit<BlueprintToastProps, "message" | "action" | "icon" | "intent">, React.HTMLAttributes<HTMLDivElement> {
     /**
@@ -30,19 +32,25 @@ export interface NotificationProps extends Omit<BlueprintToastProps, "message" |
      */
     danger?: boolean;
     /**
+     * @deprecated
      * Notification uses the the given space more flexible.
-     * Depracation notice: Property name will removed in futire versions.
+     * Deprecation notice: Property name will removed in future versions.
      * Please use `flexWidth`.
-     * @depracted
      */
     fullWidth?: boolean;
     /**
      * Notification uses the the given space more flexible.
-     * Default notifcation is displayed in min and max limits.
+     * Default notification is displayed in min and max limits.
      * Those limits are removed by setting this property to `true`.
      */
     flexWidth?: boolean;
     /**
+     * Icon displayed with the notification.
+     * Set it to false if you need to prevent automatically set icon regarding the notification type.
+     */
+    icon?: false | React.ReactElement<IconProps> | React.ReactElement<TestIconProps>;
+    /**
+     * @deprecated
      * Icon used as depiction that is displayed with the notification.
      */
     iconName?: ValidIconName | null;
@@ -52,5 +60,6 @@ export interface NotificationProps extends Omit<BlueprintToastProps, "message" |
  * 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;
+flexWidth, iconName, // deprecated
+icon, timeout, ...otherProps }: NotificationProps): JSX.Element;
 export default Notification;

package/dist/types/components/Tabs/Tab.d.ts

@@ -40,6 +40,7 @@ export declare const transformTabProperties: ({ title, dontShrink, className, ba
     hidden?: boolean | undefined;
     id: import("@blueprintjs/core").TabId;
     lang?: string | undefined;
+    nonce?: string | undefined;
     placeholder?: string | undefined;
     slot?: string | undefined;
     spellCheck?: (boolean | "true" | "false") | undefined;
@@ -300,6 +301,7 @@ export declare const transformTabProperties: ({ title, dontShrink, className, ba
     hidden?: boolean | undefined;
     id: import("@blueprintjs/core").TabId;
     lang?: string | undefined;
+    nonce?: string | undefined;
     placeholder?: string | undefined;
     slot?: string | undefined;
     spellCheck?: (boolean | "true" | "false") | undefined;

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

@@ -1,7 +1,11 @@
-/// <reference types="react" />
+import React from 'react';
 import { TagProps as BlueprintTagProps } from "@blueprintjs/core";
 import Color from "color";
-interface TagProps extends Omit<BlueprintTagProps, "active" | "fill" | "large" | "multiline" | "intent" | "rightIcon"> {
+import { IconProps } from "../Icon/Icon";
+import { TestIconProps } from "../Icon/TestIcon";
+import { ValidIconName } from "../Icon/canonicalIconNames";
+import { IntentTypes } from "../../common/Intent";
+export interface TagProps extends Omit<BlueprintTagProps, "active" | "fill" | "icon" | "intent" | "large" | "multiline" | "rightIcon"> {
     /**
      * Sets the background color of a tag, depends on the `Color` object provided by the
      * [npm color module](https://www.npmjs.com/package/color) v3. You can use it with
@@ -23,9 +27,18 @@ interface TagProps extends Omit<BlueprintTagProps, "active" | "fill" | "large" |
      */
     large?: boolean;
     /**
+     * Meaning of the tag.
+     */
+    intent?: IntentTypes;
+    /**
+     * Icon displayed left from the tag label.
+     */
+    icon?: ValidIconName | React.ReactElement<IconProps> | React.ReactElement<TestIconProps>;
+    /**
+     * @deprecated
      * **deprecated**, use `minimal=false` plus `emphasis="stronger"`
      */
     emphasized?: never;
 }
-declare function Tag({ children, className, emphasis, minimal, small, large, backgroundColor, ...otherProps }: TagProps): JSX.Element;
+declare function Tag({ children, className, intent, icon, emphasis, minimal, small, large, backgroundColor, ...otherProps }: TagProps): JSX.Element;
 export default Tag;

package/dist/types/components/TextField/TextArea.d.ts

@@ -1,6 +1,7 @@
 /// <reference types="react" />
 import { TextAreaProps as BlueprintTextAreaProps } from "@blueprintjs/core";
-interface TextAreaProps extends Partial<BlueprintTextAreaProps> {
+import { InvisibleCharacterWarningProps } from "./useTextValidation";
+export interface TextAreaProps extends Partial<BlueprintTextAreaProps> {
     /**
      * when set to true the input takes a blue border color
      */
@@ -17,6 +18,10 @@ interface TextAreaProps extends Partial<BlueprintTextAreaProps> {
      * when set to true the input takes a red border color
      */
     hasStateDanger?: boolean;
+    /**
+     * If set, allows to be informed of invisible, hard to spot characters in the string value.
+     */
+    invisibleCharacterWarning?: InvisibleCharacterWarningProps;
 }
-declare function TextArea({ className, hasStatePrimary, hasStateSuccess, hasStateWarning, hasStateDanger, rows, ...otherProps }: TextAreaProps): JSX.Element;
+declare function TextArea({ className, hasStatePrimary, hasStateSuccess, hasStateWarning, hasStateDanger, rows, invisibleCharacterWarning, ...otherProps }: TextAreaProps): JSX.Element;
 export default TextArea;

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

@@ -1,6 +1,7 @@
 /// <reference types="react" />
 import { MaybeElement, HTMLInputProps, InputGroupProps } from "@blueprintjs/core";
 import { ValidIconName } from "../Icon/canonicalIconNames";
+import { InvisibleCharacterWarningProps } from "./useTextValidation";
 export interface TextFieldProps extends Partial<Omit<InputGroupProps, "intent" | "leftIcon"> & HTMLInputProps> {
     /**
     * The input element is displayed with primary color scheme.
@@ -26,9 +27,13 @@ export interface TextFieldProps extends Partial<Omit<InputGroupProps, "intent" |
      * Left aligned icon, can be a canonical icon name or an `Icon` element.
      */
     leftIcon?: ValidIconName | MaybeElement;
+    /**
+     * If set, allows to be informed of invisible, hard to spot characters in the string value.
+     */
+    invisibleCharacterWarning?: InvisibleCharacterWarningProps;
 }
 /**
   * Text input field.
   */
-declare function TextField({ className, hasStatePrimary, hasStateSuccess, hasStateWarning, hasStateDanger, fullWidth, leftIcon, ...otherProps }: TextFieldProps): JSX.Element;
+declare function TextField({ className, hasStatePrimary, hasStateSuccess, hasStateWarning, hasStateDanger, fullWidth, leftIcon, invisibleCharacterWarning, ...otherProps }: TextFieldProps): JSX.Element;
 export default TextField;

package/dist/types/components/TextField/useTextValidation.d.ts

@@ -0,0 +1,28 @@
+import React, { ChangeEventHandler } from "react";
+export interface InvisibleCharacterWarningProps {
+    /**
+     * If set, the function is called after every value change what invisible characters have been detected.
+     */
+    callback: (detectedCodePoints: Set<number>) => any;
+    /**
+     * The delay in milliseconds after which an input string should be checked. Only the most recent value will be checked.
+     * A higher value will reduce the probability that the typing stalls.
+     *
+     * Default: 500
+     */
+    callbackDelay?: number;
+}
+interface Props<T = Element> {
+    /** Forwarded TextField props */
+    value?: string | ReadonlyArray<string> | number | undefined;
+    readOnly?: boolean | undefined;
+    disabled?: boolean | undefined;
+    onChange?: ChangeEventHandler<T>;
+    /**
+     * If set, allows to be informed of invisible, hard to spot characters in the string value.
+     */
+    invisibleCharacterWarning?: InvisibleCharacterWarningProps;
+}
+/** Validates the string value for invisible characters. */
+export declare const useTextValidation: <T>({ value, onChange, invisibleCharacterWarning }: Props<T>) => React.ChangeEventHandler<T> | undefined;
+export {};

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

@@ -1,6 +1,7 @@
 import * as React from "react";
 import { Tree as BlueprintTree, TreeProps as BlueprintTreeProps, TreeNode as BlueprintTreeNode, TreeNodeInfo as BlueprintTreeNodeInfo } from "@blueprintjs/core";
 import { IconProps } from "./../Icon/Icon";
+import { TestIconProps } from "./../Icon/TestIcon";
 export interface TreeNodeInfo<T = {}> extends Omit<BlueprintTreeNodeInfo<T>, "childNodes" | "icon"> {
     /**
      * Child tree nodes of this node.
@@ -9,7 +10,7 @@ export interface TreeNodeInfo<T = {}> extends Omit<BlueprintTreeNodeInfo<T>, "ch
     /**
      * `<Icon />` element to render next to the node's label.
      */
-    icon?: React.ReactElement<IconProps>;
+    icon?: React.ReactElement<IconProps> | React.ReactElement<TestIconProps>;
 }
 export interface TreeNodeProps<T = {}> extends TreeNodeInfo<T> {
     children?: React.ReactNode;

package/dist/types/components/Typography/Highlighter.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-interface IHighlighterProps {
+export interface HighlighterProps {
     label?: string;
     searchValue?: string;
 }
@@ -8,7 +8,7 @@ interface IHighlighterProps {
  * @param label       The string to highlight.
  * @param searchValue The mutli-word search query from which single words should be highlighted in the label.
  */
-declare function Highlighter({ label, searchValue }: IHighlighterProps): JSX.Element;
+declare function Highlighter({ label, searchValue }: HighlighterProps): JSX.Element;
 /** Extracts search words separated by white space. */
 export declare function extractSearchWords(textQuery: string, toLowerCase?: boolean): string[];
 /** Returns true if all search words are included in the given text */

package/dist/types/components/Typography/OverflowText.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-interface IProps {
+export interface OverflowTextProps {
     ellipsis?: "reverse" | "none";
     inline?: boolean;
     passDown?: boolean;
@@ -8,5 +8,5 @@ interface IProps {
     [key: string]: any;
 }
 /** Prevents text from overflowing. */
-declare function OverflowText({ className, children, ellipsis, inline, passDown, useHtmlElement, ...otherProps }: IProps): JSX.Element;
+declare function OverflowText({ className, children, ellipsis, inline, passDown, useHtmlElement, ...otherProps }: OverflowTextProps): JSX.Element;
 export default OverflowText;

package/dist/types/components/Typography/WhiteSpaceContainer.d.ts

@@ -1,5 +1,46 @@
-/// <reference types="react" />
-declare function WhiteSpaceContainer({ className, children, marginTop, // tiny, small, regular, large, xlarge
-marginRight, marginBottom, marginLeft, paddingTop, // tiny, small, regular, large, xlarge
-paddingRight, paddingBottom, paddingLeft, ...otherProps }: any): JSX.Element;
+import React from "react";
+declare type WhiteSpaceSizes = "tiny" | "small" | "regular" | "large" | "xlarge";
+export interface WhiteSpaceContainerProps extends React.HTMLAttributes<HTMLDivElement> {
+    /**
+     * Insert line breaks within an otherwise unbreakable string to prevent text from overflowing the container.
+     */
+    linebreakForced?: boolean;
+    /**
+     * Size of top margin around the container.
+     */
+    marginTop?: WhiteSpaceSizes;
+    /**
+     * Size of right margin around the container.
+     */
+    marginRight?: WhiteSpaceSizes;
+    /**
+     * Size of bottom margin around the container.
+     */
+    marginBottom?: WhiteSpaceSizes;
+    /**
+     * Size of left margin around the container.
+     */
+    marginLeft?: WhiteSpaceSizes;
+    /**
+     * Size of top padding inside the container.
+     */
+    paddingTop?: WhiteSpaceSizes;
+    /**
+     * Size of right padding inside the container.
+     */
+    paddingRight?: WhiteSpaceSizes;
+    /**
+     * Size of bottom padding inside the container.
+     */
+    paddingBottom?: WhiteSpaceSizes;
+    /**
+     * Size of left padding inside the container.
+     */
+    paddingLeft?: WhiteSpaceSizes;
+}
+/**
+ * Simple container to add whitespace inside and around of it without adding style attributes directly.
+ * This way the added whitespace keeps visually connected to the other whitespaces used in the application.
+ */
+declare function WhiteSpaceContainer({ className, children, marginTop, marginRight, marginBottom, marginLeft, paddingTop, paddingRight, paddingBottom, paddingLeft, linebreakForced, ...otherDivProps }: WhiteSpaceContainerProps): JSX.Element;
 export default WhiteSpaceContainer;