react-asc 21.0.6 → 21.1.0

package/hooks/index.d.ts

@@ -2,3 +2,4 @@ export * from './useWindowSize';
 export * from './useHover';
 export * from './useConstructor';
 export * from './useDebounce';
+export * from './useCssClasses';

package/hooks/useCssClasses.d.ts

@@ -0,0 +1 @@
+export declare function useCssClasses(cssClasses: Array<string>): string[];

package/index.es.js

@@ -282,6 +282,11 @@ function useDebounce(callback, timeout, deps) {
     }, deps);
 }
 
+function useCssClasses(cssClasses) {
+    const cssClassName = cssClasses.filter(css => css).join(' ');
+    return [cssClassName];
+}
+
 var css_248z$X = ".Backdrop-module_backdrop__IRMoL {\n  height: 100%;\n  width: 100%;\n  position: absolute;\n  opacity: 0.5;\n  z-index: 1040;\n  top: 0;\n  left: 0;\n  background-color: #000; }\n  .Backdrop-module_backdrop__IRMoL.Backdrop-module_isTransparent__F5nA5 {\n    opacity: 0; }\n";
 var styles$X = {"backdrop":"Backdrop-module_backdrop__IRMoL","isTransparent":"Backdrop-module_isTransparent__F5nA5"};
 styleInject(css_248z$X);
@@ -1051,7 +1056,7 @@ const FormInput = (props) => {
     const handleOnChange = (value, type, name) => {
         onChange && onChange({ value, type, name });
     };
-    return (React.createElement(Fragment, null,
+    return (React.createElement(React.Fragment, null,
         (type === 'text' ||
             type === 'date' ||
             type === 'datetime-local' ||
@@ -1067,11 +1072,9 @@ const FormInput = (props) => {
         type === 'textarea' &&
             React.createElement(Textarea, { id: name, name: name, className: className, error: !isValid, 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={e => onKeyDown(e)}
-                options: options }),
+            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), 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), options: options }),
+            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), onSelect: e => handleOnChange(e.value, type, name), 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 }),
         type === 'radio' &&
@@ -1632,20 +1635,14 @@ styleInject(css_248z$l);
 const Link = (props) => {
     const { href = '#', className, target, children } = props, rest = __rest(props, ["href", "className", "target", "children"]);
     const [status, setStatus] = useState(STATUS.NORMAL);
-    const getCssClasses = () => {
-        const cssClasses = [];
-        cssClasses.push(styles$l.link);
-        className && cssClasses.push(className);
-        status !== STATUS.NORMAL && cssClasses.push(status);
-        return cssClasses.filter(css => css).join(' ');
-    };
+    const [cssClassName] = useCssClasses([styles$l.link, className, status]);
     const onMouseEnter = () => {
         setStatus(STATUS.HOVERED);
     };
     const onMouseLeave = () => {
         setStatus(STATUS.NORMAL);
     };
-    return (React.createElement("a", Object.assign({ className: getCssClasses(), href: href, target: target, onMouseEnter: onMouseEnter, onMouseLeave: onMouseLeave }, rest), children));
+    return (React.createElement("a", Object.assign({ className: cssClassName, href: href, target: target, onMouseEnter: onMouseEnter, onMouseLeave: onMouseLeave }, rest), children));
 };
 
 var css_248z$k = ".LoadingIndicator-module_loadingIndicatorContainer__GS9OG {\n  position: fixed;\n  top: 0;\n  left: 0;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  height: 100%;\n  width: 100%; }\n\n.LoadingIndicator-module_loadingIndicator__EC9sx {\n  animation-name: LoadingIndicator-module_spinAnimation__LeY4Z;\n  animation-duration: 5000ms;\n  animation-iteration-count: infinite;\n  animation-timing-function: linear;\n  width: 24px;\n  height: 24px; }\n\n@keyframes LoadingIndicator-module_spinAnimation__LeY4Z {\n  from {\n    transform: rotate(0deg); }\n  to {\n    transform: rotate(360deg); } }\n";
@@ -2623,4 +2620,4 @@ const TreeItem = (props) => {
         children && _isExpanded ? React.createElement("ul", null, children) : null));
 };
 
