react-asc 25.0.3 → 25.0.6

package/components/Alert/Alert.d.ts

@@ -1,6 +1,8 @@
-import React, { ReactNode } from 'react';
+import type { ReactNode } from 'react';
+import React from 'react';
 import { VARIANT } from '../component.enums';
-import { COLOR, SIZE } from '../component.enums';
+import type { SIZE } from '../component.enums';
+import { COLOR } from '../component.enums';
 export interface IAlertProps extends React.ComponentProps<'div'> {
     children?: ReactNode;
     className?: string;

package/components/AppBar/AppBar.d.ts

@@ -1,5 +1,7 @@
-import React, { ReactNode } from 'react';
-import { COLOR, SIZE } from '../component.enums';
+import type { ReactNode } from 'react';
+import React from 'react';
+import type { SIZE } from '../component.enums';
+import { COLOR } from '../component.enums';
 export interface IAppBarProps extends React.ComponentProps<'nav'> {
     children?: ReactNode;
     className?: string;

package/components/AppBar/AppBarTitle.d.ts

@@ -1,4 +1,5 @@
-import React, { ReactNode } from 'react';
+import type { ReactNode } from 'react';
+import React from 'react';
 export interface IAppBarTitleProps extends React.ComponentProps<'div'> {
     children?: ReactNode;
 }

package/components/AutoComplete/AutoComplete.d.ts

@@ -1,10 +1,10 @@
 /// <reference types="react" />
-import { ISelectOption } from '../component.interfaces';
+import type { ISelectOption } from '../component.interfaces';
 export interface IAutoCompleteProps {
     id?: string;
     name?: string;
     className?: string;
-    options?: Array<ISelectOption>;
+    options?: ISelectOption[];
     value?: string;
     openOnFocus?: boolean;
     disabled?: boolean;

package/components/Breadcrumb/Breadcrumb.d.ts

@@ -1,4 +1,5 @@
-import React, { ReactNode } from 'react';
+import type { ReactNode } from 'react';
+import React from 'react';
 export interface IBreadcrumbProps extends React.ComponentProps<'nav'> {
     children?: ReactNode;
 }

package/components/Button/ButtonContext.d.ts

@@ -1,7 +1,7 @@
 /// <reference types="react" />
-import { COLOR } from '../component.enums';
+import type { COLOR } from '../component.enums';
 export interface IButtonContext {
     color: COLOR | null;
 }
-export declare const ButtonContext: import("react").Context<IButtonContext>;
+export declare const ButtonContext: React.Context<IButtonContext>;
 export declare const useButtonContext: () => IButtonContext;

package/components/Chip/Chip.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import { COLOR } from '../component.enums';
+import type { COLOR } from '../component.enums';
 export interface IChipProps extends React.ComponentProps<'div'> {
     color?: COLOR;
     shadow?: boolean;

package/components/ConditionalWrapper/ConditionalWrapper.d.ts

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

package/components/ExpansionPanel/ExpansionPanel.d.ts

@@ -1,4 +1,5 @@
-import React, { ReactNode } from 'react';
+import type { ReactNode } from 'react';
+import React from 'react';
 export interface IExpansionPanelProps {
     header: ReactNode;
     children: ReactNode;

package/components/ExpansionPanel/ExpansionPanelContent.d.ts

@@ -1,4 +1,4 @@
-import { ReactNode } from 'react';
+import type { ReactNode } from 'react';
 export interface IExpansionPanelContentProps {
     children?: ReactNode;
 }

package/components/ExpansionPanel/ExpansionPanelHeader.d.ts

@@ -1,4 +1,5 @@
-import React, { ReactNode } from 'react';
+import type { ReactNode } from 'react';
+import React from 'react';
 export interface IExpansionPanelHeaderProps {
     onClick?: (event: React.MouseEvent) => void;
     children?: ReactNode;

package/components/Form/Form.d.ts

@@ -1,6 +1,6 @@
 import React, { Component } from 'react';
-import { IControls, IFormValues } from './form.interfaces';
-import { FormControl } from './form.models';
+import type { IControls, IFormValues } from './form.interfaces';
+import type { FormControl } from './form.models';
 export interface IFormProps {
     controls: IControls;
     validateOnBlur?: boolean;

package/components/Form/FormError.d.ts

@@ -1,8 +1,8 @@
 /// <reference types="react" />
-import { IFormInputError } from './form.interfaces';
+import type { IFormInputError } from './form.interfaces';
 interface IFormErrorProps {
     className?: string;
-    errors?: Array<IFormInputError>;
+    errors?: IFormInputError[];
 }
 export declare const FormError: (props: IFormErrorProps) => JSX.Element;
 export {};

package/components/Form/FormGroup.d.ts

@@ -1,4 +1,4 @@
-import { ReactNode } from 'react';
+import type { ReactNode } from 'react';
 interface IFormGroupProps {
     children?: ReactNode;
     className?: string;

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

@@ -1,6 +1,6 @@
 import React from 'react';
-import { IFormInputOptions, IFormTextAreaOptions, IFormSelectOptions, IFormAutoCompleteOptions } from '../form.interfaces';
-import { IFormControlType } from '../form.types';
+import type { IFormInputOptions, IFormTextAreaOptions, IFormSelectOptions, IFormAutoCompleteOptions } from '../form.interfaces';
+import type { IFormControlType } from '../form.types';
 export interface IFormInputEvent {
     value: any;
     type?: string;
@@ -16,7 +16,7 @@ export interface IFormInputProps {
     readonly?: boolean;
     isValid?: boolean;
     autoFocus?: boolean;
-    options?: Array<IFormInputOptions>;
+    options?: IFormInputOptions[];
     textareaOptions?: IFormTextAreaOptions;
     selectOptions?: IFormSelectOptions;
     autoCompleteOptions?: IFormAutoCompleteOptions;

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

@@ -1,4 +1,4 @@
-import { FormControl } from './form.models';
+import type { FormControl } from './form.models';
 export interface IControls {
     [key: string]: FormControl;
 }
@@ -35,7 +35,7 @@ export interface IFormControlConfig {
     hint?: string;
     disabled?: boolean;
     readonly?: boolean;
-    options?: Array<IFormInputOptions>;
+    options?: IFormInputOptions[];
     textareaOptions?: IFormTextAreaOptions;
     selectOptions?: IFormSelectOptions;
     autoCompleteOptions?: IFormAutoCompleteOptions;

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

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

package/components/Icon/Icon.d.ts

@@ -1,5 +1,6 @@
-import React, { ComponentProps } from 'react';
-import { COLOR } from '../component.enums';
+import type { ComponentProps } from 'react';
+import React from 'react';
+import type { COLOR } from '../component.enums';
 export interface IIconProps extends ComponentProps<'div'> {
     iconColor?: COLOR;
     children?: React.ReactNode;

package/components/List/ListItem.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import { COLOR } from '../component.enums';
+import type { COLOR } from '../component.enums';
 export interface IListItemProps extends React.ComponentProps<'li'> {
     color?: COLOR;
     active?: boolean;

package/components/List/ListItemText.d.ts

@@ -1,4 +1,5 @@
-import React, { ReactNode } from 'react';
+import type { ReactNode } from 'react';
+import React from 'react';
 interface IListItemTextProps extends React.ComponentProps<'div'> {
     primary: ReactNode;
     secondary?: ReactNode;

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

@@ -1,5 +1,5 @@
-import { ReactElement } from 'react';
-import { IListItemProps } from './ListItem';
+import type { ReactElement } from 'react';
+import type { IListItemProps } from './ListItem';
 export declare class ListItemModel {
     constructor(dto: ReactElement<IListItemProps>);
     key: unknown;

package/components/Menu/Menu.d.ts

@@ -1,10 +1,11 @@
-import React, { ReactElement } from 'react';
-import { MenuPosition } from './menu.types';
-import { IListItemProps } from '../List';
+import type { ReactElement } from 'react';
+import React from 'react';
+import type { MenuPosition } from './menu.types';
+import type { IListItemProps } from '../List';
 export interface IMenuProps extends React.DetailedHTMLProps<React.HtmlHTMLAttributes<HTMLDivElement>, HTMLDivElement> {
     toggle?: ReactElement;
     open?: boolean;
-    children?: ReactElement<IListItemProps> | Array<ReactElement<IListItemProps>>;
+    children?: ReactElement<IListItemProps> | ReactElement<IListItemProps>[];
     menuPosition?: MenuPosition;
     onClickBackdrop?: () => void;
 }

package/components/Menu/MenuBody.d.ts

@@ -1,8 +1,9 @@
-import React, { ReactElement } from 'react';
-import { MenuPosition } from './menu.types';
-import { IListItemProps } from '../List';
+import type { ReactElement } from 'react';
+import React from 'react';
+import type { MenuPosition } from './menu.types';
+import type { IListItemProps } from '../List';
 export interface IMenuBodyProps {
-    children?: ReactElement<IListItemProps> | Array<ReactElement<IListItemProps>>;
+    children?: ReactElement<IListItemProps> | ReactElement<IListItemProps>[];
     className?: string;
     menuPosition?: MenuPosition;
     parentRef: React.RefObject<HTMLDivElement>;

package/components/Menu/MenuContext.d.ts

@@ -1,6 +1,6 @@
-import { Dispatch } from 'react';
+import type { Context, Dispatch } from 'react';
 export interface IMenuContext {
     isShow: boolean;
     setIsShow: Dispatch<boolean>;
 }
-export declare const MenuContext: import("react").Context<IMenuContext>;
+export declare const MenuContext: Context<IMenuContext>;

package/components/Menu/MenuItem.d.ts

@@ -1,3 +1,3 @@
 /// <reference types="react" />
-import { IListItemProps } from '../List';
+import type { IListItemProps } from '../List';
 export declare const MenuItem: (props: IListItemProps) => JSX.Element;

package/components/Menu/MenuToggle.d.ts

@@ -1,6 +1,6 @@
-import { ReactNode } from 'react';
+import type { ReactNode } from 'react';
 interface IMenuToggleProps {
     children?: ReactNode;
 }
-export declare const MenuToggle: ({ children }: IMenuToggleProps) => JSX.Element;
+export declare const MenuToggle: ({ children }: IMenuToggleProps) => ReactNode;
 export {};

package/components/Modal/GlobalModal.d.ts

@@ -1,8 +1,8 @@
-import { ReactElement } from 'react';
+import type { ReactElement } from 'react';
 import { SIZE } from '../component.enums';
-import { IControls, IFormValues } from '../Form';
+import type { IControls, IFormValues } from '../Form';
 import { MODALTYPE } from './modal.enum';
-import { IModalButton } from './modal.interfaces';
+import type { IModalButton } from './modal.interfaces';
 interface IModalProps {
     title?: string;
     description?: string | ReactElement;
@@ -13,7 +13,7 @@ interface IModalProps {
     onCancel?: () => void;
     onBackdropClick?: () => void;
     isDismissable?: boolean;
-    buttons?: Array<IModalButton>;
+    buttons?: IModalButton[];
     fullScreen?: boolean;
     size?: SIZE;
 }

package/components/Modal/Modal.d.ts

@@ -1,5 +1,5 @@
-import { ReactElement, ReactNode } from 'react';
-import { SIZE } from '../component.enums';
+import type { ReactElement, ReactNode } from 'react';
+import type { SIZE } from '../component.enums';
 export interface IModalProps {
     target?: HTMLElement;
     className?: string;

package/components/Modal/ModalBody.d.ts

@@ -1,4 +1,4 @@
-import { ReactNode } from 'react';
+import type { ReactNode } from 'react';
 interface IModalBodyProps {
     children?: ReactNode;
 }

package/components/Modal/modal.interfaces.d.ts

@@ -1,5 +1,5 @@
-import { COLOR, VARIANT } from '../component.enums';
-import { MODALBUTTONTYPE } from './modal.enum';
+import type { COLOR, VARIANT } from '../component.enums';
+import type { MODALBUTTONTYPE } from './modal.enum';
 export interface IModalButton {
     label: string;
     variant?: VARIANT;

package/components/Modal/modal.service.d.ts

@@ -1,13 +1,13 @@
-import { IControls } from '../Form';
-import { ReactElement } from 'react';
-import { IModalButton } from './modal.interfaces';
-import { SIZE } from '../component.enums';
+import type { IControls } from '../Form';
+import type { ReactElement } from 'react';
+import type { IModalButton } from './modal.interfaces';
+import type { SIZE } from '../component.enums';
 export interface IModalService {
     show(title: string, description: string | ReactElement, options?: IModalOptions): Promise<void>;
 }
 export interface IModalOptions {
     isDismissable?: boolean;
-    buttons?: Array<IModalButton>;
+    buttons?: IModalButton[];
     fullScreen?: boolean;
     size?: SIZE;
 }

package/components/Portal/Portal.d.ts

@@ -4,4 +4,4 @@ export interface IPortalProps {
     target?: HTMLElement;
     className?: string;
 }
-export declare const Portal: ({ children, target, className }: IPortalProps) => import("react").ReactPortal;
+export declare const Portal: ({ children, target, className }: IPortalProps) => JSX.Element;

package/components/Select/Select.d.ts

@@ -1,16 +1,16 @@
 import React from 'react';
-import { ISelectOption } from '../component.interfaces';
+import type { ISelectOption } from '../component.interfaces';
 export interface ISelectProps {
     id?: string;
     name?: string;
     className?: string;
-    options?: Array<ISelectOption>;
-    value?: string | Array<string>;
+    options?: ISelectOption[];
+    value?: string | string[];
     multiple?: boolean;
     multipleMaxCountItems?: number;
     disabled?: boolean;
     readOnly?: boolean;
-    onChange?: (val: string | Array<string>) => void;
+    onChange?: (val: string | string[]) => void;
     onKeyDown?: (event: React.KeyboardEvent<HTMLDivElement>) => void;
 }
 export declare const Select: (props: ISelectProps) => JSX.Element;

package/components/Sidebar/Sidebar.d.ts

@@ -1,7 +1,7 @@
 import React from 'react';
-import { ISidebarItem } from './sidebar.interfaces';
+import type { ISidebarItem } from './sidebar.interfaces';
 interface ISidebarProps extends React.ComponentProps<'nav'> {
-    items: Array<ISidebarItem>;
+    items: ISidebarItem[];
     currentUrl: string;
     onItemClicked: (path: string) => void;
 }

package/components/Sidebar/sidebar.interfaces.d.ts

@@ -3,7 +3,7 @@ export interface ISidebarItem {
     path: string;
     label: string;
     icon?: string;
-    items?: Array<ISidebarItem>;
+    items?: ISidebarItem[];
     isCollapsible?: boolean;
     isCollapsed?: boolean;
 }

package/components/Snackbar/Snackbar.d.ts

@@ -1,4 +1,5 @@
-import React, { ComponentProps } from 'react';
+import type { ComponentProps } from 'react';
+import React from 'react';
 import { COLOR } from '../component.enums';
 export interface ISnackbarProps extends ComponentProps<'div'> {
     color?: COLOR;

package/components/SpeedDial/SpeedDialIcon.d.ts

@@ -1,4 +1,5 @@
-import React, { ReactElement } from 'react';
+import type { ReactElement } from 'react';
+import React from 'react';
 export interface ISpeedDialIconProps extends React.DetailedHTMLProps<React.HtmlHTMLAttributes<HTMLDivElement>, HTMLDivElement> {
     openIcon?: ReactElement;
 }

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

@@ -1,4 +1,5 @@
-import React, { ReactNode } from 'react';
+import type { ReactNode } from 'react';
+import React from 'react';
 export interface IStepProps {
     value: string;
     index?: number;

package/components/Stepper/StepPanel/StepPanel.d.ts

@@ -1,4 +1,4 @@
-import { ReactNode } from 'react';
+import type { ReactNode } from 'react';
 export interface IStepPanelProps {
     children?: ReactNode;
 }

package/components/Stepper/Stepper.d.ts

@@ -1,7 +1,7 @@
-import { ReactElement } from 'react';
-import { IStepProps } from './Step';
+import type { ReactElement } from 'react';
+import type { IStepProps } from './Step';
 export interface IStepperProps {
-    children?: ReactElement<IStepProps> | Array<ReactElement<IStepProps>>;
+    children?: ReactElement<IStepProps> | ReactElement<IStepProps>[];
     isLinear?: boolean;
     isDisabled?: boolean;
     showLabel?: boolean;

package/components/Table/Table.d.ts

@@ -1,6 +1,6 @@
-import { ReactElement } from 'react';
+import type { ReactElement } from 'react';
 export interface ITableProps {
-    children?: ReactElement | Array<ReactElement>;
+    children?: ReactElement | ReactElement[];
     className?: string;
     striped?: boolean;
     bordered?: boolean;

package/components/Table/TableContext.d.ts

@@ -1,4 +1,4 @@
-import { Context } from 'react';
+import type { Context } from 'react';
 export interface ITableContext {
     variant: 'head' | 'body';
 }

package/components/Tabs/Tab.d.ts

@@ -1,4 +1,5 @@
-import React, { ReactNode } from 'react';
+import type { ReactNode } from 'react';
+import React from 'react';
 export interface ITabProps {
     label: ReactNode;
     value: string;

package/components/Tabs/TabContext.d.ts

@@ -1,4 +1,4 @@
-import { Context, Dispatch } from 'react';
+import type { Context, Dispatch } from 'react';
 export interface ITabsContext {
     fixed?: boolean;
     selectedValue?: string;

package/components/Tabs/Tabs.d.ts

@@ -1,10 +1,10 @@
-import { ReactElement } from 'react';
+import type { ReactElement } from 'react';
 import { COLOR } from '../component.enums';
-import { ITabProps } from './Tab';
+import type { ITabProps } from './Tab';
 export interface ITabsProps {
     color?: COLOR;
     indicatorColor?: COLOR;
-    children?: ReactElement<ITabProps> | Array<ReactElement<ITabProps>>;
+    children?: ReactElement<ITabProps> | ReactElement<ITabProps>[];
     className?: string;
     fixed?: boolean;
     onChange?: (value: string) => void;

package/hooks/useCssClasses.d.ts

@@ -1 +1 @@
-export declare function useCssClasses(cssClasses: Array<string>): string[];
+export declare function useCssClasses(cssClasses: string[]): string[];

package/hooks/useDebounce.d.ts

@@ -1,2 +1,2 @@
-import React from 'react';
+import type 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>)[];
+export declare function useHover(): (boolean | React.MutableRefObject<null>)[];

package/index.d.ts

@@ -1,3 +1,4 @@
 export * from './components';
 export * from './hooks';
 export * from './icons';
+export * from './interfaces';

package/index.es.js

@@ -235,11 +235,9 @@ function useDebounce(callback, timeout, deps) {
 }
 
 const useConstructor = (callBack) => {
-    const [hasBeenCalled, setHasBeenCalled] = useState(false);
-    if (hasBeenCalled)
-        return;
-    callBack();
-    setHasBeenCalled(true);
+    useEffect(() => {
+        callBack();
+    }, []);
 };
 
 function useCssClasses(cssClasses) {
@@ -405,7 +403,7 @@ styleInject(css_248z$V);
 
 const ListItemAction = (_a) => {
     var { children, onClick } = _a, rest = __rest(_a, ["children", "onClick"]);
-    return (React.createElement("div", Object.assign({ className: styles$V.listItemAction, onClick: e => onClick && onClick(e) }, rest), children));
+    return (React.createElement("div", Object.assign({ className: styles$V.listItemAction, onClick: (e) => onClick && onClick(e) }, rest), children));
 };
 
 var css_248z$U = ".ListItemTextIcon-module_listItemText__xCBLW {\n  flex: 1;\n}";
@@ -637,7 +635,7 @@ const BreadcrumbItem = (props) => {
         onClick && onClick(event);
     };
     return (React.createElement("li", { className: getCssClasses(), onClick: handleClick },
-        React.createElement(ConditionalWrapper, { condition: !isActive, wrapper: label => React.createElement("a", null, label) }, children)));
+        React.createElement(ConditionalWrapper, { condition: !isActive, wrapper: (label) => React.createElement("a", null, label) }, children)));
 };
 
 var css_248z$N = ".Card-module_card__TQdQq {\n  background: var(--white);\n  border-radius: var(--borderRadius);\n}\n.Card-module_card__TQdQq.Card-module_shadow__NxDVz {\n  box-shadow: var(--shadow);\n}";
@@ -818,7 +816,7 @@ const Chip = (props) => {
     };
     return (React.createElement("div", Object.assign({ className: getCssClass() }, rest, { style: style }),
         React.createElement("span", null, children),
-        isDeletable && (React.createElement("div", { className: styles$F.deleteIcon, onClick: e => handleClickOnDelete(e) }, deleteIcon))));
+        isDeletable && (React.createElement("div", { className: styles$F.deleteIcon, onClick: (e) => handleClickOnDelete(e) }, deleteIcon))));
 };
 
 const CssTransition = (props) => {
@@ -878,7 +876,7 @@ const CssTransition = (props) => {
     };
     useEffect(() => {
         if (isShow !== undefined && (isShow === true || isShow === false)) {
-            renderAnimation(isShow);
+            void renderAnimation(isShow);
         }
     }, [isShow]);
     const getCssClasses = () => {
@@ -901,21 +899,9 @@ var styles$E = {"column":"Column-module_column__fcTgl"};
 styleInject(css_248z$E);
 
 const Column = (props) => {
-    const { children, className } = props, 
-    // xs,
-    // sm,
-    // md,
-    // lg,
-    // xl,
-    rest = __rest(props, ["children", "className"]);
-    const getCssClasses = () => {
-        const cssClasses = [];
-        // !xs && !sm && !md && !lg && !xl && cssClasses.push('col');
-        // if (xs) cssClasses.push(`col-${xs.toString()}`);
-        // if (sm) cssClasses.push(`col-sm-${sm.toString()}`);
-        // if (md) cssClasses.push(`col-md-${md.toString()}`);
-        // if (lg) cssClasses.push(`col-lg-${lg.toString()}`);
-        // if (xl) cssClasses.push(`col-xl-${xl.toString()}`);
+    const { children, className } = props, rest = __rest(props, ["children", "className"]);
+    const getCssClasses = () => {
+        const cssClasses = [];
         cssClasses.push(styles$E.column);
         className && cssClasses.push(className);
         return cssClasses.filter(css => css).join(' ');
@@ -1116,20 +1102,22 @@ const Select = (props) => {
                 case 'Enter':
                     if (hoverIndex) {
                         const option = options[hoverIndex];
-                        if (option)
+                        if (option) {
                             handleOnClick(option);
+                        }
                     }
                     break;
             }
         }
     };
     return (React.createElement("div", { ref: selectConainter, className: styles$B.selectContainer },
-        React.createElement("div", { id: id, className: getCssClass(), onClick: () => show(), tabIndex: 0, onKeyDown: e => handleOnKeyDown(e) },
-            !multiple && renderSingleViewModel(),
-            multiple &&
-                React.createElement("div", { className: styles$B.chipContainer }, renderMultipleViewModel()),
-            React.createElement(Icon, { className: "ml-auto" },
-                React.createElement(ChevronDownSolidIcon, null))),
+        React.createElement("div", { id: id, className: getCssClass(), onClick: () => show(), tabIndex: 0, onKeyDown: (e) => handleOnKeyDown(e) },
+            React.createElement(React.Fragment, null,
+                !multiple && renderSingleViewModel(),
+                multiple &&
+                    React.createElement("div", { className: styles$B.chipContainer }, renderMultipleViewModel()),
+                React.createElement(Icon, { className: "ml-auto" },
+                    React.createElement(ChevronDownSolidIcon, null)))),
         isShow &&
             React.createElement(Portal, { className: 'backdrop-root' },
                 React.createElement("div", { className: styles$B.selectMenu, style: { left: (_a = selectConainter.current) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect().x, top: (_b = selectConainter.current) === null || _b === void 0 ? void 0 : _b.getBoundingClientRect().y, width: (_c = selectConainter.current) === null || _c === void 0 ? void 0 : _c.getBoundingClientRect().width } },
@@ -1187,20 +1175,20 @@ const FormInput = (props) => {
             type === 'color' ||
             type === 'time')
             &&
-                React.createElement("input", { id: name, name: name, type: type, className: getCssClasses(), 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), onBlur: onBlur, placeholder: placeholder, readOnly: readonly, disabled: disabled, onKeyDown: onKeyDown }),
+                React.createElement("input", { id: name, name: name, type: type, className: getCssClasses(), 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), onBlur: onBlur, placeholder: placeholder, readOnly: readonly, disabled: disabled, onKeyDown: onKeyDown }),
         type === 'file' &&
-            React.createElement(FileInput, { id: name, name: name, className: className + (!isValid ? ' is-invalid' : ''), value: value, autoFocus: autoFocus, readOnly: readonly, disabled: disabled, onChange: e => handleOnChange(e.target.value, type, name) }, "choose a file"),
+            React.createElement(FileInput, { id: name, name: name, className: className + (!isValid ? ' is-invalid' : ''), value: value, autoFocus: autoFocus, readOnly: readonly, disabled: disabled, onChange: (e) => handleOnChange(e.target.value, type, name) }, "choose a file"),
         type === 'textarea' &&
-            React.createElement(Textarea, { id: name, name: name, className: className, error: !isValid, 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' } }),
+            React.createElement(Textarea, { id: name, name: name, className: className, error: !isValid, 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), 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), 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), onSelect: e => handleOnChange(e.value, type, name), 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), onSelect: (e) => handleOnChange(e.value, type, name), options: options }),
         type === 'checkbox' &&
-            React.createElement(Checkbox, { id: name, name: name, label: label, className: (!isValid ? ' is-invalid' : ''), onChange: e => handleOnChange((e === null || e === void 0 ? void 0 : e.target).checked, type, name), checked: value }),
+            React.createElement(Checkbox, { id: name, name: name, label: label, className: (!isValid ? ' is-invalid' : ''), onChange: (e) => handleOnChange((e === null || e === void 0 ? void 0 : e.target).checked, type, name), checked: value }),
         type === 'radio' &&
             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("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))))));
 };
 
@@ -1257,8 +1245,10 @@ class Form extends Component {
             const keys = Object.keys(this.state.controls);
             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;
+                // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                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) {
@@ -1358,7 +1348,6 @@ class Form extends Component {
         const cssClasses = [labelClassName, this.isRequired(fieldKey) ? 'required' : undefined];
         return React.createElement(FormLabel, { htmlFor: fieldKey, className: cssClasses.join(' ') }, label);
     }
-    // trigger via ref
     handleFormSubmit() {
         for (const fieldKey of Object.keys(this.state.controls)) {
             const field = this.getControl(fieldKey);
@@ -1399,8 +1388,7 @@ class Form extends Component {
         this.setState({ controls: {}, isValid: false, isChanged: false, isSubmitted: false });
     }
     getFormGroupCssClass(fieldKey) {
-        const result = this.getControl(fieldKey).config.formGroupClassName;
-        return result;
+        return this.getControl(fieldKey).config.formGroupClassName;
     }
     render() {
         return (React.createElement("form", { ref: this.myForm }, this.state && this.state.controls && Object.keys(this.state.controls).map((fieldKey) => {
@@ -1531,13 +1519,13 @@ const DateSelect = (props) => {
     return (React.createElement(Row, { className: getCssClasses() },
         React.createElement(Column, null,
             React.createElement(FormLabel, null, "Year"),
-            React.createElement(YearSelect, { value: currDate.getFullYear(), disabled: disabled, from: yearConfig === null || yearConfig === void 0 ? void 0 : yearConfig.from, to: yearConfig === null || yearConfig === void 0 ? void 0 : yearConfig.to, onChange: e => handleOnChange(e, DATEMODE.YEAR) })),
+            React.createElement(YearSelect, { value: currDate.getFullYear(), disabled: disabled, from: yearConfig === null || yearConfig === void 0 ? void 0 : yearConfig.from, to: yearConfig === null || yearConfig === void 0 ? void 0 : yearConfig.to, onChange: (e) => handleOnChange(e, DATEMODE.YEAR) })),
         React.createElement(Column, null,
             React.createElement(FormLabel, null, "Month"),
-            React.createElement(MonthSelect, { value: currDate.getMonth(), disabled: disabled, onChange: e => handleOnChange(e, DATEMODE.MONTH) })),
+            React.createElement(MonthSelect, { value: currDate.getMonth(), disabled: disabled, onChange: (e) => handleOnChange(e, DATEMODE.MONTH) })),
         React.createElement(Column, null,
             React.createElement(FormLabel, null, "Day"),
-            React.createElement(DaySelect, { day: currDate.getDate(), month: currDate.getMonth(), year: currDate.getFullYear(), disabled: disabled, onChange: e => handleOnChange(e, DATEMODE.DAY) }))));
+            React.createElement(DaySelect, { day: currDate.getDate(), month: currDate.getMonth(), year: currDate.getFullYear(), disabled: disabled, onChange: (e) => handleOnChange(e, DATEMODE.DAY) }))));
 };
 /*
 * result = { year, month, day, dayOfWeek, weekNumber }
@@ -1582,7 +1570,7 @@ const DrawerContent = (props) => {
     };
     const positionStyles = {
         left: { left: '0px' },
-        right: { right: '0px' },
+        right: { right: '0px' }
     };
     const getStyles = () => {
         return !permanent ? positionStyles[position] : undefined;
@@ -1669,7 +1657,7 @@ const MenuItem = (props) => {
 };
 
 const MenuToggle = ({ children }) => {
-    return (React.createElement(Fragment, null, children));
+    return children;
 };
 
 var css_248z$v = ".MenuDivider-module_menuItemDivider__oRP-j {\n  height: 0;\n  margin: 0.5rem 0;\n  overflow: hidden;\n  border-top: 1px solid #e9ecef;\n}";
@@ -1912,7 +1900,7 @@ const Modal = (props) => {
                         React.createElement(ModalBody, null, children),
                         footer &&
                             React.createElement(ModalFooter, null, footer))))),
-        React.createElement(Backdrop, { onClick: handleClickBackdrop })));
+        React.createElement(Backdrop, { onClick: handleClickBackdrop, style: { zIndex: 1040 } })));
 };
 
 var MODALTYPE;
@@ -2195,11 +2183,11 @@ const Sidebar = (props) => {
             setMenuItems(newMenuItems);
         }
         else {
-            navigate(e, `/${item.path}`);
+            navigate(e, `${item.path}`);
         }
     };
     const handleClickSubItem = (itemPath, subItemPath, e) => {
-        navigate(e, `/${itemPath}/${subItemPath}`);
+        navigate(e, `${itemPath}/${subItemPath}`);
     };
     return (React.createElement("nav", Object.assign({ className: getCssClasses() }, rest),
         React.createElement(List, null, menuItems.map(item => (React.createElement(React.Fragment, { key: item.id },
@@ -2300,10 +2288,12 @@ const SpeedDial = (props) => {
         return cssClasses.filter(css => css).join(' ');
     };
     const handleClick = (e) => {
-        if (open)
+        if (open) {
             onClose && onClose(e);
-        else
+        }
+        else {
             onOpen && onOpen(e);
+        }
     };
     return (React.createElement("div", Object.assign({ className: getCssClasses() }, rest),
         React.createElement("div", { style: { 'transform': open ? 'rotate(45deg)' : undefined } },
@@ -2413,7 +2403,7 @@ const Stepper = (props) => {
         });
     };
     const renderSteps = (child, index) => {
-        return React.isValidElement(child) &&
+        return (React.createElement(React.Fragment, null, React.isValidElement(child) &&
             cloneElement(child, {
                 index: index,
                 isActive: activeIndex >= index,
@@ -2422,7 +2412,7 @@ const Stepper = (props) => {
                 showLabel: showLabel,
                 showProgressCheckIcon: showProgressCheckIcon,
                 onClick: (e) => handleClickStep(e.event, e.value, index)
-            });
+            })));
     };
     const isStepOptional = (index) => {
         return steps && steps[index].props.isOptional;
@@ -2632,7 +2622,7 @@ const Table = (props) => {
         className && cssClasses.push(className);
         return cssClasses.filter(css => css).join(' ');
     };
-    return (React.createElement(ConditionalWrapper, { condition: responsive, wrapper: children => React.createElement("div", { className: styles$5.tableResponsive }, children) },
+    return (React.createElement(ConditionalWrapper, { condition: responsive, wrapper: (children) => React.createElement("div", { className: styles$5.tableResponsive }, children) },
         React.createElement("table", { className: getCssClasses() }, children)));
 };
 
@@ -2661,7 +2651,7 @@ const TableBody = (props) => {
 const TableCell = (props) => {
     const { variant } = useTableContext();
     const { children, component } = props, rest = __rest(props, ["children", "component"]);
-    return (React.createElement(ConditionalWrapper, { condition: true, wrapper: children => ((variant === 'head' || component === 'th') ? (React.createElement("th", Object.assign({}, rest), children)) :
+    return (React.createElement(ConditionalWrapper, { condition: true, wrapper: (children) => ((variant === 'head' || component === 'th') ? (React.createElement("th", Object.assign({}, rest), children)) :
             React.createElement("td", Object.assign({}, rest), children)) }, children));
 };
 
@@ -2879,19 +2869,19 @@ const TimeSelect = (props) => {
         showHours &&
             React.createElement(Column, null,
                 React.createElement(FormLabel, null, "Hours"),
-                React.createElement(HourSelect, { value: currDate.getHours(), disabled: disabled, onChange: e => handleOnChange(e, TIMEMODE.HOUR) })),
+                React.createElement(HourSelect, { value: currDate.getHours(), disabled: disabled, onChange: (e) => handleOnChange(e, TIMEMODE.HOUR) })),
         showMinutes &&
             React.createElement(Column, null,
                 React.createElement(FormLabel, null, "Minutes"),
-                React.createElement(MinuteSelect, { value: currDate.getMinutes(), disabled: disabled, onChange: e => handleOnChange(e, TIMEMODE.MINUTE) })),
+                React.createElement(MinuteSelect, { value: currDate.getMinutes(), disabled: disabled, onChange: (e) => handleOnChange(e, TIMEMODE.MINUTE) })),
         showSeconds &&
             React.createElement(Column, null,
                 React.createElement(FormLabel, null, "Seconds"),
-                React.createElement(SecondSelect, { value: currDate.getSeconds(), disabled: disabled, onChange: e => handleOnChange(e, TIMEMODE.SECONDS) })),
+                React.createElement(SecondSelect, { value: currDate.getSeconds(), disabled: disabled, onChange: (e) => handleOnChange(e, TIMEMODE.SECONDS) })),
         showMilliSeconds &&
             React.createElement(Column, null,
                 React.createElement(FormLabel, null, "Milliseconds"),
-                React.createElement(MilliSecondSelect, { value: currDate.getMilliseconds(), disabled: disabled, onChange: e => handleOnChange(e, TIMEMODE.MILLISECONDS) }))));
+                React.createElement(MilliSecondSelect, { value: currDate.getMilliseconds(), disabled: disabled, onChange: (e) => handleOnChange(e, TIMEMODE.MILLISECONDS) }))));
 };
 
 var css_248z$1 = ".TreeView-module_treeView__VVj-4 {\n  list-style-type: none;\n  margin-bottom: 0;\n  padding-left: 0px !important;\n  margin-block-start: 0;\n  margin-block-end: 0;\n  margin-inline-start: 0px;\n  margin-inline-end: 0px;\n  padding-inline-start: 0px;\n}\n.TreeView-module_treeView__VVj-4 ul {\n  padding-left: 48px !important;\n}";
@@ -2924,12 +2914,14 @@ const TreeItem = (props) => {
         return cssClasses.filter(css => css).join(' ');
     };
     useEffect(() => {
-        if (isExpanded !== undefined)
+        if (isExpanded !== undefined) {
             setIsExpanded(isExpanded);
+        }
     }, [isExpanded]);
     useEffect(() => {
-        if (isSelected !== undefined)
+        if (isSelected !== undefined) {
             setIsSelected(isSelected);
+        }
     }, [isSelected]);
     const handleOnToggleExpand = (nodeId) => {
         setIsExpanded(!_isExpanded);

package/index.js

@@ -244,11 +244,9 @@ function useDebounce(callback, timeout, deps) {
 }
 
 const useConstructor = (callBack) => {
-    const [hasBeenCalled, setHasBeenCalled] = React.useState(false);
-    if (hasBeenCalled)
-        return;
-    callBack();
-    setHasBeenCalled(true);
+    React.useEffect(() => {
+        callBack();
+    }, []);
 };
 
 function useCssClasses(cssClasses) {
@@ -414,7 +412,7 @@ styleInject(css_248z$V);
 
 const ListItemAction = (_a) => {
     var { children, onClick } = _a, rest = __rest(_a, ["children", "onClick"]);
-    return (React__default["default"].createElement("div", Object.assign({ className: styles$V.listItemAction, onClick: e => onClick && onClick(e) }, rest), children));
+    return (React__default["default"].createElement("div", Object.assign({ className: styles$V.listItemAction, onClick: (e) => onClick && onClick(e) }, rest), children));
 };
 
 var css_248z$U = ".ListItemTextIcon-module_listItemText__xCBLW {\n  flex: 1;\n}";
@@ -646,7 +644,7 @@ const BreadcrumbItem = (props) => {
         onClick && onClick(event);
     };
     return (React__default["default"].createElement("li", { className: getCssClasses(), onClick: handleClick },
-        React__default["default"].createElement(ConditionalWrapper, { condition: !isActive, 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$N = ".Card-module_card__TQdQq {\n  background: var(--white);\n  border-radius: var(--borderRadius);\n}\n.Card-module_card__TQdQq.Card-module_shadow__NxDVz {\n  box-shadow: var(--shadow);\n}";
@@ -827,7 +825,7 @@ const Chip = (props) => {
     };
     return (React__default["default"].createElement("div", Object.assign({ className: getCssClass() }, rest, { style: style }),
         React__default["default"].createElement("span", null, children),
-        isDeletable && (React__default["default"].createElement("div", { className: styles$F.deleteIcon, onClick: e => handleClickOnDelete(e) }, deleteIcon))));
+        isDeletable && (React__default["default"].createElement("div", { className: styles$F.deleteIcon, onClick: (e) => handleClickOnDelete(e) }, deleteIcon))));
 };
 
 const CssTransition = (props) => {
@@ -887,7 +885,7 @@ const CssTransition = (props) => {
     };
     React.useEffect(() => {
         if (isShow !== undefined && (isShow === true || isShow === false)) {
-            renderAnimation(isShow);
+            void renderAnimation(isShow);
         }
     }, [isShow]);
     const getCssClasses = () => {
@@ -910,21 +908,9 @@ var styles$E = {"column":"Column-module_column__fcTgl"};
 styleInject(css_248z$E);
 
 const Column = (props) => {
-    const { children, className } = props, 
-    // xs,
-    // sm,
-    // md,
-    // lg,
-    // xl,
-    rest = __rest(props, ["children", "className"]);
-    const getCssClasses = () => {
-        const cssClasses = [];
-        // !xs && !sm && !md && !lg && !xl && cssClasses.push('col');
-        // if (xs) cssClasses.push(`col-${xs.toString()}`);
-        // if (sm) cssClasses.push(`col-sm-${sm.toString()}`);
-        // if (md) cssClasses.push(`col-md-${md.toString()}`);
-        // if (lg) cssClasses.push(`col-lg-${lg.toString()}`);
-        // if (xl) cssClasses.push(`col-xl-${xl.toString()}`);
+    const { children, className } = props, rest = __rest(props, ["children", "className"]);
+    const getCssClasses = () => {
+        const cssClasses = [];
         cssClasses.push(styles$E.column);
         className && cssClasses.push(className);
         return cssClasses.filter(css => css).join(' ');
@@ -1125,20 +1111,22 @@ const Select = (props) => {
                 case 'Enter':
                     if (hoverIndex) {
                         const option = options[hoverIndex];
-                        if (option)
+                        if (option) {
                             handleOnClick(option);
+                        }
                     }
                     break;
             }
         }
     };
     return (React__default["default"].createElement("div", { ref: selectConainter, className: styles$B.selectContainer },
-        React__default["default"].createElement("div", { id: id, className: getCssClass(), onClick: () => show(), tabIndex: 0, onKeyDown: e => handleOnKeyDown(e) },
-            !multiple && renderSingleViewModel(),
-            multiple &&
-                React__default["default"].createElement("div", { className: styles$B.chipContainer }, renderMultipleViewModel()),
-            React__default["default"].createElement(Icon, { className: "ml-auto" },
-                React__default["default"].createElement(ChevronDownSolidIcon, null))),
+        React__default["default"].createElement("div", { id: id, className: getCssClass(), onClick: () => show(), tabIndex: 0, onKeyDown: (e) => handleOnKeyDown(e) },
+            React__default["default"].createElement(React__default["default"].Fragment, null,
+                !multiple && renderSingleViewModel(),
+                multiple &&
+                    React__default["default"].createElement("div", { className: styles$B.chipContainer }, renderMultipleViewModel()),
+                React__default["default"].createElement(Icon, { className: "ml-auto" },
+                    React__default["default"].createElement(ChevronDownSolidIcon, null)))),
         isShow &&
             React__default["default"].createElement(Portal, { className: 'backdrop-root' },
                 React__default["default"].createElement("div", { className: styles$B.selectMenu, style: { left: (_a = selectConainter.current) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect().x, top: (_b = selectConainter.current) === null || _b === void 0 ? void 0 : _b.getBoundingClientRect().y, width: (_c = selectConainter.current) === null || _c === void 0 ? void 0 : _c.getBoundingClientRect().width } },
@@ -1196,20 +1184,20 @@ const FormInput = (props) => {
             type === 'color' ||
             type === 'time')
             &&
-                React__default["default"].createElement("input", { id: name, name: name, type: type, className: getCssClasses(), 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), onBlur: onBlur, placeholder: placeholder, readOnly: readonly, disabled: disabled, onKeyDown: onKeyDown }),
+                React__default["default"].createElement("input", { id: name, name: name, type: type, className: getCssClasses(), 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), onBlur: onBlur, placeholder: placeholder, readOnly: readonly, disabled: disabled, onKeyDown: onKeyDown }),
         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"),
+            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, error: !isValid, 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' } }),
+            React__default["default"].createElement(Textarea, { id: name, name: name, className: className, error: !isValid, 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), 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), 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), onSelect: e => handleOnChange(e.value, type, name), 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), onSelect: (e) => handleOnChange(e.value, 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 }),
+            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 }),
         type === 'radio' &&
             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("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))))));
 };
 
@@ -1266,8 +1254,10 @@ class Form extends React.Component {
             const keys = Object.keys(this.state.controls);
             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;
+                // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                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) {
@@ -1367,7 +1357,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)) {
             const field = this.getControl(fieldKey);
@@ -1408,8 +1397,7 @@ class Form extends React.Component {
         this.setState({ controls: {}, isValid: false, isChanged: false, isSubmitted: false });
     }
     getFormGroupCssClass(fieldKey) {
-        const result = this.getControl(fieldKey).config.formGroupClassName;
-        return result;
+        return this.getControl(fieldKey).config.formGroupClassName;
     }
     render() {
         return (React__default["default"].createElement("form", { ref: this.myForm }, this.state && this.state.controls && Object.keys(this.state.controls).map((fieldKey) => {
@@ -1540,13 +1528,13 @@ const DateSelect = (props) => {
     return (React__default["default"].createElement(Row, { className: getCssClasses() },
         React__default["default"].createElement(Column, null,
             React__default["default"].createElement(FormLabel, null, "Year"),
-            React__default["default"].createElement(YearSelect, { value: currDate.getFullYear(), disabled: disabled, from: yearConfig === null || yearConfig === void 0 ? void 0 : yearConfig.from, to: yearConfig === null || yearConfig === void 0 ? void 0 : yearConfig.to, onChange: e => handleOnChange(e, exports.DATEMODE.YEAR) })),
+            React__default["default"].createElement(YearSelect, { value: currDate.getFullYear(), disabled: disabled, from: yearConfig === null || yearConfig === void 0 ? void 0 : yearConfig.from, to: yearConfig === null || yearConfig === void 0 ? void 0 : yearConfig.to, onChange: (e) => handleOnChange(e, exports.DATEMODE.YEAR) })),
         React__default["default"].createElement(Column, null,
             React__default["default"].createElement(FormLabel, null, "Month"),
-            React__default["default"].createElement(MonthSelect, { value: currDate.getMonth(), disabled: disabled, onChange: e => handleOnChange(e, exports.DATEMODE.MONTH) })),
+            React__default["default"].createElement(MonthSelect, { value: currDate.getMonth(), disabled: disabled, onChange: (e) => handleOnChange(e, exports.DATEMODE.MONTH) })),
         React__default["default"].createElement(Column, null,
             React__default["default"].createElement(FormLabel, null, "Day"),
-            React__default["default"].createElement(DaySelect, { day: currDate.getDate(), month: currDate.getMonth(), year: currDate.getFullYear(), disabled: disabled, onChange: e => handleOnChange(e, exports.DATEMODE.DAY) }))));
+            React__default["default"].createElement(DaySelect, { day: currDate.getDate(), month: currDate.getMonth(), year: currDate.getFullYear(), disabled: disabled, onChange: (e) => handleOnChange(e, exports.DATEMODE.DAY) }))));
 };
 /*
 * result = { year, month, day, dayOfWeek, weekNumber }
@@ -1591,7 +1579,7 @@ const DrawerContent = (props) => {
     };
     const positionStyles = {
         left: { left: '0px' },
-        right: { right: '0px' },
+        right: { right: '0px' }
     };
     const getStyles = () => {
         return !permanent ? positionStyles[position] : undefined;
@@ -1678,7 +1666,7 @@ const MenuItem = (props) => {
 };
 
 const MenuToggle = ({ children }) => {
-    return (React__default["default"].createElement(React.Fragment, null, children));
+    return children;
 };
 
 var css_248z$v = ".MenuDivider-module_menuItemDivider__oRP-j {\n  height: 0;\n  margin: 0.5rem 0;\n  overflow: hidden;\n  border-top: 1px solid #e9ecef;\n}";
@@ -1921,7 +1909,7 @@ const Modal = (props) => {
                         React__default["default"].createElement(ModalBody, null, children),
                         footer &&
                             React__default["default"].createElement(ModalFooter, null, footer))))),
-        React__default["default"].createElement(Backdrop, { onClick: handleClickBackdrop })));
+        React__default["default"].createElement(Backdrop, { onClick: handleClickBackdrop, style: { zIndex: 1040 } })));
 };
 
 exports.MODALTYPE = void 0;
@@ -2204,11 +2192,11 @@ const Sidebar = (props) => {
             setMenuItems(newMenuItems);
         }
         else {
-            navigate(e, `/${item.path}`);
+            navigate(e, `${item.path}`);
         }
     };
     const handleClickSubItem = (itemPath, subItemPath, e) => {
-        navigate(e, `/${itemPath}/${subItemPath}`);
+        navigate(e, `${itemPath}/${subItemPath}`);
     };
     return (React__default["default"].createElement("nav", Object.assign({ className: getCssClasses() }, rest),
         React__default["default"].createElement(List, null, menuItems.map(item => (React__default["default"].createElement(React__default["default"].Fragment, { key: item.id },
@@ -2309,10 +2297,12 @@ const SpeedDial = (props) => {
         return cssClasses.filter(css => css).join(' ');
     };
     const handleClick = (e) => {
-        if (open)
+        if (open) {
             onClose && onClose(e);
-        else
+        }
+        else {
             onOpen && onOpen(e);
+        }
     };
     return (React__default["default"].createElement("div", Object.assign({ className: getCssClasses() }, rest),
         React__default["default"].createElement("div", { style: { 'transform': open ? 'rotate(45deg)' : undefined } },
@@ -2422,7 +2412,7 @@ const Stepper = (props) => {
         });
     };
     const renderSteps = (child, index) => {
-        return React__default["default"].isValidElement(child) &&
+        return (React__default["default"].createElement(React__default["default"].Fragment, null, React__default["default"].isValidElement(child) &&
             React.cloneElement(child, {
                 index: index,
                 isActive: activeIndex >= index,
@@ -2431,7 +2421,7 @@ const Stepper = (props) => {
                 showLabel: showLabel,
                 showProgressCheckIcon: showProgressCheckIcon,
                 onClick: (e) => handleClickStep(e.event, e.value, index)
-            });
+            })));
     };
     const isStepOptional = (index) => {
         return steps && steps[index].props.isOptional;
@@ -2641,7 +2631,7 @@ const Table = (props) => {
         className && cssClasses.push(className);
         return cssClasses.filter(css => css).join(' ');
     };
-    return (React__default["default"].createElement(ConditionalWrapper, { condition: responsive, wrapper: children => React__default["default"].createElement("div", { className: styles$5.tableResponsive }, children) },
+    return (React__default["default"].createElement(ConditionalWrapper, { condition: responsive, wrapper: (children) => React__default["default"].createElement("div", { className: styles$5.tableResponsive }, children) },
         React__default["default"].createElement("table", { className: getCssClasses() }, children)));
 };
 
@@ -2670,7 +2660,7 @@ const TableBody = (props) => {
 const TableCell = (props) => {
     const { variant } = useTableContext();
     const { children, component } = props, rest = __rest(props, ["children", "component"]);
-    return (React__default["default"].createElement(ConditionalWrapper, { condition: true, wrapper: children => ((variant === 'head' || component === 'th') ? (React__default["default"].createElement("th", Object.assign({}, rest), children)) :
+    return (React__default["default"].createElement(ConditionalWrapper, { condition: true, wrapper: (children) => ((variant === 'head' || component === 'th') ? (React__default["default"].createElement("th", Object.assign({}, rest), children)) :
             React__default["default"].createElement("td", Object.assign({}, rest), children)) }, children));
 };
 
@@ -2888,19 +2878,19 @@ const TimeSelect = (props) => {
         showHours &&
             React__default["default"].createElement(Column, null,
                 React__default["default"].createElement(FormLabel, null, "Hours"),
-                React__default["default"].createElement(HourSelect, { value: currDate.getHours(), disabled: disabled, onChange: e => handleOnChange(e, exports.TIMEMODE.HOUR) })),
+                React__default["default"].createElement(HourSelect, { value: currDate.getHours(), disabled: disabled, onChange: (e) => handleOnChange(e, exports.TIMEMODE.HOUR) })),
         showMinutes &&
             React__default["default"].createElement(Column, null,
                 React__default["default"].createElement(FormLabel, null, "Minutes"),
-                React__default["default"].createElement(MinuteSelect, { value: currDate.getMinutes(), disabled: disabled, onChange: e => handleOnChange(e, exports.TIMEMODE.MINUTE) })),
+                React__default["default"].createElement(MinuteSelect, { value: currDate.getMinutes(), disabled: disabled, onChange: (e) => handleOnChange(e, exports.TIMEMODE.MINUTE) })),
         showSeconds &&
             React__default["default"].createElement(Column, null,
                 React__default["default"].createElement(FormLabel, null, "Seconds"),
-                React__default["default"].createElement(SecondSelect, { value: currDate.getSeconds(), disabled: disabled, onChange: e => handleOnChange(e, exports.TIMEMODE.SECONDS) })),
+                React__default["default"].createElement(SecondSelect, { value: currDate.getSeconds(), disabled: disabled, onChange: (e) => handleOnChange(e, exports.TIMEMODE.SECONDS) })),
         showMilliSeconds &&
             React__default["default"].createElement(Column, null,
                 React__default["default"].createElement(FormLabel, null, "Milliseconds"),
-                React__default["default"].createElement(MilliSecondSelect, { value: currDate.getMilliseconds(), disabled: disabled, onChange: e => handleOnChange(e, exports.TIMEMODE.MILLISECONDS) }))));
+                React__default["default"].createElement(MilliSecondSelect, { value: currDate.getMilliseconds(), disabled: disabled, onChange: (e) => handleOnChange(e, exports.TIMEMODE.MILLISECONDS) }))));
 };
 
 var css_248z$1 = ".TreeView-module_treeView__VVj-4 {\n  list-style-type: none;\n  margin-bottom: 0;\n  padding-left: 0px !important;\n  margin-block-start: 0;\n  margin-block-end: 0;\n  margin-inline-start: 0px;\n  margin-inline-end: 0px;\n  padding-inline-start: 0px;\n}\n.TreeView-module_treeView__VVj-4 ul {\n  padding-left: 48px !important;\n}";
@@ -2933,12 +2923,14 @@ const TreeItem = (props) => {
         return cssClasses.filter(css => css).join(' ');
     };
     React.useEffect(() => {
-        if (isExpanded !== undefined)
+        if (isExpanded !== undefined) {
             setIsExpanded(isExpanded);
+        }
     }, [isExpanded]);
     React.useEffect(() => {
-        if (isSelected !== undefined)
+        if (isSelected !== undefined) {
             setIsSelected(isSelected);
+        }
     }, [isSelected]);
     const handleOnToggleExpand = (nodeId) => {
         setIsExpanded(!_isExpanded);

package/interfaces/index.d.ts

@@ -0,0 +1 @@
+export * from './interfaces';

package/interfaces/interfaces.d.ts

@@ -0,0 +1,3 @@
+export interface IDictionary<T> {
+    [key: string]: T;
+}

package/package.json

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