blue-react 8.4.0 → 8.4.3

package/dist/style.scss

@@ -1,5 +1,5 @@
 /*!
- * Blue React v8.4.0 (https://bruegmann.github.io/blue-react)
+ * Blue React v8.4.3 (https://bruegmann.github.io/blue-react)
  * Licensed under GNU General Public License v3.0 (https://github.com/bruegmann/blue-react/blob/master/LICENSE).
 */
 

package/dist/styles/_variables.scss

@@ -66,7 +66,11 @@ $sidebar-open-bg: darken($sidebar-bg, 30%) !default;
 $sidebar-deep-bg: darken($sidebar-bg, 4%) !default;
 
 // Text color of sidebar.
-$sidebar-color: white !default;
+$blue-sidebar-color-h: 0 !default;
+$blue-sidebar-color-s: 100% !default;
+$blue-sidebar-color-l: 100% !default;
+$blue-sidebar-color: hsl($blue-sidebar-color-h, $blue-sidebar-color-s, $blue-sidebar-color-l) !default;
+$sidebar-color: $blue-sidebar-color !default;
 
 // Color of indicator for active sidebar item.
 $sidebar-indicator-color: $sidebar-color !default;
@@ -94,4 +98,11 @@ $scrollbar-size: 10px;
 
 :root {
     --theme: #{$theme};
+
+    --blue-sidebar-width: #{$bla-sidebar-width};
+    --blue-sidebar-color-h: #{$blue-sidebar-color-h};
+    --blue-sidebar-color-s: #{$blue-sidebar-color-s};
+    --blue-sidebar-color-l: #{$blue-sidebar-color-l};
+    --blue-sidebar-color: #{$blue-sidebar-color};
+    --blue-theme: #{$theme};
 }

package/dist/styles/mixins/_sidebar.scss

@@ -11,13 +11,14 @@
     .blue-menu-item-label {
         display: inline-block;
     }
-
     .blue-sidebar {
         z-index: 42;
         box-shadow: 0.6rem 6rem 6rem rgba(0, 0, 0, 0.4);
         // background-color: darken($theme, 30%);
     }
 
+    --blue-sidebar-width: #{$bla-sidebar-width};
+
     .blue-sidebar,
     .blue-sidebar .blue-menu-item {
         width: $bla-sidebar-width;
@@ -77,7 +78,10 @@
         &::before {
             content: "";
             position: absolute;
-            top: 0.25rem; right: 0.25rem; bottom: 0.25rem; left: 0.25rem;
+            top: 0.25rem;
+            right: 0.25rem;
+            bottom: 0.25rem;
+            left: 0.25rem;
             background-color: currentColor;
             border-radius: $border-radius;
             transform: scale(0.9);
@@ -113,6 +117,10 @@
         }
     }
 
