blue-react 9.0.0 → 9.1.0

package/dist/style.scss

@@ -1,5 +1,5 @@
 /*!
- * Blue React v9.0.0-alpha2 (https://bruegmann.github.io/blue-react)
+ * Blue React v9.1.0-alpha2 (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

@@ -54,17 +54,9 @@
     // Support for MenuItems
     .blue-menu-item {
         width: auto;
-        margin-top: 0;
-        margin-bottom: 0;
 
         &.active::after {
-            top: initial;
-            bottom: 0.125rem;
-            left: 0.625rem;
-            right: 0.625rem;
-            width: auto;
-            height: 0.25rem;
-            animation: sidebar-menu-item-indicator-in-from-below 0.2s ease-in-out;
+            @include blue-menu-item-indicator-horizontal();
         }
     }
 

package/dist/styles/_hover.scss

@@ -7,7 +7,7 @@
 
 @media (hover: hover) {
     .blue-d-hover {
-        &:not(:hover):not(:focus):not(:active):not(.active) {
+        &:not(:hover):not(:focus):not(:active):not(.active):not(:focus-within) {
             .blue-d-hover-content-active {
                 display: none;
             }
@@ -16,7 +16,8 @@
         &:hover,
         &:focus,
         &:active,
-        &.active {
+        &.active,
+        &:focus-within {
             .blue-d-hover-content-default {
                 display: none;
             }
@@ -24,7 +25,7 @@
     }
 
     .blue-opacity-hover {
-        &:not(:hover):not(:focus):not(:active):not(.active) {
+        &:not(:hover):not(:focus):not(:active):not(.active):not(:focus-within) {
             .blue-opacity-hover-content-active {
                 opacity: 0;
             }
@@ -33,7 +34,8 @@
         &:hover,
         &:focus,
         &:active,
-        &.active {
+        &.active,
+        &:focus-within {
             .blue-opacity-hover-content-default {
                 opacity: 0;
             }

package/dist/styles/_layout.scss

@@ -258,8 +258,6 @@
     transition: width 0.5s, background-color 0.3s, color 0.15s, box-shadow 0.3s, opacity 0.3s !important;
     padding: 0.5rem 0.75rem;
     border: none;
-    margin-top: 0.125rem;
-    margin-bottom: 0.125rem;
 
     &:focus {
         box-shadow: none;

package/dist/styles/_mixins.scss

@@ -1,6 +1,7 @@
-@import "./mixins/_misc.scss";
-@import "./mixins/_sidebar.scss";
-@import "./mixins/action-menu.scss";
-@import "./mixins/_switch.scss";
-@import "./mixins/custom-property.scss";
+@import "./mixins/misc";
+@import "./mixins/menu-item";
+@import "./mixins/sidebar";
+@import "./mixins/action-menu";
+@import "./mixins/switch";
+@import "./mixins/custom-property";
 @import "./mixins/scroll-shadow";

package/dist/styles/mixins/_menu-item.scss

@@ -0,0 +1,21 @@
+@mixin blue-menu-item-indicator() {
+    content: "";
+    position: absolute;
+    top: 0.625rem;
+    bottom: 0.625rem;
+    left: 0.125rem;
+    width: 0.25rem;
+    background-color: var(--blue-menu-item-indicator-bg);
+    border-radius: 1rem;
+    animation: blue-menu-item-indicator-in-from-side 0.2s ease-in-out;
+}
+
+@mixin blue-menu-item-indicator-horizontal() {
+    top: initial;
+    bottom: 0.125rem;
+    left: 0.625rem;
+    right: 0.625rem;
+    width: auto;
+    height: 0.25rem;
+    animation: blue-menu-item-indicator-in-from-below 0.2s ease-in-out;
+}

package/dist/styles/mixins/_sidebar.scss

@@ -65,6 +65,14 @@
     .blue-header-logo.sidebar {
         transform: translateX(0);
     }
+
+    .blue-sidebar-menu-horizontal-on-open {
+        .blue-menu-item {
+            &.active::after {
+                @include blue-menu-item-indicator-horizontal();
+            }
+        }
+    }
 }
 
 @mixin blue-sidebar($width) {
@@ -119,15 +127,7 @@
         }
 
         &.active::after {
-            content: "";
-            position: absolute;
-            top: 0.625rem;
-            bottom: 0.625rem;
-            left: 0.125rem;
-            width: 0.25rem;
-            background-color: var(--blue-menu-item-indicator-bg);
-            border-radius: 1rem;
-            animation: sidebar-menu-item-indicator-in-from-side 0.2s ease-in-out;
+            @include blue-menu-item-indicator();
         }
 
         & > * + .blue-menu-item-label {
@@ -172,7 +172,7 @@
     }
 }
 
-@keyframes sidebar-menu-item-indicator-in-from-side {
+@keyframes blue-menu-item-indicator-in-from-side {
     from {
         transform: translateX(-100%);
     }
@@ -181,7 +181,7 @@
     }
 }
 
-@keyframes sidebar-menu-item-indicator-in-from-below {
+@keyframes blue-menu-item-indicator-in-from-below {
     from {
         transform: translateY(100%);
     }

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

@@ -0,0 +1,19 @@
+/// <reference types="react" />
+import { MenuItemProps } from "./MenuItem";
+export interface IconMenuItemProps extends MenuItemProps {
+    outerClass?: string;
+    /**
+     * Tooltip will be placed to the end/right by default. You can change the direction with this prop.
+     */
+    tooltipClass?: string;
+    /**
+     * When used inside of the sidebar: active indicator will be displayed underneath instead of before.
+     * The prop to `false` to disable this behavior.
+     */
+    horizontalOnOpenSidebar?: boolean;
+}
+/**
+ * Variant of `MenuItem` to primarily display an icon without a label.
+ * The label prop will be displayed as a tooltip.
+ */
+export default function IconMenuItem({ label, outerClass, tooltipClass, horizontalOnOpenSidebar, className, ...props }: IconMenuItemProps): JSX.Element;

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

