Merge pull request #468 from kronostechnologies/dev/fix-datepicker

fix(Datepicker): fix width on wrapper

Author: meriouma

packages/react/src/components/datepicker/datepicker.test.tsx.snap

@@ -61,6 +61,10 @@ input + .c1 {
   padding: var(--spacing-3x) var(--spacing-2x);
 }
 
+.c4 .react-datepicker-wrapper {
+  width: auto;
+}
+
 .c4 .react-datepicker__day {
   border: 1px solid transparent;
   box-sizing: border-box;
@@ -351,6 +355,10 @@ input + .c1 {
   padding: var(--spacing-3x) var(--spacing-2x);
 }
 
+.c4 .react-datepicker-wrapper {
+  width: auto;
+}
+
 .c4 .react-datepicker__day {
   border: 1px solid transparent;
   box-sizing: border-box;
@@ -641,6 +649,10 @@ input + .c1 {
   padding: var(--spacing-3x) var(--spacing-2x);
 }
 
+.c4 .react-datepicker-wrapper {
+  width: auto;
+}
+
 .c4 .react-datepicker__day {
   border: 1px solid transparent;
   box-sizing: border-box;
@@ -931,6 +943,10 @@ input + .c1 {
   padding: var(--spacing-3x) var(--spacing-2x);
 }
 
+.c4 .react-datepicker-wrapper {
+  width: auto;
+}
+
 .c4 .react-datepicker__day {
   border: 1px solid transparent;
   box-sizing: border-box;
@@ -1251,6 +1267,10 @@ input + .c1 {
   padding: var(--spacing-3x) var(--spacing-2x);
 }
 
+.c7 .react-datepicker-wrapper {
+  width: auto;
+}
+
 .c7 .react-datepicker__day {
   border: 1px solid transparent;
   box-sizing: border-box;
@@ -1563,6 +1583,10 @@ input + .c1 {
   padding: var(--spacing-3x) var(--spacing-2x);
 }
 
+.c4 .react-datepicker-wrapper {
+  width: auto;
+}
+
 .c4 .react-datepicker__day {
   border: 1px solid transparent;
   box-sizing: border-box;
@@ -2010,6 +2034,10 @@ input + .c1 {
   padding: var(--spacing-3x) var(--spacing-2x);
 }
 
+.c4 .react-datepicker-wrapper {
+  width: auto;
+}
+
 .c4 .react-datepicker__day {
   border: 1px solid transparent;
   box-sizing: border-box;
@@ -3182,6 +3210,10 @@ input + .c1 {
   padding: var(--spacing-3x) var(--spacing-2x);
 }
 
+.c4 .react-datepicker-wrapper {
+  width: auto;
+}
+
 .c4 .react-datepicker__day {
   border: 1px solid transparent;
   box-sizing: border-box;
@@ -4287,6 +4319,10 @@ input + .c1 {
   padding: var(--spacing-3x) var(--spacing-2x);
 }
 
+.c4 .react-datepicker-wrapper {
+  width: auto;
+}
+
 .c4 .react-datepicker__day {
   border: 1px solid transparent;
   box-sizing: border-box;

packages/react/src/components/datepicker/datepicker.tsx

@@ -69,6 +69,10 @@ const Container = styled.div<{ isMobile: boolean, theme: Theme }>`
         padding: var(--spacing-3x) var(--spacing-2x);
     }
 
+    .react-datepicker-wrapper {
+        width: auto;
+    }
+
     .react-datepicker__day {
         border: 1px solid transparent;
         box-sizing: border-box;