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

package/esbuild.mjs

@@ -1,22 +1,22 @@
-#!/usr/bin/env node
-
-import * as esbuild from 'esbuild';
-import { sassPlugin } from 'esbuild-sass-plugin';
-
-await esbuild.build({
-  entryPoints: {
-    './umd/all': './src/layout-2016/lib/all',
-    './umd/alphabox': './src/layout-2016/lib/au-alphabox',
-    './umd/databox': './src/layout-2016/lib/au-databox',
-    './umd/diagramme': './src/layout-2016/lib/au-diagramme',
-    './umd/flowbox': './src/layout-2016/lib/au-flowbox',
-  },
-  bundle: true,
-  minify: true,
-  sourcemap: true,
-  outdir: 'build',
-  plugins: [sassPlugin()],
-  loader: {
-    '.js': 'jsx',
-  },
-});
+#!/usr/bin/env node
+
+import * as esbuild from 'esbuild';
+import { sassPlugin } from 'esbuild-sass-plugin';
+
+await esbuild.build({
+  entryPoints: {
+    './umd/all': './src/layout-2016/lib/all',
+    './umd/alphabox': './src/layout-2016/lib/au-alphabox',
+    './umd/databox': './src/layout-2016/lib/au-databox',
+    './umd/diagramme': './src/layout-2016/lib/au-diagramme',
+    './umd/flowbox': './src/layout-2016/lib/au-flowbox',
+  },
+  bundle: true,
+  minify: true,
+  sourcemap: true,
+  outdir: 'build',
+  plugins: [sassPlugin()],
+  loader: {
+    '.js': 'jsx',
+  },
+});

package/package.json

