@janiscommerce/ui-web 0.29.1 → 0.30.0

package/dist/index.umd.js

@@ -7092,7 +7092,7 @@
     });
   }
 
-  var _excluded$9 = ["color", "name", "size", "styles", "pathStyles", "width", "height", "viewBox"];
+  var _excluded$a = ["color", "name", "size", "styles", "pathStyles", "width", "height", "viewBox"];
 
   var Icon = function Icon(_ref) {
     var color = _ref.color,
@@ -7103,7 +7103,7 @@
         width = _ref.width,
         height = _ref.height,
         viewBox = _ref.viewBox,
-        props = _objectWithoutProperties(_ref, _excluded$9);
+        props = _objectWithoutProperties(_ref, _excluded$a);
 
     if (!icons[name]) return null;
     var _icons$name = icons[name],
@@ -7191,7 +7191,7 @@
     })(["text-overflow:ellipsis;overflow:hidden;"])
   };
 
-  var _excluded$8 = ["backgroundColor", "borderColor", "children", "disabled", "icon", "iconColor", "onClick", "onDelete", "selected", "textColor", "variant", "hasLink"];
+  var _excluded$9 = ["backgroundColor", "borderColor", "children", "disabled", "icon", "iconColor", "onClick", "onDelete", "selected", "textColor", "variant", "hasLink"];
 
   var Chip = function Chip(_ref) {
     var backgroundColor = _ref.backgroundColor,
@@ -7206,7 +7206,7 @@
         textColor = _ref.textColor,
         variant = _ref.variant,
         hasLink = _ref.hasLink,
-        props = _objectWithoutProperties(_ref, _excluded$8);
+        props = _objectWithoutProperties(_ref, _excluded$9);
 
     if (!children && !icon) return null;
     return /*#__PURE__*/React__default["default"].createElement(styled$d.Chip, _extends$1({
@@ -7511,7 +7511,7 @@
     })
   };
 
-  var _excluded$7 = ["children", "color", "hideLabel", "icon", "iconColor", "iconSize", "fontColor", "rounded", "styles", "variant", "disabled"];
+  var _excluded$8 = ["children", "color", "hideLabel", "icon", "iconColor", "iconSize", "fontColor", "rounded", "styles", "variant", "disabled"];
 
   var Button = function Button(_ref) {
     var children = _ref.children,
@@ -7525,7 +7525,7 @@
         styles = _ref.styles,
         variant = _ref.variant,
         disabled = _ref.disabled,
-        props = _objectWithoutProperties(_ref, _excluded$7);
+        props = _objectWithoutProperties(_ref, _excluded$8);
 
     return /*#__PURE__*/React__default["default"].createElement(styled$b.Button, _extends$1({
       color: color,
@@ -7574,7 +7574,7 @@
     })
   };
 
-  var _excluded$6 = ["autoComplete", "disabled", "defaultChecked", "onChange", "rounded", "styles", "value"];
+  var _excluded$7 = ["autoComplete", "disabled", "defaultChecked", "onChange", "rounded", "styles", "value"];
 
   var Checkbox = function Checkbox(_ref) {
     var autoComplete = _ref.autoComplete,
@@ -7584,7 +7584,7 @@
         rounded = _ref.rounded,
         styles = _ref.styles,
         value = _ref.value,
-        props = _objectWithoutProperties(_ref, _excluded$6);
+        props = _objectWithoutProperties(_ref, _excluded$7);
 
     var _useState = React.useState(!!value || defaultChecked),
         _useState2 = _slicedToArray(_useState, 2),
@@ -7700,7 +7700,7 @@
     iconCheckStyles: iconCheckStyles
   };
 
-  var _excluded$5 = ["autoComplete", "defaultChecked", "disabled", "id", "name", "onChange", "value"];
+  var _excluded$6 = ["autoComplete", "defaultChecked", "disabled", "id", "name", "onChange", "value"];
 
   var Switch = function Switch(_ref) {
     var autoComplete = _ref.autoComplete,
@@ -7710,7 +7710,7 @@
         name = _ref.name,
         onChange = _ref.onChange,
         value = _ref.value,
-        props = _objectWithoutProperties(_ref, _excluded$5);
+        props = _objectWithoutProperties(_ref, _excluded$6);
 
     var _useState = React.useState(!!value || defaultChecked),
         _useState2 = _slicedToArray(_useState, 2),
@@ -7882,7 +7882,7 @@
     })(["position:absolute;flex-shrink:0;flex-grow:0;margin-right:8px;height:100%;"])
   };
 
