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

package/src/components/AUCharacterCountComponent.tsx

@@ -1,56 +1,56 @@
-/* eslint-disable camelcase */
-import React, {
-  FC,
-} from 'react';
-import { replace } from '../lib/helpers';
-import { useCharacterCount } from '../lib/hooks';
-
-type Props = {
-  children: React.ReactNode;
-  type: 'recommended' | 'allowed';
-  initialChars: number;
-  maxChars: number;
-  translations: IGenericTranslation['generics']['forms'];
-};
-
-const AUCharacterCountComponent: FC<Props> = ({
-  children,
-  type,
-  initialChars,
-  maxChars,
-  translations,
-}) => {
-  const {
-    ref, remaining, overflow,
-  } = useCharacterCount(type, initialChars, maxChars);
-
-  const { character_count } = translations;
-
-  return (
-    <div
-      ref={ref}
-      className="form__field__character-count"
-    >
-      {children}
-      <div
-        className="form__field__character-count__info"
-        aria-live="polite"
-      >
-        <span className="form__field__character-count__info__overflow-message">
-          {`${replace(character_count.overflow.message[type], ['maxchars'], [maxChars.toString()])}`}
-        </span>
-        {' '}
-        <span className="form__field__character-count__info__overflow-count">
-          {`${replace(character_count.overflow.count[type][overflow === 1 ? 'one' : 'other'], ['overflow'], [overflow.toString()])}`}
-        </span>
-        {' '}
-        <span className="form__field__character-count__info__count-down">
-          {`${replace(character_count.count_down[remaining === 1 ? 'one' : 'other'], ['remaining'], [remaining.toString()])}`}
-        </span>
-      </div>
-    </div>
-  );
-};
-
-AUCharacterCountComponent.displayName = 'AUCharacterCountComponent';
-export default AUCharacterCountComponent;
+/* eslint-disable camelcase */
+import React, {
+  FC,
+} from 'react';
+import { replace } from '../lib/helpers';
+import { useCharacterCount } from '../lib/hooks';
+
+type Props = {
+  children: React.ReactNode;
+  type: 'recommended' | 'allowed';
+  initialChars: number;
+  maxChars: number;
+  translations: IGenericTranslation['generics']['forms'];
+};
+
+const AUCharacterCountComponent: FC<Props> = ({
+  children,
+  type,
+  initialChars,
+  maxChars,
+  translations,
+}) => {
+  const {
+    ref, remaining, overflow,
+  } = useCharacterCount(type, initialChars, maxChars);
+
+  const { character_count } = translations;
+
+  return (
+    <div
+      ref={ref}
+      className="form__field__character-count"
+    >
+      {children}
+      <div
+        className="form__field__character-count__info"
+        aria-live="polite"
+      >
+        <span className="form__field__character-count__info__overflow-message">
+          {`${replace(character_count.overflow.message[type], ['maxchars'], [maxChars.toString()])}`}
+        </span>
+        {' '}
+        <span className="form__field__character-count__info__overflow-count">
+          {`${replace(character_count.overflow.count[type][overflow === 1 ? 'one' : 'other'], ['overflow'], [overflow.toString()])}`}
+        </span>
+        {' '}
+        <span className="form__field__character-count__info__count-down">
+          {`${replace(character_count.count_down[remaining === 1 ? 'one' : 'other'], ['remaining'], [remaining.toString()])}`}
+        </span>
+      </div>
+    </div>
+  );
+};
+
+AUCharacterCountComponent.displayName = 'AUCharacterCountComponent';
+export default AUCharacterCountComponent;

package/src/components/AUComboBoxComponent.tsx

