@janiscommerce/ui-web 0.29.0 → 0.30.0

package/CHANGELOG.md

@@ -7,6 +7,22 @@ and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.
 
 ## [Unreleased]
 
+<<<<<<< HEAD
+## [0.30.0] - 2025-03-06
+=======
+## [0.30.0] - 2025-02-26
+>>>>>>> 91ba7c2d8e55838f6f56bc165ea011472e05dc62
+
+### Added
+
+- Options prop to map
+
+## [0.29.1] - 2025-02-26
+
+### Fixed
+
+- Center of map component
+
 ## [0.29.0] - 2025-02-21
 
 ### Removed

package/dist/index.esm.js

@@ -7066,7 +7066,7 @@ if (DESCRIPTORS$1 && !FUNCTION_NAME_EXISTS) {
   });
 }
 
-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,
@@ -7077,7 +7077,7 @@ var Icon = function Icon(_ref) {
       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],
@@ -7165,7 +7165,7 @@ var styled$d = {
   })(["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,
@@ -7180,7 +7180,7 @@ var Chip = function Chip(_ref) {
       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.createElement(styled$d.Chip, _extends$1({
@@ -7485,7 +7485,7 @@ var styled$b = {
   })
 };
 
-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,
@@ -7499,7 +7499,7 @@ var Button = function Button(_ref) {
       styles = _ref.styles,
       variant = _ref.variant,
       disabled = _ref.disabled,
-      props = _objectWithoutProperties(_ref, _excluded$7);
+      props = _objectWithoutProperties(_ref, _excluded$8);
 
   return /*#__PURE__*/React__default.createElement(styled$b.Button, _extends$1({
     color: color,
@@ -7548,7 +7548,7 @@ var styled$a = {
   })
 };
 
-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,
@@ -7558,7 +7558,7 @@ var Checkbox = function Checkbox(_ref) {
       rounded = _ref.rounded,
       styles = _ref.styles,
       value = _ref.value,
-      props = _objectWithoutProperties(_ref, _excluded$6);
+      props = _objectWithoutProperties(_ref, _excluded$7);
 
   var _useState = useState(!!value || defaultChecked),
       _useState2 = _slicedToArray(_useState, 2),
@@ -7674,7 +7674,7 @@ var styled$8 = {
   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,
@@ -7684,7 +7684,7 @@ var Switch = function Switch(_ref) {
       name = _ref.name,
       onChange = _ref.onChange,
       value = _ref.value,
-      props = _objectWithoutProperties(_ref, _excluded$5);
+      props = _objectWithoutProperties(_ref, _excluded$6);
 
   var _useState = useState(!!value || defaultChecked),
       _useState2 = _slicedToArray(_useState, 2),
@@ -7856,7 +7856,7 @@ var styled$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);
@@ -7952,7 +7952,7 @@ var Input = /*#__PURE__*/function (_PureComponent) {
           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();
@@ -8065,7 +8065,7 @@ var styled$6 = {
   })(["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);
@@ -8167,7 +8167,7 @@ var Textarea = /*#__PURE__*/function (_PureComponent) {
           _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.createElement(styled$6.Container, {
@@ -9696,14 +9696,14 @@ var styled$2 = {
   })(["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.createElement(styled$2.StyledIcon, {
@@ -9827,7 +9827,7 @@ var styled$1 = {
   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,
@@ -9837,7 +9837,7 @@ var Drawer = function Drawer(_ref) {
       fullScreen = _ref.fullScreen,
       closeOnClickAway = _ref.closeOnClickAway,
       children = _ref.children,
-      props = _objectWithoutProperties(_ref, _excluded$1);
+      props = _objectWithoutProperties(_ref, _excluded$2);
 
   var drawerRef = useRef(null);
   return /*#__PURE__*/React__default.createElement(ClickAwayListener, {
@@ -16068,7 +16068,7 @@ var MarkersDrawer = function MarkersDrawer(_ref) {
   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,
@@ -16985,10 +16985,7 @@ var getBoundsFromMarkers = (function () {
 
 var getCenterByGeolocationOrCenter = (function () {
   var center = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
-  if (validateCoordinates(center)) return {
-    lat: center.lat,
-    lng: center.lng
-  };
+  if (validateCoordinates(center)) return center;
   return getGeolocationCoordinates();
 });
 
@@ -17014,6 +17011,10 @@ var getGeolocationCoordinates = (function () {
 });
 
 var LIBRARIES = ['geometry', 'drawing', 'places'];
+var DEFAULT_CENTER = {
+  lat: 0,
+  lng: 0
+};
 var INITIAL_CONTROLS_POSITION = {
   zoom: 13,
   fullScreen: 0
@@ -17038,36 +17039,38 @@ var MAP_FEATURE_TYPES = {
   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;
@@ -17108,20 +17111,34 @@ handlePrototype(DOMTokenListPrototype);
 /**
  * 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)]
@@ -35332,7 +35349,7 @@ var styled = {
   })(["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;
@@ -35353,7 +35370,7 @@ var SearchBox = function SearchBox(_ref) {
 
             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(),
@@ -35382,12 +35399,16 @@ var SearchBox = function SearchBox(_ref) {
     onPlacesChanged: onPlacesChanged,
     onLoad: onLoad
   }, /*#__PURE__*/React__default.createElement(styled.SearchBoxWrapper, null, /*#__PURE__*/React__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,
@@ -35395,21 +35416,18 @@ var Map$1 = function Map(_ref) {
       _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,
@@ -35425,13 +35443,6 @@ var Map$1 = function Map(_ref) {
       setControlsPositions = _useState2[1];
 
   var validMarkersExist = Array.isArray(markers) && markers.length;
-  var defaultMapCenter = {
-    center: {
-      lat: 0,
-      lng: 0
-    },
-    zoom: zoom
-  };
 
   var handlePositions = function handlePositions(key, value) {
     setControlsPositions(function (prev) {
@@ -35439,37 +35450,46 @@ var Map$1 = function Map(_ref) {
     });
   };
 
-  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 = useCallback(function (map) {
     if (!map) return;
     mapRef.current = map;
-    map.setOptions({
+    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)) return map.setCenter(getCenterByGeolocationOrCenter(center));
-    map.fitBounds(getBoundsFromMarkers(markers));
+    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);
-  }, []);
-  return isLoaded ? /*#__PURE__*/React__default.createElement(GoogleMap, _extends$1({
+  }, [center, markers, options, zoom]);
+  if (!isLoaded) return null;
+  return /*#__PURE__*/React__default.createElement(GoogleMap, _extends$1({
     className: "google-map-component",
     onLoad: onLoad,
     mapContainerStyle: {
       height: height,
       width: width
     },
-    options: mapOptions
-  }, defaultMapCenter), /*#__PURE__*/React__default.createElement(React__default.Fragment, null, showSearchBar && /*#__PURE__*/React__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.createElement(SearchBox, {
+    updateMarker: updateMarker,
     className: "google-map-component__search-box"
   }), validMarkersExist && /*#__PURE__*/React__default.createElement(MarkersDrawer, {
     markers: markers,
-    readOnly: readOnly,
+    readOnly: mapOptions.readOnly,
     callbackOnSuccessDirections: callbackOnSuccessDirections,
     callbackOnErrorDirections: callbackOnErrorDirections,
     googleMapsApiKey: googleMapsApiKey
-  }))) : /*#__PURE__*/React__default.createElement(React__default.Fragment, null);
+  }));
 };
 
 export { Avatar, AvatarGroup$1 as AvatarGroup, Button, Checkbox, Chip, ClickAwayListener, Color, ColorPicker, Drawer, ErrorBoundary, HTML, Icon, Image, Input, Link, Map$1 as Map, QRCode, Skeleton, Switch, Textarea, icons, palette };