math-main-components 0.0.207 → 0.0.209

package/dist/components/Dropdown/Dropdown.stories.d.ts

@@ -0,0 +1,18 @@
+/// <reference types="react" />
+import type { StoryObj } from '@storybook/react';
+import { Dropdown } from '.';
+declare const meta: {
+    title: string;
+    component: <Type extends string>({ options, unit, onChange, ...props }: {
+        options: Dropdown<Type>[];
+        onChange?: ((value: Type) => void) | undefined;
+        unit?: string | undefined;
+    } & import("react").InputHTMLAttributes<HTMLInputElement>) => import("react").JSX.Element;
+    parameters: {
+        layout: string;
+    };
+    tags: string[];
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Primary: Story;

package/dist/components/Dropdown/index.d.ts

@@ -0,0 +1,10 @@
+import React, { InputHTMLAttributes } from 'react';
+export type Dropdown<Type> = {
+    value: Type;
+    label: string;
+};
+export declare const Dropdown: <Type extends string>({ options, unit, onChange, ...props }: {
+    options: Dropdown<Type>[];
+    onChange?: ((value: Type) => void) | undefined;
+    unit?: string | undefined;
+} & React.InputHTMLAttributes<HTMLInputElement>) => React.JSX.Element;

package/dist/components/InputMail/InputMail.d.ts

@@ -1,9 +1,11 @@
-import React from 'react';
-export declare function InputMail({ id, placeholder, title, name, width, available, ...props }: {
+import React, { ChangeEvent } from 'react';
+export declare function InputMail({ id, placeholder, title, name, width, available, defaultValue, onInput, ...props }: {
     id: string;
     placeholder?: string;
     title?: string;
     name?: string;
     width?: string;
     available?: boolean;
+    defaultValue?: string;
+    onInput?: (event: ChangeEvent<HTMLInputElement>) => void;
 } & React.InputHTMLAttributes<HTMLInputElement>): React.JSX.Element;

package/dist/index.cjs.js

@@ -9611,11 +9611,15 @@ var css_248z$k = ".styles-module_input__-GKhx {\n  padding: 14px 20px;\n  font-s
 var styles$k = {"input":"styles-module_input__-GKhx","not_available":"styles-module_not_available__XD1kR","container":"styles-module_container__--4rV","label":"styles-module_label__mGzwP","label_text":"styles-module_label_text__d0eMb","with_title":"styles-module_with_title__CGOEs","valid":"styles-module_valid__uj8g-"};
 styleInject(css_248z$k);
 
-function InputMail({ id, placeholder = "E-Mail-Adresse", title = "E-Mail-Adresse", name = "email", width = "100%", available = true, ...props }) {
-    const [value, setValue] = React.useState("");
+function InputMail({ id, placeholder = "E-Mail-Adresse", title = "E-Mail-Adresse", name = "email", width = "100%", available = true, defaultValue = "", onInput = () => { }, ...props }) {
+    const [value, setValue] = React.useState(defaultValue);
+    React.useEffect(() => setValue(defaultValue), [defaultValue]);
     return (React__default["default"].createElement(React__default["default"].Fragment, null,
         React__default["default"].createElement("div", { className: styles$k.container, style: { width: width } },
-            React__default["default"].createElement("input", { className: `${styles$k.input} ${title != undefined ? styles$k.with_title : styles$k.without_title} ${value.length > 0 ? styles$k.valid : styles$k.not_valid} ${available ? styles$k.available : styles$k.not_available}`, name: name, placeholder: placeholder, type: "email", onInput: (event) => setValue(event.target.value), id: id, ...props }),
+            React__default["default"].createElement("input", { className: `${styles$k.input} ${title != undefined ? styles$k.with_title : styles$k.without_title} ${value.length > 0 ? styles$k.valid : styles$k.not_valid} ${available ? styles$k.available : styles$k.not_available}`, name: name, placeholder: placeholder, type: "email", id: id, onInput: (event) => {
+                    setValue(event.target.value);
+                    onInput(event);
+                }, ...props }),
             React__default["default"].createElement("label", { htmlFor: "text", className: styles$k.label },
                 React__default["default"].createElement("span", { className: styles$k.label_text }, title)))));
 }
@@ -9770,8 +9774,9 @@ var css_248z$f = ".styles-module_container__zcXGF {\n  display: flex;\n  width:
 var styles$f = {"container":"styles-module_container__zcXGF","input":"styles-module_input__Tpth8","not_available":"styles-module_not_available__CRXjB","label":"styles-module_label__appHO","label_text":"styles-module_label_text__-sKjY","with_title":"styles-module_with_title__L3eGj","valid":"styles-module_valid__zWcOz"};
 styleInject(css_248z$f);
 
-function InputText({ id, title, name, placeholder = "", defaultValue = "", autoFocus = false, type = "text", width = "100%", marginBottom, autoComplete = "off", available = true, onInput = (event) => { } }) {
+function InputText({ id, title, name, placeholder = "", defaultValue = "", autoFocus = false, type = "text", width = "100%", marginBottom, autoComplete = "off", available = true, onInput = () => { } }) {
     const [value, setValue] = React.useState(defaultValue);
+    React.useEffect(() => setValue(defaultValue), [defaultValue]);
     const inputElement = React.useCallback((element) => {
         if (element && autoFocus)
             element.focus();
@@ -9780,8 +9785,7 @@ function InputText({ id, title, name, placeholder = "", defaultValue = "", autoF
         React__default["default"].createElement("div", { className: styles$f.container, style: { width, marginBottom } },
             React__default["default"].createElement("input", { className: `${styles$f.input} ${title != undefined ? styles$f.with_title : styles$f.without_title} ${value.length > 0 || defaultValue.length > 0 ? styles$f.valid : styles$f.not_valid} ${available ? styles$f.available : styles$f.not_available}`, name: name, id: id, type: type, placeholder: placeholder, autoComplete: autoComplete, ref: inputElement, defaultValue: defaultValue, onInput: (event) => {
                     setValue(event.target.value);
-                    if (onInput)
-                        onInput(event);
+                    onInput(event);
                 } }),
             React__default["default"].createElement("label", { htmlFor: "text", className: styles$f.label },
                 React__default["default"].createElement("span", { className: styles$f.label_text }, title)))));

package/dist/index.esm.js

@@ -9585,11 +9585,15 @@ var css_248z$k = ".styles-module_input__-GKhx {\n  padding: 14px 20px;\n  font-s
 var styles$k = {"input":"styles-module_input__-GKhx","not_available":"styles-module_not_available__XD1kR","container":"styles-module_container__--4rV","label":"styles-module_label__mGzwP","label_text":"styles-module_label_text__d0eMb","with_title":"styles-module_with_title__CGOEs","valid":"styles-module_valid__uj8g-"};
 styleInject(css_248z$k);
 
-function InputMail({ id, placeholder = "E-Mail-Adresse", title = "E-Mail-Adresse", name = "email", width = "100%", available = true, ...props }) {
-    const [value, setValue] = useState("");
+function InputMail({ id, placeholder = "E-Mail-Adresse", title = "E-Mail-Adresse", name = "email", width = "100%", available = true, defaultValue = "", onInput = () => { }, ...props }) {
+    const [value, setValue] = useState(defaultValue);
+    useEffect(() => setValue(defaultValue), [defaultValue]);
     return (React__default.createElement(React__default.Fragment, null,
         React__default.createElement("div", { className: styles$k.container, style: { width: width } },
-            React__default.createElement("input", { className: `${styles$k.input} ${title != undefined ? styles$k.with_title : styles$k.without_title} ${value.length > 0 ? styles$k.valid : styles$k.not_valid} ${available ? styles$k.available : styles$k.not_available}`, name: name, placeholder: placeholder, type: "email", onInput: (event) => setValue(event.target.value), id: id, ...props }),
+            React__default.createElement("input", { className: `${styles$k.input} ${title != undefined ? styles$k.with_title : styles$k.without_title} ${value.length > 0 ? styles$k.valid : styles$k.not_valid} ${available ? styles$k.available : styles$k.not_available}`, name: name, placeholder: placeholder, type: "email", id: id, onInput: (event) => {
+                    setValue(event.target.value);
+                    onInput(event);
+                }, ...props }),
             React__default.createElement("label", { htmlFor: "text", className: styles$k.label },
                 React__default.createElement("span", { className: styles$k.label_text }, title)))));
 }
@@ -9744,8 +9748,9 @@ var css_248z$f = ".styles-module_container__zcXGF {\n  display: flex;\n  width:
 var styles$f = {"container":"styles-module_container__zcXGF","input":"styles-module_input__Tpth8","not_available":"styles-module_not_available__CRXjB","label":"styles-module_label__appHO","label_text":"styles-module_label_text__-sKjY","with_title":"styles-module_with_title__L3eGj","valid":"styles-module_valid__zWcOz"};
 styleInject(css_248z$f);
 
-function InputText({ id, title, name, placeholder = "", defaultValue = "", autoFocus = false, type = "text", width = "100%", marginBottom, autoComplete = "off", available = true, onInput = (event) => { } }) {
+function InputText({ id, title, name, placeholder = "", defaultValue = "", autoFocus = false, type = "text", width = "100%", marginBottom, autoComplete = "off", available = true, onInput = () => { } }) {
     const [value, setValue] = useState(defaultValue);
+    useEffect(() => setValue(defaultValue), [defaultValue]);
     const inputElement = useCallback((element) => {
         if (element && autoFocus)
             element.focus();
@@ -9754,8 +9759,7 @@ function InputText({ id, title, name, placeholder = "", defaultValue = "", autoF
         React__default.createElement("div", { className: styles$f.container, style: { width, marginBottom } },
             React__default.createElement("input", { className: `${styles$f.input} ${title != undefined ? styles$f.with_title : styles$f.without_title} ${value.length > 0 || defaultValue.length > 0 ? styles$f.valid : styles$f.not_valid} ${available ? styles$f.available : styles$f.not_available}`, name: name, id: id, type: type, placeholder: placeholder, autoComplete: autoComplete, ref: inputElement, defaultValue: defaultValue, onInput: (event) => {
                     setValue(event.target.value);
-                    if (onInput)
-                        onInput(event);
+                    onInput(event);
                 } }),
             React__default.createElement("label", { htmlFor: "text", className: styles$f.label },
                 React__default.createElement("span", { className: styles$f.label_text }, title)))));

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "math-main-components",
-    "version": "0.0.207",
+    "version": "0.0.209",
     "author": "Emilian Scheel",
     "files": [
         "dist/**/*",