blue-react 8.4.0-beta1 → 8.4.2

package/dist/style.scss

@@ -1,5 +1,5 @@
 /*!
- * Blue React v8.4.0-beta1 (https://bruegmann.github.io/blue-react)
+ * Blue React v8.4.2 (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/_bootstrap.scss

@@ -9,10 +9,9 @@
 // Configuration
 @import "node_modules/bootstrap/scss/functions";
 @import "node_modules/bootstrap/scss/variables";
-@import "node_modules/bootstrap/scss/maps";
 @import "node_modules/bootstrap/scss/mixins";
 
-// @import "./_bootstrap-mixins_overwritten.scss";
+@import "./_bootstrap-mixins_overwritten.scss";
 
 @import "node_modules/bootstrap/scss/utilities";
 

package/dist/styles/_variables.scss

@@ -21,10 +21,10 @@ $theme-colors: map-merge(
 );
 
 // Since Bootstrap 5.1 this needs to be set. Otherwise we couldn't use .bg-* and .text-* utils with our custom $theme
-// $theme-colors-rgb: map-loop($theme-colors, to-rgb, "$value");
-// $utilities-colors: map-merge($utilities-colors, $theme-colors-rgb);
-// $utilities-text-colors: map-merge($utilities-text-colors, map-loop($utilities-colors, rgba-css-var, "$key", "text"));
-// $utilities-bg-colors: map-merge($utilities-bg-colors, map-loop($utilities-colors, rgba-css-var, "$key", "bg"));
+$theme-colors-rgb: map-loop($theme-colors, to-rgb, "$value");
+$utilities-colors: map-merge($utilities-colors, $theme-colors-rgb);
+$utilities-text-colors: map-merge($utilities-text-colors, map-loop($utilities-colors, rgba-css-var, "$key", "text"));
+$utilities-bg-colors: map-merge($utilities-bg-colors, map-loop($utilities-colors, rgba-css-var, "$key", "bg"));
 
 // Alpha value (RGBA) e.g. for header background.
 $shimmering: 0.7 !default;
@@ -94,4 +94,7 @@ $scrollbar-size: 10px;
 
 :root {
     --theme: #{$theme};
+
+    --blue-sidebar-width: #{$bla-sidebar-width};
+    --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/Switch.d.ts

@@ -1,4 +1,4 @@
-import React from "react";
+import React, { ReactNode } from "react";
 export interface SwitchProps {
     className?: string;
     checked?: boolean;
@@ -12,10 +12,22 @@ export interface SwitchProps {
      */
     elementType?: string;
     disabled?: boolean;
+    /**
+     * Set prop to use the older look and feel. Will disappear in future releases.
+     */
+    legacy?: boolean;
+    label?: ReactNode | string;
 }
 /**
- * Switch.
+ * @deprecated
+ * Use Bootstrap's `.form-check.form-switch` instead:
+ * https://getbootstrap.com/docs/5.2/forms/checks-radios/#switches
+ *
+ * For now, this component acts as proxy for Bootstrap's Switch.
+ * To place a label next to the switch, use the new `label` prop.
+ *
+ * Migrate to Blue React 8.4.0 and use legacy support: Set the `label` with a string. Or set the `legacy` prop to use the previous look and behaviour.
  */
-export default function Switch({ className, checked, onChange, sliderLabel, disabled, elementType }: SwitchProps): React.ReactElement<{
+export default function Switch({ className, checked, onChange, sliderLabel, disabled, elementType, legacy, label }: SwitchProps): React.ReactElement<{
     className: string;
 }, string | React.JSXElementConstructor<any>>;

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-beta1",
+    "version": "8.4.2",
     "description": "Blue React Components",
     "license": "LGPL-3.0-or-later",
     "main": "index.js",
@@ -26,12 +26,12 @@
         "predeploy": "npm run build-docs",
         "deploy": "gh-pages --dist build --dest v8",
         "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 ."
     },
     "dependencies": {
-        "@popperjs/core": "^2.11.5",
-        "bootstrap": "^5.2.0-beta1",
+        "@popperjs/core": "^2.10.2",
+        "bootstrap": "^5.1.3",
         "clsx": "^1.1.1"
     },
     "peerDependencies": {
@@ -60,12 +60,12 @@
         "postcss-minify": "^1.1.0",
         "prettier": "2.4.1",
         "react": "^18.1.0",
-        "react-bootstrap-icons": "^1.8.2",
+        "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"