blue-react 9.7.2 → 9.9.0

package/dist/style.scss

@@ -1,5 +1,5 @@
 /*!
- * Blue React v9.7.2 (https://bruegmann.github.io/blue-react)
+ * Blue React v9.9.0 (https://bruegmann.github.io/blue-react)
  * Licensed under GNU General Public License v3.0 (https://github.com/bruegmann/blue-react/blob/master/LICENSE).
 */
 
@@ -14,6 +14,30 @@
 // @import "./styles/_bootstrap";
 @import "node_modules/bootstrap/scss/bootstrap";
 
+@import "node_modules/bootstrap/scss/functions";
+@import "node_modules/bootstrap/scss/variables";
+@import "node_modules/bootstrap/scss/variables-dark";
+@import "node_modules/bootstrap/scss/maps";
+@import "node_modules/bootstrap/scss/mixins";
+@import "node_modules/bootstrap/scss/utilities";
+
+// Extended Bootstrap utilities with responsive position as mentioned on
+// https://getbootstrap.com/docs/5.3/utilities/api/#enable-responsive
+$utilities: map-merge(
+    $utilities,
+    (
+        "position":
+            map-merge(
+                map-get($utilities, "position"),
+                (
+                    responsive: true
+                )
+            )
+    )
+);
+
+@import "node_modules/bootstrap/scss/utilities/api";
+
 // Per CSS-Variablen überschreibbar machen, da es von Bootstrap aus noch nicht möglich ist.
 // Bei neuer Bootstrap-Version prüfen, ob es noch nötig ist.
 .form-check-input:checked {

package/dist/styles/_action-menu.scss

@@ -47,7 +47,7 @@
     }
 
     .blue-menu-item-dropdown-toggle .blue-menu-item-label {
-        margin-right: 2rem;
+        margin-right: 0.5rem;
     }
 
     .blue-menu-item-label,

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

@@ -1,5 +1,8 @@
-/// <reference types="react" />
+import React from "react";
 import { breakOption } from "./shared";
+export declare const ActionMenuContext: React.Context<{
+    breakOption: breakOption | "none";
+}>;
 export interface ActionMenuProps {
     /**
      * Hides the toggle button in mobile view. Can be useful when using multiple ActionMenus and not show the toggle button for each menu.
@@ -12,7 +15,7 @@ export interface ActionMenuProps {
     toggleIcon?: any;
     className?: string;
     /**
-     * "sm" | "md" | "lg" | "xl" | "none"
+     * "sm" | "md" | "lg" | "xl" | "none". Default is "lg". The responsive breakpoint at which the menu will be shown as a dropdown.
      */
     break?: breakOption | "none";
 }

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

@@ -0,0 +1,35 @@
+/// <reference types="react" />
+import { MenuItemProps } from "./MenuItem";
+export interface ActionMenuItemProps extends MenuItemProps {
+}
+/**
+ * Use this instead of `MenuItem` when you want to use it inside an `ActionMenu` to make it appear as a dropdown.
+ *
+ * It basically is a shortcut. Instead of writing:
+ *
+ * ```tsx
+ * <ActionMenu>
+ *     <div className="position-relative z-1">
+ *         <MenuItem
+ *             label="Parent"
+ *             supportOutside
+ *             dropdownClassName={`position-md-absolute end-0 d-flex flex-column`}
+ *         >
+ *             <MenuItem label="Item 1" />
+ *         </MenuItem>
+ *     </div>
+ * </ActionMenu>
+ * ```
+ *
+ * you can write:
+ * ```tsx
+ * <ActionMenu>
+ *     <ActionMenuItem label="Parent">
+ *         <MenuItem label="Item 1" />
+ *     </MenuItem>
+ * </ActionMenu>
+ * ```
+ *
+ * The responsive utility class for absolute position (`position-md-absolute` in this example) is automatically added based on the `break` param of the parent `ActionMenu`.
+ */
+export default function ActionMenuItem({ children, ...props }: ActionMenuItemProps): JSX.Element;

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

@@ -13,5 +13,6 @@ export interface CaretProps {
 }
 /**
  * Caret icon component.
+ * Will be replaced by the `Chevron` component in the next major version.
  */
 export default function Caret({ open, mirrored, className, style }: CaretProps): JSX.Element;

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

@@ -0,0 +1,17 @@
+import { CSSProperties } from "react";
+export interface ChevronProps {
+    /**
+     * Indicates if open or not.
+     */
+    open?: boolean;
+    /**
+     * By default the chevron points to the right when closed. Set mirrored and it will point to the left.
+     */
+    mirrored?: boolean;
+    className?: string;
+    style?: CSSProperties;
+}
+/**
+ * Chevron icon component with open state.
+ */
+export default function Chevron({ open, mirrored, className, style }: ChevronProps): JSX.Element;

package/index.d.ts

@@ -15,12 +15,18 @@ export { ActionMenuProps } from "./dist/types/components/ActionMenu"
 export { default as ActionMenuSwitch } from "./dist/types/components/ActionMenuSwitch"
 export { ActionMenuSwitchProps } from "./dist/types/components/ActionMenuSwitch"
 
+export { default as ActionMenuItem } from "./dist/types/components/ActionMenuItem"
+export { ActionMenuItemProps } from "./dist/types/components/ActionMenuItem"
+
 export { default as Body } from "./dist/types/components/Body"
 export { BodyProps } from "./dist/types/components/Body"
 
 export { default as Caret } from "./dist/types/components/Caret"
 export { CaretProps } from "./dist/types/components/Caret"
 
+export { default as Chevron } from "./dist/types/components/Chevron"
+export { ChevronProps } from "./dist/types/components/Chevron"
+
 export { default as Header } from "./dist/types/components/Header"
 export { HeaderProps } from "./dist/types/components/Header"
 

package/index.js

@@ -1,7 +1,9 @@
 exports.ActionMenu = require("./dist/components/ActionMenu.js")["default"]
 exports.ActionMenuSwitch = require("./dist/components/ActionMenuSwitch.js")["default"]
+exports.ActionMenuItem = require("./dist/components/ActionMenuItem.js")["default"]
 exports.Body = require("./dist/components/Body.js")["default"]
 exports.Caret = require("./dist/components/Caret.js")["default"]
+exports.Chevron = require("./dist/components/Chevron.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"]

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "blue-react",
-    "version": "9.7.2",
+    "version": "9.9.0",
     "description": "Blue React Components",
     "license": "LGPL-3.0-or-later",
     "main": "index.js",
@@ -15,7 +15,7 @@
     },
     "scripts": {
         "start": "react-scripts start",
-        "build-docs": "react-scripts build && npm run docgen",
+        "build-docs": "react-scripts build && npm run docgen && node indexCssSections.js",
         "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",