react-bkoi-gl 1.0.7 → 2.0.0

package/dist/utils/transform.js.map

@@ -1 +1 @@
-{"version":3,"file":"transform.js","names":["deepEqual","cloneTransform","tr","newTransform","clone","pixelsToGLUnits","syncProjection","src","dest","getProjection","srcProjection","destProjection","setProjection","transformToViewState","longitude","center","lng","latitude","lat","zoom","pitch","bearing","padding","applyViewStateToTransform","props","v","viewState","changed","isPaddingEqual","constructor"],"sources":["../../src/utils/transform.ts"],"sourcesContent":["import type {MapboxProps} from '../mapbox/mapbox';\nimport type {Transform, ViewState} from '../types';\nimport {deepEqual} from './deep-equal';\n\n/**\n * Make a copy of a transform\n * @param tr\n */\nexport function cloneTransform(tr: Transform): Transform {\n  const newTransform = tr.clone();\n  // Work around mapbox bug - this value is not assigned in clone(), only in resize()\n  newTransform.pixelsToGLUnits = tr.pixelsToGLUnits;\n  return newTransform;\n}\n\n/**\n * Copy projection from one transform to another. This only applies to mapbox-gl transforms\n * @param src the transform to copy projection settings from\n * @param dest to transform to copy projection settings to\n */\nexport function syncProjection(src: Transform, dest: Transform): void {\n  if (!src.getProjection) {\n    return;\n  }\n  const srcProjection = src.getProjection();\n  const destProjection = dest.getProjection();\n\n  if (!deepEqual(srcProjection, destProjection)) {\n    dest.setProjection(srcProjection);\n  }\n}\n\n/**\n * Capture a transform's current state\n * @param transform\n * @returns descriptor of the view state\n */\nexport function transformToViewState(tr: Transform): ViewState {\n  return {\n    longitude: tr.center.lng,\n    latitude: tr.center.lat,\n    zoom: tr.zoom,\n    pitch: tr.pitch,\n    bearing: tr.bearing,\n    padding: tr.padding\n  };\n}\n\n/* eslint-disable complexity */\n/**\n * Mutate a transform to match the given view state\n * @param transform\n * @param viewState\n * @returns true if the transform has changed\n */\nexport function applyViewStateToTransform(tr: Transform, props: MapboxProps): boolean {\n  const v: Partial<ViewState> = props.viewState || props;\n  let changed = false;\n\n  if ('zoom' in v) {\n    const zoom = tr.zoom;\n    tr.zoom = v.zoom;\n    changed = changed || zoom !== tr.zoom;\n  }\n  if ('bearing' in v) {\n    const bearing = tr.bearing;\n    tr.bearing = v.bearing;\n    changed = changed || bearing !== tr.bearing;\n  }\n  if ('pitch' in v) {\n    const pitch = tr.pitch;\n    tr.pitch = v.pitch;\n    changed = changed || pitch !== tr.pitch;\n  }\n  if (v.padding && !tr.isPaddingEqual(v.padding)) {\n    changed = true;\n    tr.padding = v.padding;\n  }\n  if ('longitude' in v && 'latitude' in v) {\n    const center = tr.center;\n    // @ts-ignore\n    tr.center = new center.constructor(v.longitude, v.latitude);\n    changed = changed || center !== tr.center;\n  }\n  return changed;\n}\n"],"mappings":"SAEQA,SAAS;AAMjB,OAAO,SAASC,cAAcA,CAACC,EAAa,EAAa;EACvD,MAAMC,YAAY,GAAGD,EAAE,CAACE,KAAK,CAAC,CAAC;EAE/BD,YAAY,CAACE,eAAe,GAAGH,EAAE,CAACG,eAAe;EACjD,OAAOF,YAAY;AACrB;AAOA,OAAO,SAASG,cAAcA,CAACC,GAAc,EAAEC,IAAe,EAAQ;EACpE,IAAI,CAACD,GAAG,CAACE,aAAa,EAAE;IACtB;EACF;EACA,MAAMC,aAAa,GAAGH,GAAG,CAACE,aAAa,CAAC,CAAC;EACzC,MAAME,cAAc,GAAGH,IAAI,CAACC,aAAa,CAAC,CAAC;EAE3C,IAAI,CAACT,SAAS,CAACU,aAAa,EAAEC,cAAc,CAAC,EAAE;IAC7CH,IAAI,CAACI,aAAa,CAACF,aAAa,CAAC;EACnC;AACF;AAOA,OAAO,SAASG,oBAAoBA,CAACX,EAAa,EAAa;EAC7D,OAAO;IACLY,SAAS,EAAEZ,EAAE,CAACa,MAAM,CAACC,GAAG;IACxBC,QAAQ,EAAEf,EAAE,CAACa,MAAM,CAACG,GAAG;IACvBC,IAAI,EAAEjB,EAAE,CAACiB,IAAI;IACbC,KAAK,EAAElB,EAAE,CAACkB,KAAK;IACfC,OAAO,EAAEnB,EAAE,CAACmB,OAAO;IACnBC,OAAO,EAAEpB,EAAE,CAACoB;EACd,CAAC;AACH;AASA,OAAO,SAASC,yBAAyBA,CAACrB,EAAa,EAAEsB,KAAkB,EAAW;EACpF,MAAMC,CAAqB,GAAGD,KAAK,CAACE,SAAS,IAAIF,KAAK;EACtD,IAAIG,OAAO,GAAG,KAAK;EAEnB,IAAI,MAAM,IAAIF,CAAC,EAAE;IACf,MAAMN,IAAI,GAAGjB,EAAE,CAACiB,IAAI;IACpBjB,EAAE,CAACiB,IAAI,GAAGM,CAAC,CAACN,IAAI;IAChBQ,OAAO,GAAGA,OAAO,IAAIR,IAAI,KAAKjB,EAAE,CAACiB,IAAI;EACvC;EACA,IAAI,SAAS,IAAIM,CAAC,EAAE;IAClB,MAAMJ,OAAO,GAAGnB,EAAE,CAACmB,OAAO;IAC1BnB,EAAE,CAACmB,OAAO,GAAGI,CAAC,CAACJ,OAAO;IACtBM,OAAO,GAAGA,OAAO,IAAIN,OAAO,KAAKnB,EAAE,CAACmB,OAAO;EAC7C;EACA,IAAI,OAAO,IAAII,CAAC,EAAE;IAChB,MAAML,KAAK,GAAGlB,EAAE,CAACkB,KAAK;IACtBlB,EAAE,CAACkB,KAAK,GAAGK,CAAC,CAACL,KAAK;IAClBO,OAAO,GAAGA,OAAO,IAAIP,KAAK,KAAKlB,EAAE,CAACkB,KAAK;EACzC;EACA,IAAIK,CAAC,CAACH,OAAO,IAAI,CAACpB,EAAE,CAAC0B,cAAc,CAACH,CAAC,CAACH,OAAO,CAAC,EAAE;IAC9CK,OAAO,GAAG,IAAI;IACdzB,EAAE,CAACoB,OAAO,GAAGG,CAAC,CAACH,OAAO;EACxB;EACA,IAAI,WAAW,IAAIG,CAAC,IAAI,UAAU,IAAIA,CAAC,EAAE;IACvC,MAAMV,MAAM,GAAGb,EAAE,CAACa,MAAM;IAExBb,EAAE,CAACa,MAAM,GAAG,IAAIA,MAAM,CAACc,WAAW,CAACJ,CAAC,CAACX,SAAS,EAAEW,CAAC,CAACR,QAAQ,CAAC;IAC3DU,OAAO,GAAGA,OAAO,IAAIZ,MAAM,KAAKb,EAAE,CAACa,MAAM;EAC3C;EACA,OAAOY,OAAO;AAChB","ignoreList":[]}
+{"version":3,"file":"transform.js","names":["deepEqual","transformToViewState","tr","longitude","center","lng","latitude","lat","zoom","pitch","bearing","padding","applyViewStateToTransform","props","v","viewState","changes","LngLat","constructor"],"sources":["../../src/utils/transform.ts"],"sourcesContent":["import type { MaplibreProps } from \"../maplibre/maplibre\";\nimport type { ViewState } from \"../types/common\";\nimport type { TransformLike } from \"../types/internal\";\nimport { deepEqual } from \"./deep-equal\";\n\n/**\n * Capture a transform's current state\n * @param transform\n * @returns descriptor of the view state\n */\nexport function transformToViewState(tr: TransformLike): ViewState {\n  return {\n    longitude: tr.center.lng,\n    latitude: tr.center.lat,\n    zoom: tr.zoom,\n    pitch: tr.pitch,\n    bearing: tr.bearing,\n    padding: tr.padding,\n  };\n}\n\n/* eslint-disable complexity */\n/**\n * Applies requested view state to a transform\n * @returns an object containing detected changes\n */\nexport function applyViewStateToTransform(\n  /** An object that describes Maplibre's camera state */\n  tr: TransformLike,\n  /** Props from Map component */\n  props: MaplibreProps,\n): Partial<TransformLike> {\n  const v: Partial<ViewState> = props.viewState || props;\n  const changes: Partial<TransformLike> = {};\n\n  if (\n    \"longitude\" in v &&\n    \"latitude\" in v &&\n    (v.longitude !== tr.center.lng || v.latitude !== tr.center.lat)\n  ) {\n    const LngLat = tr.center.constructor;\n    // @ts-expect-error we should not import LngLat class from maplibre-gl because we don't know the source of mapLib\n    changes.center = new LngLat(v.longitude, v.latitude);\n  }\n  if (\"zoom\" in v && v.zoom !== tr.zoom) {\n    changes.zoom = v.zoom;\n  }\n  if (\"bearing\" in v && v.bearing !== tr.bearing) {\n    changes.bearing = v.bearing;\n  }\n  if (\"pitch\" in v && v.pitch !== tr.pitch) {\n    changes.pitch = v.pitch;\n  }\n  if (v.padding && tr.padding && !deepEqual(v.padding, tr.padding)) {\n    changes.padding = v.padding;\n  }\n  return changes;\n}\n"],"mappings":"SAGSA,SAAS;AAOlB,OAAO,SAASC,oBAAoBA,CAACC,EAAiB,EAAa;EACjE,OAAO;IACLC,SAAS,EAAED,EAAE,CAACE,MAAM,CAACC,GAAG;IACxBC,QAAQ,EAAEJ,EAAE,CAACE,MAAM,CAACG,GAAG;IACvBC,IAAI,EAAEN,EAAE,CAACM,IAAI;IACbC,KAAK,EAAEP,EAAE,CAACO,KAAK;IACfC,OAAO,EAAER,EAAE,CAACQ,OAAO;IACnBC,OAAO,EAAET,EAAE,CAACS;EACd,CAAC;AACH;AAOA,OAAO,SAASC,yBAAyBA,CAEvCV,EAAiB,EAEjBW,KAAoB,EACI;EACxB,MAAMC,CAAqB,GAAGD,KAAK,CAACE,SAAS,IAAIF,KAAK;EACtD,MAAMG,OAA+B,GAAG,CAAC,CAAC;EAE1C,IACE,WAAW,IAAIF,CAAC,IAChB,UAAU,IAAIA,CAAC,KACdA,CAAC,CAACX,SAAS,KAAKD,EAAE,CAACE,MAAM,CAACC,GAAG,IAAIS,CAAC,CAACR,QAAQ,KAAKJ,EAAE,CAACE,MAAM,CAACG,GAAG,CAAC,EAC/D;IACA,MAAMU,MAAM,GAAGf,EAAE,CAACE,MAAM,CAACc,WAAW;IAEpCF,OAAO,CAACZ,MAAM,GAAG,IAAIa,MAAM,CAACH,CAAC,CAACX,SAAS,EAAEW,CAAC,CAACR,QAAQ,CAAC;EACtD;EACA,IAAI,MAAM,IAAIQ,CAAC,IAAIA,CAAC,CAACN,IAAI,KAAKN,EAAE,CAACM,IAAI,EAAE;IACrCQ,OAAO,CAACR,IAAI,GAAGM,CAAC,CAACN,IAAI;EACvB;EACA,IAAI,SAAS,IAAIM,CAAC,IAAIA,CAAC,CAACJ,OAAO,KAAKR,EAAE,CAACQ,OAAO,EAAE;IAC9CM,OAAO,CAACN,OAAO,GAAGI,CAAC,CAACJ,OAAO;EAC7B;EACA,IAAI,OAAO,IAAII,CAAC,IAAIA,CAAC,CAACL,KAAK,KAAKP,EAAE,CAACO,KAAK,EAAE;IACxCO,OAAO,CAACP,KAAK,GAAGK,CAAC,CAACL,KAAK;EACzB;EACA,IAAIK,CAAC,CAACH,OAAO,IAAIT,EAAE,CAACS,OAAO,IAAI,CAACX,SAAS,CAACc,CAAC,CAACH,OAAO,EAAET,EAAE,CAACS,OAAO,CAAC,EAAE;IAChEK,OAAO,CAACL,OAAO,GAAGG,CAAC,CAACH,OAAO;EAC7B;EACA,OAAOK,OAAO;AAChB","ignoreList":[]}

package/dist/utils/use-isomorphic-layout-effect.d.ts

@@ -1,3 +1,3 @@
-import { useLayoutEffect } from 'react';
+import { useLayoutEffect } from "react";
 declare const useIsomorphicLayoutEffect: typeof useLayoutEffect;
 export default useIsomorphicLayoutEffect;

package/dist/utils/use-isomorphic-layout-effect.js

@@ -1,4 +1,4 @@
-import { useEffect, useLayoutEffect } from 'react';
-const useIsomorphicLayoutEffect = typeof document !== 'undefined' ? useLayoutEffect : useEffect;
+import { useEffect, useLayoutEffect } from "react";
+const useIsomorphicLayoutEffect = typeof document !== "undefined" ? useLayoutEffect : useEffect;
 export default useIsomorphicLayoutEffect;
 //# sourceMappingURL=use-isomorphic-layout-effect.js.map

package/dist/utils/use-isomorphic-layout-effect.js.map

@@ -1 +1 @@
-{"version":3,"file":"use-isomorphic-layout-effect.js","names":["useEffect","useLayoutEffect","useIsomorphicLayoutEffect","document"],"sources":["../../src/utils/use-isomorphic-layout-effect.ts"],"sourcesContent":["// From https://github.com/streamich/react-use/blob/master/src/useIsomorphicLayoutEffect.ts\n// useLayoutEffect but does not trigger warning in server-side rendering\nimport {useEffect, useLayoutEffect} from 'react';\n\nconst useIsomorphicLayoutEffect = typeof document !== 'undefined' ? useLayoutEffect : useEffect;\n\nexport default useIsomorphicLayoutEffect;\n"],"mappings":"AAEA,SAAQA,SAAS,EAAEC,eAAe,QAAO,OAAO;AAEhD,MAAMC,yBAAyB,GAAG,OAAOC,QAAQ,KAAK,WAAW,GAAGF,eAAe,GAAGD,SAAS;AAE/F,eAAeE,yBAAyB","ignoreList":[]}
+{"version":3,"file":"use-isomorphic-layout-effect.js","names":["useEffect","useLayoutEffect","useIsomorphicLayoutEffect","document"],"sources":["../../src/utils/use-isomorphic-layout-effect.ts"],"sourcesContent":["// From https://github.com/streamich/react-use/blob/master/src/useIsomorphicLayoutEffect.ts\n// useLayoutEffect but does not trigger warning in server-side rendering\nimport { useEffect, useLayoutEffect } from \"react\";\n\nconst useIsomorphicLayoutEffect =\n  typeof document !== \"undefined\" ? useLayoutEffect : useEffect;\n\nexport default useIsomorphicLayoutEffect;\n"],"mappings":"AAEA,SAASA,SAAS,EAAEC,eAAe,QAAQ,OAAO;AAElD,MAAMC,yBAAyB,GAC7B,OAAOC,QAAQ,KAAK,WAAW,GAAGF,eAAe,GAAGD,SAAS;AAE/D,eAAeE,yBAAyB","ignoreList":[]}

