@highlight-ui/alert - npm Package Compare versions

Comparing version 5.1.2 to 5.1.3

dist/cjs/index.js

@@ -74,3 +74,3 @@ 'use strict';
 var styles$3 = {
-  "actionsContainer": "Actions-module__Ds9CWwoq__v5-1-2"
+  "actionsContainer": "Actions-module__Ds9CWwoq__v5-1-3"
 };
@@ -100,13 +100,13 @@
 var styles$2 = {
-  "alertContainer": "Alert-module__3OKHdEQO__v5-1-2",
-  "alertInner": "Alert-module__3Qwn6Uqc__v5-1-2",
-  "alertInner-highlight": "Alert-module__34qSsJ1O__v5-1-2",
-  "alertInner-success": "Alert-module__3CyiOT7l__v5-1-2",
-  "alertInner-warning": "Alert-module__eRD2yA1G__v5-1-2",
-  "alertInner-critical": "Alert-module__2YM_PdJx__v5-1-2",
-  "alertContent": "Alert-module__9Wb2FGGa__v5-1-2",
-  "icon": "Alert-module__3yvNKTSf__v5-1-2",
-  "alertBodyContainer": "Alert-module__2RQD-z4F__v5-1-2",
-  "alertFullWidth": "Alert-module__o_Ml_MUW__v5-1-2",
-  "alertCloseButton": "Alert-module__bTXZ4-X9__v5-1-2"
+  "alertContainer": "Alert-module__3OKHdEQO__v5-1-3",
+  "alertInner": "Alert-module__3Qwn6Uqc__v5-1-3",
+  "alertInner-highlight": "Alert-module__34qSsJ1O__v5-1-3",
+  "alertInner-success": "Alert-module__3CyiOT7l__v5-1-3",
+  "alertInner-warning": "Alert-module__eRD2yA1G__v5-1-3",
+  "alertInner-critical": "Alert-module__2YM_PdJx__v5-1-3",
+  "alertContent": "Alert-module__9Wb2FGGa__v5-1-3",
+  "icon": "Alert-module__3yvNKTSf__v5-1-3",
+  "alertBodyContainer": "Alert-module__2RQD-z4F__v5-1-3",
+  "alertFullWidth": "Alert-module__o_Ml_MUW__v5-1-3",
+  "alertCloseButton": "Alert-module__bTXZ4-X9__v5-1-3"
 };
@@ -167,3 +167,3 @@
 var styles$1 = {
-  "popover": "InlineAlertPopover-module__23RSmjlR__v5-1-2"
+  "popover": "InlineAlertPopover-module__23RSmjlR__v5-1-3"
 };
@@ -188,6 +188,6 @@
 var styles = {
-  "alertContainer": "InlineAlert-module__3yudcjyR__v5-1-2",
-  "horizontalStack": "InlineAlert-module__pudaEvUf__v5-1-2",
-  "cursorPointer": "InlineAlert-module__3y7JOPls__v5-1-2",
-  "supportText": "InlineAlert-module__haG6uylw__v5-1-2"
+  "alertContainer": "InlineAlert-module__3yudcjyR__v5-1-3",
+  "horizontalStack": "InlineAlert-module__pudaEvUf__v5-1-3",
+  "cursorPointer": "InlineAlert-module__3y7JOPls__v5-1-3",
+  "supportText": "InlineAlert-module__haG6uylw__v5-1-3"
 };
@@ -194,0 +194,0 @@

dist/esm/index.js

