Update dependencies, fix tranlations, remove deprecated tools. (#1683)

It migrates to next gen translation extraction tool and updates other
libraries with their relevant changes.

---------

Co-authored-by: pre-commit-ci[bot] <66853113+pre-commit-ci[bot]@users.noreply.github.com>

src/components/LayerListItem.tsx

@@ -1,11 +1,12 @@
 import React from "react";
 import classnames from "classnames";
-import {MdContentCopy, MdVisibility, MdVisibilityOff, MdDelete} from "react-icons/md";
+import { MdContentCopy, MdVisibility, MdVisibilityOff, MdDelete } from "react-icons/md";
 import { IconContext } from "react-icons";
-import {useSortable} from "@dnd-kit/sortable";
-import {CSS} from "@dnd-kit/utilities";
+import { useSortable } from "@dnd-kit/sortable";
+import { CSS } from "@dnd-kit/utilities";
 
 import IconLayer from "./IconLayer";
+import type { VisibilitySpecification } from "maplibre-gl";
 
 
 type DraggableLabelProps = {
@@ -16,7 +17,7 @@ type DraggableLabelProps = {
 };
 
 const DraggableLabel: React.FC<DraggableLabelProps> = (props) => {
-  const {dragAttributes, dragListeners} = props;
+  const { dragAttributes, dragListeners } = props;
   return <div className="maputnik-layer-list-item-handle" {...dragAttributes} {...dragListeners}>
     <IconLayer
       className="layer-handle__icon"
@@ -39,7 +40,7 @@ type IconActionProps = {
 
 class IconAction extends React.Component<IconActionProps> {
   renderIcon() {
-    switch(this.props.action) {
+    switch (this.props.action) {
       case "duplicate": return <MdContentCopy />;
       case "show": return <MdVisibility />;
       case "hide": return <MdVisibilityOff />;
@@ -48,7 +49,7 @@ class IconAction extends React.Component<IconActionProps> {
   }
 
   render() {
-    const {classBlockName, classBlockModifier} = this.props;
+    const { classBlockName, classBlockModifier } = this.props;
 
     let classAdditions = "";
     if (classBlockName) {
@@ -78,7 +79,7 @@ type LayerListItemProps = {
   layerId: string
   layerType: string
   isSelected?: boolean
-  visibility?: string
+  visibility?: VisibilitySpecification
   className?: string
   onLayerSelect(index: number): void;
   onLayerCopy?(...args: unknown[]): unknown
@@ -90,9 +91,9 @@ const LayerListItem = React.forwardRef<HTMLLIElement, LayerListItemProps>((props
   const {
     isSelected = false,
     visibility = "visible",
-    onLayerCopy = () => {},
-    onLayerDestroy = () => {},
-    onLayerVisibilityToggle = () => {},
+    onLayerCopy = () => { },
+    onLayerDestroy = () => { },
+    onLayerVisibilityToggle = () => { },
   } = props;
 
   const {
@@ -102,7 +103,7 @@ const LayerListItem = React.forwardRef<HTMLLIElement, LayerListItemProps>((props
     transform,
     transition,
     isDragging,
-  } = useSortable({id: props.layerId});
+  } = useSortable({ id: props.layerId });
 
   const style = {
     transform: CSS.Transform.toString(transform),
@@ -115,7 +116,7 @@ const LayerListItem = React.forwardRef<HTMLLIElement, LayerListItemProps>((props
   // Cast ref to MutableRefObject since we know from the codebase that's what's always passed
   const refObject = ref as React.MutableRefObject<HTMLLIElement | null> | null;
 
-  return <IconContext.Provider value={{size: "14px"}}>
+  return <IconContext.Provider value={{ size: "14px" }}>
     <li
       ref={(node) => {
         setNodeRef(node);
@@ -138,21 +139,21 @@ const LayerListItem = React.forwardRef<HTMLLIElement, LayerListItemProps>((props
         dragAttributes={attributes}
         dragListeners={listeners}
       />
-      <span style={{flexGrow: 1}} />
+      <span style={{ flexGrow: 1 }} />
       <IconAction
-        wdKey={"layer-list-item:" + props.layerId+":delete"}
+        wdKey={"layer-list-item:" + props.layerId + ":delete"}
         action={"delete"}
         classBlockName="delete"
         onClick={_e => onLayerDestroy!(props.layerIndex)}
       />
       <IconAction
-        wdKey={"layer-list-item:" + props.layerId+":copy"}
+        wdKey={"layer-list-item:" + props.layerId + ":copy"}
         action={"duplicate"}
         classBlockName="duplicate"
         onClick={_e => onLayerCopy!(props.layerIndex)}
       />
       <IconAction
-        wdKey={"layer-list-item:"+props.layerId+":toggle-visibility"}
+        wdKey={"layer-list-item:" + props.layerId + ":toggle-visibility"}
         action={visibilityAction}
         classBlockName="visibility"
         classBlockModifier={visibilityAction}