react-asc 21.0.3 → 21.1.0

package/components/AutoComplete/AutoComplete.d.ts

@@ -11,7 +11,6 @@ export interface IAutoCompleteProps {
     placeholder?: string;
     readOnly?: boolean;
     debounce?: number;
-    showNoEntry?: boolean;
     showClearButton?: boolean;
     onSelect?: (val: ISelectOption) => void;
     onChange?: (val: string | undefined) => void;

package/components/TreeView/TreeItem.d.ts

@@ -1,7 +1,7 @@
 import React from "react";
 export interface ITreeItemProps extends React.DetailedHTMLProps<React.InputHTMLAttributes<HTMLLIElement>, HTMLLIElement> {
-    nodeId: string;
-    label: string;
+    nodeId?: string;
+    label?: string;
     isExpanded?: boolean;
     isSelected?: boolean;
     isSelectable?: boolean;

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);
@@ -398,11 +403,11 @@ styleInject(css_248z$Q);
 // multiple
 // custom template render items
 const AutoComplete = (props) => {
-    const { id, name, className, options = [], openOnFocus = true, disabled, readOnly, debounce = 0, placeholder, showNoEntry = true, showClearButton, onChange, onSelect, value } = props;
+    const { id, name, className, options = [], openOnFocus = true, disabled, readOnly, debounce = 0, placeholder, showClearButton, onChange, onSelect, value } = props;
     const [model, setModel] = useState('');
     const [searchText, setSearchText] = useState('');
     const [isShow, setIsShow] = useState(false);
-    const [optionsTemp, setOptionsTemp] = useState([]);
+    const [_options, setOptions] = useState([]);
     const selectConainter = useRef(null);
     useEffect(() => {
         if (value !== model) {
@@ -411,17 +416,7 @@ const AutoComplete = (props) => {
         }
     }, [value]);
     useEffect(() => {
-        if (options && options.length > 0) {
-            const optionsOrigin = JSON.parse(JSON.stringify(options));
-            const regex = new RegExp(searchText.replace(/[-[\]{}()*+?.,\\^$|#\s]/g, '\\$&'), 'gi');
-            const optionsFiltered = optionsOrigin.filter(o => { var _a; return (_a = o.label) === null || _a === void 0 ? void 0 : _a.match(regex); });
-            if (optionsFiltered.length === 0 && showNoEntry) {
-                setOptionsTemp([{ value: '', label: '- no entry found -' }]);
-            }
-            else {
-                setOptionsTemp(optionsFiltered);
-            }
-        }
+        setOptions(options);
     }, [options]);
     useDebounce(() => { onChange && onChange(searchText); }, debounce, [searchText]);
     useEffect(() => {
@@ -478,7 +473,7 @@ const AutoComplete = (props) => {
         isShow &&
             React.createElement(React.Fragment, null,
                 React.createElement("div", { className: styles$Q.selectMenu },
-                    React.createElement(List, null, optionsTemp && optionsTemp.map((option, index) => React.createElement(ListItem, { id: `list-item-${index}`, key: option.value, onClick: () => handleOnClick(option), disabled: !option.value },
+                    React.createElement(List, null, _options && _options.map((option, index) => React.createElement(ListItem, { id: `list-item-${index}`, key: option.value, onClick: () => handleOnClick(option), disabled: !option.value },
                         React.createElement(ListItemText, { primary: option.label ? option.label : option.value }))))),
                 React.createElement(Backdrop, { isTransparent: true, onClick: () => hide() }))));
 };
@@ -1061,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' ||
@@ -1077,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' &&
@@ -1642,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";
@@ -2578,7 +2565,7 @@ const TimeSelect = (props) => {
                 React.createElement(MilliSecondSelect, { value: currDate.getMilliseconds(), disabled: disabled, onChange: e => handleOnChange(e, TIMEMODE.MILLISECONDS) }))));
 };
 
-var css_248z$1 = ".TreeView-module_treeView__VVj-4 {\n  list-style-type: none;\n  margin-bottom: 0;\n  padding-left: 0px !important; }\n  .TreeView-module_treeView__VVj-4 ul {\n    padding-left: 48px !important; }\n";
+var css_248z$1 = ".TreeView-module_treeView__VVj-4 {\n  list-style-type: none;\n  margin-bottom: 0;\n  padding-left: 0px !important;\n  margin-block-start: 0;\n  margin-block-end: 0;\n  margin-inline-start: 0px;\n  margin-inline-end: 0px;\n  padding-inline-start: 0px; }\n  .TreeView-module_treeView__VVj-4 ul {\n    padding-left: 48px !important; }\n";
 var styles$1 = {"treeView":"TreeView-module_treeView__VVj-4"};
 styleInject(css_248z$1);
 
@@ -2625,12 +2612,12 @@ const TreeItem = (props) => {
     };
     return (React.createElement("li", { className: getCssClasses(), style: { paddingLeft: `${(48 * (children ? 0 : 1))}px` } },
         React.createElement("div", { className: "d-flex align-items-center" },
-            children &&
+            children && nodeId &&
                 React.createElement(IconButton, { onClick: () => handleOnToggleExpand(nodeId), icon: !_isExpanded ? React.createElement(ChevronRightSolidIcon, null) : React.createElement(ChevronDownSolidIcon, null) }),
-            isSelectable &&
+            isSelectable && nodeId &&
                 React.createElement(Checkbox, { checked: _isSelected, onChange: () => handleOnSelect(nodeId) }),
             label),
         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);
@@ -406,11 +411,11 @@ styleInject(css_248z$Q);
 // multiple
 // custom template render items
 const AutoComplete = (props) => {
-    const { id, name, className, options = [], openOnFocus = true, disabled, readOnly, debounce = 0, placeholder, showNoEntry = true, showClearButton, onChange, onSelect, value } = props;
+    const { id, name, className, options = [], openOnFocus = true, disabled, readOnly, debounce = 0, placeholder, showClearButton, onChange, onSelect, value } = props;
     const [model, setModel] = React.useState('');
     const [searchText, setSearchText] = React.useState('');
     const [isShow, setIsShow] = React.useState(false);
-    const [optionsTemp, setOptionsTemp] = React.useState([]);
+    const [_options, setOptions] = React.useState([]);
     const selectConainter = React.useRef(null);
     React.useEffect(() => {
         if (value !== model) {
@@ -419,17 +424,7 @@ const AutoComplete = (props) => {
         }
     }, [value]);
     React.useEffect(() => {
-        if (options && options.length > 0) {
-            const optionsOrigin = JSON.parse(JSON.stringify(options));
-            const regex = new RegExp(searchText.replace(/[-[\]{}()*+?.,\\^$|#\s]/g, '\\$&'), 'gi');
-            const optionsFiltered = optionsOrigin.filter(o => { var _a; return (_a = o.label) === null || _a === void 0 ? void 0 : _a.match(regex); });
-            if (optionsFiltered.length === 0 && showNoEntry) {
-                setOptionsTemp([{ value: '', label: '- no entry found -' }]);
-            }
-            else {
-                setOptionsTemp(optionsFiltered);
-            }
-        }
+        setOptions(options);
     }, [options]);
     useDebounce(() => { onChange && onChange(searchText); }, debounce, [searchText]);
     React.useEffect(() => {
@@ -486,7 +481,7 @@ const AutoComplete = (props) => {
         isShow &&
             React__default["default"].createElement(React__default["default"].Fragment, null,
                 React__default["default"].createElement("div", { className: styles$Q.selectMenu },
-                    React__default["default"].createElement(List, null, optionsTemp && optionsTemp.map((option, index) => React__default["default"].createElement(ListItem, { id: `list-item-${index}`, key: option.value, onClick: () => handleOnClick(option), disabled: !option.value },
+                    React__default["default"].createElement(List, null, _options && _options.map((option, index) => React__default["default"].createElement(ListItem, { id: `list-item-${index}`, key: option.value, onClick: () => handleOnClick(option), disabled: !option.value },
                         React__default["default"].createElement(ListItemText, { primary: option.label ? option.label : option.value }))))),
                 React__default["default"].createElement(Backdrop, { isTransparent: true, onClick: () => hide() }))));
 };
@@ -1069,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' ||
@@ -1085,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' &&
@@ -1650,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";
@@ -2586,7 +2573,7 @@ const TimeSelect = (props) => {
                 React__default["default"].createElement(MilliSecondSelect, { value: currDate.getMilliseconds(), disabled: disabled, onChange: e => handleOnChange(e, exports.TIMEMODE.MILLISECONDS) }))));
 };
 
-var css_248z$1 = ".TreeView-module_treeView__VVj-4 {\n  list-style-type: none;\n  margin-bottom: 0;\n  padding-left: 0px !important; }\n  .TreeView-module_treeView__VVj-4 ul {\n    padding-left: 48px !important; }\n";
+var css_248z$1 = ".TreeView-module_treeView__VVj-4 {\n  list-style-type: none;\n  margin-bottom: 0;\n  padding-left: 0px !important;\n  margin-block-start: 0;\n  margin-block-end: 0;\n  margin-inline-start: 0px;\n  margin-inline-end: 0px;\n  padding-inline-start: 0px; }\n  .TreeView-module_treeView__VVj-4 ul {\n    padding-left: 48px !important; }\n";
 var styles$1 = {"treeView":"TreeView-module_treeView__VVj-4"};
 styleInject(css_248z$1);
 
@@ -2633,9 +2620,9 @@ const TreeItem = (props) => {
     };
     return (React__default["default"].createElement("li", { className: getCssClasses(), style: { paddingLeft: `${(48 * (children ? 0 : 1))}px` } },
         React__default["default"].createElement("div", { className: "d-flex align-items-center" },
-            children &&
+            children && nodeId &&
                 React__default["default"].createElement(IconButton, { onClick: () => handleOnToggleExpand(nodeId), icon: !_isExpanded ? React__default["default"].createElement(ChevronRightSolidIcon, null) : React__default["default"].createElement(ChevronDownSolidIcon, null) }),
-            isSelectable &&
+            isSelectable && nodeId &&
                 React__default["default"].createElement(Checkbox, { checked: _isSelected, onChange: () => handleOnSelect(nodeId) }),
             label),
         children && _isExpanded ? React__default["default"].createElement("ul", null, children) : null));
@@ -2747,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.3",
+	"version": "21.1.0",
 	"description": "handcrafted react components",
 	"main": "index.js",
 	"module": "index.es.js",