tycho-components 0.14.1 → 0.14.3

package/dist/AppModal/AppModal.d.ts

@@ -20,6 +20,7 @@ type Props = {
     };
     alternativeOptions?: React.ReactNode;
     hideBackdrop?: boolean;
+    disableBackdropClose?: boolean;
 };
-export default function AppModal({ children, title, subtitle, className, close, confirm, disableConfirm, hideFooter, disableClose, disableCancel, confirmLabel, closeLabel, cancel, onEntered, alternativeButton, hideBackdrop, alternativeOptions, }: Props): import("react/jsx-runtime").JSX.Element;
+export default function AppModal({ children, title, subtitle, className, close, confirm, disableConfirm, hideFooter, disableClose, disableCancel, confirmLabel, closeLabel, cancel, onEntered, alternativeButton, hideBackdrop, alternativeOptions, disableBackdropClose, }: Props): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/AppModal/AppModal.js

@@ -5,24 +5,8 @@ import { useTranslation } from "react-i18next";
 import { Button, Icon } from "tycho-storybook";
 import "./style.scss";
 import { useEffect } from "react";
-const stopEventPropagation = (event) => {
-    const e = event;
-    e.preventDefault?.();
-    e.stopPropagation?.();
-    e.stopImmediatePropagation?.();
-};
-const attachCloseToEscape = (handleClose) => {
-    const closeOnEscape = (e) => {
-        if (e.key === "Escape" || e.code === "Escape") {
-            stopEventPropagation(e);
-            handleClose();
-        }
-    };
-    // Capture phase makes this resilient if inner components stopPropagation() on Escape.
-    window.addEventListener("keydown", closeOnEscape, { capture: true });
-    return () => window.removeEventListener("keydown", closeOnEscape, { capture: true });
-};
-export default function AppModal({ children, title, subtitle, className, close, confirm, disableConfirm, hideFooter, disableClose, disableCancel, confirmLabel, closeLabel, cancel, onEntered, alternativeButton, hideBackdrop, alternativeOptions, }) {
+import { attachCloseToEscape, stopEventPropagation } from "./AppModalUtils";
+export default function AppModal({ children, title, subtitle, className, close, confirm, disableConfirm, hideFooter, disableClose, disableCancel, confirmLabel, closeLabel, cancel, onEntered, alternativeButton, hideBackdrop, alternativeOptions, disableBackdropClose, }) {
     const { t } = useTranslation("common");
     const getClassNames = cx("modal-container", className);
     useEffect(() => {
@@ -30,8 +14,10 @@ export default function AppModal({ children, title, subtitle, className, close,
             return;
         return attachCloseToEscape(close);
     }, [close, disableClose]);
-    return (_jsx(Modal, { open: true, disableEnforceFocus: true, disableAutoFocus: true, disableRestoreFocus: true, hideBackdrop: hideBackdrop, disableEscapeKeyDown: !!disableClose, onClose: (event) => {
+    return (_jsx(Modal, { open: true, disableEnforceFocus: true, disableAutoFocus: true, disableRestoreFocus: true, hideBackdrop: hideBackdrop, disableEscapeKeyDown: !!disableClose, onClose: (event, reason) => {
             stopEventPropagation(event);
+            if (disableBackdropClose && reason === "backdropClick")
+                return;
             if (!disableClose)
                 close();
         }, children: _jsx(Fade, { in: true, onEntered: () => onEntered && onEntered(), children: _jsxs(Box, { className: getClassNames, sx: style, children: [_jsxs("div", { className: "header", children: [_jsxs("div", { className: "titles", children: [_jsx("span", { className: "title", children: title }), subtitle && _jsx("span", { className: "subtitle", children: subtitle })] }), !disableClose && (_jsx(Icon, { name: "close", onClick: (e) => {

package/dist/AppModal/AppModalConfirm.d.ts

@@ -6,6 +6,7 @@ type Props = {
     onConfirm: () => void;
     closeLabel?: string;
     confirmLabel?: string;
+    disableClose?: boolean;
 };
-export default function AppModalConfirm({ title, subtitle, onClose, onConfirm, closeLabel, confirmLabel, }: Props): import("react/jsx-runtime").JSX.Element;
+export default function AppModalConfirm({ title, subtitle, onClose, onConfirm, closeLabel, confirmLabel, disableClose, }: Props): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/AppModal/AppModalConfirm.js

@@ -1,11 +1,25 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Box, Modal } from '@mui/material';
+import { useEffect } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Button, Icon } from 'tycho-storybook';
 import './style.scss';
-export default function AppModalConfirm({ title, subtitle, onClose, onConfirm, closeLabel, confirmLabel, }) {
+import { attachCloseToEscape, stopEventPropagation } from './AppModalUtils';
+export default function AppModalConfirm({ title, subtitle, onClose, onConfirm, closeLabel, confirmLabel, disableClose, }) {
     const { t } = useTranslation('common');
-    return (_jsx(Modal, { open: true, children: _jsxs(Box, { className: "modal-container modal-confirm", sx: style, children: [_jsxs("div", { className: "body", children: [_jsx(Icon, { name: "warning", size: "large", filled: true }), _jsxs("div", { className: "texts", children: [_jsx("span", { className: "title", children: title }), _jsx("span", { className: "subtitle", children: subtitle })] })] }), _jsxs("div", { className: "footer", children: [_jsx(Button, { onClick: onClose, text: closeLabel || t('button.cancel'), mode: "tonal" }), _jsx(Button, { onClick: onConfirm, text: confirmLabel || t('button.confirm') })] })] }) }));
+    useEffect(() => {
+        if (disableClose)
+            return;
+        return attachCloseToEscape(onClose);
+    }, [onClose, disableClose]);
+    return (_jsx(Modal, { open: true, disableEscapeKeyDown: !!disableClose, onClose: (event) => {
+            stopEventPropagation(event);
+            if (!disableClose)
+                onClose();
+        }, children: _jsxs(Box, { className: "modal-container modal-confirm", sx: style, children: [_jsxs("div", { className: "body", children: [_jsx(Icon, { name: "warning", size: "large", filled: true }), _jsxs("div", { className: "texts", children: [_jsx("span", { className: "title", children: title }), _jsx("span", { className: "subtitle", children: subtitle })] })] }), _jsxs("div", { className: "footer", children: [_jsx(Button, { onClick: (e) => {
+                                stopEventPropagation(e);
+                                onClose();
+                            }, text: closeLabel || t('button.cancel'), mode: "tonal" }), _jsx(Button, { onClick: onConfirm, text: confirmLabel || t('button.confirm') })] })] }) }));
 }
 const style = {
     position: 'absolute',

package/dist/AppModal/AppModalRemove.d.ts

@@ -4,8 +4,9 @@ type Props = {
     subtitle: string;
     onClose: () => void;
     onConfirm: () => void;
+    disableClose?: boolean;
 };
-export default function AppModalRemove({ title, subtitle, onClose, onConfirm, }: Props): import("react/jsx-runtime").JSX.Element;
+export default function AppModalRemove({ title, subtitle, onClose, onConfirm, disableClose, }: Props): import("react/jsx-runtime").JSX.Element;
 export declare const modalRemoveStyle: {
     position: string;
     top: string;

package/dist/AppModal/AppModalRemove.js

@@ -1,11 +1,25 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Box, Modal } from '@mui/material';
+import { useEffect } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Button, Icon } from 'tycho-storybook';
 import './style.scss';
-export default function AppModalRemove({ title, subtitle, onClose, onConfirm, }) {
+import { attachCloseToEscape, stopEventPropagation } from './AppModalUtils';
+export default function AppModalRemove({ title, subtitle, onClose, onConfirm, disableClose, }) {
     const { t } = useTranslation('common');
-    return (_jsx(Modal, { open: true, children: _jsxs(Box, { className: "modal-container modal-remove", sx: modalRemoveStyle, children: [_jsxs("div", { className: "body", children: [_jsx(Icon, { name: "warning", size: "large", filled: true }), _jsxs("div", { className: "texts", children: [_jsx("span", { className: "title", children: title }), _jsx("span", { className: "subtitle", children: subtitle })] })] }), _jsxs("div", { className: "footer", children: [_jsx(Button, { onClick: onClose, text: t('button.cancel'), mode: "tonal" }), _jsx(Button, { onClick: onConfirm, text: t('button.confirm') })] })] }) }));
+    useEffect(() => {
+        if (disableClose)
+            return;
+        return attachCloseToEscape(onClose);
+    }, [onClose, disableClose]);
+    return (_jsx(Modal, { open: true, disableEscapeKeyDown: !!disableClose, onClose: (event) => {
+            stopEventPropagation(event);
+            if (!disableClose)
+                onClose();
+        }, children: _jsxs(Box, { className: "modal-container modal-remove", sx: modalRemoveStyle, children: [_jsxs("div", { className: "body", children: [_jsx(Icon, { name: "warning", size: "large", filled: true }), _jsxs("div", { className: "texts", children: [_jsx("span", { className: "title", children: title }), _jsx("span", { className: "subtitle", children: subtitle })] })] }), _jsxs("div", { className: "footer", children: [_jsx(Button, { onClick: (e) => {
+                                stopEventPropagation(e);
+                                onClose();
+                            }, text: t('button.cancel'), mode: "tonal" }), _jsx(Button, { onClick: onConfirm, text: t('button.confirm') })] })] }) }));
 }
 export const modalRemoveStyle = {
     position: 'absolute',

package/dist/AppModal/AppModalUtils.d.ts

@@ -0,0 +1,2 @@
+export declare const stopEventPropagation: (event: unknown) => void;
+export declare const attachCloseToEscape: (handleClose: () => void) => () => void;

package/dist/AppModal/AppModalUtils.js

@@ -0,0 +1,17 @@
+export const stopEventPropagation = (event) => {
+    const e = event;
+    e.preventDefault?.();
+    e.stopPropagation?.();
+    e.stopImmediatePropagation?.();
+};
+export const attachCloseToEscape = (handleClose) => {
+    const closeOnEscape = (e) => {
+        if (e.key === "Escape" || e.code === "Escape") {
+            stopEventPropagation(e);
+            handleClose();
+        }
+    };
+    // Capture phase makes this resilient if inner components stopPropagation() on Escape.
+    window.addEventListener("keydown", closeOnEscape, { capture: true });
+    return () => window.removeEventListener("keydown", closeOnEscape, { capture: true });
+};

package/dist/Comments/Comments.js

@@ -1,11 +1,10 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Drawer } from '@mui/material';
-import { useContext, useEffect, useMemo, useState } from 'react';
+import { useEffect, useMemo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Button, IconButton } from 'tycho-storybook';
 import AppLoading from '../AppLoading';
 import AppPlaceholder from '../AppPlaceholder';
-import CommonContext from '../configs/CommonContext';
 import SecurityUtils from '../functions/SecurityUtils';
 import UsabilityUtils from '../functions/UsabilityUtils';
 import CommentAdd from './CommentAdd';
@@ -14,7 +13,6 @@ import './style.scss';
 import CommentService from './types/CommentService';
 export default function Comments({ uid, keywords, references, mode, onClose, onChange, }) {
     const { t } = useTranslation('comments');
-    const { state } = useContext(CommonContext);
     const [openAddComment, setOpenAddComment] = useState(false);
     const [comment, setComment] = useState();
     const [comments, setComments] = useState();

package/dist/index.d.ts

@@ -37,6 +37,7 @@ export { default as Unauthorized } from './Base/Unauthorized';
 export { default as CommentComponent } from './Comments';
 export { default as HeaderNotifications } from './Comments/HeaderNotifications';
 export type { Comment } from './Comments/types/Comment';
+export { default as CommentService } from './Comments/types/CommentService';
 export { CommonProvider } from './configs/CommonContext';
 export { default as CookieStorage } from './configs/CookieStorage';
 export { commonResources } from './configs/Localization';

package/dist/index.js

@@ -29,6 +29,7 @@ export { default as NotFound } from './Base/NotFound';
 export { default as Unauthorized } from './Base/Unauthorized';
 export { default as CommentComponent } from './Comments';
 export { default as HeaderNotifications } from './Comments/HeaderNotifications';
+export { default as CommentService } from './Comments/types/CommentService';
 export { CommonProvider } from './configs/CommonContext';
 export { default as CookieStorage } from './configs/CookieStorage';
 export { commonResources } from './configs/Localization';

package/package.json

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