reactive-bulma 2.7.0 → 2.9.0

package/dist/cjs/index.js

@@ -1,7 +1,5 @@
 'use strict';
 
-var crypto = require('crypto');
-
 function styleInject(css, ref) {
   if ( ref === void 0 ) ref = {};
   var insertAt = ref.insertAt;
@@ -2867,7 +2865,7 @@ const parseKey = (max = 5000, min = 1) => {
     max = Math.floor(max);
     min = Math.ceil(min);
     const secureRandomNumbers = new Uint32Array(1);
-    crypto.getRandomValues(secureRandomNumbers);
+    window.crypto.getRandomValues(secureRandomNumbers);
     return Math.floor(secureRandomNumbers[0] * (max - min) + min).toString();
 };
 
@@ -2944,7 +2942,7 @@ const Tag = ({ testId = null, containerTestId = null, cssClasses = null, contain
     const tagDeleteTestId = `${tagTestId}-delete`;
     return withAddon ? (React.createElement("section", { "data-testid": tagContainerTestId, style: containerStyle !== null && containerStyle !== void 0 ? containerStyle : undefined, className: tagContainerClasses },
         React.createElement("span", { "data-testid": tagTestId, className: tagClasses }, text),
-        withDelete ? (React.createElement("a", { "data-testid": tagDeleteTestId, className: 'tag is-delete', "aria-hidden": 'true', onClick: onDeleteClick !== null && onDeleteClick !== void 0 ? onDeleteClick : undefined })) : (React.createElement("span", { className: tagAddonClasses }, addonText)))) : (React.createElement("span", { "data-testid": tagTestId, style: style !== null && style !== void 0 ? style : undefined, className: tagClasses },
+        withDelete ? (React.createElement("a", { "data-testid": tagDeleteTestId, className: 'tag is-delete', title: 'delete', "aria-hidden": 'true', onClick: onDeleteClick !== null && onDeleteClick !== void 0 ? onDeleteClick : undefined })) : (React.createElement("span", { className: tagAddonClasses }, addonText)))) : (React.createElement("span", { "data-testid": tagTestId, style: style !== null && style !== void 0 ? style : undefined, className: tagClasses },
         text,
         withDelete ? (React.createElement("button", { "data-testid": tagDeleteTestId, className: 'delete', onClick: onDeleteClick !== null && onDeleteClick !== void 0 ? onDeleteClick : undefined })) : null));
 };
@@ -2953,8 +2951,6 @@ const Box = ({ testId = 'test-box', cssClasses = 'box', style = null, children =
 
 const renderTitleSection = (section) => {
     var _a, _b;
-    if (!section)
-        return null;
     const { type, size, isSpaced, cssClasses } = section;
     const sectionClasses = parseClasses([
         type,
@@ -2966,8 +2962,8 @@ const renderTitleSection = (section) => {
     return (React.createElement("p", { "data-testid": sectionTestId, className: sectionClasses, style: (_b = section === null || section === void 0 ? void 0 : section.style) !== null && _b !== void 0 ? _b : undefined }, section === null || section === void 0 ? void 0 : section.text));
 };
 const Title = ({ main, secondary }) => (React.createElement(React.Fragment, null,
-    renderTitleSection(main),
-    renderTitleSection(secondary)));
+    main ? renderTitleSection(main) : null,
+    secondary ? renderTitleSection(secondary) : null));
 
 var IconSizeEnum;
 (function (IconSizeEnum) {
@@ -3255,6 +3251,36 @@ 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',
+        isSelected ? 'is-current' : null,
+        cssClasses
+    ]);
+    const paginationItemTestId = testId !== null && testId !== void 0 ? testId : parseTestId({
+        tag: 'pagination-link',
+        parsedClasses: paginationItemClasses
+    });
+    const parsedLabelText = isSelected ? currentLabelText : labelText;
+    return (React.createElement("a", { "data-testid": paginationItemTestId, className: paginationItemClasses, style: style !== null && style !== void 0 ? style : undefined, "aria-label": `${parsedLabelText} ${text}`, "aria-current": isSelected ? 'page' : undefined, "aria-hidden": 'true', onClick: onClick !== null && onClick !== void 0 ? onClick : undefined }, text));
+};
+
 const ButtonGroup = ({ testId = null, cssClasses = null, style = null, buttonList, isAttached = false, position = 'left' }) => {
     const buttonGroupClasses = parseClasses([
         'buttons',
@@ -3408,6 +3434,88 @@ const Menu = ({ testId = null, cssClasses = null, style = null, menuSections })
         React.createElement(MenuList, { key: `section-menu-list-${parseKey()}`, itemList: section.itemList }))))));
 };
 
+const renderEllipsis = (hasEllipsis) => hasEllipsis ? (React.createElement("li", null,
+    React.createElement("span", { "aria-hidden": 'true', className: 'pagination-ellipsis' }, "\u2026"))) : null;
+const renderNavigationButton = (navigationButton) => {
+    var _a;
+    if (!navigationButton)
+        return null;
+    const navigationButtonClasses = parseClasses([
+        navigationButton.cssClasses,
+        navigationButton.isDisabled ? 'is-disabled' : null
+    ]);
+    return (React.createElement("a", { className: navigationButtonClasses, onClick: (_a = navigationButton.onClick) !== null && _a !== void 0 ? _a : undefined, "aria-hidden": 'true' }, navigationButton.text));
+};
+const renderPages = (pages, hasEllipsis, ellipsisItems) => {
+    return pages.map((pageItem, pageIndex, { length }) => {
+        const lastEllipsisItemIndex = length - ellipsisItems - 1;
+        if (pageIndex === 0) {
+            return (React.createElement(React.Fragment, { key: `first-pagination-item` },
+                React.createElement(PaginationItem, Object.assign({}, pageItem)),
+                renderEllipsis(hasEllipsis)));
+        }
+        if (!hasEllipsis ||
+            (pageIndex > ellipsisItems && pageIndex < lastEllipsisItemIndex)) {
+            return (React.createElement(PaginationItem, Object.assign({ key: `pagination-item-${parseKey()}` }, pageItem)));
+        }
+        if (pageIndex === --length) {
+            return (React.createElement(React.Fragment, { key: `last-pagination-item` },
+                renderEllipsis(hasEllipsis),
+                React.createElement(PaginationItem, Object.assign({}, pageItem))));
+        }
+    });
+};
+const Pagination = ({ testId = null, containerTestId = null, cssClasses = null, containerCssClasses = null, style = null, containerStyle = null, pages, ellipsisItems = 0, showPreviousPageButton = {
+    text: 'Previous',
+    cssClasses: 'pagination-previous'
+}, showNextPageButton = {
+    text: 'Next page',
+    cssClasses: 'pagination-next'
+}, hasEllipsis = false, isRounded = false, alignment = null, size = null }) => {
+    const paginationContainerClasses = parseClasses([
+        'pagination',
+        isRounded ? 'is-rounded' : null,
+        size,
+        alignment,
+        cssClasses
+    ]);
+    const paginationContainerTestId = testId !== null && testId !== void 0 ? testId : parseTestId({
+        tag: 'pagination',
+        parsedClasses: paginationContainerClasses
+    });
+    const paginationClasses = parseClasses([
+        'pagination-list',
+        containerCssClasses
+    ]);
+    const paginationTestId = containerTestId !== null && containerTestId !== void 0 ? containerTestId : parseTestId({ tag: 'pagination-list', parsedClasses: paginationClasses });
+    return (React.createElement("nav", { "data-testid": paginationContainerTestId, className: paginationContainerClasses, style: containerStyle !== null && containerStyle !== void 0 ? containerStyle : undefined, role: 'navigation', "aria-label": 'pagination' },
+        renderNavigationButton(showPreviousPageButton),
+        renderNavigationButton(showNextPageButton),
+        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;
@@ -3423,12 +3531,16 @@ 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;
 exports.ProgressBar = ProgressBar;
 exports.RadioButton = RadioButton;
 exports.Select = Select;