blue-react 8.0.0-next.3 → 8.0.1

package/dist/styles/mixins/_sidebar.scss

@@ -1,142 +1,142 @@
-@mixin openSidebarMenu() {
-    .blue-sidebar-hidden-on-open {
-        display: none;
-    }
-
-    .blue-sidebar-visible-on-open {
-        animation: fade-in 1s;
-        display: flex;
-    }
-
-    .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,
-    .blue-sidebar .blue-menu-item {
-        width: $bla-sidebar-width;
-    }
-
-    .blue-sidebar .blue-menu-item {
-        & > * {
-            width: auto;
-        }
-    }
-
-    .blue-sub-sidebar {
-        left: $bla-sidebar-width;
-    }
-
-    .blue-menu-item-dropdown-caret.caret {
-        display: flex;
-    }
-
-    .blue-menu-item-dropdown {
-        .blue-menu-item {
-            width: 100%;
-        }
-    }
-
-    /* search */
-    .blue-search {
-        background-color: $sidebar-search-bg;
-    }
-
-    .blue-search-btn {
-        display: none;
-    }
-
-    .blue-search-input-group {
-        display: flex;
-        align-items: center;
-    }
-
-    .blue-header-logo.sidebar {
-        transform: translateX(0);
-    }
-}
-
-@mixin blue-sidebar($width) {
-    .blue-menu-item {
-        color: $sidebar-color;
-        width: $normal-size;
-        height: $normal-size;
-        padding: 0.25rem 0.75rem;
-        font-size: $bla-btn-font-size;
-        display: flex;
-        align-items: center;
-        border-color: transparent;
-        @include slide-transition();
-
-        &:hover,
-        &:active {
-            color: $sidebar-color;
-            background-color: $sidebar-control-bg-hover !important;
-            border-color: transparent;
-        }
-
-        &.active::before {
-            content: "";
-            position: absolute;
-            top: 0.625rem;
-            bottom: 0.625rem;
-            left: 0;
-            width: 0.25rem;
-            background-color: $sidebar-indicator-color;
-            border-top-right-radius: 1rem;
-            border-bottom-right-radius: 1rem;
-            animation: sidebar-menu-item-indicator-in 0.2s ease-in-out;
-        }
-
-        & > * + .blue-menu-item-label {
-            margin-left: 0.5rem;
-        }
-    }
-
-    .blue-sidebar {
-        width: $width;
-        color: $sidebar-color;
-        background: var(--sidebar-bg);
-        position: fixed;
-        left: 0;
-        top: $normal-size;
-        bottom: 0;
-        z-index: 3;
-        display: flex;
-        flex-direction: column;
-        @include slide-transition();
-
-        .blue-menu {
-            overflow-y: auto;
-            flex: 1;
-            @include scroll-shadow(var(--sidebar-bg), $sidebar-bg);
-        }
-
-        &:hover {
-            .blue-menu-item {
-                background-color: var(--sidebar-bg);
-            }
-        }
-
-        .blue-menu-item {
-            & > * {
-                width: 100%;
-            }
-        }
-    }
-}
-
-@keyframes sidebar-menu-item-indicator-in {
-    from {
-        transform: translateX(-100%);
-    }
-    to {
-        transform: translateX(1);
-    }
-}
+@mixin openSidebarMenu() {
+    .blue-sidebar-hidden-on-open {
+        display: none;
+    }
+
+    .blue-sidebar-visible-on-open {
+        animation: fade-in 1s;
+        display: flex;
+    }
+
+    .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,
+    .blue-sidebar .blue-menu-item {
+        width: $bla-sidebar-width;
+    }
+
+    .blue-sidebar .blue-menu-item {
+        & > * {
+            width: auto;
+        }
+    }
+
+    .blue-sub-sidebar {
+        left: $bla-sidebar-width;
+    }
+
+    .blue-menu-item-dropdown-caret.caret {
+        display: flex;
+    }
+
+    .blue-menu-item-dropdown {
+        .blue-menu-item {
+            width: 100%;
+        }
+    }
+
+    /* search */
+    .blue-search {
+        background-color: $sidebar-search-bg;
+    }
+
+    .blue-search-btn {
+        display: none;
+    }
+
+    .blue-search-input-group {
+        display: flex;
+        align-items: center;
+    }
+
+    .blue-header-logo.sidebar {
+        transform: translateX(0);
+    }
+}
+
+@mixin blue-sidebar($width) {
+    .blue-menu-item {
+        color: $sidebar-color;
+        width: $normal-size;
+        height: $normal-size;
+        padding: 0.25rem 0.75rem;
+        font-size: $bla-btn-font-size;
+        display: flex;
+        align-items: center;
+        border-color: transparent;
+        @include slide-transition();
+
+        &:hover,
+        &:active {
+            color: $sidebar-color;
+            background-color: $sidebar-control-bg-hover !important;
+            border-color: transparent;
+        }
+
+        &.active::before {
+            content: "";
+            position: absolute;
+            top: 0.625rem;
+            bottom: 0.625rem;
+            left: 0;
+            width: 0.25rem;
+            background-color: $sidebar-indicator-color;
+            border-top-right-radius: 1rem;
+            border-bottom-right-radius: 1rem;
+            animation: sidebar-menu-item-indicator-in 0.2s ease-in-out;
+        }
+
+        & > * + .blue-menu-item-label {
+            margin-left: 0.5rem;
+        }
+    }
+
+    .blue-sidebar {
+        width: $width;
+        color: $sidebar-color;
+        background: var(--sidebar-bg);
+        position: fixed;
+        left: 0;
+        top: $normal-size;
+        bottom: 0;
+        z-index: 3;
+        display: flex;
+        flex-direction: column;
+        @include slide-transition();
+
+        .blue-menu {
+            overflow-y: auto;
+            flex: 1;
+            @include scroll-shadow(var(--sidebar-bg), $sidebar-bg);
+        }
+
+        &:hover {
+            .blue-menu-item {
+                background-color: var(--sidebar-bg);
+            }
+        }
+
+        .blue-menu-item {
+            & > * {
+                width: 100%;
+            }
+        }
+    }
+}
+
+@keyframes sidebar-menu-item-indicator-in {
+    from {
+        transform: translateX(-100%);
+    }
+    to {
+        transform: translateX(1);
+    }
+}

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 * 0.5);
+                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 * 0.5) * -1;
+                }
+            }
+        }
+        input:focus + .slider {
+            box-shadow: 0 0 1px $color-active;
+        }
+    }
+}

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

