@comet/admin 9.0.0-beta.2 → 9.0.0-beta.4

package/lib/section/SectionHeadline.d.ts

@@ -2,7 +2,7 @@ import { type ComponentsOverrides, Divider, Typography } from "@mui/material";
 import { type Theme } from "@mui/material/styles";
 import { type ComponentProps, type ReactElement, type ReactNode } from "react";
 import { Tooltip } from "../common/Tooltip";
-import { type ThemedComponentBaseProps } from "../helpers/ThemedComponentBaseProps";
+import type { ThemedComponentBaseProps } from "../helpers/ThemedComponentBaseProps";
 export type SectionHeadlineClassKey = "root" | "header" | "titleContainer" | "headline" | "divider" | "supportText" | "infoTooltip";
 export interface SectionHeadlineProps extends ThemedComponentBaseProps<{
     root: "div";

package/lib/section/SectionHeadline.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SectionHeadline.d.ts","sourceRoot":"","sources":["../../src/section/SectionHeadline.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,KAAK,mBAAmB,EAAE,OAAO,EAAE,UAAU,EAAE,MAAM,eAAe,CAAC;AAC9E,OAAO,EAAO,KAAK,KAAK,EAAiB,MAAM,sBAAsB,CAAC;AACtE,OAAO,EAAE,KAAK,cAAc,EAAkB,KAAK,YAAY,EAAE,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAE/F,OAAO,EAAE,OAAO,EAAE,MAAM,mBAAmB,CAAC;AAE5C,OAAO,EAAE,KAAK,wBAAwB,EAAE,MAAM,qCAAqC,CAAC;AAEpF,MAAM,MAAM,uBAAuB,GAAG,MAAM,GAAG,QAAQ,GAAG,gBAAgB,GAAG,UAAU,GAAG,SAAS,GAAG,aAAa,GAAG,aAAa,CAAC;AAEpI,MAAM,WAAW,oBACb,SAAQ,wBAAwB,CAAC;IAC7B,IAAI,EAAE,KAAK,CAAC;IACZ,MAAM,EAAE,KAAK,CAAC;IACd,cAAc,EAAE,KAAK,CAAC;IACtB,QAAQ,EAAE,OAAO,UAAU,CAAC;IAC5B,WAAW,EAAE,OAAO,OAAO,CAAC;IAC5B,WAAW,EAAE,OAAO,UAAU,CAAC;IAC/B,OAAO,EAAE,OAAO,OAAO,CAAC;CAC3B,CAAC;IACF,QAAQ,EAAE,SAAS,CAAC;IACpB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,WAAW,CAAC,EAAE,SAAS,CAAC;IACxB,WAAW,CAAC,EAAE,SAAS,GAAG,IAAI,CAAC,cAAc,CAAC,OAAO,WAAW,CAAC,EAAE,UAAU,CAAC,CAAC;IAI/E,eAAe,CAAC,EAAE,SAAS,CAAC;IAC5B,WAAW,CAAC,EAAE;QACV,OAAO,CAAC,EAAE,YAAY,CAAC;KAC1B,CAAC;CACL;AAED,wBAAgB,eAAe,CAAC,OAAO,EAAE,oBAAoB,2CA0C5D;AAuDD,QAAA,MAAM,WAAW;;;;;mDAShB,CAAC;AASF,OAAO,QAAQ,sBAAsB,CAAC;IAClC,UAAU,uBAAuB;QAC7B,yBAAyB,EAAE,uBAAuB,CAAC;KACtD;IAED,UAAU,mBAAmB;QACzB,yBAAyB,EAAE,oBAAoB,CAAC;KACnD;IAED,UAAU,UAAU;QAChB,yBAAyB,CAAC,EAAE;YACxB,YAAY,CAAC,EAAE,OAAO,CAAC,mBAAmB,CAAC,2BAA2B,CAAC,CAAC,CAAC;YACzE,cAAc,CAAC,EAAE,mBAAmB,CAAC,KAAK,CAAC,CAAC,2BAA2B,CAAC,CAAC;SAC5E,CAAC;KACL;CACJ"}
+{"version":3,"file":"SectionHeadline.d.ts","sourceRoot":"","sources":["../../src/section/SectionHeadline.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,KAAK,mBAAmB,EAAE,OAAO,EAAE,UAAU,EAAE,MAAM,eAAe,CAAC;AAC9E,OAAO,EAAO,KAAK,KAAK,EAAiB,MAAM,sBAAsB,CAAC;AACtE,OAAO,EAAE,KAAK,cAAc,EAAkB,KAAK,YAAY,EAAE,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAE/F,OAAO,EAAE,OAAO,EAAE,MAAM,mBAAmB,CAAC;AAE5C,OAAO,KAAK,EAAE,wBAAwB,EAAE,MAAM,qCAAqC,CAAC;AAEpF,MAAM,MAAM,uBAAuB,GAAG,MAAM,GAAG,QAAQ,GAAG,gBAAgB,GAAG,UAAU,GAAG,SAAS,GAAG,aAAa,GAAG,aAAa,CAAC;AAEpI,MAAM,WAAW,oBACb,SAAQ,wBAAwB,CAAC;IAC7B,IAAI,EAAE,KAAK,CAAC;IACZ,MAAM,EAAE,KAAK,CAAC;IACd,cAAc,EAAE,KAAK,CAAC;IACtB,QAAQ,EAAE,OAAO,UAAU,CAAC;IAC5B,WAAW,EAAE,OAAO,OAAO,CAAC;IAC5B,WAAW,EAAE,OAAO,UAAU,CAAC;IAC/B,OAAO,EAAE,OAAO,OAAO,CAAC;CAC3B,CAAC;IACF,QAAQ,EAAE,SAAS,CAAC;IACpB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,WAAW,CAAC,EAAE,SAAS,CAAC;IACxB,WAAW,CAAC,EAAE,SAAS,GAAG,IAAI,CAAC,cAAc,CAAC,OAAO,WAAW,CAAC,EAAE,UAAU,CAAC,CAAC;IAI/E,eAAe,CAAC,EAAE,SAAS,CAAC;IAC5B,WAAW,CAAC,EAAE;QACV,OAAO,CAAC,EAAE,YAAY,CAAC;KAC1B,CAAC;CACL;AAED,wBAAgB,eAAe,CAAC,OAAO,EAAE,oBAAoB,2CA0C5D;AAyDD,QAAA,MAAM,WAAW;;;;;mDAShB,CAAC;AASF,OAAO,QAAQ,sBAAsB,CAAC;IAClC,UAAU,uBAAuB;QAC7B,yBAAyB,EAAE,uBAAuB,CAAC;KACtD;IAED,UAAU,mBAAmB;QACzB,yBAAyB,EAAE,oBAAoB,CAAC;KACnD;IAED,UAAU,UAAU;QAChB,yBAAyB,CAAC,EAAE;YACxB,YAAY,CAAC,EAAE,OAAO,CAAC,mBAAmB,CAAC,2BAA2B,CAAC,CAAC,CAAC;YACzE,cAAc,CAAC,EAAE,mBAAmB,CAAC,KAAK,CAAC,CAAC,2BAA2B,CAAC,CAAC;SAC5E,CAAC;KACL;CACJ"}

package/lib/section/SectionHeadline.js

@@ -59,7 +59,9 @@ export function SectionHeadline(inProps) {
   }));
 }
 var getTooltipProps = function getTooltipProps(infoTooltip) {
-  if (!infoTooltip) return null;
+  if (!infoTooltip) {
+    return null;
+  }
   if (/*#__PURE__*/isValidElement(infoTooltip) || typeof infoTooltip === "string") {
     return {
       title: infoTooltip

package/lib/section/__stories__/SectionHeadline.stories.js

@@ -0,0 +1,71 @@
+import { Stack, Typography } from "@mui/material";
+import { FormattedMessage } from "react-intl";
+import { SectionHeadline } from "../SectionHeadline";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+var config = {
+  component: SectionHeadline,
+  title: "components/section/SectionHeadline"
+};
+export default config;
+export var Default = {
+  render: function render() {
+    return /*#__PURE__*/_jsxs(Stack, {
+      spacing: 15,
+      children: [/*#__PURE__*/_jsx(SectionHeadline, {
+        supportText: "Support Text",
+        divider: true,
+        infoTooltipText: "Tooltip Info Text",
+        children: "Section Title"
+      }), /*#__PURE__*/_jsx(SectionHeadline, {
+        children: "Section Title"
+      })]
+    });
+  }
+};
+export var InfoTooltipExamples = {
+  render: function render() {
+    return /*#__PURE__*/_jsxs(Stack, {
+      spacing: 4,
+      children: [/*#__PURE__*/_jsxs(SectionHeadline, {
+        infoTooltipText: "Hello",
+        children: ["Using ", /*#__PURE__*/_jsx("strong", {
+          children: "deprecated"
+        }), " infoTooltipText prop"]
+      }), /*#__PURE__*/_jsx(SectionHeadline, {
+        infoTooltip: "Hello",
+        children: "Using infoTooltip prop, using string directly"
+      }), /*#__PURE__*/_jsx(SectionHeadline, {
+        infoTooltip: /*#__PURE__*/_jsx(FormattedMessage, {
+          id: "stories.formSectionl.infoTooltipExamples.hello",
+          defaultMessage: "Hello"
+        }),
+        children: "Using infoTooltip prop, using FormattedMessage directly"
+      }), /*#__PURE__*/_jsx(SectionHeadline, {
+        infoTooltip: {
+          title: "Hello"
+        },
+        children: "Using infoTooltip prop, using object for title only"
+      }), /*#__PURE__*/_jsx(SectionHeadline, {
+        infoTooltip: {
+          title: "Hello",
+          description: "Lorem ipsum",
+          color: "light"
+        },
+        children: "Using infoTooltip prop, using object for title, description and variant"
+      }), /*#__PURE__*/_jsx(SectionHeadline, {
+        infoTooltip: {
+          customContent: /*#__PURE__*/_jsxs(_Fragment, {
+            children: [/*#__PURE__*/_jsx(Typography, {
+              variant: "subtitle1",
+              children: "Hello"
+            }), /*#__PURE__*/_jsx(Typography, {
+              variant: "body1",
+              children: "Lorem ipsum"
+            })]
+          })
+        },
+        children: "Using infoTooltip prop, using object for custom content"
+      })]
+    });
+  }
+};

package/lib/snackbar/SnackbarProvider.d.ts

@@ -1,6 +1,6 @@
-import { type SnackbarProps } from "@mui/material";
+import type { SnackbarProps } from "@mui/material";
 import { type ReactElement, type ReactNode } from "react";
-import { type UndoSnackbarProps } from "./UndoSnackbar";
+import type { UndoSnackbarProps } from "./UndoSnackbar";
 export interface SnackbarApi {
     showSnackbar: (newSnackbar: ReactElement<Omit<SnackbarProps | UndoSnackbarProps<unknown>, "open">>) => void;
     hideSnackbar: () => void;

package/lib/snackbar/SnackbarProvider.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SnackbarProvider.d.ts","sourceRoot":"","sources":["../../src/snackbar/SnackbarProvider.tsx"],"names":[],"mappings":"AAAA,OAAO,EAA4B,KAAK,aAAa,EAAE,MAAM,eAAe,CAAC;AAC7E,OAAO,EAA+B,KAAK,YAAY,EAAE,KAAK,SAAS,EAA6C,MAAM,OAAO,CAAC;AAGlI,OAAO,EAAE,KAAK,iBAAiB,EAAE,MAAM,gBAAgB,CAAC;AAExD,MAAM,WAAW,WAAW;IACxB,YAAY,EAAE,CAAC,WAAW,EAAE,YAAY,CAAC,IAAI,CAAC,aAAa,GAAG,iBAAiB,CAAC,OAAO,CAAC,EAAE,MAAM,CAAC,CAAC,KAAK,IAAI,CAAC;IAC5G,YAAY,EAAE,MAAM,IAAI,CAAC;CAC5B;AAID,eAAO,MAAM,cAAc,mBAQ1B,CAAC;AAKF,eAAO,MAAM,gBAAgB,GAAI,cAAc;IAAE,QAAQ,CAAC,EAAE,SAAS,CAAA;CAAE,4CA6CtE,CAAC"}
+{"version":3,"file":"SnackbarProvider.d.ts","sourceRoot":"","sources":["../../src/snackbar/SnackbarProvider.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAuB,aAAa,EAAE,MAAM,eAAe,CAAC;AACxE,OAAO,EAA+B,KAAK,YAAY,EAAE,KAAK,SAAS,EAA6C,MAAM,OAAO,CAAC;AAGlI,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,gBAAgB,CAAC;AAExD,MAAM,WAAW,WAAW;IACxB,YAAY,EAAE,CAAC,WAAW,EAAE,YAAY,CAAC,IAAI,CAAC,aAAa,GAAG,iBAAiB,CAAC,OAAO,CAAC,EAAE,MAAM,CAAC,CAAC,KAAK,IAAI,CAAC;IAC5G,YAAY,EAAE,MAAM,IAAI,CAAC;CAC5B;AAID,eAAO,MAAM,cAAc,mBAQ1B,CAAC;AAKF,eAAO,MAAM,gBAAgB,GAAI,cAAc;IAAE,QAAQ,CAAC,EAAE,SAAS,CAAA;CAAE,4CA6CtE,CAAC"}

package/lib/snackbar/UndoSnackbar.d.ts

@@ -1,5 +1,5 @@
 import { type SnackbarProps } from "@mui/material";
-import { type ReactNode } from "react";
+import type { ReactNode } from "react";
 export interface UndoSnackbarProps<Payload> extends Omit<SnackbarProps, "action"> {
     message: ReactNode;
     onUndoClick: (payload?: Payload) => void;

package/lib/snackbar/UndoSnackbar.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"UndoSnackbar.d.ts","sourceRoot":"","sources":["../../src/snackbar/UndoSnackbar.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAoC,KAAK,aAAa,EAAE,MAAM,eAAe,CAAC;AACrF,OAAO,EAAE,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAOvC,MAAM,WAAW,iBAAiB,CAAC,OAAO,CAAE,SAAQ,IAAI,CAAC,aAAa,EAAE,QAAQ,CAAC;IAC7E,OAAO,EAAE,SAAS,CAAC;IACnB,WAAW,EAAE,CAAC,OAAO,CAAC,EAAE,OAAO,KAAK,IAAI,CAAC;IACzC,OAAO,CAAC,EAAE,OAAO,CAAC;CACrB;AAED,eAAO,MAAM,YAAY,GAAI,OAAO,EAAG,oCAAoC,iBAAiB,CAAC,OAAO,CAAC,4CAqBpG,CAAC"}
+{"version":3,"file":"UndoSnackbar.d.ts","sourceRoot":"","sources":["../../src/snackbar/UndoSnackbar.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAoC,KAAK,aAAa,EAAE,MAAM,eAAe,CAAC;AACrF,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAOvC,MAAM,WAAW,iBAAiB,CAAC,OAAO,CAAE,SAAQ,IAAI,CAAC,aAAa,EAAE,QAAQ,CAAC;IAC7E,OAAO,EAAE,SAAS,CAAC;IACnB,WAAW,EAAE,CAAC,OAAO,CAAC,EAAE,OAAO,KAAK,IAAI,CAAC;IACzC,OAAO,CAAC,EAAE,OAAO,CAAC;CACrB;AAED,eAAO,MAAM,YAAY,GAAI,OAAO,EAAG,oCAAoC,iBAAiB,CAAC,OAAO,CAAC,4CAqBpG,CAAC"}

package/lib/stack/Stack.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Stack.d.ts","sourceRoot":"","sources":["../../src/stack/Stack.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,iBAAiB,EAAE,KAAK,SAAS,EAAoC,MAAM,OAAO,CAAC;AAiDjG,UAAU,UAAU;IAChB,aAAa,EAAE,SAAS,CAAC;CAC5B;AAED,MAAM,WAAW,cAAc;IAC3B,EAAE,EAAE,MAAM,CAAC;IACX,QAAQ,EAAE,MAAM,CAAC;IACjB,GAAG,EAAE,MAAM,CAAC;IACZ,KAAK,EAAE,SAAS,CAAC;IACjB,WAAW,CAAC,EAAE,MAAM,CAAC;CACxB;AAED,MAAM,WAAW,UAAU;IACvB,EAAE,EAAE,MAAM,CAAC;IACX,QAAQ,EAAE,MAAM,CAAC;IACjB,mBAAmB,EAAE,OAAO,CAAC;IAC7B,UAAU,CAAC,EAAE,MAAM,CAAC;CACvB;AAED,eAAO,MAAM,KAAK,GAAI,OAAO,iBAAiB,CAAC,UAAU,CAAC,4CAmHzD,CAAC"}
+{"version":3,"file":"Stack.d.ts","sourceRoot":"","sources":["../../src/stack/Stack.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,iBAAiB,EAAE,KAAK,SAAS,EAAoC,MAAM,OAAO,CAAC;AAmDjG,UAAU,UAAU;IAChB,aAAa,EAAE,SAAS,CAAC;CAC5B;AAED,MAAM,WAAW,cAAc;IAC3B,EAAE,EAAE,MAAM,CAAC;IACX,QAAQ,EAAE,MAAM,CAAC;IACjB,GAAG,EAAE,MAAM,CAAC;IACZ,KAAK,EAAE,SAAS,CAAC;IACjB,WAAW,CAAC,EAAE,MAAM,CAAC;CACxB;AAED,MAAM,WAAW,UAAU;IACvB,EAAE,EAAE,MAAM,CAAC;IACX,QAAQ,EAAE,MAAM,CAAC;IACjB,mBAAmB,EAAE,OAAO,CAAC;IAC7B,UAAU,CAAC,EAAE,MAAM,CAAC;CACvB;AAED,eAAO,MAAM,KAAK,GAAI,OAAO,iBAAiB,CAAC,UAAU,CAAC,4CAsHzD,CAAC"}

package/lib/stack/Stack.js

@@ -38,7 +38,9 @@ var sortByParentId = function sortByParentId(nodes) {
 
   // then traverse this tree
   var _preOrderTraverse = function preOrderTraverse(sortTreeNode, fn) {
-    if (sortTreeNode.node) fn(sortTreeNode.node);
+    if (sortTreeNode.node) {
+      fn(sortTreeNode.node);
+    }
     sortTreeNode.children.forEach(function (e) {
       _preOrderTraverse(e, fn);
     });
@@ -137,6 +139,9 @@ export var Stack = function Stack(props) {
   useEffect(function () {
     // execute on location change, set locationUrl for the last breadcrumb to the current location
     setBreadcrumbs(function (old) {
+      if (old.length === 0) {
+        return old;
+      }
       var sorted = sortByParentId(old);
       sorted[sorted.length - 1].locationUrl = location.pathname + location.search; // modify object in place
       return _toConsumableArray(old); // clone (with modified object) to new array to trigger a state update

package/lib/stack/Switch.d.ts

@@ -1,5 +1,5 @@
 import { type ComponentType, type ReactElement, type ReactNode } from "react";
-import { type IStackPageProps } from "./Page";
+import type { IStackPageProps } from "./Page";
 interface IProps {
     initialPage?: string;
     title?: ReactNode;

package/lib/stack/Switch.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Switch.d.ts","sourceRoot":"","sources":["../../src/stack/Switch.tsx"],"names":[],"mappings":"AAAA,OAAO,EAEH,KAAK,aAAa,EAIlB,KAAK,YAAY,EACjB,KAAK,SAAS,EAOjB,MAAM,OAAO,CAAC;AAOf,OAAO,EAAE,KAAK,eAAe,EAAE,MAAM,QAAQ,CAAC;AAG9C,UAAU,MAAM;IACZ,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,QAAQ,EAAE,KAAK,CAAC,YAAY,CAAC,eAAe,CAAC,CAAC,CAAC;IAC/C,uBAAuB,CAAC,EAAE,OAAO,CAAC;CACrC;AAED,eAAO,MAAM,qBAAqB,0CAUhC,CAAC;AACH,wBAAgB,iBAAiB,oBAEhC;AAED,MAAM,WAAW,eAAe;IAC5B,YAAY,EAAE,CAAC,QAAQ,EAAE,MAAM,EAAE,OAAO,EAAE,MAAM,EAAE,MAAM,CAAC,EAAE,MAAM,KAAK,IAAI,CAAC;IAC3E,YAAY,EAAE,CAAC,QAAQ,EAAE,MAAM,EAAE,OAAO,EAAE,MAAM,EAAE,MAAM,CAAC,EAAE,MAAM,KAAK,MAAM,CAAC;IAC7E,yBAAyB,EAAE,CAAC,KAAK,CAAC,EAAE,SAAS,KAAK,IAAI,CAAC;IACvD,EAAE,CAAC,EAAE,MAAM,CAAC;CACf;AAiBD,wBAAgB,cAAc,IAAI,CAAC,aAAa,CAAC,MAAM,CAAC,EAAE,eAAe,CAAC,CA0BzE;AAsID,wBAAgB,WAAW,CAAC,KAAK,EAAE,MAAM,2CAGxC"}
+{"version":3,"file":"Switch.d.ts","sourceRoot":"","sources":["../../src/stack/Switch.tsx"],"names":[],"mappings":"AAAA,OAAO,EAEH,KAAK,aAAa,EAIlB,KAAK,YAAY,EACjB,KAAK,SAAS,EAOjB,MAAM,OAAO,CAAC;AAOf,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,QAAQ,CAAC;AAG9C,UAAU,MAAM;IACZ,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,QAAQ,EAAE,KAAK,CAAC,YAAY,CAAC,eAAe,CAAC,CAAC,CAAC;IAC/C,uBAAuB,CAAC,EAAE,OAAO,CAAC;CACrC;AAED,eAAO,MAAM,qBAAqB,0CAUhC,CAAC;AACH,wBAAgB,iBAAiB,oBAEhC;AAED,MAAM,WAAW,eAAe;IAC5B,YAAY,EAAE,CAAC,QAAQ,EAAE,MAAM,EAAE,OAAO,EAAE,MAAM,EAAE,MAAM,CAAC,EAAE,MAAM,KAAK,IAAI,CAAC;IAC3E,YAAY,EAAE,CAAC,QAAQ,EAAE,MAAM,EAAE,OAAO,EAAE,MAAM,EAAE,MAAM,CAAC,EAAE,MAAM,KAAK,MAAM,CAAC;IAC7E,yBAAyB,EAAE,CAAC,KAAK,CAAC,EAAE,SAAS,KAAK,IAAI,CAAC;IACvD,EAAE,CAAC,EAAE,MAAM,CAAC;CACf;AAiBD,wBAAgB,cAAc,IAAI,CAAC,aAAa,CAAC,MAAM,CAAC,EAAE,eAAe,CAAC,CA0BzE;AAoJD,wBAAgB,WAAW,CAAC,KAAK,EAAE,MAAM,2CAGxC"}

package/lib/stack/Switch.js

@@ -86,7 +86,9 @@ var StackSwitchInner = function StackSwitchInner(props, ref) {
   var location = useLocation();
   var activePage;
   var isInitialPage = useCallback(function (pageName) {
-    if (!pageName) return true;
+    if (!pageName) {
+      return true;
+    }
     var initialPage = props.initialPage;
     if (!initialPage) {
       initialPage = props.children[0].props.name;
@@ -104,8 +106,12 @@ var StackSwitchInner = function StackSwitchInner(props, ref) {
     var targetUrl = getTargetUrl(pageName, payload, subUrl);
     history.push(targetUrl);
     if (isInitialPage(pageName)) {
-      if (payload) throw new Error("activating the initialPage must not have a payload");
-      if (subUrl) throw new Error("activating the initialPage must not have a subUrl");
+      if (payload) {
+        throw new Error("activating the initialPage must not have a payload");
+      }
+      if (subUrl) {
+        throw new Error("activating the initialPage must not have a subUrl");
+      }
     }
   }, [getTargetUrl, history, isInitialPage]);
   var api = useMemo(function () {
@@ -147,11 +153,15 @@ var StackSwitchInner = function StackSwitchInner(props, ref) {
       });
     }
   }
-  if (!match) return null;
+  if (!match) {
+    return null;
+  }
   var routeMatched = false; //to prevent rendering the initial page when a route is matched (as the initial would also match)
   return /*#__PURE__*/_jsxs(_Fragment, {
     children: [Children.map(props.children, function (page) {
-      if (isInitialPage(page.props.name)) return null; // don't render initial Page
+      if (isInitialPage(page.props.name)) {
+        return null;
+      } // don't render initial Page
       var path = "".concat(removeTrailingSlash(subRoutePrefix), "/:id/").concat(page.props.name);
       if (matchPath(location.pathname, {
         path: path
@@ -162,13 +172,17 @@ var StackSwitchInner = function StackSwitchInner(props, ref) {
       return /*#__PURE__*/_jsx(RouteComponent, {
         path: path,
         children: function children(routeProps) {
-          if (!routeProps.match) return null;
+          if (!routeProps.match) {
+            return null;
+          }
           return renderRoute(page, routeProps);
         }
       });
     }), !routeMatched && /*#__PURE__*/_jsx(SubRouteIndexRoute, {
       children: function children(routeProps) {
-        if (!routeProps.match) return null;
+        if (!routeProps.match) {
+          return null;
+        }
         // now render initial page (as last route so it's a fallback)
         var initialPage = null;
         Children.forEach(props.children, function (page) {

package/lib/stack/SwitchMeta.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SwitchMeta.d.ts","sourceRoot":"","sources":["../../src/stack/SwitchMeta.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,KAAK,WAAW,EAAiB,KAAK,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAE3F,OAAO,EAAE,eAAe,EAAE,MAAM,OAAO,CAAC;AAExC,KAAK,MAAM,GAAG,iBAAiB,CAAC;IAC5B,EAAE,EAAE,MAAM,CAAC;IACX,UAAU,EAAE,MAAM,CAAC;IACnB,mBAAmB,EAAE,OAAO,CAAC;CAChC,CAAC,CAAC;AAIH,qBAAa,eAAgB,SAAQ,SAAS,CAAC,MAAM,CAAC;IAClD,OAAc,WAAW,iEAAmB;IACpC,OAAO,EAAE,WAAW,CAAC,OAAO,eAAe,CAAC,CAAC;IAErD,OAAO,CAAC,QAAQ,CAAS;IAElB,MAAM;IAWN,iBAAiB;IASjB,kBAAkB,CAAC,SAAS,EAAE,MAAM;IAWpC,oBAAoB;CAI9B"}
+{"version":3,"file":"SwitchMeta.d.ts","sourceRoot":"","sources":["../../src/stack/SwitchMeta.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,KAAK,WAAW,EAAiB,KAAK,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAE3F,OAAO,EAAE,eAAe,EAAE,MAAM,OAAO,CAAC;AAExC,KAAK,MAAM,GAAG,iBAAiB,CAAC;IAC5B,EAAE,EAAE,MAAM,CAAC;IACX,UAAU,EAAE,MAAM,CAAC;IACnB,mBAAmB,EAAE,OAAO,CAAC;CAChC,CAAC,CAAC;AAIH,qBAAa,eAAgB,SAAQ,SAAS,CAAC,MAAM,CAAC;IAClD,OAAc,WAAW,iEAAmB;IACpC,OAAO,EAAE,WAAW,CAAC,OAAO,eAAe,CAAC,CAAC;IAErD,OAAO,CAAC,QAAQ,CAAS;IAElB,MAAM;IAWN,iBAAiB;IAWjB,kBAAkB,CAAC,SAAS,EAAE,MAAM;IAapC,oBAAoB;CAM9B"}

package/lib/stack/SwitchMeta.js

@@ -45,7 +45,9 @@ export var StackSwitchMeta = /*#__PURE__*/function (_Component) {
   }, {
     key: "componentDidMount",
     value: function componentDidMount() {
-      if (!this.context) throw new Error("Switch must be wrapped by a Stack");
+      if (!this.context) {
+        throw new Error("Switch must be wrapped by a Stack");
+      }
       this.context.addSwitchMeta(this.props.id, {
         parentId: this.parentId,
         activePage: this.props.activePage,
@@ -55,7 +57,9 @@ export var StackSwitchMeta = /*#__PURE__*/function (_Component) {
   }, {
     key: "componentDidUpdate",
     value: function componentDidUpdate(prevProps) {
-      if (!this.context) throw new Error("Switch must be wrapped by a Stack");
+      if (!this.context) {
+        throw new Error("Switch must be wrapped by a Stack");
+      }
       if (this.props.activePage !== prevProps.activePage || this.props.isInitialPageActive !== prevProps.isInitialPageActive) {
         this.context.addSwitchMeta(this.props.id, {
           parentId: this.parentId,
@@ -67,7 +71,9 @@ export var StackSwitchMeta = /*#__PURE__*/function (_Component) {
   }, {
     key: "componentWillUnmount",
     value: function componentWillUnmount() {
-      if (!this.context) throw new Error("Switch must be wrapped by a Stack");
+      if (!this.context) {
+        throw new Error("Switch must be wrapped by a Stack");
+      }
       this.context.removeSwitchMeta(this.props.id);
     }
   }]);

package/lib/stack/__stories__/RouterTabsNestedStack.stories.js

@@ -0,0 +1,51 @@
+import { Button, RouterTab, RouterTabs, Stack, StackBreadcrumbs, StackPage, StackSwitch, StackSwitchApiContext } from "@comet/admin";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export default {
+  title: "components/stack/RouterTabsNestedStack"
+};
+export var RouterTabsWithNestedStack = {
+  render: function render() {
+    return /*#__PURE__*/_jsxs(Stack, {
+      topLevelTitle: "Root Stack",
+      children: [/*#__PURE__*/_jsx(StackBreadcrumbs, {}), /*#__PURE__*/_jsxs(RouterTabs, {
+        children: [/*#__PURE__*/_jsx(RouterTab, {
+          label: "Page 1",
+          path: "",
+          children: /*#__PURE__*/_jsxs(Stack, {
+            topLevelTitle: "Nested Stack",
+            children: [/*#__PURE__*/_jsx(StackBreadcrumbs, {}), /*#__PURE__*/_jsxs(StackSwitch, {
+              children: [/*#__PURE__*/_jsx(StackPage, {
+                name: "table",
+                children: /*#__PURE__*/_jsx(StackSwitchApiContext.Consumer, {
+                  children: function children(stackApi) {
+                    return /*#__PURE__*/_jsx(Button, {
+                      onClick: function onClick() {
+                        return stackApi.activatePage("edit", "test");
+                      },
+                      children: "Test"
+                    });
+                  }
+                })
+              }), /*#__PURE__*/_jsx(StackPage, {
+                name: "edit",
+                title: "Edit",
+                children: /*#__PURE__*/_jsx(RouterTabs, {
+                  children: /*#__PURE__*/_jsx(RouterTab, {
+                    label: "Page 3",
+                    path: "",
+                    children: "Page 3"
+                  })
+                })
+              })]
+            })]
+          })
+        }), /*#__PURE__*/_jsx(RouterTab, {
+          label: "Page 2",
+          path: "/page2",
+          children: "Page 2"
+        })]
+      })]
+    });
+  },
+  name: "RouterTabs with nested Stack"
+};

package/lib/stack/__stories__/Stack.stories.js

@@ -0,0 +1,14 @@
+import { Stack, StackBreadcrumbs } from "@comet/admin";
+import { Typography } from "@mui/material";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export default {
+  title: "components/stack/Stack"
+};
+export var _Stack = function _Stack() {
+  return /*#__PURE__*/_jsxs(Stack, {
+    topLevelTitle: "Stack",
+    children: [/*#__PURE__*/_jsx(StackBreadcrumbs, {}), /*#__PURE__*/_jsx(Typography, {
+      children: "Foo"
+    })]
+  });
+};

package/lib/stack/__stories__/StackBackButton.stories.js

@@ -0,0 +1,50 @@
+import { Stack, StackBackButton, StackBreadcrumbs, StackPage, StackSwitch, StackSwitchApiContext } from "@comet/admin";
+import { useContext } from "react";
+import { Redirect, Route, Switch } from "react-router";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+function Page1() {
+  var switchApi = useContext(StackSwitchApiContext);
+  return /*#__PURE__*/_jsx("button", {
+    onClick: function onClick(e) {
+      switchApi.activatePage("page2", "test");
+    },
+    children: "activate page2"
+  });
+}
+function Story() {
+  return /*#__PURE__*/_jsxs(Stack, {
+    topLevelTitle: "Stack",
+    children: [/*#__PURE__*/_jsxs("div", {
+      style: {
+        display: "flex",
+        flexDirection: "row"
+      },
+      children: [/*#__PURE__*/_jsx(StackBackButton, {}), /*#__PURE__*/_jsx(StackBreadcrumbs, {})]
+    }), /*#__PURE__*/_jsxs(StackSwitch, {
+      children: [/*#__PURE__*/_jsx(StackPage, {
+        name: "page1",
+        children: /*#__PURE__*/_jsx(Page1, {})
+      }), /*#__PURE__*/_jsx(StackPage, {
+        name: "page2",
+        children: "page2-2"
+      })]
+    })]
+  });
+}
+export default {
+  title: "components/stack/StackBackButton"
+};
+export var _StackBackButton = function _StackBackButton() {
+  return /*#__PURE__*/_jsxs(Switch, {
+    children: [/*#__PURE__*/_jsx(Route, {
+      exact: true,
+      path: "/",
+      children: /*#__PURE__*/_jsx(Redirect, {
+        to: "/foo"
+      })
+    }), /*#__PURE__*/_jsx(Route, {
+      path: "/foo",
+      children: /*#__PURE__*/_jsx(Story, {})
+    })]
+  });
+};

package/lib/stack/__stories__/StackBreadcrumbs.stories.js

@@ -0,0 +1,139 @@
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : i + ""; }
+function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+function _toConsumableArray(r) { return _arrayWithoutHoles(r) || _iterableToArray(r) || _unsupportedIterableToArray(r) || _nonIterableSpread(); }
+function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
+function _iterableToArray(r) { if ("undefined" != typeof Symbol && null != r[Symbol.iterator] || null != r["@@iterator"]) return Array.from(r); }
+function _arrayWithoutHoles(r) { if (Array.isArray(r)) return _arrayLikeToArray(r); }
+function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
+import { Stack, StackBreadcrumbs, useStackApi } from "@comet/admin";
+import { jsx as _jsx } from "react/jsx-runtime";
+var singleItem = [{
+  id: "one",
+  parentId: "",
+  url: "/one",
+  title: "Breadcrumb One"
+}];
+var twoItems = [].concat(singleItem, [{
+  id: "two",
+  parentId: "one",
+  url: "/two",
+  title: "BC 2"
+}]);
+var threeItems = [].concat(_toConsumableArray(twoItems), [{
+  id: "three",
+  parentId: "two",
+  url: "/three",
+  title: "BrdCrmb 3"
+}]);
+var fiveItems = [].concat(_toConsumableArray(threeItems), [{
+  id: "four",
+  parentId: "three",
+  url: "/four",
+  title: "Really long Breadcrumb Number Four"
+}, {
+  id: "five",
+  parentId: "four",
+  url: "/five",
+  title: "Breadcrumb Five"
+}]);
+var eightItems = [].concat(_toConsumableArray(fiveItems), [{
+  id: "six",
+  parentId: "five",
+  url: "/six",
+  title: "Breadcrumb Six"
+}, {
+  id: "seven",
+  parentId: "six",
+  url: "/seven",
+  title: "BrdCrmb 7"
+}, {
+  id: "eight",
+  parentId: "seven",
+  url: "/eight",
+  title: "Breadcrumb Eight"
+}]);
+var allBradcrumbItemsGroupOne = {
+  Single: singleItem,
+  Two: twoItems,
+  Three: threeItems,
+  Five: fiveItems,
+  Eight: eightItems
+};
+var allBradcrumbItemsGroupTwo = {
+  Single: singleItem.map(function (item) {
+    return _objectSpread(_objectSpread({}, item), {}, {
+      title: "".concat(item.title, " group 2")
+    });
+  }),
+  Two: twoItems.map(function (item) {
+    return _objectSpread(_objectSpread({}, item), {}, {
+      title: "".concat(item.title, " group 2")
+    });
+  }),
+  Three: threeItems.map(function (item) {
+    return _objectSpread(_objectSpread({}, item), {}, {
+      title: "".concat(item.title, " group 2")
+    });
+  }),
+  Five: fiveItems.map(function (item) {
+    return _objectSpread(_objectSpread({}, item), {}, {
+      title: "".concat(item.title, " group 2")
+    });
+  }),
+  Eight: eightItems.map(function (item) {
+    return _objectSpread(_objectSpread({}, item), {}, {
+      title: "".concat(item.title, " group 2")
+    });
+  })
+};
+var allBreadcrumbGroups = {
+  Normal: allBradcrumbItemsGroupOne,
+  "Increased length": allBradcrumbItemsGroupTwo
+};
+function Story(_ref) {
+  var selectedBreadcrumbsNumber = _ref.selectedBreadcrumbsNumber,
+    selectedBreadcrumbsGroup = _ref.selectedBreadcrumbsGroup;
+  var stackApi = useStackApi();
+  if (!stackApi) {
+    return null;
+  }
+  stackApi.breadCrumbs = allBreadcrumbGroups[selectedBreadcrumbsGroup][selectedBreadcrumbsNumber];
+  return /*#__PURE__*/_jsx(StackBreadcrumbs, {});
+}
+export default {
+  title: "components/stack/StackBreadcrumbs",
+  args: {
+    selectedBreadcrumbsNumber: "Three",
+    selectedBreadcrumbsGroup: "Normal"
+  },
+  argTypes: {
+    selectedBreadcrumbsNumber: {
+      name: "Number of items",
+      control: "select",
+      options: Object.keys(allBradcrumbItemsGroupOne)
+    },
+    selectedBreadcrumbsGroup: {
+      name: "Item group",
+      control: "select",
+      options: Object.keys(allBreadcrumbGroups)
+    }
+  }
+};
+export var _StackBreadcrumbs = {
+  render: function render(_ref2) {
+    var selectedBreadcrumbsGroup = _ref2.selectedBreadcrumbsGroup,
+      selectedBreadcrumbsNumber = _ref2.selectedBreadcrumbsNumber;
+    return /*#__PURE__*/_jsx(Stack, {
+      topLevelTitle: "Stack",
+      children: /*#__PURE__*/_jsx(Story, {
+        selectedBreadcrumbsGroup: selectedBreadcrumbsGroup,
+        selectedBreadcrumbsNumber: selectedBreadcrumbsNumber
+      })
+    });
+  }
+};

package/lib/stack/__stories__/StackBreadcrumbsTabs.stories.js

@@ -0,0 +1,47 @@
+import { RouterTab, RouterTabs, Stack, StackBreadcrumbs, StackLink, StackPage, StackSwitch } from "@comet/admin";
+import { useLocation } from "react-router";
+import { jsxs as _jsxs, jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
+export default {
+  title: "components/stack/StackBreadcrumbsTabs"
+};
+export var StackBreadcrumbsWithNestedTabs = {
+  render: function render() {
+    var location = useLocation();
+    return /*#__PURE__*/_jsxs(_Fragment, {
+      children: [/*#__PURE__*/_jsxs("p", {
+        children: ["Pathname: ", location.pathname]
+      }), /*#__PURE__*/_jsxs(Stack, {
+        topLevelTitle: "Root Stack",
+        children: [/*#__PURE__*/_jsx(StackBreadcrumbs, {}), /*#__PURE__*/_jsxs(StackSwitch, {
+          children: [/*#__PURE__*/_jsx(StackPage, {
+            name: "table",
+            children: /*#__PURE__*/_jsxs(RouterTabs, {
+              children: [/*#__PURE__*/_jsx(RouterTab, {
+                label: "Tab 1",
+                path: "",
+                children: /*#__PURE__*/_jsx("p", {
+                  children: "Tab 1"
+                })
+              }), /*#__PURE__*/_jsxs(RouterTab, {
+                label: "Tab 2",
+                path: "/tab2",
+                children: [/*#__PURE__*/_jsx("p", {
+                  children: "Tab 2"
+                }), /*#__PURE__*/_jsx(StackLink, {
+                  pageName: "edit",
+                  payload: "test",
+                  children: "Edit"
+                })]
+              })]
+            })
+          }), /*#__PURE__*/_jsx(StackPage, {
+            name: "edit",
+            title: "Edit",
+            children: "Edit"
+          })]
+        })]
+      })]
+    });
+  },
+  name: "Stack Breadcrumbs with nested Tabs"
+};

package/lib/stack/__stories__/StackCustomSeparator.stories.js

@@ -0,0 +1,47 @@
+import { Stack, StackBreadcrumbs, StackPage, StackSwitch, StackSwitchApiContext } from "@comet/admin";
+import { CometColor } from "@comet/admin-icons";
+import { useContext } from "react";
+import { Redirect, Route, Switch } from "react-router";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+function Page1() {
+  var switchApi = useContext(StackSwitchApiContext);
+  return /*#__PURE__*/_jsx("button", {
+    onClick: function onClick(e) {
+      switchApi.activatePage("page2", "test");
+    },
+    children: "activate page2"
+  });
+}
+function Story() {
+  return /*#__PURE__*/_jsxs(Stack, {
+    topLevelTitle: "Stack",
+    children: [/*#__PURE__*/_jsx(StackBreadcrumbs, {
+      separator: /*#__PURE__*/_jsx(CometColor, {})
+    }), /*#__PURE__*/_jsxs(StackSwitch, {
+      children: [/*#__PURE__*/_jsx(StackPage, {
+        name: "page1",
+        children: /*#__PURE__*/_jsx(Page1, {})
+      }), /*#__PURE__*/_jsx(StackPage, {
+        name: "page2",
+        children: "page2-2"
+      })]
+    })]
+  });
+}
+export default {
+  title: "components/stack/StackCustomSeparator"
+};
+export var StackCustomSeparator = function StackCustomSeparator() {
+  return /*#__PURE__*/_jsxs(Switch, {
+    children: [/*#__PURE__*/_jsx(Route, {
+      exact: true,
+      path: "/",
+      children: /*#__PURE__*/_jsx(Redirect, {
+        to: "/foo"
+      })
+    }), /*#__PURE__*/_jsx(Route, {
+      path: "/foo",
+      children: /*#__PURE__*/_jsx(Story, {})
+    })]
+  });
+};