@@ -1,107 +1,107 @@
-{
-  "sideEffects": true,
-  "name": "@aarhus-university/au-lib-react-components",
-  "version": "12.6.2",
-  "description": "Library for shared React components for various applications on au.dk",
-  "scripts": {
-    "test": "jest",
-    "build": "jest && webpack --config ./webpack.config.js",
-    "storybook": "storybook dev -p 6006 -h 127.0.0.1",
-    "build-storybook": "storybook build",
-    "chromatic": "npx chromatic --project-token=0be71d94786b",
-    "build-js": "./esbuild.mjs"
-  },
-  "repository": {
-    "type": "git",
-    "url": "https://gitlab.au.dk/au-web-og-digital/au-lib-react-components"
-  },
-  "author": {
-    "name": "Thomas Riis Hansen",
-    "email": "trh@au.dk"
-  },
-  "devDependencies": {
-    "@babel/core": "^7.22.5",
-    "@babel/plugin-proposal-class-properties": "^7.18.6",
-    "@babel/plugin-proposal-object-rest-spread": "^7.20.7",
-    "@babel/plugin-proposal-optional-chaining": "^7.21.0",
-    "@babel/preset-env": "^7.22.5",
-    "@babel/preset-react": "^7.22.5",
-    "@babel/preset-typescript": "^7.22.5",
-    "@chromatic-com/storybook": "^1.6.1",
-    "@storybook/addon-a11y": "^8.6.15",
-    "@storybook/addon-essentials": "^8.6.15",
-    "@storybook/addon-interactions": "^8.6.15",
-    "@storybook/addon-links": "^8.6.15",
-    "@storybook/addon-webpack5-compiler-babel": "^3.0.3",
-    "@storybook/react": "^8.6.15",
-    "@testing-library/jest-dom": "^5.16.5",
-    "@testing-library/react": "^16.3.2",
-    "@types/testing-library__jest-dom": "^5.14.6",
-    "@typescript-eslint/eslint-plugin": "^5.60.1",
-    "@typescript-eslint/parser": "^5.60.1",
-    "babel-jest": "^29.5.0",
-    "babel-loader": "^9.1.2",
-    "chromatic": "^6.19.9",
-    "css-loader": "^6.8.1",
-    "eslint": "^8.44.0",
-    "eslint-config-airbnb": "^19.0.4",
-    "eslint-import-resolver-typescript": "^3.5.5",
-    "eslint-plugin-import": "^2.27.5",
-    "eslint-plugin-jsx-a11y": "^6.7.1",
-    "eslint-plugin-react": "^7.32.2",
-    "eslint-plugin-react-hooks": "^4.6.0",
-    "eslint-plugin-storybook": "^0.8.0",
-    "eslint-webpack-plugin": "^4.0.1",
-    "fork-ts-checker-webpack-plugin": "^8.0.0",
-    "jest": "^29.5.0",
-    "jest-environment-jsdom": "^30.2.0",
-    "mini-css-extract-plugin": "^2.7.6",
-    "react-dom": "18.3.1",
-    "sass": "^1.63.6",
-    "sass-loader": "^13.3.2",
-    "storybook": "^8.2.1",
-    "ts-jest": "^29.1.1",
-    "typescript": "^5.1.6",
-    "webpack-cli": "^6.0.1",
-    "wicg-inert": "^3.1.2"
-  },
-  "dependencies": {
-    "@aarhus-university/au-designsystem-delphinus": "^1.12.2",
-    "@aarhus-university/types": "^1.1.0",
-    "@reduxjs/toolkit": "^1.9.5",
-    "@storybook/react-webpack5": "^8.6.15",
-    "@tinymce/tinymce-react": "^5.1.1",
-    "@types/react": "^18.3.27",
-    "@types/react-dom": "^18.3.7",
-    "@types/react-router-dom": "^5.3.3",
-    "dayjs": "^1.11.9",
-    "esbuild": "^0.19.4",
-    "esbuild-sass-plugin": "^2.10.0",
-    "lodash.debounce": "^4.0.8",
-    "prop-types": "^15.8.1",
-    "query-string": "^8.1.0",
-    "react": "^18.3.1",
-    "react-autosuggest": "^10.1.0",
-    "react-router-dom": "^6.14.1",
-    "regenerator-runtime": "^0.13.11",
-    "webpack": "^5.88.1",
-    "whatwg-fetch": "^3.6.2"
-  },
-  "jest": {
-    "rootDir": "__tests__/jest",
-    "setupFilesAfterEnv": [
-      "./setupTests.ts"
-    ],
-    "transform": {
-      "^.+\\.(ts|tsx|js|jsx)$": "ts-jest"
-    },
-    "testEnvironment": "jsdom",
-    "transformIgnorePatterns": [
-      "node_modules/(?!(@aarhus-university/au-lib-react-components|@aarhus-university/au-designsystem-delphinus|node-fetch|data-uri-to-buffer|fetch-blob|formdata-polyfill)/)"
-    ],
-    "testPathIgnorePatterns": [
-      "factory.ts",
-      "setupTests.ts"
-    ]
-  }
-}
+{
+  "sideEffects": true,
+  "name": "@aarhus-university/au-lib-react-components",
+  "version": "12.6.3",
+  "description": "Library for shared React components for various applications on au.dk",
+  "scripts": {
+    "test": "jest",
+    "build": "jest && webpack --config ./webpack.config.js",
+    "storybook": "storybook dev -p 6006 -h 127.0.0.1",
+    "build-storybook": "storybook build",
+    "chromatic": "npx chromatic --project-token=0be71d94786b",
+    "build-js": "./esbuild.mjs"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://gitlab.au.dk/au-web-og-digital/au-lib-react-components"
+  },
+  "author": {
+    "name": "Thomas Riis Hansen",
+    "email": "trh@au.dk"
+  },
+  "devDependencies": {
+    "@babel/core": "^7.22.5",
+    "@babel/plugin-proposal-class-properties": "^7.18.6",
+    "@babel/plugin-proposal-object-rest-spread": "^7.20.7",
+    "@babel/plugin-proposal-optional-chaining": "^7.21.0",
+    "@babel/preset-env": "^7.22.5",
+    "@babel/preset-react": "^7.22.5",
+    "@babel/preset-typescript": "^7.22.5",
+    "@chromatic-com/storybook": "^1.6.1",
+    "@storybook/addon-a11y": "^8.6.15",
+    "@storybook/addon-essentials": "^8.6.15",
+    "@storybook/addon-interactions": "^8.6.15",
+    "@storybook/addon-links": "^8.6.15",
+    "@storybook/addon-webpack5-compiler-babel": "^3.0.3",
+    "@storybook/react": "^8.6.15",
+    "@testing-library/jest-dom": "^5.16.5",
+    "@testing-library/react": "^16.3.2",
+    "@types/testing-library__jest-dom": "^5.14.6",
+    "@typescript-eslint/eslint-plugin": "^5.60.1",
+    "@typescript-eslint/parser": "^5.60.1",
+    "babel-jest": "^29.5.0",
+    "babel-loader": "^9.1.2",
+    "chromatic": "^6.19.9",
+    "css-loader": "^6.8.1",
+    "eslint": "^8.44.0",
+    "eslint-config-airbnb": "^19.0.4",
+    "eslint-import-resolver-typescript": "^3.5.5",
+    "eslint-plugin-import": "^2.27.5",
+    "eslint-plugin-jsx-a11y": "^6.7.1",
+    "eslint-plugin-react": "^7.32.2",
+    "eslint-plugin-react-hooks": "^4.6.0",
+    "eslint-plugin-storybook": "^0.8.0",
+    "eslint-webpack-plugin": "^4.0.1",
+    "fork-ts-checker-webpack-plugin": "^8.0.0",
+    "jest": "^29.5.0",
+    "jest-environment-jsdom": "^30.2.0",
+    "mini-css-extract-plugin": "^2.7.6",
+    "react-dom": "18.3.1",
+    "sass": "^1.63.6",
+    "sass-loader": "^13.3.2",
+    "storybook": "^8.2.1",
+    "ts-jest": "^29.1.1",
+    "typescript": "^5.1.6",
+    "webpack-cli": "^6.0.1",
+    "wicg-inert": "^3.1.2"
+  },
+  "dependencies": {
+    "@aarhus-university/au-designsystem-delphinus": "^1.12.2",
+    "@aarhus-university/types": "^2.1.3",
+    "@reduxjs/toolkit": "^1.9.5",
+    "@storybook/react-webpack5": "^8.6.15",
+    "@tinymce/tinymce-react": "^5.1.1",
+    "@types/react": "^18.3.27",
+    "@types/react-dom": "^18.3.7",
+    "@types/react-router-dom": "^5.3.3",
+    "dayjs": "^1.11.9",
+    "esbuild": "^0.19.4",
+    "esbuild-sass-plugin": "^2.10.0",
+    "lodash.debounce": "^4.0.8",
+    "prop-types": "^15.8.1",
+    "query-string": "^8.1.0",
+    "react": "^18.3.1",
+    "react-autosuggest": "^10.1.0",
+    "react-router-dom": "^6.14.1",
+    "regenerator-runtime": "^0.13.11",
+    "webpack": "^5.88.1",
+    "whatwg-fetch": "^3.6.2"
+  },
+  "jest": {
+    "rootDir": "__tests__/jest",
+    "setupFilesAfterEnv": [
+      "./setupTests.ts"
+    ],
+    "transform": {
+      "^.+\\.(ts|tsx|js|jsx)$": "ts-jest"
+    },
+    "testEnvironment": "jsdom",
+    "transformIgnorePatterns": [
+      "node_modules/(?!(@aarhus-university/au-lib-react-components|@aarhus-university/au-designsystem-delphinus|node-fetch|data-uri-to-buffer|fetch-blob|formdata-polyfill)/)"
+    ],
+    "testPathIgnorePatterns": [
+      "factory.ts",
+      "setupTests.ts"
+    ]
+  }
+}

