@chakra-ui/alert - npm Package Compare versions

Comparing version 1.0.0-next.4 to 1.0.0-next.5

CHANGELOG.md

@@ -6,2 +6,11 @@ # Change Log
 
+# [1.0.0-next.5](https://github.com/chakra-ui/chakra-ui/compare/@chakra-ui/alert@1.0.0-next.4...@chakra-ui/alert@1.0.0-next.5) (2020-07-15)
+
+**Note:** Version bump only for package @chakra-ui/alert
+
+# Change Log
+
+All notable changes to this project will be documented in this file. See
+[Conventional Commits](https://conventionalcommits.org) for commit guidelines.
+
 # 1.0.0-next.4 (2020-07-01)
@@ -8,0 +17,0 @@

dist/cjs/alert.js

 "use strict";
 
 exports.__esModule = true;
-exports.AlertIcon = exports.AlertDescription = exports.AlertTitle = exports.Alert = exports.ALERT_STATUSES = void 0;
+exports.AlertIcon = exports.AlertDescription = exports.AlertTitle = exports.Alert = exports.STATUSES = void 0;
 
@@ -22,3 +22,3 @@ var _alertIcons = require("./alert-icons");
 
-var ALERT_STATUSES = {
+var STATUSES = {
   info: {
@@ -41,6 +41,7 @@ icon: _alertIcons.InfoIcon,
 };
-exports.ALERT_STATUSES = ALERT_STATUSES;
+exports.STATUSES = STATUSES;
 
 var _createContext = (0, _utils.createContext)({
-  name: "AlertContext"
+  name: "AlertContext",
+  errorMessage: "useAlertContext: `context` is undefined. Seems you forgot to wrap alert components in `<Alert />`"
 }),
@@ -51,3 +52,2 @@ AlertContextProvider = _createContext[0],
 var StyledAlert = (0, _system.chakra)("div", {
-  themeKey: "Alert.Root",
   baseStyle: {
@@ -59,5 +59,2 @@ width: "100%",
     overflow: "hidden"
-  },
-  attrs: {
-    role: "alert"
   }
@@ -73,16 +70,11 @@ });
 var Alert = /*#__PURE__*/React.forwardRef(function Alert(props, ref) {
-  var defaults = (0, _system.useThemeDefaultProps)("Alert");
-
   var _props$status = props.status,
       status = _props$status === void 0 ? "info" : _props$status,
-      _props$variant = props.variant,
-      variant = _props$variant === void 0 ? defaults == null ? void 0 : defaults.variant : _props$variant,
       className = props.className,
-      rest = _objectWithoutPropertiesLoose(props, ["status", "variant", "className"]);
+      rest = _objectWithoutPropertiesLoose(props, ["status", "className"]);
 
-  var colorScheme = ALERT_STATUSES[status].colorScheme;
-  var context = {
-    status: status,
-    variant: variant
-  };
+  var colorScheme = STATUSES[status].colorScheme;
+  var styles = (0, _system.useStyleConfig)("Alert", _extends({}, props, {
+    colorScheme: colorScheme
+  }));
 
@@ -92,46 +84,47 @@ var _className = (0, _utils.cx)("chakra-alert", className);
   return /*#__PURE__*/React.createElement(AlertContextProvider, {
-    value: context
+    value: {
+      status: status
+    }
+  }, /*#__PURE__*/React.createElement(_system.StylesProvider, {
+    value: styles
   }, /*#__PURE__*/React.createElement(StyledAlert, _extends({
+    role: "alert",
     ref: ref,
-    variant: variant,
-    colorScheme: colorScheme,
     className: _className
-  }, rest)));
+  }, rest, {
+    __css: styles.container
+  }))));
 });
 exports.Alert = Alert;
