@rio-cloud/rio-uikit 1.2.0 → 1.2.1

package/components/assetTree/TreeLeaf.js

@@ -8,6 +8,6 @@ import RadioButton from '../radiobutton/RadioButton';
 const TreeLeaf = React.memo((props) => {
     const { item, hasMultiselect, showRadioButtons, isSelected, onSelectItem, onActiveItem } = props;
     const treeNodeClassNames = classNames('TreeLeaf', 'form-group margin-bottom-0', isSelected && 'active', item.className && item.className);
-    return (_jsxs("div", Object.assign({ className: treeNodeClassNames, "data-key": item.id }, { children: [hasMultiselect && _jsx(Checkbox, { className: 'TreeCheckbox', checked: isSelected, onClick: onSelectItem }), !hasMultiselect && showRadioButtons && (_jsx(RadioButton, { className: 'TreeRadioButton', checked: isSelected, onChange: onSelectItem })), _jsx("span", Object.assign({ className: 'TreeLabel', onClick: onActiveItem }, { children: _jsxs("span", Object.assign({ className: 'TreeLabelName' }, { children: [!item.subType && _jsx("span", { className: `rioglyph rioglyph-${item.type}` }), item.subType && (_jsxs("span", Object.assign({ className: 'rioglyph-icon-pair' }, { children: [_jsx("span", { className: `rioglyph rioglyph-${item.type}` }), _jsx("span", { className: `rioglyph rioglyph-${item.subType}` })] }))), _jsxs("span", Object.assign({ className: 'TreeLabelNameText' }, { children: [_jsx("span", Object.assign({ className: 'TreeLabelNameTextHeadline' }, { children: isObject(item.name) ? (_jsxs(_Fragment, { children: [_jsx("span", Object.assign({ className: 'text-light margin-right-3' }, { children: item.name.firstName })), _jsx("span", { children: item.name.lastName })] })) : (item.name) })), item.info && _jsx("span", Object.assign({ className: 'TreeLabelNameTextSubline' }, { children: item.info }))] }))] })) }))] })));
+    return (_jsxs("div", Object.assign({ className: treeNodeClassNames, "data-key": item.id }, { children: [hasMultiselect && _jsx(Checkbox, { className: 'TreeCheckbox', checked: isSelected, onClick: onSelectItem }), !hasMultiselect && showRadioButtons && (_jsx(RadioButton, { className: 'TreeRadioButton', checked: isSelected, onChange: onSelectItem })), _jsxs("span", Object.assign({ className: 'TreeLabel TreeLabelName', onClick: onActiveItem }, { children: [!item.subType && _jsx("span", { className: `rioglyph rioglyph-${item.type}` }), item.subType && (_jsxs("span", Object.assign({ className: 'rioglyph-icon-pair' }, { children: [_jsx("span", { className: `rioglyph rioglyph-${item.type}` }), _jsx("span", { className: `rioglyph rioglyph-${item.subType}` })] }))), _jsxs("span", Object.assign({ className: 'TreeLabelNameText' }, { children: [_jsx("span", Object.assign({ className: 'TreeLabelNameTextHeadline' }, { children: isObject(item.name) ? (_jsxs(_Fragment, { children: [_jsx("span", Object.assign({ className: 'text-light margin-right-3' }, { children: item.name.firstName })), _jsx("span", { children: item.name.lastName })] })) : (item.name) })), item.info && _jsx("span", Object.assign({ className: 'TreeLabelNameTextSubline' }, { children: item.info }))] }))] }))] })));
 });
 export default TreeLeaf;

package/components/assetTree/TreeNode.js