package/src/components/AUAlertComponent.tsx

@@ -1,128 +1,128 @@
-/* eslint-disable max-len */
-/* eslint-disable @typescript-eslint/no-non-null-assertion */
-/* eslint-env browser */
-import React, {
-  FC, useState, useRef, useEffect,
-} from 'react';
-import { hideModal } from '@aarhus-university/au-designsystem-delphinus/source/js/components/modal-view';
-import AUButtonComponent, { Props as ButtonProps } from './AUButtonComponent';
-import AUModalComponent from './AUModalComponent';
-
-type Props = ButtonProps & {
-  modalId: string;
-  confirm: boolean;
-  processing: boolean;
-  done: boolean;
-  header: string;
-  message: string;
-  okButtonText: string;
-  cancelButtonText: string;
-  okMode: ButtonProps['mode'];
-};
-
-const AUAlertComponent: FC<Props> = ({
-  modalId,
-  confirm,
-  processing,
-  done,
-  header,
-  message,
-  okButtonText,
-  cancelButtonText,
-  label,
-  size,
-  type,
-  icon,
-  iconPosition,
-  hideLabel,
-  mode,
-  okMode,
-  classNames,
-  asSubmit,
-  onClick,
-}) => {
-  const [alert, setAlert] = useState<boolean>(false);
-  const btnRef = useRef<HTMLButtonElement>(null);
-  useEffect(() => {
-    if (done) {
-      hideModal(modalId, btnRef.current as HTMLButtonElement, () => setAlert(false));
-    }
-  }, [done]);
-
-  let okBtnMode = okMode;
-  if (processing) {
-    if (mode === 'confirmable-action') {
-      okBtnMode = 'confirmable-action processing';
-    } else if (mode === 'ireversable-action') {
-      okBtnMode = 'ireversable-action processing';
-    }
-  }
-
-  return (
-    <>
-      <AUModalComponent
-        domId={modalId}
-        show={alert}
-        sender={btnRef.current}
-        onClose={() => setAlert(false)}
-        closeButtonDisabled={processing}
-      >
-        <>
-          <h2 className="modal-view__header">{header}</h2>
-          <div className="modal-view__content">
-            <div className="content-container" dangerouslySetInnerHTML={{ __html: message }} />
-            <div className="button-container vertical-spacing-top">
-              <AUButtonComponent
-                label={okButtonText}
-                disabled={processing}
-                mode={okBtnMode}
-                onClick={(event) => {
-                  if (typeof onClick === 'function') {
-                    onClick(event, btnRef);
-                  }
-                }}
-              />
-              {
-                confirm && (
-                  <AUButtonComponent
-                    label={cancelButtonText}
-                    disabled={processing}
-                    type="text"
-                    onClick={() => {
-                      hideModal(modalId, btnRef.current as HTMLButtonElement, () => setAlert(false));
-                    }}
-                  />
-                )
-              }
-            </div>
-          </div>
-        </>
-      </AUModalComponent>
-      <AUButtonComponent
-        label={label}
-        disabled={alert}
-        size={size}
-        type={type}
-        icon={icon}
-        iconPosition={iconPosition}
-        hideLabel={hideLabel}
-        mode={mode}
-        btnRef={btnRef}
-        classNames={classNames}
-        ariaExpanded={alert}
-        ariaHasPopup
-        asSubmit={asSubmit}
-        onClick={() => {
-          setAlert(true);
-        }}
-      />
-    </>
-  );
-};
-
-AUAlertComponent.displayName = 'AUAlertComponent';
-export default AUAlertComponent;
-
-export {
-  Props,
-};
+/* eslint-disable max-len */
+/* eslint-disable @typescript-eslint/no-non-null-assertion */
+/* eslint-env browser */
+import React, {
+  FC, useState, useRef, useEffect,
+} from 'react';
+import { hideModal } from '@aarhus-university/au-designsystem-delphinus/source/js/components/modal-view';
+import AUButtonComponent, { Props as ButtonProps } from './AUButtonComponent';
+import AUModalComponent from './AUModalComponent';
+
+type Props = ButtonProps & {
+  modalId: string;
+  confirm: boolean;
+  processing: boolean;
+  done: boolean;
+  header: string;
+  message: string;
+  okButtonText: string;
+  cancelButtonText: string;
+  okMode: ButtonProps['mode'];
+};
+
+const AUAlertComponent: FC<Props> = ({
+  modalId,
+  confirm,
+  processing,
+  done,
+  header,
+  message,
+  okButtonText,
+  cancelButtonText,
+  label,
+  size,
+  type,
+  icon,
+  iconPosition,
+  hideLabel,
+  mode,
+  okMode,
+  classNames,
+  asSubmit,
+  onClick,
+}) => {
+  const [alert, setAlert] = useState<boolean>(false);
+  const btnRef = useRef<HTMLButtonElement>(null);
+  useEffect(() => {
+    if (done) {
+      hideModal(modalId, btnRef.current as HTMLButtonElement, () => setAlert(false));
+    }
+  }, [done]);
+
+  let okBtnMode = okMode;
+  if (processing) {
+    if (mode === 'confirmable-action') {
+      okBtnMode = 'confirmable-action processing';
+    } else if (mode === 'ireversable-action') {
+      okBtnMode = 'ireversable-action processing';
+    }
+  }
+
+  return (
+    <>
+      <AUModalComponent
+        domId={modalId}
+        show={alert}
+        sender={btnRef.current}
+        onClose={() => setAlert(false)}
+        closeButtonDisabled={processing}
+      >
+        <>
+          <h2 className="modal-view__header">{header}</h2>
+          <div className="modal-view__content">
+            <div className="content-container" dangerouslySetInnerHTML={{ __html: message }} />
+            <div className="button-container vertical-spacing-top">
+              <AUButtonComponent
+                label={okButtonText}
+                disabled={processing}
+                mode={okBtnMode}
+                onClick={(event) => {
+                  if (typeof onClick === 'function') {
+                    onClick(event, btnRef);
+                  }
+                }}
+              />
+              {
+                confirm && (
+                  <AUButtonComponent
+                    label={cancelButtonText}
+                    disabled={processing}
+                    type="text"
+                    onClick={() => {
+                      hideModal(modalId, btnRef.current as HTMLButtonElement, () => setAlert(false));
+                    }}
+                  />
+                )
+              }
+            </div>
+          </div>
+        </>
+      </AUModalComponent>
+      <AUButtonComponent
+        label={label}
+        disabled={alert}
+        size={size}
+        type={type}
+        icon={icon}
+        iconPosition={iconPosition}
+        hideLabel={hideLabel}
+        mode={mode}
+        btnRef={btnRef}
+        classNames={classNames}
+        ariaExpanded={alert}
+        ariaHasPopup
+        asSubmit={asSubmit}
+        onClick={() => {
+          setAlert(true);
+        }}
+      />
+    </>
+  );
+};
+
+AUAlertComponent.displayName = 'AUAlertComponent';
+export default AUAlertComponent;
+
+export {
+  Props,
+};