reactive-bulma 2.8.0 → 2.9.0

package/dist/cjs/index.js

@@ -3251,6 +3251,22 @@ const MenuItem = ({ testId = null, cssClasses = null, style = null, text, isActi
     return (React.createElement("a", { "data-testid": menuItemTestId, className: menuItemClasses, style: style !== null && style !== void 0 ? style : undefined, "aria-hidden": 'true', onClick: onClick !== null && onClick !== void 0 ? onClick : undefined }, text));
 };
 
+const Image = ({ testId = null, containerTestId = null, cssClasses = null, containerCssClasses = null, style = null, containerStyle = null, src, fixedSize = 'is-1by1', isRounded = false }) => {
+    const imageContainerClasses = parseClasses([
+        'image',
+        fixedSize,
+        containerCssClasses
+    ]);
+    const imageClasses = parseClasses([
+        isRounded ? 'is-rounded' : null,
+        cssClasses
+    ]);
+    const imageContainerTestId = containerTestId !== null && containerTestId !== void 0 ? containerTestId : parseTestId({ tag: 'image', parsedClasses: imageContainerClasses });
+    const imageTestId = testId !== null && testId !== void 0 ? testId : `${imageContainerTestId}-img`;
+    return (React.createElement("figure", { "data-testid": imageContainerTestId, className: imageContainerClasses, style: containerStyle !== null && containerStyle !== void 0 ? containerStyle : undefined },
+        React.createElement("img", { "data-testid": imageTestId, className: imageClasses, style: style !== null && style !== void 0 ? style : undefined, src: src })));
+};
+
 const PaginationItem = ({ testId = null, cssClasses = null, style = null, text, labelText = 'Page', currentLabelText = 'Go to page', isSelected = null, onClick = null }) => {
     const paginationItemClasses = parseClasses([
         'pagination-link',
@@ -3478,6 +3494,28 @@ const Pagination = ({ testId = null, containerTestId = null, cssClasses = null,
         React.createElement("ul", { "data-testid": paginationTestId, className: paginationClasses, style: style !== null && style !== void 0 ? style : undefined }, renderPages(pages, hasEllipsis, ellipsisItems))));
 };
 
+const Modal = ({ testId = null, containerTestId = null, cssClasses = null, containerCssClasses = null, style = null, containerStyle = null, children = null, onCloseClick = null }) => {
+    const [modalIsOpen, setModalIsOpen] = reactExports.useState(true);
+    const modalContainerClasses = parseClasses([
+        'modal',
+        'is-active',
+        containerCssClasses
+    ]);
+    const modalContainerTestId = containerTestId !== null && containerTestId !== void 0 ? containerTestId : parseTestId({ tag: 'modal', parsedClasses: modalContainerClasses });
+    const modalClasses = parseClasses(['modal-content', cssClasses]);
+    const modalTestId = testId !== null && testId !== void 0 ? testId : parseTestId({ tag: 'modal-content', parsedClasses: modalClasses });
+    const handleCloseClick = () => {
+        if (onCloseClick)
+            onCloseClick();
+        setModalIsOpen(false);
+    };
+    return (children &&
+        modalIsOpen && (React.createElement("section", { "data-testid": modalContainerTestId, className: modalContainerClasses, style: containerStyle !== null && containerStyle !== void 0 ? containerStyle : undefined },
+        React.createElement("section", { "data-testid": 'test-modal-background', className: 'modal-background', "aria-hidden": 'true', onClick: handleCloseClick }),
+        React.createElement("section", { "data-testid": modalTestId, className: modalClasses, style: style !== null && style !== void 0 ? style : undefined }, children),
+        React.createElement("button", { "data-testid": 'test-modal-close', className: 'modal-close is-large', "aria-label": 'close', onClick: handleCloseClick }))));
+};
+
 exports.Block = Block;
 exports.Box = Box;
 exports.BreadcrumbItem = BreadcrumbItem;
@@ -3493,11 +3531,13 @@ exports.DropdownItem = DropdownItem;
 exports.DropdownTrigger = DropdownTrigger;
 exports.File = File;
 exports.Icon = Icon;
+exports.Image = Image;
 exports.Input = Input;
 exports.Menu = Menu;
 exports.MenuItem = MenuItem;
 exports.MenuList = MenuList;
 exports.Message = Message;
+exports.Modal = Modal;
 exports.Notification = Notification;
 exports.Pagination = Pagination;
 exports.PaginationItem = PaginationItem;