package/package.json

@@ -1,51 +1,49 @@
 {
   "name": "react-bkoi-gl",
-  "version": "1.0.7",
+  "version": "2.0.0",
+  "updatedAt": "12-05-2025 5:19:02 PM",
+  "engines": {
+    "node": ">=18.13.0"
+  },
   "description": "React components for Barikoi GL JS",
   "type": "module",
   "types": "dist/index.d.ts",
   "main": "dist/index.cjs",
   "module": "dist/index.js",
-  "author": "barikoi",
-  "readme": "README.md",
-  "license": "MIT",
-  "homepage": "https://docs.barikoi.com/docs/maps-api",
   "exports": {
     ".": {
       "types": "./dist/index.d.ts",
       "require": "./dist/index.cjs",
-      "import": "./dist/index.js"
-    },
-    "./bkoi-gl": {
-      "types": "./dist/exports-bkoi-gl.d.ts",
-      "require": "./dist/exports-bkoi-gl.cjs",
-      "import": "./dist/exports-bkoi-gl.js"
+      "import": "./dist/index.js",
+      "default": "./dist/index.cjs"
     },
     "./styles": {
+      "types": "./dist/styles/index.d.ts",
       "import": "./dist/styles/react-bkoi-gl.css",
       "default": "./dist/styles/react-bkoi-gl.css"
     }
   },
+  "author": "barikoi",
+  "readme": "README.md",
+  "license": "MIT",
+  "homepage": "https://docs.barikoi.com/docs/maps-api",
   "files": [
     "src",
     "dist",
-    "bkoi-gl",
     "README.md"
   ],
   "scripts": {
-    "typecheck": "tsc -p tsconfig.build.json --noEmit",
+    "typecheck": "tsc -p tsconfig.build.json",
+    "clean": "rm -rf dist && mkdir -p dist",
     "build": "ocular-clean && ocular-build && node scripts/modify-css.js",
-    "lint": "ocular-lint",
-    "cover": "ocular-test cover",
-    "test": "yarn typecheck && ocular-test",
-    "test-fast": "yarn typecheck && ocular-test node",
-    "metrics": "ocular-metrics"
+    "lint": "eslint src/ --ext .js,.jsx,.ts,.tsx",
+    "test": "npm run typecheck && jest",
+    "coverage": "jest --coverage --passWithNoTests",
+    "update-version": "node scripts/update-version.cjs"
   },
   "dependencies": {
-    "@maplibre/maplibre-gl-style-spec": "^19.2.1",
-    "@rollup/plugin-typescript": "^11.1.6",
-    "bkoi-gl": ">=2.0.0",
-    "mapbox-gl": "^1.13.0"
+    "@maplibre/maplibre-gl-style-spec": "^23.2.1",
+    "maplibre-gl": "^5.4.0"
   },
   "peerDependencies": {
     "react": ">=16.3.0",
@@ -54,13 +52,24 @@
   "devDependencies": {
     "@commitlint/cli": "^19.4.1",
     "@commitlint/config-conventional": "^19.4.1",
-    "@types/mapbox-gl": "^3.4.0",
+    "@testing-library/jest-dom": "^6.4.2",
+    "@testing-library/react": "^14.2.1",
+    "@testing-library/react-hooks": "8.0.1",
+    "@types/jest": "^29.5.12",
+    "@types/node": "^22.0.0",
     "@types/react": "^16.0.0",
-    "bkoi-gl": ">=2.0.0",
+    "babel-jest": "^29.7.0",
+    "identity-obj-proxy": "^3.0.0",
+    "jest": "^29.7.0",
+    "jest-environment-jsdom": "^29.7.0",
     "ocular-dev-tools": "2.0.0-alpha.15",
+    "puppeteer": "^22.4.0",
     "react": "^18.0.0",
     "react-dom": "^18.0.0",
-    "typescript": "^4.0.0"
+    "react-test-renderer": "^18.0.0",
+    "tape-promise": "^4.0.0",
+    "ts-jest": "^29.1.2",
+    "typescript": "^5.0.0"
   },
   "keywords": [
     "barikoi",
@@ -72,5 +81,12 @@
   "repository": {
     "type": "git",
     "url": "https://github.com/barikoi/react-bkoi-gl.git"
+  },
+  "overrides": {
+    "@testing-library/react-hooks": {
+      "react": "$react",
+      "react-dom": "$react-dom",
+      "react-test-renderer": "$react-test-renderer"
+    }
   }
-}
+}

package/src/components/attribution-control.ts

@@ -1,32 +1,56 @@
-import * as React from 'react';
-import {useEffect, memo} from 'react';
-import {applyReactStyle} from '../utils/apply-react-style';
-import useControl from './use-control';
+/* eslint-disable max-statements */
+/* eslint-disable @typescript-eslint/no-unnecessary-type-assertion */
+import * as React from "react";
+import { useEffect, memo } from "react";
+import { applyReactStyle } from "../utils/apply-react-style";
+import { useControl } from "./use-control";
 
-import type {ControlPosition, AttributionControlInstance} from '../types';
+import type { ControlPosition, AttributionControlOptions } from "../types/lib";
 
-export type AttributionControlProps<OptionsT> = OptionsT & {
+export type AttributionControlProps = AttributionControlOptions & {
   /** Placement of the control relative to the map. */
   position?: ControlPosition;
   /** CSS style override, applied to the control's container */
   style?: React.CSSProperties;
 };
 
-function AttributionControl<AttributionControlOptions, ControlT extends AttributionControlInstance>(
-  props: AttributionControlProps<AttributionControlOptions>
-): null {
-  const ctrl = useControl<ControlT>(
-    ({mapLib}) => new mapLib.AttributionControl(props) as ControlT,
-    {
-      position: props.position
-    }
+function _AttributionControl(props: AttributionControlProps) {
+  const ctrl = useControl(
+    ({ mapLib }) => new mapLib.AttributionControl(props),
+    { position: props.position },
   );
 
   useEffect(() => {
     applyReactStyle(ctrl._container, props.style);
-  }, [props.style]);
+
+    // Ensure the container is available
+    if (!ctrl._container) return;
+
+    // Create and append the custom attribution control
+    // const customAttribution = document.createElement('details');
+    // customAttribution.className = 'maplibregl-ctrl maplibregl-ctrl-attrib maplibregl-compact maplibregl-compact-show';
+    // customAttribution.setAttribute('open', '');
+
+    // const summary = document.createElement('summary');
+    // summary.className = 'maplibregl-ctrl-attrib-button';
+    // summary.setAttribute('title', 'Toggle attribution');
+    // summary.setAttribute('aria-label', 'Toggle attribution');
+    // customAttribution.appendChild(summary);
+
+    // const innerDiv = document.createElement('div');
+    // innerDiv.className = 'maplibregl-ctrl-attrib-inner';
+    // innerDiv.innerHTML = `
+    //   <a href="https://barikoi.com/" target="_blank">© Barikoi</a> |
+    //   <a href="https://www.openmaptiles.org/" target="_blank">© OpenMapTiles</a> |
+    //   <a href="https://www.openstreetmap.org/copyright" target="_blank">© OpenStreetMap contributors</a>
+    // `;
+    // customAttribution.appendChild(innerDiv);
+
+    // ctrl._container.appendChild(customAttribution);
+  }, [props.style, ctrl._container]);
 
   return null;
 }
 
-export default memo(AttributionControl);
+export const AttributionControl: React.FC<AttributionControlProps> =
+  memo(_AttributionControl);

package/src/components/fullscreen-control.ts

@@ -0,0 +1,40 @@
+/* global document */
+import * as React from "react";
+import { useEffect, memo } from "react";
+import { applyReactStyle } from "../utils/apply-react-style";
+import { useControl } from "./use-control";
+
+import type { ControlPosition, FullscreenControlOptions } from "../types/lib";
+
+export type FullscreenControlProps = Omit<
+  FullscreenControlOptions,
+  "container"
+> & {
+  /** Id of the DOM element which should be made full screen. By default, the map container
+   * element will be made full screen. */
+  containerId?: string;
+  /** Placement of the control relative to the map. */
+  position?: ControlPosition;
+  /** CSS style override, applied to the control's container */
+  style?: React.CSSProperties;
+};
+
+function _FullscreenControl(props: FullscreenControlProps) {
+  const ctrl = useControl(
+    ({ mapLib }) =>
+      new mapLib.FullscreenControl({
+        container:
+          props.containerId && document.getElementById(props.containerId),
+      }),
+    { position: props.position },
+  );
+
+  useEffect(() => {
+    applyReactStyle(ctrl._controlContainer, props.style);
+  }, [props.style]);
+
+  return null;
+}
+
+export const FullscreenControl: React.FC<FullscreenControlProps> =
+  memo(_FullscreenControl);

package/src/components/geolocate-control.ts

@@ -1,79 +1,83 @@
-import * as React from 'react';
-import {useImperativeHandle, useRef, useEffect, forwardRef, memo} from 'react';
-import {applyReactStyle} from '../utils/apply-react-style';
-import useControl from './use-control';
+import * as React from "react";
+import {
+  useImperativeHandle,
+  useRef,
+  useEffect,
+  forwardRef,
+  memo,
+} from "react";
+import { applyReactStyle } from "../utils/apply-react-style";
+import { useControl } from "./use-control";
 
 import type {
   ControlPosition,
-  GeolocateControlInstance,
+  GeolocateControl as GeolocateControlInstance,
+  GeolocateControlOptions,
+} from "../types/lib";
+import type {
   GeolocateEvent,
   GeolocateResultEvent,
-  GeolocateErrorEvent
-} from '../types';
+  GeolocateErrorEvent,
+} from "../types/events";
 
-export type GeolocateControlProps<
-  OptionsT,
-  ControlT extends GeolocateControlInstance
-> = OptionsT & {
+export type GeolocateControlProps = GeolocateControlOptions & {
   /** Placement of the control relative to the map. */
   position?: ControlPosition;
   /** CSS style override, applied to the control's container */
   style?: React.CSSProperties;
 
   /** Called on each Geolocation API position update that returned as success. */
-  onGeolocate?: (e: GeolocateResultEvent<ControlT>) => void;
+  onGeolocate?: (e: GeolocateResultEvent) => void;
   /** Called on each Geolocation API position update that returned as an error. */
-  onError?: (e: GeolocateErrorEvent<ControlT>) => void;
+  onError?: (e: GeolocateErrorEvent) => void;
   /** Called on each Geolocation API position update that returned as success but user position
    * is out of map `maxBounds`. */
-  onOutOfMaxBounds?: (e: GeolocateResultEvent<ControlT>) => void;
+  onOutOfMaxBounds?: (e: GeolocateResultEvent) => void;
   /** Called when the GeolocateControl changes to the active lock state. */
-  onTrackUserLocationStart?: (e: GeolocateEvent<ControlT>) => void;
+  onTrackUserLocationStart?: (e: GeolocateEvent) => void;
   /** Called when the GeolocateControl changes to the background state. */
-  onTrackUserLocationEnd?: (e: GeolocateEvent<ControlT>) => void;
+  onTrackUserLocationEnd?: (e: GeolocateEvent) => void;
 };
 
-function GeolocateControl<GeolocateControlOptions, ControlT extends GeolocateControlInstance>(
-  props: GeolocateControlProps<GeolocateControlOptions, ControlT>,
-  ref: React.Ref<ControlT>
+function _GeolocateControl(
+  props: GeolocateControlProps,
+  ref: React.Ref<GeolocateControlInstance>,
 ) {
-  const thisRef = useRef({props});
+  const thisRef = useRef({ props });
 
-  const ctrl = useControl<ControlT>(
-    ({mapLib}) => {
-      const gc = new mapLib.GeolocateControl(props) as ControlT;
+  const ctrl = useControl(
+    ({ mapLib }) => {
+      const gc = new mapLib.GeolocateControl(props);
 
       // Hack: fix GeolocateControl reuse
       // When using React strict mode, the component is mounted twice.
       // GeolocateControl's UI creation is asynchronous. Removing and adding it back causes the UI to be initialized twice.
-      // @ts-expect-error private method
       const setupUI = gc._setupUI;
-      // @ts-expect-error private method
-      gc._setupUI = args => {
+      gc._setupUI = () => {
         if (!gc._container.hasChildNodes()) {
-          setupUI(args);
+          setupUI();
         }
       };
 
-      gc.on('geolocate', e => {
-        thisRef.current.props.onGeolocate?.(e as GeolocateResultEvent<ControlT>);
+      gc.on("geolocate", (e) => {
+        thisRef.current.props.onGeolocate?.(e as GeolocateResultEvent);
       });
-      gc.on('error', e => {
-        thisRef.current.props.onError?.(e as GeolocateErrorEvent<ControlT>);
+      gc.on("error", (e) => {
+        thisRef.current.props.onError?.(e as GeolocateErrorEvent);
       });
-      gc.on('outofmaxbounds', e => {
-        thisRef.current.props.onOutOfMaxBounds?.(e as GeolocateResultEvent<ControlT>);
+      gc.on("outofmaxbounds", (e) => {
+        thisRef.current.props.onOutOfMaxBounds?.(e as GeolocateResultEvent);
       });
-      gc.on('trackuserlocationstart', e => {
-        thisRef.current.props.onTrackUserLocationStart?.(e as GeolocateEvent<ControlT>);
+      gc.on("trackuserlocationstart", (e) => {
+        thisRef.current.props.onTrackUserLocationStart?.(e as GeolocateEvent);
       });
-      gc.on('trackuserlocationend', e => {
-        thisRef.current.props.onTrackUserLocationEnd?.(e as GeolocateEvent<ControlT>);
+      gc.on("trackuserlocationend", (e) => {
+        thisRef.current.props.onTrackUserLocationEnd?.(e as GeolocateEvent);
       });
 
       return gc;
     },
-    {position: props.position}
+    { position: props.position },
   );
 
   thisRef.current.props = props;
@@ -87,4 +91,6 @@ function GeolocateControl<GeolocateControlOptions, ControlT extends GeolocateCon
   return null;
 }
 
-export default memo(forwardRef(GeolocateControl));
+export const GeolocateControl: React.FC<GeolocateControlProps> = memo(
+  forwardRef(_GeolocateControl),
+);

package/src/components/layer.ts

@@ -1,35 +1,44 @@
-import {useContext, useEffect, useMemo, useState, useRef} from 'react';
-import {MapContext} from './map';
-import assert from '../utils/assert';
-import {deepEqual} from '../utils/deep-equal';
+import { useContext, useEffect, useMemo, useState, useRef } from "react";
+import { MapContext } from "./map";
+import assert from "../utils/assert";
+import { deepEqual } from "../utils/deep-equal";
 
-import type {MapInstance, CustomLayerInterface, ILayer} from '../types';
+import type { Map as MapInstance, CustomLayerInterface } from "../types/lib";
+import type { LayerSpecification } from "../types/style-spec";
 
 // Omiting property from a union type, see
 // https://github.com/microsoft/TypeScript/issues/39556#issuecomment-656925230
-type OptionalId<T> = T extends {id: string} ? Omit<T, 'id'> & {id?: string} : T;
-type OptionalSource<T> = T extends {source: string} ? Omit<T, 'source'> & {source?: string} : T;
-
-export type LayerProps<LayerT> = OptionalSource<OptionalId<LayerT>> & {
+type OptionalId<T> = T extends { id: string }
+  ? Omit<T, "id"> & { id?: string }
+  : T;
+type OptionalSource<T> = T extends { source: string }
+  ? Omit<T, "source"> & { source?: string }
+  : T;
+
+export type LayerProps = (
+  | OptionalSource<OptionalId<LayerSpecification>>
+  | CustomLayerInterface
+) & {
   /** If set, the layer will be inserted before the specified layer */
   beforeId?: string;
 };
 
 /* eslint-disable complexity, max-statements */
-function updateLayer<LayerT extends ILayer>(
+function updateLayer(
   map: MapInstance,
   id: string,
-  props: LayerProps<LayerT>,
-  prevProps: LayerProps<LayerT>
+  props: LayerProps,
+  prevProps: LayerProps,
 ) {
-  assert(props.id === prevProps.id, 'layer id changed');
-  assert(props.type === prevProps.type, 'layer type changed');
+  assert(props.id === prevProps.id, "layer id changed");
+  assert(props.type === prevProps.type, "layer type changed");
 
-  if (props.type === 'custom' || prevProps.type === 'custom') {
+  if (props.type === "custom" || prevProps.type === "custom") {
     return;
   }
 
-  const {layout = {}, paint = {}, filter, minzoom, maxzoom, beforeId} = props;
+  // @ts-ignore filter does not exist in some Layer types
+  const { layout = {}, paint = {}, filter, minzoom, maxzoom, beforeId } = props;
 
   if (beforeId !== prevProps.beforeId) {
     map.moveLayer(id, beforeId);
@@ -61,6 +70,7 @@ function updateLayer<LayerT extends ILayer>(
     }
   }
 
+  // @ts-ignore filter does not exist in some Layer types
   if (!deepEqual(filter, prevProps.filter)) {
     map.setFilter(id, filter);
   }
@@ -69,14 +79,14 @@ function updateLayer<LayerT extends ILayer>(
   }
 }
 
-function createLayer<LayerT extends ILayer>(
-  map: MapInstance,
-  id: string,
-  props: LayerProps<LayerT>
-) {
+function createLayer(map: MapInstance, id: string, props: LayerProps) {
   // @ts-ignore
-  if (map.style && map.style._loaded && (!('source' in props) || map.getSource(props.source))) {
-    const options: LayerProps<LayerT> = {...props, id};
+  if (
+    map.style &&
+    map.style._loaded &&
+    (!("source" in props) || map.getSource(props.source))
+  ) {
+    const options: LayerProps = { ...props, id };
     delete options.beforeId;
 
     // @ts-ignore
@@ -88,7 +98,7 @@ function createLayer<LayerT extends ILayer>(
 
 let layerCounter = 0;
 
-function Layer<LayerT extends ILayer>(props: LayerProps<LayerT | CustomLayerInterface>) {
+export function Layer(props: LayerProps) {
   const map = useContext(MapContext).map.getMap();
   const propsRef = useRef(props);
   const [, setStyleLoaded] = useState(0);
@@ -97,12 +107,12 @@ function Layer<LayerT extends ILayer>(props: LayerProps<LayerT | CustomLayerInte
 
   useEffect(() => {
     if (map) {
-      const forceUpdate = () => setStyleLoaded(version => version + 1);
-      map.on('styledata', forceUpdate);
+      const forceUpdate = () => setStyleLoaded((version) => version + 1);
+      map.on("styledata", forceUpdate);
       forceUpdate();
 
       return () => {
-        map.off('styledata', forceUpdate);
+        map.off("styledata", forceUpdate);
         // @ts-ignore
         if (map.style && map.style._loaded && map.getLayer(id)) {
           map.removeLayer(id);
@@ -129,5 +139,3 @@ function Layer<LayerT extends ILayer>(props: LayerProps<LayerT | CustomLayerInte
 
   return null;
 }
-
-export default Layer;

package/src/components/logo-control.ts

@@ -0,0 +1,44 @@
+/* eslint-disable @typescript-eslint/no-unnecessary-type-assertion */
+import * as React from "react";
+import { useEffect, memo } from "react";
+import { applyReactStyle } from "../utils/apply-react-style";
+import { useControl } from "./use-control";
+
+import type { ControlPosition, LogoControlOptions } from "../types/lib";
+
+export type LogoControlProps = LogoControlOptions & {
+  /** Placement of the control relative to the map. */
+  position?: ControlPosition;
+  /** CSS style override, applied to the control's container */
+  style?: React.CSSProperties;
+};
+
+function _LogoControl(props: LogoControlProps) {
+  const ctrl = useControl(({ mapLib }) => new mapLib.LogoControl(props), {
+    position: props.position,
+  });
+
+  useEffect(() => {
+    applyReactStyle(ctrl._container, props.style);
+
+    // Update the DOM structure and attributes directly
+    const logoElement = ctrl._container?.querySelector(
+      ".maplibregl-ctrl-logo",
+    ) as HTMLAnchorElement | null;
+    if (logoElement) {
+      // Update the link attributes
+      logoElement.href = "https://barikoi.com/";
+      logoElement.setAttribute("aria-label", "Barikoi logo");
+      logoElement.target = "_blank";
+      logoElement.rel = "noopener nofollow";
+      logoElement.style.cursor = "pointer";
+
+      // Remove any existing click handlers
+      logoElement.replaceWith(logoElement.cloneNode(true));
+    }
+  }, [props.style, ctrl._container]);
+
+  return null;
+}
+
+export const LogoControl: React.FC<LogoControlProps> = memo(_LogoControl);