From 177377728138c0115a9aa0574ecfd0edeb38c3ed Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?V=C3=ADctor=20Velarde?= Date: Mon, 24 Oct 2022 13:39:52 +0200 Subject: [PATCH] Mui v5 upgrade (#501) * Add new mui-v5 packages + styled-components * Add emotion react & styled libs deps * Add automatic codemod replacements, mostly all import changes * Partial and basic typing for new palette elements, using mui * Fully remove material-ui v4 references from lib * Fix import for createSpacing * Remove material-ui externals from webpack configuration * Adapt webpack externals with new peer deps, due to mui v5 upgrade * Use custom render with providers in test files for react-ui * Remove custom getMaterialUIContext in favour of render override for tests * Fix LegendWidgetUI tests, due to some changes in the rendering details * Fix FeatureSelectionWidgetUI tests, due to some changes in the rendering details * Fix RangeWidgetUI tests by changing selectors (temporarily?) * Remove adaptV4Theme from Storybook preview * Set a new alpha name for experimental release * Mock requestAnimationFrame in FormulaUI tests * v0.0.0-experimental-muiv5-0 * Set peer deps to experimental 0.0.0 packages * v0.0.0-experimental-muiv5-1 --- CHANGELOG.md | 1 + lerna.json | 4 +- package.json | 11 +- packages/react-api/package.json | 8 +- packages/react-auth/package.json | 4 +- packages/react-basemaps/package.json | 4 +- packages/react-core/package.json | 2 +- packages/react-redux/package.json | 6 +- .../__tests__/widgets/BarWidgetUI.test.js | 42 +- .../widgets/CategoryWidgetUI.test.js | 38 +- .../widgets/FeatureSelectionWidgetUI.test.js | 12 +- .../__tests__/widgets/FormulaWidgetUI.test.js | 10 +- .../widgets/HistogramWidgetUI.test.js | 7 +- .../__tests__/widgets/LegendWidgetUI.test.js | 21 +- .../__tests__/widgets/PieWidgetUI.test.js | 13 +- .../__tests__/widgets/RangeWidgetUI.test.js | 51 +- .../widgets/ScatterPlotWidget.test.js | 11 +- .../__tests__/widgets/TableWidgetUI.test.js | 6 +- .../widgets/TimeSeriesWidgetUI.test.js | 11 +- .../__tests__/widgets/WrapperWidgetUI.test.js | 2 +- .../widgets/legend/LegendCategories.test.js | 2 +- .../widgets/legend/LegendIcon.test.js | 2 +- .../widgets/legend/LegendProportion.test.js | 2 +- .../widgets/legend/LegendRamp.test.js | 6 +- .../react-ui/__tests__/widgets/testUtils.js | 28 +- .../__tests__/widgets/utils/testUtils.js | 34 + packages/react-ui/package.json | 19 +- packages/react-ui/src/assets/CircleIcon.js | 2 +- packages/react-ui/src/assets/CursorIcon.js | 2 +- packages/react-ui/src/assets/LassoIcon.js | 2 +- packages/react-ui/src/assets/LayerIcon.js | 2 +- packages/react-ui/src/assets/PolygonIcon.js | 2 +- packages/react-ui/src/assets/RectangleIcon.js | 2 +- packages/react-ui/src/assets/UploadIcon.js | 2 +- .../src/custom-components/InputFile.js | 4 +- packages/react-ui/src/theme/carto-theme.d.ts | 11 +- packages/react-ui/src/theme/carto-theme.js | 2 +- .../react-ui/src/theme/sections/palette.js | 3 +- packages/react-ui/src/theme/themeUtils.js | 2 +- packages/react-ui/src/widgets/BarWidgetUI.js | 3 +- .../react-ui/src/widgets/CategoryWidgetUI.js | 6 +- .../src/widgets/FeatureSelectionWidgetUI.js | 17 +- .../react-ui/src/widgets/FormulaWidgetUI.js | 3 +- .../HistogramWidgetUI/HistogramWidgetUI.js | 3 +- .../useHistogramInteractivity.js | 2 +- packages/react-ui/src/widgets/NoDataAlert.js | 32 +- .../react-ui/src/widgets/OpacityControl.js | 10 +- packages/react-ui/src/widgets/PieWidgetUI.js | 2 +- .../react-ui/src/widgets/RangeWidgetUI.js | 3 +- .../src/widgets/ScatterPlotWidgetUI.js | 2 +- .../widgets/TableWidgetUI/TableWidgetUI.js | 5 +- .../TimeSeriesWidgetUI/TimeSeriesWidgetUI.js | 4 +- .../components/TimeSeriesChart.js | 2 +- .../hooks/useTimeSeriesInteractivity.js | 2 +- .../react-ui/src/widgets/WrapperWidgetUI.js | 8 +- .../src/widgets/legend/LayerOptionWrapper.js | 2 +- .../src/widgets/legend/LegendCategories.js | 3 +- .../react-ui/src/widgets/legend/LegendIcon.js | 2 +- .../src/widgets/legend/LegendProportion.js | 3 +- .../react-ui/src/widgets/legend/LegendRamp.js | 3 +- .../src/widgets/legend/LegendWidgetUI.js | 12 +- .../src/widgets/legend/LegendWrapper.js | 8 +- packages/react-ui/src/widgets/legend/Note.js | 3 +- .../react-ui/storybook/.storybook/preview.js | 15 +- .../stories/common/Autocomplete.stories.js | 4 +- .../stories/common/Breadcrumb.stories.js | 4 +- .../stories/common/Button.stories.js | 4 +- .../stories/common/ButtonGroup.stories.js | 2 +- .../stories/common/Checkbox.stories.js | 2 +- .../storybook/stories/common/Chip.stories.js | 2 +- .../stories/common/Dialog.stories.js | 2 +- .../stories/common/Divider.stories.js | 4 +- .../storybook/stories/common/List.stories.js | 6 +- .../stories/common/Palette.stories.js | 5 +- .../storybook/stories/common/Paper.stories.js | 4 +- .../stories/common/Progress.stories.js | 4 +- .../storybook/stories/common/Radio.stories.js | 2 +- .../stories/common/Select.stories.js | 4 +- .../stories/common/Slider.stories.js | 2 +- .../stories/common/Switch.stories.js | 2 +- .../storybook/stories/common/Tabs.stories.js | 4 +- .../stories/common/Text-field.stories.js | 4 +- .../stories/common/ToggleButton.stories.js | 10 +- .../stories/common/Tooltip.stories.js | 4 +- .../stories/common/Typography.stories.js | 2 +- .../FeatureSelectionWidgetUI.stories.js | 2 +- .../stories/widgetsUI/InputFile.stories.js | 4 +- .../widgetsUI/TableWidgetUI.stories.js | 4 +- .../widgetsUI/WrapperWidgetUI.stories.js | 8 +- packages/react-ui/webpack.config.js | 6 +- packages/react-widgets/package.json | 16 +- .../src/layers/FeatureSelectionLayer.js | 2 +- .../src/widgets/GeocoderWidget.js | 6 +- .../src/widgets/TimeSeriesWidget.js | 2 +- packages/react-widgets/webpack.config.js | 3 +- packages/react-workers/package.json | 4 +- yarn.lock | 592 +++++++++++++----- 97 files changed, 824 insertions(+), 450 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 2a608a8d6..8a9fedda7 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -7,6 +7,7 @@ - Split carto-theme into sections [#495](https://github.com/CartoDB/carto-react/pull/495) - Integration between Figma and Storybook through `addon-designs` [#488](https://github.com/CartoDB/carto-react/pull/488) - Update Storybook to v6.5.12 [#487](https://github.com/CartoDB/carto-react/pull/487) +- Upgrade from Material UI v4 to MUI v5 [#501](https://github.com/CartoDB/carto-react/pull/501) ## 1.5 diff --git a/lerna.json b/lerna.json index 9e0f84b8e..0b61ab7f3 100644 --- a/lerna.json +++ b/lerna.json @@ -4,5 +4,5 @@ ], "npmClient": "yarn", "useWorkspaces": true, - "version": "1.5.0-alpha.4" -} + "version": "0.0.0-experimental-muiv5-1" +} \ No newline at end of file diff --git a/package.json b/package.json index 069cd4010..0b40e3c5e 100644 --- a/package.json +++ b/package.json @@ -13,9 +13,14 @@ "@deck.gl/google-maps": "^8.9.0-alpha.4", "@deck.gl/layers": "^8.9.0-alpha.4", "@deck.gl/mesh-layers": "^8.9.0-alpha.4", - "@material-ui/core": "^4.11.3", - "@material-ui/icons": "^4.11.2", - "@material-ui/lab": "^4.0.0-alpha.57", + "@mui/icons-material": "^5.10.9", + "@mui/lab": "^5.0.0-alpha.104", + "@mui/material": "^5.10.10", + "@mui/styles": "^5.10.10", + "@mui/styled-engine-sc": "^5.10.6", + "@emotion/react": "^11.10.0", + "@emotion/styled": "^11.10.0", + "styled-components": "^5.2.3", "@nebula.gl/edit-modes": "^1.0.4", "@nebula.gl/layers": "^1.0.4", "@reduxjs/toolkit": "^1.5.0", diff --git a/packages/react-api/package.json b/packages/react-api/package.json index 25b40bb5a..fb96055a5 100644 --- a/packages/react-api/package.json +++ b/packages/react-api/package.json @@ -1,6 +1,6 @@ { "name": "@carto/react-api", - "version": "1.5.0-alpha.4", + "version": "0.0.0-experimental-muiv5-1", "description": "CARTO for React - Api", "author": "CARTO Dev Team", "keywords": [ @@ -64,9 +64,9 @@ "@babel/runtime": "^7.13.9" }, "peerDependencies": { - "@carto/react-core": "^1.5.0-alpha.4", - "@carto/react-redux": "^1.5.0-alpha.4", - "@carto/react-workers": "^1.5.0-alpha.4", + "@carto/react-core": "0.0.0-experimental-muiv5-0", + "@carto/react-redux": "0.0.0-experimental-muiv5-0", + "@carto/react-workers": "0.0.0-experimental-muiv5-0", "@deck.gl/carto": "^8.9.0-alpha.4", "@deck.gl/core": "^8.9.0-alpha.4", "@deck.gl/extensions": "^8.9.0-alpha.4", diff --git a/packages/react-auth/package.json b/packages/react-auth/package.json index d249849be..b101c3882 100644 --- a/packages/react-auth/package.json +++ b/packages/react-auth/package.json @@ -1,6 +1,6 @@ { "name": "@carto/react-auth", - "version": "1.5.0-alpha.4", + "version": "0.0.0-experimental-muiv5-1", "description": "CARTO for React - Auth", "author": "CARTO Dev Team", "keywords": [ @@ -64,7 +64,7 @@ "@babel/runtime": "^7.13.9" }, "peerDependencies": { - "@carto/react-core": "^1.5.0-alpha.4", + "@carto/react-core": "0.0.0-experimental-muiv5-0", "react": "^17.0.1", "react-dom": "^17.0.1" } diff --git a/packages/react-basemaps/package.json b/packages/react-basemaps/package.json index a77735e44..c07ec632a 100644 --- a/packages/react-basemaps/package.json +++ b/packages/react-basemaps/package.json @@ -1,6 +1,6 @@ { "name": "@carto/react-basemaps", - "version": "1.5.0-alpha.4", + "version": "0.0.0-experimental-muiv5-1", "description": "CARTO for React - Basemaps", "keywords": [ "carto", @@ -64,7 +64,7 @@ "@babel/runtime": "^7.13.9" }, "peerDependencies": { - "@carto/react-core": "^1.5.0-alpha.4", + "@carto/react-core": "0.0.0-experimental-muiv5-0", "@deck.gl/google-maps": "^8.9.0-alpha.4", "react": "^17.0.1", "react-dom": "^17.0.1" diff --git a/packages/react-core/package.json b/packages/react-core/package.json index 1786a1bfe..8d2925b70 100644 --- a/packages/react-core/package.json +++ b/packages/react-core/package.json @@ -1,6 +1,6 @@ { "name": "@carto/react-core", - "version": "1.5.0-alpha.4", + "version": "0.0.0-experimental-muiv5-1", "description": "CARTO for React - Core", "author": "CARTO Dev Team", "keywords": [ diff --git a/packages/react-redux/package.json b/packages/react-redux/package.json index af19c6016..c2bb2b701 100644 --- a/packages/react-redux/package.json +++ b/packages/react-redux/package.json @@ -1,6 +1,6 @@ { "name": "@carto/react-redux", - "version": "1.5.0-alpha.4", + "version": "0.0.0-experimental-muiv5-1", "description": "CARTO for React - Redux", "author": "CARTO Dev Team", "keywords": [ @@ -63,8 +63,8 @@ "@babel/runtime": "^7.13.9" }, "peerDependencies": { - "@carto/react-core": "^1.5.0-alpha.4", - "@carto/react-workers": "^1.5.0-alpha.4", + "@carto/react-core": "0.0.0-experimental-muiv5-0", + "@carto/react-workers": "0.0.0-experimental-muiv5-0", "@deck.gl/carto": "^8.9.0-alpha.4", "@deck.gl/core": "^8.9.0-alpha.4", "@reduxjs/toolkit": "^1.5.0" diff --git a/packages/react-ui/__tests__/widgets/BarWidgetUI.test.js b/packages/react-ui/__tests__/widgets/BarWidgetUI.test.js index ef1c19521..db5e29700 100644 --- a/packages/react-ui/__tests__/widgets/BarWidgetUI.test.js +++ b/packages/react-ui/__tests__/widgets/BarWidgetUI.test.js @@ -1,7 +1,7 @@ import React from 'react'; -import { render, fireEvent, screen } from '@testing-library/react'; +import { render, fireEvent, screen } from '../widgets/utils/testUtils'; import BarWidgetUI from '../../src/widgets/BarWidgetUI'; -import { getMaterialUIContext, mockEcharts } from './testUtils'; +import { mockEcharts } from './testUtils'; describe('BarWidgetUI', () => { beforeAll(() => { @@ -16,15 +16,14 @@ describe('BarWidgetUI', () => { const X_AXIS_DATA = ['column_1', 'column_2', 'column_3']; - const Widget = (props) => - getMaterialUIContext( - {}} - {...props} - /> - ); + const Widget = (props) => ( + {}} + {...props} + /> + ); const Y_AXIS_DATA_MULTIPLE = [ [1, 2, 3], @@ -39,17 +38,16 @@ describe('BarWidgetUI', () => { 6: 'Column 2' }; - const WidgetMultiple = (props) => - getMaterialUIContext( - {}} - {...props} - /> - ); + const WidgetMultiple = (props) => ( + {}} + {...props} + /> + ); test('all selected', () => { render(); diff --git a/packages/react-ui/__tests__/widgets/CategoryWidgetUI.test.js b/packages/react-ui/__tests__/widgets/CategoryWidgetUI.test.js index 3b18d33bc..5de8e77ff 100644 --- a/packages/react-ui/__tests__/widgets/CategoryWidgetUI.test.js +++ b/packages/react-ui/__tests__/widgets/CategoryWidgetUI.test.js @@ -1,5 +1,5 @@ import React from 'react'; -import { render, fireEvent, screen } from '@testing-library/react'; +import { render, fireEvent, screen } from '../widgets/utils/testUtils'; import userEvent from '@testing-library/user-event'; import CategoryWidgetUI from '../../src/widgets/CategoryWidgetUI'; import { currencyFormatter } from './testUtils'; @@ -170,25 +170,33 @@ describe('CategoryWidgetUI', () => { }); describe('when data name is not string', () => { - const NotStringData = [{ - name: true, - value: 100 - }, { - name: false, - value: 101 - }] + const NotStringData = [ + { + name: true, + value: 100 + }, + { + name: false, + value: 101 + } + ]; test('should render properly', () => { render(); - + expect(screen.getByText(/true/)).toBeInTheDocument(); expect(screen.getByText(/101/)).toBeInTheDocument(); }); test('should maintain typing when filters', () => { - const onSelectedCategoriesChangeFn = jest.fn() - render(); - userEvent.click(screen.getByText(/true/)) - expect(onSelectedCategoriesChangeFn).toHaveBeenCalledWith([true]) - }) - }) + const onSelectedCategoriesChangeFn = jest.fn(); + render( + + ); + userEvent.click(screen.getByText(/true/)); + expect(onSelectedCategoriesChangeFn).toHaveBeenCalledWith([true]); + }); + }); }); diff --git a/packages/react-ui/__tests__/widgets/FeatureSelectionWidgetUI.test.js b/packages/react-ui/__tests__/widgets/FeatureSelectionWidgetUI.test.js index 2d52df6b7..c400034e8 100644 --- a/packages/react-ui/__tests__/widgets/FeatureSelectionWidgetUI.test.js +++ b/packages/react-ui/__tests__/widgets/FeatureSelectionWidgetUI.test.js @@ -1,7 +1,7 @@ import React from 'react'; -import { render, queryByAttribute, fireEvent } from '@testing-library/react'; +import { render, queryByAttribute, fireEvent } from '../widgets/utils/testUtils'; import FeatureSelectionWidgetUI from '../../src/widgets/FeatureSelectionWidgetUI'; -import { capitalize } from '@material-ui/core'; +import { capitalize } from '@mui/material'; import CursorIcon from '../../src/assets/CursorIcon'; import PolygonIcon from '../../src/assets/PolygonIcon'; import RectangleIcon from '../../src/assets/RectangleIcon'; @@ -79,9 +79,9 @@ describe('FeatureSelectionWidgetUI', () => { expect(onEnabledChange).toHaveBeenCalledWith(false); }); - test('selectionModes and editModes are rendered correctly in modes menu', () => { + test('selectionModes and editModes are rendered correctly in modes menu', async () => { const rendered = render(); - const menuBtn = rendered.getByTitle('Select a mode'); + const menuBtn = await rendered.findByLabelText('Select a mode'); // Open menu fireEvent.click(menuBtn); // Once the menu is opened, check everything is okey rendered @@ -90,13 +90,13 @@ describe('FeatureSelectionWidgetUI', () => { ); }); - test('select mode event is correctly raised', () => { + test('select mode event is correctly raised', async () => { const onSelectMode = jest.fn(); const rendered = render( ); - const menuBtn = rendered.getByTitle('Select a mode'); + const menuBtn = await rendered.findByLabelText('Select a mode'); // Open menu fireEvent.click(menuBtn); diff --git a/packages/react-ui/__tests__/widgets/FormulaWidgetUI.test.js b/packages/react-ui/__tests__/widgets/FormulaWidgetUI.test.js index 28c286474..899ba8edb 100644 --- a/packages/react-ui/__tests__/widgets/FormulaWidgetUI.test.js +++ b/packages/react-ui/__tests__/widgets/FormulaWidgetUI.test.js @@ -1,9 +1,17 @@ import React from 'react'; -import { render, screen } from '@testing-library/react'; +import { render, screen } from '../widgets/utils/testUtils'; import FormulaWidgetUI from '../../src/widgets/FormulaWidgetUI'; import { currencyFormatter } from './testUtils'; describe('FormulaWidgetUI', () => { + beforeEach(() => { + jest.spyOn(window, 'requestAnimationFrame').mockImplementation((cb) => cb()); + }); + + afterEach(() => { + window.requestAnimationFrame.mockRestore(); + }); + test('empty', () => { render(); expect(screen.getByText(/-/)).toBeInTheDocument(); diff --git a/packages/react-ui/__tests__/widgets/HistogramWidgetUI.test.js b/packages/react-ui/__tests__/widgets/HistogramWidgetUI.test.js index 37d392fd0..9d2a31646 100644 --- a/packages/react-ui/__tests__/widgets/HistogramWidgetUI.test.js +++ b/packages/react-ui/__tests__/widgets/HistogramWidgetUI.test.js @@ -1,7 +1,7 @@ import React from 'react'; -import { render, fireEvent, screen } from '@testing-library/react'; +import { render, fireEvent, screen } from '../widgets/utils/testUtils'; import HistogramWidgetUI from '../../src/widgets/HistogramWidgetUI/HistogramWidgetUI'; -import { getMaterialUIContext, mockEcharts } from './testUtils'; +import { mockEcharts } from './testUtils'; describe('HistogramWidgetUI', () => { beforeAll(() => { @@ -22,8 +22,7 @@ describe('HistogramWidgetUI', () => { onSelectedBarsChange }; - const Widget = (props) => - getMaterialUIContext(); + const Widget = (props) => ; test('all selected', () => { render(); diff --git a/packages/react-ui/__tests__/widgets/LegendWidgetUI.test.js b/packages/react-ui/__tests__/widgets/LegendWidgetUI.test.js index 3e28392d8..a766ebe80 100644 --- a/packages/react-ui/__tests__/widgets/LegendWidgetUI.test.js +++ b/packages/react-ui/__tests__/widgets/LegendWidgetUI.test.js @@ -1,9 +1,7 @@ import React from 'react'; -import { getMaterialUIContext } from './testUtils'; import LegendWidgetUI from '../../src/widgets/legend/LegendWidgetUI'; -import { fireEvent, render, screen } from '@testing-library/react'; -import { Typography } from '@material-ui/core'; -import { act } from '@testing-library/react-hooks'; +import { fireEvent, render, screen } from '../widgets/utils/testUtils'; +import { Typography } from '@mui/material'; const CUSTOM_CHILDREN = Legend custom; @@ -118,7 +116,7 @@ describe('LegendWidgetUI', () => { } } ]; - const Widget = (props) => getMaterialUIContext(); + const Widget = (props) => ; test('single legend', () => { render(); @@ -200,13 +198,13 @@ describe('LegendWidgetUI', () => { expect(screen.getByText('Test')).toBeInTheDocument(); }); - test('legend with opacity control', () => { + test('legend with opacity control', async() => { const legendConfig = DATA[7]; const onChangeOpacity = jest.fn(); const container = render( ); - const layerOptionsBtn = screen.getByTitle('Layer options'); + const layerOptionsBtn = await screen.findByLabelText('Layer options'); expect(layerOptionsBtn).toBeInTheDocument(); layerOptionsBtn.click(); expect(screen.getByText('Opacity')).toBeInTheDocument(); @@ -254,22 +252,23 @@ describe('LegendWidgetUI', () => { expect(screen.getByText('Legend custom')).toBeInTheDocument(); }); - test('with custom layer options', () => { + test('with custom layer options', async() => { const layer = DATA[8]; render( ); - const layerOptionsBtn = screen.getByTitle('Layer options'); + const layerOptionsBtn = await screen.findByLabelText('Layer options'); expect(layerOptionsBtn).toBeInTheDocument(); layerOptionsBtn.click(); expect(screen.getByText('PaletteSelector')).toBeInTheDocument(); }); - test('with custom layer options - unknown option', () => { + + test('with custom layer options - unknown option', async() => { const layer = { ...DATA[8], options: ['unknown'] }; render( ); - const layerOptionsBtn = screen.getByTitle('Layer options'); + const layerOptionsBtn = await screen.findByLabelText('Layer options'); expect(layerOptionsBtn).toBeInTheDocument(); layerOptionsBtn.click(); expect(screen.getByText('Unknown layer option')).toBeInTheDocument(); diff --git a/packages/react-ui/__tests__/widgets/PieWidgetUI.test.js b/packages/react-ui/__tests__/widgets/PieWidgetUI.test.js index 75a283f84..cd1db9fa9 100644 --- a/packages/react-ui/__tests__/widgets/PieWidgetUI.test.js +++ b/packages/react-ui/__tests__/widgets/PieWidgetUI.test.js @@ -1,7 +1,7 @@ import React from 'react'; -import { render } from '@testing-library/react'; +import { render } from '../widgets/utils/testUtils'; import PieWidgetUI from '../../src/widgets/PieWidgetUI'; -import { getMaterialUIContext, mockEcharts } from './testUtils'; +import { mockEcharts } from './testUtils'; describe('PieWidgetUI', () => { beforeAll(() => { @@ -23,10 +23,9 @@ describe('PieWidgetUI', () => { } ]; - const Widget = (props) => - getMaterialUIContext( - {}} {...props} /> - ); + const Widget = (props) => ( + {}} {...props} /> + ); test('renders correctly', () => { render(); @@ -35,4 +34,4 @@ describe('PieWidgetUI', () => { test('with selected categories', () => { render(); }); -}); \ No newline at end of file +}); diff --git a/packages/react-ui/__tests__/widgets/RangeWidgetUI.test.js b/packages/react-ui/__tests__/widgets/RangeWidgetUI.test.js index dbc50ddb3..9c68d3ddf 100644 --- a/packages/react-ui/__tests__/widgets/RangeWidgetUI.test.js +++ b/packages/react-ui/__tests__/widgets/RangeWidgetUI.test.js @@ -1,16 +1,22 @@ import React from 'react'; -import { render, fireEvent, screen, waitFor } from '@testing-library/react'; -import { getMaterialUIContext } from './testUtils'; +import { render, fireEvent, screen, waitFor } from '../widgets/utils/testUtils'; import RangeWidgetUI from '../../src/widgets/RangeWidgetUI'; -describe('SliderWidgetUI', () => { - const Widget = (props) => - getMaterialUIContext(); +describe('RangeWidgetUI', () => { + const Widget = (props) => ; test('renders with default props', () => { const { container } = render(); - const minValue = screen.getByRole('slider', { name: 'min value' }); - const maxValue = screen.getByRole('slider', { name: 'max value' }); + + // const minValue = screen.getByLabelText('min value'); + // const maxValue = screen.getByLabelText('max value'); + const minValue = document.querySelector( + 'input[type="range"][aria-label="min value"]' + ); + const maxValue = document.querySelector( + 'input[type="range"][aria-label="max value"]' + ); + const inputMin = screen.getByRole('spinbutton', { name: 'min value' }); const inputMax = screen.getByRole('spinbutton', { name: 'max value' }); @@ -31,8 +37,8 @@ describe('SliderWidgetUI', () => { test('renders specified limits', () => { const { container } = render(); - const minLimit = screen.getByRole('slider', { name: 'min limit' }); - const maxLimit = screen.getByRole('slider', { name: 'max limit' }); + const minLimit = screen.getByLabelText('min limit'); + const maxLimit = screen.getByLabelText('max limit'); expect(minLimit).toHaveAttribute('aria-valuemin', '0'); expect(minLimit).toHaveAttribute('aria-valuemax', '100'); @@ -48,8 +54,8 @@ describe('SliderWidgetUI', () => { test('renders specified limits with same min and max values', () => { const { container } = render(); - const minLimit = screen.getByRole('slider', { name: 'min limit' }); - const maxLimit = screen.getByRole('slider', { name: 'max limit' }); + const minLimit = screen.getByLabelText('min limit'); + const maxLimit = screen.getByLabelText('max limit'); expect(minLimit).toHaveAttribute('aria-valuemin', '0'); expect(minLimit).toHaveAttribute('aria-valuemax', '100'); @@ -65,8 +71,9 @@ describe('SliderWidgetUI', () => { test('renders specified limits and values', () => { const { container } = render(); - const minLimit = screen.getByRole('slider', { name: 'min limit' }); - const maxLimit = screen.getByRole('slider', { name: 'max limit' }); + const minLimit = screen.getByLabelText('min limit'); + const maxLimit = screen.getByLabelText('max limit'); + const inputMin = screen.getByRole('spinbutton', { name: 'min value' }); const inputMax = screen.getByRole('spinbutton', { name: 'max value' }); @@ -87,8 +94,8 @@ describe('SliderWidgetUI', () => { test('renders specified limits out of min-max range', () => { const { container } = render(); - const minLimit = screen.getByRole('slider', { name: 'min limit' }); - const maxLimit = screen.getByRole('slider', { name: 'max limit' }); + const minLimit = screen.getByLabelText('min limit'); + const maxLimit = screen.getByLabelText('max limit'); expect(minLimit).toHaveAttribute('aria-valuemin', '0'); expect(minLimit).toHaveAttribute('aria-valuemax', '100'); @@ -101,13 +108,21 @@ describe('SliderWidgetUI', () => { expect(container.getElementsByClassName('MuiSlider-mark').length).toBe(0); }); - test('On selected method is called when we change slider values', async () => { + test('on selected method is called when we change slider values', async () => { const mockOnSelectedRangeChange = jest.fn(); render(); + const inputMin = screen.getByRole('spinbutton', { name: 'min value' }); const inputMax = screen.getByRole('spinbutton', { name: 'max value' }); - const minValue = screen.getByRole('slider', { name: 'min value' }); - const maxValue = screen.getByRole('slider', { name: 'max value' }); + + // const minValue = screen.getByLabelText('min value'); + // const maxValue = screen.getByLabelText('max value'); + const minValue = document.querySelector( + 'input[type="range"][aria-label="min value"]' + ); + const maxValue = document.querySelector( + 'input[type="range"][aria-label="max value"]' + ); fireEvent.change(inputMin, { target: { value: 20 } }); fireEvent.blur(inputMin); diff --git a/packages/react-ui/__tests__/widgets/ScatterPlotWidget.test.js b/packages/react-ui/__tests__/widgets/ScatterPlotWidget.test.js index 76f3ef886..63242579c 100644 --- a/packages/react-ui/__tests__/widgets/ScatterPlotWidget.test.js +++ b/packages/react-ui/__tests__/widgets/ScatterPlotWidget.test.js @@ -1,7 +1,7 @@ import React from 'react'; -import { render } from '@testing-library/react'; +import { render } from '../widgets/utils/testUtils'; import ScatterPlotWidgetUI from '../../src/widgets/ScatterPlotWidgetUI'; -import { getMaterialUIContext, mockEcharts } from './testUtils'; +import { mockEcharts } from './testUtils'; describe('ScatterPlotWidgetUI', () => { beforeAll(() => { @@ -16,10 +16,9 @@ describe('ScatterPlotWidgetUI', () => { [2, 4], [3, 6] ]; - const Widget = (props) => - getMaterialUIContext( - {}} {...props} /> - ); + const Widget = (props) => ( + {}} {...props} /> + ); test('renders correctly', () => { render(); diff --git a/packages/react-ui/__tests__/widgets/TableWidgetUI.test.js b/packages/react-ui/__tests__/widgets/TableWidgetUI.test.js index d7c6e93d9..8dfaccec0 100644 --- a/packages/react-ui/__tests__/widgets/TableWidgetUI.test.js +++ b/packages/react-ui/__tests__/widgets/TableWidgetUI.test.js @@ -1,12 +1,10 @@ import React from 'react'; -import { render, fireEvent, screen } from '@testing-library/react'; +import { render, fireEvent, screen } from '../widgets/utils/testUtils'; import TableWidgetUI from '../../src/widgets/TableWidgetUI/TableWidgetUI'; -import { getMaterialUIContext } from './testUtils'; import { columns, rows } from '../../src/widgets/TableWidgetUI/mockData'; describe('TableWidgetUI', () => { - const Widget = (props) => - getMaterialUIContext(); + const Widget = (props) => ; test('renders with default props', () => { render(); diff --git a/packages/react-ui/__tests__/widgets/TimeSeriesWidgetUI.test.js b/packages/react-ui/__tests__/widgets/TimeSeriesWidgetUI.test.js index 7b85c1669..6ea4c6a9e 100644 --- a/packages/react-ui/__tests__/widgets/TimeSeriesWidgetUI.test.js +++ b/packages/react-ui/__tests__/widgets/TimeSeriesWidgetUI.test.js @@ -1,7 +1,7 @@ import React from 'react'; -import { render, screen, act, fireEvent, waitFor } from '@testing-library/react'; +import { render, screen, act, fireEvent, waitFor } from '../widgets/utils/testUtils'; import TimeSeriesWidgetUI from '../../src/widgets/TimeSeriesWidgetUI/TimeSeriesWidgetUI'; -import { getMaterialUIContext, mockEcharts } from './testUtils'; +import { mockEcharts } from './testUtils'; import { GroupDateTypes } from '@carto/react-core'; describe('TimeSeriesWidgetUI', () => { @@ -46,10 +46,9 @@ describe('TimeSeriesWidgetUI', () => { stepSize: GroupDateTypes.WEEKS }; - const Widget = (props) => - getMaterialUIContext( - - ); + const Widget = (props) => ( + + ); test('renders correctly', () => { render(); diff --git a/packages/react-ui/__tests__/widgets/WrapperWidgetUI.test.js b/packages/react-ui/__tests__/widgets/WrapperWidgetUI.test.js index 628983ef9..fe143aaf6 100644 --- a/packages/react-ui/__tests__/widgets/WrapperWidgetUI.test.js +++ b/packages/react-ui/__tests__/widgets/WrapperWidgetUI.test.js @@ -4,7 +4,7 @@ import { fireEvent, screen, waitForElementToBeRemoved -} from '@testing-library/react'; +} from '../widgets/utils/testUtils'; import WrapperWidgetUI from '../../src/widgets/WrapperWidgetUI'; import FormulaWidgetUI from '../../src/widgets/FormulaWidgetUI'; diff --git a/packages/react-ui/__tests__/widgets/legend/LegendCategories.test.js b/packages/react-ui/__tests__/widgets/legend/LegendCategories.test.js index 04c229704..bc1582ab4 100644 --- a/packages/react-ui/__tests__/widgets/legend/LegendCategories.test.js +++ b/packages/react-ui/__tests__/widgets/legend/LegendCategories.test.js @@ -1,5 +1,5 @@ import React from 'react'; -import { render, screen } from '@testing-library/react'; +import { render, screen } from '../../widgets/utils/testUtils'; import LegendCategories from '../../../src/widgets/legend/LegendCategories'; import { getPalette } from '../../../src/utils/palette'; diff --git a/packages/react-ui/__tests__/widgets/legend/LegendIcon.test.js b/packages/react-ui/__tests__/widgets/legend/LegendIcon.test.js index 2425feef7..69605b83c 100644 --- a/packages/react-ui/__tests__/widgets/legend/LegendIcon.test.js +++ b/packages/react-ui/__tests__/widgets/legend/LegendIcon.test.js @@ -1,5 +1,5 @@ import React from 'react'; -import { render, screen } from '@testing-library/react'; +import { render, screen } from '../../widgets/utils/testUtils'; import LegendIcon from '../../../src/widgets/legend/LegendIcon'; const ICON = `data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0Ij4KICAgIDxkZWZzPgogICAgICAgIDxmaWx0ZXIgaWQ9InFsbTY3aXI1MWEiPgogICAgICAgICAgICA8ZmVDb2xvck1hdHJpeCBpbj0iU291cmNlR3JhcGhpYyIgdmFsdWVzPSIwIDAgMCAwIDAuMTcyNTQ5IDAgMCAwIDAgMC4xODgyMzUgMCAwIDAgMCAwLjE5NjA3OCAwIDAgMCAxLjAwMDAwMCAwIi8+CiAgICAgICAgPC9maWx0ZXI+CiAgICA8L2RlZnM+CiAgICA8ZyBmaWxsPSJub25lIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPgogICAgICAgIDxnPgogICAgICAgICAgICA8ZyBmaWx0ZXI9InVybCgjcWxtNjdpcjUxYSkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yNDIgLTQ2NCkgdHJhbnNsYXRlKDIyMiA0NDgpIj4KICAgICAgICAgICAgICAgIDxnIGZpbGw9IiMyQzMwMzIiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDIwIDE2KSI+CiAgICAgICAgICAgICAgICAgICAgPHBhdGggZD0iTTEyIDBjNi42MjcgMCAxMiA1LjM3MyAxMiAxMnMtNS4zNzMgMTItMTIgMTJTMCAxOC42MjcgMCAxMiA1LjM3MyAwIDEyIDB6IiBvcGFjaXR5PSIuMiIvPgogICAgICAgICAgICAgICAgICAgIDxjaXJjbGUgY3g9IjEyIiBjeT0iMTIiIHI9IjQiLz4KICAgICAgICAgICAgICAgIDwvZz4KICAgICAgICAgICAgPC9nPgogICAgICAgIDwvZz4KICAgIDwvZz4KPC9zdmc+Cg==`; diff --git a/packages/react-ui/__tests__/widgets/legend/LegendProportion.test.js b/packages/react-ui/__tests__/widgets/legend/LegendProportion.test.js index cf0d7aff0..3a2758ed9 100644 --- a/packages/react-ui/__tests__/widgets/legend/LegendProportion.test.js +++ b/packages/react-ui/__tests__/widgets/legend/LegendProportion.test.js @@ -1,5 +1,5 @@ import React from 'react'; -import { render, screen } from '@testing-library/react'; +import { render, screen } from '../../widgets/utils/testUtils'; import LegendProportion from '../../../src/widgets/legend/LegendProportion'; const DEFAULT_LEGEND = { diff --git a/packages/react-ui/__tests__/widgets/legend/LegendRamp.test.js b/packages/react-ui/__tests__/widgets/legend/LegendRamp.test.js index c9b342021..59b2353a3 100644 --- a/packages/react-ui/__tests__/widgets/legend/LegendRamp.test.js +++ b/packages/react-ui/__tests__/widgets/legend/LegendRamp.test.js @@ -1,5 +1,5 @@ import React from 'react'; -import { render, screen } from '@testing-library/react'; +import { render, screen } from '../../widgets/utils/testUtils'; import LegendRamp from '../../../src/widgets/legend/LegendRamp'; import { getPalette } from '../../../src/utils/palette'; @@ -62,7 +62,9 @@ describe('LegendRamp', () => { ); }); test('renders formatted labels correctly', () => { - render(); + render( + + ); expect(screen.queryByText('0 km')).toBeInTheDocument(); expect(screen.queryByText('200 km')).toBeInTheDocument(); diff --git a/packages/react-ui/__tests__/widgets/testUtils.js b/packages/react-ui/__tests__/widgets/testUtils.js index 49407d9a4..8a1fd18d8 100644 --- a/packages/react-ui/__tests__/widgets/testUtils.js +++ b/packages/react-ui/__tests__/widgets/testUtils.js @@ -1,6 +1,12 @@ import React from 'react'; -import { createTheme, responsiveFontSizes, ThemeProvider } from '@material-ui/core'; +import { + createTheme, + responsiveFontSizes, + ThemeProvider, + StyledEngineProvider, + adaptV4Theme +} from '@mui/material'; import * as echarts from 'echarts'; import { cartoThemeOptions } from '../../src/theme/carto-theme'; @@ -17,19 +23,13 @@ export function currencyFormatter(value) { }; } -export function getMaterialUIContext(children) { - return {children}; -} - -function getTheme() { - let theme = createTheme(cartoThemeOptions); - theme = responsiveFontSizes(theme, { - breakpoints: ['sm'], - disableAlign: false, - factor: 2 - }); - return theme; -} +// export function getMaterialUIContext(children) { +// return ( +// +// {children} +// +// ); +// } export const mockEcharts = { init() { diff --git a/packages/react-ui/__tests__/widgets/utils/testUtils.js b/packages/react-ui/__tests__/widgets/utils/testUtils.js index e69de29bb..971476468 100644 --- a/packages/react-ui/__tests__/widgets/utils/testUtils.js +++ b/packages/react-ui/__tests__/widgets/utils/testUtils.js @@ -0,0 +1,34 @@ +// https://testing-library.com/docs/react-testing-library/setup/ + +import React from 'react'; +import { render } from '@testing-library/react'; + +import { ThemeProvider } from '@mui/material'; +import { createTheme, responsiveFontSizes } from '@mui/material'; + +import { cartoThemeOptions } from '../../../src/theme/carto-theme'; + +const theme = getTheme(); // for now we don't need real theme for tests + +function getTheme() { + let theme = createTheme(cartoThemeOptions); + theme = responsiveFontSizes(theme, { + breakpoints: ['sm'], + disableAlign: false, + factor: 2 + }); + return theme; +} + +const AllTheProviders = ({ children }) => { + return {children}; +}; + +const customRender = (ui, options) => + render(ui, { wrapper: AllTheProviders, ...options }); + +// re-export everything +export * from '@testing-library/react'; + +// override render method +export { customRender as render }; diff --git a/packages/react-ui/package.json b/packages/react-ui/package.json index 1135146c8..a179d6315 100644 --- a/packages/react-ui/package.json +++ b/packages/react-ui/package.json @@ -1,6 +1,6 @@ { "name": "@carto/react-ui", - "version": "1.5.0-alpha.4", + "version": "0.0.0-experimental-muiv5-1", "description": "CARTO for React - UI", "author": "CARTO Dev Team", "keywords": [ @@ -47,7 +47,6 @@ "@storybook/addon-essentials": "^6.5.12", "@storybook/addon-links": "^6.5.12", "@storybook/react": "^6.5.12", - "storybook-addon-designs": "^6.3.1", "@testing-library/jest-dom": "^5.11.9", "@testing-library/react": "^11.2.5", "@testing-library/react-hooks": "^5.1.0", @@ -69,6 +68,7 @@ "firebase-tools": "^8.17.0", "jest": "^26.6.3", "react-redux": "^7.2.2", + "storybook-addon-designs": "^6.3.1", "webpack": "^5.24.2", "webpack-cli": "^4.5.0" }, @@ -76,13 +76,18 @@ "@babel/runtime": "^7.13.9" }, "peerDependencies": { - "@carto/react-core": "^1.5.0-alpha.4", - "@material-ui/core": "^4.11.3", - "@material-ui/icons": "^4.11.2", - "@material-ui/lab": "^4.0.0-alpha.57", + "@carto/react-core": "0.0.0-experimental-muiv5-0", + "@emotion/react": "^11.10.0", + "@emotion/styled": "^11.10.0", + "@mui/icons-material": "^5.10.9", + "@mui/lab": "^5.0.0-alpha.104", + "@mui/material": "^5.10.10", + "@mui/styled-engine-sc": "^5.10.6", + "@mui/styles": "^5.10.10", "echarts": "^5.2.0", "echarts-for-react": "^3.0.1", "react": "^17.0.1", - "react-dom": "^17.0.1" + "react-dom": "^17.0.1", + "styled-components": "^5.2.3" } } diff --git a/packages/react-ui/src/assets/CircleIcon.js b/packages/react-ui/src/assets/CircleIcon.js index c8a3694ae..ba2e6bce7 100644 --- a/packages/react-ui/src/assets/CircleIcon.js +++ b/packages/react-ui/src/assets/CircleIcon.js @@ -1,5 +1,5 @@ import React from 'react'; -import { SvgIcon } from '@material-ui/core'; +import { SvgIcon } from '@mui/material'; export default function CircleIcon(props) { return ( diff --git a/packages/react-ui/src/assets/CursorIcon.js b/packages/react-ui/src/assets/CursorIcon.js index 408a7da69..82906144f 100644 --- a/packages/react-ui/src/assets/CursorIcon.js +++ b/packages/react-ui/src/assets/CursorIcon.js @@ -1,5 +1,5 @@ import React from 'react'; -import { SvgIcon } from '@material-ui/core'; +import { SvgIcon } from '@mui/material'; export default function CursorIcon(props) { return ( diff --git a/packages/react-ui/src/assets/LassoIcon.js b/packages/react-ui/src/assets/LassoIcon.js index 073782492..0d07fb140 100644 --- a/packages/react-ui/src/assets/LassoIcon.js +++ b/packages/react-ui/src/assets/LassoIcon.js @@ -1,5 +1,5 @@ import React from 'react'; -import { SvgIcon } from '@material-ui/core'; +import { SvgIcon } from '@mui/material'; export default function LassoIcon(props) { return ( diff --git a/packages/react-ui/src/assets/LayerIcon.js b/packages/react-ui/src/assets/LayerIcon.js index a4b487f9f..ee2c06250 100644 --- a/packages/react-ui/src/assets/LayerIcon.js +++ b/packages/react-ui/src/assets/LayerIcon.js @@ -1,5 +1,5 @@ import React from 'react'; -import { SvgIcon } from '@material-ui/core'; +import { SvgIcon } from '@mui/material'; export default function LayerIcon(props) { return ( diff --git a/packages/react-ui/src/assets/PolygonIcon.js b/packages/react-ui/src/assets/PolygonIcon.js index 510b07433..5fac25832 100644 --- a/packages/react-ui/src/assets/PolygonIcon.js +++ b/packages/react-ui/src/assets/PolygonIcon.js @@ -1,5 +1,5 @@ import React from 'react'; -import { SvgIcon } from '@material-ui/core'; +import { SvgIcon } from '@mui/material'; export default function PolygonIcon(props) { return ( diff --git a/packages/react-ui/src/assets/RectangleIcon.js b/packages/react-ui/src/assets/RectangleIcon.js index 4bfc558c3..ce151e178 100644 --- a/packages/react-ui/src/assets/RectangleIcon.js +++ b/packages/react-ui/src/assets/RectangleIcon.js @@ -1,5 +1,5 @@ import React from 'react'; -import { SvgIcon } from '@material-ui/core'; +import { SvgIcon } from '@mui/material'; export default function RectangleIcon(props) { return ( diff --git a/packages/react-ui/src/assets/UploadIcon.js b/packages/react-ui/src/assets/UploadIcon.js index 58ecabce0..0ff8d6227 100644 --- a/packages/react-ui/src/assets/UploadIcon.js +++ b/packages/react-ui/src/assets/UploadIcon.js @@ -1,5 +1,5 @@ import React from 'react'; -import { SvgIcon } from '@material-ui/core'; +import { SvgIcon } from '@mui/material'; export default function RectangleIcon(props) { return ( diff --git a/packages/react-ui/src/custom-components/InputFile.js b/packages/react-ui/src/custom-components/InputFile.js index 4623e0dc3..3b9e87f2e 100644 --- a/packages/react-ui/src/custom-components/InputFile.js +++ b/packages/react-ui/src/custom-components/InputFile.js @@ -1,6 +1,8 @@ import React, { useEffect, useRef, useState } from 'react'; import PropTypes from 'prop-types'; -import { Box, Button, makeStyles, Typography } from '@material-ui/core'; +import { Box, Button, Typography } from '@mui/material'; + +import makeStyles from '@mui/styles/makeStyles'; const useStyles = makeStyles((theme) => ({ inputFile: { diff --git a/packages/react-ui/src/theme/carto-theme.d.ts b/packages/react-ui/src/theme/carto-theme.d.ts index a911c981a..a0c4cbd2d 100644 --- a/packages/react-ui/src/theme/carto-theme.d.ts +++ b/packages/react-ui/src/theme/carto-theme.d.ts @@ -1,10 +1,15 @@ -import { Theme, ThemeOptions } from '@material-ui/core'; -import { Palette, PaletteColor } from '@material-ui/core/styles/createPalette'; +import { Theme, ThemeOptions } from '@mui/material'; +import { Palette, PaletteColor } from '@mui/material' +/* + TODO: Review if this set of changes in the type of Palette and PaletteColor, to properly use theme + from TypeScript clients, is still required and if it needs to be fully extended to reflect the new + color structure (custom keys & props) +*/ export const cartoThemeOptions: ThemeOptions; type Modify = Omit & R -type CustomPaletteColor = Modify +type CustomPaletteColor = Modify type CustomPalette = Modify @@ -184,9 +182,7 @@ function SelectedModeViewer({ if (modes?.length && selectedMode) { const foundMode = modes.find(({ id: modeId }) => modeId === selectedMode); if (!foundMode) { - throw new Error( - 'Selected mode not supported' - ); + throw new Error('Selected mode not supported'); } return foundMode; } else { @@ -200,7 +196,7 @@ function SelectedModeViewer({ return ( - + {icon} @@ -284,6 +280,7 @@ function ModesSelector({ aria-expanded={open ? 'true' : undefined} className={classes.btn} onClick={handleClick} + size='large' > diff --git a/packages/react-ui/src/widgets/FormulaWidgetUI.js b/packages/react-ui/src/widgets/FormulaWidgetUI.js index bc52e7460..ac785e511 100644 --- a/packages/react-ui/src/widgets/FormulaWidgetUI.js +++ b/packages/react-ui/src/widgets/FormulaWidgetUI.js @@ -1,6 +1,7 @@ import React, { useEffect, useRef, useState } from 'react'; import PropTypes from 'prop-types'; -import { Box, makeStyles } from '@material-ui/core'; +import { Box } from '@mui/material'; +import makeStyles from '@mui/styles/makeStyles'; import { animateValue } from './utils/animations'; const useStyles = makeStyles((theme) => ({ diff --git a/packages/react-ui/src/widgets/HistogramWidgetUI/HistogramWidgetUI.js b/packages/react-ui/src/widgets/HistogramWidgetUI/HistogramWidgetUI.js index a52298fac..8134919ac 100644 --- a/packages/react-ui/src/widgets/HistogramWidgetUI/HistogramWidgetUI.js +++ b/packages/react-ui/src/widgets/HistogramWidgetUI/HistogramWidgetUI.js @@ -2,7 +2,8 @@ import React, { useState } from 'react'; import PropTypes from 'prop-types'; import { useMemo } from 'react'; import ReactEcharts from '../../custom-components/echarts-for-react'; -import { darken, Grid, Link, makeStyles, Typography, useTheme } from '@material-ui/core'; +import { darken, Grid, Link, Typography, useTheme } from '@mui/material'; +import makeStyles from '@mui/styles/makeStyles'; import { processFormatterRes } from '../utils/formatterUtils'; import detectTouchscreen from '../utils/detectTouchScreen'; import useHistogramInteractivity from './useHistogramInteractivity'; diff --git a/packages/react-ui/src/widgets/HistogramWidgetUI/useHistogramInteractivity.js b/packages/react-ui/src/widgets/HistogramWidgetUI/useHistogramInteractivity.js index 26f558c90..7c6c59369 100644 --- a/packages/react-ui/src/widgets/HistogramWidgetUI/useHistogramInteractivity.js +++ b/packages/react-ui/src/widgets/HistogramWidgetUI/useHistogramInteractivity.js @@ -1,4 +1,4 @@ -import { useTheme } from '@material-ui/core'; +import { useTheme } from '@mui/material'; import { useCallback, useEffect, useMemo, useState } from 'react'; const events = {}; diff --git a/packages/react-ui/src/widgets/NoDataAlert.js b/packages/react-ui/src/widgets/NoDataAlert.js index 3291e7b2d..f5a6c9581 100644 --- a/packages/react-ui/src/widgets/NoDataAlert.js +++ b/packages/react-ui/src/widgets/NoDataAlert.js @@ -1,22 +1,28 @@ import React from 'react'; -import { Alert, AlertTitle } from '@material-ui/lab'; -import { Box, Typography } from '@material-ui/core'; +import { Alert, AlertTitle } from '@mui/material'; +import { Box, Typography } from '@mui/material'; -function AlertBody ({ color = undefined, children }) { +function AlertBody({ color = undefined, children }) { return children ? ( - - {children} - -) : ( - -)} + + + {children} + + + ) : ( + + ); +} function NoDataAlert({ title = 'No data available', body = 'There are no results for the combination of filters applied to your data. Try tweaking your filters, or zoom and pan the map to adjust the Map View.', severity = undefined }) { - return severity ? ( {title && {title}} @@ -24,10 +30,10 @@ function NoDataAlert({ ) : ( - {title && {title}} - {body} + {title && {title}} + {body} - ) + ); } export default NoDataAlert; diff --git a/packages/react-ui/src/widgets/OpacityControl.js b/packages/react-ui/src/widgets/OpacityControl.js index 693e73b5e..d141a15e4 100644 --- a/packages/react-ui/src/widgets/OpacityControl.js +++ b/packages/react-ui/src/widgets/OpacityControl.js @@ -1,12 +1,6 @@ import React from 'react'; -import { - Box, - Grid, - InputAdornment, - makeStyles, - Slider, - TextField -} from '@material-ui/core'; +import { Box, Grid, InputAdornment, Slider, TextField } from '@mui/material'; +import makeStyles from '@mui/styles/makeStyles'; import LayerOptionWrapper from './legend/LayerOptionWrapper'; const useOpacityControlStyles = makeStyles(({ spacing }) => ({ diff --git a/packages/react-ui/src/widgets/PieWidgetUI.js b/packages/react-ui/src/widgets/PieWidgetUI.js index bf9e54a99..e4dc67671 100644 --- a/packages/react-ui/src/widgets/PieWidgetUI.js +++ b/packages/react-ui/src/widgets/PieWidgetUI.js @@ -1,7 +1,7 @@ import React, { useMemo, useRef, useEffect, useState, useCallback } from 'react'; import PropTypes from 'prop-types'; import ReactEcharts from '../custom-components/echarts-for-react'; -import { useTheme } from '@material-ui/core'; +import { useTheme } from '@mui/material'; import { disableSerie, setColor } from './utils/chartUtils'; import { processFormatterRes } from './utils/formatterUtils'; diff --git a/packages/react-ui/src/widgets/RangeWidgetUI.js b/packages/react-ui/src/widgets/RangeWidgetUI.js index 4ce72e9ea..66346f5a8 100644 --- a/packages/react-ui/src/widgets/RangeWidgetUI.js +++ b/packages/react-ui/src/widgets/RangeWidgetUI.js @@ -1,6 +1,7 @@ import React, { useEffect, useMemo, useState } from 'react'; import PropTypes from 'prop-types'; -import { Box, Link, makeStyles, Slider, TextField } from '@material-ui/core'; +import { Box, Link, Slider, TextField } from '@mui/material'; +import makeStyles from '@mui/styles/makeStyles'; import { debounce } from '@carto/react-core'; const useStyles = makeStyles((theme) => ({ diff --git a/packages/react-ui/src/widgets/ScatterPlotWidgetUI.js b/packages/react-ui/src/widgets/ScatterPlotWidgetUI.js index 4a5038c2f..1b694d2bb 100644 --- a/packages/react-ui/src/widgets/ScatterPlotWidgetUI.js +++ b/packages/react-ui/src/widgets/ScatterPlotWidgetUI.js @@ -1,4 +1,4 @@ -import { useTheme } from '@material-ui/core'; +import { useTheme } from '@mui/material'; import PropTypes from 'prop-types'; import React, { useRef, useState, useEffect } from 'react'; import { areChartPropsEqual } from './utils/chartUtils'; diff --git a/packages/react-ui/src/widgets/TableWidgetUI/TableWidgetUI.js b/packages/react-ui/src/widgets/TableWidgetUI/TableWidgetUI.js index 3719abe79..120a50f13 100644 --- a/packages/react-ui/src/widgets/TableWidgetUI/TableWidgetUI.js +++ b/packages/react-ui/src/widgets/TableWidgetUI/TableWidgetUI.js @@ -7,10 +7,11 @@ import { TableContainer, TableHead, TableRow, - makeStyles, TableSortLabel, TablePagination -} from '@material-ui/core'; +} from '@mui/material'; + +import makeStyles from '@mui/styles/makeStyles'; const useStyles = makeStyles((theme) => ({ tableHeadCellLabel: { diff --git a/packages/react-ui/src/widgets/TimeSeriesWidgetUI/TimeSeriesWidgetUI.js b/packages/react-ui/src/widgets/TimeSeriesWidgetUI/TimeSeriesWidgetUI.js index 077dacfe1..d8e485e38 100644 --- a/packages/react-ui/src/widgets/TimeSeriesWidgetUI/TimeSeriesWidgetUI.js +++ b/packages/react-ui/src/widgets/TimeSeriesWidgetUI/TimeSeriesWidgetUI.js @@ -7,9 +7,9 @@ import { SvgIcon, Typography, capitalize, - makeStyles, Link -} from '@material-ui/core'; +} from '@mui/material'; +import makeStyles from '@mui/styles/makeStyles'; import React, { useEffect, useMemo, useRef, useState, useCallback } from 'react'; import TimeSeriesChart from './components/TimeSeriesChart'; import { TimeSeriesProvider, useTimeSeriesContext } from './hooks/TimeSeriesContext'; diff --git a/packages/react-ui/src/widgets/TimeSeriesWidgetUI/components/TimeSeriesChart.js b/packages/react-ui/src/widgets/TimeSeriesWidgetUI/components/TimeSeriesChart.js index bee481302..ff65c5ab4 100644 --- a/packages/react-ui/src/widgets/TimeSeriesWidgetUI/components/TimeSeriesChart.js +++ b/packages/react-ui/src/widgets/TimeSeriesWidgetUI/components/TimeSeriesChart.js @@ -1,4 +1,4 @@ -import { useTheme } from '@material-ui/core'; +import { useTheme } from '@mui/material'; import React, { useMemo, useState } from 'react'; import ReactEcharts from '../../../custom-components/echarts-for-react'; import useTimeSeriesInteractivity from '../hooks/useTimeSeriesInteractivity'; diff --git a/packages/react-ui/src/widgets/TimeSeriesWidgetUI/hooks/useTimeSeriesInteractivity.js b/packages/react-ui/src/widgets/TimeSeriesWidgetUI/hooks/useTimeSeriesInteractivity.js index d31346a6c..f2a101f53 100644 --- a/packages/react-ui/src/widgets/TimeSeriesWidgetUI/hooks/useTimeSeriesInteractivity.js +++ b/packages/react-ui/src/widgets/TimeSeriesWidgetUI/hooks/useTimeSeriesInteractivity.js @@ -1,4 +1,4 @@ -import { useTheme } from '@material-ui/core'; +import { useTheme } from '@mui/material'; import { useCallback, useEffect, useMemo, useState } from 'react'; import { useTimeSeriesContext } from './TimeSeriesContext'; diff --git a/packages/react-ui/src/widgets/WrapperWidgetUI.js b/packages/react-ui/src/widgets/WrapperWidgetUI.js index a6b068eb0..0d155a5d3 100644 --- a/packages/react-ui/src/widgets/WrapperWidgetUI.js +++ b/packages/react-ui/src/widgets/WrapperWidgetUI.js @@ -1,6 +1,6 @@ import React, { useState, createRef } from 'react'; import PropTypes from 'prop-types'; -import { makeStyles } from '@material-ui/core/styles'; +import makeStyles from '@mui/styles/makeStyles'; import { Box, Button, @@ -13,8 +13,8 @@ import { MenuItem, Tooltip, Typography -} from '@material-ui/core'; -import { ExpandLess, ExpandMore, MoreVert } from '@material-ui/icons'; +} from '@mui/material'; +import { ExpandLess, ExpandMore, MoreVert } from '@mui/icons-material'; /* Options props must have this format: @@ -157,6 +157,7 @@ function WrapperWidgetUI(props) { aria-label={action.label} onClick={action.action} className={classes.iconAction} + size='large' > {action.icon} @@ -217,6 +218,7 @@ function WrapperWidgetUI(props) { aria-haspopup='true' onClick={handleClick} className={classes.iconAction} + size='large' > {optionsIcon} diff --git a/packages/react-ui/src/widgets/legend/LayerOptionWrapper.js b/packages/react-ui/src/widgets/legend/LayerOptionWrapper.js index 5ae8955f1..ed7514f11 100644 --- a/packages/react-ui/src/widgets/legend/LayerOptionWrapper.js +++ b/packages/react-ui/src/widgets/legend/LayerOptionWrapper.js @@ -1,5 +1,5 @@ import React from 'react'; -import { Box, Typography } from '@material-ui/core'; +import { Box, Typography } from '@mui/material'; export default function LayerOptionWrapper({ className = '', label, children }) { return ( diff --git a/packages/react-ui/src/widgets/legend/LegendCategories.js b/packages/react-ui/src/widgets/legend/LegendCategories.js index 5e5528c4a..ddff240cf 100644 --- a/packages/react-ui/src/widgets/legend/LegendCategories.js +++ b/packages/react-ui/src/widgets/legend/LegendCategories.js @@ -1,5 +1,6 @@ import React, { useEffect, useRef, useState } from 'react'; -import { Box, Grid, makeStyles, Tooltip, Typography } from '@material-ui/core'; +import { Box, Grid, Tooltip, Typography } from '@mui/material'; +import makeStyles from '@mui/styles/makeStyles'; import { getPalette } from '../../utils/palette'; import PropTypes from 'prop-types'; diff --git a/packages/react-ui/src/widgets/legend/LegendIcon.js b/packages/react-ui/src/widgets/legend/LegendIcon.js index 7aab1d90f..c193e47c6 100644 --- a/packages/react-ui/src/widgets/legend/LegendIcon.js +++ b/packages/react-ui/src/widgets/legend/LegendIcon.js @@ -1,5 +1,5 @@ import React from 'react'; -import { Box, Grid, Typography } from '@material-ui/core'; +import { Box, Grid, Typography } from '@mui/material'; import PropTypes from 'prop-types'; const ICON_SIZE = 16; diff --git a/packages/react-ui/src/widgets/legend/LegendProportion.js b/packages/react-ui/src/widgets/legend/LegendProportion.js index f271efb47..0afc90e17 100644 --- a/packages/react-ui/src/widgets/legend/LegendProportion.js +++ b/packages/react-ui/src/widgets/legend/LegendProportion.js @@ -1,5 +1,6 @@ import React from 'react'; -import { Box, Grid, makeStyles, Typography } from '@material-ui/core'; +import { Box, Grid, Typography } from '@mui/material'; +import makeStyles from '@mui/styles/makeStyles'; import PropTypes from 'prop-types'; const useStyles = makeStyles((theme) => ({ diff --git a/packages/react-ui/src/widgets/legend/LegendRamp.js b/packages/react-ui/src/widgets/legend/LegendRamp.js index 21e25d9ba..1f5eb122d 100644 --- a/packages/react-ui/src/widgets/legend/LegendRamp.js +++ b/packages/react-ui/src/widgets/legend/LegendRamp.js @@ -1,5 +1,6 @@ import React from 'react'; -import { Grid, makeStyles, Tooltip, Typography } from '@material-ui/core'; +import { Grid, Tooltip, Typography } from '@mui/material'; +import makeStyles from '@mui/styles/makeStyles'; import { getPalette } from '../../utils/palette'; import PropTypes from 'prop-types'; import { getMinMax } from './LegendProportion'; diff --git a/packages/react-ui/src/widgets/legend/LegendWidgetUI.js b/packages/react-ui/src/widgets/legend/LegendWidgetUI.js index ef20a300f..f1a1320a5 100644 --- a/packages/react-ui/src/widgets/legend/LegendWidgetUI.js +++ b/packages/react-ui/src/widgets/legend/LegendWidgetUI.js @@ -1,14 +1,6 @@ import React, { createRef, Fragment } from 'react'; -import { - Box, - Button, - Collapse, - Divider, - Grid, - makeStyles, - SvgIcon, - Typography -} from '@material-ui/core'; +import { Box, Button, Collapse, Divider, Grid, SvgIcon, Typography } from '@mui/material'; +import makeStyles from '@mui/styles/makeStyles'; import LegendWrapper from './LegendWrapper'; import LegendCategories from './LegendCategories'; import LegendIcon from './LegendIcon'; diff --git a/packages/react-ui/src/widgets/legend/LegendWrapper.js b/packages/react-ui/src/widgets/legend/LegendWrapper.js index 56676393c..93e3390f0 100644 --- a/packages/react-ui/src/widgets/legend/LegendWrapper.js +++ b/packages/react-ui/src/widgets/legend/LegendWrapper.js @@ -5,15 +5,15 @@ import { Collapse, Grid, Icon, - makeStyles, Switch, Tooltip, Typography -} from '@material-ui/core'; -import { ExpandLess, ExpandMore } from '@material-ui/icons'; +} from '@mui/material'; +import makeStyles from '@mui/styles/makeStyles'; +import { ExpandLess, ExpandMore } from '@mui/icons-material'; import Note from './Note'; import LayerIcon from '../../assets/LayerIcon'; -import { ToggleButton } from '@material-ui/lab'; +import { ToggleButton } from '@mui/material'; import OpacityControl from '../OpacityControl'; const useStyles = makeStyles((theme) => ({ diff --git a/packages/react-ui/src/widgets/legend/Note.js b/packages/react-ui/src/widgets/legend/Note.js index 76da22dab..f5c25d7a8 100644 --- a/packages/react-ui/src/widgets/legend/Note.js +++ b/packages/react-ui/src/widgets/legend/Note.js @@ -1,4 +1,5 @@ -import { Box, makeStyles, Typography } from '@material-ui/core'; +import { Box, Typography } from '@mui/material'; +import makeStyles from '@mui/styles/makeStyles'; import React from 'react'; const useNoteStyles = makeStyles(() => ({ diff --git a/packages/react-ui/storybook/.storybook/preview.js b/packages/react-ui/storybook/.storybook/preview.js index 1cdf0617c..45506ab64 100644 --- a/packages/react-ui/storybook/.storybook/preview.js +++ b/packages/react-ui/storybook/.storybook/preview.js @@ -1,6 +1,11 @@ import React from 'react'; import { withDesign } from 'storybook-addon-designs'; -import { createTheme, responsiveFontSizes, ThemeProvider } from '@material-ui/core'; +import { + createTheme, + responsiveFontSizes, + ThemeProvider, + StyledEngineProvider +} from '@mui/material'; import { cartoThemeOptions } from '../../src/theme/carto-theme'; let theme = createTheme(cartoThemeOptions); @@ -12,9 +17,11 @@ theme = responsiveFontSizes(theme, { export const decorators = [ (Story) => ( - - - + + + + + ) ]; diff --git a/packages/react-ui/storybook/stories/common/Autocomplete.stories.js b/packages/react-ui/storybook/stories/common/Autocomplete.stories.js index d287719ab..3cb2b637c 100644 --- a/packages/react-ui/storybook/stories/common/Autocomplete.stories.js +++ b/packages/react-ui/storybook/stories/common/Autocomplete.stories.js @@ -1,6 +1,6 @@ import React from 'react'; -import Autocomplete from '@material-ui/lab/Autocomplete'; -import { Grid, TextField } from '@material-ui/core'; +import Autocomplete from '@mui/material/Autocomplete'; +import { Grid, TextField } from '@mui/material'; const options = { title: 'Common/Autocomplete', diff --git a/packages/react-ui/storybook/stories/common/Breadcrumb.stories.js b/packages/react-ui/storybook/stories/common/Breadcrumb.stories.js index 585daac3e..947cb5c2a 100644 --- a/packages/react-ui/storybook/stories/common/Breadcrumb.stories.js +++ b/packages/react-ui/storybook/stories/common/Breadcrumb.stories.js @@ -1,6 +1,6 @@ import React from 'react'; -import { Breadcrumbs, Link, Typography } from '@material-ui/core'; -import { NavigateNext, CloudCircle, Home, Style } from '@material-ui/icons'; +import { Breadcrumbs, Link, Typography } from '@mui/material'; +import { NavigateNext, CloudCircle, Home, Style } from '@mui/icons-material'; const options = { title: 'Common/Breadcrumbs', diff --git a/packages/react-ui/storybook/stories/common/Button.stories.js b/packages/react-ui/storybook/stories/common/Button.stories.js index 651ad0d63..0f6e26258 100644 --- a/packages/react-ui/storybook/stories/common/Button.stories.js +++ b/packages/react-ui/storybook/stories/common/Button.stories.js @@ -1,5 +1,5 @@ import React from 'react'; -import { Button, IconButton, Grid, SvgIcon } from '@material-ui/core'; +import { Button, IconButton, Grid, SvgIcon } from '@mui/material'; const options = { title: 'Common/Button', @@ -64,7 +64,7 @@ const PlaygroundTemplate = ({ label, icon, ...rest }) => ( - + diff --git a/packages/react-ui/storybook/stories/common/ButtonGroup.stories.js b/packages/react-ui/storybook/stories/common/ButtonGroup.stories.js index 58819e61d..64aabad34 100644 --- a/packages/react-ui/storybook/stories/common/ButtonGroup.stories.js +++ b/packages/react-ui/storybook/stories/common/ButtonGroup.stories.js @@ -1,5 +1,5 @@ import React from 'react'; -import { Button, Grid, ButtonGroup } from '@material-ui/core'; +import { Button, Grid, ButtonGroup } from '@mui/material'; const options = { title: 'Common/Button Group', diff --git a/packages/react-ui/storybook/stories/common/Checkbox.stories.js b/packages/react-ui/storybook/stories/common/Checkbox.stories.js index 5577d8821..7c9d07b20 100644 --- a/packages/react-ui/storybook/stories/common/Checkbox.stories.js +++ b/packages/react-ui/storybook/stories/common/Checkbox.stories.js @@ -1,5 +1,5 @@ import React from 'react'; -import { Checkbox, FormControlLabel, Grid } from '@material-ui/core'; +import { Checkbox, FormControlLabel, Grid } from '@mui/material'; const options = { title: 'Common/Checkbox', diff --git a/packages/react-ui/storybook/stories/common/Chip.stories.js b/packages/react-ui/storybook/stories/common/Chip.stories.js index 8a529f611..024336f5f 100644 --- a/packages/react-ui/storybook/stories/common/Chip.stories.js +++ b/packages/react-ui/storybook/stories/common/Chip.stories.js @@ -1,5 +1,5 @@ import React from 'react'; -import { Avatar, Chip, Grid } from '@material-ui/core'; +import { Avatar, Chip, Grid } from '@mui/material'; const options = { title: 'Common/Chip', diff --git a/packages/react-ui/storybook/stories/common/Dialog.stories.js b/packages/react-ui/storybook/stories/common/Dialog.stories.js index 6fe6481c7..c2281dc84 100644 --- a/packages/react-ui/storybook/stories/common/Dialog.stories.js +++ b/packages/react-ui/storybook/stories/common/Dialog.stories.js @@ -10,7 +10,7 @@ import { Grid, Slide, TextField -} from '@material-ui/core'; +} from '@mui/material'; const options = { title: 'Common/Dialog', diff --git a/packages/react-ui/storybook/stories/common/Divider.stories.js b/packages/react-ui/storybook/stories/common/Divider.stories.js index 44ddf5adf..effa846a4 100644 --- a/packages/react-ui/storybook/stories/common/Divider.stories.js +++ b/packages/react-ui/storybook/stories/common/Divider.stories.js @@ -1,5 +1,5 @@ import React from 'react'; -import { Divider, Grid, List, ListItem, ListItemText } from '@material-ui/core'; +import { Divider, Grid, List, ListItem, ListItemText } from '@mui/material'; import { FormatAlignLeft, FormatAlignCenter, @@ -7,7 +7,7 @@ import { FormatBold, FormatItalic, FormatUnderlined -} from '@material-ui/icons'; +} from '@mui/icons-material'; const options = { title: 'Common/Divider', diff --git a/packages/react-ui/storybook/stories/common/List.stories.js b/packages/react-ui/storybook/stories/common/List.stories.js index 628d9de58..96ff2a083 100644 --- a/packages/react-ui/storybook/stories/common/List.stories.js +++ b/packages/react-ui/storybook/stories/common/List.stories.js @@ -14,10 +14,10 @@ import { ListItemSecondaryAction, ListItemText, Typography, - makeStyles, Switch, Paper -} from '@material-ui/core'; +} from '@mui/material'; +import makeStyles from '@mui/styles/makeStyles'; import { Drafts, Delete, @@ -26,7 +26,7 @@ import { Home, Inbox, Star -} from '@material-ui/icons'; +} from '@mui/icons-material'; const options = { title: 'Common/List', diff --git a/packages/react-ui/storybook/stories/common/Palette.stories.js b/packages/react-ui/storybook/stories/common/Palette.stories.js index d8646eeb3..53869507e 100644 --- a/packages/react-ui/storybook/stories/common/Palette.stories.js +++ b/packages/react-ui/storybook/stories/common/Palette.stories.js @@ -1,6 +1,7 @@ import React from 'react'; -import { Box, Grid, makeStyles, Typography } from '@material-ui/core'; -import { useTheme } from '@material-ui/core/styles'; +import { Box, Grid, Typography } from '@mui/material'; +import makeStyles from '@mui/styles/makeStyles'; +import { useTheme } from '@mui/material/styles'; const options = { title: 'CARTO Theme/Palette', diff --git a/packages/react-ui/storybook/stories/common/Paper.stories.js b/packages/react-ui/storybook/stories/common/Paper.stories.js index ced2232ba..a516cb95e 100644 --- a/packages/react-ui/storybook/stories/common/Paper.stories.js +++ b/packages/react-ui/storybook/stories/common/Paper.stories.js @@ -1,5 +1,7 @@ import React from 'react'; -import { Grid, makeStyles, Paper, Typography } from '@material-ui/core'; +import { Grid, Paper, Typography } from '@mui/material'; + +import makeStyles from '@mui/styles/makeStyles'; const options = { title: 'Common/Paper', diff --git a/packages/react-ui/storybook/stories/common/Progress.stories.js b/packages/react-ui/storybook/stories/common/Progress.stories.js index b7e247727..0be46f21f 100644 --- a/packages/react-ui/storybook/stories/common/Progress.stories.js +++ b/packages/react-ui/storybook/stories/common/Progress.stories.js @@ -1,6 +1,6 @@ import React from 'react'; -import { Box, Button, CircularProgress, Grid, LinearProgress } from '@material-ui/core'; -import CheckIcon from '@material-ui/icons/Check'; +import { Box, Button, CircularProgress, Grid, LinearProgress } from '@mui/material'; +import CheckIcon from '@mui/icons-material/Check'; const options = { title: 'Common/Progress', diff --git a/packages/react-ui/storybook/stories/common/Radio.stories.js b/packages/react-ui/storybook/stories/common/Radio.stories.js index 26615ffcb..e32578d0d 100644 --- a/packages/react-ui/storybook/stories/common/Radio.stories.js +++ b/packages/react-ui/storybook/stories/common/Radio.stories.js @@ -6,7 +6,7 @@ import { Grid, Radio, RadioGroup -} from '@material-ui/core'; +} from '@mui/material'; const options = { title: 'Common/Radio', diff --git a/packages/react-ui/storybook/stories/common/Select.stories.js b/packages/react-ui/storybook/stories/common/Select.stories.js index 748bcd4f9..7ce9e7178 100644 --- a/packages/react-ui/storybook/stories/common/Select.stories.js +++ b/packages/react-ui/storybook/stories/common/Select.stories.js @@ -8,8 +8,8 @@ import { MenuItem, Typography, Select -} from '@material-ui/core'; -import { Visibility } from '@material-ui/icons'; +} from '@mui/material'; +import { Visibility } from '@mui/icons-material'; const options = { title: 'Common/Select', diff --git a/packages/react-ui/storybook/stories/common/Slider.stories.js b/packages/react-ui/storybook/stories/common/Slider.stories.js index 2519018c9..fec2d1587 100644 --- a/packages/react-ui/storybook/stories/common/Slider.stories.js +++ b/packages/react-ui/storybook/stories/common/Slider.stories.js @@ -1,5 +1,5 @@ import React, { useState } from 'react'; -import { Grid, Slider, TextField, Tooltip } from '@material-ui/core'; +import { Grid, Slider, TextField, Tooltip } from '@mui/material'; const options = { title: 'Common/Slider', diff --git a/packages/react-ui/storybook/stories/common/Switch.stories.js b/packages/react-ui/storybook/stories/common/Switch.stories.js index e9d7eec9f..d45f9fe5b 100644 --- a/packages/react-ui/storybook/stories/common/Switch.stories.js +++ b/packages/react-ui/storybook/stories/common/Switch.stories.js @@ -1,5 +1,5 @@ import React from 'react'; -import { FormControlLabel, Grid, Switch } from '@material-ui/core'; +import { FormControlLabel, Grid, Switch } from '@mui/material'; const options = { title: 'Common/Switch', diff --git a/packages/react-ui/storybook/stories/common/Tabs.stories.js b/packages/react-ui/storybook/stories/common/Tabs.stories.js index 78a4540ec..c49ffc963 100644 --- a/packages/react-ui/storybook/stories/common/Tabs.stories.js +++ b/packages/react-ui/storybook/stories/common/Tabs.stories.js @@ -1,6 +1,6 @@ import React from 'react'; -import { Tab, Tabs } from '@material-ui/core'; -import { Layers, LocalOffer, Map, Place, Store } from '@material-ui/icons'; +import { Tab, Tabs } from '@mui/material'; +import { Layers, LocalOffer, Map, Place, Store } from '@mui/icons-material'; const options = { title: 'Common/Tabs', diff --git a/packages/react-ui/storybook/stories/common/Text-field.stories.js b/packages/react-ui/storybook/stories/common/Text-field.stories.js index d92b5a024..22406c2b6 100644 --- a/packages/react-ui/storybook/stories/common/Text-field.stories.js +++ b/packages/react-ui/storybook/stories/common/Text-field.stories.js @@ -1,6 +1,6 @@ import React from 'react'; -import { Grid, InputAdornment, TextField, Typography } from '@material-ui/core'; -import { Visibility } from '@material-ui/icons'; +import { Grid, InputAdornment, TextField, Typography } from '@mui/material'; +import { Visibility } from '@mui/icons-material'; const options = { title: 'Common/Text Field', diff --git a/packages/react-ui/storybook/stories/common/ToggleButton.stories.js b/packages/react-ui/storybook/stories/common/ToggleButton.stories.js index b61d40885..a767fd35d 100644 --- a/packages/react-ui/storybook/stories/common/ToggleButton.stories.js +++ b/packages/react-ui/storybook/stories/common/ToggleButton.stories.js @@ -1,9 +1,9 @@ import React from 'react'; -import { ToggleButtonGroup, ToggleButton } from '@material-ui/lab'; -import DirectionsWalkIcon from '@material-ui/icons/DirectionsWalk'; -import DriveEtaIcon from '@material-ui/icons/DriveEta'; -import AirplanemodeActiveIcon from '@material-ui/icons/AirplanemodeActive'; -import TrainIcon from '@material-ui/icons/Train'; +import { ToggleButtonGroup, ToggleButton } from '@mui/material'; +import DirectionsWalkIcon from '@mui/icons-material/DirectionsWalk'; +import DriveEtaIcon from '@mui/icons-material/DriveEta'; +import AirplanemodeActiveIcon from '@mui/icons-material/AirplanemodeActive'; +import TrainIcon from '@mui/icons-material/Train'; const options = { title: 'Common/Toggle Button', diff --git a/packages/react-ui/storybook/stories/common/Tooltip.stories.js b/packages/react-ui/storybook/stories/common/Tooltip.stories.js index 6c3e9ab22..ee55db134 100644 --- a/packages/react-ui/storybook/stories/common/Tooltip.stories.js +++ b/packages/react-ui/storybook/stories/common/Tooltip.stories.js @@ -1,5 +1,7 @@ import React from 'react'; -import { Button, Grid, Tooltip, Typography, makeStyles } from '@material-ui/core'; +import { Button, Grid, Tooltip, Typography } from '@mui/material'; + +import makeStyles from '@mui/styles/makeStyles'; const options = { title: 'Common/Tooltip', diff --git a/packages/react-ui/storybook/stories/common/Typography.stories.js b/packages/react-ui/storybook/stories/common/Typography.stories.js index 2acff78cd..60661c069 100644 --- a/packages/react-ui/storybook/stories/common/Typography.stories.js +++ b/packages/react-ui/storybook/stories/common/Typography.stories.js @@ -1,5 +1,5 @@ import React from 'react'; -import Typography from '@material-ui/core/Typography'; +import Typography from '@mui/material/Typography'; const options = { title: 'CARTO Theme/Typography', diff --git a/packages/react-ui/storybook/stories/widgetsUI/FeatureSelectionWidgetUI.stories.js b/packages/react-ui/storybook/stories/widgetsUI/FeatureSelectionWidgetUI.stories.js index b8bc249b5..79d9c0264 100644 --- a/packages/react-ui/storybook/stories/widgetsUI/FeatureSelectionWidgetUI.stories.js +++ b/packages/react-ui/storybook/stories/widgetsUI/FeatureSelectionWidgetUI.stories.js @@ -1,4 +1,4 @@ -import { Box } from '@material-ui/core'; +import { Box } from '@mui/material'; import React, { useState } from 'react'; import FeatureSelectionWidgetUI from '../../../src/widgets/FeatureSelectionWidgetUI'; import CursorIcon from '../../../src/assets/CursorIcon'; diff --git a/packages/react-ui/storybook/stories/widgetsUI/InputFile.stories.js b/packages/react-ui/storybook/stories/widgetsUI/InputFile.stories.js index e0431032a..d3098b540 100644 --- a/packages/react-ui/storybook/stories/widgetsUI/InputFile.stories.js +++ b/packages/react-ui/storybook/stories/widgetsUI/InputFile.stories.js @@ -5,10 +5,10 @@ import { FormControl, InputLabel, Typography -} from '@material-ui/core'; +} from '@mui/material'; import React, { useState } from 'react'; import InputFile from '../../../src/custom-components/InputFile'; -import { Alert } from '@material-ui/lab'; +import { Alert } from '@mui/material'; import UploadIcon from '../../../src/assets/UploadIcon'; const options = { diff --git a/packages/react-ui/storybook/stories/widgetsUI/TableWidgetUI.stories.js b/packages/react-ui/storybook/stories/widgetsUI/TableWidgetUI.stories.js index 7bb6a6d95..dbdbcc7a3 100644 --- a/packages/react-ui/storybook/stories/widgetsUI/TableWidgetUI.stories.js +++ b/packages/react-ui/storybook/stories/widgetsUI/TableWidgetUI.stories.js @@ -1,7 +1,7 @@ import React from 'react'; import TableWidgetUI from '../../../src/widgets/TableWidgetUI/TableWidgetUI'; -import { Box, Typography } from '@material-ui/core'; -import LocationOnIcon from '@material-ui/icons/LocationOn'; +import { Box, Typography } from '@mui/material'; +import LocationOnIcon from '@mui/icons-material/LocationOn'; import { columns, rows } from '../../../src/widgets/TableWidgetUI/mockData'; const options = { diff --git a/packages/react-ui/storybook/stories/widgetsUI/WrapperWidgetUI.stories.js b/packages/react-ui/storybook/stories/widgetsUI/WrapperWidgetUI.stories.js index 0b52520ea..d8923c1aa 100644 --- a/packages/react-ui/storybook/stories/widgetsUI/WrapperWidgetUI.stories.js +++ b/packages/react-ui/storybook/stories/widgetsUI/WrapperWidgetUI.stories.js @@ -1,8 +1,8 @@ import React from 'react'; -import { Typography } from '@material-ui/core'; -import ColorizeIcon from '@material-ui/icons/Colorize'; -import MenuIcon from '@material-ui/icons/Menu'; -import AddLocationIcon from '@material-ui/icons/AddLocation'; +import { Typography } from '@mui/material'; +import ColorizeIcon from '@mui/icons-material/Colorize'; +import MenuIcon from '@mui/icons-material/Menu'; +import AddLocationIcon from '@mui/icons-material/AddLocation'; import WrapperWidgetUI from '.../../../src/widgets/WrapperWidgetUI'; import { buildReactPropsAsString } from '../../utils'; diff --git a/packages/react-ui/webpack.config.js b/packages/react-ui/webpack.config.js index c2535112b..230e6aa50 100644 --- a/packages/react-ui/webpack.config.js +++ b/packages/react-ui/webpack.config.js @@ -6,9 +6,11 @@ const webpackBaseConfig = require('../../webpack.base'); const webpackConfig = { ...webpackBaseConfig, - externals: [ - /^@material-ui\/.+$/, + externals: [ '@carto/react-core', + /^@mui\/.+$/, + /^@emotion\/.+$/, + 'styled-components', 'echarts', 'echarts-for-react', 'react', diff --git a/packages/react-widgets/package.json b/packages/react-widgets/package.json index 7f6239ab6..60966edc5 100644 --- a/packages/react-widgets/package.json +++ b/packages/react-widgets/package.json @@ -1,6 +1,6 @@ { "name": "@carto/react-widgets", - "version": "1.5.0-alpha.4", + "version": "0.0.0-experimental-muiv5-1", "description": "CARTO for React - Widgets", "author": "CARTO Dev Team", "keywords": [ @@ -65,14 +65,16 @@ "@babel/runtime": "^7.13.9" }, "peerDependencies": { - "@carto/react-api": "^1.5.0-alpha.4", - "@carto/react-core": "^1.5.0-alpha.4", - "@carto/react-redux": "^1.5.0-alpha.4", - "@carto/react-ui": "^1.5.0-alpha.4", - "@carto/react-workers": "^1.5.0-alpha.4", + "@carto/react-api": "0.0.0-experimental-muiv5-0", + "@carto/react-core": "0.0.0-experimental-muiv5-0", + "@carto/react-redux": "0.0.0-experimental-muiv5-0", + "@carto/react-ui": "0.0.0-experimental-muiv5-0", + "@carto/react-workers": "0.0.0-experimental-muiv5-0", "@deck.gl/core": "^8.9.0-alpha.4", "@deck.gl/layers": "^8.9.0-alpha.4", - "@material-ui/core": "^4.11.3", + "@emotion/react": "^11.10.0", + "@emotion/styled": "^11.10.0", + "@mui/material": "^5.10.10", "@nebula.gl/edit-modes": "^1.0.4", "@nebula.gl/layers": "^1.0.4", "dequal": "^2.0.2", diff --git a/packages/react-widgets/src/layers/FeatureSelectionLayer.js b/packages/react-widgets/src/layers/FeatureSelectionLayer.js index 5de9a7cfc..9dd97b340 100644 --- a/packages/react-widgets/src/layers/FeatureSelectionLayer.js +++ b/packages/react-widgets/src/layers/FeatureSelectionLayer.js @@ -8,7 +8,7 @@ import { selectFeatureSelectionMode } from '@carto/react-redux'; import { EDIT_MODES } from '@carto/react-core'; -import { hexToRgb, useTheme } from '@material-ui/core'; +import { hexToRgb, useTheme } from '@mui/material'; import EditableCartoGeoJsonLayer from './EditableCartoGeoJsonLayer'; import useEventManager from './useEventManager'; import MaskLayer from './MaskLayer'; diff --git a/packages/react-widgets/src/widgets/GeocoderWidget.js b/packages/react-widgets/src/widgets/GeocoderWidget.js index 9cd36d809..5009d887f 100644 --- a/packages/react-widgets/src/widgets/GeocoderWidget.js +++ b/packages/react-widgets/src/widgets/GeocoderWidget.js @@ -4,8 +4,8 @@ import { PropTypes } from 'prop-types'; import { addLayer, setViewState } from '@carto/react-redux'; -import { CircularProgress, InputBase, Paper, SvgIcon } from '@material-ui/core'; -import { makeStyles } from '@material-ui/core/styles'; +import { CircularProgress, InputBase, Paper, SvgIcon } from '@mui/material'; +import makeStyles from '@mui/styles/makeStyles'; import useGeocoderWidgetController from '../hooks/useGeocoderWidgetController'; const useStyles = makeStyles((theme) => ({ @@ -27,7 +27,7 @@ const useStyles = makeStyles((theme) => ({ }, input: { ...theme.typography.body2, - width: `calc(100% - ${theme.spacing(5)}px)`, + width: `calc(100% - ${theme.spacing(5)})`, marginLeft: theme.spacing(1) } })); diff --git a/packages/react-widgets/src/widgets/TimeSeriesWidget.js b/packages/react-widgets/src/widgets/TimeSeriesWidget.js index 6508b016b..555339758 100644 --- a/packages/react-widgets/src/widgets/TimeSeriesWidget.js +++ b/packages/react-widgets/src/widgets/TimeSeriesWidget.js @@ -12,7 +12,7 @@ import { AggregationTypes, _FilterTypes as FilterTypes } from '@carto/react-core'; -import { capitalize, Menu, MenuItem, SvgIcon, Typography } from '@material-ui/core'; +import { capitalize, Menu, MenuItem, SvgIcon, Typography } from '@mui/material'; import { PropTypes } from 'prop-types'; import { columnAggregationOn } from './utils/propTypesFns'; import useWidgetFetch from '../hooks/useWidgetFetch'; diff --git a/packages/react-widgets/webpack.config.js b/packages/react-widgets/webpack.config.js index bbb7e2487..6bb6ed60d 100644 --- a/packages/react-widgets/webpack.config.js +++ b/packages/react-widgets/webpack.config.js @@ -9,7 +9,8 @@ const webpackConfig = { externals: [ /^@carto\/react-.+$/, /^@deck.gl\/.+$/, - /^@material-ui\/.+$/, + /^@mui\/.+$/, + /^@emotion\/.+$/, /^@nebula.gl\/.+$/, 'react', 'react-dom', diff --git a/packages/react-workers/package.json b/packages/react-workers/package.json index f85d4d498..7817cc04f 100644 --- a/packages/react-workers/package.json +++ b/packages/react-workers/package.json @@ -1,6 +1,6 @@ { "name": "@carto/react-workers", - "version": "1.5.0-alpha.4", + "version": "0.0.0-experimental-muiv5-1", "description": "CARTO for React - Workers", "author": "CARTO Dev Team", "keywords": [ @@ -62,7 +62,7 @@ }, "dependencies": { "@babel/runtime": "^7.13.9", - "@carto/react-core": "^1.5.0-alpha.4", + "@carto/react-core": "^0.0.0-experimental-muiv5-1", "@turf/bbox-polygon": "^6.3.0", "@turf/boolean-intersects": "^6.3.0", "@turf/boolean-within": "^6.3.0", diff --git a/yarn.lock b/yarn.lock index f8a8d1990..9f72e61ab 100644 --- a/yarn.lock +++ b/yarn.lock @@ -264,6 +264,13 @@ dependencies: "@babel/types" "^7.18.9" +"@babel/helper-module-imports@^7.0.0", "@babel/helper-module-imports@^7.16.7": + version "7.18.6" + resolved "https://registry.yarnpkg.com/@babel/helper-module-imports/-/helper-module-imports-7.18.6.tgz#1e3ebdbbd08aad1437b428c50204db13c5a3ca6e" + integrity sha512-0NFvs3VkuSYbFi1x2Vd6tKrywq+z/cLeYC/RJNFrIX/30Bf5aiGYbtvGXolEktzJH8o5E5KJ3tT+nkxuuZFVlA== + dependencies: + "@babel/types" "^7.18.6" + "@babel/helper-module-imports@^7.12.13", "@babel/helper-module-imports@^7.16.0": version "7.16.0" resolved "https://registry.yarnpkg.com/@babel/helper-module-imports/-/helper-module-imports-7.16.0.tgz#90538e60b672ecf1b448f5f4f5433d37e79a3ec3" @@ -711,6 +718,13 @@ dependencies: "@babel/helper-plugin-utils" "^7.16.5" +"@babel/plugin-syntax-jsx@^7.17.12": + version "7.18.6" + resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-jsx/-/plugin-syntax-jsx-7.18.6.tgz#a8feef63b010150abd97f1649ec296e849943ca0" + integrity sha512-6mmljtAedFGTWu2p/8WIORGwy+61PLgOMPOdazc7YoJ9ZCWUyFy3A6CpPkRKLKD1ToAesxX8KGEViAiLo9N+7Q== + dependencies: + "@babel/helper-plugin-utils" "^7.18.6" + "@babel/plugin-syntax-logical-assignment-operators@^7.10.4", "@babel/plugin-syntax-logical-assignment-operators@^7.8.3": version "7.10.4" resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-logical-assignment-operators/-/plugin-syntax-logical-assignment-operators-7.10.4.tgz#ca91ef46303530448b906652bac2e9fe9941f699" @@ -1225,14 +1239,14 @@ core-js-pure "^3.19.0" regenerator-runtime "^0.13.4" -"@babel/runtime@^7.0.0", "@babel/runtime@^7.10.2", "@babel/runtime@^7.12.0", "@babel/runtime@^7.12.5", "@babel/runtime@^7.13.9", "@babel/runtime@^7.15.4", "@babel/runtime@^7.16.3", "@babel/runtime@^7.3.1", "@babel/runtime@^7.4.4", "@babel/runtime@^7.5.0", "@babel/runtime@^7.5.5", "@babel/runtime@^7.7.6", "@babel/runtime@^7.8.3", "@babel/runtime@^7.8.4", "@babel/runtime@^7.8.7", "@babel/runtime@^7.9.2": +"@babel/runtime@^7.0.0", "@babel/runtime@^7.10.2", "@babel/runtime@^7.12.0", "@babel/runtime@^7.12.5", "@babel/runtime@^7.13.9", "@babel/runtime@^7.15.4", "@babel/runtime@^7.16.3", "@babel/runtime@^7.3.1", "@babel/runtime@^7.5.0", "@babel/runtime@^7.5.5", "@babel/runtime@^7.7.6", "@babel/runtime@^7.8.3", "@babel/runtime@^7.8.4", "@babel/runtime@^7.8.7", "@babel/runtime@^7.9.2": version "7.16.5" resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.16.5.tgz#7f3e34bf8bdbbadf03fbb7b1ea0d929569c9487a" integrity sha512-TXWihFIS3Pyv5hzR7j6ihmeLkZfrXGxAr5UfSl8CHf+6q/wpiYDkUau0czckpYG8QmnCIuPpdLtuA9VmuGGyMA== dependencies: regenerator-runtime "^0.13.4" -"@babel/runtime@^7.17.8": +"@babel/runtime@^7.17.8", "@babel/runtime@^7.18.3", "@babel/runtime@^7.19.0": version "7.19.4" resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.19.4.tgz#a42f814502ee467d55b38dd1c256f53a7b885c78" integrity sha512-EXpLCrk55f+cYqmHsSR+yD/0gAIMxxA9QK9lnQWzhMCvt+YmoBN7Zx94s++Kv0+unHk39vxNO8t+CMA2WSS3wA== @@ -1273,7 +1287,7 @@ debug "^4.1.0" globals "^11.1.0" -"@babel/traverse@^7.19.1": +"@babel/traverse@^7.19.1", "@babel/traverse@^7.4.5": version "7.19.4" resolved "https://registry.yarnpkg.com/@babel/traverse/-/traverse-7.19.4.tgz#f117820e18b1e59448a6c1fa9d0ff08f7ac459a8" integrity sha512-w3K1i+V5u2aJUOXBFFC5pveFLmtq1s3qcdDNC2qRI6WPBQIDaKFqXxDEqDO/h1dQ3HjsZoZMyIy6jGLq0xtw+g== @@ -1454,10 +1468,123 @@ resolved "https://registry.yarnpkg.com/@discoveryjs/json-ext/-/json-ext-0.5.6.tgz#d5e0706cf8c6acd8c6032f8d54070af261bbbb2f" integrity sha512-ws57AidsDvREKrZKYffXddNkyaF14iHNHm8VQnZH6t99E8gczjNN0GpvcGny0imC80yQ0tHz1xVUKk/KFQSUyA== -"@emotion/hash@^0.8.0": +"@emotion/babel-plugin@^11.10.0": + version "11.10.2" + resolved "https://registry.yarnpkg.com/@emotion/babel-plugin/-/babel-plugin-11.10.2.tgz#879db80ba622b3f6076917a1e6f648b1c7d008c7" + integrity sha512-xNQ57njWTFVfPAc3cjfuaPdsgLp5QOSuRsj9MA6ndEhH/AzuZM86qIQzt6rq+aGBwj3n5/TkLmU5lhAfdRmogA== + dependencies: + "@babel/helper-module-imports" "^7.16.7" + "@babel/plugin-syntax-jsx" "^7.17.12" + "@babel/runtime" "^7.18.3" + "@emotion/hash" "^0.9.0" + "@emotion/memoize" "^0.8.0" + "@emotion/serialize" "^1.1.0" + babel-plugin-macros "^3.1.0" + convert-source-map "^1.5.0" + escape-string-regexp "^4.0.0" + find-root "^1.1.0" + source-map "^0.5.7" + stylis "4.0.13" + +"@emotion/cache@^11.10.0", "@emotion/cache@^11.10.3": + version "11.10.3" + resolved "https://registry.yarnpkg.com/@emotion/cache/-/cache-11.10.3.tgz#c4f67904fad10c945fea5165c3a5a0583c164b87" + integrity sha512-Psmp/7ovAa8appWh3g51goxu/z3iVms7JXOreq136D8Bbn6dYraPnmL6mdM8GThEx9vwSn92Fz+mGSjBzN8UPQ== + dependencies: + "@emotion/memoize" "^0.8.0" + "@emotion/sheet" "^1.2.0" + "@emotion/utils" "^1.2.0" + "@emotion/weak-memoize" "^0.3.0" + stylis "4.0.13" + +"@emotion/hash@^0.9.0": + version "0.9.0" + resolved "https://registry.yarnpkg.com/@emotion/hash/-/hash-0.9.0.tgz#c5153d50401ee3c027a57a177bc269b16d889cb7" + integrity sha512-14FtKiHhy2QoPIzdTcvh//8OyBlknNs2nXRwIhG904opCby3l+9Xaf/wuPvICBF0rc1ZCNBd3nKe9cd2mecVkQ== + +"@emotion/is-prop-valid@^1.1.0", "@emotion/is-prop-valid@^1.2.0": + version "1.2.0" + resolved "https://registry.yarnpkg.com/@emotion/is-prop-valid/-/is-prop-valid-1.2.0.tgz#7f2d35c97891669f7e276eb71c83376a5dc44c83" + integrity sha512-3aDpDprjM0AwaxGE09bOPkNxHpBd+kA6jty3RnaEXdweX1DF1U3VQpPYb0g1IStAuK7SVQ1cy+bNBBKp4W3Fjg== + dependencies: + "@emotion/memoize" "^0.8.0" + +"@emotion/memoize@^0.8.0": version "0.8.0" - resolved "https://registry.yarnpkg.com/@emotion/hash/-/hash-0.8.0.tgz#bbbff68978fefdbe68ccb533bc8cbe1d1afb5413" - integrity sha512-kBJtf7PH6aWwZ6fka3zQ0p6SBYzx4fl1LoZXE2RrnYST9Xljm7WfKJrU4g/Xr3Beg72MLrp1AWNUmuYJTL7Cow== + resolved "https://registry.yarnpkg.com/@emotion/memoize/-/memoize-0.8.0.tgz#f580f9beb67176fa57aae70b08ed510e1b18980f" + integrity sha512-G/YwXTkv7Den9mXDO7AhLWkE3q+I92B+VqAE+dYG4NGPaHZGvt3G8Q0p9vmE+sq7rTGphUbAvmQ9YpbfMQGGlA== + +"@emotion/react@^11.10.0": + version "11.10.4" + resolved "https://registry.yarnpkg.com/@emotion/react/-/react-11.10.4.tgz#9dc6bccbda5d70ff68fdb204746c0e8b13a79199" + integrity sha512-j0AkMpr6BL8gldJZ6XQsQ8DnS9TxEQu1R+OGmDZiWjBAJtCcbt0tS3I/YffoqHXxH6MjgI7KdMbYKw3MEiU9eA== + dependencies: + "@babel/runtime" "^7.18.3" + "@emotion/babel-plugin" "^11.10.0" + "@emotion/cache" "^11.10.0" + "@emotion/serialize" "^1.1.0" + "@emotion/use-insertion-effect-with-fallbacks" "^1.0.0" + "@emotion/utils" "^1.2.0" + "@emotion/weak-memoize" "^0.3.0" + hoist-non-react-statics "^3.3.1" + +"@emotion/serialize@^1.1.0": + version "1.1.0" + resolved "https://registry.yarnpkg.com/@emotion/serialize/-/serialize-1.1.0.tgz#b1f97b1011b09346a40e9796c37a3397b4ea8ea8" + integrity sha512-F1ZZZW51T/fx+wKbVlwsfchr5q97iW8brAnXmsskz4d0hVB4O3M/SiA3SaeH06x02lSNzkkQv+n3AX3kCXKSFA== + dependencies: + "@emotion/hash" "^0.9.0" + "@emotion/memoize" "^0.8.0" + "@emotion/unitless" "^0.8.0" + "@emotion/utils" "^1.2.0" + csstype "^3.0.2" + +"@emotion/sheet@^1.2.0": + version "1.2.0" + resolved "https://registry.yarnpkg.com/@emotion/sheet/-/sheet-1.2.0.tgz#771b1987855839e214fc1741bde43089397f7be5" + integrity sha512-OiTkRgpxescko+M51tZsMq7Puu/KP55wMT8BgpcXVG2hqXc0Vo0mfymJ/Uj24Hp0i083ji/o0aLddh08UEjq8w== + +"@emotion/styled@^11.10.0": + version "11.10.4" + resolved "https://registry.yarnpkg.com/@emotion/styled/-/styled-11.10.4.tgz#e93f84a4d54003c2acbde178c3f97b421fce1cd4" + integrity sha512-pRl4R8Ez3UXvOPfc2bzIoV8u9P97UedgHS4FPX594ntwEuAMA114wlaHvOK24HB48uqfXiGlYIZYCxVJ1R1ttQ== + dependencies: + "@babel/runtime" "^7.18.3" + "@emotion/babel-plugin" "^11.10.0" + "@emotion/is-prop-valid" "^1.2.0" + "@emotion/serialize" "^1.1.0" + "@emotion/use-insertion-effect-with-fallbacks" "^1.0.0" + "@emotion/utils" "^1.2.0" + +"@emotion/stylis@^0.8.4": + version "0.8.5" + resolved "https://registry.yarnpkg.com/@emotion/stylis/-/stylis-0.8.5.tgz#deacb389bd6ee77d1e7fcaccce9e16c5c7e78e04" + integrity sha512-h6KtPihKFn3T9fuIrwvXXUOwlx3rfUvfZIcP5a6rh8Y7zjE3O06hT5Ss4S/YI1AYhuZ1kjaE/5EaOOI2NqSylQ== + +"@emotion/unitless@^0.7.4": + version "0.7.5" + resolved "https://registry.yarnpkg.com/@emotion/unitless/-/unitless-0.7.5.tgz#77211291c1900a700b8a78cfafda3160d76949ed" + integrity sha512-OWORNpfjMsSSUBVrRBVGECkhWcULOAJz9ZW8uK9qgxD+87M7jHRcvh/A96XXNhXTLmKcoYSQtBEX7lHMO7YRwg== + +"@emotion/unitless@^0.8.0": + version "0.8.0" + resolved "https://registry.yarnpkg.com/@emotion/unitless/-/unitless-0.8.0.tgz#a4a36e9cbdc6903737cd20d38033241e1b8833db" + integrity sha512-VINS5vEYAscRl2ZUDiT3uMPlrFQupiKgHz5AA4bCH1miKBg4qtwkim1qPmJj/4WG6TreYMY111rEFsjupcOKHw== + +"@emotion/use-insertion-effect-with-fallbacks@^1.0.0": + version "1.0.0" + resolved "https://registry.yarnpkg.com/@emotion/use-insertion-effect-with-fallbacks/-/use-insertion-effect-with-fallbacks-1.0.0.tgz#ffadaec35dbb7885bd54de3fa267ab2f860294df" + integrity sha512-1eEgUGmkaljiBnRMTdksDV1W4kUnmwgp7X9G8B++9GYwl1lUdqSndSriIrTJ0N7LQaoauY9JJ2yhiOYK5+NI4A== + +"@emotion/utils@^1.2.0": + version "1.2.0" + resolved "https://registry.yarnpkg.com/@emotion/utils/-/utils-1.2.0.tgz#9716eaccbc6b5ded2ea5a90d65562609aab0f561" + integrity sha512-sn3WH53Kzpw8oQ5mgMmIzzyAaH2ZqFEbozVVBSYp538E06OSE6ytOp7pRAjNQR+Q/orwqdQYJSe2m3hCOeznkw== + +"@emotion/weak-memoize@^0.3.0": + version "0.3.0" + resolved "https://registry.yarnpkg.com/@emotion/weak-memoize/-/weak-memoize-0.3.0.tgz#ea89004119dc42db2e1dba0f97d553f7372f6fcb" + integrity sha512-AHPmaAx+RYfZz0eYu6Gviiagpmiyw98ySSlQvCUhVGDRtDFe4DBS0x1bSjdF3gqUDYOczB+yYvBTtEylYSdRhg== "@eslint/eslintrc@^0.4.3": version "0.4.3" @@ -2759,88 +2886,6 @@ dependencies: "@mapbox/point-geometry" "~0.1.0" -"@material-ui/core@^4.11.3": - version "4.12.3" - resolved "https://registry.yarnpkg.com/@material-ui/core/-/core-4.12.3.tgz#80d665caf0f1f034e52355c5450c0e38b099d3ca" - integrity sha512-sdpgI/PL56QVsEJldwEe4FFaFTLUqN+rd7sSZiRCdx2E/C7z5yK0y/khAWVBH24tXwto7I1hCzNWfJGZIYJKnw== - dependencies: - "@babel/runtime" "^7.4.4" - "@material-ui/styles" "^4.11.4" - "@material-ui/system" "^4.12.1" - "@material-ui/types" "5.1.0" - "@material-ui/utils" "^4.11.2" - "@types/react-transition-group" "^4.2.0" - clsx "^1.0.4" - hoist-non-react-statics "^3.3.2" - popper.js "1.16.1-lts" - prop-types "^15.7.2" - react-is "^16.8.0 || ^17.0.0" - react-transition-group "^4.4.0" - -"@material-ui/icons@^4.11.2": - version "4.11.2" - resolved "https://registry.yarnpkg.com/@material-ui/icons/-/icons-4.11.2.tgz#b3a7353266519cd743b6461ae9fdfcb1b25eb4c5" - integrity sha512-fQNsKX2TxBmqIGJCSi3tGTO/gZ+eJgWmMJkgDiOfyNaunNaxcklJQFaFogYcFl0qFuaEz1qaXYXboa/bUXVSOQ== - dependencies: - "@babel/runtime" "^7.4.4" - -"@material-ui/lab@^4.0.0-alpha.57": - version "4.0.0-alpha.60" - resolved "https://registry.yarnpkg.com/@material-ui/lab/-/lab-4.0.0-alpha.60.tgz#5ad203aed5a8569b0f1753945a21a05efa2234d2" - integrity sha512-fadlYsPJF+0fx2lRuyqAuJj7hAS1tLDdIEEdov5jlrpb5pp4b+mRDUqQTUxi4inRZHS1bEXpU8QWUhO6xX88aA== - dependencies: - "@babel/runtime" "^7.4.4" - "@material-ui/utils" "^4.11.2" - clsx "^1.0.4" - prop-types "^15.7.2" - react-is "^16.8.0 || ^17.0.0" - -"@material-ui/styles@^4.11.4": - version "4.11.4" - resolved "https://registry.yarnpkg.com/@material-ui/styles/-/styles-4.11.4.tgz#eb9dfccfcc2d208243d986457dff025497afa00d" - integrity sha512-KNTIZcnj/zprG5LW0Sao7zw+yG3O35pviHzejMdcSGCdWbiO8qzRgOYL8JAxAsWBKOKYwVZxXtHWaB5T2Kvxew== - dependencies: - "@babel/runtime" "^7.4.4" - "@emotion/hash" "^0.8.0" - "@material-ui/types" "5.1.0" - "@material-ui/utils" "^4.11.2" - clsx "^1.0.4" - csstype "^2.5.2" - hoist-non-react-statics "^3.3.2" - jss "^10.5.1" - jss-plugin-camel-case "^10.5.1" - jss-plugin-default-unit "^10.5.1" - jss-plugin-global "^10.5.1" - jss-plugin-nested "^10.5.1" - jss-plugin-props-sort "^10.5.1" - jss-plugin-rule-value-function "^10.5.1" - jss-plugin-vendor-prefixer "^10.5.1" - prop-types "^15.7.2" - -"@material-ui/system@^4.12.1": - version "4.12.1" - resolved "https://registry.yarnpkg.com/@material-ui/system/-/system-4.12.1.tgz#2dd96c243f8c0a331b2bb6d46efd7771a399707c" - integrity sha512-lUdzs4q9kEXZGhbN7BptyiS1rLNHe6kG9o8Y307HCvF4sQxbCgpL2qi+gUk+yI8a2DNk48gISEQxoxpgph0xIw== - dependencies: - "@babel/runtime" "^7.4.4" - "@material-ui/utils" "^4.11.2" - csstype "^2.5.2" - prop-types "^15.7.2" - -"@material-ui/types@5.1.0": - version "5.1.0" - resolved "https://registry.yarnpkg.com/@material-ui/types/-/types-5.1.0.tgz#efa1c7a0b0eaa4c7c87ac0390445f0f88b0d88f2" - integrity sha512-7cqRjrY50b8QzRSYyhSpx4WRw2YuO0KKIGQEVk5J8uoz2BanawykgZGoWEqKm7pVIbzFDN0SpPcVV4IhOFkl8A== - -"@material-ui/utils@^4.11.2": - version "4.11.2" - resolved "https://registry.yarnpkg.com/@material-ui/utils/-/utils-4.11.2.tgz#f1aefa7e7dff2ebcb97d31de51aecab1bb57540a" - integrity sha512-Uul8w38u+PICe2Fg2pDKCaIG7kOyhowZ9vjiC1FsVwPABTW8vPPKfF6OvxRq3IiBaI1faOJmgdvMG7rMJARBhA== - dependencies: - "@babel/runtime" "^7.4.4" - prop-types "^15.7.2" - react-is "^16.8.0 || ^17.0.0" - "@math.gl/core@3.5.6", "@math.gl/core@^3.5.0", "@math.gl/core@^3.5.1": version "3.5.6" resolved "https://registry.yarnpkg.com/@math.gl/core/-/core-3.5.6.tgz#d849db978d7d4a4984bb63868adc693975d97ce7" @@ -2970,6 +3015,144 @@ call-me-maybe "^1.0.1" glob-to-regexp "^0.3.0" +"@mui/base@5.0.0-alpha.102": + version "5.0.0-alpha.102" + resolved "https://registry.yarnpkg.com/@mui/base/-/base-5.0.0-alpha.102.tgz#53b07d0b73d3afe1d2a3feb3b43c8188bb821796" + integrity sha512-5e/qAIP+DlkrZxIt/cwnDw/A3ii22WkoEoWKHyu4+oeGs3/1Flh7qLaN4h5EAIBB9TvTEZEUzvmsTInmIj6ghg== + dependencies: + "@babel/runtime" "^7.19.0" + "@emotion/is-prop-valid" "^1.2.0" + "@mui/types" "^7.2.0" + "@mui/utils" "^5.10.9" + "@popperjs/core" "^2.11.6" + clsx "^1.2.1" + prop-types "^15.8.1" + react-is "^18.2.0" + +"@mui/core-downloads-tracker@^5.10.10": + version "5.10.10" + resolved "https://registry.yarnpkg.com/@mui/core-downloads-tracker/-/core-downloads-tracker-5.10.10.tgz#a3e5d2f6e5146e9a85d48824c386a31be1746ba3" + integrity sha512-aDuE2PNEh+hAndxEWlZgq7uiFPZKJtnkPDX7v6kSCrMXA32ZaQ6rZi5olmC7DUHt/BaOSxb7N/im/ss0XBkDhA== + +"@mui/icons-material@^5.10.9": + version "5.10.9" + resolved "https://registry.yarnpkg.com/@mui/icons-material/-/icons-material-5.10.9.tgz#f9522c49797caf30146acc576e37ecb4f95bbc38" + integrity sha512-sqClXdEM39WKQJOQ0ZCPTptaZgqwibhj2EFV9N0v7BU1PO8y4OcX/a2wIQHn4fNuDjIZktJIBrmU23h7aqlGgg== + dependencies: + "@babel/runtime" "^7.19.0" + +"@mui/lab@^5.0.0-alpha.104": + version "5.0.0-alpha.104" + resolved "https://registry.yarnpkg.com/@mui/lab/-/lab-5.0.0-alpha.104.tgz#8d2f0c6f87de1ccb72dd29c8f5eb23ee99dfbe76" + integrity sha512-mABdzB/cw5IXtCj2B4oggsXkfLvHg73ujZfErtKP4Sj7L6Fzy+rQceBGjv84UFBkqMvv9zm1UUchI3HfEj/lUw== + dependencies: + "@babel/runtime" "^7.19.0" + "@mui/base" "5.0.0-alpha.102" + "@mui/system" "^5.10.10" + "@mui/types" "^7.2.0" + "@mui/utils" "^5.10.9" + clsx "^1.2.1" + prop-types "^15.8.1" + react-is "^18.2.0" + +"@mui/material@^5.10.10": + version "5.10.10" + resolved "https://registry.yarnpkg.com/@mui/material/-/material-5.10.10.tgz#df780d933c0aa9d4a5272f32c9cc24bf1ea72cff" + integrity sha512-ioLvqY7VvcePz9dnEIRhpiVvtJmAFmvG6rtLXXzVdMmAVbSaelr5Io07mPz/mCyqE+Uv8/4EuJV276DWO7etzA== + dependencies: + "@babel/runtime" "^7.19.0" + "@mui/base" "5.0.0-alpha.102" + "@mui/core-downloads-tracker" "^5.10.10" + "@mui/system" "^5.10.10" + "@mui/types" "^7.2.0" + "@mui/utils" "^5.10.9" + "@types/react-transition-group" "^4.4.5" + clsx "^1.2.1" + csstype "^3.1.1" + prop-types "^15.8.1" + react-is "^18.2.0" + react-transition-group "^4.4.5" + +"@mui/private-theming@^5.10.9": + version "5.10.9" + resolved "https://registry.yarnpkg.com/@mui/private-theming/-/private-theming-5.10.9.tgz#c427bfa736455703975cdb108dbde6a174ba7971" + integrity sha512-BN7/CnsVPVyBaQpDTij4uV2xGYHHHhOgpdxeYLlIu+TqnsVM7wUeF+37kXvHovxM6xmL5qoaVUD98gDC0IZnHg== + dependencies: + "@babel/runtime" "^7.19.0" + "@mui/utils" "^5.10.9" + prop-types "^15.8.1" + +"@mui/styled-engine-sc@^5.10.6": + version "5.10.6" + resolved "https://registry.yarnpkg.com/@mui/styled-engine-sc/-/styled-engine-sc-5.10.6.tgz#e1c1f1e6a80f2bcd11f83e33c9925753cf61bf23" + integrity sha512-AQIa478w3UI8gmlht7orp96tEJbEN26FiEs9Aee6E+iVTnoyT3b6V/JapgKlITo6rn7tYTSX9iJYwnDTMhbzTg== + dependencies: + "@babel/runtime" "^7.19.0" + prop-types "^15.8.1" + +"@mui/styled-engine@^5.10.8": + version "5.10.8" + resolved "https://registry.yarnpkg.com/@mui/styled-engine/-/styled-engine-5.10.8.tgz#2db411e4278f06f70ccb6b5cd56ace67109513f6" + integrity sha512-w+y8WI18EJV6zM/q41ug19cE70JTeO6sWFsQ7tgePQFpy6ToCVPh0YLrtqxUZXSoMStW5FMw0t9fHTFAqPbngw== + dependencies: + "@babel/runtime" "^7.19.0" + "@emotion/cache" "^11.10.3" + csstype "^3.1.1" + prop-types "^15.8.1" + +"@mui/styles@^5.10.10": + version "5.10.10" + resolved "https://registry.yarnpkg.com/@mui/styles/-/styles-5.10.10.tgz#9b44bfbb89e735b737acd95ba4b8136f116ec30a" + integrity sha512-utr87q/euocRdc2ekFX7DL1gqTVfogSVeu74Nspr8rtK/afC9QwF3ScP/XThVXWPcQKjBWHMKWtAO9BSVE4KDg== + dependencies: + "@babel/runtime" "^7.19.0" + "@emotion/hash" "^0.9.0" + "@mui/private-theming" "^5.10.9" + "@mui/types" "^7.2.0" + "@mui/utils" "^5.10.9" + clsx "^1.2.1" + csstype "^3.1.1" + hoist-non-react-statics "^3.3.2" + jss "^10.9.2" + jss-plugin-camel-case "^10.9.2" + jss-plugin-default-unit "^10.9.2" + jss-plugin-global "^10.9.2" + jss-plugin-nested "^10.9.2" + jss-plugin-props-sort "^10.9.2" + jss-plugin-rule-value-function "^10.9.2" + jss-plugin-vendor-prefixer "^10.9.2" + prop-types "^15.8.1" + +"@mui/system@^5.10.10": + version "5.10.10" + resolved "https://registry.yarnpkg.com/@mui/system/-/system-5.10.10.tgz#fbc34f29a3b62268c3d2b2be92819a35fc52de90" + integrity sha512-TXwtKN0adKpBrZmO+eilQWoPf2veh050HLYrN78Kps9OhlvO70v/2Kya0+mORFhu9yhpAwjHXO8JII/R4a5ZLA== + dependencies: + "@babel/runtime" "^7.19.0" + "@mui/private-theming" "^5.10.9" + "@mui/styled-engine" "^5.10.8" + "@mui/types" "^7.2.0" + "@mui/utils" "^5.10.9" + clsx "^1.2.1" + csstype "^3.1.1" + prop-types "^15.8.1" + +"@mui/types@^7.2.0": + version "7.2.0" + resolved "https://registry.yarnpkg.com/@mui/types/-/types-7.2.0.tgz#91380c2d42420f51f404120f7a9270eadd6f5c23" + integrity sha512-lGXtFKe5lp3UxTBGqKI1l7G8sE2xBik8qCfrLHD5olwP/YU0/ReWoWT7Lp1//ri32dK39oPMrJN8TgbkCSbsNA== + +"@mui/utils@^5.10.9": + version "5.10.9" + resolved "https://registry.yarnpkg.com/@mui/utils/-/utils-5.10.9.tgz#9dc455f9230f43eeb81d96a9a4bdb3855bb9ea39" + integrity sha512-2tdHWrq3+WCy+G6TIIaFx3cg7PorXZ71P375ExuX61od1NOAJP1mK90VxQ8N4aqnj2vmO3AQDkV4oV2Ktvt4bA== + dependencies: + "@babel/runtime" "^7.19.0" + "@types/prop-types" "^15.7.5" + "@types/react-is" "^16.7.1 || ^17.0.0" + prop-types "^15.8.1" + react-is "^18.2.0" + "@nebula.gl/edit-modes@1.0.4", "@nebula.gl/edit-modes@^1.0.4": version "1.0.4" resolved "https://registry.yarnpkg.com/@nebula.gl/edit-modes/-/edit-modes-1.0.4.tgz#df37751768239fb37dfcb697b0b90e11371a47a3" @@ -3252,6 +3435,11 @@ schema-utils "^3.0.0" source-map "^0.7.3" +"@popperjs/core@^2.11.6": + version "2.11.6" + resolved "https://registry.yarnpkg.com/@popperjs/core/-/core-2.11.6.tgz#cee20bd55e68a1720bdab363ecf0c821ded4cd45" + integrity sha512-50/17A98tWUfQ176raKiOGXuYpLyyVMkxxG6oylzL3BPOlA6ADGdK7EYunSa4I064xerltq9TGXs8HmOk5E+vw== + "@probe.gl/env@3.5.0", "@probe.gl/env@^3.5.0": version "3.5.0" resolved "https://registry.yarnpkg.com/@probe.gl/env/-/env-3.5.0.tgz#c6d8fbf414fda3eba7b3813cc274e76245216fe0" @@ -4876,6 +5064,11 @@ resolved "https://registry.yarnpkg.com/@types/prop-types/-/prop-types-15.7.4.tgz#fcf7205c25dff795ee79af1e30da2c9790808f11" integrity sha512-rZ5drC/jWjrArrS8BR6SIr4cWpW09RNTYt9AMZo3Jwwif+iacXAqgVjm0B0Bv/S1jhDXKHqRVNCbACkJ89RAnQ== +"@types/prop-types@^15.7.5": + version "15.7.5" + resolved "https://registry.yarnpkg.com/@types/prop-types/-/prop-types-15.7.5.tgz#5f19d2b85a98e9558036f6a3cacc8819420f05cf" + integrity sha512-JCB8C6SnDoQf0cNycqd/35A7MjcnK+ZTqE7judS6o7utxUCg6imJg3QK2qzHKszlTjcj2cn+NwMB2i96ubpj7w== + "@types/qs@^6.9.5": version "6.9.7" resolved "https://registry.yarnpkg.com/@types/qs/-/qs-6.9.7.tgz#63bb7d067db107cc1e457c303bc25d511febf6cb" @@ -4888,6 +5081,13 @@ dependencies: "@types/react" "*" +"@types/react-is@^16.7.1 || ^17.0.0": + version "17.0.3" + resolved "https://registry.yarnpkg.com/@types/react-is/-/react-is-17.0.3.tgz#2d855ba575f2fc8d17ef9861f084acc4b90a137a" + integrity sha512-aBTIWg1emtu95bLTLx0cpkxwGW3ueZv71nE2YFBpL8k/z5czEW8yYpOo8Dp+UUAFAtKwNaOsh/ioSeQnWlZcfw== + dependencies: + "@types/react" "*" + "@types/react-redux@^7.1.20": version "7.1.21" resolved "https://registry.yarnpkg.com/@types/react-redux/-/react-redux-7.1.21.tgz#f32bbaf7cbc4b93f51e10d340aa54035c084b186" @@ -4905,10 +5105,10 @@ dependencies: "@types/react" "*" -"@types/react-transition-group@^4.2.0": - version "4.4.4" - resolved "https://registry.yarnpkg.com/@types/react-transition-group/-/react-transition-group-4.4.4.tgz#acd4cceaa2be6b757db61ed7b432e103242d163e" - integrity sha512-7gAPz7anVK5xzbeQW9wFBDg7G++aPLAFY0QaSMOou9rJZpbuI58WAuJrgu+qR92l61grlnCUe7AFX8KGahAgug== +"@types/react-transition-group@^4.4.5": + version "4.4.5" + resolved "https://registry.yarnpkg.com/@types/react-transition-group/-/react-transition-group-4.4.5.tgz#aae20dcf773c5aa275d5b9f7cdbca638abc5e416" + integrity sha512-juKD/eiSM3/xZYzjuzH6ZwpP+/lejltmiS3QEzV/vmb/Q8+HfDmxu+Baga8UEMGBqV88Nbg4l2hY/K2DkyaLLA== dependencies: "@types/react" "*" @@ -6042,7 +6242,7 @@ babel-plugin-jest-hoist@^26.6.2: "@types/babel__core" "^7.0.0" "@types/babel__traverse" "^7.0.6" -babel-plugin-macros@^3.0.1: +babel-plugin-macros@^3.0.1, babel-plugin-macros@^3.1.0: version "3.1.0" resolved "https://registry.yarnpkg.com/babel-plugin-macros/-/babel-plugin-macros-3.1.0.tgz#9ef6dc74deb934b4db344dc973ee851d148c50c1" integrity sha512-Cg7TFGpIr01vOQNODXOOaGz2NpCU5gl8x1qJFbb6hbZxR7XrcE2vtbAsTAbJ7/xwJtUuJEw8K8Zr/AE0LHlesg== @@ -6092,6 +6292,22 @@ babel-plugin-react-docgen@^4.2.1: lodash "^4.17.15" react-docgen "^5.0.0" +"babel-plugin-styled-components@>= 1.12.0": + version "2.0.7" + resolved "https://registry.yarnpkg.com/babel-plugin-styled-components/-/babel-plugin-styled-components-2.0.7.tgz#c81ef34b713f9da2b7d3f5550df0d1e19e798086" + integrity sha512-i7YhvPgVqRKfoQ66toiZ06jPNA3p6ierpfUuEWxNF+fV27Uv5gxBkf8KZLHUCc1nFA9j6+80pYoIpqCeyW3/bA== + dependencies: + "@babel/helper-annotate-as-pure" "^7.16.0" + "@babel/helper-module-imports" "^7.16.0" + babel-plugin-syntax-jsx "^6.18.0" + lodash "^4.17.11" + picomatch "^2.3.0" + +babel-plugin-syntax-jsx@^6.18.0: + version "6.18.0" + resolved "https://registry.yarnpkg.com/babel-plugin-syntax-jsx/-/babel-plugin-syntax-jsx-6.18.0.tgz#0af32a9a6e13ca7a3fd5069e62d7b0f58d0d8946" + integrity sha512-qrPaCSo9c8RHNRHIotaufGbuOBN8rtdC4QrrFFc43vyWCCz7Kl7GL1PGaXtMGQZUXrkCjNEgxDfmAuAabr/rlw== + babel-preset-current-node-syntax@^1.0.0: version "1.0.1" resolved "https://registry.yarnpkg.com/babel-preset-current-node-syntax/-/babel-preset-current-node-syntax-1.0.1.tgz#b4399239b89b2a011f9ddbe3e4f401fc40cff73b" @@ -6668,6 +6884,11 @@ camelcase@^6.0.0, camelcase@^6.2.0: resolved "https://registry.yarnpkg.com/camelcase/-/camelcase-6.2.1.tgz#250fd350cfd555d0d2160b1d51510eaf8326e86e" integrity sha512-tVI4q5jjFV5CavAU8DXfza/TJcZutVKo/5Foskmsqcm0MsL91moHvwiGNnqaa2o6PF/7yT5ikDRcVcl8Rj6LCA== +camelize@^1.0.0: + version "1.0.1" + resolved "https://registry.yarnpkg.com/camelize/-/camelize-1.0.1.tgz#89b7e16884056331a35d6b5ad064332c91daa6c3" + integrity sha512-dU+Tx2fsypxTgtLoE36npi3UqcjSSMNYfkqgmoEhtZrraP5VWq0K7FkWVTYa8eMPtnU/G2txVsfdCJTn9uzpuQ== + caniuse-lite@^1.0.30001109, caniuse-lite@^1.0.30001286: version "1.0.30001292" resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001292.tgz#4a55f61c06abc9595965cfd77897dc7bc1cdc456" @@ -6983,10 +7204,10 @@ clone@^1.0.2: resolved "https://registry.yarnpkg.com/clone/-/clone-1.0.4.tgz#da309cc263df15994c688ca902179ca3c7cd7c7e" integrity sha1-2jCcwmPfFZlMaIypAheco8fNfH4= -clsx@^1.0.4: - version "1.1.1" - resolved "https://registry.yarnpkg.com/clsx/-/clsx-1.1.1.tgz#98b3134f9abbdf23b2663491ace13c5c03a73188" - integrity sha512-6/bPho624p3S2pMyvP5kKBPXnI3ufHLObBFCfgx+LkeR5lg2XYy2hqZqUf45ypD8COn2bhgGJSUE+l5dhNBieA== +clsx@^1.2.1: + version "1.2.1" + resolved "https://registry.yarnpkg.com/clsx/-/clsx-1.2.1.tgz#0ddc4a20a549b59c93a4116bb26f5294ca17dc12" + integrity sha512-EcR6r5a8bj6pu3ycsa/E/cKVGuTgZJZdsyUYHOksG/UHIiKfjxzRxYJpyVBwYaQeOvghal9fcc4PidlgzugAQg== cmd-shim@^4.1.0: version "4.1.0" @@ -7397,6 +7618,11 @@ convert-source-map@^1.4.0, convert-source-map@^1.6.0, convert-source-map@^1.7.0: dependencies: safe-buffer "~5.1.1" +convert-source-map@^1.5.0: + version "1.9.0" + resolved "https://registry.yarnpkg.com/convert-source-map/-/convert-source-map-1.9.0.tgz#7faae62353fb4213366d0ca98358d22e8368b05f" + integrity sha512-ASFBup0Mz1uyiIjANan1jzLQami9z1PoYSZCiiYW2FczPbenXc45FZdBZLzOT+r6+iciuEModtmCti+hjaAk0A== + cookie-signature@1.0.6: version "1.0.6" resolved "https://registry.yarnpkg.com/cookie-signature/-/cookie-signature-1.0.6.tgz#e303a882b342cc3ee8ca513a79999734dab3ae2c" @@ -7599,6 +7825,11 @@ crypto-random-string@^2.0.0: resolved "https://registry.yarnpkg.com/crypto-random-string/-/crypto-random-string-2.0.0.tgz#ef2a7a966ec11083388369baa02ebead229b30d5" integrity sha512-v1plID3y9r/lPhviJ1wrXpLeyUIGAZ2SHNYTEapm7/8A9nLPoyvVp3RK/EPFqn5kEznyWgYZNsRtYYIWbuG8KA== +css-color-keywords@^1.0.0: + version "1.0.0" + resolved "https://registry.yarnpkg.com/css-color-keywords/-/css-color-keywords-1.0.0.tgz#fea2616dc676b2962686b3af8dbdbe180b244e05" + integrity sha512-FyyrDHZKEjXDpNJYvVsV960FiqQyXc/LlYmsxl2BcdMb2WPx0OGRVgTg55rPSyLSNMqP52R9r8geSp7apN3Ofg== + css-loader@^3.6.0: version "3.6.0" resolved "https://registry.yarnpkg.com/css-loader/-/css-loader-3.6.0.tgz#2e4b2c7e6e2d27f8c8f28f61bffcd2e6c91ef645" @@ -7629,6 +7860,15 @@ css-select@^4.1.3: domutils "^2.8.0" nth-check "^2.0.1" +css-to-react-native@^3.0.0: + version "3.0.0" + resolved "https://registry.yarnpkg.com/css-to-react-native/-/css-to-react-native-3.0.0.tgz#62dbe678072a824a689bcfee011fc96e02a7d756" + integrity sha512-Ro1yETZA813eoyUp2GDBhG2j+YggidUmzO1/v9eYBKR2EHVEniE2MI/NqpTQ954BMpTPZFsGNPm46qFB9dpaPQ== + dependencies: + camelize "^1.0.0" + css-color-keywords "^1.0.0" + postcss-value-parser "^4.0.2" + css-vendor@^2.0.8: version "2.0.8" resolved "https://registry.yarnpkg.com/css-vendor/-/css-vendor-2.0.8.tgz#e47f91d3bd3117d49180a3c935e62e3d9f7f449d" @@ -7678,16 +7918,16 @@ cssstyle@^2.3.0: dependencies: cssom "~0.3.6" -csstype@^2.5.2: - version "2.6.19" - resolved "https://registry.yarnpkg.com/csstype/-/csstype-2.6.19.tgz#feeb5aae89020bb389e1f63669a5ed490e391caa" - integrity sha512-ZVxXaNy28/k3kJg0Fou5MiYpp88j7H9hLZp8PDC3jV0WFjfH5E9xHb56L0W59cPbKbcHXeP4qyT8PrHp8t6LcQ== - csstype@^3.0.2: version "3.0.10" resolved "https://registry.yarnpkg.com/csstype/-/csstype-3.0.10.tgz#2ad3a7bed70f35b965707c092e5f30b327c290e5" integrity sha512-2u44ZG2OcNUO9HDp/Jl8C07x6pU/eTR3ncV91SiK3dhG9TWvRVsCoJw14Ckx5DgWkzGA3waZWO3d7pgqpUI/XA== +csstype@^3.1.1: + version "3.1.1" + resolved "https://registry.yarnpkg.com/csstype/-/csstype-3.1.1.tgz#841b532c45c758ee546a11d5bd7b7b473c8c30b9" + integrity sha512-DJR/VvkAvSZW9bTouZue2sSxDwdTN92uHjqeKVm+0dAqdfNykRzQ95tay8aXMBAAPpUiq4Qcug2L7neoRh2Egw== + csv-streamify@^3.0.4: version "3.0.4" resolved "https://registry.yarnpkg.com/csv-streamify/-/csv-streamify-3.0.4.tgz#4cb614c57e3f299cca17b63fdcb4ad167777f47a" @@ -9284,6 +9524,11 @@ find-replace@^3.0.0: dependencies: array-back "^3.0.1" +find-root@^1.1.0: + version "1.1.0" + resolved "https://registry.yarnpkg.com/find-root/-/find-root-1.1.0.tgz#abcfc8ba76f708c42a97b3d685b7e9450bfb9ce4" + integrity sha512-NKfW6bec6GfKc0SGx1e07QZY9PE99u0Bft/0rzSD5k3sO/vwkVUpDUKVm5Gpp5Ue3YfShPFTX2070tDs5kB9Ng== + find-up@^1.0.0: version "1.1.2" resolved "https://registry.yarnpkg.com/find-up/-/find-up-1.1.2.tgz#6b2e9822b1a2ce0a60ab64d610eccad53cb24d0f" @@ -10371,7 +10616,7 @@ hmac-drbg@^1.0.1: minimalistic-assert "^1.0.0" minimalistic-crypto-utils "^1.0.1" -hoist-non-react-statics@^3.3.0, hoist-non-react-statics@^3.3.2: +hoist-non-react-statics@^3.0.0, hoist-non-react-statics@^3.3.0, hoist-non-react-statics@^3.3.1, hoist-non-react-statics@^3.3.2: version "3.3.2" resolved "https://registry.yarnpkg.com/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz#ece0acaf71d62c2969c2ec59feff42a4b1a85b45" integrity sha512-/gGivxi8JPKWNm/W0jSmzcMPpfpPLc3dY/6GxhX2hQ9iGj3aDfklV4ET7NjKpSinLpJ5vafa9iiGIEZg10SfBw== @@ -12021,70 +12266,70 @@ jsprim@^1.2.2: json-schema "0.4.0" verror "1.10.0" -jss-plugin-camel-case@^10.5.1: - version "10.9.0" - resolved "https://registry.yarnpkg.com/jss-plugin-camel-case/-/jss-plugin-camel-case-10.9.0.tgz#4921b568b38d893f39736ee8c4c5f1c64670aaf7" - integrity sha512-UH6uPpnDk413/r/2Olmw4+y54yEF2lRIV8XIZyuYpgPYTITLlPOsq6XB9qeqv+75SQSg3KLocq5jUBXW8qWWww== +jss-plugin-camel-case@^10.9.2: + version "10.9.2" + resolved "https://registry.yarnpkg.com/jss-plugin-camel-case/-/jss-plugin-camel-case-10.9.2.tgz#76dddfa32f9e62d17daa4e3504991fd0933b89e1" + integrity sha512-wgBPlL3WS0WDJ1lPJcgjux/SHnDuu7opmgQKSraKs4z8dCCyYMx9IDPFKBXQ8Q5dVYij1FFV0WdxyhuOOAXuTg== dependencies: "@babel/runtime" "^7.3.1" hyphenate-style-name "^1.0.3" - jss "10.9.0" + jss "10.9.2" -jss-plugin-default-unit@^10.5.1: - version "10.9.0" - resolved "https://registry.yarnpkg.com/jss-plugin-default-unit/-/jss-plugin-default-unit-10.9.0.tgz#bb23a48f075bc0ce852b4b4d3f7582bc002df991" - integrity sha512-7Ju4Q9wJ/MZPsxfu4T84mzdn7pLHWeqoGd/D8O3eDNNJ93Xc8PxnLmV8s8ZPNRYkLdxZqKtm1nPQ0BM4JRlq2w== +jss-plugin-default-unit@^10.9.2: + version "10.9.2" + resolved "https://registry.yarnpkg.com/jss-plugin-default-unit/-/jss-plugin-default-unit-10.9.2.tgz#3e7f4a1506b18d8fe231554fd982439feb2a9c53" + integrity sha512-pYg0QX3bBEFtTnmeSI3l7ad1vtHU42YEEpgW7pmIh+9pkWNWb5dwS/4onSfAaI0kq+dOZHzz4dWe+8vWnanoSg== dependencies: "@babel/runtime" "^7.3.1" - jss "10.9.0" + jss "10.9.2" -jss-plugin-global@^10.5.1: - version "10.9.0" - resolved "https://registry.yarnpkg.com/jss-plugin-global/-/jss-plugin-global-10.9.0.tgz#fc07a0086ac97aca174e37edb480b69277f3931f" - integrity sha512-4G8PHNJ0x6nwAFsEzcuVDiBlyMsj2y3VjmFAx/uHk/R/gzJV+yRHICjT4MKGGu1cJq2hfowFWCyrr/Gg37FbgQ== +jss-plugin-global@^10.9.2: + version "10.9.2" + resolved "https://registry.yarnpkg.com/jss-plugin-global/-/jss-plugin-global-10.9.2.tgz#e7f2ad4a5e8e674fb703b04b57a570b8c3e5c2c2" + integrity sha512-GcX0aE8Ef6AtlasVrafg1DItlL/tWHoC4cGir4r3gegbWwF5ZOBYhx04gurPvWHC8F873aEGqge7C17xpwmp2g== dependencies: "@babel/runtime" "^7.3.1" - jss "10.9.0" + jss "10.9.2" -jss-plugin-nested@^10.5.1: - version "10.9.0" - resolved "https://registry.yarnpkg.com/jss-plugin-nested/-/jss-plugin-nested-10.9.0.tgz#cc1c7d63ad542c3ccc6e2c66c8328c6b6b00f4b3" - integrity sha512-2UJnDrfCZpMYcpPYR16oZB7VAC6b/1QLsRiAutOt7wJaaqwCBvNsosLEu/fUyKNQNGdvg2PPJFDO5AX7dwxtoA== +jss-plugin-nested@^10.9.2: + version "10.9.2" + resolved "https://registry.yarnpkg.com/jss-plugin-nested/-/jss-plugin-nested-10.9.2.tgz#3aa2502816089ecf3981e1a07c49b276d67dca63" + integrity sha512-VgiOWIC6bvgDaAL97XCxGD0BxOKM0K0zeB/ECyNaVF6FqvdGB9KBBWRdy2STYAss4VVA7i5TbxFZN+WSX1kfQA== dependencies: "@babel/runtime" "^7.3.1" - jss "10.9.0" + jss "10.9.2" tiny-warning "^1.0.2" -jss-plugin-props-sort@^10.5.1: - version "10.9.0" - resolved "https://registry.yarnpkg.com/jss-plugin-props-sort/-/jss-plugin-props-sort-10.9.0.tgz#30e9567ef9479043feb6e5e59db09b4de687c47d" - integrity sha512-7A76HI8bzwqrsMOJTWKx/uD5v+U8piLnp5bvru7g/3ZEQOu1+PjHvv7bFdNO3DwNPC9oM0a//KwIJsIcDCjDzw== +jss-plugin-props-sort@^10.9.2: + version "10.9.2" + resolved "https://registry.yarnpkg.com/jss-plugin-props-sort/-/jss-plugin-props-sort-10.9.2.tgz#645f6c8f179309667b3e6212f66b59a32fb3f01f" + integrity sha512-AP1AyUTbi2szylgr+O0OB7gkIxEGzySLITZ2GpsaoX72YMCGI2jYAc+WUhPfvUnZYiauF4zTnN4V4TGuvFjJlw== dependencies: "@babel/runtime" "^7.3.1" - jss "10.9.0" + jss "10.9.2" -jss-plugin-rule-value-function@^10.5.1: - version "10.9.0" - resolved "https://registry.yarnpkg.com/jss-plugin-rule-value-function/-/jss-plugin-rule-value-function-10.9.0.tgz#379fd2732c0746fe45168011fe25544c1a295d67" - integrity sha512-IHJv6YrEf8pRzkY207cPmdbBstBaE+z8pazhPShfz0tZSDtRdQua5jjg6NMz3IbTasVx9FdnmptxPqSWL5tyJg== +jss-plugin-rule-value-function@^10.9.2: + version "10.9.2" + resolved "https://registry.yarnpkg.com/jss-plugin-rule-value-function/-/jss-plugin-rule-value-function-10.9.2.tgz#9afe07596e477123cbf11120776be6a64494541f" + integrity sha512-vf5ms8zvLFMub6swbNxvzsurHfUZ5Shy5aJB2gIpY6WNA3uLinEcxYyraQXItRHi5ivXGqYciFDRM2ZoVoRZ4Q== dependencies: "@babel/runtime" "^7.3.1" - jss "10.9.0" + jss "10.9.2" tiny-warning "^1.0.2" -jss-plugin-vendor-prefixer@^10.5.1: - version "10.9.0" - resolved "https://registry.yarnpkg.com/jss-plugin-vendor-prefixer/-/jss-plugin-vendor-prefixer-10.9.0.tgz#aa9df98abfb3f75f7ed59a3ec50a5452461a206a" - integrity sha512-MbvsaXP7iiVdYVSEoi+blrW+AYnTDvHTW6I6zqi7JcwXdc6I9Kbm234nEblayhF38EftoenbM+5218pidmC5gA== +jss-plugin-vendor-prefixer@^10.9.2: + version "10.9.2" + resolved "https://registry.yarnpkg.com/jss-plugin-vendor-prefixer/-/jss-plugin-vendor-prefixer-10.9.2.tgz#410a0f3b9f8dbbfba58f4d329134df4849aa1237" + integrity sha512-SxcEoH+Rttf9fEv6KkiPzLdXRmI6waOTcMkbbEFgdZLDYNIP9UKNHFy6thhbRKqv0XMQZdrEsbDyV464zE/dUA== dependencies: "@babel/runtime" "^7.3.1" css-vendor "^2.0.8" - jss "10.9.0" + jss "10.9.2" -jss@10.9.0, jss@^10.5.1: - version "10.9.0" - resolved "https://registry.yarnpkg.com/jss/-/jss-10.9.0.tgz#7583ee2cdc904a83c872ba695d1baab4b59c141b" - integrity sha512-YpzpreB6kUunQBbrlArlsMpXYyndt9JATbt95tajx0t4MTJJcCJdd4hdNpHmOIDiUJrF/oX5wtVFrS3uofWfGw== +jss@10.9.2, jss@^10.9.2: + version "10.9.2" + resolved "https://registry.yarnpkg.com/jss/-/jss-10.9.2.tgz#9379be1f195ef98011dfd31f9448251bd61b95a9" + integrity sha512-b8G6rWpYLR4teTUbGd4I4EsnWjg7MN0Q5bSsjKhVkJVjhQDy2KzkbD2AW3TuT0RYZVmZZHKIrXDn6kjU14qkUg== dependencies: "@babel/runtime" "^7.3.1" csstype "^3.0.2" @@ -14642,11 +14887,6 @@ polygon-clipping@^0.15.3: dependencies: splaytree "^3.1.0" -popper.js@1.16.1-lts: - version "1.16.1-lts" - resolved "https://registry.yarnpkg.com/popper.js/-/popper.js-1.16.1-lts.tgz#cf6847b807da3799d80ee3d6d2f90df8a3f50b05" - integrity sha512-Kjw8nKRl1m+VrSFCoVGPph93W/qrSO7ZkqPpTf7F4bk/sqcfWK019dWBUpE/fBOsOQY1dks/Bmcbfn1heM/IsA== - portfinder@^1.0.23: version "1.0.28" resolved "https://registry.yarnpkg.com/portfinder/-/portfinder-1.0.28.tgz#67c4622852bd5374dd1dd900f779f53462fac778" @@ -14720,7 +14960,7 @@ postcss-selector-parser@^6.0.0, postcss-selector-parser@^6.0.2: cssesc "^3.0.0" util-deprecate "^1.0.2" -postcss-value-parser@^4.1.0: +postcss-value-parser@^4.0.2, postcss-value-parser@^4.1.0: version "4.2.0" resolved "https://registry.yarnpkg.com/postcss-value-parser/-/postcss-value-parser-4.2.0.tgz#723c09920836ba6d3e5af019f92bc0971c02e514" integrity sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ== @@ -14893,6 +15133,15 @@ prop-types@^15.0.0, prop-types@^15.6.2, prop-types@^15.7.2: object-assign "^4.1.1" react-is "^16.13.1" +prop-types@^15.8.1: + version "15.8.1" + resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.8.1.tgz#67d87bf1a694f48435cf332c24af10214a3140b5" + integrity sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg== + dependencies: + loose-envify "^1.4.0" + object-assign "^4.1.1" + react-is "^16.13.1" + property-information@^5.0.0, property-information@^5.3.0: version "5.6.0" resolved "https://registry.yarnpkg.com/property-information/-/property-information-5.6.0.tgz#61675545fb23002f245c6540ec46077d4da3ed69" @@ -15211,7 +15460,7 @@ react-inspector@^5.1.0: is-dom "^1.0.0" prop-types "^15.0.0" -react-is@17.0.2, "react-is@^16.8.0 || ^17.0.0", react-is@^17.0.1, react-is@^17.0.2: +react-is@17.0.2, react-is@^17.0.1, react-is@^17.0.2: version "17.0.2" resolved "https://registry.yarnpkg.com/react-is/-/react-is-17.0.2.tgz#e691d4a8e9c789365655539ab372762b0efb54f0" integrity sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w== @@ -15221,6 +15470,11 @@ react-is@^16.13.1, react-is@^16.7.0: resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.13.1.tgz#789729a4dc36de2999dc156dd6c1d9c18cea56a4" integrity sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ== +react-is@^18.2.0: + version "18.2.0" + resolved "https://registry.yarnpkg.com/react-is/-/react-is-18.2.0.tgz#199431eeaaa2e09f86427efbb4f1473edb47609b" + integrity sha512-xWGDIW6x921xtzPkhiULtthJHoJvBbF3q26fzloPCK0hsvxtPVelvftw3zjbHWSkR2km9Z+4uxbDDK/6Zw9B8w== + react-redux@^7.2.2: version "7.2.6" resolved "https://registry.yarnpkg.com/react-redux/-/react-redux-7.2.6.tgz#49633a24fe552b5f9caf58feb8a138936ddfe9aa" @@ -15238,10 +15492,10 @@ react-refresh@^0.11.0: resolved "https://registry.yarnpkg.com/react-refresh/-/react-refresh-0.11.0.tgz#77198b944733f0f1f1a90e791de4541f9f074046" integrity sha512-F27qZr8uUqwhWZboondsPx8tnC3Ct3SxZA3V5WyEvujRyyNv0VYPhoBg1gZ8/MV5tubQp76Trw8lTv9hzRBa+A== -react-transition-group@^4.4.0: - version "4.4.2" - resolved "https://registry.yarnpkg.com/react-transition-group/-/react-transition-group-4.4.2.tgz#8b59a56f09ced7b55cbd53c36768b922890d5470" - integrity sha512-/RNYfRAMlZwDSr6z4zNKV6xu53/e2BuaBbGhbyYIXTrmgu/bGHzmqOs7mJSJBHy9Ud+ApHx3QjrkKSp1pxvlFg== +react-transition-group@^4.4.5: + version "4.4.5" + resolved "https://registry.yarnpkg.com/react-transition-group/-/react-transition-group-4.4.5.tgz#e53d4e3f3344da8521489fbef8f2581d42becdd1" + integrity sha512-pZcd1MCJoiKiBR2NRxeCRg13uCXbydPnmB4EOeRrY7480qNWO8IIgQG6zlDkm6uRMsURXPuKq0GWtiM59a5Q6g== dependencies: "@babel/runtime" "^7.5.5" dom-helpers "^5.0.1" @@ -16124,6 +16378,11 @@ shallow-clone@^3.0.0: dependencies: kind-of "^6.0.2" +shallowequal@^1.1.0: + version "1.1.0" + resolved "https://registry.yarnpkg.com/shallowequal/-/shallowequal-1.1.0.tgz#188d521de95b9087404fd4dcb68b13df0ae4e7f8" + integrity sha512-y0m1JoUZSlPAjXVtPPW70aZWfIL/dSP7AFkRnniLCrK/8MDKog3TySTBmckD+RObVxH0v4Tox67+F14PdED2oQ== + shebang-command@^1.2.0: version "1.2.0" resolved "https://registry.yarnpkg.com/shebang-command/-/shebang-command-1.2.0.tgz#44aac65b695b03398968c39f363fee5deafdf1ea" @@ -16329,10 +16588,10 @@ source-map-url@^0.4.0: resolved "https://registry.yarnpkg.com/source-map-url/-/source-map-url-0.4.1.tgz#0af66605a745a5a2f91cf1bbf8a7afbc283dec56" integrity sha512-cPiFOTLUKvJFIg4SKVScy4ilPPW6rFgMgfuZJPNoDuMs3nC1HbMUycBoJw77xFIp6z1UJQJOfx6C9GMH80DiTw== -source-map@^0.5.0, source-map@^0.5.6: +source-map@^0.5.0, source-map@^0.5.6, source-map@^0.5.7: version "0.5.7" resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.5.7.tgz#8a039d2d1021d22d1ea14c80d8ea468ba2ef3fcc" - integrity sha1-igOdLRAh0i0eoUyA2OpGi6LvP8w= + integrity sha512-LbrmJOMUSdEVxIKvdcJzQC+nQhe8FUZQTXQy6+I75skNgn3OoQ0DZA8YnFa7gp8tqtL3KPf1kmo0R5DoApeSGQ== source-map@^0.6.0, source-map@^0.6.1, source-map@~0.6.0, source-map@~0.6.1: version "0.6.1" @@ -16771,6 +17030,27 @@ style-to-object@0.3.0, style-to-object@^0.3.0: dependencies: inline-style-parser "0.1.1" +styled-components@^5.2.3: + version "5.3.6" + resolved "https://registry.yarnpkg.com/styled-components/-/styled-components-5.3.6.tgz#27753c8c27c650bee9358e343fc927966bfd00d1" + integrity sha512-hGTZquGAaTqhGWldX7hhfzjnIYBZ0IXQXkCYdvF1Sq3DsUaLx6+NTHC5Jj1ooM2F68sBiVz3lvhfwQs/S3l6qg== + dependencies: + "@babel/helper-module-imports" "^7.0.0" + "@babel/traverse" "^7.4.5" + "@emotion/is-prop-valid" "^1.1.0" + "@emotion/stylis" "^0.8.4" + "@emotion/unitless" "^0.7.4" + babel-plugin-styled-components ">= 1.12.0" + css-to-react-native "^3.0.0" + hoist-non-react-statics "^3.0.0" + shallowequal "^1.1.0" + supports-color "^5.5.0" + +stylis@4.0.13: + version "4.0.13" + resolved "https://registry.yarnpkg.com/stylis/-/stylis-4.0.13.tgz#f5db332e376d13cc84ecfe5dace9a2a51d954c91" + integrity sha512-xGPXiFVl4YED9Jh7Euv2V220mriG9u4B2TA6Ybjc1catrstKD2PpIdU3U0RKpkVBC2EhmL/F0sPCr9vrFTNRag== + superstatic@^7.1.0: version "7.1.0" resolved "https://registry.yarnpkg.com/superstatic/-/superstatic-7.1.0.tgz#42cc773a0f500fb691841e0533d0b8c31f25997f" @@ -16808,7 +17088,7 @@ supports-color@^2.0.0: resolved "https://registry.yarnpkg.com/supports-color/-/supports-color-2.0.0.tgz#535d045ce6b6363fa40117084629995e9df324c7" integrity sha1-U10EXOa2Nj+kARcIRimZXp3zJMc= -supports-color@^5.0.0, supports-color@^5.3.0: +supports-color@^5.0.0, supports-color@^5.3.0, supports-color@^5.5.0: version "5.5.0" resolved "https://registry.yarnpkg.com/supports-color/-/supports-color-5.5.0.tgz#e2e69a44ac8772f78a1ec0b35b689df6530efc8f" integrity sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow==