react-asc 19.0.0 → 19.0.1

package/components/Checkbox/Checkbox.d.ts

@@ -2,7 +2,6 @@ import React from 'react';
 export interface ICheckboxProps extends React.ComponentProps<"input"> {
     label?: string;
     value?: string;
-    onChange?: (val: React.FocusEvent<HTMLInputElement>) => void;
     onKeyDown?: (event: React.KeyboardEvent) => void;
 }
 export declare const Checkbox: (props: ICheckboxProps) => JSX.Element;

package/components/Drawer/Drawer.d.ts

@@ -1,8 +1,7 @@
-import React, { ReactNode } from 'react';
-export interface IDrawerProps {
-    children?: ReactNode;
+import React from 'react';
+export interface IDrawerProps extends React.ComponentProps<"div"> {
     position?: 'left' | 'right';
-    className?: string;
+    shadow?: boolean;
     onClickBackdrop?: () => void;
     permanent?: boolean;
     target?: HTMLElement;

package/components/Form/Form.d.ts

@@ -31,7 +31,7 @@ export declare class Form extends Component<IFormProps, IFormState> {
     private renderLabel;
     handleFormSubmit(): void;
     handleFormReset(): void;
-    handleOnKeyDown(e: KeyboardEvent): void;
+    handleOnKeyDown(e: React.KeyboardEvent<HTMLInputElement>): void;
     destroy(): void;
     getFormGroupCssClass(fieldKey: string): string | undefined;
     render(): JSX.Element;

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

@@ -1,13 +1,13 @@
-/// <reference types="react" />
+import React from 'react';
 import { IFormInputOptions, IFormTextAreaOptions, IFormSelectOptions, IFormAutoCompleteOptions } from '../form.interfaces';
 import { IFormControlType } from '../form.types';
 export interface IFormInputEvent {
-    value?: any;
+    value: string | number | readonly string[] | undefined;
     type?: string;
     name?: string;
 }
 export interface IFormInputProps {
-    value: any;
+    value: string | number | readonly string[] | undefined;
     name: string;
     type: IFormControlType;
     placeholder?: string;
@@ -23,7 +23,7 @@ export interface IFormInputProps {
     label?: string;
     onInput?: (e: IFormInputEvent) => void;
     onChange?: (e: IFormInputEvent) => void;
-    onBlur?: (event: any) => void;
-    onKeyDown?: (event: any) => void;
+    onBlur?: React.FocusEventHandler<HTMLInputElement> | undefined;
+    onKeyDown?: React.KeyboardEventHandler<HTMLInputElement> | undefined;
 }
 export declare const FormInput: (props: IFormInputProps) => JSX.Element;

package/components/Tabs/Tabs.d.ts

@@ -1,13 +1,17 @@
-import { ReactElement } from 'react';
+import React, { 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?: (event: any, newValue: string) => void;
+    onChange?: (e: ITabOnChangeEvent) => void;
     value?: string;
 }
 export declare const Tabs: (props: ITabsProps) => JSX.Element;

package/components/Tooltip/Tooltip.d.ts

@@ -1,7 +1,6 @@
-import { ReactElement } from 'react';
-export interface ITooltipProps {
+import React from 'react';
+export interface ITooltipProps extends React.ComponentProps<"div"> {
     placement?: 'top' | 'bottom' | 'right' | 'left';
     text?: string;
-    children: ReactElement;
 }
 export declare const Tooltip: (props: ITooltipProps) => JSX.Element;

package/index.es.js

@@ -1015,13 +1015,15 @@ const FormInput = (props) => {
         type === 'file' &&
             React.createElement(FileInput, { id: name, name: name, className: className + (!isValid ? ' is-invalid' : ''), value: value, autoFocus: autoFocus, readOnly: readonly, disabled: disabled, onChange: e => handleOnChange(e.target.value, type, name) }, "choose a file"),
         type === 'textarea' &&
-            React.createElement(Textarea, { id: name, name: name, className: className + (!isValid ? ' is-invalid' : ''), value: value, autoFocus: autoFocus, onInput: e => handleOnInput(e.target.value, type, name), onChange: e => handleOnChange((e === null || e === void 0 ? void 0 : e.target).value, type, name), placeholder: placeholder, rows: textareaOptions === null || textareaOptions === void 0 ? void 0 : textareaOptions.rows, style: (textareaOptions === null || textareaOptions === void 0 ? void 0 : textareaOptions.resize) !== false ? undefined : { resize: 'none' } }),
+            React.createElement(Textarea, { id: name, name: name, className: className + (!isValid ? ' is-invalid' : ''), value: value, autoFocus: autoFocus, onInput: e => handleOnInput(e.target.value, type, name), onChange: e => handleOnChange(e.target.value, type, name), placeholder: placeholder, rows: textareaOptions === null || textareaOptions === void 0 ? void 0 : textareaOptions.rows, style: (textareaOptions === null || textareaOptions === void 0 ? void 0 : textareaOptions.resize) !== false ? undefined : { resize: 'none' } }),
         type === 'select' &&
             React.createElement(Select, { id: name, name: name, className: className + (!isValid ? ' is-invalid' : ''), value: value, multiple: selectOptions === null || selectOptions === void 0 ? void 0 : selectOptions.multiple, onChange: e => handleOnChange(e, type, name), onKeyDown: onKeyDown, options: options }),
         type === 'autocomplete' &&
             React.createElement(AutoComplete, { id: name, name: name, className: className + (!isValid ? ' is-invalid' : ''), value: value, openOnFocus: autoCompleteOptions === null || autoCompleteOptions === void 0 ? void 0 : autoCompleteOptions.openOnFocus, onChange: e => handleOnChange(e, type, name), onKeyDown: onKeyDown, options: options }),
         type === 'checkbox' &&
-            React.createElement(Checkbox, { id: name, name: name, label: label, className: (!isValid ? ' is-invalid' : ''), onChange: e => handleOnChange((e === null || e === void 0 ? void 0 : e.target).checked, type, name), checked: value, onKeyDown: onKeyDown }),
+            React.createElement(Checkbox, { id: name, name: name, label: label, className: (!isValid ? ' is-invalid' : ''), 
+                // onChange={e => handleOnChange((e?.target as HTMLInputElement).checked, type, name as string)}
+                checked: value === 'true' ? true : false }),
         type === 'radio' &&
             React.createElement(Fragment, null, options.map((option) => React.createElement("div", { className: "form-check", key: option.id },
                 React.createElement("input", { id: option.id ? option.id : option.value, name: name, type: "radio", className: "form-check-input", onChange: e => handleOnChange((e === null || e === void 0 ? void 0 : e.target).value, type, name), value: option.value, checked: value === option.value, onKeyDown: onKeyDown }),
@@ -1121,7 +1123,7 @@ class Form extends Component {
         }
         return errors;
     }
-    handleInputChange(name, value, type) {
+    handleInputChange(name, value) {
         const field = this.getControl(name);
         field.value = value;
         // redundant mit handleOnBlur
@@ -1146,7 +1148,6 @@ class Form extends Component {
             }
         }
     }
-    ;
     isRequired(fieldName) {
         let result = false;
         result = this.getControl(fieldName).validators.indexOf('required') >= 0;
@@ -1165,7 +1166,6 @@ class Form extends Component {
         const cssClasses = [labelClassName, this.isRequired(fieldKey) ? 'required' : undefined];
         return React.createElement(FormLabel, { htmlFor: fieldKey, className: cssClasses.join(' ') }, label);
     }
-    ;
     // trigger via ref
     handleFormSubmit() {
         for (const fieldKey of Object.keys(this.state.controls)) {
@@ -1207,7 +1207,7 @@ class Form extends Component {
         this.setState({ controls: {}, isValid: false, isChanged: false, isSubmitted: false });
     }
     getFormGroupCssClass(fieldKey) {
-        let result = this.getControl(fieldKey).config.formGroupClassName;
+        const result = this.getControl(fieldKey).config.formGroupClassName;
         return result;
     }
     render() {
@@ -1215,7 +1215,7 @@ class Form extends Component {
             return (React.createElement(FormGroup, { key: fieldKey, className: this.getFormGroupCssClass(fieldKey) },
                 this.getControl(fieldKey).config.labelPosition !== 'behind' && this.getControl(fieldKey).type !== 'checkbox' &&
                     this.renderLabel(fieldKey, this.getControl(fieldKey).config.label, this.getControl(fieldKey).config.labelClassName),
-                React.createElement(FormInput, { autoFocus: this.getControl(fieldKey).config.autoFocus, className: this.getControl(fieldKey).config.formControlClassName, isValid: !this.isInvalid(fieldKey), label: this.getControl(fieldKey).config.label, name: fieldKey, options: this.getControl(fieldKey).config.options, placeholder: this.getControl(fieldKey).config.placeholder, textareaOptions: this.getControl(fieldKey).config.textareaOptions, selectOptions: this.getControl(fieldKey).config.selectOptions, autoCompleteOptions: this.getControl(fieldKey).config.autoCompleteOptions, type: this.getControl(fieldKey).type, value: this.getControl(fieldKey).value, disabled: this.getControl(fieldKey).config.disabled, readonly: this.getControl(fieldKey).config.readonly, onChange: ({ name, value, type }) => this.handleInputChange(name, value, type), onBlur: (e) => this.handleOnBlur(e), onKeyDown: (e) => this.handleOnKeyDown(e) }),
+                React.createElement(FormInput, { autoFocus: this.getControl(fieldKey).config.autoFocus, className: this.getControl(fieldKey).config.formControlClassName, isValid: !this.isInvalid(fieldKey), label: this.getControl(fieldKey).config.label, name: fieldKey, options: this.getControl(fieldKey).config.options, placeholder: this.getControl(fieldKey).config.placeholder, textareaOptions: this.getControl(fieldKey).config.textareaOptions, selectOptions: this.getControl(fieldKey).config.selectOptions, autoCompleteOptions: this.getControl(fieldKey).config.autoCompleteOptions, type: this.getControl(fieldKey).type, value: this.getControl(fieldKey).value, disabled: this.getControl(fieldKey).config.disabled, readonly: this.getControl(fieldKey).config.readonly, onChange: ({ name, value }) => this.handleInputChange(name, value), onBlur: (e) => this.handleOnBlur(e), onKeyDown: (e) => this.handleOnKeyDown(e) }),
                 this.getControl(fieldKey).config.labelPosition === 'behind' && this.getControl(fieldKey).type !== 'checkbox' &&
                     this.renderLabel(fieldKey, this.getControl(fieldKey).config.label, this.getControl(fieldKey).config.labelClassName),
                 this.getControl(fieldKey).config.hint &&
@@ -1356,12 +1356,12 @@ const DateSelect = (props) => {
 // 	return Math.ceil((((d - yearStart) / 86400000) + 1) / 7)
 // };
 
-var css_248z$r = ".Drawer-module_drawer__kdQCk {\n  height: 100%;\n  z-index: 1101;\n  bottom: 0;\n  position: fixed;\n  background: white;\n  min-width: 280px;\n  overflow-y: auto; }\n  .Drawer-module_drawer__kdQCk.Drawer-module_permanent__c-y8y {\n    position: inherit;\n    z-index: 0; }\n  .Drawer-module_drawer__kdQCk.Drawer-module_left__loQVO {\n    order: 0; }\n  .Drawer-module_drawer__kdQCk.Drawer-module_right__sJ3mZ {\n    order: 2; }\n\n.Drawer-module_drawerOpen__07ptP {\n  overflow: hidden; }\n";
-var styles$r = {"drawer":"Drawer-module_drawer__kdQCk","permanent":"Drawer-module_permanent__c-y8y","left":"Drawer-module_left__loQVO","right":"Drawer-module_right__sJ3mZ","drawerOpen":"Drawer-module_drawerOpen__07ptP"};
+var css_248z$r = ".Drawer-module_drawer__kdQCk {\n  height: 100%;\n  z-index: 1101;\n  bottom: 0;\n  position: fixed;\n  background: white;\n  min-width: 280px;\n  overflow-y: auto; }\n  .Drawer-module_drawer__kdQCk.Drawer-module_permanent__c-y8y {\n    position: inherit;\n    z-index: 0; }\n  .Drawer-module_drawer__kdQCk.Drawer-module_left__loQVO {\n    order: 0; }\n  .Drawer-module_drawer__kdQCk.Drawer-module_right__sJ3mZ {\n    order: 2; }\n  .Drawer-module_drawer__kdQCk.Drawer-module_shadow__Myo3n {\n    box-shadow: var(--shadow); }\n\n.Drawer-module_drawerOpen__07ptP {\n  overflow: hidden; }\n";
+var styles$r = {"drawer":"Drawer-module_drawer__kdQCk","permanent":"Drawer-module_permanent__c-y8y","left":"Drawer-module_left__loQVO","right":"Drawer-module_right__sJ3mZ","shadow":"Drawer-module_shadow__Myo3n","drawerOpen":"Drawer-module_drawerOpen__07ptP"};
 styleInject(css_248z$r);
 
 const Drawer = (props) => {
-    const { children, className, position = 'left', permanent = false, target = document.body, onClickBackdrop } = props;
+    const { children, className, position = 'left', permanent = false, target = document.body, shadow = true, onClickBackdrop } = props, rest = __rest(props, ["children", "className", "position", "permanent", "target", "shadow", "onClickBackdrop"]);
     useEffect(() => {
         document.body.classList.add(styles$r.drawerOpen);
         return () => {
@@ -1371,18 +1371,19 @@ const Drawer = (props) => {
     const handleClickBackdrop = () => {
         onClickBackdrop && onClickBackdrop();
     };
-    return createPortal(React.createElement(Fragment, null,
-        React.createElement(DrawerContent, { className: className, position: position, permanent: permanent }, children),
+    return createPortal(React.createElement(React.Fragment, null,
+        React.createElement(DrawerContent, Object.assign({ className: className, position: position, permanent: permanent, shadow: shadow }, rest), children),
         !permanent && React.createElement(Backdrop, { onClick: handleClickBackdrop })), target);
 };
 const DrawerContent = (props) => {
-    const { children, className, position = 'left', permanent = false } = props;
+    const { children, className, position = 'left', permanent = false, shadow } = props, rest = __rest(props, ["children", "className", "position", "permanent", "shadow"]);
     const getCssClasses = () => {
         const cssClasses = [];
         cssClasses.push(styles$r.drawer);
-        className && cssClasses.push(className);
+        shadow && cssClasses.push(styles$r.shadow);
         !!permanent && cssClasses.push(styles$r['permanent']);
         position === 'left' ? cssClasses.push(styles$r['left']) : cssClasses.push(styles$r['right']);
+        className && cssClasses.push(className);
         return cssClasses.filter(css => css).join(' ');
     };
     const positionStyles = {
@@ -1392,7 +1393,7 @@ const DrawerContent = (props) => {
     const getStyles = () => {
         return !permanent ? positionStyles[position] : undefined;
     };
-    return (React.createElement("div", { className: getCssClasses(), style: getStyles() }, children));
+    return (React.createElement("div", Object.assign({ className: getCssClasses(), style: getStyles() }, rest), children));
 };
 
 var css_248z$q = ".MenuBody-module_menuBody__u4FIQ {\n  z-index: 1111;\n  margin: 0;\n  position: absolute;\n  top: 100%;\n  left: 0;\n  min-width: 10rem;\n  padding: 8px 0px;\n  font-size: 1rem;\n  color: #212529;\n  text-align: left;\n  list-style: none;\n  background-color: #fff;\n  background-clip: padding-box;\n  border-radius: var(--borderRadius); }\n  .MenuBody-module_menuBody__u4FIQ.MenuBody-module_shadow__OBp-f {\n    box-shadow: var(--shadow); }\n";
@@ -2307,7 +2308,7 @@ const Tabs = (props) => {
     const handleClickTab = (event, newValue, index) => {
         setSelectedValue(newValue);
         setSelectedIndex(index);
-        onChange && onChange(event, newValue);
+        onChange && onChange({ event, newValue });
     };
     const renderTabs = (child, index) => {
         return React.isValidElement(child) && cloneElement(child, {
@@ -2354,10 +2355,10 @@ styleInject(css_248z$2);
 const Tooltip = (props) => {
     const { children, text, placement = 'bottom' } = props;
     const [show, setShow] = useState(false);
-    const refChild = useRef(null);
-    const refTooltip = useRef(null);
+    const refChild = useRef();
+    const refTooltip = useRef();
     useEffect(() => {
-        if (show === true && refChild && refChild.current) {
+        if (show === true && refChild && refChild.current && refTooltip && refTooltip.current) {
             // TODO - extract to own component?
             createPopper(refChild.current, refTooltip.current, {
                 placement: placement,
@@ -2376,7 +2377,7 @@ const Tooltip = (props) => {
     const handleMouseLeave = () => {
         setShow(false);
     };
-    return (React.createElement(Fragment, null,
+    return (React.createElement(React.Fragment, null,
         React.createElement("div", { className: styles$2.tooltipContainer, ref: refChild, id: "tooltip-container" }, cloneElement(children, {
             onMouseOver: handleMouseOver,
             onMouseLeave: handleMouseLeave,

package/index.js

@@ -1023,13 +1023,15 @@ const FormInput = (props) => {
         type === 'file' &&
             React__default["default"].createElement(FileInput, { id: name, name: name, className: className + (!isValid ? ' is-invalid' : ''), value: value, autoFocus: autoFocus, readOnly: readonly, disabled: disabled, onChange: e => handleOnChange(e.target.value, type, name) }, "choose a file"),
         type === 'textarea' &&
-            React__default["default"].createElement(Textarea, { id: name, name: name, className: className + (!isValid ? ' is-invalid' : ''), value: value, autoFocus: autoFocus, onInput: e => handleOnInput(e.target.value, type, name), onChange: e => handleOnChange((e === null || e === void 0 ? void 0 : e.target).value, type, name), placeholder: placeholder, rows: textareaOptions === null || textareaOptions === void 0 ? void 0 : textareaOptions.rows, style: (textareaOptions === null || textareaOptions === void 0 ? void 0 : textareaOptions.resize) !== false ? undefined : { resize: 'none' } }),
+            React__default["default"].createElement(Textarea, { id: name, name: name, className: className + (!isValid ? ' is-invalid' : ''), value: value, autoFocus: autoFocus, onInput: e => handleOnInput(e.target.value, type, name), onChange: e => handleOnChange(e.target.value, type, name), placeholder: placeholder, rows: textareaOptions === null || textareaOptions === void 0 ? void 0 : textareaOptions.rows, style: (textareaOptions === null || textareaOptions === void 0 ? void 0 : textareaOptions.resize) !== false ? undefined : { resize: 'none' } }),
         type === 'select' &&
             React__default["default"].createElement(Select, { id: name, name: name, className: className + (!isValid ? ' is-invalid' : ''), value: value, multiple: selectOptions === null || selectOptions === void 0 ? void 0 : selectOptions.multiple, onChange: e => handleOnChange(e, type, name), onKeyDown: onKeyDown, options: options }),
         type === 'autocomplete' &&
             React__default["default"].createElement(AutoComplete, { id: name, name: name, className: className + (!isValid ? ' is-invalid' : ''), value: value, openOnFocus: autoCompleteOptions === null || autoCompleteOptions === void 0 ? void 0 : autoCompleteOptions.openOnFocus, onChange: e => handleOnChange(e, type, name), onKeyDown: onKeyDown, options: options }),
         type === 'checkbox' &&
-            React__default["default"].createElement(Checkbox, { id: name, name: name, label: label, className: (!isValid ? ' is-invalid' : ''), onChange: e => handleOnChange((e === null || e === void 0 ? void 0 : e.target).checked, type, name), checked: value, onKeyDown: onKeyDown }),
+            React__default["default"].createElement(Checkbox, { id: name, name: name, label: label, className: (!isValid ? ' is-invalid' : ''), 
+                // onChange={e => handleOnChange((e?.target as HTMLInputElement).checked, type, name as string)}
+                checked: value === 'true' ? true : false }),
         type === 'radio' &&
             React__default["default"].createElement(React.Fragment, null, options.map((option) => React__default["default"].createElement("div", { className: "form-check", key: option.id },
                 React__default["default"].createElement("input", { id: option.id ? option.id : option.value, name: name, type: "radio", className: "form-check-input", onChange: e => handleOnChange((e === null || e === void 0 ? void 0 : e.target).value, type, name), value: option.value, checked: value === option.value, onKeyDown: onKeyDown }),
@@ -1129,7 +1131,7 @@ class Form extends React.Component {
         }
         return errors;
     }
-    handleInputChange(name, value, type) {
+    handleInputChange(name, value) {
         const field = this.getControl(name);
         field.value = value;
         // redundant mit handleOnBlur
@@ -1154,7 +1156,6 @@ class Form extends React.Component {
             }
         }
     }
-    ;
     isRequired(fieldName) {
         let result = false;
         result = this.getControl(fieldName).validators.indexOf('required') >= 0;
@@ -1173,7 +1174,6 @@ class Form extends React.Component {
         const cssClasses = [labelClassName, this.isRequired(fieldKey) ? 'required' : undefined];
         return React__default["default"].createElement(FormLabel, { htmlFor: fieldKey, className: cssClasses.join(' ') }, label);
     }
-    ;
     // trigger via ref
     handleFormSubmit() {
         for (const fieldKey of Object.keys(this.state.controls)) {
@@ -1215,7 +1215,7 @@ class Form extends React.Component {
         this.setState({ controls: {}, isValid: false, isChanged: false, isSubmitted: false });
     }
     getFormGroupCssClass(fieldKey) {
-        let result = this.getControl(fieldKey).config.formGroupClassName;
+        const result = this.getControl(fieldKey).config.formGroupClassName;
         return result;
     }
     render() {
@@ -1223,7 +1223,7 @@ class Form extends React.Component {
             return (React__default["default"].createElement(FormGroup, { key: fieldKey, className: this.getFormGroupCssClass(fieldKey) },
                 this.getControl(fieldKey).config.labelPosition !== 'behind' && this.getControl(fieldKey).type !== 'checkbox' &&
                     this.renderLabel(fieldKey, this.getControl(fieldKey).config.label, this.getControl(fieldKey).config.labelClassName),
-                React__default["default"].createElement(FormInput, { autoFocus: this.getControl(fieldKey).config.autoFocus, className: this.getControl(fieldKey).config.formControlClassName, isValid: !this.isInvalid(fieldKey), label: this.getControl(fieldKey).config.label, name: fieldKey, options: this.getControl(fieldKey).config.options, placeholder: this.getControl(fieldKey).config.placeholder, textareaOptions: this.getControl(fieldKey).config.textareaOptions, selectOptions: this.getControl(fieldKey).config.selectOptions, autoCompleteOptions: this.getControl(fieldKey).config.autoCompleteOptions, type: this.getControl(fieldKey).type, value: this.getControl(fieldKey).value, disabled: this.getControl(fieldKey).config.disabled, readonly: this.getControl(fieldKey).config.readonly, onChange: ({ name, value, type }) => this.handleInputChange(name, value, type), onBlur: (e) => this.handleOnBlur(e), onKeyDown: (e) => this.handleOnKeyDown(e) }),
+                React__default["default"].createElement(FormInput, { autoFocus: this.getControl(fieldKey).config.autoFocus, className: this.getControl(fieldKey).config.formControlClassName, isValid: !this.isInvalid(fieldKey), label: this.getControl(fieldKey).config.label, name: fieldKey, options: this.getControl(fieldKey).config.options, placeholder: this.getControl(fieldKey).config.placeholder, textareaOptions: this.getControl(fieldKey).config.textareaOptions, selectOptions: this.getControl(fieldKey).config.selectOptions, autoCompleteOptions: this.getControl(fieldKey).config.autoCompleteOptions, type: this.getControl(fieldKey).type, value: this.getControl(fieldKey).value, disabled: this.getControl(fieldKey).config.disabled, readonly: this.getControl(fieldKey).config.readonly, onChange: ({ name, value }) => this.handleInputChange(name, value), onBlur: (e) => this.handleOnBlur(e), onKeyDown: (e) => this.handleOnKeyDown(e) }),
                 this.getControl(fieldKey).config.labelPosition === 'behind' && this.getControl(fieldKey).type !== 'checkbox' &&
                     this.renderLabel(fieldKey, this.getControl(fieldKey).config.label, this.getControl(fieldKey).config.labelClassName),
                 this.getControl(fieldKey).config.hint &&
@@ -1364,12 +1364,12 @@ const DateSelect = (props) => {
 // 	return Math.ceil((((d - yearStart) / 86400000) + 1) / 7)
 // };
 
-var css_248z$r = ".Drawer-module_drawer__kdQCk {\n  height: 100%;\n  z-index: 1101;\n  bottom: 0;\n  position: fixed;\n  background: white;\n  min-width: 280px;\n  overflow-y: auto; }\n  .Drawer-module_drawer__kdQCk.Drawer-module_permanent__c-y8y {\n    position: inherit;\n    z-index: 0; }\n  .Drawer-module_drawer__kdQCk.Drawer-module_left__loQVO {\n    order: 0; }\n  .Drawer-module_drawer__kdQCk.Drawer-module_right__sJ3mZ {\n    order: 2; }\n\n.Drawer-module_drawerOpen__07ptP {\n  overflow: hidden; }\n";
-var styles$r = {"drawer":"Drawer-module_drawer__kdQCk","permanent":"Drawer-module_permanent__c-y8y","left":"Drawer-module_left__loQVO","right":"Drawer-module_right__sJ3mZ","drawerOpen":"Drawer-module_drawerOpen__07ptP"};
+var css_248z$r = ".Drawer-module_drawer__kdQCk {\n  height: 100%;\n  z-index: 1101;\n  bottom: 0;\n  position: fixed;\n  background: white;\n  min-width: 280px;\n  overflow-y: auto; }\n  .Drawer-module_drawer__kdQCk.Drawer-module_permanent__c-y8y {\n    position: inherit;\n    z-index: 0; }\n  .Drawer-module_drawer__kdQCk.Drawer-module_left__loQVO {\n    order: 0; }\n  .Drawer-module_drawer__kdQCk.Drawer-module_right__sJ3mZ {\n    order: 2; }\n  .Drawer-module_drawer__kdQCk.Drawer-module_shadow__Myo3n {\n    box-shadow: var(--shadow); }\n\n.Drawer-module_drawerOpen__07ptP {\n  overflow: hidden; }\n";
+var styles$r = {"drawer":"Drawer-module_drawer__kdQCk","permanent":"Drawer-module_permanent__c-y8y","left":"Drawer-module_left__loQVO","right":"Drawer-module_right__sJ3mZ","shadow":"Drawer-module_shadow__Myo3n","drawerOpen":"Drawer-module_drawerOpen__07ptP"};
 styleInject(css_248z$r);
 
 const Drawer = (props) => {
-    const { children, className, position = 'left', permanent = false, target = document.body, onClickBackdrop } = props;
+    const { children, className, position = 'left', permanent = false, target = document.body, shadow = true, onClickBackdrop } = props, rest = __rest(props, ["children", "className", "position", "permanent", "target", "shadow", "onClickBackdrop"]);
     React.useEffect(() => {
         document.body.classList.add(styles$r.drawerOpen);
         return () => {
@@ -1379,18 +1379,19 @@ const Drawer = (props) => {
     const handleClickBackdrop = () => {
         onClickBackdrop && onClickBackdrop();
     };
-    return reactDom.createPortal(React__default["default"].createElement(React.Fragment, null,
-        React__default["default"].createElement(DrawerContent, { className: className, position: position, permanent: permanent }, children),
+    return reactDom.createPortal(React__default["default"].createElement(React__default["default"].Fragment, null,
+        React__default["default"].createElement(DrawerContent, Object.assign({ className: className, position: position, permanent: permanent, shadow: shadow }, rest), children),
         !permanent && React__default["default"].createElement(Backdrop, { onClick: handleClickBackdrop })), target);
 };
 const DrawerContent = (props) => {
-    const { children, className, position = 'left', permanent = false } = props;
+    const { children, className, position = 'left', permanent = false, shadow } = props, rest = __rest(props, ["children", "className", "position", "permanent", "shadow"]);
     const getCssClasses = () => {
         const cssClasses = [];
         cssClasses.push(styles$r.drawer);
-        className && cssClasses.push(className);
+        shadow && cssClasses.push(styles$r.shadow);
         !!permanent && cssClasses.push(styles$r['permanent']);
         position === 'left' ? cssClasses.push(styles$r['left']) : cssClasses.push(styles$r['right']);
+        className && cssClasses.push(className);
         return cssClasses.filter(css => css).join(' ');
     };
     const positionStyles = {
@@ -1400,7 +1401,7 @@ const DrawerContent = (props) => {
     const getStyles = () => {
         return !permanent ? positionStyles[position] : undefined;
     };
-    return (React__default["default"].createElement("div", { className: getCssClasses(), style: getStyles() }, children));
+    return (React__default["default"].createElement("div", Object.assign({ className: getCssClasses(), style: getStyles() }, rest), children));
 };
 
 var css_248z$q = ".MenuBody-module_menuBody__u4FIQ {\n  z-index: 1111;\n  margin: 0;\n  position: absolute;\n  top: 100%;\n  left: 0;\n  min-width: 10rem;\n  padding: 8px 0px;\n  font-size: 1rem;\n  color: #212529;\n  text-align: left;\n  list-style: none;\n  background-color: #fff;\n  background-clip: padding-box;\n  border-radius: var(--borderRadius); }\n  .MenuBody-module_menuBody__u4FIQ.MenuBody-module_shadow__OBp-f {\n    box-shadow: var(--shadow); }\n";
@@ -2315,7 +2316,7 @@ const Tabs = (props) => {
     const handleClickTab = (event, newValue, index) => {
         setSelectedValue(newValue);
         setSelectedIndex(index);
-        onChange && onChange(event, newValue);
+        onChange && onChange({ event, newValue });
     };
     const renderTabs = (child, index) => {
         return React__default["default"].isValidElement(child) && React.cloneElement(child, {
@@ -2362,10 +2363,10 @@ styleInject(css_248z$2);
 const Tooltip = (props) => {
     const { children, text, placement = 'bottom' } = props;
     const [show, setShow] = React.useState(false);
-    const refChild = React.useRef(null);
-    const refTooltip = React.useRef(null);
+    const refChild = React.useRef();
+    const refTooltip = React.useRef();
     React.useEffect(() => {
-        if (show === true && refChild && refChild.current) {
+        if (show === true && refChild && refChild.current && refTooltip && refTooltip.current) {
             // TODO - extract to own component?
             core.createPopper(refChild.current, refTooltip.current, {
                 placement: placement,
@@ -2384,7 +2385,7 @@ const Tooltip = (props) => {
     const handleMouseLeave = () => {
         setShow(false);
     };
-    return (React__default["default"].createElement(React.Fragment, null,
+    return (React__default["default"].createElement(React__default["default"].Fragment, null,
         React__default["default"].createElement("div", { className: styles$2.tooltipContainer, ref: refChild, id: "tooltip-container" }, React.cloneElement(children, {
             onMouseOver: handleMouseOver,
             onMouseLeave: handleMouseLeave,

package/package.json

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

package/react-asc.scss

@@ -1,3 +1,55 @@
+:root {
+	--primary-light: #6573c3;
+	--primary: #3f51b5;
+	--primary-dark: #2c387e;
+	--primary-contrast-text: #fff;
+	--primary-highlight: #d6dbf7;
+
+	--secondary-light: #e5e7eb;
+	--secondary: #dfe1e6;
+	--secondary-dark: #9c9da1;
+	--secondary-contrast-text: #fff;
+	--secondary-highlight: rgb(232, 234, 250);
+
+	--accent-light: #fd96b8;
+	--accent: #ff4081;
+	--accent-dark: #fd2c72;
+	--accent-contrast-text: #fff;
+	--accent-highlight: #fca9c5;
+
+	// rename!?
+	--light-light: #ffffff;
+	--light: #f8f9fa;
+	--light-dark: #ebebeb;
+	--light-contrast-text: #212529;
+	--light-highlight: #f8f9fa;
+
+	--dark-light: #616468;
+	--dark: #343a40;
+	--dark-dark: #343a40;
+	--dark-contrast-text: #fff;
+	--dark-highlight: #5e6164;
+
+	--white: #fff;
+
+	--bodyBg: white;
+	--bodyColor: #212529;
+
+	--borderRadius: 5px;
+	--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);
+
+	--buttonMinWidth: 62px;
+	--buttonPadding: 11px 15px;
+
+	--fontFamily: "Segoe UI", "Roboto", "Helvetica Neue", "Arial";
+	--fontSize: 16px;
+
+	--highlight: rgba(204, 216, 224, 0.2); // ???
+
+	--breakpointMd: 768px;
+}
+
 .input-group-append {
 	.btn {
 		min-width: auto;
@@ -112,58 +164,6 @@
 }
 
 
-// TODO
-:root {
-	--primary-light: #6573c3;
-	--primary: #3f51b5;
-	--primary-dark: #2c387e;
-	--primary-contrast-text: #fff;
-	--primary-highlight: #d6dbf7;
-
-	--secondary-light: #e5e7eb;
-	--secondary: #dfe1e6;
-	--secondary-dark: #9c9da1;
-	--secondary-contrast-text: #fff;
-	--secondary-highlight: rgb(232, 234, 250);
-
-	--accent-light: #fd96b8;
-	--accent: #ff4081;
-	--accent-dark: #fd2c72;
-	--accent-contrast-text: #fff;
-	--accent-highlight: #fca9c5;
-
-	// rename!?
-	--light-light: #ffffff;
-	--light: #f8f9fa;
-	--light-dark: #ebebeb;
-	--light-contrast-text: #212529;
-	--light-highlight: #f8f9fa;
-
-	--dark-light: #616468;
-	--dark: #343a40;
-	--dark-dark: #343a40;
-	--dark-contrast-text: #fff;
-	--dark-highlight: #5e6164;
-
-	--white: #fff;
-
-	--bodyBg: #f8f9fa;
-	--bodyColor: #212529;
-
-	--borderRadius: 5px;
-	--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);
-
-	--buttonMinWidth: 62px;
-	--buttonPadding: 11px 15px;
-
-	--fontFamily: "Segoe UI", "Roboto", "Helvetica Neue", "Arial";
-	--fontSize: 16px;
-
-	--highlight: rgba(204, 216, 224, 0.2); // ???
-
-	--breakpointMd: 768px;
-}
-
 label.required {
 	&::after {
 		display: inline-block;