@@ -18,6 +18,10 @@ export interface MenuItemProps {
      * Icon component or a class name.
      */
     icon?: any;
+    /**
+     * Addition to class name of icon wrapper element
+     */
+    iconClassName?: string;
     /**
      * Icon component or a class name when the MenuItem is active.
      */

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

@@ -13,12 +13,12 @@ export declare function hideSuccess(): void;
 export declare function toggleActions(): void;
 /**
  * Resets alert messages that was set with `setAlertMessage`.
- * When using React, you should use `StatusProvider` instead: https://bruegmann.github.io/blue-react/v8/component/StatusProvider
+ * When using React, you should use `StatusProvider` instead: https://bruegmann.github.io/blue-react/v9/component/StatusProvider
  * @param alertClassName Leave empty to reset messages of any status type
  */
 export declare function resetAlertMessage(alertClassName?: StatusType): void;
 /**
- * When using React, you should use `StatusProvider` instead: https://bruegmann.github.io/blue-react/v8/component/StatusProvider
+ * When using React, you should use `StatusProvider` instead: https://bruegmann.github.io/blue-react/v9/component/StatusProvider
  */
 export declare function setAlertMessage(message: string, alertClassName?: StatusType, close?: boolean, detailText?: string): void;
 export declare const guid: () => string;

package/index.d.ts

@@ -27,6 +27,9 @@ export { HeaderProps } from "./dist/types/components/Header"
 export { default as HeaderTitle } from "./dist/types/components/HeaderTitle"
 export { HeaderTitleProps } from "./dist/types/components/HeaderTitle"
 
+export { default as IconMenuItem } from "./dist/types/components/IconMenuItem"
+export { IconMenuItemProps } from "./dist/types/components/IconMenuItem"
+
 export { default as Intro } from "./dist/types/components/Intro"
 export { IntroProps } from "./dist/types/components/Intro"
 

package/index.js

@@ -5,6 +5,7 @@ exports.Caret = require("./dist/components/Caret.js")["default"]
 exports.Layout = require("./dist/components/Layout.js")["default"]
 exports.Header = require("./dist/components/Header.js")["default"]
 exports.HeaderTitle = require("./dist/components/HeaderTitle.js")["default"]
+exports.IconMenuItem = require("./dist/components/IconMenuItem.js")["default"]
 exports.Intro = require("./dist/components/Intro.js")["default"]
 exports.MenuItem = require("./dist/components/MenuItem.js")["default"]
 exports.Modal = require("./dist/components/Modal.js")["default"]

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "blue-react",
-    "version": "9.0.0",
+    "version": "9.1.0",
     "description": "Blue React Components",
     "license": "LGPL-3.0-or-later",
     "main": "index.js",
@@ -19,6 +19,7 @@
         "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-neu-css": "node-sass ./dist/neu.scss ./dist/neu.css && npx postcss ./dist/neu.css --use autoprefixer -r && npx postcss ./dist/neu.css --use postcss-minify -o ./dist/neu.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 && npm run license-report",
         "test": "react-scripts test",