react-asc 19.0.1 → 19.0.2

package/components/AutoComplete/AutoComplete.d.ts

@@ -15,6 +15,5 @@ export interface IAutoCompleteProps {
     showClearButton?: boolean;
     onSelect?: (val: ISelectOption) => void;
     onChange?: (val: string | undefined) => void;
-    onKeyDown?: (event: any) => void;
 }
 export declare const AutoComplete: (props: IAutoCompleteProps) => JSX.Element;

package/components/Badge/Badge.d.ts

@@ -2,6 +2,6 @@ import React from 'react';
 import { COLOR } from "../component.enums";
 export interface IBadgeProps extends React.ComponentProps<"div"> {
     color?: COLOR;
-    content?: any;
+    content?: React.ReactNode;
 }
 export declare const Badge: (props: IBadgeProps) => JSX.Element;

package/components/Breadcrumb/BreadcrumbItem.d.ts

@@ -1,9 +1,6 @@
-import React, { ReactNode } from 'react';
-export interface IBreadcrumbItemProps {
-    className?: string;
+import React from 'react';
+export interface IBreadcrumbItemProps extends React.ComponentProps<'li'> {
     isActive?: boolean;
     path?: string;
-    children?: ReactNode;
-    onClick?: (event: React.MouseEvent) => void;
 }
 export declare const BreadcrumbItem: (props: IBreadcrumbItemProps) => JSX.Element;

package/components/ButtonGroup/ButtonGroup.d.ts

@@ -1,4 +1,2 @@
 import React from 'react';
-export interface IButtonGroupProps extends React.ComponentProps<"div"> {
-}
-export declare const ButtonGroup: (props: IButtonGroupProps) => JSX.Element;
+export declare const ButtonGroup: (props: React.ComponentProps<"div">) => JSX.Element;

package/components/Card/CardBody.d.ts

@@ -1,5 +1,2 @@
 import React from 'react';
-interface ICardBodyProps extends React.ComponentProps<"div"> {
-}
-export declare const CardBody: (props: ICardBodyProps) => JSX.Element;
-export {};
+export declare const CardBody: (props: React.ComponentProps<"div">) => JSX.Element;

package/components/Card/CardFooter.d.ts

@@ -1,5 +1,2 @@
 import React from 'react';
-interface ICardFooter extends React.ComponentProps<"div"> {
-}
-export declare const CardFooter: (props: ICardFooter) => JSX.Element;
-export {};
+export declare const CardFooter: (props: React.ComponentProps<"div">) => JSX.Element;

package/components/Card/CardImage.d.ts

@@ -1,5 +1,2 @@
 import React from 'react';
-interface ICardImageProps extends React.ComponentProps<"img"> {
-}
-export declare const CardImage: (props: ICardImageProps) => JSX.Element;
-export {};
+export declare const CardImage: (props: React.ComponentProps<"img">) => JSX.Element;

package/components/Card/CardSubtitle.d.ts

@@ -1,5 +1,2 @@
 import React from 'react';
-interface ICardSubtitleProps extends React.ComponentProps<"div"> {
-}
-export declare const CardSubtitle: (props: ICardSubtitleProps) => JSX.Element;
-export {};
+export declare const CardSubtitle: (props: React.ComponentProps<"div">) => JSX.Element;

package/components/Card/CardText.d.ts

@@ -1,5 +1,2 @@
 import React from 'react';
-interface ICardTextProps extends React.ComponentProps<"p"> {
-}
-export declare const CardText: (props: ICardTextProps) => JSX.Element;
-export {};
+export declare const CardText: (props: React.ComponentProps<"p">) => JSX.Element;

package/components/Chip/Chip.d.ts

@@ -6,6 +6,6 @@ export interface IChipProps extends React.ComponentProps<"div"> {
     onClick?: (e: React.MouseEvent<Element>) => void;
     isDeletable?: boolean;
     onDelete?: (e: React.MouseEvent<Element>) => void;
-    deleteIcon?: any;
+    deleteIcon?: JSX.Element;
 }
 export declare const Chip: (props: IChipProps) => JSX.Element;

package/components/ConditionalWrapper/ConditionalWrapper.d.ts

@@ -1,8 +1,8 @@
-/// <reference types="react" />
+import React from "react";
 interface IConditionalWrapperProps {
     condition: boolean;
-    wrapper: (children: React.ReactNode) => any;
-    children: React.ReactNode;
+    wrapper: (children: React.ReactNode) => JSX.Element;
+    children: any;
 }
 export declare const ConditionalWrapper: ({ condition, wrapper, children }: IConditionalWrapperProps) => any;
 export {};

package/components/FloatingActionButton/FloatingActionButton.d.ts

@@ -7,6 +7,6 @@ export interface IFloatingActionButtonProps extends React.DetailedHTMLProps<Reac
     fixed?: boolean;
     isActive?: boolean;
     disabled?: boolean;
-    onClick?: (e: any) => void;
+    onClick?: (e: React.MouseEvent) => void;
 }
 export declare const FloatingActionButton: (props: IFloatingActionButtonProps) => JSX.Element;

