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

package/lib/form/file/__stories__/FileSelectMultipleExamples.stories.js

@@ -0,0 +1,187 @@
+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 _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 _slicedToArray(r, e) { return _arrayWithHoles(r) || _iterableToArrayLimit(r, e) || _unsupportedIterableToArray(r, e) || _nonIterableRest(); }
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure 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 _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; }
+function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t["return"] && (u = t["return"](), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
+function _arrayWithHoles(r) { if (Array.isArray(r)) return r; }
+import { Box, Grid, Typography } from "@mui/material";
+import { useState } from "react";
+import { FileSelect } from "../../../form/file/FileSelect";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+var dummyFiles = [{
+  name: "lorem ipsum.png",
+  size: 3e5
+}, {
+  name: "This is a file with a really long name to test truncating in the file list.jpeg",
+  size: 6e6
+}, {
+  name: "failed.png",
+  error: true
+}];
+var dummyFileDownload = function dummyFileDownload(file) {
+  alert("Pretend \"".concat(file.name, "\" was just downloaded."));
+};
+var SingleFileSelectStory = function SingleFileSelectStory(_ref) {
+  var noBackground = _ref.noBackground,
+    hasExistingFiles = _ref.hasExistingFiles;
+  var _useState = useState(hasExistingFiles ? dummyFiles[0] : undefined),
+    _useState2 = _slicedToArray(_useState, 2),
+    file = _useState2[0],
+    setFile = _useState2[1];
+  var _useState3 = useState(false),
+    _useState4 = _slicedToArray(_useState3, 2),
+    tooManyFilesSelected = _useState4[0],
+    setTooManyFilesSelected = _useState4[1];
+  return /*#__PURE__*/_jsxs(Box, {
+    padding: 4,
+    sx: {
+      backgroundColor: noBackground ? "transparent" : "white"
+    },
+    children: [/*#__PURE__*/_jsx(Typography, {
+      variant: "h6",
+      gutterBottom: true,
+      children: "Single File Select"
+    }), /*#__PURE__*/_jsx(FileSelect, {
+      onDrop: function onDrop(acceptedFiles, rejectedFiles) {
+        var tooManyFilesWereDropped = rejectedFiles.some(function (rejection) {
+          return rejection.errors.some(function (error) {
+            return error.code === "too-many-files";
+          });
+        });
+        setTooManyFilesSelected(tooManyFilesWereDropped);
+        if (!tooManyFilesWereDropped) {
+          if (acceptedFiles.length > 0) {
+            setFile({
+              name: acceptedFiles[0].name,
+              size: acceptedFiles[0].size
+            });
+          }
+          if (rejectedFiles.length > 0) {
+            setFile({
+              name: rejectedFiles[0].file.name,
+              error: true
+            });
+          }
+        }
+      },
+      onRemove: function onRemove() {
+        setFile(undefined);
+      },
+      onDownload: dummyFileDownload,
+      maxFileSize: 1024 * 1024 * 5 // 5 MB
+      ,
+      files: file ? [file] : [],
+      error: tooManyFilesSelected ? "Selection was canceled. You can only select one file." : undefined
+    })]
+  });
+};
+var MultipleFileSelectStory = function MultipleFileSelectStory(_ref2) {
+  var noBackground = _ref2.noBackground,
+    hasExistingFiles = _ref2.hasExistingFiles;
+  var _useState5 = useState(hasExistingFiles ? dummyFiles : []),
+    _useState6 = _slicedToArray(_useState5, 2),
+    files = _useState6[0],
+    setFiles = _useState6[1];
+  var _useState7 = useState(false),
+    _useState8 = _slicedToArray(_useState7, 2),
+    tooManyFilesSelected = _useState8[0],
+    setTooManyFilesSelected = _useState8[1];
+  var maxNumberOfFiles = 4;
+  return /*#__PURE__*/_jsxs(Box, {
+    padding: 4,
+    sx: {
+      backgroundColor: noBackground ? "transparent" : "white"
+    },
+    children: [/*#__PURE__*/_jsx(Typography, {
+      variant: "h6",
+      gutterBottom: true,
+      children: "Multiple File Select"
+    }), /*#__PURE__*/_jsx(FileSelect, {
+      onDrop: function onDrop(acceptedFiles, rejectedFiles) {
+        var tooManyFilesWereDropped = rejectedFiles.some(function (rejection) {
+          return rejection.errors.some(function (error) {
+            return error.code === "too-many-files";
+          });
+        });
+        setTooManyFilesSelected(tooManyFilesWereDropped);
+        if (!tooManyFilesWereDropped) {
+          setFiles(function (existingFiles) {
+            return [].concat(_toConsumableArray(existingFiles), _toConsumableArray(acceptedFiles.map(function (file) {
+              return {
+                name: file.name,
+                size: file.size
+              };
+            })), _toConsumableArray(rejectedFiles.map(function (file) {
+              return {
+                name: file.file.name,
+                error: true
+              };
+            })));
+          });
+        }
+      },
+      onRemove: function onRemove(fileToRemove) {
+        return setFiles(files.filter(function (file) {
+          return file.name !== fileToRemove.name;
+        }));
+      },
+      onDownload: dummyFileDownload,
+      files: files,
+      maxFiles: maxNumberOfFiles,
+      maxFileSize: 1024 * 1024 * 5 // 5 MB
+      ,
+      error: tooManyFilesSelected ? "Selection was canceled. You can only select a maximum of ".concat(maxNumberOfFiles, " files, please reduce your selection.") : undefined
+    })]
+  });
+};
+export default {
+  title: "components/form/File",
+  args: {
+    noBackground: false
+  },
+  argTypes: {
+    noBackground: {
+      name: "No background",
+      control: "boolean"
+    }
+  }
+};
+export var FileSelectMultipleExamples = {
+  render: function render(_ref3) {
+    var noBackground = _ref3.noBackground;
+    return /*#__PURE__*/_jsx("div", {
+      children: /*#__PURE__*/_jsxs(Grid, {
+        container: true,
+        spacing: 4,
+        children: [/*#__PURE__*/_jsx(Grid, {
+          size: 6,
+          children: /*#__PURE__*/_jsx(SingleFileSelectStory, {
+            noBackground: noBackground
+          })
+        }), /*#__PURE__*/_jsx(Grid, {
+          size: 6,
+          children: /*#__PURE__*/_jsx(MultipleFileSelectStory, {
+            noBackground: noBackground
+          })
+        }), /*#__PURE__*/_jsx(Grid, {
+          size: 6,
+          children: /*#__PURE__*/_jsx(SingleFileSelectStory, {
+            noBackground: noBackground,
+            hasExistingFiles: true
+          })
+        }), /*#__PURE__*/_jsx(Grid, {
+          size: 6,
+          children: /*#__PURE__*/_jsx(MultipleFileSelectStory, {
+            noBackground: noBackground,
+            hasExistingFiles: true
+          })
+        })]
+      })
+    });
+  },
+  name: "File Select (multiple examples)"
+};

package/lib/helpers/useTopOffset.js

@@ -13,7 +13,7 @@ export var useTopOffset = function useTopOffset(ref) {
   useEffect(function () {
     var updateTopOffset = function updateTopOffset() {
       if (ref.current) {
-        setTopOffset(ref.current.getBoundingClientRect().top);
+        setTopOffset(ref.current.getBoundingClientRect().top + window.scrollY);
       }
     };
     updateTopOffset();

package/lib/tabs/__stories__/DynamicTabs.stories.js

@@ -0,0 +1,84 @@
+function _slicedToArray(r, e) { return _arrayWithHoles(r) || _iterableToArrayLimit(r, e) || _unsupportedIterableToArray(r, e) || _nonIterableRest(); }
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure 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 _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; }
+function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t["return"] && (u = t["return"](), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
+function _arrayWithHoles(r) { if (Array.isArray(r)) return r; }
+import { Button, RouterTab, RouterTabs, Tab, Tabs } from "@comet/admin";
+import { Typography } from "@mui/material";
+import { useState } from "react";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+export var DynamicRouterTabs = function DynamicRouterTabs(_ref) {
+  var showFourthTab = _ref.showFourthTab;
+  var content = ["Two", "Three"];
+  return /*#__PURE__*/_jsxs(RouterTabs, {
+    children: [/*#__PURE__*/_jsx(RouterTab, {
+      label: "One",
+      path: "",
+      children: "One"
+    }), content.map(function (value) {
+      return /*#__PURE__*/_jsx(RouterTab, {
+        label: value,
+        path: "/".concat(value),
+        children: value
+      }, value);
+    }), showFourthTab && /*#__PURE__*/_jsx(RouterTab, {
+      label: "Four",
+      path: "/four",
+      children: "Four"
+    })]
+  });
+};
+export var DynamicTabs = function DynamicTabs(_ref2) {
+  var showFourthTab = _ref2.showFourthTab;
+  var content = ["Two", "Three"];
+  return /*#__PURE__*/_jsxs(Tabs, {
+    children: [/*#__PURE__*/_jsx(Tab, {
+      label: "One",
+      children: "One"
+    }), content.map(function (value) {
+      return /*#__PURE__*/_jsx(Tab, {
+        label: value,
+        children: value
+      }, value);
+    }), showFourthTab && /*#__PURE__*/_jsx(Tab, {
+      label: "Four",
+      children: "Four"
+    })]
+  });
+};
+export default {
+  title: "components/tabs/Dynamic Tabs",
+  excludeStories: ["DynamicRouterTabs", "DynamicTabs"]
+};
+export var DynamicTabsAndRouterTabs = {
+  render: function render() {
+    var _useState = useState(false),
+      _useState2 = _slicedToArray(_useState, 2),
+      showFourthTab = _useState2[0],
+      setShowFourthTab = _useState2[1];
+    return /*#__PURE__*/_jsxs(_Fragment, {
+      children: [/*#__PURE__*/_jsxs(Button, {
+        onClick: function onClick() {
+          return setShowFourthTab(function (show) {
+            return !show;
+          });
+        },
+        children: [showFourthTab ? "Hide" : "Show", " fourth tab"]
+      }), /*#__PURE__*/_jsx(Typography, {
+        py: 4,
+        variant: "h2",
+        children: "Tabs:"
+      }), /*#__PURE__*/_jsx(DynamicTabs, {
+        showFourthTab: showFourthTab
+      }), /*#__PURE__*/_jsx(Typography, {
+        py: 4,
+        variant: "h2",
+        children: "RouterTabs:"
+      }), /*#__PURE__*/_jsx(DynamicRouterTabs, {
+        showFourthTab: showFourthTab
+      })]
+    });
+  },
+  name: "Dynamic Tabs and RouterTabs"
+};

package/lib/tabs/__stories__/NestedStackSwitchWithRouterTabs.stories.js

@@ -0,0 +1,84 @@
+import { RouterTab, RouterTabs, Stack, StackBreadcrumbs, StackPage, StackSwitch } from "@comet/admin";
+import { useLocation } from "react-router";
+import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
+export default {
+  title: "components/tabs/Nested StackSwitch with RouterTabs"
+};
+export var NestedStackSwitchWithRouterTabs = {
+  render: function render() {
+    var location = useLocation();
+    return /*#__PURE__*/_jsxs("div", {
+      children: [/*#__PURE__*/_jsxs("p", {
+        children: ["Location: ", location.pathname]
+      }), /*#__PURE__*/_jsxs(Stack, {
+        topLevelTitle: "Root Stack",
+        children: [/*#__PURE__*/_jsx(StackBreadcrumbs, {}), /*#__PURE__*/_jsxs(RouterTabs, {
+          children: [/*#__PURE__*/_jsx(RouterTab, {
+            label: "Page 1",
+            path: "",
+            children: /*#__PURE__*/_jsxs(StackSwitch, {
+              children: [/*#__PURE__*/_jsx(StackPage, {
+                name: "table",
+                children: /*#__PURE__*/_jsxs(RouterTabs, {
+                  children: [/*#__PURE__*/_jsx(RouterTab, {
+                    label: "Page 3",
+                    path: "",
+                    children: "Page 3"
+                  }), /*#__PURE__*/_jsxs(RouterTab, {
+                    label: "Page 4",
+                    path: "/page4",
+                    children: ["Now the first level of RouterTabs (Page 1 and 2) disappeared", /*#__PURE__*/_jsxs(StackSwitch, {
+                      children: [/*#__PURE__*/_jsx(StackPage, {
+                        name: "table",
+                        children: /*#__PURE__*/_jsxs(RouterTabs, {
+                          children: [/*#__PURE__*/_jsx(RouterTab, {
+                            label: "Page 5",
+                            path: "",
+                            children: "Page 5"
+                          }), /*#__PURE__*/_jsxs(RouterTab, {
+                            label: "Page 6",
+                            path: "/page6",
+                            children: ["Now the second level of RouterTabs (Page 3 and 4) also disappeared", /*#__PURE__*/_jsxs(StackSwitch, {
+                              children: [/*#__PURE__*/_jsx(StackPage, {
+                                name: "table",
+                                children: /*#__PURE__*/_jsxs(RouterTabs, {
+                                  children: [/*#__PURE__*/_jsx(RouterTab, {
+                                    label: "Page 7",
+                                    path: "",
+                                    children: "Page 7"
+                                  }), /*#__PURE__*/_jsx(RouterTab, {
+                                    label: "Page 8",
+                                    path: "/page8",
+                                    children: "Page 8"
+                                  })]
+                                })
+                              }), /*#__PURE__*/_jsx(StackPage, {
+                                name: "stackpage-4",
+                                children: "StackPage 4"
+                              })]
+                            })]
+                          })]
+                        })
+                      }), /*#__PURE__*/_jsx(StackPage, {
+                        name: "stackpage-3",
+                        children: "StackPage 3"
+                      })]
+                    })]
+                  })]
+                })
+              }), /*#__PURE__*/_jsx(StackPage, {
+                name: "stackpage-2",
+                children: "StackPage 2"
+              })]
+            })
+          }), /*#__PURE__*/_jsx(RouterTab, {
+            label: "Page 2",
+            path: "/page2",
+            children: "Page 2"
+          })]
+        })]
+      })]
+    });
+  },
+  name: "Nested StackSwitch with RouterTabs"
+};

package/lib/tabs/__stories__/OverflowIssues.stories.js

@@ -0,0 +1,224 @@
+function _slicedToArray(r, e) { return _arrayWithHoles(r) || _iterableToArrayLimit(r, e) || _unsupportedIterableToArray(r, e) || _nonIterableRest(); }
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure 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 _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; }
+function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t["return"] && (u = t["return"](), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
+function _arrayWithHoles(r) { if (Array.isArray(r)) return r; }
+import { MainContent, RouterTab, RouterTabs, Toolbar, ToolbarAutomaticTitleItem } from "@comet/admin";
+import { Box, Tab, Tabs, Typography } from "@mui/material";
+import { useState } from "react";
+import { MasterLayoutDecorator } from "../../../.storybook/decorators/MasterLayout.decorator";
+
+// Make sure the story is not too tall and can be scrolled - setting the story-height in the config only affects the min-height and does not make the content scrollable
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+var MaxHeightDecorator = function MaxHeightDecorator(Story) {
+  return /*#__PURE__*/_jsx(Box, {
+    maxHeight: "400px",
+    children: /*#__PURE__*/_jsx(Story, {})
+  });
+};
+var storyConfig = {
+  title: "components/tabs/Overflow Issues",
+  decorators: [MaxHeightDecorator],
+  parameters: {
+    docs: {
+      description: {
+        component: "This story is for debugging an issue where using certain content inside MasterLayout causes the content to overflow the page."
+      }
+    }
+  }
+};
+export default storyConfig;
+var numberOfTabs = 20;
+var ExampleContentBlock = function ExampleContentBlock() {
+  return /*#__PURE__*/_jsx(Box, {
+    sx: function sx(theme) {
+      return {
+        width: 200,
+        height: "150vh",
+        borderRadius: theme.shape.borderRadius,
+        backgroundColor: theme.palette.grey[100]
+      };
+    }
+  });
+};
+export var RouterTabsInMasterContent = {
+  decorators: [MasterLayoutDecorator],
+  parameters: {
+    layout: "none",
+    stack: {
+      topLevelTitle: "Example Page"
+    }
+  },
+  render: function render() {
+    return /*#__PURE__*/_jsx(MainContent, {
+      children: /*#__PURE__*/_jsx(RouterTabs, {
+        children: Array.from({
+          length: numberOfTabs
+        }, function (_, index) {
+          return /*#__PURE__*/_jsxs(RouterTab, {
+            path: index === 0 ? "" : "/lorem-ipsum-".concat(index + 1),
+            label: "Lorem ipsum ".concat(index + 1),
+            children: [/*#__PURE__*/_jsxs(Typography, {
+              variant: "h2",
+              gutterBottom: true,
+              children: ["Lorem ipsum ", index + 1]
+            }), /*#__PURE__*/_jsx(ExampleContentBlock, {})]
+          }, index);
+        })
+      })
+    });
+  }
+};
+export var RouterTabsInMasterContentWithToolbar = {
+  decorators: [MasterLayoutDecorator],
+  parameters: {
+    layout: "none",
+    stack: {
+      topLevelTitle: "Example Page"
+    }
+  },
+  render: function render() {
+    return /*#__PURE__*/_jsxs(_Fragment, {
+      children: [/*#__PURE__*/_jsx(Toolbar, {
+        children: /*#__PURE__*/_jsx(ToolbarAutomaticTitleItem, {})
+      }), /*#__PURE__*/_jsx(MainContent, {
+        children: /*#__PURE__*/_jsx(RouterTabs, {
+          children: Array.from({
+            length: numberOfTabs
+          }, function (_, index) {
+            return /*#__PURE__*/_jsxs(RouterTab, {
+              path: index === 0 ? "" : "/lorem-ipsum-".concat(index + 1),
+              label: "Lorem ipsum ".concat(index + 1),
+              children: [/*#__PURE__*/_jsxs(Typography, {
+                variant: "h2",
+                gutterBottom: true,
+                children: ["Lorem ipsum ", index + 1]
+              }), /*#__PURE__*/_jsx(ExampleContentBlock, {})]
+            }, index);
+          })
+        })
+      })]
+    });
+  }
+};
+export var MuiTabsInMasterContent = {
+  decorators: [MasterLayoutDecorator],
+  parameters: {
+    layout: "none",
+    stack: {
+      topLevelTitle: "Example Page"
+    }
+  },
+  render: function render() {
+    var _useState = useState(0),
+      _useState2 = _slicedToArray(_useState, 2),
+      activeTabIndex = _useState2[0],
+      setActiveTabIndex = _useState2[1];
+    return /*#__PURE__*/_jsxs(MainContent, {
+      children: [/*#__PURE__*/_jsx(Tabs, {
+        variant: "scrollable",
+        value: activeTabIndex,
+        onChange: function onChange(_, index) {
+          return setActiveTabIndex(index);
+        },
+        children: Array.from({
+          length: numberOfTabs
+        }, function (_, index) {
+          return /*#__PURE__*/_jsx(Tab, {
+            label: "Lorem ipsum ".concat(index + 1)
+          }, index);
+        })
+      }), /*#__PURE__*/_jsx(ExampleContentBlock, {})]
+    });
+  }
+};
+export var MuiTabsInMasterContentWithToolbar = {
+  decorators: [MasterLayoutDecorator],
+  parameters: {
+    layout: "none",
+    stack: {
+      topLevelTitle: "Example Page"
+    }
+  },
+  render: function render() {
+    var _useState3 = useState(0),
+      _useState4 = _slicedToArray(_useState3, 2),
+      activeTabIndex = _useState4[0],
+      setActiveTabIndex = _useState4[1];
+    return /*#__PURE__*/_jsxs(_Fragment, {
+      children: [/*#__PURE__*/_jsx(Toolbar, {
+        children: /*#__PURE__*/_jsx(ToolbarAutomaticTitleItem, {})
+      }), /*#__PURE__*/_jsxs(MainContent, {
+        children: [/*#__PURE__*/_jsx(Tabs, {
+          variant: "scrollable",
+          value: activeTabIndex,
+          onChange: function onChange(_, index) {
+            return setActiveTabIndex(index);
+          },
+          children: Array.from({
+            length: numberOfTabs
+          }, function (_, index) {
+            return /*#__PURE__*/_jsx(Tab, {
+              label: "Lorem ipsum ".concat(index + 1)
+            }, index);
+          })
+        }), /*#__PURE__*/_jsx(ExampleContentBlock, {})]
+      })]
+    });
+  }
+};
+export var RouterTabsInMainContent = {
+  parameters: {
+    layout: "none",
+    stack: {
+      topLevelTitle: "Example Page"
+    }
+  },
+  render: function render() {
+    return /*#__PURE__*/_jsx(MainContent, {
+      children: /*#__PURE__*/_jsx(RouterTabs, {
+        children: Array.from({
+          length: numberOfTabs
+        }, function (_, index) {
+          return /*#__PURE__*/_jsxs(RouterTab, {
+            path: index === 0 ? "" : "/lorem-ipsum-".concat(index + 1),
+            label: "Lorem ipsum ".concat(index + 1),
+            children: [/*#__PURE__*/_jsxs(Typography, {
+              variant: "h2",
+              gutterBottom: true,
+              children: ["Lorem ipsum ", index + 1]
+            }), /*#__PURE__*/_jsx(ExampleContentBlock, {})]
+          }, index);
+        })
+      })
+    });
+  }
+};
+export var MuiTabsInMainContent = {
+  parameters: {
+    layout: "none"
+  },
+  render: function render() {
+    var _useState5 = useState(0),
+      _useState6 = _slicedToArray(_useState5, 2),
+      activeTabIndex = _useState6[0],
+      setActiveTabIndex = _useState6[1];
+    return /*#__PURE__*/_jsxs(MainContent, {
+      children: [/*#__PURE__*/_jsx(Tabs, {
+        variant: "scrollable",
+        value: activeTabIndex,
+        onChange: function onChange(_, index) {
+          return setActiveTabIndex(index);
+        },
+        children: Array.from({
+          length: numberOfTabs
+        }, function (_, index) {
+          return /*#__PURE__*/_jsx(Tab, {
+            label: "Lorem ipsum ".concat(index + 1)
+          }, index);
+        })
+      }), /*#__PURE__*/_jsx(ExampleContentBlock, {})]
+    });
+  }
+};

package/lib/tabs/__stories__/RouterTabs.stories.js

@@ -0,0 +1,31 @@
+import { RouterTab, RouterTabs } from "@comet/admin";
+import { useLocation } from "react-router";
+import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
+export default {
+  title: "components/tabs/RouterTabs"
+};
+export var Basic = {
+  render: function render() {
+    var location = useLocation();
+    return /*#__PURE__*/_jsxs("div", {
+      children: [/*#__PURE__*/_jsxs("p", {
+        children: ["Location: ", location.pathname]
+      }), /*#__PURE__*/_jsxs(RouterTabs, {
+        children: [/*#__PURE__*/_jsx(RouterTab, {
+          path: "",
+          label: "Label One",
+          children: "Content One"
+        }), /*#__PURE__*/_jsx(RouterTab, {
+          path: "/tab2",
+          label: "Label Two",
+          children: "Content Two"
+        }), /*#__PURE__*/_jsx(RouterTab, {
+          path: "/tab3",
+          label: "Label Three",
+          children: "Content Three"
+        })]
+      })]
+    });
+  },
+  name: "RouterTabs"
+};