@aarhus-university/au-lib-react-components 10.19.2 → 10.20.1

package/package.json

@@ -1,7 +1,7 @@
 {
   "sideEffects": false,
   "name": "@aarhus-university/au-lib-react-components",
-  "version": "10.19.2",
+  "version": "10.20.1",
   "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);
@@ -43,6 +44,10 @@ 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"
@@ -111,6 +116,7 @@ AUDatepickerComponent.defaultProps = {
   limitStart: null,
   limitEnd: null,
   disabled: false,
+  sideBySideGrowth: 0,
 };
 
 AUDatepickerComponent.displayName = 'AUDatepickerComponent';

package/src/lib/hooks.ts

@@ -33,7 +33,11 @@ const useModal = (
   });
 };
 
-const useTranslation = <T>(initialObject: T, promises: [Promise<any>, Promise<any> | null]): T => {
+const useTranslation = <T>(
+  initialObject: T,
+  promises: [Promise<any>, Promise<any> | null],
+  lang: string,
+): T => {
   const [translations, setTranslations] = useState<T>(initialObject);
   const loadTranslation = async (): Promise<void> => {
     const translation = await Promise.all(promises);
@@ -46,7 +50,7 @@ const useTranslation = <T>(initialObject: T, promises: [Promise<any>, Promise<an
 
   useEffect(() => {
     loadTranslation();
-  }, []);
+  }, [lang]);
 
   return translations;
 };

package/stories/lib/helpers.tsx

@@ -55,8 +55,9 @@ const ThemeLanguageWrapper = ({
   defaultLabels,
   importPromises,
   translationContext,
+  lang,
 }) => {
-  const translations = useTranslation<typeof defaultLabels>(defaultLabels, importPromises);
+  const translations = useTranslation<typeof defaultLabels>(defaultLabels, importPromises, lang);
   useEffect(() => {
     const body = document.querySelector('body');
     if (body) {