+    :root {
+        --blue-sidebar-width: #{$width};
+    }
+
     .blue-sidebar {
         width: $width;
         color: $sidebar-color;

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

@@ -1,11 +1,12 @@
 /// <reference types="react" />
-export interface ActionMenuSwitchProps {
-    className?: string;
-    checked?: boolean;
+import { SwitchProps } from "./Switch";
+export interface ActionMenuSwitchProps extends SwitchProps {
     onChange?: () => void;
     label?: any;
 }
 /**
+ * @deprecated
+ * Use a solution with Bootstrap's `.form-check.form-switch` or `MenuItem` with a switch icon.
  * Switch for the Action Menu.
  */
-export default function ActionMenuSwitch(props: ActionMenuSwitchProps): JSX.Element;
+export default function ActionMenuSwitch({ label, ...props }: ActionMenuSwitchProps): JSX.Element;

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

@@ -4,8 +4,8 @@ export interface ModalProviderProps {
 }
 declare const ModalProvider: ({ children, ...rest }: ModalProviderProps) => JSX.Element;
 declare const useModal: () => {
-    ask: (text: string, title?: string | undefined) => Promise<string | boolean>;
-    tell: (text: string, title?: string | undefined) => Promise<boolean>;
-    verify: (text: string, title?: string | undefined) => Promise<boolean>;
+    ask: (text: string, title?: string) => Promise<string | boolean>;
+    tell: (text: string, title?: string) => Promise<boolean>;
+    verify: (text: string, title?: string) => Promise<boolean>;
 };
 export { ModalProvider, useModal };

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

@@ -1,17 +1,39 @@
-export default Utilities;
-declare namespace Utilities {
-    function hasClass(el: any, className: any): any;
-    function addClass(el: any, className: any): void;
-    function removeClass(el: any, className: any): void;
-    function toggleClass(element: any, className: any): void;
-    function startLoading(): void;
-    function finishLoading(): void;
-    function showSuccess(): void;
-    function hideSuccess(): void;
-    function toggleActions(): void;
-    function resetAlertMessage(alertClassName?: string): void;
-    function setAlertMessage(message: any, alertClassName: string | undefined, close: any, detailText: any): void;
-    function guid(): string;
-    function scrollToTop(): void;
-    function fetchData(input: any, init?: any, showErrorDetail?: boolean, onError?: any): Promise<Response>;
-}
+import { StatusType } from "./shared";
+export declare function hasClass(el: HTMLElement | null, className: string): boolean;
+export declare function addClass(el: HTMLElement | null, className: string): void;
+export declare function removeClass(el: HTMLElement | null, className: string): void;
+/**
+ * @deprecated Use (el as HTMLElement).classList.toggle("my-class") instead.
+ */
+export declare function toggleClass(element: HTMLElement | null, className: string): void;
+export declare function startLoading(): void;
+export declare function finishLoading(): void;
+export declare function showSuccess(): void;
+export declare function hideSuccess(): void;
+export declare function toggleActions(): void;
+/**
+ * Resets alert messages that was set with `setAlertMessage`.
+ * @param alertClassName Leave empty to reset messages of any status type
+ */
+export declare function resetAlertMessage(alertClassName?: StatusType): void;
+export declare function setAlertMessage(message: string, alertClassName?: StatusType, close?: boolean, detailText?: string): void;
+export declare const guid: () => string;
+export declare function scrollToTop(): void;
+export declare function fetchData(input: RequestInfo | URL, init?: RequestInit | undefined, showErrorDetail?: boolean | undefined, onError?: (errorMessage: string, reason: Response) => void): Promise<Response>;
+declare const _default: {
+    hasClass: typeof hasClass;
+    addClass: typeof addClass;
+    removeClass: typeof removeClass;
+    toggleClass: typeof toggleClass;
+    startLoading: typeof startLoading;
+    finishLoading: typeof finishLoading;
+    showSuccess: typeof showSuccess;
+    hideSuccess: typeof hideSuccess;
+    toggleActions: typeof toggleActions;
+    resetAlertMessage: typeof resetAlertMessage;
+    setAlertMessage: typeof setAlertMessage;
+    guid: () => string;
+    scrollToTop: typeof scrollToTop;
+    fetchData: typeof fetchData;
+};
+export default _default;

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "blue-react",
-    "version": "8.4.0",
+    "version": "8.4.3",
     "description": "Blue React Components",
     "license": "LGPL-3.0-or-later",
     "main": "index.js",
@@ -31,6 +31,7 @@
     },
     "dependencies": {
         "@popperjs/core": "^2.10.2",
+        "blue-web-components": "github:bruegmann/blue-web-components",
         "bootstrap": "^5.1.3",
         "clsx": "^1.1.1"
     },
@@ -63,9 +64,9 @@
         "react-bootstrap-icons": "^1.8.4",
         "react-docgen": "^5.4.0",
         "react-dom": "^18.1.0",
-        "react-markdown-github": "^3.3.1",
+        "react-markdown": "^8.0.3",
         "react-router-dom": "^5.3.3",
-        "react-scripts": "^4.0.3",
+        "react-scripts": "^5.0.1",
         "react-syntax-highlighter": "^15.4.3",
         "reactstrap": "^9.0.0-0",
         "typescript": "^4.3.5"