ublo-lib 1.12.15 → 1.12.17

package/es/common/components/editable-map/marker-list.js

@@ -9,6 +9,7 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 
 export default function MarkerList({
+  isInDialog,
   markers,
   mapRef,
   iconSet
@@ -19,7 +20,9 @@ export default function MarkerList({
   const sortedImportantMarkers = importantMarkers.sort(alphaNumSortByTitle);
   const sortedOtherMarkers = otherMarkers.sort(alphaNumSortByTitle);
   const allMarkers = [...sortedImportantMarkers, ...sortedOtherMarkers];
-  const toggleList = () => {
+  const toggleList = e => {
+    e.preventDefault();
+    e.stopPropagation();
     setOpened(!opened);
   };
   const {
@@ -30,7 +33,8 @@ export default function MarkerList({
     setOpened(width > 992);
   }, [width]);
   const classes = classNames(css.list, {
-    [css.listOpened]: opened
+    [css.listOpened]: opened,
+    [css.listIsInDialog]: isInDialog
   });
   return _jsxs("div", {
     className: classes,
@@ -43,23 +47,20 @@ export default function MarkerList({
         position,
         important
       }) => {
-        const focusMarker = () => {
-          mapRef.current.setView(position, 23);
-          setTimeout(() => {
-            const marker = mapRef.current?.getContainer()?.querySelector(`[data-id="${id}"]`)?.parentElement;
-            if (marker) {
-              marker.click();
-            }
-          }, 400);
+        const focusMarker = e => {
+          e.preventDefault();
+          e.stopPropagation();
           if (width <= 992) {
             setOpened(false);
           }
+          mapRef.current.setView(position, 23);
         };
         const Icon = Icons[iconSet][icon] || Icons[iconSet].Location;
         const classes = classNames(css.button, {
           [css.buttonImportant]: important
         });
-        return _jsxs("button", {
+        return _jsxs("a", {
+          href: "",
           className: classes,
           onClick: focusMarker,
           children: [_jsx(Icon, {
@@ -70,6 +71,7 @@ export default function MarkerList({
         }, id);
       })
     }), _jsx(Button, {
+      type: "button",
       className: css.toggle,
       onClick: toggleList,
       children: _jsx(ToggleIcon, {})

package/es/common/components/editable-map/marker-list.module.css

@@ -1,24 +1,33 @@
 .list {
   position: absolute;
-  top: 0;
-  right: 0;
-  max-width: 220px;
-  height: 100%;
+  top: 6px;
+  right: 6px;
+  max-width: 250px;
+  height: calc(100% - 12px);
   display: flex;
   flex-direction: column;
-  gap: 8px;
-  padding: 8px;
+  gap: 4px;
+  border-radius: var(--ds-radius-100, 6px);
+  box-shadow: var(--ds-shadow-100, 0px 3px 6px rgba(0, 0, 0, 0.12));
   transition: background-color 160ms
-      var(--ds-transition-easing, cubic-bezier(0.4, 0.1, 0.2, 0.9)),
-    box-shadow 160ms
-      var(--ds-transition-easing, cubic-bezier(0.4, 0.1, 0.2, 0.9)),
-    opacity 160ms var(--ds-transition-easing, cubic-bezier(0.4, 0.1, 0.2, 0.9));
+    var(--ds-transition-easing, cubic-bezier(0.4, 0.1, 0.2, 0.9));
+}
+
+.list::before {
+  content: "";
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background-color: var(--ds-grey-100, #f5f5f5);
+  border-radius: inherit;
+  opacity: 0.35;
 }
 
 .listOpened {
-  opacity: 0.8;
-  background-color: var(--ds-grey-000, #ffffff);
-  box-shadow: var(--ds-shadow-200, 0 5px 10px rgba(0, 0, 0, 0.12));
+  padding: 2px;
+  backdrop-filter: brightness(110%) contrast(90%) blur(var(--ds-blur, 5px));
 }
 
 .listOpened:hover {
@@ -26,15 +35,20 @@
 }
 
 .toggle {
-  flex: 0 0 auto;
-  margin: auto 0 0 auto;
+  position: absolute;
+  bottom: 8px;
+  right: 8px;
+  user-select: none;
 }
 
 .inner {
+  position: relative;
   flex: 1 1 100%;
   display: flex;
   flex-direction: column;
-  gap: 8px;
+  gap: 4px;
+  padding: 0 8px;
+  padding-top: 8px;
   overflow: auto;
   animation: marker-list-inner-appearance 160ms
     var(--ds-transition-easing, cubic-bezier(0.4, 0.1, 0.2, 0.9));
@@ -43,7 +57,6 @@
 @keyframes marker-list-inner-appearance {
   0% {
     opacity: 0;
-    transform: translateX(6px);
   }
 }
 
@@ -51,15 +64,20 @@
   display: flex;
   align-items: center;
   gap: 1ch;
-  padding: 8px;
-  font-size: 13px;
+  padding: 6px;
+  color: inherit;
+  font-size: 14px;
   text-align: left;
   border-radius: var(--ds-radius-100, 6px);
   cursor: pointer;
 }
 
+.listIsInDialog .button:first-of-type {
+  margin-right: 30px;
+}
+
 .button:is(:hover, :focus) {
-  background-color: var(--ds-grey-100, #f5f5f5);
+  background-color: var(--ds-grey-200, #efefef);
 }
 
 .buttonImportant {
@@ -67,8 +85,9 @@
 }
 
 .icon {
-  flex: 0 0 26px;
-  width: 26px;
-  height: 26px;
+  flex: 0 0 32px;
+  width: 32px;
+  height: 32px;
+  filter: drop-shadow(var(--ds-shadow-100, 0px 3px 6px rgba(0, 0, 0, 0.12)));
   fill: var(--ds-secondary, var(--ds-blue-400, #4177f6));
 }

package/es/common/components/editable-map/markers.js

@@ -52,10 +52,13 @@ function Marker({
       });
     });
   };
-  const tooltipProps = {
+  const tooltipProps = tooltipOpened ? {
     direction: "right",
     permanent: true,
     offset: [6, -14]
+  } : {
+    direction: "right",
+    offset: [6, -14]
   };
   return _jsxs(LeafletMarker, {
     ref: markerRef,
@@ -75,11 +78,12 @@ function Marker({
         "data-id": id
       }))
     }),
-    children: [!isEditing && tooltipOpened && _jsx(Tooltip, {
+    children: [!isEditing && _jsx(Tooltip, {
       ...tooltipProps,
       children: title
     }), _jsx(Popup, {
       ref: popupRef,
+      offset: [0, -24],
       children: isEditing ? _jsx(EditForm, {
         popupRef: popupRef,
         marker: marker,

package/es/common/components/editable-map/markers.module.css

@@ -1,6 +1,26 @@
 .markerIcon > svg {
-  width: 34px;
-  height: 34px;
+  position: relative;
+  width: 42px;
+  height: 42px;
   fill: var(--ds-secondary, var(--ds-blue-400, #4177f6));
+  filter: drop-shadow(var(--ds-shadow-100, 0px 3px 6px rgba(0, 0, 0, 0.12)));
   transform: translate(-35%, -65%);
+  transition: transform 160ms
+    var(--ds-transition-easing, cubic-bezier(0.4, 0.1, 0.2, 0.9));
+}
+
+.markerIcon:hover > svg {
+  transform: translate(-35%, -65%) scale(1.1);
+}
+
+.markerIcon:has([data-pin])::after {
+  content: "";
+  top: calc(100% + 1px);
+  left: calc(50% - 6px);
+  width: 16px;
+  position: absolute;
+  height: 10px;
+  background-color: var(--ds-grey-700, #232324);
+  border-radius: 50%;
+  opacity: 0.3;
 }

package/es/common/components/editable-map/popup-data.js

@@ -12,6 +12,9 @@ export default function PopupData({
     url,
     label
   } = marker;
+  const isExternalUrl = /^((http|https):\/\/)/.test(url);
+  const target = isExternalUrl ? "_blank" : undefined;
+  const rel = isExternalUrl ? "noopener" : undefined;
   const formatedDescription = description.replace(/\n/g, "<br />");
   return _jsxs("div", {
     className: css.data,
@@ -27,6 +30,8 @@ export default function PopupData({
       tag: "a",
       href: url.trim(),
       className: css.link,
+      target: target,
+      rel: rel,
       children: label || "En savoir plus"
     })]
   });

package/es/common/components/editable-map/popup-data.module.css

@@ -1,10 +1,10 @@
 .data {
+  position: relative;
   max-width: 280px;
   max-height: 280px;
   display: flex;
   flex-direction: column;
   gap: 6px;
-  font-family: var(--ds-sans-serif-font, "Open Sans", sans-serif);
   overflow: auto;
 }
 
@@ -14,7 +14,6 @@
   padding: 4px 0;
   font-size: 17px;
   font-weight: 700;
-  background-color: var(--ds-grey-000, #fff);
 }
 
 .description {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ublo-lib",
-  "version": "1.12.15",
+  "version": "1.12.17",
   "peerDependencies": {
     "dt-design-system": "^2.1.0",
     "leaflet": "^1.9.1",