@@ -1,195 +1,195 @@
-/* eslint-disable max-len */
-/* eslint-disable jsx-a11y/role-has-required-aria-props */
-/* eslint-disable jsx-a11y/control-has-associated-label */
-/* eslint-disable jsx-a11y/label-has-associated-control */
-import React, {
-  FC, useState, useEffect, useRef,
-} from 'react';
-import { replace } from '../lib/helpers';
-
-const setResults = (value: string, data: IComboBoxSearch[], setFiltered: (values: IComboBoxSearch[]) => void) => {
-  const filtered = data.filter((item) => item.name.toLowerCase().includes(value.toLowerCase()));
-  setFiltered(filtered);
-};
-
-const isElementWithIdInEventPath = (event: MouseEvent, id: string): boolean => {
-  let found = false;
-  const path = event.composedPath();
-  path.forEach((p: EventTarget): void => {
-    if ((p as HTMLElement).parentElement != null && (p as HTMLElement).getAttribute('id') === id) {
-      found = true;
-    }
-  });
-  return found;
-};
-
-type Props = {
-  inline: boolean;
-  data: IComboBoxSearch[];
-  label: string;
-  resultsText: {
-    one: string;
-    other: string;
-  };
-  noResultsText: string;
-  noResultsTextSecondary: string;
-  clearOnSelect?: boolean;
-  onItemSelect: (item: IComboBoxSearch) => void;
-}
-
-const AUComboBoxComponent: FC<Props> = ({
-  inline,
-  data,
-  label,
-  resultsText,
-  noResultsText,
-  noResultsTextSecondary,
-  clearOnSelect = false,
-  onItemSelect,
-}) => {
-  const comboBoxRef = useRef<HTMLDivElement>(null);
-  const [filteredData, setFilteredData] = useState<IComboBoxSearch[]>([]);
-  const [resultIndex, setResultIndex] = useState<number>(-1);
-  const [selected, setSelected] = useState<boolean>(false);
-  const [selectedItem, setSelectedItem] = useState<string>('');
-
-  const id = label.split(' ').join('-').toLocaleLowerCase();
-
-  useEffect(() => {
-    document.addEventListener('click', (e) => {
-      if (comboBoxRef.current && !isElementWithIdInEventPath(e, `combo-box-${id}`)) {
-        setFilteredData([]);
-      }
-    });
-  }, []);
-
-  useEffect(() => {
-    const liItems = comboBoxRef.current?.querySelectorAll('li');
-    if (liItems && liItems.length > 0) {
-      liItems[resultIndex - 1]?.focus();
-    }
-    if (resultIndex === 0) {
-      comboBoxRef.current?.querySelector('input')?.focus();
-    }
-  }, [resultIndex]);
-
-  return (
-    <div className={`form__field${inline ? ' form__field--inline-label' : ''}`} ref={comboBoxRef}>
-      <label htmlFor={id}>{label}</label>
-      <select className="form__field__select--combo-box" id={id} aria-hidden hidden>
-        {data.map((item) => (
-          <option key={item.id} value={item.name}>
-            {item.name}
-          </option>
-        ))}
-      </select>
-      <div className="form__field__combo-box" id={`combo-box-${id}`}>
-        <input
-          className="form__field__combo-box__field"
-          autoCapitalize="none"
-          type="text"
-          autoComplete="off"
-          aria-owns={`combo-box-options--${id}`}
-          aria-autocomplete="list"
-          role="combobox"
-          id={id}
-          aria-expanded="false"
-          value={selectedItem}
-          onChange={(e) => {
-            setSelectedItem(e.target.value);
-            setSelected(false);
-            setResults(e.target.value, data, setFilteredData);
-          }}
-          onFocus={(e) => {
-            if (!selected) {
-              const { value } = e.target;
-              if (!value) {
-                setFilteredData(data);
-              } else {
-                setResults(value, data, setFilteredData);
-              }
-            }
-          }}
-          onKeyDown={(e) => {
-            if (e.key === 'ArrowDown') {
-              e.preventDefault();
-              setResultIndex(1);
-            }
-            if (e.key === 'ArrowUp') {
-              e.preventDefault();
-              setResultIndex(0);
-            }
-            if (e.key === 'Tab') {
-              setFilteredData([]);
-              setResultIndex(0);
-            }
-            if (e.key === 'Enter') {
-              e.preventDefault();
-            }
-          }}
-        />
-        {
-          !selected && (
-            <ul
-              id={`combo-box-options--${id}`}
-              role="listbox"
-              className="form__field__combo-box__options"
-            >
-              {filteredData.map((item, index) => (
-                <li
-                  key={item.id}
-                  tabIndex={-1}
-                  aria-selected={index === resultIndex - 1}
-                  role="option"
-                  className="form__field__combo-box__option"
-                  onClick={() => {
-                    setSelectedItem(clearOnSelect ? '' : item.name);
-                    setSelected(true);
-                    setFilteredData([]);
-                    setResultIndex(0);
-                    onItemSelect(item);
-                  }}
-                  onKeyDown={(e) => {
-                    if (e.key === 'ArrowDown') {
-                      e.preventDefault();
-                      setResultIndex(resultIndex + 1);
-                    }
-                    if (e.key === 'ArrowUp') {
-                      e.preventDefault();
-                      setResultIndex(resultIndex - 1);
-                    }
-                  }}
-                  onKeyUp={(e) => {
-                    if (e.key === 'Enter') {
-                      setSelectedItem(clearOnSelect ? '' : item.name);
-                      setSelected(true);
-                      setFilteredData([]);
-                      setResultIndex(0);
-                      onItemSelect(item);
-                    }
-                  }}
-                >
-                  {item.name}
-                </li>
-              ))}
-              {(filteredData.length === 0 && selectedItem) && (
-                <li className="form__field__combo-box__option form__field__combo-box__option--no-results">
-                  <div className="empty-state empty-state--inline">
-                    <div className="empty-state__text">{noResultsText}</div>
-                    <div className="empty-state__text-secondary">{noResultsTextSecondary}</div>
-                  </div>
-                </li>
-              )}
-            </ul>
-          )
-        }
-        <div aria-live="polite" role="status" className="screenreader-only">
-          {replace(resultsText[filteredData.length === 1 ? 'one' : 'other'], ['dataLength'], [`${filteredData.length}`])}
-        </div>
-      </div>
-    </div>
-  );
-};
-
-AUComboBoxComponent.displayName = 'AUComboBoxComponent';
-export default AUComboBoxComponent;
+/* eslint-disable max-len */
+/* eslint-disable jsx-a11y/role-has-required-aria-props */
+/* eslint-disable jsx-a11y/control-has-associated-label */
+/* eslint-disable jsx-a11y/label-has-associated-control */
+import React, {
+  FC, useState, useEffect, useRef,
+} from 'react';
+import { replace } from '../lib/helpers';
+
+const setResults = (value: string, data: IComboBoxSearch[], setFiltered: (values: IComboBoxSearch[]) => void) => {
+  const filtered = data.filter((item) => item.name.toLowerCase().includes(value.toLowerCase()));
+  setFiltered(filtered);
+};
+
+const isElementWithIdInEventPath = (event: MouseEvent, id: string): boolean => {
+  let found = false;
+  const path = event.composedPath();
+  path.forEach((p: EventTarget): void => {
+    if ((p as HTMLElement).parentElement != null && (p as HTMLElement).getAttribute('id') === id) {
+      found = true;
+    }
+  });
+  return found;
+};
+
+type Props = {
+  inline: boolean;
+  data: IComboBoxSearch[];
+  label: string;
+  resultsText: {
+    one: string;
+    other: string;
+  };
+  noResultsText: string;
+  noResultsTextSecondary: string;
+  clearOnSelect?: boolean;
+  onItemSelect: (item: IComboBoxSearch) => void;
+}
+
+const AUComboBoxComponent: FC<Props> = ({
+  inline,
+  data,
+  label,
+  resultsText,
+  noResultsText,
+  noResultsTextSecondary,
+  clearOnSelect = false,
+  onItemSelect,
+}) => {
+  const comboBoxRef = useRef<HTMLDivElement>(null);
+  const [filteredData, setFilteredData] = useState<IComboBoxSearch[]>([]);
+  const [resultIndex, setResultIndex] = useState<number>(-1);
+  const [selected, setSelected] = useState<boolean>(false);
+  const [selectedItem, setSelectedItem] = useState<string>('');
+
+  const id = label.split(' ').join('-').toLocaleLowerCase();
+
+  useEffect(() => {
+    document.addEventListener('click', (e) => {
+      if (comboBoxRef.current && !isElementWithIdInEventPath(e, `combo-box-${id}`)) {
+        setFilteredData([]);
+      }
+    });
+  }, []);
+
+  useEffect(() => {
+    const liItems = comboBoxRef.current?.querySelectorAll('li');
+    if (liItems && liItems.length > 0) {
+      liItems[resultIndex - 1]?.focus();
+    }
+    if (resultIndex === 0) {
+      comboBoxRef.current?.querySelector('input')?.focus();
+    }
+  }, [resultIndex]);
+
+  return (
+    <div className={`form__field${inline ? ' form__field--inline-label' : ''}`} ref={comboBoxRef}>
+      <label htmlFor={id}>{label}</label>
+      <select className="form__field__select--combo-box" id={id} aria-hidden hidden>
+        {data.map((item) => (
+          <option key={item.id} value={item.name}>
+            {item.name}
+          </option>
+        ))}
+      </select>
+      <div className="form__field__combo-box" id={`combo-box-${id}`}>
+        <input
+          className="form__field__combo-box__field"
+          autoCapitalize="none"
+          type="text"
+          autoComplete="off"
+          aria-owns={`combo-box-options--${id}`}
+          aria-autocomplete="list"
+          role="combobox"
+          id={id}
+          aria-expanded="false"
+          value={selectedItem}
+          onChange={(e) => {
+            setSelectedItem(e.target.value);
+            setSelected(false);
+            setResults(e.target.value, data, setFilteredData);
+          }}
+          onFocus={(e) => {
+            if (!selected) {
+              const { value } = e.target;
+              if (!value) {
+                setFilteredData(data);
+              } else {
+                setResults(value, data, setFilteredData);
+              }
+            }
+          }}
+          onKeyDown={(e) => {
+            if (e.key === 'ArrowDown') {
+              e.preventDefault();
+              setResultIndex(1);
+            }
+            if (e.key === 'ArrowUp') {
+              e.preventDefault();
+              setResultIndex(0);
+            }
+            if (e.key === 'Tab') {
+              setFilteredData([]);
+              setResultIndex(0);
+            }
+            if (e.key === 'Enter') {
+              e.preventDefault();
+            }
+          }}
+        />
+        {
+          !selected && (
+            <ul
+              id={`combo-box-options--${id}`}
+              role="listbox"
+              className="form__field__combo-box__options"
+            >
+              {filteredData.map((item, index) => (
+                <li
+                  key={item.id}
+                  tabIndex={-1}
+                  aria-selected={index === resultIndex - 1}
+                  role="option"
+                  className="form__field__combo-box__option"
+                  onClick={() => {
+                    setSelectedItem(clearOnSelect ? '' : item.name);
+                    setSelected(true);
+                    setFilteredData([]);
+                    setResultIndex(0);
+                    onItemSelect(item);
+                  }}
+                  onKeyDown={(e) => {
+                    if (e.key === 'ArrowDown') {
+                      e.preventDefault();
+                      setResultIndex(resultIndex + 1);
+                    }
+                    if (e.key === 'ArrowUp') {
+                      e.preventDefault();
+                      setResultIndex(resultIndex - 1);
+                    }
+                  }}
+                  onKeyUp={(e) => {
+                    if (e.key === 'Enter') {
+                      setSelectedItem(clearOnSelect ? '' : item.name);
+                      setSelected(true);
+                      setFilteredData([]);
+                      setResultIndex(0);
+                      onItemSelect(item);
+                    }
+                  }}
+                >
+                  {item.name}
+                </li>
+              ))}
+              {(filteredData.length === 0 && selectedItem) && (
+                <li className="form__field__combo-box__option form__field__combo-box__option--no-results">
+                  <div className="empty-state empty-state--inline">
+                    <div className="empty-state__text">{noResultsText}</div>
+                    <div className="empty-state__text-secondary">{noResultsTextSecondary}</div>
+                  </div>
+                </li>
+              )}
+            </ul>
+          )
+        }
+        <div aria-live="polite" role="status" className="screenreader-only">
+          {replace(resultsText[filteredData.length === 1 ? 'one' : 'other'], ['dataLength'], [`${filteredData.length}`])}
+        </div>
+      </div>
+    </div>
+  );
+};
+
+AUComboBoxComponent.displayName = 'AUComboBoxComponent';
+export default AUComboBoxComponent;

