@aarhus-university/au-lib-react-components 11.3.2 → 11.4.0

package/src/components/AUToolbarComponent.tsx

@@ -1,101 +1,101 @@
-/* eslint-disable react/no-array-index-key */
-/* eslint-env browser */
-import React, { useEffect, FC, useRef } from 'react';
-import {
-  setToolbar, closeAllContentTogglesInToolbar, ExtendedCleanUpPair, setOverflow,
-} from '@aarhus-university/au-designsystem-delphinus/source/js/components/toolbar';
-
-const AUToolbarComponent: FC<AUToolbarComponentProps> = ({
-  lang,
-  elements,
-  noCollapse,
-  center,
-  title,
-  buttonClass,
-  buttonElements,
-}: AUToolbarComponentProps) => {
-  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);
-      }, 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.defaultProps = {
-  noCollapse: false,
-  center: false,
-  title: undefined,
-  buttonClass: 'toolbar__toggle',
-  buttonElements: [],
-};
-
-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, ExtendedCleanUpPair, setOverflow,
+} from '@aarhus-university/au-designsystem-delphinus/source/js/components/toolbar';
+
+const AUToolbarComponent: FC<AUToolbarComponentProps> = ({
+  lang,
+  elements,
+  noCollapse,
+  center,
+  title,
+  buttonClass,
+  buttonElements,
+}: AUToolbarComponentProps) => {
+  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);
+      }, 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.defaultProps = {
+  noCollapse: false,
+  center: false,
+  title: undefined,
+  buttonClass: 'toolbar__toggle',
+  buttonElements: [],
+};
+
+AUToolbarComponent.displayName = 'AUToolbarComponent';
+export default AUToolbarComponent;

package/src/components/AUTruncatorComponent.tsx