package/components/Form/Form.d.ts

@@ -31,7 +31,7 @@ export declare class Form extends Component<IFormProps, IFormState> {
     private renderLabel;
     handleFormSubmit(): void;
     handleFormReset(): void;
-    handleOnKeyDown(e: React.KeyboardEvent<HTMLInputElement>): void;
+    handleOnKeyDown(e: React.KeyboardEvent<HTMLInputElement | undefined>): void;
     destroy(): void;
     getFormGroupCssClass(fieldKey: string): string | undefined;
     render(): JSX.Element;

package/components/Form/FormHint/FormHint.d.ts

@@ -1,5 +1,2 @@
 import React from 'react';
-interface IFormHintProps extends React.ComponentProps<"small"> {
-}
-export declare const FormHint: (props: IFormHintProps) => JSX.Element;
-export {};
+export declare const FormHint: (props: React.ComponentProps<"small">) => JSX.Element;

package/components/Form/FormInput/FormInput.d.ts

@@ -7,7 +7,7 @@ export interface IFormInputEvent {
     name?: string;
 }
 export interface IFormInputProps {
-    value: string | number | readonly string[] | undefined;
+    value: string | number | boolean | readonly string[] | undefined;
     name: string;
     type: IFormControlType;
     placeholder?: string;
@@ -24,6 +24,6 @@ export interface IFormInputProps {
     onInput?: (e: IFormInputEvent) => void;
     onChange?: (e: IFormInputEvent) => void;
     onBlur?: React.FocusEventHandler<HTMLInputElement> | undefined;
-    onKeyDown?: React.KeyboardEventHandler<HTMLInputElement> | undefined;
+    onKeyDown?: React.KeyboardEventHandler<HTMLInputElement | undefined>;
 }
 export declare const FormInput: (props: IFormInputProps) => JSX.Element;

package/components/Form/FormLabel/FormLabel.d.ts

@@ -1,4 +1,2 @@
-import { ComponentProps, FunctionComponent, HTMLAttributes } from 'react';
-export interface IFormLabelProps extends ComponentProps<"label"> {
-}
-export declare const FormLabel: FunctionComponent<IFormLabelProps & HTMLAttributes<HTMLLabelElement>>;
+import React from 'react';
+export declare const FormLabel: ({ children, className, htmlFor, ...rest }: React.ComponentProps<"label">) => JSX.Element;

package/components/Form/form.interfaces.d.ts

@@ -3,7 +3,7 @@ export interface IControls {
     [key: string]: FormControl;
 }
 export interface IFormValues {
-    [key: string]: any;
+    [key: string]: unknown;
 }
 export interface IFormTextAreaOptions {
     rows: number;

package/components/Form/form.models.d.ts

@@ -2,10 +2,10 @@ import { IFormControlConfig, IFormInputError } from './form.interfaces';
 import { IFormControlType } from './form.types';
 export declare class FormControl {
     value: any;
-    validators: Array<any>;
+    validators: Array<string>;
     type: IFormControlType;
     config: IFormControlConfig;
-    constructor(value: any, validators: Array<any>, type: IFormControlType, config: IFormControlConfig);
+    constructor(value: any, validators: Array<string>, type: IFormControlType, config: IFormControlConfig);
     errors: Array<IFormInputError>;
     isValid: boolean;
     isDirty: boolean;

package/components/Form/validators/IsEmptyValidator.d.ts

@@ -1 +1 @@
-export declare const IsEmptyValidator: (value: any) => boolean;
+export declare const IsEmptyValidator: (value: unknown) => boolean;

package/components/Form/validators/IsEqualValidator.d.ts

@@ -1 +1 @@
-export declare const IsEqualValidator: (valueA: any, valueB: any) => boolean;
+export declare const IsEqualValidator: (valueA: unknown, valueB: unknown) => boolean;

package/components/List/list.models.d.ts

@@ -2,7 +2,7 @@ import { ReactElement } from 'react';
 import { IListItemProps } from './ListItem';
 export declare class ListItemModel {
     constructor(dto: ReactElement<IListItemProps>);
-    key: any;
+    key: unknown;
     props: IListItemProps | undefined;
-    type: any;
+    type: unknown;
 }

package/components/LoadingIndicator/LoadingIndicator.d.ts

@@ -1,4 +1,2 @@
 import React from 'react';
-export interface ILoadingIndicatorProps {
-}
 export declare const LoadingIndicator: ({ ...rest }: React.ComponentProps<"div">) => JSX.Element;

package/components/LoadingIndicator/loading-indicator.service.d.ts

@@ -1,12 +1,10 @@
 export interface ILoadingIndicatorService {
-    show(message: string, options?: ILoadingIndicatorOptions): Promise<void>;
-}
-export interface ILoadingIndicatorOptions {
+    show(message: string): void;
 }
 declare class LoadingIndicatorService implements ILoadingIndicatorService {
     private container;
     private handler;
-    show(): Promise<void>;
+    show(): void;
     hide(): void;
 }
 export declare const loadingIndicatorService: LoadingIndicatorService;

package/components/Menu/Menu.d.ts

@@ -6,7 +6,6 @@ export interface IMenuProps extends React.DetailedHTMLProps<React.HtmlHTMLAttrib
     open?: boolean;
     children?: ReactElement<IMenuItemProps> | Array<ReactElement<IMenuItemProps>>;
     menuPosition?: MenuPosition;
-    onToggleClick?: (e: Event) => void;
     onClickBackdrop?: () => void;
 }
 export declare const Menu: (props: IMenuProps) => JSX.Element;

package/components/Menu/MenuBody.d.ts

@@ -5,7 +5,7 @@ export interface IMenuBodyProps {
     children?: ReactElement<IMenuItemProps> | Array<ReactElement<IMenuItemProps>>;
     className?: string;
     menuPosition?: MenuPosition;
-    parentRef: React.RefObject<any>;
+    parentRef: React.RefObject<HTMLDivElement>;
     shadow?: boolean;
     onClickBackdrop?: () => void;
 }

package/components/Modal/Modal.d.ts

@@ -5,8 +5,8 @@ export interface IModalProps {
     children?: ReactNode;
     header?: string;
     footer?: string | ReactElement;
-    onHeaderCloseClick?: Function;
-    onBackdropClick?: Function;
+    onHeaderCloseClick?: () => void;
+    onBackdropClick?: () => void;
     isDismissable?: boolean;
     fullScreen?: boolean;
     size?: SIZE;

package/components/Modal/ModalHeader.d.ts

@@ -1,7 +1,6 @@
-import { ReactNode } from 'react';
-interface IModalHeaderProps {
-    children?: ReactNode;
-    onClose?: Function;
+import React from 'react';
+interface IModalHeaderProps extends React.ComponentProps<'div'> {
+    onClose?: () => void;
     isDismissable?: boolean;
 }
 export declare const ModalHeader: (props: IModalHeaderProps) => JSX.Element;

package/components/Select/Select.d.ts

@@ -1,4 +1,4 @@
-/// <reference types="react" />
+import React from 'react';
 import { ISelectOption } from '../component.interfaces';
 export interface ISelectProps {
     id?: string;
@@ -10,6 +10,6 @@ export interface ISelectProps {
     multipleMaxCountItems?: number;
     disabled?: boolean;
     onChange?: (val: string | Array<string>) => void;
-    onKeyDown?: (event: any) => void;
+    onKeyDown?: (event: React.KeyboardEvent<HTMLDivElement>) => void;
 }
 export declare const Select: (props: ISelectProps) => JSX.Element;

package/components/SpeedDial/SpeedDialActions.d.ts

@@ -1,6 +1,2 @@
-/// <reference types="react" />
-interface ISpeedDialActionsProps {
-    children: any;
-}
-export declare const SpeedDialActions: (props: ISpeedDialActionsProps) => JSX.Element;
-export {};
+import React from 'react';
+export declare const SpeedDialActions: (props: React.ComponentProps<'div'>) => JSX.Element;

package/components/Stepper/Step/Step.d.ts

@@ -1,4 +1,4 @@
-import { ReactNode } from 'react';
+import React, { ReactNode } from 'react';
 export interface IStepProps {
     value: string;
     index?: number;
@@ -11,6 +11,9 @@ export interface IStepProps {
     isOptional?: boolean;
     className?: string;
     showProgressCheckIcon?: boolean;
-    onClick?: (event: any, value: string) => void;
+    onClick?: (e: {
+        event: React.MouseEvent;
+        value: string;
+    }) => void;
 }
 export declare const Step: (props: IStepProps) => JSX.Element;

package/components/Tabs/Tab.d.ts

@@ -1,4 +1,4 @@
-import { ReactNode } from 'react';
+import React, { ReactNode } from 'react';
 export interface ITabProps {
     label: ReactNode;
     value: string;
@@ -6,6 +6,9 @@ export interface ITabProps {
     fixed?: boolean;
     disabled?: boolean;
     className?: string;
-    onClick?: (event: any, value: string) => void;
+    onClick?: (e: {
+        event: React.MouseEvent;
+        value: string;
+    }) => void;
 }
 export declare const Tab: (props: ITabProps) => JSX.Element;

package/components/Tabs/TabIndicator.d.ts

@@ -4,7 +4,7 @@ export interface ITabIndicatorProps extends React.DetailedHTMLProps<React.HtmlHT
     amount?: number;
     index?: number;
     color?: COLOR;
-    width?: any;
-    left?: any;
+    width?: string;
+    left?: number;
 }
 export declare const TabIndicator: (props: ITabIndicatorProps) => JSX.Element;

package/components/Tabs/TabPanel.d.ts

@@ -2,6 +2,5 @@ import React from 'react';
 export interface ITabPanelProps extends React.DetailedHTMLProps<React.HTMLProps<HTMLDivElement>, HTMLDivElement> {
     value: string;
     index: string;
-    className?: string;
 }
 export declare const TabPanel: (props: ITabPanelProps) => JSX.Element;

package/components/TreeView/TreeItem.d.ts

@@ -1,13 +1,14 @@
-/// <reference types="react" />
-export interface ITreeItemProps {
+import React from "react";
+export interface ITreeItemProps extends React.DetailedHTMLProps<React.InputHTMLAttributes<HTMLLIElement>, HTMLLIElement> {
     nodeId: string;
     label: string;
-    children?: any;
-    className?: string;
     isExpanded?: boolean;
     isSelected?: boolean;
     isSelectable?: boolean;
     onToggleExpand?: (id: string) => void;
-    onSelect?: (id: string, isSelected: boolean) => void;
+    onItemSelect?: (e: {
+        id: string;
+        isSelected: boolean;
+    }) => void;
 }
 export declare const TreeItem: (props: ITreeItemProps) => JSX.Element;

package/hooks/useConstructor.d.ts

@@ -1 +1 @@
-export declare const useConstructor: (callBack?: () => void) => void;
+export declare const useConstructor: (callBack: () => void) => void;

package/hooks/useDebounce.d.ts

@@ -1 +1,2 @@
-export declare function useDebounce(callback: any, timeout: any, deps: any): void;
+import React from "react";
+export declare function useDebounce(callback: () => void, timeout: number, deps: React.DependencyList): void;

package/hooks/useHover.d.ts

@@ -1,2 +1,2 @@
-/// <reference types="react" />
-export declare function useHover(): (boolean | import("react").MutableRefObject<null>)[];
+import { RefObject } from 'react';
+export declare function useHover<T extends HTMLElement = HTMLElement>(elementRef: RefObject<T>): boolean;

package/index.es.js

@@ -243,28 +243,25 @@ function useWindowSize() {
     return windowSize;
 }
 
-function useHover() {
+function useHover(elementRef) {
     const [value, setValue] = useState(false);
-    const ref = useRef(null);
     const handleMouseOver = () => setValue(true);
     const handleMouseOut = () => setValue(false);
-    useEffect(() => {
-        const node = ref.current;
-        if (node) {
-            node.addEventListener("mouseover", handleMouseOver);
-            node.addEventListener("mouseout", handleMouseOut);
+    const node = elementRef.current;
+    if (node) {
+        node.addEventListener("mouseover", handleMouseOver);
+        node.addEventListener("mouseout", handleMouseOut);
+        useEffect(() => {
             return () => {
                 node.removeEventListener("mouseover", handleMouseOver);
                 node.removeEventListener("mouseout", handleMouseOut);
             };
-        }
-        return;
-    }, [ref.current] // Recall only if ref changes
-    );
-    return [ref, value];
+        }, [elementRef.current]);
+    }
+    return value;
 }
 
-const useConstructor = (callBack = () => { }) => {
+const useConstructor = (callBack) => {
     const [hasBeenCalled, setHasBeenCalled] = useState(false);
     if (hasBeenCalled)
         return;
@@ -592,9 +589,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 +665,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 +771,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 +788,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 +803,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 +831,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 +903,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,
@@ -1017,15 +1011,17 @@ const FormInput = (props) => {
         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.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?.target as HTMLInputElement).checked, type, name as string)}
                 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))))));
 };
@@ -1046,7 +1042,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;
@@ -1076,7 +1072,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) {
@@ -1230,7 +1226,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 +1245,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() });
@@ -1404,14 +1402,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
                                 }
