math-main-components 0.0.218 → 0.0.221

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

@@ -2,8 +2,9 @@
 import type { StoryObj } from '@storybook/react';
 declare const meta: {
     title: string;
-    component: <Type extends string>({ options, unit, onChangeDropdown, onChangeInput, ...props }: {
+    component: <Type extends string>({ options, unit, defaultValue, onChangeDropdown, onChangeInput, ...props }: {
         options: import("./").NumberDropdownOption<Type>[];
+        defaultValue: Type;
         onChangeDropdown?: ((oldValue: Type, newValue: Type) => void) | undefined;
         onChangeInput?: ((value: number) => void) | undefined;
         unit?: string | undefined;

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

@@ -3,8 +3,9 @@ export type NumberDropdownOption<Type> = {
     value: Type;
     label: string;
 };
-export declare const NumberDropdown: <Type extends string>({ options, unit, onChangeDropdown, onChangeInput, ...props }: {
+export declare const NumberDropdown: <Type extends string>({ options, unit, defaultValue, onChangeDropdown, onChangeInput, ...props }: {
     options: NumberDropdownOption<Type>[];
+    defaultValue: Type;
     onChangeDropdown?: ((oldValue: Type, newValue: Type) => void) | undefined;
     onChangeInput?: ((value: number) => void) | undefined;
     unit?: string | undefined;

package/dist/index.cjs.js

@@ -9430,7 +9430,7 @@ function Accordeon({ title, children }) {
         React__default["default"].createElement("div", { className: styles$y.content }, children)));
 }
 
-var css_248z$x = ".styles-module_container__TP0rp {\n  max-width: 100%;\n}\n\n.styles-module_button__Sh-fr {\n  padding: 10px 18px;\n  border-radius: 40px;\n  cursor: pointer;\n  display: flex;\n  flex-direction: row;\n  gap: 10px;\n  font-size: 15px;\n  font-weight: 400;\n  align-items: center;\n  border: none;\n  transition: 0.2s ease-in-out;\n  font-family: \"Space Grotesk\", sans-serif;\n  border: 1px solid transparent;\n}\n.styles-module_button__Sh-fr:hover {\n  filter: brightness(0.9);\n}\n.styles-module_button__Sh-fr:focus {\n  border: var(--focus-border);\n  box-shadow: var(--focus-shadow);\n}\n.styles-module_button__Sh-fr.styles-module_blue__DRdbo {\n  background: var(--primary-1);\n  color: white;\n}\n.styles-module_button__Sh-fr.styles-module_lightBlue__7EKfp {\n  background: var(--primary-2);\n  color: var(--primary-1);\n}\n.styles-module_button__Sh-fr.styles-module_red__EhImH {\n  background: var(--red-1);\n  color: white;\n}\n.styles-module_button__Sh-fr.styles-module_grey__kAVD1 {\n  background: var(--background-1);\n  color: var(--foreground-2);\n}\n.styles-module_button__Sh-fr.styles-module_onlyIcon__bNVnI {\n  width: 44px;\n  height: 44px;\n  padding: 0;\n  align-items: center;\n  justify-content: center;\n}\n.styles-module_button__Sh-fr.styles-module_onlyIcon__bNVnI span {\n  font-size: 22px !important;\n}";
+var css_248z$x = ".styles-module_container__TP0rp {\n  max-width: 100%;\n}\n\n.styles-module_button__Sh-fr {\n  padding: 10px 18px;\n  border-radius: 40px;\n  cursor: pointer;\n  display: flex;\n  flex-direction: row;\n  gap: 10px;\n  font-size: 15px;\n  font-weight: 400;\n  align-items: center;\n  justify-content: center;\n  border: none;\n  transition: 0.2s ease-in-out;\n  font-family: \"Space Grotesk\", sans-serif;\n  border: 1px solid transparent;\n}\n.styles-module_button__Sh-fr:hover {\n  filter: brightness(0.9);\n}\n.styles-module_button__Sh-fr:focus {\n  border: var(--focus-border);\n  box-shadow: var(--focus-shadow);\n}\n.styles-module_button__Sh-fr.styles-module_blue__DRdbo {\n  background: var(--primary-1);\n  color: white;\n}\n.styles-module_button__Sh-fr.styles-module_lightBlue__7EKfp {\n  background: var(--primary-2);\n  color: var(--primary-1);\n}\n.styles-module_button__Sh-fr.styles-module_red__EhImH {\n  background: var(--red-1);\n  color: white;\n}\n.styles-module_button__Sh-fr.styles-module_grey__kAVD1 {\n  background: var(--background-1);\n  color: var(--foreground-2);\n}\n.styles-module_button__Sh-fr.styles-module_onlyIcon__bNVnI {\n  width: 44px;\n  height: 44px;\n  padding: 0;\n  align-items: center;\n  justify-content: center;\n}\n.styles-module_button__Sh-fr.styles-module_onlyIcon__bNVnI span {\n  font-size: 22px !important;\n}";
 var styles$x = {"container":"styles-module_container__TP0rp","button":"styles-module_button__Sh-fr","blue":"styles-module_blue__DRdbo","lightBlue":"styles-module_lightBlue__7EKfp","red":"styles-module_red__EhImH","grey":"styles-module_grey__kAVD1","onlyIcon":"styles-module_onlyIcon__bNVnI"};
 styleInject(css_248z$x);
 
@@ -9797,8 +9797,9 @@ var css_248z$f = ".styles-module_container__kkDKN {\n  display: flex;\n  align-i
 var styles$f = {"container":"styles-module_container__kkDKN","select_container":"styles-module_select_container__nqgUF","select":"styles-module_select__27FqK","input":"styles-module_input__pUgcS","input_container":"styles-module_input_container__oRJ75","unit_label":"styles-module_unit_label__bLQWy"};
 styleInject(css_248z$f);
 
-const NumberDropdown = ({ options = [], unit = "", onChangeDropdown = () => { }, onChangeInput = () => { }, ...props }) => {
-    const [selected, setSelected] = React.useState();
+const NumberDropdown = ({ options = [], unit = "", defaultValue, onChangeDropdown = () => { }, onChangeInput = () => { }, ...props }) => {
+    const [selected, setSelected] = React.useState(defaultValue);
+    React.useEffect(() => setSelected(defaultValue), [defaultValue]);
     const onDropdownChange = (event) => {
         onChangeDropdown(selected, event.target.value);
         setSelected(event.target.value);
@@ -9809,7 +9810,7 @@ const NumberDropdown = ({ options = [], unit = "", onChangeDropdown = () => { },
     return (React__default["default"].createElement("div", { className: styles$f.container },
         React__default["default"].createElement("div", { className: styles$f.select_container },
             React__default["default"].createElement(SvgIcon, { iconName: "expand_more" }),
-            React__default["default"].createElement("select", { className: styles$f.select, onChange: onDropdownChange },
+            React__default["default"].createElement("select", { className: styles$f.select, onChange: onDropdownChange, value: selected },
                 React__default["default"].createElement("option", { value: "none" }, "Ausw\u00E4hlen"),
                 options.map((option, index) => (React__default["default"].createElement("option", { key: index, value: option.value }, option.label))))),
         React__default["default"].createElement("div", { className: styles$f.input_container },

package/dist/index.esm.js

@@ -9404,7 +9404,7 @@ function Accordeon({ title, children }) {
         React__default.createElement("div", { className: styles$y.content }, children)));
 }
 
-var css_248z$x = ".styles-module_container__TP0rp {\n  max-width: 100%;\n}\n\n.styles-module_button__Sh-fr {\n  padding: 10px 18px;\n  border-radius: 40px;\n  cursor: pointer;\n  display: flex;\n  flex-direction: row;\n  gap: 10px;\n  font-size: 15px;\n  font-weight: 400;\n  align-items: center;\n  border: none;\n  transition: 0.2s ease-in-out;\n  font-family: \"Space Grotesk\", sans-serif;\n  border: 1px solid transparent;\n}\n.styles-module_button__Sh-fr:hover {\n  filter: brightness(0.9);\n}\n.styles-module_button__Sh-fr:focus {\n  border: var(--focus-border);\n  box-shadow: var(--focus-shadow);\n}\n.styles-module_button__Sh-fr.styles-module_blue__DRdbo {\n  background: var(--primary-1);\n  color: white;\n}\n.styles-module_button__Sh-fr.styles-module_lightBlue__7EKfp {\n  background: var(--primary-2);\n  color: var(--primary-1);\n}\n.styles-module_button__Sh-fr.styles-module_red__EhImH {\n  background: var(--red-1);\n  color: white;\n}\n.styles-module_button__Sh-fr.styles-module_grey__kAVD1 {\n  background: var(--background-1);\n  color: var(--foreground-2);\n}\n.styles-module_button__Sh-fr.styles-module_onlyIcon__bNVnI {\n  width: 44px;\n  height: 44px;\n  padding: 0;\n  align-items: center;\n  justify-content: center;\n}\n.styles-module_button__Sh-fr.styles-module_onlyIcon__bNVnI span {\n  font-size: 22px !important;\n}";
+var css_248z$x = ".styles-module_container__TP0rp {\n  max-width: 100%;\n}\n\n.styles-module_button__Sh-fr {\n  padding: 10px 18px;\n  border-radius: 40px;\n  cursor: pointer;\n  display: flex;\n  flex-direction: row;\n  gap: 10px;\n  font-size: 15px;\n  font-weight: 400;\n  align-items: center;\n  justify-content: center;\n  border: none;\n  transition: 0.2s ease-in-out;\n  font-family: \"Space Grotesk\", sans-serif;\n  border: 1px solid transparent;\n}\n.styles-module_button__Sh-fr:hover {\n  filter: brightness(0.9);\n}\n.styles-module_button__Sh-fr:focus {\n  border: var(--focus-border);\n  box-shadow: var(--focus-shadow);\n}\n.styles-module_button__Sh-fr.styles-module_blue__DRdbo {\n  background: var(--primary-1);\n  color: white;\n}\n.styles-module_button__Sh-fr.styles-module_lightBlue__7EKfp {\n  background: var(--primary-2);\n  color: var(--primary-1);\n}\n.styles-module_button__Sh-fr.styles-module_red__EhImH {\n  background: var(--red-1);\n  color: white;\n}\n.styles-module_button__Sh-fr.styles-module_grey__kAVD1 {\n  background: var(--background-1);\n  color: var(--foreground-2);\n}\n.styles-module_button__Sh-fr.styles-module_onlyIcon__bNVnI {\n  width: 44px;\n  height: 44px;\n  padding: 0;\n  align-items: center;\n  justify-content: center;\n}\n.styles-module_button__Sh-fr.styles-module_onlyIcon__bNVnI span {\n  font-size: 22px !important;\n}";
 var styles$x = {"container":"styles-module_container__TP0rp","button":"styles-module_button__Sh-fr","blue":"styles-module_blue__DRdbo","lightBlue":"styles-module_lightBlue__7EKfp","red":"styles-module_red__EhImH","grey":"styles-module_grey__kAVD1","onlyIcon":"styles-module_onlyIcon__bNVnI"};
 styleInject(css_248z$x);
 
@@ -9771,8 +9771,9 @@ var css_248z$f = ".styles-module_container__kkDKN {\n  display: flex;\n  align-i
 var styles$f = {"container":"styles-module_container__kkDKN","select_container":"styles-module_select_container__nqgUF","select":"styles-module_select__27FqK","input":"styles-module_input__pUgcS","input_container":"styles-module_input_container__oRJ75","unit_label":"styles-module_unit_label__bLQWy"};
 styleInject(css_248z$f);
 
-const NumberDropdown = ({ options = [], unit = "", onChangeDropdown = () => { }, onChangeInput = () => { }, ...props }) => {
-    const [selected, setSelected] = useState();
+const NumberDropdown = ({ options = [], unit = "", defaultValue, onChangeDropdown = () => { }, onChangeInput = () => { }, ...props }) => {
+    const [selected, setSelected] = useState(defaultValue);
+    useEffect(() => setSelected(defaultValue), [defaultValue]);
     const onDropdownChange = (event) => {
         onChangeDropdown(selected, event.target.value);
         setSelected(event.target.value);
@@ -9783,7 +9784,7 @@ const NumberDropdown = ({ options = [], unit = "", onChangeDropdown = () => { },
     return (React__default.createElement("div", { className: styles$f.container },
         React__default.createElement("div", { className: styles$f.select_container },
             React__default.createElement(SvgIcon, { iconName: "expand_more" }),
-            React__default.createElement("select", { className: styles$f.select, onChange: onDropdownChange },
+            React__default.createElement("select", { className: styles$f.select, onChange: onDropdownChange, value: selected },
                 React__default.createElement("option", { value: "none" }, "Ausw\u00E4hlen"),
                 options.map((option, index) => (React__default.createElement("option", { key: index, value: option.value }, option.label))))),
         React__default.createElement("div", { className: styles$f.input_container },

package/package.json

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