@odx/ui 4.5.1 → 4.5.2

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @odx/ui
 
+## 4.5.2
+
+### Patch Changes
+
+- bead5c6: Leave animations for modals and dropdowns
+
 ## 4.5.1
 
 ### Patch Changes

package/core-theme.css

@@ -2139,9 +2139,6 @@ html body .odx-fs-italic {
   transform: translate(var(--odx-cdk-connected-overlay-position-x, 0), var(--odx-cdk-connected-overlay-position-y, 0));
   transition-behavior: allow-discrete;
 }
-.odx-cdk-connected-overlay.is-hidden {
-  display: none;
-}
 .odx-cdk-connected-overlay__content {
   left: 0 !important;
   max-height: var(--odx-cdk-connected-overlay-max-height-modified, var(--odx-cdk-connected-overlay-max-height, unset));
@@ -2157,6 +2154,9 @@ html body .odx-fs-italic {
 .odx-cdk-connected-overlay:popover-open {
   opacity: 1;
 }
+.odx-cdk-connected-overlay.is-hidden:popover-open {
+  opacity: 0;
+}
 @starting-style {
   .odx-cdk-connected-overlay:popover-open {
     opacity: 0;
@@ -3331,10 +3331,14 @@ html body .odx-fs-italic {
 }
 
 .odx-calendar {
+  --max-calendar-height: 300px;
   display: inline-block;
   flex-direction: column;
   max-height: inherit;
 }
+.odx-calendar:has(.odx-calendar-years) {
+  max-height: var(--max-calendar-height);
+}
 .odx-calendar-header {
   transition-delay: 0ms;
   transition-duration: var(--odx-v-transition-duration);
@@ -5310,6 +5314,15 @@ html body .odx-fs-italic {
 .odx-modal[open]::backdrop, .odx-modal[open]:modal {
   opacity: 1;
 }
+.odx-modal.is-hidden[open]::backdrop, .odx-modal.is-hidden[open]:modal {
+  opacity: 0;
+}
+.odx-modal.is-hidden[open]:modal:not(.odx-modal--sidesheet) {
+  transform: translateY(calc(var(--odx-vertical-rythm-base-size) * 0.3334));
+}
+.odx-modal.is-hidden[open]:modal.odx-modal--sidesheet {
+  transform: translateX(calc(var(--odx-vertical-rythm-base-size) * 2));
+}
 .odx-modal[open]:modal {
   transform: translateY(0);
   transform: translateX(0);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@odx/ui",
-  "version": "4.5.1",
+  "version": "4.5.2",
   "author": "Drägerwerk AG & Co.KGaA",
   "license": "SEE LICENSE IN LICENSE",
   "peerDependencies": {

package/scss/cdk/connected-overlay.scss

@@ -18,10 +18,6 @@
   transform: translate(var(--odx-cdk-connected-overlay-position-x, 0), var(--odx-cdk-connected-overlay-position-y, 0));
   transition-behavior: allow-discrete;
 
-  &.is-hidden {
-    display: none;
-  }
-
   &__content {
     left: 0 !important;
     max-height: var(--odx-cdk-connected-overlay-max-height-modified, var(--odx-cdk-connected-overlay-max-height, unset));
@@ -40,6 +36,10 @@
     opacity: 1;
   }
 
+  &.is-hidden:popover-open {
+    opacity: 0;
+  }
+
   @starting-style {
     &:popover-open {
       opacity: 0;

package/scss/components/calendar.component.scss

@@ -6,11 +6,16 @@
 
 .odx-calendar {
   $root: &;
+  --max-calendar-height: 300px;
 
   display: inline-block;
   flex-direction: column;
   max-height: inherit;
 
+  &:has(#{$root}-years) {
+    max-height: var(--max-calendar-height);
+  }
+
   &-header {
     @include motion.transition(background-color outline-color color border-radius);
     @include utils.vertical-center-content();

package/scss/components/modal.component.scss

@@ -48,6 +48,21 @@ $modal-padding: math.div(12, 24);
     opacity: 1;
   }
 
+  &.is-hidden {
+    &[open]::backdrop,
+    &[open]:modal {
+      opacity: 0;
+    }
+
+    &[open]:modal:not(#{$root}--sidesheet) {
+      transform: translateY(#{dimensions.get-size(math.div(8, 24))});
+    }
+
+    &[open]:modal#{$root}--sidesheet {
+      transform: translateX(#{dimensions.get-size(math.div(8, 4))});
+    }
+  }
+
   &[open]:modal {
     transform: translateY(0);
     transform: translateX(0);