Merge branch 'master' into feature/sc-304698/backend-based-widget-cal…

…culation-using-spatialfilter

CHANGELOG.md

@@ -2,6 +2,18 @@
 
 ## Not released
 
+- Changed how widget are calculated when a mask is set: use just the mask, no more intersection between mask and viewport [#661](https://github.com/CartoDB/carto-react/pull/661)
+- LegendCategories component migrated from makeStyles to styled-components + cleanup [#634](https://github.com/CartoDB/carto-react/pull/634)
+- LegendProportion component migrated from makeStyles to styled-components + cleanup [#635](https://github.com/CartoDB/carto-react/pull/635)
+- LegendRamp component migrated from makeStyles to styled-components + cleanup [#636](https://github.com/CartoDB/carto-react/pull/636)
+- LegendWidgetUI component migrated from makeStyles to styled-components + cleanup [#637](https://github.com/CartoDB/carto-react/pull/637)
+- GeocoderWidget component migrated from makeStyles to styled-components [#638](https://github.com/CartoDB/carto-react/pull/638)
+- RangeWidgetUI component migrated from makeStyles to styled-components [#639](https://github.com/CartoDB/carto-react/pull/639)
+- FeatureSelectionWidgetUI component migrated from makeStyles to styled-components [#640](https://github.com/CartoDB/carto-react/pull/640)
+- LegendWrapper component migrated from makeStyles to styled-components + cleanup [#641](https://github.com/CartoDB/carto-react/pull/641)
+- TableWidgetUI component migrated from makeStyles to styled-components + cleanup [#642](https://github.com/CartoDB/carto-react/pull/642)
+- TimeSeriesWidgetUI component cleanup makeStyles and unnecessary className [#643](https://github.com/CartoDB/carto-react/pull/643)
+
 ## 2.0
 
 ### 2.0.2 (2023-04-26)

lerna.json

@@ -4,5 +4,5 @@
   ],
   "npmClient": "yarn",
   "useWorkspaces": true,
-  "version": "2.0.1"
+  "version": "2.0.2"
 }

packages/react-api/package.json

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

packages/react-auth/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@carto/react-auth",
-  "version": "2.0.1",
+  "version": "2.0.2",
   "description": "CARTO for React - Auth",
   "author": "CARTO Dev Team",
   "keywords": [
@@ -64,7 +64,7 @@
     "@babel/runtime": "^7.13.9"
   },
   "peerDependencies": {
-    "@carto/react-core": "^2.0.1",
+    "@carto/react-core": "^2.0.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.0.1",
+  "version": "2.0.2",
   "description": "CARTO for React - Basemaps",
   "keywords": [
     "carto",
@@ -64,7 +64,7 @@
     "@babel/runtime": "^7.13.9"
   },
   "peerDependencies": {
-    "@carto/react-core": "^2.0.1",
+    "@carto/react-core": "^2.0.2",
     "@deck.gl/google-maps": "^8.9.6",
     "react": "17.x || 18.x",
     "react-dom": "17.x || 18.x"

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

@@ -0,0 +1,64 @@
+import { hasFlag, setFlags, clearFlags } from '../../src/utils/featureFlags';
+
+describe('Feature flags', () => {
+  afterEach(() => {
+    clearFlags();
+  });
+
+  test('are not set initially', () => {
+    expect(hasFlag('A')).toStrictEqual(false);
+    expect(hasFlag('B')).toStrictEqual(false);
+    expect(hasFlag('C')).toStrictEqual(false);
+  });
+
+  test('can be set using an array of strings', () => {
+    setFlags(['A', 'B']);
+    expect(hasFlag('A')).toStrictEqual(true);
+    expect(hasFlag('B')).toStrictEqual(true);
+    expect(hasFlag('C')).toStrictEqual(false);
+
+    setFlags([]);
+    expect(hasFlag('A')).toStrictEqual(false);
+    expect(hasFlag('B')).toStrictEqual(false);
+    expect(hasFlag('C')).toStrictEqual(false);
+  });
+
+  test('can be set using an object', () => {
+    setFlags({
+      A: 10,
+      B: true,
+      C: false,
+      D: undefined,
+      E: null,
+      F: [],
+      G: {}
+    });
+    expect(hasFlag('A')).toStrictEqual(true);
+    expect(hasFlag('B')).toStrictEqual(true);
+    expect(hasFlag('C')).toStrictEqual(false);
+    expect(hasFlag('D')).toStrictEqual(false);
+    expect(hasFlag('E')).toStrictEqual(false);
+    expect(hasFlag('F')).toStrictEqual(true);
+    expect(hasFlag('G')).toStrictEqual(true);
+
+    setFlags({});
+    expect(hasFlag('A')).toStrictEqual(false);
+    expect(hasFlag('B')).toStrictEqual(false);
+    expect(hasFlag('C')).toStrictEqual(false);
+  });
+
+  test('are cleared', () => {
+    setFlags(['A']);
+    expect(hasFlag('A')).toStrictEqual(true);
+    clearFlags();
+    expect(hasFlag('A')).toStrictEqual(false);
+  });
+
+  const invaild = [10, '', 'A', false, { '': 10 }, ['A', '']];
+  test.each(invaild)('fail in case of invalid flags %p', (x) => {
+    const t = () => {
+      setFlags(x);
+    };
+    expect(t).toThrow();
+  });
+});

packages/react-core/package.json

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

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

@@ -36,3 +36,9 @@ export { groupValuesByDateColumn } from './operations/groupByDate';
 export { SpatialIndex } from './operations/constants/SpatialIndexTypes'
 
 export { FEATURE_SELECTION_MODES, EDIT_MODES, MASK_ID } from './utils/featureSelectionConstants';
+
+export {
+  hasFlag as _hasFeatureFlag,
+  setFlags as _setFeatureFlags,
+  clearFlags as _clearFeatureFlags
+} from './utils/featureFlags';

packages/react-core/src/index.js

@@ -47,3 +47,9 @@ export {
   EDIT_MODES,
   MASK_ID
 } from './utils/featureSelectionConstants';
+
+export {
+  hasFlag as _hasFeatureFlag,
+  setFlags as _setFeatureFlags,
+  clearFlags as _clearFeatureFlags
+} from './utils/featureFlags';

packages/react-core/src/utils/featureFlags.d.ts

@@ -0,0 +1,3 @@
+export function setFlags(flags: Record<string, any> | string[]): void
+export function clearFlags(): void
+export function hasFlag(flag: string): boolean

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

@@ -0,0 +1,30 @@
+let featureFlags = [];
+
+export function setFlags(flags) {
+  const isValidFlag = (f) => typeof f === 'string' && f;
+
+  if (Array.isArray(flags) && flags.every(isValidFlag)) {
+    featureFlags = flags;
+  } else if (
+    !Array.isArray(flags) &&
+    typeof flags === 'object' &&
+    Object.keys(flags).every(isValidFlag)
+  ) {
+    featureFlags = [];
+    for (const [flag, value] of Object.entries(flags)) {
+      if (value) {
+        featureFlags.push(flag);
+      }
+    }
+  } else {
+    throw new Error(`Invalid feature flags: ${flags}`);
+  }
+}
+
+export function clearFlags() {
+  featureFlags = [];
+}
+
+export function hasFlag(flag) {
+  return featureFlags.includes(flag);
+}

packages/react-redux/package.json

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

packages/react-ui/__tests__/widgets/legend/LegendCategories.test.js

@@ -1,7 +1,8 @@
 import React from 'react';
-import { render, screen } from '../../widgets/utils/testUtils';
+import { render, screen } from '../utils/testUtils';
 import LegendCategories from '../../../src/widgets/legend/LegendCategories';
 import { getPalette } from '../../../src/utils/palette';
+import { hexToRgb } from '@mui/material';
 
 const COLOR = 'TealGrn';
 
@@ -21,9 +22,10 @@ describe('LegendCategories', () => {
   test('renders colors (CARTOColors) correctly', () => {
     render(<LegendCategories legend={DEFAULT_LEGEND} />);
     const elements = document.querySelectorAll('[class*="marker"]');
-    getPalette(COLOR, 2).forEach((color, idx) =>
-      expect(elements[idx]).toHaveStyle(`background-color: ${color}`)
-    );
+    getPalette(COLOR, 2).forEach((color, idx) => {
+      const styles = window.getComputedStyle(elements[idx]);
+      expect(styles['background-color']).toBe(hexToRgb(color));
+    });
   });
   test('renders colors (hex) correctly', () => {
     render(<LegendCategories legend={{ ...DEFAULT_LEGEND, colors: ['#000', '#fff'] }} />);
@@ -35,9 +37,10 @@ describe('LegendCategories', () => {
   test('renders stroked colors correctly', () => {
     render(<LegendCategories legend={{ ...DEFAULT_LEGEND, isStrokeColor: true }} />);
     const elements = document.querySelectorAll('[class*="marker"]');
-    getPalette(COLOR, 2).forEach((color, idx) =>
-      expect(elements[idx]).toHaveStyle(`border-color: ${color}`)
-    );
+    getPalette(COLOR, 2).forEach((color, idx) => {
+      const styles = window.getComputedStyle(elements[idx]);
+      expect(styles['border-color']).toBe(color);
+    });
   });
   test('renders masked icons correctly', () => {
     render(
@@ -47,8 +50,9 @@ describe('LegendCategories', () => {
     );
     const elements = document.querySelectorAll('[class*="marker"]');
     getPalette(COLOR, 2).forEach((color, idx) => {
-      expect(elements[idx]).toHaveStyle(`mask-image: url(https://xyz.com/x.png)`);
-      expect(elements[idx]).toHaveStyle(`background-color: ${color}`);
+      const styles = window.getComputedStyle(elements[idx]);
+      expect(styles['mask-image']).toBe('url(https://xyz.com/x.png)');
+      expect(styles['background-color']).toBe(hexToRgb(color));
     });
   });
   test('renders non-masked icons correctly', () => {
@@ -63,8 +67,9 @@ describe('LegendCategories', () => {
     );
     const elements = document.querySelectorAll('[class*="marker"]');
     getPalette(COLOR, 2).forEach((color, idx) => {
-      expect(elements[idx]).toHaveStyle(`background-image: url(https://xyz.com/x.png)`);
-      expect(elements[idx]).toHaveStyle(`background-color: rgba(0,0,0,0)`);
+      const styles = window.getComputedStyle(elements[idx]);
+      expect(styles['background-image']).toBe('url(https://xyz.com/x.png)');
+      expect(styles['background-color']).toBe('rgba(0, 0, 0, 0)');
     });
   });
 });

packages/react-ui/__tests__/widgets/legend/LegendRamp.test.js

@@ -2,6 +2,7 @@ import React from 'react';
 import { render, screen } from '../../widgets/utils/testUtils';
 import LegendRamp from '../../../src/widgets/legend/LegendRamp';
 import { getPalette } from '../../../src/utils/palette';
+import { hexToRgb } from '@mui/material';
 
 const COLOR = 'TealGrn';
 
@@ -31,22 +32,28 @@ describe('LegendRamp', () => {
       expect(screen.queryByText('< 0')).toBeInTheDocument();
       expect(screen.queryByText('≥ 200')).toBeInTheDocument();
 
-      const elements = document.querySelectorAll('[class*="step"]');
+      const elements = document.querySelectorAll('[data-testid=step-discontinuous]');
       expect(elements.length).toBe(3);
-      getPalette(COLOR, 3).forEach((color, idx) =>
-        expect(elements[idx]).toHaveStyle(`background-color: ${color}`)
-      );
+      getPalette(COLOR, 3).forEach((color, idx) => {
+        const backgroundColor = window.getComputedStyle(elements[idx])[
+          'background-color'
+        ];
+        expect(backgroundColor).toBe(hexToRgb(color));
+      });
     });
     test('renders formatted labels correctly', () => {
       render(<LegendRamp legend={DEFAULT_LEGEND_WITH_FORMATTED_LABELS} />);
       expect(screen.queryByText('< 0 km')).toBeInTheDocument();
       expect(screen.queryByText('≥ 200 km')).toBeInTheDocument();
 
-      const elements = document.querySelectorAll('[class*="step"]');
+      const elements = document.querySelectorAll('[data-testid=step-discontinuous]');
       expect(elements.length).toBe(3);
-      getPalette(COLOR, 3).forEach((color, idx) =>
-        expect(elements[idx]).toHaveStyle(`background-color: ${color}`)
-      );
+      getPalette(COLOR, 3).forEach((color, idx) => {
+        const backgroundColor = window.getComputedStyle(elements[idx])[
+          'background-color'
+        ];
+        expect(backgroundColor).toBe(hexToRgb(color));
+      });
     });
   });
   describe('continuous', () => {
@@ -55,10 +62,10 @@ describe('LegendRamp', () => {
       expect(screen.queryByText('0')).toBeInTheDocument();
       expect(screen.queryByText('200')).toBeInTheDocument();
 
-      const ramp = document.querySelector('[class*="step"]');
+      const ramp = document.querySelector('[data-testid=step-continuous]');
       const palette = getPalette(COLOR, 2);
       expect(ramp).toHaveStyle(
-        `background-image: linear-gradient(to right, ${palette.join()})`
+        `background: linear-gradient(to right, ${palette.join()})`
       );
     });
     test('renders formatted labels correctly', () => {
@@ -68,10 +75,10 @@ describe('LegendRamp', () => {
       expect(screen.queryByText('0 km')).toBeInTheDocument();
       expect(screen.queryByText('200 km')).toBeInTheDocument();
 
-      const ramp = document.querySelector('[class*="step"]');
+      const ramp = document.querySelector('[data-testid=step-continuous]');
       const palette = getPalette(COLOR, 2);
       expect(ramp).toHaveStyle(
-        `background-image: linear-gradient(to right, ${palette.join()})`
+        `background: linear-gradient(to right, ${palette.join()})`
       );
     });
   });

packages/react-ui/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@carto/react-ui",
-  "version": "2.0.1",
+  "version": "2.0.2",
   "description": "CARTO for React - UI",
   "author": "CARTO Dev Team",
   "keywords": [
@@ -78,7 +78,7 @@
     "@babel/runtime": "^7.13.9"
   },
   "peerDependencies": {
-    "@carto/react-core": "^2.0.1",
+    "@carto/react-core": "^2.0.2",
     "@emotion/react": "^11.10.6",
     "@emotion/styled": "^11.10.6",
     "@mui/icons-material": "^5.11.16",

packages/react-ui/src/theme/sections/components/dataDisplay.js

@@ -223,6 +223,7 @@ export const dataDisplayOverrides = {
         border: `2px solid ${commonPalette.divider}`,
         borderRadius: getSpacing(0.5),
         fontWeight: themeTypography.fontWeightMedium,
+        paddingRight: getSpacing(3),
         '& .MuiSelect-icon': {
           top: '50%',
           transform: 'translateY(-50%)',