@rio-cloud/rio-uikit 0.16.1-beta-4 → 0.16.1-beta-6

package/lib/components/applicationLayout/ApplicationLayoutSidebar.js

@@ -16,7 +16,8 @@ var _classnames = _interopRequireDefault(require("classnames"));
 var ApplicationLayoutSidebar = function ApplicationLayoutSidebar(_ref) {
   var className = _ref.className,
       children = _ref.children;
-  var classes = (0, _classnames.default)('ApplicationLayoutSidebar', className);
+  var classes = (0, _classnames.default)('ApplicationLayoutSidebar', className); // TODO: check for className "right" and inject prop "position={Sidebar.RIGHT}"
+
   return /*#__PURE__*/_react.default.createElement("div", {
     className: classes
   }, children);

package/lib/components/selects/BaseDropdownMenu.js

@@ -79,7 +79,7 @@ var BaseDropdownMenu = /*#__PURE__*/function (_Component) {
       pullRight: props.pullRight,
       focusedItemIndex: _this.props.focusedItemIndex,
       keyboardUsed: _this.props.keyboardUsed,
-      itemDOMValues: null
+      itemDOMValues: []
     };
     _this.handleOptionChange = _this.handleOptionChange.bind((0, _assertThisInitialized2.default)(_this));
     _this.handleKeydown = _this.handleKeydown.bind((0, _assertThisInitialized2.default)(_this));
@@ -113,24 +113,29 @@ var BaseDropdownMenu = /*#__PURE__*/function (_Component) {
         }
 
         if (!(0, _isEqual.default)(nextProps.options, this.props.options)) {
-          // Only update the DOM values if it is explicitly requested
-          // otherwise it will reduce the dom values to the filtered options
-          var updatedItemDOMValues;
-
-          if (nextProps.requestItemDOMValues) {
-            updatedItemDOMValues = this.setItemDOMValues();
-          }
-
           this.setState(function () {
             return {
-              options: nextProps.options,
-              itemDOMValues: updatedItemDOMValues ? updatedItemDOMValues : _this2.state.itemDOMValues
+              options: nextProps.options
             };
-          });
-
-          if (nextProps.requestItemDOMValues) {
-            this.props.updateDOMValues(updatedItemDOMValues);
-          }
+          }); // Workaround to put the update of DOM values into a setTimeout to have the component
+          // re-rendered to fetch the DOM items.
+          // This should be refactored when reworking the component as functional component
+
+          setTimeout(function () {
+            // Only update the DOM values if it is explicitly requested
+            // otherwise it will reduce the dom values to the filtered options
+            if (nextProps.requestItemDOMValues) {
+              var items = _this2.setItemDOMValues();
+
+              _this2.props.updateDOMValues(items);
+
+              _this2.setState(function () {
+                return {
+                  itemDOMValues: items ? items : _this2.state.itemDOMValues
+                };
+              });
+            }
+          }, 0);
         }
       }
     }
@@ -273,10 +278,10 @@ var BaseDropdownMenu = /*#__PURE__*/function (_Component) {
           return /*#__PURE__*/_react.default.createElement("ul", {
             className: dropdownMenuClasses
           }, /*#__PURE__*/_react.default.createElement("li", {
-            className: 'no-item-message disabled',
+            className: "no-item-message disabled",
             disabled: true
           }, /*#__PURE__*/_react.default.createElement("a", {
-            role: 'button'
+            role: "button"
           }, /*#__PURE__*/_react.default.createElement("i", null, noItemMessage))));
         }
 
@@ -301,7 +306,7 @@ var BaseDropdownMenu = /*#__PURE__*/function (_Component) {
           id: option.id,
           icon: option.icon,
           label: option.label,
-          type: 'dropdown'
+          type: "dropdown"
         });
       } // Show focused style only when keyboard is in use
 
@@ -312,15 +317,15 @@ var BaseDropdownMenu = /*#__PURE__*/function (_Component) {
         key: option.id,
         className: classNames
       }, /*#__PURE__*/_react.default.createElement("a", {
-        role: 'button',
+        role: "button",
         className: anchorClassNames,
         "data-item-id": option.id,
         "data-item-index": index,
         onClick: !option.disabled ? this.handleOptionChange : undefined
       }, /*#__PURE__*/_react.default.createElement("span", null, option.icon && /*#__PURE__*/_react.default.createElement("span", {
-        className: 'margin-right-5'
+        className: "margin-right-5"
       }, option.icon), option.label), /*#__PURE__*/_react.default.createElement("input", {
-        type: 'hidden',
+        type: "hidden",
         value: option.id
       })));
     }
@@ -416,5 +421,6 @@ BaseDropdownMenu.propTypes = {
   autoDropDirection: _propTypes.default.bool,
   noItemMessage: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.node]),
   focusedItemIndex: _propTypes.default.number.isRequired,