@@ -6,6 +6,6 @@ const TreeNode = React.memo((props) => {
     const { node, hasMultiselect = false, isSelected = false, isIndeterminate = false, onToggleNode, onSelect } = props;
     const treeNodeClassNames = classNames('TreeNode', 'from-group', isSelected && 'checked', node.className && node.className);
     const hasChildren = !!node.items.length;
-    return (_jsxs("div", Object.assign({ className: treeNodeClassNames, "data-key": node.id, onClick: () => hasChildren && onToggleNode(node.id) }, { children: [hasMultiselect && (_jsx(Checkbox, { className: 'TreeCheckbox', checked: isSelected, disabled: node.disabled, indeterminate: isIndeterminate, onClick: () => onSelect(node, isIndeterminate) })), _jsxs("span", Object.assign({ className: 'TreeLabel' }, { children: [_jsxs("span", Object.assign({ className: 'TreeLabelName' }, { children: [node.icon && _jsx("span", { className: `rioglyph ${node.icon}` }), _jsx("span", Object.assign({ className: 'TreeLabelNameText' }, { children: _jsx("span", Object.assign({ className: 'TreeLabelNameTextHeadline' }, { children: node.name })) })), _jsx("span", Object.assign({ className: 'TreeLabelCount label label-muted label-filled label-condensed' }, { children: node.items.length }))] })), _jsx("span", { className: `TreeLabelExpander rioglyph rioglyph-chevron-down ${hasChildren ? '' : 'text-color-light'}` })] }))] })));
+    return (_jsxs("div", Object.assign({ className: treeNodeClassNames, "data-key": node.id, onClick: () => hasChildren && onToggleNode(node.id) }, { children: [hasMultiselect && (_jsx(Checkbox, { className: 'TreeCheckbox', checked: isSelected, disabled: node.disabled, indeterminate: isIndeterminate, onClick: () => onSelect(node, isIndeterminate) })), _jsxs("span", Object.assign({ className: 'TreeLabel TreeLabelName' }, { children: [node.icon && _jsx("span", { className: `rioglyph ${node.icon}` }), _jsx("span", Object.assign({ className: 'TreeLabelNameText' }, { children: _jsx("span", Object.assign({ className: 'TreeLabelNameTextHeadline' }, { children: node.name })) })), _jsx("span", Object.assign({ className: 'TreeLabelCount label label-muted label-filled label-condensed' }, { children: node.items.length })), _jsx("span", { className: `TreeLabelExpander rioglyph rioglyph-chevron-down ${hasChildren ? '' : 'text-color-light'}` })] }))] })));
 });
 export default TreeNode;

package/components/assetTree/TreeRoot.js

