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

package/src/components/AUAutoSuggestComponent.js

@@ -1,148 +1,148 @@
-/* eslint-disable @typescript-eslint/no-empty-function */
-import React from 'react';
-import PropTypes from 'prop-types';
-import Autosuggest from 'react-autosuggest';
-import debounce from 'lodash.debounce';
-
-class AUAutoSuggestComponent extends React.Component {
-  constructor(props) {
-    super(props);
-    this.state = {
-      value: '',
-      suggestions: [],
-      noSuggestions: false,
-    };
-
-    this.onChange = this.onChange.bind(this);
-    this.onSuggestionsFetchRequested = debounce(this.onSuggestionsFetchRequested.bind(this), 400);
-    this.onSuggestionsClearRequested = this.onSuggestionsClearRequested.bind(this);
-    this.onSuggestionSelected = this.onSuggestionSelected.bind(this);
-  }
-
-  onChange(_, { newValue }) {
-    const { setQuery } = this.props;
-    this.setState({
-      value: newValue,
-    }, () => {
-      setQuery(newValue);
-    });
-  }
-
-  onSuggestionsFetchRequested({ value }) {
-    const { getSuggestions, collection } = this.props;
-    getSuggestions(value, collection, (suggestions) => {
-      this.setState({
-        suggestions,
-        noSuggestions: suggestions.length === 0 && value.trim() !== '' && value.trim().length > 1,
-      });
-    });
-  }
-
-  onSuggestionsClearRequested() {
-    this.setState({
-      suggestions: [],
-    });
-  }
-
-  onSuggestionSelected(event, { suggestion }) {
-    const { setResults, clearInput } = this.props;
-    setResults([suggestion]);
-    if (clearInput) {
-      this.setState({
-        value: '',
-      });
-    }
-  }
-
-  render() {
-    const { value, suggestions, noSuggestions } = this.state;
-    const {
-      placeholder,
-      getSuggestionValue,
-      renderSuggestion,
-      id,
-      theme,
-      type,
-      initialValue,
-      disabled,
-      noResultsText,
-    } = this.props;
-    const inputProps = {
-      placeholder,
-      value: initialValue || value,
-      id,
-      type,
-      disabled,
-      'aria-label': placeholder,
-      onChange: this.onChange,
-    };
-
-    return (
-      <>
-        <Autosuggest
-          suggestions={suggestions}
-          onSuggestionsFetchRequested={this.onSuggestionsFetchRequested}
-          onSuggestionsClearRequested={this.onSuggestionsClearRequested}
-          onSuggestionSelected={this.onSuggestionSelected}
-          getSuggestionValue={getSuggestionValue}
-          renderSuggestion={renderSuggestion}
-          inputProps={inputProps}
-          theme={theme}
-        />
-        {
-          (noSuggestions && noResultsText) && (
-            <p className="no-results">
-              <em>{noResultsText}</em>
-            </p>
-          )
-        }
-      </>
-    );
-  }
-}
-
-AUAutoSuggestComponent.displayName = 'AUAutoSuggestComponent';
-
-AUAutoSuggestComponent.defaultProps = {
-  id: 'autosuggest1',
-  theme: {
-    container: 'autosuggest',
-    containerOpen: 'autosuggest--open',
-    input: 'autosuggest__input',
-    inputOpen: 'autosuggest__input--open',
-    inputFocused: 'autosuggest__input--focused',
-    suggestionsContainer: 'autosuggest__suggestions',
-    suggestionsContainerOpen: 'autosuggest__suggestions--open',
-    suggestionsList: 'autosuggest__suggestions__list',
-    suggestion: 'autosuggest__suggestions__list__item',
-    suggestionFirst: 'autosuggest__suggestions__list--first',
-    suggestionHighlighted: 'autosuggest__suggestions__list--highlighted',
-    sectionContainer: 'autosuggest__section',
-    sectionContainerFirst: 'autosuggest__section--first',
-    sectionTitle: 'autosuggest__section__title',
-  },
-  clearInput: false,
-  type: 'text',
-  initialValue: '',
-  disabled: false,
-  setQuery: () => { },
-  noResultsText: '',
-};
-
-AUAutoSuggestComponent.propTypes = {
-  setQuery: PropTypes.func,
-  getSuggestions: PropTypes.func.isRequired,
-  getSuggestionValue: PropTypes.func.isRequired,
-  renderSuggestion: PropTypes.func.isRequired,
-  setResults: PropTypes.func.isRequired,
-  collection: PropTypes.arrayOf(PropTypes.shape({})).isRequired,
-  placeholder: PropTypes.string.isRequired,
-  id: PropTypes.string,
-  theme: PropTypes.shape({}),
-  clearInput: PropTypes.bool,
-  type: PropTypes.string,
-  initialValue: PropTypes.string,
-  disabled: PropTypes.bool,
-  noResultsText: PropTypes.string,
-};
-export default AUAutoSuggestComponent;
+/* eslint-disable @typescript-eslint/no-empty-function */
+import React from 'react';
+import PropTypes from 'prop-types';
+import Autosuggest from 'react-autosuggest';
+import debounce from 'lodash.debounce';
+
+class AUAutoSuggestComponent extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      value: '',
+      suggestions: [],
+      noSuggestions: false,
+    };
+
+    this.onChange = this.onChange.bind(this);
+    this.onSuggestionsFetchRequested = debounce(this.onSuggestionsFetchRequested.bind(this), 400);
+    this.onSuggestionsClearRequested = this.onSuggestionsClearRequested.bind(this);
+    this.onSuggestionSelected = this.onSuggestionSelected.bind(this);
+  }
+
+  onChange(_, { newValue }) {
+    const { setQuery } = this.props;
+    this.setState({
+      value: newValue,
+    }, () => {
+      setQuery(newValue);
+    });
+  }
+
+  onSuggestionsFetchRequested({ value }) {
+    const { getSuggestions, collection } = this.props;
+    getSuggestions(value, collection, (suggestions) => {
+      this.setState({
+        suggestions,
+        noSuggestions: suggestions.length === 0 && value.trim() !== '' && value.trim().length > 1,
+      });
+    });
+  }
+
+  onSuggestionsClearRequested() {
+    this.setState({
+      suggestions: [],
+    });
+  }
+
+  onSuggestionSelected(event, { suggestion }) {
+    const { setResults, clearInput } = this.props;
+    setResults([suggestion]);
+    if (clearInput) {
+      this.setState({
+        value: '',
+      });
+    }
+  }
+
+  render() {
+    const { value, suggestions, noSuggestions } = this.state;
+    const {
+      placeholder,
+      getSuggestionValue,
+      renderSuggestion,
+      id,
+      theme,
+      type,
+      initialValue,
+      disabled,
+      noResultsText,
+    } = this.props;
+    const inputProps = {
+      placeholder,
+      value: initialValue || value,
+      id,
+      type,
+      disabled,
+      'aria-label': placeholder,
+      onChange: this.onChange,
+    };
+
+    return (
+      <>
+        <Autosuggest
+          suggestions={suggestions}
+          onSuggestionsFetchRequested={this.onSuggestionsFetchRequested}
+          onSuggestionsClearRequested={this.onSuggestionsClearRequested}
+          onSuggestionSelected={this.onSuggestionSelected}
+          getSuggestionValue={getSuggestionValue}
+          renderSuggestion={renderSuggestion}
+          inputProps={inputProps}
+          theme={theme}
+        />
+        {
+          (noSuggestions && noResultsText) && (
+            <p className="no-results">
+              <em>{noResultsText}</em>
+            </p>
+          )
+        }
+      </>
+    );
+  }
+}
+
+AUAutoSuggestComponent.displayName = 'AUAutoSuggestComponent';
+
+AUAutoSuggestComponent.defaultProps = {
+  id: 'autosuggest1',
+  theme: {
+    container: 'autosuggest',
+    containerOpen: 'autosuggest--open',
+    input: 'autosuggest__input',
+    inputOpen: 'autosuggest__input--open',
+    inputFocused: 'autosuggest__input--focused',
+    suggestionsContainer: 'autosuggest__suggestions',
+    suggestionsContainerOpen: 'autosuggest__suggestions--open',
+    suggestionsList: 'autosuggest__suggestions__list',
+    suggestion: 'autosuggest__suggestions__list__item',
+    suggestionFirst: 'autosuggest__suggestions__list--first',
+    suggestionHighlighted: 'autosuggest__suggestions__list--highlighted',
+    sectionContainer: 'autosuggest__section',
+    sectionContainerFirst: 'autosuggest__section--first',
+    sectionTitle: 'autosuggest__section__title',
+  },
+  clearInput: false,
+  type: 'text',
+  initialValue: '',
+  disabled: false,
+  setQuery: () => { },
+  noResultsText: '',
+};
+
+AUAutoSuggestComponent.propTypes = {
+  setQuery: PropTypes.func,
+  getSuggestions: PropTypes.func.isRequired,
+  getSuggestionValue: PropTypes.func.isRequired,
+  renderSuggestion: PropTypes.func.isRequired,
+  setResults: PropTypes.func.isRequired,
+  collection: PropTypes.arrayOf(PropTypes.shape({})).isRequired,
+  placeholder: PropTypes.string.isRequired,
+  id: PropTypes.string,
+  theme: PropTypes.shape({}),
+  clearInput: PropTypes.bool,
+  type: PropTypes.string,
+  initialValue: PropTypes.string,
+  disabled: PropTypes.bool,
+  noResultsText: PropTypes.string,
+};
+export default AUAutoSuggestComponent;

