@aarhus-university/au-lib-react-components 12.6.2 → 12.6.3

package/src/components/AUToastComponent.tsx

@@ -1,104 +1,104 @@
-/* eslint-disable @typescript-eslint/no-empty-function */
-/* eslint-env browser */
-import React, {
-  useEffect, useLayoutEffect, useRef, FC,
-} from 'react';
-import AUButtonComponent from './AUButtonComponent';
-
-const dismissTimeout = 5000;
-let timeoutId: NodeJS.Timeout | null = null;
-
-type Props = {
-  message: IToastMessage;
-  buttonText?: string;
-  dismiss?: () => void;
-  onOpen?: () => void;
-};
-
-const AUToastComponent: FC<Props> = ({
-  message: pMessage,
-  buttonText = 'OK',
-  dismiss = () => { },
-  onOpen = () => { },
-}) => {
-  const { type, message, header } = pMessage;
-  const toastRef = useRef<HTMLDivElement>(null);
-  const persistent = type !== 'confirm';
-
-  const moveOut = (element: HTMLElement): void => {
-    const moveOutClass = 'toast-notification--move-out';
-    element.classList.add(moveOutClass);
-    const moveOutElement = document.querySelector(`.${moveOutClass}`);
-    if (moveOutElement && typeof dismiss === 'function') {
-      moveOutElement.addEventListener('animationend', () => {
-        dismiss();
-      });
-    }
-  };
-
-  useEffect(() => {
-    if (typeof onOpen === 'function') {
-      onOpen();
-    }
-  }, []);
-
-  useLayoutEffect(() => {
-    const element = toastRef.current;
-    if (!persistent) {
-      if (element) {
-        element.addEventListener('animationend', () => {
-          timeoutId = setTimeout(() => {
-            moveOut(element);
-          }, dismissTimeout);
-        });
-        element.addEventListener('mouseenter', () => {
-          if (timeoutId) {
-            clearTimeout(timeoutId);
-            element.addEventListener('mouseleave', () => {
-              moveOut(element);
-            });
-          }
-        });
-      }
-    } else {
-      element?.querySelector('button')?.focus();
-    }
-  }, []);
-
-  let className = 'toast-notification';
-  if (persistent) {
-    className = `${className} toast-notification--persistent`;
-  }
-  if (type !== 'default') {
-    className = `${className} toast-notification--${type}`;
-  }
-  return (
-    <div ref={toastRef} className={className}>
-      <div className="toast-notification__content">
-        {
-          header && (
-            <h2 className="toast-notification__header">
-              {header}
-            </h2>
-          )
-        }
-        <p dangerouslySetInnerHTML={{ __html: message }} />
-      </div>
-      {
-        persistent && (
-          <AUButtonComponent
-            label={buttonText as string}
-            onClick={() => {
-              if (toastRef.current) {
-                moveOut(toastRef.current);
-              }
-            }}
-          />
-        )
-      }
-    </div>
-  );
-};
-
-AUToastComponent.displayName = 'AUToastComponent';
-export default AUToastComponent;
+/* eslint-disable @typescript-eslint/no-empty-function */
+/* eslint-env browser */
+import React, {
+  useEffect, useLayoutEffect, useRef, FC,
+} from 'react';
+import AUButtonComponent from './AUButtonComponent';
+
+const dismissTimeout = 5000;
+let timeoutId: NodeJS.Timeout | null = null;
+
+type Props = {
+  message: IToastMessage;
+  buttonText?: string;
+  dismiss?: () => void;
+  onOpen?: () => void;
+};
+
+const AUToastComponent: FC<Props> = ({
+  message: pMessage,
+  buttonText = 'OK',
+  dismiss = () => { },
+  onOpen = () => { },
+}) => {
+  const { type, message, header } = pMessage;
+  const toastRef = useRef<HTMLDivElement>(null);
+  const persistent = type !== 'confirm';
+
+  const moveOut = (element: HTMLElement): void => {
+    const moveOutClass = 'toast-notification--move-out';
+    element.classList.add(moveOutClass);
+    const moveOutElement = document.querySelector(`.${moveOutClass}`);
+    if (moveOutElement && typeof dismiss === 'function') {
+      moveOutElement.addEventListener('animationend', () => {
+        dismiss();
+      });
+    }
+  };
+
+  useEffect(() => {
+    if (typeof onOpen === 'function') {
+      onOpen();
+    }
+  }, []);
+
+  useLayoutEffect(() => {
+    const element = toastRef.current;
+    if (!persistent) {
+      if (element) {
+        element.addEventListener('animationend', () => {
+          timeoutId = setTimeout(() => {
+            moveOut(element);
+          }, dismissTimeout);
+        });
+        element.addEventListener('mouseenter', () => {
+          if (timeoutId) {
+            clearTimeout(timeoutId);
+            element.addEventListener('mouseleave', () => {
+              moveOut(element);
+            });
+          }
+        });
+      }
+    } else {
+      element?.querySelector('button')?.focus();
+    }
+  }, []);
+
+  let className = 'toast-notification';
+  if (persistent) {
+    className = `${className} toast-notification--persistent`;
+  }
+  if (type !== 'default') {
+    className = `${className} toast-notification--${type}`;
+  }
+  return (
+    <div ref={toastRef} className={className}>
+      <div className="toast-notification__content">
+        {
+          header && (
+            <h2 className="toast-notification__header">
+              {header}
+            </h2>
+          )
+        }
+        <p dangerouslySetInnerHTML={{ __html: message }} />
+      </div>
+      {
+        persistent && (
+          <AUButtonComponent
+            label={buttonText as string}
+            onClick={() => {
+              if (toastRef.current) {
+                moveOut(toastRef.current);
+              }
+            }}
+          />
+        )
+      }
+    </div>
+  );
+};
+
+AUToastComponent.displayName = 'AUToastComponent';
+export default AUToastComponent;

