@rio-cloud/rio-uikit 0.16.2-beta.7 → 0.16.2-beta.9

package/components/clearableInput/ClearableInput.js

@@ -136,7 +136,8 @@ var ClearableInput = /*#__PURE__*/function (_React$Component) {
         value: inputValue,
         onChange: this.handleChange,
         onKeyPress: this.handleKeyPress,
-        ref: inputRef,
+        // ref={this.props.innerRef} is the equivalent of forwardRef
+        ref: inputRef || this.props.innerRef,
         autoComplete: autoComplete
       });
       return /*#__PURE__*/React.createElement("div", {

package/components/datepicker/DatePicker.js

@@ -3,7 +3,7 @@ import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 import _typeof from "@babel/runtime/helpers/typeof";
 var _excluded = ["dropup", "alignRight", "onChange", "className", "mandatory", "dateValidation"];
-import React, { useState } from 'react';
+import React, { useState, forwardRef } from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
 
@@ -14,7 +14,7 @@ var Datetime = RDT["default"] ? RDT["default"] : RDT;
 var isValidDate = function isValidDate(date) {
   return _typeof(date) === 'object';
 };
-var DatePicker = function DatePicker(props) {
+var DatePicker = /*#__PURE__*/forwardRef(function (props, ref) {
   var dropup = props.dropup,
     alignRight = props.alignRight,
     onChange = props.onChange,
@@ -35,11 +35,15 @@ var DatePicker = function DatePicker(props) {
     onChange(date, isValid);
   };
   var classes = classNames('DatePicker', 'form-group', hasError && 'has-error', dropup && 'dropup', alignRight && 'align-right', className && className);
-  return /*#__PURE__*/React.createElement(Datetime, _extends({}, remainingProp, {
+
+  // TODO: add support for setting ref to the input. Maybe add a "inputRef" prop to react-datetime
+  return /*#__PURE__*/React.createElement(Datetime, _extends({
+    ref: ref
+  }, remainingProp, {
     onChange: handleChange,
     className: classes
   }));
-};
+});
 DatePicker.defaultProps = {
   closeOnSelect: true,
   dropup: false,

package/components/map/components/Map.js

@@ -417,7 +417,7 @@ Map.defaultProps = {
   onShowClusterChange: function onShowClusterChange() {},
   onZoomIn: function onZoomIn() {},
   onZoomOut: function onZoomOut() {},
-  useWebGL: false,
+  useWebGL: true,
   darkMode: false
 };
 Map.propTypes = {

package/components/map/components/features/Route.js

@@ -15,7 +15,6 @@ export var MISSING_POSITIONS_EXCEPTION_MSG = 'Route requires a minimum of 1 posi
 export var TO_LESS_LINE_WIDTH_EXCEPTION_MSG = 'If isBorderIncludedInWidth is set to true than width has to be greater than twice of borderWidth';
 var LINE_STROKE_COLOR = 'rgba(48, 194, 255, 1)';
 var LINE_STROKE_COLOR_REDUCED = 'rgba(48, 194, 255, 0.5)';
-var BORDER_STROKE_COLOR = 'rgba(255, 255, 255, 1)';
 var BORDER_STROKE_COLOR_REDUCED = 'rgba(255, 255, 255, 0)';
 var defaultStyle = {
   width: 5,
@@ -25,12 +24,12 @@ var defaultStyle = {
   isBorderIncludedInWidth: false
 };
 var defaultArrowStyle = {
-  lineWidth: 10,
-  fillColor: 'rgba(42, 55, 64, 1)',
-  strokeColor: BORDER_STROKE_COLOR,
-  lineDash: [0, 6],
-  lineTailCap: 'arrow-tail',
-  lineHeadCap: 'arrow-head'
+  // lineWidth: 12,
+  // strokeColor: 'rgba(0, 0, 0, 0.8)',
+  // lineDash: [0, 3],
+  // lineDashOffset: 2,
+  // lineTailCap: 'arrow-tail',
+  // lineHeadCap: 'arrow-head',
 };
 var alternativeRouteStyle = _objectSpread(_objectSpread({}, defaultStyle), {}, {
   color: 'rgb(218,253,255)'

package/components/map/components/features/basics/Polyline.js

@@ -1,4 +1,7 @@
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 /* eslint-disable no-undef */
 import { useState, useEffect, useContext } from 'react';
 import PropTypes from 'prop-types';
@@ -35,15 +38,17 @@ var Polyline = function Polyline(_ref) {
       // Create a patterned polyline:
 
       // Non-legacy version:
-      var arrowLineStyle = new H.map.SpatialStyle({
-        width: 5,
+      var arrowLineStyle = new H.map.SpatialStyle(_objectSpread(_objectSpread({}, arrowStyle), {}, {
         lineWidth: 10,
-        strokeColor: 'rgba(255, 255, 255, 0)'
-      });
+        strokeColor: 'rgba(0, 0, 0, 0.8)',
+        lineDash: [0, 3],
+        lineDashOffset: 1.6,
+        lineTailCap: 'arrow-tail',
+        lineHeadCap: 'arrow-head'
+      }));
       var routeArrows = new H.map.Polyline(geometry, {
         style: arrowLineStyle
       });
-      routeArrows.setArrows(arrowStyle);
 
       // create a group that represents the route line and contains
       // outline and the pattern

package/lib/es/components/clearableInput/ClearableInput.js

@@ -145,7 +145,8 @@ var ClearableInput = /*#__PURE__*/function (_React$Component) {
         value: inputValue,
         onChange: this.handleChange,
         onKeyPress: this.handleKeyPress,
-        ref: inputRef,
+        // ref={this.props.innerRef} is the equivalent of forwardRef
+        ref: inputRef || this.props.innerRef,
         autoComplete: autoComplete
       });
       return /*#__PURE__*/_react["default"].createElement("div", {

package/lib/es/components/datepicker/DatePicker.js

@@ -21,7 +21,7 @@ var Datetime = _reactDatetime["default"]["default"] ? _reactDatetime["default"][
 var isValidDate = function isValidDate(date) {
   return (0, _typeof2["default"])(date) === 'object';
 };
-var DatePicker = function DatePicker(props) {
+var DatePicker = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
   var dropup = props.dropup,
     alignRight = props.alignRight,
     onChange = props.onChange,
@@ -42,11 +42,15 @@ var DatePicker = function DatePicker(props) {
     onChange(date, isValid);
   };
   var classes = (0, _classnames["default"])('DatePicker', 'form-group', hasError && 'has-error', dropup && 'dropup', alignRight && 'align-right', className && className);
-  return /*#__PURE__*/_react["default"].createElement(Datetime, (0, _extends2["default"])({}, remainingProp, {
+
+  // TODO: add support for setting ref to the input. Maybe add a "inputRef" prop to react-datetime
+  return /*#__PURE__*/_react["default"].createElement(Datetime, (0, _extends2["default"])({
+    ref: ref
+  }, remainingProp, {
     onChange: handleChange,
     className: classes
   }));
-};
+});
 DatePicker.defaultProps = {
   closeOnSelect: true,
   dropup: false,

package/lib/es/components/map/components/Map.js

@@ -428,7 +428,7 @@ Map.defaultProps = {
   onShowClusterChange: function onShowClusterChange() {},
   onZoomIn: function onZoomIn() {},
   onZoomOut: function onZoomOut() {},
-  useWebGL: false,
+  useWebGL: true,
   darkMode: false
 };
 Map.propTypes = {

package/lib/es/components/map/components/features/Route.js

@@ -26,7 +26,6 @@ var TO_LESS_LINE_WIDTH_EXCEPTION_MSG = 'If isBorderIncludedInWidth is set to tru
 exports.TO_LESS_LINE_WIDTH_EXCEPTION_MSG = TO_LESS_LINE_WIDTH_EXCEPTION_MSG;
 var LINE_STROKE_COLOR = 'rgba(48, 194, 255, 1)';
 var LINE_STROKE_COLOR_REDUCED = 'rgba(48, 194, 255, 0.5)';
-var BORDER_STROKE_COLOR = 'rgba(255, 255, 255, 1)';
 var BORDER_STROKE_COLOR_REDUCED = 'rgba(255, 255, 255, 0)';
 var defaultStyle = {
   width: 5,
@@ -36,12 +35,12 @@ var defaultStyle = {
   isBorderIncludedInWidth: false
 };
 var defaultArrowStyle = {
-  lineWidth: 10,
-  fillColor: 'rgba(42, 55, 64, 1)',
-  strokeColor: BORDER_STROKE_COLOR,
-  lineDash: [0, 6],
-  lineTailCap: 'arrow-tail',
-  lineHeadCap: 'arrow-head'
+  // lineWidth: 12,
+  // strokeColor: 'rgba(0, 0, 0, 0.8)',
+  // lineDash: [0, 3],
+  // lineDashOffset: 2,
+  // lineTailCap: 'arrow-tail',
+  // lineHeadCap: 'arrow-head',
 };
 var alternativeRouteStyle = _objectSpread(_objectSpread({}, defaultStyle), {}, {
   color: 'rgb(218,253,255)'

package/lib/es/components/map/components/features/basics/Polyline.js

@@ -5,6 +5,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports["default"] = exports.WRONG_GEOMETRY_PROPS_EXCEPTION_MSG = exports.MISSING_GEOMETRY_PROPS_EXCEPTION_MSG = void 0;
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _react = require("react");
 var _propTypes = _interopRequireDefault(require("prop-types"));
@@ -12,8 +13,8 @@ var _context = require("../../context");
 var _MapException = _interopRequireDefault(require("../../../exceptions/MapException"));
 var _hooks = require("../../../utils/hooks");
 var _eventHandling = require("../../../utils/eventHandling");
-/* eslint-disable no-undef */
-
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2["default"])(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 var MISSING_GEOMETRY_PROPS_EXCEPTION_MSG = 'Error in Polyline: Polyline without geometry makes no sense';
 exports.MISSING_GEOMETRY_PROPS_EXCEPTION_MSG = MISSING_GEOMETRY_PROPS_EXCEPTION_MSG;
 var WRONG_GEOMETRY_PROPS_EXCEPTION_MSG = 'Error in Polyline: property geometry must be of type H.geo.LineString';
@@ -45,15 +46,17 @@ var Polyline = function Polyline(_ref) {
       // Create a patterned polyline:
 
       // Non-legacy version:
-      var arrowLineStyle = new H.map.SpatialStyle({
-        width: 5,
+      var arrowLineStyle = new H.map.SpatialStyle(_objectSpread(_objectSpread({}, arrowStyle), {}, {
         lineWidth: 10,
-        strokeColor: 'rgba(255, 255, 255, 0)'
-      });
+        strokeColor: 'rgba(0, 0, 0, 0.8)',
+        lineDash: [0, 3],
+        lineDashOffset: 1.6,
+        lineTailCap: 'arrow-tail',
+        lineHeadCap: 'arrow-head'
+      }));
       var routeArrows = new H.map.Polyline(geometry, {
         style: arrowLineStyle
       });
-      routeArrows.setArrows(arrowStyle);
 
       // create a group that represents the route line and contains
       // outline and the pattern

package/lib/es/utils/colorScheme.js

@@ -60,7 +60,8 @@ var readColorSchemeFromCookie = function readColorSchemeFromCookie() {
 // This should be done by a RIO service like User Profile SPA using a theme switcher component from the uikit
 // where this function is referenced
 var writeColorSchemeToCookie = function writeColorSchemeToCookie(scheme) {
-  var isDevEnv = import.meta.env.DEV;
+  var _window;
+  var isDevEnv = (_window = window) === null || _window === void 0 ? void 0 : _window.location.host.startsWith('localhost');
   var newCookieValues = encodeURIComponent(scheme);
   var cookie = "".concat(COOKIE_NAME, "=").concat(newCookieValues, ";domain=").concat(isDevEnv ? 'localhost' : DOMAIN, ";expires=").concat(EXPIRATION_DATE, ";path=").concat(PATH);
   console.log("writeColorSchemeToCookie: ".concat(cookie));

package/lib/es/version.json

@@ -1,3 +1,3 @@
 {
-    "version": "0.16.2-beta.7"
+    "version": "0.16.2-beta.9"
 }

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@rio-cloud/rio-uikit",
-    "version": "0.16.2-beta.7",
+    "version": "0.16.2-beta.9",
     "description": "The RIO UIKIT component library",
     "repository": "https://collaboration.msi.audi.com/stash/projects/RIOFRONT/repos/uikit-web/browse",
     "scripts": {
@@ -112,7 +112,7 @@
         "@popperjs/core": "2.11.6",
         "classnames": "2.3.2",
         "events": "3.3.0",
-        "framer-motion": "6.5.1",
+        "framer-motion": "4.1.17",
         "lodash": "4.17.21",
         "moment": "2.29.4",
         "natural-orderby": "2.0.3",

package/utils/colorScheme.js

@@ -46,7 +46,8 @@ var readColorSchemeFromCookie = function readColorSchemeFromCookie() {
 // This should be done by a RIO service like User Profile SPA using a theme switcher component from the uikit
 // where this function is referenced
 var writeColorSchemeToCookie = function writeColorSchemeToCookie(scheme) {
-  var isDevEnv = import.meta.env.DEV;
+  var _window;
+  var isDevEnv = (_window = window) === null || _window === void 0 ? void 0 : _window.location.host.startsWith('localhost');
   var newCookieValues = encodeURIComponent(scheme);
   var cookie = "".concat(COOKIE_NAME, "=").concat(newCookieValues, ";domain=").concat(isDevEnv ? 'localhost' : DOMAIN, ";expires=").concat(EXPIRATION_DATE, ";path=").concat(PATH);
   console.log("writeColorSchemeToCookie: ".concat(cookie));

package/version.json

@@ -1,3 +1,3 @@
 {
-    "version": "0.16.2-beta.7"
+    "version": "0.16.2-beta.9"
 }