@@ -1446,7 +1445,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 = () => {
@@ -1482,9 +1481,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));
 };
 
@@ -1646,23 +1643,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);
         }
     }
 }
@@ -1673,11 +1668,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 })));
@@ -1718,7 +1713,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),
@@ -1947,7 +1942,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();
             }
@@ -1970,8 +1965,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);
         }
     }
 }
@@ -2125,7 +2120,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,10 +2212,11 @@ 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 hoverRef = useRef(null);
+    const isHover = useHover(hoverRef);
+    const handleClick = (event) => {
         if (!isDisabled) {
-            onClick && onClick(e, value);
+            onClick && onClick({ event, value });
         }
     };
     const getCssClasses = () => {
@@ -2238,11 +2234,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(Icon, { className: styles$6.stepIconCircle, iconColor: (isHover || 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))
                 :
@@ -2315,10 +2318,10 @@ const Tabs = (props) => {
             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 &&
@@ -2340,11 +2343,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));
 };
 
@@ -2547,7 +2550,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 = () => {
@@ -2570,7 +2573,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" },

package/index.js

@@ -251,28 +251,25 @@ function useWindowSize() {
     return windowSize;
 }
 
-function useHover() {
+function useHover(elementRef) {
     const [value, setValue] = React.useState(false);
-    const ref = React.useRef(null);
     const handleMouseOver = () => setValue(true);
     const handleMouseOut = () => setValue(false);
-    React.useEffect(() => {
-        const node = ref.current;
-        if (node) {
-            node.addEventListener("mouseover", handleMouseOver);
-            node.addEventListener("mouseout", handleMouseOut);
+    const node = elementRef.current;
+    if (node) {
+        node.addEventListener("mouseover", handleMouseOver);
+        node.addEventListener("mouseout", handleMouseOut);
+        React.useEffect(() => {
             return () => {
                 node.removeEventListener("mouseover", handleMouseOver);
                 node.removeEventListener("mouseout", handleMouseOut);
             };
-        }
-        return;
-    }, [ref.current] // Recall only if ref changes
-    );
-    return [ref, value];
+        }, [elementRef.current]);
+    }
+    return value;
 }
 
-const useConstructor = (callBack = () => { }) => {
+const useConstructor = (callBack) => {
     const [hasBeenCalled, setHasBeenCalled] = React.useState(false);
     if (hasBeenCalled)
         return;
@@ -600,9 +597,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 +673,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 +779,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 +796,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 +811,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 +839,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 +911,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,
@@ -1025,15 +1019,17 @@ const FormInput = (props) => {
         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.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?.target as HTMLInputElement).checked, type, name as string)}
                 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))))));
 };
