@react-magma/charts 7.0.1-next.3 → 8.0.0-next.5

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@react-magma/charts",
-  "version": "7.0.1-next.3",
+  "version": "8.0.0-next.5",
   "publishConfig": {
     "access": "public"
   },
@@ -26,11 +26,11 @@
     "lint": "eslint ./src"
   },
   "peerDependencies": {
-    "@emotion/core": "^10.1.1",
-    "@emotion/styled": "^10.0.27",
+    "@emotion/react": "^11.13.0",
+    "@emotion/styled": "^11.13.0",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
-    "react-magma-dom": "^4.4.1-next.0",
+    "react-magma-dom": "^4.5.0-next.7",
     "react-magma-icons": "^3.0.0"
   },
   "dependencies": {
@@ -41,13 +41,13 @@
     "victory": "^35.4.12"
   },
   "devDependencies": {
-    "@emotion/core": "^10.1.1",
-    "@emotion/styled": "^10.0.27",
+    "@emotion/react": "^11.13.0",
+    "@emotion/styled": "^11.13.0",
     "dom-to-image-more": "3.1.4",
     "identity-obj-proxy": "^3.0.0",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
-    "react-magma-dom": "^4.4.1-next.0",
+    "react-magma-dom": "^4.5.0-next.10",
     "react-magma-icons": "^3.0.0"
   }
 }

package/src/components/CarbonChart/CarbonChart.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { ThemeInterface, ThemeContext, useIsInverse } from 'react-magma-dom';
 import { transparentize } from 'polished';
