math-main-components 0.0.45 → 0.0.47

package/dist/components/Checkbox/Checkbox.d.ts

@@ -1,6 +1,6 @@
-import React, { MouseEvent } from 'react';
+import React, { MouseEvent, ReactNode } from 'react';
 export declare function Checkbox({ text, name, defaultChecked, onInput, }: {
-    text: any;
+    text: ReactNode;
     name: string;
     onInput?: (event: MouseEvent<HTMLInputElement>) => void;
     defaultChecked?: boolean;

package/dist/components/CopyCode/CopyCode.d.ts

@@ -1,6 +1,6 @@
-import React from 'react';
+import React, { CSSProperties } from 'react';
 export declare function CopyCode({ code, style, onCopy }: {
     code: string;
-    style?: any;
+    style?: CSSProperties;
     onCopy?: () => void;
 }): React.JSX.Element;

package/dist/components/Searchbar/Searchbar.d.ts

@@ -1,5 +1,9 @@
 import React, { ChangeEvent, MouseEvent } from 'react';
-export declare function Searchbar({ placeholder, title, showNoResults, errorTitle, errorMessage, errorButton, helpTitle, helpMessage, errorAction, onInput, onClickResult, withButton, buttonText, suggestions, autoFocus, results }: {
+export type SearchResult = {
+    title: string;
+    data: unknown;
+};
+export declare function Searchbar<Type extends SearchResult>({ placeholder, title, showNoResults, errorTitle, errorMessage, errorButton, helpTitle, helpMessage, errorAction, onInput, onClickResult, withButton, buttonText, suggestions, autoFocus, results }: {
     placeholder: string;
     title?: string;
     showNoResults?: boolean;
@@ -10,10 +14,10 @@ export declare function Searchbar({ placeholder, title, showNoResults, errorTitl
     helpMessage?: string;
     errorAction?: (event: MouseEvent<HTMLButtonElement>) => void;
     onInput?: (event: ChangeEvent<HTMLInputElement>) => void;
-    onClickResult?: (event: MouseEvent<HTMLLIElement>, result: any) => void;
+    onClickResult?: (event: MouseEvent<HTMLLIElement>, result: Type) => void;
     withButton?: boolean;
     buttonText?: string;
-    suggestions?: any[];
+    suggestions?: string[];
     autoFocus?: boolean;
-    results?: any[];
+    results?: Type[];
 }): React.JSX.Element;

package/dist/components/Table/Table.d.ts

@@ -1,26 +1,26 @@
-import React, { MouseEvent } from 'react';
+import React, { MouseEvent, ReactNode } from 'react';
 export declare enum TableActionType {
     red = 0,
     default = 1
 }
-export declare class TableItem {
+export declare class TableItem<DataType> {
     title: string;
     subtitle: string;
     moreText: string;
     iconName: string;
-    data: any;
-    constructor(title: string, subtitle: string, moreText: string, iconName: string, data?: any);
+    data: DataType;
+    constructor(title: string, subtitle: string, moreText: string, iconName: string, data: DataType);
 }
-export declare class TableItemAction {
+export declare class TableItemAction<DataType> {
     title: string;
     iconName: string;
-    onClick: (event: MouseEvent<HTMLDivElement>, item: TableItem, index: number) => void;
+    onClick: (event: MouseEvent<HTMLDivElement>, item: TableItem<DataType>, index: number) => void;
     type: TableActionType;
-    constructor(title: string, iconName: string, type: TableActionType, onClick?: (event: MouseEvent<HTMLDivElement>, item: TableItem, index: number) => void);
+    constructor(title: string, iconName: string, type: TableActionType, onClick?: (event: MouseEvent<HTMLDivElement>, item: TableItem<DataType>, index: number) => void);
 }
-export declare function Table({ items, title, actions, moreActions }: {
-    items: TableItem[];
+export declare function Table<DataType>({ items, title, actions, moreActions }: {
+    items: TableItem<DataType>[];
     title: string;
-    actions?: TableItemAction[];
-    moreActions?: any[];
+    actions?: TableItemAction<DataType>[];
+    moreActions?: ((data: DataType, index: number) => ReactNode)[];
 }): React.JSX.Element;

package/dist/index.cjs.js

@@ -84,11 +84,10 @@ var styles$p = {"container":"styles-module_container__gCCnD"};
 styleInject(css_248z$p);
 
 function Checkbox({ text, name, defaultChecked = false, onInput = () => { }, }) {
-    return (React__default["default"].createElement(React__default["default"].Fragment, null,
-        React__default["default"].createElement("div", { className: styles$p.container },
-            React__default["default"].createElement("input", { type: "checkbox", onInput: onInput, name: name, id: name, defaultChecked: defaultChecked }),
-            React__default["default"].createElement("label", { htmlFor: name }, text),
-            React__default["default"].createElement(SvgIcon, { iconName: "done", size: "21px" }))));
+    return (React__default["default"].createElement("div", { className: styles$p.container },
+        React__default["default"].createElement("input", { type: "checkbox", onInput: onInput, name: name, id: name, defaultChecked: defaultChecked }),
+        React__default["default"].createElement("label", { htmlFor: name }, text),
+        React__default["default"].createElement(SvgIcon, { iconName: "done", size: "21px" })));
 }
 
 var css_248z$o = ".styles-module_container__OqDNA {\n  display: flex;\n  flex-direction: row;\n}\n.styles-module_container__OqDNA .styles-module_item__1SMCI:nth-child(1) {\n  background: #F0F0F0;\n  border-color: #F0F0F0;\n}\n.styles-module_container__OqDNA .styles-module_item__1SMCI:nth-child(2) {\n  background: #E0E0E0;\n  border-color: #E0E0E0;\n}\n.styles-module_container__OqDNA .styles-module_item__1SMCI:nth-child(3) {\n  background: #CBCBCB;\n  border-color: #CBCBCB;\n}\n.styles-module_container__OqDNA .styles-module_item__1SMCI:first-child {\n  border-top-left-radius: 20px;\n  border-bottom-left-radius: 20px;\n}\n.styles-module_container__OqDNA .styles-module_item__1SMCI:last-child {\n  border-top-right-radius: 20px;\n  border-bottom-right-radius: 20px;\n}\n.styles-module_container__OqDNA .styles-module_item__1SMCI {\n  border: 1px solid transparent;\n  padding: 11px 18px;\n  font-size: 14px;\n  cursor: pointer;\n  transition: 0.2s ease-in-out;\n  user-select: none;\n  -webkit-user-select: none;\n}\n.styles-module_container__OqDNA .styles-module_item__1SMCI.styles-module_selected__AXIA- {\n  background: #C6D4F8;\n  border-color: #0075FF;\n  color: #0075FF;\n}";
@@ -137,7 +136,8 @@ styleInject(css_248z$m);
 function Dialog({ data, text, onClose, onSubmit, children }) {
     function onClick(event) {
         event.preventDefault();
-        const id = event.currentTarget.id;
+        const element = event.target;
+        const id = element.id;
         if (["dialog-backdrop", "cancel-button"].includes(id)) {
             if (onClose)
                 onClose(event, data?.data);
@@ -288,7 +288,9 @@ function InputPin({ name, length, onFinished = () => { } }) {
         const addedDigitsCount = value.length - digitCountBefore;
         // One digit was added
         if (addedDigitsCount == 1) {
-            fieldRefs.current[(position + 1) % length].current.focus();
+            const nextFieldRef = fieldRefs.current[(position + 1) % length];
+            if (nextFieldRef.current)
+                nextFieldRef.current.focus();
             setDigit(position, value.slice(-1));
             return;
         }
@@ -298,10 +300,14 @@ function InputPin({ name, length, onFinished = () => { } }) {
         let newState = { ...state };
         digits.forEach((digit, relativePosition) => {
             newState[relativePosition % length + position] = digit;
-            fieldRefs.current[relativePosition % length + position].current.value = digit;
+            const fieldRef = fieldRefs.current[relativePosition % length + position];
+            if (fieldRef.current)
+                fieldRef.current.value = digit;
         });
         if (digits.length >= 6) {
-            fieldRefs.current[length - 1].current.focus();
+            const lastFieldRef = fieldRefs.current[length - 1];
+            if (lastFieldRef.current)
+                lastFieldRef.current.focus();
         }
         setState(newState);
     }
@@ -309,21 +315,28 @@ function InputPin({ name, length, onFinished = () => { } }) {
         event.preventDefault();
         // Keys: Backspace, Arrow left
         if ([8, 37].includes(event.keyCode)) {
-            fieldRefs.current[(((position) - 1) + length) % length].current.focus();
+            const beforeFieldRef = fieldRefs.current[(((position) - 1) + length) % length];
+            if (beforeFieldRef.current)
+                beforeFieldRef.current.focus();
         }
         // Keys: Tab (automatically), Arrow Right
         if ([39].includes(event.keyCode)) {
-            fieldRefs.current[(position + 1) % length].current.focus();
+            const nextFieldRef = fieldRefs.current[(position + 1) % length];
+            if (nextFieldRef.current)
+                nextFieldRef.current.focus();
         }
     }
     function setDigit(position, digit) {
-        fieldRefs.current[position % length].current.value = digit;
+        const fieldRef = fieldRefs.current[position % length];
+        if (fieldRef.current)
+            fieldRef.current.value = digit;
         setState({ ...state, [position % length]: digit });
     }
     function resetValues() {
         setState({});
         fieldRefs.current.forEach((ref) => {
-            ref.current.value = "";
+            if (ref.current)
+                ref.current.value = "";
         });
     }
     return (React__default["default"].createElement("div", { className: styles$e.container },
@@ -598,7 +611,7 @@ class TableItem {
     moreText;
     iconName;
     data;
-    constructor(title, subtitle, moreText, iconName, data = {}) {
+    constructor(title, subtitle, moreText, iconName, data) {
         this.title = title;
         this.subtitle = subtitle;
         this.moreText = moreText;

package/dist/index.esm.js

@@ -76,11 +76,10 @@ var styles$p = {"container":"styles-module_container__gCCnD"};
 styleInject(css_248z$p);
 
 function Checkbox({ text, name, defaultChecked = false, onInput = () => { }, }) {
-    return (React.createElement(React.Fragment, null,
-        React.createElement("div", { className: styles$p.container },
-            React.createElement("input", { type: "checkbox", onInput: onInput, name: name, id: name, defaultChecked: defaultChecked }),
-            React.createElement("label", { htmlFor: name }, text),
-            React.createElement(SvgIcon, { iconName: "done", size: "21px" }))));
+    return (React.createElement("div", { className: styles$p.container },
+        React.createElement("input", { type: "checkbox", onInput: onInput, name: name, id: name, defaultChecked: defaultChecked }),
+        React.createElement("label", { htmlFor: name }, text),
+        React.createElement(SvgIcon, { iconName: "done", size: "21px" })));
 }
 
 var css_248z$o = ".styles-module_container__OqDNA {\n  display: flex;\n  flex-direction: row;\n}\n.styles-module_container__OqDNA .styles-module_item__1SMCI:nth-child(1) {\n  background: #F0F0F0;\n  border-color: #F0F0F0;\n}\n.styles-module_container__OqDNA .styles-module_item__1SMCI:nth-child(2) {\n  background: #E0E0E0;\n  border-color: #E0E0E0;\n}\n.styles-module_container__OqDNA .styles-module_item__1SMCI:nth-child(3) {\n  background: #CBCBCB;\n  border-color: #CBCBCB;\n}\n.styles-module_container__OqDNA .styles-module_item__1SMCI:first-child {\n  border-top-left-radius: 20px;\n  border-bottom-left-radius: 20px;\n}\n.styles-module_container__OqDNA .styles-module_item__1SMCI:last-child {\n  border-top-right-radius: 20px;\n  border-bottom-right-radius: 20px;\n}\n.styles-module_container__OqDNA .styles-module_item__1SMCI {\n  border: 1px solid transparent;\n  padding: 11px 18px;\n  font-size: 14px;\n  cursor: pointer;\n  transition: 0.2s ease-in-out;\n  user-select: none;\n  -webkit-user-select: none;\n}\n.styles-module_container__OqDNA .styles-module_item__1SMCI.styles-module_selected__AXIA- {\n  background: #C6D4F8;\n  border-color: #0075FF;\n  color: #0075FF;\n}";
@@ -129,7 +128,8 @@ styleInject(css_248z$m);
 function Dialog({ data, text, onClose, onSubmit, children }) {
     function onClick(event) {
         event.preventDefault();
-        const id = event.currentTarget.id;
+        const element = event.target;
+        const id = element.id;
         if (["dialog-backdrop", "cancel-button"].includes(id)) {
             if (onClose)
                 onClose(event, data?.data);
@@ -280,7 +280,9 @@ function InputPin({ name, length, onFinished = () => { } }) {
         const addedDigitsCount = value.length - digitCountBefore;
         // One digit was added
         if (addedDigitsCount == 1) {
-            fieldRefs.current[(position + 1) % length].current.focus();
+            const nextFieldRef = fieldRefs.current[(position + 1) % length];
+            if (nextFieldRef.current)
+                nextFieldRef.current.focus();
             setDigit(position, value.slice(-1));
             return;
         }
@@ -290,10 +292,14 @@ function InputPin({ name, length, onFinished = () => { } }) {
         let newState = { ...state };
         digits.forEach((digit, relativePosition) => {
             newState[relativePosition % length + position] = digit;
-            fieldRefs.current[relativePosition % length + position].current.value = digit;
+            const fieldRef = fieldRefs.current[relativePosition % length + position];
+            if (fieldRef.current)
+                fieldRef.current.value = digit;
         });
         if (digits.length >= 6) {
-            fieldRefs.current[length - 1].current.focus();
+            const lastFieldRef = fieldRefs.current[length - 1];
+            if (lastFieldRef.current)
+                lastFieldRef.current.focus();
         }
         setState(newState);
     }
@@ -301,21 +307,28 @@ function InputPin({ name, length, onFinished = () => { } }) {
         event.preventDefault();
         // Keys: Backspace, Arrow left
         if ([8, 37].includes(event.keyCode)) {
-            fieldRefs.current[(((position) - 1) + length) % length].current.focus();
+            const beforeFieldRef = fieldRefs.current[(((position) - 1) + length) % length];
+            if (beforeFieldRef.current)
+                beforeFieldRef.current.focus();
         }
         // Keys: Tab (automatically), Arrow Right
         if ([39].includes(event.keyCode)) {
-            fieldRefs.current[(position + 1) % length].current.focus();
+            const nextFieldRef = fieldRefs.current[(position + 1) % length];
+            if (nextFieldRef.current)
+                nextFieldRef.current.focus();
         }
     }
     function setDigit(position, digit) {
-        fieldRefs.current[position % length].current.value = digit;
+        const fieldRef = fieldRefs.current[position % length];
+        if (fieldRef.current)
+            fieldRef.current.value = digit;
         setState({ ...state, [position % length]: digit });
     }
     function resetValues() {
         setState({});
         fieldRefs.current.forEach((ref) => {
-            ref.current.value = "";
+            if (ref.current)
+                ref.current.value = "";
         });
     }
     return (React.createElement("div", { className: styles$e.container },
@@ -590,7 +603,7 @@ class TableItem {
     moreText;
     iconName;
     data;
-    constructor(title, subtitle, moreText, iconName, data = {}) {
+    constructor(title, subtitle, moreText, iconName, data) {
         this.title = title;
         this.subtitle = subtitle;
         this.moreText = moreText;

package/package.json

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