typescript-overlay-essentials 1.2.0 → 1.3.3

package/dist/MultipleChoiceOverlay.js

@@ -0,0 +1,94 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useEffect, useState } from 'react';
+import './MultipleChoiceOverlay.css';
+// Der standard MultipleChoiceOverlay Status, der zur Initialisierung genutzt werden kann
+export const defaultMultipleChoiceState = {
+    headline: undefined,
+    message: undefined,
+    choices: [],
+    preInput: undefined,
+    cancelButtonText: undefined,
+    proceedButtonText: undefined,
+    handlerOk: undefined,
+    handlerCancel: undefined,
+    handlerArgs: undefined,
+    addCloseButton: false,
+    proceedButtonStyle: undefined,
+    cancelButtonStyle: undefined,
+};
+// Wobei alle Attribute grundsätzlich optional sind:
+// - headline: ist die Überschrift und wird fett hinterlegt
+// - message: ist die angezeigte Nachricht
+// - choices: Ein String-Array mit den Optionen die ausgewählt werden können (ohne Angabe gibt es keine Auswahl)
+// - preInput: Ein String-Array: Die Einträge sind stadardmäßig ausgewählt alle anderen nicht ausgewählt
+// - cancelButtonText: ist der Text der auf dem Cancel Button stehen soll (ohne Angabe wird "Abbrechen" verwendet)
+// - proceedButtonText: ist der Text der auf dem Proceed Button stehen soll (ohne Angabe wird "OK" verwendet)
+// - handlerOk: ist die Funktion die bei Bestätigung des Inputs ausgeführt wird (Struktur: handlerOk(userInput, handlerArgs)
+// - handlerCancel: ist die Funktion die bei Ablehnung des Inputs ausgeführt wird (Struktur: handlerCancel(handlerArgs)
+// - handlerArgs: kann im handler als Argumente genutzt werden
+// - addCloseButton: boolscher Wert, der angibt, ob ein x oben rechts als close-Button verfügbar sein soll (bricht die Aktion ohne handler ab, standardmäßig false)
+// - proceedButtonStyle: ist der Style des Bestätigungsbuttons (Standardmäßig unverändert)
+// - cancelButtonStyle: ist der Style des Abbrechenbuttons (Standardmäßig unverändert)
+// Output: Der Input vom User wird am Ende an den handlerOk übergeben (oder bei handlerCancel ignoriert)!
+// Somit wird der handler so aufgerufen: handlerOk(UserInput, handlerArgs) oder handlerCancel(handlerArgs)
+export function MultipleChoiceOverlay({ state, setState }) {
+    // Wird verwendet um das Infoverlay ein- und auszublenden
+    const [showOverlay, setShowOverlay] = useState(false);
+    // Wird verwendet um die ausgewählten Choices aktuell zu halten
+    const [input, setInput] = useState([]);
+    // Sobald der State von außen aktualisiert wird triggert diese Funktion
+    // Die setzt showOverlay auf true
+    useEffect(() => {
+        if ((state === null || state === void 0 ? void 0 : state.message) != null || (state === null || state === void 0 ? void 0 : state.headline) != null) {
+            setInput((state === null || state === void 0 ? void 0 : state.preInput) != null ? state.preInput : []);
+            setShowOverlay(true);
+            setTimeout(() => { var _a; (_a = document.getElementById("confirmButton")) === null || _a === void 0 ? void 0 : _a.focus(); }, 1);
+        }
+    }, [state]);
+    // Toggled die Auswahl eines Choices
+    // Setzt dafür den aktuellen Input auf den neuen Input + Choice
+    const toggle = (choice) => {
+        if (input.includes(choice)) {
+            setInput(input.filter(item => item !== choice)); // Entfernt den Choice wenn er schon ausgewählt ist
+        }
+        else {
+            setInput([...input, choice]); // Fügt den Choice hinzu wenn er noch nicht ausgewählt ist
+        }
+    };
+    const handleAction = (handler, useInput) => {
+        setShowOverlay(false);
+        var tempState = {
+            handler: handler,
+            handlerArgs: state.handlerArgs
+        };
+        setState(defaultMultipleChoiceState);
+        if (typeof tempState.handler === 'function' && useInput)
+            tempState.handler(input, tempState.handlerArgs);
+        else if (typeof tempState.handler === 'function')
+            tempState.handler(tempState.handlerArgs);
+    };
+    return showOverlay ?
+        _jsx("div", { className: "multiplechoice-overlay", children: _jsxs("div", { className: "multiplechoice-box", children: [state.addCloseButton ?
+                        _jsx("span", { className: "closeButton", children: _jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", tabIndex: 0, className: "close-icon", onClick: () => handleAction(undefined, false), onKeyDown: (e) => {
+                                    if (e.key === 'Enter' || e.key === ' ') {
+                                        e.preventDefault(); // Verhindert Scroll bei Space
+                                        handleAction(undefined, false);
+                                    }
+                                }, role: "button", "aria-label": "Dialog schlie\u00DFen", width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [_jsx("line", { x1: "18", y1: "6", x2: "6", y2: "18" }), _jsx("line", { x1: "6", y1: "6", x2: "18", y2: "18" })] }) }) :
+                        _jsx(_Fragment, {}), _jsx("p", { className: "headline", id: "theHeadline", tabIndex: 0, style: { whiteSpace: "pre-line", wordBreak: "break-word" }, children: _jsx("strong", { children: (state === null || state === void 0 ? void 0 : state.headline) != null ? state.headline : "" }) }), _jsx("p", { tabIndex: 0, style: { whiteSpace: "pre-line", wordBreak: "break-word" }, children: (state === null || state === void 0 ? void 0 : state.message) != null ? state.message : "" }), _jsx("div", { className: "choices-input", children: _jsx("div", { className: "choices-container", children: state === null || state === void 0 ? void 0 : state.choices.map(choice => (_jsxs("label", { className: "choice-label", children: [_jsx("input", { type: "checkbox", checked: input.includes(choice), onChange: () => toggle(choice), tabIndex: 0, onKeyDown: (e) => {
+                                            if (e.key === 'Enter' || e.key === ' ') {
+                                                e.preventDefault(); // Verhindert Scroll bei Space
+                                                toggle(choice);
+                                            }
+                                        } }), choice] }, choice))) }) }), _jsxs("div", { className: "information-buttons", children: [_jsx("button", { onClick: () => handleAction(state.handlerCancel, false), onKeyDown: (event) => {
+                                    if (event.key === "Enter" || event.key === ' ') {
+                                        event.preventDefault(); // Verhindert Scroll bei Space
+                                        handleAction(state.handlerCancel, false);
+                                    }
+                                }, className: "px-4 py-2 bg-gray-300 rounded", style: (state === null || state === void 0 ? void 0 : state.cancelButtonStyle) != null ? state.cancelButtonStyle : {}, children: (state === null || state === void 0 ? void 0 : state.cancelButtonText) != null ? state.cancelButtonText : "Abbrechen" }), _jsx("button", { onClick: () => handleAction(state.handlerOk, true), id: "confirmButton", onKeyDown: (event) => {
+                                    if (event.key === "Enter" || event.key === ' ') {
+                                        event.preventDefault(); // Verhindert Scroll bei Space
+                                        handleAction(state.handlerOk, true);
+                                    }
+                                }, className: "px-4 py-2 bg-blue-600 text-white rounded", style: (state === null || state === void 0 ? void 0 : state.proceedButtonStyle) != null ? state.proceedButtonStyle : {}, children: (state === null || state === void 0 ? void 0 : state.proceedButtonText) != null ? state.proceedButtonText : "OK" })] })] }) }) : _jsx(_Fragment, {});
+}