@@ -4,7 +4,7 @@ import 'react';
 import classNames from 'classnames';
 import { useAutoAnimate } from '@formkit/auto-animate/react';
 const TreeRoot = ({ maxHeight, disableAnimation, children }) => {
-    const treeRootClasses = classNames('TreeRoot', 'user-select-none overflow-hidden');
+    const treeRootClasses = classNames('TreeRoot', 'user-select-none', maxHeight ? 'overflow-auto' : 'overflow-hidden');
     const [parent, enableAnimations] = useAutoAnimate();
     enableAnimations(!disableAnimation);
     return (_jsx("div", Object.assign({ ref: parent, className: treeRootClasses, style: { maxHeight } }, { children: children })));

package/components/checkbox/Checkbox.js

@@ -51,7 +51,7 @@ const Checkbox = (props) => {
     const renderCustomIcon = !!icon;
     const renderCustomContent = custom && children;
     const renderDefault = !icon && !custom;
-    return (_jsxs("label", Object.assign({}, remainingProps, { className: labelClassnames, tabIndex: tabIndex, htmlFor: id, onKeyDown: handleToggleKeyDown, ref: labelRef }, { children: [_jsx("input", { id: id, name: name, type: 'checkbox', checked: checked, required: required, defaultChecked: defaultChecked, disabled: disabled, className: inputClassnames, onClick: onClick, onChange: onChange, ref: inputRef }), renderCustomIcon && (_jsx(CheckboxIcon, { icon: icon, iconSize: iconSize, iconLabelPosition: iconLabelPosition, text: text })), renderDefault && (_jsx("span", Object.assign({ className: 'checkbox-text' }, { children: _jsx("span", { children: text }) }))), renderCustomContent && children] })));
+    return (_jsxs("label", Object.assign({}, remainingProps, { className: labelClassnames, tabIndex: tabIndex, htmlFor: id, onKeyDown: handleToggleKeyDown, ref: labelRef }, { children: [_jsx("input", { id: id, name: name, type: 'checkbox', checked: checked, required: required, defaultChecked: defaultChecked, disabled: disabled, className: inputClassnames, onClick: onClick, onChange: onChange, ref: inputRef }), renderCustomIcon && (_jsx(CheckboxIcon, { icon: icon, iconSize: iconSize, iconLabelPosition: iconLabelPosition, text: text })), renderDefault && _jsx("span", Object.assign({ className: 'checkbox-text' }, { children: text && _jsx("span", { children: text }) })), renderCustomContent && children] })));
 };
 Checkbox.ICON_LABEL_VERTICAL = ICON_LABEL_VERTICAL;
 Checkbox.ICON_LABEL_HORIZONTAL = ICON_LABEL_HORIZONTAL;

package/components/map/components/features/settings/MapSettingsTile.js

@@ -37,7 +37,7 @@ const MapSettingsTile = (props) => {
     const [refDropdownMenu, setRefDropdownMenu] = useState(null);
     const { styles, attributes } = usePopper(toggleRef, refDropdownMenu, {
         placement: 'top-end',
-        modifiers: isMobileScreen()
+        modifiers: isOpen && isMobileScreen()
             ? [
                 {
                     name: 'offset',

package/lib/es/components/assetTree/TreeLeaf.js

@@ -11,6 +11,6 @@ const RadioButton_1 = tslib_1.__importDefault(require("../radiobutton/RadioButto
 const TreeLeaf = react_1.default.memo((props) => {
     const { item, hasMultiselect, showRadioButtons, isSelected, onSelectItem, onActiveItem } = props;
     const treeNodeClassNames = (0, classnames_1.default)('TreeLeaf', 'form-group margin-bottom-0', isSelected && 'active', item.className && item.className);
-    return ((0, jsx_runtime_1.jsxs)("div", Object.assign({ className: treeNodeClassNames, "data-key": item.id }, { children: [hasMultiselect && (0, jsx_runtime_1.jsx)(Checkbox_1.default, { className: 'TreeCheckbox', checked: isSelected, onClick: onSelectItem }), !hasMultiselect && showRadioButtons && ((0, jsx_runtime_1.jsx)(RadioButton_1.default, { className: 'TreeRadioButton', checked: isSelected, onChange: onSelectItem })), (0, jsx_runtime_1.jsx)("span", Object.assign({ className: 'TreeLabel', onClick: onActiveItem }, { children: (0, jsx_runtime_1.jsxs)("span", Object.assign({ className: 'TreeLabelName' }, { children: [!item.subType && (0, jsx_runtime_1.jsx)("span", { className: `rioglyph rioglyph-${item.type}` }), item.subType && ((0, jsx_runtime_1.jsxs)("span", Object.assign({ className: 'rioglyph-icon-pair' }, { children: [(0, jsx_runtime_1.jsx)("span", { className: `rioglyph rioglyph-${item.type}` }), (0, jsx_runtime_1.jsx)("span", { className: `rioglyph rioglyph-${item.subType}` })] }))), (0, jsx_runtime_1.jsxs)("span", Object.assign({ className: 'TreeLabelNameText' }, { children: [(0, jsx_runtime_1.jsx)("span", Object.assign({ className: 'TreeLabelNameTextHeadline' }, { children: (0, isObject_1.default)(item.name) ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("span", Object.assign({ className: 'text-light margin-right-3' }, { children: item.name.firstName })), (0, jsx_runtime_1.jsx)("span", { children: item.name.lastName })] })) : (item.name) })), item.info && (0, jsx_runtime_1.jsx)("span", Object.assign({ className: 'TreeLabelNameTextSubline' }, { children: item.info }))] }))] })) }))] })));
+    return ((0, jsx_runtime_1.jsxs)("div", Object.assign({ className: treeNodeClassNames, "data-key": item.id }, { children: [hasMultiselect && (0, jsx_runtime_1.jsx)(Checkbox_1.default, { className: 'TreeCheckbox', checked: isSelected, onClick: onSelectItem }), !hasMultiselect && showRadioButtons && ((0, jsx_runtime_1.jsx)(RadioButton_1.default, { className: 'TreeRadioButton', checked: isSelected, onChange: onSelectItem })), (0, jsx_runtime_1.jsxs)("span", Object.assign({ className: 'TreeLabel TreeLabelName', onClick: onActiveItem }, { children: [!item.subType && (0, jsx_runtime_1.jsx)("span", { className: `rioglyph rioglyph-${item.type}` }), item.subType && ((0, jsx_runtime_1.jsxs)("span", Object.assign({ className: 'rioglyph-icon-pair' }, { children: [(0, jsx_runtime_1.jsx)("span", { className: `rioglyph rioglyph-${item.type}` }), (0, jsx_runtime_1.jsx)("span", { className: `rioglyph rioglyph-${item.subType}` })] }))), (0, jsx_runtime_1.jsxs)("span", Object.assign({ className: 'TreeLabelNameText' }, { children: [(0, jsx_runtime_1.jsx)("span", Object.assign({ className: 'TreeLabelNameTextHeadline' }, { children: (0, isObject_1.default)(item.name) ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("span", Object.assign({ className: 'text-light margin-right-3' }, { children: item.name.firstName })), (0, jsx_runtime_1.jsx)("span", { children: item.name.lastName })] })) : (item.name) })), item.info && (0, jsx_runtime_1.jsx)("span", Object.assign({ className: 'TreeLabelNameTextSubline' }, { children: item.info }))] }))] }))] })));
 });
 exports.default = TreeLeaf;