@@ -1054,7 +1050,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;
@@ -1084,7 +1080,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) {
@@ -1238,7 +1234,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 +1253,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() });
@@ -1412,14 +1410,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
                                 }
@@ -1454,7 +1453,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 = () => {
@@ -1490,9 +1489,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));
 };
 
@@ -1654,23 +1651,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);
         }
     }
 }
@@ -1681,11 +1676,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 })));
@@ -1726,7 +1721,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),
@@ -1955,7 +1950,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();
             }
@@ -1978,8 +1973,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);
         }
     }
 }
@@ -2133,7 +2128,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,10 +2220,11 @@ 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 hoverRef = React.useRef(null);
+    const isHover = useHover(hoverRef);
+    const handleClick = (event) => {
         if (!isDisabled) {
-            onClick && onClick(e, value);
+            onClick && onClick({ event, value });
         }
     };
     const getCssClasses = () => {
@@ -2246,11 +2242,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(Icon, { className: styles$6.stepIconCircle, iconColor: (isHover || 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))
                 :
@@ -2323,10 +2326,10 @@ const Tabs = (props) => {
             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 &&
@@ -2348,11 +2351,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));
 };
 
@@ -2555,7 +2558,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 = () => {
@@ -2578,7 +2581,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.1",
+	"version": "19.0.2",
 	"description": "handcrafted react components",
 	"main": "index.js",
 	"module": "index.es.js",