@hyphen/hyphen-components 6.12.0 → 6.14.0

package/dist/components/Alert/Alert.d.ts

@@ -1,29 +1,20 @@
-import { FC, ReactNode, MouseEvent, KeyboardEvent } from 'react';
+import React, { ReactNode, MouseEvent, KeyboardEvent } from 'react';
 import { AlertVariant } from './Alert.types';
 export interface AlertProps {
     /**
      * Custom class to apply to the alert.
      */
     className?: string;
-    /**
-     * Custom text to use as a close button.
-     */
-    closeText?: string;
     /**
      * Whether the alert as an icon that corresponds to its variant (Success, warning, etc.).
      */
     hasIcon?: boolean;
-    /**
-     * Whether the alert can be closed by the user. If `true` it will render
-     * the 'close' icon on the right hand side of the alert.
-     */
-    isClosable?: boolean;
     /**
      * Renders a version of the alert with smaller padding.
      */
     isCompact?: boolean;
     /**
-     * The text message or ReactNode to be rendered in the alert.
+     * @deprecated Use children instead. The text message or ReactNode to be rendered in the alert.
      */
     message?: string | ReactNode;
     /**
@@ -48,4 +39,4 @@ export interface AlertProps {
      */
     [x: string]: any;
 }
-export declare const Alert: FC<AlertProps>;
+export declare const Alert: React.NamedExoticComponent<AlertProps>;

package/dist/components/Alert/Alert.stories.d.ts

@@ -1,8 +1,12 @@
 import { Alert } from './Alert';
-import type { Meta } from '@storybook/react-vite';
+import type { Meta, StoryObj } from '@storybook/react-vite';
 import React from 'react';
 declare const meta: Meta<typeof Alert>;
 export default meta;
-export declare const Overview: () => React.JSX.Element;
-export declare const Variants: () => React.JSX.Element;
-export declare const Closable: () => React.JSX.Element;
+type Story = StoryObj<typeof Alert>;
+export declare const Overview: Story;
+export declare const Compact: Story;
+export declare const WithCustomContent: Story;
+export declare const Variants: Story;
+export declare const ClosableAlert: () => React.JSX.Element;
+export declare const Closable: Story;

package/dist/components/Badge/Badge.stories.d.ts

@@ -1,8 +1,8 @@
-import { Meta } from '@storybook/react-vite';
 import { Badge } from './Badge';
-import React from 'react';
+import type { Meta, StoryObj } from '@storybook/react-vite';
 declare const meta: Meta<typeof Badge>;
 export default meta;
-export declare const Overview: () => React.JSX.Element;
-export declare const Variants: () => React.JSX.Element;
-export declare const Sizes: () => React.JSX.Element;
+type Story = StoryObj<typeof Badge>;
+export declare const Overview: Story;
+export declare const Variants: Story;
+export declare const Sizes: Story;

package/dist/components/Button/Button.stories.d.ts

@@ -1,16 +1,16 @@
-import React from 'react';
 import { Button } from './Button';
-import type { Meta } from '@storybook/react-vite';
+import type { Meta, StoryObj } from '@storybook/react-vite';
 declare const meta: Meta<typeof Button>;
 export default meta;
-export declare const Default: () => React.JSX.Element;
-export declare const AsChild: () => React.JSX.Element;
-export declare const Variants: () => React.JSX.Element;
-export declare const Sizes: () => React.JSX.Element;
-export declare const FullWidth: () => React.JSX.Element;
-export declare const Icons: () => React.JSX.Element;
-export declare const IconButton: () => React.JSX.Element;
-export declare const Loading: () => React.JSX.Element;
-export declare const Disabled: () => React.JSX.Element;
-export declare const Shadow: () => React.JSX.Element;
-export declare const InlineLink: () => React.JSX.Element;
+type Story = StoryObj<typeof Button>;
+export declare const Default: Story;
+export declare const AsChild: Story;
+export declare const Variants: Story;
+export declare const Sizes: Story;
+export declare const FullWidth: Story;
+export declare const Icons: Story;
+export declare const IconButton: Story;
+export declare const Loading: Story;
+export declare const Disabled: Story;
+export declare const Shadow: Story;
+export declare const InlineLink: Story;

package/dist/hyphen-components.cjs.development.js

@@ -557,7 +557,6 @@ var Icon = /*#__PURE__*/React.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'
@@ -576,18 +575,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,
@@ -599,11 +595,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 = React.useCallback(function (event) {
     if (!onClose) return;
     onClose(event);
-  };
-  var renderAlertIcon = function renderAlertIcon() {
+  }, [onClose]);
+  var handleCloseKeyPress = React.useCallback(function (event) {
+    if (event.keyCode === 13) handleClose(event);
+  }, [handleClose]);
+  var alertContainerClasses = React.useMemo(function () {
+    return classNames(styles$z["alert__" + variant], styles$z.alert, className);
+  }, [variant, className]);
+  var alertIcon = React.useMemo(function () {
+    if (!hasIcon) return null;
     return React.createElement(Box, {
       fontSize: "md",
       className: styles$z["alert__icon__" + variant]
@@ -611,11 +614,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 = React.useMemo(function () {
+    if (!onClose) return null;
     return React.createElement(Box, {
       margin: "0 0 0 auto",
       color: "secondary",
@@ -625,31 +626,37 @@ var Alert = function Alert(_ref) {
       onClick: handleClose,
       onKeyUp: handleCloseKeyPress,
       "aria-label": "dismiss"
-    }, closeText || React.createElement(Icon, {
+    }, React.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 = React.useMemo(function () {
+    if (render) {
+      return render();
+    }
+    return React.createElement(Box, {
+      display: "block",
+      childGap: message && title ? '2xs' : undefined
+    }, title && React.createElement(Box, {
+      as: "h4",
+      fontSize: "sm",
+      fontWeight: "semibold",
+      className: styles$z['alert-heading']
+    }, title), children != null ? children : message && (typeof message === 'string' ? React.createElement("p", null, message) : message));
+  }, [render, message, title, children]);
   return React.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.createElement("div", null, render ? render() : React.createElement(Box, {
-    display: "block",
-    childGap: message && title ? '2xs' : undefined
-  }, title && React.createElement(Box, {
-    as: "h4",
-    fontSize: "sm",
-    fontWeight: "semibold",
-    className: styles$z['alert-heading']
-  }, title), message && (typeof message === 'string' ? React.createElement("p", null, message) : message))), isClosable && renderCloseIcon());
+  }, restProps), alertIcon, React.createElement("div", null, content), closeIcon);
 };
+var Alert = /*#__PURE__*/React.memo(AlertComponent);
 
 var AspectRatio = AspectRatioPrimitive__namespace.Root;