@d3-maps/react 0.1.0

package/README.md

@@ -0,0 +1,54 @@
+# @d3-maps/react
+
+`@d3-maps/react` provides React bindings for `@d3-maps/core` to build SVG maps with React, [d3](https://github.com/d3/d3) and [TopoJSON-client](https://github.com/TopoJSON/TopoJSON-client).
+
+[docs](https://souljorje.github.io/d3-maps)
+
+## Installation
+
+Requires React 19+
+
+Next.js App Router: `@d3-maps/react` entrypoints are client-only (`'use client'`), so import them from Client Components  
+React Server Components entrypoints are planned
+
+npm
+
+```bash
+npm install @d3-maps/react
+```
+
+pnpm
+
+```bash
+pnpm add @d3-maps/react
+```
+
+bun
+
+```bash
+bun add @d3-maps/react
+```
+
+## Usage
+
+```tsx
+import { Map, MapFeatures } from '@d3-maps/react'
+
+export function App({ mapData }: { mapData: unknown }) {
+  return (
+    <Map data={mapData}>
+      <MapFeatures />
+    </Map>
+  )
+}
+```
+
+## Styling
+
+Importing `@d3-maps/react` automatically includes `@d3-maps/core/index.css`
+
+If you need strict stylesheet ordering, load your global reset/theme styles before importing the adapter entry
+
+## License
+
+MIT licensed. Copyright © 2020 Georgii Bukharov. See [LICENCE](../../LICENCE) for more details.

package/dist/index.d.ts

@@ -0,0 +1,599 @@
+import "@d3-maps/core/index.css";
+import * as react0 from "react";
+import { CSSProperties, FocusEventHandler, MouseEventHandler, ReactElement, ReactNode, SVGProps } from "react";
+import { ExtendedFeature, ExtendedFeatureCollection, GeoPath, GeoProjection } from "d3-geo";
+import { mesh } from "topojson-client";
+import { D3ZoomEvent, ZoomBehavior } from "d3-zoom";
+
+//#region ../core/src/lib/mapObject.d.ts
+
+/**
+ * Supported interaction states for map objects.
+ */
+declare const mapObjectState: readonly ["default", "hover", "active"];
+type MapObjectState = typeof mapObjectState[number];
+type MapObjectStyles$1<TStyle> = Partial<Record<MapObjectState, TStyle>>;
+//#endregion
+//#region ../core/src/lib/feature.d.ts
+/**
+ * A GeoJSON Feature used by d3-maps.
+ *
+ * This type allows extra top-level fields to be attached in `dataTransformer` (e.g. choropleth colors).
+ */
+type MapFeature$1 = (ExtendedFeature & Record<string, unknown>) | ExtendedFeature;
+/**
+ * Shared props contract for a single rendered feature.
+ */
+interface MapFeatureProps$1<TStyle = unknown> {
+  data: MapFeature$1;
+  styles?: MapObjectStyles$1<TStyle>;
+  fill?: string;
+  stroke?: string;
+}
+//#endregion
+//#region ../../node_modules/.pnpm/@types+geojson@7946.0.16/node_modules/@types/geojson/index.d.ts
+/**
+ * The valid values for the "type" property of GeoJSON geometry objects.
+ * https://tools.ietf.org/html/rfc7946#section-1.4
+ */
+type GeoJsonGeometryTypes = Geometry["type"];
+/**
+ * The value values for the "type" property of GeoJSON Objects.
+ * https://tools.ietf.org/html/rfc7946#section-1.4
+ */
+type GeoJsonTypes = GeoJSON["type"];
+/**
+ * Bounding box
+ * https://tools.ietf.org/html/rfc7946#section-5
+ */
+type BBox = [number, number, number, number] | [number, number, number, number, number, number];
+/**
+ * A Position is an array of coordinates.
+ * https://tools.ietf.org/html/rfc7946#section-3.1.1
+ * Array should contain between two and three elements.
+ * The previous GeoJSON specification allowed more elements (e.g., which could be used to represent M values),
+ * but the current specification only allows X, Y, and (optionally) Z to be defined.
+ *
+ * Note: the type will not be narrowed down to `[number, number] | [number, number, number]` due to
+ * marginal benefits and the large impact of breaking change.
+ *
+ * See previous discussions on the type narrowing:
+ * - {@link https://github.com/DefinitelyTyped/DefinitelyTyped/pull/21590|Nov 2017}
+ * - {@link https://github.com/DefinitelyTyped/DefinitelyTyped/discussions/67773|Dec 2023}
+ * - {@link https://github.com/DefinitelyTyped/DefinitelyTyped/discussions/71441| Dec 2024}
+ *
+ * One can use a
+ * {@link https://www.typescriptlang.org/docs/handbook/2/narrowing.html#using-type-predicates|user-defined type guard that returns a type predicate}
+ * to determine if a position is a 2D or 3D position.
+ *
+ * @example
+ * import type { Position } from 'geojson';
+ *
+ * type StrictPosition = [x: number, y: number] | [x: number, y: number, z: number]
+ *
+ * function isStrictPosition(position: Position): position is StrictPosition {
+ *   return position.length === 2 || position.length === 3
+ * };
+ *
+ * let position: Position = [-116.91, 45.54];
+ *
+ * let x: number;
+ * let y: number;
+ * let z: number | undefined;
+ *
+ * if (isStrictPosition(position)) {
+ *   // `tsc` would throw an error if we tried to destructure a fourth parameter
+ * 	 [x, y, z] = position;
+ * } else {
+ * 	 throw new TypeError("Position is not a 2D or 3D point");
+ * }
+ */
+type Position = number[];
+/**
+ * The base GeoJSON object.
+ * https://tools.ietf.org/html/rfc7946#section-3
+ * The GeoJSON specification also allows foreign members
+ * (https://tools.ietf.org/html/rfc7946#section-6.1)
+ * Developers should use "&" type in TypeScript or extend the interface
+ * to add these foreign members.
+ */
+interface GeoJsonObject {
+  // Don't include foreign members directly into this type def.
+  // in order to preserve type safety.
+  // [key: string]: any;
+  /**
+   * Specifies the type of GeoJSON object.
+   */
+  type: GeoJsonTypes;
+  /**
+   * Bounding box of the coordinate range of the object's Geometries, Features, or Feature Collections.
+   * The value of the bbox member is an array of length 2*n where n is the number of dimensions
+   * represented in the contained geometries, with all axes of the most southwesterly point
+   * followed by all axes of the more northeasterly point.
+   * The axes order of a bbox follows the axes order of geometries.
+   * https://tools.ietf.org/html/rfc7946#section-5
+   */
+  bbox?: BBox | undefined;
+}
+/**
+ * Union of GeoJSON objects.
+ */
+type GeoJSON<G extends Geometry | null = Geometry, P$1 = GeoJsonProperties> = G | Feature<G, P$1> | FeatureCollection<G, P$1>;
+/**
+ * Geometry object.
+ * https://tools.ietf.org/html/rfc7946#section-3
+ */
+type Geometry = Point$1 | MultiPoint$1 | LineString$1 | MultiLineString$1 | Polygon$1 | MultiPolygon$1 | GeometryCollection$1;
+/**
+ * Point geometry object.
+ * https://tools.ietf.org/html/rfc7946#section-3.1.2
+ */
+interface Point$1 extends GeoJsonObject {
+  type: "Point";
+  coordinates: Position;
+}
+/**
+ * MultiPoint geometry object.
+ *  https://tools.ietf.org/html/rfc7946#section-3.1.3
+ */
+interface MultiPoint$1 extends GeoJsonObject {
+  type: "MultiPoint";
+  coordinates: Position[];
+}
+/**
+ * LineString geometry object.
+ * https://tools.ietf.org/html/rfc7946#section-3.1.4
+ */
+interface LineString$1 extends GeoJsonObject {
+  type: "LineString";
+  coordinates: Position[];
+}
+/**
+ * MultiLineString geometry object.
+ * https://tools.ietf.org/html/rfc7946#section-3.1.5
+ */
+interface MultiLineString$1 extends GeoJsonObject {
+  type: "MultiLineString";
+  coordinates: Position[][];
+}
+/**
+ * Polygon geometry object.
+ * https://tools.ietf.org/html/rfc7946#section-3.1.6
+ */
+interface Polygon$1 extends GeoJsonObject {
+  type: "Polygon";
+  coordinates: Position[][];
+}
+/**
+ * MultiPolygon geometry object.
+ * https://tools.ietf.org/html/rfc7946#section-3.1.7
+ */
+interface MultiPolygon$1 extends GeoJsonObject {
+  type: "MultiPolygon";
+  coordinates: Position[][][];
+}
+/**
+ * Geometry Collection
+ * https://tools.ietf.org/html/rfc7946#section-3.1.8
+ */
+interface GeometryCollection$1<G extends Geometry = Geometry> extends GeoJsonObject {
+  type: "GeometryCollection";
+  geometries: G[];
+}
+type GeoJsonProperties = {
+  [name: string]: any;
+} | null;
+/**
+ * A feature object which contains a geometry and associated properties.
+ * https://tools.ietf.org/html/rfc7946#section-3.2
+ */
+interface Feature<G extends Geometry | null = Geometry, P$1 = GeoJsonProperties> extends GeoJsonObject {
+  type: "Feature";
+  /**
+   * The feature's geometry
+   */
+  geometry: G;
+  /**
+   * A value that uniquely identifies this feature in a
+   * https://tools.ietf.org/html/rfc7946#section-3.2.
+   */
+  id?: string | number | undefined;
+  /**
+   * Properties associated with this feature.
+   */
+  properties: P$1;
+}
+/**
+ * A collection of feature objects.
+ *  https://tools.ietf.org/html/rfc7946#section-3.3
+ */
+interface FeatureCollection<G extends Geometry | null = Geometry, P$1 = GeoJsonProperties> extends GeoJsonObject {
+  type: "FeatureCollection";
+  features: Array<Feature<G, P$1>>;
+}
+//#endregion
+//#region ../../node_modules/.pnpm/@types+topojson-specification@1.0.5/node_modules/@types/topojson-specification/index.d.ts
+// ---------------------------------------------------------------
+// TopoJSON Format Specification
+// ---------------------------------------------------------------
+
+// See: https://github.com/topojson/topojson-specification/
+
+// 2. TopoJSON Objects
+interface TopoJSON {
+  type: "Topology" | GeoJsonGeometryTypes | null;
+  bbox?: BBox | undefined;
+}
+// 2.1. Topology Objects
+interface Topology<T extends Objects<Properties> = Objects<Properties>> extends TopoJSON {
+  type: "Topology";
+  objects: T;
+  arcs: Arc[];
+  transform?: Transform | undefined;
+}
+// 2.1.1. Positions
+type Positions = number[];
+// at least two elements
+
+// 2.1.2. Transforms
+interface Transform {
+  scale: [number, number];
+  translate: [number, number];
+}
+// 2.1.3. Arcs
+type Arc = Positions[];
+// at least two elements
+
+// 2.1.4. Arc Indexes
+type ArcIndexes = number[];
+// 2.1.5. Objects
+type Properties = GeoJsonProperties;
+interface Objects<P$1 extends Properties = {}> {
+  [key: string]: GeometryObject<P$1>;
+}
+// 2.2. Geometry Objects
+interface GeometryObjectA<P$1 extends Properties = {}> extends TopoJSON {
+  type: GeoJsonGeometryTypes | null;
+  id?: number | string | undefined;
+  properties?: P$1 | undefined;
+}
+type GeometryObject<P$1 extends Properties = {}> = Point<P$1> | MultiPoint<P$1> | LineString<P$1> | MultiLineString<P$1> | Polygon<P$1> | MultiPolygon<P$1> | GeometryCollection<P$1> | NullObject;
+// 2.2.1. Point
+interface Point<P$1 extends Properties = {}> extends GeometryObjectA<P$1> {
+  type: "Point";
+  coordinates: Positions;
+}
+// 2.2.2. MultiPoint
+interface MultiPoint<P$1 extends Properties = {}> extends GeometryObjectA<P$1> {
+  type: "MultiPoint";
+  coordinates: Positions[];
+}
+// 2.2.3. LineString
+interface LineString<P$1 extends Properties = {}> extends GeometryObjectA<P$1> {
+  type: "LineString";
+  arcs: ArcIndexes;
+}
+// 2.2.4. MultiLineString
+interface MultiLineString<P$1 extends Properties = {}> extends GeometryObjectA<P$1> {
+  type: "MultiLineString";
+  arcs: ArcIndexes[];
+}
+// 2.2.5. Polygon
+interface Polygon<P$1 extends Properties = {}> extends GeometryObjectA<P$1> {
+  type: "Polygon";
+  arcs: ArcIndexes[];
+}
+// 2.2.6. MultiPolygon
+interface MultiPolygon<P$1 extends Properties = {}> extends GeometryObjectA<P$1> {
+  type: "MultiPolygon";
+  arcs: ArcIndexes[][];
+}
+// 2.2.7. Geometry Collection
+interface GeometryCollection<P$1 extends Properties = {}> extends GeometryObjectA<P$1> {
+  type: "GeometryCollection";
+  geometries: Array<GeometryObject<P$1>>;
+}
+// More
+interface NullObject extends GeometryObjectA {
+  type: null;
+}
+//#endregion
+//#region ../core/src/lib/utils.d.ts
+type AnyFn = (...args: any) => any;
+/**
+ * Extracts a union of parameter tuples from a (possibly overloaded) function type.
+ *
+ * TypeScript's built-in `Parameters<F>` only captures the *last* overload, which breaks typing
+ * for overloaded getter/setter APIs (common in d3), where the setter overload might not be last.
+ *
+ * Notes:
+ * - This helper supports up to 5 overload signatures (adjust if needed).
+ * - Getter overloads like `(): T` are filtered out later via `Exclude<..., []>` when we build
+ *   setter-only config types.
+ */
+type OverloadedArgs<F> = F extends {
+  (...a: infer A1): any;
+  (...a: infer A2): any;
+  (...a: infer A3): any;
+  (...a: infer A4): any;
+  (...a: infer A5): any;
+} ? A1 | A2 | A3 | A4 | A5 : F extends {
+  (...a: infer A1): any;
+  (...a: infer A2): any;
+  (...a: infer A3): any;
+  (...a: infer A4): any;
+} ? A1 | A2 | A3 | A4 : F extends {
+  (...a: infer A1): any;
+  (...a: infer A2): any;
+  (...a: infer A3): any;
+} ? A1 | A2 | A3 : F extends {
+  (...a: infer A1): any;
+  (...a: infer A2): any;
+} ? A1 | A2 : F extends ((...a: infer A1) => any) ? A1 : never;
+/**
+ * Removes 0-arg overloads (getters), leaving only setter-style overload argument tuples.
+ */
+type SetterArgs<F> = Exclude<OverloadedArgs<F>, []>;
+/**
+ * True if the function has at least one overload that accepts arguments (i.e. a setter overload).
+ */
+type HasArgs<F> = [SetterArgs<F>] extends [never] ? false : true;
+type OwnKeys<T> = T extends AnyFn ? Exclude<keyof T, keyof CallableFunction> : keyof T;
+/**
+ * Converts method parameters to modifiers values
+ * - single non-array arg: `arg` | `[arg]`
+ * - multiple args/single array wrapped with array
+ */
+type ModifierArgs<P$1 extends unknown[]> = P$1 extends [infer Only] ? Only extends readonly unknown[] ? [Only] : Only | [Only] : P$1;
+/**
+ * Maps methods with args to modifiers
+ *
+ * @example
+ * type X = {
+ *   a: string;  // not a function - will be ignored
+ *   b(): void;  // has no arguments - will be ignored
+ *   c(x: number): void;
+ *   d(x: number, y: string): void;
+ *   e(xs: string[]): void;
+ * }
+ *
+ * type R = MethodsToModifiers<X>
+ * {
+ *   c: number | [number];
+ *   d: [number, string];
+ *   e: [string[]]; // forced wrapper (arg is array)
+ * }
+ */
+type MethodsToModifiers<T extends object> = { [K in OwnKeys<T> as Extract<T[K], AnyFn> extends never ? never : HasArgs<Extract<T[K], AnyFn>> extends true ? K : never]?: ModifierArgs<Extract<SetterArgs<Extract<T[K], AnyFn>>, unknown[]>> };
+//#endregion
+//#region ../core/src/lib/map.d.ts
+type MapMesh$1 = ReturnType<typeof mesh>;
+type MapData = ExtendedFeatureCollection | Topology;
+type DataTransformer = (features: MapFeature$1[]) => MapFeature$1[];
+/**
+ * Extra projection method calls to apply before rendering.
+ *
+ * Use projection method names as keys and method arguments as values.
+ * Example: `{ center: [[0, 20]], rotate: [[0, 0, 0]], scale: 160 }`
+ *
+ * @see https://d3js.org/d3-geo/projection
+ */
+interface ProjectionConfig extends Omit<MethodsToModifiers<GeoProjection>, 'invert' | 'stream'> {}
+/**
+ * Input configuration for creating a map context.
+ *
+ * In adapters, this is usually passed as component props.
+ */
+interface MapConfig {
+  width?: number;
+  height?: number;
+  aspectRatio?: number;
+  /**
+   * Projection factory from d3-geo (or a compatible implementation).
+   *
+   * Example: `geoNaturalEarth1`.
+   */
+  projection?: () => GeoProjection;
+  /**
+   * Projection method arguments passed to the created projection
+   */
+  projectionConfig?: ProjectionConfig;
+  /**
+   * TopoJSON or GeoJSON input.
+   *
+   * TopoJSON is automatically converted to GeoJSON features.
+   */
+  data: MapData;
+  /**
+   * Optional feature transformer (filter/augment/normalize features).
+   */
+  dataTransformer?: DataTransformer;
+}
+/**
+ * Fully computed, framework-agnostic map context.
+ *
+ * Adapters provide this context to child layers (features, markers, custom SVG).
+ */
+interface MapContext {
+  width: number;
+  height: number;
+  projection?: GeoProjection;
+  features: MapFeature$1[];
+  mesh?: MapMesh$1;
+  path: GeoPath;
+  renderPath: (feature: MapFeature$1) => ReturnType<GeoPath>;
+  renderMesh: () => ReturnType<GeoPath>;
+}
+//#endregion
+//#region ../core/src/lib/marker.d.ts
+type MapMarkerCoordinates = [number, number];
+/**
+ * Shared props contract for marker layers.
+ */
+interface MapMarkerProps$1<TStyle = unknown> {
+  coordinates?: MapMarkerCoordinates;
+  styles?: MapObjectStyles$1<TStyle>;
+}
+//#endregion
+//#region ../core/src/lib/zoom.d.ts
+interface DefaultZoomBehavior extends ZoomBehavior<SVGSVGElement, unknown> {}
+/**
+ * Extra zoom method calls to apply before rendering.
+ *
+ * Use zoom method names as keys and method arguments as values.
+ * Example: `{ scaleExtent: [[2, 9]], translateExtent: [[[0, 0], [10, 10]]] }`
+ *
+ * @see https://d3js.org/d3-zoom
+ */
+interface ZoomModifiers extends MethodsToModifiers<DefaultZoomBehavior> {}
+interface ZoomProps {
+  center?: [number, number];
+  zoom?: number;
+  minZoom?: number;
+  maxZoom?: number;
+  config?: ZoomModifiers;
+}
+interface ZoomEvent extends D3ZoomEvent<SVGSVGElement, unknown> {}
+//#endregion
+//#region src/components/Map.d.ts
+type MapRenderProp = (context: MapContext) => ReactNode;
+interface MapProps extends MapConfig, Omit<SVGProps<SVGSVGElement>, keyof MapConfig | 'children'> {
+  children?: ReactNode | MapRenderProp;
+}
+declare function Map({
+  width,
+  height,
+  aspectRatio,
+  projection,
+  projectionConfig,
+  data,
+  dataTransformer,
+  children,
+  className,
+  ...svgProps
+}: MapProps): ReactElement;
+//#endregion
+//#region src/components/MapFeature.d.ts
+interface MapFeatureProps extends MapFeatureProps$1<CSSProperties>, Omit<SVGProps<SVGPathElement>, 'children' | 'd' | 'style'> {}
+declare function MapFeature({
+  data,
+  styles,
+  fill,
+  stroke,
+  onMouseEnter,
+  onMouseLeave,
+  onMouseDown,
+  onMouseUp,
+  onClick,
+  onFocus,
+  onBlur,
+  ...pathProps
+}: MapFeatureProps): ReactElement | null;
+//#endregion
+//#region src/hooks/useMapObject.d.ts
+type MapObjectStyle = CSSProperties;
+type MapObjectStyles = MapObjectStyles$1<MapObjectStyle>;
+interface UseMapObjectOptions<TElement extends Element> {
+  styles?: MapObjectStyles;
+  onMouseEnter?: MouseEventHandler<TElement>;
+  onMouseLeave?: MouseEventHandler<TElement>;
+  onMouseDown?: MouseEventHandler<TElement>;
+  onMouseUp?: MouseEventHandler<TElement>;
+  onClick?: MouseEventHandler<TElement>;
+  onFocus?: FocusEventHandler<TElement>;
+  onBlur?: FocusEventHandler<TElement>;
+}
+interface UseMapObjectResult<TElement extends Element> {
+  computedStyle: MapObjectStyle | undefined;
+  onMouseEnter: MouseEventHandler<TElement>;
+  onMouseLeave: MouseEventHandler<TElement>;
+  onMouseDown: MouseEventHandler<TElement>;
+  onMouseUp: MouseEventHandler<TElement>;
+  onClick: MouseEventHandler<TElement>;
+  onFocus: FocusEventHandler<TElement>;
+  onBlur: FocusEventHandler<TElement>;
+}
+declare function useMapObject<TElement extends Element>(options: UseMapObjectOptions<TElement>): UseMapObjectResult<TElement>;
+//#endregion
+//#region src/components/MapFeatures.d.ts
+interface MapFeaturesRenderProps {
+  features: MapFeature$1[];
+}
+type MapFeaturesChildren = ReactNode | ((props: MapFeaturesRenderProps) => ReactNode);
+interface MapFeaturesProps {
+  idKey?: string;
+  fill?: string;
+  stroke?: string;
+  styles?: MapObjectStyles;
+  children?: MapFeaturesChildren;
+}
+declare function MapFeatures({
+  idKey,
+  fill,
+  stroke,
+  styles,
+  children
+}: MapFeaturesProps): ReactElement;
+//#endregion
+//#region src/components/MapMarker.d.ts
+interface MapMarkerProps extends MapMarkerProps$1<CSSProperties>, Omit<SVGProps<SVGGElement>, 'style'> {}
+declare function MapMarker({
+  coordinates,
+  styles,
+  children,
+  onMouseEnter,
+  onMouseLeave,
+  onMouseDown,
+  onMouseUp,
+  onClick,
+  onFocus,
+  onBlur,
+  ...groupProps
+}: MapMarkerProps): ReactElement;
+//#endregion
+//#region src/components/MapMesh.d.ts
+interface MapMeshProps extends Omit<SVGProps<SVGPathElement>, 'children' | 'd' | 'style'> {
+  fill?: string;
+  stroke?: string;
+  styles?: MapObjectStyles;
+}
+declare function MapMesh({
+  fill,
+  stroke,
+  styles,
+  onMouseEnter,
+  onMouseLeave,
+  onMouseDown,
+  onMouseUp,
+  onClick,
+  onFocus,
+  onBlur,
+  ...pathProps
+}: MapMeshProps): ReactElement | null;
+//#endregion
+//#region src/components/MapZoom.d.ts
+interface MapZoomProps extends ZoomProps, Omit<SVGProps<SVGGElement>, 'children' | 'onZoom'> {
+  children?: ReactNode;
+  onZoomStart?: (event: ZoomEvent) => void;
+  onZoom?: (event: ZoomEvent) => void;
+  onZoomEnd?: (event: ZoomEvent) => void;
+}
+declare function MapZoom({
+  center,
+  zoom,
+  minZoom,
+  maxZoom,
+  config,
+  onZoomStart,
+  onZoom,
+  onZoomEnd,
+  children,
+  className,
+  ...groupProps
+}: MapZoomProps): ReactElement;
+//#endregion
+//#region src/hooks/useMapContext.d.ts
+declare const MapContextValue: react0.Context<MapContext | undefined>;
+declare function useMapContext(): MapContext | undefined;
+//#endregion
+export { Map, MapContextValue, MapFeature, MapFeatures, MapMarker, MapMesh, MapObjectStyle, MapObjectStyles, MapZoom, UseMapObjectOptions, UseMapObjectResult, useMapContext, useMapObject };

package/dist/index.iife.js

@@ -0,0 +1 @@
+"use client";(function(e,t,n,r,i){let a=(0,r.createContext)(void 0);function o(){return(0,r.useContext)(a)}function s({context:e,children:t}){return(0,i.jsx)(a.Provider,{value:e,children:t})}function c(e){return typeof e==`function`}function l({width:e,height:t,aspectRatio:a,projection:o,projectionConfig:l,data:u,dataTransformer:d,children:f,className:p,...m}){let h=(0,r.useMemo)(()=>(0,n.makeMapContext)({width:e,height:t,aspectRatio:a,projection:o,projectionConfig:l,data:u,dataTransformer:d}),[e,t,a,o,l,u,d]),g=c(f)?f(h):f;return(0,i.jsx)(s,{context:h,children:(0,i.jsx)(`svg`,{...m,className:`d3-map ${p??``}`,viewBox:`0 0 ${h.width} ${h.height}`,children:g})})}function u(e){let t=(0,r.useRef)(e);return t.current=e,t}function d(e){let[t,i]=(0,r.useState)(`default`),a=u(e.onMouseEnter),o=u(e.onMouseLeave),s=u(e.onMouseDown),c=u(e.onMouseUp),l=u(e.onClick),d=u(e.onFocus),f=u(e.onBlur),p=(0,r.useCallback)(e=>{i(t=>{let r=(0,n.getObjectStateUpdate)(e);return t===r?t:r})},[]);return{computedStyle:(0,r.useMemo)(()=>(0,n.resolveObjectStyle)(t,e.styles),[t,e.styles]),onMouseEnter:(0,r.useCallback)(e=>{p(`mouseenter`),a.current?.(e)},[p]),onMouseLeave:(0,r.useCallback)(e=>{p(`mouseleave`),o.current?.(e)},[p]),onMouseDown:(0,r.useCallback)(e=>{p(`mousedown`),s.current?.(e)},[p]),onMouseUp:(0,r.useCallback)(e=>{p(`mouseup`),c.current?.(e)},[p]),onClick:(0,r.useCallback)(e=>{p(`mouseup`),l.current?.(e)},[p]),onFocus:(0,r.useCallback)(e=>{p(`focus`),d.current?.(e)},[p]),onBlur:(0,r.useCallback)(e=>{p(`blur`),f.current?.(e)},[p])}}function f({data:e,styles:t,fill:n,stroke:a,onMouseEnter:s,onMouseLeave:c,onMouseDown:l,onMouseUp:u,onClick:f,onFocus:p,onBlur:m,...h}){let g=o(),_=(0,r.useMemo)(()=>g?.renderPath(e)??null,[g,e]),{computedStyle:v,onMouseEnter:y,onMouseLeave:b,onMouseDown:x,onMouseUp:S,onClick:C,onFocus:w,onBlur:T}=d({styles:t,onMouseEnter:s,onMouseLeave:c,onMouseDown:l,onMouseUp:u,onClick:f,onFocus:p,onBlur:m});return _?(0,i.jsx)(`path`,{...h,d:_,style:v,fill:n,stroke:a,onMouseEnter:y,onMouseLeave:b,onMouseDown:x,onMouseUp:S,onClick:C,onFocus:w,onBlur:T}):null}function p(e){return typeof e==`function`}function m({idKey:e=`id`,fill:t,stroke:r,styles:a,children:s}){let c=o()?.features??[];return(0,i.jsx)(`g`,{children:(p(s)?s({features:c}):s)??c.map((o,s)=>(0,i.jsx)(f,{data:o,fill:t,stroke:r,styles:a},(0,n.getFeatureKey)(o,e,s)))})}let h=[0,0];function g({coordinates:e=h,styles:t,children:a,onMouseEnter:s,onMouseLeave:c,onMouseDown:l,onMouseUp:u,onClick:f,onFocus:p,onBlur:m,...g}){let _=o(),v=(0,r.useMemo)(()=>(0,n.getMarkerTransform)(_,e),[_,e[0],e[1]]),{computedStyle:y,onMouseEnter:b,onMouseLeave:x,onMouseDown:S,onMouseUp:C,onClick:w,onFocus:T,onBlur:E}=d({styles:t,onMouseEnter:s,onMouseLeave:c,onMouseDown:l,onMouseUp:u,onClick:f,onFocus:p,onBlur:m});return(0,i.jsx)(`g`,{...g,transform:v,style:y,onMouseEnter:b,onMouseLeave:x,onMouseDown:S,onMouseUp:C,onClick:w,onFocus:T,onBlur:E,children:a})}function _({fill:e=`none`,stroke:t,styles:n,onMouseEnter:a,onMouseLeave:s,onMouseDown:c,onMouseUp:l,onClick:u,onFocus:f,onBlur:p,...m}){let h=o(),g=(0,r.useMemo)(()=>h?.renderMesh()??null,[h]),{computedStyle:_,onMouseEnter:v,onMouseLeave:y,onMouseDown:b,onMouseUp:x,onClick:S,onFocus:C,onBlur:w}=d({styles:n,onMouseEnter:a,onMouseLeave:s,onMouseDown:c,onMouseUp:l,onClick:u,onFocus:f,onBlur:p});return g?(0,i.jsx)(`path`,{...m,d:g,style:_,fill:e,stroke:t,onMouseEnter:v,onMouseLeave:y,onMouseDown:b,onMouseUp:x,onClick:S,onFocus:C,onBlur:w}):null}function v({center:e,zoom:t,minZoom:a=n.ZOOM_DEFAULTS.minZoom,maxZoom:s=n.ZOOM_DEFAULTS.maxZoom,config:c,onZoomStart:l,onZoom:d,onZoomEnd:f,children:p,className:m,...h}){let g=(0,r.useRef)(null),_=(0,r.useRef)(!1),v=o(),y=u(l),b=u(d),x=u(f),S=e??n.ZOOM_DEFAULTS.center,C=t??n.ZOOM_DEFAULTS.zoom,w=S[0],T=S[1],E=(0,r.useMemo)(()=>(0,n.createZoomBehavior)(v,{minZoom:a,maxZoom:s,config:c,onZoomStart:e=>{y.current?.(e)},onZoom:e=>{(0,n.applyZoomGroupTransform)(g.current,e.transform),b.current?.(e)},onZoomEnd:e=>{x.current?.(e)}}),[v,a,s,c]);(0,r.useEffect)(()=>{_.current=!0,(0,n.setupZoom)({element:g.current,behavior:E,center:S,zoom:C})},[E]),(0,r.useEffect)(()=>{if(_.current){_.current=!1;return}(0,n.applyZoomTransform)({element:g.current,behavior:E,center:[w,T],zoom:C})},[E,w,T,C]);let D=m?`d3-map-zoom ${m}`:`d3-map-zoom`;return(0,i.jsx)(`g`,{...h,ref:g,className:D,children:p})}e.Map=l,e.MapContextValue=a,e.MapFeature=f,e.MapFeatures=m,e.MapMarker=g,e.MapMesh=_,e.MapZoom=v,e.useMapContext=o,e.useMapObject=d})(this.D3Maps=this.D3Maps||{},_d3_maps_core_index_css,D3Maps,React,ReactJSXRuntime);

package/dist/index.js

@@ -0,0 +1,309 @@
+'use client';
+
+import "@d3-maps/core/index.css";
+import { ZOOM_DEFAULTS, applyZoomGroupTransform, applyZoomTransform, createZoomBehavior, getFeatureKey, getMarkerTransform, getObjectStateUpdate, makeMapContext, resolveObjectStyle, setupZoom } from "@d3-maps/core";
+import { createContext, useCallback, useContext, useEffect, useMemo, useRef, useState } from "react";
+import { jsx } from "react/jsx-runtime";
+
+//#region src/hooks/useMapContext.ts
+const MapContextValue = createContext(void 0);
+function useMapContext() {
+	return useContext(MapContextValue);
+}
+
+//#endregion
+//#region src/components/MapContext.tsx
+function MapProvider({ context, children }) {
+	return /* @__PURE__ */ jsx(MapContextValue.Provider, {
+		value: context,
+		children
+	});
+}
+
+//#endregion
+//#region src/components/Map.tsx
+function isRenderProp$1(children) {
+	return typeof children === "function";
+}
+function Map({ width, height, aspectRatio, projection, projectionConfig, data, dataTransformer, children, className, ...svgProps }) {
+	const context = useMemo(() => {
+		return makeMapContext({
+			width,
+			height,
+			aspectRatio,
+			projection,
+			projectionConfig,
+			data,
+			dataTransformer
+		});
+	}, [
+		width,
+		height,
+		aspectRatio,
+		projection,
+		projectionConfig,
+		data,
+		dataTransformer
+	]);
+	const resolvedChildren = isRenderProp$1(children) ? children(context) : children;
+	return /* @__PURE__ */ jsx(MapProvider, {
+		context,
+		children: /* @__PURE__ */ jsx("svg", {
+			...svgProps,
+			className: `d3-map ${className ?? ""}`,
+			viewBox: `0 0 ${context.width} ${context.height}`,
+			children: resolvedChildren
+		})
+	});
+}
+
+//#endregion
+//#region src/hooks/useLatest.ts
+function useLatest(value) {
+	const ref = useRef(value);
+	ref.current = value;
+	return ref;
+}
+
+//#endregion
+//#region src/hooks/useMapObject.ts
+function useMapObject(options) {
+	const [state, setState] = useState("default");
+	const onMouseEnterRef = useLatest(options.onMouseEnter);
+	const onMouseLeaveRef = useLatest(options.onMouseLeave);
+	const onMouseDownRef = useLatest(options.onMouseDown);
+	const onMouseUpRef = useLatest(options.onMouseUp);
+	const onClickRef = useLatest(options.onClick);
+	const onFocusRef = useLatest(options.onFocus);
+	const onBlurRef = useLatest(options.onBlur);
+	const setStateForEvent = useCallback((eventName) => {
+		setState((currentState) => {
+			const nextState = getObjectStateUpdate(eventName);
+			return currentState === nextState ? currentState : nextState;
+		});
+	}, []);
+	return {
+		computedStyle: useMemo(() => {
+			return resolveObjectStyle(state, options.styles);
+		}, [state, options.styles]),
+		onMouseEnter: useCallback((event) => {
+			setStateForEvent("mouseenter");
+			onMouseEnterRef.current?.(event);
+		}, [setStateForEvent]),
+		onMouseLeave: useCallback((event) => {
+			setStateForEvent("mouseleave");
+			onMouseLeaveRef.current?.(event);
+		}, [setStateForEvent]),
+		onMouseDown: useCallback((event) => {
+			setStateForEvent("mousedown");
+			onMouseDownRef.current?.(event);
+		}, [setStateForEvent]),
+		onMouseUp: useCallback((event) => {
+			setStateForEvent("mouseup");
+			onMouseUpRef.current?.(event);
+		}, [setStateForEvent]),
+		onClick: useCallback((event) => {
+			setStateForEvent("mouseup");
+			onClickRef.current?.(event);
+		}, [setStateForEvent]),
+		onFocus: useCallback((event) => {
+			setStateForEvent("focus");
+			onFocusRef.current?.(event);
+		}, [setStateForEvent]),
+		onBlur: useCallback((event) => {
+			setStateForEvent("blur");
+			onBlurRef.current?.(event);
+		}, [setStateForEvent])
+	};
+}
+
+//#endregion
+//#region src/components/MapFeature.tsx
+function MapFeature({ data, styles, fill, stroke, onMouseEnter, onMouseLeave, onMouseDown, onMouseUp, onClick, onFocus, onBlur, ...pathProps }) {
+	const context = useMapContext();
+	const path = useMemo(() => {
+		return context?.renderPath(data) ?? null;
+	}, [context, data]);
+	const { computedStyle, onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave, onMouseDown: handleMouseDown, onMouseUp: handleMouseUp, onClick: handleClick, onFocus: handleFocus, onBlur: handleBlur } = useMapObject({
+		styles,
+		onMouseEnter,
+		onMouseLeave,
+		onMouseDown,
+		onMouseUp,
+		onClick,
+		onFocus,
+		onBlur
+	});
+	return path ? /* @__PURE__ */ jsx("path", {
+		...pathProps,
+		d: path,
+		style: computedStyle,
+		fill,
+		stroke,
+		onMouseEnter: handleMouseEnter,
+		onMouseLeave: handleMouseLeave,
+		onMouseDown: handleMouseDown,
+		onMouseUp: handleMouseUp,
+		onClick: handleClick,
+		onFocus: handleFocus,
+		onBlur: handleBlur
+	}) : null;
+}
+
+//#endregion
+//#region src/components/MapFeatures.tsx
+function isRenderProp(children) {
+	return typeof children === "function";
+}
+function MapFeatures({ idKey = "id", fill, stroke, styles, children }) {
+	const features = useMapContext()?.features ?? [];
+	return /* @__PURE__ */ jsx("g", { children: (isRenderProp(children) ? children({ features }) : children) ?? features.map((feature, index) => /* @__PURE__ */ jsx(MapFeature, {
+		data: feature,
+		fill,
+		stroke,
+		styles
+	}, getFeatureKey(feature, idKey, index))) });
+}
+
+//#endregion
+//#region src/components/MapMarker.tsx
+const DEFAULT_COORDINATES = [0, 0];
+function MapMarker({ coordinates = DEFAULT_COORDINATES, styles, children, onMouseEnter, onMouseLeave, onMouseDown, onMouseUp, onClick, onFocus, onBlur, ...groupProps }) {
+	const context = useMapContext();
+	const transform = useMemo(() => {
+		return getMarkerTransform(context, coordinates);
+	}, [
+		context,
+		coordinates[0],
+		coordinates[1]
+	]);
+	const { computedStyle, onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave, onMouseDown: handleMouseDown, onMouseUp: handleMouseUp, onClick: handleClick, onFocus: handleFocus, onBlur: handleBlur } = useMapObject({
+		styles,
+		onMouseEnter,
+		onMouseLeave,
+		onMouseDown,
+		onMouseUp,
+		onClick,
+		onFocus,
+		onBlur
+	});
+	return /* @__PURE__ */ jsx("g", {
+		...groupProps,
+		transform,
+		style: computedStyle,
+		onMouseEnter: handleMouseEnter,
+		onMouseLeave: handleMouseLeave,
+		onMouseDown: handleMouseDown,
+		onMouseUp: handleMouseUp,
+		onClick: handleClick,
+		onFocus: handleFocus,
+		onBlur: handleBlur,
+		children
+	});
+}
+
+//#endregion
+//#region src/components/MapMesh.tsx
+function MapMesh({ fill = "none", stroke, styles, onMouseEnter, onMouseLeave, onMouseDown, onMouseUp, onClick, onFocus, onBlur, ...pathProps }) {
+	const context = useMapContext();
+	const path = useMemo(() => {
+		return context?.renderMesh() ?? null;
+	}, [context]);
+	const { computedStyle, onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave, onMouseDown: handleMouseDown, onMouseUp: handleMouseUp, onClick: handleClick, onFocus: handleFocus, onBlur: handleBlur } = useMapObject({
+		styles,
+		onMouseEnter,
+		onMouseLeave,
+		onMouseDown,
+		onMouseUp,
+		onClick,
+		onFocus,
+		onBlur
+	});
+	return path ? /* @__PURE__ */ jsx("path", {
+		...pathProps,
+		d: path,
+		style: computedStyle,
+		fill,
+		stroke,
+		onMouseEnter: handleMouseEnter,
+		onMouseLeave: handleMouseLeave,
+		onMouseDown: handleMouseDown,
+		onMouseUp: handleMouseUp,
+		onClick: handleClick,
+		onFocus: handleFocus,
+		onBlur: handleBlur
+	}) : null;
+}
+
+//#endregion
+//#region src/components/MapZoom.tsx
+function MapZoom({ center, zoom, minZoom = ZOOM_DEFAULTS.minZoom, maxZoom = ZOOM_DEFAULTS.maxZoom, config, onZoomStart, onZoom, onZoomEnd, children, className, ...groupProps }) {
+	const containerRef = useRef(null);
+	const skipNextTransformSyncRef = useRef(false);
+	const context = useMapContext();
+	const onZoomStartRef = useLatest(onZoomStart);
+	const onZoomRef = useLatest(onZoom);
+	const onZoomEndRef = useLatest(onZoomEnd);
+	const resolvedCenter = center ?? ZOOM_DEFAULTS.center;
+	const resolvedZoom = zoom ?? ZOOM_DEFAULTS.zoom;
+	const centerX = resolvedCenter[0];
+	const centerY = resolvedCenter[1];
+	const zoomBehavior = useMemo(() => {
+		return createZoomBehavior(context, {
+			minZoom,
+			maxZoom,
+			config,
+			onZoomStart: (event) => {
+				onZoomStartRef.current?.(event);
+			},
+			onZoom: (event) => {
+				applyZoomGroupTransform(containerRef.current, event.transform);
+				onZoomRef.current?.(event);
+			},
+			onZoomEnd: (event) => {
+				onZoomEndRef.current?.(event);
+			}
+		});
+	}, [
+		context,
+		minZoom,
+		maxZoom,
+		config
+	]);
+	useEffect(() => {
+		skipNextTransformSyncRef.current = true;
+		setupZoom({
+			element: containerRef.current,
+			behavior: zoomBehavior,
+			center: resolvedCenter,
+			zoom: resolvedZoom
+		});
+	}, [zoomBehavior]);
+	useEffect(() => {
+		if (skipNextTransformSyncRef.current) {
+			skipNextTransformSyncRef.current = false;
+			return;
+		}
+		applyZoomTransform({
+			element: containerRef.current,
+			behavior: zoomBehavior,
+			center: [centerX, centerY],
+			zoom: resolvedZoom
+		});
+	}, [
+		zoomBehavior,
+		centerX,
+		centerY,
+		resolvedZoom
+	]);
+	const mergedClassName = className ? `d3-map-zoom ${className}` : "d3-map-zoom";
+	return /* @__PURE__ */ jsx("g", {
+		...groupProps,
+		ref: containerRef,
+		className: mergedClassName,
+		children
+	});
+}
+
+//#endregion
+export { Map, MapContextValue, MapFeature, MapFeatures, MapMarker, MapMesh, MapZoom, useMapContext, useMapObject };

package/package.json

@@ -0,0 +1,73 @@
+{
+  "name": "@d3-maps/react",
+  "type": "module",
+  "version": "0.1.0",
+  "private": false,
+  "description": "React bindings for @d3-maps/core to build reactive D3 SVG maps",
+  "author": "Georgii Bukharov <souljorje@gmail.com>",
+  "license": "MIT",
+  "publishConfig": {
+    "access": "public"
+  },
+  "homepage": "https://souljorje.github.io/d3-maps",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/souljorje/d3-maps.git",
+    "directory": "packages/react"
+  },
+  "bugs": {
+    "url": "https://github.com/souljorje/d3-maps/issues"
+  },
+  "keywords": [
+    "react",
+    "d3",
+    "svg",
+    "map"
+  ],
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js",
+      "browser": "./dist/index.iife.js"
+    }
+  },
+  "main": "dist/index.js",
+  "module": "dist/index.js",
+  "browser": "dist/index.iife.js",
+  "unpkg": "dist/index.iife.js",
+  "jsdelivr": "dist/index.iife.js",
+  "types": "dist/index.d.ts",
+  "files": [
+    "dist/*"
+  ],
+  "scripts": {
+    "typecheck": "tsc --noEmit",
+    "typecheck:test": "tsc -p tsconfig.test.json --noEmit",
+    "build": "pnpm run typecheck && tsdown",
+    "test": "vitest run",
+    "test:watch": "vitest"
+  },
+  "peerDependencies": {
+    "react": ">=19 <20",
+    "react-dom": ">=19 <20"
+  },
+  "dependencies": {
+    "@d3-maps/core": "workspace:*"
+  },
+  "devDependencies": {
+    "@testing-library/react": "catalog:",
+    "@types/geojson": "catalog:",
+    "@types/react": "catalog:",
+    "@types/react-dom": "catalog:",
+    "@types/topojson-client": "catalog:",
+    "@types/topojson-specification": "catalog:",
+    "@vitejs/plugin-react": "catalog:",
+    "jsdom": "catalog:",
+    "react": "catalog:",
+    "react-dom": "catalog:",
+    "tsdown": "catalog:",
+    "typescript": "catalog:",
+    "vite-tsconfig-paths": "catalog:",
+    "vitest": "catalog:"
+  }
+}