@crystaldesign/diva-navigator 26.13.0-beta.2 → 26.13.0-beta.20

package/build/esm/index.js

@@ -2,7 +2,7 @@ import React, { useRef, useEffect, useState, Fragment, useReducer, useCallback,
 import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
 import _objectDestructuringEmpty from '@babel/runtime/helpers/objectDestructuringEmpty';
 import classNames from 'classnames';
-import { useTranslation, useDivaCore, DivaUtils, getLogger } from '@crystaldesign/diva-core';
+import { useTranslation, useDivaCore, getLogger, DivaUtils } from '@crystaldesign/diva-core';
 import { jsxs, jsx, Fragment as Fragment$1 } from 'react/jsx-runtime';
 import _defineProperty from '@babel/runtime/helpers/defineProperty';
 import ClickAwayListener from '@mui/material/ClickAwayListener';
@@ -1599,9 +1599,15 @@ var logoutWrapper = "logout-wrapper-jI9Sq";
 var logoutButton = "logout-button-m87tE";
 var logoutIcon = "logout-icon-t01Yi";
 var footerVersion = "footer-version-0OgH9";
-var css_248z$g = ".wrapper-y5jTr {\n  display: flex;\n  justify-content: space-between;\n  color: #000;\n}\n\n.logout-wrapper-jI9Sq {\n  display: flex;\n  font-size: normal;\n  align-items: center;\n  gap: 12px;\n  cursor: pointer;\n}\n\n.logout-button-m87tE {\n  font-weight: 300;\n  width: -moz-fit-content;\n  width: fit-content;\n  transition: color 0.4s ease-out;\n}\n\n.logout-icon-t01Yi {\n  width: 18px !important;\n}\n\n.logout-icon-t01Yi {\n  transition: color 0.4s ease-out;\n  background-size: 100%;\n  display: block;\n  height: 18px;\n}\n\n.logout-wrapper-jI9Sq:hover .logout-icon-t01Yi,\n.logout-wrapper-jI9Sq:hover .logout-button-m87tE {\n  color: var(--diva-theme-palette-primary-main);\n  font-weight: 700;\n}\n\n.footer-version-0OgH9 {\n  font-size: small;\n  color: grey;\n}\n";
+var copyBearer = "copy-bearer-CaqhG";
+var copied = "copied-7csZO";
+var css_248z$g = ".wrapper-y5jTr {\n  display: flex;\n  justify-content: space-between;\n  color: #000;\n}\n\n.logout-wrapper-jI9Sq {\n  display: flex;\n  font-size: normal;\n  align-items: center;\n  gap: 12px;\n  cursor: pointer;\n}\n\n.logout-button-m87tE {\n  font-weight: 300;\n  width: -moz-fit-content;\n  width: fit-content;\n  transition: color 0.4s ease-out;\n}\n\n.logout-icon-t01Yi {\n  width: 18px !important;\n}\n\n.logout-icon-t01Yi {\n  transition: color 0.4s ease-out;\n  background-size: 100%;\n  display: block;\n  height: 18px;\n}\n\n.logout-wrapper-jI9Sq:hover .logout-icon-t01Yi,\n.logout-wrapper-jI9Sq:hover .logout-button-m87tE {\n  color: var(--diva-theme-palette-primary-main);\n  font-weight: 700;\n}\n\n.footer-version-0OgH9 {\n  font-size: small;\n  color: grey;\n}\n\n.copy-bearer-CaqhG {\n  cursor: pointer;\n  font-size: 10px;\n  margin-top: 5px;\n  text-align: right;\n  transform-origin: right center;\n  transition: color 0.2s ease-out;\n}\n\n.copy-bearer-CaqhG:hover,\n.copied-7csZO {\n  color: var(--diva-theme-palette-primary-main);\n}\n\n.copied-7csZO {\n  animation: copied-pop-hCe7b 0.3s ease-out;\n}\n\n@keyframes copied-pop-hCe7b {\n  50% {\n    transform: scale(1.2);\n  }\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .copied-7csZO {\n    animation: none;\n  }\n}\n";
 styleInject(css_248z$g);
 
+var LOG$2 = getLogger('Framework', 'Logout');
+
+/** How long the button confirms a copy before it reads "Copy Bearer" again */
+var COPIED_DURATION = 1500;
 var Logout = function Logout(_ref) {
   var setOpen = _ref.setOpen;
   var _useDivaCore = useDivaCore(),
@@ -1611,8 +1617,26 @@ var Logout = function Logout(_ref) {
     jwt = _useDivaCore.state.jwt;
   var _useTranslation = useTranslation(),
     t = _useTranslation.t;
+  var _useState = useState(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    isCopied = _useState2[0],
+    setIsCopied = _useState2[1];
+  var copiedTimer = useRef();
+  useEffect(function () {
+    return function () {
+      return window.clearTimeout(copiedTimer.current);
+    };
+  }, []);
   var onCopyBearer = function onCopyBearer() {
-    navigator.clipboard.writeText(jwt !== null && jwt !== void 0 ? jwt : '');
+    navigator.clipboard.writeText(jwt !== null && jwt !== void 0 ? jwt : '').then(function () {
+      setIsCopied(true);
+      window.clearTimeout(copiedTimer.current);
+      copiedTimer.current = window.setTimeout(function () {
+        return setIsCopied(false);
+      }, COPIED_DURATION);
+    }, function (e) {
+      return LOG$2.warn('Copying the bearer failed', e);
+    });
   };
   return /*#__PURE__*/jsxs("div", {
     className: wrapper$a,
@@ -1643,13 +1667,9 @@ var Logout = function Logout(_ref) {
         children: window.DIVA_VERSION
       }), ' ', userHasPermission('jwt') && /*#__PURE__*/jsx("div", {
         onClick: onCopyBearer,
-        style: {
-          cursor: 'pointer',
-          fontSize: 10,
-          marginTop: 5,
-          textAlign: 'right'
-        },
-        children: "Copy Bearer"
+        className: classNames(copyBearer, _defineProperty({}, copied, isCopied)),
+        "aria-live": "polite",
+        children: isCopied ? '✓ Copied' : 'Copy Bearer'
       })]
     })]
   });
@@ -1790,6 +1810,7 @@ var HidePrices = function HidePrices(props) {
 };
 
 var wrapper$8 = "wrapper-tqv-Y";
+var menu$1 = "menu-w8zcL";
 var usernameWrapper = "username-wrapper-4OtrW";
 var username = "username-cM3J3";
 var email = "email-AIUDL";
@@ -1797,11 +1818,10 @@ var languageWrapper = "language-wrapper-Cl-bc";
 var dropdown = "dropdown-ryNwY";
 var clickable = "clickable-MhS-F";
 var controlWrapper = "control-wrapper-u1DL4";
-var menu$1 = "menu-w8zcL";
 var arrowWrapper = "arrow-wrapper-rHbX-";
 var arrow = "arrow-i5G-Z";
 var openClass$1 = "open-class-U2edh";
-var css_248z$d = ".wrapper-tqv-Y {\n  display: flex;\n  width: 100%;\n}\n\n.username-wrapper-4OtrW {\n  display: flex;\n  flex-direction: column;\n  gap: 5px;\n  overflow: hidden;\n  text-wrap: nowrap;\n  white-space: nowrap;\n}\n.username-cM3J3 {\n  font-weight: 700;\n  font-size: 15px;\n}\n\n.email-AIUDL {\n  font-size: 13px;\n}\n\n.language-wrapper-Cl-bc {\n  width: 100px;\n  display: flex;\n  justify-content: center;\n  padding: 16px 0px;\n  border-left: 1px solid #fff;\n  height: 36px;\n}\n\n.dropdown-ryNwY {\n  margin-top: 10px;\n  font-size: 15px;\n  z-index: 100;\n}\n.clickable-MhS-F {\n  cursor: pointer;\n}\n\n.dropdown-ryNwY .is-selected {\n  transition: text-shadow ease-in-out 0.4s;\n}\n\n.dropdown-ryNwY:hover .is-selected {\n  text-shadow: 0px 0px 12px rgba(0, 0, 0, 0.55);\n}\n\n.control-wrapper-u1DL4 {\n  display: flex;\n  gap: 6px;\n  justify-content: center;\n  align-items: center;\n}\n\n.menu-w8zcL {\n  margin-top: 10px;\n  background-color: #f2f2f2;\n  border-radius: 26px;\n  width: 36px;\n  box-shadow: 0px 4px 4px 0px rgba(0,0,0,0.25098);\n  overflow: hidden;\n  transform: translateY(-44px);\n  padding: 7px;\n  display: flex;\n  gap: 12px;\n  flex-direction: column;\n}\n\n.menu-w8zcL > div {\n  width: 36px;\n  height: 36px;\n  text-align: center;\n  line-height: 36px;\n  cursor: pointer;\n  transition: color 0.3s ease, background-color 0.3s ease;\n  border-radius: 50%;\n}\n\n.menu-w8zcL > div:hover {\n  color: #fff;\n  background-color: var(--diva-theme-palette-primary-main);\n}\n\n.menu-w8zcL .is-selected {\n  color: #fff;\n  background-color: var(--diva-theme-palette-primary-main);\n}\n\n.arrow-wrapper-rHbX- {\n  width: 20px;\n  height: 20px;\n}\n\n.arrow-i5G-Z {\n  width: 20px;\n  height: 20px;\n  background: center / 50% no-repeat url(\"data:image/svg+xml,%3Csvg width%3D%227%22 height%3D%2211%22 viewBox%3D%220 0 7 11%22 fill%3D%22none%22 xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath d%3D%22M4.24303 5.41303L0.517911 1.73629C0.220592 1.44283 0.220592 0.967042 0.517911 0.673584C0.81523 0.380127 1.29728 0.380127 1.5946 0.673584L5.85806 4.88168C6.15538 5.17513 6.15538 5.65092 5.85806 5.94438L1.5946 10.1525C1.29728 10.4459 0.81523 10.4459 0.517911 10.1525C0.220592 9.85902 0.220592 9.38323 0.517911 9.08977L4.24303 5.41303Z%22 fill%3D%22%23B6B6B7%22%2F%3E%3C%2Fsvg%3E\");\n  transition: transform 0.3s ease;\n}\n\n.arrow-i5G-Z:hover {\n  cursor: pointer;\n}\n\n.open-class-U2edh {\n  transform: rotate(90deg);\n}\n";
+var css_248z$d = ".wrapper-tqv-Y {\n  display: flex;\n  width: 100%;\n}\n\n/* The sizes here are content-box sizes; the backoffice's antd reset would make every box border-box */\n.wrapper-tqv-Y > *,\n.menu-w8zcL {\n  box-sizing: content-box;\n}\n\n.username-wrapper-4OtrW {\n  display: flex;\n  flex-direction: column;\n  gap: 5px;\n  overflow: hidden;\n  text-wrap: nowrap;\n  white-space: nowrap;\n}\n.username-cM3J3 {\n  font-weight: 700;\n  font-size: 15px;\n}\n\n.email-AIUDL {\n  font-size: 13px;\n}\n\n.language-wrapper-Cl-bc {\n  width: 100px;\n  display: flex;\n  justify-content: center;\n  padding: 16px 0px;\n  border-left: 1px solid #fff;\n  height: 36px;\n}\n\n.dropdown-ryNwY {\n  margin-top: 10px;\n  font-size: 15px;\n  z-index: 100;\n}\n.clickable-MhS-F {\n  cursor: pointer;\n}\n\n.dropdown-ryNwY .is-selected {\n  transition: text-shadow ease-in-out 0.4s;\n}\n\n.dropdown-ryNwY:hover .is-selected {\n  text-shadow: 0px 0px 12px rgba(0, 0, 0, 0.55);\n}\n\n.control-wrapper-u1DL4 {\n  display: flex;\n  gap: 6px;\n  justify-content: center;\n  align-items: center;\n}\n\n.menu-w8zcL {\n  margin-top: 10px;\n  background-color: #f2f2f2;\n  border-radius: 26px;\n  width: 36px;\n  box-shadow: 0px 4px 4px 0px rgba(0,0,0,0.25098);\n  overflow: hidden;\n  transform: translateY(-44px);\n  padding: 7px;\n  display: flex;\n  gap: 12px;\n  flex-direction: column;\n}\n\n.menu-w8zcL > div {\n  width: 36px;\n  height: 36px;\n  text-align: center;\n  line-height: 36px;\n  cursor: pointer;\n  transition:\n    color 0.3s ease,\n    background-color 0.3s ease;\n  border-radius: 50%;\n}\n\n.menu-w8zcL > div:hover {\n  color: #fff;\n  background-color: var(--diva-theme-palette-primary-main);\n}\n\n.menu-w8zcL .is-selected {\n  color: #fff;\n  background-color: var(--diva-theme-palette-primary-main);\n}\n\n.arrow-wrapper-rHbX- {\n  width: 20px;\n  height: 20px;\n}\n\n.arrow-i5G-Z {\n  width: 20px;\n  height: 20px;\n  background: center / 50% no-repeat url(\"data:image/svg+xml,%3Csvg width%3D%227%22 height%3D%2211%22 viewBox%3D%220 0 7 11%22 fill%3D%22none%22 xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath d%3D%22M4.24303 5.41303L0.517911 1.73629C0.220592 1.44283 0.220592 0.967042 0.517911 0.673584C0.81523 0.380127 1.29728 0.380127 1.5946 0.673584L5.85806 4.88168C6.15538 5.17513 6.15538 5.65092 5.85806 5.94438L1.5946 10.1525C1.29728 10.4459 0.81523 10.4459 0.517911 10.1525C0.220592 9.85902 0.220592 9.38323 0.517911 9.08977L4.24303 5.41303Z%22 fill%3D%22%23B6B6B7%22%2F%3E%3C%2Fsvg%3E\");\n  transition: transform 0.3s ease;\n}\n\n.arrow-i5G-Z:hover {\n  cursor: pointer;\n}\n\n.open-class-U2edh {\n  transform: rotate(90deg);\n}\n";
 styleInject(css_248z$d);
 
 var UserAndLanguage = function UserAndLanguage(_ref) {
@@ -2112,7 +2132,7 @@ var wrapper$4 = "wrapper-dTEtU";
 var profil = "profil-9K4HQ";
 var loginMode = "login-mode-rV-Rt";
 var openClass = "open-class-piIJQ";
-var css_248z$7 = ".wrapper-dTEtU {\n  border-left: #f2f2f2 solid 1px;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  height: 100%;\n}\n\n.diva-component-DIVA_BACKOFFICE_NEW #diva-header.darkmode .wrapper-dTEtU, .diva-component-DIVA_DATA_ENGINE #diva-header.darkmode .wrapper-dTEtU {\n  border-left: black solid 1px;\n}\n\n.profil-9K4HQ {\n  margin: 6px 22px;\n  height: 46px;\n  cursor: pointer;\n  border-radius: 50%;\n  transition: box-shadow ease-in-out 0.4s;\n}\n\n.login-mode-rV-Rt {\n  position: absolute;\n  bottom: 4px;\n  right: 15px;\n  color: white;\n  background-color: var(--diva-theme-palette-primary-main);\n  font-size: 12px;\n  padding: 2px;\n  border-radius: 3px;\n  cursor: pointer;\n}\n\n.profil-9K4HQ:hover,\n.open-class-piIJQ {\n  box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.55);\n}\n";
+var css_248z$7 = ".wrapper-dTEtU {\n  border-left: #f2f2f2 solid 1px;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  height: 100%;\n}\n\n.diva-component-DIVA_BACKOFFICE_NEW #diva-header.darkmode .wrapper-dTEtU, .diva-component-DIVA_PRODUCT_ONBOARDING #diva-header.darkmode .wrapper-dTEtU, .diva-component-DIVA_DATA_ENGINE #diva-header.darkmode .wrapper-dTEtU {\n  border-left: black solid 1px;\n}\n\n.profil-9K4HQ {\n  margin: 6px 22px;\n  height: 46px;\n  cursor: pointer;\n  border-radius: 50%;\n  transition: box-shadow ease-in-out 0.4s;\n}\n\n.login-mode-rV-Rt {\n  position: absolute;\n  bottom: 4px;\n  right: 15px;\n  color: white;\n  background-color: var(--diva-theme-palette-primary-main);\n  font-size: 12px;\n  padding: 2px;\n  border-radius: 3px;\n  cursor: pointer;\n}\n\n.profil-9K4HQ:hover,\n.open-class-piIJQ {\n  box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.55);\n}\n";
 styleInject(css_248z$7);
 
 var ProfileImg = function ProfileImg(_ref) {
@@ -2178,7 +2198,7 @@ var WelcomeText = function WelcomeText(_ref) {
 var wrapper$3 = "wrapper-Nnx1C";
 var textClass = "text-class-ODGFT";
 var name = "name-5pMK6";
-var css_248z$5 = ".wrapper-Nnx1C {\n  display: flex;\n  flex-direction: column;\n  padding: 8px 16px;\n  border-left: #f2f2f2 solid 1px;\n  width: 220px;\n  box-sizing: border-box;\n  cursor: pointer;\n  justify-content: center;\n  height: calc(100% - 16px);\n}\n.diva-component-DIVA_BACKOFFICE_NEW #diva-header.darkmode .wrapper-Nnx1C, .diva-component-DIVA_DATA_ENGINE #diva-header.darkmode .wrapper-Nnx1C {\n  border-left: black solid 1px;\n}\n\n.text-class-ODGFT,\n.name-5pMK6 {\n  text-overflow: ellipsis;\n  overflow: hidden;\n  white-space: nowrap;\n  transition:\n    color 0.3s ease,\n    border 0.3s ease;\n  letter-spacing: 1px;\n}\n.text-class-ODGFT {\n  font-size: 14px;\n}\n\n.name-5pMK6 {\n  font-size: 13px;\n}\n\n.wrapper-Nnx1C:hover .text-class-ODGFT,\n.wrapper-Nnx1C:hover .name-5pMK6 {\n  color: var(--diva-theme-palette-primary-main);\n}\n";
+var css_248z$5 = ".wrapper-Nnx1C {\n  display: flex;\n  flex-direction: column;\n  padding: 8px 16px;\n  border-left: #f2f2f2 solid 1px;\n  width: 220px;\n  box-sizing: border-box;\n  cursor: pointer;\n  justify-content: center;\n  height: calc(100% - 16px);\n}\n.diva-component-DIVA_BACKOFFICE_NEW #diva-header.darkmode .wrapper-Nnx1C, .diva-component-DIVA_PRODUCT_ONBOARDING #diva-header.darkmode .wrapper-Nnx1C, .diva-component-DIVA_DATA_ENGINE #diva-header.darkmode .wrapper-Nnx1C {\n  border-left: black solid 1px;\n}\n\n.text-class-ODGFT,\n.name-5pMK6 {\n  text-overflow: ellipsis;\n  overflow: hidden;\n  white-space: nowrap;\n  transition:\n    color 0.3s ease,\n    border 0.3s ease;\n  letter-spacing: 1px;\n}\n.text-class-ODGFT {\n  font-size: 14px;\n}\n\n.name-5pMK6 {\n  font-size: 13px;\n}\n\n.wrapper-Nnx1C:hover .text-class-ODGFT,\n.wrapper-Nnx1C:hover .name-5pMK6 {\n  color: var(--diva-theme-palette-primary-main);\n}\n";
 styleInject(css_248z$5);
 
 var OrganizationName = function OrganizationName(_ref) {

package/build/types/navigator/src/Profil/Logout/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../src/Profil/Logout/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAK1B,KAAK,KAAK,GAAG;IACX,OAAO,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;CAClC,CAAC;AAEF,QAAA,MAAM,MAAM,gBAAiB,KAAK,sBAqCjC,CAAC;AAEF,eAAe,MAAM,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../src/Profil/Logout/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAsC,MAAM,OAAO,CAAC;AAU3D,KAAK,KAAK,GAAG;IACX,OAAO,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;CAClC,CAAC;AAEF,QAAA,MAAM,MAAM,gBAAiB,KAAK,sBA+CjC,CAAC;AAEF,eAAe,MAAM,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@crystaldesign/diva-navigator",
-  "version": "26.13.0-beta.2",
+  "version": "26.13.0-beta.20",
   "description": "Application shell: header, footer, mobile navigation and organisation selector.",
   "license": "MIT",
   "devDependencies": {
@@ -11,8 +11,8 @@
     "react-dom": "18.3.1"
   },
   "dependencies": {
-    "@crystaldesign/content-item": "26.13.0-beta.2",
-    "@crystaldesign/organization-selection": "26.13.0-beta.2",
+    "@crystaldesign/content-item": "26.13.0-beta.20",
+    "@crystaldesign/organization-selection": "26.13.0-beta.20",
     "classnames": "^2.5.1",
     "fuse.js": "^7.0.0",
     "html5-qrcode": "^2.3.8",
@@ -28,5 +28,5 @@
   },
   "module": "build/esm/index.js",
   "types": "./build/types/navigator/src/index.d.ts",
-  "gitHead": "80503e32af3f8fc88ae4f632f1153cc6d0abec08"
+  "gitHead": "c2ccbc73d9da6d31fffaa527bfc490f3d2d57d01"
 }