react-asc 24.0.0 → 25.0.2

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/Form/validators/MaxValidator.d.ts

@@ -1 +1 @@
-export declare const MaxValidator: (valueA: number, valueB: number) => boolean;
+export declare const MaxValidator: (val: string, valueB: number) => boolean;

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

@@ -1 +1 @@
-export declare const MinValidator: (valueA: number, valueB: number) => boolean;
+export declare const MinValidator: (val: string, minLength: number) => 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/modal.service.d.ts

@@ -11,13 +11,11 @@ export interface IModalOptions {
     fullScreen?: boolean;
     size?: SIZE;
 }
-export interface IModalFormOptions extends IModalOptions {
-    formControls?: IControls;
-}
 declare class ModalService implements IModalService {
     private container;
+    private root;
     show(title: string, description: string | ReactElement, options?: IModalOptions): Promise<void>;
-    showForm<T>(title: string, options?: IModalFormOptions): Promise<T>;
+    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/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
@@ -1233,9 +1233,9 @@ const EmailValidator = (value) => {
 
 const IsEqualValidator = (valueA, valueB) => valueA === valueB;
 
-const MaxValidator = (valueA, valueB) => valueA <= valueB;
+const MaxValidator = (val, valueB) => val.length <= valueB;
 
-const MinValidator = (valueA, valueB) => valueA >= valueB;
+const MinValidator = (val, minLength) => val.length >= minLength;
 
 // values, isSubmitting, handleChange, handleBlur, handleSubmit
 class Form extends Component {
@@ -1288,12 +1288,12 @@ class Form extends Component {
                         break;
                     case 'min':
                         if (!MinValidator(fieldValue, parseInt(validatorParam))) {
-                            errors.push({ validator: validatorName, message: `Number is less than ${validatorParam}` });
+                            errors.push({ validator: validatorName, message: `Minimum number of ${validatorParam} characters not met` });
                         }
                         break;
                     case 'max':
                         if (!MaxValidator(fieldValue, parseInt(validatorParam))) {
-                            errors.push({ validator: validatorName, message: `Number is greater than ${validatorParam}` });
+                            errors.push({ validator: validatorName, message: `Maximum number of ${validatorParam} characters exceeded` });
                         }
                         break;
                     case 'match':
@@ -1793,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) {
@@ -1801,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);
@@ -1879,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";
@@ -1934,10 +1968,10 @@ const GlobalModal = ({ title, description, formControls, onOk, onChange, onCance
         }
         button.handler && button.handler();
     };
-    return (React.createElement(Modal, { size: size, fullScreen: fullScreen, header: title, onHeaderCloseClick: onCancel, onBackdropClick: onBackdropClick, isDismissable: isDismissable, footer: React.createElement(Fragment, null, buttons.map((button, index) => (React.createElement(Button, { key: index, variant: button.variant, color: button.color, autoFocus: button.autoFocus, shadow: button.shadow, onClick: () => handleClickButton(button) }, button.label)))) },
+    return (React.createElement(Modal, { size: size, fullScreen: fullScreen, header: title, onHeaderCloseClick: onCancel, onBackdropClick: onBackdropClick, isDismissable: isDismissable, footer: React.createElement(React.Fragment, null, buttons.map((button, index) => (React.createElement(Button, { key: index, variant: button.variant, color: button.color, autoFocus: button.autoFocus, shadow: button.shadow, onClick: () => handleClickButton(button) }, button.label)))) },
         description && React.createElement("div", null, description),
         modalType === MODALTYPE.FORM &&
-            React.createElement(Fragment, null,
+            React.createElement(React.Fragment, null,
                 React.createElement(Form, { ref: myForm, controls: myControls, validateOnBlur: true, onSubmit: onSubmit, onChange: onChange }))));
 };
 
@@ -1955,35 +1989,38 @@ class ModalService {
                     reject();
                     this.hide();
                 };
-                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 }), this.container);
+                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, options) {
+    showForm(title, formControls, options) {
         return new Promise((resolve, reject) => {
             if (!this.container) {
                 this.container = document.createElement('div');
-                document.body.appendChild(this.container);
+                this.container.classList.add('modal-container');
                 const handleOk = (values) => {
                     resolve(values);
                     this.hide();
                 };
                 // TODO - for AutoComplete
-                const handleOnChange = (values) => {
-                    console.info(values);
-                };
+                // 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, formControls: options && options.formControls, onCancel: handleCancel, onBackdropClick: handleCancel, onOk: handleOk, onChange: handleOnChange, 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);
-            document.body.removeChild(this.container);
+            (_a = this.root) === null || _a === void 0 ? void 0 : _a.unmount();
+            // document.body.removeChild(this.container);
             this.container = undefined;
         }
     }
@@ -2219,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);
@@ -2625,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);
@@ -2648,40 +2694,41 @@ 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(() => {
+        // TODO - check if prev needs to be set
+        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}";
@@ -2689,17 +2736,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
@@ -1241,9 +1242,9 @@ const EmailValidator = (value) => {
 
 const IsEqualValidator = (valueA, valueB) => valueA === valueB;
 
-const MaxValidator = (valueA, valueB) => valueA <= valueB;
+const MaxValidator = (val, valueB) => val.length <= valueB;
 
-const MinValidator = (valueA, valueB) => valueA >= valueB;
+const MinValidator = (val, minLength) => val.length >= minLength;
 
 // values, isSubmitting, handleChange, handleBlur, handleSubmit
 class Form extends React.Component {
@@ -1296,12 +1297,12 @@ class Form extends React.Component {
                         break;
                     case 'min':
                         if (!MinValidator(fieldValue, parseInt(validatorParam))) {
-                            errors.push({ validator: validatorName, message: `Number is less than ${validatorParam}` });
+                            errors.push({ validator: validatorName, message: `Minimum number of ${validatorParam} characters not met` });
                         }
                         break;
                     case 'max':
                         if (!MaxValidator(fieldValue, parseInt(validatorParam))) {
-                            errors.push({ validator: validatorName, message: `Number is greater than ${validatorParam}` });
+                            errors.push({ validator: validatorName, message: `Maximum number of ${validatorParam} characters exceeded` });
                         }
                         break;
                     case 'match':
@@ -1801,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) {
@@ -1809,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);
@@ -1887,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";
@@ -1942,10 +1977,10 @@ const GlobalModal = ({ title, description, formControls, onOk, onChange, onCance
         }
         button.handler && button.handler();
     };
-    return (React__default["default"].createElement(Modal, { size: size, fullScreen: fullScreen, header: title, onHeaderCloseClick: onCancel, onBackdropClick: onBackdropClick, isDismissable: isDismissable, footer: React__default["default"].createElement(React.Fragment, null, buttons.map((button, index) => (React__default["default"].createElement(Button, { key: index, variant: button.variant, color: button.color, autoFocus: button.autoFocus, shadow: button.shadow, onClick: () => handleClickButton(button) }, button.label)))) },
+    return (React__default["default"].createElement(Modal, { size: size, fullScreen: fullScreen, header: title, onHeaderCloseClick: onCancel, onBackdropClick: onBackdropClick, isDismissable: isDismissable, footer: React__default["default"].createElement(React__default["default"].Fragment, null, buttons.map((button, index) => (React__default["default"].createElement(Button, { key: index, variant: button.variant, color: button.color, autoFocus: button.autoFocus, shadow: button.shadow, onClick: () => handleClickButton(button) }, button.label)))) },
         description && React__default["default"].createElement("div", null, description),
         modalType === exports.MODALTYPE.FORM &&
-            React__default["default"].createElement(React.Fragment, null,
+            React__default["default"].createElement(React__default["default"].Fragment, null,
                 React__default["default"].createElement(Form, { ref: myForm, controls: myControls, validateOnBlur: true, onSubmit: onSubmit, onChange: onChange }))));
 };
 
@@ -1963,35 +1998,38 @@ class ModalService {
                     reject();
                     this.hide();
                 };
-                reactDom.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 }), 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, description: description, onCancel: handleCancel, onBackdropClick: handleCancel, onOk: handleOk, isDismissable: options && options.isDismissable, buttons: options && options.buttons }));
             }
         });
     }
-    showForm(title, options) {
+    showForm(title, formControls, options) {
         return new Promise((resolve, reject) => {
             if (!this.container) {
                 this.container = document.createElement('div');
-                document.body.appendChild(this.container);
+                this.container.classList.add('modal-container');
                 const handleOk = (values) => {
                     resolve(values);
                     this.hide();
                 };
                 // TODO - for AutoComplete
-                const handleOnChange = (values) => {
-                    console.info(values);
-                };
+                // 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, formControls: options && options.formControls, onCancel: handleCancel, onBackdropClick: handleCancel, onOk: handleOk, onChange: handleOnChange, 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);
-            document.body.removeChild(this.container);
+            (_a = this.root) === null || _a === void 0 ? void 0 : _a.unmount();
+            // document.body.removeChild(this.container);
             this.container = undefined;
         }
     }
@@ -2227,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);
@@ -2633,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);
@@ -2656,40 +2703,41 @@ 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(() => {
+        // TODO - check if prev needs to be set
+        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}";
@@ -2697,17 +2745,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": "24.0.0",
+	"version": "25.0.2",
 	"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"