@db-ux/react-core-components 1.1.0 → 1.1.1

package/README.md

@@ -46,6 +46,10 @@ import "@db-ux/core-components/build/styles/rollup.css";
 
 > **Note:** The `@db-ux/core-components/build/styles/relative` file contains optional and all components styles. If you consider performance issues see [@db-ux/core-components](https://www.npmjs.com/package/@db-ux/core-components) for more information.
 
+### DB Theme
+
+In case that you're building a website or application for Deutsche Bahn, you'll additionally have to install the DB Theme via the [`@db-ux/db-theme`](https://www.npmjs.com/package/@db-ux/db-theme) node package (even also available as an inner source node package, as described within that packages README).
+
 ## Usage
 
 ```tsx
@@ -60,7 +64,8 @@ import { DBButton } from '@db-ux/react-core-components';
 As we'd like to perfectly support our users and customers on their digital journey, the usage of Deutsche Bahn brand and trademarks are bound of clear guidelines and restrictions even when being used with the code that we're provide with this product; Deutsche Bahn fully reserves all rights regarding the Deutsche Bahn brand, even though that we're providing the code of DB UX Design System products free to use and release it under the Apache 2.0 license.
 Please have a look at our brand portal at <https://marketingportal.extranet.deutschebahn.com/> for any further questions and whom to contact on any brand issues.
 
-You must remove or replace any Deutsche Bahn brand and design assets as well as protected characteristics and trademarks. We're even also planning to provide a neutral theme that would make it much easier for you to use our product without the trademarks by Deutsche Bahn.
+For any usage outside of Deutsche Bahn websites and applications you aren't allowed to use any Deutsche Bahn brand and
+design assets as well as protected characteristics and trademarks, that for not including the DB Theme.
 
 ## Contributions
 

package/dist/components/navigation-item/model.d.ts

@@ -1,4 +1,4 @@
-import { ClickEvent, ClickEventProps, ClickEventState, GlobalProps, GlobalState, IconProps, InitializedState, NavigationBackButtonProps, ShowIconProps, TextProps, WidthProps } from '../../shared/model';
+import { ClickEvent, ClickEventProps, ClickEventState, GlobalProps, GlobalState, IconProps, InitializedState, NavigationBackButtonProps, NavigationBehaviorState, ShowIconProps, TextProps, WidthProps } from '../../shared/model';
 import { NavigationItemSafeTriangle } from '../../utils/navigation';
 export type DBNavigationItemDefaultProps = {
     /**
@@ -30,5 +30,6 @@ export type DBNavigationItemDefaultState = {
     hasSubNavigation?: boolean;
     updateSubNavigationState: () => void;
     navigationItemSafeTriangle?: NavigationItemSafeTriangle;
+    autoClose?: boolean;
 };
-export type DBNavigationItemState = DBNavigationItemDefaultState & ClickEventState<HTMLButtonElement> & GlobalState & InitializedState;
+export type DBNavigationItemState = DBNavigationItemDefaultState & ClickEventState<HTMLButtonElement> & GlobalState & InitializedState & NavigationBehaviorState;

package/dist/components/navigation-item/navigation-item.js

@@ -3,8 +3,8 @@ import * as React from "react";
 import { filterPassingProps, getRootProps } from "../../utils/react";
 import { useState, useRef, useEffect, forwardRef } from "react";
 import DBButton from "../button/button";
-import { cls, getBooleanAsString, getHideProp, uuid } from "../../utils";
-import { NavigationItemSafeTriangle } from "../../utils/navigation";
+import { cls, delay, getBooleanAsString, getHideProp, uuid } from "../../utils";
+import { isEventTargetNavigationItem, NavigationItemSafeTriangle, } from "../../utils/navigation";
 import { DEFAULT_BACK } from "../../shared/constants";
 function DBNavigationItemFn(props, component) {
     var _a;
@@ -13,8 +13,17 @@ function DBNavigationItemFn(props, component) {
     const [hasAreaPopup, setHasAreaPopup] = useState(() => false);
     const [hasSubNavigation, setHasSubNavigation] = useState(() => true);
     const [isSubNavigationExpanded, setIsSubNavigationExpanded] = useState(() => false);
+    const [autoClose, setAutoClose] = useState(() => false);
     const [subNavigationId, setSubNavigationId] = useState(() => "sub-navigation-" + uuid());
     const [navigationItemSafeTriangle, setNavigationItemSafeTriangle] = useState(() => undefined);
+    function handleNavigationItemClick(event) {
+        if (isEventTargetNavigationItem(event)) {
+            setAutoClose(true);
+            delay(() => {
+                setAutoClose(false);
+            }, 300);
+        }
+    }
     function handleClick(event) {
         if (props.onClick) {
             props.onClick(event);
@@ -59,7 +68,7 @@ function DBNavigationItemFn(props, component) {
         !hasSubNavigation ? (React.createElement(React.Fragment, null, props.text ? React.createElement(React.Fragment, null, props.text) : React.createElement(React.Fragment, null, props.children))) : null,
         hasSubNavigation ? (React.createElement(React.Fragment, null,
             React.createElement("button", { className: "db-navigation-item-expand-button", "aria-haspopup": hasAreaPopup, "aria-expanded": isSubNavigationExpanded, disabled: props.disabled, onClick: (event) => handleClick(event) }, props.text ? React.createElement(React.Fragment, null, props.text) : React.createElement(React.Fragment, null, props.children)),
-            React.createElement("menu", { className: "db-sub-navigation", id: subNavigationId },
+            React.createElement("menu", { className: "db-sub-navigation", "data-auto-close": autoClose, id: subNavigationId, onClick: (event) => handleNavigationItemClick(event) },
                 hasAreaPopup ? (React.createElement("div", { className: "db-mobile-navigation-back" },
                     React.createElement(DBButton, { icon: "arrow_left", variant: "ghost", id: props.backButtonId, onClick: (event) => handleBackClick(event) }, (_a = props.backButtonText) !== null && _a !== void 0 ? _a : DEFAULT_BACK))) : null,
                 React.createElement(React.Fragment, null, props.subNavigation)))) : null));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@db-ux/react-core-components",
-  "version": "1.1.0",
+  "version": "1.1.1",
   "description": "React components for @db-ux/core-components",
   "repository": {
     "type": "git",
@@ -37,7 +37,7 @@
   },
   "sideEffects": false,
   "dependencies": {
-    "@db-ux/core-components": "1.1.0",
-    "@db-ux/core-foundations": "1.1.0"
+    "@db-ux/core-components": "1.1.1",
+    "@db-ux/core-foundations": "1.1.1"
   }
 }