package/src/components/AUToolbarComponent.tsx

@@ -1,108 +1,108 @@
-/* eslint-disable react/no-array-index-key */
-/* eslint-env browser */
-import React, { useEffect, FC, useRef } from 'react';
-import {
-  setToolbar, closeAllContentTogglesInToolbar, setOverflow,
-} from '@aarhus-university/au-designsystem-delphinus/source/js/components/toolbar';
-
-type Props = {
-  lang: string;
-  elements: (JSX.Element | undefined)[];
-  noCollapse?: boolean;
-  center?: boolean;
-  title?: string | undefined;
-  buttonClass?: string;
-  buttonElements?: JSX.Element[];
-  onCloseContentToggles?: () => void;
-};
-
-const AUToolbarComponent: FC<Props> = ({
-  lang,
-  elements,
-  noCollapse = false,
-  center = false,
-  title = undefined,
-  buttonClass = 'toolbar__toggle',
-  buttonElements = [],
-  onCloseContentToggles = undefined,
-}) => {
-  const toolbarRef = useRef<HTMLDivElement>(null);
-  useEffect(() => {
-    const onResize = () => {
-      if (toolbarRef.current?.querySelector('.toolbar__items')) {
-        closeAllContentTogglesInToolbar(toolbarRef.current);
-        setOverflow(toolbarRef.current);
-      }
-    };
-
-    let toolbarCleanUp: ExtendedCleanUpPair[];
-    if (toolbarRef.current) {
-      // eslint-disable-next-line max-len
-      toolbarCleanUp = setToolbar(toolbarRef.current, (toolbar: HTMLElement) => {
-        closeAllContentTogglesInToolbar(toolbar);
-        if (typeof onCloseContentToggles === 'function') {
-          onCloseContentToggles();
-        }
-      }, false);
-    }
-
-    window.addEventListener('resize', onResize);
-
-    // Runs on unmounting
-    return () => {
-      toolbarCleanUp.forEach((pair: ExtendedCleanUpPair) => {
-        if (typeof pair.clickEvent === 'function') {
-          pair.element.removeEventListener('click', pair.clickEvent);
-        }
-        if (typeof pair.keyUpEvent === 'function') {
-          pair.element.removeEventListener('keyup', pair.keyUpEvent);
-        }
-      });
-
-      window.removeEventListener('resize', onResize);
-    };
-  }, []);
-
-  const renderElements = elements.map((e, i) => <React.Fragment key={i}>{e}</React.Fragment>);
-  const label = lang === 'da' ? 'Muligheder' : 'Options';
-
-  let toolbarClass = 'toolbar';
-  if (noCollapse) {
-    toolbarClass = `${toolbarClass} toolbar--no-collapse`;
-  }
-  if (center) {
-    toolbarClass = `${toolbarClass} toolbar--center-align-items`;
-  }
-
-  return (
-    <div
-      ref={toolbarRef}
-      className={toolbarClass}
-    >
-      <div className="toolbar__items">
-        {renderElements}
-      </div>
-      <button
-        type="button"
-        className={buttonClass}
-        title={title || label}
-        aria-label={title}
-        aria-haspopup="true"
-      >
-        {
-          buttonElements?.length === 0 && (title || label)
-        }
-        {
-          (buttonElements || []).map((element, index) => (
-            <React.Fragment key={index}>
-              {element}
-            </React.Fragment>
-          ))
-        }
-      </button>
-    </div>
-  );
-};
-
-AUToolbarComponent.displayName = 'AUToolbarComponent';
-export default AUToolbarComponent;
+/* eslint-disable react/no-array-index-key */
+/* eslint-env browser */
+import React, { useEffect, FC, useRef } from 'react';
+import {
+  setToolbar, closeAllContentTogglesInToolbar, setOverflow,
+} from '@aarhus-university/au-designsystem-delphinus/source/js/components/toolbar';
+
+type Props = {
+  lang: string;
+  elements: (JSX.Element | undefined)[];
+  noCollapse?: boolean;
+  center?: boolean;
+  title?: string | undefined;
+  buttonClass?: string;
+  buttonElements?: JSX.Element[];
+  onCloseContentToggles?: () => void;
+};
+
+const AUToolbarComponent: FC<Props> = ({
+  lang,
+  elements,
+  noCollapse = false,
+  center = false,
+  title = undefined,
+  buttonClass = 'toolbar__toggle',
+  buttonElements = [],
+  onCloseContentToggles = undefined,
+}) => {
+  const toolbarRef = useRef<HTMLDivElement>(null);
+  useEffect(() => {
+    const onResize = () => {
+      if (toolbarRef.current?.querySelector('.toolbar__items')) {
+        closeAllContentTogglesInToolbar(toolbarRef.current);
+        setOverflow(toolbarRef.current);
+      }
+    };
+
+    let toolbarCleanUp: ExtendedCleanUpPair[];
+    if (toolbarRef.current) {
+      // eslint-disable-next-line max-len
+      toolbarCleanUp = setToolbar(toolbarRef.current, (toolbar: HTMLElement) => {
+        closeAllContentTogglesInToolbar(toolbar);
+        if (typeof onCloseContentToggles === 'function') {
+          onCloseContentToggles();
+        }
+      }, false);
+    }
+
+    window.addEventListener('resize', onResize);
+
+    // Runs on unmounting
+    return () => {
+      toolbarCleanUp.forEach((pair: ExtendedCleanUpPair) => {
+        if (typeof pair.clickEvent === 'function') {
+          pair.element.removeEventListener('click', pair.clickEvent);
+        }
+        if (typeof pair.keyUpEvent === 'function') {
+          pair.element.removeEventListener('keyup', pair.keyUpEvent);
+        }
+      });
+
+      window.removeEventListener('resize', onResize);
+    };
+  }, []);
+
+  const renderElements = elements.map((e, i) => <React.Fragment key={i}>{e}</React.Fragment>);
+  const label = lang === 'da' ? 'Muligheder' : 'Options';
+
+  let toolbarClass = 'toolbar';
+  if (noCollapse) {
+    toolbarClass = `${toolbarClass} toolbar--no-collapse`;
+  }
+  if (center) {
+    toolbarClass = `${toolbarClass} toolbar--center-align-items`;
+  }
+
+  return (
+    <div
+      ref={toolbarRef}
+      className={toolbarClass}
+    >
+      <div className="toolbar__items">
+        {renderElements}
+      </div>
+      <button
+        type="button"
+        className={buttonClass}
+        title={title || label}
+        aria-label={title}
+        aria-haspopup="true"
+      >
+        {
+          buttonElements?.length === 0 && (title || label)
+        }
+        {
+          (buttonElements || []).map((element, index) => (
+            <React.Fragment key={index}>
+              {element}
+            </React.Fragment>
+          ))
+        }
+      </button>
+    </div>
+  );
+};
+
+AUToolbarComponent.displayName = 'AUToolbarComponent';
+export default AUToolbarComponent;