From 190e89d497a0b4b8ac846a0e377f5a74876c29b7 Mon Sep 17 00:00:00 2001
From: fajar-apri-alaska <Fajar.Apriansyah@alaskaair.com>
Date: Thu, 30 May 2024 14:39:36 +0700
Subject: [PATCH] fix: add relative positioning to div wrapper

- This commit addresses the positioning issue of `auro-dropdown`
when `auro-datepicker` is placed inside `auro-dialog` component.
Related issue: AuroSelect#187

Changes to be committed:
	modified:   package-lock.json
	modified:   src/auro-datepicker.js
	modified:   src/style.scss
---
 package-lock.json      | 4 ++--
 src/auro-datepicker.js | 2 +-
 src/style.scss         | 4 ++++
 3 files changed, 7 insertions(+), 3 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 7baf51c..420806f 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
 {
   "name": "@aurodesignsystem/auro-datepicker",
-  "version": "2.5.2",
+  "version": "2.5.3",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "@aurodesignsystem/auro-datepicker",
-      "version": "2.5.2",
+      "version": "2.5.3",
       "hasInstallScript": true,
       "license": "Apache-2.0",
       "dependencies": {
diff --git a/src/auro-datepicker.js b/src/auro-datepicker.js
index 0a20afa..44ec510 100644
--- a/src/auro-datepicker.js
+++ b/src/auro-datepicker.js
@@ -850,7 +850,7 @@ export class AuroDatePicker extends LitElement {
   // function that renders the HTML and CSS into  the scope of the component
   render() {
     return html`
-      <div>
+      <div class="outerWrapper">
         <${this.dropdownTag}
           for="dropdownMenu"
           bordered
diff --git a/src/style.scss b/src/style.scss
index 5a3ce36..03afee3 100644
--- a/src/style.scss
+++ b/src/style.scss
@@ -35,6 +35,10 @@
   }
 }
 
+.outerWrapper {
+  position: relative;
+}
+
 .datepickerElement-helpText {
   margin: var(--ds-size-50, $ds-size-50) 0;
   font-size: var(--ds-text-body-size-xs, $ds-text-body-size-xs);