react-asc 23.7.3 → 25.0.1

package/components/Button/Button.d.ts

@@ -5,8 +5,8 @@ export interface IButtonProps extends React.ComponentProps<'button'> {
     isActive?: boolean;
     isRounded?: boolean;
     variant?: VARIANT;
-    startIcon?: React.SVGProps<SVGSVGElement>;
-    endIcon?: React.SVGProps<SVGSVGElement>;
+    startIcon?: React.ReactNode;
+    endIcon?: React.ReactNode;
     shadow?: boolean;
     block?: boolean;
 }

package/components/FloatingActionButton/FloatingActionButton.d.ts

@@ -1,7 +1,7 @@
 import React from 'react';
 import { COLOR, SIZE } from '../component.enums';
 export interface IFloatingActionButtonProps extends React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement> {
-    icon?: React.SVGProps<SVGSVGElement>;
+    icon?: React.ReactNode;
     color?: COLOR;
     size?: SIZE;
     fixed?: boolean;

package/components/Icon/Icon.d.ts

@@ -1,6 +1,7 @@
-import { ComponentProps } from 'react';
+import React, { ComponentProps } from 'react';
 import { COLOR } from '../component.enums';
 export interface IIconProps extends ComponentProps<'div'> {
     iconColor?: COLOR;
+    children?: React.ReactNode;
 }
 export declare const Icon: (props: IIconProps) => JSX.Element;

package/components/IconButton/IconButton.d.ts

@@ -1,7 +1,7 @@
 import React from 'react';
 import { COLOR, SIZE, VARIANT } from '../component.enums';
 export interface IIconButtonProps extends React.ComponentProps<'button'> {
-    icon?: React.SVGProps<SVGSVGElement>;
+    icon?: React.ReactNode;
     color?: COLOR;
     size?: SIZE;
     isActive?: boolean;

package/components/List/ListItemAvatar.d.ts

@@ -1,6 +1,6 @@
 import React from 'react';
 interface IListItemAvatarProps extends React.ComponentProps<'div'> {
-    avatar: React.SVGProps<SVGSVGElement> | React.ImgHTMLAttributes<HTMLImageElement>;
+    avatar: React.ReactNode;
 }
 export declare const ListItemAvatar: ({ avatar, ...rest }: IListItemAvatarProps) => JSX.Element;
 export {};

package/components/List/ListItemIcon.d.ts

@@ -1,6 +1,6 @@
 import React from 'react';
 interface IListItemIconProps extends React.ComponentProps<'div'> {
-    icon: React.SVGProps<SVGSVGElement>;
+    icon: React.ReactNode;
 }
 export declare const ListItemIcon: ({ icon, ...rest }: IListItemIconProps) => JSX.Element;
 export {};

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

@@ -4,6 +4,7 @@ export interface ILoadingIndicatorService {
 declare class LoadingIndicatorService implements ILoadingIndicatorService {
     private container;
     private handler;
+    private root;
     show(): void;
     hide(): void;
 }

package/components/Modal/GlobalModal.d.ts

@@ -8,7 +8,8 @@ interface IModalProps {
     description?: string | ReactElement;
     formControls?: IControls;
     modalType?: MODALTYPE;
-    onOk?: (values?: IFormValues) => void;
+    onOk: (values?: IFormValues) => void;
+    onChange?: (values?: IFormValues) => void;
     onCancel?: () => void;
     onBackdropClick?: () => void;
     isDismissable?: boolean;
@@ -16,5 +17,5 @@ interface IModalProps {
     fullScreen?: boolean;
     size?: SIZE;
 }
-export declare const GlobalModal: ({ title, description, formControls, onOk, onCancel, onBackdropClick, isDismissable, buttons, size, fullScreen }: IModalProps) => JSX.Element;
+export declare const GlobalModal: ({ title, description, formControls, onOk, onChange, onCancel, onBackdropClick, isDismissable, buttons, size, fullScreen }: IModalProps) => JSX.Element;
 export {};

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

@@ -1,12 +1,11 @@
-import { IControls, IFormValues } from '../Form';
+import { IControls } from '../Form';
 import { ReactElement } from 'react';
 import { IModalButton } from './modal.interfaces';
 import { SIZE } from '../component.enums';
 export interface IModalService {
-    show(title: string, description: string | ReactElement, options?: IModalOptions): Promise<void | IFormValues>;
+    show(title: string, description: string | ReactElement, options?: IModalOptions): Promise<void>;
 }
 export interface IModalOptions {
-    formControls?: IControls;
     isDismissable?: boolean;
     buttons?: Array<IModalButton>;
     fullScreen?: boolean;
@@ -14,7 +13,9 @@ export interface IModalOptions {
 }
 declare class ModalService implements IModalService {
     private container;
-    show(title: string, description: string | ReactElement, options?: IModalOptions): Promise<void | IFormValues>;
+    private root;
+    show(title: string, description: string | ReactElement, options?: IModalOptions): Promise<void>;
+    showForm<T>(title: string, formControls: IControls, options?: IModalOptions): Promise<T>;
     private hide;
 }
 export declare const modalService: ModalService;

package/components/Snackbar/snackbar.service.d.ts

@@ -1,7 +1,7 @@
 import React from 'react';
 import { COLOR } from '../component.enums';
 export interface ISnackbarService {
-    show(message: React.ReactChildren | string, options?: ISnackbarOptions): Promise<void>;
+    show(message: React.ReactNode | string, options?: ISnackbarOptions): Promise<void>;
 }
 export interface ISnackbarOptions {
     actionText?: string;
@@ -12,7 +12,8 @@ export interface ISnackbarOptions {
 declare class SnackbarService implements ISnackbarService {
     private container;
     private handler;
-    show(message: React.ReactChildren | string, options?: ISnackbarOptions): Promise<void>;
+    private root;
+    show(message: React.ReactNode | string, options?: ISnackbarOptions): Promise<void>;
     private hide;
 }
 export declare const snackbarService: SnackbarService;

package/components/SpeedDial/SpeedDialAction.d.ts

@@ -1,7 +1,7 @@
 import React from 'react';
 import { COLOR } from '../component.enums';
 export interface ISpeedDialActionProps extends React.DetailedHTMLProps<React.HtmlHTMLAttributes<HTMLDivElement>, HTMLDivElement> {
-    icon: React.SVGProps<SVGSVGElement>;
+    icon: React.ReactNode;
     tooltipTitle?: string;
     color?: COLOR;
     onClick?: (e: React.MouseEvent) => void;

package/components/Tabs/Tab.d.ts

@@ -2,8 +2,6 @@ import React, { ReactNode } from 'react';
 export interface ITabProps {
     label: ReactNode;
     value: string;
-    isActive?: boolean;
-    fixed?: boolean;
     disabled?: boolean;
     className?: string;
     onClick?: (e: {

package/components/Tabs/TabContext.d.ts

@@ -0,0 +1,8 @@
+import { Dispatch } from 'react';
+export interface ITabsContext {
+    fixed: boolean;
+    selectedValue: string;
+    setSelectedValue: Dispatch<string>;
+}
+export declare const TabContext: import("react").Context<ITabsContext>;
+export declare const useTabContext: () => ITabsContext;

package/components/Tabs/Tabs.d.ts

@@ -1,17 +1,13 @@
-import React, { ReactElement } from 'react';
+import { ReactElement } from 'react';
 import { COLOR } from '../component.enums';
 import { ITabProps } from './Tab';
-export interface ITabOnChangeEvent {
-    event: React.MouseEvent;
-    newValue: string;
-}
 export interface ITabsProps {
     color?: COLOR;
     indicatorColor?: COLOR;
     children?: ReactElement<ITabProps> | Array<ReactElement<ITabProps>>;
     className?: string;
     fixed?: boolean;
-    onChange?: (e: ITabOnChangeEvent) => void;
+    onChange?: (value: string) => void;
     value?: string;
 }
 export declare const Tabs: (props: ITabsProps) => JSX.Element;

package/hooks/useWindowSize.d.ts

@@ -1,4 +1,5 @@
-export declare function useWindowSize(): {
+export interface IUseWindowSize {
     width: number;
     height: number;
-};
+}
+export declare function useWindowSize(): IUseWindowSize;

package/index.es.js

@@ -1,8 +1,8 @@
 import React, { useRef, useEffect, useState, useMemo, createContext, useContext, Fragment, Component, createRef, cloneElement } from 'react';
-import { createPortal, render, unmountComponentAtNode } from 'react-dom';
+import reactDom, { createPortal } from 'react-dom';
 import { createPopper } from '@popperjs/core';
 
-/*! *****************************************************************************
+/******************************************************************************
 Copyright (c) Microsoft Corporation.
 
 Permission to use, copy, modify, and/or distribute this software for any
@@ -111,7 +111,7 @@ const Alert = (props) => {
     return (React.createElement("div", Object.assign({ className: getCssClasses() }, rest), children));
 };
 
-var css_248z$12 = ".AppBar-module_appbar__Neyh3 {\n  padding: 0.5rem var(--1);\n  display: flex;\n  z-index: 1000;\n  min-height: 64px;\n  flex-shrink: 0;\n}\n.AppBar-module_appbar__Neyh3.AppBar-module_primary__xMqXD {\n  color: var(--primary-contrast-text);\n  background-color: var(--primary);\n}\n.AppBar-module_appbar__Neyh3.AppBar-module_secondary__8MkLA {\n  color: var(--secondary-contrast-text);\n  background-color: var(--secondary);\n}\n.AppBar-module_appbar__Neyh3.AppBar-module_accent__vHbkp {\n  color: var(--accent-contrast-text);\n  background-color: var(--accent);\n}\n.AppBar-module_appbar__Neyh3.AppBar-module_light__HGy3y {\n  color: var(--light-contrast-text);\n  background-color: var(--light);\n}\n.AppBar-module_appbar__Neyh3.AppBar-module_dark__ILq96 {\n  color: var(--dark-contrast-text);\n  background-color: var(--dark);\n}\n.AppBar-module_appbar__Neyh3.AppBar-module_shadow__gQN8s {\n  box-shadow: var(--shadow);\n}";
+var css_248z$12 = ".AppBar-module_appbar__Neyh3 {\n  padding: 0.5rem var(--1);\n  display: flex;\n  z-index: 1000;\n  min-height: 64px;\n  flex-shrink: 0;\n}\n.AppBar-module_appbar__Neyh3.AppBar-module_primary__xMqXD {\n  color: var(--primary-contrast-text);\n  background-color: var(--primary);\n}\n.AppBar-module_appbar__Neyh3.AppBar-module_secondary__8MkLA {\n  color: var(--secondary-contrast-text);\n  background-color: var(--secondary);\n}\n.AppBar-module_appbar__Neyh3.AppBar-module_accent__vHbkp {\n  color: var(--accent-contrast-text);\n  background-color: var(--accent);\n}\n.AppBar-module_appbar__Neyh3.AppBar-module_light__HGy3y {\n  color: var(--light-contrast-text);\n  background-color: var(--light);\n}\n.AppBar-module_appbar__Neyh3.AppBar-module_dark__ILq96 {\n  color: var(--dark-contrast-text);\n  background-color: var(--dark);\n}\n.AppBar-module_appbar__Neyh3.AppBar-module_shadow__gQN8s {\n  box-shadow: 0 4px 2px -2px var(--sadowColor);\n}";
 var styles$12 = {"appbar":"AppBar-module_appbar__Neyh3","primary":"AppBar-module_primary__xMqXD","secondary":"AppBar-module_secondary__8MkLA","accent":"AppBar-module_accent__vHbkp","light":"AppBar-module_light__HGy3y","dark":"AppBar-module_dark__ILq96","shadow":"AppBar-module_shadow__gQN8s"};
 styleInject(css_248z$12);
 
@@ -451,7 +451,9 @@ const AutoComplete = (props) => {
     useEffect(() => {
         setOptions(options);
     }, [options]);
-    useDebounce(() => { onChange && onChange(searchText); }, debounce, [searchText]);
+    useDebounce(() => {
+        onChange && onChange(searchText);
+    }, debounce, [searchText]);
     useEffect(() => {
         if (isShow === true) {
             document.body.classList.add('modal-open');
@@ -1125,7 +1127,7 @@ const Select = (props) => {
             !multiple && renderSingleViewModel(),
             multiple &&
                 React.createElement("div", { className: styles$B.chipContainer }, renderMultipleViewModel()),
-            React.createElement(Icon, { className: "ml-2" },
+            React.createElement(Icon, { className: "ml-auto" },
                 React.createElement(ChevronDownSolidIcon, null))),
         isShow &&
             React.createElement(Portal, { className: 'backdrop-root' },
@@ -1791,6 +1793,39 @@ const LoadingIndicatorContainer = ({ children, isFixed }) => {
     return (React.createElement("div", { className: getCssClasses() }, children));
 };
 
+function createCommonjsModule(fn, module) {
+	return module = { exports: {} }, fn(module, module.exports), module.exports;
+}
+
+var client = createCommonjsModule(function (module, exports) {
+
+
+if (process.env.NODE_ENV === 'production') {
+  exports.createRoot = reactDom.createRoot;
+  exports.hydrateRoot = reactDom.hydrateRoot;
+} else {
+  var i = reactDom.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED;
+  exports.createRoot = function(c, o) {
+    i.usingClientEntryPoint = true;
+    try {
+      return reactDom.createRoot(c, o);
+    } finally {
+      i.usingClientEntryPoint = false;
+    }
+  };
+  exports.hydrateRoot = function(c, h, o) {
+    i.usingClientEntryPoint = true;
+    try {
+      return reactDom.hydrateRoot(c, h, o);
+    } finally {
+      i.usingClientEntryPoint = false;
+    }
+  };
+}
+});
+var client_1 = client.createRoot;
+client.hydrateRoot;
+
 class LoadingIndicatorService {
     show() {
         if (this.container) {
@@ -1799,12 +1834,14 @@ class LoadingIndicatorService {
         this.container = document.createElement('div');
         this.container.classList.add('snackbar-container');
         document.body.appendChild(this.container);
-        render(React.createElement(LoadingIndicatorContainer, { isFixed: true },
-            React.createElement(LoadingIndicator, null)), this.container);
+        this.root = client_1(this.container);
+        this.root.render(React.createElement(LoadingIndicatorContainer, { isFixed: true },
+            React.createElement(LoadingIndicator, null)));
     }
     hide() {
+        var _a;
         if (this.container) {
-            unmountComponentAtNode(this.container);
+            (_a = this.root) === null || _a === void 0 ? void 0 : _a.unmount();
             document.body.removeChild(this.container);
             this.container = undefined;
             this.handler && clearTimeout(this.handler);
@@ -1862,7 +1899,6 @@ const Modal = (props) => {
         };
     }, []);
     const handleClickBackdrop = () => {
-        console.warn('backdrop clicked');
         onBackdropClick && onBackdropClick();
     };
     return (React.createElement(React.Fragment, null,
@@ -1878,7 +1914,6 @@ const Modal = (props) => {
         React.createElement(Backdrop, { onClick: handleClickBackdrop })));
 };
 
-// export enum MODALRESULT { OK = 'OK', CANCEL = 'CANCEL', DELETE = 'DELETE' }
 var MODALTYPE;
 (function (MODALTYPE) {
     MODALTYPE["BASIC"] = "BASIC";
@@ -1892,7 +1927,7 @@ var MODALBUTTONTYPE;
     MODALBUTTONTYPE["DEFAULT"] = "DEFAULT";
 })(MODALBUTTONTYPE || (MODALBUTTONTYPE = {}));
 
-const GlobalModal = ({ title, description, formControls, onOk, onCancel, onBackdropClick, isDismissable = false, buttons = [
+const GlobalModal = ({ title, description, formControls, onOk, onChange, onCancel, onBackdropClick, isDismissable = false, buttons = [
     { label: 'Cancel', type: MODALBUTTONTYPE.CANCEL, color: COLOR.secondary, variant: VARIANT.text, shadow: false },
     { label: 'Ok', type: MODALBUTTONTYPE.OK, variant: VARIANT.contained, focus: true },
 ], size = SIZE.md, fullScreen = false }) => {
@@ -1937,11 +1972,29 @@ const GlobalModal = ({ title, description, formControls, onOk, onCancel, onBackd
         description && React.createElement("div", null, description),
         modalType === MODALTYPE.FORM &&
             React.createElement(Fragment, null,
-                React.createElement(Form, { ref: myForm, controls: myControls, validateOnBlur: true, onSubmit: onSubmit }))));
+                React.createElement(Form, { ref: myForm, controls: myControls, validateOnBlur: true, onSubmit: onSubmit, onChange: onChange }))));
 };
 
 class ModalService {
     show(title, description, options) {
+        return new Promise((resolve, reject) => {
+            if (!this.container) {
+                this.container = document.createElement('div');
+                document.body.appendChild(this.container);
+                const handleOk = () => {
+                    resolve();
+                    this.hide();
+                };
+                const handleCancel = () => {
+                    reject();
+                    this.hide();
+                };
+                this.root = client_1(this.container);
+                this.root.render(React.createElement(GlobalModal, { fullScreen: options && options.fullScreen, size: options && options.size, title: title, description: description, onCancel: handleCancel, onBackdropClick: handleCancel, onOk: handleOk, isDismissable: options && options.isDismissable, buttons: options && options.buttons }));
+            }
+        });
+    }
+    showForm(title, formControls, options) {
         return new Promise((resolve, reject) => {
             if (!this.container) {
                 this.container = document.createElement('div');
@@ -1950,17 +2003,23 @@ class ModalService {
                     resolve(values);
                     this.hide();
                 };
+                // TODO - for AutoComplete
+                // const handleOnChange = (values?: IFormValues) => {
+                // 	console.info(values);
+                // }
                 const handleCancel = () => {
                     reject();
                     this.hide();
                 };
-                render(React.createElement(GlobalModal, { fullScreen: options && options.fullScreen, size: options && options.size, title: title, description: description, formControls: options && options.formControls, onCancel: handleCancel, onBackdropClick: handleCancel, onOk: handleOk, isDismissable: options && options.isDismissable, buttons: options && options.buttons }), this.container);
+                this.root = client_1(this.container);
+                this.root.render(React.createElement(GlobalModal, { fullScreen: options && options.fullScreen, size: options && options.size, title: title, formControls: formControls, onCancel: handleCancel, onBackdropClick: handleCancel, onOk: handleOk, isDismissable: options && options.isDismissable, buttons: options && options.buttons }));
             }
         });
     }
     hide() {
+        var _a;
         if (this.container) {
-            unmountComponentAtNode(this.container);
+            (_a = this.root) === null || _a === void 0 ? void 0 : _a.unmount();
             document.body.removeChild(this.container);
             this.container = undefined;
         }
@@ -2197,12 +2256,14 @@ class SnackbarService {
                 resolve();
                 this.hide();
             };
-            render(React.createElement(Snackbar, { color: mergedOptions.color, actionText: mergedOptions.actionText, onOk: handleOk }, message), this.container);
+            this.root = client_1(this.container);
+            this.root.render(React.createElement(Snackbar, { color: mergedOptions.color, actionText: mergedOptions.actionText, onOk: handleOk }, message));
         });
     }
     hide() {
+        var _a;
         if (this.container) {
-            unmountComponentAtNode(this.container);
+            (_a = this.root) === null || _a === void 0 ? void 0 : _a.unmount();
             document.body.removeChild(this.container);
             this.container = undefined;
             this.handler && clearTimeout(this.handler);
@@ -2603,6 +2664,13 @@ const TableCell = (props) => {
             React.createElement("td", Object.assign({}, rest), children)) }, children));
 };
 
+const TabContext = createContext({
+    fixed: false,
+    selectedValue: '',
+    setSelectedValue: () => { }
+});
+const useTabContext = () => useContext(TabContext);
+
 var css_248z$4 = ".TabIndicator-module_tabIndicator__jSJhH {\n  bottom: 0;\n  height: 2px;\n  position: absolute;\n  transition: all 300ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;\n}\n.TabIndicator-module_tabIndicator__jSJhH.TabIndicator-module_primary__Q5jEo {\n  background-color: var(--primary);\n}\n.TabIndicator-module_tabIndicator__jSJhH.TabIndicator-module_accent__qbgIG {\n  background-color: var(--accent);\n}";
 var styles$4 = {"tabIndicator":"TabIndicator-module_tabIndicator__jSJhH","primary":"TabIndicator-module_primary__Q5jEo","accent":"TabIndicator-module_accent__qbgIG"};
 styleInject(css_248z$4);
@@ -2626,40 +2694,40 @@ var styles$3 = {"tabs":"Tabs-module_tabs__YyRTZ"};
 styleInject(css_248z$3);
 
 const Tabs = (props) => {
-    const { children, className, fixed, color, indicatorColor, onChange, value } = props;
-    const [selectedValue, setSelectedValue] = useState(value);
-    const [selectedIndex, setSelectedIndex] = useState();
+    const { children, className, fixed = false, color, indicatorColor = COLOR.accent, value, onChange } = props;
+    const [selectedValue, setSelectedValue] = useState('');
+    const [selectedIndex, setSelectedIndex] = useState(0);
+    const tabContext = ({
+        selectedValue,
+        setSelectedValue,
+        fixed
+    });
+    const prevSelectedValueRef = useRef();
+    useEffect(() => {
+        if (value !== undefined && value !== prevSelectedValueRef.current) {
+            setSelectedValue(value);
+        }
+    }, [value]);
     useEffect(() => {
         React.Children.toArray(children).forEach((child, index) => {
-            if (child.props.value === value) {
+            if (child.props.value === selectedValue) {
                 setSelectedIndex(index);
+                onChange && onChange(selectedValue);
             }
         });
-    }, [children, value]);
+    }, [children, selectedValue]);
     const getCssClasses = () => {
         const cssClasses = [];
         cssClasses.push(styles$3.tabs);
         className && cssClasses.push(className);
         return cssClasses.filter(css => css).join(' ');
     };
-    const handleClickTab = (event, newValue, index) => {
-        setSelectedValue(newValue);
-        setSelectedIndex(index);
-        onChange && onChange({ event, newValue });
-    };
-    const renderTabs = (child, index) => {
-        return React.isValidElement(child) && cloneElement(child, {
-            key: child.props.value,
-            isActive: child.props.value === selectedValue,
-            fixed: fixed,
-            onClick: (e) => handleClickTab(e.event, e.value, index),
-        });
-    };
     return (React.createElement(ButtonContext.Provider, { value: { color: color || COLOR.light } },
-        React.createElement("div", { className: getCssClasses() },
-            children && React.Children.toArray(children).map((child, index) => renderTabs(child, index)),
-            children &&
-                React.createElement(TabIndicator, { color: indicatorColor, width: (100 / React.Children.toArray(children).length) + '%', index: selectedIndex, amount: React.Children.toArray(children).length }))));
+        React.createElement(TabContext.Provider, { value: tabContext },
+            React.createElement("div", { className: getCssClasses() },
+                children,
+                children &&
+                    React.createElement(TabIndicator, { color: indicatorColor, width: (100 / React.Children.toArray(children).length) + '%', index: selectedIndex, amount: React.Children.toArray(children).length })))));
 };
 
 var css_248z$2 = ".Tab-module_tab__Q8w1f {\n  padding: 6px 12px;\n  overflow: hidden;\n  position: relative;\n  font-size: 0.875rem;\n  min-width: 72px;\n  box-sizing: border-box;\n  min-height: 48px;\n  text-align: center;\n  font-weight: 500;\n  line-height: 1.75;\n  white-space: normal;\n  letter-spacing: 0.02857em;\n  text-transform: uppercase;\n  border-radius: 0;\n  flex-grow: 1;\n  flex-basis: 0;\n  transition: all 300ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;\n}";
@@ -2667,17 +2735,19 @@ var styles$2 = {"tab":"Tab-module_tab__Q8w1f"};
 styleInject(css_248z$2);
 
 const Tab = (props) => {
-    const { label, className, isActive, disabled, value, onClick } = props;
+    const { label, className, disabled, value, onClick } = props;
+    const { selectedValue, setSelectedValue } = useTabContext();
     const getCssClasses = () => {
         const cssClasses = [];
         cssClasses.push(styles$2.tab);
-        if (isActive) {
-            cssClasses.push(`show active`);
-        }
         className && cssClasses.push(className);
         return cssClasses.filter(css => css).join(' ');
     };
-    return (React.createElement(Button, { className: getCssClasses(), onClick: (event) => onClick && onClick({ event, value }), isActive: isActive, disabled: disabled }, label));
+    const handleClick = (event) => {
+        onClick && onClick({ event, value });
+        setSelectedValue(value);
+    };
+    return (React.createElement(Button, { className: getCssClasses(), onClick: handleClick, isActive: selectedValue === value, disabled: disabled }, label));
 };
 
 const TabPanel = (props) => {

package/index.js

@@ -9,8 +9,9 @@ var core = require('@popperjs/core');
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+var reactDom__default = /*#__PURE__*/_interopDefaultLegacy(reactDom);
 
-/*! *****************************************************************************
+/******************************************************************************
 Copyright (c) Microsoft Corporation.
 
 Permission to use, copy, modify, and/or distribute this software for any
@@ -119,7 +120,7 @@ const Alert = (props) => {
     return (React__default["default"].createElement("div", Object.assign({ className: getCssClasses() }, rest), children));
 };
 
-var css_248z$12 = ".AppBar-module_appbar__Neyh3 {\n  padding: 0.5rem var(--1);\n  display: flex;\n  z-index: 1000;\n  min-height: 64px;\n  flex-shrink: 0;\n}\n.AppBar-module_appbar__Neyh3.AppBar-module_primary__xMqXD {\n  color: var(--primary-contrast-text);\n  background-color: var(--primary);\n}\n.AppBar-module_appbar__Neyh3.AppBar-module_secondary__8MkLA {\n  color: var(--secondary-contrast-text);\n  background-color: var(--secondary);\n}\n.AppBar-module_appbar__Neyh3.AppBar-module_accent__vHbkp {\n  color: var(--accent-contrast-text);\n  background-color: var(--accent);\n}\n.AppBar-module_appbar__Neyh3.AppBar-module_light__HGy3y {\n  color: var(--light-contrast-text);\n  background-color: var(--light);\n}\n.AppBar-module_appbar__Neyh3.AppBar-module_dark__ILq96 {\n  color: var(--dark-contrast-text);\n  background-color: var(--dark);\n}\n.AppBar-module_appbar__Neyh3.AppBar-module_shadow__gQN8s {\n  box-shadow: var(--shadow);\n}";
+var css_248z$12 = ".AppBar-module_appbar__Neyh3 {\n  padding: 0.5rem var(--1);\n  display: flex;\n  z-index: 1000;\n  min-height: 64px;\n  flex-shrink: 0;\n}\n.AppBar-module_appbar__Neyh3.AppBar-module_primary__xMqXD {\n  color: var(--primary-contrast-text);\n  background-color: var(--primary);\n}\n.AppBar-module_appbar__Neyh3.AppBar-module_secondary__8MkLA {\n  color: var(--secondary-contrast-text);\n  background-color: var(--secondary);\n}\n.AppBar-module_appbar__Neyh3.AppBar-module_accent__vHbkp {\n  color: var(--accent-contrast-text);\n  background-color: var(--accent);\n}\n.AppBar-module_appbar__Neyh3.AppBar-module_light__HGy3y {\n  color: var(--light-contrast-text);\n  background-color: var(--light);\n}\n.AppBar-module_appbar__Neyh3.AppBar-module_dark__ILq96 {\n  color: var(--dark-contrast-text);\n  background-color: var(--dark);\n}\n.AppBar-module_appbar__Neyh3.AppBar-module_shadow__gQN8s {\n  box-shadow: 0 4px 2px -2px var(--sadowColor);\n}";
 var styles$12 = {"appbar":"AppBar-module_appbar__Neyh3","primary":"AppBar-module_primary__xMqXD","secondary":"AppBar-module_secondary__8MkLA","accent":"AppBar-module_accent__vHbkp","light":"AppBar-module_light__HGy3y","dark":"AppBar-module_dark__ILq96","shadow":"AppBar-module_shadow__gQN8s"};
 styleInject(css_248z$12);
 
@@ -459,7 +460,9 @@ const AutoComplete = (props) => {
     React.useEffect(() => {
         setOptions(options);
     }, [options]);
-    useDebounce(() => { onChange && onChange(searchText); }, debounce, [searchText]);
+    useDebounce(() => {
+        onChange && onChange(searchText);
+    }, debounce, [searchText]);
     React.useEffect(() => {
         if (isShow === true) {
             document.body.classList.add('modal-open');
@@ -1133,7 +1136,7 @@ const Select = (props) => {
             !multiple && renderSingleViewModel(),
             multiple &&
                 React__default["default"].createElement("div", { className: styles$B.chipContainer }, renderMultipleViewModel()),
-            React__default["default"].createElement(Icon, { className: "ml-2" },
+            React__default["default"].createElement(Icon, { className: "ml-auto" },
                 React__default["default"].createElement(ChevronDownSolidIcon, null))),
         isShow &&
             React__default["default"].createElement(Portal, { className: 'backdrop-root' },
@@ -1799,6 +1802,39 @@ const LoadingIndicatorContainer = ({ children, isFixed }) => {
     return (React__default["default"].createElement("div", { className: getCssClasses() }, children));
 };
 
+function createCommonjsModule(fn, module) {
+	return module = { exports: {} }, fn(module, module.exports), module.exports;
+}
+
+var client = createCommonjsModule(function (module, exports) {
+
+
+if (process.env.NODE_ENV === 'production') {
+  exports.createRoot = reactDom__default["default"].createRoot;
+  exports.hydrateRoot = reactDom__default["default"].hydrateRoot;
+} else {
+  var i = reactDom__default["default"].__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED;
+  exports.createRoot = function(c, o) {
+    i.usingClientEntryPoint = true;
+    try {
+      return reactDom__default["default"].createRoot(c, o);
+    } finally {
+      i.usingClientEntryPoint = false;
+    }
+  };
+  exports.hydrateRoot = function(c, h, o) {
+    i.usingClientEntryPoint = true;
+    try {
+      return reactDom__default["default"].hydrateRoot(c, h, o);
+    } finally {
+      i.usingClientEntryPoint = false;
+    }
+  };
+}
+});
+var client_1 = client.createRoot;
+client.hydrateRoot;
+
 class LoadingIndicatorService {
     show() {
         if (this.container) {
@@ -1807,12 +1843,14 @@ class LoadingIndicatorService {
         this.container = document.createElement('div');
         this.container.classList.add('snackbar-container');
         document.body.appendChild(this.container);
-        reactDom.render(React__default["default"].createElement(LoadingIndicatorContainer, { isFixed: true },
-            React__default["default"].createElement(LoadingIndicator, null)), this.container);
+        this.root = client_1(this.container);
+        this.root.render(React__default["default"].createElement(LoadingIndicatorContainer, { isFixed: true },
+            React__default["default"].createElement(LoadingIndicator, null)));
     }
     hide() {
+        var _a;
         if (this.container) {
-            reactDom.unmountComponentAtNode(this.container);
+            (_a = this.root) === null || _a === void 0 ? void 0 : _a.unmount();
             document.body.removeChild(this.container);
             this.container = undefined;
             this.handler && clearTimeout(this.handler);
@@ -1870,7 +1908,6 @@ const Modal = (props) => {
         };
     }, []);
     const handleClickBackdrop = () => {
-        console.warn('backdrop clicked');
         onBackdropClick && onBackdropClick();
     };
     return (React__default["default"].createElement(React__default["default"].Fragment, null,
@@ -1886,7 +1923,6 @@ const Modal = (props) => {
         React__default["default"].createElement(Backdrop, { onClick: handleClickBackdrop })));
 };
 
-// export enum MODALRESULT { OK = 'OK', CANCEL = 'CANCEL', DELETE = 'DELETE' }
 exports.MODALTYPE = void 0;
 (function (MODALTYPE) {
     MODALTYPE["BASIC"] = "BASIC";
@@ -1900,7 +1936,7 @@ exports.MODALBUTTONTYPE = void 0;
     MODALBUTTONTYPE["DEFAULT"] = "DEFAULT";
 })(exports.MODALBUTTONTYPE || (exports.MODALBUTTONTYPE = {}));
 
-const GlobalModal = ({ title, description, formControls, onOk, onCancel, onBackdropClick, isDismissable = false, buttons = [
+const GlobalModal = ({ title, description, formControls, onOk, onChange, onCancel, onBackdropClick, isDismissable = false, buttons = [
     { label: 'Cancel', type: exports.MODALBUTTONTYPE.CANCEL, color: exports.COLOR.secondary, variant: exports.VARIANT.text, shadow: false },
     { label: 'Ok', type: exports.MODALBUTTONTYPE.OK, variant: exports.VARIANT.contained, focus: true },
 ], size = exports.SIZE.md, fullScreen = false }) => {
@@ -1945,11 +1981,29 @@ const GlobalModal = ({ title, description, formControls, onOk, onCancel, onBackd
         description && React__default["default"].createElement("div", null, description),
         modalType === exports.MODALTYPE.FORM &&
             React__default["default"].createElement(React.Fragment, null,
-                React__default["default"].createElement(Form, { ref: myForm, controls: myControls, validateOnBlur: true, onSubmit: onSubmit }))));
+                React__default["default"].createElement(Form, { ref: myForm, controls: myControls, validateOnBlur: true, onSubmit: onSubmit, onChange: onChange }))));
 };
 
 class ModalService {
     show(title, description, options) {
+        return new Promise((resolve, reject) => {
+            if (!this.container) {
+                this.container = document.createElement('div');
+                document.body.appendChild(this.container);
+                const handleOk = () => {
+                    resolve();
+                    this.hide();
+                };
+                const handleCancel = () => {
+                    reject();
+                    this.hide();
+                };
+                this.root = client_1(this.container);
+                this.root.render(React__default["default"].createElement(GlobalModal, { fullScreen: options && options.fullScreen, size: options && options.size, title: title, description: description, onCancel: handleCancel, onBackdropClick: handleCancel, onOk: handleOk, isDismissable: options && options.isDismissable, buttons: options && options.buttons }));
+            }
+        });
+    }
+    showForm(title, formControls, options) {
         return new Promise((resolve, reject) => {
             if (!this.container) {
                 this.container = document.createElement('div');
@@ -1958,17 +2012,23 @@ class ModalService {
                     resolve(values);
                     this.hide();
                 };
+                // TODO - for AutoComplete
+                // const handleOnChange = (values?: IFormValues) => {
+                // 	console.info(values);
+                // }
                 const handleCancel = () => {
                     reject();
                     this.hide();
                 };
-                reactDom.render(React__default["default"].createElement(GlobalModal, { fullScreen: options && options.fullScreen, size: options && options.size, title: title, description: description, formControls: options && options.formControls, onCancel: handleCancel, onBackdropClick: handleCancel, onOk: handleOk, isDismissable: options && options.isDismissable, buttons: options && options.buttons }), this.container);
+                this.root = client_1(this.container);
+                this.root.render(React__default["default"].createElement(GlobalModal, { fullScreen: options && options.fullScreen, size: options && options.size, title: title, formControls: formControls, onCancel: handleCancel, onBackdropClick: handleCancel, onOk: handleOk, isDismissable: options && options.isDismissable, buttons: options && options.buttons }));
             }
         });
     }
     hide() {
+        var _a;
         if (this.container) {
-            reactDom.unmountComponentAtNode(this.container);
+            (_a = this.root) === null || _a === void 0 ? void 0 : _a.unmount();
             document.body.removeChild(this.container);
             this.container = undefined;
         }
@@ -2205,12 +2265,14 @@ class SnackbarService {
                 resolve();
                 this.hide();
             };
-            reactDom.render(React__default["default"].createElement(Snackbar, { color: mergedOptions.color, actionText: mergedOptions.actionText, onOk: handleOk }, message), this.container);
+            this.root = client_1(this.container);
+            this.root.render(React__default["default"].createElement(Snackbar, { color: mergedOptions.color, actionText: mergedOptions.actionText, onOk: handleOk }, message));
         });
     }
     hide() {
+        var _a;
         if (this.container) {
-            reactDom.unmountComponentAtNode(this.container);
+            (_a = this.root) === null || _a === void 0 ? void 0 : _a.unmount();
             document.body.removeChild(this.container);
             this.container = undefined;
             this.handler && clearTimeout(this.handler);
@@ -2611,6 +2673,13 @@ const TableCell = (props) => {
             React__default["default"].createElement("td", Object.assign({}, rest), children)) }, children));
 };
 
+const TabContext = React.createContext({
+    fixed: false,
+    selectedValue: '',
+    setSelectedValue: () => { }
+});
+const useTabContext = () => React.useContext(TabContext);
+
 var css_248z$4 = ".TabIndicator-module_tabIndicator__jSJhH {\n  bottom: 0;\n  height: 2px;\n  position: absolute;\n  transition: all 300ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;\n}\n.TabIndicator-module_tabIndicator__jSJhH.TabIndicator-module_primary__Q5jEo {\n  background-color: var(--primary);\n}\n.TabIndicator-module_tabIndicator__jSJhH.TabIndicator-module_accent__qbgIG {\n  background-color: var(--accent);\n}";
 var styles$4 = {"tabIndicator":"TabIndicator-module_tabIndicator__jSJhH","primary":"TabIndicator-module_primary__Q5jEo","accent":"TabIndicator-module_accent__qbgIG"};
 styleInject(css_248z$4);
@@ -2634,40 +2703,40 @@ var styles$3 = {"tabs":"Tabs-module_tabs__YyRTZ"};
 styleInject(css_248z$3);
 
 const Tabs = (props) => {
-    const { children, className, fixed, color, indicatorColor, onChange, value } = props;
-    const [selectedValue, setSelectedValue] = React.useState(value);
-    const [selectedIndex, setSelectedIndex] = React.useState();
+    const { children, className, fixed = false, color, indicatorColor = exports.COLOR.accent, value, onChange } = props;
+    const [selectedValue, setSelectedValue] = React.useState('');
+    const [selectedIndex, setSelectedIndex] = React.useState(0);
+    const tabContext = ({
+        selectedValue,
+        setSelectedValue,
+        fixed
+    });
+    const prevSelectedValueRef = React.useRef();
+    React.useEffect(() => {
+        if (value !== undefined && value !== prevSelectedValueRef.current) {
+            setSelectedValue(value);
+        }
+    }, [value]);
     React.useEffect(() => {
         React__default["default"].Children.toArray(children).forEach((child, index) => {
-            if (child.props.value === value) {
+            if (child.props.value === selectedValue) {
                 setSelectedIndex(index);
+                onChange && onChange(selectedValue);
             }
         });
-    }, [children, value]);
+    }, [children, selectedValue]);
     const getCssClasses = () => {
         const cssClasses = [];
         cssClasses.push(styles$3.tabs);
         className && cssClasses.push(className);
         return cssClasses.filter(css => css).join(' ');
     };
-    const handleClickTab = (event, newValue, index) => {
-        setSelectedValue(newValue);
-        setSelectedIndex(index);
-        onChange && onChange({ event, newValue });
-    };
-    const renderTabs = (child, index) => {
-        return React__default["default"].isValidElement(child) && React.cloneElement(child, {
-            key: child.props.value,
-            isActive: child.props.value === selectedValue,
-            fixed: fixed,
-            onClick: (e) => handleClickTab(e.event, e.value, index),
-        });
-    };
     return (React__default["default"].createElement(ButtonContext.Provider, { value: { color: color || exports.COLOR.light } },
-        React__default["default"].createElement("div", { className: getCssClasses() },
-            children && React__default["default"].Children.toArray(children).map((child, index) => renderTabs(child, index)),
-            children &&
-                React__default["default"].createElement(TabIndicator, { color: indicatorColor, width: (100 / React__default["default"].Children.toArray(children).length) + '%', index: selectedIndex, amount: React__default["default"].Children.toArray(children).length }))));
+        React__default["default"].createElement(TabContext.Provider, { value: tabContext },
+            React__default["default"].createElement("div", { className: getCssClasses() },
+                children,
+                children &&
+                    React__default["default"].createElement(TabIndicator, { color: indicatorColor, width: (100 / React__default["default"].Children.toArray(children).length) + '%', index: selectedIndex, amount: React__default["default"].Children.toArray(children).length })))));
 };
 
 var css_248z$2 = ".Tab-module_tab__Q8w1f {\n  padding: 6px 12px;\n  overflow: hidden;\n  position: relative;\n  font-size: 0.875rem;\n  min-width: 72px;\n  box-sizing: border-box;\n  min-height: 48px;\n  text-align: center;\n  font-weight: 500;\n  line-height: 1.75;\n  white-space: normal;\n  letter-spacing: 0.02857em;\n  text-transform: uppercase;\n  border-radius: 0;\n  flex-grow: 1;\n  flex-basis: 0;\n  transition: all 300ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;\n}";
@@ -2675,17 +2744,19 @@ var styles$2 = {"tab":"Tab-module_tab__Q8w1f"};
 styleInject(css_248z$2);
 
 const Tab = (props) => {
-    const { label, className, isActive, disabled, value, onClick } = props;
+    const { label, className, disabled, value, onClick } = props;
+    const { selectedValue, setSelectedValue } = useTabContext();
     const getCssClasses = () => {
         const cssClasses = [];
         cssClasses.push(styles$2.tab);
-        if (isActive) {
-            cssClasses.push(`show active`);
-        }
         className && cssClasses.push(className);
         return cssClasses.filter(css => css).join(' ');
     };
-    return (React__default["default"].createElement(Button, { className: getCssClasses(), onClick: (event) => onClick && onClick({ event, value }), isActive: isActive, disabled: disabled }, label));
+    const handleClick = (event) => {
+        onClick && onClick({ event, value });
+        setSelectedValue(value);
+    };
+    return (React__default["default"].createElement(Button, { className: getCssClasses(), onClick: handleClick, isActive: selectedValue === value, disabled: disabled }, label));
 };
 
 const TabPanel = (props) => {

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "react-asc",
-	"version": "23.7.3",
+	"version": "25.0.1",
 	"description": "handcrafted react components",
 	"main": "index.js",
 	"module": "index.es.js",
@@ -9,10 +9,10 @@
 	"homepage": "https://react-asc.netlify.app",
 	"license": "MIT",
 	"dependencies": {
-		"@popperjs/core": "2.9.2",
-		"react": "17.0.2",
-		"react-dom": "17.0.2",
-		"modern-normalize": "^1.1.0"
+		"@popperjs/core": "2.11.5",
+		"react": "18.2.0",
+		"react-dom": "18.2.0",
+		"modern-normalize": "1.1.0"
 	},
 	"scripts": {
 		"pub": "npm publish --access public"

package/react-asc.scss

@@ -54,6 +54,8 @@
 	--shadow: 0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14),
 	0px 1px 5px 0px rgba(0, 0, 0, 0.12);
 
+	--sadowColor: rgba(0, 0, 0, 0.12);
+
 	--muted: #6c757d !important;
 }