-  var _excluded$4 = ["icon", "error", "disabled", "placeholder", "errorMessage", "autoComplete", "hasFloatingLabel", "value", "isTranslateActive", "defaultValue"];
+  var _excluded$5 = ["icon", "error", "disabled", "placeholder", "errorMessage", "autoComplete", "hasFloatingLabel", "value", "isTranslateActive", "defaultValue"];
 
   var Input = /*#__PURE__*/function (_PureComponent) {
     _inherits$2(Input, _PureComponent);
@@ -7978,7 +7978,7 @@
             value = _this$props$value === void 0 ? stateValue : _this$props$value,
             isTranslateActive = _this$props.isTranslateActive;
             _this$props.defaultValue;
-            var props = _objectWithoutProperties(_this$props, _excluded$4);
+            var props = _objectWithoutProperties(_this$props, _excluded$5);
 
         var autoCompleteOff = props.type === 'password' ? 'new-password' : 'off';
         var isFloating = isFocused || !!value.toString();
@@ -8091,7 +8091,7 @@
     })(["color:", ";font-size:12px;line-height:14px;display:block;word-break:break-word;"], palette.statusRed)
   };
 
-  var _excluded$3 = ["label", "error", "disabled", "placeholder", "autoComplete", "errorMessage", "hasFloatingLabel", "isTranslateActive", "value", "defaultValue"];
+  var _excluded$4 = ["label", "error", "disabled", "placeholder", "autoComplete", "errorMessage", "hasFloatingLabel", "isTranslateActive", "value", "defaultValue"];
 
   var Textarea = /*#__PURE__*/function (_PureComponent) {
     _inherits$2(Textarea, _PureComponent);
@@ -8193,7 +8193,7 @@
             _this$props$value = _this$props.value,
             value = _this$props$value === void 0 ? stateValue : _this$props$value;
             _this$props.defaultValue;
-            var props = _objectWithoutProperties(_this$props, _excluded$3);
+            var props = _objectWithoutProperties(_this$props, _excluded$4);
 
         var isFloating = isFocused || !!value;
         return /*#__PURE__*/React__default["default"].createElement(styled$6.Container, {
@@ -9722,14 +9722,14 @@
     })(["margin-right:8px;"])
   };
 
