blue-react 8.6.2 → 8.7.0

package/dist/style.scss

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

@@ -3,7 +3,7 @@
         position: relative;
         margin-left: 2px;
 
-        background-color: var(--action-link-bg-color);
+        background-color: var(--blue-action-link-bg-color);
 
         &:hover {
             background-color: $bla-button-bg-hover;

package/dist/styles/_search.scss

@@ -38,6 +38,7 @@
 
 .blue-search-control {
     border: none;
+    background-color: transparent !important;
 
     &:focus {
         box-shadow: none;

package/dist/styles/_variables.scss

@@ -110,6 +110,6 @@ $scrollbar-size: 10px;
     --blue-app-bg: var(--blue-theme, #{$app-bg});
     --blue-sidebar-bg: var(--blue-theme, #{$sidebar-bg});
     --blue-header-bg: var(--blue-theme, #{$header-bg});
-    --action-link-bg-color: var(--blue-theme);
+    --blue-action-link-bg-color: var(--blue-theme);
     --blue-menu-item-indicator-bg: #{$sidebar-indicator-color};
 }

package/dist/styles/mixins/_action-menu.scss

@@ -10,10 +10,10 @@
 @mixin actions($breakpoint) {
     @media screen and (max-width: $breakpoint + 1px) {
         &.open {
-            --action-link-bg-color: #{darken($theme, 30%)};
+            --blue-action-link-bg-color: #{darken($theme, 30%)};
 
             display: block;
-            background-color: var(--action-link-bg-color);
+            background-color: var(--blue-action-link-bg-color);
             width: 100%;
             position: absolute;
             z-index: 1;

package/dist/styles/mixins/_sidebar.scss

@@ -1,5 +1,9 @@
 @mixin openSidebarMenu() {
-    .blue-sidebar-hidden-on-open {
+    .blue-sidebar-hidden-on-open,
+    .blue-sidebar-before-hidden-on-open::before,
+    .blue-sidebar-after-hidden-on-open::after,
+    .blue-sidebar-pseudo-hidden-on-open::before,
+    .blue-sidebar-pseudo-hidden-on-open::after {
         display: none;
     }
 

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

@@ -7,7 +7,15 @@ declare global {
 }
 export interface LayoutProps {
     id?: string;
+    /**
+     * By default, the side bar is "in".
+     * You can control the state from outside, by also using `onChangeSidebarIn`.
+     */
     sidebarIn?: boolean;
+    /**
+     * React to changes of the `sidebarIn` state.
+     */
+    onChangeSidebarIn?: (sidebarIn: boolean) => void;
     style?: CSSProperties;
     /**
      * Sidebar is automatically expanded on wider views.
@@ -62,7 +70,7 @@ export interface LayoutProps {
     children?: any;
 }
 export interface LayoutState {
-    sidebarIn?: boolean;
+    sidebarIn: boolean;
     match: any;
     history: string[];
     hash: string;

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

@@ -1,8 +1,9 @@
-/// <reference types="react" />
+import { ReactNode } from "react";
 import { ModalType } from "./shared";
 export interface ModalProps {
     modalContent?: string;
     modalTitle?: string;
+    modalIcon?: ReactNode;
     unSetModalContent: (modalContent?: string) => void;
     /**
      * Type of `input` depends on `type` prop and which action occured.
@@ -22,4 +23,4 @@ export interface ModalProps {
  *
  * For easy use, you should use the hook `useModal` together with `ModalProvider`. See the example there.
  */
-export default function Modal({ modalContent, modalTitle, unSetModalContent, onSubmit, defaultInput, type }: ModalProps): JSX.Element;
+export default function Modal({ modalContent, modalTitle, modalIcon, unSetModalContent, onSubmit, defaultInput, type }: ModalProps): 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) => Promise<string | boolean>;
-    tell: (text: string, title?: string) => Promise<boolean>;
-    verify: (text: string, title?: string) => Promise<boolean>;
+    ask: (text: string, title?: string, icon?: ReactNode) => Promise<string | boolean>;
+    tell: (text: string, title?: string, icon?: ReactNode) => Promise<boolean>;
+    verify: (text: string, title?: string, icon?: ReactNode) => Promise<boolean>;
 };
 export { ModalProvider, useModal };

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "blue-react",
-    "version": "8.6.2",
+    "version": "8.7.0",
     "description": "Blue React Components",
     "license": "LGPL-3.0-or-later",
     "main": "index.js",