@tpzdsp/next-toolkit 1.4.4 → 1.5.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tpzdsp/next-toolkit",
-  "version": "1.4.4",
+  "version": "1.5.0",
   "description": "A reusable React component library for Next.js applications",
   "type": "module",
   "private": false,

package/src/assets/styles/globals.css

@@ -24,7 +24,7 @@
 /* Component-specific styles */
 @layer components {
   .focus-yellow {
-    @apply focus:outline focus:outline-[3px] focus:outline-[#ffbf47] focus:border-[#ffbf47] z-20;
+    @apply focus:border-[#ffbf47] focus:outline focus:outline-[3px] focus:outline-[#ffbf47];
   }
 
   .library-button {

package/src/assets/styles/ol.css

@@ -16,8 +16,8 @@
 .ol-layer-switcher-panel button:focus,
 .ol-attribution ul li a:focus,
 .ol-attribution ul li a:focus-visible,
-.ol-geocoder ul.gcd-txt-result>li>a:focus,
-.ol-geocoder ul.gcd-txt-result>li>a:focus-visible {
+.ol-geocoder ul.gcd-txt-result > li > a:focus,
+.ol-geocoder ul.gcd-txt-result > li > a:focus-visible {
   outline: 3px solid #ffbf47 !important;
   border-color: #ffbf47 !important;
   z-index: 2;
@@ -32,7 +32,9 @@
 
 .ol-geocoder .gcd-txt-input:focus,
 .ol-geocoder .gcd-txt-input:focus-visible {
-  box-shadow: inset 0 0 0 1px #ffbf47, inset 0 0 6px #ffbf47;
+  box-shadow:
+    inset 0 0 0 1px #ffbf47,
+    inset 0 0 6px #ffbf47;
 }
 
 /* Zoom control container */
@@ -57,7 +59,10 @@
   line-height: 1;
   box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08);
   cursor: pointer;
-  transition: border-color 0.2s, box-shadow 0.2s, background 0.2s;
+  transition:
+    border-color 0.2s,
+    box-shadow 0.2s,
+    background 0.2s;
   margin: 0;
   padding: 0;
   display: flex;
@@ -95,7 +100,10 @@
   line-height: 1;
   box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08);
   cursor: pointer;
-  transition: border-color 0.2s, box-shadow 0.2s, background 0.2s;
+  transition:
+    border-color 0.2s,
+    box-shadow 0.2s,
+    background 0.2s;
   margin: 0;
   padding: 0;
   display: flex;
@@ -213,11 +221,12 @@
   top: unset !important;
 }
 
-.ol-geocoder ul.gcd-txt-result>li:nth-child(odd),
-.ol-geocoder ul.gcd-txt-result>li:nth-child(even) {  background-color: #fff;
+.ol-geocoder ul.gcd-txt-result > li:nth-child(odd),
+.ol-geocoder ul.gcd-txt-result > li:nth-child(even) {
+  background-color: #fff;
   background-color: #fff;
 }
 
-.ol-geocoder ul.gcd-txt-result>li>a:hover {
+.ol-geocoder ul.gcd-txt-result > li > a:hover {
   background-color: #f3f2f1;
 }

package/src/components/skipLink/SkipLink.tsx

@@ -1,3 +1,5 @@
+'use client';
+
 import { Link } from '../link/Link';
 
 export type SkipLinkProps = {
@@ -5,12 +7,30 @@ export type SkipLinkProps = {
 };
 
 export const SkipLink = ({ mainContentId = 'main-content' }: SkipLinkProps) => {
+  const handleActivate = () => {
+    // Let the browser scroll first, then move focus
+    setTimeout(() => {
+      const main = document.getElementById(mainContentId);
+
+      if (main) {
+        main.focus();
+      }
+    }, 0);
+  };
+
   return (
     <nav aria-label="Skip navigation">
       <Link
         className="bg-focus focus:relative focus:top-0 w-full absolute -top-full text-black
           visited:text-black hover:text-black p-3 skip-link"
         href={`#${mainContentId}`}
+        onClick={handleActivate}
+        onKeyDown={(event) => {
+          if (event.key === 'Enter' || event.key === ' ') {
+            event.preventDefault(); // Prevent default scroll/jump
+            handleActivate();
+          }
+        }}
       >
         Skip to main content
       </Link>

package/src/map/index.ts

@@ -5,6 +5,8 @@ export * from './LayerSwitcherControl';
 export * from './utils';
 export * from './MapComponent';
 export * from './MapContext';
+export * from './useKeyboardDrawing';
+export * from './useVirtualCursor';
 export * from './osOpenNamesSearch';
 export * from './Popup';
 export * from './projections';

package/src/map/useKeyboardDrawing.ts

@@ -0,0 +1,114 @@
+import { useCallback, useEffect, useState } from 'react';
+
+import { Map as OlMap } from 'ol';
+import { type Coordinate } from 'ol/coordinate';
+
+import { useVirtualCursor } from './useVirtualCursor';
+import { KeyboardKeys } from './utils';
+
+type UseKeyboardDrawingProps = {
+  map: OlMap | undefined;
+  isDrawing: boolean;
+  addVertex: (coord: Coordinate) => void;
+  finishDrawing: () => void;
+  cancelDrawing: () => void;
+};
+
+const DELTA = 20; // Base movement in pixels
+
+export const useKeyboardDrawing = ({
+  map,
+  isDrawing,
+  addVertex,
+  finishDrawing,
+  cancelDrawing,
+}: UseKeyboardDrawingProps) => {
+  const [cursorPosition, setCursorPosition] = useState<Coordinate | null>(null);
+
+  // Integrate the virtual cursor overlay
+  useVirtualCursor(map, isDrawing, cursorPosition);
+
+  // Initialize cursor at map center when drawing starts
+  useEffect(() => {
+    if (isDrawing && map) {
+      setCursorPosition(map.getView().getCenter() ?? [0, 0]);
+    }
+
+    if (!isDrawing) {
+      setCursorPosition(null);
+    }
+  }, [isDrawing, map]);
+
+  // Move the virtual cursor by dx/dy steps
+  const moveCursor = useCallback(
+    (dx: number, dy: number) => {
+      if (!cursorPosition || !map) {
+        return;
+      }
+
+      const view = map.getView();
+      const resolution = view.getResolution() ?? 1;
+      const delta = DELTA * resolution;
+
+      setCursorPosition([
+        cursorPosition[0] + dx * delta,
+        cursorPosition[1] - dy * delta, // Invert Y for map coordinates
+      ]);
+    },
+    [cursorPosition, map],
+  );
+
+  // Handle keyboard navigation and update cursor
+  useEffect(() => {
+    if (!map || !isDrawing) {
+      return;
+    }
+
+    const handleKeyDown = (event: KeyboardEvent) => {
+      if (!isDrawing) {
+        return;
+      }
+
+      switch (event.key) {
+        case KeyboardKeys.ArrowUp:
+          moveCursor(0, -1);
+          event.preventDefault();
+          break;
+        case KeyboardKeys.ArrowDown:
+          moveCursor(0, 1);
+          event.preventDefault();
+          break;
+        case KeyboardKeys.ArrowLeft:
+          moveCursor(-1, 0);
+          event.preventDefault();
+          break;
+        case KeyboardKeys.ArrowRight:
+          moveCursor(1, 0);
+          event.preventDefault();
+          break;
+        case KeyboardKeys.Enter:
+        case KeyboardKeys.Space:
+          if (cursorPosition) {
+            addVertex(cursorPosition);
+          }
+
+          event.preventDefault();
+          break;
+        case KeyboardKeys.Escape:
+          cancelDrawing();
+          event.preventDefault();
+          break;
+        case KeyboardKeys.F:
+          finishDrawing();
+          event.preventDefault();
+          break;
+        default:
+          break;
+      }
+    };
+
+    window.addEventListener('keydown', handleKeyDown);
+
+    return () => window.removeEventListener('keydown', handleKeyDown);
+  }, [map, isDrawing, cursorPosition, addVertex, finishDrawing, cancelDrawing, moveCursor]);
+};

package/src/map/useVirtualCursor.ts

@@ -0,0 +1,72 @@
+import { useEffect, useRef } from 'react';
+
+import { Map as OlMap } from 'ol';
+import { type Coordinate } from 'ol/coordinate';
+import Overlay from 'ol/Overlay';
+
+const createCursorElement = (): HTMLDivElement => {
+  const virtualCursor = document.createElement('div');
+
+  virtualCursor.style.width = '18px';
+  virtualCursor.style.height = '18px';
+  virtualCursor.style.background = 'rgba(255, 193, 7, 0.8)';
+  virtualCursor.style.border = '2px solid #ffbf47';
+  virtualCursor.style.borderRadius = '50%';
+  virtualCursor.style.position = 'absolute';
+  virtualCursor.style.transform = 'translate(-50%, -50%)';
+  virtualCursor.style.pointerEvents = 'none';
+  virtualCursor.setAttribute('aria-hidden', 'true');
+
+  return virtualCursor;
+};
+
+export const useVirtualCursor = (
+  map: OlMap | undefined,
+  isActive: boolean,
+  position: Coordinate | null,
+) => {
+  const overlayRef = useRef<Overlay | null>(null);
+
+  useEffect(() => {
+    if (!map) {
+      return;
+    }
+
+    if (!overlayRef.current) {
+      const el = createCursorElement();
+
+      overlayRef.current = new Overlay({
+        element: el,
+        positioning: 'center-center',
+        stopEvent: false,
+      });
+      map.addOverlay(overlayRef.current);
+    }
+
+    const overlay = overlayRef.current;
+    const element = overlay?.getElement();
+
+    if (element) {
+      if (isActive && position) {
+        overlay.setPosition(position);
+        element.style.display = '';
+      } else {
+        overlay.setPosition(undefined);
+        element.style.display = 'none';
+      }
+    }
+
+    return () => {
+      if (overlayRef.current) {
+        const el = overlayRef.current.getElement();
+
+        if (el) {
+          el.style.display = 'none';
+        }
+
+        map.removeOverlay(overlayRef.current);
+        overlayRef.current = null;
+      }
+    };
+  }, [map, isActive, position]);
+};

package/src/map/utils.ts

@@ -38,3 +38,14 @@ export const getPopupPositionClass = (coordinate: number[], map: Map): PopupDire
 
   return 'bottom-right';
 };
+
+export const KeyboardKeys = {
+  ArrowUp: 'ArrowUp',
+  ArrowDown: 'ArrowDown',
+  ArrowLeft: 'ArrowLeft',
+  ArrowRight: 'ArrowRight',
+  Enter: 'Enter',
+  Space: ' ',
+  Escape: 'Escape',
+  F: 'f',
+} as const;