@symply.io/basic-components 1.0.0 → 1.0.2

package/Autocomplete/index.js

@@ -27,12 +27,12 @@ import TextField from "@mui/material/TextField";
 import useInteractions from "./useInteractions";
 import useCustomTheme from "../useCustomTheme";
 function CustomAutocomplete(props) {
-    var size = props.size, value = props.value, options = props.options, multiple = props.multiple, primaryColor = props.primaryColor, secondaryColor = props.secondaryColor, onChange = props.onChange, rest = __rest(props, ["size", "value", "options", "multiple", "primaryColor", "secondaryColor", "onChange"]);
+    var size = props.size, value = props.value, options = props.options, multiple = props.multiple, primaryColor = props.primaryColor, secondaryColor = props.secondaryColor, onChange = props.onChange, required = props.required, rest = __rest(props, ["size", "value", "options", "multiple", "primaryColor", "secondaryColor", "onChange", "required"]);
     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, options: options, multiple: multiple, onChange: function (_, val) {
                 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, { size: size })); } }) })));
+            }, 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) }) }))); } }) })));
 }
 export default CustomAutocomplete;
 export * from "./types";

package/Autocomplete/types.d.ts

@@ -6,7 +6,7 @@ export declare type AutocompleteOptionType<T = {
     label: string;
 };
 export declare type AutocompleteValueType<T, multiple extends boolean | undefined> = multiple extends false | undefined ? AutocompleteOptionType<T> | null : Array<AutocompleteOptionType<T>>;
-export interface AutocompleteProps<T, multiple extends boolean | undefined> extends Omit<TextFieldProps, "onChange"> {
+export interface AutocompleteProps<T, multiple extends boolean | undefined> extends Omit<TextFieldProps, "onChange" | "value"> {
     multiple?: multiple;
     options: Array<AutocompleteOptionType<T>>;
     value: AutocompleteValueType<T, multiple>;

package/AutocompleteWithFilter/index.js

@@ -31,7 +31,7 @@ import useCustomTheme from "../useCustomTheme";
 var icon = _jsx(CheckBoxOutlineBlankIcon, { fontSize: "small" });
 var checkedIcon = _jsx(CheckBoxIcon, { fontSize: "small" });
 function AutocompleteWithFilter(props) {
-    var size = props.size, value = props.value, options = props.options, multiple = props.multiple, disableCloseOnSelect = props.disableCloseOnSelect, primaryColor = props.primaryColor, secondaryColor = props.secondaryColor, onChange = props.onChange, rest = __rest(props, ["size", "value", "options", "multiple", "disableCloseOnSelect", "primaryColor", "secondaryColor", "onChange"]);
+    var size = props.size, value = props.value, options = props.options, multiple = props.multiple, disableCloseOnSelect = props.disableCloseOnSelect, primaryColor = props.primaryColor, secondaryColor = props.secondaryColor, onChange = props.onChange, required = props.required, rest = __rest(props, ["size", "value", "options", "multiple", "disableCloseOnSelect", "primaryColor", "secondaryColor", "onChange", "required"]);
     var filter = createFilterOptions({
         ignoreCase: true,
         ignoreAccents: true,
@@ -46,7 +46,7 @@ function AutocompleteWithFilter(props) {
             }, renderOption: function (props, option, _a) {
                 var selected = _a.selected;
                 return (_jsxs("li", __assign({}, props, { children: [_jsx(Checkbox, { icon: icon, color: "primary", checkedIcon: checkedIcon, style: { marginRight: 8 }, checked: selected }), option.label || ""] })));
-            }, renderInput: function (params) { return (_jsx(TextField, __assign({}, params, rest, { variant: "outlined" }))); } }) })));
+            }, renderInput: function (params) { return (_jsx(TextField, __assign({}, params, rest, { variant: "outlined", required: required, inputProps: __assign(__assign({}, params.inputProps), { required: required && (Array.isArray(value) ? value.length === 0 : !value) }) }))); } }) })));
 }
 export default AutocompleteWithFilter;
 export * from "./types";

package/AutocompleteWithFilter/types.d.ts

@@ -4,7 +4,7 @@ export declare type AutocompleteWithFilterOptionType<T> = T & {
     label: string;
 };
 export declare type AutocompleteWithFilterlValueType<T, multiple extends boolean | undefined> = multiple extends false | undefined ? AutocompleteWithFilterOptionType<T> | null : Array<AutocompleteWithFilterOptionType<T>>;
-export interface AutocompleteWithFilterProps<T, multiple extends boolean | undefined> extends Omit<TextFieldProps, "onChange"> {
+export interface AutocompleteWithFilterProps<T, multiple extends boolean | undefined> extends Omit<TextFieldProps, "onChange" | "value"> {
     value: AutocompleteWithFilterlValueType<T, multiple>;
     options: Array<AutocompleteWithFilterOptionType<T>>;
     disableCloseOnSelect?: boolean;

package/LoadingModal/Modal.js

@@ -24,6 +24,6 @@ function LoadingModal(props) {
     return (_jsx(ThemeProvider, __assign({ theme: theme }, { children: _jsx(Dialog, __assign({ maxWidth: "xs", open: open, sx: { backgroundColor: "#7A7A7A97" }, PaperProps: { sx: { backgroundColor: "#F2F2F2CF" } }, onClose: function (_, reason) {
                 if (reason === "backdropClick")
                     return;
-            }, disableEscapeKeyDown: true }, { children: _jsx(DialogContent, { children: _jsxs(Grid, __assign({ container: true, direction: direction, justifyContent: "space-between", alignItems: "center", "data-testid": "loading-grid" }, { children: [_jsxs(Box, __assign({ position: "relative", display: "inline-flex", sx: { mt: 1.25 } }, { children: [_jsx(CircularProgress, { size: showProgess ? 56 : 40, value: percent, variant: showProgess ? "determinate" : "indeterminate" }), showProgess && percent >= 0 && (_jsx(Box, __assign({ top: 0, left: 0, bottom: 0, right: 0, position: "absolute", display: "flex", alignItems: "center", justifyContent: "center" }, { children: _jsxs(Typography, __assign({ variant: "caption" }, { children: [Math.round(percent), "%"] })) })))] })), _jsx(Typography, __assign({ variant: "subtitle1", component: "span", sx: { mt: 1 } }, { children: text }))] })) }) })) })));
+            }, disableScrollLock: true, disableAutoFocus: true, disableEnforceFocus: true, disableEscapeKeyDown: true }, { children: _jsx(DialogContent, { children: _jsxs(Grid, __assign({ container: true, direction: direction, justifyContent: "space-between", alignItems: "center", "data-testid": "loading-grid" }, { children: [_jsxs(Box, __assign({ position: "relative", display: "inline-flex", sx: { mt: 1.25 } }, { children: [_jsx(CircularProgress, { size: showProgess ? 56 : 40, value: percent, variant: showProgess ? "determinate" : "indeterminate" }), showProgess && percent >= 0 && (_jsx(Box, __assign({ top: 0, left: 0, bottom: 0, right: 0, position: "absolute", display: "flex", alignItems: "center", justifyContent: "center" }, { children: _jsxs(Typography, __assign({ variant: "caption" }, { children: [Math.round(percent), "%"] })) })))] })), _jsx(Typography, __assign({ variant: "subtitle1", component: "span", sx: { mt: 1 } }, { children: text }))] })) }) })) })));
 }
 export default LoadingModal;

package/package.json

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