-  var _excluded$2 = ["href", "children", "target", "icon"];
+  var _excluded$3 = ["href", "children", "target", "icon"];
 
   var Link = function Link(_ref) {
     var href = _ref.href,
         children = _ref.children,
         target = _ref.target,
         icon = _ref.icon,
-        props = _objectWithoutProperties(_ref, _excluded$2);
+        props = _objectWithoutProperties(_ref, _excluded$3);
 
     var renderIcon = function renderIcon() {
       return icon ? /*#__PURE__*/React__default["default"].createElement(styled$2.StyledIcon, {
@@ -9853,7 +9853,7 @@
     Overlay: Overlay
   };
 
-  var _excluded$1 = ["open", "position", "handleClose", "transitionDuration", "fullScreen", "closeOnClickAway", "children"];
+  var _excluded$2 = ["open", "position", "handleClose", "transitionDuration", "fullScreen", "closeOnClickAway", "children"];
 
   var Drawer = function Drawer(_ref) {
     var open = _ref.open,
@@ -9863,7 +9863,7 @@
         fullScreen = _ref.fullScreen,
         closeOnClickAway = _ref.closeOnClickAway,
         children = _ref.children,
-        props = _objectWithoutProperties(_ref, _excluded$1);
+        props = _objectWithoutProperties(_ref, _excluded$2);
 
     var drawerRef = React.useRef(null);
     return /*#__PURE__*/React__default["default"].createElement(ClickAwayListener, {
@@ -16094,7 +16094,7 @@
     var _ref$markers = _ref.markers,
         markers = _ref$markers === void 0 ? [] : _ref$markers,
         _ref$readOnly = _ref.readOnly,
-        readOnly = _ref$readOnly === void 0 ? false : _ref$readOnly,
+        readOnly = _ref$readOnly === void 0 ? true : _ref$readOnly,
         _ref$setMarker = _ref.setMarker,
         setMarker = _ref$setMarker === void 0 ? function () {} : _ref$setMarker,
         _ref$callbackOnSucces = _ref.callbackOnSuccessDirections,
@@ -17037,6 +17037,10 @@
   });
 
   var LIBRARIES = ['geometry', 'drawing', 'places'];
+  var DEFAULT_CENTER = {
+    lat: 0,
+    lng: 0
+  };
   var INITIAL_CONTROLS_POSITION = {
     zoom: 13,
     fullScreen: 0
@@ -17061,36 +17065,38 @@
     water: 'water',
     _default: 'poi'
   };
+  var DEFAULT_MAP_OPTIONS = {
+    mapTypeControl: false,
+    streetViewControl: false,
+    zoomControl: true,
+    clickableIcons: false
+  };
 
   /**
    * Parses configuration for map styles and controls based on the provided options.
    * @param {boolean} showPOI Determines whether Points of Interest (POI) should be displayed on the map.
+   * @param {Object} options An object specifying the options to control map display
    * @param {Object} controlsPositions An object specifying the positions of map controls.
    * @param {number} controlsPositions.zoom The position of the zoom control on the map.
    * @param {number} controlsPositions.fullScreen The position of the fullscreen control on the map.
    * @returns {Object} An object containing the parsed map options, including styles and control settings.
    */
 
-  var getMapOptions = (function () {
-    var showPOI = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : false;
+  var getMapOptions = (function (options) {
     var controlsPositions = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
     var poi = MAP_FEATURE_TYPES.poi,
         transit = MAP_FEATURE_TYPES.transit;
-    var hideFeaturesRules = !showPOI && [poi, transit];
-    var mapStyleOptions = getMapStylers(hideFeaturesRules);
-    return {
-      mapTypeControl: false,
-      streetViewControl: false,
-      zoomControl: true,
+    var hideFeaturesRules = !options.showPOI ? [poi, transit] : [];
+    var mapStyleOptions = getMapStylers(hideFeaturesRules, options.poiRules);
+    return _objectSpread2(_objectSpread2(_objectSpread2({}, DEFAULT_MAP_OPTIONS), options), {}, {
       zoomControlOptions: {
         position: controlsPositions.zoom
       },
       fullscreenControlOptions: {
         position: controlsPositions.fullScreen
       },
-      clickableIcons: false,
       styles: mapStyleOptions
-    };
+    });
   });
 
   var $forEach = arrayIteration.forEach;
@@ -17131,20 +17137,34 @@
   /**
    * Returns the list of stylers based on the provided rules.
    * @param {Array} rules	Array of rules
+   * @param {Array} poiRules	Array of poiRules
    * @returns Returns the list of stylers
    */
 
   var getMapStylers = (function () {
     var rules = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
+    var poiRules = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : [];
     var styleRules = [];
     var allRules = Array.isArray(rules) ? rules : [rules];
+    var _MAP_STYLERS$_default = MAP_STYLERS._default,
+        styler = _MAP_STYLERS$_default.styler,
+        value = _MAP_STYLERS$_default.value;
     allRules.forEach(function (rule) {
-      var featureType = MAP_FEATURE_TYPES[rule] || MAP_FEATURE_TYPES._default; // eslint-disable-line no-underscore-dangle
-
-      var _MAP_STYLERS$_default = MAP_STYLERS._default,
-          styler = _MAP_STYLERS$_default.styler,
-          value = _MAP_STYLERS$_default.value; // eslint-disable-line no-underscore-dangle
+      var featureType = MAP_FEATURE_TYPES[rule] || MAP_FEATURE_TYPES._default;
+
+      if (rule === 'route') {
+        styleRules.push({
+          featureType: 'all',
+          stylers: [{
+            visibility: 'on'
+          }, {
+            weight: 3
+          }]
+        });
+        return;
+      }
 
+      styleRules.push.apply(styleRules, _toConsumableArray(poiRules));
       var ruleObj = {
         featureType: featureType,
         stylers: [_defineProperty({}, styler, value)]
@@ -35355,7 +35375,7 @@
     })(["z-index:0;position:relative;right:0px;top:0px;background:", ";margin:10px;padding:4px 8px 6px;border-radius:2px;width:auto;box-shadow:rgba(0,0,0,0.3) 0px 1px 4px -1px;"], palette.white)
   };
 
-  var _excluded = ["formattedAddress"];
+  var _excluded$1 = ["formattedAddress"];
 
   var SearchBox = function SearchBox(_ref) {
     var updateMarker = _ref.updateMarker;
@@ -35376,7 +35396,7 @@
 
               case 4:
                 addressData = _context.sent;
-                formattedAddress = addressData.formattedAddress, addressComponents = _objectWithoutProperties(addressData, _excluded);
+                formattedAddress = addressData.formattedAddress, addressComponents = _objectWithoutProperties(addressData, _excluded$1);
                 if (updateMarker) updateMarker({
                   lat: newLat(),
                   lng: newLng(),
@@ -35405,12 +35425,16 @@
       onPlacesChanged: onPlacesChanged,
       onLoad: onLoad
     }, /*#__PURE__*/React__default["default"].createElement(styled.SearchBoxWrapper, null, /*#__PURE__*/React__default["default"].createElement(Input, {
-      placeholder: "search",
+      placeholder: "Search",
       hasFloatingLabel: false
     })));
   };
 
+  var _excluded = ["googleMapsApiKey", "width", "height", "center", "zoom", "markers", "options", "callbackOnSuccessDirections", "callbackOnErrorDirections"];
+
   var Map$1 = function Map(_ref) {
+    var _mapRef$current;
+
     var _ref$googleMapsApiKey = _ref.googleMapsApiKey,
         googleMapsApiKey = _ref$googleMapsApiKey === void 0 ? '' : _ref$googleMapsApiKey,
         _ref$width = _ref.width,
@@ -35418,21 +35442,18 @@
         _ref$height = _ref.height,
         height = _ref$height === void 0 ? '400px' : _ref$height,
         _ref$center = _ref.center,
-        center = _ref$center === void 0 ? {} : _ref$center,
+        center = _ref$center === void 0 ? DEFAULT_CENTER : _ref$center,
         _ref$zoom = _ref.zoom,
         zoom = _ref$zoom === void 0 ? 13 : _ref$zoom,
         _ref$markers = _ref.markers,
         markers = _ref$markers === void 0 ? [] : _ref$markers,
-        _ref$showSearchBar = _ref.showSearchBar,
-        showSearchBar = _ref$showSearchBar === void 0 ? false : _ref$showSearchBar,
-        _ref$readOnly = _ref.readOnly,
-        readOnly = _ref$readOnly === void 0 ? true : _ref$readOnly,
-        _ref$showPOI = _ref.showPOI,
-        showPOI = _ref$showPOI === void 0 ? false : _ref$showPOI,
+        _ref$options = _ref.options,
+        options = _ref$options === void 0 ? {} : _ref$options,
         _ref$callbackOnSucces = _ref.callbackOnSuccessDirections,
         callbackOnSuccessDirections = _ref$callbackOnSucces === void 0 ? function () {} : _ref$callbackOnSucces,
         _ref$callbackOnErrorD = _ref.callbackOnErrorDirections,
-        callbackOnErrorDirections = _ref$callbackOnErrorD === void 0 ? function () {} : _ref$callbackOnErrorD;
+        callbackOnErrorDirections = _ref$callbackOnErrorD === void 0 ? function () {} : _ref$callbackOnErrorD,
+        props = _objectWithoutProperties(_ref, _excluded);
 
     var _useJsApiLoader = useJsApiLoader({
       googleMapsApiKey: googleMapsApiKey,
@@ -35448,10 +35469,6 @@
         setControlsPositions = _useState2[1];
 
     var validMarkersExist = Array.isArray(markers) && markers.length;
-    var defaultMapCenter = {
-      lat: 0,
-      lng: 0
-    };
 
     var handlePositions = function handlePositions(key, value) {
       setControlsPositions(function (prev) {
@@ -35459,38 +35476,46 @@
       });
     };
 
-    var mapOptions = getMapOptions(showPOI, controlsPositions);
+    var mapOptions = getMapOptions(options, controlsPositions);
+
+    var updateMarker = function updateMarker(newCenter) {
+      if (!mapRef.current) return;
+      mapRef.current.panTo(newCenter);
+    };
+
     var onLoad = React.useCallback(function (map) {
       if (!map) return;
       mapRef.current = map;
       mapRef.current.setOptions({
         gestureHandling: 'greedy'
       });
-      var fullScreenPos = showSearchBar ? 'RIGHT_BOTTOM' : 'RIGHT_TOP';
+      var fullScreenPos = mapOptions.showSearchBar ? 'RIGHT_BOTTOM' : 'RIGHT_TOP';
       handlePositions('fullScreen', window.google.maps.ControlPosition[fullScreenPos]);
       handlePositions('zoom', window.google.maps.ControlPosition.RIGHT_BOTTOM);
-      if (!(markers !== null && markers !== void 0 && markers.length)) mapRef.current.setCenter(getCenterByGeolocationOrCenter(center || defaultMapCenter));
+      if (!(markers !== null && markers !== void 0 && markers.length)) mapRef.current.setCenter(getCenterByGeolocationOrCenter(center || DEFAULT_CENTER));
       if (markers !== null && markers !== void 0 && markers.length) mapRef.current.fitBounds(getBoundsFromMarkers(markers));
       mapRef.current.setZoom(zoom);
-    }, []);
+    }, [center, markers, options, zoom]);
     if (!isLoaded) return null;
-    return /*#__PURE__*/React__default["default"].createElement(GoogleMap, {
+    return /*#__PURE__*/React__default["default"].createElement(GoogleMap, _extends$1({
       className: "google-map-component",
       onLoad: onLoad,
       mapContainerStyle: {
         height: height,
         width: width
       },
-      options: mapOptions
-    }, /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, showSearchBar && /*#__PURE__*/React__default["default"].createElement(SearchBox, {
+      options: mapOptions,
+      center: (_mapRef$current = mapRef.current) === null || _mapRef$current === void 0 ? void 0 : _mapRef$current.center
+    }, props), mapOptions.showSearchBar && /*#__PURE__*/React__default["default"].createElement(SearchBox, {
+      updateMarker: updateMarker,
       className: "google-map-component__search-box"
     }), validMarkersExist && /*#__PURE__*/React__default["default"].createElement(MarkersDrawer, {
       markers: markers,
-      readOnly: readOnly,
+      readOnly: mapOptions.readOnly,
       callbackOnSuccessDirections: callbackOnSuccessDirections,
       callbackOnErrorDirections: callbackOnErrorDirections,
       googleMapsApiKey: googleMapsApiKey
-    })));
+    }));
   };
 
   exports.Avatar = Avatar;