@janiscommerce/ui-web 0.30.0 → 0.32.0

package/CHANGELOG.md

@@ -7,11 +7,20 @@ and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.
 
 ## [Unreleased]
 
-<<<<<<< HEAD
+## [0.32.0] - 2025-04-03
+
+### Added
+
+- markerOptions in map component
+
+## [0.31.0] - 2025-03-14
+
+### Added
+
+- Full loader component
+- Spinner loader component
+
 ## [0.30.0] - 2025-03-06
-=======
-## [0.30.0] - 2025-02-26
->>>>>>> 91ba7c2d8e55838f6f56bc165ea011472e05dc62
 
 ### Added
 

package/dist/index.esm.js

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import React__default, { useState, useEffect, useRef, PureComponent, useMemo, useCallback, useLayoutEffect, createContext } from 'react';
-import styled$g, { css } from 'styled-components';
+import styled$g, { css, keyframes } from 'styled-components';
 import * as ReactDOM from 'react-dom';
 import ReactDOM__default from 'react-dom';
 
@@ -5621,7 +5621,7 @@ $$7({ target: 'Object', stat: true, forced: FAILS_ON_PRIMITIVES }, {
 });
 
 var _templateObject$4;
-var styles = {
+var styles$2 = {
   Svg: styled$g.svg.withConfig({
     displayName: "styles__Svg",
     componentId: "sc-jf3e5i-0"
@@ -5645,7 +5645,7 @@ var styles = {
   Item: styled$g.div.withConfig({
     displayName: "styles__Item",
     componentId: "sc-jf3e5i-3"
-  })(["padding:5px;border:1px dashed #ccc;cursor:default;display:grid;justify-items:center;justify-content:center;grid-row-gap:5px;", ";& ", "{", ";}&:hover{color:", ";}&:hover ", "{fill:", ";}"], mixins.transition('color'), styles.Svg, mixins.transition('fill'), palette.blue, styles.Svg, palette.blue),
+  })(["padding:5px;border:1px dashed #ccc;cursor:default;display:grid;justify-items:center;justify-content:center;grid-row-gap:5px;", ";& ", "{", ";}&:hover{color:", ";}&:hover ", "{fill:", ";}"], mixins.transition('color'), styles$2.Svg, mixins.transition('fill'), palette.blue, styles$2.Svg, palette.blue),
   SearchInput: styled$g.input.withConfig({
     displayName: "styles__SearchInput",
     componentId: "sc-jf3e5i-4"
@@ -7072,7 +7072,7 @@ var Icon = function Icon(_ref) {
   var color = _ref.color,
       name = _ref.name,
       sizeProp = _ref.size,
-      styles$1 = _ref.styles,
+      styles = _ref.styles,
       pathStyles = _ref.pathStyles,
       width = _ref.width,
       height = _ref.height,
@@ -7085,14 +7085,14 @@ var Icon = function Icon(_ref) {
       defaultSize = _icons$name.size;
   var size = sizeProp || defaultSize;
   if (!path) return null;
-  return /*#__PURE__*/React__default.createElement(styles.Svg, _extends$1({
+  return /*#__PURE__*/React__default.createElement(styles$2.Svg, _extends$1({
     width: width || size,
     height: height || size,
-    styles: styles$1,
+    styles: styles,
     color: color,
     viewBox: viewBox,
     size: size
-  }, props), /*#__PURE__*/React__default.createElement(styles.Path, {
+  }, props), /*#__PURE__*/React__default.createElement(styles$2.Path, {
     d: path,
     styles: pathStyles
   }));
@@ -11230,7 +11230,7 @@ const updaterMap$f = {
         instance.setZIndex(zIndex);
     },
 };
-class Marker$1 extends React.PureComponent {
+class Marker$2 extends React.PureComponent {
     constructor() {
         super(...arguments);
         this.registeredEvents = [];
@@ -11297,7 +11297,7 @@ class Marker$1 extends React.PureComponent {
         return children || null;
     }
 }
-Marker$1.contextType = MapContext;
+Marker$2.contextType = MapContext;
 
 var ClusterIcon = /** @class */ (function () {
     function ClusterIcon(cluster, styles) {
@@ -15938,15 +15938,26 @@ var InfoWindow = function InfoWindow(_ref) {
 };
 
 var Marker = function Marker(_ref) {
-  var markerData = _ref.markerData,
-      readOnly = _ref.readOnly,
-      _ref$setMarkerCallbac = _ref.setMarkerCallback,
-      setMarkerCallback = _ref$setMarkerCallbac === void 0 ? function () {} : _ref$setMarkerCallbac,
-      markerIdx = _ref.markerIdx,
-      schemaMarkerProps = _ref.markerProps;
-
-  var _ref2 = schemaMarkerProps || {},
-      _onClick = _ref2.onClick;
+  var _ref$markerData = _ref.markerData,
+      markerData = _ref$markerData === void 0 ? {} : _ref$markerData,
+      _ref$markerOptions = _ref.markerOptions,
+      markerOptions = _ref$markerOptions === void 0 ? {} : _ref$markerOptions,
+      _ref$readOnly = _ref.readOnly,
+      readOnly = _ref$readOnly === void 0 ? true : _ref$readOnly;
+
+  var _ref2 = markerData || {},
+      icon = _ref2.icon,
+      position = _ref2.position,
+      overlay = _ref2.overlay,
+      infoWindowChildren = _ref2.infoWindowChildren,
+      isDraggable = _ref2.isDraggable;
+
+  var _markerOptions$onClic = markerOptions.onClick,
+      _onClick = _markerOptions$onClic === void 0 ? function () {} : _markerOptions$onClic,
+      _markerOptions$onDrag = markerOptions.onDragStart,
+      _onDragStart = _markerOptions$onDrag === void 0 ? function () {} : _markerOptions$onDrag,
+      _markerOptions$onDrag2 = markerOptions.onDragEnd,
+      _onDragEnd = _markerOptions$onDrag2 === void 0 ? function () {} : _markerOptions$onDrag2;
 
   var _useState = useState(false),
       _useState2 = _slicedToArray(_useState, 2),
@@ -15969,31 +15980,26 @@ var Marker = function Marker(_ref) {
   var delayedInfoWindowHover = debounce(function () {
     if (!mouseOverInfoWindow) closeInfoWindow();
   }, 100);
-
-  var markerHandles = _objectSpread2(_objectSpread2({}, _onClick && {
-    onClick: function onClick() {
-      return _onClick(markerData);
-    }
-  }), {}, {
+  var markerProps = {
+    position: position,
+    draggable: isDraggable || !readOnly,
+    icon: icon,
+    onClick: function onClick(eventData) {
+      return _onClick(markerData, eventData);
+    },
+    onDragEnd: function onDragEnd(eventData) {
+      return _onDragEnd(markerData, eventData);
+    },
+    onDragStart: function onDragStart(eventData) {
+      return _onDragStart(markerData, eventData);
+    },
     onMouseOver: function onMouseOver() {
       return openInfoWindow();
     },
     onMouseOut: function onMouseOut() {
       return delayedInfoWindowHover();
     }
-  });
-
-  var markerProps = _objectSpread2(_objectSpread2({
-    position: markerData.position,
-    draggable: !readOnly,
-    onDragEnd: function onDragEnd(_ref3) {
-      var latLng = _ref3.latLng;
-      return setMarkerCallback(latLng, markerIdx, markerData);
-    }
-  }, _objectSpread2({}, markerHandles)), {}, {
-    icon: markerData.icon
-  });
-
+  };
   var infoWindowHandles = {
     onMouseEnter: function onMouseEnter() {
       delayedInfoWindowHover.cancel();
@@ -16012,35 +16018,37 @@ var Marker = function Marker(_ref) {
     };
   };
 
-  return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(Marker$1, markerProps), markerData.overlay && /*#__PURE__*/React__default.createElement(OverlayView, {
+  return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(Marker$2, markerProps), overlay && /*#__PURE__*/React__default.createElement(OverlayView, {
     className: "google-map-component__overlay-view",
-    position: markerData.position,
+    position: position,
     mapPaneName: OverlayView.OVERLAY_MOUSE_TARGET,
     getPixelPositionOffset: function getPixelPositionOffset(width) {
       return _getPixelPositionOffset(width);
     }
-  }, markerData.overlay()), infoWindowOpen && markerData.infoWindowChildren && /*#__PURE__*/React__default.createElement(InfoWindow, {
+  }, overlay()), infoWindowOpen && infoWindowChildren && /*#__PURE__*/React__default.createElement(InfoWindow, {
     className: "google-map-component__info-window",
-    data: markerData.position,
+    data: position,
     infoWindowHandles: infoWindowHandles
-  }, markerData.infoWindowChildren()));
+  }, infoWindowChildren()));
 };
 
+var Marker$1 = /*#__PURE__*/React__default.memo(Marker);
+
 var Markers = function Markers(_ref) {
   var _ref$readOnly = _ref.readOnly,
-      readOnly = _ref$readOnly === void 0 ? false : _ref$readOnly,
-      _ref$setMarker = _ref.setMarker,
-      setMarker = _ref$setMarker === void 0 ? function () {} : _ref$setMarker,
+      readOnly = _ref$readOnly === void 0 ? true : _ref$readOnly,
       _ref$markers = _ref.markers,
-      markers = _ref$markers === void 0 ? [] : _ref$markers;
+      markers = _ref$markers === void 0 ? [] : _ref$markers,
+      _ref$markerOptions = _ref.markerOptions,
+      markerOptions = _ref$markerOptions === void 0 ? {} : _ref$markerOptions;
   if (!markers.length) return null;
   return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, markers.map(function (marker, idx) {
-    return /*#__PURE__*/React__default.createElement(Marker, {
+    return /*#__PURE__*/React__default.createElement(Marker$1, {
       markerData: _objectSpread2({}, marker),
+      markerOptions: markerOptions,
       key: idx,
       readOnly: readOnly,
-      markerIdx: idx,
-      setMarkerCallback: setMarker
+      markerIdx: idx
     });
   }));
 };
@@ -16048,16 +16056,16 @@ var Markers = function Markers(_ref) {
 var Route = function Route(_ref) {
   var _ref$routeData = _ref.routeData,
       routeData = _ref$routeData === void 0 ? {} : _ref$routeData,
+      _ref$markerOptions = _ref.markerOptions,
+      markerOptions = _ref$markerOptions === void 0 ? {} : _ref$markerOptions,
       _ref$readOnly = _ref.readOnly,
-      readOnly = _ref$readOnly === void 0 ? false : _ref$readOnly,
-      _ref$setMarker = _ref.setMarker,
-      setMarker = _ref$setMarker === void 0 ? function () {} : _ref$setMarker;
+      readOnly = _ref$readOnly === void 0 ? true : _ref$readOnly;
   var _routeData$polylines = routeData.polylines,
       polylines = _routeData$polylines === void 0 ? [] : _routeData$polylines;
   return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(Markers, {
     readOnly: readOnly,
-    setMarker: setMarker,
-    markers: routeData.points
+    markers: routeData.points,
+    markerOptions: markerOptions
   }), /*#__PURE__*/React__default.createElement(Polyline, {
     path: polylines,
     options: routeData.polylineOptions
@@ -16067,10 +16075,10 @@ var Route = function Route(_ref) {
 var MarkersDrawer = function MarkersDrawer(_ref) {
   var _ref$markers = _ref.markers,
       markers = _ref$markers === void 0 ? [] : _ref$markers,
+      _ref$markerOptions = _ref.markerOptions,
+      markerOptions = _ref$markerOptions === void 0 ? {} : _ref$markerOptions,
       _ref$readOnly = _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,
       callbackOnSuccessDirections = _ref$callbackOnSucces === void 0 ? function () {} : _ref$callbackOnSucces,
       _ref$callbackOnErrorD = _ref.callbackOnErrorDirections,
@@ -16078,8 +16086,7 @@ var MarkersDrawer = function MarkersDrawer(_ref) {
       _ref$googleMapsApiKey = _ref.googleMapsApiKey,
       googleMapsApiKey = _ref$googleMapsApiKey === void 0 ? '' : _ref$googleMapsApiKey;
   var commonProps = {
-    readOnly: readOnly,
-    setMarker: setMarker
+    readOnly: readOnly
   };
   return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, markers.map(function (marker, idx) {
     var _marker$polylines;
@@ -16088,13 +16095,15 @@ var MarkersDrawer = function MarkersDrawer(_ref) {
       key: "".concat(idx.toString())
     }, commonProps, {
       routeData: marker,
+      markerOptions: markerOptions,
       callbackOnSuccessDirections: callbackOnSuccessDirections,
       callbackOnErrorDirections: callbackOnErrorDirections,
       googleMapsApiKey: googleMapsApiKey
     })) : /*#__PURE__*/React__default.createElement(Markers, _extends$1({
       key: "".concat(idx.toString())
     }, commonProps, {
-      markers: marker.points
+      markers: marker.points,
+      markerOptions: markerOptions
     }));
   }));
 };
@@ -35404,7 +35413,7 @@ var SearchBox = function SearchBox(_ref) {
   })));
 };
 
-var _excluded = ["googleMapsApiKey", "width", "height", "center", "zoom", "markers", "options", "callbackOnSuccessDirections", "callbackOnErrorDirections"];
+var _excluded = ["googleMapsApiKey", "width", "height", "center", "zoom", "markers", "markerOptions", "options", "callbackOnSuccessDirections", "callbackOnErrorDirections"];
 
 var Map$1 = function Map(_ref) {
   var _mapRef$current;
@@ -35421,6 +35430,8 @@ var Map$1 = function Map(_ref) {
       zoom = _ref$zoom === void 0 ? 13 : _ref$zoom,
       _ref$markers = _ref.markers,
       markers = _ref$markers === void 0 ? [] : _ref$markers,
+      _ref$markerOptions = _ref.markerOptions,
+      markerOptions = _ref$markerOptions === void 0 ? {} : _ref$markerOptions,
       _ref$options = _ref.options,
       options = _ref$options === void 0 ? {} : _ref$options,
       _ref$callbackOnSucces = _ref.callbackOnSuccessDirections,
@@ -35485,6 +35496,7 @@ var Map$1 = function Map(_ref) {
     className: "google-map-component__search-box"
   }), validMarkersExist && /*#__PURE__*/React__default.createElement(MarkersDrawer, {
     markers: markers,
+    markerOptions: markerOptions,
     readOnly: mapOptions.readOnly,
     callbackOnSuccessDirections: callbackOnSuccessDirections,
     callbackOnErrorDirections: callbackOnErrorDirections,
@@ -35492,5 +35504,104 @@ var Map$1 = function Map(_ref) {
   }));
 };
 
-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 };
+var rotate = keyframes(["to{transform:rotate(360deg);}"]);
+var Spinner$1 = styled$g.div.withConfig({
+  displayName: "styles__Spinner",
+  componentId: "sc-1e490ps-0"
+})(["", ""], function (_ref) {
+  var color = _ref.color,
+      duration = _ref.duration,
+      size = _ref.size,
+      thickness = _ref.thickness,
+      backSpinnerColor = _ref.backSpinnerColor;
+  return css(["width:", "px;height:", "px;border-radius:50%;background-color:transparent;border-top:", "px solid ", ";border-right:", "px solid ", ";border-bottom:", "px solid ", ";border-left:", "px solid ", ";animation:", " ", "s linear infinite;position:absolute;"], size, size, thickness, getColor(color), thickness, getColor(color), thickness, getColor(color), thickness, getColor(backSpinnerColor), rotate, duration);
+});
+var SpinnerWrapper = styled$g.div.withConfig({
+  displayName: "styles__SpinnerWrapper",
+  componentId: "sc-1e490ps-1"
+})(["position:relative;display:flex;justify-content:center;align-items:center;width:", "px;height:", "px;"], function (_ref2) {
+  var size = _ref2.size;
+  return size;
+}, function (_ref3) {
+  var size = _ref3.size;
+  return size;
+});
+var CenterContent = styled$g.div.withConfig({
+  displayName: "styles__CenterContent",
+  componentId: "sc-1e490ps-2"
+})(["position:absolute;display:flex;justify-content:center;align-items:center;"]);
+var styles$1 = {
+  Spinner: Spinner$1,
+  CenterContent: CenterContent,
+  SpinnerWrapper: SpinnerWrapper
+};
+
+var Spinner = function Spinner(_ref) {
+  var _ref$config = _ref.config,
+      config = _ref$config === void 0 ? {} : _ref$config,
+      children = _ref.children;
+  var _config$color = config.color,
+      color = _config$color === void 0 ? 'blue' : _config$color,
+      _config$duration = config.duration,
+      duration = _config$duration === void 0 ? 4 : _config$duration,
+      _config$size = config.size,
+      size = _config$size === void 0 ? 115 : _config$size,
+      _config$thickness = config.thickness,
+      thickness = _config$thickness === void 0 ? 8 : _config$thickness,
+      _config$backSpinnerCo = config.backSpinnerColor,
+      backSpinnerColor = _config$backSpinnerCo === void 0 ? 'grey' : _config$backSpinnerCo;
+  return /*#__PURE__*/React__default.createElement(styles$1.SpinnerWrapper, {
+    size: size
+  }, /*#__PURE__*/React__default.createElement(styles$1.Spinner, {
+    color: color,
+    duration: duration,
+    size: size,
+    thickness: thickness,
+    backSpinnerColor: backSpinnerColor
+  }), children && /*#__PURE__*/React__default.createElement(styles$1.CenterContent, null, children));
+};
+
+var show = keyframes(["0%{opacity:0;}to{opacity:1;}"]);
+var Container = styled$g.section.withConfig({
+  displayName: "styles__Container",
+  componentId: "sc-19kt9g-0"
+})(["display:flex;justify-content:center;align-items:center;width:100vw;height:100vh;position:fixed;top:0;left:0;background:", ";", ";z-index:100;animation:", " 0.2s ease-in;"], function (_ref) {
+  var backgroundColor = _ref.backgroundColor;
+  return backgroundColor;
+}, function (_ref2) {
+  var effect = _ref2.effect;
+  return effect && css(effect);
+}, show);
+var LoaderContainer = styled$g.div.withConfig({
+  displayName: "styles__LoaderContainer",
+  componentId: "sc-19kt9g-1"
+})(["position:relative;display:flex;justify-content:center;align-items:center;width:115px;height:115px;"]);
+var styles = {
+  Container: Container,
+  LoaderContainer: LoaderContainer
+};
+
+var FullLoader = function FullLoader(_ref) {
+  var children = _ref.children,
+      _ref$backgroundColor = _ref.backgroundColor,
+      backgroundColor = _ref$backgroundColor === void 0 ? 'transparent' : _ref$backgroundColor,
+      _ref$spinnerConfig = _ref.spinnerConfig,
+      spinnerConfig = _ref$spinnerConfig === void 0 ? {} : _ref$spinnerConfig,
+      _ref$effect = _ref.effect,
+      effect = _ref$effect === void 0 ? {} : _ref$effect;
+  var defaultSpinnerConfig = {
+    color: 'blue',
+    duration: 4,
+    size: 115,
+    thickness: 8
+  };
+  return /*#__PURE__*/React__default.createElement(styles.Container, {
+    effect: effect,
+    backgroundColor: backgroundColor
+  }, /*#__PURE__*/React__default.createElement(styles.LoaderContainer, null, children || /*#__PURE__*/React__default.createElement(Spinner, {
+    config: _objectSpread2(_objectSpread2({}, defaultSpinnerConfig), spinnerConfig)
+  })));
+};
+
+export { Avatar, AvatarGroup$1 as AvatarGroup, Button, Checkbox, Chip, ClickAwayListener, Color, ColorPicker, Drawer, ErrorBoundary, FullLoader, HTML, Icon, Image, Input, Link, Map$1 as Map, QRCode, Skeleton, Spinner, Switch, Textarea, icons, palette };
 //# sourceMappingURL=index.esm.js.map