blue-react 10.0.0-rc2 → 10.0.0-rc3

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,
+    breadcrumbItems = _ref.breadcrumbItems;
   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)), breadcrumbItems === null || breadcrumbItems === void 0 ? void 0 : breadcrumbItems.map(function (item, index) {
+    var active = index === breadcrumbItems.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.js

@@ -8,12 +8,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 +23,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 +45,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",
@@ -62,6 +68,13 @@ export default function Layout(_ref) {
       "--bs-bg-opacity": 0.5
     }
   }), /*#__PURE__*/React.createElement("header", {
+    className: "d-flex justify-content-between position-relative h-100",
+    style: {
+      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)"
+    },
     slot: "header"
   }, header), /*#__PURE__*/React.createElement("div", {
     slot: "side",
@@ -71,8 +84,8 @@ export default function Layout(_ref) {
       background: "var(--blue-sidebar-bg)"
     }
   }, side), /*#__PURE__*/React.createElement("div", {
-    className: "w-100 h-100 p-1"
+    className: "w-100 h-100 p-1 pt-0"
   }, /*#__PURE__*/React.createElement("div", {
-    className: "\"w-100 h-100 overflow-auto rounded ".concat(noPageBorder ? "" : "border ", "bg-body shadow-sm\"")
+    className: "\"w-100 h-100 overflow-auto rounded-3 ".concat(noPageBorder ? "" : "border ", "bg-body shadow-sm\"")
   }, 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.
+     */
+    breadcrumbItems?: 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, breadcrumbItems }: HeaderTitleProps): import("react/jsx-runtime").JSX.Element;

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "blue-react",
-    "version": "10.0.0-rc2",
+    "version": "10.0.0-rc3",
     "description": "Blue React Components",
     "license": "LGPL-3.0-or-later",
     "type": "module",
@@ -15,7 +15,8 @@
         "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",
@@ -34,7 +35,7 @@
     },
     "dependencies": {
         "@popperjs/core": "^2.11.5",
-        "blue-web": "^1.7.0",
+        "blue-web": "^1.8.0",
         "bootstrap": "~5.3.3",
         "clsx": "^1.1.1"
     },