package/dist/MultipleRadioOverlay.d.ts

@@ -0,0 +1,22 @@
+import { CSSProperties } from 'react';
+import * as React from 'react';
+import './MultipleRadioOverlay.css';
+export interface MultipleRadioOverlayState {
+    headline?: string | undefined;
+    message?: string | undefined;
+    choices: string[] | [];
+    preInput?: string | undefined;
+    cancelButtonText?: string | undefined;
+    proceedButtonText?: string | undefined;
+    handlerOk?: ((userInput: string, args?: unknown) => void) | undefined;
+    handlerCancel?: ((args?: unknown) => void) | undefined;
+    handlerArgs?: unknown;
+    addCloseButton?: boolean | undefined;
+    proceedButtonStyle?: CSSProperties | undefined;
+    cancelButtonStyle?: CSSProperties | undefined;
+}
+export declare const defaultMultipleRadioState: MultipleRadioOverlayState;
+export declare function MultipleRadioOverlay({ state, setState }: {
+    state: MultipleRadioOverlayState;
+    setState: (state: MultipleRadioOverlayState) => void;
+}): React.ReactElement;

package/dist/MultipleRadioOverlay.js

@@ -0,0 +1,84 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useEffect, useState } from 'react';
+import './MultipleRadioOverlay.css';
+// Um das MultipleRadioOverlay zu nutzen, muss der State die folgende Struktur haben:
+export const defaultMultipleRadioState = {
+    headline: undefined,
+    message: undefined,
+    choices: [],
+    preInput: undefined,
+    cancelButtonText: undefined,
+    proceedButtonText: undefined,
+    handlerOk: undefined,
+    handlerCancel: undefined,
+    handlerArgs: undefined,
+    addCloseButton: false,
+    proceedButtonStyle: undefined,
+    cancelButtonStyle: undefined,
+};
+// Wobei alle Attribute grundsätzlich optional sind:
+// - headline: ist die Überschrift und wird fett hinterlegt
+// - message: ist die angezeigte Nachricht
+// - choices: Ein String-Array mit den Optionen die ausgewählt werden können (ohne Angabe gibt es keine Auswahl)
+// - preInput: Ein String: Dieser Eintrag ist stadardmäßig ausgewählt
+// - cancelButtonText: ist der Text der auf dem Cancel Button stehen soll (ohne Angabe wird "Abbrechen" verwendet)
+// - proceedButtonText: ist der Text der auf dem Proceed Button stehen soll (ohne Angabe wird "OK" verwendet)
+// - handlerOk: ist die Funktion die bei Bestätigung des Inputs ausgeführt wird (Struktur: handlerOk(userInput, handlerArgs)
+// - handlerCancel: ist die Funktion die bei Ablehnung des Inputs ausgeführt wird (Struktur: handlerCancel(handlerArgs)
+// - handlerArgs: kann im handler als Argumente genutzt werden
+// - addCloseButton: boolscher Wert, der angibt, ob ein x oben rechts als close-Button verfügbar sein soll (bricht die Aktion ohne handler ab, standardmäßig false)
+// - proceedButtonStyle: ist der Style des Bestätigungsbuttons (Standardmäßig unverändert)
+// - cancelButtonStyle: ist der Style des Abbrechenbuttons (Standardmäßig unverändert)
+// Output: Der Input vom User wird am Ende an den handlerOk übergeben (oder bei handlerCancel ignoriert)!
+// Somit wird der handler so aufgerufen: handlerOk(UserInput, handlerArgs) oder handlerCancel(handlerArgs)
+export function MultipleRadioOverlay({ state, setState }) {
+    // Wird verwendet um das Infoverlay ein- und auszublenden
+    const [showOverlay, setShowOverlay] = useState(false);
+    // Wird verwendet um die ausgewählte Wahl aktuell zu halten
+    const [input, setInput] = useState("");
+    // Sobald der State von außen aktualisiert wird triggert diese Funktion
+    // Die setzt showOverlay auf true
+    useEffect(() => {
+        if ((state === null || state === void 0 ? void 0 : state.message) != null || (state === null || state === void 0 ? void 0 : state.headline) != null) {
+            setInput((state === null || state === void 0 ? void 0 : state.preInput) != null ? state.preInput : "");
+            setShowOverlay(true);
+            setTimeout(() => { var _a; (_a = document.getElementById("confirmButton")) === null || _a === void 0 ? void 0 : _a.focus(); }, 1);
+        }
+    }, [state]);
+    const handleAction = (handler, useInput) => {
+        setShowOverlay(false);
+        var tempState = {
+            handler: handler,
+            handlerArgs: state.handlerArgs
+        };
+        setState(defaultMultipleRadioState);
+        if (typeof tempState.handler === 'function' && useInput)
+            tempState.handler(input, tempState.handlerArgs);
+        else if (typeof tempState.handler === 'function')
+            tempState.handler(tempState.handlerArgs);
+    };
+    return showOverlay ?
+        _jsx("div", { className: "multipleradio-overlay", children: _jsxs("div", { className: "multipleradio-box", children: [state.addCloseButton ?
+                        _jsx("span", { className: "closeButton", children: _jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", tabIndex: 0, className: "close-icon", onClick: () => handleAction(undefined, false), onKeyDown: (e) => {
+                                    if (e.key === 'Enter' || e.key === ' ') {
+                                        e.preventDefault(); // Verhindert Scroll bei Space
+                                        handleAction(undefined, false);
+                                    }
+                                }, role: "button", "aria-label": "Dialog schlie\u00DFen", width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [_jsx("line", { x1: "18", y1: "6", x2: "6", y2: "18" }), _jsx("line", { x1: "6", y1: "6", x2: "18", y2: "18" })] }) }) :
+                        _jsx(_Fragment, {}), _jsx("p", { className: "headline", id: "theHeadline", tabIndex: 0, style: { whiteSpace: "pre-line", wordBreak: "break-word" }, children: _jsx("strong", { children: (state === null || state === void 0 ? void 0 : state.headline) != null ? state.headline : "" }) }), _jsx("p", { tabIndex: 0, style: { whiteSpace: "pre-line", wordBreak: "break-word" }, children: (state === null || state === void 0 ? void 0 : state.message) != null ? state.message : "" }), _jsx("div", { className: "radios-input", children: _jsx("div", { className: "radios-container", children: state === null || state === void 0 ? void 0 : state.choices.map(choice => (_jsxs("label", { className: "radio-label", children: [_jsx("input", { type: "radio", checked: input === choice, onChange: () => setInput(choice), tabIndex: 0, onKeyDown: (e) => {
+                                            if (e.key === 'Enter' || e.key === ' ') {
+                                                e.preventDefault(); // Verhindert Scroll bei Space
+                                                setInput(choice);
+                                            }
+                                        } }), choice] }, choice))) }) }), _jsxs("div", { className: "information-buttons", children: [_jsx("button", { onClick: () => handleAction(state.handlerCancel, false), onKeyDown: (event) => {
+                                    if (event.key === "Enter" || event.key === ' ') {
+                                        event.preventDefault(); // Verhindert Scroll bei Space
+                                        handleAction(state.handlerCancel, false);
+                                    }
+                                }, className: "px-4 py-2 bg-gray-300 rounded", style: (state === null || state === void 0 ? void 0 : state.cancelButtonStyle) != null ? state.cancelButtonStyle : {}, children: (state === null || state === void 0 ? void 0 : state.cancelButtonText) != null ? state.cancelButtonText : "Abbrechen" }), _jsx("button", { onClick: () => handleAction(state.handlerOk, true), id: "confirmButton", onKeyDown: (event) => {
+                                    if (event.key === "Enter" || event.key === ' ') {
+                                        event.preventDefault(); // Verhindert Scroll bei Space
+                                        handleAction(state.handlerOk, true);
+                                    }
+                                }, className: "px-4 py-2 bg-blue-600 text-white rounded", style: (state === null || state === void 0 ? void 0 : state.proceedButtonStyle) != null ? state.proceedButtonStyle : {}, children: (state === null || state === void 0 ? void 0 : state.proceedButtonText) != null ? state.proceedButtonText : "OK" })] })] }) }) : _jsx(_Fragment, {});
+}

