blue-react 10.0.0-rc2 → 10.0.0

package/README.md

@@ -15,6 +15,52 @@ use Blue React.
 
 Previously JS files were in type CommonJS, now they are in ESM. For projects with Webpack or CRA, take a look at this: https://stackoverflow.com/questions/70964723/webpack-5-in-ceate-react-app-cant-resolve-not-fully-specified-routes
 
+#### Enable ESM in Webpack
+
+Add this to the `webpack.config.js` inside the `module.rules`:
+
+```js
+{
+    test: /\.m?js/,
+    resolve: {
+        fullySpecified: false
+    }
+}
+```
+
+#### Enable ESM in CRA (react-scripts)
+
+1. Install craco: `npm i -D @craco/craco`
+2. Update the scripts inside `package.json`:
+
+```json
+"scripts": {
+        "start": "craco start",
+        "build": "craco build",
+        "test": "craco test",
+```
+
+3. Add a file called `craco.config.js` with this content:
+
+```js
+module.exports = {
+    webpack: {
+        configure: {
+            module: {
+                rules: [
+                    {
+                        test: /\.m?js$/,
+                        resolve: {
+                            fullySpecified: false
+                        }
+                    }
+                ]
+            }
+        }
+    }
+}
+```
+
 ### Removed hash router from Layout
 
 The new `Layout` no longer has a hash router. So there is no `pages` prop anymore. The router moved to its own component `HashRouter` for legacy reasons. But it's recommended to use other solutions like [React Router](https://reactrouter.com/) or [TanStack Router](https://tanstack.com/router/latest).

package/dist/components/ActionMenu.js

@@ -42,12 +42,12 @@ export default function ActionMenu(props) {
       breakOption: _break
     }
   }, /*#__PURE__*/React.createElement(Outside, {
-    className: "blue-actions navbar ".concat(className, " navbar-expand").concat(_break !== "none" ? "-".concat(_break) : "", " ").concat(_break, " ").concat(actionsToggledIn ? "open" : ""),
+    className: "blue-actions ".concat(_break, " ").concat(actionsToggledIn ? "open" : "", " ").concat(className),
     onClickOutside: function onClickOutside() {
       setActionsToggledIn(false);
     }
-  }, /*#__PURE__*/React.createElement("ul", {
-    className: "blue-actions-menu nav navbar-nav navbar-right"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "blue-actions-menu d-flex"
   }, validChildren.length > 0 && !actionsToggledIn && !hideToggleAction && /*#__PURE__*/React.createElement(MenuItem, {
     className: "blue-actions-menu-toggle w-100",
     onClick: function onClick() {

package/dist/components/ActionMenuItem.js

@@ -6,6 +6,8 @@ import React, { useContext } from "react";
 import MenuItem from "./MenuItem";
 import { ActionMenuContext } from "./ActionMenu";
 /**
+ * @deprecated Use `MenuItem` instead. Special `ActionMenu` functionality is now handles with CSS by Blue Web.
+ *
  * Use this instead of `MenuItem` when you want to use it inside an `ActionMenu` to make it appear as a dropdown.
  *
  * It basically is a shortcut. Instead of writing:
@@ -41,7 +43,7 @@ export default function ActionMenuItem(_ref) {
   var _useContext = useContext(ActionMenuContext),
     breakOption = _useContext.breakOption;
   return /*#__PURE__*/React.createElement("div", {
-    className: "position-relative z-1"
+    className: "position-relative"
   }, /*#__PURE__*/React.createElement(MenuItem, _extends({}, props, {
     supportOutside: true,
     dropdownClassName: "position-".concat(breakOption, "-absolute end-0 d-flex flex-column")

package/dist/components/Header.js

@@ -1,10 +1,17 @@
+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 _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); }
 import React from "react";
 /**
  * The top of a page.
  */
 export default function Header(_ref) {
-  var children = _ref.children;
-  return /*#__PURE__*/React.createElement("div", {
-    className: "blue-header blue-header-extension"
+  var children = _ref.children,
+    _ref$className = _ref.className,
+    className = _ref$className === void 0 ? "" : _ref$className;
+  return /*#__PURE__*/React.createElement("header", {
+    className: "bg-body position-sticky top-0 border-bottom d-flex justify-content-between ".concat(className),
+    style: _defineProperty(_defineProperty(_defineProperty({}, "--bs-bg-opacity", 1), "--blue-menu-item-dropdown-bg", "rgba(var(--bs-body-bg-rgb), var(--bs-bg-opacity))"), "zIndex", "var(--blue-header-z-index, 3)")
   }, children);
 }

package/dist/components/HeaderTitle.js

@@ -9,7 +9,6 @@ export default function HeaderTitle(_ref) {
     _ref$logoAlt = _ref.logoAlt,
     logoAlt = _ref$logoAlt === void 0 ? "Logo" : _ref$logoAlt,
     appTitle = _ref.appTitle,
-    keepAppTitle = _ref.keepAppTitle,
     children = _ref.children,
     className = _ref.className,
     sidebar = _ref.sidebar,
@@ -17,7 +16,8 @@ export default function HeaderTitle(_ref) {
     elementType = _ref$elementType === void 0 ? "a" : _ref$elementType,
     to = _ref.to,
     _ref$href = _ref.href,
-    href = _ref$href === void 0 ? "#" : _ref$href;
+    href = _ref$href === void 0 ? "#" : _ref$href,
+    breadcrumb = _ref.breadcrumb;
   var uniqueId = "HeaderTitle-" + guid();
   var setDocumentTitle = function setDocumentTitle() {
     if (window.blueHashRouterRef && window.blueHashRouterRef.props && window.blueHashRouterRef.props.disableTitleSet === false) {
@@ -37,7 +37,7 @@ export default function HeaderTitle(_ref) {
   useEffect(setDocumentTitle, [children]);
   return /*#__PURE__*/React.createElement("div", {
     id: uniqueId,
-    className: "blue-header-title d-inline-flex gap-2 fw-medium align-items-center px-3 py-2 position-absolute z-1" + (className ? " ".concat(className) : "") + (sidebar ? " sidebar" : "")
+    className: "blue-header-title d-inline-flex gap-2 fw-medium align-items-center px-3 py-2" + (className ? " ".concat(className) : "") + (sidebar ? " sidebar" : "")
   }, logo && /*#__PURE__*/createElement(elementType, {
     to: to,
     href: href
@@ -45,10 +45,21 @@ export default function HeaderTitle(_ref) {
     src: logo,
     alt: logoAlt,
     className: "blue-header-title-image"
-  })), /*#__PURE__*/React.createElement("span", {
-    className: "blue-header-title-labels " + (keepAppTitle ? "keep" : "")
-  }, appTitle && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/createElement(elementType, {
+  })), /*#__PURE__*/React.createElement("nav", {
+    "aria-label": "breadcrumb"
+  }, /*#__PURE__*/React.createElement("ol", {
+    className: "breadcrumb mb-0"
+  }, appTitle !== undefined && appTitle !== "" && /*#__PURE__*/React.createElement("li", {
+    className: "breadcrumb-item"
+  }, /*#__PURE__*/createElement(elementType, {
     to: to,
     href: href
-  }, appTitle), " ", children ? "/" : "", "\xA0"), children));
+  }, appTitle)), breadcrumb === null || breadcrumb === void 0 ? void 0 : breadcrumb.map(function (item, index) {
+    var active = index === breadcrumb.length - 1;
+    return /*#__PURE__*/React.createElement("li", {
+      key: index,
+      className: "breadcrumb-item ".concat(active ? "active" : ""),
+      "aria-current": active ? "page" : undefined
+    }, item);
+  }))), children);
 }

package/dist/components/Layout/LayoutHeader.js

@@ -0,0 +1,25 @@
+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); }
+var _excluded = ["children", "className"];
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+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 _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var s = Object.getOwnPropertySymbols(e); for (r = 0; r < s.length; r++) o = s[r], t.includes(o) || {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }
+function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (e.includes(n)) continue; t[n] = r[n]; } return t; }
+import React from "react";
+export default function LayoutHeader(_ref) {
+  var children = _ref.children,
+    className = _ref.className,
+    rest = _objectWithoutProperties(_ref, _excluded);
+  return /*#__PURE__*/React.createElement("header", _extends({
+    className: "d-flex justify-content-between position-relative h-100 ".concat(className),
+    style: _objectSpread({
+      color: "var(--blue-sidebar-color)",
+      background: "var(--blue-sidebar-bg)",
+      zIndex: "var(--blue-layout-header-z-index, 4)",
+      "--blue-menu-item-dropdown-bg": "var(--blue-sidebar-bg)"
+    }, rest.style)
+  }, rest), children);
+}

package/dist/components/Layout/LayoutMain.js

@@ -0,0 +1,17 @@
+var _excluded = ["children", "className", "noPageBorder"];
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+function _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var s = Object.getOwnPropertySymbols(e); for (r = 0; r < s.length; r++) o = s[r], t.includes(o) || {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }
+function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (e.includes(n)) continue; t[n] = r[n]; } return t; }
+import React from "react";
+export default function LayoutMain(_ref) {
+  var children = _ref.children,
+    className = _ref.className,
+    _ref$noPageBorder = _ref.noPageBorder,
+    noPageBorder = _ref$noPageBorder === void 0 ? false : _ref$noPageBorder,
+    rest = _objectWithoutProperties(_ref, _excluded);
+  return /*#__PURE__*/React.createElement("div", _extends({
+    className: "w-100 h-100 p-1 pt-0 ".concat(className)
+  }, rest), /*#__PURE__*/React.createElement("div", {
+    className: "\"w-100 h-100 overflow-auto rounded-3 ".concat(noPageBorder ? "" : "border ", "bg-body shadow-sm\"")
+  }, children));
+}

package/dist/components/Layout.js

@@ -1,6 +1,11 @@
 import React from "react";
 import "blue-web/dist/js/side-layout";
+import LayoutHeader from "./Layout/LayoutHeader";
+import LayoutMain from "./Layout/LayoutMain";
 var SideLayout = "side-layout";
+/**
+ * A layout with header, side and main content area. Side is collapsible.
+ */
 export default function Layout(_ref) {
   var children = _ref.children,
     header = _ref.header,
@@ -8,12 +13,12 @@ export default function Layout(_ref) {
     _ref$noPageBorder = _ref.noPageBorder,
     noPageBorder = _ref$noPageBorder === void 0 ? false : _ref$noPageBorder;
   return /*#__PURE__*/React.createElement("div", {
-    style: {
-      height: "100vh"
-    }
+    className: "vh-100"
   }, /*#__PURE__*/React.createElement(SideLayout, {
     style: {
-      "--base-z-index": 500
+      "--base-z-index": 500,
+      "--side-width": "var(--blue-sidebar-width)",
+      "--toggler-size": "var(--blue-menu-item-height)"
     }
   }, /*#__PURE__*/React.createElement("div", {
     slot: "expand-toggler",
@@ -23,7 +28,10 @@ export default function Layout(_ref) {
       background: "var(--blue-sidebar-bg)"
     }
   }, /*#__PURE__*/React.createElement("div", {
-    className: "btn blue-menu-item w-100 h-100 d-flex align-items-center justify-content-center p-0"
+    className: "btn blue-menu-item w-100 h-100 d-flex align-items-center justify-content-center p-0",
+    style: {
+      boxShadow: "var(--trigger-box-shadow)"
+    }
   }, /*#__PURE__*/React.createElement("svg", {
     xmlns: "http://www.w3.org/2000/svg",
     viewBox: "0 0 16 16",
@@ -42,7 +50,10 @@ export default function Layout(_ref) {
       background: "var(--blue-sidebar-bg)"
     }
   }, /*#__PURE__*/React.createElement("div", {
-    className: "btn blue-menu-item w-100 h-100 d-flex align-items-center justify-content-center p-0"
+    className: "btn blue-menu-item w-100 h-100 d-flex align-items-center justify-content-center p-0",
+    style: {
+      boxShadow: "var(--trigger-box-shadow)"
+    }
   }, /*#__PURE__*/React.createElement("svg", {
     xmlns: "http://www.w3.org/2000/svg",
     viewBox: "0 0 16 16",
@@ -61,7 +72,7 @@ export default function Layout(_ref) {
     style: {
       "--bs-bg-opacity": 0.5
     }
-  }), /*#__PURE__*/React.createElement("header", {
+  }), /*#__PURE__*/React.createElement(LayoutHeader, {
     slot: "header"
   }, header), /*#__PURE__*/React.createElement("div", {
     slot: "side",
@@ -70,9 +81,7 @@ export default function Layout(_ref) {
       color: "var(--blue-sidebar-color)",
       background: "var(--blue-sidebar-bg)"
     }
-  }, side), /*#__PURE__*/React.createElement("div", {
-    className: "w-100 h-100 p-1"
-  }, /*#__PURE__*/React.createElement("div", {
-    className: "\"w-100 h-100 overflow-auto rounded ".concat(noPageBorder ? "" : "border ", "bg-body shadow-sm\"")
-  }, children))));
+  }, side), /*#__PURE__*/React.createElement(LayoutMain, {
+    noPageBorder: noPageBorder
+  }, children)));
 }

package/dist/components/LayoutHeader.js

@@ -0,0 +1,25 @@
+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); }
+var _excluded = ["children", "className"];
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+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 _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var s = Object.getOwnPropertySymbols(e); for (r = 0; r < s.length; r++) o = s[r], t.includes(o) || {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }
+function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (e.includes(n)) continue; t[n] = r[n]; } return t; }
+import React from "react";
+export default function LayoutHeader(_ref) {
+  var children = _ref.children,
+    className = _ref.className,
+    rest = _objectWithoutProperties(_ref, _excluded);
+  return /*#__PURE__*/React.createElement("header", _extends({
+    className: "d-flex justify-content-between position-relative h-100 ".concat(className),
+    style: _objectSpread({
+      color: "var(--blue-sidebar-color)",
+      background: "var(--blue-sidebar-bg)",
+      zIndex: "var(--blue-layout-header-z-index, 4)",
+      "--blue-menu-item-dropdown-bg": "var(--blue-sidebar-bg)"
+    }, rest.style)
+  }, rest), children);
+}