-import styled, { CreateStyled } from '@emotion/styled';
+import styled from '@emotion/styled';
 import {
   AreaChart,
   StackedAreaChart,
@@ -15,8 +15,6 @@ import {
 } from '@carbon/charts-react';
 import './styles.min.css';
 
-const typedStyled = styled as CreateStyled<ThemeInterface>;
-
 export enum CarbonChartType {
   area = 'area',
   areaStacked = 'areaStacked',
@@ -47,7 +45,7 @@ export interface CarbonChartProps extends React.HTMLAttributes<HTMLDivElement> {
   type: CarbonChartType;
 }
 
-const CarbonChartWrapper = typedStyled.div<{
+const CarbonChartWrapper = styled.div<{
   isInverse?: boolean;
   theme: ThemeInterface;
 }>`
@@ -217,7 +215,6 @@ const CarbonChartWrapper = typedStyled.div<{
           props.isInverse
             ? props.theme.colors.primary600
             : props.theme.colors.neutral100});
-      }
     }
       .cds--cc--lollipop circle.dot.filled,
       .cds--cc--lollipop circle.dot.hovered {
@@ -233,15 +230,15 @@ const CarbonChartWrapper = typedStyled.div<{
         drop-shadow( 1px  0px 0px ${props =>
           props.isInverse
             ? props.theme.colors.primary600
-            : props.theme.colors.neutral100}) 
+            : props.theme.colors.neutral100}); 
         drop-shadow(-1px  0px 0px ${props =>
           props.isInverse
             ? props.theme.colors.primary600
-            : props.theme.colors.neutral100})
+            : props.theme.colors.neutral100});
         drop-shadow( 0px  1px 0px ${props =>
           props.isInverse
             ? props.theme.colors.primary600
-            : props.theme.colors.neutral100}) 
+            : props.theme.colors.neutral100});
         drop-shadow( 0px -1px 0px ${props =>
           props.isInverse
             ? props.theme.colors.primary600
@@ -295,7 +292,6 @@ const CarbonChartWrapper = typedStyled.div<{
             props.isInverse
               ? props.theme.colors.focusInverse
               : props.theme.colors.focus} !important;
-      }
       outline-offset: 0;
     }
     .cds--overflow-menu-options__btn:focus,

package/src/components/LineChart/Chart.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { css } from '@emotion/core';
+import { css } from '@emotion/react';
 import { KeyboardIcon } from 'react-magma-icons';
 
 import { LineChart, LineChartProps } from './LineChart';
@@ -17,15 +17,12 @@ import {
   Tabs,
   TabsContainer,
   ThemeContext,
-  ThemeInterface,
   Tooltip,
   TypographyVisualStyle,
   useDescendants,
+  styled
 } from 'react-magma-dom';
 
-import styled, { CreateStyled } from '@emotion/styled';
-const typedStyled = styled as CreateStyled<ThemeInterface>;
-
 interface BaseChartProps {
   /**
    * Description of what the line chart data represents placed above the chart
@@ -49,7 +46,7 @@ export interface ChartProps<T extends any>
     Omit<React.HTMLAttributes<HTMLDivElement>, 'title'>,
     LineChartProps<T> {}
 
-const StyledTitle = typedStyled.span`
+const StyledTitle = styled.span`
   color: ${props => props.theme.colors.neutral};
   font-size: ${props => props.theme.typeScale.size04.fontSize};
   font-weight: 600;
@@ -58,23 +55,23 @@ const StyledTitle = typedStyled.span`
   margin: 0 0 12px 0;
 `;
 
-const StyledParagraph = typedStyled(Paragraph)`
+const StyledParagraph = styled(Paragraph)`
   font-size: ${props => props.theme.typeScale.size02.fontSize};
   margin: 0 0 18px 0;
 `;
 
-const StyledTabsContainer = typedStyled(TabsContainer)`
+const StyledTabsContainer = styled(TabsContainer)`
   width: 800px;
   ul {
     box-shadow: inset 0 -1px 0 ${props => props.theme.colors.neutral300};
   }
 `;
 
-const StyledTabPanel = typedStyled(TabPanel)`
+const StyledTabPanel = styled(TabPanel)`
   padding: 22px 0;
 `;
 
-const KeyboardInstructionsCard = typedStyled(Card)<{
+const KeyboardInstructionsCard = styled(Card)<{
   isOpen?: boolean;
   maxHeight?: string;
   width?: string;

package/src/components/LineChart/GraphTooltip.tsx

@@ -7,11 +7,10 @@ import {
   ThemeInterface,
 } from 'react-magma-dom';
 
-import styled, { CreateStyled } from '@emotion/styled';
+import styled from '@emotion/styled';
 
-const typedStyled = styled as CreateStyled<ThemeInterface>;
 
-const StyledGraphTooltip = typedStyled(StyledTooltip)`
+const StyledGraphTooltip = styled(StyledTooltip)`
   background: ${(props: any) => props.theme.colors.neutral100};
   border: 1px solid ${(props: any) => props.theme.colors.neutral300};
   box-shadow: 0 2px 6px rgba(0, 0, 0, 0.18);
@@ -33,7 +32,7 @@ const StyledGraphTooltip = typedStyled(StyledTooltip)`
   }
 `;
 
-const TooltipColorSwatch = typedStyled.span`
+const TooltipColorSwatch = styled.span`
   background: ${(props: any) => props.color};
   border: ${(props: any) => (props.color ? 'none' : '3px solid black')};
   border-radius: 4px;

package/src/components/LineChart/LineChart.tsx

@@ -25,8 +25,7 @@ import { CustomScatterDataComponent } from './CustomPointComponent';
 import { CustomAxisComponent } from './CustomAxisComponent';
 import { LegendButton } from './LegendButton';
 
-import styled, { CreateStyled } from '@emotion/styled';
-const typedStyled = styled as CreateStyled<ThemeInterface>;
+import styled from '@emotion/styled';
 
 export type LineChartAxisStyle = VictoryAxisProps['style'];
 export type DataGetterPropType = VictoryLineProps['x'];
@@ -104,7 +103,7 @@ export interface LineChartProps<T extends ChartDataOptions> {
   y?: keyof T;
 }
 
-const LineChartContainer = typedStyled.div`
+const LineChartContainer = styled.div`
   max-height: 600px;
   max-width: 800px;
   svg {
@@ -112,13 +111,13 @@ const LineChartContainer = typedStyled.div`
   }
 `;
 
-const VictoryChartContainer = typedStyled.div``;
+const VictoryChartContainer = styled.div``;
 
-const DataLegendsContainer = typedStyled.div`
+const DataLegendsContainer = styled.div`
   padding-bottom: 24px;
 `;
 
-const DataLegendsDescription = typedStyled.p`
+const DataLegendsDescription = styled.p`
   color: ${(props: any) => props.theme.colors.neutral};
   font-size: ${(props: any) => props.theme.typeScale.size02.fontSize};
 `;