tycho-components 0.38.3 → 0.38.4

package/dist/common/AppKeyboard/AppKeyboard.js

@@ -2,8 +2,8 @@ import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-run
 import { useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { IconButton, } from 'tycho-storybook';
-import VirtualKeyboard from '../../shell/VirtualKeyboard';
 import { useCorpusUtils } from '../../configs/useCorpusUtils';
+import VirtualKeyboard from '../../shell/VirtualKeyboard';
 export default function AppKeyboard({ mode, buttonMode = 'filled', size = 'medium', iconSize, tooltipPlacement, title, keyboardLayout, }) {
     const { t } = useTranslation('header');
     const { getCorpus } = useCorpusUtils();

package/dist/features/Comments/HeaderNotifications/HeaderNotifications.js

@@ -38,7 +38,7 @@ export default function HeaderNotifications({ uid, mode, mobile }) {
     }, [uid, tab]);
     if (!visible)
         return null;
-    return (_jsxs("div", { className: "ds-dropdown-container notifications-container", children: [_jsx(IconButton, { name: "notifications_active", className: comments && comments.length > 0 ? 'shake' : '', size: "medium", onClick: () => setOpen(!open), mode: mobile ? 'outlined' : 'filled' }), open && (_jsx("div", { className: "ds-dropdown-list", children: _jsxs("div", { className: "notifications-panel", children: [_jsxs("div", { className: "header", children: [_jsx("span", { children: t('notification.title') }), _jsx(IconButton, { name: "close", size: "small", mode: "ghost", onClick: () => setOpen(false) })] }), _jsxs("div", { className: "tabs", children: [_jsxs("button", { className: tab === 'unread' ? 'active-tab' : '', onClick: () => setTab('unread'), children: [t('notification.unread'), " (", comments?.length || 0, ")"] }), _jsx("button", { className: tab === 'read' ? 'active-tab' : '', onClick: () => setTab('read'), children: t('notification.all') })] }), _jsxs("div", { className: "content", children: [notifications &&
+    return (_jsxs("div", { className: "ds-dropdown-container notifications-container", children: [_jsx(IconButton, { name: "notifications_active", className: comments && comments.length > 0 ? 'shake' : '', size: "large", onClick: () => setOpen(!open), mode: mobile ? 'outlined' : 'filled' }), open && (_jsx("div", { className: "ds-dropdown-list", children: _jsxs("div", { className: "notifications-panel", children: [_jsxs("div", { className: "header", children: [_jsx("span", { children: t('notification.title') }), _jsx(IconButton, { name: "close", size: "small", mode: "ghost", onClick: () => setOpen(false) })] }), _jsxs("div", { className: "tabs", children: [_jsxs("button", { className: tab === 'unread' ? 'active-tab' : '', onClick: () => setTab('unread'), children: [t('notification.unread'), " (", comments?.length || 0, ")"] }), _jsx("button", { className: tab === 'read' ? 'active-tab' : '', onClick: () => setTab('read'), children: t('notification.all') })] }), _jsxs("div", { className: "content", children: [notifications &&
                                     notifications.map((not, idx) => (_jsxs("div", { className: "item", onClick: () => handleOpen(not), children: [_jsx(Avatar, { src: not.picture, size: "small" }), _jsxs("div", { className: "message", children: [_jsx("span", { className: "text", children: _jsx(Trans, { t: t, i18nKey: "notification.text", values: {
                                                                 user: not.name,
                                                             } }) }), _jsx("span", { className: "date", children: DateUtils.formatDateTime(not.edited ? not.edited : not.date, 'MM/dd/yyyy - HH:mm') })] })] }, idx.valueOf()))), notifications && notifications.length === 0 && (_jsx("div", { className: "empty-notifications", children: t('notification.empty') }))] })] }) }))] }));

package/dist/shell/Header/HeaderUser/HeaderUser.js

@@ -1,8 +1,9 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useState } from 'react';
+import { useEffect, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Avatar, Button, Icon } from 'tycho-storybook';
 import { useLoggedUtils } from '../../../configs/useLoggedUtils';
+import UsabilityUtils from '../../../functions/UsabilityUtils';
 import LanguageSelector from '../../LanguageSelector';
 import './style.scss';
 import HelpModal from '../HelpButton/HelpModal';
@@ -11,6 +12,11 @@ export default function HeaderUser({ navigateLogout, navigateNotLogged, helpActi
     const { isLogged, getLogged } = useLoggedUtils();
     const [open, setOpen] = useState(false);
     const [openHelp, setOpenHelp] = useState(false);
+    useEffect(() => {
+        if (!open)
+            return;
+        return UsabilityUtils.attachCloseToEscape(() => setOpen(false));
+    }, [open]);
     const handleProfile = () => {
         setOpen(false);
         window.open(import.meta.env.VITE_APP_RESERVED_URL, '_blank');

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "tycho-components",
   "private": false,
-  "version": "0.38.3",
+  "version": "0.38.4",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
   "exports": {