-export { Alert, AppBar, AppBarTitle, AutoComplete, Backdrop, Badge, Breadcrumb, BreadcrumbItem, Button, ButtonGroup, COLOR, Card, CardBody, CardFooter, CardImage, CardSubtitle, CardText, CardTitle, CaretDownSolidIcon, CheckSolidIcon, CheckSquareRegularIcon, Checkbox, ChevronDownSolidIcon, ChevronLeftSolidIcon, ChevronRightSolidIcon, ChevronUpSolidIcon, Chip, CircleSolidIcon, Column, ConditionalWrapper, DATEMODE, DateSelect, DaySelect, Drawer, EmailValidator, ExpansionPanel, ExpansionPanelContent, ExpansionPanelHeader, FileInput, FloatingActionButton, Form, FormControl, FormError, FormGroup, FormHint, FormInput, FormLabel, GlobalModal, HomeSolidIcon, HourSelect, Icon, IconButton, IsEmptyValidator, IsEqualValidator, Link, List, ListItem, ListItemAction, ListItemAvatar, ListItemIcon, ListItemText, LoadingIndicator, LoadingIndicatorContainer, MODALBUTTONTYPE, MODALTYPE, Menu, MenuBody, MenuDivider, MenuItem, MenuToggle, MilliSecondSelect, MinuteSelect, Modal, ModalBody, ModalFooter, ModalHeader, MonthSelect, NumberSelect, POSITION, PlusSolidIcon, Row, SIZE, STATUS, SecondSelect, Select, Sidebar, Snackbar, SpeedDial, SpeedDialAction, SpeedDialIcon, SpinnerSolidIcon, SquareRegularIcon, Step, Stepper, StepperActions, TIMEMODE, Tab, TabPanel, Table, Tabs, Textarea, TimeSelect, TimesCircleSolidIcon, TimesSolidIcon, Tooltip, TreeItem, TreeView, Typography, VARIANT, YearSelect, loadingIndicatorService, modalService, snackbarService, useConstructor, useDebounce, useHover, useWindowSize };
+export { Alert, AppBar, AppBarTitle, AutoComplete, Backdrop, Badge, Breadcrumb, BreadcrumbItem, Button, ButtonGroup, COLOR, Card, CardBody, CardFooter, CardImage, CardSubtitle, CardText, CardTitle, CaretDownSolidIcon, CheckSolidIcon, CheckSquareRegularIcon, Checkbox, ChevronDownSolidIcon, ChevronLeftSolidIcon, ChevronRightSolidIcon, ChevronUpSolidIcon, Chip, CircleSolidIcon, Column, ConditionalWrapper, DATEMODE, DateSelect, DaySelect, Drawer, EmailValidator, ExpansionPanel, ExpansionPanelContent, ExpansionPanelHeader, FileInput, FloatingActionButton, Form, FormControl, FormError, FormGroup, FormHint, FormInput, FormLabel, GlobalModal, HomeSolidIcon, HourSelect, Icon, IconButton, IsEmptyValidator, IsEqualValidator, Link, List, ListItem, ListItemAction, ListItemAvatar, ListItemIcon, ListItemText, LoadingIndicator, LoadingIndicatorContainer, MODALBUTTONTYPE, MODALTYPE, Menu, MenuBody, MenuDivider, MenuItem, MenuToggle, MilliSecondSelect, MinuteSelect, Modal, ModalBody, ModalFooter, ModalHeader, MonthSelect, NumberSelect, POSITION, PlusSolidIcon, Row, SIZE, STATUS, SecondSelect, Select, Sidebar, Snackbar, SpeedDial, SpeedDialAction, SpeedDialIcon, SpinnerSolidIcon, SquareRegularIcon, Step, Stepper, StepperActions, TIMEMODE, Tab, TabPanel, Table, Tabs, Textarea, TimeSelect, TimesCircleSolidIcon, TimesSolidIcon, Tooltip, TreeItem, TreeView, Typography, VARIANT, YearSelect, loadingIndicatorService, modalService, snackbarService, useConstructor, useCssClasses, useDebounce, useHover, useWindowSize };

