@symply.io/basic-components 1.2.10 → 1.2.12

package/Autocomplete/index.js

@@ -30,9 +30,13 @@ function CustomAutocomplete(props) {
     var size = props.size, value = props.value, loading = props.loading, options = props.options, multiple = props.multiple, disabled = props.disabled, primaryColor = props.primaryColor, secondaryColor = props.secondaryColor, onChange = props.onChange, required = props.required, limitTags = props.limitTags, rest = __rest(props, ["size", "value", "loading", "options", "multiple", "disabled", "primaryColor", "secondaryColor", "onChange", "required", "limitTags"]);
     var theme = useCustomTheme({ primaryColor: primaryColor, secondaryColor: secondaryColor });
     var _a = useInteractions(), inputValue = _a.inputValue, onInputChange = _a.onInputChange;
-    return (_jsx(ThemeProvider, __assign({ theme: theme }, { children: _jsx(Autocomplete, { size: size, fullWidth: true, loading: loading, disabled: disabled, limitTags: limitTags !== null && limitTags !== void 0 ? limitTags : -1, options: options, multiple: multiple, onChange: function (_, val) {
+    return (_jsx(ThemeProvider, __assign({ theme: theme }, { children: _jsx(Autocomplete, { size: size, fullWidth: true, loading: loading, disabled: disabled, limitTags: limitTags !== null && limitTags !== void 0 ? limitTags : -1, options: options, multiple: multiple, onChange: function (event, val) {
+                event.preventDefault();
                 onChange(val);
-            }, isOptionEqualToValue: function (opt, val) { return opt.label === val.label; }, value: value, inputValue: inputValue, onInputChange: onInputChange, renderInput: function (params) { return (_jsx(TextField, __assign({}, params, rest, { required: required, size: size, inputProps: __assign(__assign({}, params.inputProps), { required: required && (Array.isArray(value) ? value.length === 0 : !value) }) }))); } }) })));
+            }, isOptionEqualToValue: function (opt, val) { return opt.label === val.label; }, value: value, inputValue: inputValue, onInputChange: function (event, val) {
+                event.preventDefault();
+                onInputChange(val);
+            }, renderInput: function (params) { return (_jsx(TextField, __assign({}, params, rest, { required: required, size: size, inputProps: __assign(__assign({}, params.inputProps), { required: required && (Array.isArray(value) ? value.length === 0 : !value) }) }))); } }) })));
 }
 export default CustomAutocomplete;
 export * from "./types";

package/Autocomplete/useInteractions.d.ts

@@ -1,5 +1,5 @@
 declare function useInteractions(): {
     inputValue: string;
-    onInputChange: (_: object, value: string) => void;
+    onInputChange: (value: string) => void;
 };
 export default useInteractions;

package/Autocomplete/useInteractions.js