package/lib/es/components/assetTree/TreeNode.js

@@ -9,6 +9,6 @@ const TreeNode = react_1.default.memo((props) => {
     const { node, hasMultiselect = false, isSelected = false, isIndeterminate = false, onToggleNode, onSelect } = props;
     const treeNodeClassNames = (0, classnames_1.default)('TreeNode', 'from-group', isSelected && 'checked', node.className && node.className);
     const hasChildren = !!node.items.length;
-    return ((0, jsx_runtime_1.jsxs)("div", Object.assign({ className: treeNodeClassNames, "data-key": node.id, onClick: () => hasChildren && onToggleNode(node.id) }, { children: [hasMultiselect && ((0, jsx_runtime_1.jsx)(Checkbox_1.default, { className: 'TreeCheckbox', checked: isSelected, disabled: node.disabled, indeterminate: isIndeterminate, onClick: () => onSelect(node, isIndeterminate) })), (0, jsx_runtime_1.jsxs)("span", Object.assign({ className: 'TreeLabel' }, { children: [(0, jsx_runtime_1.jsxs)("span", Object.assign({ className: 'TreeLabelName' }, { children: [node.icon && (0, jsx_runtime_1.jsx)("span", { className: `rioglyph ${node.icon}` }), (0, jsx_runtime_1.jsx)("span", Object.assign({ className: 'TreeLabelNameText' }, { children: (0, jsx_runtime_1.jsx)("span", Object.assign({ className: 'TreeLabelNameTextHeadline' }, { children: node.name })) })), (0, jsx_runtime_1.jsx)("span", Object.assign({ className: 'TreeLabelCount label label-muted label-filled label-condensed' }, { children: node.items.length }))] })), (0, jsx_runtime_1.jsx)("span", { className: `TreeLabelExpander rioglyph rioglyph-chevron-down ${hasChildren ? '' : 'text-color-light'}` })] }))] })));
+    return ((0, jsx_runtime_1.jsxs)("div", Object.assign({ className: treeNodeClassNames, "data-key": node.id, onClick: () => hasChildren && onToggleNode(node.id) }, { children: [hasMultiselect && ((0, jsx_runtime_1.jsx)(Checkbox_1.default, { className: 'TreeCheckbox', checked: isSelected, disabled: node.disabled, indeterminate: isIndeterminate, onClick: () => onSelect(node, isIndeterminate) })), (0, jsx_runtime_1.jsxs)("span", Object.assign({ className: 'TreeLabel TreeLabelName' }, { children: [node.icon && (0, jsx_runtime_1.jsx)("span", { className: `rioglyph ${node.icon}` }), (0, jsx_runtime_1.jsx)("span", Object.assign({ className: 'TreeLabelNameText' }, { children: (0, jsx_runtime_1.jsx)("span", Object.assign({ className: 'TreeLabelNameTextHeadline' }, { children: node.name })) })), (0, jsx_runtime_1.jsx)("span", Object.assign({ className: 'TreeLabelCount label label-muted label-filled label-condensed' }, { children: node.items.length })), (0, jsx_runtime_1.jsx)("span", { className: `TreeLabelExpander rioglyph rioglyph-chevron-down ${hasChildren ? '' : 'text-color-light'}` })] }))] })));
 });
 exports.default = TreeNode;

package/lib/es/components/assetTree/TreeRoot.js

