@zendeskgarden/react-notifications - npm Package Compare versions

Comparing version 9.0.0-next.8 to 9.0.0-next.9

dist/esm/elements/Alert.js

@@ -44,3 +44,3 @@ /**
   }, props), React__default.createElement(StyledIcon, {
-    hue: hue
+    $hue: hue
   }, React__default.createElement(Icon, null)), props.children));
@@ -47,0 +47,0 @@ });

dist/esm/elements/global-alert/GlobalAlert.js

@@ -39,2 +39,8 @@ /**
   } = _ref;
+  const icon = {
+    success: React__default.createElement(SvgCheckCircleStroke, null),
+    error: React__default.createElement(SvgAlertErrorStroke, null),
+    warning: React__default.createElement(SvgAlertWarningStroke, null),
+    info: React__default.createElement(SvgInfoStroke, null)
+  }[type];
   return React__default.createElement(GlobalAlertContext.Provider, {
@@ -48,8 +54,3 @@ value: useMemo(() => ({
     alertType: type
-  }, props), {
-    success: React__default.createElement(StyledGlobalAlertIcon, null, React__default.createElement(SvgCheckCircleStroke, null)),
-    error: React__default.createElement(StyledGlobalAlertIcon, null, React__default.createElement(SvgAlertErrorStroke, null)),
-    warning: React__default.createElement(StyledGlobalAlertIcon, null, React__default.createElement(SvgAlertWarningStroke, null)),
-    info: React__default.createElement(StyledGlobalAlertIcon, null, React__default.createElement(SvgInfoStroke, null))
-  }[type], props.children));
+  }, props), React__default.createElement(StyledGlobalAlertIcon, null, icon), props.children));
 });
@@ -56,0 +57,0 @@ GlobalAlertComponent.displayName = 'GlobalAlert';

dist/esm/elements/Notification.js

@@ -32,16 +32,16 @@ /**
   let {
-    role,
+    children,
+    type,
     ...props
   } = _ref;
-  const Icon = props.type ? validationIcons[props.type] : SvgInfoStroke;
-  const hue = props.type && validationHues[props.type];
+  const Icon = type ? validationIcons[type] : SvgInfoStroke;
+  const hue = type && validationHues[type];
   return React__default.createElement(StyledNotification, Object.assign({
     ref: ref,
-    type: props.type,
-    isFloating: true
-  }, props, {
-    role: role === undefined ? 'status' : role
-  }), props.type && React__default.createElement(StyledIcon, {
-    hue: hue
-  }, React__default.createElement(Icon, null)), props.children);
+    type: type,
+    isFloating: true,
+    role: "alert"
+  }, props), type && React__default.createElement(StyledIcon, {
+    $hue: hue
+  }, React__default.createElement(Icon, null)), children);
 });
@@ -48,0 +48,0 @@ NotificationComponent.displayName = 'Notification';

dist/esm/styled/content/StyledClose.js

@@ -13,3 +13,3 @@ /**
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.0.0-next.8'
+  'data-garden-version': '9.0.0-next.9'
 }).withConfig({
@@ -16,0 +16,0 @@ displayName: "StyledClose",

dist/esm/styled/content/StyledParagraph.js

@@ -13,3 +13,3 @@ /**
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.0.0-next.8'
+  'data-garden-version': '9.0.0-next.9'
 }).withConfig({
@@ -16,0 +16,0 @@ displayName: "StyledParagraph",

dist/esm/styled/content/StyledTitle.js

@@ -13,3 +13,3 @@ /**
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.0.0-next.8'
+  'data-garden-version': '9.0.0-next.9'
 }).withConfig({
@@ -16,0 +16,0 @@ displayName: "StyledTitle",

dist/esm/styled/global-alert/StyledGlobalAlert.js

@@ -76,3 +76,3 @@ /**
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.0.0-next.8'
+  'data-garden-version': '9.0.0-next.9'
 }).withConfig({
@@ -79,0 +79,0 @@ displayName: "StyledGlobalAlert",

dist/esm/styled/global-alert/StyledGlobalAlertButton.js

@@ -59,3 +59,3 @@ /**
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.0.0-next.8',
+  'data-garden-version': '9.0.0-next.9',
   focusInset: false,
@@ -62,0 +62,0 @@ isDanger: false,

dist/esm/styled/global-alert/StyledGlobalAlertClose.js

@@ -64,3 +64,3 @@ /**
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.0.0-next.8',
+  'data-garden-version': '9.0.0-next.9',
   size: 'small'
@@ -67,0 +67,0 @@ }).withConfig({

dist/esm/styled/global-alert/StyledGlobalAlertContent.js

@@ -13,3 +13,3 @@ /**
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.0.0-next.8'
+  'data-garden-version': '9.0.0-next.9'
 }).withConfig({
@@ -16,0 +16,0 @@ displayName: "StyledGlobalAlertContent",

dist/esm/styled/global-alert/StyledGlobalAlertIcon.js

@@ -7,6 +7,5 @@ /**
 */
