@eccenca/gui-elements 23.0.0-rc.3-unofficial.0 → 23.0.0-rc.3

package/CHANGELOG.md

@@ -16,6 +16,7 @@ The format is based on [Keep a Changelog](http://keepachangelog.com/) and this p
 * `EdgeDefault.data.renderLabel` function allows to render fully custom edge label including any ReactNode
 * `StickyNoteNode`, usable by `stickynote` type in react flow editors for workflows and linking rules
 * add option for `footerContent` to react flow node data
+* `<BreadcrumbList />`: new properties `ignoreOverflow` and `latenOverflow`, that can be used to implement a second overflow strategy beside BlueprintJS overflow list, for example in case the overflow list leads to re-rendering loops
 
 ### Fixed
 
@@ -29,7 +30,7 @@ The format is based on [Keep a Changelog](http://keepachangelog.com/) and this p
 * move style imports of CodeMirror layout to `extensions`
 * color configurations for react flow editor are not exported as modules anymore, they need to be fetched by `getColorConfiguration` method in JS directly
 * BlueprintJS was upgraded to a recent v4
-    * elements were also upgraded to usage of `Popover2`, `Tooltip2`, `Select2` and `MultiSelect2`
+    * elements were also upgraded to usage of `Popover2`, `Tooltip2`, `Select2`, `MultiSelect2` and `Breadcrumbs2`
     * this comes also with a necessary switch from `node-sass` to `sass` package, a javascript port from the original dart sass library, see migration notes to update your build process
 
 ### Migration notes
@@ -46,6 +47,8 @@ The format is based on [Keep a Changelog](http://keepachangelog.com/) and this p
 * `<MultiSelect>`: `popoverProps` was renamed to `contextOverlayProps`
 * `<Select>`: `popoverProps` was renamed to `contextOverlayProps`
 * `<Tooltip>`: this element now extends directly the Blueprint element, so `tolltipProps` was removed, use properties directly on `Tooltip`
+* `<BreadcrumbItem>`: `IBreadcrumbItemProps` interface was renamed to `BreadcrumbItemProps`
+* `BreadcrumbList`: `IBreadcrumbListProps` interface was renamed to `BreadcrumbListProps`
 
 #### Switch from `node-sass` to `sass`
 

package/dist/cjs/components/Breadcrumb/BreadcrumbItem.js

@@ -19,10 +19,11 @@ const react_1 = __importDefault(require("react"));
 const core_1 = require("@blueprintjs/core");
 const constants_1 = require("../../configuration/constants");
 const openInNewTab_1 = require("../../common/utils/openInNewTab");
+/**
+ * Item of the breadcrumbs list.
+ * It cannot be used directly but the properties can be used within the elements of the `BreadcrumbList.items` property.
+ */
 function BreadcrumbItem(_a) {
-    var { className = "", onClick, href } = _a, 
-    //itemDivider='',
-    otherBlueprintBreadcrumbProps = __rest(_a, ["className", "onClick", "href"]);
     /*
         FIXME: adding `data-divider` does not work this way because BlueprintJS
         breadcrumb component does not support (and forward) it on HTML element
@@ -30,7 +31,15 @@ function BreadcrumbItem(_a) {
         CSS/Sass as content for the pseudo element, currently done static in CSS
         with slash char.
     */
-    return (react_1.default.createElement(core_1.Breadcrumb, Object.assign({}, otherBlueprintBreadcrumbProps, { href: href, onClick: (e) => (0, openInNewTab_1.openInNewTab)(e, onClick, href), className: `${constants_1.CLASSPREFIX}-breadcrumb__item ` + className })));
+    var { className = "", onClick, href } = _a, 
+    //itemDivider='',
+    otherBlueprintBreadcrumbProps = __rest(_a, ["className", "onClick", "href"]);
+    const allowActions = !otherBlueprintBreadcrumbProps.current && !otherBlueprintBreadcrumbProps.disabled;
+    const actions = allowActions ? {
+        href,
+        onClick: (e) => (0, openInNewTab_1.openInNewTab)(e, onClick, href),
+    } : {};
+    return (react_1.default.createElement(core_1.Breadcrumb, Object.assign({}, otherBlueprintBreadcrumbProps, actions, { className: `${constants_1.CLASSPREFIX}-breadcrumb__item ` + className })));
 }
 exports.default = BreadcrumbItem;
 //# sourceMappingURL=BreadcrumbItem.js.map

package/dist/cjs/components/Breadcrumb/BreadcrumbItem.js.map

@@ -1 +1 @@
-{"version":3,"file":"BreadcrumbItem.js","sourceRoot":"","sources":["../../../../src/components/Breadcrumb/BreadcrumbItem.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;AAAA,kDAA0B;AAC1B,sCAAsC;AACtC,4CAG2B;AAC3B,6DAAsE;AACtE,kEAA+D;AAY/D,SAAS,cAAc,CAAC,EAMD;QANC,EACpB,SAAS,GAAG,EAAE,EACd,OAAO,EACP,IAAI,OAGe;IAFnB,iBAAiB;IACd,6BAA6B,cALZ,gCAMvB,CADmC;IAGhC;;;;;;MAME;IACF,OAAO,CACL,8BAAC,iBAAuB,oBAClB,6BAA6B,IACjC,IAAI,EAAE,IAAI,EACV,OAAO,EAAE,CAAC,CAAC,EAAE,EAAE,CAAC,IAAA,2BAAY,EAAC,CAAC,EAAE,OAAO,EAAE,IAAI,CAAC,EAC9C,SAAS,EAAE,GAAG,uBAAM,oBAAoB,GAAG,SAAS,IAEpD,CACH,CAAC;AACN,CAAC;AAED,kBAAe,cAAc,CAAC"}
+{"version":3,"file":"BreadcrumbItem.js","sourceRoot":"","sources":["../../../../src/components/Breadcrumb/BreadcrumbItem.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;AAAA,kDAA0B;AAC1B,sCAAsC;AACtC,4CAG2B;AAC3B,6DAAsE;AACtE,kEAA+D;AAY/D;;;GAGG;AACH,SAAS,cAAc,CAAC,EAMF;IAElB;;;;;;MAME;QAdkB,EACpB,SAAS,GAAG,EAAE,EACd,OAAO,EACP,IAAI,OAGc;IAFlB,iBAAiB;IACd,6BAA6B,cALZ,gCAMvB,CADmC;IAWhC,MAAM,YAAY,GAAG,CAAC,6BAA6B,CAAC,OAAO,IAAI,CAAC,6BAA6B,CAAC,QAAQ,CAAC;IACvG,MAAM,OAAO,GAAG,YAAY,CAAC,CAAC,CAAC;QAC3B,IAAI;QACJ,OAAO,EAAE,CAAC,CAA+B,EAAE,EAAE,CAAC,IAAA,2BAAY,EAAC,CAAC,EAAE,OAAO,EAAE,IAAI,CAAC;KAC/E,CAAC,CAAC,CAAC,EAAE,CAAC;IACP,OAAO,CACL,8BAAC,iBAAuB,oBAClB,6BAA6B,EAC7B,OAAO,IACX,SAAS,EAAE,GAAG,uBAAM,oBAAoB,GAAG,SAAS,IAEpD,CACH,CAAC;AACN,CAAC;AAED,kBAAe,cAAc,CAAC"}

package/dist/cjs/components/Breadcrumb/BreadcrumbList.js

@@ -15,13 +15,16 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 const react_1 = __importDefault(require("react"));
-const core_1 = require("@blueprintjs/core");
+const popover2_1 = require("@blueprintjs/popover2");
 const constants_1 = require("../../configuration/constants");
 const BreadcrumbItem_1 = __importDefault(require("./BreadcrumbItem"));
+/**
+ * Navigation path to the currently show resource or view in the application.
+ */
 function BreadcrumbList(_a) {
     var { className = "", 
     // itemDivider = "/",
-    onItemClick, htmlUlProps } = _a, otherBlueprintBreadcrumbsProps = __rest(_a, ["className", "onItemClick", "htmlUlProps"]);
+    onItemClick, htmlUlProps, ignoreOverflow = false, latenOverflow = false } = _a, otherBlueprintBreadcrumbsProps = __rest(_a, ["className", "onItemClick", "htmlUlProps", "ignoreOverflow", "latenOverflow"]);
     const renderBreadcrumb = (propsBreadcrumb) => {
         const { onClick } = propsBreadcrumb, otherProps = __rest(propsBreadcrumb, ["onClick"]);
         return (react_1.default.createElement(BreadcrumbItem_1.default
@@ -33,9 +36,13 @@ function BreadcrumbList(_a) {
                 : onClick })));
     };
     const renderCurrentBreadcrumb = (propsBreadcrumb) => {
-        return react_1.default.createElement(BreadcrumbItem_1.default, Object.assign({}, propsBreadcrumb, { current: true, href: null, onClick: null }));
+        return react_1.default.createElement(BreadcrumbItem_1.default, Object.assign({}, propsBreadcrumb, { current: true }));
     };
-    return (react_1.default.createElement(core_1.Breadcrumbs, Object.assign({}, otherBlueprintBreadcrumbsProps, htmlUlProps, { className: `${constants_1.CLASSPREFIX}-breadcrumb__list ` + className, minVisibleItems: 1, breadcrumbRenderer: renderBreadcrumb, currentBreadcrumbRenderer: renderCurrentBreadcrumb })));
+    return (react_1.default.createElement(popover2_1.Breadcrumbs2, Object.assign({}, otherBlueprintBreadcrumbsProps, htmlUlProps, { className: `${constants_1.CLASSPREFIX}-breadcrumb__list` +
+            (latenOverflow ? ` ${constants_1.CLASSPREFIX}-breadcrumb__list--latenoverflow` : "") +
+            (className ? ` ${className}` : ""), minVisibleItems: 1, breadcrumbRenderer: renderBreadcrumb, currentBreadcrumbRenderer: renderCurrentBreadcrumb, overflowListProps: ignoreOverflow ? {
+            minVisibleItems: otherBlueprintBreadcrumbsProps.items.length,
+        } : {} })));
 }
 exports.default = BreadcrumbList;
 //# sourceMappingURL=BreadcrumbList.js.map

package/dist/cjs/components/Breadcrumb/BreadcrumbList.js.map

@@ -1 +1 @@
-{"version":3,"file":"BreadcrumbList.js","sourceRoot":"","sources":["../../../../src/components/Breadcrumb/BreadcrumbList.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;AAAA,kDAA0B;AAC1B,4CAG2B;AAC3B,6DAAsE;AACtE,sEAA8C;AAkC9C,SAAS,cAAc,CAAC,EAMD;QANC,EACpB,SAAS,GAAG,EAAE;IACd,qBAAqB;IACrB,WAAW,EACX,WAAW,OAEQ,EADhB,8BAA8B,cALb,2CAMvB,CADoC;IAEjC,MAAM,gBAAgB,GAAG,CAAC,eAAoB,EAAE,EAAE;QAC9C,MAAM,EAAC,OAAO,KAAmB,eAAe,EAA7B,UAAU,UAAI,eAAe,EAA1C,WAAwB,CAAkB,CAAC;QACjD,OAAO,CACH,8BAAC,wBAAc;QACX,mBAAmB;4BACf,UAAU,IACd,OAAO,EACH,WAAW;gBACP,CAAC,CAAC,CAAC,CAAC,EAAE,EAAE;oBACF,WAAW,CAAC,eAAe,CAAC,IAAI,EAAE,CAAC,CAAC,CAAC;gBACzC,CAAC;gBACH,CAAC,CAAC,OAAO,IAEnB,CACL,CAAC;IACN,CAAC,CAAC;IAEF,MAAM,uBAAuB,GAAG,CAAC,eAAoB,EAAE,EAAE;QACrD,OAAO,8BAAC,wBAAc,oBAAK,eAAe,IAAE,OAAO,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,OAAO,EAAE,IAAI,IAAkC,CAAC;IAC3H,CAAC,CAAC;IAEF,OAAO,CACH,8BAAC,kBAAuB,oBAChB,8BAA8B,EAC9B,WAAW,IACf,SAAS,EAAE,GAAG,uBAAM,oBAAoB,GAAG,SAAS,EACpD,eAAe,EAAE,CAAC,EAClB,kBAAkB,EAAE,gBAAgB,EACpC,yBAAyB,EAAE,uBAAuB,IACpD,CACL,CAAC;AACN,CAAC;AAED,kBAAe,cAAc,CAAC"}
+{"version":3,"file":"BreadcrumbList.js","sourceRoot":"","sources":["../../../../src/components/Breadcrumb/BreadcrumbList.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;AAAA,kDAA0B;AAC1B,oDAG+B;AAC/B,6DAAsE;AACtE,sEAA8C;AA4C9C;;GAEG;AACH,SAAS,cAAc,CAAC,EAQF;QARE,EACpB,SAAS,GAAG,EAAE;IACd,qBAAqB;IACrB,WAAW,EACX,WAAW,EACX,cAAc,GAAG,KAAK,EACtB,aAAa,GAAG,KAAK,OAEH,EADf,8BAA8B,cAPb,8EAQvB,CADoC;IAEjC,MAAM,gBAAgB,GAAG,CAAC,eAAoC,EAAE,EAAE;QAC9D,MAAM,EAAC,OAAO,KAAmB,eAAe,EAA7B,UAAU,UAAI,eAAe,EAA1C,WAAwB,CAAkB,CAAC;QACjD,OAAO,CACH,8BAAC,wBAAc;QACX,mBAAmB;4BACf,UAAU,IACd,OAAO,EACH,WAAW;gBACP,CAAC,CAAC,CAAC,CAAC,EAAE,EAAE;oBACF,WAAW,CAAC,eAAe,CAAC,IAAI,EAAE,CAAC,CAAC,CAAC;gBACzC,CAAC;gBACH,CAAC,CAAC,OAAO,IAEnB,CACL,CAAC;IACN,CAAC,CAAC;IAEF,MAAM,uBAAuB,GAAG,CAAC,eAAoC,EAAE,EAAE;QACrE,OAAO,8BAAC,wBAAc,oBAAK,eAAe,IAAE,OAAO,EAAE,IAAI,IAAkC,CAAC;IAChG,CAAC,CAAC;IAEF,OAAO,CACH,8BAAC,uBAAuB,oBAChB,8BAA8B,EAC9B,WAAW,IACf,SAAS,EACL,GAAG,uBAAM,mBAAmB;YAC5B,CAAC,aAAa,CAAC,CAAC,CAAC,IAAI,uBAAM,kCAAkC,CAAC,CAAC,CAAC,EAAE,CAAC;YACnE,CAAC,SAAS,CAAC,CAAC,CAAC,IAAI,SAAS,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC,EAEtC,eAAe,EAAE,CAAC,EAClB,kBAAkB,EAAE,gBAAgB,EACpC,yBAAyB,EAAE,uBAAuB,EAClD,iBAAiB,EAAE,cAAc,CAAC,CAAC,CAAC;YAChC,eAAe,EAAE,8BAA8B,CAAC,KAAK,CAAC,MAAM;SAC/D,CAAC,CAAC,CAAC,EAAE,IACR,CACL,CAAC;AACN,CAAC;AAED,kBAAe,cAAc,CAAC"}

package/dist/esm/components/Breadcrumb/BreadcrumbItem.js

@@ -25,10 +25,11 @@ import React from "react";
 import { Breadcrumb as BlueprintBreadcrumbItem, } from "@blueprintjs/core";
 import { CLASSPREFIX as eccgui } from "../../configuration/constants.js";
 import { openInNewTab } from "../../common/utils/openInNewTab.js";
+/**
+ * Item of the breadcrumbs list.
+ * It cannot be used directly but the properties can be used within the elements of the `BreadcrumbList.items` property.
+ */
 function BreadcrumbItem(_a) {
-    var _b = _a.className, className = _b === void 0 ? "" : _b, onClick = _a.onClick, href = _a.href, 
-    //itemDivider='',
-    otherBlueprintBreadcrumbProps = __rest(_a, ["className", "onClick", "href"]);
     /*
         FIXME: adding `data-divider` does not work this way because BlueprintJS
         breadcrumb component does not support (and forward) it on HTML element
@@ -36,7 +37,15 @@ function BreadcrumbItem(_a) {
         CSS/Sass as content for the pseudo element, currently done static in CSS
         with slash char.
     */
-    return (React.createElement(BlueprintBreadcrumbItem, __assign({}, otherBlueprintBreadcrumbProps, { href: href, onClick: function (e) { return openInNewTab(e, onClick, href); }, className: eccgui + "-breadcrumb__item " + className })));
+    var _b = _a.className, className = _b === void 0 ? "" : _b, onClick = _a.onClick, href = _a.href, 
+    //itemDivider='',
+    otherBlueprintBreadcrumbProps = __rest(_a, ["className", "onClick", "href"]);
+    var allowActions = !otherBlueprintBreadcrumbProps.current && !otherBlueprintBreadcrumbProps.disabled;
+    var actions = allowActions ? {
+        href: href,
+        onClick: function (e) { return openInNewTab(e, onClick, href); },
+    } : {};
+    return (React.createElement(BlueprintBreadcrumbItem, __assign({}, otherBlueprintBreadcrumbProps, actions, { className: eccgui + "-breadcrumb__item " + className })));
 }
 export default BreadcrumbItem;
 //# sourceMappingURL=BreadcrumbItem.js.map

package/dist/esm/components/Breadcrumb/BreadcrumbItem.js.map

@@ -1 +1 @@
-{"version":3,"file":"BreadcrumbItem.js","sourceRoot":"","sources":["../../../../src/components/Breadcrumb/BreadcrumbItem.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,sCAAsC;AACtC,OAAO,EACH,UAAU,IAAI,uBAAuB,GAExC,MAAM,mBAAmB,CAAC;AAC3B,OAAO,EAAE,WAAW,IAAI,MAAM,EAAE,MAAM,+BAA+B,CAAC;AACtE,OAAO,EAAE,YAAY,EAAE,MAAM,iCAAiC,CAAC;AAY/D,SAAS,cAAc,CAAC,EAMD;IALnB,IAAA,iBAAc,EAAd,SAAS,mBAAG,EAAE,KAAA,EACd,OAAO,aAAA,EACP,IAAI,UAAA;IACJ,iBAAiB;IACd,6BAA6B,cALZ,gCAMvB,CADmC;IAGhC;;;;;;MAME;IACF,OAAO,CACL,oBAAC,uBAAuB,eAClB,6BAA6B,IACjC,IAAI,EAAE,IAAI,EACV,OAAO,EAAE,UAAC,CAAC,IAAK,OAAA,YAAY,CAAC,CAAC,EAAE,OAAO,EAAE,IAAI,CAAC,EAA9B,CAA8B,EAC9C,SAAS,EAAK,MAAM,uBAAoB,GAAG,SAAS,IAEpD,CACH,CAAC;AACN,CAAC;AAED,eAAe,cAAc,CAAC"}
+{"version":3,"file":"BreadcrumbItem.js","sourceRoot":"","sources":["../../../../src/components/Breadcrumb/BreadcrumbItem.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,sCAAsC;AACtC,OAAO,EACH,UAAU,IAAI,uBAAuB,GAExC,MAAM,mBAAmB,CAAC;AAC3B,OAAO,EAAE,WAAW,IAAI,MAAM,EAAE,MAAM,+BAA+B,CAAC;AACtE,OAAO,EAAE,YAAY,EAAE,MAAM,iCAAiC,CAAC;AAY/D;;;GAGG;AACH,SAAS,cAAc,CAAC,EAMF;IAElB;;;;;;MAME;IAbF,IAAA,iBAAc,EAAd,SAAS,mBAAG,EAAE,KAAA,EACd,OAAO,aAAA,EACP,IAAI,UAAA;IACJ,iBAAiB;IACd,6BAA6B,cALZ,gCAMvB,CADmC;IAWhC,IAAM,YAAY,GAAG,CAAC,6BAA6B,CAAC,OAAO,IAAI,CAAC,6BAA6B,CAAC,QAAQ,CAAC;IACvG,IAAM,OAAO,GAAG,YAAY,CAAC,CAAC,CAAC;QAC3B,IAAI,MAAA;QACJ,OAAO,EAAE,UAAC,CAA+B,IAAK,OAAA,YAAY,CAAC,CAAC,EAAE,OAAO,EAAE,IAAI,CAAC,EAA9B,CAA8B;KAC/E,CAAC,CAAC,CAAC,EAAE,CAAC;IACP,OAAO,CACL,oBAAC,uBAAuB,eAClB,6BAA6B,EAC7B,OAAO,IACX,SAAS,EAAK,MAAM,uBAAoB,GAAG,SAAS,IAEpD,CACH,CAAC;AACN,CAAC;AAED,eAAe,cAAc,CAAC"}

package/dist/esm/components/Breadcrumb/BreadcrumbList.js

@@ -21,13 +21,16 @@ var __rest = (this && this.__rest) || function (s, e) {
     return t;
 };
 import React from "react";
-import { Breadcrumbs as BlueprintBreadcrumbList, } from "@blueprintjs/core";
+import { Breadcrumbs2 as BlueprintBreadcrumbList, } from "@blueprintjs/popover2";
 import { CLASSPREFIX as eccgui } from "../../configuration/constants.js";
 import BreadcrumbItem from "./BreadcrumbItem.js";
+/**
+ * Navigation path to the currently show resource or view in the application.
+ */
 function BreadcrumbList(_a) {
     var _b = _a.className, className = _b === void 0 ? "" : _b, 
     // itemDivider = "/",
-    onItemClick = _a.onItemClick, htmlUlProps = _a.htmlUlProps, otherBlueprintBreadcrumbsProps = __rest(_a, ["className", "onItemClick", "htmlUlProps"]);
+    onItemClick = _a.onItemClick, htmlUlProps = _a.htmlUlProps, _c = _a.ignoreOverflow, ignoreOverflow = _c === void 0 ? false : _c, _d = _a.latenOverflow, latenOverflow = _d === void 0 ? false : _d, otherBlueprintBreadcrumbsProps = __rest(_a, ["className", "onItemClick", "htmlUlProps", "ignoreOverflow", "latenOverflow"]);
     var renderBreadcrumb = function (propsBreadcrumb) {
         var onClick = propsBreadcrumb.onClick, otherProps = __rest(propsBreadcrumb, ["onClick"]);
         return (React.createElement(BreadcrumbItem
@@ -39,9 +42,13 @@ function BreadcrumbList(_a) {
                 : onClick })));
     };
     var renderCurrentBreadcrumb = function (propsBreadcrumb) {
-        return React.createElement(BreadcrumbItem, __assign({}, propsBreadcrumb, { current: true, href: null, onClick: null }));
+        return React.createElement(BreadcrumbItem, __assign({}, propsBreadcrumb, { current: true }));
     };
-    return (React.createElement(BlueprintBreadcrumbList, __assign({}, otherBlueprintBreadcrumbsProps, htmlUlProps, { className: eccgui + "-breadcrumb__list " + className, minVisibleItems: 1, breadcrumbRenderer: renderBreadcrumb, currentBreadcrumbRenderer: renderCurrentBreadcrumb })));
+    return (React.createElement(BlueprintBreadcrumbList, __assign({}, otherBlueprintBreadcrumbsProps, htmlUlProps, { className: eccgui + "-breadcrumb__list" +
+            (latenOverflow ? " " + eccgui + "-breadcrumb__list--latenoverflow" : "") +
+            (className ? " " + className : ""), minVisibleItems: 1, breadcrumbRenderer: renderBreadcrumb, currentBreadcrumbRenderer: renderCurrentBreadcrumb, overflowListProps: ignoreOverflow ? {
+            minVisibleItems: otherBlueprintBreadcrumbsProps.items.length,
+        } : {} })));
 }
 export default BreadcrumbList;
 //# sourceMappingURL=BreadcrumbList.js.map

package/dist/esm/components/Breadcrumb/BreadcrumbList.js.map

@@ -1 +1 @@
-{"version":3,"file":"BreadcrumbList.js","sourceRoot":"","sources":["../../../../src/components/Breadcrumb/BreadcrumbList.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EACH,WAAW,IAAI,uBAAuB,GAEzC,MAAM,mBAAmB,CAAC;AAC3B,OAAO,EAAE,WAAW,IAAI,MAAM,EAAE,MAAM,+BAA+B,CAAC;AACtE,OAAO,cAAc,MAAM,kBAAkB,CAAC;AAkC9C,SAAS,cAAc,CAAC,EAMD;IALnB,IAAA,iBAAc,EAAd,SAAS,mBAAG,EAAE,KAAA;IACd,qBAAqB;IACrB,WAAW,iBAAA,EACX,WAAW,iBAAA,EACR,8BAA8B,cALb,2CAMvB,CADoC;IAEjC,IAAM,gBAAgB,GAAG,UAAC,eAAoB;QACnC,IAAA,OAAO,GAAmB,eAAe,QAAlC,EAAK,UAAU,UAAI,eAAe,EAA1C,WAAwB,CAAD,CAAoB;QACjD,OAAO,CACH,oBAAC,cAAc;QACX,mBAAmB;uBACf,UAAU,IACd,OAAO,EACH,WAAW;gBACP,CAAC,CAAC,UAAC,CAAC;oBACE,WAAW,CAAC,eAAe,CAAC,IAAI,EAAE,CAAC,CAAC,CAAC;gBACzC,CAAC;gBACH,CAAC,CAAC,OAAO,IAEnB,CACL,CAAC;IACN,CAAC,CAAC;IAEF,IAAM,uBAAuB,GAAG,UAAC,eAAoB;QACjD,OAAO,oBAAC,cAAc,eAAK,eAAe,IAAE,OAAO,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,OAAO,EAAE,IAAI,IAAkC,CAAC;IAC3H,CAAC,CAAC;IAEF,OAAO,CACH,oBAAC,uBAAuB,eAChB,8BAA8B,EAC9B,WAAW,IACf,SAAS,EAAK,MAAM,uBAAoB,GAAG,SAAS,EACpD,eAAe,EAAE,CAAC,EAClB,kBAAkB,EAAE,gBAAgB,EACpC,yBAAyB,EAAE,uBAAuB,IACpD,CACL,CAAC;AACN,CAAC;AAED,eAAe,cAAc,CAAC"}
+{"version":3,"file":"BreadcrumbList.js","sourceRoot":"","sources":["../../../../src/components/Breadcrumb/BreadcrumbList.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EACH,YAAY,IAAI,uBAAuB,GAE1C,MAAM,uBAAuB,CAAC;AAC/B,OAAO,EAAE,WAAW,IAAI,MAAM,EAAE,MAAM,+BAA+B,CAAC;AACtE,OAAO,cAAc,MAAM,kBAAkB,CAAC;AA4C9C;;GAEG;AACH,SAAS,cAAc,CAAC,EAQF;IAPlB,IAAA,iBAAc,EAAd,SAAS,mBAAG,EAAE,KAAA;IACd,qBAAqB;IACrB,WAAW,iBAAA,EACX,WAAW,iBAAA,EACX,sBAAsB,EAAtB,cAAc,mBAAG,KAAK,KAAA,EACtB,qBAAqB,EAArB,aAAa,mBAAG,KAAK,KAAA,EAClB,8BAA8B,cAPb,8EAQvB,CADoC;IAEjC,IAAM,gBAAgB,GAAG,UAAC,eAAoC;QACnD,IAAA,OAAO,GAAmB,eAAe,QAAlC,EAAK,UAAU,UAAI,eAAe,EAA1C,WAAwB,CAAD,CAAoB;QACjD,OAAO,CACH,oBAAC,cAAc;QACX,mBAAmB;uBACf,UAAU,IACd,OAAO,EACH,WAAW;gBACP,CAAC,CAAC,UAAC,CAAC;oBACE,WAAW,CAAC,eAAe,CAAC,IAAI,EAAE,CAAC,CAAC,CAAC;gBACzC,CAAC;gBACH,CAAC,CAAC,OAAO,IAEnB,CACL,CAAC;IACN,CAAC,CAAC;IAEF,IAAM,uBAAuB,GAAG,UAAC,eAAoC;QACjE,OAAO,oBAAC,cAAc,eAAK,eAAe,IAAE,OAAO,EAAE,IAAI,IAAkC,CAAC;IAChG,CAAC,CAAC;IAEF,OAAO,CACH,oBAAC,uBAAuB,eAChB,8BAA8B,EAC9B,WAAW,IACf,SAAS,EACF,MAAM,sBAAmB;YAC5B,CAAC,aAAa,CAAC,CAAC,CAAC,MAAI,MAAM,qCAAkC,CAAC,CAAC,CAAC,EAAE,CAAC;YACnE,CAAC,SAAS,CAAC,CAAC,CAAC,MAAI,SAAW,CAAC,CAAC,CAAC,EAAE,CAAC,EAEtC,eAAe,EAAE,CAAC,EAClB,kBAAkB,EAAE,gBAAgB,EACpC,yBAAyB,EAAE,uBAAuB,EAClD,iBAAiB,EAAE,cAAc,CAAC,CAAC,CAAC;YAChC,eAAe,EAAE,8BAA8B,CAAC,KAAK,CAAC,MAAM;SAC/D,CAAC,CAAC,CAAC,EAAE,IACR,CACL,CAAC;AACN,CAAC;AAED,eAAe,cAAc,CAAC"}

package/dist/types/components/Breadcrumb/BreadcrumbItem.d.ts

@@ -1,5 +1,9 @@
 /// <reference types="react" />
-import { IBreadcrumbProps as IBlueprintBreadcrumbItemProps } from "@blueprintjs/core";
-export declare type IBreadcrumbItemProps = Omit<IBlueprintBreadcrumbItemProps, "icon" | "iconTitle" | "intent" | "target">;
-declare function BreadcrumbItem({ className, onClick, href, ...otherBlueprintBreadcrumbProps }: IBreadcrumbItemProps): JSX.Element;
+import { BreadcrumbProps as BlueprintBreadcrumbItemProps } from "@blueprintjs/core";
+export declare type BreadcrumbItemProps = Omit<BlueprintBreadcrumbItemProps, "icon" | "iconTitle" | "intent" | "target">;
+/**
+ * Item of the breadcrumbs list.
+ * It cannot be used directly but the properties can be used within the elements of the `BreadcrumbList.items` property.
+ */
+declare function BreadcrumbItem({ className, onClick, href, ...otherBlueprintBreadcrumbProps }: BreadcrumbItemProps): JSX.Element;
 export default BreadcrumbItem;

package/dist/types/components/Breadcrumb/BreadcrumbList.d.ts

@@ -1,16 +1,16 @@
 import React from "react";
-import { IBreadcrumbsProps as IBlueprintBreadcrumbsProps } from "@blueprintjs/core";
-import { IBreadcrumbItemProps } from "./BreadcrumbItem";
-declare type ReducedBreadcrumbsProps = Omit<IBlueprintBreadcrumbsProps, "breadcrumbRenderer" | "collapseFrom" | "currentBreadcrumbRenderer" | "minVisibleItems" | "overflowListProps" | "popoverProps">;
-interface IBreadcrumbListProps extends ReducedBreadcrumbsProps {
+import { Breadcrumbs2Props as BlueprintBreadcrumbsProps } from "@blueprintjs/popover2";
+import { BreadcrumbItemProps } from "./BreadcrumbItem";
+declare type ReducedBreadcrumbsProps = Omit<BlueprintBreadcrumbsProps, "breadcrumbRenderer" | "collapseFrom" | "currentBreadcrumbRenderer" | "minVisibleItems" | "overflowListProps" | "popoverProps">;
+interface BreadcrumbListProps extends ReducedBreadcrumbsProps {
     /**
         list of breadcrumb items to display
     */
-    items: IBreadcrumbItemProps[];
+    items: BreadcrumbItemProps[];
     /**
         click handler used on breadcrumb items
     */
-    onItemClick?(itemUrl: string, event: object): any;
+    onItemClick?(itemUrl: string | undefined, event: object): any;
     /**
         native attributes for the unordered HTML list (ul)
     */
@@ -18,7 +18,19 @@ interface IBreadcrumbListProps extends ReducedBreadcrumbsProps {
     /**
         char that devides breadcrumb items, default: "/" (currently unsupported)
     */
-    itemDivider?: never;
+    /**
+     * Do not re-render breadcrumbs in a shortened version if they overflow the available space.
+     */
+    ignoreOverflow?: boolean;
+    /**
+     * If set to `true` then breadcrumb items can shrink.
+     * This way we cannot prevent overflowing breadcrumbs completely but this happens very late.
+     * You should enable this when `ignoreOverflow` is `true`.
+     */
+    latenOverflow?: boolean;
 }
-declare function BreadcrumbList({ className, onItemClick, htmlUlProps, ...otherBlueprintBreadcrumbsProps }: IBreadcrumbListProps): JSX.Element;
+/**
+ * Navigation path to the currently show resource or view in the application.
+ */
+declare function BreadcrumbList({ className, onItemClick, htmlUlProps, ignoreOverflow, latenOverflow, ...otherBlueprintBreadcrumbsProps }: BreadcrumbListProps): JSX.Element;
 export default BreadcrumbList;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@eccenca/gui-elements",
   "description": "GUI elements based on other libraries, usable in React application, written in Typescript.",
-  "version": "23.0.0-rc.3-unofficial.0",
+  "version": "23.0.0-rc.3",
   "license": "Apache-2.0",
   "homepage": "https://github.com/eccenca/gui-elements",
   "bugs": "https://github.com/eccenca/gui-elements/issues",
@@ -62,10 +62,10 @@
     "check:package": "pjv --warnings --recommendations"
   },
   "dependencies": {
-    "@blueprintjs/colors": "^4.1.4",
-    "@blueprintjs/core": "^4.6.1",
-    "@blueprintjs/popover2": "^1.4.3",
-    "@blueprintjs/select": "^4.5.1",
+    "@blueprintjs/colors": "^4.1.5",
+    "@blueprintjs/core": "^4.9.0",
+    "@blueprintjs/popover2": "^1.6.0",
+    "@blueprintjs/select": "^4.6.0",
     "@carbon/icons": "10.44.0",
     "@carbon/icons-react": "10.44.0",
     "@mavrin/remark-typograf": "^2.2.0",
@@ -98,12 +98,12 @@
     "@babel/preset-flow": "^7.16.5",
     "@babel/preset-react": "^7.16.7",
     "@babel/preset-typescript": "^7.16.7",
-    "@storybook/addon-actions": "^6.4.9",
-    "@storybook/addon-essentials": "^6.4.9",
-    "@storybook/addon-jest": "^6.4.13",
-    "@storybook/addon-links": "^6.4.9",
+    "@storybook/addon-actions": "^6.5.10",
+    "@storybook/addon-essentials": "^6.5.10",
+    "@storybook/addon-jest": "^6.5.10",
+    "@storybook/addon-links": "^6.5.10",
     "@storybook/preset-scss": "^1.0.3",
-    "@storybook/react": "^6.4.9",
+    "@storybook/react": "^6.5.10",
     "@testing-library/jest-dom": "^5.16.1",
     "@testing-library/react": "^12.1.2",
     "@types/carbon-components-react": "7.49.0",

package/src/components/Breadcrumb/BreadcrumbItem.tsx

@@ -2,14 +2,14 @@ import React from "react";
 // import PropTypes from 'prop-types';
 import {
     Breadcrumb as BlueprintBreadcrumbItem,
-    IBreadcrumbProps as IBlueprintBreadcrumbItemProps,
+    BreadcrumbProps as BlueprintBreadcrumbItemProps,
 } from "@blueprintjs/core";
 import { CLASSPREFIX as eccgui } from "../../configuration/constants";
 import { openInNewTab } from "../../common/utils/openInNewTab";
 
 // FIXME: enforce href and remove onClick later
-export type IBreadcrumbItemProps = Omit<
-    IBlueprintBreadcrumbItemProps,
+export type BreadcrumbItemProps = Omit<
+    BlueprintBreadcrumbItemProps,
     // we remove some properties that are currently not necessary, required usage should be discussed
     "icon" |
     "iconTitle" |
@@ -17,13 +17,17 @@ export type IBreadcrumbItemProps = Omit<
     "target"
 >;
 
+/**
+ * Item of the breadcrumbs list.
+ * It cannot be used directly but the properties can be used within the elements of the `BreadcrumbList.items` property.
+ */
 function BreadcrumbItem({
     className = "",
     onClick,
     href,
     //itemDivider='',
     ...otherBlueprintBreadcrumbProps
-}: IBreadcrumbItemProps) {
+}: BreadcrumbItemProps) {
 
     /*
         FIXME: adding `data-divider` does not work this way because BlueprintJS
@@ -32,11 +36,16 @@ function BreadcrumbItem({
         CSS/Sass as content for the pseudo element, currently done static in CSS
         with slash char.
     */
+
+    const allowActions = !otherBlueprintBreadcrumbProps.current && !otherBlueprintBreadcrumbProps.disabled;
+    const actions = allowActions ? {
+        href,
+        onClick: (e:React.MouseEvent<HTMLElement>) => openInNewTab(e, onClick, href),
+    } : {};
     return (
       <BlueprintBreadcrumbItem
         {...otherBlueprintBreadcrumbProps}
-        href={href}
-        onClick={(e) => openInNewTab(e, onClick, href)}
+        {...actions}
         className={`${eccgui}-breadcrumb__item ` + className}
         /* data-divider={itemDivider ? itemDivider : ''} */
       />

package/src/components/Breadcrumb/BreadcrumbList.tsx

@@ -1,14 +1,14 @@
 import React from "react";
 import {
-    Breadcrumbs as BlueprintBreadcrumbList,
-    IBreadcrumbsProps as IBlueprintBreadcrumbsProps,
-} from "@blueprintjs/core";
+    Breadcrumbs2 as BlueprintBreadcrumbList,
+    Breadcrumbs2Props as BlueprintBreadcrumbsProps,
+} from "@blueprintjs/popover2";
 import { CLASSPREFIX as eccgui } from "../../configuration/constants";
 import BreadcrumbItem from "./BreadcrumbItem";
-import { IBreadcrumbItemProps } from "./BreadcrumbItem";
+import { BreadcrumbItemProps } from "./BreadcrumbItem";
 
 type ReducedBreadcrumbsProps = Omit<
-    IBlueprintBreadcrumbsProps,
+    BlueprintBreadcrumbsProps,
     // we remove some properties that are currently not necessary, required usage should be discussed
     "breadcrumbRenderer" |
     "collapseFrom" |
@@ -19,15 +19,15 @@ type ReducedBreadcrumbsProps = Omit<
 >;
 
 // FIXME: enforce onItemClick later when href value can always be routed correctly
-interface IBreadcrumbListProps extends ReducedBreadcrumbsProps {
+interface BreadcrumbListProps extends ReducedBreadcrumbsProps {
     /**
         list of breadcrumb items to display
     */
-    items: IBreadcrumbItemProps[];
+    items: BreadcrumbItemProps[];
     /**
         click handler used on breadcrumb items
     */
-    onItemClick?(itemUrl: string, event: object): any;
+    onItemClick?(itemUrl: string | undefined, event: object): any;
     /**
         native attributes for the unordered HTML list (ul)
     */
@@ -35,17 +35,32 @@ interface IBreadcrumbListProps extends ReducedBreadcrumbsProps {
     /**
         char that devides breadcrumb items, default: "/" (currently unsupported)
     */
-    itemDivider?: never;
+    //itemDivider?: never;
+    /**
+     * Do not re-render breadcrumbs in a shortened version if they overflow the available space.
+     */
+    ignoreOverflow?: boolean;
+    /**
+     * If set to `true` then breadcrumb items can shrink.
+     * This way we cannot prevent overflowing breadcrumbs completely but this happens very late.
+     * You should enable this when `ignoreOverflow` is `true`.
+     */
+    latenOverflow?: boolean;
 }
 
+/**
+ * Navigation path to the currently show resource or view in the application.
+ */
 function BreadcrumbList({
     className = "",
     // itemDivider = "/",
     onItemClick,
     htmlUlProps,
+    ignoreOverflow = false,
+    latenOverflow = false,
     ...otherBlueprintBreadcrumbsProps
-}: IBreadcrumbListProps) {
-    const renderBreadcrumb = (propsBreadcrumb: any) => {
+}: BreadcrumbListProps) {
+    const renderBreadcrumb = (propsBreadcrumb: BreadcrumbItemProps) => {
         const {onClick, ...otherProps} = propsBreadcrumb;
         return (
             <BreadcrumbItem
@@ -62,18 +77,25 @@ function BreadcrumbList({
         );
     };
 
-    const renderCurrentBreadcrumb = (propsBreadcrumb: any) => {
-        return <BreadcrumbItem {...propsBreadcrumb} current={true} href={null} onClick={null} /*itemDivider={itemDivider}*/ />;
+    const renderCurrentBreadcrumb = (propsBreadcrumb: BreadcrumbItemProps) => {
+        return <BreadcrumbItem {...propsBreadcrumb} current={true} /*itemDivider={itemDivider}*/ />;
     };
 
     return (
         <BlueprintBreadcrumbList
             {...otherBlueprintBreadcrumbsProps}
             {...htmlUlProps}
-            className={`${eccgui}-breadcrumb__list ` + className}
+            className={
+                `${eccgui}-breadcrumb__list` +
+                (latenOverflow ? ` ${eccgui}-breadcrumb__list--latenoverflow` : "") +
+                (className ? ` ${className}` : "")
+            }
             minVisibleItems={1}
             breadcrumbRenderer={renderBreadcrumb}
             currentBreadcrumbRenderer={renderCurrentBreadcrumb}
+            overflowListProps={ignoreOverflow ? {
+                minVisibleItems: otherBlueprintBreadcrumbsProps.items.length,
+            } : {}}
         />
     );
 }

package/src/components/Breadcrumb/breadcrumb.scss

@@ -5,7 +5,6 @@
     height: auto;
 
     & > li {
-
         &:last-of-type {
             min-width: 0;
         }
@@ -39,9 +38,33 @@
     }
 }
 
+.#{$eccgui}-breadcrumb__list--latenoverflow {
+    & > li {
+        flex-shrink: 1;
+        min-width: 0;
+    }
+
+    .#{$eccgui}-breadcrumb__item > * {
+        text-overflow: ellipsis;
+        overflow: hidden;
+        vertical-align: middle;
+        display: inline;
+    }
+}
+
 .#{$eccgui}-breadcrumb__item {
     font-size: inherit;
     overflow: hidden;
     text-overflow: ellipsis;
     display: inline-block;
 }
+
+a.#{$eccgui}-breadcrumb__item {
+    &:not(.#{$ns}-breadcrumb-current):not(.#{$ns}-disabled) {
+        text-decoration: underline;
+        &:hover,
+        &:focus {
+            text-decoration: none;
+        }
+    }
+}

package/src/components/Breadcrumb/stories/BreadcrumbItem.stories.tsx

@@ -0,0 +1,19 @@
+import React from "react";
+import { ComponentStory, ComponentMeta } from "@storybook/react";
+import { BreadcrumbItem } from './../../../index';
+
+export default {
+    title: "Components/Breadcrumbs/Item",
+    component: BreadcrumbItem,
+    argTypes: {
+    },
+}  as ComponentMeta<typeof BreadcrumbItem>
+
+const Template: ComponentStory<typeof BreadcrumbItem> = (args) => (
+    <BreadcrumbItem {...args} />
+);
+
+export const Default = Template.bind({});
+Default.args = {
+    text : 'Breadcrumb item',
+};

package/src/components/Breadcrumb/stories/BreadcrumbList.stories.tsx

@@ -0,0 +1,26 @@
+import React from "react";
+import { ComponentStory, ComponentMeta } from "@storybook/react";
+import { BreadcrumbList, BreadcrumbItem } from './../../../index';
+
+export default {
+    title: "Components/Breadcrumbs/List",
+    component: BreadcrumbList,
+    subcomponents: { BreadcrumbItem },
+    argTypes: {
+    },
+}  as ComponentMeta<typeof BreadcrumbList>
+
+const Template: ComponentStory<typeof BreadcrumbList> = (args) => (
+    <BreadcrumbList  {...args} />
+);
+
+export const Default = Template.bind({});
+Default.args = {
+    items : [
+        {text: "Root page", href : "#" },
+        {text: "Main click category", onClick: () => alert("Breadcrumb click")},
+        {text: <div>Sub category item</div>, href: "#"},
+        {text: <span>Disabled breadcrumb with a very long title</span>, disabled: true},
+        {text: "Current breadcrumb item", current: true}
+    ],
+};