blue-react 7.8.3 → 7.9.0

package/dist/styles/mixins/_custom-property.scss

@@ -1,10 +1,10 @@
-@mixin customProperty($name, $value) {
-    // fallback for older browser who do not support custom properties / css variables
-    #{$name}: #{$value};
-
-    // create a css variable (this might override the variable on any of the ancestor elements)
-    --#{$name}: #{$value};
-
-    // use the css variable on the property
-    #{$name}: var(--#{$name}, #{$value});
-}
+@mixin customProperty($name, $value) {
+    // fallback for older browser who do not support custom properties / css variables
+    #{$name}: #{$value};
+
+    // create a css variable (this might override the variable on any of the ancestor elements)
+    --#{$name}: #{$value};
+
+    // use the css variable on the property
+    #{$name}: var(--#{$name}, #{$value});
+}

package/dist/styles/mixins/_misc.scss

@@ -1,33 +1,33 @@
-@mixin custom-scrollbar($thumb-color, $bg-color, $track-border-radius: 0) {
-    ::-webkit-scrollbar-thumb {
-        background-color: rgba($thumb-color, 0.4);
-        box-shadow: inset 1px 1px 0 rgba($thumb-color, 0.1),
-            inset 0 -1px 0 rgba($thumb-color, 0.07);
-    }
-    ::-webkit-scrollbar-thumb:hover {
-        background-color: rgba($thumb-color, 0.5);
-    }
-    ::-webkit-scrollbar-thumb:active {
-        background-color: rgba($thumb-color, 0.6);
-    }
-
-    ::-webkit-scrollbar-track {
-        background-color: $bg-color;
-        border-radius: $track-border-radius;
-    }
-}
-
-@mixin slide-transition() {
-    $slide-transition: width 0.5s;
-    transition: $slide-transition;
-}
-
-@mixin header-bg() {
-    background-color: rgba($header-bg, $shimmering);
-    background-image: linear-gradient(
-        0deg,
-        rgba($header-bg, 0.8),
-        rgba($header-bg, 0.7)
-    );
-    backdrop-filter: blur(3px) saturate(125%);
-}
+@mixin custom-scrollbar($thumb-color, $bg-color, $track-border-radius: 0) {
+    ::-webkit-scrollbar-thumb {
+        background-color: rgba($thumb-color, 0.4);
+        box-shadow: inset 1px 1px 0 rgba($thumb-color, 0.1),
+            inset 0 -1px 0 rgba($thumb-color, 0.07);
+    }
+    ::-webkit-scrollbar-thumb:hover {
+        background-color: rgba($thumb-color, 0.5);
+    }
+    ::-webkit-scrollbar-thumb:active {
+        background-color: rgba($thumb-color, 0.6);
+    }
+
+    ::-webkit-scrollbar-track {
+        background-color: $bg-color;
+        border-radius: $track-border-radius;
+    }
+}
+
+@mixin slide-transition() {
+    $slide-transition: width 0.5s;
+    transition: $slide-transition;
+}
+
+@mixin header-bg() {
+    background-color: rgba($header-bg, $shimmering);
+    background-image: linear-gradient(
+        0deg,
+        rgba($header-bg, 0.8),
+        rgba($header-bg, 0.7)
+    );
+    backdrop-filter: blur(3px) saturate(125%);
+}

package/dist/styles/mixins/_scroll-shadow.scss

@@ -1,9 +1,9 @@
-@mixin scroll-shadow($bg, $light-base: white) {
-    background: linear-gradient($bg 30%, rgba($light-base, 0)),
-        linear-gradient(rgba($light-base, 0) 10px, $bg 70%) bottom,
-        radial-gradient(at top, rgba(0, 0, 0, 0.2), transparent 70%),
-        radial-gradient(at bottom, rgba(0, 0, 0, 0.2), transparent 70%) bottom;
-    background-repeat: no-repeat;
-    background-size: 100% 20px, 100% 20px, 100% 10px, 100% 10px;
-    background-attachment: local, local, scroll, scroll;
-}
+@mixin scroll-shadow($bg, $light-base: white) {
+    background: linear-gradient($bg 30%, rgba($light-base, 0)),
+        linear-gradient(rgba($light-base, 0) 10px, $bg 70%) bottom,
+        radial-gradient(at top, rgba(0, 0, 0, 0.2), transparent 70%),
+        radial-gradient(at bottom, rgba(0, 0, 0, 0.2), transparent 70%) bottom;
+    background-repeat: no-repeat;
+    background-size: 100% 20px, 100% 20px, 100% 10px, 100% 10px;
+    background-attachment: local, local, scroll, scroll;
+}

package/dist/styles/mixins/_switch.scss

