@tpzdsp/next-toolkit 2.0.0 → 2.0.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tpzdsp/next-toolkit",
-  "version": "2.0.0",
+  "version": "2.0.1",
   "description": "A reusable React component library for Next.js applications",
   "engines": {
     "node": "^24.12.0",

package/src/map/geocoder/Geocoder.tsx

@@ -3,73 +3,13 @@
 import { useCallback, useEffect, useId, useRef, useState } from 'react';
 
 import type Map from 'ol/Map';
+import { ImSpinner2 } from 'react-icons/im';
+import { IoClose, IoSearch } from 'react-icons/io5';
 
 import { groupResults } from './groupResults';
 import type { GeocoderResult } from './types';
 import { useDebounce } from '../../hooks/useDebounce';
 
-// SVG Icons matching Mapbox GL Geocoder style
-const SearchIcon = () => (
-  <svg
-    className="absolute left-3 top-1/2 -translate-y-1/2 pointer-events-none"
-    width="20"
-    height="20"
-    viewBox="0 0 18 18"
-    fill="none"
-    xmlns="http://www.w3.org/2000/svg"
-  >
-    <path
-      d="M7.5 13.5C10.8137 13.5 13.5 10.8137 13.5 7.5C13.5 4.18629 10.8137 1.5 7.5 1.5C4.18629 1.5 1.5 4.18629 1.5 7.5C1.5 10.8137 4.18629 13.5 7.5 13.5Z"
-      stroke="#757575"
-      strokeWidth="1.5"
-      strokeLinecap="round"
-      strokeLinejoin="round"
-    />
-
-    <path
-      d="M16.5 16.5L11.625 11.625"
-      stroke="#757575"
-      strokeWidth="1.5"
-      strokeLinecap="round"
-      strokeLinejoin="round"
-    />
-  </svg>
-);
-
-const ClearIcon = () => (
-  <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
-    <path
-      d="M15 5L5 15M5 5L15 15"
-      stroke="#757575"
-      strokeWidth="2"
-      strokeLinecap="round"
-      strokeLinejoin="round"
-    />
-  </svg>
-);
-
-const LoadingIcon = () => (
-  <svg
-    className="animate-spin"
-    width="26"
-    height="26"
-    viewBox="0 0 26 26"
-    fill="none"
-    xmlns="http://www.w3.org/2000/svg"
-  >
-    <circle
-      cx="13"
-      cy="13"
-      r="10"
-      stroke="#757575"
-      strokeWidth="3"
-      strokeLinecap="round"
-      strokeDasharray="60"
-      strokeDashoffset="40"
-    />
-  </svg>
-);
-
 // Typeahead defaults
 const DEFAULT_TYPEAHEAD_DELAY_MS = 500;
 
@@ -217,19 +157,11 @@ export const Geocoder = ({
       if (shouldZoomOut) {
         // Step 1: Zoom out, then combined pan + zoom in (like ol-geocoder)
         view.animate({ zoom: flyZoom, duration: zoomOutDuration }, () => {
-          view.animate({
-            center: result.center,
-            zoom: finalZoom,
-            duration: flyToDuration,
-          });
+          view.animate({ center: result.center, zoom: finalZoom, duration: flyToDuration });
         });
       } else {
         // Combined pan + zoom in one smooth animation
-        view.animate({
-          center: result.center,
-          zoom: finalZoom,
-          duration: flyToDuration,
-        });
+        view.animate({ center: result.center, zoom: finalZoom, duration: flyToDuration });
       }
     }
 
@@ -278,12 +210,14 @@ export const Geocoder = ({
         Search for a place
       </label>
 
-      {/* Mapbox-style geocoder container */}
       <div
         className="relative bg-white rounded shadow-lg transition-all duration-200
           focus-within:ring-2 focus-within:ring-focus"
       >
-        <SearchIcon />
+        <IoSearch
+          size={20}
+          className="absolute left-3 top-1/2 -translate-y-1/2 pointer-events-none text-gray-400"
+        />
 
         <input
           ref={inputRef}
@@ -336,13 +270,12 @@ export const Geocoder = ({
             placeholder:text-gray-500 focus:outline-none focus:ring-0"
         />
 
-        {/* Clear or Loading button */}
         <div className="absolute right-2 top-1/2 -translate-y-1/2">
           {(() => {
             if (isSearching) {
               return (
                 <div className="p-1">
-                  <LoadingIcon />
+                  <ImSpinner2 size={22} className="animate-spin text-gray-500" />
                 </div>
               );
             }
@@ -355,7 +288,7 @@ export const Geocoder = ({
                   aria-label="Clear search"
                   className="p-1 hover:bg-gray-100 rounded transition-colors"
                 >
-                  <ClearIcon />
+                  <IoClose size={20} className="text-gray-500" />
                 </button>
               );
             }
@@ -369,7 +302,7 @@ export const Geocoder = ({
       {open ? (
         <div className="absolute z-1000 mt-1.5 w-full bg-white rounded shadow-lg overflow-hidden">
           {results.length > 0 ? (
-            <div id={listboxId} role="listbox" className="max-h-60 overflow-auto">
+            <div id={listboxId} role="listbox" tabIndex={-1} className="max-h-60 overflow-auto">
               {Object.entries(grouped).map(([group, items]) => (
                 <div key={group} role="presentation">
                   <div
@@ -382,21 +315,22 @@ export const Geocoder = ({
                   <div role="group">
                     {items.map((item) => {
                       flatIndex += 1;
-                      const isActive = flatIndex === activeIndex;
+                      const itemIndex = flatIndex;
+                      const isActive = itemIndex === activeIndex;
                       const isSelected = item.id === selectedId;
 
                       return (
                         <div
-                          id={`${listboxId}-option-${flatIndex}`}
+                          id={`${listboxId}-option-${itemIndex}`}
                           key={item.id}
                           role="option"
                           aria-selected={isSelected}
                           tabIndex={-1}
-                          className={`cursor-pointer px-3 py-2 text-sm text-gray-800
+                          className={`scroll-mt-8 cursor-pointer px-3 py-2 text-sm text-gray-800
                             transition-colors ${isSelected ? 'bg-blue-50 font-semibold' : ''}
                             ${isActive && !isSelected ? 'bg-gray-100' : ''}
                             ${!isSelected && !isActive ? 'hover:bg-gray-50' : ''}`}
-                          onMouseEnter={() => setActiveIndex(flatIndex)}
+                          onMouseEnter={() => setActiveIndex(itemIndex)}
                           onMouseDown={() => selectResult(item)}
                         >
                           <div className="truncate">{item.label}</div>