@carto/ps-react-maps 3.0.0-canary.1 → 3.0.0-canary.2

package/dist/types/editable/measurement-tools/provider/types.d.ts

@@ -14,5 +14,5 @@ export interface MeasurementToolsStore {
     setUnit: (mapId: MeasurementToolsState['mapId'], unit: MeasurementToolsState['unit']) => void;
     setLocale: (mapId: MeasurementToolsState['mapId'], locale: MeasurementToolsState['locale']) => void;
     setPositions: (mapId: MeasurementToolsState['mapId'], positions: MeasurementToolsState['positions']) => void;
-    setEnable: (mapId: MeasurementToolsState['mapId'], enabled: MeasurementToolsState['enabled']) => void;
+    setEnabled: (mapId: MeasurementToolsState['mapId'], enabled: MeasurementToolsState['enabled']) => void;
 }

package/dist/types/editable/measurement-tools/types.d.ts

@@ -82,7 +82,7 @@ export type MeasurementToolChildrenProps<M extends string, T = unknown> = Partia
     setUnit: (unit: MeasurementToolsState['unit']) => void;
     setLocale: (locale: MeasurementToolsState['locale']) => void;
     setPositions: (positions: MeasurementToolsState['positions']) => void;
-    setEnable: (enabled: MeasurementToolsState['enabled']) => void;
+    setEnabled: (enabled: MeasurementToolsState['enabled']) => void;
     toggleLayer: (enabled: boolean) => void;
     clearLayer: () => void;
 };

package/dist/types/editable/measurement-tools/use-measurement-tools.d.ts

