@hyphen/hyphen-components 6.12.0 → 6.14.0

package/dist/hyphen-components.esm.js

@@ -1,6 +1,6 @@
 'use client';
 import * as React from 'react';
-import React__default, { forwardRef, Children, createElement, cloneElement, useLayoutEffect, useEffect, createContext, useState, useCallback, useContext, useMemo } from 'react';
+import React__default, { forwardRef, Children, createElement, cloneElement, memo, useCallback, useMemo, useLayoutEffect, useEffect, createContext, useState, useContext } from 'react';
 import classNames from 'classnames';
 import icons from '@hyphen/hyphen-design-tokens/build/assets/icons/react';
 import * as AspectRatioPrimitive from '@radix-ui/react-aspect-ratio';
@@ -528,7 +528,6 @@ var Icon = /*#__PURE__*/forwardRef(function (_ref, ref) {
 
 var styles$z = {"alert":"Alert-module_alert__zP4AL","close-icon":"Alert-module_close-icon__zs4Xk","alert-heading":"Alert-module_alert-heading__VguTk","alert__default":"Alert-module_alert__default__-pcBw","alert__info":"Alert-module_alert__info__UZeOd","alert__success":"Alert-module_alert__success__o2IHF","alert__warning":"Alert-module_alert__warning__lzTY-","alert__danger":"Alert-module_alert__danger__M-XFh","alert__icon__default":"Alert-module_alert__icon__default__cCx9C","alert__icon__info":"Alert-module_alert__icon__info__2W0Bi","alert__icon__success":"Alert-module_alert__icon__success__NBCDO","alert__icon__warning":"Alert-module_alert__icon__warning__nY4hy","alert__icon__danger":"Alert-module_alert__icon__danger__NcOrf"};
 
-// eslint-disable-next-line import/prefer-default-export
 var ALERT_ICONS_MAP = {
   "default": {
     icon: 'c-warning'
@@ -547,18 +546,15 @@ var ALERT_ICONS_MAP = {
   }
 };
 
-var _excluded$O = ["className", "closeText", "hasIcon", "isCompact", "isClosable", "message", "onClose", "render", "title", "variant"];
-var Alert = function Alert(_ref) {
-  var _ref$className = _ref.className,
+var _excluded$O = ["children", "className", "hasIcon", "isCompact", "message", "onClose", "render", "title", "variant"];
+var AlertComponent = function AlertComponent(_ref) {
+  var children = _ref.children,
+    _ref$className = _ref.className,
     className = _ref$className === void 0 ? '' : _ref$className,
-    _ref$closeText = _ref.closeText,
-    closeText = _ref$closeText === void 0 ? '' : _ref$closeText,
     _ref$hasIcon = _ref.hasIcon,
     hasIcon = _ref$hasIcon === void 0 ? false : _ref$hasIcon,
     _ref$isCompact = _ref.isCompact,
     isCompact = _ref$isCompact === void 0 ? false : _ref$isCompact,
-    _ref$isClosable = _ref.isClosable,
-    isClosable = _ref$isClosable === void 0 ? false : _ref$isClosable,
     _ref$message = _ref.message,
     message = _ref$message === void 0 ? '' : _ref$message,
     _ref$onClose = _ref.onClose,
@@ -570,11 +566,18 @@ var Alert = function Alert(_ref) {
     _ref$variant = _ref.variant,
     variant = _ref$variant === void 0 ? 'default' : _ref$variant,
     restProps = _objectWithoutPropertiesLoose(_ref, _excluded$O);
-  var handleClose = function handleClose(event) {
+  var handleClose = useCallback(function (event) {
     if (!onClose) return;
     onClose(event);
-  };
-  var renderAlertIcon = function renderAlertIcon() {
+  }, [onClose]);
+  var handleCloseKeyPress = useCallback(function (event) {
+    if (event.keyCode === 13) handleClose(event);
+  }, [handleClose]);
+  var alertContainerClasses = useMemo(function () {
+    return classNames(styles$z["alert__" + variant], styles$z.alert, className);
+  }, [variant, className]);
+  var alertIcon = useMemo(function () {
+    if (!hasIcon) return null;
     return React__default.createElement(Box, {
       fontSize: "md",
       className: styles$z["alert__icon__" + variant]
@@ -582,11 +585,9 @@ var Alert = function Alert(_ref) {
       name: ALERT_ICONS_MAP[variant].icon,
       "data-testid": "alert-icon-" + variant + "-test-id"
     }));
-  };
-  var renderCloseIcon = function renderCloseIcon() {
-    var handleCloseKeyPress = function handleCloseKeyPress(event) {
-      if (event.keyCode === 13) handleClose(event);
-    };
+  }, [hasIcon, variant]);
+  var closeIcon = useMemo(function () {
+    if (!onClose) return null;
     return React__default.createElement(Box, {
       margin: "0 0 0 auto",
       color: "secondary",
@@ -596,31 +597,37 @@ var Alert = function Alert(_ref) {
       onClick: handleClose,
       onKeyUp: handleCloseKeyPress,
       "aria-label": "dismiss"
-    }, closeText || React__default.createElement(Icon, {
+    }, React__default.createElement(Icon, {
       name: "remove",
       "data-testid": "alert-close-icon-test-id"
     })));
-  };
-  var alertContainerClasses = classNames(styles$z["alert__" + variant], styles$z.alert, className);
+  }, [onClose, handleClose, handleCloseKeyPress]);
+  var content = useMemo(function () {
+    if (render) {
+      return render();
+    }
+    return React__default.createElement(Box, {
+      display: "block",
+      childGap: message && title ? '2xs' : undefined
+    }, title && React__default.createElement(Box, {
+      as: "h4",
+      fontSize: "sm",
+      fontWeight: "semibold",
+      className: styles$z['alert-heading']
+    }, title), children != null ? children : message && (typeof message === 'string' ? React__default.createElement("p", null, message) : message));
+  }, [render, message, title, children]);
   return React__default.createElement(Box, _extends({
     alignItems: "flex-start",
     gap: "md",
     className: alertContainerClasses,
     direction: "row",
-    padding: isCompact ? 'xs' : 'md',
+    padding: isCompact ? 'md' : '2xl',
     radius: "md",
     role: "alert",
     fontSize: "sm"
-  }, restProps), hasIcon && renderAlertIcon(), React__default.createElement("div", null, render ? render() : React__default.createElement(Box, {
-    display: "block",
-    childGap: message && title ? '2xs' : undefined
-  }, title && React__default.createElement(Box, {
-    as: "h4",
-    fontSize: "sm",
-    fontWeight: "semibold",
-    className: styles$z['alert-heading']
-  }, title), message && (typeof message === 'string' ? React__default.createElement("p", null, message) : message))), isClosable && renderCloseIcon());
+  }, restProps), alertIcon, React__default.createElement("div", null, content), closeIcon);
 };
+var Alert = /*#__PURE__*/memo(AlertComponent);
 
 var AspectRatio = AspectRatioPrimitive.Root;