gistda-sphere-react 1.0.0 → 1.0.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "gistda-sphere-react",
-  "version": "1.0.0",
+  "version": "1.0.1",
   "description": "React wrapper library for GISTDA Sphere Map API with TypeScript support",
   "main": "dist/index.js",
   "module": "dist/index.mjs",
@@ -40,19 +40,19 @@
   "author": "dulapahv",
   "license": "MIT",
   "peerDependencies": {
-    "react": ">=18.0.0",
-    "react-dom": ">=18.0.0"
+    "react": ">=19.0.0",
+    "react-dom": ">=19.0.0"
   },
   "devDependencies": {
     "@biomejs/biome": "^2.3.13",
     "@testing-library/jest-dom": "^6.9.1",
     "@testing-library/react": "^16.0.0",
-    "@types/react": "^18.2.0",
-    "@types/react-dom": "^18.2.0",
+    "@types/react": "^19.0.0",
+    "@types/react-dom": "^19.0.0",
     "@vitest/coverage-v8": "^2.0.0",
     "jsdom": "^25.0.0",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
     "tsup": "^8.0.0",
     "typescript": "^5.3.0",
     "ultracite": "^7.1.3",

package/src/components/Circle.tsx

@@ -1,4 +1,4 @@
-import { forwardRef, useEffect, useImperativeHandle, useRef } from "react";
+import { type Ref, useEffect, useImperativeHandle, useRef } from "react";
 import { useMapContext } from "../context/MapContext";
 import { useSphereContext } from "../context/SphereContext";
 import type {
@@ -11,9 +11,20 @@ import type {
   SphereCircle,
 } from "../types";
 
+export interface CircleRef {
+  getCircle(): SphereCircle | null;
+  togglePopup(show?: boolean, location?: Location): void;
+  getCenter(): Location | null;
+  getBound(): Bound | null;
+  getArea(language?: string): number | string | null;
+  getRadius(language?: string): number | string | null;
+  updateStyle(options: Partial<GeometryOptions>): void;
+}
+
 export interface CircleProps {
   center: Location;
   radius: number;
+  ref?: Ref<CircleRef>;
   title?: string;
   detail?: string;
   popup?: PopupOptions;
@@ -30,37 +41,25 @@ export interface CircleProps {
   onDrop?: (circle: SphereCircle) => void;
 }
 
-export interface CircleRef {
-  getCircle(): SphereCircle | null;
-  togglePopup(show?: boolean, location?: Location): void;
-  getCenter(): Location | null;
-  getBound(): Bound | null;
-  getArea(language?: string): number | string | null;
-  getRadius(language?: string): number | string | null;
-  updateStyle(options: Partial<GeometryOptions>): void;
-}
-
-export const Circle = forwardRef<CircleRef, CircleProps>(function Circle(
-  {
-    center,
-    radius,
-    title,
-    detail,
-    popup,
-    visibleRange,
-    lineWidth,
-    lineColor,
-    fillColor,
-    lineStyle,
-    clickable,
-    draggable,
-    zIndex,
-    onClick,
-    onDrag,
-    onDrop,
-  },
-  ref
-) {
+export function Circle({
+  center,
+  radius,
+  ref,
+  title,
+  detail,
+  popup,
+  visibleRange,
+  lineWidth,
+  lineColor,
+  fillColor,
+  lineStyle,
+  clickable,
+  draggable,
+  zIndex,
+  onClick,
+  onDrag,
+  onDrop,
+}: CircleProps) {
   const { map, isReady } = useMapContext();
   const { sphere } = useSphereContext();
   const circleRef = useRef<SphereCircle | null>(null);
@@ -184,6 +183,4 @@ export const Circle = forwardRef<CircleRef, CircleProps>(function Circle(
   );
 
   return null;
-});
-
-export default Circle;
+}

package/src/components/Dot.tsx

@@ -1,10 +1,17 @@
-import { forwardRef, useEffect, useImperativeHandle, useRef } from "react";
+import { type Ref, useEffect, useImperativeHandle, useRef } from "react";
 import { useMapContext } from "../context/MapContext";
 import { useSphereContext } from "../context/SphereContext";
 import type { GeometryOptions, Location, Range, SphereDot } from "../types";
 
+export interface DotRef {
+  getDot(): SphereDot | null;
+  setPosition(location: Location): void;
+  getPosition(): Location | null;
+}
+
 export interface DotProps {
   position: Location;
+  ref?: Ref<DotRef>;
   title?: string;
   detail?: string;
   visibleRange?: Range;
@@ -18,29 +25,21 @@ export interface DotProps {
   onDrop?: (dot: SphereDot, location: Location) => void;
 }
 
-export interface DotRef {
-  getDot(): SphereDot | null;
-  setPosition(location: Location): void;
-  getPosition(): Location | null;
-}
-
-export const Dot = forwardRef<DotRef, DotProps>(function Dot(
-  {
-    position,
-    title,
-    detail,
-    visibleRange,
-    lineWidth,
-    lineColor,
-    clickable,
-    draggable,
-    zIndex,
-    onClick,
-    onDrag,
-    onDrop,
-  },
-  ref
-) {
+export function Dot({
+  position,
+  ref,
+  title,
+  detail,
+  visibleRange,
+  lineWidth,
+  lineColor,
+  clickable,
+  draggable,
+  zIndex,
+  onClick,
+  onDrag,
+  onDrop,
+}: DotProps) {
   const { map, isReady } = useMapContext();
   const { sphere } = useSphereContext();
   const dotRef = useRef<SphereDot | null>(null);
@@ -145,6 +144,4 @@ export const Dot = forwardRef<DotRef, DotProps>(function Dot(
   );
 
   return null;
-});
-
-export default Dot;
+}

package/src/components/Marker.tsx

@@ -1,4 +1,4 @@
-import { forwardRef, useEffect, useImperativeHandle, useRef } from "react";
+import { type Ref, useEffect, useImperativeHandle, useRef } from "react";
 import { useMapContext } from "../context/MapContext";
 import { useSphereContext } from "../context/SphereContext";
 import type {
@@ -10,8 +10,16 @@ import type {
   SphereMarker,
 } from "../types";
 
+export interface MarkerRef {
+  getMarker(): SphereMarker | null;
+  togglePopup(show?: boolean): void;
+  setPosition(location: Location, animate?: boolean): void;
+  setRotation(angle: number): void;
+}
+
 export interface MarkerProps {
   position: Location;
+  ref?: Ref<MarkerRef>;
   icon?: Icon;
   title?: string;
   detail?: string;
@@ -28,33 +36,24 @@ export interface MarkerProps {
   onLeave?: (marker: SphereMarker) => void;
 }
 
-export interface MarkerRef {
-  getMarker(): SphereMarker | null;
-  togglePopup(show?: boolean): void;
-  setPosition(location: Location, animate?: boolean): void;
-  setRotation(angle: number): void;
-}
-
-export const Marker = forwardRef<MarkerRef, MarkerProps>(function Marker(
-  {
-    position,
-    icon,
-    title,
-    detail,
-    popup,
-    visibleRange,
-    clickable,
-    draggable,
-    zIndex,
-    rotate,
-    onClick,
-    onDrag,
-    onDrop,
-    onHover,
-    onLeave,
-  },
-  ref
-) {
+export function Marker({
+  position,
+  ref,
+  icon,
+  title,
+  detail,
+  popup,
+  visibleRange,
+  clickable,
+  draggable,
+  zIndex,
+  rotate,
+  onClick,
+  onDrag,
+  onDrop,
+  onHover,
+  onLeave,
+}: MarkerProps) {
   const { map, isReady } = useMapContext();
   const { sphere } = useSphereContext();
   const markerRef = useRef<SphereMarker | null>(null);
@@ -199,6 +198,4 @@ export const Marker = forwardRef<MarkerRef, MarkerProps>(function Marker(
   );
 
   return null;
-});
-
-export default Marker;
+}

package/src/components/Polygon.tsx

@@ -1,4 +1,4 @@
-import { forwardRef, useEffect, useImperativeHandle, useRef } from "react";
+import { type Ref, useEffect, useImperativeHandle, useRef } from "react";
 import { useMapContext } from "../context/MapContext";
 import { useSphereContext } from "../context/SphereContext";
 import type {
@@ -12,8 +12,21 @@ import type {
   SpherePolygon,
 } from "../types";
 
+export interface PolygonRef {
+  getPolygon(): SpherePolygon | null;
+  togglePopup(show?: boolean, location?: Location): void;
+  getPivot(): Location | null;
+  getCentroid(): Location | null;
+  getBound(): Bound | null;
+  getArea(language?: string): number | string | null;
+  rotate(angle: number): void;
+  updateStyle(options: Partial<GeometryOptions>): void;
+  toGeoJSON(): object | null;
+}
+
 export interface PolygonProps {
   positions: Location[];
+  ref?: Ref<PolygonRef>;
   title?: string;
   detail?: string;
   label?: string;
@@ -35,43 +48,29 @@ export interface PolygonProps {
   onDrop?: (polygon: SpherePolygon) => void;
 }
 
-export interface PolygonRef {
-  getPolygon(): SpherePolygon | null;
-  togglePopup(show?: boolean, location?: Location): void;
-  getPivot(): Location | null;
-  getCentroid(): Location | null;
-  getBound(): Bound | null;
-  getArea(language?: string): number | string | null;
-  rotate(angle: number): void;
-  updateStyle(options: Partial<GeometryOptions>): void;
-  toGeoJSON(): object | null;
-}
-
-export const Polygon = forwardRef<PolygonRef, PolygonProps>(function Polygon(
-  {
-    positions,
-    title,
-    detail,
-    label,
-    labelOptions,
-    popup,
-    visibleRange,
-    lineWidth,
-    lineColor,
-    fillColor,
-    lineStyle,
-    pivot,
-    clickable,
-    draggable,
-    pointer,
-    zIndex,
-    editable,
-    onClick,
-    onDrag,
-    onDrop,
-  },
+export function Polygon({
+  positions,
   ref,
-) {
+  title,
+  detail,
+  label,
+  labelOptions,
+  popup,
+  visibleRange,
+  lineWidth,
+  lineColor,
+  fillColor,
+  lineStyle,
+  pivot,
+  clickable,
+  draggable,
+  pointer,
+  zIndex,
+  editable,
+  onClick,
+  onDrag,
+  onDrop,
+}: PolygonProps) {
   const { map, isReady } = useMapContext();
   const { sphere } = useSphereContext();
   const polygonRef = useRef<SpherePolygon | null>(null);
@@ -214,10 +213,8 @@ export const Polygon = forwardRef<PolygonRef, PolygonProps>(function Polygon(
       },
       toGeoJSON: () => polygonRef.current?.toJSON() ?? null,
     }),
-    [],
+    []
   );
 
   return null;
-});
-
-export default Polygon;
+}