react-asc 23.7.3 → 24.0.0

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,20 +1,23 @@
-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;
     size?: SIZE;
 }
+export interface IModalFormOptions extends IModalOptions {
+    formControls?: IControls;
+}
 declare class ModalService implements IModalService {
     private container;
-    show(title: string, description: string | ReactElement, options?: IModalOptions): Promise<void | IFormValues>;
+    show(title: string, description: string | ReactElement, options?: IModalOptions): Promise<void>;
+    showForm<T>(title: string, options?: IModalFormOptions): Promise<T>;
     private hide;
 }
 export declare const modalService: ModalService;

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

@@ -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' },
@@ -1862,7 +1864,6 @@ const Modal = (props) => {
         };
     }, []);
     const handleClickBackdrop = () => {
-        console.warn('backdrop clicked');
         onBackdropClick && onBackdropClick();
     };
     return (React.createElement(React.Fragment, null,
@@ -1892,7 +1893,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 +1938,28 @@ 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();
+                };
+                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);
+            }
+        });
+    }
+    showForm(title, options) {
         return new Promise((resolve, reject) => {
             if (!this.container) {
                 this.container = document.createElement('div');
@@ -1950,11 +1968,15 @@ class ModalService {
                     resolve(values);
                     this.hide();
                 };
+                // TODO - for AutoComplete
+                const handleOnChange = (values) => {
+                    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);
+                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);
             }
         });
     }

package/index.js

@@ -119,7 +119,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 +459,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 +1135,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' },
@@ -1870,7 +1872,6 @@ const Modal = (props) => {
         };
     }, []);
     const handleClickBackdrop = () => {
-        console.warn('backdrop clicked');
         onBackdropClick && onBackdropClick();
     };
     return (React__default["default"].createElement(React__default["default"].Fragment, null,
@@ -1900,7 +1901,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 +1946,28 @@ 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();
+                };
+                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);
+            }
+        });
+    }
+    showForm(title, options) {
         return new Promise((resolve, reject) => {
             if (!this.container) {
                 this.container = document.createElement('div');
@@ -1958,11 +1976,15 @@ class ModalService {
                     resolve(values);
                     this.hide();
                 };
+                // TODO - for AutoComplete
+                const handleOnChange = (values) => {
+                    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);
+                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);
             }
         });
     }

package/package.json

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

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;
 }