@@ -1,3 +0,245 @@
-export { default as Alert } from './src/Alert.js';
-export { default as InlineAlert } from './src/inline-alert/InlineAlert.js';
+import React, { useState } from 'react';
+import classnames from 'classnames';
+import { parseMetadata } from '@highlight-ui/utils-commons';
+import { Icon } from '@highlight-ui/icon';
+import { IconButton } from '@highlight-ui/button';
+import { Typography } from '@highlight-ui/typography';
+import { useClickOutside, useForkRef, useAutoPositioner } from '@highlight-ui/utils-hooks';
+import { GroupedPortal } from '@highlight-ui/utils-portal-manager';
+/*! *****************************************************************************
+Copyright (c) Microsoft Corporation.
+
+Permission to use, copy, modify, and/or distribute this software for any
+purpose with or without fee is hereby granted.
+
+THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
+REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
+AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
+INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
+LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
+OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
+PERFORMANCE OF THIS SOFTWARE.
+***************************************************************************** */
+
+var __assign = function () {
+  __assign = Object.assign || function __assign(t) {
+    for (var s, i = 1, n = arguments.length; i < n; i++) {
+      s = arguments[i];
+
+      for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
+    }
+
+    return t;
+  };
+
+  return __assign.apply(this, arguments);
+};
+
+function __rest(s, e) {
+  var t = {};
+
+  for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) t[p] = s[p];
+
+  if (s != null && typeof Object.getOwnPropertySymbols === "function") for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+    if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i])) t[p[i]] = s[p[i]];
+  }
+  return t;
+}
+
+var styles$3 = {
+  "actionsContainer": "Actions-module__Ds9CWwoq__v5-1-3"
+};
+
+function ActionsWithRef(_a, ref) {
+  var children = _a.children;
+  return /*#__PURE__*/React.createElement("div", {
+    className: styles$3.actionsContainer,
+    ref: ref
+  }, children);
+}
+
+ActionsWithRef.displayName = 'Actions';
+var Actions = /*#__PURE__*/React.forwardRef(ActionsWithRef);
+var statusToIconNameMap = {
+  highlight: 'info-circle',
+  success: 'check-circle',
+  warning: 'exclamation-triangle',
+  critical: 'exclamation-circle'
+};
+
+var statusToIconName = function (status) {
+  return statusToIconNameMap[status];
+};
+
+var styles$2 = {
+  "alertContainer": "Alert-module__3OKHdEQO__v5-1-3",
+  "alertInner": "Alert-module__3Qwn6Uqc__v5-1-3",
+  "alertInner-highlight": "Alert-module__34qSsJ1O__v5-1-3",
+  "alertInner-success": "Alert-module__3CyiOT7l__v5-1-3",
+  "alertInner-warning": "Alert-module__eRD2yA1G__v5-1-3",
+  "alertInner-critical": "Alert-module__2YM_PdJx__v5-1-3",
+  "alertContent": "Alert-module__9Wb2FGGa__v5-1-3",
+  "icon": "Alert-module__3yvNKTSf__v5-1-3",
+  "alertBodyContainer": "Alert-module__2RQD-z4F__v5-1-3",
+  "alertFullWidth": "Alert-module__o_Ml_MUW__v5-1-3",
+  "alertCloseButton": "Alert-module__bTXZ4-X9__v5-1-3"
+};
+
+function AlertWithRef(_a, ref) {
+  var _b, _c;
+
+  var actions = _a.actions,
+      children = _a.children,
+      className = _a.className,
+      _d = _a.enableCloseButton,
+      enableCloseButton = _d === void 0 ? false : _d,
+      _e = _a.fullWidth,
+      fullWidth = _e === void 0 ? false : _e,
+      iconColor = _a.iconColor,
+      _f = _a.iconFamily,
+      iconFamily = _f === void 0 ? 'solid' : _f,
+      iconName = _a.iconName,
+      _g = _a.iconSize,
+      iconSize = _g === void 0 ? 16 : _g,
+      iconClassName = _a.iconClassName,
+      metadata = _a.metadata,
+      onClickCloseButton = _a.onClickCloseButton,
+      status = _a.status,
+      remainingProps = __rest(_a, ["actions", "children", "className", "enableCloseButton", "fullWidth", "iconColor", "iconFamily", "iconName", "iconSize", "iconClassName", "metadata", "onClickCloseButton", "status"]);
+
+  var statusIconColor = "icon-" + status;
+  var statusIconName = statusToIconName(status);
+  return /*#__PURE__*/React.createElement("div", __assign({}, remainingProps, parseMetadata(metadata), {
+    className: classnames(styles$2.alertContainer, className),
+    ref: ref
+  }), /*#__PURE__*/React.createElement("div", {
+    className: classnames(styles$2.alertInner, styles$2["alertInner-" + status], (_b = {}, _b[styles$2.alertFullWidth] = fullWidth, _b))
+  }, /*#__PURE__*/React.createElement("div", {
+    className: styles$2.alertContent
+  }, /*#__PURE__*/React.createElement("span", {
+    className: classnames(styles$2.icon, iconClassName)
+  }, /*#__PURE__*/React.createElement(Icon, {
+    name: iconName !== null && iconName !== void 0 ? iconName : statusIconName,
+    color: iconColor !== null && iconColor !== void 0 ? iconColor : statusIconColor,
+    size: iconSize,
+    type: iconFamily
+  })), children && /*#__PURE__*/React.createElement(Typography, {
+    variant: "body-1",
+    className: classnames(styles$2.alertBodyContainer, (_c = {}, _c[styles$2.alertFullWidth] = fullWidth, _c))
+  }, children), enableCloseButton && /*#__PURE__*/React.createElement(IconButton, {
+    className: styles$2.alertCloseButton,
+    onClick: onClickCloseButton,
+    type: "button",
+    icon: "times",
+    ariaLabel: "close alert"
+  })), actions && /*#__PURE__*/React.createElement(Actions, null, actions)));
+}
+
+AlertWithRef.displayName = 'Alert';
+var Alert = /*#__PURE__*/React.forwardRef(AlertWithRef);
+var styles$1 = {
+  "popover": "InlineAlertPopover-module__23RSmjlR__v5-1-3"
+};
+
+function InlineAlertPopover(_a, ref) {
+  var children = _a.children,
+      style = _a.style,
+      closeCallback = _a.closeCallback,
+      restProps = __rest(_a, ["children", "style", "closeCallback"]);
+
+  var onClickOutsideRef = useClickOutside(closeCallback);
+  var listRef = useForkRef([ref, onClickOutsideRef]);
+  return /*#__PURE__*/React.createElement("div", __assign({
+    ref: listRef,
+    style: style,
+    className: styles$1.popover
+  }, restProps), children);
+}
+
+var InlineAlertPopover$1 = /*#__PURE__*/React.forwardRef(InlineAlertPopover);
+var styles = {
+  "alertContainer": "InlineAlert-module__3yudcjyR__v5-1-3",
+  "horizontalStack": "InlineAlert-module__pudaEvUf__v5-1-3",
+  "cursorPointer": "InlineAlert-module__3y7JOPls__v5-1-3",
+  "supportText": "InlineAlert-module__haG6uylw__v5-1-3"
+};
+
+var normalizeStatus = function (status) {
+  switch (status) {
+    case 'info':
+      return 'highlight';
+
+    case 'danger':
+      return 'critical';
+
+    default:
+      return status;
+  }
+};
+
+function InlineAlertWithRef(_a, ref) {
+  var _b;
+
+  var children = _a.children,
+      metadata = _a.metadata,
+      status = _a.status,
+      iconColor = _a.iconColor,
+      iconFamily = _a.iconFamily,
+      iconName = _a.iconName,
+      iconSize = _a.iconSize,
+      iconClassName = _a.iconClassName,
+      popoverContent = _a.popoverContent,
+      _c = _a.popoverPlacement,
+      popoverPlacement = _c === void 0 ? 'bottom-start' : _c;
+  var normalizedStatus = normalizeStatus(status);
+  var statusIconColor = "icon-" + normalizedStatus;
+  var statusIconName = statusToIconName(normalizedStatus);
+
+  var _d = useState(false),
+      isPopoverVisible = _d[0],
+      setPopoverVisibility = _d[1];
+
+  var _e = useAutoPositioner({
+    placement: popoverPlacement
+  }),
+      setReferenceElement = _e.setReferenceElement,
+      setPopperElement = _e.setPopperElement,
+      popperStyles = _e.styles.popper,
+      attributes = _e.attributes;
+
+  return /*#__PURE__*/React.createElement("div", __assign({
+    ref: ref,
+    className: styles.alertContainer
+  }, parseMetadata(metadata)), /*#__PURE__*/React.createElement("div", {
+    ref: setReferenceElement,
+    className: classnames(styles.horizontalStack, (_b = {}, _b[styles.cursorPointer] = popoverContent, _b)),
+    onClick: function () {
+      if (isPopoverVisible) {
+        return;
+      }
+
+      setPopoverVisibility(true);
+    }
+  }, /*#__PURE__*/React.createElement("span", {
+    className: iconClassName
+  }, /*#__PURE__*/React.createElement(Icon, {
+    name: iconName !== null && iconName !== void 0 ? iconName : statusIconName,
+    color: iconColor !== null && iconColor !== void 0 ? iconColor : statusIconColor,
+    size: iconSize !== null && iconSize !== void 0 ? iconSize : 16,
+    type: iconFamily !== null && iconFamily !== void 0 ? iconFamily : 'solid'
+  })), children && /*#__PURE__*/React.createElement(Typography, {
+    variant: "body-1",
+    className: classnames(styles.supportText)
+  }, children)), popoverContent && isPopoverVisible && /*#__PURE__*/React.createElement(GroupedPortal, null, /*#__PURE__*/React.createElement(InlineAlertPopover$1, __assign({
+    closeCallback: function () {
+      setPopoverVisibility(false);
+    },
+    ref: setPopperElement,
+    style: popperStyles
+  }, attributes.popper), popoverContent)));
+}
+
+InlineAlertWithRef.displayName = 'InlineAlert';
+var InlineAlert = /*#__PURE__*/React.forwardRef(InlineAlertWithRef);
+export { Alert, InlineAlert };
 //# sourceMappingURL=index.js.map

