@cccsaurora/howler-ui 2.13.0-dev.132 → 2.13.0-dev.137

package/components/elements/hit/related/PivotLink.js

@@ -1,5 +1,4 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { Icon } from '@iconify/react/dist/iconify.js';
 import { Skeleton } from '@mui/material';
 import Handlebars from 'handlebars';
 import { isEmpty } from 'lodash-es';
@@ -32,7 +31,7 @@ const PivotLink = ({ pivot, hit, compact = false }) => {
         return Handlebars.compile(pivot.value)(templateObject);
     }, [flatHit, pivot]);
     if (href) {
-        return (_jsx(RelatedLink, { title: pivot.label[i18n.language], href: href, compact: compact, children: _jsx(Icon, { fontSize: "1.5rem", icon: pivot.icon }) }));
+        return _jsx(RelatedLink, { title: pivot.label[i18n.language], href: href, compact: compact, icon: pivot.icon });
     }
     try {
         const pluginPivot = pluginStore.executeFunction(`pivot.${pivot.format}`, { pivot, hit, compact });

package/components/elements/hit/related/RelatedIcon.d.ts

@@ -0,0 +1,8 @@
+import { type FC } from 'react';
+declare const RelatedIcon: FC<{
+    icon?: string;
+    title?: string;
+    href?: string;
+    compact?: boolean;
+}>;
+export default RelatedIcon;

package/components/elements/hit/related/RelatedIcon.js

@@ -0,0 +1,32 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Icon, iconExists } from '@iconify/react/dist/iconify.js';
+import Avatar from '@mui/material/Avatar';
+import { useAppTheme } from '@cccsaurora/howler-ui/commons/components/app/hooks';
+import { ApiConfigContext } from '@cccsaurora/howler-ui/components/app/providers/ApiConfigProvider';
+import { useContext } from 'react';
+const RelatedIcon = ({ icon, title, href, compact = false }) => {
+    const { config } = useContext(ApiConfigContext);
+    const { isDark } = useAppTheme();
+    if (!icon) {
+        return null;
+    }
+    if (iconExists(icon)) {
+        return _jsx(Icon, { fontSize: "1.5rem", icon: icon });
+    }
+    const app = config.configuration.ui.apps.find(a => a.name.toLowerCase() === icon?.toLowerCase());
+    if (app) {
+        // use the image link for the configured related application instead
+        icon = app[`img_${isDark ? 'd' : 'l'}`];
+    }
+    return (_jsx(Avatar, { variant: "rounded", alt: title ?? href, src: icon, sx: [
+            theme => ({
+                width: theme.spacing(compact ? 4 : 6),
+                height: theme.spacing(compact ? 4 : 6),
+                '& img': {
+                    objectFit: 'contain'
+                }
+            }),
+            !icon && { backgroundColor: 'transparent' }
+        ], children: icon }));
+};
+export default RelatedIcon;

package/components/elements/hit/related/RelatedLink.js

@@ -1,22 +1,10 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Avatar, Stack, Typography } from '@mui/material';
-import { useAppTheme } from '@cccsaurora/howler-ui/commons/components/app/hooks';
-import { ApiConfigContext } from '@cccsaurora/howler-ui/components/app/providers/ApiConfigProvider';
+import { Stack, Typography } from '@mui/material';
 import HowlerCard from '@cccsaurora/howler-ui/components/elements/display/HowlerCard';
-import React, { useContext, useMemo } from 'react';
+import React, {} from 'react';
 import { Link } from 'react-router-dom';