package/index.js

@@ -290,6 +290,11 @@ function useDebounce(callback, timeout, deps) {
     }, deps);
 }
 
+function useCssClasses(cssClasses) {
+    const cssClassName = cssClasses.filter(css => css).join(' ');
+    return [cssClassName];
+}
+
 var css_248z$X = ".Backdrop-module_backdrop__IRMoL {\n  height: 100%;\n  width: 100%;\n  position: absolute;\n  opacity: 0.5;\n  z-index: 1040;\n  top: 0;\n  left: 0;\n  background-color: #000; }\n  .Backdrop-module_backdrop__IRMoL.Backdrop-module_isTransparent__F5nA5 {\n    opacity: 0; }\n";
 var styles$X = {"backdrop":"Backdrop-module_backdrop__IRMoL","isTransparent":"Backdrop-module_isTransparent__F5nA5"};
 styleInject(css_248z$X);
@@ -1059,7 +1064,7 @@ const FormInput = (props) => {
     const handleOnChange = (value, type, name) => {
         onChange && onChange({ value, type, name });
     };
-    return (React__default["default"].createElement(React.Fragment, null,
+    return (React__default["default"].createElement(React__default["default"].Fragment, null,
         (type === 'text' ||
             type === 'date' ||
             type === 'datetime-local' ||
@@ -1075,11 +1080,9 @@ const FormInput = (props) => {
         type === 'textarea' &&
             React__default["default"].createElement(Textarea, { id: name, name: name, className: className, error: !isValid, 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={e => onKeyDown(e)}
-                options: options }),
+            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), 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), options: options }),
+            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), onSelect: e => handleOnChange(e.value, type, name), 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 }),
         type === 'radio' &&
@@ -1640,20 +1643,14 @@ styleInject(css_248z$l);
 const Link = (props) => {
     const { href = '#', className, target, children } = props, rest = __rest(props, ["href", "className", "target", "children"]);
     const [status, setStatus] = React.useState(STATUS.NORMAL);
-    const getCssClasses = () => {
-        const cssClasses = [];
-        cssClasses.push(styles$l.link);
-        className && cssClasses.push(className);
-        status !== STATUS.NORMAL && cssClasses.push(status);
-        return cssClasses.filter(css => css).join(' ');
-    };
+    const [cssClassName] = useCssClasses([styles$l.link, className, status]);
     const onMouseEnter = () => {
         setStatus(STATUS.HOVERED);
     };
     const onMouseLeave = () => {
         setStatus(STATUS.NORMAL);
     };
-    return (React__default["default"].createElement("a", Object.assign({ className: getCssClasses(), href: href, target: target, onMouseEnter: onMouseEnter, onMouseLeave: onMouseLeave }, rest), children));
+    return (React__default["default"].createElement("a", Object.assign({ className: cssClassName, href: href, target: target, onMouseEnter: onMouseEnter, onMouseLeave: onMouseLeave }, rest), children));
 };
 
 var css_248z$k = ".LoadingIndicator-module_loadingIndicatorContainer__GS9OG {\n  position: fixed;\n  top: 0;\n  left: 0;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  height: 100%;\n  width: 100%; }\n\n.LoadingIndicator-module_loadingIndicator__EC9sx {\n  animation-name: LoadingIndicator-module_spinAnimation__LeY4Z;\n  animation-duration: 5000ms;\n  animation-iteration-count: infinite;\n  animation-timing-function: linear;\n  width: 24px;\n  height: 24px; }\n\n@keyframes LoadingIndicator-module_spinAnimation__LeY4Z {\n  from {\n    transform: rotate(0deg); }\n  to {\n    transform: rotate(360deg); } }\n";
@@ -2737,6 +2734,7 @@ exports.loadingIndicatorService = loadingIndicatorService;
 exports.modalService = modalService;
 exports.snackbarService = snackbarService;
 exports.useConstructor = useConstructor;
+exports.useCssClasses = useCssClasses;
 exports.useDebounce = useDebounce;
 exports.useHover = useHover;
 exports.useWindowSize = useWindowSize;

package/package.json

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