package/dist/components/LayoutMain.js

@@ -0,0 +1,17 @@
+var _excluded = ["children", "className", "noPageBorder"];
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+function _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var s = Object.getOwnPropertySymbols(e); for (r = 0; r < s.length; r++) o = s[r], t.includes(o) || {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }
+function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (e.includes(n)) continue; t[n] = r[n]; } return t; }
+import React from "react";
+export default function LayoutMain(_ref) {
+  var children = _ref.children,
+    className = _ref.className,
+    _ref$noPageBorder = _ref.noPageBorder,
+    noPageBorder = _ref$noPageBorder === void 0 ? false : _ref$noPageBorder,
+    rest = _objectWithoutProperties(_ref, _excluded);
+  return /*#__PURE__*/React.createElement("div", _extends({
+    className: "w-100 h-100 p-1 pt-0 ".concat(className)
+  }, rest), /*#__PURE__*/React.createElement("div", {
+    className: "\"w-100 h-100 overflow-auto rounded-3 ".concat(noPageBorder ? "" : "border ", "bg-body shadow-sm\"")
+  }, children));
+}

package/dist/components/SimpleLayout.js

@@ -0,0 +1,24 @@
+import React from "react";
+import "blue-web/dist/js/side-layout";
+import LayoutHeader from "./Layout/LayoutHeader";
+import LayoutMain from "./Layout/LayoutMain";
+/**
+ * A simple layout with header and main content area.
+ */
+export default function SimpleLayout(_ref) {
+  var children = _ref.children,
+    header = _ref.header,
+    _ref$noPageBorder = _ref.noPageBorder,
+    noPageBorder = _ref$noPageBorder === void 0 ? false : _ref$noPageBorder;
+  return /*#__PURE__*/React.createElement("div", {
+    className: "vh-100 d-grid",
+    style: {
+      gridTemplateRows: "var(--blue-menu-item-height) auto"
+    }
+  }, /*#__PURE__*/React.createElement(LayoutHeader, {
+    slot: "header"
+  }, header), /*#__PURE__*/React.createElement(LayoutMain, {
+    noPageBorder: noPageBorder,
+    className: "overflow-hidden"
+  }, children));
+}

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