-var AlertTitle = (0, _system.chakra)("div", {
-  themeKey: "Alert.Title",
-  baseStyle: {
-    fontWeight: "bold",
-    lineHeight: "normal"
-  },
-  attrs: function attrs(props) {
-    return {
-      className: (0, _utils.cx)("chakra-alert__title", props.className)
-    };
-  }
+var AlertTitle = /*#__PURE__*/React.forwardRef(function AlertTitle(props, ref) {
+  var className = props.className,
+      rest = _objectWithoutPropertiesLoose(props, ["className"]);
+
+  var _className = (0, _utils.cx)("chakra-alert__title", className);
+
+  var styles = (0, _system.useStyles)();
+  return /*#__PURE__*/React.createElement(_system.chakra.div, _extends({
+    ref: ref,
+    className: _className
+  }, rest, {
+    __css: styles.title
+  }));
 });
-/**
- * AlertDescription
- *
- * The description of the alert to be announced by screen
- * readers.
- */
+exports.AlertTitle = AlertTitle;
+var AlertDescription = /*#__PURE__*/React.forwardRef(function AlertDescription(props, ref) {
+  var className = props.className,
+      rest = _objectWithoutPropertiesLoose(props, ["className"]);
 
-exports.AlertTitle = AlertTitle;
-var AlertDescription = (0, _system.chakra)("div", {
-  themeKey: "Alert.Description",
-  baseStyle: {
-    display: "inline-block"
-  },
-  attrs: function attrs(props) {
-    return {
-      className: (0, _utils.cx)("chakra-alert__description", props.className)
-    };
-  }
+  var _className = (0, _utils.cx)("chakra-alert__description", className);
+
+  var styles = (0, _system.useStyles)();
+  return /*#__PURE__*/React.createElement(_system.chakra.div, _extends({
+    display: "inline-block",
+    ref: ref,
+    className: _className
+  }, rest, {
+    __css: styles.description
+  }));
 });
 exports.AlertDescription = AlertDescription;
-var StyledWrapper = (0, _system.chakra)("span", {
-  themeKey: "Alert.Icon"
-});
 
@@ -145,20 +138,17 @@ /**
   var _useAlertContext = useAlertContext(),
-      status = _useAlertContext.status,
-      variant = _useAlertContext.variant;
+      status = _useAlertContext.status;
 
-  var _ALERT_STATUSES$statu = ALERT_STATUSES[status],
-      icon = _ALERT_STATUSES$statu.icon,
-      colorScheme = _ALERT_STATUSES$statu.colorScheme;
-  var Icon = icon;
+  var Comp = STATUSES[status].icon;
 
-  var _className = (0, _utils.cx)("chakra-alert__icon");
+  var _className = (0, _utils.cx)("chakra-alert__icon", props.className);
 
-  return /*#__PURE__*/React.createElement(StyledWrapper, _extends({
-    display: "inherit",
-    variant: variant,
-    colorScheme: colorScheme
+  var styles = (0, _system.useStyles)();
+  return /*#__PURE__*/React.createElement(_system.chakra.span, _extends({
+    display: "inherit"
   }, props, {
-    className: _className
-  }), /*#__PURE__*/React.createElement(Icon, {
-    boxSize: "100%"
+    className: _className,
+    __css: styles.icon
+  }), /*#__PURE__*/React.createElement(Comp, {
+    w: "100%",
+    h: "100%"
   }));
@@ -165,0 +155,0 @@ };

dist/esm/alert.js

@@ -6,6 +6,6 @@ function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 import { CheckIcon, InfoIcon, WarningIcon } from "./alert-icons";
-import { chakra, useThemeDefaultProps } from "@chakra-ui/system";
+import { chakra, StylesProvider, useStyles, useStyleConfig } from "@chakra-ui/system";
 import { createContext, cx } from "@chakra-ui/utils";
 import * as React from "react";
-export var ALERT_STATUSES = {
+export var STATUSES = {
   info: {
@@ -29,6 +29,6 @@ icon: InfoIcon,
 var [AlertContextProvider, useAlertContext] = createContext({
-  name: "AlertContext"
+  name: "AlertContext",
+  errorMessage: "useAlertContext: `context` is undefined. Seems you forgot to wrap alert components in `<Alert />`"
 });
 var StyledAlert = chakra("div", {
-  themeKey: "Alert.Root",
   baseStyle: {
@@ -40,5 +40,2 @@ width: "100%",
     overflow: "hidden"
-  },
-  attrs: {
-    role: "alert"
   }
@@ -54,18 +51,14 @@ });
 export var Alert = /*#__PURE__*/React.forwardRef(function Alert(props, ref) {
-  var defaults = useThemeDefaultProps("Alert");
-
   var {
     status = "info",
-    variant = defaults == null ? void 0 : defaults.variant,
     className
   } = props,
-      rest = _objectWithoutPropertiesLoose(props, ["status", "variant", "className"]);
+      rest = _objectWithoutPropertiesLoose(props, ["status", "className"]);
 
   var {
     colorScheme
-  } = ALERT_STATUSES[status];
-  var context = {
-    status,
-    variant: variant
-  };
+  } = STATUSES[status];
+  var styles = useStyleConfig("Alert", _extends({}, props, {
+    colorScheme
+  }));
 
@@ -75,39 +68,48 @@ var _className = cx("chakra-alert", className);
   return /*#__PURE__*/React.createElement(AlertContextProvider, {
-    value: context
+    value: {
+      status
+    }
+  }, /*#__PURE__*/React.createElement(StylesProvider, {
+    value: styles
   }, /*#__PURE__*/React.createElement(StyledAlert, _extends({
+    role: "alert",
     ref: ref,
-    variant: variant,
-    colorScheme: colorScheme,
     className: _className
-  }, rest)));
+  }, rest, {
+    __css: styles.container
+  }))));
 });
-export var AlertTitle = chakra("div", {
-  themeKey: "Alert.Title",
-  baseStyle: {
-    fontWeight: "bold",
-    lineHeight: "normal"
-  },
-  attrs: props => ({
-    className: cx("chakra-alert__title", props.className)
-  })
+export var AlertTitle = /*#__PURE__*/React.forwardRef(function AlertTitle(props, ref) {
+  var {
+    className
+  } = props,
+      rest = _objectWithoutPropertiesLoose(props, ["className"]);
+
+  var _className = cx("chakra-alert__title", className);
+
+  var styles = useStyles();
+  return /*#__PURE__*/React.createElement(chakra.div, _extends({
+    ref: ref,
+    className: _className
+  }, rest, {
+    __css: styles.title
+  }));
 });
-/**
- * AlertDescription
- *
- * The description of the alert to be announced by screen
- * readers.
- */
+export var AlertDescription = /*#__PURE__*/React.forwardRef(function AlertDescription(props, ref) {
+  var {
+    className
+  } = props,
+      rest = _objectWithoutPropertiesLoose(props, ["className"]);
 
-export var AlertDescription = chakra("div", {
-  themeKey: "Alert.Description",
-  baseStyle: {
-    display: "inline-block"
-  },
-  attrs: props => ({
-    className: cx("chakra-alert__description", props.className)
-  })
+  var _className = cx("chakra-alert__description", className);
+
+  var styles = useStyles();
+  return /*#__PURE__*/React.createElement(chakra.div, _extends({
+    display: "inline-block",
+    ref: ref,
+    className: _className
+  }, rest, {
+    __css: styles.description
+  }));
 });
-var StyledWrapper = chakra("span", {
-  themeKey: "Alert.Icon"
-});
 
@@ -121,23 +123,21 @@ /**
   var {
-    status,
-    variant
+    status
   } = useAlertContext();
   var {
-    icon,
-    colorScheme
-  } = ALERT_STATUSES[status];
-  var Icon = icon;
+    icon: Comp
+  } = STATUSES[status];
 
-  var _className = cx("chakra-alert__icon");
+  var _className = cx("chakra-alert__icon", props.className);
 
-  return /*#__PURE__*/React.createElement(StyledWrapper, _extends({
-    display: "inherit",
-    variant: variant,
-    colorScheme: colorScheme
+  var styles = useStyles();
+  return /*#__PURE__*/React.createElement(chakra.span, _extends({
+    display: "inherit"
   }, props, {
-    className: _className
-  }), /*#__PURE__*/React.createElement(Icon, {
-    boxSize: "100%"
+    className: _className,
+    __css: styles.icon
+  }), /*#__PURE__*/React.createElement(Comp, {
+    w: "100%",
+    h: "100%"
   }));
 };
 //# sourceMappingURL=alert.js.map

package.json

 {
   "name": "@chakra-ui/alert",
-  "version": "1.0.0-next.4",
+  "version": "1.0.0-next.5",
   "description": "A React component used to alert users of a particular screen area that needs user action",
@@ -50,13 +50,13 @@ "keywords": [
   "dependencies": {
-    "@chakra-ui/icon": "^1.0.0-next.4",
-    "@chakra-ui/utils": "^1.0.0-next.4"
+    "@chakra-ui/icon": "^1.0.0-next.5",
+    "@chakra-ui/utils": "^1.0.0-next.5"
   },
   "devDependencies": {
-    "@chakra-ui/system": "^1.0.0-next.4"
+    "@chakra-ui/system": "^1.0.0-next.5"
   },
   "peerDependencies": {
-    "@chakra-ui/system": ">0.8",
+    "@chakra-ui/system": "^1.0.0-next.4",
     "react": "16.x"
   },
-  "gitHead": "cdd5eac1db90ba33a07c009fb8dbcc4453d6ec01"
+  "gitHead": "24eec5d796d81b6fafbcfa7231fb2cb15e6d5a29"
 }

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

218317

increased by33.17%

Lines of code

1145

increased by17.92%

Dependency changes

• + Added@chakra-ui/color-mode@1.4.8(transitive)

• + Added@chakra-ui/hooks@1.9.1(transitive)

• + Added@chakra-ui/react-env@1.1.6(transitive)

• + Added@chakra-ui/react-utils@1.2.3(transitive)

• + Added@chakra-ui/styled-system@1.19.0(transitive)

• + Added@chakra-ui/system@1.12.1(transitive)

• + Addedcompute-scroll-into-view@1.0.14(transitive)

• + Addedcopy-to-clipboard@3.3.1(transitive)

• + Addedcsstype@3.0.9(transitive)

• + Addedreact-fast-compare@3.2.0(transitive)

• + Addedtoggle-selection@1.0.6(transitive)

• + Addedtslib@2.7.0(transitive)

• - Removed@chakra-ui/anatomy@2.2.2(transitive)

• - Removed@chakra-ui/color-mode@2.2.0(transitive)

• - Removed@chakra-ui/object-utils@2.1.0(transitive)

• - Removed@chakra-ui/react-use-safe-layout-effect@2.1.0(transitive)

• - Removed@chakra-ui/react-utils@2.0.12(transitive)

• - Removed@chakra-ui/shared-utils@2.0.5(transitive)

• - Removed@chakra-ui/styled-system@2.9.2(transitive)

• - Removed@chakra-ui/system@2.6.2(transitive)

• - Removed@chakra-ui/theme@3.3.1(transitive)

• - Removed@chakra-ui/theme-tools@2.1.2(transitive)

• - Removed@chakra-ui/theme-utils@2.0.21(transitive)

• - Removed@chakra-ui/utils@2.0.15(transitive)

• - Removed@types/lodash.mergewith@4.6.7(transitive)

• - Removedcolor2k@2.0.3(transitive)

• - Removedcsstype@3.1.3(transitive)

• - Removedframesync@6.1.2(transitive)

• - Removedreact@18.3.1(transitive)

• - Removedreact-fast-compare@3.2.2(transitive)

• - Removedtslib@2.4.0(transitive)

• Updated@chakra-ui/icon@^1.0.0-next.5

• Updated@chakra-ui/utils@^1.0.0-next.5