react-asc 25.0.5 → 25.1.0

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,5 +1,5 @@
 /// <reference types="react" />
-import { ISelectOption } from '../component.interfaces';
+import type { ISelectOption } from '../component.interfaces';
 export interface IAutoCompleteProps {
     id?: string;
     name?: string;

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,5 +1,5 @@
 /// <reference types="react" />
-import { COLOR } from '../component.enums';
+import type { COLOR } from '../component.enums';
 export interface IButtonContext {
     color: COLOR | null;
 }

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,4 +1,4 @@
-import React from 'react';
+import type React from 'react';
 interface IConditionalWrapperProps {
     condition: boolean;
     wrapper: (children: React.ReactNode) => JSX.Element;

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,11 +1,11 @@
 import React, { Component } from 'react';
-import { IControls, IFormValues } from './form.interfaces';
-import { FormControl } from './form.models';
+import type { IControls } from './form.interfaces';
+import type { FormControl } from './form.models';
 export interface IFormProps {
     controls: IControls;
     validateOnBlur?: boolean;
-    onSubmit?: (values: IFormValues) => void;
-    onChange?: (values: IFormValues) => void;
+    onSubmit?: (values: unknown) => void;
+    onChange?: (values: unknown) => void;
     submitOnEnter?: boolean;
 }
 export interface IFormState {

package/components/Form/FormError.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-import { IFormInputError } from './form.interfaces';
+import type { IFormInputError } from './form.interfaces';
 interface IFormErrorProps {
     className?: string;
     errors?: IFormInputError[];

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;

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

@@ -1,10 +1,7 @@
-import { FormControl } from './form.models';
+import type { FormControl } from './form.models';
 export interface IControls {
     [key: string]: FormControl;
 }
-export interface IFormValues {
-    [key: string]: unknown;
-}
 export interface IFormTextAreaOptions {
     rows: number;
     resize: boolean;

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

@@ -1,5 +1,5 @@
-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: string[];

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,6 +1,7 @@
-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;

package/components/Menu/MenuBody.d.ts

@@ -1,6 +1,7 @@
-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> | ReactElement<IListItemProps>[];
     className?: string;

package/components/Menu/MenuContext.d.ts

@@ -1,4 +1,4 @@
-import { Context, Dispatch } from 'react';
+import type { Context, Dispatch } from 'react';
 export interface IMenuContext {
     isShow: boolean;
     setIsShow: Dispatch<boolean>;

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,4 +1,4 @@
-import { ReactNode } from 'react';
+import type { ReactNode } from 'react';
 interface IMenuToggleProps {
     children?: ReactNode;
 }

package/components/Modal/GlobalModal.d.ts

@@ -1,15 +1,15 @@
-import { ReactElement } from 'react';
+import type { ReactElement } from 'react';
 import { SIZE } from '../component.enums';
-import { IControls, IFormValues } from '../Form';
+import type { IControls } 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;
     formControls?: IControls;
     modalType?: MODALTYPE;
-    onOk: (values?: IFormValues) => void;
-    onChange?: (values?: IFormValues) => void;
+    onOk: <T>(values?: T) => void;
+    onChange?: <T>(values?: T) => void;
     onCancel?: () => void;
     onBackdropClick?: () => void;
     isDismissable?: boolean;

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,7 +1,7 @@
-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>;
 }

package/components/Select/Select.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import { ISelectOption } from '../component.interfaces';
+import type { ISelectOption } from '../component.interfaces';
 export interface ISelectProps {
     id?: string;
     name?: string;

package/components/Sidebar/Sidebar.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import { ISidebarItem } from './sidebar.interfaces';
+import type { ISidebarItem } from './sidebar.interfaces';
 interface ISidebarProps extends React.ComponentProps<'nav'> {
     items: ISidebarItem[];
     currentUrl: string;

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,5 +1,5 @@
-import { ReactElement } from 'react';
-import { IStepProps } from './Step';
+import type { ReactElement } from 'react';
+import type { IStepProps } from './Step';
 export interface IStepperProps {
     children?: ReactElement<IStepProps> | ReactElement<IStepProps>[];
     isLinear?: boolean;
@@ -12,5 +12,7 @@ export interface IStepperProps {
     alternativeLabel?: boolean;
     value?: number;
     isReadonly?: boolean;
+    showDoneButton?: boolean;
+    showResetButton?: boolean;
 }
 export declare const Stepper: (props: IStepperProps) => JSX.Element;

package/components/Stepper/StepperActions/StepperActions.d.ts

@@ -1,6 +1,8 @@
 /// <reference types="react" />
 export interface IStepperActionsProps {
     className?: string;
+    showDoneButton?: boolean;
+    showResetButton?: boolean;
     isCompleted?: boolean;
     isFirstStep?: boolean;
     isStepOptional?: boolean;

package/components/Table/Table.d.ts

@@ -1,4 +1,4 @@
-import { ReactElement } from 'react';
+import type { ReactElement } from 'react';
 export interface ITableProps {
     children?: ReactElement | ReactElement[];
     className?: string;

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,6 +1,6 @@
-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;

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/index.es.js

@@ -235,12 +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) {
@@ -263,7 +260,7 @@ function useHover() {
                 node.removeEventListener('mouseout', handleMouseOut);
             };
         }
-        return;
+        return undefined;
     }, [ref.current] // Recall only if ref changes
     );
     return [ref, value];
@@ -879,7 +876,7 @@ const CssTransition = (props) => {
     };
     useEffect(() => {
         if (isShow !== undefined && (isShow === true || isShow === false)) {
-            renderAnimation(isShow);
+            void renderAnimation(isShow);
         }
     }, [isShow]);
     const getCssClasses = () => {
@@ -1995,10 +1992,6 @@ class ModalService {
                     resolve(values);
                     this.hide();
                 };
-                // TODO - for AutoComplete
-                // const handleOnChange = (values?: IFormValues) => {
-                // 	console.info(values);
-                // }
                 const handleCancel = () => {
                     reject();
                     this.hide();
@@ -2335,7 +2328,7 @@ var styles$e = {"stepperActions":"StepperActions-module_stepperActions__hBUkh"};
 styleInject(css_248z$e);
 
 const StepperActions = (props) => {
-    const { className, isCompleted, isFirstStep, isStepOptional, onBack, onSkip, onNext, onReset } = props;
+    const { className, showDoneButton, showResetButton, isCompleted, isFirstStep, isStepOptional, onBack, onSkip, onNext, onReset } = props;
     const getCssClasses = () => {
         const cssClasses = [];
         cssClasses.push(styles$e.stepperActions);
@@ -2343,11 +2336,15 @@ const StepperActions = (props) => {
         return cssClasses.filter(css => css).join(' ');
     };
     return (React.createElement("div", { className: getCssClasses() },
-        React.createElement(Button, { className: "mr-2", variant: VARIANT.outline, disabled: isFirstStep, startIcon: !isFirstStep ? React.createElement(ChevronLeftSolidIcon, null) : undefined, onClick: () => onBack && onBack() }, "Back"),
+        !isFirstStep &&
+            React.createElement(Button, { className: "mr-2", variant: VARIANT.outline, startIcon: React.createElement(ChevronLeftSolidIcon, null), onClick: () => onBack && onBack() }, "Back"),
         React.createElement("div", { className: "ml-auto" },
-            isCompleted && (React.createElement(Button, { className: "mr-2", color: COLOR.secondary, variant: VARIANT.text, onClick: () => onReset && onReset() }, "Reset")),
-            isStepOptional && (React.createElement(Button, { className: "mr-2", variant: VARIANT.contained, color: COLOR.primary, onClick: () => onSkip && onSkip() }, "Skip")),
-            React.createElement(Button, { variant: VARIANT.contained, color: COLOR.primary, startIcon: isCompleted ? React.createElement(CheckSolidIcon, null) : undefined, endIcon: !isCompleted ? React.createElement(ChevronRightSolidIcon, null) : undefined, onClick: () => onNext && onNext() }, isCompleted ? 'Done' : 'Next'))));
+            isCompleted && showResetButton && (React.createElement(Button, { color: COLOR.secondary, variant: VARIANT.text, onClick: () => onReset && onReset() }, "Reset")),
+            isStepOptional && (React.createElement(Button, { variant: VARIANT.contained, color: COLOR.primary, onClick: () => onSkip && onSkip() }, "Skip")),
+            !isCompleted &&
+                React.createElement(Button, { className: 'ml-2', variant: VARIANT.contained, color: COLOR.primary, endIcon: React.createElement(ChevronRightSolidIcon, null), onClick: () => onNext && onNext() }, "Next"),
+            isCompleted && showDoneButton &&
+                React.createElement(Button, { className: 'ml-2', variant: VARIANT.contained, color: COLOR.primary, startIcon: React.createElement(CheckSolidIcon, null), onClick: () => onNext && onNext() }, "Done"))));
 };
 
 const StepPanel = (props) => {
@@ -2382,7 +2379,7 @@ var styles$c = {"stepper":"Stepper-module_stepper__V6odG","isHorizontal":"Steppe
 styleInject(css_248z$c);
 
 const Stepper = (props) => {
-    const { children, isLinear = true, showLabel = true, showProgressCheckIcon = false, value, isHorizontal = true, onChange, onFinish } = props;
+    const { children, isLinear = true, showLabel = true, showProgressCheckIcon = false, value, isHorizontal = true, showDoneButton, showResetButton, onChange, onFinish } = props;
     const [steps, setSteps] = useState();
     const [activeIndex, setActiveIndex] = React.useState(0);
     const [skipped, setSkipped] = React.useState(new Set());
@@ -2399,7 +2396,7 @@ const Stepper = (props) => {
     const isStepSkipped = (step) => {
         return skipped.has(step);
     };
-    const handleClickStep = (event, newValue, index) => {
+    const handleClickStep = (index) => {
         setActiveIndex(() => {
             onChange && onChange(index);
             return index;
@@ -2414,7 +2411,7 @@ const Stepper = (props) => {
                 isDisabled: isLinear && (activeIndex + 1 < index),
                 showLabel: showLabel,
                 showProgressCheckIcon: showProgressCheckIcon,
-                onClick: (e) => handleClickStep(e.event, e.value, index)
+                onClick: () => handleClickStep(index)
             })));
     };
     const isStepOptional = (index) => {
@@ -2473,12 +2470,12 @@ const Stepper = (props) => {
     };
     return (React.createElement(React.Fragment, null, steps &&
         React.createElement(React.Fragment, null,
-            React.createElement("div", { className: getCssClasses() }, steps.map((child, index) => (React.createElement(React.Fragment, { key: child.props.value },
+            React.createElement("div", { className: getCssClasses() }, steps.map((child, index) => (React.createElement(Fragment, { key: child.props.value },
                 renderSteps(child, index),
                 index !== steps.length - 1 && React.createElement(StepConnector, { isActive: activeIndex > index }))))),
             steps && steps.map((step, index) => React.createElement(Fragment, { key: step.props.value }, index === activeIndex &&
                 React.createElement(StepPanel, null, step.props.children))),
-            React.createElement(StepperActions, { className: "mt-3", isFirstStep: activeIndex === 0, isStepOptional: isStepOptional(activeIndex), isCompleted: isLastStep(), onBack: handleBack, onSkip: handleSkip, onNext: handleNext, onReset: handleReset }))));
+            React.createElement(StepperActions, { className: "mt-3", isFirstStep: activeIndex === 0, isStepOptional: isStepOptional(activeIndex), isCompleted: isLastStep(), onBack: handleBack, onSkip: handleSkip, onNext: handleNext, onReset: handleReset, showDoneButton: showDoneButton, showResetButton: showResetButton }))));
 };
 
 var css_248z$b = ".Typography-module_typography__sw-td {\n  font-family: var(--fontFamily);\n}\n.Typography-module_typography__sw-td.Typography-module_wrap__W7G0R {\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n\nh1 {\n  font-size: calc(1.375rem + 1.5vw);\n}\n\nh2 {\n  font-size: calc(1.325rem + 0.9vw);\n}\n\nh3 {\n  font-size: calc(1.3rem + 0.6vw);\n}\n\nh4 {\n  font-size: calc(1.275rem + 0.3vw);\n}\n\nh5 {\n  font-size: 1.25rem;\n}\n\nh6 {\n  font-size: 1rem;\n}\n\nh1,\nh2,\nh3,\nh4,\nh5,\nh6 {\n  font-weight: 500 !important;\n  margin-top: 0;\n  margin-bottom: 0.5rem;\n  line-height: 1.2;\n}";
@@ -2906,6 +2903,8 @@ var css_248z = ".TreeItem-module_treeItem__Mxsjr {\n  display: flex;\n  flex-dir
 var styles = {"treeItem":"TreeItem-module_treeItem__Mxsjr"};
 styleInject(css_248z);
 
+// TODO - extract
+const TreeViewItemPadding = 48;
 const TreeItem = (props) => {
     const { nodeId, label, children, className, isExpanded, isSelected, isSelectable, onToggleExpand, onItemSelect } = props;
     const [_isExpanded, setIsExpanded] = useState(false);
@@ -2934,7 +2933,7 @@ const TreeItem = (props) => {
         setIsSelected(!_isSelected);
         onItemSelect && onItemSelect({ id: nodeId, isSelected: !_isSelected });
     };
-    return (React.createElement("li", { className: getCssClasses(), style: { paddingLeft: `${(48 * (children ? 0 : 1))}px` } },
+    return (React.createElement("li", { className: getCssClasses(), style: { paddingLeft: `${(TreeViewItemPadding * (children ? 0 : 1))}px` } },
         React.createElement("div", { className: "d-flex align-items-center" },
             children && nodeId &&
                 React.createElement(IconButton, { onClick: () => handleOnToggleExpand(nodeId), icon: !_isExpanded ? React.createElement(ChevronRightSolidIcon, null) : React.createElement(ChevronDownSolidIcon, null) }),

package/index.js

@@ -244,12 +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) {
@@ -272,7 +269,7 @@ function useHover() {
                 node.removeEventListener('mouseout', handleMouseOut);
             };
         }
-        return;
+        return undefined;
     }, [ref.current] // Recall only if ref changes
     );
     return [ref, value];
@@ -888,7 +885,7 @@ const CssTransition = (props) => {
     };
     React.useEffect(() => {
         if (isShow !== undefined && (isShow === true || isShow === false)) {
-            renderAnimation(isShow);
+            void renderAnimation(isShow);
         }
     }, [isShow]);
     const getCssClasses = () => {
@@ -2004,10 +2001,6 @@ class ModalService {
                     resolve(values);
                     this.hide();
                 };
-                // TODO - for AutoComplete
-                // const handleOnChange = (values?: IFormValues) => {
-                // 	console.info(values);
-                // }
                 const handleCancel = () => {
                     reject();
                     this.hide();
@@ -2344,7 +2337,7 @@ var styles$e = {"stepperActions":"StepperActions-module_stepperActions__hBUkh"};
 styleInject(css_248z$e);
 
 const StepperActions = (props) => {
-    const { className, isCompleted, isFirstStep, isStepOptional, onBack, onSkip, onNext, onReset } = props;
+    const { className, showDoneButton, showResetButton, isCompleted, isFirstStep, isStepOptional, onBack, onSkip, onNext, onReset } = props;
     const getCssClasses = () => {
         const cssClasses = [];
         cssClasses.push(styles$e.stepperActions);
@@ -2352,11 +2345,15 @@ const StepperActions = (props) => {
         return cssClasses.filter(css => css).join(' ');
     };
     return (React__default["default"].createElement("div", { className: getCssClasses() },
-        React__default["default"].createElement(Button, { className: "mr-2", variant: exports.VARIANT.outline, disabled: isFirstStep, startIcon: !isFirstStep ? React__default["default"].createElement(ChevronLeftSolidIcon, null) : undefined, onClick: () => onBack && onBack() }, "Back"),
+        !isFirstStep &&
+            React__default["default"].createElement(Button, { className: "mr-2", variant: exports.VARIANT.outline, startIcon: React__default["default"].createElement(ChevronLeftSolidIcon, null), onClick: () => onBack && onBack() }, "Back"),
         React__default["default"].createElement("div", { className: "ml-auto" },
-            isCompleted && (React__default["default"].createElement(Button, { className: "mr-2", color: exports.COLOR.secondary, variant: exports.VARIANT.text, onClick: () => onReset && onReset() }, "Reset")),
-            isStepOptional && (React__default["default"].createElement(Button, { className: "mr-2", variant: exports.VARIANT.contained, color: exports.COLOR.primary, onClick: () => onSkip && onSkip() }, "Skip")),
-            React__default["default"].createElement(Button, { variant: exports.VARIANT.contained, color: exports.COLOR.primary, startIcon: isCompleted ? React__default["default"].createElement(CheckSolidIcon, null) : undefined, endIcon: !isCompleted ? React__default["default"].createElement(ChevronRightSolidIcon, null) : undefined, onClick: () => onNext && onNext() }, isCompleted ? 'Done' : 'Next'))));
+            isCompleted && showResetButton && (React__default["default"].createElement(Button, { color: exports.COLOR.secondary, variant: exports.VARIANT.text, onClick: () => onReset && onReset() }, "Reset")),
+            isStepOptional && (React__default["default"].createElement(Button, { variant: exports.VARIANT.contained, color: exports.COLOR.primary, onClick: () => onSkip && onSkip() }, "Skip")),
+            !isCompleted &&
+                React__default["default"].createElement(Button, { className: 'ml-2', variant: exports.VARIANT.contained, color: exports.COLOR.primary, endIcon: React__default["default"].createElement(ChevronRightSolidIcon, null), onClick: () => onNext && onNext() }, "Next"),
+            isCompleted && showDoneButton &&
+                React__default["default"].createElement(Button, { className: 'ml-2', variant: exports.VARIANT.contained, color: exports.COLOR.primary, startIcon: React__default["default"].createElement(CheckSolidIcon, null), onClick: () => onNext && onNext() }, "Done"))));
 };
 
 const StepPanel = (props) => {
@@ -2391,7 +2388,7 @@ var styles$c = {"stepper":"Stepper-module_stepper__V6odG","isHorizontal":"Steppe
 styleInject(css_248z$c);
 
 const Stepper = (props) => {
-    const { children, isLinear = true, showLabel = true, showProgressCheckIcon = false, value, isHorizontal = true, onChange, onFinish } = props;
+    const { children, isLinear = true, showLabel = true, showProgressCheckIcon = false, value, isHorizontal = true, showDoneButton, showResetButton, onChange, onFinish } = props;
     const [steps, setSteps] = React.useState();
     const [activeIndex, setActiveIndex] = React__default["default"].useState(0);
     const [skipped, setSkipped] = React__default["default"].useState(new Set());
@@ -2408,7 +2405,7 @@ const Stepper = (props) => {
     const isStepSkipped = (step) => {
         return skipped.has(step);
     };
-    const handleClickStep = (event, newValue, index) => {
+    const handleClickStep = (index) => {
         setActiveIndex(() => {
             onChange && onChange(index);
             return index;
@@ -2423,7 +2420,7 @@ const Stepper = (props) => {
                 isDisabled: isLinear && (activeIndex + 1 < index),
                 showLabel: showLabel,
                 showProgressCheckIcon: showProgressCheckIcon,
-                onClick: (e) => handleClickStep(e.event, e.value, index)
+                onClick: () => handleClickStep(index)
             })));
     };
     const isStepOptional = (index) => {
@@ -2482,12 +2479,12 @@ const Stepper = (props) => {
     };
     return (React__default["default"].createElement(React__default["default"].Fragment, null, steps &&
         React__default["default"].createElement(React__default["default"].Fragment, null,
-            React__default["default"].createElement("div", { className: getCssClasses() }, steps.map((child, index) => (React__default["default"].createElement(React__default["default"].Fragment, { key: child.props.value },
+            React__default["default"].createElement("div", { className: getCssClasses() }, steps.map((child, index) => (React__default["default"].createElement(React.Fragment, { key: child.props.value },
                 renderSteps(child, index),
                 index !== steps.length - 1 && React__default["default"].createElement(StepConnector, { isActive: activeIndex > index }))))),
             steps && steps.map((step, index) => React__default["default"].createElement(React.Fragment, { key: step.props.value }, index === activeIndex &&
                 React__default["default"].createElement(StepPanel, null, step.props.children))),
-            React__default["default"].createElement(StepperActions, { className: "mt-3", isFirstStep: activeIndex === 0, isStepOptional: isStepOptional(activeIndex), isCompleted: isLastStep(), onBack: handleBack, onSkip: handleSkip, onNext: handleNext, onReset: handleReset }))));
+            React__default["default"].createElement(StepperActions, { className: "mt-3", isFirstStep: activeIndex === 0, isStepOptional: isStepOptional(activeIndex), isCompleted: isLastStep(), onBack: handleBack, onSkip: handleSkip, onNext: handleNext, onReset: handleReset, showDoneButton: showDoneButton, showResetButton: showResetButton }))));
 };
 
 var css_248z$b = ".Typography-module_typography__sw-td {\n  font-family: var(--fontFamily);\n}\n.Typography-module_typography__sw-td.Typography-module_wrap__W7G0R {\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n\nh1 {\n  font-size: calc(1.375rem + 1.5vw);\n}\n\nh2 {\n  font-size: calc(1.325rem + 0.9vw);\n}\n\nh3 {\n  font-size: calc(1.3rem + 0.6vw);\n}\n\nh4 {\n  font-size: calc(1.275rem + 0.3vw);\n}\n\nh5 {\n  font-size: 1.25rem;\n}\n\nh6 {\n  font-size: 1rem;\n}\n\nh1,\nh2,\nh3,\nh4,\nh5,\nh6 {\n  font-weight: 500 !important;\n  margin-top: 0;\n  margin-bottom: 0.5rem;\n  line-height: 1.2;\n}";
@@ -2915,6 +2912,8 @@ var css_248z = ".TreeItem-module_treeItem__Mxsjr {\n  display: flex;\n  flex-dir
 var styles = {"treeItem":"TreeItem-module_treeItem__Mxsjr"};
 styleInject(css_248z);
 
+// TODO - extract
+const TreeViewItemPadding = 48;
 const TreeItem = (props) => {
     const { nodeId, label, children, className, isExpanded, isSelected, isSelectable, onToggleExpand, onItemSelect } = props;
     const [_isExpanded, setIsExpanded] = React.useState(false);
@@ -2943,7 +2942,7 @@ const TreeItem = (props) => {
         setIsSelected(!_isSelected);
         onItemSelect && onItemSelect({ id: nodeId, isSelected: !_isSelected });
     };
-    return (React__default["default"].createElement("li", { className: getCssClasses(), style: { paddingLeft: `${(48 * (children ? 0 : 1))}px` } },
+    return (React__default["default"].createElement("li", { className: getCssClasses(), style: { paddingLeft: `${(TreeViewItemPadding * (children ? 0 : 1))}px` } },
         React__default["default"].createElement("div", { className: "d-flex align-items-center" },
             children && nodeId &&
                 React__default["default"].createElement(IconButton, { onClick: () => handleOnToggleExpand(nodeId), icon: !_isExpanded ? React__default["default"].createElement(ChevronRightSolidIcon, null) : React__default["default"].createElement(ChevronDownSolidIcon, null) }),

package/package.json

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