@@ -2,6 +2,8 @@ import { MenuItemProps } from "./MenuItem";
 export interface ActionMenuItemProps extends MenuItemProps {
 }
 /**
+ * @deprecated Use `MenuItem` instead. Special `ActionMenu` functionality is now handles with CSS by Blue Web.
+ *
  * Use this instead of `MenuItem` when you want to use it inside an `ActionMenu` to make it appear as a dropdown.
  *
  * It basically is a shortcut. Instead of writing:

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

@@ -1,8 +1,9 @@
 import { ReactNode } from "react";
 export interface HeaderProps {
     children?: ReactNode;
+    className?: string;
 }
 /**
  * The top of a page.
  */
-export default function Header({ children }: HeaderProps): import("react/jsx-runtime").JSX.Element;
+export default function Header({ children, className }: HeaderProps): import("react/jsx-runtime").JSX.Element;

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

@@ -1,3 +1,4 @@
+import { ReactNode } from "react";
 export interface HeaderTitleProps {
     /**
      * Can be an image. Will be placed inside of the `src` attribute.
@@ -8,11 +9,7 @@ export interface HeaderTitleProps {
      * Text next to the logo.
      */
     appTitle?: string;
-    /**
-     * Disables that the app title will disappear at a specific view width.
-     */
-    keepAppTitle?: boolean;
-    children?: any;
+    children?: ReactNode;
     /**
      * Extends `className` from parent element.
      */
@@ -31,9 +28,13 @@ export interface HeaderTitleProps {
      */
     to?: string;
     href?: string;
+    /**
+     * Breadcrumb items to be shown.
+     */
+    breadcrumb?: ReactNode[];
 }
 /**
  * The title area at the header bar.
  * Depending on its content, the document's title will be set aswell (what will be shown in the browser title bar).
  */
-export default function HeaderTitle({ logo, logoAlt, appTitle, keepAppTitle, children, className, sidebar, elementType, to, href }: HeaderTitleProps): import("react/jsx-runtime").JSX.Element;
+export default function HeaderTitle({ logo, logoAlt, appTitle, children, className, sidebar, elementType, to, href, breadcrumb }: HeaderTitleProps): import("react/jsx-runtime").JSX.Element;

package/dist/types/components/Layout/LayoutHeader.d.ts

@@ -0,0 +1,4 @@
+import React from "react";
+export interface LayoutHeaderProps extends React.HTMLAttributes<HTMLDivElement> {
+}
+export default function LayoutHeader({ children, className, ...rest }: LayoutHeaderProps): import("react/jsx-runtime").JSX.Element;

package/dist/types/components/Layout/LayoutMain.d.ts

@@ -0,0 +1,5 @@
+import React from "react";
+export interface LayoutMainProps extends React.HTMLAttributes<HTMLDivElement> {
+    noPageBorder?: boolean;
+}
+export default function LayoutMain({ children, className, noPageBorder, ...rest }: LayoutMainProps): import("react/jsx-runtime").JSX.Element;

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

@@ -6,4 +6,7 @@ export interface LayoutProps {
     side?: React.ReactNode;
     noPageBorder?: boolean;
 }
+/**
+ * A layout with header, side and main content area. Side is collapsible.
+ */
 export default function Layout({ children, header, side, noPageBorder }: LayoutProps): import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,4 @@
+import React from "react";
+export interface LayoutHeaderProps extends React.HTMLAttributes<HTMLDivElement> {
+}
+export default function LayoutHeader({ children, className, ...rest }: LayoutHeaderProps): import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,5 @@
+import React from "react";
+export interface LayoutMainProps extends React.HTMLAttributes<HTMLDivElement> {
+    noPageBorder?: boolean;
+}
+export default function LayoutMain({ children, className, noPageBorder, ...rest }: LayoutMainProps): import("react/jsx-runtime").JSX.Element;

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

@@ -1,9 +1,10 @@
+import { ReactNode } from "react";
 export interface PageProps {
     /**
      * Will be set to the document's `<title>` tag.
      */
     title?: string;
-    children?: any;
+    children?: ReactNode;
 }
 /**
  * Main component for each page.

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

@@ -0,0 +1,11 @@
+import React from "react";
+import "blue-web/dist/js/side-layout";
+export interface SimpleLayoutProps {
+    children?: React.ReactNode;
+    header?: React.ReactNode;
+    noPageBorder?: boolean;
+}
+/**
+ * A simple layout with header and main content area.
+ */
+export default function SimpleLayout({ children, header, noPageBorder }: SimpleLayoutProps): import("react/jsx-runtime").JSX.Element;

package/index.d.ts

@@ -61,6 +61,9 @@ export { SidebarMenuProps } from "./dist/types/components/SidebarMenu"
 export { default as SidebarMenuItem } from "./dist/types/components/SidebarMenuItem"
 export { SidebarMenuItemProps } from "./dist/types/components/SidebarMenuItem"
 
+export { default as SimpleLayout } from "./dist/types/components/SimpleLayout"
+export { SimpleLayoutProps } from "./dist/types/components/SimpleLayout"
+
 export { default as SlimContainer } from "./dist/types/components/SlimContainer"
 export { SlimContainerProps } from "./dist/types/components/SlimContainer"
 

package/index.js

@@ -18,6 +18,7 @@ import Page from "./dist/components/Page.js"
 import Search from "./dist/components/Search.js"
 import SidebarMenu from "./dist/components/SidebarMenu.js"
 import SidebarMenuItem from "./dist/components/SidebarMenuItem.js"
+import SimpleLayout from "./dist/components/SimpleLayout.js"
 import SlimContainer from "./dist/components/SlimContainer.js"
 import Status from "./dist/components/Status.js"
 import { StatusProvider, useStatus } from "./dist/components/StatusProvider.js"
@@ -46,6 +47,7 @@ export {
     Search,
     SidebarMenu,
     SidebarMenuItem,
+    SimpleLayout,
     SlimContainer,
     Status,
     StatusProvider,

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "blue-react",
-    "version": "10.0.0-rc2",
+    "version": "10.0.0",
     "description": "Blue React Components",
     "license": "LGPL-3.0-or-later",
     "type": "module",
@@ -15,26 +15,27 @@
         "url": "https://github.com/bruegmann/blue-react/issues"
     },
     "scripts": {
-        "start": "vite",
+        "dev": "vite",
+        "start": "npm run dev",
         "build-docs": "tsc -b && vite build --base=/blue-react/v10/ && npm run docgen",
         "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
         "preview": "vite preview",
         "build-types": "tsc -p tsconfig.app.json --declaration --emitDeclarationOnly --declarationDir ./dist/types --noEmit false --composite false",
         "build": "babel ./src/components --out-dir ./dist/components --extensions \".tsx,.js,.ts\"",
         "build-release": "npm run build-types && npm run build && npm run docgen",
-        "docgen": "react-docgen ./src/components/ -o ./src/docs/data/docs.json --extension tsx && node followUpDocs && npm run license-report",
+        "docgen": "react-docgen ./src/components/ --ignore Layout -o ./src/docs/data/docs.json --extension tsx && node followUpDocs && npm run license-report",
         "test": "react-scripts test",
         "eject": "react-scripts eject",
         "predeploy": "npm run build-docs",
         "deploy": "gh-pages --dist deployment --dest v10",
         "prepublishOnly": "npm i && npm run build-release",
-        "release": "npm publish --tag next && npm run deploy",
+        "release": "npm publish && npm run deploy",
         "prettier": "npx prettier --write .",
         "license-report": "npx license-report --prod --output=json > ./src/docs/data/license-report.json"
     },
     "dependencies": {
         "@popperjs/core": "^2.11.5",
-        "blue-web": "^1.7.0",
+        "blue-web": "^1.8.0",
         "bootstrap": "~5.3.3",
         "clsx": "^1.1.1"
     },