reactive-bulma 2.8.0 → 2.9.0

package/dist/cjs/types/components/atoms/index.d.ts

@@ -17,4 +17,5 @@ export { default as BreadcrumbItem } from './BreadcrumbItem';
 export { default as DropdownTrigger } from './DropdownTrigger';
 export { default as DropdownItem } from './DropdownItem';
 export { default as MenuItem } from './MenuItem';
+export { default as Image } from './Image';
 export { default as PaginationItem } from './PaginationItem';

package/dist/cjs/types/components/molecules/Modal/index.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import { ModalProps } from '../../../interfaces/moleculeProps';
+declare const Modal: React.FC<ModalProps>;
+export default Modal;

package/dist/cjs/types/components/molecules/index.d.ts

@@ -7,3 +7,4 @@ export { default as Message } from './Message';
 export { default as Menu } from './Menu';
 export { default as MenuList } from './MenuList';
 export { default as Pagination } from './Pagination';
+export { default as Modal } from './Modal';

package/dist/cjs/types/interfaces/moleculeProps.d.ts

@@ -109,4 +109,10 @@ export interface PaginationProps extends ComposedElementProps {
     /** `Styling` Will adjust the pages position on screen */
     alignment?: elementAlignType | null;
 }
+export interface ModalProps extends ComposedElementProps {
+    /** `Attribute` Reffers to the component or array of components that will be shown inside the column */
+    children?: string | React.ReactElement | React.ReactElement[] | null;
+    /** `Function` Custom function related to the modal's close button to inject custom code if needed */
+    onCloseClick?: () => void;
+}
 export {};

package/dist/esm/index.js

@@ -3249,6 +3249,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',
@@ -3476,5 +3492,27 @@ 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))));
 };
 
-export { Block, Box, BreadcrumbItem, Breadcrumbs, Button, ButtonGroup, CheckBox as Checkbox, Column, ColumnGroup, Delete, Dropdown, DropdownItem, DropdownTrigger, File, Icon, Input, Menu, MenuItem, MenuList, Message, Notification, Pagination, PaginationItem, ProgressBar, RadioButton, Select, Tag, TextArea, Title };
+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 }))));
+};
+
+export { Block, Box, BreadcrumbItem, Breadcrumbs, Button, ButtonGroup, CheckBox as Checkbox, Column, ColumnGroup, Delete, Dropdown, DropdownItem, DropdownTrigger, File, Icon, Image, Input, Menu, MenuItem, MenuList, Message, Modal, Notification, Pagination, PaginationItem, ProgressBar, RadioButton, Select, Tag, TextArea, Title };
 //# sourceMappingURL=index.js.map