react-asc 19.0.0 → 19.0.4

package/index.es.js

@@ -249,6 +249,7 @@ function useHover() {
     const handleMouseOver = () => setValue(true);
     const handleMouseOut = () => setValue(false);
     useEffect(() => {
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
         const node = ref.current;
         if (node) {
             node.addEventListener("mouseover", handleMouseOver);
@@ -264,7 +265,7 @@ function useHover() {
     return [ref, value];
 }
 
-const useConstructor = (callBack = () => { }) => {
+const useConstructor = (callBack) => {
     const [hasBeenCalled, setHasBeenCalled] = useState(false);
     if (hasBeenCalled)
         return;
@@ -575,7 +576,7 @@ const Breadcrumb = (props) => {
 
 const ConditionalWrapper = ({ condition, wrapper, children }) => condition ? wrapper(children) : children;
 
-var css_248z$F = ".BreadcrumbItem-module_breadcrumbItem__zsUq- + .BreadcrumbItem-module_breadcrumbItem__zsUq- {\n  padding-left: 0.5rem; }\n\n.BreadcrumbItem-module_breadcrumbItem__zsUq- + .BreadcrumbItem-module_breadcrumbItem__zsUq-::before {\n  float: left;\n  padding-right: 0.5rem;\n  color: #6c757d;\n  content: \"/\"; }\n\n.BreadcrumbItem-module_breadcrumbItem__zsUq- a:not([href]):not([class]) {\n  color: var(--primary); }\n\n.BreadcrumbItem-module_breadcrumbItem__zsUq-:hover {\n  cursor: pointer; }\n\n.BreadcrumbItem-module_breadcrumbItem__zsUq-.BreadcrumbItem-module_active__Kn1dA:hover {\n  cursor: unset; }\n";
+var css_248z$F = ".BreadcrumbItem-module_breadcrumbItem__zsUq- {\n  display: flex;\n  align-items: center; }\n  .BreadcrumbItem-module_breadcrumbItem__zsUq- + .BreadcrumbItem-module_breadcrumbItem__zsUq- {\n    padding-left: 0.5rem; }\n  .BreadcrumbItem-module_breadcrumbItem__zsUq- + .BreadcrumbItem-module_breadcrumbItem__zsUq-::before {\n    float: left;\n    padding-right: 0.5rem;\n    color: #6c757d;\n    content: \"/\"; }\n  .BreadcrumbItem-module_breadcrumbItem__zsUq- a:not([href]):not([class]) {\n    color: var(--primary); }\n  .BreadcrumbItem-module_breadcrumbItem__zsUq-:hover {\n    cursor: pointer; }\n  .BreadcrumbItem-module_breadcrumbItem__zsUq-.BreadcrumbItem-module_active__Kn1dA:hover {\n    cursor: unset; }\n";
 var styles$F = {"breadcrumbItem":"BreadcrumbItem-module_breadcrumbItem__zsUq-","active":"BreadcrumbItem-module_active__Kn1dA"};
 styleInject(css_248z$F);
 
@@ -592,9 +593,7 @@ const BreadcrumbItem = (props) => {
         onClick && onClick(event);
     };
     return (React.createElement("li", { className: getCssClasses(), onClick: handleClick },
-        React.createElement(ConditionalWrapper, { condition: !isActive, 
-            // eslint-disable-next-line jsx-a11y/anchor-is-valid
-            wrapper: label => React.createElement("a", null, label) }, children)));
+        React.createElement(ConditionalWrapper, { condition: !isActive, wrapper: label => React.createElement("a", null, label) }, children)));
 };
 
 var css_248z$E = ".Card-module_card__TQdQq {\n  background: var(--white);\n  border-radius: var(--borderRadius); }\n  .Card-module_card__TQdQq.Card-module_shadow__NxDVz {\n    box-shadow: var(--shadow); }\n";
@@ -670,7 +669,7 @@ const CardText = (props) => {
         className && cssClasses.push(className);
         return cssClasses.filter(css => css).join(' ');
     };
-    return (React.createElement("p", Object.assign({ className: getCssClasses() }, rest), props.children));
+    return (React.createElement("p", Object.assign({ className: getCssClasses() }, rest), children));
 };
 
 var css_248z$z = ".CardTitle-module_cardTitle__aiPSE {\n  margin-bottom: 0;\n  font-size: 1.5rem;\n  font-weight: 400;\n  line-height: 1.334;\n  letter-spacing: 0em; }\n";
@@ -776,8 +775,8 @@ var css_248z$v = ".FormLabel-module_formLabel__TXcHc {\n  margin-bottom: .5rem;
 var styles$v = {"formLabel":"FormLabel-module_formLabel__TXcHc"};
 styleInject(css_248z$v);
 
-const FormLabel = (props) => {
-    const { children, className, htmlFor } = props, rest = __rest(props, ["children", "className", "htmlFor"]);
+const FormLabel = (_a) => {
+    var { children, className, htmlFor } = _a, rest = __rest(_a, ["children", "className", "htmlFor"]);
     const getCssClasses = () => {
         const cssClasses = [];
         cssClasses.push(styles$v.formLabel);
@@ -793,7 +792,7 @@ const FormGroup = (props) => {
 };
 
 const FileInput = (props) => {
-    const { id, checked, className, children, name, multiple = false, accept, disabled, onChange, readOnly, value, deletable = false } = props, rest = __rest(props, ["id", "checked", "className", "children", "name", "multiple", "accept", "disabled", "onChange", "readOnly", "value", "deletable"]);
+    const { id, className, children, name, multiple = false, accept, disabled, onChange, readOnly, value, deletable = false } = props, rest = __rest(props, ["id", "className", "children", "name", "multiple", "accept", "disabled", "onChange", "readOnly", "value", "deletable"]);
     const inputFileElement = useRef(null);
     // eslint-disable-next-line @typescript-eslint/no-unused-vars
     const [model, setModel] = useState(value);
@@ -808,8 +807,7 @@ const FileInput = (props) => {
         setFileList(values);
         onChange && onChange(event);
     };
-    const handleOnDelete = (file) => {
-        // TODO - setModel
+    const handleOnDelete = () => {
         alert('coming soon');
     };
     return (React.createElement("div", { className: "d-flex align-items-start" },
@@ -837,7 +835,7 @@ const Select = (props) => {
         return cssClasses.filter(r => r).join(' ');
     };
     useEffect(() => {
-        const newValue = !!value ? value : '';
+        const newValue = value ? value : '';
         writeValue(newValue);
         if (newValue) {
             const option = options.find(o => o.value === newValue);
@@ -909,7 +907,7 @@ const Select = (props) => {
         let result = null;
         if (selectedOptions.length <= multipleMaxCountItems && selectedOptions.length > 0) {
             result = selectedOptions
-                .map(o => React.createElement(Chip, { key: o.value, className: "mr-2", color: COLOR.primary, isDeletable: true, onDelete: (e) => handleOnDelete(e, o) }, o.label));
+                .map(option => React.createElement(Chip, { key: option.value, className: "mr-2", color: COLOR.primary, isDeletable: true, onDelete: (e) => handleOnDelete(e, option) }, option.label));
         }
         else {
             result = React.createElement("span", null,
@@ -995,9 +993,11 @@ const FormInput = (props) => {
         !isValid && cssClasses.push('is-invalid');
         return cssClasses.filter(css => css).join(' ');
     };
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
     const handleOnInput = (value, type, name) => {
         onInput && onInput({ value, type, name });
     };
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
     const handleOnChange = (value, type, name) => {
         onChange && onChange({ value, type, name });
     };
@@ -1015,15 +1015,17 @@ const FormInput = (props) => {
         type === 'file' &&
             React.createElement(FileInput, { id: name, name: name, className: className + (!isValid ? ' is-invalid' : ''), value: value, autoFocus: autoFocus, readOnly: readonly, disabled: disabled, onChange: e => handleOnChange(e.target.value, type, name) }, "choose a file"),
         type === 'textarea' &&
-            React.createElement(Textarea, { id: name, name: name, className: className + (!isValid ? ' is-invalid' : ''), value: value, autoFocus: autoFocus, onInput: e => handleOnInput(e.target.value, type, name), onChange: e => handleOnChange((e === null || e === void 0 ? void 0 : e.target).value, type, name), placeholder: placeholder, rows: textareaOptions === null || textareaOptions === void 0 ? void 0 : textareaOptions.rows, style: (textareaOptions === null || textareaOptions === void 0 ? void 0 : textareaOptions.resize) !== false ? undefined : { resize: 'none' } }),
+            React.createElement(Textarea, { id: name, name: name, className: className + (!isValid ? ' is-invalid' : ''), value: value, autoFocus: autoFocus, onInput: e => handleOnInput(e.target.value, type, name), onChange: e => handleOnChange(e.target.value, type, name), placeholder: placeholder, rows: textareaOptions === null || textareaOptions === void 0 ? void 0 : textareaOptions.rows, style: (textareaOptions === null || textareaOptions === void 0 ? void 0 : textareaOptions.resize) !== false ? undefined : { resize: 'none' } }),
         type === 'select' &&
-            React.createElement(Select, { id: name, name: name, className: className + (!isValid ? ' is-invalid' : ''), value: value, multiple: selectOptions === null || selectOptions === void 0 ? void 0 : selectOptions.multiple, onChange: e => handleOnChange(e, type, name), onKeyDown: onKeyDown, options: options }),
+            React.createElement(Select, { id: name, name: name, className: className + (!isValid ? ' is-invalid' : ''), value: value, multiple: selectOptions === null || selectOptions === void 0 ? void 0 : selectOptions.multiple, onChange: e => handleOnChange(e, type, name), 
+                // onKeyDown={e => onKeyDown(e)}
+                options: options }),
         type === 'autocomplete' &&
-            React.createElement(AutoComplete, { id: name, name: name, className: className + (!isValid ? ' is-invalid' : ''), value: value, openOnFocus: autoCompleteOptions === null || autoCompleteOptions === void 0 ? void 0 : autoCompleteOptions.openOnFocus, onChange: e => handleOnChange(e, type, name), onKeyDown: onKeyDown, options: options }),
+            React.createElement(AutoComplete, { id: name, name: name, className: className + (!isValid ? ' is-invalid' : ''), value: value, openOnFocus: autoCompleteOptions === null || autoCompleteOptions === void 0 ? void 0 : autoCompleteOptions.openOnFocus, onChange: e => handleOnChange(e, type, name), options: options }),
         type === 'checkbox' &&
-            React.createElement(Checkbox, { id: name, name: name, label: label, className: (!isValid ? ' is-invalid' : ''), onChange: e => handleOnChange((e === null || e === void 0 ? void 0 : e.target).checked, type, name), checked: value, onKeyDown: onKeyDown }),
+            React.createElement(Checkbox, { id: name, name: name, label: label, className: (!isValid ? ' is-invalid' : ''), onChange: e => handleOnChange((e === null || e === void 0 ? void 0 : e.target).checked, type, name), checked: value === 'true' ? true : false }),
         type === 'radio' &&
-            React.createElement(Fragment, null, options.map((option) => React.createElement("div", { className: "form-check", key: option.id },
+            React.createElement(React.Fragment, null, options.map((option) => React.createElement("div", { className: "form-check", key: option.id },
                 React.createElement("input", { id: option.id ? option.id : option.value, name: name, type: "radio", className: "form-check-input", onChange: e => handleOnChange((e === null || e === void 0 ? void 0 : e.target).value, type, name), value: option.value, checked: value === option.value, onKeyDown: onKeyDown }),
                 React.createElement("label", { className: "form-check-label", htmlFor: option.id }, option.label))))));
 };
@@ -1044,7 +1046,7 @@ const FormError = (props) => {
         React.createElement("div", { className: className }, errors.map(e => React.createElement("div", { key: e.validator }, e.message)))));
 };
 
-const IsEmptyValidator = (value) => value === '' || value === null || value === undefined;
+const IsEmptyValidator = (value) => value.trim() === '' || value === null || value === undefined;
 
 const EmailValidator = (value) => {
     const isInvalidEmailFormat = value.match(/^([\w.%+-]+)@([\w-]+\.)+([\w]{2,})$/i) === null;
@@ -1074,7 +1076,7 @@ class Form extends Component {
             const values = keys.reduce((obj, f) => {
                 const control = this.getControl(f);
                 // TODO - refactor
-                const newValue = ((control.type === 'date' || control.type === 'datetime-local') && control.value && isValidDate(control.value)) ? new Date(control.value).toISOString() : control.value;
+                const newValue = ((control.type === 'date' || control.type === 'datetime-local') && control.value && isValidDate((control.value))) ? new Date((control.value)).toISOString() : control.value;
                 return (Object.assign(Object.assign({}, obj), { [f]: newValue }));
             }, {});
             if (this.state.isValid && this.state.isSubmitted) {
@@ -1121,7 +1123,7 @@ class Form extends Component {
         }
         return errors;
     }
-    handleInputChange(name, value, type) {
+    handleInputChange(name, value) {
         const field = this.getControl(name);
         field.value = value;
         // redundant mit handleOnBlur
@@ -1146,7 +1148,6 @@ class Form extends Component {
             }
         }
     }
-    ;
     isRequired(fieldName) {
         let result = false;
         result = this.getControl(fieldName).validators.indexOf('required') >= 0;
@@ -1165,7 +1166,6 @@ class Form extends Component {
         const cssClasses = [labelClassName, this.isRequired(fieldKey) ? 'required' : undefined];
         return React.createElement(FormLabel, { htmlFor: fieldKey, className: cssClasses.join(' ') }, label);
     }
-    ;
     // trigger via ref
     handleFormSubmit() {
         for (const fieldKey of Object.keys(this.state.controls)) {
@@ -1207,7 +1207,7 @@ class Form extends Component {
         this.setState({ controls: {}, isValid: false, isChanged: false, isSubmitted: false });
     }
     getFormGroupCssClass(fieldKey) {
-        let result = this.getControl(fieldKey).config.formGroupClassName;
+        const result = this.getControl(fieldKey).config.formGroupClassName;
         return result;
     }
     render() {
@@ -1215,7 +1215,7 @@ class Form extends Component {
             return (React.createElement(FormGroup, { key: fieldKey, className: this.getFormGroupCssClass(fieldKey) },
                 this.getControl(fieldKey).config.labelPosition !== 'behind' && this.getControl(fieldKey).type !== 'checkbox' &&
                     this.renderLabel(fieldKey, this.getControl(fieldKey).config.label, this.getControl(fieldKey).config.labelClassName),
-                React.createElement(FormInput, { autoFocus: this.getControl(fieldKey).config.autoFocus, className: this.getControl(fieldKey).config.formControlClassName, isValid: !this.isInvalid(fieldKey), label: this.getControl(fieldKey).config.label, name: fieldKey, options: this.getControl(fieldKey).config.options, placeholder: this.getControl(fieldKey).config.placeholder, textareaOptions: this.getControl(fieldKey).config.textareaOptions, selectOptions: this.getControl(fieldKey).config.selectOptions, autoCompleteOptions: this.getControl(fieldKey).config.autoCompleteOptions, type: this.getControl(fieldKey).type, value: this.getControl(fieldKey).value, disabled: this.getControl(fieldKey).config.disabled, readonly: this.getControl(fieldKey).config.readonly, onChange: ({ name, value, type }) => this.handleInputChange(name, value, type), onBlur: (e) => this.handleOnBlur(e), onKeyDown: (e) => this.handleOnKeyDown(e) }),
+                React.createElement(FormInput, { autoFocus: this.getControl(fieldKey).config.autoFocus, className: this.getControl(fieldKey).config.formControlClassName, isValid: !this.isInvalid(fieldKey), label: this.getControl(fieldKey).config.label, name: fieldKey, options: this.getControl(fieldKey).config.options, placeholder: this.getControl(fieldKey).config.placeholder, textareaOptions: this.getControl(fieldKey).config.textareaOptions, selectOptions: this.getControl(fieldKey).config.selectOptions, autoCompleteOptions: this.getControl(fieldKey).config.autoCompleteOptions, type: this.getControl(fieldKey).type, value: this.getControl(fieldKey).value, disabled: this.getControl(fieldKey).config.disabled, readonly: this.getControl(fieldKey).config.readonly, onChange: ({ name, value }) => this.handleInputChange(name, value), onBlur: (e) => this.handleOnBlur(e), onKeyDown: (e) => this.handleOnKeyDown(e) }),
                 this.getControl(fieldKey).config.labelPosition === 'behind' && this.getControl(fieldKey).type !== 'checkbox' &&
                     this.renderLabel(fieldKey, this.getControl(fieldKey).config.label, this.getControl(fieldKey).config.labelClassName),
                 this.getControl(fieldKey).config.hint &&
@@ -1230,7 +1230,9 @@ function isValidDate(dateObject) {
 }
 
 class FormControl {
-    constructor(value, validators = [], type, config) {
+    constructor(
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    value, validators = [], type, config) {
         this.value = value;
         this.validators = validators;
         this.type = type;
@@ -1247,7 +1249,7 @@ const DaySelect = (props) => {
         init();
     }, [month, year]);
     const init = () => {
-        var daysInMonth = new Date(year, month + 1, 0).getDate();
+        const daysInMonth = new Date(year, month + 1, 0).getDate();
         const newDays = [];
         for (let i = 1; i <= daysInMonth; i++) {
             newDays.push({ value: i.toString(), label: i.toString() });
@@ -1356,12 +1358,12 @@ const DateSelect = (props) => {
 // 	return Math.ceil((((d - yearStart) / 86400000) + 1) / 7)
 // };
 
-var css_248z$r = ".Drawer-module_drawer__kdQCk {\n  height: 100%;\n  z-index: 1101;\n  bottom: 0;\n  position: fixed;\n  background: white;\n  min-width: 280px;\n  overflow-y: auto; }\n  .Drawer-module_drawer__kdQCk.Drawer-module_permanent__c-y8y {\n    position: inherit;\n    z-index: 0; }\n  .Drawer-module_drawer__kdQCk.Drawer-module_left__loQVO {\n    order: 0; }\n  .Drawer-module_drawer__kdQCk.Drawer-module_right__sJ3mZ {\n    order: 2; }\n\n.Drawer-module_drawerOpen__07ptP {\n  overflow: hidden; }\n";
-var styles$r = {"drawer":"Drawer-module_drawer__kdQCk","permanent":"Drawer-module_permanent__c-y8y","left":"Drawer-module_left__loQVO","right":"Drawer-module_right__sJ3mZ","drawerOpen":"Drawer-module_drawerOpen__07ptP"};
+var css_248z$r = ".Drawer-module_drawer__kdQCk {\n  height: 100%;\n  z-index: 1101;\n  bottom: 0;\n  position: fixed;\n  background: white;\n  min-width: 280px;\n  overflow-y: auto; }\n  .Drawer-module_drawer__kdQCk.Drawer-module_permanent__c-y8y {\n    position: inherit;\n    z-index: 0; }\n  .Drawer-module_drawer__kdQCk.Drawer-module_left__loQVO {\n    order: 0; }\n  .Drawer-module_drawer__kdQCk.Drawer-module_right__sJ3mZ {\n    order: 2; }\n  .Drawer-module_drawer__kdQCk.Drawer-module_shadow__Myo3n {\n    box-shadow: var(--shadow); }\n\n.Drawer-module_drawerOpen__07ptP {\n  overflow: hidden; }\n";
+var styles$r = {"drawer":"Drawer-module_drawer__kdQCk","permanent":"Drawer-module_permanent__c-y8y","left":"Drawer-module_left__loQVO","right":"Drawer-module_right__sJ3mZ","shadow":"Drawer-module_shadow__Myo3n","drawerOpen":"Drawer-module_drawerOpen__07ptP"};
 styleInject(css_248z$r);
 
 const Drawer = (props) => {
-    const { children, className, position = 'left', permanent = false, target = document.body, onClickBackdrop } = props;
+    const { children, className, position = 'left', permanent = false, target = document.body, shadow = true, onClickBackdrop } = props, rest = __rest(props, ["children", "className", "position", "permanent", "target", "shadow", "onClickBackdrop"]);
     useEffect(() => {
         document.body.classList.add(styles$r.drawerOpen);
         return () => {
@@ -1371,18 +1373,19 @@ const Drawer = (props) => {
     const handleClickBackdrop = () => {
         onClickBackdrop && onClickBackdrop();
     };
-    return createPortal(React.createElement(Fragment, null,
-        React.createElement(DrawerContent, { className: className, position: position, permanent: permanent }, children),
+    return createPortal(React.createElement(React.Fragment, null,
+        React.createElement(DrawerContent, Object.assign({ className: className, position: position, permanent: permanent, shadow: shadow }, rest), children),
         !permanent && React.createElement(Backdrop, { onClick: handleClickBackdrop })), target);
 };
 const DrawerContent = (props) => {
-    const { children, className, position = 'left', permanent = false } = props;
+    const { children, className, position = 'left', permanent = false, shadow } = props, rest = __rest(props, ["children", "className", "position", "permanent", "shadow"]);
     const getCssClasses = () => {
         const cssClasses = [];
         cssClasses.push(styles$r.drawer);
-        className && cssClasses.push(className);
+        shadow && cssClasses.push(styles$r.shadow);
         !!permanent && cssClasses.push(styles$r['permanent']);
         position === 'left' ? cssClasses.push(styles$r['left']) : cssClasses.push(styles$r['right']);
+        className && cssClasses.push(className);
         return cssClasses.filter(css => css).join(' ');
     };
     const positionStyles = {
@@ -1392,7 +1395,7 @@ const DrawerContent = (props) => {
     const getStyles = () => {
         return !permanent ? positionStyles[position] : undefined;
     };
-    return (React.createElement("div", { className: getCssClasses(), style: getStyles() }, children));
+    return (React.createElement("div", Object.assign({ className: getCssClasses(), style: getStyles() }, rest), children));
 };
 
 var css_248z$q = ".MenuBody-module_menuBody__u4FIQ {\n  z-index: 1111;\n  margin: 0;\n  position: absolute;\n  top: 100%;\n  left: 0;\n  min-width: 10rem;\n  padding: 8px 0px;\n  font-size: 1rem;\n  color: #212529;\n  text-align: left;\n  list-style: none;\n  background-color: #fff;\n  background-clip: padding-box;\n  border-radius: var(--borderRadius); }\n  .MenuBody-module_menuBody__u4FIQ.MenuBody-module_shadow__OBp-f {\n    box-shadow: var(--shadow); }\n";
@@ -1403,14 +1406,15 @@ const MenuBody = (props) => {
     const { parentRef, children, className, shadow = true, menuPosition = 'left', onClickBackdrop } = props;
     const menuBodyRef = useRef(null);
     useEffect(() => {
-        if (menuBodyRef) {
+        if (menuBodyRef && parentRef.current && menuBodyRef.current) {
             createPopper(parentRef.current, menuBodyRef.current, {
                 placement: `${menuPosition}-start`,
                 modifiers: [
                     {
                         name: 'offset',
                         options: {
-                            offset: ({ placement, reference, popper }) => {
+                            // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                            offset: ({ placement, popper }) => {
                                 if (placement === 'left-start') {
                                     return [0, -popper.width]; // y, x
                                 }
@@ -1445,7 +1449,7 @@ var styles$p = {"menu":"Menu-module_menu__p8QL-"};
 styleInject(css_248z$p);
 
 const Menu = (props) => {
-    const { toggle, children, className, open, menuPosition, onClickBackdrop, onToggleClick } = props, rest = __rest(props, ["toggle", "children", "className", "open", "menuPosition", "onClickBackdrop", "onToggleClick"]);
+    const { toggle, children, className, open, menuPosition, onClickBackdrop } = props, rest = __rest(props, ["toggle", "children", "className", "open", "menuPosition", "onClickBackdrop"]);
     const menuContainer = useRef(null);
     const toggleContainerRef = useRef(null);
     const getCssClasses = () => {
@@ -1481,9 +1485,7 @@ const MenuItem = (props) => {
         e.stopPropagation();
         onClick && onClick(e);
     };
-    return (React.createElement(ConditionalWrapper, { condition: true, wrapper: children => ((type === 'item' ? (
-        // eslint-disable-next-line jsx-a11y/anchor-is-valid
-        React.createElement("a", { className: getCssClasses(), onClick: handleClick }, children)) :
+    return (React.createElement(ConditionalWrapper, { condition: true, wrapper: children => ((type === 'item' ? (React.createElement("a", { className: getCssClasses(), onClick: handleClick }, children)) :
             React.createElement("div", { className: getCssClasses(), onClick: handleClick }, children))) }, children));
 };
 
@@ -1645,23 +1647,21 @@ const LoadingIndicatorContainer = ({ children }) => {
 
 class LoadingIndicatorService {
     show() {
-        return new Promise((resolve, reject) => {
-            if (this.container) {
-                this.hide();
-            }
-            this.container = document.createElement('div');
-            this.container.classList.add('snackbar-container');
-            document.body.appendChild(this.container);
-            render(React.createElement(LoadingIndicatorContainer, null,
-                React.createElement(LoadingIndicator, null)), this.container);
-        });
+        if (this.container) {
+            this.hide();
+        }
+        this.container = document.createElement('div');
+        this.container.classList.add('snackbar-container');
+        document.body.appendChild(this.container);
+        render(React.createElement(LoadingIndicatorContainer, null,
+            React.createElement(LoadingIndicator, null)), this.container);
     }
     hide() {
         if (this.container) {
             unmountComponentAtNode(this.container);
             document.body.removeChild(this.container);
-            this.container = null;
-            clearTimeout(this.handler);
+            this.container = undefined;
+            this.handler && clearTimeout(this.handler);
         }
     }
 }
@@ -1672,11 +1672,11 @@ var styles$h = {"modalHeader":"ModalHeader-module_modalHeader__tw-u-"};
 styleInject(css_248z$h);
 
 const ModalHeader = (props) => {
-    const { children, isDismissable = false, onClose } = props;
+    const { children, isDismissable = false, onClose } = props, rest = __rest(props, ["children", "isDismissable", "onClose"]);
     const handleClick = () => {
         onClose && onClose();
     };
-    return (React.createElement("div", { className: "modal-header " + styles$h.modalHeader },
+    return (React.createElement("div", Object.assign({ className: "modal-header " + styles$h.modalHeader }, rest),
         React.createElement("h5", { className: "modal-title" }, children),
         isDismissable &&
             React.createElement(IconButton, { icon: React.createElement(TimesSolidIcon, null), variant: VARIANT.text, onClick: handleClick })));
@@ -1717,7 +1717,7 @@ const Modal = (props) => {
     return (React.createElement(Fragment, null,
         React.createElement("div", { className: "modal show " + styles$g.modal, style: { display: 'block' } },
             React.createElement("div", { className: getCssClass() },
-                React.createElement("div", { className: 'modal-content ' + (!!fullScreen ? styles$g['modalContent'] : undefined) },
+                React.createElement("div", { className: 'modal-content ' + (fullScreen ? styles$g['modalContent'] : undefined) },
                     header &&
                         React.createElement(ModalHeader, { isDismissable: isDismissable, onClose: () => onHeaderCloseClick && onHeaderCloseClick() }, header),
                     React.createElement(ModalBody, null, children),
@@ -1946,7 +1946,7 @@ class SnackbarService {
     show(message, options) {
         const defaultOptions = { timeout: 3000, actionText: 'ok', color: COLOR.dark, target: document.body };
         const mergedOptions = Object.assign(defaultOptions, options);
-        return new Promise((resolve, reject) => {
+        return new Promise((resolve) => {
             if (this.container) {
                 this.hide();
             }
@@ -1969,8 +1969,8 @@ class SnackbarService {
         if (this.container) {
             unmountComponentAtNode(this.container);
             document.body.removeChild(this.container);
-            this.container = null;
-            clearTimeout(this.handler);
+            this.container = undefined;
+            this.handler && clearTimeout(this.handler);
         }
     }
 }
@@ -2124,7 +2124,7 @@ const Stepper = (props) => {
                 isDisabled: isLinear && (activeIndex + 1 < index),
                 showLabel: showLabel,
                 showProgressCheckIcon: showProgressCheckIcon,
-                onClick: (event, val) => handleClickStep(event, val, index)
+                onClick: (e) => handleClickStep(e.event, e.value, index)
             });
     };
     const isStepOptional = (index) => {
@@ -2217,9 +2217,9 @@ styleInject(css_248z$6);
 const Step = (props) => {
     const { className, label, showLabel, index, value, isActive, isDone, isDisabled, showProgressCheckIcon, onClick } = props;
     const [hoverRef, isHovered] = useHover();
-    const handleClick = (e) => {
+    const handleClick = (event) => {
         if (!isDisabled) {
-            onClick && onClick(e, value);
+            onClick && onClick({ event, value });
         }
     };
     const getCssClasses = () => {
@@ -2237,11 +2237,18 @@ const Step = (props) => {
         isDisabled && cssClasses.push(styles$6['disabled']);
         return cssClasses.filter(css => css).join(' ');
     };
+    const getCssClassesStepValue = () => {
+        const cssClasses = [];
+        cssClasses.push(styles$6.stepValue);
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        isActive && cssClasses.push(styles$6.stepValue['isActive']);
+        return cssClasses.filter(css => css).join(' ');
+    };
     return (React.createElement("div", { ref: hoverRef, className: getCssClasses(), onClick: handleClick },
         React.createElement("div", { className: getCssClassesStep() },
             React.createElement(Icon, { className: styles$6.stepIconCircle, iconColor: (isHovered || isActive) && !isDisabled ? COLOR.primary : COLOR.secondary },
                 React.createElement(CircleSolidIcon, null)),
-            React.createElement("div", { className: styles$6.stepValue + ' ' + (isActive ? (styles$6.stepValue['isActive']) : '') }, showProgressCheckIcon && isActive && isDone ?
+            React.createElement("div", { className: getCssClassesStepValue() }, showProgressCheckIcon && isActive && isDone ?
                 React.createElement(Icon, null,
                     React.createElement(CheckSolidIcon, null))
                 :
@@ -2307,17 +2314,17 @@ const Tabs = (props) => {
     const handleClickTab = (event, newValue, index) => {
         setSelectedValue(newValue);
         setSelectedIndex(index);
-        onChange && onChange(event, newValue);
+        onChange && onChange({ event, newValue });
     };
     const renderTabs = (child, index) => {
         return React.isValidElement(child) && cloneElement(child, {
             key: child.props.value,
             isActive: child.props.value === selectedValue,
             fixed: fixed,
-            onClick: (event, newValue) => handleClickTab(event, newValue, index),
+            onClick: (e) => handleClickTab(e.event, e.value, index),
         });
     };
-    return (React.createElement(Fragment, null,
+    return (React.createElement(React.Fragment, null,
         React.createElement("div", { className: getCssClasses() },
             children && React.Children.toArray(children).map((child, index) => renderTabs(child, index)),
             children &&
@@ -2339,11 +2346,11 @@ const Tab = (props) => {
         className && cssClasses.push(className);
         return cssClasses.filter(css => css).join(' ');
     };
-    return (React.createElement(Button, { className: getCssClasses(), onClick: (event) => onClick && onClick(event, value), isActive: isActive, disabled: disabled }, label));
+    return (React.createElement(Button, { className: getCssClasses(), onClick: (event) => onClick && onClick({ event, value }), isActive: isActive, disabled: disabled }, label));
 };
 
 const TabPanel = (props) => {
-    const { children, className, value, index } = props, rest = __rest(props, ["children", "className", "value", "index"]);
+    const { children, value, index } = props, rest = __rest(props, ["children", "value", "index"]);
     return (React.createElement("div", Object.assign({ role: "tabpanel", hidden: value !== index, id: `tabpanel-${index}`, "aria-labelledby": `wrapped-tab-${index}` }, rest), value === index && children));
 };
 
@@ -2354,10 +2361,10 @@ styleInject(css_248z$2);
 const Tooltip = (props) => {
     const { children, text, placement = 'bottom' } = props;
     const [show, setShow] = useState(false);
-    const refChild = useRef(null);
-    const refTooltip = useRef(null);
+    const refChild = useRef();
+    const refTooltip = useRef();
     useEffect(() => {
-        if (show === true && refChild && refChild.current) {
+        if (show === true && refChild && refChild.current && refTooltip && refTooltip.current) {
             // TODO - extract to own component?
             createPopper(refChild.current, refTooltip.current, {
                 placement: placement,
@@ -2376,7 +2383,7 @@ const Tooltip = (props) => {
     const handleMouseLeave = () => {
         setShow(false);
     };
-    return (React.createElement(Fragment, null,
+    return (React.createElement(React.Fragment, null,
         React.createElement("div", { className: styles$2.tooltipContainer, ref: refChild, id: "tooltip-container" }, cloneElement(children, {
             onMouseOver: handleMouseOver,
             onMouseLeave: handleMouseLeave,
@@ -2546,7 +2553,7 @@ var styles = {"treeItem":"TreeItem-module_treeItem__Mxsjr"};
 styleInject(css_248z);
 
 const TreeItem = (props) => {
-    const { nodeId, label, children, className, isExpanded, isSelected, isSelectable, onToggleExpand, onSelect } = props;
+    const { nodeId, label, children, className, isExpanded, isSelected, isSelectable, onToggleExpand, onItemSelect } = props;
     const [_isExpanded, setIsExpanded] = useState(false);
     const [_isSelected, setIsSelected] = useState(false);
     const getCssClasses = () => {
@@ -2569,7 +2576,7 @@ const TreeItem = (props) => {
     };
     const handleOnSelect = (nodeId) => {
         setIsSelected(!_isSelected);
-        onSelect && onSelect(nodeId, !_isSelected);
+        onItemSelect && onItemSelect({ id: nodeId, isSelected: !_isSelected });
     };
     return (React.createElement("li", { className: getCssClasses(), style: { paddingLeft: `${(48 * (children ? 0 : 1))}px` } },
         React.createElement("div", { className: "d-flex align-items-center" },