reactive-bulma 3.0.0 → 3.2.0

package/dist/cjs/index.js

@@ -3319,6 +3319,16 @@ const Tile = ({ testId = null, cssClasses = null, style = null, children, contex
     return (React.createElement("section", { "data-testid": tileTestId, className: tileClasses, style: style !== null && style !== void 0 ? style : undefined }, children));
 };
 
+const NavBarItem = ({ testId = null, cssClasses = null, style = null, children, isActive = false, onClick = null }) => {
+    const navBarItemClasses = parseClasses([
+        'navbar-item',
+        isActive ? 'is-active' : null,
+        cssClasses
+    ]);
+    const navBarItemTestId = testId !== null && testId !== void 0 ? testId : parseTestId({ tag: 'navbar-item', parsedClasses: navBarItemClasses });
+    return (React.createElement("a", { "data-testid": navBarItemTestId, className: navBarItemClasses, style: style !== null && style !== void 0 ? style : undefined, "aria-hidden": 'true', onClick: onClick !== null && onClick !== void 0 ? onClick : undefined }, children));
+};
+
 const generateKey = (max = 5000, min = 1) => {
     max = Math.floor(max);
     min = Math.ceil(min);
@@ -3735,6 +3745,94 @@ const Section = ({ testId = null, cssClasses = null, style = null, content, size
     return (React.createElement("section", { "data-testid": sectionTestId, className: sectionClasses, style: style !== null && style !== void 0 ? style : undefined }, content));
 };
 
+/******************************************************************************
+Copyright (c) Microsoft Corporation.
+
+Permission to use, copy, modify, and/or distribute this software for any
+purpose with or without fee is hereby granted.
+
+THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
+REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
+AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
+INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
+LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
+OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
+PERFORMANCE OF THIS SOFTWARE.
+***************************************************************************** */
+/* global Reflect, Promise, SuppressedError, Symbol */
+
+
+function __rest(s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+}
+
+typeof SuppressedError === "function" ? SuppressedError : function (error, suppressed, message) {
+    var e = new Error(message);
+    return e.name = "SuppressedError", e.error = error, e.suppressed = suppressed, e;
+};
+
+const NavBarBrand = ({ testId = null, cssClasses = null, style = null, brandConfig, isBurgerActive = false }) => {
+    const navBarBrandClasses = parseClasses(['navbar-brand', cssClasses]);
+    const navBarBrandTestId = testId !== null && testId !== void 0 ? testId : parseTestId({ tag: 'navbar-brand', parsedClasses: navBarBrandClasses });
+    const navBarBurgerClasses = parseClasses([
+        'navbar-burger',
+        isBurgerActive ? 'is-active' : null
+    ]);
+    const navBarBurgerTestId = parseTestId({
+        tag: 'navbar-burger',
+        parsedClasses: navBarBurgerClasses
+    });
+    const { children } = brandConfig, brandItemConfig = __rest(brandConfig, ["children"]);
+    return (React.createElement("section", { "data-testid": navBarBrandTestId, className: navBarBrandClasses, style: style !== null && style !== void 0 ? style : undefined },
+        React.createElement(NavBarItem, Object.assign({}, brandItemConfig),
+            React.createElement(Image, Object.assign({}, children))),
+        React.createElement("a", { role: 'button', "data-testid": navBarBurgerTestId, className: navBarBurgerClasses, "aria-label": 'menu', "aria-expanded": 'false' },
+            React.createElement("span", { "aria-hidden": 'true' }),
+            React.createElement("span", { "aria-hidden": 'true' }),
+            React.createElement("span", { "aria-hidden": 'true' }))));
+};
+
+const renderDropdownItem = (dropdownItemConfig) => dropdownItemConfig === 'divider' ? (React.createElement("hr", { key: `navbar-dropdown-divider-${generateKey()}`, className: 'navbar-divider' })) : (React.createElement(NavBarItem, Object.assign({ key: `navbar-dropdown-item-${generateKey()}` }, dropdownItemConfig)));
+const NavBarDropdown = ({ testId = null, containerTestId = null, cssClasses = null, containerCssClasses = null, style = null, containerStyle = null, text, items, position = null, isActive = false, isHoverable = false, hasDropdownUp = false, hasBoxedMenu = false }) => {
+    const navBarDropdownContainerClasses = parseClasses([
+        'navbar-item',
+        'has-dropdown',
+        position,
+        isActive ? 'is-active' : null,
+        isHoverable ? 'is-hoverable' : null,
+        hasDropdownUp ? 'has-dropdown-up' : null,
+        containerCssClasses
+    ]);
+    const navBarDropdownContainerTestId = containerTestId !== null && containerTestId !== void 0 ? containerTestId : parseTestId({
+        tag: 'navbar-dropdown-container',
+        parsedClasses: navBarDropdownContainerClasses,
+        rules: [
+            { regExp: /navbar-item|has-dropdown/gm, replacer: '' },
+            { regExp: /is-|has-/gm, replacer: '-' }
+        ]
+    });
+    const navBarDropdownClasses = parseClasses([
+        'navbar-dropdown',
+        hasBoxedMenu ? 'is-boxed' : null,
+        cssClasses
+    ]);
+    const navBarDropdownTestId = testId !== null && testId !== void 0 ? testId : parseTestId({
+        tag: 'navbar-dropdown',
+        parsedClasses: navBarDropdownClasses
+    });
+    return (React.createElement("section", { "data-testid": navBarDropdownContainerTestId, className: navBarDropdownContainerClasses, style: containerStyle !== null && containerStyle !== void 0 ? containerStyle : undefined },
+        React.createElement("a", { className: 'navbar-link', "aria-hidden": 'true' }, text),
+        React.createElement("section", { "data-testid": navBarDropdownTestId, className: navBarDropdownClasses, style: style !== null && style !== void 0 ? style : undefined }, items.map(renderDropdownItem))));
+};
+
 const renderFieldLabel = (labelText) => labelText ? (React.createElement("label", { "data-testid": 'test-form-field-label', className: 'label' }, labelText)) : null;
 const renderFieldBody = (inputControlConfig, isGrouped) => {
     if (isGrouped) {
@@ -3837,12 +3935,57 @@ const TileGroup = ({ testId = null, cssClasses = null, style = null, context = '
     return (React.createElement(Tile, { testId: tileBoxTestId, cssClasses: cssClasses !== null && cssClasses !== void 0 ? cssClasses : undefined, style: style !== null && style !== void 0 ? style : undefined, context: context, size: size !== null && size !== void 0 ? size : undefined, isVertical: isVertical }, groupConfig.map(tileConfig => (React.createElement(Tile, Object.assign({ key: `tile-item-${generateKey()}` }, tileConfig))))));
 };
 
+const renderNavBarMenuSection = (menuSectionConfig, menuSection, testId) => menuSectionConfig ? (React.createElement("section", { "data-testid": `${testId}-${menuSection}`, className: `navbar-${menuSection}` }, menuSectionConfig.itemList.map(itemConfig => itemConfig.children !== undefined ? (React.createElement(NavBarItem, Object.assign({ key: `navbar-section${menuSection}-${generateKey()}` }, itemConfig))) : (React.createElement(NavBarDropdown, Object.assign({ key: `navbar-section${menuSection}-${generateKey()}` }, itemConfig)))))) : null;
+const NavBar = ({ testId = null, cssClasses = null, style = null, brandConfig = null, itemsAtStart = null, itemsAtEnd = null, fixedPosition = null, color = null, isTransparent = false, isSpaced = false, hasShadow = false }) => {
+    const navBarClasses = parseClasses([
+        'navbar',
+        fixedPosition,
+        color,
+        isTransparent ? 'is-transparent' : null,
+        isSpaced ? 'is-spaced' : null,
+        hasShadow ? 'has-shadow' : null,
+        cssClasses
+    ]);
+    const navBarTestId = testId !== null && testId !== void 0 ? testId : parseTestId({
+        tag: 'navbar',
+        parsedClasses: navBarClasses,
+        rules: [
+            { regExp: /is-|has-/gm, replacer: '-' },
+            { regExp: /navbar/gm, replacer: '' }
+        ]
+    });
+    return (React.createElement("nav", { "data-testid": navBarTestId, className: navBarClasses, style: style !== null && style !== void 0 ? style : undefined },
+        brandConfig ? (React.createElement("section", { "data-testid": 'navbar-brand', className: 'navbar-brand' }, React.createElement(NavBarBrand, Object.assign({}, brandConfig)))) : null,
+        React.createElement("section", { className: 'navbar-menu' },
+            renderNavBarMenuSection(itemsAtStart, 'start', navBarTestId),
+            renderNavBarMenuSection(itemsAtEnd, 'end', navBarTestId))));
+};
+
+const Card = ({ testId = null, cssClasses = null, style = null, headerText = null, image = null, content, footerLinks = null }) => {
+    const cardClasses = parseClasses(['card', cssClasses]);
+    const cardTestId = testId !== null && testId !== void 0 ? testId : parseTestId({ tag: 'card', parsedClasses: cardClasses });
+    return (React.createElement("section", { "data-testid": cardTestId, className: cardClasses, style: style !== null && style !== void 0 ? style : undefined },
+        headerText ? (React.createElement("header", { "data-testid": `${cardTestId}-header`, className: 'card-header' },
+            React.createElement("p", { className: 'card-header-title' }, headerText),
+            React.createElement("button", { className: 'card-header-icon', "aria-label": 'more options' },
+                React.createElement("span", { className: 'icon' },
+                    React.createElement("i", { className: 'fas fa-angle-down', "aria-hidden": 'true' }))))) : null,
+        image ? (React.createElement("section", { "data-testid": `${cardTestId}-image`, className: 'card-image' },
+            React.createElement(Image, Object.assign({}, image)))) : null,
+        React.createElement("section", { "data-testid": `${cardTestId}-content`, className: 'card-content' }, Array.isArray(content) ? (content.map((_contentConfig, i) => (React.createElement("section", { key: `card-content-item-${generateKey()}`, "data-testid": `${cardTestId}-content-item-${i}`, className: 'content' }, _contentConfig)))) : (React.createElement("section", { className: 'content' }, content))),
+        footerLinks ? (React.createElement("section", { className: 'card-footer' }, footerLinks.map((_footerConfig, i) => {
+            var _a;
+            return (React.createElement("a", { key: `card-footer-item-${generateKey()}`, "data-testid": `${cardTestId}-footer-item-${i}`, className: 'card-footer-item', "aria-hidden": 'true', onClick: (_a = _footerConfig.onClick) !== null && _a !== void 0 ? _a : undefined }, _footerConfig.text));
+        }))) : null));
+};
+
 exports.Block = Block;
 exports.Box = Box;
 exports.BreadcrumbItem = BreadcrumbItem;
 exports.Breadcrumbs = Breadcrumbs;
 exports.Button = Button;
 exports.ButtonGroup = ButtonGroup;
+exports.Card = Card;
 exports.Checkbox = CheckBox;
 exports.Column = Column;
 exports.ColumnGroup = ColumnGroup;
@@ -3867,6 +4010,10 @@ exports.MenuItem = MenuItem;
 exports.MenuList = MenuList;
 exports.Message = Message;
 exports.Modal = Modal;
+exports.NavBar = NavBar;
+exports.NavBarBrand = NavBarBrand;
+exports.NavBarDropdown = NavBarDropdown;
+exports.NavBarItem = NavBarItem;
 exports.Notification = Notification;
 exports.Pagination = Pagination;
 exports.PaginationItem = PaginationItem;