+import RelatedIcon from './RelatedIcon';
 const RelatedLink = ({ icon, title, href, compact = false, children }) => {
-    const { config } = useContext(ApiConfigContext);
-    const { isDark } = useAppTheme();
-    const _icon = useMemo(() => {
-        if (icon) {
-            const app = config.configuration.ui.apps.find(a => a.name.toLowerCase() === icon?.toLowerCase());
-            if (app) {
-                return app[`img_${isDark ? 'd' : 'l'}`];
-            }
-        }
-        return icon;
-    }, [config.configuration.ui.apps, icon, isDark]);
     return (_jsx(HowlerCard, { variant: compact ? 'outlined' : 'elevation', onClick: () => window.open(href), sx: [
             theme => ({
                 cursor: 'pointer',
@@ -29,15 +17,6 @@ const RelatedLink = ({ icon, title, href, compact = false, children }) => {
                 '& a': { textDecoration: 'none', color: 'text.primary' }
             }),
             !compact && { border: 'thin solid', borderColor: 'transparent' }
-        ], children: _jsxs(Stack, { direction: "row", p: compact ? 0.5 : 1, spacing: 1, alignItems: "center", children: [children || (_jsx(Avatar, { variant: "rounded", alt: title ?? href, src: _icon, sx: [
-                        theme => ({
-                            width: theme.spacing(compact ? 4 : 6),
-                            height: theme.spacing(compact ? 4 : 6),
-                            '& img': {
-                                objectFit: 'contain'
-                            }
-                        }),
-                        !_icon && { backgroundColor: 'transparent' }
-                    ], children: _icon })), _jsx(Typography, { component: Link, to: href, onClick: e => e.stopPropagation(), children: title ?? href })] }) }, href));
+        ], children: _jsxs(Stack, { direction: "row", p: compact ? 0.5 : 1, spacing: 1, alignItems: "center", children: [children || _jsx(RelatedIcon, { icon: icon, title: title, href: href, compact: compact }), _jsx(Typography, { component: Link, to: href, onClick: e => e.stopPropagation(), children: title ?? href })] }) }, href));
 };
 export default RelatedLink;

package/components/routes/advanced/QueryEditor.js

@@ -26,18 +26,6 @@ const QueryEditor = ({ query, setQuery, onMount, language = 'lucene', fontSize =
         _monaco.languages.register({ id: 'lucene' });
         _monaco.languages.register({ id: 'eql' });
     }, []);
-    useEffect(() => {
-        const handleKeyPress = event => {
-            if (setFzfSearch && event.ctrlKey && event.key == 'r') {
-                event.preventDefault();
-                setFzfSearch(!fzfSearch);
-            }
-        };
-        window.addEventListener('keydown', handleKeyPress);
-        return () => {
-            window.removeEventListener('keydown', handleKeyPress);
-        };
-    }, [fzfSearch, setFzfSearch]);
     useEffect(() => {
         if (!monaco) {
             return;
@@ -90,6 +78,13 @@ const QueryEditor = ({ query, setQuery, onMount, language = 'lucene', fontSize =
         fontSize,
         ...editorOptions
     }), [setQuery, fontSize, editorOptions]);
-    return (_jsx(Box, { sx: { flex: 1 }, children: _jsx(ThemedEditor, { height: height, width: width, theme: theme.palette.mode === 'light' ? 'howler' : 'howler-dark', value: query, onChange: value => setQuery(value), beforeMount: beforeEditorMount, onMount: onMount, options: options }) }));
+    const handleKeyPress = useCallback((event) => {
+        if (setFzfSearch && event.ctrlKey && event.key == 'r') {
+            event.preventDefault();
+            event.stopPropagation();
+            setFzfSearch(!fzfSearch);
+        }
+    }, [fzfSearch, setFzfSearch]);
+    return (_jsx(Box, { sx: { flex: 1 }, onKeyDownCapture: handleKeyPress, children: _jsx(ThemedEditor, { height: height, width: width, theme: theme.palette.mode === 'light' ? 'howler' : 'howler-dark', value: query, onChange: value => setQuery(value), beforeMount: beforeEditorMount, onMount: onMount, options: options }) }));
 };
 export default memo(QueryEditor);

package/package.json

@@ -96,7 +96,7 @@
     "internal-slot": "1.0.7"
   },
   "type": "module",
-  "version": "2.13.0-dev.132",
+  "version": "2.13.0-dev.137",
   "exports": {
     "./i18n": "./i18n.js",
     "./index.css": "./index.css",