@@ -7,7 +7,7 @@ require("react");
 const classnames_1 = tslib_1.__importDefault(require("classnames"));
 const react_1 = require("@formkit/auto-animate/react");
 const TreeRoot = ({ maxHeight, disableAnimation, children }) => {
-    const treeRootClasses = (0, classnames_1.default)('TreeRoot', 'user-select-none overflow-hidden');
+    const treeRootClasses = (0, classnames_1.default)('TreeRoot', 'user-select-none', maxHeight ? 'overflow-auto' : 'overflow-hidden');
     const [parent, enableAnimations] = (0, react_1.useAutoAnimate)();
     enableAnimations(!disableAnimation);
     return ((0, jsx_runtime_1.jsx)("div", Object.assign({ ref: parent, className: treeRootClasses, style: { maxHeight } }, { children: children })));

package/lib/es/components/checkbox/Checkbox.js

@@ -53,7 +53,7 @@ const Checkbox = (props) => {
     const renderCustomIcon = !!icon;
     const renderCustomContent = custom && children;
     const renderDefault = !icon && !custom;
-    return ((0, jsx_runtime_1.jsxs)("label", Object.assign({}, remainingProps, { className: labelClassnames, tabIndex: tabIndex, htmlFor: id, onKeyDown: handleToggleKeyDown, ref: labelRef }, { children: [(0, jsx_runtime_1.jsx)("input", { id: id, name: name, type: 'checkbox', checked: checked, required: required, defaultChecked: defaultChecked, disabled: disabled, className: inputClassnames, onClick: onClick, onChange: onChange, ref: inputRef }), renderCustomIcon && ((0, jsx_runtime_1.jsx)(CheckboxIcon_1.CheckboxIcon, { icon: icon, iconSize: iconSize, iconLabelPosition: iconLabelPosition, text: text })), renderDefault && ((0, jsx_runtime_1.jsx)("span", Object.assign({ className: 'checkbox-text' }, { children: (0, jsx_runtime_1.jsx)("span", { children: text }) }))), renderCustomContent && children] })));
+    return ((0, jsx_runtime_1.jsxs)("label", Object.assign({}, remainingProps, { className: labelClassnames, tabIndex: tabIndex, htmlFor: id, onKeyDown: handleToggleKeyDown, ref: labelRef }, { children: [(0, jsx_runtime_1.jsx)("input", { id: id, name: name, type: 'checkbox', checked: checked, required: required, defaultChecked: defaultChecked, disabled: disabled, className: inputClassnames, onClick: onClick, onChange: onChange, ref: inputRef }), renderCustomIcon && ((0, jsx_runtime_1.jsx)(CheckboxIcon_1.CheckboxIcon, { icon: icon, iconSize: iconSize, iconLabelPosition: iconLabelPosition, text: text })), renderDefault && (0, jsx_runtime_1.jsx)("span", Object.assign({ className: 'checkbox-text' }, { children: text && (0, jsx_runtime_1.jsx)("span", { children: text }) })), renderCustomContent && children] })));
 };
 Checkbox.ICON_LABEL_VERTICAL = ICON_LABEL_VERTICAL;
 Checkbox.ICON_LABEL_HORIZONTAL = ICON_LABEL_HORIZONTAL;

package/lib/es/components/map/components/features/settings/MapSettingsTile.js

@@ -39,7 +39,7 @@ const MapSettingsTile = (props) => {
     const [refDropdownMenu, setRefDropdownMenu] = (0, react_1.useState)(null);
     const { styles, attributes } = (0, react_popper_1.usePopper)(toggleRef, refDropdownMenu, {
         placement: 'top-end',
-        modifiers: (0, deviceUtils_1.isMobileScreen)()
+        modifiers: isOpen && (0, deviceUtils_1.isMobileScreen)()
             ? [
                 {
                     name: 'offset',

package/lib/es/version.json

@@ -1,3 +1,3 @@
 {
-    "version": "1.2.0"
+    "version": "1.2.1"
 }

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@rio-cloud/rio-uikit",
-    "version": "1.2.0",
+    "version": "1.2.1",
     "description": "The RIO UIKIT component library",
     "repository": "https://bitbucket.collaboration-man.com/projects/RIOFRONT/repos/uikit-web/browse",
     "scripts": {

package/version.json

@@ -1,3 +1,3 @@
 {
-    "version": "1.2.0"
+    "version": "1.2.1"
 }