@rio-cloud/rio-uikit 0.16.1-beta-2 → 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/bottomSheet/BottomSheet.js

@@ -19,7 +19,7 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 
 var _classnames = _interopRequireDefault(require("classnames"));
 
-var _reactMotion = require("react-motion");
+var _framerMotion = require("framer-motion");
 
 var _isFunction = _interopRequireDefault(require("lodash/fp/isFunction"));
 
@@ -29,6 +29,8 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "functio
 
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 
+var OFFSET_POSITION = -1000;
+
 var BottomSheet = function BottomSheet(props) {
   var show = props.show,
       onClose = props.onClose,
@@ -79,55 +81,46 @@ var BottomSheet = function BottomSheet(props) {
   var sheetClasses = (0, _classnames.default)('bottom-sheet', 'position-fixed left-0', !width && 'width-100pct', !height && !isMaxHeight && 'height-auto', 'bg-white', 'shadow-hard', detatch ? 'margin-15 rounded' : 'rounded-top-left rounded-top-right', className && className);
   var sheetBodyCasses = (0, _classnames.default)('bottom-sheet-body', 'height-100pct', bodyClassName && bodyClassName);
   var sheetHeight = isMaxHeight ? window.innerHeight : height;
-  var motionStyles = {}; // Animate the bottom position
-
-  motionStyles.bottom = (0, _reactMotion.spring)(isShown ? 0 : -1000, {
-    stiffness: 210,
-    damping: 25
-  }); // Animate the max height if a height value is given via prop
-
-  if (height) {
-    motionStyles.height = (0, _reactMotion.spring)(sheetHeight, {
-      stiffness: isMaxHeight ? 210 : 180,
-      damping: isMaxHeight ? 26 : 15
-    });
-  }
-
-  return /*#__PURE__*/_reactDom.default.createPortal( /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_reactMotion.Motion, {
-    defaultStyle: {
-      bottom: -1000,
-      height: height
+  return /*#__PURE__*/_reactDom.default.createPortal( /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_framerMotion.motion.div, {
+    className: sheetClasses,
+    width: width,
+    initial: {
+      opacity: 0
+    },
+    animate: {
+      opacity: 1,
+      y: 0,
+      bottom: isShown ? 0 : OFFSET_POSITION,
+      height: sheetHeight
     },
-    style: motionStyles
-  }, function (style) {
-    return /*#__PURE__*/_react.default.createElement("div", {
-      className: sheetClasses,
-      width: width,
-      style: {
-        bottom: style.bottom,
-        height: style.height
-      }
-    }, /*#__PURE__*/_react.default.createElement("div", null, title && /*#__PURE__*/_react.default.createElement("div", {
-      className: 'bottom-sheet-title display-flex justify-content-between padding-15 ' + 'border border-top-none border-left-none border-right-none border-color-lighter'
-    }, /*#__PURE__*/_react.default.createElement("div", {
-      className: "text-size-18"
-    }, title)), showCloseButton && /*#__PURE__*/_react.default.createElement("div", {
-      className: "bottom-sheet-close position-absolute top-10 right-10"
-    }, /*#__PURE__*/_react.default.createElement("button", {
-      className: "btn btn-muted btn-sm btn-icon-only",
-      onClick: handleToggle
-    }, /*#__PURE__*/_react.default.createElement("span", {
-      className: "rioglyph rioglyph-remove"
-    }))), showMaximizeButton && /*#__PURE__*/_react.default.createElement("div", {
-      className: 'bottom-sheet-maximize height-30 ' + 'position-absolute top-5 left-50pct translate-x-50 cursor-pointer',
-      onClick: handleMaximize
-    }, /*#__PURE__*/_react.default.createElement("div", {
-      className: "height-5 width-40 rounded bg-lighter"
-    }))), /*#__PURE__*/_react.default.createElement("div", {
-      className: sheetBodyCasses,
-      ref: bodyRef
-    }, children));
-  }), useBackdrop && isShown && /*#__PURE__*/_react.default.createElement("div", {
+    exit: {
+      opacity: 0,
+      transition: {
+        duration: 0.3
+      },
+      bottom: OFFSET_POSITION,
+      height: sheetHeight
+    }
+  }, /*#__PURE__*/_react.default.createElement("div", null, title && /*#__PURE__*/_react.default.createElement("div", {
+    className: 'bottom-sheet-title display-flex justify-content-between padding-15 ' + 'border border-top-none border-left-none border-right-none border-color-lighter'
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: "text-size-18"
+  }, title)), showCloseButton && /*#__PURE__*/_react.default.createElement("div", {
+    className: "bottom-sheet-close position-absolute top-10 right-10"
+  }, /*#__PURE__*/_react.default.createElement("button", {
+    className: "btn btn-muted btn-sm btn-icon-only",
+    onClick: handleToggle
+  }, /*#__PURE__*/_react.default.createElement("span", {
+    className: "rioglyph rioglyph-remove"
+  }))), showMaximizeButton && /*#__PURE__*/_react.default.createElement("div", {
+    className: 'bottom-sheet-maximize height-30 ' + 'position-absolute top-5 left-50pct translate-x-50 cursor-pointer',
+    onClick: handleMaximize
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: "height-5 width-40 rounded bg-lighter"
+  }))), /*#__PURE__*/_react.default.createElement("div", {
+    className: sheetBodyCasses,
+    ref: bodyRef
+  }, children)), useBackdrop && isShown && /*#__PURE__*/_react.default.createElement("div", {
     className: "bottom-sheet-backdrop",
     onClick: handleToggle
   })), modalRoot);

package/lib/components/datepicker/DatePicker.js

@@ -71,7 +71,6 @@ var DatePicker = function DatePicker(props) {
 DatePicker.defaultProps = {
   closeOnSelect: true,
   dropup: false,
-  defaultValue: (0, _moment.default)(),
   locale: 'en-GB',
   onChange: function onChange() {},
   clearableInput: false,
@@ -82,7 +81,7 @@ DatePicker.propTypes = {
   className: _propTypes.default.string,
   closeOnSelect: _propTypes.default.bool,
   clearableInput: _propTypes.default.bool,
-  defaultValue: _propTypes.default.object,
+  initialValue: _propTypes.default.object,
   locale: _propTypes.default.string,
   onChange: _propTypes.default.func,
   dropup: _propTypes.default.bool,

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/types.ts

@@ -498,6 +498,7 @@ export interface DatePickerProps extends DatetimepickerProps {
     alignRight?: boolean;
     locale?: string;
     closeOnSelect?: boolean;
+    initialValue?: Date | Moment;
     value?: Date | string | Moment;
     dateFormat?: string | boolean;
     timeFormat?: string | boolean;

package/lib/version.json

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

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@rio-cloud/rio-uikit",
-    "version": "0.16.1-beta-2",
+    "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": {
@@ -130,6 +130,7 @@
         "classlist-polyfill": "1.2.0",
         "classnames": "2.3.1",
         "cssuseragent": "2.1.31",
+        "framer-motion": "^6.3.3",
         "lodash": "4.17.21",
         "moment": "2.29.3",
         "natural-orderby": "2.0.3",
@@ -140,7 +141,6 @@
         "react-debounce-input": "3.2.5",
         "react-dropzone": "14.2.0",
         "react-input-mask": "3.0.0-alpha.2",
-        "react-motion": "0.5.2",
         "react-notifications": "1.7.3",
         "react-onclickoutside": "6.12.1",
         "react-popper": "2.3.0",