choropleth-kit 0.1.0 → 0.2.0

package/dist/index.js

@@ -25,6 +25,7 @@ import {
   defineTheme,
   drillDirectionBetween,
   drillReducer,
+  dropOverseas,
   extendTheme,
   flightDuration,
   formatDrillRequestProblem,
@@ -41,11 +42,13 @@ import {
   isThemeName,
   joinData,
   preserveView,
+  regionRotation,
   relativeTransform,
   releaseVelocity,
   resolveControls,
   resolveDrillData,
   resolveLabels,
+  resolveRegion,
   resolveTheme,
   resolveVariant,
   resolveZoomOptions,
@@ -57,13 +60,13 @@ import {
   unwrapGeography,
   validateLevels,
   zoomKeyAction
-} from "./chunk-R3XS6XPP.js";
+} from "./chunk-ZN6SLXL3.js";
 
 // src/react/use-choropleth.ts
 import {
   useEffect as useEffect6,
   useLayoutEffect,
-  useMemo as useMemo3,
+  useMemo as useMemo4,
   useRef as useRef5,
   useState as useState5
 } from "react";
@@ -268,14 +271,134 @@ var useContainerSize = ({
 import {
   useCallback as useCallback2,
   useEffect as useEffect4,
-  useMemo as useMemo2,
+  useMemo as useMemo3,
   useReducer,
   useRef as useRef4,
   useState as useState3
 } from "react";
 
+// src/react/region.ts
+import { useMemo } from "react";
+
+// src/geo/overseas.ts
+var OVERSEAS_TERRITORIES = {
+  // French Guiana.
+  FR: [
+    [
+      [-56, 1],
+      [-51, 7]
+    ]
+  ],
+  // Svalbard.
+  NO: [
+    [
+      [0, 73],
+      [40, 82]
+    ]
+  ],
+  // Hawaii.
+  US: [
+    [
+      [-162, 18],
+      [-154, 23]
+    ]
+  ]
+};
+
+// src/geo/region-presets.ts
+var ids = (list) => list.split(" ");
+var northernEurope = ids("AX DK EE FI FO GB GG IE IM IS JE LT LV NO SE");
+var westernEurope = ids("AT BE CH DE FR LI LU MC NL");
+var southernEurope = ids("AD AL BA ES GI GR HR IT ME MK MT PT RS SI SM VA XK");
+var easternEurope = ids("BG BY CZ HU MD PL RO SK UA");
+var northernAfrica = ids("DZ EG EH LY MA SD TN");
+var easternAfrica = ids("BI DJ ER ET KE KM MG MU MW MZ RW SC SO SS TZ UG ZM ZW");
+var middleAfrica = ids("AO CD CF CG CM GA GQ ST TD");
+var southernAfrica = ids("BW LS NA SZ ZA");
+var westernAfrica = ids("BF BJ CI CV GH GM GN GW LR ML MR NE NG SL SN TG");
+var centralAsia = ids("KG KZ TJ TM UZ");
+var easternAsia = ids("CN HK JP KP KR MN MO TW");
+var southeasternAsia = ids("BN ID KH LA MM MY PH SG TH TL VN");
+var southernAsia = ids("AF BD BT IN IR LK MV NP PK");
+var westernAsia = ids("AE AM AZ BH CY GE IL IQ JO KW LB OM PS QA SA SY TR YE");
+var usAndCanada = ids("BM CA GL US");
+var centralAmerica = ids("BZ CR GT HN MX NI PA SV");
+var caribbean = ids("AG AW BB BS CU CW DM DO GD HT JM KN KY LC PR TT VC");
+var southAmerica = ids("AR BO BR CL CO EC FK GY PE PY SR UY VE");
+var australiaAndNewZealand = ids("AU NZ");
+var melanesia = ids("FJ NC PG SB VU");
+var micronesia = ids("FM GU KI MH NR PW");
+var polynesia = ids("PF TO TV WS");
+var REGION_PRESETS = {
+  // Continents: disjoint, each one is the union of its subregions.
+  africa: [
+    ...northernAfrica,
+    ...easternAfrica,
+    ...middleAfrica,
+    ...southernAfrica,
+    ...westernAfrica
+  ],
+  asia: [...centralAsia, ...easternAsia, ...southeasternAsia, ...southernAsia, ...westernAsia],
+  europe: [...northernEurope, ...westernEurope, ...southernEurope, ...easternEurope],
+  northAmerica: [...usAndCanada, ...centralAmerica, ...caribbean],
+  southAmerica,
+  oceania: [...australiaAndNewZealand, ...melanesia, ...micronesia, ...polynesia],
+  // Subregions (UN geoscheme).
+  northernAfrica,
+  easternAfrica,
+  middleAfrica,
+  southernAfrica,
+  westernAfrica,
+  centralAsia,
+  easternAsia,
+  southeasternAsia,
+  southernAsia,
+  westernAsia,
+  northernEurope,
+  westernEurope,
+  southernEurope,
+  easternEurope,
+  usAndCanada,
+  centralAmerica,
+  caribbean,
+  australiaAndNewZealand,
+  melanesia,
+  micronesia,
+  polynesia,
+  // Political / commercial groupings: they may overlap with everything else. FIRST CUT, to be confirmed with
+  // the tools that will use them (see FEAT-022); each one is a maintenance cost.
+  eu27: ids("AT BE BG CY CZ DE DK EE ES FI FR GR HR HU IE IT LT LU LV MT NL PL PT RO SE SI SK"),
+  nordics: ids("DK FI IS NO SE"),
+  iberia: ids("ES PT"),
+  latam: ids("AR BO BR CL CO CR CU DO EC GT HN HT MX NI PA PE PR PY SV UY VE"),
+  mena: ids("AE BH DZ EG EH IL IQ IR JO KW LB LY MA OM PS QA SA SY TN YE")
+};
+
+// src/react/region.ts
+var regionKey = (region) => typeof region === "string" ? region : region.join("\0");
+var useRegion = (region) => {
+  const key = region === void 0 ? void 0 : regionKey(region);
+  return useMemo(
+    () => region === void 0 || key === void 0 ? void 0 : { key, ids: resolveRegion(region, REGION_PRESETS) },
+    // `key` summarizes the content of `region`.
+    // oxlint-disable-next-line react-hooks/exhaustive-deps
+    [key]
+  );
+};
+var cache = /* @__PURE__ */ new WeakMap();
+var withoutOverseas = (fc, region) => {
+  const byKey = cache.get(fc) ?? /* @__PURE__ */ new Map();
+  cache.set(fc, byKey);
+  const found = byKey.get(region.key);
+  if (found !== void 0) return found;
+  const features = dropOverseas(fc.features, OVERSEAS_TERRITORIES);
+  const created = features.every((feature, i) => feature === fc.features[i]) ? fc : { ...fc, features };
+  byKey.set(region.key, created);
+  return created;
+};
+
 // src/react/use-drill-down.ts
-import { useCallback, useEffect as useEffect3, useMemo, useRef as useRef3, useState as useState2, useSyncExternalStore as useSyncExternalStore2 } from "react";
+import { useCallback, useEffect as useEffect3, useMemo as useMemo2, useRef as useRef3, useState as useState2, useSyncExternalStore as useSyncExternalStore2 } from "react";
 var createDrillBridge = () => {
   let status = "idle";
   const listeners = /* @__PURE__ */ new Set();
@@ -304,7 +427,7 @@ var useDrillDown = ({
   onPathChange,
   getLabel
 }) => {
-  useMemo(() => validateLevels(levels), [levels]);
+  useMemo2(() => validateLevels(levels), [levels]);
   const controlled = controlledPath !== void 0;
   const [innerPath, setInnerPath] = useState2(
     () => clampPath(defaultPath ?? [], levels.length).path
@@ -354,7 +477,7 @@ var useDrillDown = ({
   const reset = useCallback(() => commit([]), [commit]);
   const status = useSyncExternalStore2(bridge.subscribe, bridge.getStatus, bridge.getStatus);
   const rootLabel = levels[0]?.label ?? levels[0]?.id ?? "";
-  const breadcrumbs = useMemo(
+  const breadcrumbs = useMemo2(
     () => buildBreadcrumbs({
       path,
       rootLabel,
@@ -366,8 +489,8 @@ var useDrillDown = ({
     [pathKey, rootLabel]
   );
   const level = levels[path.length] ?? levels[levels.length - 1];
-  const context = useMemo(() => contextOf(path), [path]);
-  return useMemo(
+  const context = useMemo2(() => contextOf(path), [path]);
+  return useMemo2(
     () => ({
       levels,
       path,
@@ -447,6 +570,7 @@ var useDrillEngine = ({
   drill,
   data,
   filterFeatures,
+  region,
   store,
   onDrill,
   onDrillEnd,
@@ -461,7 +585,7 @@ var useDrillEngine = ({
   const target = controller?.path ?? EMPTY_PATH;
   const targetKey = JSON.stringify(target);
   const [machine, dispatch] = useReducer(drillReducer, target, createDrillState);
-  const [cache] = useState3(() => createLruCache());
+  const [cache2] = useState3(() => createLruCache());
   const [version, setVersion] = useState3(0);
   const [failed, setFailed] = useState3(/* @__PURE__ */ new Map());
   const pending = useRef4(/* @__PURE__ */ new Set());
@@ -470,7 +594,7 @@ var useDrillEngine = ({
   const geographyAt = (depth2, path) => {
     const level2 = levels[sourceOf(depth2)];
     if (level2 === void 0) return void 0;
-    return fixedGeography(level2) ?? cache.get(keyAt(depth2, path));
+    return fixedGeography(level2) ?? cache2.get(keyAt(depth2, path));
   };
   const mounted = useRef4(false);
   useEffect4(() => {
@@ -485,7 +609,7 @@ var useDrillEngine = ({
       const level2 = levels[source];
       if (level2 === void 0 || fixedGeography(level2) !== void 0) continue;
       const key = keyAt(depth2, path);
-      if (cache.has(key) || pending.current.has(key)) continue;
+      if (cache2.has(key) || pending.current.has(key)) continue;
       if (failed.has(key) && !retryFailed) continue;
       const input = typeof level2.geography === "function" ? level2.geography(contextOf(path.slice(0, source))) : level2.geography;
       if (input === "inherit") continue;
@@ -493,7 +617,7 @@ var useDrillEngine = ({
       resolveInput(input).then(
         (loaded) => {
           pending.current.delete(key);
-          cache.set(key, loaded);
+          cache2.set(key, loaded);
           if (mounted.current) setVersion((v) => v + 1);
         },
         (error) => {
@@ -528,15 +652,24 @@ var useDrillEngine = ({
         const level2 = levels[k];
         if (level2?.filterFeatures?.(feature, contextOf(path.slice(0, k))) === false) return false;
       }
-      return source !== 0 || filterFeatures === void 0 || filterFeatures(feature);
+      if (source !== 0) return true;
+      if (region !== void 0) {
+        const id = (levels[0]?.getFeatureId ?? defaultFeatureId)(feature);
+        if (id === void 0 || !region.ids.has(id)) return false;
+      }
+      return filterFeatures === void 0 || filterFeatures(feature);
     };
   };
   const featuresAt = (depth2, path) => {
     const geography2 = geographyAt(depth2, path);
     if (geography2 === void 0) return void 0;
-    const raw = featureCollectionOf(geography2, levels[sourceOf(depth2)]?.objectName);
-    return stableFilter(raw, keepFor(depth2, path));
+    const source = sourceOf(depth2);
+    const raw = featureCollectionOf(geography2, levels[source]?.objectName);
+    const kept = stableFilter(raw, keepFor(depth2, path));
+    return source === 0 && region !== void 0 ? withoutOverseas(kept, region) : kept;
   };
+  const rootGeography = active ? geographyAt(0, EMPTY_PATH) : void 0;
+  const rootAll = rootGeography === void 0 || region === void 0 ? void 0 : featureCollectionOf(rootGeography, levels[sourceOf(0)]?.objectName);
   const featuresFor = (path) => Array.from({ length: path.length + 1 }, (_, d) => featuresAt(d, path));
   const chainLevelOf = (depth2, fc) => ({
     features: fc.features,
@@ -571,7 +704,7 @@ var useDrillEngine = ({
     [latest]
   );
   const chainSig = `${shownKey}|${shownFeatures.map(idOfCollection).join(",")}`;
-  const chain = useMemo2(
+  const chain = useMemo3(
     () => shownFeatures.flatMap((fc, depth2) => fc === void 0 ? [] : [chainLevelOf(depth2, fc)]),
     // oxlint-disable-next-line react-hooks/exhaustive-deps
     [chainSig, levels]
@@ -592,7 +725,7 @@ var useDrillEngine = ({
   const sourceLevel = levels[sourceOf(depth)];
   const features = hasShown ? shownFeatures[depth] : void 0;
   const geography = hasShown ? geographyAt(depth, shownPath) : void 0;
-  const emptyError = useMemo2(() => {
+  const emptyError = useMemo3(() => {
     if (!targetEmpty) return null;
     const parent = target.at(-1) ?? null;
     const id = levels[target.length]?.id ?? "?";
@@ -756,6 +889,7 @@ var useDrillEngine = ({
     chainSig,
     filterFeatures: active && hasShown ? keepFor(depth, shownPath) : void 0,
     rootFeatures: hasShown ? shownFeatures[0] : void 0,
+    rootAll,
     data: !active ? void 0 : shownIsTarget ? liveData : latest.data,
     noteItem,
     machine,
@@ -836,10 +970,12 @@ var clearGeographyCache = () => {
 var FALLBACK_POINT_RADIUS = 4;
 var useChoropleth = (rawOptions) => {
   const [store] = useState5(createMapStore);
+  const region = useRegion(rawOptions.region);
   const engine = useDrillEngine({
     drill: rawOptions.drill,
     data: rawOptions.data,
     filterFeatures: rawOptions.filterFeatures,
+    region,
     store,
     onDrill: rawOptions.onDrill,
     onDrillEnd: rawOptions.onDrillEnd,
@@ -869,8 +1005,13 @@ var useChoropleth = (rawOptions) => {
   const geography = engine.active ? engine.geography : single.geography;
   const status = engine.active ? engine.status : single.status;
   const objectName = engine.active ? engine.objectName : options.objectName;
-  const filterFeatures = engine.active ? engine.filterFeatures : options.filterFeatures;
-  const allFeatures = useMemo3(
+  const regionIdOf = getFeatureId ?? defaultFeatureId2;
+  const userFilter = engine.active ? engine.filterFeatures : options.filterFeatures;
+  const filterFeatures = engine.active || region === void 0 ? userFilter : (feature) => {
+    const id = regionIdOf(feature);
+    return id !== void 0 && region.ids.has(id) && (userFilter?.(feature) ?? true);
+  };
+  const allFeatures = useMemo4(
     () => engine.active ? engine.features ?? EMPTY_FEATURES : geography === void 0 ? EMPTY_FEATURES : toFeatureCollection({ geography, objectName }),
     // `engine.features` already comes filtered and is stable (the engine's caches).
     // oxlint-disable-next-line react-hooks/exhaustive-deps
@@ -878,31 +1019,43 @@ var useChoropleth = (rawOptions) => {
   );
   const keptIndexes = filterFeatures === void 0 ? null : allFeatures.features.flatMap((f, index) => filterFeatures(f) ? [index] : []);
   const keptKey = keptIndexes === null ? "" : keptIndexes.join(",");
-  const features = useMemo3(
-    () => keptIndexes === null ? allFeatures : {
+  const features = useMemo4(() => {
+    const kept = keptIndexes === null ? allFeatures : {
       ...allFeatures,
       features: keptIndexes.flatMap((index) => {
         const feature = allFeatures.features[index];
         return feature === void 0 ? [] : [feature];
       })
-    },
-    // `keptIndexes` is summarized in `keptKey` (see above).
-    // oxlint-disable-next-line react-hooks/exhaustive-deps
-    [allFeatures, keptKey]
-  );
-  const bordersGeometry = useMemo3(
+    };
+    return engine.active || region === void 0 ? kept : withoutOverseas(kept, region);
+  }, [allFeatures, keptKey, engine.active, region?.key]);
+  const bordersGeometry = useMemo4(
     () => geography === void 0 ? null : createBorders({ geography, objectName, filterFeatures }),
     // `filterFeatures` is summarized in `keptKey`: its identity must not relaunch the computation.
     // oxlint-disable-next-line react-hooks/exhaustive-deps
     [geography, objectName, keptKey]
   );
-  const autoAspect = useMemo3(
+  const rotationFeatures = engine.active ? engine.rootFeatures : features;
+  const rotation = useMemo4(() => {
+    if (region === void 0 || rotationFeatures === void 0) return void 0;
+    const points = Object.entries(fallbackPoints ?? {}).flatMap(
+      ([id, point]) => region.ids.has(id) ? [point] : []
+    );
+    return regionRotation(rotationFeatures.features, points);
+  }, [region?.key, rotationFeatures, fallbackPoints]);
+  const rotateLon = rotation?.[0];
+  const rotate = useMemo4(
+    () => rotateLon === void 0 ? void 0 : [rotateLon, 0],
+    [rotateLon]
+  );
+  const autoAspect = useMemo4(
     () => options.aspectRatio === "auto" ? computeAspectRatio({
       name: projection,
       // With drill the proportion is the root's: it must not change when going down a level.
-      featureCollection: (engine.active ? engine.rootFeatures : void 0) ?? features
+      featureCollection: (engine.active ? engine.rootFeatures : void 0) ?? features,
+      rotate
     }) : void 0,
-    [options.aspectRatio, projection, features, engine.active, engine.rootFeatures]
+    [options.aspectRatio, projection, features, engine.active, engine.rootFeatures, rotate]
   );
   const measured = useContainerSize({
     aspectRatio: options.aspectRatio === "auto" ? autoAspect : options.aspectRatio
@@ -915,7 +1068,7 @@ var useChoropleth = (rawOptions) => {
     { ...DEFAULT_FOCUS_BOUNDS, ...options.focusBounds }
   );
   const focusKey = JSON.stringify(drillFocusBounds);
-  const chain = useMemo3(
+  const chain = useMemo4(
     () => engine.active && engine.chain.length > 0 && width > 0 && height > 0 ? buildProjectionChain({
       levels: engine.chain,
       path: engine.shownPath,
@@ -923,11 +1076,12 @@ var useChoropleth = (rawOptions) => {
       width,
       height,
       padding: rebasePadding,
-      focusBounds: drillFocusBounds
+      focusBounds: drillFocusBounds,
+      rotate
     }) : null,
     // `chainSig` summarizes the content of `engine.chain`; `focusKey`, that of `drillFocusBounds`.
     // oxlint-disable-next-line react-hooks/exhaustive-deps
-    [engine.active, engine.chainSig, projection, width, height, rebasePadding, focusKey]
+    [engine.active, engine.chainSig, projection, width, height, rebasePadding, focusKey, rotate]
   );
   const chainMissing = chain?.missing ?? null;
   useEffect6(() => {
@@ -944,12 +1098,13 @@ var useChoropleth = (rawOptions) => {
     width,
     height,
     padding: rebasePadding,
-    focusBounds: drillFocusBounds
+    focusBounds: drillFocusBounds,
+    rotate
   });
   useDrillChoreography({ engine, store, shownChain: chain, chainFor });
   const { machine, previous } = engine;
   const leaving = machine.layers.some((layer) => layer.role === "exiting");
-  const previousChain = useMemo3(
+  const previousChain = useMemo4(
     () => engine.active && previous !== null && width > 0 && height > 0 && (leaving || machine.direction === "up") ? buildProjectionChain({
       levels: [...previous.chain],
       path: previous.path,
@@ -957,7 +1112,8 @@ var useChoropleth = (rawOptions) => {
       width,
       height,
       padding: rebasePadding,
-      focusBounds: drillFocusBounds
+      focusBounds: drillFocusBounds,
+      rotate
     }) : null,
     // `previous` changes only when the level changes; `focusKey` summarizes `drillFocusBounds`.
     // oxlint-disable-next-line react-hooks/exhaustive-deps
@@ -970,13 +1126,14 @@ var useChoropleth = (rawOptions) => {
       width,
       height,
       rebasePadding,
-      focusKey
+      focusKey,
+      rotate
     ]
   );
   const activeProjection = chain?.projections[chain.projections.length - 1];
   const layersKey = machine.layers.map((layer) => `${layer.key}:${layer.role}`).join("|");
   const contextMode = engine.level?.context ?? "siblings";
-  const drillLayers = useMemo3(() => {
+  const drillLayers = useMemo4(() => {
     if (!engine.active || chain === null || activeProjection === void 0) return [];
     const views = [];
     const activeSource = sourceDepth(engine.levels, engine.depth);
@@ -1028,7 +1185,7 @@ var useChoropleth = (rawOptions) => {
     return views;
   }, [engine.active, chain, previousChain, previous, layersKey, engine.chainSig, contextMode]);
   const controller = engine.controller;
-  const drillNav = useMemo3(() => {
+  const drillNav = useMemo4(() => {
     if (!engine.active || controller === null) return null;
     const rootLabel = engine.levels[0]?.label ?? labels.breadcrumbRoot;
     const items = controller.breadcrumbs.map((crumb) => {
@@ -1061,12 +1218,13 @@ var useChoropleth = (rawOptions) => {
     labels.breadcrumbRoot
   ]);
   const drillFocusId = engine.active && (machine.phase === "flying" || machine.phase === "loading") && machine.direction !== "up" && machine.direction !== null ? machine.path.at(-1) ?? null : null;
-  const { paths, bordersPath, anchors, project, invert, toPath } = useMemo3(() => {
+  const { paths, bordersPath, anchors, project, invert, toPath } = useMemo4(() => {
     const geoProjection = chain?.projections[chain.projections.length - 1] ?? createProjection({
       name: projection,
       width,
       height,
-      featureCollection: features
+      featureCollection: features,
+      rotate
     });
     const toPath2 = geoPath(geoProjection);
     const toPoint = (coordinates) => {
@@ -1096,16 +1254,32 @@ var useChoropleth = (rawOptions) => {
         return at != null && Number.isFinite(at[0]) && Number.isFinite(at[1]) ? [at[0], at[1]] : null;
       }
     };
-  }, [features, bordersGeometry, projection, width, height, isBubble, chain]);
+  }, [features, bordersGeometry, projection, width, height, isBubble, chain, rotate]);
   const lastData = useRef5(options.data);
   if (options.data !== void 0) lastData.current = options.data;
   const data = options.data ?? lastData.current ?? NO_DATA;
   const dataLoading = options.loading ?? options.data === void 0;
   const idOf = getFeatureId ?? defaultFeatureId2;
   const join = joinData({ features: features.features, data, getId, getFeatureId: idOf });
+  const outOfRegion = [];
+  let unmatchedIds = join.unmatchedData;
+  const regionDrawn = !engine.active || sourceDepth(engine.levels, engine.depth) === 0;
+  if (region !== void 0 && regionDrawn && unmatchedIds.length > 0) {
+    const world = engine.active ? engine.rootAll : allFeatures;
+    const worldIds = /* @__PURE__ */ new Set();
+    for (const feature of world?.features ?? []) {
+      const id = idOf(feature);
+      if (id !== void 0) worldIds.add(id);
+    }
+    unmatchedIds = unmatchedIds.filter((id) => {
+      const outside = !region.ids.has(id) && (worldIds.has(id) || fallbackPoints?.[id] !== void 0);
+      if (outside) outOfRegion.push(id);
+      return !outside;
+    });
+  }
   const fallbacks = [];
-  if (fallbackPoints !== void 0 && join.unmatchedData.length > 0) {
-    const wanted = new Set(join.unmatchedData.filter((id) => fallbackPoints[id] !== void 0));
+  if (fallbackPoints !== void 0 && unmatchedIds.length > 0) {
+    const wanted = new Set(unmatchedIds.filter((id) => fallbackPoints[id] !== void 0));
     const seen = /* @__PURE__ */ new Set();
     for (const datum of data) {
       const id = getId(datum);
@@ -1120,9 +1294,10 @@ var useChoropleth = (rawOptions) => {
   const fallbackIds = new Set(fallbacks.map((f) => f.id));
   const hasOwnCoordinates = options.variant === "bubble" && options.getCoordinates !== void 0;
   const joinReport = {
-    unmatchedData: hasOwnCoordinates ? [] : join.unmatchedData.filter((id) => !fallbackIds.has(id)),
+    unmatchedData: hasOwnCoordinates ? [] : unmatchedIds.filter((id) => !fallbackIds.has(id)),
     featuresWithoutData: hasOwnCoordinates ? [] : join.featuresWithoutData,
-    duplicateDataIds: join.duplicateDataIds
+    duplicateDataIds: join.duplicateDataIds,
+    outOfRegion: hasOwnCoordinates ? [] : outOfRegion
   };
   const entries = features.features.map((feature) => {
     const id = idOf(feature);
@@ -1216,7 +1391,8 @@ var useChoropleth = (rawOptions) => {
     data.length,
     joinReport.unmatchedData.join("
"),
     joinReport.featuresWithoutData.join("
"),
-    joinReport.duplicateDataIds.join("
")
+    joinReport.duplicateDataIds.join("
"),
+    joinReport.outOfRegion.join("
")
   ].join("\0");
   const { onJoinReport, diagnostics = true } = options;
   useEffect6(() => {
@@ -1236,6 +1412,14 @@ var useChoropleth = (rawOptions) => {
              ${levelHint}`);
     }
   }, [reportKey, status]);
+  const emptyRegion = region !== void 0 && regionDrawn && features.features.length === 0;
+  useEffect6(() => {
+    if (status === "ready" && emptyRegion && diagnostics && !isProduction()) {
+      console.warn(
+        `[choropleth] region "${region?.key}" matches no region of the geometry. Regions are matched by ISO 3166-1 alpha-2 code against \`feature.id\`: if your geometry uses other ids, pass \`getFeatureId\`.`
+      );
+    }
+  }, [emptyRegion, status, diagnostics, region?.key]);
   const noIdsMessage = formatNoIdsDiagnostic({
     featureCount: features.features.length,
     idCount: regions.length,
@@ -1267,9 +1451,9 @@ var useChoropleth = (rawOptions) => {
   const { rememberFills } = engine;
   const drillActive = engine.active;
   useEffect6(() => {
-    if (drillActive) rememberFills(new Map(regions.map((region) => [region.id, region.fill])));
+    if (drillActive) rememberFills(new Map(regions.map((region2) => [region2.id, region2.fill])));
   });
-  const regionsById = new Map(regions.map((region) => [region.id, region]));
+  const regionsById = new Map(regions.map((region2) => [region2.id, region2]));
   const featuresById = /* @__PURE__ */ new Map();
   features.features.forEach((feature) => {
     const id = idOf(feature);
@@ -1279,19 +1463,19 @@ var useChoropleth = (rawOptions) => {
   const fallbackMarksById = new Map(fallbackMarks.map((f) => [f.id, f]));
   const getItemContext = (ref) => {
     if (ref.kind === "region") {
-      const region = regionsById.get(ref.id);
-      if (region === void 0) return void 0;
+      const region2 = regionsById.get(ref.id);
+      if (region2 === void 0) return void 0;
       return {
         kind: "region",
-        id: region.id,
-        feature: region.feature,
-        datum: region.datum,
+        id: region2.id,
+        feature: region2.feature,
+        datum: region2.datum,
         level: levelInfo,
-        drillable: region.drillable,
-        value: region.value,
-        formattedValue: region.formattedValue,
-        color: region.fill,
-        label: nameOf(region.feature) ?? region.id
+        drillable: region2.drillable,
+        value: region2.value,
+        formattedValue: region2.formattedValue,
+        color: region2.fill,
+        label: nameOf(region2.feature) ?? region2.id
       };
     }
     const bubble = bubblesById.get(ref.id);
@@ -1395,7 +1579,7 @@ var useChoropleth = (rawOptions) => {
   useEffect6(() => {
     latestDrill.current = { findRequestProblem, engine };
   });
-  const drillApi = useMemo3(() => {
+  const drillApi = useMemo4(() => {
     const refuse = (message) => {
       if (!isProduction()) console.warn(message);
       return Promise.resolve({ completed: false });
@@ -1431,11 +1615,11 @@ var useChoropleth = (rawOptions) => {
       hoverItem(null);
     }
   };
-  const getRegionProps = (region) => {
-    const ref = { kind: "region", id: region.id };
+  const getRegionProps = (region2) => {
+    const ref = { kind: "region", id: region2.id };
     return {
-      "data-region-id": region.id,
-      "data-selected": region.id === selectedId ? true : void 0,
+      "data-region-id": region2.id,
+      "data-selected": region2.id === selectedId ? true : void 0,
       onClick: () => clickItem(ref),
       onPointerEnter: () => hoverItem(ref),
       onPointerLeave: leaveHandler(ref)
@@ -1607,10 +1791,10 @@ var Patterns = () => {
 };
 
 // src/react/use-camera.ts
-import { useMemo as useMemo4, useSyncExternalStore as useSyncExternalStore3 } from "react";
+import { useMemo as useMemo5, useSyncExternalStore as useSyncExternalStore3 } from "react";
 var useCamera = (selector) => {
   const { store, api } = useChoroplethContext();
-  const getSnapshot = useMemo4(
+  const getSnapshot = useMemo5(
     () => createCameraSnapshot(store, () => api.getView(), selector),
     [store, api, selector]
   );
@@ -2442,7 +2626,7 @@ import {
   useEffect as useEffect9,
   useId,
   useImperativeHandle,
-  useMemo as useMemo5,
+  useMemo as useMemo6,
   useRef as useRef7
 } from "react";
 
@@ -2509,10 +2693,10 @@ var RootInner = ({
     );
     return () => store.registerFallbackView(null);
   }, [store, width, height, invert]);
-  const api = useMemo5(() => createHandle(store), [store]);
+  const api = useMemo6(() => createHandle(store), [store]);
   useImperativeHandle(ref, () => api, [api]);
-  const themeVars = useMemo5(() => themeToCssVars(resolveTheme(theme)), [theme]);
-  const slots = useMemo5(() => classNames ?? {}, [classNames]);
+  const themeVars = useMemo6(() => themeToCssVars(resolveTheme(theme)), [theme]);
+  const slots = useMemo6(() => classNames ?? {}, [classNames]);
   const instance = useId().replace(/[^a-zA-Z0-9_-]/g, "");
   const defId = useCallback3((name) => `cm${instance}-${name}`, [instance]);
   const pattern = emptyPattern ?? resolveTheme(theme)?.empty?.pattern;

package/dist/styles.d.ts

@@ -1,2 +1,2 @@
 
-export {  }
+export { };