@truedat/core 8.14.4 → 8.14.5

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@truedat/core",
-  "version": "8.14.4",
+  "version": "8.14.5",
   "description": "Truedat Web Core",
   "sideEffects": [
     "**/*.css",
@@ -57,7 +57,7 @@
     "@testing-library/jest-dom": "^6.6.3",
     "@testing-library/react": "^16.3.0",
     "@testing-library/user-event": "^14.6.1",
-    "@truedat/test": "8.14.4",
+    "@truedat/test": "8.14.5",
     "identity-obj-proxy": "^3.0.0",
     "jest": "^29.7.0",
     "redux-saga-test-plan": "^4.0.6"
@@ -99,5 +99,5 @@
     "swr": "^2.3.3",
     "turndown": "^7.2.2"
   },
-  "gitHead": "3f043f28fd445df46a419f7872e23fe73e00e93d"
+  "gitHead": "a792103a77b3b2392be5777a8dc6675ac3882ffd"
 }

package/src/i18n/components/Languages.js

@@ -162,7 +162,7 @@ const Languages = () => {
           className="lang-manager-dropdown"
           placeholder={formatMessage({
             id: "i18n.messages.locale.lang_select",
-            defaultMessage: "Select languaje",
+            defaultMessage: "Select language",
           })}
           name="add-locales"
           multiple={false}

package/src/i18n/components/__tests__/__snapshots__/Messages.spec.js.snap

@@ -87,7 +87,7 @@ exports[`<Messages /> matches the latest snapshot 1`] = `
             class="divider default text"
             role="alert"
           >
-            Select languaje
+            Select language
           </div>
           <i
             aria-hidden="true"

package/src/styles/Modal.less

@@ -1,303 +1,28 @@
+@import "./ModalAppearance.less";
+
 :root {
   --td-danger: #e42135;
 }
 
-.ui.small.modal:not(.user-modal):not(.execution-popup-modal),
-.ui.mini.modal:not(.user-modal):not(.execution-popup-modal) {
-  width: min(560px, calc(100vw - 48px));
-  border-radius: 18px;
-  overflow: visible;
-  box-shadow: 0 24px 70px rgba(15, 23, 42, 0.32);
-}
-
-.ui.small.modal:not(.user-modal):not(.execution-popup-modal) > .close.icon,
-.ui.mini.modal:not(.user-modal):not(.execution-popup-modal) > .close.icon {
-  top: 22px;
-  right: 24px;
-  width: 32px;
-  height: 32px;
-  padding: 8px 0 0 0;
-  border-radius: 8px;
-  color: #8aa0bd;
-  text-shadow: none;
-  opacity: 1;
-  transition:
-    color 0.15s ease,
-    background-color 0.15s ease;
-}
-
-.ui.small.modal:not(.user-modal):not(.execution-popup-modal)
-  > .close.icon:hover,
-.ui.mini.modal:not(.user-modal):not(.execution-popup-modal) > .close.icon:hover,
-.ui.small.modal:not(.user-modal):not(.execution-popup-modal)
-  > .close.icon:focus,
-.ui.mini.modal:not(.user-modal):not(.execution-popup-modal)
-  > .close.icon:focus {
-  background: #f1f5f9;
-  color: #334155;
-}
-
-.ui.small.modal:not(.user-modal):not(.execution-popup-modal) > .header,
-.ui.mini.modal:not(.user-modal):not(.execution-popup-modal) > .header {
-  min-height: 80px;
-  padding: 20px 58px 20px 28px;
-  border-bottom: 1px solid #e8edf5;
-  border-radius: 18px 18px 0 0;
-  background: #ffffff;
-  color: #1e293b;
-  font-size: 22px;
-  font-weight: 900;
-  line-height: 1.15;
-  letter-spacing: 0;
-  text-transform: uppercase;
-}
-
-.ui.small.modal:not(.user-modal):not(.execution-popup-modal)
-  > .header
-  .subheader,
-.ui.mini.modal:not(.user-modal):not(.execution-popup-modal)
-  > .header
-  .subheader {
-  margin-top: 8px;
-  color: #64748b;
-  font-size: 12px;
-  font-weight: 700;
-  line-height: 1.35;
-  text-transform: none;
-}
-
-.ui.small.modal:not(.user-modal):not(.execution-popup-modal) > .content,
-.ui.mini.modal:not(.user-modal):not(.execution-popup-modal) > .content {
-  padding: 30px;
-  background: #ffffff;
-  color: #50627a;
-  font-size: 14px;
-  font-weight: 600;
-  line-height: 1.5;
-  white-space: pre-line;
-}
-
-.ui.small.modal:not(.user-modal):not(.execution-popup-modal) > .content i,
-.ui.mini.modal:not(.user-modal):not(.execution-popup-modal) > .content i {
-  display: inline-flex;
-  align-items: center;
-  max-width: 100%;
-  min-height: 28px;
-  margin: 0 4px;
-  padding: 5px 10px;
-  border: 1px solid #dbe4ef;
-  border-radius: 7px;
-  background: #eef3f8;
-  color: #002057;
-  font-style: normal;
-  font-weight: 900;
-  line-height: 1.2;
-  overflow-wrap: anywhere;
-  vertical-align: middle;
-}
-
-.ui.small.modal:not(.user-modal):not(.execution-popup-modal) > .actions,
-.ui.mini.modal:not(.user-modal):not(.execution-popup-modal) > .actions {
-  min-height: 0;
-  padding: 0;
-  border-top: 1px solid #e8edf5;
-  border-radius: 0 0 18px 18px;
-  background: #ffffff;
-  display: flex;
-  align-items: center;
-  justify-content: flex-end;
-  gap: 8px;
-}
-
-.ui.small.modal:not(.user-modal):not(.execution-popup-modal) > .actions::after,
-.ui.mini.modal:not(.user-modal):not(.execution-popup-modal) > .actions::after {
-  display: none;
-}
-
-.ui.small.modal:not(.user-modal):not(.execution-popup-modal)
-  > .actions
-  .ui.button,
-.ui.mini.modal:not(.user-modal):not(.execution-popup-modal)
-  > .actions
-  .ui.button {
-  min-width: 132px;
-  min-height: 48px;
-  margin: 10px 0 0;
-  border-radius: 4px;
-  box-shadow: none;
-  font-size: 12px;
-  font-weight: 900;
-  letter-spacing: 0.02em;
-  text-transform: uppercase;
-  transition:
-    background-color 0.15s ease,
-    border-color 0.15s ease,
-    color 0.15s ease;
-}
+.ui.small.modal:not(.user-modal):not(.execution-popup-modal):not(.true-modal),
+.ui.mini.modal:not(.user-modal):not(.execution-popup-modal):not(.true-modal) {
+  .modal-appearance();
 
-.ui.small.modal:not(.user-modal):not(.execution-popup-modal)
-  > .actions
-  .ui.secondary.button,
-.ui.mini.modal:not(.user-modal):not(.execution-popup-modal)
-  > .actions
-  .ui.secondary.button,
-.ui.small.modal:not(.user-modal):not(.execution-popup-modal)
-  > .actions
-  .ui.button:not(.primary):not(.positive):not(.negative),
-.ui.mini.modal:not(.user-modal):not(.execution-popup-modal)
-  > .actions
-  .ui.button:not(.primary):not(.positive):not(.negative) {
-  border: 1px solid #d8e1ed;
-  background: #ffffff;
-  color: #64748b;
-}
-
-.ui.small.modal:not(.user-modal):not(.execution-popup-modal)
-  > .actions
-  .ui.secondary.button:hover,
-.ui.mini.modal:not(.user-modal):not(.execution-popup-modal)
-  > .actions
-  .ui.secondary.button:hover,
-.ui.small.modal:not(.user-modal):not(.execution-popup-modal)
-  > .actions
-  .ui.secondary.button:focus,
-.ui.mini.modal:not(.user-modal):not(.execution-popup-modal)
-  > .actions
-  .ui.secondary.button:focus,
-.ui.small.modal:not(.user-modal):not(.execution-popup-modal)
-  > .actions
-  .ui.button:not(.primary):not(.positive):not(.negative):hover,
-.ui.mini.modal:not(.user-modal):not(.execution-popup-modal)
-  > .actions
-  .ui.button:not(.primary):not(.positive):not(.negative):hover,
-.ui.small.modal:not(.user-modal):not(.execution-popup-modal)
-  > .actions
-  .ui.button:not(.primary):not(.positive):not(.negative):focus,
-.ui.mini.modal:not(.user-modal):not(.execution-popup-modal)
-  > .actions
-  .ui.button:not(.primary):not(.positive):not(.negative):focus {
-  border-color: #bdc9d8;
-  background: #f8fafc;
-  color: #475569;
-}
-
-.ui.small.modal:not(.user-modal):not(.execution-popup-modal)
-  > .actions
-  .ui.primary.button,
-.ui.mini.modal:not(.user-modal):not(.execution-popup-modal)
-  > .actions
-  .ui.primary.button,
-.ui.small.modal:not(.user-modal):not(.execution-popup-modal)
-  > .actions
-  .ui.positive.button,
-.ui.mini.modal:not(.user-modal):not(.execution-popup-modal)
-  > .actions
-  .ui.positive.button {
-  background: #002057;
-  color: #ffffff;
-}
-
-.ui.small.modal:not(.user-modal):not(.execution-popup-modal)
-  > .actions
-  .ui.primary.button:hover,
-.ui.mini.modal:not(.user-modal):not(.execution-popup-modal)
-  > .actions
-  .ui.primary.button:hover,
-.ui.small.modal:not(.user-modal):not(.execution-popup-modal)
-  > .actions
-  .ui.primary.button:focus,
-.ui.mini.modal:not(.user-modal):not(.execution-popup-modal)
-  > .actions
-  .ui.primary.button:focus,
-.ui.small.modal:not(.user-modal):not(.execution-popup-modal)
-  > .actions
-  .ui.positive.button:hover,
-.ui.mini.modal:not(.user-modal):not(.execution-popup-modal)
-  > .actions
-  .ui.positive.button:hover,
-.ui.small.modal:not(.user-modal):not(.execution-popup-modal)
-  > .actions
-  .ui.positive.button:focus,
-.ui.mini.modal:not(.user-modal):not(.execution-popup-modal)
-  > .actions
-  .ui.positive.button:focus {
-  background: #001840;
-}
-
-.ui.small.modal:not(.user-modal):not(.execution-popup-modal)
-  > .actions
-  .ui.negative.button,
-.ui.mini.modal:not(.user-modal):not(.execution-popup-modal)
-  > .actions
-  .ui.negative.button {
-  background: #ed5c17;
-  color: #ffffff;
-}
-
-.ui.small.modal:not(.user-modal):not(.execution-popup-modal)
-  > .actions
-  .ui.negative.button:hover,
-.ui.mini.modal:not(.user-modal):not(.execution-popup-modal)
-  > .actions
-  .ui.negative.button:hover,
-.ui.small.modal:not(.user-modal):not(.execution-popup-modal)
-  > .actions
-  .ui.negative.button:focus,
-.ui.mini.modal:not(.user-modal):not(.execution-popup-modal)
-  > .actions
-  .ui.negative.button:focus {
-  background: #d94f12;
-}
-
-.ui.small.modal:not(.user-modal):not(.execution-popup-modal)
-  > .actions
-  .ui.disabled.button,
-.ui.mini.modal:not(.user-modal):not(.execution-popup-modal)
-  > .actions
-  .ui.disabled.button,
-.ui.small.modal:not(.user-modal):not(.execution-popup-modal)
-  > .actions
-  .ui.button:disabled,
-.ui.mini.modal:not(.user-modal):not(.execution-popup-modal)
-  > .actions
-  .ui.button:disabled {
-  cursor: not-allowed;
-  opacity: 0.55;
-}
-
-@media only screen and (max-width: 767px) {
-  .ui.small.modal:not(.user-modal):not(.execution-popup-modal),
-  .ui.mini.modal:not(.user-modal):not(.execution-popup-modal) {
-    width: calc(100vw - 24px);
+  > .close.icon {
+    .modal-close-appearance();
+    width: auto;
+    height: auto;
   }
 
-  .ui.small.modal:not(.user-modal):not(.execution-popup-modal) > .header,
-  .ui.mini.modal:not(.user-modal):not(.execution-popup-modal) > .header {
-    min-height: 72px;
-    padding: 18px 54px 18px 20px !important;
-    font-size: 18px;
-  }
-
-  .ui.small.modal:not(.user-modal):not(.execution-popup-modal) > .content,
-  .ui.mini.modal:not(.user-modal):not(.execution-popup-modal) > .content {
-    padding: 22px 20px !important;
-  }
-
-  .ui.small.modal:not(.user-modal):not(.execution-popup-modal) > .actions,
-  .ui.mini.modal:not(.user-modal):not(.execution-popup-modal) > .actions {
-    min-height: auto;
-    padding: 0 !important;
-    flex-direction: column-reverse;
-    align-items: stretch;
-  }
+  > .actions {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: flex-end;
+    align-items: center;
+    gap: 0.75rem;
 
-  .ui.small.modal:not(.user-modal):not(.execution-popup-modal)
-    > .actions
-    .ui.button,
-  .ui.mini.modal:not(.user-modal):not(.execution-popup-modal)
-    > .actions
-    .ui.button {
-    width: 100%;
-    margin: 0 !important;
+    .button {
+      margin: 0;
+    }
   }
 }

package/src/styles/ModalAppearance.less

@@ -0,0 +1,52 @@
+.modal-appearance() {
+  padding: 0;
+  border: 0;
+  border-radius: 1rem;
+  box-shadow:
+    0 20px 25px -5px rgba(0, 0, 0, 0.2),
+    0 8px 10px -6px rgba(0, 0, 0, 0.15);
+
+  > .header {
+    padding: 1.5rem 3.5rem 1rem 1.5rem;
+    border-radius: 1rem 1rem 0 0;
+    border-bottom: 0;
+    background: @primaryColor;
+    color: #f8fafc;
+  }
+
+  > .content {
+    padding: 1.625rem 1.5rem 2rem;
+  }
+
+  > .actions {
+    padding: 1rem 1.5rem;
+    padding-bottom: 1rem !important;
+    border-radius: 0 0 1rem 1rem;
+    border-top: 1px solid #e2e8f0;
+    background: #f8fafc;
+  }
+}
+
+.modal-close-appearance() {
+  position: absolute;
+  top: 1.25rem;
+  right: 1rem;
+  padding: 6px;
+  border: none;
+  border-radius: 0.5rem;
+  background: none;
+  color: #f8fafc;
+  cursor: pointer;
+  font-size: 1.25rem;
+  line-height: 1;
+  opacity: 0.8;
+
+  &:hover {
+    opacity: 1;
+  }
+
+  &:focus-visible {
+    outline: 2px solid currentColor;
+    outline-offset: 2px;
+  }
+}

package/src/styles/TrueModal.less

@@ -1,28 +1,19 @@
 @import "./ModalEffects.less";
+@import "./ModalAppearance.less";
 
 .ui.modal.true-modal {
+  .modal-appearance();
   display: flex !important;
   flex-direction: column;
   max-width: calc(100vw - 2rem);
   max-height: calc(100vh - 2rem);
   max-height: calc(100dvh - 2rem);
-  padding: 0;
-  border: 0;
-  border-radius: 1rem;
-  box-shadow:
-    0 20px 25px -5px rgba(0, 0, 0, 0.2),
-    0 8px 10px -6px rgba(0, 0, 0, 0.15);
 
   > .header {
     display: flex;
     align-items: center;
     gap: 0.75rem;
     flex-shrink: 0;
-    padding: 1.5rem 3.5rem 1rem 1.5rem;
-    border-radius: 1rem 1rem 0 0;
-    border-bottom: 0;
-    background: @primaryColor;
-    color: #f8fafc;
 
     > .icon {
       margin: 0;
@@ -43,34 +34,13 @@
   }
 
   > .true-modal-close {
-    position: absolute;
-    top: 1.25rem;
-    right: 1rem;
-    padding: 6px;
-    border: none;
-    border-radius: 0.5rem;
-    background: none;
-    color: #f8fafc;
-    cursor: pointer;
-    font-size: 1.25rem;
-    line-height: 1;
-    opacity: 0.8;
-
-    &:hover {
-      opacity: 1;
-    }
-
-    &:focus-visible {
-      outline: 2px solid currentColor;
-      outline-offset: 2px;
-    }
+    .modal-close-appearance();
   }
 
   > .content {
     flex: 1 1 auto;
     min-height: 0;
     overflow-y: auto;
-    padding: 1.625rem 1.5rem 2rem;
   }
 
   > .actions {
@@ -80,11 +50,6 @@
     justify-content: flex-end;
     align-items: center;
     gap: 0.75rem;
-    padding: 1rem 1.5rem;
-    padding-bottom: 1rem !important;
-    border-radius: 0 0 1rem 1rem;
-    border-top: 1px solid #e2e8f0;
-    background: #f8fafc;
 
     .button {
       margin: 0;