package/dist/Toast.d.ts

@@ -0,0 +1,6 @@
+import { ReactElement } from 'react';
+import './Toast.css';
+export declare function Toast({ state, setState }: {
+    state: string;
+    setState: (value: string) => void;
+}): ReactElement;

package/{Toast.tsx → dist/Toast.js}

@@ -1,17 +1,15 @@
-import { useEffect, useState, ReactElement } from 'react';
-import './Toast.css'
-
+import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
+import { useEffect, useState } from 'react';
+import './Toast.css';
 // Zeigt einen kleinen Toast in der oberen rechten Ecke an, der nach 2,5 Sekunden wieder verschwindet
-export function Toast({ state, setState }: { state: string, setState: (value: string) => void }) : ReactElement {
+export function Toast({ state, setState }) {
     // Wird verwendet um die Toast-Notification ein-/auszublenden
     const [showToast, setShowToast] = useState(false);
     // Wird verwendet um den Inhalt der Toast-Notification zu bestimmen
     const [toastContent, setToastContent] = useState("");
-
     useEffect(() => {
-        setToastContent(state)
+        setToastContent(state);
     }, [state]);
-
     useEffect(() => {
         if (toastContent && toastContent !== "") {
             setShowToast(true);
@@ -21,11 +19,5 @@ export function Toast({ state, setState }: { state: string, setState: (value: st
             setShowToast(false);
         }
     }, [toastContent, setState]);
-
-    return <>
-        {showToast && (
-            <div className="toast-notification">
-                {toastContent}
-            </div>)}
-    </>
-}
+    return _jsx(_Fragment, { children: showToast && (_jsx("div", { className: "toast-notification", children: toastContent })) });
+}

package/dist/ToggleSwitch.d.ts

@@ -0,0 +1,11 @@
+import "./ToggleSwitch.css";
+export interface ToggleSwitchOption<T> {
+    value: T;
+    label: string;
+}
+export declare function ToggleSwitch<T>({ optionLeft, optionRight, value, onChange }: {
+    optionLeft: ToggleSwitchOption<T>;
+    optionRight: ToggleSwitchOption<T>;
+    value: T;
+    onChange: (value: T) => void;
+}): import("react/jsx-runtime").JSX.Element;

package/dist/ToggleSwitch.js

@@ -0,0 +1,27 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useRef, useEffect, useState } from "react";
+import "./ToggleSwitch.css";
+// Attribute vom ToggleSwitch:
+// - optionLeft: {value: valueLeft, label: labelLeft} Beschreibt die linke Option. valueLeft ist der Wert, der in "value" eingetragen wird und labelLeft, was als Option angezeigt wird.
+// - optionRight: {value: valueLeft, label: labelRight} Beschreibt die rechte Option. valueRight ist der Wert, der in "value" eingetragen wird und labelRight, was als Option angezeigt wird.
+// - value: Der Wert, der ausgewählt angezeigt werden soll (useState)
+// - onChange: Die Funktion die bei Änderung ausgeführt werden soll.
+//             Standardmäßig könnte z.B. {(value) => {value === valueLeft ? setValue(valueLeft) : setValue(valueRight)}} genutzt werden
+export function ToggleSwitch({ optionLeft, optionRight, value, onChange }) {
+    const containerRef = useRef(null);
+    const optionLeftRef = useRef(null);
+    const optionRightRef = useRef(null);
+    const [sliderStyle, setSliderStyle] = useState({});
+    useEffect(() => {
+        const el = value === optionLeft.value ? optionLeftRef.current : optionRightRef.current;
+        const container = containerRef.current;
+        if (!el || !container)
+            return;
+        const { offsetLeft, offsetWidth } = el;
+        setSliderStyle({
+            transform: `translateX(calc(${offsetLeft}px - 1rem))`,
+            width: `calc(${offsetWidth}px + 2rem)`
+        });
+    }, [value, optionLeft, optionRight]);
+    return (_jsxs("div", { className: "toggleWrapper", ref: containerRef, children: [_jsx("div", { className: `toggleOption ${value === optionLeft.value ? "active" : ""}`, ref: el => { optionLeftRef.current = el; }, onClick: () => onChange(optionLeft.value), children: optionLeft.label }), _jsx("div", { className: `toggleOption ${value === optionRight.value ? "active" : ""}`, ref: el => { optionRightRef.current = el; }, onClick: () => onChange(optionRight.value), children: optionRight.label }), _jsx("div", { className: `toggleSlider ${value === optionLeft.value ? "left" : "right"}`, style: sliderStyle })] }));
+}

package/{index.ts → dist/index.d.ts}

@@ -1,10 +1,10 @@
-export { ConfirmationBox, ConfirmationBoxState, defaultConfirmationState } from './ConfirmationBox.tsx';
-export { Dropdown, DropdownOption } from './Dropdown.tsx';
-export { InfoOverlay, InfoOverlayState, defaultInfoOverlayState } from './InfoOverlay.tsx';
-export { InfoOverlayWithInput, InfoOverlayWithInputState, defaultInfoOverlayWithInputState } from './InfoOverlayWithInput.tsx';
-export { setInputFilter } from './InputFilter.tsx';
-export { LoadingOverlay, LoadingOverlayState, defaultLoadingOverlayState } from './LoadingOverlay.tsx';
-export { MultipleChoiceOverlay, MultipleChoiceOverlayState, defaultMultipleChoiceState } from './MultipleChoiceOverlay.tsx';
-export { MultipleRadioOverlay, MultipleRadioOverlayState, defaultMultipleRadioState } from './MultipleRadioOverlay.tsx';
-export { Toast } from './Toast.tsx';
-export { ToggleSwitch, ToggleSwitchOption } from './ToggleSwitch.tsx'
+export { ConfirmationBox, ConfirmationBoxState, defaultConfirmationState } from './ConfirmationBox.jsx';
+export { Dropdown, DropdownOption } from './Dropdown.jsx';
+export { InfoOverlay, InfoOverlayState, defaultInfoOverlayState } from './InfoOverlay.jsx';
+export { InfoOverlayWithInput, InfoOverlayWithInputState, defaultInfoOverlayWithInputState } from './InfoOverlayWithInput.jsx';
+export { setInputFilter } from './InputFilter.jsx';
+export { LoadingOverlay, LoadingOverlayState, defaultLoadingOverlayState } from './LoadingOverlay.jsx';
+export { MultipleChoiceOverlay, MultipleChoiceOverlayState, defaultMultipleChoiceState } from './MultipleChoiceOverlay.jsx';
+export { MultipleRadioOverlay, MultipleRadioOverlayState, defaultMultipleRadioState } from './MultipleRadioOverlay.jsx';
+export { Toast } from './Toast.jsx';
+export { ToggleSwitch, ToggleSwitchOption } from './ToggleSwitch.jsx';

package/dist/index.js

@@ -0,0 +1,10 @@
+export { ConfirmationBox, defaultConfirmationState } from './ConfirmationBox.jsx';
+export { Dropdown } from './Dropdown.jsx';
+export { InfoOverlay, defaultInfoOverlayState } from './InfoOverlay.jsx';
+export { InfoOverlayWithInput, defaultInfoOverlayWithInputState } from './InfoOverlayWithInput.jsx';
+export { setInputFilter } from './InputFilter.jsx';
+export { LoadingOverlay, defaultLoadingOverlayState } from './LoadingOverlay.jsx';
+export { MultipleChoiceOverlay, defaultMultipleChoiceState } from './MultipleChoiceOverlay.jsx';
+export { MultipleRadioOverlay, defaultMultipleRadioState } from './MultipleRadioOverlay.jsx';
+export { Toast } from './Toast.jsx';
+export { ToggleSwitch } from './ToggleSwitch.jsx';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "typescript-overlay-essentials",
-  "version": "1.2.0",
+  "version": "1.3.3",
   "description": "Eine kleine Ansammlung an praktischen Tools, die out of the Box genutzt werden können. Alle enthaltenen Overlays können als Reaktion auf etwas geöffnet werden und schließen sich danach automatisch. Es beinhaltet: \\n - [ConfirmationBox]: Ein Overlay mit einer ConfirmationBox (Fortfahren / Abbrechen), \\n - [InfoOverlay]: ein simples Overlay mit einer Informationsbox die man bestätigen kann, \\n - [InfoOverlayWithInput]: Ein Overlay bei dem ein User zusätzlich ein Freitext-Feld zur Eingabe hat, \\n - [LoadingOverlay]: Ein simples Overlay mit einer Lade-animation und optionalem Ladetext, \\n - [MultipleChoiceOverlay]: Ein simples Overlay bei dem ein Nutzer aus mehreren gegebenen Aktionen auswählen kann, \\n - [MultipleRadioOverlay]: Ein simples Overlay bei dem ein Nutzer genau eine aus mehreren gegebenen Aktionen auswählen kann, \\n - [Toast]: Ein simpler Toast der für kurze Zeit grün hinterlegt in der oberen rechten Ecke des Bildschirms angezeigt wird, \\n - [ToggleSwitch]: Eine Auswahl aus zwei Optionen aus denen ein Nutzer wählen kann in der Darstellung (Option 1 | Option 2), \\n - [Dropdown]: Ein simples Dropdown-Menü (auf Basis von react-select), welches einfacherer zu Konfigurieren ist und einige default-Einstellungen hat, \\n - [InputFilter]: Ein Tool was genutzt werden kann um auf einem Inputfeld einen Regex-Filter anzuwenden und dem User so nur Eingaben erlaubt die dem Filter entsprechen.",
   "keywords": [
     "typescript",
@@ -32,11 +32,27 @@
   "license": "ISC",
   "author": "Julian Koch",
   "type": "module",
-  "main": "index.ts",
+  "main": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "files": [
+    "dist"
+  ],
   "scripts": {
-    "test": "echo \"No test needed\""
+    "build": "tsc",
+    "prepare": "npm run build"
   },
   "dependencies": {
+    "@emotion/react": "^11.14.0",
     "react-select": "^5.10.2"
+  },
+  "peerDependencies": {
+    "@types/react": "^19.2.14",
+    "@types/react-dom": "^19.2.3",
+    "react": "^18.0.0 || ^19.0.0",
+    "react-dom": "^18.0.0 || ^19.0.0"
+  },
+  "devDependencies": {
+    "@types/react": "^19.2.14",
+    "@types/react-dom": "^19.2.3"
   }
 }

package/.github/workflows/npm-publish.yml

@@ -1,32 +0,0 @@
-# This workflow will run tests using node and then publish a package to GitHub Packages when a release is created
-# For more information see: https://docs.github.com/en/actions/publishing-packages/publishing-nodejs-packages
-
-name: typescript-overlay-essentials
-
-on:
-  release:
-    types: [created]
-
-jobs:
-  build:
-    runs-on: ubuntu-latest
-    steps:
-      - uses: actions/checkout@v5
-      - uses: actions/setup-node@v6
-        with:
-          node-version: 24
-      - run: npm ci
-
-  publish-npm:
-    needs: build
-    runs-on: ubuntu-latest
-    steps:
-      - uses: actions/checkout@v5
-      - uses: actions/setup-node@v6
-        with:
-          node-version: 24
-          registry-url: https://registry.npmjs.org/
-      - run: npm ci
-      - run: npm publish
-        env:
-          NODE_AUTH_TOKEN: ${{secrets.npm_token}}

package/ConfirmationBox.css

@@ -1,69 +0,0 @@
-.confirmation-overlay {
-    position: fixed;
-    top: 0;
-    left: 0;
-    width: 100vw;
-    height: 100vh;
-    background-color: rgba(0, 0, 0, 0.6);
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    z-index: 10000;
-}
-
-.confirmation-box {
-    background-color: var(--Hellgrau, white);
-    color: var(--HellSchwarz,#2c2c2c);
-    padding: 2rem;
-    border-radius: 12px;
-    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.5);
-    max-width: 500px;
-    width: 90%;
-    text-align: center;
-    animation: fadeIn 0.3s ease-in-out;
-    position: relative;
-}
-
-@keyframes fadeIn {
-    from {
-        opacity: 0;
-        transform: scale(0.95);
-    }
-
-    to {
-        opacity: 1;
-        transform: scale(1);
-    }
-}
-
-.confirmation-box p {
-    margin-bottom: 0.5em;
-}
-
-.confirmation-box .headline {
-    margin-bottom: 0.75em;
-}
-
-.confirmation-box .confirmation-buttons {
-    display: flex;
-    justify-content: center;
-    gap: 1rem;
-    margin-top: 1.5rem;
-}
-
-    .confirmation-box .confirmation-buttons button {
-        font-size: 85%;
-        padding: 0.5rem 1.1rem;
-    }
-
-.confirmation-box .closeButton {
-    right: 10px;
-    top: 10px;
-    position: absolute;
-}
-
-    .confirmation-box .close-icon:hover {
-        color: var(--HSDAkzent);
-        cursor: pointer;
-    }
-

package/ConfirmationBox.tsx

@@ -1,148 +0,0 @@
-import { useEffect, useState, useRef, CSSProperties } from 'react';
-import * as React from 'react';
-import './ConfirmationBox.css';
-
-// Um die ConfirmationBox zu nutzen, muss der State die folgende Struktur haben:
-export interface ConfirmationBoxState {
-    headline?: string | undefined;
-    message?: string | undefined;
-    message1?: string | undefined;
-    message2?: string | undefined;
-    cancelButtonText?: string | undefined;
-    proceedButtonText?: string | undefined;
-    handlerOk?: ((args?: unknown) => void) | undefined;
-    handlerCancel?: ((args?: unknown) => void) | undefined;
-    handlerArgs?: unknown;
-    addCloseButton?: boolean | undefined;
-    activateConfirm?: boolean | undefined;
-    proceedButtonStyle?: CSSProperties | undefined;
-    cancelButtonStyle?: CSSProperties | undefined;
-}
-
-// Der standard ComfirmationBox Status, der zur Initialisierung genutzt werden kann
-export const defaultConfirmationState: ConfirmationBoxState = {
-    headline: undefined,
-    message: undefined,
-    message1: undefined,
-    message2: undefined,
-    cancelButtonText: undefined,
-    proceedButtonText: undefined,
-    handlerOk: undefined,
-    handlerCancel: undefined,
-    handlerArgs: undefined,
-    addCloseButton: false,
-    activateConfirm: undefined,
-    proceedButtonStyle: undefined,
-    cancelButtonStyle: undefined,
-};
-
-// Wobei alle Attribute grundsätzlich optional sind:
-// - headline: Eine fett hinterlegte Überschrift (optional)
-// - message1: ist die angezeigte Nachricht
-// - message2: ist optional und wird fett hinterlegt (z.B. ein wichtiger Hinweis oder ähnliches)
-// - message: ist optional und wird nur angezeigt, wenn message1 nicht gesetzt ist (damit message oder message1 genutzt werden kann)
-// - cancelButtonText: ist der Text der auf dem Cancel Button stehen soll (ohne Angabe wird "Abbrechen" verwendet)
-// - proceedButtonText: ist der Text der auf dem Proceed Button stehen soll (ohne Angabe wird "OK" verwendet)
-// - handlerOk: ist die Funktion die bei Bestätigung der Box ausgeführt wird (nutzt handlerargs, erwartet also nur 1 Argument!)
-// - handlerCancel: ist die Funktion die bei Ablehnung der Box ausgeführt wird (nutzt handlerargs, erwartet also nur 1 Argument!)
-// - addCloseButton: boolscher Wert, der angibt, ob ein x oben rechts als close-Button verfügbar sein soll (bricht die Aktion ohne handler ab, standardmäßig false)
-// - handlerArgs: kann im handler als weitere Argumente genutzt werden
-// - activateConfirm: ist ein Boolean, der angibt ob die ConfirmationBox angezeigt werden soll oder nicht (wenn false, wird direkt handlerOk aufgerufen) (Standardmäßig true wenn nicht anders angegeben)
-// - proceedButtonStyle: ist der Style des Bestätigungsbuttons (Standardmäßig unverändert)
-// - cancelButtonStyle: ist der Style des Abbrechenbuttons (Standardmäßig unverändert)
-
-export function ConfirmationBox({ state, setState }: { state: ConfirmationBoxState, setState: (state: ConfirmationBoxState) => void }): React.ReactElement {
-
-    // Wird verwendet um die Confirmation Boxen ein- und auszublenden
-    const [showConfirm, setShowConfirm] = useState(false);
-
-    // Damit der Fokus auf die Confirmation Box gesetzt wird, wenn sie geöffnet wird
-    // Und man sie mit Enter bestätigen kann
-    const overlayRef = useRef<HTMLDivElement>(null);
-
-    // Sobald der State von außen aktualisiert wird triggert diese Funktion
-    // Die setzt showConfirm auf true (oder ruft die übergebene Funktion auf wenn confirmationBoxen disabled sind)
-    useEffect(() => {
-        if (state?.handlerOk) {
-            if (state.activateConfirm ?? true) {
-                setShowConfirm(true);
-                setTimeout(() => { document.getElementById("confirmButton")?.focus(); }, 1);
-            }
-            else {
-                // Wenn activateConfirm explizit false ist, dann wird die übergebene Funktion direkt ausgeführt ohne ConfirmationBox
-                if (typeof state.handlerOk === 'function')
-                    state.handlerOk(state.handlerArgs);
-            }
-        }
-        setTimeout(() => {
-            overlayRef.current?.focus();
-        }, 0);
-    }, [state]);
-
-    const handleAction = (handler: ((args?: unknown) => void) | undefined) : void => {
-        setShowConfirm(false);
-        const tempState = {
-            handler: handler,
-            handlerArgs: state.handlerArgs
-        };
-        setState(defaultConfirmationState);
-        if (typeof tempState.handler === 'function')
-            tempState.handler(tempState.handlerArgs);
-    }
-
-    return showConfirm ?
-        <div className="confirmation-overlay"
-            tabIndex={0}
-            ref={overlayRef}>
-            <div className="confirmation-box">
-                {state.addCloseButton?
-                    <span className="closeButton">
-                        <svg xmlns="http://www.w3.org/2000/svg"
-                            tabIndex={0}
-                            className="close-icon"
-                            onClick={() => handleAction(undefined)}
-                            onKeyDown={(e) => {
-                                if (e.key === 'Enter' || e.key === ' ') {
-                                    e.preventDefault(); // Verhindert Scroll bei Space
-                                    handleAction(undefined);
-                                }
-                            }}
-                            role="button" aria-label="Dialog schließen"
-                            width="24" height="24" viewBox="0 0 24 24" fill="none"
-                            stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
-                            <line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/>
-                        </svg>
-                    </span> : 
-                <></>}
-                {state?.headline !== undefined ? <p className="headline" style={{ whiteSpace: "pre-line", wordBreak: "break-word" }}><strong>{state?.headline}</strong></p> : <></>}
-                <p style={{ whiteSpace: "pre-line", wordBreak: "break-word" }}>{state.message1 ?? state.message ?? ""}</p>
-                <p style={{ whiteSpace: "pre-line", wordBreak: "break-word" }}><strong>{state.message2 ?? ""}</strong></p>
-                <div className="confirmation-buttons">
-                    <button
-                        onClick={() => handleAction(state.handlerCancel)}
-                        onKeyDown={(e) => {
-                            if (e.key === 'Enter' || e.key === ' ') {
-                                e.preventDefault(); // Verhindert Scroll bei Space
-                                handleAction(state.handlerCancel);
-                            }
-                        }}
-                        className="px-4 py-2 bg-gray-300 rounded"
-                        style={state?.cancelButtonStyle !== undefined ? state.cancelButtonStyle : {}}>
-                        {state.cancelButtonText ? state.cancelButtonText : "Abbrechen"}
-                    </button>
-                    <button onClick={() => handleAction(state.handlerOk)}
-                        id="confirmButton"
-                        onKeyDown={(e) => {
-                            if (e.key === 'Enter' || e.key === ' ') {
-                                e.preventDefault(); // Verhindert Scroll bei Space
-                                handleAction(state.handlerOk);
-                            }
-                        }}
-                        className="px-4 py-2 bg-blue-600 text-white rounded"
-                        style={state?.proceedButtonStyle !== undefined ? state.proceedButtonStyle : {}}>
-                        {state.proceedButtonText ? state.proceedButtonText : "OK"}
-                    </button>
-                </div>
-            </div>
-        </div> : <></>;
-}