react-spatial 1.12.1 → 1.12.2

package/components/Geolocation/Geolocation.scss

@@ -1,7 +1,9 @@
+@use "../../themes/default/variables";
+
 .rs-geolocation {
   cursor: pointer;
-  height: $btn-size-base;
-  width: $btn-size-base;
+  height: variables.$btn-size-base;
+  width: variables.$btn-size-base;
   display: flex;
   justify-content: center;
   align-items: center;
@@ -9,11 +11,11 @@
   text-align: center;
   font-size: 20px;
   color: white;
-  background-color: $btn-primary-color;
+  background-color: variables.$btn-primary-color;
   transition: background-color 0.5s ease;
 
   &:hover {
-    background-color: $btn-primary-color-hover;
+    background-color: variables.$btn-primary-color-hover;
   }
 
   &.rs-active {
@@ -29,7 +31,7 @@
     }
 
     50% {
-      color: $btn-primary-color;
+      color: variables.$btn-primary-color;
     }
 
     100% {

package/components/LayerTree/LayerTree.scss

@@ -1,3 +1,5 @@
+@use "../../themes/default/variables";
+
 .rs-layer-tree {
   width: 100%;
   overflow-y: auto;
@@ -111,7 +113,7 @@
       top: 1px;
       width: 5px;
       height: 10px;
-      border: solid $brand-primary;
+      border: solid variables.$brand-primary;
       border-width: 0 1px 1px 0;
       transform: rotate(45deg);
     }
@@ -123,7 +125,7 @@
       width: 12px;
       height: 12px;
       border-radius: 50%;
-      background: $brand-primary;
+      background: variables.$brand-primary;
     }
 
     label input:checked ~ span::after {

package/components/Popup/Popup.scss

@@ -1,10 +1,12 @@
+@use "../../themes/default/variables";
+
 .rs-popup {
   position: absolute;
 
   .rs-popup-container {
     position: absolute;
     background-color: white;
-    filter: drop-shadow($box-shadow);
+    filter: drop-shadow(variables.$box-shadow);
     bottom: 12px;
     left: -50px;
     min-width: 220px;

package/components/RouteSchedule/RouteSchedule.md.scss

@@ -1,5 +1,7 @@
+@use "../../themes/default/variables";
+
 .rt-route-schedule-example {
-  font-family: $font-family;
+  font-family: variables.$font-family;
   position: relative;
   display: flex;
 

package/components/RouteSchedule/RouteSchedule.scss

@@ -1,3 +1,5 @@
+@use "../../themes/default/variables";
+
 .rt-route-schedule {
   background-color: white;
   width: 350px;
@@ -75,7 +77,7 @@
 
       &:hover {
         color: white;
-        background-color: $brand-secondary;
+        background-color: variables.$brand-secondary;
       }
 
       .rt-route-times,

package/components/ScaleLine/ScaleLine.scss

@@ -1,7 +1,9 @@
+@use "../../themes/default/variables";
+
 .rs-scale-line .ol-scale-line-inner {
   border-width: 0 1px 1px;
-  border-color: 1px solid $gray;
+  border-color: 1px solid variables.$gray;
   border-style: solid;
-  padding: $padding-base;
-  font-size: $font-size-small;
+  padding: variables.$padding-base;
+  font-size: variables.$font-size-small;
 }

package/components/Zoom/Zoom.md.scss

@@ -1,3 +1,5 @@
+@use '../../themes/default/variables';
+
 .rs-zoom-example {
   position: relative;
 
@@ -12,7 +14,7 @@
 
   .rs-zoom-in,
   .rs-zoom-out {
-    background: $btn-secondary-color;
+    background: variables.$btn-secondary-color;
     border-radius: 50%;
     color: white;
   }

package/components/Zoom/Zoom.scss

@@ -1,3 +1,5 @@
+@use "../../themes/default/variables";
+
 .rs-zooms-bar {
   position: absolute;
   top: 0;
@@ -10,8 +12,8 @@
   .rs-zoom-in,
   .rs-zoom-out {
     cursor: pointer;
-    height: $btn-size-base;
-    width: $btn-size-base;
+    height: variables.$btn-size-base;
+    width: variables.$btn-size-base;
     display: flex;
     justify-content: center;
     align-items: center;
@@ -34,7 +36,7 @@
       left: 0;
       user-select: none;
       background-color: rgb(255 255 255 / 40%);
-      border: 1px solid $brand-secondary;
+      border: 1px solid variables.$brand-secondary;
       border-radius: 3px;
       outline: none;
       overflow: hidden;
@@ -46,7 +48,7 @@
         user-select: none;
         position: relative;
         display: block;
-        background: $brand-secondary;
+        background: variables.$brand-secondary;
         outline: none;
         overflow: hidden;
         cursor: pointer;

package/package.json

@@ -2,14 +2,14 @@
   "name": "react-spatial",
   "license": "MIT",
   "description": "Components to build React map apps.",
-  "version": "1.12.1",
+  "version": "1.12.2",
   "dependencies": {
     "@emotion/react": "^11.13.3",
     "@emotion/styled": "^11.13.0",
-    "@geops/geops-ui": "0.3.3",
-    "@mui/icons-material": "^6.0.0",
-    "@mui/material": "^6.0.0",
-    "re-resizable": "6.9.17",
+    "@geops/geops-ui": "0.3.4",
+    "@mui/icons-material": "^6.1.7",
+    "@mui/material": "^6.1.7",
+    "re-resizable": "6.10.1",
     "react-icons": "5.3.0",
     "resize-observer-polyfill": "1.5.1"
   },
@@ -22,37 +22,37 @@
     "react-dom": "^18"
   },
   "devDependencies": {
-    "@babel/preset-env": "7.25.4",
-    "@babel/preset-react": "7.24.7",
+    "@babel/preset-env": "7.26.0",
+    "@babel/preset-react": "7.25.9",
     "@cfaester/enzyme-adapter-react-18": "0.8.0",
-    "@commitlint/cli": "19.4.1",
-    "@commitlint/config-conventional": "19.4.1",
+    "@commitlint/cli": "19.5.0",
+    "@commitlint/config-conventional": "19.5.0",
     "@svgr/plugin-jsx": "^8.1.0",
     "@svgr/webpack": "8.1.0",
     "@testing-library/dom": "^10.4.0",
-    "@testing-library/jest-dom": "6.5.0",
+    "@testing-library/jest-dom": "6.6.3",
     "@testing-library/react": "16.0.1",
     "@testing-library/user-event": "14.5.2",
     "babel-jest": "29.7.0",
-    "babel-loader": "9.1.3",
+    "babel-loader": "9.2.1",
     "canvas": "2.11.2",
     "css-loader": "7.1.2",
     "enzyme": "3.11.0",
-    "esbuild": "^0.23.1",
+    "esbuild": "^0.24.0",
     "esbuild-loader": "^4.2.2",
     "eslint": "8",
     "eslint-config-airbnb": "19.0.4",
     "eslint-config-prettier": "9.1.0",
-    "eslint-plugin-import": "2.29.1",
-    "eslint-plugin-jsx-a11y": "^6.9.0",
-    "eslint-plugin-perfectionist": "^3.3.0",
+    "eslint-plugin-import": "2.31.0",
+    "eslint-plugin-jsx-a11y": "^6.10.2",
+    "eslint-plugin-perfectionist": "^3.9.1",
     "eslint-plugin-prettier": "5.2.1",
-    "eslint-plugin-react": "7.35.0",
-    "eslint-plugin-react-hooks": "4.6.2",
+    "eslint-plugin-react": "7.37.2",
+    "eslint-plugin-react-hooks": "5.0.0",
     "file-loader": "6.2.0",
     "fixpack": "4.0.0",
     "generact": "0.4.0",
-    "husky": "9.1.5",
+    "husky": "9.1.6",
     "identity-obj-proxy": "^3.0.0",
     "is-ci": "3.0.1",
     "jest": "29.7.0",
@@ -63,34 +63,35 @@
     "jest-serializer-html": "7.1.0",
     "jest-transform-file": "1.1.1",
     "jest-transformer-svg": "^2.0.2",
-    "jsts": "2.11.3",
-    "lint-staged": "15.2.9",
+    "jsts": "2.12.1",
+    "lint-staged": "15.2.10",
     "mapbox-gl": "1.13.1",
-    "maplibre-gl": "4.6.0",
+    "maplibre-gl": "4.7.1",
     "mobility-toolbox-js": "2.4.2",
-    "ol": "10.1.0",
-    "postcss": "^8.4.41",
+    "ol": "10.2.1",
+    "postcss": "^8.4.49",
     "prettier": "3.3.3",
-    "proj4": "2.12.0",
+    "proj4": "2.14.0",
     "prop-types": "15.8.1",
     "react": "18.3.1",
     "react-dom": "18.3.1",
     "react-styleguidist": "13.1.3",
     "react-svg-loader": "3.0.3",
     "react-test-renderer": "18.3.1",
-    "sass": "1.77.8",
-    "sass-loader": "16.0.1",
+    "sass": "1.81.0",
+    "sass-loader": "16.0.3",
+    "sass-migrator": "^2.2.1",
     "standard-version": "9.5.0",
     "stream-array": "1.1.2",
     "style-loader": "4.0.0",
-    "stylelint": "16.9.0",
+    "stylelint": "16.10.0",
     "stylelint-config-recommended-scss": "14.1.0",
     "stylelint-config-standard": "36.0.1",
-    "stylelint-scss": "6.5.1",
+    "stylelint-scss": "6.9.0",
     "terser-webpack-plugin": "^5.3.10",
     "url-loader": "4.1.1",
     "vinyl-fs": "4.0.0",
-    "webpack": "^5.94.0",
+    "webpack": "^5.96.1",
     "xml-beautifier": "0.5.0"
   },
   "scripts": {

package/themes/default/components.scss

@@ -1,12 +1,12 @@
 /**
 * This file load the css of components.
 */
-@import '../../components/BaseLayerSwitcher/BaseLayerSwitcher';
-@import '../../components/Geolocation/Geolocation';
-@import '../../components/LayerTree/LayerTree';
-@import '../../components/NorthArrow/NorthArrow';
-@import '../../components/Popup/Popup';
-@import '../../components/ScaleLine/ScaleLine';
-@import '../../components/Zoom/Zoom';
-@import '../../components/RouteSchedule/RouteSchedule';
-@import '../../components/Overlay/Overlay';
+@use '../../components/BaseLayerSwitcher/BaseLayerSwitcher';
+@use '../../components/Geolocation/Geolocation';
+@use '../../components/LayerTree/LayerTree';
+@use '../../components/NorthArrow/NorthArrow';
+@use '../../components/Popup/Popup';
+@use '../../components/ScaleLine/ScaleLine';
+@use '../../components/Zoom/Zoom';
+@use '../../components/RouteSchedule/RouteSchedule';
+@use '../../components/Overlay/Overlay';

package/themes/default/examples.scss

@@ -1,32 +1,34 @@
 /**
 * This file is loaded by the styleguide and provide additionnal css for all examples.
 */
-@import './index';
-@import '../../components/BaseLayerSwitcher/BaseLayerSwitcher.md';
-@import '../../components/BasicMap/BasicMap.md';
-@import '../../components/CanvasSaveButton/CanvasSaveButton.md';
-@import '../../components/FeatureExportButton/FeatureExportButton.md';
-@import '../../components/FitExtent/FitExtent.md';
-@import '../../components/Geolocation/Geolocation.md';
-@import '../../components/LayerTree/LayerTree.md';
-@import '../../components/MousePosition/MousePosition.md';
-@import '../../components/Permalink/Permalink.md';
-@import '../../components/Popup/Popup.md';
-@import '../../components/Zoom/Zoom.md';
-@import '../../components/RouteSchedule/RouteSchedule.md';
-@import '../../components/Copyright/Copyright.md';
-@import '../../components/Overlay/Overlay.md';
+@use 'index';
+@use 'variables';
+@use 'mixins';
+@use '../../components/BaseLayerSwitcher/BaseLayerSwitcher.md';
+@use '../../components/BasicMap/BasicMap.md';
+@use '../../components/CanvasSaveButton/CanvasSaveButton.md';
+@use '../../components/FeatureExportButton/FeatureExportButton.md';
+@use '../../components/FitExtent/FitExtent.md';
+@use '../../components/Geolocation/Geolocation.md';
+@use '../../components/LayerTree/LayerTree.md';
+@use '../../components/MousePosition/MousePosition.md';
+@use '../../components/Permalink/Permalink.md';
+@use '../../components/Popup/Popup.md';
+@use '../../components/Zoom/Zoom.md';
+@use '../../components/RouteSchedule/RouteSchedule.md';
+@use '../../components/Copyright/Copyright.md';
+@use '../../components/Overlay/Overlay.md';
 
 $link-color: #000;
 $link-color-hover: #000;
 
 /* Load 'a' mixin */
-@include a;
+@include mixins.a();
 
 a {
   font-size: 11px;
 }
 
 body {
-  font-family: $font-family;
+  font-family: variables.$font-family;
 }

package/themes/default/index.scss

@@ -1,9 +1,9 @@
 /**
 * This file load the default theme, for all the components.
 */
-@import './variables';
-@import './mixins';
-@import './components';
+@use 'variables';
+@use 'mixins';
+@use 'components';
 
 [role='button']:not([disabled]),
 button:not([disabled]),

package/themes/default/mixins.scss

@@ -1,3 +1,5 @@
+@use "variables";
+
 /**
 * This file defines mixins.
 */
@@ -7,16 +9,16 @@
 */
 @mixin a() {
   a {
-    color: $link-color;
-    text-decoration: $link-decoration;
+    color: variables.$link-color;
+    text-decoration: variables.$link-decoration;
 
     &:hover {
-      color: $link-color-hover;
-      text-decoration: $link-decoration-hover;
+      color: variables.$link-color-hover;
+      text-decoration: variables.$link-decoration-hover;
     }
 
     &:active {
-      color: $link-color-active;
+      color: variables.$link-color-active;
     }
 
     &.rs-selected {