@@ -1,129 +1,124 @@
-import React, {
-  FC, useEffect, useRef, useState,
-} from 'react';
-import { overflowsY } from '@aarhus-university/au-designsystem-delphinus/source/js/components/helpers';
-
-const focusableSelector = 'a[href]:not([tabindex="-1"]), area[href]:not([tabindex="-1"]), input:not([disabled]):not([tabindex="-1"]), select:not([disabled]):not([tabindex="-1"]), textarea:not([disabled]):not([tabindex="-1"]), button:not([disabled]):not([tabindex="-1"]), iframe:not([tabindex="-1"]), [tabindex]:not([tabindex="-1"]), [contentEditable=true]:not([tabindex="-1"])';
-const getMaxLinesStyle = (maxLines: number): React.CSSProperties => ({ '--max-lines': maxLines } as React.CSSProperties);
-
-const setTruncate = (
-  expandElement: HTMLElement,
-  contentElement: HTMLElement,
-  expanded: boolean,
-): void => {
-  if (!expanded && overflowsY(contentElement)) {
-    expandElement.removeAttribute('hidden');
-  } else {
-    expandElement.parentElement?.classList.add('truncator--no-truncation');
-  }
-};
-
-const AUTruncatorComponent: FC<AUTruncatorComponentProps> = ({
-  maxLines,
-  header,
-  headerLevel,
-  children,
-  classNames,
-  buttonChild,
-}: AUTruncatorComponentProps) => {
-  const expandRef = useRef<HTMLButtonElement>(null);
-  const contentRef = useRef<HTMLDivElement>(null);
-  const [expanded, setExpanded] = useState<boolean>(false);
-  useEffect(() => {
-    setTruncate(expandRef.current as HTMLElement, contentRef.current as HTMLElement, expanded);
-    const focusElements = contentRef.current?.querySelectorAll(focusableSelector);
-
-    const onFocus = (event: Event) => {
-      if (overflowsY(event.target as HTMLElement)) {
-        setExpanded(true);
-      }
-    };
-
-    if (focusElements) {
-      focusElements.forEach((f) => {
-        f.addEventListener('focus', onFocus);
-      });
-    }
-
-    const onResize = () => {
-      setTruncate(expandRef.current as HTMLElement, contentRef.current as HTMLElement, expanded);
-    };
-
-    window.addEventListener('resize', onResize);
-
-    return () => {
-      if (focusElements) {
-        focusElements.forEach((f) => {
-          f.removeEventListener('focus', onFocus);
-        });
-      }
-      window.removeEventListener('resize', onResize);
-    };
-  }, [expanded]);
-
-  return (
-    <div className={`${classNames}${expanded ? ' truncator--no-truncation' : ''}`} style={getMaxLinesStyle(maxLines)}>
-      {
-        header && (
-          <>
-            {
-              headerLevel === 1 && (
-                <h1 className="truncator__header">{header}</h1>
-              )
-            }
-            {
-              headerLevel === 2 && (
-                <h2 className="truncator__header">{header}</h2>
-              )
-            }
-            {
-              headerLevel === 3 && (
-                <h3 className="truncator__header">{header}</h3>
-              )
-            }
-            {
-              headerLevel === 4 && (
-                <h4 className="truncator__header">{header}</h4>
-              )
-            }
-            {
-              headerLevel === 5 && (
-                <h5 className="truncator__header">{header}</h5>
-              )
-            }
-            {
-              headerLevel === 6 && (
-                <h6 className="truncator__header">{header}</h6>
-              )
-            }
-          </>
-        )
-      }
-      <button
-        ref={expandRef}
-        type="button"
-        className="truncator__expand"
-        hidden
-        aria-expanded={expanded}
-        onClick={() => setExpanded(true)}
-      >
-        {buttonChild}
-      </button>
-      <div
-        ref={contentRef}
-        className="truncator__content"
-      >
-        {children}
-      </div>
-    </div>
-  );
-};
-
-AUTruncatorComponent.defaultProps = {
-  header: undefined,
-  headerLevel: 2,
-  classNames: 'truncator',
-};
-
-AUTruncatorComponent.displayName = 'AUTruncatorComponent';
-export default AUTruncatorComponent;
+import React, {
+  FC, useEffect, useRef, useState,
+} from 'react';
+import { overflowsY, focusableSelector } from '@aarhus-university/au-designsystem-delphinus/source/js/components/helpers';
+import { truncate } from '@aarhus-university/au-designsystem-delphinus/source/js/components/truncator';
+
+const getMaxLinesStyle = (maxLines: number): React.CSSProperties => ({ '--max-lines': maxLines } as React.CSSProperties);
+
+const AUTruncatorComponent: FC<AUTruncatorComponentProps> = ({
+  maxLines,
+  header,
+  headerLevel,
+  children,
+  classNames,
+  buttonChild,
+}: AUTruncatorComponentProps) => {
+  const expandRef = useRef<HTMLButtonElement>(null);
+  const contentRef = useRef<HTMLDivElement>(null);
+  const [expanded, setExpanded] = useState<boolean>(false);
+  useEffect(() => {
+    if (expanded) {
+      (expandRef.current as HTMLElement).removeAttribute('hidden');
+      expandRef.current?.parentElement?.classList.add('truncator--no-truncation');
+    }
+    truncate(expandRef.current as HTMLElement, contentRef.current as HTMLElement);
+
+    const onResize = () => {
+      expandRef.current?.setAttribute('hidden', 'hidden');
+      expandRef.current?.parentElement?.classList.remove('truncator--no-truncation');
+      truncate(expandRef.current as HTMLElement, contentRef.current as HTMLElement);
+    };
+
+    window.addEventListener('resize', onResize);
+
+    const focusElements = contentRef.current?.querySelectorAll(focusableSelector);
+
+    const onFocus = (event: Event) => {
+      if (overflowsY(event.target as HTMLElement)) {
+        setExpanded(true);
+      }
+    };
+
+    if (focusElements) {
+      focusElements.forEach((f) => {
+        f.addEventListener('focus', onFocus);
+      });
+    }
+
+    return () => {
+      if (focusElements) {
+        focusElements.forEach((f) => {
+          f.removeEventListener('focus', onFocus);
+        });
+      }
+      window.removeEventListener('resize', onResize);
+    };
+  }, [expanded]);
+
+  return (
+    <div className={`${classNames}${expanded ? ' truncator--no-truncation' : ''}`} style={getMaxLinesStyle(maxLines)}>
+      {
+        header && (
+          <>
+            {
+              headerLevel === 1 && (
+                <h1 className="truncator__header">{header}</h1>
+              )
+            }
+            {
+              headerLevel === 2 && (
+                <h2 className="truncator__header">{header}</h2>
+              )
+            }
+            {
+              headerLevel === 3 && (
+                <h3 className="truncator__header">{header}</h3>
+              )
+            }
+            {
+              headerLevel === 4 && (
+                <h4 className="truncator__header">{header}</h4>
+              )
+            }
+            {
+              headerLevel === 5 && (
+                <h5 className="truncator__header">{header}</h5>
+              )
+            }
+            {
+              headerLevel === 6 && (
+                <h6 className="truncator__header">{header}</h6>
+              )
+            }
+          </>
+        )
+      }
+      <button
+        ref={expandRef}
+        type="button"
+        className="truncator__expand"
+        hidden
+        aria-expanded={expanded}
+        onClick={() => setExpanded(true)}
+      >
+        {buttonChild}
+      </button>
+      <div
+        ref={contentRef}
+        className="truncator__content"
+      >
+        {children}
+      </div>
+    </div>
+  );
+};
+
+AUTruncatorComponent.defaultProps = {
+  header: undefined,
+  headerLevel: 2,
+  classNames: 'truncator',
+};
+
+AUTruncatorComponent.displayName = 'AUTruncatorComponent';
+export default AUTruncatorComponent;