@@ -1,7 +1,7 @@
 import { useState, useCallback } from "react";
 function useInteractions() {
     var _a = useState(""), inputValue = _a[0], setInputValue = _a[1];
-    var onInputChange = useCallback(function (_, value) {
+    var onInputChange = useCallback(function (value) {
         setInputValue(value);
     }, []);
     return { inputValue: inputValue, onInputChange: onInputChange };

package/AutocompleteWithFilter/index.js

@@ -39,7 +39,8 @@ function AutocompleteWithFilter(props) {
         stringify: function (option) { return option.label; }
     });
     var theme = useCustomTheme({ primaryColor: primaryColor, secondaryColor: secondaryColor });
-    return (_jsx(ThemeProvider, __assign({ theme: theme }, { children: _jsx(Autocomplete, { size: size, fullWidth: true, loading: loading, limitTags: limitTags !== null && limitTags !== void 0 ? limitTags : -1, options: options, disabled: disabled, multiple: multiple, filterOptions: filter, onChange: function (_, val) {
+    return (_jsx(ThemeProvider, __assign({ theme: theme }, { children: _jsx(Autocomplete, { size: size, fullWidth: true, loading: loading, limitTags: limitTags !== null && limitTags !== void 0 ? limitTags : -1, options: options, disabled: disabled, multiple: multiple, filterOptions: filter, onChange: function (event, val) {
+                event.preventDefault();
                 onChange(val);
             }, value: value, disableCloseOnSelect: disableCloseOnSelect || multiple, getOptionLabel: function (option) {
                 return option.label || "";

package/FormSelector/MultipleSelector.js

@@ -36,6 +36,7 @@ function MultipleSelector(props) {
     var _g = useInteractions(), tooltipOpen = _g.tooltipOpen, onOpenTooltip = _g.onOpenTooltip, onCloseTooltip = _g.onCloseTooltip;
     return (_jsx(ThemeProvider, __assign({ theme: theme }, { children: _jsx(Tooltip, __assign({ title: tooltip !== null && tooltip !== void 0 ? tooltip : "", open: !!tooltip && tooltipOpen, placement: "right" }, { children: _jsxs(FormControl, __assign({ variant: variant, disabled: disabled, required: required }, rest, { children: [label && (_jsx(InputLabel, __assign({ id: "symply-multiple-select" }, { children: label }))), _jsx(Select, __assign({ disabled: disabled, required: required, value: value, multiple: true, onChange: function (event) {
                             var _a;
+                            event.preventDefault();
                             onChange((_a = event === null || event === void 0 ? void 0 : event.target) === null || _a === void 0 ? void 0 : _a.value);
                         }, inputProps: {
                             onFocus: onOpenTooltip,

package/FormSelector/SimpleSelector.js

@@ -36,6 +36,7 @@ function SimpleSelector(props) {
     var _f = useInteractions(), tooltipOpen = _f.tooltipOpen, onOpenTooltip = _f.onOpenTooltip, onCloseTooltip = _f.onCloseTooltip;
     return (_jsx(ThemeProvider, __assign({ theme: theme }, { children: _jsx(Tooltip, __assign({ title: tooltip !== null && tooltip !== void 0 ? tooltip : "", open: !!tooltip && tooltipOpen, placement: "right" }, { children: _jsxs(FormControl, __assign({ variant: variant, disabled: disabled, required: required }, rest, { children: [label && (_jsx(InputLabel, __assign({ id: "symply-simple-selector" }, { children: label }))), _jsx(Select, __assign({ value: value, required: required, disabled: disabled, onChange: function (event) {
                             var _a;
+                            event.preventDefault();
                             onChange((_a = event === null || event === void 0 ? void 0 : event.target) === null || _a === void 0 ? void 0 : _a.value);
                         }, inputProps: {
                             onFocus: onOpenTooltip,

package/PasswordInput/ConfirmPassword.js

@@ -35,6 +35,7 @@ function ConfirmPassword(props) {
         return true;
     }, [value, password]);
     return (_jsx(ThemeProvider, __assign({ theme: theme }, { children: _jsx(TextField, __assign({ error: !isMatched, label: label, value: value, variant: variant, margin: margin, disabled: disabled, type: "password", size: "small", helperText: !isMatched && helperText, onChange: function (event) {
+                event.preventDefault();
                 onChange(event.target.value);
             }, fullWidth: true, required: true }, rest)) })));
 }

package/PasswordInput/Password.js

@@ -71,6 +71,7 @@ function Password(props) {
             }) }));
     }, [helperTextColor, strategies]);
     return (_jsx(ThemeProvider, __assign({ theme: theme }, { children: _jsx(TextField, __assign({ error: !isValidPassword || error, helperText: helperText, type: "password", label: "Password", size: "small", margin: "dense", value: value, onChange: function (event) {
+                event.preventDefault();
                 onChange(event.target.value);
             }, fullWidth: true, required: true }, rest)) })));
 }

package/TabGroup/index.js

@@ -13,7 +13,6 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { useState, useEffect, forwardRef, useImperativeHandle } from "react";
 import Tab from "@mui/material/Tab";
 import Tabs from "@mui/material/Tabs";
-import Typography from "@mui/material/Typography";
 import useMediaQuery from "@mui/material/useMediaQuery";
 import ThemeProvider from "@mui/material/styles/ThemeProvider";
 import useCustomTheme from "../useCustomTheme";
@@ -39,7 +38,7 @@ var TabGroup = forwardRef(function (props, ref) {
             } }, { children: tabs.map(function (tab, index) {
                 var text = tab.text, _a = tab.disabled, disabled = _a === void 0 ? false : _a;
                 var active = currentTabIndex === index;
-                return (_jsx(Tab, { disableFocusRipple: true, disableRipple: true, label: _jsx(Typography, __assign({ sx: { fontSize: 16, fontWeight: 500 } }, { children: text })), disabled: disabled, sx: {
+                return (_jsx(Tab, { disableFocusRipple: true, disableRipple: true, label: text, disabled: disabled, sx: {
                         cursor: disabled ? "not-allowed" : "pointer",
                         margin: theme.spacing(0.75, 0.25),
                         background: active ? "#fff" : undefined,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@symply.io/basic-components",
-  "version": "1.2.10",
+  "version": "1.2.12",
   "description": "Basic and reusable components for all frontend of Symply apps",
   "keywords": [
     "react",