react-asc 19.0.0 → 19.0.4

package/index.js

@@ -257,6 +257,7 @@ function useHover() {
     const handleMouseOver = () => setValue(true);
     const handleMouseOut = () => setValue(false);
     React.useEffect(() => {
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
         const node = ref.current;
         if (node) {
             node.addEventListener("mouseover", handleMouseOver);
@@ -272,7 +273,7 @@ function useHover() {
     return [ref, value];
 }
 
-const useConstructor = (callBack = () => { }) => {
+const useConstructor = (callBack) => {
     const [hasBeenCalled, setHasBeenCalled] = React.useState(false);
     if (hasBeenCalled)
         return;
@@ -583,7 +584,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);
 
@@ -600,9 +601,7 @@ const BreadcrumbItem = (props) => {
         onClick && onClick(event);
     };
     return (React__default["default"].createElement("li", { className: getCssClasses(), onClick: handleClick },
-        React__default["default"].createElement(ConditionalWrapper, { condition: !isActive, 
-            // eslint-disable-next-line jsx-a11y/anchor-is-valid
-            wrapper: label => React__default["default"].createElement("a", null, label) }, children)));
+        React__default["default"].createElement(ConditionalWrapper, { condition: !isActive, wrapper: label => React__default["default"].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";
@@ -678,7 +677,7 @@ const CardText = (props) => {
         className && cssClasses.push(className);
         return cssClasses.filter(css => css).join(' ');
     };
-    return (React__default["default"].createElement("p", Object.assign({ className: getCssClasses() }, rest), props.children));
+    return (React__default["default"].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";
@@ -784,8 +783,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);
@@ -801,7 +800,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 = React.useRef(null);
     // eslint-disable-next-line @typescript-eslint/no-unused-vars
     const [model, setModel] = React.useState(value);
@@ -816,8 +815,7 @@ const FileInput = (props) => {
         setFileList(values);
         onChange && onChange(event);
     };
-    const handleOnDelete = (file) => {
-        // TODO - setModel
+    const handleOnDelete = () => {
         alert('coming soon');
     };
     return (React__default["default"].createElement("div", { className: "d-flex align-items-start" },
@@ -845,7 +843,7 @@ const Select = (props) => {
         return cssClasses.filter(r => r).join(' ');
     };
     React.useEffect(() => {
-        const newValue = !!value ? value : '';
+        const newValue = value ? value : '';
         writeValue(newValue);
         if (newValue) {
             const option = options.find(o => o.value === newValue);
@@ -917,7 +915,7 @@ const Select = (props) => {
         let result = null;
         if (selectedOptions.length <= multipleMaxCountItems && selectedOptions.length > 0) {
             result = selectedOptions
-                .map(o => React__default["default"].createElement(Chip, { key: o.value, className: "mr-2", color: exports.COLOR.primary, isDeletable: true, onDelete: (e) => handleOnDelete(e, o) }, o.label));
+                .map(option => React__default["default"].createElement(Chip, { key: option.value, className: "mr-2", color: exports.COLOR.primary, isDeletable: true, onDelete: (e) => handleOnDelete(e, option) }, option.label));
         }
         else {
             result = React__default["default"].createElement("span", null,
@@ -1003,9 +1001,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 });
     };
@@ -1023,15 +1023,17 @@ const FormInput = (props) => {
         type === 'file' &&
             React__default["default"].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__default["default"].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__default["default"].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__default["default"].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__default["default"].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__default["default"].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__default["default"].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__default["default"].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__default["default"].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__default["default"].createElement(React.Fragment, null, options.map((option) => React__default["default"].createElement("div", { className: "form-check", key: option.id },
+            React__default["default"].createElement(React__default["default"].Fragment, null, options.map((option) => React__default["default"].createElement("div", { className: "form-check", key: option.id },
                 React__default["default"].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__default["default"].createElement("label", { className: "form-check-label", htmlFor: option.id }, option.label))))));
 };
@@ -1052,7 +1054,7 @@ const FormError = (props) => {
         React__default["default"].createElement("div", { className: className }, errors.map(e => React__default["default"].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;
@@ -1082,7 +1084,7 @@ class Form extends React.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) {
@@ -1129,7 +1131,7 @@ class Form extends React.Component {
         }
         return errors;
     }
-    handleInputChange(name, value, type) {
+    handleInputChange(name, value) {
         const field = this.getControl(name);
         field.value = value;
         // redundant mit handleOnBlur
@@ -1154,7 +1156,6 @@ class Form extends React.Component {
             }
         }
     }
-    ;
     isRequired(fieldName) {
         let result = false;
         result = this.getControl(fieldName).validators.indexOf('required') >= 0;
@@ -1173,7 +1174,6 @@ class Form extends React.Component {
         const cssClasses = [labelClassName, this.isRequired(fieldKey) ? 'required' : undefined];
         return React__default["default"].createElement(FormLabel, { htmlFor: fieldKey, className: cssClasses.join(' ') }, label);
     }
-    ;
     // trigger via ref
     handleFormSubmit() {
         for (const fieldKey of Object.keys(this.state.controls)) {
@@ -1215,7 +1215,7 @@ class Form extends React.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() {
@@ -1223,7 +1223,7 @@ class Form extends React.Component {
             return (React__default["default"].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__default["default"].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__default["default"].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 &&
@@ -1238,7 +1238,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;
@@ -1255,7 +1257,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() });
@@ -1364,12 +1366,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"]);
     React.useEffect(() => {
         document.body.classList.add(styles$r.drawerOpen);
         return () => {
@@ -1379,18 +1381,19 @@ const Drawer = (props) => {
     const handleClickBackdrop = () => {
         onClickBackdrop && onClickBackdrop();
     };
-    return reactDom.createPortal(React__default["default"].createElement(React.Fragment, null,
-        React__default["default"].createElement(DrawerContent, { className: className, position: position, permanent: permanent }, children),
+    return reactDom.createPortal(React__default["default"].createElement(React__default["default"].Fragment, null,
+        React__default["default"].createElement(DrawerContent, Object.assign({ className: className, position: position, permanent: permanent, shadow: shadow }, rest), children),
         !permanent && React__default["default"].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 = {
@@ -1400,7 +1403,7 @@ const DrawerContent = (props) => {
     const getStyles = () => {
         return !permanent ? positionStyles[position] : undefined;
     };
-    return (React__default["default"].createElement("div", { className: getCssClasses(), style: getStyles() }, children));
+    return (React__default["default"].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";
@@ -1411,14 +1414,15 @@ const MenuBody = (props) => {
     const { parentRef, children, className, shadow = true, menuPosition = 'left', onClickBackdrop } = props;
     const menuBodyRef = React.useRef(null);
     React.useEffect(() => {
-        if (menuBodyRef) {
+        if (menuBodyRef && parentRef.current && menuBodyRef.current) {
             core.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
                                 }
@@ -1453,7 +1457,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 = React.useRef(null);
     const toggleContainerRef = React.useRef(null);
     const getCssClasses = () => {
@@ -1489,9 +1493,7 @@ const MenuItem = (props) => {
         e.stopPropagation();
         onClick && onClick(e);
     };
-    return (React__default["default"].createElement(ConditionalWrapper, { condition: true, wrapper: children => ((type === 'item' ? (
-        // eslint-disable-next-line jsx-a11y/anchor-is-valid
-        React__default["default"].createElement("a", { className: getCssClasses(), onClick: handleClick }, children)) :
+    return (React__default["default"].createElement(ConditionalWrapper, { condition: true, wrapper: children => ((type === 'item' ? (React__default["default"].createElement("a", { className: getCssClasses(), onClick: handleClick }, children)) :
             React__default["default"].createElement("div", { className: getCssClasses(), onClick: handleClick }, children))) }, children));
 };
 
@@ -1653,23 +1655,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);
-            reactDom.render(React__default["default"].createElement(LoadingIndicatorContainer, null,
-                React__default["default"].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);
+        reactDom.render(React__default["default"].createElement(LoadingIndicatorContainer, null,
+            React__default["default"].createElement(LoadingIndicator, null)), this.container);
     }
     hide() {
         if (this.container) {
             reactDom.unmountComponentAtNode(this.container);
             document.body.removeChild(this.container);
-            this.container = null;
-            clearTimeout(this.handler);
+            this.container = undefined;
+            this.handler && clearTimeout(this.handler);
         }
     }
 }
@@ -1680,11 +1680,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__default["default"].createElement("div", { className: "modal-header " + styles$h.modalHeader },
+    return (React__default["default"].createElement("div", Object.assign({ className: "modal-header " + styles$h.modalHeader }, rest),
         React__default["default"].createElement("h5", { className: "modal-title" }, children),
         isDismissable &&
             React__default["default"].createElement(IconButton, { icon: React__default["default"].createElement(TimesSolidIcon, null), variant: exports.VARIANT.text, onClick: handleClick })));
@@ -1725,7 +1725,7 @@ const Modal = (props) => {
     return (React__default["default"].createElement(React.Fragment, null,
         React__default["default"].createElement("div", { className: "modal show " + styles$g.modal, style: { display: 'block' } },
             React__default["default"].createElement("div", { className: getCssClass() },
-                React__default["default"].createElement("div", { className: 'modal-content ' + (!!fullScreen ? styles$g['modalContent'] : undefined) },
+                React__default["default"].createElement("div", { className: 'modal-content ' + (fullScreen ? styles$g['modalContent'] : undefined) },
                     header &&
                         React__default["default"].createElement(ModalHeader, { isDismissable: isDismissable, onClose: () => onHeaderCloseClick && onHeaderCloseClick() }, header),
                     React__default["default"].createElement(ModalBody, null, children),
@@ -1954,7 +1954,7 @@ class SnackbarService {
     show(message, options) {
         const defaultOptions = { timeout: 3000, actionText: 'ok', color: exports.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();
             }
@@ -1977,8 +1977,8 @@ class SnackbarService {
         if (this.container) {
             reactDom.unmountComponentAtNode(this.container);
             document.body.removeChild(this.container);
-            this.container = null;
-            clearTimeout(this.handler);
+            this.container = undefined;
+            this.handler && clearTimeout(this.handler);
         }
     }
 }
@@ -2132,7 +2132,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) => {
@@ -2225,9 +2225,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 = () => {
@@ -2245,11 +2245,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__default["default"].createElement("div", { ref: hoverRef, className: getCssClasses(), onClick: handleClick },
         React__default["default"].createElement("div", { className: getCssClassesStep() },
             React__default["default"].createElement(Icon, { className: styles$6.stepIconCircle, iconColor: (isHovered || isActive) && !isDisabled ? exports.COLOR.primary : exports.COLOR.secondary },
                 React__default["default"].createElement(CircleSolidIcon, null)),
-            React__default["default"].createElement("div", { className: styles$6.stepValue + ' ' + (isActive ? (styles$6.stepValue['isActive']) : '') }, showProgressCheckIcon && isActive && isDone ?
+            React__default["default"].createElement("div", { className: getCssClassesStepValue() }, showProgressCheckIcon && isActive && isDone ?
                 React__default["default"].createElement(Icon, null,
                     React__default["default"].createElement(CheckSolidIcon, null))
                 :
@@ -2315,17 +2322,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__default["default"].isValidElement(child) && React.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__default["default"].createElement(React.Fragment, null,
+    return (React__default["default"].createElement(React__default["default"].Fragment, null,
         React__default["default"].createElement("div", { className: getCssClasses() },
             children && React__default["default"].Children.toArray(children).map((child, index) => renderTabs(child, index)),
             children &&
@@ -2347,11 +2354,11 @@ const Tab = (props) => {
         className && cssClasses.push(className);
         return cssClasses.filter(css => css).join(' ');
     };
-    return (React__default["default"].createElement(Button, { className: getCssClasses(), onClick: (event) => onClick && onClick(event, value), isActive: isActive, disabled: disabled }, label));
+    return (React__default["default"].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__default["default"].createElement("div", Object.assign({ role: "tabpanel", hidden: value !== index, id: `tabpanel-${index}`, "aria-labelledby": `wrapped-tab-${index}` }, rest), value === index && children));
 };
 
@@ -2362,10 +2369,10 @@ styleInject(css_248z$2);
 const Tooltip = (props) => {
     const { children, text, placement = 'bottom' } = props;
     const [show, setShow] = React.useState(false);
-    const refChild = React.useRef(null);
-    const refTooltip = React.useRef(null);
+    const refChild = React.useRef();
+    const refTooltip = React.useRef();
     React.useEffect(() => {
-        if (show === true && refChild && refChild.current) {
+        if (show === true && refChild && refChild.current && refTooltip && refTooltip.current) {
             // TODO - extract to own component?
             core.createPopper(refChild.current, refTooltip.current, {
                 placement: placement,
@@ -2384,7 +2391,7 @@ const Tooltip = (props) => {
     const handleMouseLeave = () => {
         setShow(false);
     };
-    return (React__default["default"].createElement(React.Fragment, null,
+    return (React__default["default"].createElement(React__default["default"].Fragment, null,
         React__default["default"].createElement("div", { className: styles$2.tooltipContainer, ref: refChild, id: "tooltip-container" }, React.cloneElement(children, {
             onMouseOver: handleMouseOver,
             onMouseLeave: handleMouseLeave,
@@ -2554,7 +2561,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] = React.useState(false);
     const [_isSelected, setIsSelected] = React.useState(false);
     const getCssClasses = () => {
@@ -2577,7 +2584,7 @@ const TreeItem = (props) => {
     };
     const handleOnSelect = (nodeId) => {
         setIsSelected(!_isSelected);
-        onSelect && onSelect(nodeId, !_isSelected);
+        onItemSelect && onItemSelect({ id: nodeId, isSelected: !_isSelected });
     };
     return (React__default["default"].createElement("li", { className: getCssClasses(), style: { paddingLeft: `${(48 * (children ? 0 : 1))}px` } },
         React__default["default"].createElement("div", { className: "d-flex align-items-center" },

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "react-asc",
-	"version": "19.0.0",
+	"version": "19.0.4",
 	"description": "handcrafted react components",
 	"main": "index.js",
 	"module": "index.es.js",

package/react-asc.scss

@@ -1,3 +1,55 @@
+:root {
+	--primary-light: #6573c3;
+	--primary: #3f51b5;
+	--primary-dark: #2c387e;
+	--primary-contrast-text: #fff;
+	--primary-highlight: #d6dbf7;
+
+	--secondary-light: #e5e7eb;
+	--secondary: #dfe1e6;
+	--secondary-dark: #9c9da1;
+	--secondary-contrast-text: #fff;
+	--secondary-highlight: rgb(232, 234, 250);
+
+	--accent-light: #fd96b8;
+	--accent: #ff4081;
+	--accent-dark: #fd2c72;
+	--accent-contrast-text: #fff;
+	--accent-highlight: #fca9c5;
+
+	// rename!?
+	--light-light: #ffffff;
+	--light: #f8f9fa;
+	--light-dark: #ebebeb;
+	--light-contrast-text: #212529;
+	--light-highlight: #f8f9fa;
+
+	--dark-light: #616468;
+	--dark: #343a40;
+	--dark-dark: #343a40;
+	--dark-contrast-text: #fff;
+	--dark-highlight: #5e6164;
+
+	--white: #fff;
+
+	--bodyBg: white;
+	--bodyColor: #212529;
+
+	--borderRadius: 5px;
+	--shadow: 0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14),
+		0px 1px 5px 0px rgba(0, 0, 0, 0.12);
+
+	--buttonMinWidth: 62px;
+	--buttonPadding: 11px 15px;
+
+	--fontFamily: "Segoe UI", "Roboto", "Helvetica Neue", "Arial";
+	--fontSize: 16px;
+
+	--highlight: rgba(204, 216, 224, 0.2); // ???
+
+	--breakpointMd: 768px;
+}
+
 .input-group-append {
 	.btn {
 		min-width: auto;
@@ -112,58 +164,6 @@
 }
 
 
-// TODO
-:root {
-	--primary-light: #6573c3;
-	--primary: #3f51b5;
-	--primary-dark: #2c387e;
-	--primary-contrast-text: #fff;
-	--primary-highlight: #d6dbf7;
-
-	--secondary-light: #e5e7eb;
-	--secondary: #dfe1e6;
-	--secondary-dark: #9c9da1;
-	--secondary-contrast-text: #fff;
-	--secondary-highlight: rgb(232, 234, 250);
-
-	--accent-light: #fd96b8;
-	--accent: #ff4081;
-	--accent-dark: #fd2c72;
-	--accent-contrast-text: #fff;
-	--accent-highlight: #fca9c5;
-
-	// rename!?
-	--light-light: #ffffff;
-	--light: #f8f9fa;
-	--light-dark: #ebebeb;
-	--light-contrast-text: #212529;
-	--light-highlight: #f8f9fa;
-
-	--dark-light: #616468;
-	--dark: #343a40;
-	--dark-dark: #343a40;
-	--dark-contrast-text: #fff;
-	--dark-highlight: #5e6164;
-
-	--white: #fff;
-
-	--bodyBg: #f8f9fa;
-	--bodyColor: #212529;
-
-	--borderRadius: 5px;
-	--shadow: 0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12);
-
-	--buttonMinWidth: 62px;
-	--buttonPadding: 11px 15px;
-
-	--fontFamily: "Segoe UI", "Roboto", "Helvetica Neue", "Arial";
-	--fontSize: 16px;
-
-	--highlight: rgba(204, 216, 224, 0.2); // ???
-
-	--breakpointMd: 768px;
-}
-
 label.required {
 	&::after {
 		display: inline-block;