package.json

 {
   "name": "@highlight-ui/alert",
-  "version": "5.1.2",
+  "version": "5.1.3",
   "author": "PPU",
@@ -31,3 +31,3 @@ "main": "dist/cjs/index.js",
     "@highlight-ui/configs-base-tsconfig": "^3.0.0",
-    "@highlight-ui/configs-scripts": "^3.0.1",
+    "@highlight-ui/configs-scripts": "^3.0.2",
     "@highlight-ui/theme": "^9.0.0",
@@ -44,8 +44,8 @@ "@highlight-ui/tokens": "^1.0.0",
   "dependencies": {
-    "@highlight-ui/button": "^11.1.2",
-    "@highlight-ui/icon": "^4.0.3",
+    "@highlight-ui/button": "^11.1.3",
+    "@highlight-ui/icon": "^4.0.4",
     "@highlight-ui/typography": "^4.0.2",
-    "@highlight-ui/utils-commons": "^2.0.2",
-    "@highlight-ui/utils-hooks": "^3.0.2",
-    "@highlight-ui/utils-portal-manager": "^3.0.3"
+    "@highlight-ui/utils-commons": "^2.0.3",
+    "@highlight-ui/utils-hooks": "^3.0.3",
+    "@highlight-ui/utils-portal-manager": "^3.0.4"
   },
@@ -56,3 +56,3 @@ "peerDependencies": {
   },
-  "gitHead": "74898119989d62b9808c3aa67448f8ec487c6d25"
+  "gitHead": "06cfa844ed2c2451503171e1117652cec7fc243a"
 }

No alert changes

Improved metrics

Total package byte prevSize

108383

increased by11.96%

Worsened metrics

Number of package files

25

decreased by-46.81%

Lines of code

938

decreased by-4.38%

Dependency changes

• Updated@highlight-ui/button@^11.1.3

• Updated@highlight-ui/icon@^4.0.4

• Updated@highlight-ui/utils-commons@^2.0.3

• Updated@highlight-ui/utils-hooks@^3.0.3

• Updated@highlight-ui/utils-portal-manager@^3.0.4