@allxsmith/bestax-bulma 2.3.1 → 2.3.3

package/dist/index.esm.js

@@ -760,12 +760,63 @@ const MessageWithSubComponents = MessageComponent;
 MessageWithSubComponents.Header = MessageHeader;
 MessageWithSubComponents.Body = MessageBody;
 
-const Modal = ({ active = false, onClose, className, textColor, bgColor, modalCardTitle, modalCardFoot, type, children, ...props }) => {
+const ModalBackground = ({ className, ...props }) => {
+    const classes = classNames('modal-background', className);
+    return jsx("div", { className: classes, ...props });
+};
+const ModalContent = ({ className, ...props }) => {
+    const classes = classNames('modal-content', className);
+    return jsx("div", { className: classes, ...props });
+};
+const ModalCardHead = ({ className, ...props }) => {
+    const classes = classNames('modal-card-head', className);
+    return jsx("header", { className: classes, ...props });
+};
+const ModalCardTitle = ({ className, ...props }) => {
+    const classes = classNames('modal-card-title', className);
+    return jsx("p", { className: classes, ...props });
+};
+const ModalCardBody = ({ className, ...props }) => {
+    const classes = classNames('modal-card-body', className);
+    return jsx("section", { className: classes, ...props });
+};
+const ModalCardFoot = ({ className, ...props }) => {
+    const classes = classNames('modal-card-foot', className);
+    return jsx("footer", { className: classes, ...props });
+};
+const ModalCard = ({ className, ...props }) => {
+    const classes = classNames('modal-card', className);
+    return jsx("div", { className: classes, ...props });
+};
+ModalCard.Head = ModalCardHead;
+ModalCard.Title = ModalCardTitle;
+ModalCard.Body = ModalCardBody;
+ModalCard.Foot = ModalCardFoot;
+const ModalClose = ({ className, size = 'large', variant = 'delete', ...props }) => {
+    const classes = classNames(variant === 'delete' ? 'delete' : 'modal-close', variant === 'floating' && size && `is-${size}`, className);
+    return (jsx("button", { className: classes, "aria-label": "close", type: "button", ...props }));
+};
+const ModalRoot = ({ active, isActive, onClose, className, textColor, bgColor, modalCardTitle, modalCardFoot, type, children, ...props }) => {
+    var _a;
     const { bulmaHelperClasses, rest } = useBulmaClasses({
         color: textColor,
         backgroundColor: bgColor,
         ...props,
     });
+    const isModalActive = (_a = active !== null && active !== void 0 ? active : isActive) !== null && _a !== void 0 ? _a : false;
+    const hasCompoundComponents = React.Children.toArray(children).some(child => React.isValidElement(child) &&
+        (child.type === ModalBackground ||
+            child.type === ModalContent ||
+            child.type === ModalCard ||
+            child.type === ModalClose));
+    const bulmaClasses = usePrefixedClassNames('modal', {
+        'is-active': isModalActive,
+    });
+    const deleteClass = usePrefixedClassNames('delete');
+    const modalClasses = classNames(bulmaClasses, bulmaHelperClasses, className);
+    if (hasCompoundComponents) {
+        return (jsx("div", { className: modalClasses, ...rest, "data-testid": "modal", children: children }));
+    }
     let isModalCard;
     if (type === 'card')
         isModalCard = true;
@@ -773,13 +824,13 @@ const Modal = ({ active = false, onClose, className, textColor, bgColor, modalCa
         isModalCard = false;
     else
         isModalCard = !!modalCardTitle || !!modalCardFoot;
-    const bulmaClasses = usePrefixedClassNames('modal', {
-        'is-active': active,
-    });
-    const deleteClass = usePrefixedClassNames('delete');
-    const modalClasses = classNames(bulmaClasses, bulmaHelperClasses, className);
     return (jsxs("div", { className: modalClasses, ...rest, "data-testid": "modal", children: [jsx("div", { className: "modal-background", onClick: onClose, "data-testid": "modal-background" }), isModalCard ? (jsxs("div", { className: "modal-card", children: [modalCardTitle && (jsxs("header", { className: "modal-card-head", children: [jsx("p", { className: "modal-card-title", children: modalCardTitle }), onClose && (jsx("button", { className: deleteClass, "aria-label": "close", onClick: onClose, type: "button", "data-testid": "modal-close" }))] })), jsx("section", { className: "modal-card-body", "data-testid": "modal-body", children: children }), modalCardFoot && (jsx("footer", { className: "modal-card-foot", children: modalCardFoot }))] })) : (jsx("div", { className: "modal-content", "data-testid": "modal-content", children: children })), (!isModalCard || (!modalCardTitle && onClose)) && onClose && (jsx("button", { className: "modal-close is-large", "aria-label": "close", onClick: onClose, type: "button", "data-testid": "modal-close-float" }))] }));
 };
+ModalRoot.Background = ModalBackground;
+ModalRoot.Content = ModalContent;
+ModalRoot.Card = ModalCard;
+ModalRoot.Close = ModalClose;
+const Modal = ModalRoot;
 
 const Navbar = ({ className, textColor, bgColor, color, transparent, fixed, children, ...props }) => {
     const { bulmaHelperClasses, rest } = useBulmaClasses({