package/src/components/wrapping/AUEmbedComponent.js

@@ -1,47 +1,47 @@
-/* eslint-env browser */
-import React, { useState } from 'react';
-import PropTypes from 'prop-types';
-import AUSpinnerComponent from '../delphinus/AUSpinnerComponent';
-import getSourceForFrame from '../../lib/wrapping';
-
-const AUEmbedComponent = ({
-  api,
-  path,
-  referrer,
-}) => {
-  const [source, setSource] = useState(null);
-  const [frameLoaded, setFrameLoaded] = useState(false);
-
-  return (
-    <AUSpinnerComponent
-      loaded={frameLoaded}
-      loadingCondition={!frameLoaded}
-      onLoad={() => {
-        getSourceForFrame(api, path, referrer, (frameSrc) => {
-          setSource(frameSrc.url);
-          setFrameLoaded(true);
-        });
-      }}
-    >
-      <iframe
-        id="AUEmbedIframe"
-        title="AUEmbed"
-        src={source}
-        onLoad={() => {
-          if (window.iFrameResize) {
-            window.iFrameResize({ heightCalculationMethods: 'taggedElement', log: false }, '#AUEmbedIframe');
-          }
-        }}
-      />
-    </AUSpinnerComponent>
-  );
-};
-
-AUEmbedComponent.propTypes = {
-  path: PropTypes.string.isRequired,
-  api: PropTypes.string.isRequired,
-  referrer: PropTypes.string.isRequired,
-};
-
-AUEmbedComponent.displayName = 'AUEmbedComponent';
-export default AUEmbedComponent;
+/* eslint-env browser */
+import React, { useState } from 'react';
+import PropTypes from 'prop-types';
+import AUSpinnerComponent from '../delphinus/AUSpinnerComponent';
+import getSourceForFrame from '../../lib/wrapping';
+
+const AUEmbedComponent = ({
+  api,
+  path,
+  referrer,
+}) => {
+  const [source, setSource] = useState(null);
+  const [frameLoaded, setFrameLoaded] = useState(false);
+
+  return (
+    <AUSpinnerComponent
+      loaded={frameLoaded}
+      loadingCondition={!frameLoaded}
+      onLoad={() => {
+        getSourceForFrame(api, path, referrer, (frameSrc) => {
+          setSource(frameSrc.url);
+          setFrameLoaded(true);
+        });
+      }}
+    >
+      <iframe
+        id="AUEmbedIframe"
+        title="AUEmbed"
+        src={source}
+        onLoad={() => {
+          if (window.iFrameResize) {
+            window.iFrameResize({ heightCalculationMethods: 'taggedElement', log: false }, '#AUEmbedIframe');
+          }
+        }}
+      />
+    </AUSpinnerComponent>
+  );
+};
+
+AUEmbedComponent.propTypes = {
+  path: PropTypes.string.isRequired,
+  api: PropTypes.string.isRequired,
+  referrer: PropTypes.string.isRequired,
+};
+
+AUEmbedComponent.displayName = 'AUEmbedComponent';
+export default AUEmbedComponent;