-import React__default, { Children } from 'react';
 import styled, { css } from 'styled-components';
 import { math } from 'polished';
-import { retrieveComponentStyles, DEFAULT_THEME } from '@zendeskgarden/react-theming';
+import { StyledBaseIcon, retrieveComponentStyles, DEFAULT_THEME } from '@zendeskgarden/react-theming';
 
@@ -20,11 +19,5 @@ const COMPONENT_ID = 'notifications.global-alert.icon';
 };
-const StyledGlobalAlertIcon = styled(_ref => {
-  let {
-    children,
-    ...props
-  } = _ref;
-  return React__default.cloneElement(Children.only(children), props);
-}).attrs({
+const StyledGlobalAlertIcon = styled(StyledBaseIcon).attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.0.0-next.8'
+  'data-garden-version': '9.0.0-next.9'
 }).withConfig({
@@ -31,0 +24,0 @@ displayName: "StyledGlobalAlertIcon",

dist/esm/styled/global-alert/StyledGlobalAlertTitle.js

@@ -29,3 +29,3 @@ /**
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.0.0-next.8'
+  'data-garden-version': '9.0.0-next.9'
 }).withConfig({
@@ -32,0 +32,0 @@ displayName: "StyledGlobalAlertTitle",

dist/esm/styled/StyledAlert.js

@@ -16,3 +16,3 @@ /**
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.0.0-next.8'
+  'data-garden-version': '9.0.0-next.9'
 }).withConfig({
@@ -19,0 +19,0 @@ displayName: "StyledAlert",

dist/esm/styled/StyledIcon.js

@@ -7,16 +7,9 @@ /**
 */
-import React__default, { Children } from 'react';
 import styled from 'styled-components';
-import { getColorV8, DEFAULT_THEME } from '@zendeskgarden/react-theming';
+import { StyledBaseIcon, getColorV8, DEFAULT_THEME } from '@zendeskgarden/react-theming';
 
-const StyledIcon = styled(_ref => {
-  let {
-    children,
-    ...props
-  } = _ref;
-  return React__default.cloneElement(Children.only(children), props);
-}).withConfig({
+const StyledIcon = styled(StyledBaseIcon).withConfig({
   displayName: "StyledIcon",
   componentId: "sc-msklws-0"
-})(["position:absolute;right:", ";left:", ";margin-top:", "px;color:", ";"], props => props.theme.rtl && `${props.theme.space.base * 4}px`, props => !props.theme.rtl && `${props.theme.space.base * 4}px`, props => props.theme.space.base / 2, props => props.hue && getColorV8(props.hue, props.hue === 'warningHue' ? 700 : 600, props.theme));
+})(["position:absolute;right:", ";left:", ";margin-top:", "px;color:", ";"], props => props.theme.rtl && `${props.theme.space.base * 4}px`, props => !props.theme.rtl && `${props.theme.space.base * 4}px`, props => props.theme.space.base / 2, props => props.$hue && getColorV8(props.$hue, props.$hue === 'warningHue' ? 700 : 600, props.theme));
 StyledIcon.defaultProps = {
@@ -23,0 +16,0 @@ theme: DEFAULT_THEME

dist/esm/styled/StyledNotification.js

@@ -50,3 +50,3 @@ /**
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.0.0-next.8'
+  'data-garden-version': '9.0.0-next.9'
 }).withConfig({
@@ -53,0 +53,0 @@ displayName: "StyledNotification",

dist/esm/styled/StyledWell.js

@@ -14,3 +14,3 @@ /**
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.0.0-next.8'
+  'data-garden-version': '9.0.0-next.9'
 }).withConfig({
@@ -17,0 +17,0 @@ displayName: "StyledWell",

dist/index.cjs.js

@@ -47,3 +47,3 @@ /**
   'data-garden-id': COMPONENT_ID$b,
-  'data-garden-version': '9.0.0-next.8'
+  'data-garden-version': '9.0.0-next.9'
 }).withConfig({
@@ -63,3 +63,3 @@ displayName: "StyledClose",
   'data-garden-id': COMPONENT_ID$a,
-  'data-garden-version': '9.0.0-next.8'
+  'data-garden-version': '9.0.0-next.9'
 }).withConfig({
@@ -76,3 +76,3 @@ displayName: "StyledParagraph",
   'data-garden-id': COMPONENT_ID$9,
-  'data-garden-version': '9.0.0-next.8'
+  'data-garden-version': '9.0.0-next.9'
 }).withConfig({
@@ -134,3 +134,3 @@ displayName: "StyledTitle",
   'data-garden-id': COMPONENT_ID$8,
-  'data-garden-version': '9.0.0-next.8'
+  'data-garden-version': '9.0.0-next.9'
 }).withConfig({
@@ -180,3 +180,3 @@ displayName: "StyledAlert",
   'data-garden-id': COMPONENT_ID$7,
-  'data-garden-version': '9.0.0-next.8'
+  'data-garden-version': '9.0.0-next.9'
 }).withConfig({
@@ -196,3 +196,3 @@ displayName: "StyledNotification",
   'data-garden-id': COMPONENT_ID$6,
-  'data-garden-version': '9.0.0-next.8'
+  'data-garden-version': '9.0.0-next.9'
 }).withConfig({
@@ -206,12 +206,6 @@ displayName: "StyledWell",
 
-const StyledIcon = styled__default.default(_ref => {
-  let {
-    children,
-    ...props
-  } = _ref;
-  return React__namespace.default.cloneElement(React.Children.only(children), props);
-}).withConfig({
+const StyledIcon = styled__default.default(reactTheming.StyledBaseIcon).withConfig({
   displayName: "StyledIcon",
   componentId: "sc-msklws-0"
-})(["position:absolute;right:", ";left:", ";margin-top:", "px;color:", ";"], props => props.theme.rtl && `${props.theme.space.base * 4}px`, props => !props.theme.rtl && `${props.theme.space.base * 4}px`, props => props.theme.space.base / 2, props => props.hue && reactTheming.getColorV8(props.hue, props.hue === 'warningHue' ? 700 : 600, props.theme));
+})(["position:absolute;right:", ";left:", ";margin-top:", "px;color:", ";"], props => props.theme.rtl && `${props.theme.space.base * 4}px`, props => !props.theme.rtl && `${props.theme.space.base * 4}px`, props => props.theme.space.base / 2, props => props.$hue && reactTheming.getColorV8(props.$hue, props.$hue === 'warningHue' ? 700 : 600, props.theme));
 StyledIcon.defaultProps = {
@@ -287,3 +281,3 @@ theme: reactTheming.DEFAULT_THEME
   'data-garden-id': COMPONENT_ID$5,
-  'data-garden-version': '9.0.0-next.8'
+  'data-garden-version': '9.0.0-next.9'
 }).withConfig({
@@ -350,3 +344,3 @@ displayName: "StyledGlobalAlert",
   'data-garden-id': COMPONENT_ID$4,
-  'data-garden-version': '9.0.0-next.8',
+  'data-garden-version': '9.0.0-next.9',
   size: 'small'
@@ -408,3 +402,3 @@ }).withConfig({
   'data-garden-id': COMPONENT_ID$3,
-  'data-garden-version': '9.0.0-next.8',
+  'data-garden-version': '9.0.0-next.9',
   focusInset: false,
@@ -428,3 +422,3 @@ isDanger: false,
   'data-garden-id': COMPONENT_ID$2,
-  'data-garden-version': '9.0.0-next.8'
+  'data-garden-version': '9.0.0-next.9'
 }).withConfig({
@@ -445,11 +439,5 @@ displayName: "StyledGlobalAlertContent",
 };
-const StyledGlobalAlertIcon = styled__default.default(_ref => {
-  let {
-    children,
-    ...props
-  } = _ref;
-  return React__namespace.default.cloneElement(React.Children.only(children), props);
-}).attrs({
+const StyledGlobalAlertIcon = styled__default.default(reactTheming.StyledBaseIcon).attrs({
   'data-garden-id': COMPONENT_ID$1,
-  'data-garden-version': '9.0.0-next.8'
+  'data-garden-version': '9.0.0-next.9'
 }).withConfig({
@@ -482,3 +470,3 @@ displayName: "StyledGlobalAlertIcon",
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.0.0-next.8'
+  'data-garden-version': '9.0.0-next.9'
 }).withConfig({
@@ -665,3 +653,3 @@ displayName: "StyledGlobalAlertTitle",
   }, props), React__namespace.default.createElement(StyledIcon, {
-    hue: hue
+    $hue: hue
   }, React__namespace.default.createElement(Icon, null)), props.children));
@@ -680,16 +668,16 @@ });
   let {
-    role,
+    children,
+    type,
     ...props
   } = _ref;
-  const Icon = props.type ? validationIcons[props.type] : SvgInfoStroke;
-  const hue = props.type && validationHues[props.type];
+  const Icon = type ? validationIcons[type] : SvgInfoStroke;
+  const hue = type && validationHues[type];
   return React__namespace.default.createElement(StyledNotification, Object.assign({
     ref: ref,
-    type: props.type,
-    isFloating: true
-  }, props, {
-    role: role === undefined ? 'status' : role
-  }), props.type && React__namespace.default.createElement(StyledIcon, {
-    hue: hue
-  }, React__namespace.default.createElement(Icon, null)), props.children);
+    type: type,
+    isFloating: true,
+    role: "alert"
+  }, props), type && React__namespace.default.createElement(StyledIcon, {
+    $hue: hue
+  }, React__namespace.default.createElement(Icon, null)), children);
 });
@@ -1139,2 +1127,8 @@ NotificationComponent.displayName = 'Notification';
   } = _ref;
+  const icon = {
+    success: React__namespace.default.createElement(SvgCheckCircleStroke, null),
+    error: React__namespace.default.createElement(SvgAlertErrorStroke, null),
+    warning: React__namespace.default.createElement(SvgAlertWarningStroke, null),
+    info: React__namespace.default.createElement(SvgInfoStroke, null)
+  }[type];
   return React__namespace.default.createElement(GlobalAlertContext.Provider, {
@@ -1148,8 +1142,3 @@ value: React.useMemo(() => ({
     alertType: type
-  }, props), {
-    success: React__namespace.default.createElement(StyledGlobalAlertIcon, null, React__namespace.default.createElement(SvgCheckCircleStroke, null)),
-    error: React__namespace.default.createElement(StyledGlobalAlertIcon, null, React__namespace.default.createElement(SvgAlertErrorStroke, null)),
-    warning: React__namespace.default.createElement(StyledGlobalAlertIcon, null, React__namespace.default.createElement(SvgAlertWarningStroke, null)),
-    info: React__namespace.default.createElement(StyledGlobalAlertIcon, null, React__namespace.default.createElement(SvgInfoStroke, null))
-  }[type], props.children));
+  }, props), React__namespace.default.createElement(StyledGlobalAlertIcon, null, icon), props.children));
 });
@@ -1156,0 +1145,0 @@ GlobalAlertComponent.displayName = 'GlobalAlert';

dist/typings/styled/global-alert/StyledGlobalAlertButton.d.ts

@@ -16,7 +16,7 @@ /**
     EndIcon: {
-        (props: import("@zendeskgarden/react-buttons").IButtonEndIconProps): import("react").JSX.Element;
+        ({ isRotated, ...props }: import("@zendeskgarden/react-buttons").IButtonEndIconProps): import("react").JSX.Element;
         displayName: string;
     };
     StartIcon: {
-        (props: import("@zendeskgarden/react-buttons").IButtonEndIconProps): import("react").JSX.Element;
+        ({ isRotated, ...props }: import("@zendeskgarden/react-buttons").IButtonEndIconProps): import("react").JSX.Element;
         displayName: string;
@@ -23,0 +23,0 @@ };

dist/typings/styled/global-alert/StyledGlobalAlertIcon.d.ts

@@ -7,7 +7,7 @@ /**
  */
-import React from 'react';
+/// <reference types="react" />
 import { DefaultTheme } from 'styled-components';
-export declare const StyledGlobalAlertIcon: import("styled-components").StyledComponent<({ children, ...props }: any) => React.DetailedReactHTMLElement<any, HTMLElement>, DefaultTheme, {
+export declare const StyledGlobalAlertIcon: import("styled-components").StyledComponent<({ children, theme, ...props }: any) => import("react").DetailedReactHTMLElement<any, HTMLElement>, DefaultTheme, {
     'data-garden-id': string;
     'data-garden-version': string;
 }, "data-garden-id" | "data-garden-version">;

dist/typings/styled/StyledIcon.d.ts

@@ -7,3 +7,3 @@ /**
  */
-import React from 'react';
-export declare const StyledIcon: import("styled-components").StyledComponent<({ children, ...props }: any) => React.DetailedReactHTMLElement<any, HTMLElement>, import("styled-components").DefaultTheme, {}, never>;
+/// <reference types="react" />
+export declare const StyledIcon: import("styled-components").StyledComponent<({ children, theme, ...props }: any) => import("react").DetailedReactHTMLElement<any, HTMLElement>, import("styled-components").DefaultTheme, {}, never>;

package.json

 {
   "name": "@zendeskgarden/react-notifications",
-  "version": "9.0.0-next.8",
+  "version": "9.0.0-next.9",
   "description": "Notification and Well components within the Garden Design System",
@@ -24,3 +24,3 @@ "license": "Apache-2.0",
   "dependencies": {
-    "@zendeskgarden/react-buttons": "^9.0.0-next.8",
+    "@zendeskgarden/react-buttons": "^9.0.0-next.9",
     "polished": "^4.1.1",
@@ -39,3 +39,3 @@ "prop-types": "^15.5.7",
     "@types/react-transition-group": "4.4.10",
-    "@zendeskgarden/react-theming": "^9.0.0-next.8",
+    "@zendeskgarden/react-theming": "^9.0.0-next.9",
     "@zendeskgarden/svg-icons": "7.0.0"
@@ -53,3 +53,3 @@ },
   "zendeskgarden:src": "src/index.ts",
-  "gitHead": "a3d6534843d5a4f5cb60b52bc67264f3230f2da0"
+  "gitHead": "771281b562d376a6aee04b0cd71dd888b3ae4a1d"
 }

No alert changes

Worsened metrics

Total package byte prevSize

145660

decreased by-0.62%

Lines of code

3442

decreased by-0.69%

Dependency changes

• Updated@zendeskgarden/react-buttons@^9.0.0-next.9