@@ -29,7 +29,7 @@ export declare function useMeasurementTools({ mapId }: {
     setLocale: (locale: MeasurementToolsState["locale"]) => void;
     setPositions: (positions: MeasurementToolsState["positions"]) => void;
     setUnit: (unit: MeasurementToolsState["unit"]) => void;
-    setEnable: (enabled: MeasurementToolsState["enabled"]) => void;
+    setEnabled: (enabled: MeasurementToolsState["enabled"]) => void;
     toggleLayer: (enabled: boolean) => void;
     clearLayer: () => void;
     setModeInstance: (modeInstance: MeasurementToolsState["modeInstance"]) => void;

package/dist/types/index.d.ts

@@ -24,18 +24,31 @@ export { MeasurementToolsProvider, useMeasurementToolsState, } from './editable/
 export { createMeasurementToolsStore } from './editable/measurement-tools/provider/store';
 export { getCursorDefault, getTooltipDefault } from './helpers';
 export { MapComponent } from './map';
-export type { Layer, LayerStore } from './providers/layers/types';
-export { useLayers } from './providers/layers/store';
-export type { MapProviderProps, MapStateStore, ViewportRect, } from './providers/map/types';
+export type { ModelProps } from './models/types';
+export { CategoriesModel, useCategories } from './models/categories';
+export { FeaturesModel, useFeatures } from './models/features';
+export { FormulaModel, useFormula } from './models/formula';
+export { HistogramModel, useHistogram } from './models/histogram.';
+export { RangeModel, useRange } from './models/range';
+export { ScatterModel, useScatter } from './models/scatter';
+export { TableModel, useTable } from './models/table';
+export { TimeSeriesModel, useTimeSeries } from './models/time-series';
+export { useWidgetModel } from './models/use-widget-model';
+export type { Layer, LayerStore, LayerLegend } from './providers/layers/types';
+export { useLayerStore } from './providers/layers/store';
+export type { MapProviderProps, MapStore, ViewportRect, } from './providers/map/types';
 export { transitionFlyConfig } from './providers/map/const';
-export { MapProvider, useMapState } from './providers/map/provider';
-export { createMapStateStore } from './providers/map/store';
+export { MapProvider, useMapStore } from './providers/map/provider';
+export { createMapStore } from './providers/map/store';
 export type { QuerySource, Source, SourceStore, TableSource, TilesetSource, } from './providers/sources/types';
 export { ApiBaseUrl, clientID } from './providers/sources/const';
-export { useSource } from './providers/sources/store';
-export { useGetLayers } from './use-get-layers';
+export { useSourceStore } from './providers/sources/store';
+export { useLayers } from './use-layers';
+export { useLegend } from './use-legend';
 export { useMapScreenshot } from './use-map-screenshot';
 export type { FieldFormatter, Formatter, Formatters, ObjectToHtmlOptions, Value, } from './utils/object-to-html/types';
 export { formatterTypes } from './utils/object-to-html/const';
 export { objectToHtml } from './utils/object-to-html/object-to-html';
+export { mappingLegendMeridian } from './utils/mapping-meridian';
+export { sortLayers } from './utils/sort-layers';
 export { ZoomControls } from './zoom-controls';

package/dist/types/models/categories.d.ts

@@ -0,0 +1,7 @@
+import { UseQueryResult } from '@tanstack/react-query';
+import { CategoryRequestOptions, CategoryResponse } from '@carto/api-client';
+import { ModelProps } from './types';
+export declare function useCategories({ accessToken, sourceId, widgetProps, useQueryProps, }: ModelProps<CategoryRequestOptions, CategoryResponse>): UseQueryResult<CategoryResponse, Error>;
+export declare function CategoriesModel({ children, ...modelProps }: ModelProps<CategoryRequestOptions, CategoryResponse> & {
+    children: (props: UseQueryResult<CategoryResponse, Error>) => React.ReactNode;
+}): import('react').ReactNode;

package/dist/types/models/features.d.ts

@@ -0,0 +1,7 @@
+import { UseQueryResult } from '@tanstack/react-query';
+import { FeaturesRequestOptions, FeaturesResponse } from '@carto/api-client';
+import { ModelProps } from './types';
+export declare function useFeatures({ accessToken, sourceId, widgetProps, useQueryProps, }: ModelProps<FeaturesRequestOptions, FeaturesResponse>): UseQueryResult<FeaturesResponse, Error>;
+export declare function FeaturesModel({ children, ...modelProps }: ModelProps<FeaturesRequestOptions, FeaturesResponse> & {
+    children: (props: UseQueryResult<FeaturesResponse, Error>) => React.ReactNode;
+}): import('react').ReactNode;

package/dist/types/models/formula.d.ts

@@ -0,0 +1,7 @@
+import { UseQueryResult } from '@tanstack/react-query';
+import { FormulaRequestOptions, FormulaResponse } from '@carto/api-client';
+import { ModelProps } from './types';
+export declare function useFormula({ accessToken, sourceId, widgetProps, useQueryProps, }: ModelProps<FormulaRequestOptions, FormulaResponse>): UseQueryResult<FormulaResponse, Error>;
+export declare function FormulaModel({ children, ...modelProps }: ModelProps<FormulaRequestOptions, FormulaResponse> & {
+    children: (props: UseQueryResult<FormulaResponse, Error>) => React.ReactNode;
+}): import('react').ReactNode;

package/dist/types/models/histogram..d.ts

@@ -0,0 +1,7 @@
+import { UseQueryResult } from '@tanstack/react-query';
+import { HistogramRequestOptions, HistogramResponse } from '@carto/api-client';
+import { ModelProps } from './types';
+export declare function useHistogram({ accessToken, sourceId, widgetProps, useQueryProps, }: ModelProps<HistogramRequestOptions, HistogramResponse>): UseQueryResult<HistogramResponse, Error>;
+export declare function HistogramModel({ children, ...modelProps }: ModelProps<HistogramRequestOptions, HistogramResponse> & {
+    children: (props: UseQueryResult<HistogramResponse, Error>) => React.ReactNode;
+}): import('react').ReactNode;

package/dist/types/models/range.d.ts

@@ -0,0 +1,7 @@
+import { UseQueryResult } from '@tanstack/react-query';
+import { RangeRequestOptions, RangeResponse } from '@carto/api-client';
+import { ModelProps } from './types';
+export declare function useRange({ accessToken, sourceId, widgetProps, useQueryProps, }: ModelProps<RangeRequestOptions, RangeResponse>): UseQueryResult<RangeResponse, Error>;
+export declare function RangeModel({ children, ...modelProps }: ModelProps<RangeRequestOptions, RangeResponse> & {
+    children: (props: UseQueryResult<RangeResponse, Error>) => React.ReactNode;
+}): import('react').ReactNode;

package/dist/types/models/scatter.d.ts

@@ -0,0 +1,7 @@
+import { UseQueryResult } from '@tanstack/react-query';
+import { ScatterRequestOptions, ScatterResponse } from '@carto/api-client';
+import { ModelProps } from './types';
+export declare function useScatter({ accessToken, sourceId, widgetProps, useQueryProps, }: ModelProps<ScatterRequestOptions, ScatterResponse>): UseQueryResult<ScatterResponse, Error>;
+export declare function ScatterModel({ children, ...modelProps }: ModelProps<ScatterRequestOptions, ScatterResponse> & {
+    children: (props: UseQueryResult<ScatterResponse, Error>) => React.ReactNode;
+}): import('react').ReactNode;

package/dist/types/models/table.d.ts

@@ -0,0 +1,7 @@
+import { UseQueryResult } from '@tanstack/react-query';
+import { TableRequestOptions, TableResponse } from '@carto/api-client';
+import { ModelProps } from './types';
+export declare function useTable({ accessToken, sourceId, widgetProps, useQueryProps, }: ModelProps<TableRequestOptions, TableResponse>): UseQueryResult<TableResponse, Error>;
+export declare function TableModel({ children, ...modelProps }: ModelProps<TableRequestOptions, TableResponse> & {
+    children: (props: UseQueryResult<TableResponse, Error>) => React.ReactNode;
+}): import('react').ReactNode;

package/dist/types/models/time-series.d.ts

@@ -0,0 +1,7 @@
+import { UseQueryResult } from '@tanstack/react-query';
+import { TimeSeriesRequestOptions, TimeSeriesResponse } from '@carto/api-client';
+import { ModelProps } from './types';
+export declare function useTimeSeries({ accessToken, sourceId, widgetProps, useQueryProps, }: ModelProps<TimeSeriesRequestOptions, TimeSeriesResponse>): UseQueryResult<TimeSeriesResponse, Error>;
+export declare function TimeSeriesModel({ children, ...modelProps }: ModelProps<TimeSeriesRequestOptions, TimeSeriesResponse> & {
+    children: (props: UseQueryResult<TimeSeriesResponse, Error>) => React.ReactNode;
+}): import('react').ReactNode;

package/dist/types/models/types.d.ts

@@ -0,0 +1,7 @@
+import { UseQueryOptions } from '@tanstack/react-query';
+export interface ModelProps<T, R> {
+    accessToken: string;
+    sourceId: string;
+    widgetProps: T;
+    useQueryProps?: Omit<UseQueryOptions<unknown, Error, R>, 'queryKey' | 'queryFn'>;
+}

package/dist/types/models/use-widget-model.d.ts

@@ -0,0 +1 @@
+export declare function useWidgetModel(accessToken: string, sourceId: string): import('@carto/api-client').WidgetRemoteSource<import('node_modules/@carto/api-client/build/widget-sources/widget-source').WidgetSourceProps> | null;

package/dist/types/providers/layers/store.d.ts

@@ -1,2 +1,2 @@
 import { LayerStore } from './types';
-export declare const useLayers: import('zustand').UseBoundStore<import('zustand').StoreApi<LayerStore>>;
+export declare const useLayerStore: import('zustand').UseBoundStore<import('zustand').StoreApi<LayerStore>>;

package/dist/types/providers/layers/types.d.ts

@@ -1,9 +1,21 @@
+import { ReactNode } from 'react';
 import { LayerType } from '../../types';
 export interface Layer extends LayerType {
+    legend?: LayerLegend;
+    name?: string;
     order?: number;
-    legend?: string;
 }
 export interface LayerStore {
     layers: Record<string, Layer>;
     setLayer: (id: string, layer?: Partial<Layer>) => void;
 }
+export interface LayerLegend {
+    collapsed?: boolean;
+    collapsible?: boolean;
+    helperText?: ReactNode;
+    maxZoom?: number;
+    minZoom?: number;
+    opacityControl?: boolean;
+    switchable?: boolean;
+    variables?: unknown;
+}

package/dist/types/providers/map/provider.d.ts

@@ -1,4 +1,4 @@
 import { PropsWithChildren } from 'react';
-import { MapProviderProps, MapStateStore } from './types';
+import { MapProviderProps, MapStore } from './types';
 export declare function MapProvider({ children, values, }: PropsWithChildren<MapProviderProps>): import("react/jsx-runtime").JSX.Element;
-export declare function useMapState<T>(selector: (state: MapStateStore) => T): T;
+export declare function useMapStore<T>(selector: (state: MapStore) => T): T;

package/dist/types/providers/map/store.d.ts

@@ -1,2 +1,2 @@
-import { MapProviderProps, MapStateStore } from './types';
-export declare const createMapStateStore: (initProps: MapProviderProps["values"]) => import('zustand').StoreApi<MapStateStore>;
+import { MapProviderProps, MapStore } from './types';
+export declare const createMapStore: (initProps: MapProviderProps["values"]) => import('zustand').StoreApi<MapStore>;

package/dist/types/providers/map/types.d.ts

@@ -10,7 +10,7 @@ interface ValueProps {
 export interface MapProviderProps {
     values: Omit<ValueProps, 'isLoaded'>[];
 }
-export interface MapStore {
+export interface MapSlice {
     maps: Record<ValueProps['id'], Pick<ValueProps, 'basemap' | 'isLoaded'> & {
         instanceRef?: MapComponentProps['instanceRef'];
         overlayRef?: MapComponentProps['overlayRef'];
@@ -29,14 +29,16 @@ export interface MapStore {
     addLayers: (id: ValueProps['id'], layers: NonNullable<ValueProps['layers']>) => void;
     removeLayers: (id: ValueProps['id'], layer: NonNullable<ValueProps['layers']>) => void;
 }
-export interface ViewStateStore {
+export interface ViewStateSlice {
+    viewports: Record<ValueProps['id'], WebMercatorViewport | null>;
+    updateViewPort: (id: ValueProps['id']) => void;
     viewStates: Record<ValueProps['id'], ValueProps['viewState']>;
     setViewState: (id: MapComponentProps['id'], viewState: MapViewState) => void;
     setZoom: (id: MapComponentProps['id'], zoom: MapViewState['zoom']) => void;
     setMinZoom: (id: MapComponentProps['id'], minZoom: MapViewState['minZoom']) => void;
     setMaxZoom: (id: MapComponentProps['id'], maxZoom: MapViewState['maxPitch']) => void;
 }
-export interface CommonStore {
+export interface CommonSlice {
     fitBounds: (id: ValueProps['id'], bounds: Parameters<WebMercatorViewport['fitBounds']>[0], options?: {
         boundsOptions?: Parameters<WebMercatorViewport['fitBounds']>[1];
         viewStateOptions?: Omit<MapViewState, 'latitude' | 'longitude' | 'zoom'>;
@@ -49,7 +51,7 @@ export interface CommonStore {
         viewStateOptions?: Omit<MapViewState, 'latitude' | 'longitude' | 'zoom'>;
     }) => void;
 }
-export type MapStateStore = MapStore & ViewStateStore & CommonStore;
+export type MapStore = MapSlice & ViewStateSlice & CommonSlice;
 export interface ViewportRect {
     x: number;
     y: number;

package/dist/types/providers/sources/store.d.ts

@@ -1,2 +1,3 @@
-import { SourceStore } from './types';
-export declare const useSource: import('zustand').UseBoundStore<import('zustand').StoreApi<SourceStore>>;
+import { Source, SourceStore } from './types';
+export declare const useSourceStore: import('zustand').UseBoundStore<import('zustand').StoreApi<SourceStore>>;
+export declare function useSource(id: string): Source | undefined;

package/dist/types/providers/sources/types.d.ts

@@ -1,15 +1,17 @@
-import { VectorQuerySourceOptions, VectorTableSourceOptions, VectorTilesetSourceOptions } from '@deck.gl/carto';
+import { WidgetRemoteSource, WidgetRemoteSourceProps, VectorQuerySourceOptions, VectorTableSourceOptions, VectorTilesetSourceOptions, TileFormat } from '@carto/api-client';
 export type QuerySource = {
     type: 'query';
 } & Omit<VectorQuerySourceOptions, 'accessToken' | 'sqlQuery'>;
 export type TilesetSource = {
     type: 'tileset';
+    tileFormat: TileFormat;
 } & Omit<VectorTilesetSourceOptions, 'accessToken' | 'tableName'>;
 export type TableSource = {
     type: 'table';
 } & Omit<VectorTableSourceOptions, 'accessToken' | 'tableName'>;
 export type Source = (QuerySource | TilesetSource | TableSource) & {
     data: string;
+    widgets?: WidgetRemoteSource<WidgetRemoteSourceProps>;
 };
 export interface SourceStore {
     sources: Record<string, Source>;

package/dist/types/types.d.ts

@@ -1,11 +1,11 @@
 import { Class, ValueOf } from 'type-fest';
 import { MutableRefObject, ReactNode, RefObject } from 'react';
-import { Layer, MapViewState, PickingInfo, ViewStateChangeParameters } from '@deck.gl/core';
+import { Layer, LayerProps, MapViewState, PickingInfo, ViewStateChangeParameters } from '@deck.gl/core';
 import { DeckGLProps, DeckGLRef } from '@deck.gl/react';
 import { MapRef } from 'react-map-gl/maplibre';
 import { CartoBasemaps, GmapsBasemap, MapsTypes } from './const';
 import { MapProps, APIProviderProps } from '@vis.gl/react-google-maps';
-import { ViewStateStore } from './providers/map/types';
+import { ViewStateSlice } from './providers/map/types';
 export * from '../types/common';
 export type BasemapKey = keyof typeof CartoBasemaps | keyof typeof GmapsBasemap;
 export type BasemapType = ValueOf<typeof MapsTypes>;
@@ -15,9 +15,9 @@ export interface Tooltip extends PickingInfo {
     className?: string | undefined;
     style?: Partial<CSSStyleDeclaration> | undefined;
 }
-export interface LayerType<T extends Class<Layer> = Class<Layer>> {
+export interface LayerType<T extends Class<Layer> = Class<Layer>, P extends LayerProps = LayerProps> {
     type: T | null;
-    props: unknown;
+    props?: Partial<P>;
 }
 export type InstanceRef = DeckGLRef;
 export type OverlayRef = MapRef | google.maps.Map | null | undefined;
@@ -51,6 +51,6 @@ export interface ZoomControlChildrenProps {
     maxZoom: MapViewState['maxZoom'];
     minZoom: MapViewState['minZoom'];
     isLoading: boolean;
-    setZoom: (zoom: Parameters<ViewStateStore['setZoom']>[1]) => void;
+    setZoom: (zoom: Parameters<ViewStateSlice['setZoom']>[1]) => void;
     flyTo: (viewState: MapViewState) => void;
 }

package/dist/types/{use-get-layers.d.ts → use-layers.d.ts}

@@ -1,4 +1,4 @@
 import { MapComponentProps } from './types';
-export declare function useGetLayers({ id }: {
+export declare function useLayers({ id }: {
     id: MapComponentProps['id'];
 }): import('.').Layer[];

package/dist/types/use-legend.d.ts

@@ -0,0 +1,16 @@
+import { Layer, LayerLegend } from './providers/layers/types';
+export declare function useLegend<T>(layersId: string[], callback: (layer: Layer) => T): {
+    legend: T[];
+    onChangeVisibility: ({ id, visible, ...legend }: {
+        id: string;
+        visible: boolean;
+    } & Partial<LayerLegend>) => void;
+    onChangeOpacity: ({ id, opacity }: {
+        id: string;
+        opacity: number;
+    }) => void;
+    onChangRowCollapsed: ({ id, collapsed }: {
+        id: string;
+        collapsed: boolean;
+    }) => void;
+};

package/dist/types/utils/mapping-meridian.d.ts

@@ -0,0 +1,15 @@
+import { Layer } from '../providers/layers/types';
+export declare function mappingLegendMeridian<T>(layer: Layer): {
+    collapsed: boolean | undefined;
+    collapsible: boolean | undefined;
+    helperText: import('react').ReactNode;
+    id: string | undefined;
+    legend: T;
+    maxZoom: number | undefined;
+    minZoom: number | undefined;
+    opacity: number;
+    opacityControl: boolean | undefined;
+    switchable: boolean | undefined;
+    title: string | undefined;
+    visible: boolean;
+};

package/dist/types/utils/sort-layers.d.ts

@@ -0,0 +1,2 @@
+import { Layer } from '../providers/layers/types';
+export declare function sortLayers(layers: Layer[]): Layer[];

package/package.json

@@ -1,12 +1,14 @@
 {
   "name": "@carto/ps-react-maps",
-  "version": "3.0.0-canary.1",
+  "version": "3.0.0-canary.2",
   "description": "CARTO's Professional Service React DeckGL library",
   "type": "module",
   "dependencies": {
     "@turf/turf": "7.1.0"
   },
   "devDependencies": {
+    "@tanstack/react-query": "5.61.0",
+    "@carto/api-client": "0.5.0-alpha.0",
     "@deck.gl-community/editable-layers": "9.0.3",
     "@deck.gl/aggregation-layers": "9.0.38",
     "@deck.gl/carto": "9.0.38",
@@ -22,11 +24,13 @@
     "convert-units": "3.0.0-beta.7",
     "html2canvas": "1.4.1",
     "maplibre-gl": "4.7.1",
-    "react-map-gl": "7.2.0-beta.1",
+    "react-map-gl": "7.1.8",
     "zustand": "5.0.3",
-    "@carto/ps-utils": "2.0.0-canary.1"
+    "@carto/ps-utils": "2.0.0-canary.2"
   },
   "peerDependencies": {
+    "@tanstack/react-query": "^5.61.0",
+    "@carto/api-client": "^0.5.0-alpha.0",
     "@deck.gl-community/editable-layers": "^9.0.0",
     "@deck.gl/aggregation-layers": "^9.0.0",
     "@deck.gl/carto": "^9.0.0",
@@ -42,9 +46,9 @@
     "html2canvas": "^1.4.1",
     "maplibre-gl": "^4.0.0",
     "react": "^18.0.0 || ^19.0.0",
-    "react-map-gl": "7.2.0-beta.1",
+    "react-map-gl": "^7.1.8",
     "zustand": "^5.0.0",
-    "@carto/ps-utils": "2.0.0-canary.1"
+    "@carto/ps-utils": "2.0.0-canary.2"
   },
   "exports": {
     ".": {