@@ -70,16 +70,23 @@ export interface LayoutState {
 }
 /**
  * The main component. As soon this component is mounted, it is globally available under `window.blueLayoutRef`.
- * Also you can append your own event listeners with `blueLayoutRef.addEventListener(eventName, (prevProps, prevState) => { })`.
+ * You can also append your own event listeners.
  *
- * Allowed event listeners:
+ * Allowed events:
  *
  * * **componentDidUpdate** - Component was updated.
- *   Example: `blueLayoutRef.addEventListener("componentDidUpdate", (prevProps, prevState) => { })`
+ *   Example: `window.blueLayoutRef.addEventListener("componentDidUpdate", (prevProps, prevState) => { })`
  * * **pageDidShowAgain** - Page appeared again with the same old state. In the callback function you can reinitialize things.
- *   Example: `blueLayoutRef.addEventListener("pageDidShowAgain", "home", (prevProps, prevState) => { })`
+ *   Example: `window.blueLayoutRef.addEventListener("pageDidShowAgain", "home", (prevProps, prevState) => { })`
  * * **pageDidHide** - This page disappeared and another page appears instead.
- *   Example: `blueLayoutRef.addEventListener("pageDidHide", "home", (prevProps, prevState) => { })`
+ *   Example: `window.blueLayoutRef.addEventListener("pageDidHide", "home", (prevProps, prevState) => { })`
+ *
+ * Method to add event listeners:
+ * * `window.blueLayoutRef.`**addEventListener**`(eventName: string, param2: any, param3: any, listenerId?: string)`
+ *
+ * Methods to remove event listeners:
+ * * `window.blueLayoutRef.`**removeEventListener**`(eventName: string, listenerId: string)`
+ * * `window.blueLayoutRef.`**removeDuplicatedEventListeners**`()` - Will automatically be called when running `addEventListener`
  */
 export default class Layout extends Component<LayoutProps, LayoutState> {
     defaultMatch: string[];
@@ -105,6 +112,8 @@ export default class Layout extends Component<LayoutProps, LayoutState> {
     toggleSidebar(event: any): void;
     hideSidebar(e: any): void;
     initMatch(): void;
-    addEventListener(param1: any, param2: any, param3: any): void;
+    addEventListener(param1: any, param2: any, param3: any, listenerId?: string): void;
+    removeEventListener(type: string, listenerId: string): void;
+    removeDuplicatedEventListeners(): void;
     render(): JSX.Element;
 }

package/package.json

@@ -1,88 +1,88 @@
-{
-    "name": "blue-react",
-    "version": "8.0.0-next.3",
-    "description": "Blue React Components",
-    "license": "LGPL-3.0-or-later",
-    "main": "index.js",
-    "types": "index.d.ts",
-    "homepage": "https://bruegmann.github.io/blue-react/v8",
-    "repository": {
-        "type": "git",
-        "url": "https://github.com/bruegmann/blue-react.git"
-    },
-    "bugs": {
-        "url": "https://github.com/bruegmann/blue-react/issues"
-    },
-    "scripts": {
-        "start": "react-scripts start",
-        "build-docs": "react-scripts build && npm run docgen",
-        "build-types": "tsc --declaration --emitDeclarationOnly --declarationDir ./dist/types --noEmit false",
-        "build": "babel ./src/components --out-dir ./dist/components --extensions \".tsx,.js,.ts\"",
-        "build-css": "node ./setVersionToStyleScss.js && node-sass ./dist/style.scss ./dist/style.css && npx postcss ./dist/style.css --use autoprefixer -r && npx postcss ./dist/style.css --use postcss-minify -o ./dist/style.min.css",
-        "build-release": "npm run build-types && npm run build && npm run build-css && npm run docgen",
-        "docgen": "react-docgen ./src/components/ -o ./src/docs/data/docs.json --exclude Utilities.js --extension tsx && node followUpDocs",
-        "test": "react-scripts test",
-        "eject": "react-scripts eject",
-        "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",
-        "prettier": "npx prettier --write ."
-    },
-    "dependencies": {
-        "@popperjs/core": "^2.10.2",
-        "bootstrap": "^5.1.3",
-        "clsx": "^1.1.1"
-    },
-    "peerDependencies": {
-        "react": "^16.0.0 || ^17.0.0"
-    },
-    "devDependencies": {
-        "@babel/cli": "^7.10.4",
-        "@babel/preset-env": "^7.10.4",
-        "@babel/preset-react": "^7.10.4",
-        "@babel/preset-typescript": "^7.9.0",
-        "@testing-library/jest-dom": "^4.2.4",
-        "@testing-library/react": "^9.5.0",
-        "@testing-library/user-event": "^7.2.1",
-        "@types/bootstrap": "^5.0.17",
-        "@types/jest": "^24.9.1",
-        "@types/node": "^12.12.47",
-        "@types/react": "^17.0.3",
-        "@types/react-dom": "^17.0.3",
-        "@types/react-router-dom": "^5.1.5",
-        "@types/react-syntax-highlighter": "^13.5.0",
-        "autoprefixer": "^10.3.6",
-        "gh-pages": "^3.1.0",
-        "lint-staged": "^11.1.2",
-        "node-sass": "^4.14.1",
-        "postcss-cli": "^9.0.1",
-        "postcss-minify": "^1.1.0",
-        "prettier": "2.4.1",
-        "react": "^17.0.2",
-        "react-bootstrap-icons": "^1.5.0",
-        "react-docgen": "^5.4.0",
-        "react-dom": "^17.0.2",
-        "react-markdown-github": "^3.3.1",
-        "react-router-dom": "^5.2.0",
-        "react-scripts": "^4.0.3",
-        "react-syntax-highlighter": "^15.4.3",
-        "reactstrap": "^9.0.0-0",
-        "typescript": "^4.3.5"
-    },
-    "eslintConfig": {
-        "extends": "react-app"
-    },
-    "browserslist": {
-        "production": [
-            ">0.2%",
-            "not dead",
-            "not op_mini all"
-        ],
-        "development": [
-            "last 1 chrome version",
-            "last 1 firefox version",
-            "last 1 safari version"
-        ]
-    }
-}
+{
+    "name": "blue-react",
+    "version": "8.0.1",
+    "description": "Blue React Components",
+    "license": "LGPL-3.0-or-later",
+    "main": "index.js",
+    "types": "index.d.ts",
+    "homepage": "https://bruegmann.github.io/blue-react/v8",
+    "repository": {
+        "type": "git",
+        "url": "https://github.com/bruegmann/blue-react.git"
+    },
+    "bugs": {
+        "url": "https://github.com/bruegmann/blue-react/issues"
+    },
+    "scripts": {
+        "start": "react-scripts start",
+        "build-docs": "react-scripts build && npm run docgen",
+        "build-types": "tsc --declaration --emitDeclarationOnly --declarationDir ./dist/types --noEmit false",
+        "build": "babel ./src/components --out-dir ./dist/components --extensions \".tsx,.js,.ts\"",
+        "build-css": "node ./setVersionToStyleScss.js && node-sass ./dist/style.scss ./dist/style.css && npx postcss ./dist/style.css --use autoprefixer -r && npx postcss ./dist/style.css --use postcss-minify -o ./dist/style.min.css",
+        "build-release": "npm run build-types && npm run build && npm run build-css && npm run docgen",
+        "docgen": "react-docgen ./src/components/ -o ./src/docs/data/docs.json --exclude Utilities.js --extension tsx && node followUpDocs",
+        "test": "react-scripts test",
+        "eject": "react-scripts eject",
+        "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",
+        "prettier": "npx prettier --write ."
+    },
+    "dependencies": {
+        "@popperjs/core": "^2.10.2",
+        "bootstrap": "^5.1.3",
+        "clsx": "^1.1.1"
+    },
+    "peerDependencies": {
+        "react": "^16.0.0 || ^17.0.0"
+    },
+    "devDependencies": {
+        "@babel/cli": "^7.10.4",
+        "@babel/preset-env": "^7.10.4",
+        "@babel/preset-react": "^7.10.4",
+        "@babel/preset-typescript": "^7.9.0",
+        "@testing-library/jest-dom": "^4.2.4",
+        "@testing-library/react": "^9.5.0",
+        "@testing-library/user-event": "^7.2.1",
+        "@types/bootstrap": "^5.0.17",
+        "@types/jest": "^24.9.1",
+        "@types/node": "^12.12.47",
+        "@types/react": "^17.0.3",
+        "@types/react-dom": "^17.0.3",
+        "@types/react-router-dom": "^5.1.5",
+        "@types/react-syntax-highlighter": "^13.5.0",
+        "autoprefixer": "^10.3.6",
+        "gh-pages": "^3.1.0",
+        "lint-staged": "^11.1.2",
+        "node-sass": "^4.14.1",
+        "postcss-cli": "^9.0.1",
+        "postcss-minify": "^1.1.0",
+        "prettier": "2.4.1",
+        "react": "^17.0.2",
+        "react-bootstrap-icons": "^1.5.0",
+        "react-docgen": "^5.4.0",
+        "react-dom": "^17.0.2",
+        "react-markdown-github": "^3.3.1",
+        "react-router-dom": "^5.2.0",
+        "react-scripts": "^4.0.3",
+        "react-syntax-highlighter": "^15.4.3",
+        "reactstrap": "^9.0.0-0",
+        "typescript": "^4.3.5"
+    },
+    "eslintConfig": {
+        "extends": "react-app"
+    },
+    "browserslist": {
+        "production": [
+            ">0.2%",
+            "not dead",
+            "not op_mini all"
+        ],
+        "development": [
+            "last 1 chrome version",
+            "last 1 firefox version",
+            "last 1 safari version"
+        ]
+    }
+}