tycho-components 0.14.2 → 0.14.4

package/dist/AppModal/AppModal.d.ts

@@ -1,4 +1,4 @@
-import "./style.scss";
+import './style.scss';
 type Props = {
     children: React.ReactNode;
     title: string;
@@ -11,6 +11,7 @@ type Props = {
     hideFooter?: boolean;
     disableCancel?: boolean;
     disableClose?: boolean;
+    disableEscapeClose?: boolean;
     confirmLabel?: string;
     closeLabel?: string;
     onEntered?: () => void;
@@ -20,6 +21,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, disableEscapeClose, disableCancel, confirmLabel, closeLabel, cancel, onEntered, alternativeButton, hideBackdrop, alternativeOptions, disableBackdropClose, }: Props): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/AppModal/AppModal.js

@@ -1,55 +1,42 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Box, Fade, Modal } from "@mui/material";
-import cx from "classnames";
-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, }) {
-    const { t } = useTranslation("common");
-    const getClassNames = cx("modal-container", className);
+import { Box, Fade, Modal } from '@mui/material';
+import cx from 'classnames';
+import { useTranslation } from 'react-i18next';
+import { Button, Icon } from 'tycho-storybook';
+import './style.scss';
+import { useEffect } from 'react';
+import { attachCloseToEscape, stopEventPropagation } from './AppModalUtils';
+export default function AppModal({ children, title, subtitle, className, close, confirm, disableConfirm, hideFooter, disableClose, disableEscapeClose, disableCancel, confirmLabel, closeLabel, cancel, onEntered, alternativeButton, hideBackdrop, alternativeOptions, disableBackdropClose, }) {
+    const { t } = useTranslation('common');
+    const getClassNames = cx('modal-container', className);
     useEffect(() => {
-        if (disableClose)
+        if (disableEscapeClose)
             return;
         return attachCloseToEscape(close);
-    }, [close, disableClose]);
-    return (_jsx(Modal, { open: true, disableEnforceFocus: true, disableAutoFocus: true, disableRestoreFocus: true, hideBackdrop: hideBackdrop, disableEscapeKeyDown: !!disableClose, onClose: (event) => {
+    }, [close, disableEscapeClose]);
+    return (_jsx(Modal, { open: true, disableEnforceFocus: true, disableAutoFocus: true, disableRestoreFocus: true, hideBackdrop: hideBackdrop, disableEscapeKeyDown: !!disableEscapeClose, onClose: (event, reason) => {
             stopEventPropagation(event);
-            if (!disableClose)
-                close();
+            if (disableBackdropClose && reason === 'backdropClick')
+                return;
+            if (disableClose)
+                return;
+            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) => {
                                     stopEventPropagation(e);
                                     close();
                                 }, className: "pointer" }))] }), _jsx("div", { className: "body", children: children }), !hideFooter ? (_jsxs("div", { className: "footer", children: [alternativeOptions && alternativeOptions, alternativeButton && (_jsx(Button, { className: "alternative", color: "white", onClick: alternativeButton.action, text: alternativeButton.title })), !disableCancel && (_jsx(Button, { onClick: (e) => {
                                     stopEventPropagation(e);
                                     (cancel || close)();
-                                }, text: closeLabel || t("button.cancel"), color: "danger" })), confirm && (_jsx(Button, { onClick: confirm, disabled: disableConfirm, text: confirmLabel || t("button.confirm") }))] })) : null] }) }) }));
+                                }, text: closeLabel || t('button.cancel'), color: "danger" })), confirm && (_jsx(Button, { onClick: confirm, disabled: disableConfirm, text: confirmLabel || t('button.confirm') }))] })) : null] }) }) }));
 }
 const style = {
-    position: "absolute",
-    top: "40%",
-    left: "50%",
-    transform: "translate(-50%, -50%)",
-    width: "50%",
-    maxWidth: "1080px",
-    borderRadius: "var(--radius-200)",
+    position: 'absolute',
+    top: '40%',
+    left: '50%',
+    transform: 'translate(-50%, -50%)',
+    width: '50%',
+    maxWidth: '1080px',
+    borderRadius: 'var(--radius-200)',
     boxShadow: 24,
-    bgcolor: "var(--background-default)",
+    bgcolor: 'var(--background-default)',
 };

package/dist/AppModal/AppModalConfirm.d.ts

@@ -6,6 +6,8 @@ type Props = {
     onConfirm: () => void;
     closeLabel?: string;
     confirmLabel?: string;
+    disableClose?: boolean;
+    disableEscapeClose?: 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, disableEscapeClose, }: Props): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/AppModal/AppModalConfirm.js

@@ -1,11 +1,26 @@
 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, disableEscapeClose, }) {
     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 (disableEscapeClose)
+            return;
+        return attachCloseToEscape(onClose);
+    }, [onClose, disableEscapeClose]);
+    return (_jsx(Modal, { open: true, disableEscapeKeyDown: !!disableEscapeClose, onClose: (event) => {
+            stopEventPropagation(event);
+            if (disableClose)
+                return;
+            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,10 @@ type Props = {
     subtitle: string;
     onClose: () => void;
     onConfirm: () => void;
+    disableClose?: boolean;
+    disableEscapeClose?: 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, disableEscapeClose, }: Props): import("react/jsx-runtime").JSX.Element;
 export declare const modalRemoveStyle: {
     position: string;
     top: string;

package/dist/AppModal/AppModalRemove.js

@@ -1,11 +1,26 @@
 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, disableEscapeClose, }) {
     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 (disableEscapeClose)
+            return;
+        return attachCloseToEscape(onClose);
+    }, [onClose, disableEscapeClose]);
+    return (_jsx(Modal, { open: true, disableEscapeKeyDown: !!disableEscapeClose, onClose: (event) => {
+            stopEventPropagation(event);
+            if (disableClose)
+                return;
+            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/package.json

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