Merge branch 'master' of github.com:CartoDB/carto-react into feature/…

…new-legend

CHANGELOG.md

@@ -2,7 +2,39 @@
 
 ## Not released
 
-## 2.3
+## 2.4
+
+### 2.4.2 (2024-03-22)
+
+- Category widget UI: increase keyboard accessibility [#856](https://github.com/CartoDB/carto-react/pull/856)
+- Category widget UI: change focus order to increase keyboard accessibility [#857](https://github.com/CartoDB/carto-react/pull/857)
+
+### 2.4.1 (2024-03-13)
+
+- Fix geometry edit in Feature Selection [#854](https://github.com/CartoDB/carto-react/pull/854)
+
+### 2.4.0 (2024-03-08)
+
+- Check invalid geometries for spatial filter [#847](https://github.com/CartoDB/carto-react/pull/847)
+
+### 2.3.14 (2024-03-07)
+
+- Fix PieWidgetUI keep two decimals always in default percent formatter [#850](https://github.com/CartoDB/carto-react/pull/850)
+
+### 2.3.13 (2024-03-06)
+
+- Add percentFormatter prop in PieWidgetUI, allowing to format percent values [#844](https://github.com/CartoDB/carto-react/pull/844)
+- Fix Snowflake spatial index detection [#845](https://github.com/CartoDB/carto-react/pull/845)
+- Fix TimeSeriesWidgetUI check undefined echart.getInstance().getDom() [#842](https://github.com/CartoDB/carto-react/pull/842)
+- Update MultipleSelectField placeholder text color [#846](https://github.com/CartoDB/carto-react/pull/846)
+
+### 2.3.12 (2024-02-19)
+
+- Fix TimeSeriesContext exports [#840](https://github.com/CartoDB/carto-react/pull/840)
+
+### 2.3.11 (2024-02-13)
+
+- Keyboard accessibility improvements in Widgets and DS components [#835](https://github.com/CartoDB/carto-react/pull/835)
 
 ### 2.3.10 (2024-01-31)
 

lerna.json

@@ -4,5 +4,5 @@
   ],
   "npmClient": "yarn",
   "useWorkspaces": true,
-  "version": "2.3.10"
+  "version": "2.4.2"
 }

package.json

@@ -34,6 +34,7 @@
     "@turf/intersect": "^6.3.0",
     "@turf/invariant": "^6.3.0",
     "@turf/union": "^6.3.0",
+    "@turf/kinks": "^6.3.0",
     "dequal": "^2.0.2",
     "echarts": "^5.4.2",
     "echarts-for-react": "^3.0.2",

packages/react-api/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@carto/react-api",
-  "version": "2.3.10",
+  "version": "2.4.2",
   "description": "CARTO for React - Api",
   "author": "CARTO Dev Team",
   "keywords": [
@@ -68,9 +68,9 @@
     "@babel/runtime": "^7.13.9"
   },
   "peerDependencies": {
-    "@carto/react-core": "^2.3.10",
-    "@carto/react-redux": "^2.3.10",
-    "@carto/react-workers": "^2.3.10",
+    "@carto/react-core": "^2.4.2",
+    "@carto/react-redux": "^2.4.2",
+    "@carto/react-workers": "^2.4.2",
     "@deck.gl/carto": "^8.9.18",
     "@deck.gl/core": "^8.9.18",
     "@deck.gl/extensions": "^8.9.18",

packages/react-api/src/hooks/useCartoLayerProps.js

@@ -1,6 +1,6 @@
 import { useCallback } from 'react';
 import { useSelector } from 'react-redux';
-import { selectSpatialFilter, selectViewport } from '@carto/react-redux';
+import { selectValidSpatialFilter, selectViewport } from '@carto/react-redux';
 import useGeojsonFeatures from './useGeojsonFeatures';
 import useTileFeatures from './useTileFeatures';
 import { getDataFilterExtensionProps } from './dataFilterExtensionUtil';
@@ -18,7 +18,9 @@ export default function useCartoLayerProps({
   viewporFeaturesDebounceTimeout = 250
 }) {
   const viewport = useSelector(selectViewport);
-  const spatialFilter = useSelector((state) => selectSpatialFilter(state, source?.id));
+  const spatialFilter = useSelector((state) =>
+    selectValidSpatialFilter(state, source?.id)
+  );
 
   const [onDataLoadForGeojson] = useGeojsonFeatures({
     source,

packages/react-auth/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@carto/react-auth",
-  "version": "2.3.10",
+  "version": "2.4.2",
   "description": "CARTO for React - Auth",
   "author": "CARTO Dev Team",
   "keywords": [
@@ -68,7 +68,7 @@
     "@babel/runtime": "^7.13.9"
   },
   "peerDependencies": {
-    "@carto/react-core": "^2.3.10",
+    "@carto/react-core": "^2.4.2",
     "react": "17.x || 18.x",
     "react-dom": "17.x || 18.x"
   }

packages/react-basemaps/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@carto/react-basemaps",
-  "version": "2.3.10",
+  "version": "2.4.2",
   "description": "CARTO for React - Basemaps",
   "keywords": [
     "carto",
@@ -68,7 +68,7 @@
     "@babel/runtime": "^7.13.9"
   },
   "peerDependencies": {
-    "@carto/react-core": "^2.3.10",
+    "@carto/react-core": "^2.4.2",
     "@deck.gl/google-maps": "^8.9.18",
     "react": "17.x || 18.x",
     "react-dom": "17.x || 18.x"

packages/react-core/__tests__/utils/columns.test.js

@@ -21,14 +21,20 @@ describe('getColumnNameFromGeoColumn', () => {
 describe('getSpatialIndexFromGeoColumn', () => {
   it('detect simple spatial index', () => {
     expect(getSpatialIndexFromGeoColumn('quadbin')).toStrictEqual('quadbin');
+    expect(getSpatialIndexFromGeoColumn('QUADBIN')).toStrictEqual('quadbin');
     expect(getSpatialIndexFromGeoColumn('h3')).toStrictEqual('h3');
+    expect(getSpatialIndexFromGeoColumn('H3')).toStrictEqual('h3');
     expect(getSpatialIndexFromGeoColumn('s2')).toStrictEqual('s2');
+    expect(getSpatialIndexFromGeoColumn('S2')).toStrictEqual('s2');
   });
 
   it('detect prefix spatial index', () => {
     expect(getSpatialIndexFromGeoColumn('quadbin:abc')).toStrictEqual('quadbin');
+    expect(getSpatialIndexFromGeoColumn('QUADBIN:ABC')).toStrictEqual('quadbin');
     expect(getSpatialIndexFromGeoColumn('h3:abc')).toStrictEqual('h3');
+    expect(getSpatialIndexFromGeoColumn('H3:abc')).toStrictEqual('h3');
     expect(getSpatialIndexFromGeoColumn('s2:abc')).toStrictEqual('s2');
+    expect(getSpatialIndexFromGeoColumn('S2:abc')).toStrictEqual('s2');
   });
 
   it('handle unsupported spatial index', () => {

packages/react-core/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@carto/react-core",
-  "version": "2.3.10",
+  "version": "2.4.2",
   "description": "CARTO for React - Core",
   "author": "CARTO Dev Team",
   "keywords": [

packages/react-core/src/utils/columns.js

@@ -8,7 +8,7 @@ export function getColumnNameFromGeoColumn(geoColumn) {
 export function getSpatialIndexFromGeoColumn(geoColumn) {
   const parts = geoColumn.split(':');
   return (parts.length === 1 || parts.length === 2) &&
-    Object.values(SpatialIndex).includes(parts[0])
-    ? parts[0]
+    Object.values(SpatialIndex).includes(parts[0].toLowerCase())
+    ? parts[0].toLowerCase()
     : null;
 }

packages/react-redux/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@carto/react-redux",
-  "version": "2.3.10",
+  "version": "2.4.2",
   "description": "CARTO for React - Redux",
   "author": "CARTO Dev Team",
   "keywords": [
@@ -67,8 +67,8 @@
     "@babel/runtime": "^7.13.9"
   },
   "peerDependencies": {
-    "@carto/react-core": "^2.3.10",
-    "@carto/react-workers": "^2.3.10",
+    "@carto/react-core": "^2.4.2",
+    "@carto/react-workers": "^2.4.2",
     "@deck.gl/carto": "^8.9.18",
     "@deck.gl/core": "^8.9.18",
     "@reduxjs/toolkit": "^1.5.0"

packages/react-redux/src/index.d.ts

@@ -1,13 +1,3 @@
 export * from './slices/cartoSlice';
 export * from './slices/oauthSlice';
-
-export {
-  InitialCartoState,
-  CartoState,
-  InitialOauthState,
-  OauthState,
-  ViewState,
-  InitialCarto3State,
-  Source,
-  SourceFilters
-} from './types';
+export * from './types';

packages/react-redux/src/slices/cartoSlice.d.ts

@@ -169,4 +169,9 @@ export function selectSpatialFilter(
   sourceId?: string
 ): Feature<Polygon | MultiPolygon> | null;
 
+export function selectValidSpatialFilter(
+  state: any,
+  sourceId?: string
+): Feature<Polygon | MultiPolygon> | null;
+
 export function selectFeatureSelectionMode(state: any): string | null;

packages/react-redux/src/slices/cartoSlice.js

@@ -381,6 +381,15 @@ export const selectSpatialFilter = (state, sourceId) => {
     : spatialFilterGeometry;
 };
 
+/**
+ * Redux selector to select the spatial filter of a given sourceId or the root one.
+ * This selector returns null if the spatial filter is invalid (if it intersetcs itself)
+ */
+export const selectValidSpatialFilter = (state, sourceId) => {
+  const spatialFilter = selectSpatialFilter(state, sourceId);
+  return spatialFilter?.properties?.invalid ? null : spatialFilter;
+};
+
 /**
  * Redux selector to select the feature selection mode based on if it's enabled
  */

packages/react-ui/__tests__/widgets/CategoryWidgetUI.test.js

@@ -62,6 +62,10 @@ describe('CategoryWidgetUI', () => {
   });
 
   describe('events', () => {
+    beforeEach(() => {
+      HTMLElement.prototype.scrollIntoView = jest.fn();
+    });
+
     test('category change', () => {
       const mockOnSelectedCategoriesChange = jest.fn();
       render(
@@ -132,13 +136,12 @@ describe('CategoryWidgetUI', () => {
 
       fireEvent.click(screen.getByText(/Search in 4 elements/));
       fireEvent.click(screen.getByText(/Category 1/));
-      fireEvent.click(screen.getByText(/Apply/));
+      fireEvent.click(screen.getByTestId('primaryApplyButton'));
       fireEvent.click(screen.getByText(/Unlock/));
       expect(mockOnSelectedCategoriesChange).toHaveBeenCalledTimes(2);
     });
 
     test('search category', () => {
-      HTMLElement.prototype.scrollIntoView = jest.fn();
       const mockOnSelectedCategoriesChange = jest.fn();
       render(
         <CategoryWidgetUI
@@ -151,15 +154,15 @@ describe('CategoryWidgetUI', () => {
       fireEvent.click(screen.getByText(/Search in 4 elements/));
       userEvent.type(screen.getByRole('textbox'), 'Category 1');
       fireEvent.click(screen.getByText(/Category 1/));
-      fireEvent.click(screen.getByText(/Apply/));
+      fireEvent.click(screen.getByTestId('primaryApplyButton'));
     });
 
     test('cancel search', () => {
       render(<CategoryWidgetUI data={DATA} maxItems={1} />);
 
       expect(screen.getByText(/Search in 4 elements/)).toBeInTheDocument();
       fireEvent.click(screen.getByText(/Search in 4 elements/));
-      fireEvent.click(screen.getByText(/Cancel/));
+      fireEvent.click(screen.getByTestId('primaryCancelButton'));
     });
 
     test('searchable prop', () => {

packages/react-ui/__tests__/widgets/FeatureSelectionWidgetUI.test.js

@@ -123,11 +123,28 @@ describe('FeatureSelectionWidgetUI', () => {
       name: 'Mask'
     }
   };
+  const INVALID_GEOM = {
+    type: 'Feature',
+    geometry: {
+      type: 'Point',
+      coordinates: [125.6, 10.1]
+    },
+    properties: {
+      name: 'Mask',
+      invalid: true
+    }
+  };
+
   test('geometry is rendered correctly', () => {
     const rendered = render(<CommonFeatureSelectionWidgetUI geometry={GEOMETRY} />);
     expect(rendered.getByText('Mask')).toBeDefined();
   });
 
+  test('invalid geometry is rendered correctly', () => {
+    const rendered = render(<CommonFeatureSelectionWidgetUI geometry={INVALID_GEOM} />);
+    expect(rendered.getByRole('button', { name: 'Invalid geometry' })).toBeDefined();
+  });
+
   test('geometry select event is raised correctly', () => {
     const onSelectGeometry = jest.fn();
 

packages/react-ui/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@carto/react-ui",
-  "version": "2.3.10",
+  "version": "2.4.2",
   "description": "CARTO for React - UI",
   "author": "CARTO Dev Team",
   "keywords": [
@@ -82,7 +82,7 @@
     "@babel/runtime": "^7.13.9"
   },
   "peerDependencies": {
-    "@carto/react-core": "^2.3.10",
+    "@carto/react-core": "^2.4.2",
     "@emotion/react": "^11.10.6",
     "@emotion/styled": "^11.10.6",
     "@formatjs/intl-localematcher": "^0.4.0",

packages/react-ui/src/components/molecules/MultipleSelectField/MultipleSelectField.js

@@ -92,7 +92,7 @@ const MultipleSelectField = forwardRef(
         <Typography
           component='span'
           variant={isSmall ? 'body2' : 'body1'}
-          color='textSecondary'
+          color='text.hint'
           ml={paddingSize}
         >
           {placeholder || intlConfig.formatMessage({ id: 'c4r.form.noneSelected' })}

packages/react-ui/src/index.js

@@ -13,11 +13,16 @@ import LegendProportion from './widgets/legend/legend-types/LegendProportion';
 import LegendRamp from './widgets/legend/legend-types/LegendRamp';
 import ScatterPlotWidgetUI from './widgets/ScatterPlotWidgetUI/ScatterPlotWidgetUI';
 import TimeSeriesWidgetUI from './widgets/TimeSeriesWidgetUI/TimeSeriesWidgetUI';
+import {
+  useTimeSeriesContext,
+  TimeSeriesProvider
+} from './widgets/TimeSeriesWidgetUI/hooks/TimeSeriesContext';
 import FeatureSelectionWidgetUI from './widgets/FeatureSelectionWidgetUI/FeatureSelectionWidgetUI';
 import FeatureSelectionUIDropdown from './widgets/FeatureSelectionWidgetUI/FeatureSelectionUIDropdown';
 import FeatureSelectionUIGeometryChips from './widgets/FeatureSelectionWidgetUI/FeatureSelectionUIGeometryChips';
 import FeatureSelectionUIToggleButton from './widgets/FeatureSelectionWidgetUI/FeatureSelectionUIToggleButton';
 import RangeWidgetUI from './widgets/RangeWidgetUI/RangeWidgetUI';
+import useTimeSeriesInteractivity from './widgets/TimeSeriesWidgetUI/hooks/useTimeSeriesInteractivity';
 import ComparativeFormulaWidgetUI from './widgets/comparative/ComparativeFormulaWidgetUI/ComparativeFormulaWidgetUI';
 import ComparativeCategoryWidgetUI from './widgets/comparative/ComparativeCategoryWidgetUI/ComparativeCategoryWidgetUI';
 import { CHART_TYPES } from './widgets/TimeSeriesWidgetUI/utils/constants';
@@ -73,6 +78,9 @@ export {
   FeatureSelectionUIGeometryChips,
   FeatureSelectionUIToggleButton,
   TimeSeriesWidgetUI,
+  useTimeSeriesContext,
+  useTimeSeriesInteractivity,
+  TimeSeriesProvider,
   CHART_TYPES as TIME_SERIES_CHART_TYPES,
   TableWidgetUI,
   LegendWidgetUI,

packages/react-ui/src/localization/en.js

@@ -92,12 +92,17 @@ const locales = {
         remove: 'Remove',
         polygon: 'Polygon',
         point: 'Point',
-        lineString: 'Line'
+        lineString: 'Line',
+        invalid: 'Invalid geometry'
       },
       pie: {
         clear: 'Clear',
         selectedItems: '{items, plural, one{# selected} other{# selected}}',
         allSelected: 'All'
+      },
+      chartLegend: {
+        next: 'Next page',
+        prev: 'Previous page'
       }
     }
   }

packages/react-ui/src/localization/es.js

@@ -97,6 +97,10 @@ const locales = {
         clear: 'Limpiar',
         selectedItems: '{items, plural, one {# seleccionado} other {# seleccionados}}',
         allSelected: 'Todos seleccionados'
+      },
+      chartLegend: {
+        next: 'Página siguiente',
+        prev: 'Página anterior'
       }
     }
   }

packages/react-ui/src/localization/id.js

@@ -99,6 +99,10 @@ const locales = {
         clear: 'Bersihkan',
         selectedItems: '{items, plural, one{# terpilih} other{# terpilih}}',
         allSelected: 'Semua terpilih'
+      },
+      chartLegend: {
+        next: 'Next page',
+        prev: 'Previous page'
       }
     }
   }