package/src/components/AUButtonComponent.tsx

@@ -1,99 +1,99 @@
-import React, {
-  FC, MouseEvent, RefObject,
-} from 'react';
-
-type Props = {
-  label: string;
-  disabled?: boolean;
-  size?: 'small' | 'default' | 'large';
-  type?: 'default' | 'text' | 'dimmed';
-  icon?: '' | 'add' | 'attachment' | 'award' | 'bike' | 'bookmark' | 'brand-linkedin' | 'brand-mendeley' | 'brand-orcid' | 'brand-researchgate' | 'brand-twitter' | 'calendar' | 'camera' | 'car' | 'class' | 'close' | 'collapse' | 'confirm' | 'confirm-circle' | 'context-menu' | 'copy' | 'current-semester' | 'dark-mode' | 'delphinus' | 'delete' | 'design' | 'download' | 'edit' | 'email' | 'exam' | 'expand' | 'failed' | 'failed-circle' | 'file' | 'filter' | 'finish' | 'heart' | 'hide' | 'infinity' | 'info' | 'info-circle' | 'instructor' | 'instructor-with-class' | 'language' | 'location' | 'link-chain' | 'link-internal' | 'link-external' | 'link-external-square' | 'lms-course-common' | 'lms-course-sections' | 'lms-course-additional' | 'lms-course-merge-with' | 'lms-course-merged' | 'mailbox' | 'menu' | 'news' | 'next' | 'note' | 'notifications' | 'passed-exemption' | 'phone' | 'phone-landline' | 'previous' | 'print' | 'public-transport' | 'receipt' | 'refresh' | 'reorder' | 'replay' | 'route' | 'search' | 'season-autumn' | 'season-christmas' | 'season-easter' | 'season-halloween' | 'season-spring' | 'season-summer' | 'season-winter' | 'send' | 'settings' | 'source-system' | 'student-place-accepted' | 'student-place-not-offered' | 'student-place-offered' | 'student-place-rejected' | 'student-place-standby' | 'sign-in' | 'sign-out' | 'spock' | 'sync' | 'theme-chooser' | 'tip' | 'tools' | 'tooltip' | 'upload' | 'user-profile' | 'user-impersonation' | 'view' | 'viewport-default' | 'viewport-medium' | 'viewport-wide' | 'walking' | 'warning' | 'warning-triangle';
-  iconPosition?: 'left' | 'right';
-  hideLabel?: boolean;
-  mode?: 'none' | 'ireversable-action' | 'confirmable-action' | 'processing' | 'ireversable-action processing' | 'confirmable-action processing', // (sic)
-  btnRef?: React.RefObject<HTMLButtonElement>;
-  classNames?: string[];
-  ariaExpanded?: boolean;
-  ariaHasPopup?: boolean;
-  asSubmit?: boolean;
-  onClick?: (
-    event: React.MouseEvent<HTMLButtonElement>,
-    ref: React.RefObject<HTMLButtonElement> | undefined,
-  ) => void;
-};
-
-const AUButtonComponent: FC<Props> = ({
-  label,
-  disabled = false,
-  size = 'default',
-  type = 'default',
-  icon = '',
-  iconPosition = 'left',
-  hideLabel = false,
-  mode = 'none',
-  btnRef,
-  classNames = [],
-  ariaExpanded = false,
-  ariaHasPopup = undefined,
-  asSubmit = false,
-  onClick = (
-    // eslint-disable-next-line @typescript-eslint/no-unused-vars
-    _event: MouseEvent<HTMLButtonElement>,
-    // eslint-disable-next-line @typescript-eslint/no-unused-vars
-    _ref: RefObject<HTMLButtonElement> | undefined,
-  ) => {
-    // eslint-disable-next-line no-console
-    // console.log(event, ref);
-  },
-}) => {
-  const sizeClass = size === 'default' ? '' : `button--${size}`;
-  const typeClass = type === 'default' ? '' : `button--${type}`;
-  let iconClass = '';
-  if (icon) {
-    iconClass = `button--icon icon-${icon}`;
-    if (iconPosition) {
-      iconClass = `${iconClass} button--icon--${iconPosition}`;
-    }
-
-    if (hideLabel) {
-      iconClass = `${iconClass} button--icon--hide-label`;
-    }
-  }
-  let modeClass = '';
-  if (mode && mode !== 'none') {
-    modeClass = mode.includes(' ') ? mode.split(' ').map((m) => `button--${m}`).join(' ') : `button--${mode}`;
-  }
-
-  return (
-    <button
-      ref={btnRef}
-      type={asSubmit ? 'submit' : 'button'}
-      disabled={disabled}
-      className={[
-        'button',
-        sizeClass,
-        typeClass,
-        iconClass,
-        modeClass,
-        disabled && !mode?.includes('processing') ? 'visually-disabled' : '',
-      ].concat(classNames || []).join(' ').replace(/\s+/g, ' ').trim()}
-      title={icon && hideLabel ? label : undefined}
-      aria-expanded={ariaExpanded}
-      aria-haspopup={ariaHasPopup}
-      onClick={(event: MouseEvent<HTMLButtonElement>) => {
-        if (typeof onClick !== 'undefined') {
-          onClick(event, btnRef);
-        }
-      }}
-    >
-      {label}
-    </button>
-  );
-};
-
-AUButtonComponent.displayName = 'AUButtonComponent';
-export default AUButtonComponent;
-
-export {
-  Props,
-};
+import React, {
+  FC, MouseEvent, RefObject,
+} from 'react';
+
+type Props = {
+  label: string;
+  disabled?: boolean;
+  size?: 'small' | 'default' | 'large';
+  type?: 'default' | 'text' | 'dimmed';
+  icon?: '' | 'add' | 'attachment' | 'award' | 'bike' | 'bookmark' | 'brand-linkedin' | 'brand-mendeley' | 'brand-orcid' | 'brand-researchgate' | 'brand-twitter' | 'calendar' | 'camera' | 'car' | 'class' | 'close' | 'collapse' | 'confirm' | 'confirm-circle' | 'context-menu' | 'copy' | 'current-semester' | 'dark-mode' | 'delphinus' | 'delete' | 'design' | 'download' | 'edit' | 'email' | 'exam' | 'expand' | 'failed' | 'failed-circle' | 'file' | 'filter' | 'finish' | 'heart' | 'hide' | 'infinity' | 'info' | 'info-circle' | 'instructor' | 'instructor-with-class' | 'language' | 'location' | 'link-chain' | 'link-internal' | 'link-external' | 'link-external-square' | 'lms-course-common' | 'lms-course-sections' | 'lms-course-additional' | 'lms-course-merge-with' | 'lms-course-merged' | 'mailbox' | 'menu' | 'news' | 'next' | 'note' | 'notifications' | 'passed-exemption' | 'phone' | 'phone-landline' | 'previous' | 'print' | 'public-transport' | 'receipt' | 'refresh' | 'reorder' | 'replay' | 'route' | 'search' | 'season-autumn' | 'season-christmas' | 'season-easter' | 'season-halloween' | 'season-spring' | 'season-summer' | 'season-winter' | 'send' | 'settings' | 'source-system' | 'student-place-accepted' | 'student-place-not-offered' | 'student-place-offered' | 'student-place-rejected' | 'student-place-standby' | 'sign-in' | 'sign-out' | 'spock' | 'sync' | 'theme-chooser' | 'tip' | 'tools' | 'tooltip' | 'upload' | 'user-profile' | 'user-impersonation' | 'view' | 'viewport-default' | 'viewport-medium' | 'viewport-wide' | 'walking' | 'warning' | 'warning-triangle';
+  iconPosition?: 'left' | 'right';
+  hideLabel?: boolean;
+  mode?: 'none' | 'ireversable-action' | 'confirmable-action' | 'processing' | 'ireversable-action processing' | 'confirmable-action processing', // (sic)
+  btnRef?: React.RefObject<HTMLButtonElement>;
+  classNames?: string[];
+  ariaExpanded?: boolean;
+  ariaHasPopup?: boolean;
+  asSubmit?: boolean;
+  onClick?: (
+    event: React.MouseEvent<HTMLButtonElement>,
+    ref: React.RefObject<HTMLButtonElement> | undefined,
+  ) => void;
+};
+
+const AUButtonComponent: FC<Props> = ({
+  label,
+  disabled = false,
+  size = 'default',
+  type = 'default',
+  icon = '',
+  iconPosition = 'left',
+  hideLabel = false,
+  mode = 'none',
+  btnRef,
+  classNames = [],
+  ariaExpanded = false,
+  ariaHasPopup = undefined,
+  asSubmit = false,
+  onClick = (
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    _event: MouseEvent<HTMLButtonElement>,
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    _ref: RefObject<HTMLButtonElement> | undefined,
+  ) => {
+    // eslint-disable-next-line no-console
+    // console.log(event, ref);
+  },
+}) => {
+  const sizeClass = size === 'default' ? '' : `button--${size}`;
+  const typeClass = type === 'default' ? '' : `button--${type}`;
+  let iconClass = '';
+  if (icon) {
+    iconClass = `button--icon icon-${icon}`;
+    if (iconPosition) {
+      iconClass = `${iconClass} button--icon--${iconPosition}`;
+    }
+
+    if (hideLabel) {
+      iconClass = `${iconClass} button--icon--hide-label`;
+    }
+  }
+  let modeClass = '';
+  if (mode && mode !== 'none') {
+    modeClass = mode.includes(' ') ? mode.split(' ').map((m) => `button--${m}`).join(' ') : `button--${mode}`;
+  }
+
+  return (
+    <button
+      ref={btnRef}
+      type={asSubmit ? 'submit' : 'button'}
+      disabled={disabled}
+      className={[
+        'button',
+        sizeClass,
+        typeClass,
+        iconClass,
+        modeClass,
+        disabled && !mode?.includes('processing') ? 'visually-disabled' : '',
+      ].concat(classNames || []).join(' ').replace(/\s+/g, ' ').trim()}
+      title={icon && hideLabel ? label : undefined}
+      aria-expanded={ariaExpanded}
+      aria-haspopup={ariaHasPopup}
+      onClick={(event: MouseEvent<HTMLButtonElement>) => {
+        if (typeof onClick !== 'undefined') {
+          onClick(event, btnRef);
+        }
+      }}
+    >
+      {label}
+    </button>
+  );
+};
+
+AUButtonComponent.displayName = 'AUButtonComponent';
+export default AUButtonComponent;
+
+export {
+  Props,
+};