-  dropdownClassName: _propTypes.default.string
+  dropdownClassName: _propTypes.default.string,
+  requestItemDOMValues: _propTypes.default.bool
 };

package/lib/components/selects/Select.js

@@ -71,7 +71,8 @@ var Select = /*#__PURE__*/function (_Component) {
       filteredOptions: props.options,
       itemDOMValues: [],
       focusedItemIndex: DEFAULT_FOCUSED_ITEM_INDEX,
-      keyboardUsed: false
+      keyboardUsed: false,
+      requestItemDOMValues: false
     };
     _this.onToggle = _this.onToggle.bind((0, _assertThisInitialized2.default)(_this));
     _this.handleClickOutside = _this.handleClickOutside.bind((0, _assertThisInitialized2.default)(_this));
@@ -125,7 +126,8 @@ var Select = /*#__PURE__*/function (_Component) {
     }
   }, {
     key: "updateDOMValues",
-    value: function updateDOMValues(itemDOMValues) {
+    value: function updateDOMValues() {
+      var itemDOMValues = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
       this.setState(function () {
         return {
           itemDOMValues: itemDOMValues,
@@ -294,7 +296,8 @@ var Select = /*#__PURE__*/function (_Component) {
         noItemMessage: noItemMessage,
         autoDropDirection: autoDropDirection,
         pullRight: pullRight,
-        dropdownClassName: dropdownClassName
+        dropdownClassName: dropdownClassName,
+        requestItemDOMValues: this.state.requestItemDOMValues
       });
     }
   }, {
@@ -311,10 +314,13 @@ var Select = /*#__PURE__*/function (_Component) {
     }
   }, {
     key: "filterOptions",
-    value: function filterOptions(itemDOMValues, filterValue, options) {
+    value: function filterOptions() {
+      var itemDOMValues = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
+      var filterValue = arguments.length > 1 ? arguments[1] : undefined;
+      var options = arguments.length > 2 ? arguments[2] : undefined;
       var filteredDOMValues = itemDOMValues.filter(function (item) {
         return item.text.toLowerCase().includes(filterValue.toLowerCase());
-      }); // Filter the options accodring to the filtered DOM values and map the IDs since the filter cannot be done
+      }); // Filter the options according to the filtered DOM values and map the IDs since the filter cannot be done
       // on the options itself as they might contain arbitrary components
 
       return options.filter(function (option) {

package/lib/components/sidebars/Sidebar.js

@@ -25,14 +25,16 @@ var _react = _interopRequireWildcard(require("react"));
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
-var _Resizer = _interopRequireDefault(require("../resizer/Resizer"));
-
 var _classnames = _interopRequireDefault(require("classnames"));
 
 var _throttle = _interopRequireDefault(require("lodash/fp/throttle"));
 
 var _head = _interopRequireDefault(require("lodash/fp/head"));
 
+var _framerMotion = require("framer-motion");
+
+var _Resizer = _interopRequireDefault(require("../resizer/Resizer"));
+
 var _addEventListener = _interopRequireDefault(require("../../utils/addEventListener"));
 
 var _ownerDocument = _interopRequireDefault(require("../../utils/ownerDocument"));
@@ -272,7 +274,8 @@ var Sidebar = /*#__PURE__*/function (_Component) {
           enableNavigationButtons = _this$props5.enableNavigationButtons,
           disableClose = _this$props5.disableClose,
           bodyRef = _this$props5.bodyRef,
-          headerButtons = _this$props5.headerButtons;
+          headerButtons = _this$props5.headerButtons,
+          fly = _this$props5.fly;
       var _this$state2 = this.state,
           width = _this$state2.width,
           isFullscreen = _this$state2.isFullscreen,
@@ -293,10 +296,57 @@ var Sidebar = /*#__PURE__*/function (_Component) {
       } : {
         left: resizeIndicatorPosition
       };
-      return /*#__PURE__*/_react.default.createElement("div", {
+      var offscreenPos = isRight ? 1000 : -1000;
+      var pos = isRight ? width : width; // const initial = { opacity: 0 };
+      // if (isRight) {
+      //     initial.x = -1000;
+      // } else {
+      //     initial.x = -1000;
+      // }
+      // const contentAnimate = {};
+      // if (closed) {
+      //     if (isRight) {
+      //         // contentAnimate.x = 10000;
+      //         // contentAnimate.left = 0;
+      //     } else {
+      //         // contentAnimate.x = -1000;
+      //         contentAnimate.right = 0;
+      //     }
+      // } else {
+      //     if (isRight) {
+      //         contentAnimate.x = 0;
+      //     } else {
+      //         contentAnimate.x = 0;
+      //     }
+      //     contentAnimate.opacity = 1;
+      // }
+
+      var contentStyle = {
+        width: width,
+        top: 0,
+        position: 'absolute'
+      };
+
+      if (isRight) {
+        contentStyle.left = 0;
+      } else {
+        contentStyle.right = 0;
+      }
+
+      return /*#__PURE__*/_react.default.createElement(_framerMotion.motion.div, {
+        initial: {
+          width: closed ? 0 : width
+        },
+        animate: {
+          width: closed ? 0 : width
+        },
+        transition: {
+          duration: 2.2,
+          ease: 'easeInOut'
+        },
         className: classes,
         style: {
-          width: width
+          overflow: closed ? 'hidden' : 'auto'
         },
         ref: function ref(node) {
           return _this2.sidebarRef = node;
@@ -304,36 +354,38 @@ var Sidebar = /*#__PURE__*/function (_Component) {
       }, /*#__PURE__*/_react.default.createElement("div", {
         className: resizeLimitClasses,
         style: resizeLimitStyle
-      }), /*#__PURE__*/_react.default.createElement("div", {
-        className: 'SidebarContent'
+      }), /*#__PURE__*/_react.default.createElement(_framerMotion.motion.div, {
+        // animate={contentAnimate}
+        style: contentStyle,
+        className: "SidebarContent"
       }, /*#__PURE__*/_react.default.createElement("div", {
         className: headerClassNames
       }, /*#__PURE__*/_react.default.createElement("div", {
         className: titleClassNames
       }, title ? title : ''), /*#__PURE__*/_react.default.createElement("div", {
-        className: 'SidebarButtons non-printable close'
+        className: "SidebarButtons non-printable close"
       }, headerButtons, enableNavigationButtons && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("button", {
-        className: 'btn btn-muted btn-icon-only',
+        className: "btn btn-muted btn-icon-only",
         onClick: this.handlePrevContent
       }, /*#__PURE__*/_react.default.createElement("span", {
-        className: ' rioglyph rioglyph-chevron-left'
+        className: " rioglyph rioglyph-chevron-left"
       })), /*#__PURE__*/_react.default.createElement("button", {
-        className: 'btn btn-muted btn-icon-only',
+        className: "btn btn-muted btn-icon-only",
         onClick: this.handleNextContent
       }, /*#__PURE__*/_react.default.createElement("span", {
-        className: ' rioglyph rioglyph-chevron-right'
+        className: " rioglyph rioglyph-chevron-right"
       }))), enableFullscreenToggle && /*#__PURE__*/_react.default.createElement("button", {
-        className: 'btn btn-muted btn-icon-only',
+        className: "btn btn-muted btn-icon-only",
         onClick: this.handleFullscreenChange
       }, /*#__PURE__*/_react.default.createElement("span", {
         className: fullscreenIconClasses
       })), !disableClose && (headerButtons || enableNavigationButtons || enableFullscreenToggle) && /*#__PURE__*/_react.default.createElement("div", {
-        className: 'SidebarButtons-spacer'
+        className: "SidebarButtons-spacer"
       }), !disableClose && /*#__PURE__*/_react.default.createElement("button", {
-        className: 'btn btn-muted btn-icon-only',
+        className: "btn btn-muted btn-icon-only",
         onClick: onClose
       }, /*#__PURE__*/_react.default.createElement("span", {
-        className: 'rioglyph rioglyph-remove'
+        className: "rioglyph rioglyph-remove"
       })))), /*#__PURE__*/_react.default.createElement("div", {
         className: bodyClassNames,
         ref: bodyRef

package/lib/style/css/_exports/rio-website.less

@@ -191,7 +191,7 @@ body .module-content {
 
 .ApplicationHeader {
   .navbar-brand {
-    background-image: url('@{cdnBase}/svg/common/ico_rio.svg') !important;
+    //background-image: url('@{cdnBase}/svg/common/ico_rio.svg') !important;
     background-size: cover;
   }
 
@@ -671,6 +671,24 @@ body .module-content {
             }
           }
 
+          &.list-style-position-inside {
+            ul, ol {
+              list-style-position: inside !important;
+            }
+          }
+
+          &.large-panel-border {
+            > .section-content-container.panel {
+              border-width: 3px;
+            }
+
+            &.panel-border-color-lighter {
+              > .section-content-container.panel {
+                border-color: @gray-lighter;
+              }
+            }
+          }
+
           // Section Wrapper Inner Container
           .section-content-container {
             height: 100%;

package/lib/version.json

@@ -1,3 +1,3 @@
 {
-"version": "0.16.1-beta-4"
+"version": "0.16.1-beta-6"
 }

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@rio-cloud/rio-uikit",
-    "version": "0.16.1-beta-4",
+    "version": "0.16.1-beta-6",
     "description": "The RIO UIKIT component library",
     "repository": "https://collaboration.msi.audi.com/stash/projects/RIOFRONT/repos/uikit-web/browse",
     "scripts": {