package/src/components/AUContentToggleComponent.tsx

@@ -1,50 +1,50 @@
-import React, {
-  useEffect,
-  useRef,
-  FC,
-} from 'react';
-import { setContentToggle } from '@aarhus-university/au-designsystem-delphinus/source/js/components/content-toggle';
-
-type Props = {
-  toggled: boolean;
-  classNames?: string;
-  children: JSX.Element;
-  onClick?: ((content: HTMLElement, button: HTMLButtonElement) => void);
-  beforeCallback?: ((content: HTMLElement, button: HTMLButtonElement) => void);
-  afterCallback?: ((content: HTMLElement, button: HTMLButtonElement) => void);
-};
-
-const AUContentToggleComponent: FC<Props> = ({
-  toggled,
-  classNames = undefined,
-  children,
-  onClick = undefined,
-  beforeCallback = undefined,
-  afterCallback = undefined,
-}) => {
-  const toggleContainer = useRef<HTMLDivElement>(null);
-  useEffect(() => {
-    const toggle = toggleContainer?.current?.querySelector('.content-toggle__content');
-    let cleanUp: CleanUpPair[];
-    if (toggle) {
-      cleanUp = setContentToggle(toggle, onClick, beforeCallback, afterCallback);
-      if (cleanUp.length > 0) { // Den første er altid knappen (og ikke luk-knappen)
-        cleanUp[0].element.setAttribute('aria-expanded', toggled ? 'true' : 'false');
-      }
-    }
-
-    return () => {
-      cleanUp.forEach((c) => {
-        c.element.removeEventListener('click', c.clickEvent);
-      });
-    };
-  }, []);
-  return (
-    <div ref={toggleContainer} className={classNames}>
-      {children}
-    </div>
-  );
-};
-
-AUContentToggleComponent.displayName = 'AUContentToggleComponent';
-export default AUContentToggleComponent;
+import React, {
+  useEffect,
+  useRef,
+  FC,
+} from 'react';
+import { setContentToggle } from '@aarhus-university/au-designsystem-delphinus/source/js/components/content-toggle';
+
+type Props = {
+  toggled: boolean;
+  classNames?: string;
+  children: JSX.Element;
+  onClick?: ((content: HTMLElement, button: HTMLButtonElement) => void);
+  beforeCallback?: ((content: HTMLElement, button: HTMLButtonElement) => void);
+  afterCallback?: ((content: HTMLElement, button: HTMLButtonElement) => void);
+};
+
+const AUContentToggleComponent: FC<Props> = ({
+  toggled,
+  classNames = undefined,
+  children,
+  onClick = undefined,
+  beforeCallback = undefined,
+  afterCallback = undefined,
+}) => {
+  const toggleContainer = useRef<HTMLDivElement>(null);
+  useEffect(() => {
+    const toggle = toggleContainer?.current?.querySelector('.content-toggle__content');
+    let cleanUp: CleanUpPair[];
+    if (toggle) {
+      cleanUp = setContentToggle(toggle, onClick, beforeCallback, afterCallback);
+      if (cleanUp.length > 0) { // Den første er altid knappen (og ikke luk-knappen)
+        cleanUp[0].element.setAttribute('aria-expanded', toggled ? 'true' : 'false');
+      }
+    }
+
+    return () => {
+      cleanUp.forEach((c) => {
+        c.element.removeEventListener('click', c.clickEvent);
+      });
+    };
+  }, []);
+  return (
+    <div ref={toggleContainer} className={classNames}>
+      {children}
+    </div>
+  );
+};
+
+AUContentToggleComponent.displayName = 'AUContentToggleComponent';
+export default AUContentToggleComponent;