@aarhus-university/au-lib-react-components 10.20.0 → 10.20.2

package/package.json

@@ -1,7 +1,7 @@
 {
   "sideEffects": false,
   "name": "@aarhus-university/au-lib-react-components",
-  "version": "10.20.0",
+  "version": "10.20.2",
   "description": "Library for shared React components for various applications on au.dk",
   "scripts": {
     "test": "jest",
@@ -73,7 +73,7 @@
   },
   "dependencies": {
     "@aarhus-university/au-designsystem-delphinus": "0.30.1",
-    "@aarhus-university/types": "0.13.5",
+    "@aarhus-university/types": "0.13.6",
     "@reduxjs/toolkit": "^1.8.3",
     "@types/google.analytics": "^0.0.42",
     "@types/history": "^5.0.0",

package/src/components/AUDatepickerComponent.tsx

@@ -20,6 +20,7 @@ const AUDatepickerComponent: FC<AUDatepickerComponentProps> = ({
   limitStart,
   limitEnd,
   disabled,
+  sideBySideGrowth,
 }: AUDatepickerComponentProps) => {
   const [showCalendar, setShowCalendar] = useState(false);
   const [sDate, setDate] = useState<Date>(date as Date);
@@ -30,7 +31,7 @@ const AUDatepickerComponent: FC<AUDatepickerComponentProps> = ({
     onHide(sDate, dateFormatted);
   };
 
-  let className = 'form__field';
+  let className = 'datepicker form__field';
   if (fullWidth) {
     className = `${className} form__field--full-width`;
   }
@@ -43,29 +44,31 @@ const AUDatepickerComponent: FC<AUDatepickerComponentProps> = ({
     className = `${className} visually-disabled`;
   }
 
+  if (typeof sideBySideGrowth !== 'undefined' && sideBySideGrowth > 0) {
+    className = `${className} form__field--width-relative-${sideBySideGrowth}`;
+  }
+
   return (
     <div
-      className="datepicker"
+      className={className}
       aria-owns={`${id}-calendar`}
       aria-haspopup="true"
       aria-expanded={showCalendar}
     >
-      <div className={className}>
-        {showLabel && <label htmlFor={id}>{labelText}</label>}
-        <input
-          id={id}
-          type="text"
-          value={dateFormatted}
-          title={
-            lang === 'da'
-              ? 'Klik for at åbne datovælger'
-              : 'Click to open datepicker'
-          }
-          readOnly
-          disabled={disabled}
-          onClick={() => setShowCalendar(!showCalendar)}
-        />
-      </div>
+      {showLabel && <label htmlFor={id}>{labelText}</label>}
+      <input
+        id={id}
+        type="text"
+        value={dateFormatted}
+        title={
+          lang === 'da'
+            ? 'Klik for at åbne datovælger'
+            : 'Click to open datepicker'
+        }
+        readOnly
+        disabled={disabled}
+        onClick={() => setShowCalendar(!showCalendar)}
+      />
       {showCalendar && (
         <div className="datepicker__calendar-container">
           <AUCalendarComponent
@@ -111,6 +114,7 @@ AUDatepickerComponent.defaultProps = {
   limitStart: null,
   limitEnd: null,
   disabled: false,
+  sideBySideGrowth: 0,
 };
 
 AUDatepickerComponent.displayName = 'AUDatepickerComponent';