@@ -1,85 +1,85 @@
-@mixin switch(
-    $width: 35px,
-    $height: 20px,
-    $padding: 3px,
-    $color: $body-color,
-    $color-active: $success
-) {
-    $slider-size: $height - ($padding * 2);
-
-    & {
-        position: relative;
-        display: inline-block;
-        width: $width;
-        height: $height;
-
-        input {
-            display: none;
-        }
-
-        &.disabled {
-            opacity: 0.8;
-        }
-
-        &:not(.disabled) {
-            .slider {
-                cursor: pointer;
-            }
-        }
-
-        .slider {
-            position: absolute;
-            top: 0;
-            left: 0;
-            right: 0;
-            bottom: 0;
-            background-color: $input-group-addon-bg;
-            transition: 0.4s;
-            box-shadow: inset 0 0 0 1px rgba($color, 0.5);
-
-            &::before {
-                content: "";
-                position: absolute;
-                height: $slider-size;
-                width: $slider-size;
-                left: $padding;
-                bottom: $padding;
-                background-color: $color;
-                transition: 0.4s;
-            }
-
-            &::after {
-                content: attr(data-label);
-                position: absolute;
-                top: 50%;
-                left: 50%;
-                transform: translate(-50%, -50%);
-                margin-left: ($slider-size / 2);
-                transition: margin-left 0.4s;
-                color: $color;
-            }
-        }
-
-        input:checked {
-            & + .slider {
-                background-color: $color-active;
-                box-shadow: inset 0 0 12px rgba(255, 255, 255, 0.3);
-
-                &::before {
-                    transform: translateX(
-                        $width - $slider-size - ($padding * 2)
-                    );
-                    background-color: white;
-                }
-
-                &::after {
-                    color: white;
-                    margin-left: ($slider-size / 2) * -1;
-                }
-            }
-        }
-        input:focus + .slider {
-            box-shadow: 0 0 1px $color-active;
-        }
-    }
-}
+@mixin switch(
+    $width: 35px,
+    $height: 20px,
+    $padding: 3px,
+    $color: $body-color,
+    $color-active: $success
+) {
+    $slider-size: $height - ($padding * 2);
+
+    & {
+        position: relative;
+        display: inline-block;
+        width: $width;
+        height: $height;
+
+        input {
+            display: none;
+        }
+
+        &.disabled {
+            opacity: 0.8;
+        }
+
+        &:not(.disabled) {
+            .slider {
+                cursor: pointer;
+            }
+        }
+
+        .slider {
+            position: absolute;
+            top: 0;
+            left: 0;
+            right: 0;
+            bottom: 0;
+            background-color: $input-group-addon-bg;
+            transition: 0.4s;
+            box-shadow: inset 0 0 0 1px rgba($color, 0.5);
+
+            &::before {
+                content: "";
+                position: absolute;
+                height: $slider-size;
+                width: $slider-size;
+                left: $padding;
+                bottom: $padding;
+                background-color: $color;
+                transition: 0.4s;
+            }
+
+            &::after {
+                content: attr(data-label);
+                position: absolute;
+                top: 50%;
+                left: 50%;
+                transform: translate(-50%, -50%);
+                margin-left: ($slider-size / 2);
+                transition: margin-left 0.4s;
+                color: $color;
+            }
+        }
+
+        input:checked {
+            & + .slider {
+                background-color: $color-active;
+                box-shadow: inset 0 0 12px rgba(255, 255, 255, 0.3);
+
+                &::before {
+                    transform: translateX(
+                        $width - $slider-size - ($padding * 2)
+                    );
+                    background-color: white;
+                }
+
+                &::after {
+                    color: white;
+                    margin-left: ($slider-size / 2) * -1;
+                }
+            }
+        }
+        input:focus + .slider {
+            box-shadow: 0 0 1px $color-active;
+        }
+    }
+}

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

@@ -70,7 +70,8 @@ export interface GridState {
 }
 /**
  * The main component. As soon this component is mounted, it is globally available under `window.blueGridRef`.
- * Also you can append your own event listeners with `blueGridRef.addEventListener(eventName, (prevProps, prevState) => { })`.
+ * Also you can append your own event listeners with `blueGridRef.addEventListener(eventName, (prevProps, prevState) => { })`
+ * and remove it with `blueGridRef.removeEventListener(eventName, listener)`.
  *
  * Allowed event listeners:
  *
@@ -106,5 +107,6 @@ export default class Grid extends Component<GridProps, GridState> {
     hideSidebar(e: any): void;
     initMatch(): void;
     addEventListener(param1: any, param2: any, param3: any): void;
+    removeEventListener(type: string, listener: any): void;
     render(): JSX.Element;
 }

package/package.json

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