tycho-components 0.30.5 → 0.30.7

package/dist/common/AppModal/AppModalConfirm.d.ts

@@ -1,8 +1,8 @@
-import "./style.scss";
+import './style.scss';
 type Props = {
     title: string;
     subtitle: string | React.ReactNode;
-    onClose: () => void;
+    onClose?: () => void;
     onConfirm: () => void;
     closeLabel?: string;
     confirmLabel?: string;

package/dist/common/AppModal/AppModalConfirm.js

@@ -1,37 +1,37 @@
 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";
-import { attachCloseToEscape, stopEventPropagation } from "./AppModalUtils";
+import { Box, Modal } from '@mui/material';
+import { useEffect } from 'react';
+import { useTranslation } from 'react-i18next';
+import { Button, Icon } from 'tycho-storybook';
+import './style.scss';
+import { attachCloseToEscape, stopEventPropagation } from './AppModalUtils';
 export default function AppModalConfirm({ title, subtitle, onClose, onConfirm, closeLabel, confirmLabel, confirmDisabled, disableClose, disableEscapeClose, disableBackdropClose, }) {
-    const { t } = useTranslation("common");
+    const { t } = useTranslation('common');
     useEffect(() => {
-        if (disableEscapeClose)
+        if (!onClose || disableEscapeClose)
             return;
         return attachCloseToEscape(onClose);
     }, [onClose, disableEscapeClose]);
-    return (_jsx(Modal, { open: true, disableEscapeKeyDown: !!disableEscapeClose, onClose: (event, reason) => {
+    return (_jsx(Modal, { open: true, disableEscapeKeyDown: !onClose || !!disableEscapeClose, onClose: (event, reason) => {
             stopEventPropagation(event);
-            if (disableBackdropClose && reason === "backdropClick")
+            if (!onClose || disableClose)
                 return;
-            if (disableClose)
+            if (disableBackdropClose && reason === 'backdropClick')
                 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) => {
+        }, 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: [onClose && (_jsx(Button, { onClick: (e) => {
                                 stopEventPropagation(e);
                                 onClose();
-                            }, text: closeLabel || t("button.cancel"), mode: "tonal" }), _jsx(Button, { onClick: onConfirm, text: confirmLabel || t("button.confirm"), disabled: confirmDisabled })] })] }) }));
+                            }, text: closeLabel || t('button.cancel'), mode: "tonal" })), _jsx(Button, { onClick: onConfirm, text: confirmLabel || t('button.confirm'), disabled: confirmDisabled })] })] }) }));
 }
 const style = {
-    position: "absolute",
-    top: "40%",
-    left: "50%",
-    transform: "translate(-50%, -50%)",
-    width: "30%",
-    maxWidth: "580px",
-    borderRadius: "var(--radius-200)",
+    position: 'absolute',
+    top: '40%',
+    left: '50%',
+    transform: 'translate(-50%, -50%)',
+    width: '30%',
+    maxWidth: '580px',
+    borderRadius: 'var(--radius-200)',
     boxShadow: 24,
-    bgcolor: "var(--background-default)",
+    bgcolor: 'var(--background-default)',
 };

package/dist/features/Comments/Comments.js

@@ -9,8 +9,8 @@ import SecurityUtils from '../../functions/SecurityUtils';
 import UsabilityUtils from '../../functions/UsabilityUtils';
 import CommentAdd from './CommentAdd';
 import CommentInfo from './CommentInfo';
-import './style.scss';
 import CommentService from './CommentService';
+import './style.scss';
 export default function Comments({ uid, keywords, references, mode, onClose, onChange, }) {
     const { t } = useTranslation('comments');
     const [openAddComment, setOpenAddComment] = useState(false);
@@ -54,7 +54,8 @@ export default function Comments({ uid, keywords, references, mode, onClose, onC
                                     onChange?.(updated);
                                 }
                                 else {
-                                    const updated = comments?.map((c) => (c.id === comment.id ? el : c)) || [];
+                                    const updated = comments?.map((c) => (c.id === comment.id ? el : c)) ||
+                                        [];
                                     setComments(updated);
                                     onChange?.(updated);
                                 }

package/dist/features/Comments/style.scss

@@ -1,7 +1,7 @@
 .comments-container {
   display: flex;
   flex-direction: column;
-  width: 480px;
+  width: 25vw;
 
   > .header {
     display: flex;
@@ -123,3 +123,21 @@
     }
   }
 }
+
+@media (max-width: 1366px) {
+  .comments-container {
+    width: 40vw;
+  }
+}
+
+@media (max-width: 768px) {
+  .comments-container {
+    width: 60vw;
+  }
+}
+
+@media (max-width: 767px) {
+  .comments-container {
+    width: 90vw;
+  }
+}

package/package.json

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